I have Created few components for reusable purpose so end users can use the package and integrate with the application they are creating, for example (one of the component having @api property and a dispatch event):
<template>
<div class="blocx-ratings">
<div class="blocx-ratings_star">
<template if:false={variant}>
<ul>
<template for:each={ratingLength} for:item="item">
<lightning-icon size={size} key={item} icon-name="utility:favorite"></lightning-icon>
</template>
</ul>
</template>
</div>
</div>
</template>
import { LightningElement, api } from 'lwc';
import wcfBundle from '@salesforce/resourceUrl/wcfBundle';
import { loadStyle } from 'lightning/platformResourceLoader';
export default class BlocxRatings extends LightningElement {
@api size = "large";
@api variant ;
@api value;
ratingLength = [1, 2, 3, 4, 5];
ratingValue = 0;
renderedCallback() {
loadStyle(this, wcfBundle);
if(this.variant !== 'readonly'){
this.onClick();
}
else{
this.readOnlyRating(this.value);
}
}
onClick() {
const ul = this.template.querySelector('ul');
const stars = this.template.querySelectorAll('lightning-icon')
for (let i = 0; i <= stars.length - 1; i++) {
stars[i].addEventListener('click', () => {
this.ratingClicked(ul, i);
})
}
}
ratingClicked(element, value) {
this.ratingValue = value + 1;
for (let j = 0; j < element.children.length; j++) {
element.children[j].classList.remove('blocx-ratings_star_active');
}
for (let j = 0; j <= value; j++) {
element.children[j].classList.add('blocx-ratings_star_active');
}
this.dispatchEvent(new CustomEvent('ratingclick', { detail: { ratingValue: this.ratingValue } }))
}
readOnlyRating(value){
value--;
const ul = this.template.querySelector('ul');
for (let j = 0; j <= value; j++) {
ul.children[j].classList.add('blocx-ratings_star_active');
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__HomePage</target>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightningCommunity__Page</target>
<target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__AppPage,lightning__HomePage,lightning__RecordPage,lightningCommunity__Default">
<property name="size" type="String" />
<property name="variant" type="String" />
<property name="value" type="String" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>`
if i'm creating the component as a package the source code should be disabled and when the end user makes use of the package. They should be able access the component using selector(ex:c-blocx-ratings), @api property as attributes and dispatch event as a handler.
I tried with Both Unmanaged and Managed;
- In Unmanaged Package: Source code and attributes are visible (I don't want this way).
- In Managed Package: Source code is hidden but attributes are also not accessible in code side.
Do we have any possibilities to access defined attributes within managed packages components?