@tmorrow/cre8-wc 2.0.6 → 2.0.8

package/lib/components/modal/modal.js

@@ -28,7 +28,7 @@ import styles from './modal.styles.js';
  * @slot header - Custom header content for the modal
  * @slot footer - Custom footer content for the modal
  *
- * @fires close-modal - Fires when the modal is dismissed via the close button, overlay click, or Escape key.
+ * @fires modal-close - Fires when the modal is dismissed via the close button, overlay click, or Escape key.
  */
 export class Cre8Modal extends Cre8Element {
     constructor() {
@@ -79,7 +79,7 @@ export class Cre8Modal extends Cre8Element {
     handleCloseModal() {
         this.isActive = false;
         this.dispatch({
-            eventName: 'close-modal',
+            eventName: 'modal-close',
             detailObj: {
                 isActive: this.isActive,
             },

package/lib/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon.js';\nimport '@a11y/focus-trap';\nimport styles from './modal.styles.js';\n\n/**\n * Modal component should be used in all modal situations.\n * It is natuarally composable and can even have a custom header and remove the close button.\n * (note: adding `slot=\"header\"` will insert the given element into the header section of the modal,\n * same for `slot=\"footer\"` and no given slot name will inset it into the body)\n *\n * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,\n * and a UtilityModalTitle since all utility modals have a cre8-heading)\n * @slot - The component content\n * @slot header - Custom header content for the modal\n * @slot footer - Custom footer content for the modal\n *\n * @fires close-modal - Fires when the modal is dismissed via the close button, overlay click, or Escape key.\n */\nexport class Cre8Modal extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Query the modal window\n     */\n    @query('.cre8-c-modal__window')\n    _modalWindow: HTMLDivElement;\n\n    /**\n     * Is Active attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    isActive?: boolean;\n\n    /**\n     * Status Types\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**default (no value)** renders a default modal</li>\n     * <li>**error** renders an error modal</li>\n     * <li>**warning** renders a warning modal</li>\n     * <li>**success** renders a success modal</li>\n     * <li>**info** renders an info modal</li>\n     * <li>**help** renders an help modal</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n    status?: 'error' | 'warning' | 'success' | 'info' | 'help';\n\n    /**\n     * Utility Modal Heading (String)\n     */\n    @property()\n    utilityModalTitle: string;\n\n    /**\n     * Not dismissible modal\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * Close Button Text\n     */\n    @property()\n    closeButtonText: string = 'close';\n\n    /**\n     * Close Button Icon\n     */\n    @property()\n    closeButtonIcon: string = 'close';\n\n    /**\n     * Modal Aria Label - This is required for accessibility and provides context of the entire modal!\n     */\n    @property()\n    ariaLabel: string;\n\n    /**\n     * Handle keydown\n     * 1) Close the modal when escape is hit when the user is focused within the modal\n     */\n    handleKeydown(e: KeyboardEvent) {\n        if (e.code === 'Escape' && !this.notDismissible) {\n            this.handleCloseModal(); /* 2 */\n        }\n    }\n\n    /**\n     * Handle on close\n     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.\n     */\n    handleCloseModal() {\n        this.isActive = false;\n        this.dispatch({\n            eventName: 'close-modal',\n            detailObj: {\n                isActive: this.isActive,\n            },\n        });\n    }\n\n    /**\n     * Handle \"click outside\"\n     * 1) onClick of the area around the modal window, close the modal.\n     */\n\n    handleOnClickOutside(e: Event) {\n        const eventTarget = e.target as HTMLElement;\n        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {\n            this.handleCloseModal();\n        }\n    }\n\n    /**\n     * Lifecycle method to focus on modal\n     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.\n     * 2) Disable the body from scrolling behind while the modal is open.\n     */\n\n    updated(changedProperties: PropertyValues<this>) {\n        if (this.isActive === true) {\n            setTimeout(() => {\n                this._modalWindow.focus();\n            }, 200);\n        } /* 1 */\n\n        if (changedProperties.has('isActive')) {\n            const body = document.querySelector('body');\n            if (this.isActive) {\n                body.style.overflow = 'hidden';\n            } else {\n                body.style.removeProperty('overflow');\n            }\n        } /* 2 */\n    }\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be\n    * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)\n    * this provides the recommendated alt text of different statuses\n    */\n    mapStatusToIconModal = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgError} aria-hidden='true'></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;\n            default:\n                return null;\n        }\n    };\n\n    /**\n     * Lifecycle method on removal from the DOM\n     * Removed body overflow and handle close (isActive set to false)\n     */\n    disconnectedCallback() {\n        this.isActive = false;\n        const body = document.querySelector('body');\n        body.style.removeProperty('overflow');\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-modal', {\n            'cre8-is-active': this.isActive,\n            'cre8-c-modal--error': this.status === 'error',\n            'cre8-c-modal--warning': this.status === 'warning',\n            'cre8-c-modal--success': this.status === 'success',\n            'cre8-c-modal--info': this.status === 'info',\n            'cre8-c-modal--help': this.status === 'help',\n        });\n\n        return html`\n    <div class=\"${componentClassNames}\" @click=\"${this.handleOnClickOutside}\" @keydown=${this.handleKeydown}>\n    <focus-trap class=\"cre8-c-modal__focus-trap\" ?inactive=${!this.isActive}>\n        <div class=\"cre8-c-modal__window\" role=\"dialog\" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>\n        <div class=\"cre8-c-modal__header\">\n            ${this.status\n                ? html`<div class=\"cre8-c-modal__header-inner\">\n                ${this.mapStatusToIconModal(this.status)}\n                <cre8-heading type=\"title-large\" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>\n                </div>`\n                : html`<slot name=\"header\"></slot>`}\n        ${!this.notDismissible\n                ? html`<cre8-button\n                class=\"cre8-c-modal__close-button\"\n                variant=\"tertiary\"\n                svg=${svgClose}\n                iconPosition=\"after\"\n                ?inverted=${!this.status}\n                @click=${this.handleCloseModal}\n                ></cre8-button>`\n                : ''}\n        </div>\n        <div class=\"cre8-c-modal__body\">\n            <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`<div class=\"cre8-c-modal__footer\"><slot name=\"footer\"></slot></div>`}\n        </div>\n    </focus-trap>\n    </div>\n`;\n    }\n}\n\nif (customElements.get('cre8-modal') === undefined) {\n    customElements.define('cre8-modal', Cre8Modal);\n}\n\nexport interface CloseModalEvent extends CustomEvent<{ isActive: boolean }> {\n    type: 'close-modal';\n    currentTarget: Cre8Modal;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-modal': Cre8Modal;\n    }\n}\n"]}
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon.js';\nimport '@a11y/focus-trap';\nimport styles from './modal.styles.js';\n\n/**\n * Modal component should be used in all modal situations.\n * It is natuarally composable and can even have a custom header and remove the close button.\n * (note: adding `slot=\"header\"` will insert the given element into the header section of the modal,\n * same for `slot=\"footer\"` and no given slot name will inset it into the body)\n *\n * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,\n * and a UtilityModalTitle since all utility modals have a cre8-heading)\n * @slot - The component content\n * @slot header - Custom header content for the modal\n * @slot footer - Custom footer content for the modal\n *\n * @fires modal-close - Fires when the modal is dismissed via the close button, overlay click, or Escape key.\n */\nexport class Cre8Modal extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Query the modal window\n     */\n    @query('.cre8-c-modal__window')\n    _modalWindow: HTMLDivElement;\n\n    /**\n     * Is Active attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    isActive?: boolean;\n\n    /**\n     * Status Types\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**default (no value)** renders a default modal</li>\n     * <li>**error** renders an error modal</li>\n     * <li>**warning** renders a warning modal</li>\n     * <li>**success** renders a success modal</li>\n     * <li>**info** renders an info modal</li>\n     * <li>**help** renders an help modal</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n    status?: 'error' | 'warning' | 'success' | 'info' | 'help';\n\n    /**\n     * Utility Modal Heading (String)\n     */\n    @property()\n    utilityModalTitle: string;\n\n    /**\n     * Not dismissible modal\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * Close Button Text\n     */\n    @property()\n    closeButtonText: string = 'close';\n\n    /**\n     * Close Button Icon\n     */\n    @property()\n    closeButtonIcon: string = 'close';\n\n    /**\n     * Modal Aria Label - This is required for accessibility and provides context of the entire modal!\n     */\n    @property()\n    ariaLabel: string;\n\n    /**\n     * Handle keydown\n     * 1) Close the modal when escape is hit when the user is focused within the modal\n     */\n    handleKeydown(e: KeyboardEvent) {\n        if (e.code === 'Escape' && !this.notDismissible) {\n            this.handleCloseModal(); /* 2 */\n        }\n    }\n\n    /**\n     * Handle on close\n     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.\n     */\n    handleCloseModal() {\n        this.isActive = false;\n        this.dispatch({\n            eventName: 'modal-close',\n            detailObj: {\n                isActive: this.isActive,\n            },\n        });\n    }\n\n    /**\n     * Handle \"click outside\"\n     * 1) onClick of the area around the modal window, close the modal.\n     */\n\n    handleOnClickOutside(e: Event) {\n        const eventTarget = e.target as HTMLElement;\n        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {\n            this.handleCloseModal();\n        }\n    }\n\n    /**\n     * Lifecycle method to focus on modal\n     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.\n     * 2) Disable the body from scrolling behind while the modal is open.\n     */\n\n    updated(changedProperties: PropertyValues<this>) {\n        if (this.isActive === true) {\n            setTimeout(() => {\n                this._modalWindow.focus();\n            }, 200);\n        } /* 1 */\n\n        if (changedProperties.has('isActive')) {\n            const body = document.querySelector('body');\n            if (this.isActive) {\n                body.style.overflow = 'hidden';\n            } else {\n                body.style.removeProperty('overflow');\n            }\n        } /* 2 */\n    }\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be\n    * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)\n    * this provides the recommendated alt text of different statuses\n    */\n    mapStatusToIconModal = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgError} aria-hidden='true'></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;\n            default:\n                return null;\n        }\n    };\n\n    /**\n     * Lifecycle method on removal from the DOM\n     * Removed body overflow and handle close (isActive set to false)\n     */\n    disconnectedCallback() {\n        this.isActive = false;\n        const body = document.querySelector('body');\n        body.style.removeProperty('overflow');\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-modal', {\n            'cre8-is-active': this.isActive,\n            'cre8-c-modal--error': this.status === 'error',\n            'cre8-c-modal--warning': this.status === 'warning',\n            'cre8-c-modal--success': this.status === 'success',\n            'cre8-c-modal--info': this.status === 'info',\n            'cre8-c-modal--help': this.status === 'help',\n        });\n\n        return html`\n    <div class=\"${componentClassNames}\" @click=\"${this.handleOnClickOutside}\" @keydown=${this.handleKeydown}>\n    <focus-trap class=\"cre8-c-modal__focus-trap\" ?inactive=${!this.isActive}>\n        <div class=\"cre8-c-modal__window\" role=\"dialog\" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>\n        <div class=\"cre8-c-modal__header\">\n            ${this.status\n                ? html`<div class=\"cre8-c-modal__header-inner\">\n                ${this.mapStatusToIconModal(this.status)}\n                <cre8-heading type=\"title-large\" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>\n                </div>`\n                : html`<slot name=\"header\"></slot>`}\n        ${!this.notDismissible\n                ? html`<cre8-button\n                class=\"cre8-c-modal__close-button\"\n                variant=\"tertiary\"\n                svg=${svgClose}\n                iconPosition=\"after\"\n                ?inverted=${!this.status}\n                @click=${this.handleCloseModal}\n                ></cre8-button>`\n                : ''}\n        </div>\n        <div class=\"cre8-c-modal__body\">\n            <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`<div class=\"cre8-c-modal__footer\"><slot name=\"footer\"></slot></div>`}\n        </div>\n    </focus-trap>\n    </div>\n`;\n    }\n}\n\nif (customElements.get('cre8-modal') === undefined) {\n    customElements.define('cre8-modal', Cre8Modal);\n}\n\nexport interface CloseModalEvent extends CustomEvent<{ isActive: boolean }> {\n    type: 'modal-close';\n    currentTarget: Cre8Modal;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-modal': Cre8Modal;\n    }\n}\n"]}

