lightning-base-components 1.27.5-alpha → 1.28.4-alpha

package/src/lightning/pill/pill.js

@@ -8,13 +8,7 @@ import labelPillRemove from '@salesforce/label/LightningPill.remove';
 import labelPillWarning from '@salesforce/label/LightningPill.warning';
 import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { api, track } from 'lwc';
-import {
-    classListMutation,
-    normalizeBoolean,
-    sanitizeURL,
-    FALLBACK_URL,
-    reflectAttribute,
-} from 'lightning/utilsPrivate';
+import { classListMutation, normalizeBoolean, sanitizeURL, FALLBACK_URL, reflectAttribute, } from 'lightning/utilsPrivate';
 import { formatUrl } from 'lightning/utils';
 import { privateContext } from 'lightning/utilsInternal';
 import link from './link.html';
@@ -23,44 +17,32 @@ import plainLink from './plainLink.html';
 import { updateRawLinkInfo } from 'lightning/routingService';
 import { formatLabel } from 'lightning/utils';
 import { relatedTarget as buttonRelatedTarget } from 'lightning/buttonIcon';
-
 const { setContext, assertContext } = privateContext;
-
 const i18n = {
     pillError: labelPillError,
     pillRemove: labelPillRemove,
     pillWarning: labelPillWarning,
 };
-
 const VARIANT = {
     PLAIN: 'plain',
     PLAIN_LINK: 'plainLink',
     LINK: 'link',
 };
-
 export const relatedTarget = Symbol('relatedTarget');
-
 function modifyAttribute(el, name, value) {
     if (!el.isPlainLink) {
         if (value !== null && value !== undefined && value !== '') {
             el.setAttribute(name, value);
-        } else {
+        }
+        else {
             el.removeAttribute(name);
         }
-    } else {
+    }
+    else {
         el.removeAttribute(name);
     }
 }
-
-/**
- * A pill displays a label that can contain links and can be removed from view.
- * @slot default Placeholder for an image, such as an icon or avatar.
- */
 export default class LightningPill extends LightningShadowBaseClass {
-    /**
-     * The URL of the page that the link goes to.
-     * @type {string}
-     */
     @api
     get href() {
         return this._href;
@@ -77,46 +59,29 @@ export default class LightningPill extends LightningShadowBaseClass {
         }
     }
     _href;
-
-    /**
-     * The text label that displays in the pill.
-     * @type {string}
-     * @required
-     */
-    @api label;
-
-    /**
-     * The name for the pill. This value is optional and can be used to identify the pill in a callback.
-     * @type {string}
-     */
-    @api name;
-
-    @track _role;
-    @track _ariaSelected;
-    @track _hasMedia = true;
-    @track _hasError;
-    @track _tabIndex;
-    @track _standardContainer;
-    @track _variant;
-
-    /**
-     * The variant changes the appearance of the pill.
-     * Accepted variants include link, plain, and plainLink.
-     * The default variant is link, which creates a link in the pill when you specify the href attribute.
-     * The plain variant renders the pill without a link and ignores the href attribute.
-     * The plainLink variant is reserved for internal use.
-     * @type {string}
-     * @default link
-     */
-    // @api variant = VARIANT.LINK;
+    @api
+    label;
+    @api
+    name;
+    @track
+    _role;
+    @track
+    _ariaSelected;
+    @track
+    _hasMedia = true;
+    @track
+    _hasError;
+    @track
+    _tabIndex;
+    @track
+    _standardContainer;
+    @track
+    _variant;
     @api
     get variant() {
         return this._variant || VARIANT.LINK;
     }
-
     set variant(value) {
-        // work around for verification of accepted variants as normalizeString method does not
-        // account for camel case attribute values.
         const acceptedValues = [
             VARIANT.LINK,
             VARIANT.PLAIN,
@@ -124,29 +89,23 @@ export default class LightningPill extends LightningShadowBaseClass {
         ];
         if (acceptedValues.indexOf(value) !== -1) {
             this._variant = value;
-        } else {
+        }
+        else {
             this._variant = VARIANT.LINK;
         }
         reflectAttribute(this, 'variant', this._variant);
     }
-
     _connected = false;
-    _dispatcher = () => {};
-
+    _dispatcher = () => { };
     render() {
         if (this.isPlainLink) {
             return plainLink;
-        } else if (this.isPlain) {
+        }
+        else if (this.isPlain) {
             return plain;
         }
         return link;
     }
-
-    /**
-     * If present, the pill is shown with a red border and an error icon on the left of the label.
-     * @type {boolean}
-     * @default false
-     */
     @api
     get hasError() {
         return this._hasError || false;
@@ -154,63 +113,36 @@ export default class LightningPill extends LightningShadowBaseClass {
     set hasError(value) {
         this._hasError = normalizeBoolean(value);
     }
-
     checkMediaElement() {
         if (!this._mediaElement) {
             this._mediaElement = this.template.querySelector('slot');
         }
-        return (
-            this._mediaElement && this._mediaElement.assignedNodes().length > 0
-        );
+        return (this._mediaElement && this._mediaElement.assignedNodes().length > 0);
     }
     renderedCallback() {
-        // Avoid a timing issue due to LWC v6's native custom element lifecycle:
-        // https://github.com/salesforce/lwc/releases/v6.0.0#new-timing
-        // This check for slotted content needs to occur after the connectedCallbacks for the slotted
-        // components have already executed.
         Promise.resolve().then(() => {
-            // check if a component was passed into the slot
             this._hasMedia = this.checkMediaElement();
             const wrapper = this.template.querySelector('span');
-
             classListMutation(wrapper.classList, {
                 'slds-pill': true,
                 'slds-pill_link': this.isPlainLink || this.isLink,
                 'slds-has-error': this.hasError,
             });
-
-            // set attributes to self if variant is plain or link
             modifyAttribute(this, 'tabindex', this.tabIndex);
             modifyAttribute(this, 'role', this.role);
             modifyAttribute(this, 'aria-selected', this.ariaSelected);
         });
     }
-
-    /**
-     * Reserved for internal use. Specifies whether the element variant is a plain link.
-     * @type {boolean}
-     * @return {boolean} true if variant is a plain link.
-     */
     @api
     get isPlainLink() {
         return this.variant === VARIANT.PLAIN_LINK;
     }
-
     get isPlain() {
         return this.variant === VARIANT.PLAIN || !this.href;
     }
-
     get isLink() {
         return this.variant === VARIANT.LINK && !!this.href;
     }
-
-    /**
-     * Reserved for internal use. Use tabindex instead to indicate if an element should be focusable.
-     * A value of 0 means that the pill is focusable and
-     * participates in sequential keyboard navigation. A value of -1 means
-     * that the pill is focusable but does not participate in keyboard navigation.
-     * @type {number}
-     */
     @api
     get tabIndex() {
         return this._tabIndex;
@@ -219,11 +151,6 @@ export default class LightningPill extends LightningShadowBaseClass {
         this._tabIndex = value;
         modifyAttribute(this, 'tabindex', this._tabIndex);
     }
-
-    /**
-     * Reserved for internal use.
-     * Specifies the aria-selected of an element.
-     */
     @api
     get ariaSelected() {
         return this._ariaSelected;
@@ -232,11 +159,6 @@ export default class LightningPill extends LightningShadowBaseClass {
         this._ariaSelected = normalizeBoolean(value);
         modifyAttribute(this, 'aria-selected', this._ariaSelected);
     }
-
-    /**
-     * Reserved for internal use.
-     * Specifies the role of an element.
-     */
     @api
     get role() {
         return this._role;
@@ -245,15 +167,12 @@ export default class LightningPill extends LightningShadowBaseClass {
         this._role = value;
         modifyAttribute(this, 'role', this._role);
     }
-
     get i18n() {
         return i18n;
     }
-
     get hasHref() {
         return !!this.href;
     }
-
     get labelElement() {
         if (!this._labelElement) {
             this._labelElement =
@@ -261,32 +180,25 @@ export default class LightningPill extends LightningShadowBaseClass {
         }
         return this._labelElement;
     }
-
     get anchorElement() {
         if (!this._anchorElement) {
             this._anchorElement = this.template.querySelector('a');
         }
         return this._anchorElement;
     }
-
     get removeButtonElement() {
         if (!this._removeButtonElement) {
-            this._removeButtonElement = this.template.querySelector(
-                'lightning-button-icon'
-            );
+            this._removeButtonElement = this.template.querySelector('lightning-button-icon');
         }
         return this._removeButtonElement;
     }
-
     get computedPillRemoveLabel() {
         return formatLabel(this.i18n.pillRemove, this.label);
     }
-
     constructor() {
         super();
         setContext(this);
     }
-
     connectedCallback() {
         assertContext(this);
         super.connectedCallback();
@@ -295,25 +207,21 @@ export default class LightningPill extends LightningShadowBaseClass {
             this.updateLinkInfo(this.href);
         }
     }
-
     disconnectedCallback() {
         this._connected = false;
     }
-
     handleClick(event) {
         if (event.target === this.removeButtonElement) {
-            // click on the X button to remove the item
             this.handleRemoveClick(event);
-        } else if (this.isPlainLink || this.isLink) {
+        }
+        else if (this.isPlainLink || this.isLink) {
             this._dispatcher(event);
         }
     }
-
     handleRemoveClick(event) {
         event.preventDefault();
         this.handleRemove(event);
     }
-
     handleRemove(event) {
         const removeEvent = new CustomEvent('remove', {
             cancelable: true,
@@ -321,19 +229,11 @@ export default class LightningPill extends LightningShadowBaseClass {
                 name: this.name,
             },
         });
-
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
         this.dispatchEvent(removeEvent);
-
         if (removeEvent.defaultPrevented) {
             event.stopPropagation();
         }
     }
-
-    /**
-     * Reserved for internal use.
-     * Sets focus on the anchor element for a plainLink pill.
-     */
     @api
     focusLink() {
         const el = this.anchorElement;
@@ -341,11 +241,6 @@ export default class LightningPill extends LightningShadowBaseClass {
             el.focus();
         }
     }
-
-    /**
-     * Reserved for internal use.
-     * Sets focus on the remove button element for a plain pill.
-     */
     @api
     focusRemove() {
         const el = this.removeButtonElement;
@@ -353,43 +248,30 @@ export default class LightningPill extends LightningShadowBaseClass {
             el.focus();
         }
     }
-
     updateLinkInfo(url) {
         updateRawLinkInfo(this, { url }).then((linkInfo) => {
             this._url = linkInfo.url;
             this._dispatcher = linkInfo.dispatcher;
         });
     }
-
     dispatchBlurEvent(pillRelatedTarget) {
         this._hasFocus = false;
-        // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
-        this.dispatchEvent(
-            new CustomEvent('blur', {
-                detail: {
-                    [relatedTarget]: pillRelatedTarget,
-                },
-            })
-        );
-    }
-
+        this.dispatchEvent(new CustomEvent('blur', {
+            detail: {
+                [relatedTarget]: pillRelatedTarget,
+            },
+        }));
+    }
     handleFocus(event) {
         event.stopPropagation();
         if (!this._hasFocus) {
             this._hasFocus = true;
-            // eslint-disable-next-line @lwc/lwc/ssr-no-unsupported-properties
             this.dispatchEvent(new CustomEvent('focus'));
         }
     }
-
-    /**
-     * event.relatedTarget is the element which will receive focus next, this information
-     * is used by <lightning-pill-container> in its "onblur" event handler.
-     */
     handleBlur(event) {
         event.stopPropagation();
-        const pillRelatedTarget =
-            event.relatedTarget || event.detail?.[buttonRelatedTarget];
+        const pillRelatedTarget = event.relatedTarget || event.detail?.[buttonRelatedTarget];
         if (!pillRelatedTarget || !this.template.contains(pillRelatedTarget)) {
             this.dispatchBlurEvent(pillRelatedTarget);
         }

package/src/lightning/pillContainer/__examples__/basic/basic.d.ts

@@ -0,0 +1,23 @@
+export default class Basic extends LightningElement {
+    items: ({
+        type: string;
+        href: string;
+        label: string;
+        src: string;
+        fallbackIconName: string;
+        variant: string;
+        alternativeText: string;
+        isLink: boolean;
+    } | {
+        type: string;
+        href: string;
+        label: string;
+        src: string;
+        fallbackIconName: string;
+        variant: string;
+        alternativeText: string;
+        isLink?: undefined;
+    })[];
+}
+import { LightningElement } from 'lwc';
+//# sourceMappingURL=basic.d.ts.map

package/src/lightning/pillContainer/__examples__/basic/basic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic.d.ts","sourceRoot":"","sources":["../../../../../../../modules/lightning/pillContainer/__examples__/basic/basic.js"],"names":[],"mappings":"AAEA;IACI;;;;;;;;;;;;;;;;;;SA8BE;CACL;iCAlCgC,KAAK"}

package/src/lightning/pillContainer/__examples__/basic/basic.js

@@ -4,7 +4,6 @@
  * For full license text, see the LICENSE.txt file
  */
 import { LightningElement } from 'lwc';
-
 export default class Basic extends LightningElement {
     items = [
         {

package/src/lightning/pillContainer/pillContainer.d.ts

@@ -0,0 +1,58 @@
+export default class LightningPillContainer extends LightningShadowBaseClass {
+    label: string;
+    _variant: any;
+    _singleLine: boolean;
+    _isExpanded: boolean;
+    _isCollapsible: boolean;
+    _focusedIndex: number;
+    _focusedTabIndex: number;
+    _pillsNotFittingCount: any;
+    _pillContainerElementId: any;
+    _connected: boolean;
+    disconnectedCallback(): void;
+    renderedCallback(): void;
+    _resizeObserver: LightningResizeObserver;
+    get computedValueOfIsExpanded(): boolean;
+    get computedValueOfIsCollapsible(): boolean;
+    set variant(value: string);
+    get variant(): string;
+    set singleLine(value: boolean);
+    get singleLine(): boolean;
+    set isCollapsible(value: boolean);
+    get isCollapsible(): boolean;
+    set isExpanded(value: boolean);
+    get isExpanded(): boolean;
+    items: list;
+    get pills(): any[];
+    get pillViewModels(): {
+        pill: LightningPillItem;
+        tabIndex: number;
+    }[];
+    get computedWrapperClass(): "slds-pill_container" | "slds-listbox_selection-group";
+    get computedListboxClass(): string;
+    set focusedIndex(value: number);
+    get focusedIndex(): number;
+    _deleteLast: boolean;
+    get pillNodes(): any[] | NodeListOf<Element>;
+    get focusedNode(): any;
+    focus(): void;
+    handleRemove(removeEvent: any): void;
+    fireEvent(index: any): void;
+    setFocusedItemTabIndex(value: any): void;
+    switchFocusedIndex(newValue: any): void;
+    switchFocus(newValue: any): void;
+    handleKeyDown(event: any): void;
+    handlePillFocus(event: any): void;
+    _hasFocus: boolean;
+    handlePillBlur(event: any): void;
+    handleClick(): void;
+    handlePillClick(clickEvent: any): void;
+    handleMoreClick(): void;
+    get _showMore(): boolean;
+    get computedPillCountMoreLabel(): string;
+    _setupResizeObserver(): LightningResizeObserver;
+}
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
+import { LightningResizeObserver } from 'lightning/resizeObserver';
+import LightningPillItem from './pillItem';
+//# sourceMappingURL=pillContainer.d.ts.map

package/src/lightning/pillContainer/pillContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pillContainer.d.ts","sourceRoot":"","sources":["../../../../../modules/lightning/pillContainer/pillContainer.js"],"names":[],"mappings":"AA6BA;IAKI,OAFU,MAAM,CAEiB;IAEjC,cAAS;IACT,qBAAoB;IACpB,qBAAoB;IACpB,wBAAuB;IACvB,sBAAkB;IAClB,yBAAqB;IACrB,2BAAsB;IACtB,6BAAwB;IASpB,oBAAsB;IAG1B,6BAKC;IASD,yBA+BC;IAzBW,yCAAgC;IA2B5C,yCAMC;IAED,4CAMC;IAaD,2BAMC;IAXD,sBAGC;IAqBD,+BAGC;IARD,0BAGC;IAkBD,kCAEC;IAPD,6BAGC;IAkBD,+BAEC;IAPD,0BAGC;IAUD,YAAW;IAEX,mBAEC;IAED;;;QASC;IAED,mFAIC;IAGD,mCAGC;IAeD,gCAKC;IAlBD,2BAWC;IALO,qBAAwB;IAchC,6CAEC;IAED,uBAGC;IAKD,cAeC;IAED,qCAOC;IAED,4BAgBC;IAED,yCAKC;IAED,wCAOC;IAED,iCAGC;IAED,gCAkBC;IAED,kCAUC;IARO,mBAAqB;IAU7B,iCAYC;IAED,oBAEC;IAED,uCAUC;IAED,wBAEC;IAED,yBAIC;IAED,yCAaC;IAED,gDAmBC;CACJ;qCAlaoC,kCAAkC;wCAQ/B,0BAA0B;8BAPpC,YAAY"}