package/lib/components/multi-select/multi-select.d.ts

@@ -9,12 +9,12 @@ import '../checkbox-field-item/checkbox-field-item';
  * The checkbox will always reflect the selected nature of the item and is not removed
  * from the dropdown when clicked, the tags will be added and removed based on their state.
  *
- * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * Event `multi-select-change` emits whenever a tag is added or remove from the list and the
  * current list after the change is given in the detail.
  *
  * @slot fieldNote - Container for optional field note content
  *
- * @fires selectedItemsChange - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
+ * @fires multi-select-change - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
  */
 export declare class Cre8MultiSelect extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/multi-select/multi-select.js

@@ -26,12 +26,12 @@ import '../checkbox-field-item/checkbox-field-item';
  * The checkbox will always reflect the selected nature of the item and is not removed
  * from the dropdown when clicked, the tags will be added and removed based on their state.
  *
- * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the
+ * Event `multi-select-change` emits whenever a tag is added or remove from the list and the
  * current list after the change is given in the detail.
  *
  * @slot fieldNote - Container for optional field note content
  *
- * @fires selectedItemsChange - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
+ * @fires multi-select-change - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.
  */
 export class Cre8MultiSelect extends Cre8Element {
     /* Life Cycle Methods */
@@ -91,7 +91,7 @@ export class Cre8MultiSelect extends Cre8Element {
           color="neutral"
           shape="square"
           ?disabled="${this.disabled}"
-          @removeTagClicked="${() => this._handleRemoveTagClick(item)}"
+          @remove-tag-click="${() => this._handleRemoveTagClick(item)}"
         ></cre8-remove-tag>
       </li>`);
     }
@@ -116,14 +116,14 @@ export class Cre8MultiSelect extends Cre8Element {
         }
     }
     emitSelectedItems() {
-        const customEvent = new CustomEvent('selectedItemsChange', {
+        const customEvent = new CustomEvent('multi-select-change', {
             detail: {
                 selectedItems: this.selectedTagItems,
             },
             bubbles: true,
             composed: true,
         });
-        this.dispatchEvent(customEvent);
+        this.dispatchWithLegacyAlias(customEvent);
     }
     toggleDropDown() {
         this.dropdownOpen = !this.dropdownOpen;

package/lib/components/multi-select/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\n/* eslint-disable no-duplicate-imports */\n/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { html, nothing, } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down.svg?raw';\nimport svgClear from '@tmorrow/cre8-wc/icons/Clear_X.svg?raw';\nimport styles from './multi-select.styles.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../remove-tag/remove-tag';\nimport '../field-note/field-note';\nimport '../button/button';\nimport '../checkbox-field-item/checkbox-field-item';\n// eslint-disable-next-line import/no-named-as-default\nimport Cre8CheckboxFieldItem from '../checkbox-field-item/checkbox-field-item';\n\n/**\n * Multiselect is used when multiple options can be chosen from a static dropdown\n * This component has a list of items in the dropdown that can be added as \"selected tags\"\n * The checkbox will always reflect the selected nature of the item and is not removed\n * from the dropdown when clicked, the tags will be added and removed based on their state.\n *\n * Event `selectedItemsChange` emits whenever a tag is added or remove from the list and the\n * current list after the change is given in the detail.\n *\n * @slot fieldNote - Container for optional field note content\n *\n * @fires selectedItemsChange - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.\n */\nexport class Cre8MultiSelect extends Cre8Element {\n  static styles = [styles];\n\n\n  /**\n   * The list of string items the user can choose in the dropdown\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  items: string[] = [];\n\n  @state()\n  selectedTagItems: string[] = [];\n\n  /**\n   * The list of string items that are initially in the selected list of tags\n   * Note: This list MUST be a subset of the array of items to function.\n   * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid\n   * while preselectedItems=['cat', 'goat'] is not and will break the component.\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  preselectedItems: string[];\n\n  @state()\n  dropdownOpen: boolean = false;\n\n  /**\n   * The required label that appears above the multiselect\n   * @attr {string}\n   */\n  @property()\n  label: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /* Life Cycle Methods */\n\n  constructor() {\n    super();\n    this._handleOnClick = this._handleOnClick.bind(this);\n  }\n\n  firstUpdated() {\n    if (this.preselectedItems) this.setPreselectedItemsinDropdown();\n    this.selectedTagItems = this.preselectedItems || [];\n    this._initializeAria();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('click', this._handleOnClick, false);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this._handleOnClick, false);\n  }\n\n  /* HTML Content functions */\n\n  private _renderDropdownItems() {\n    return this.items.map(\n      // Note: Keyboard can already navigate to the checkbox\n      // eslint-disable-next-line lit-a11y/click-events-have-key-events\n      (item, index) => html`<li\n        @click=\"${(e: MouseEvent) => this._handleListItemClick(e, index)}\"\n      >\n        <cre8-checkbox-field-item\n          .checked=\"${!!this.selectedTagItems.includes(item)}\"\n          label=${item}\n          id=${index}\n          @input=\"${(e: InputEvent) => this._handleDropdownItemInput(item, e)}\"\n        >\n        </cre8-checkbox-field-item>\n      </li>`\n    );\n  }\n\n  private _renderSelectedTags() {\n    if (!this.selectedTagItems.length) {\n      return nothing;\n    }\n    return this.selectedTagItems.map(\n      (item) => html`<li>\n        <cre8-remove-tag\n          text=\"${item}\"\n          color=\"neutral\"\n          shape=\"square\"\n          ?disabled=\"${this.disabled}\"\n          @removeTagClicked=\"${() => this._handleRemoveTagClick(item)}\"\n        ></cre8-remove-tag>\n      </li>`\n    );\n  }\n\n  /* Helper Functions */\n\n  private setPreselectedItemsinDropdown() {\n    this.preselectedItems.forEach((item) => {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    });\n  }\n\n  private clearAllTags() {\n    if (!this.disabled) {\n      if (this.dropdownOpen) {\n        this.selectedTagItems.forEach((item) => {\n          this.shadowRoot\n            ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n            .shadowRoot?.querySelector('input')\n            .click();\n        });\n      }\n      this.selectedTagItems = [];\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private emitSelectedItems(): void {\n    const customEvent = new CustomEvent('selectedItemsChange', {\n      detail: {\n        selectedItems: this.selectedTagItems,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  private toggleDropDown(): void {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  /* Click Event Functions */\n\n  private _handleOnClick(event?: MouseEvent) {\n    if (!this.shadowRoot?.host) {\n      throw Error(\n        'Could not determine navigation context during click handler'\n      );\n    }\n\n    const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n    const label = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__label'\n    );\n    const buttonsWrapper = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__icons-wrapper'\n    );\n    const removeTagWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__tag-wrapper'\n    );\n    const dropdownWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__dropdown'\n    );\n\n    if (!didClickInside) {\n      this.dropdownOpen = false;\n    } else if (\n      !event.composedPath().includes(label)\n      && !event.composedPath().includes(removeTagWrapper)\n      && !event.composedPath().includes(buttonsWrapper)\n      && !event.composedPath().includes(dropdownWrapper)\n      && !this.disabled\n    ) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleListItemClick(e: MouseEvent, index: number) {\n    if (\n      e.target\n      !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n    ) {\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n    }\n  }\n\n  private _handleDropdownItemInput(item: string, e: InputEvent) {\n    const targetCheckbox = e.target as Cre8CheckboxFieldItem;\n\n    if (targetCheckbox.checked) {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    } else {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n    }\n\n    this.emitSelectedItems();\n  }\n\n  private async _handleRemoveTagClick(item: string) {\n    if (!this.disabled) {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n      await this.updateComplete;\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private dropdownArrowClick() {\n    if (!this.disabled) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleButtonToListKeydown(e: KeyboardEvent): void {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n\n  private _handleListKeydown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-success\"\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames(\n      'cre8-c-multi-select',\n      {\n        'cre8-is-error': this.isError,\n        'cre8-is-success': this.isSuccess,\n        'cre8-is-disabled': this.disabled,\n        'cre8-c-multi-select--no-clear-icon': !this.selectedTagItems.length,\n      }\n    );\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-multi-select__label\" id=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-multi-select__body\" ?disabled=${this.disabled}>\n          <div\n            class=\"cre8-c-multi-select__content\"\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n          >\n            <ul\n              class=\"cre8-c-multi-select__tag-wrapper\"\n              aria-label=\"selected items\"\n            >\n              ${this._renderSelectedTags()}\n            </ul>\n          </div>\n          <div class=\"cre8-c-multi-select__icons-wrapper\">\n            <cre8-button\n              ?hideText=${true}\n              svg=\"${svgClear}\"\n              text=\"Clear All\"\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__clear_icon\"\n              @click=\"${this.clearAllTags}\"\n            >\n            </cre8-button>\n            <cre8-button\n              hideText\n              svg=${svgCaretDown}\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__down_icon\"\n              @click=\"${this.dropdownArrowClick}\"\n              @keydown=\"${this._handleButtonToListKeydown}\"\n              text=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n            >\n            </cre8-button>\n          </div>\n        </div>\n        ${this.dropdownOpen\n        ? html`\n            <fieldset class=\"cre8-c-multi-select__dropdown\" aria-describedby=\"${this.fieldId}\">\n              <ul\n                aria-label=\"available items\"\n                @keydown=\"${this._handleListKeydown}\"\n              >\n                ${this._renderDropdownItems()}\n              </ul>\n            </fieldset>`\n        : nothing}\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-multi-select__field-note\"\n          >\n            <slot name=\"fieldNote\">${this.fieldNote}</slot>\n          </cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-multi-select') === undefined) {\n  customElements.define('cre8-multi-select', Cre8MultiSelect);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-multi-select': Cre8MultiSelect;\n  }\n}\n\nexport default Cre8MultiSelect;\n"]}
+{"version":3,"file":"multi-select.js","sourceRoot":"","sources":["../../../components/multi-select/multi-select.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/no-duplicates */\n/* eslint-disable no-duplicate-imports */\n/* eslint-disable lit/no-template-arrow */\n/* eslint-disable indent */\n\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { html, nothing, } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down.svg?raw';\nimport svgClear from '@tmorrow/cre8-wc/icons/Clear_X.svg?raw';\nimport styles from './multi-select.styles.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../remove-tag/remove-tag';\nimport '../field-note/field-note';\nimport '../button/button';\nimport '../checkbox-field-item/checkbox-field-item';\n// eslint-disable-next-line import/no-named-as-default\nimport Cre8CheckboxFieldItem from '../checkbox-field-item/checkbox-field-item';\n\n/**\n * Multiselect is used when multiple options can be chosen from a static dropdown\n * This component has a list of items in the dropdown that can be added as \"selected tags\"\n * The checkbox will always reflect the selected nature of the item and is not removed\n * from the dropdown when clicked, the tags will be added and removed based on their state.\n *\n * Event `multi-select-change` emits whenever a tag is added or remove from the list and the\n * current list after the change is given in the detail.\n *\n * @slot fieldNote - Container for optional field note content\n *\n * @fires multi-select-change - Fires when a tag is added or removed. `event.detail.selectedItems` is the current selection.\n */\nexport class Cre8MultiSelect extends Cre8Element {\n  static styles = [styles];\n\n\n  /**\n   * The list of string items the user can choose in the dropdown\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  items: string[] = [];\n\n  @state()\n  selectedTagItems: string[] = [];\n\n  /**\n   * The list of string items that are initially in the selected list of tags\n   * Note: This list MUST be a subset of the array of items to function.\n   * i.e. if items=['cat', 'dog', 'bird'], preselectedItems=['cat'] is valid\n   * while preselectedItems=['cat', 'goat'] is not and will break the component.\n   *\n   * Note: For passing props containing arrays and complex types, you should pass the props using a\n   * period in from of the prop like so: `.items=\"[]\"`\n   * (this is only needed for Web Components and not the React version)\n   * @attr {string[]}\n   */\n  @property({ type: Array })\n  preselectedItems: string[];\n\n  @state()\n  dropdownOpen: boolean = false;\n\n  /**\n   * The required label that appears above the multiselect\n   * @attr {string}\n   */\n  @property()\n  label: string;\n\n  /**\n   * The unique id of the select\n   * @attr {string}\n   */\n\n  @property()\n  fieldId?: string;\n\n  /**\n   * Optional field note text can be added to provide additional field guidance.\n   * @attr {string}\n   */\n  @property()\n  fieldNote?: string;\n\n  /**\n   * Used to connect the field note in text field to the text menu for accessibility\n   * @attr {string}\n   */\n  @property()\n  ariaDescribedBy?: string;\n\n  /**\n   * Additional aria-describedby connection to id for additional success and error notes to be accessible\n   * @attr {string}\n   */\n  @property()\n  validationAriaDescribedBy?: string;\n\n  /**\n   * The disabled attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled?: boolean;\n\n  /**\n   * Changes the component's treatment to represent an error state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isError?: boolean;\n\n  /**\n   * The error field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  errorNote?: string;\n\n  /**\n   * Changes the component's treatment to represent a success state\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  isSuccess?: boolean;\n\n  /**\n   * The success field note that appears below the default field note\n   * @attr {string}\n   */\n  @property()\n  successNote?: string;\n\n  /* Life Cycle Methods */\n\n  constructor() {\n    super();\n    this._handleOnClick = this._handleOnClick.bind(this);\n  }\n\n  firstUpdated() {\n    if (this.preselectedItems) this.setPreselectedItemsinDropdown();\n    this.selectedTagItems = this.preselectedItems || [];\n    this._initializeAria();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('click', this._handleOnClick, false);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener('click', this._handleOnClick, false);\n  }\n\n  /* HTML Content functions */\n\n  private _renderDropdownItems() {\n    return this.items.map(\n      // Note: Keyboard can already navigate to the checkbox\n      // eslint-disable-next-line lit-a11y/click-events-have-key-events\n      (item, index) => html`<li\n        @click=\"${(e: MouseEvent) => this._handleListItemClick(e, index)}\"\n      >\n        <cre8-checkbox-field-item\n          .checked=\"${!!this.selectedTagItems.includes(item)}\"\n          label=${item}\n          id=${index}\n          @input=\"${(e: InputEvent) => this._handleDropdownItemInput(item, e)}\"\n        >\n        </cre8-checkbox-field-item>\n      </li>`\n    );\n  }\n\n  private _renderSelectedTags() {\n    if (!this.selectedTagItems.length) {\n      return nothing;\n    }\n    return this.selectedTagItems.map(\n      (item) => html`<li>\n        <cre8-remove-tag\n          text=\"${item}\"\n          color=\"neutral\"\n          shape=\"square\"\n          ?disabled=\"${this.disabled}\"\n          @remove-tag-click=\"${() => this._handleRemoveTagClick(item)}\"\n        ></cre8-remove-tag>\n      </li>`\n    );\n  }\n\n  /* Helper Functions */\n\n  private setPreselectedItemsinDropdown() {\n    this.preselectedItems.forEach((item) => {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    });\n  }\n\n  private clearAllTags() {\n    if (!this.disabled) {\n      if (this.dropdownOpen) {\n        this.selectedTagItems.forEach((item) => {\n          this.shadowRoot\n            ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n            .shadowRoot?.querySelector('input')\n            .click();\n        });\n      }\n      this.selectedTagItems = [];\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private emitSelectedItems(): void {\n    const customEvent = new CustomEvent('multi-select-change', {\n      detail: {\n        selectedItems: this.selectedTagItems,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchWithLegacyAlias(customEvent);\n  }\n\n  private toggleDropDown(): void {\n    this.dropdownOpen = !this.dropdownOpen;\n  }\n\n  /* Click Event Functions */\n\n  private _handleOnClick(event?: MouseEvent) {\n    if (!this.shadowRoot?.host) {\n      throw Error(\n        'Could not determine navigation context during click handler'\n      );\n    }\n\n    const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n    const label = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__label'\n    );\n    const buttonsWrapper = this.renderRoot.querySelector(\n      '.cre8-c-multi-select__icons-wrapper'\n    );\n    const removeTagWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__tag-wrapper'\n    );\n    const dropdownWrapper = this.shadowRoot?.querySelector(\n      '.cre8-c-multi-select__dropdown'\n    );\n\n    if (!didClickInside) {\n      this.dropdownOpen = false;\n    } else if (\n      !event.composedPath().includes(label)\n      && !event.composedPath().includes(removeTagWrapper)\n      && !event.composedPath().includes(buttonsWrapper)\n      && !event.composedPath().includes(dropdownWrapper)\n      && !this.disabled\n    ) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleListItemClick(e: MouseEvent, index: number) {\n    if (\n      e.target\n      !== this.shadowRoot?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n    ) {\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[id=\"${index}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n    }\n  }\n\n  private _handleDropdownItemInput(item: string, e: InputEvent) {\n    const targetCheckbox = e.target as Cre8CheckboxFieldItem;\n\n    if (targetCheckbox.checked) {\n      this.selectedTagItems = this.selectedTagItems.concat(item);\n    } else {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n    }\n\n    this.emitSelectedItems();\n  }\n\n  private async _handleRemoveTagClick(item: string) {\n    if (!this.disabled) {\n      this.selectedTagItems = this.selectedTagItems.filter((i) => i !== item);\n      this.shadowRoot\n        ?.querySelector(`cre8-checkbox-field-item[label=\"${item}\"]`)\n        .shadowRoot?.querySelector('input')\n        .click();\n      await this.updateComplete;\n\n      this.emitSelectedItems();\n    }\n  }\n\n  private dropdownArrowClick() {\n    if (!this.disabled) {\n      this.toggleDropDown();\n    }\n  }\n\n  private _handleButtonToListKeydown(e: KeyboardEvent): void {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n\n  private _handleListKeydown(e: KeyboardEvent) {\n    if (e.code === 'Escape') {\n      e.preventDefault();\n      this.toggleDropDown();\n    }\n  }\n\n  private _initializeAria() {\n    this.fieldId = this.fieldId || nanoid();\n    if (this.fieldNote || this.slotNotEmpty('fieldNote')) {\n      this.ariaDescribedBy = this.ariaDescribedBy || nanoid();\n    }\n    if (this.successNote || this.errorNote) {\n      this.validationAriaDescribedBy = this.validationAriaDescribedBy || nanoid();\n    }\n  }\n\n  /**\n   * Aria describedby string based on field notes and error/success notes\n   * 1) If both validationAriaDescribedBy (error/success note) and field note exists,\n   * render both in the input's `aria-describedby` attribute\n   * 2) Otherwise, if only validationAriaDescribedBy exists, then render only that as\n   * the `aria-describedby` attribute (input without field note initially, but then error/success is added).\n   * 3) Otherwise, render only the `ariaDescribedBy` property (field note only)\n   */\n  private _fieldNoteAria() {\n    if (this.validationAriaDescribedBy && this.ariaDescribedBy) {\n      return `${this.ariaDescribedBy} ${this.validationAriaDescribedBy}`; /* 1 */\n    }\n    if (this.validationAriaDescribedBy && !this.ariaDescribedBy) {\n      return this.validationAriaDescribedBy; /* 2 */\n    }\n    return this.ariaDescribedBy; /* 3 */\n  }\n\n  /**\n   * Render the success or error field notes\n   * 1. If there is a successNote, then return the field note with the success message and state.\n   * 2. If there is a errorNote, then return the field note with the error message and state.\n   */\n  private _renderSuccessErrorFieldNote() {\n    if (this.successNote) {\n      /* 1 */\n      return html` <cre8-field-note\n        ?isSuccess=${this.isSuccess}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-success\"\n        iconName=\"success\"\n      >\n        ${this.successNote}\n      </cre8-field-note>`;\n    }\n    if (this.errorNote) {\n      /* 2 */\n      return html` <cre8-field-note\n        ?isError=${this.isError}\n        id=${this.validationAriaDescribedBy}\n        class=\"cre8-c-multi-select__field-note-error\"\n        iconName=\"error-alt\"\n      >\n        ${this.errorNote}\n      </cre8-field-note>`;\n    }\n    return null;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames(\n      'cre8-c-multi-select',\n      {\n        'cre8-is-error': this.isError,\n        'cre8-is-success': this.isSuccess,\n        'cre8-is-disabled': this.disabled,\n        'cre8-c-multi-select--no-clear-icon': !this.selectedTagItems.length,\n      }\n    );\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-multi-select__label\" id=\"${this.fieldId}\"\n          >${this.label}</label\n        >\n        <div class=\"cre8-c-multi-select__body\" ?disabled=${this.disabled}>\n          <div\n            class=\"cre8-c-multi-select__content\"\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n          >\n            <ul\n              class=\"cre8-c-multi-select__tag-wrapper\"\n              aria-label=\"selected items\"\n            >\n              ${this._renderSelectedTags()}\n            </ul>\n          </div>\n          <div class=\"cre8-c-multi-select__icons-wrapper\">\n            <cre8-button\n              ?hideText=${true}\n              svg=\"${svgClear}\"\n              text=\"Clear All\"\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__clear_icon\"\n              @click=\"${this.clearAllTags}\"\n            >\n            </cre8-button>\n            <cre8-button\n              hideText\n              svg=${svgCaretDown}\n              variant=\"tertiary\"\n              ?disabled=\"${this.disabled}\"\n              class=\"cre8-c-multi-select__down_icon\"\n              @click=\"${this.dropdownArrowClick}\"\n              @keydown=\"${this._handleButtonToListKeydown}\"\n              text=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n            >\n            </cre8-button>\n          </div>\n        </div>\n        ${this.dropdownOpen\n        ? html`\n            <fieldset class=\"cre8-c-multi-select__dropdown\" aria-describedby=\"${this.fieldId}\">\n              <ul\n                aria-label=\"available items\"\n                @keydown=\"${this._handleListKeydown}\"\n              >\n                ${this._renderDropdownItems()}\n              </ul>\n            </fieldset>`\n        : nothing}\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`<cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-multi-select__field-note\"\n          >\n            <slot name=\"fieldNote\">${this.fieldNote}</slot>\n          </cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-multi-select') === undefined) {\n  customElements.define('cre8-multi-select', Cre8MultiSelect);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-multi-select': Cre8MultiSelect;\n  }\n}\n\nexport default Cre8MultiSelect;\n"]}

package/lib/components/pagination/pagination.d.ts

@@ -54,7 +54,7 @@ import './page-counter/page-counter';
  *
  * @slot - Optional content rendered alongside the pagination controls
  *
- * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
+ * @fires pagination-change - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
  */
 export declare class Cre8Pagination extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/pagination/pagination.js

@@ -71,7 +71,7 @@ import styles from './pagination.styles.js';
  *
  * @slot - Optional content rendered alongside the pagination controls
  *
- * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
+ * @fires pagination-change - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
  */
 export class Cre8Pagination extends Cre8Element {
     constructor() {
@@ -104,7 +104,7 @@ export class Cre8Pagination extends Cre8Element {
             this._currentPage = page;
             this.currentPage = this._currentPage;
             this.requestUpdate('currentPage', old);
-            this.dispatchEvent(new CustomEvent('pagination.click', { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }));
+            this.dispatchWithLegacyAlias(new CustomEvent('pagination-change', { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }));
         };
     }
     /**

package/lib/components/pagination/pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n *\n * @slot - Optional content rendered alongside the pagination controls\n *\n * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    /**\n     * The currently active page (1-based). Setting it programmatically navigates the pagination.\n     */\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchEvent(new CustomEvent(\n            'pagination.click',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable import/prefer-default-export */\n/* eslint-disable lit/no-template-map */\nimport {\n    html, HTMLTemplateResult, nothing,\n} from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, queryAll, state } from 'lit/decorators.js';\nimport svgCaretLeft from '@tmorrow/cre8-wc/icons/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport { Cre8Button } from '../button/button';\nimport { isMobile, screenSizes } from '../../utilities/is-mobile';\nimport './page-counter/page-counter';\nimport styles from './pagination.styles.js';\n\n/**\n * The Pagination component is used to split up a large amount of results\n *  by showing only a certain amount on each page. You can cycle through\n *  the pages using Page Numbers, Next and Previous Buttons, or optional\n *  First Page and Last Page Buttons. This component is also used by Table\n *  to cycle through rows of results. Pagination has 3 display options:\n *\n * **default**:  Can contain up to seven Page Numbers (ellipses included)\n *  at a time flanked by Next and Previous Buttons. When there are more than\n *  seven pages, numbers start getting replaced by ellipses. Use this option\n *  when you have a lot of horizontal space in a layout. It should not be used\n *  for mobile web layouts since its buttons are smaller than the minimum touch target of 44px.\n *  The component has built in responsivity to mobile page size so you dont have tohandle this\n *  seperately\n *\n *\n * **compact** : Best used as a summary of where you are among pages or table rows flanked by\n * Previous and Next Buttons. Use this option when you have limited horizontal space but still\n * need to show where users are among results. Great for mobile layouts.\n *\n *\n * **icon-only** : Use this option in very tight spaces when it’s not required to show users\n * where they are among results. Great for mobile layouts.\n *\n *\n * ## HOW TO USE\n *\n * Select an option from the “display” dropdown depending on layout width\n * Select where your current page is from the “Page” dropdown\n * To show less pages when using Full Numbers, use the \"visiblePages” toggles\n * To hide the First Page and Last Page Buttons, turn on the “hideFirstLastButton” toggle\n * To change the states of page numbers or buttons, interact with the buttond to invoke each “State”\n * When using Compact Numbers, you can choose between “compact” and “icon-only” formats\n *\n *\n * ## ACCESSIBILITY NOTE\n *\n * To best orient people using screen readers, push focus to the top of\n * the list of results after any of the pagination buttons have been triggered,\n * **except for the currently selected one**. Focus target could be a visual results heading,\n * or the top heading of the results container of the page selected\n * via a programmatic selector, e.g. < section id=“results” aria-label=\"results-section\" > or\n * < div role= “group” aria-label=“results” >.\n *\n * @dependency cre8-button, cre8-icon, cre8-pagination-counter\n * @csspart icon - distinguishes the page buttons from the icon buttons\n * @cssproperty \"--pagination-display\" - controls the display css property\n * @cssproperty \"--pagination-justify-content\" - controls horizontal alignment of pagination\n * @cssproperty \"--pagination-align-items\" - controls vertical alignment of pagination\n *\n * @slot - Optional content rendered alongside the pagination controls\n *\n * @fires pagination-change - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.\n */\n\nexport class Cre8Pagination extends Cre8Element {\n    static styles = [styles];\n\n    static elementDefinitions = {\n        'cre8-button': Cre8Button,\n    };\n\n    @state()\n    _currentPage: number = 99;\n\n    /**\n     * Input the total number of elements are returned from consuming app e.g. search results\n     * @attr number\n     * @required\n     */\n    @property({ reflect: true, type: Number })\n    totalResults!: number;\n\n\n    /**\n     * how many elements will displayVariant per page, indicated by business to typically be 20\n     * @attr number\n     */\n    @property({ type: Number, reflect: true })\n    get pageSize() {\n        return this._pageSize;\n    }\n\n    set pageSize(newSize: number) {\n        const oldSize = this._pageSize;\n        this._pageSize = newSize;\n        this.requestUpdate('pageSize', oldSize);\n    }\n\n    @state()\n    _pageSize = 10;\n\n\n    /**\n     * Controls how many page buttons are displayVarianted on the page\n     * at once, if container size permits. recommended max = 5 pages\n     *\n     * @attr number\n     */\n    @property({ reflect: true, type: Number })\n    visiblePages?: number = 5;\n\n    /**\n     * (optional) prop that allows for a compact and icon-only variant both\n     * for mobile screen-sizes and for use in certain contexts as guided by design,\n     * the component size will show 'default' in the absence of a value on desktop and\n     * 'compact' on smaller views.\n     *\n     * @attr 'compact' | 'icon-only' | 'default'\n     * @optional\n     */\n    @property({ type: String, reflect: true })\n    display?: 'compact' | 'icon-only' | 'default';\n\n    /**\n     *\n     *@state watches the width of the window and responds to show the accessibility approved variant.\n     */\n    @state()\n    windowWidth!: number;\n\n    @queryAll('cre8-button')\n    buttons: typeof Cre8Button[];\n\n    /**\n    *\n    * @optional\n    */\n    @property({ type: Boolean, reflect: true })\n    hideLastAndFirstButtons?: boolean;\n\n    /**\n     * The currently active page (1-based). Setting it programmatically navigates the pagination.\n     */\n    @property({ reflect: true, type: Number })\n    get currentPage() {\n        return this._currentPage;\n    }\n\n    set currentPage(newPage: number) {\n        const oldPage = this._currentPage;\n        this._currentPage = newPage;\n        this.requestUpdate('currentPage', oldPage);\n    }\n\n    connectedCallBack() {\n        super.connectedCallback();\n    }\n\n    get maxVisiblePages() {\n        const allowedVisiblePages = {\n            md: 5,\n        };\n\n        // lg and up\n\n        if (!isMobile(screenSizes.lg.toString())) {\n            return this.visiblePages;\n        }\n\n        if (!isMobile(screenSizes.md.toString())) {\n            return Math.min(allowedVisiblePages.md, this.visiblePages);\n        }\n        return 0;\n    }\n\n\n    private get totalPages(): number {\n        return Math.ceil(this.totalResults / this.pageSize);\n    }\n\n    private get hasNoPreviousPage() {\n        return this._currentPage <= 1;\n    }\n\n    private get hasNoNextPage() {\n        return this._currentPage >= this.totalPages;\n    }\n\n    private _onHandleResize() {\n        this.requestUpdate();\n    }\n\n    handleResize() {\n        this._onHandleResize.bind(this);\n    }\n\n    // get range of pages to display [3, 4, 5], [2, 3, 4, 5]\n    protected get pageRange(): number[] {\n        const left = Math.floor(this.maxVisiblePages / 2);\n        let startPage = this.currentPage - left;\n        startPage = Math.min(startPage, this.totalPages - this.maxVisiblePages + 1);\n        startPage = Math.max(startPage, 1);\n        const endPage = Math.min(startPage + this.maxVisiblePages - 1, this.totalPages);\n        return [...Array(this.totalPages)].map((_, index) => index + 1).slice(startPage - 1, endPage);\n    }\n\n    protected async firstUpdated() {\n        await this.updateComplete;\n        if (this._pageSize !== this.pageSize) {\n            const old = this._pageSize;\n            this._pageSize = this.pageSize;\n            this.requestUpdate('pageSize', old);\n        }\n        this.windowWidth = window.innerWidth;\n        window.addEventListener('resize', () => {\n            if (this.windowWidth !== window.innerWidth) {\n                const oldWidth = this.windowWidth;\n                this.windowWidth = window.innerWidth;\n                this.handleResize();\n                this.requestUpdate('isResponsive', oldWidth);\n            }\n        });\n        if (this._currentPage !== this.currentPage) {\n            const old = this._currentPage;\n            this._currentPage = this.currentPage;\n            this.requestUpdate('currentPage', old);\n        }\n    }\n\n    disconnectedCallback() {\n        window.removeEventListener('resize', this.handleResize);\n        super.disconnectedCallback();\n    }\n\n    displayTypes(): HTMLTemplateResult {\n        return html`<cre8-page-counter\n              currentPage=${this.currentPage}\n              style=\"display:${this.display === 'compact' ? 'flex' : 'none'};\"\n              totalResults=${this.totalResults}\n              pageSize=${this._pageSize}\n              display=${this.display}>\n              </cre8-page-counter>`;\n    }\n\n    private _handleKeydown = (page: number, _buttonName?: string) => (e: KeyboardEvent) => {\n        if (e.code === 'Enter') {\n            this._goToPage(page, _buttonName); /* 2 */\n        }\n    };\n\n    private _goToPage = (page: number, _buttonName?: string) => () => {\n        const old = this._currentPage;\n        let focusButton: Cre8Button;\n        this.buttons.forEach((_: typeof Cre8Button) => {\n            const b = new Cre8Button();\n            if (b.hideText && (b.text === _buttonName)) {\n                focusButton = b;\n                (focusButton.shadowRoot!.querySelector('.cre8-c-button') as HTMLButtonElement).blur();\n            }\n            return null;\n        });\n        this._currentPage = page;\n        this.currentPage = this._currentPage;\n        this.requestUpdate('currentPage', old);\n        this.dispatchWithLegacyAlias(new CustomEvent(\n            'pagination-change',\n            { detail: { buttonName: _buttonName ?? this.currentPage.toString(), value: this.currentPage } }\n        ));\n    };\n\n    public goToPage(page: number, buttonName?: string) {\n        return this._goToPage(page, buttonName).bind(this);\n    }\n\n    public handleKeydown(page: number, buttonName?: string) {\n        return this._handleKeydown(page, buttonName);\n    }\n\n    render() {\n        const classNames = this.componentClassNames('cre8-c-pagination', {\n            'cre8-c-pagination--compact': this.display !== undefined && this.display === 'compact',\n            'cre8-c-pagination--icon-only': this.display !== undefined && this.display === 'icon-only',\n        });\n\n\n        return html`<nav\n      aria-label=\"pagination\"\n      class=${classNames}>\n        <slot></slot>\n        ${!this.hideLastAndFirstButtons ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              text=\"\"\n              hideText\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n              ?disabled=${this.hasNoPreviousPage}\n              @click=${this.goToPage(1, 'First Page')}\n              @keydown=${this.handleKeydown(1, 'First Page')}\n\n            >\n        <span slot=\"before\">\n          <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"First Page\"\n            svg=${svgFirstPage}\n            size=\"24\">\n          </cre8-icon>\n        </span>\n            </cre8-button>` : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          hideText\n          text=\"\"\n          part=\"icon\"\n          aria-disabled=\"${ifDefined(this.hasNoPreviousPage)}\"\n          ?disabled=${this.hasNoPreviousPage}\n          @click=${this.goToPage(this._currentPage - 1, 'Previous Page')}\n          @keydown=${this.handleKeydown(this.currentPage - 1, 'Previous Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            className=\"cre8-c-pagination__icon\"\n            aria-label=\"Previous Page\"\n            slot=\"before\"\n            svg=${svgCaretLeft}\n            size=\"24\"\n\n            >\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n      ${this.displayTypes()}\n        ${!this.display || this.display === 'default'\n                ? html`${this.pageRange[this.pageRange.length - 1] > 1 && this.pageRange[0] !== 1\n                    ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                    : nothing}\n            ${this.pageRange.map((page) => (page === this.currentPage\n                        ? html`<cre8-button variant=\"tertiary\" tab-index=\"-1\" text=\"${page}\"  class=\"icon-only\" size=\"sm\" id=\"current\"></cre8-button>`\n                        : html`<cre8-button\n                      variant=\"tertiary\"\n                      size=\"sm\"\n                      text=\"${page}\"\n                      class=\"icon-only\"\n                      id=\"${page}\"\n                      @click=${this.goToPage(page, page.toString())}\n                      @keydown=${this.handleKeydown(page, page.toString())}>\n                      </cre8-button>`\n                    ))}\n            ${this.pageRange[this.pageRange.length - 1] < this.totalPages\n                        ? html` <cre8-icon\n            aria-label=\"ellipsis\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgEllipsis}\n            size=\"24\">\n            </cre8-icon>`\n                        : nothing}`\n                : nothing}\n        <cre8-button\n          variant=\"tertiary\"\n          size=\"sm\"\n          part=\"icon\"\n          hideText\n          text=\"\"\n          aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n          ?disabled=${this.hasNoNextPage}\n          @click=${this.goToPage(this.currentPage + 1, 'Next Page')}\n          @keydown=${this.handleKeydown(this.currentPage + 1, 'Next Page')}\n\n        >\n          <span slot=\"before\">\n            <cre8-icon\n            aria-label=\"Next Page\"\n            className=\"cre8-c-pagination__icon\"\n            slot=\"before\" svg=${svgCaretRight}\n            size=\"24\">\n            </cre8-icon>\n          </span>\n        </cre8-button>\n\n        ${!this.hideLastAndFirstButtons\n                ? html` <cre8-button\n              variant=\"tertiary\"\n              size=\"sm\"\n              hideText\n              text=\"\"\n              part=\"icon\"\n              aria-disabled=\"${ifDefined(this.hasNoNextPage)}\"\n              ?disabled=${this.hasNoNextPage}\n              @click=${this.goToPage(this.totalPages, 'Last Page')}\n              @keydown=${this.handleKeydown(this.totalPages, 'Last Page')}\n\n            >\n              <span slot=\"before\">\n                <cre8-icon\n                aria-label=\"Last Page\"\n                className=\"cre8-c-pagination__icon\"\n                slot=\"before\"\n                svg=${svgLastPage}\n                size=\"24\"\n                >\n                </cre8-icon>\n              </span>\n            </cre8-button>`\n                : nothing}\n\n      </nav>`;\n    }\n}\n\nif (customElements.get('cre8-pagination') === undefined) {\n    customElements.define('cre8-pagination', Cre8Pagination);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-pagination': Cre8Pagination;\n    }\n}\n"]}

package/lib/components/percent-bar/percent-bar.d.ts

@@ -6,6 +6,8 @@ import '../progress-meter/progress-meter';
  * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
  * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
  * allows a user save their progress before exiting.
+ *
+ * @fires percent-bar-left-action-click - Fires when the left action button is clicked.
  */
 export declare class Cre8PercentBar extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/percent-bar/percent-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C;;;;GAIG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAOzB,KAAK,EAAE,MAAM,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"percent-bar.d.ts","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAG1C;;;;;;GAMG;AACH,qBAAa,cAAe,SAAQ,WAAW;IAC7C,MAAM,CAAC,MAAM,4BAAY;IAOzB,KAAK,EAAE,MAAM,CAAC;IAMd,GAAG,EAAE,MAAM,CAAC;IAMZ,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,WAAW;IAInB,MAAM;CAoCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF;AAED,eAAe,cAAc,CAAC"}

package/lib/components/percent-bar/percent-bar.js

@@ -17,10 +17,12 @@ import styles from './percent-bar.styles.js';
  * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with
  * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that
  * allows a user save their progress before exiting.
+ *
+ * @fires percent-bar-left-action-click - Fires when the left action button is clicked.
  */
 export class Cre8PercentBar extends Cre8Element {
     _handleClick(e) {
-        this.dispatchEvent(new Event('leftActionButtonClick', e));
+        this.dispatchWithLegacyAlias(new Event('percent-bar-left-action-click', e));
     }
     fractionAsPercent() {
         return Math.round((this.value / this.max) * 100);

package/lib/components/percent-bar/percent-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;GAIG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,uBAAuB,EAAE,CAAC,CAAC,CAAC,CAAC;IAC5D,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;;6BAET,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AApEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAoD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchEvent(new Event('leftActionButtonClick', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      text=\"Previous step\"\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}
+{"version":3,"file":"percent-bar.js","sourceRoot":"","sources":["../../../components/percent-bar/percent-bar.ts"],"names":[],"mappings":";;;;;;AAAA,2BAA2B;AAC3B,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,8BAA8B,CAAC;AACtC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAsBrC,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,uBAAuB,CAAC,IAAI,KAAK,CAAC,+BAA+B,EAAE,CAAC,CAAC,CAAC,CAAC;IAC9E,CAAC;IAEO,iBAAiB;QACvB,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IACnD,CAAC;IAEO,WAAW;QACjB,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC;IACxB,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE/E,OAAO,IAAI,CAAA;oBACK,mBAAmB;;;kBAGrB,IAAI,CAAC,WAAW,EAAE;YAClB,CAAC,CAAC,IAAI,CAAA;kCACU,IAAI;;6BAET,UAAU;;;kCAGL,IAAI,CAAC,iBAAiB;gCACxB,IAAI,CAAC,YAAY;;mCAEd;YACjB,CAAC,CAAC,OAAO;;;;;;;oBAOP,IAAI,CAAC,iBAAiB,EAAE;;;;;mBAKzB,IAAI,CAAC,KAAK;iBACZ,IAAI,CAAC,GAAG;;;KAGpB,CAAC;IACJ,CAAC;;AApEM,qBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOzB;IADC,QAAQ,EAAE;6CACG;AAMd;IADC,QAAQ,EAAE;2CACC;AAMZ;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yDACf;AAoD9B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACzD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["/* eslint-disable indent */\nimport { html, nothing,  } from 'lit';\nimport svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../button/button';\nimport '../text-passage/text-passage';\nimport '../progress-meter/progress-meter';\nimport styles from './percent-bar.styles.js';\n\n/**\n * The percent bar visually indicates a user's current progress and has a few features: a basic display bar with\n * a percentage, an actionable icon that allows a user to revisit a prior step and an actionable link that\n * allows a user save their progress before exiting.\n *\n * @fires percent-bar-left-action-click - Fires when the left action button is clicked.\n */\nexport class Cre8PercentBar extends Cre8Element {\n  static styles = [styles];\n\n\n  /*\n   * The current step the user is on.\n   */\n  @property()\n  value: number;\n\n  /*\n   * The total number of steps in the multistep process.\n   */\n  @property()\n  max: number;\n\n  /*\n   * The action-left icon-only tertiary button in the percent bar controls can be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disableActionLeft?: boolean;\n\n  private _handleClick(e: MouseEvent) {\n    this.dispatchWithLegacyAlias(new Event('percent-bar-left-action-click', e));\n  }\n\n  private fractionAsPercent(): number {\n    return Math.round((this.value / this.max) * 100);\n  }\n\n  private isFirstStep(): boolean {\n    return this.value > 1;\n  }\n\n  render() {\n    const componentClassNames = this.componentClassNames('cre8-c-percent-bar', {});\n\n    return html`\n      <div class=\"${componentClassNames}\">\n          <div class=\"cre8-c-percent-bar__controls\">\n              <div lass=\"cre8-c-percent-bar__left-controls\">\n                ${this.isFirstStep()\n                  ? html` <cre8-button\n                      ?hideText=${true}\n                      text=\"Previous step\"\n                      svg=\"${svgCaretUp}\"\n                      iconRotateDegree=\"-90\"\n                      variant=\"tertiary\"\n                      ?disabled=${this.disableActionLeft}\n                      @click=\"${this._handleClick}\"\n                    >\n                    </cre8-button>`\n                  : nothing}\n              </div>\n              <div class=\"cre8-c-percent-bar__right-controls\">\n                <cre8-text-passage\n                  size=\"small\"\n                  class=\"cre8-c-percent-bar__text-passage\"\n                >\n                  ${this.fractionAsPercent()}%\n                </cre8-text-passage>\n              </div>\n            </div>\n        <cre8-progress-meter\n          value=\"${this.value}\"\n          max=\"${this.max}\"\n        ></cre8-progress-meter>\n      </div>\n    `;\n  }\n}\n\nif (customElements.get('cre8-percent-bar') === undefined) {\n  customElements.define('cre8-percent-bar', Cre8PercentBar);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-percent-bar': Cre8PercentBar;\n  }\n}\n\nexport default Cre8PercentBar;\n"]}

package/lib/components/popover/popover.d.ts

@@ -8,8 +8,8 @@ import '../heading/heading';
  * @slot header - Custom header content for the popover panel
  * @slot footer - Custom footer content for the popover panel
  *
- * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.
- * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.
+ * @fires popover-open - Fires when the popover opens. `event.detail.isActive` is `true`.
+ * @fires popover-close - Fires when the popover closes. `event.detail.isActive` is `false`.
  */
 export declare class Cre8Popover extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -20,11 +20,10 @@ export declare class Cre8Popover extends Cre8Element {
     heading?: string;
     /**
      * Positions the popover panel absolutely to the trigger
-     * - **default** positions the popover panel below the trigger
-     * - **top** positions the popover panel below the trigger
-     * - **left** positions the popover panel below the trigger
-     * - **right** positions the popover panel below the trigger
-     *  @attr {string | undefined}
+     * - Omitting this prop positions the popover panel below the trigger
+     * - **top** positions the popover panel above the trigger
+     * - **left** positions the popover panel to the left of the trigger
+     * - **right** positions the popover panel to the right of the trigger
      */
     position?: 'top' | 'left' | 'right';
     /**

package/lib/components/popover/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;GAUG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGvB;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;OAEG;IAEC,mBAAmB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IAEC,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3C;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;;OAMG;IACH,iBAAiB;IAQjB;;;;;;OAMG;IACH,oBAAoB;IAQpB;;;OAGG;IACH,YAAY;IAIZ;;;;;OAKG;IACH,OAAO;IAaP;;OAEG;IACH,eAAe;IAyCf;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IA8BrB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,4BAA4B;IAKpC;;;;;;;;;;;OAWG;IACH,oBAAoB,GAAI,GAAG,UAAU,UAoBnC;IAEF;;;;OAIG;IACH,oBAAoB,aAYlB;IAEF;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,oBAAoB,CAAC;AAI5B;;;;;;;;;;GAUG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;;OAGG;IAEC,OAAO,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;;OAMG;IAEC,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAExC;;;OAGG;IAEC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;OAKG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;;OAIG;IAEC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE9B;;;;;;;OAOG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGvB;;OAEG;IAEC,YAAY,EAAE,WAAW,CAAC;IAE9B;;OAEG;IAEC,iBAAiB,EAAE,WAAW,CAAC;IAEnC;;OAEG;IAEC,mBAAmB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE5C;;OAEG;IAEC,kBAAkB,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;IAE3C;;;OAGG;IACH,IAAI,KAAK,YAER;IAED;;;;;;OAMG;IACH,iBAAiB;IAQjB;;;;;;OAMG;IACH,oBAAoB;IAQpB;;;OAGG;IACH,YAAY;IAIZ;;;;;OAKG;IACH,OAAO;IAaP;;OAEG;IACH,eAAe;IAyCf;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IA8BrB;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,oBAAoB;IAM5B,OAAO,CAAC,sBAAsB;IAe9B,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,4BAA4B;IAKpC;;;;;;;;;;;OAWG;IACH,oBAAoB,GAAI,GAAG,UAAU,UAoBnC;IAEF;;;;OAIG;IACH,oBAAoB,aAYlB;IAEF;;;OAGG;IACH,YAAY,aAIV;IAEF,MAAM;CAsCP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}

package/lib/components/popover/popover.js

@@ -17,8 +17,8 @@ import styles from './popover.styles.js';
  * @slot header - Custom header content for the popover panel
  * @slot footer - Custom footer content for the popover panel
  *
- * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.
- * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.
+ * @fires popover-open - Fires when the popover opens. `event.detail.isActive` is `true`.
+ * @fires popover-close - Fires when the popover closes. `event.detail.isActive` is `false`.
  */
 export class Cre8Popover extends Cre8Element {
     constructor() {
@@ -192,11 +192,11 @@ export class Cre8Popover extends Cre8Element {
             requestAnimationFrame(() => {
                 this.dynamicPosition();
             });
-            this.dispatchEvent(new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
+            this.dispatchWithLegacyAlias(new CustomEvent('popover-open', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
         }
         else {
             /* 3 */
-            this.dispatchEvent(new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
+            this.dispatchWithLegacyAlias(new CustomEvent('popover-close', { detail: { isActive: this.isActive }, bubbles: true, composed: true }));
         }
         /**
          * Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position