@tmorrow/cre8-wc 1.2.7 → 2.0.1

package/lib/components/link/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../components/link/link.ts"],"names":[],"mappings":"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","sourcesContent":["import svgArrowLeft from '@tmorrow/cre8-wc/icons/System/Filled/Arrow_-_Left.svg?raw';\nimport {\n    html, nothing,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './link.styles.js';\n\n/**\n * Link Component are strictly used in the case where the component will take\n * the user away from the current page to a new url.\n * In this vein, this component should ONLY be used in situations an anchor tag would be used (an href is required)\n * This goes for the variations as well such as the Call To Action Link\n *\n * **Note**\n *\n * For link with icon:\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct direction for icons, for example,\n * arrows, caret up or caret down.\n *\n*/\n\nexport class Cre8Link extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Href attribute of the anchor tag\n   */\n  @property()\n      href: string;\n\n  /**\n   * Rel attribute of the anchor tag\n   */\n  @property()\n      rel?: string;\n\n  /**\n   * Target attribute for a link (i.e. set to _blank to open in new tab)\n   * - **_blank** yields a link that opens in a new tab\n   * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n   *   This is the default behavior\n   * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n   *   If there is no parent, this behaves the same way as _self\n   * - **_top** yields a link that loads the URL into the top-level browsing context.\n   *   If there is no parent, this behaves the same way as _self.\n   */\n  @property()\n      target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * DEPRECATED: Icon name, use svg instead\n   * @deprecated\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * svg as a raw string\n   * - For links with icon, the icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Icon position\n   * - **before** places the icon before the button text\n   * - **after** places the icon after the button text\n   */\n  @property()\n      iconPosition?: 'before' | 'after' = undefined;\n\n  /**\n   * Call To Action Icon\n   */\n  @property()\n      ctaIcon = 'arrow-forward';\n\n  /**\n   * Call To Action Link\n   */\n  @property({ type: Boolean })\n      ctaLink?: boolean;\n\n  /**\n   * Link with no underline\n   */\n  @property({ type: Boolean })\n      noUnderline?: boolean;\n\n  /**\n   * Size variant (default is medium)\n   * - **sm** shrinks the link typography and overall size\n   * - **lg** increases the link typography size and overall size\n   */\n  @property()\n      size?: 'sm' | 'lg';\n\n  /**\n   * Inverted colors Link (onDark)\n   */\n  @property({ type: Boolean })\n      inverted?: boolean;\n\n  private generateIcon() {\n      if (this.iconName) {\n          return html`\n          <div class=\"cre8-c-link__icon-wrapper\">\n            <cre8-icon-legacy\n              class=\"cre8-c-link__icon ${this.iconPosition}\"\n              aria-hidden=\"true\"\n              name=\"${ifDefined(this.iconName)}\">\n            </cre8-icon-legacy>\n          </div>`;\n      }\n\n      if (this.svg) {\n          return html`\n          <div class=\"cre8-c-link__icon-wrapper\">\n            <cre8-icon\n              class=\"cre8-c-link__icon ${this.iconPosition}\"\n              aria-hidden=\"true\"\n              svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n            </cre8-icon>\n          </div>`;\n      } return nothing;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-link', {\n          'cre8-c-link--inverted': this.inverted,\n          'cre8-c-link--sm': this.size === 'sm',\n          'cre8-c-link--lg': this.size === 'lg',\n          'cre8-c-link__no-underline': this.noUnderline,\n      });\n\n      return html`\n      <a\n        class=\"${componentClassNames}\"\n        href=\"${ifDefined(this.href)}\"\n        rel=\"${ifDefined(this.rel)}\"\n        target=\"${ifDefined(this.target)}\"\n      >\n        <div class=\"cre8-c-link__text-area\">\n          ${this.iconPosition === 'before'\n        ? html`${this.generateIcon()}`\n        : nothing}\n          <span class=\"cre8-c-link__text\">\n            <slot></slot>\n          </span>\n          ${this.iconPosition === 'after'\n        ? html`${this.generateIcon()}`\n        : nothing}\n        </div>\n        <div class=\"cre8-c-link__variation\">\n          <slot name=\"badge\"></slot>\n          ${this.ctaLink\n        ? html`<div class=\"cre8-c-link__cta-wrapper\">\n                <cre8-icon class=\"cre8-c-link__action\" svg='${svgArrowLeft}' \n                rotate=\"180\" aria-hidden=\"true\"></cre8-icon>\n              </div>`\n        : nothing}\n        </div>\n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link') === undefined) {\n    customElements.define('cre8-link', Cre8Link);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link': Cre8Link;\n  }\n}\n\nexport default Cre8Link;\n"]}
+{"version":3,"file":"link.js","sourceRoot":"","sources":["../../../components/link/link.ts"],"names":[],"mappings":"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","sourcesContent":["import svgArrowLeft from '@tmorrow/cre8-wc/icons/Arrow_-_Left_Filled.svg?raw';\nimport {\n    html, nothing,\n} from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './link.styles.js';\n\n/**\n * Link Component are strictly used in the case where the component will take\n * the user away from the current page to a new url.\n * In this vein, this component should ONLY be used in situations an anchor tag would be used (an href is required)\n * This goes for the variations as well such as the Call To Action Link\n *\n * **Note**\n *\n * For link with icon:\n * - **iconRotateDegree** & **iconFlipDirection** props are optional.\n * - They are used to set up the correct direction for icons, for example,\n * arrows, caret up or caret down.\n *\n*/\n\nexport class Cre8Link extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Href attribute of the anchor tag\n   */\n  @property()\n      href: string;\n\n  /**\n   * Rel attribute of the anchor tag\n   */\n  @property()\n      rel?: string;\n\n  /**\n   * Target attribute for a link (i.e. set to _blank to open in new tab)\n   * - **_blank** yields a link that opens in a new tab\n   * - **_self** yields a link that loads the URL into the same browsing context as the current one.\n   *   This is the default behavior\n   * - **_parent** yields a link that loads the URL into the parent browsing context of the current one.\n   *   If there is no parent, this behaves the same way as _self\n   * - **_top** yields a link that loads the URL into the top-level browsing context.\n   *   If there is no parent, this behaves the same way as _self.\n   */\n  @property()\n      target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /**\n   * DEPRECATED: Icon name, use svg instead\n   * @deprecated\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * svg as a raw string\n   * - For links with icon, the icon is defined by this prop.\n   * - Pass in a raw svg as a String for using <cre8-icon>\n   */\n  @property()\n      svg?: string;\n\n  /**\n   * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction\n   */\n  @property({ type: Number })\n      iconRotateDegree?: number = 0;\n\n  /**\n   * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction\n   */\n  @property()\n      iconFlipDirection?: string;\n\n  /**\n   * Icon position\n   * - **before** places the icon before the button text\n   * - **after** places the icon after the button text\n   */\n  @property()\n      iconPosition?: 'before' | 'after' = undefined;\n\n  /**\n   * Call To Action Icon\n   */\n  @property()\n      ctaIcon = 'arrow-forward';\n\n  /**\n   * Call To Action Link\n   */\n  @property({ type: Boolean })\n      ctaLink?: boolean;\n\n  /**\n   * Link with no underline\n   */\n  @property({ type: Boolean })\n      noUnderline?: boolean;\n\n  /**\n   * Size variant (default is medium)\n   * - **sm** shrinks the link typography and overall size\n   * - **lg** increases the link typography size and overall size\n   */\n  @property()\n      size?: 'sm' | 'lg';\n\n  /**\n   * Inverted colors Link (onDark)\n   */\n  @property({ type: Boolean })\n      inverted?: boolean;\n\n  private generateIcon() {\n      if (this.iconName) {\n          return html`\n          <div class=\"cre8-c-link__icon-wrapper\">\n            <cre8-icon-legacy\n              class=\"cre8-c-link__icon ${this.iconPosition}\"\n              aria-hidden=\"true\"\n              name=\"${ifDefined(this.iconName)}\">\n            </cre8-icon-legacy>\n          </div>`;\n      }\n\n      if (this.svg) {\n          return html`\n          <div class=\"cre8-c-link__icon-wrapper\">\n            <cre8-icon\n              class=\"cre8-c-link__icon ${this.iconPosition}\"\n              aria-hidden=\"true\"\n              svg='${this.svg}' rotate=\"${Number(this.iconRotateDegree)}\" flip=\"${this.iconFlipDirection}\">\n            </cre8-icon>\n          </div>`;\n      } return nothing;\n  }\n\n  render() {\n      const componentClassNames = this.componentClassNames('cre8-c-link', {\n          'cre8-c-link--inverted': this.inverted,\n          'cre8-c-link--sm': this.size === 'sm',\n          'cre8-c-link--lg': this.size === 'lg',\n          'cre8-c-link__no-underline': this.noUnderline,\n      });\n\n      return html`\n      <a\n        class=\"${componentClassNames}\"\n        href=\"${ifDefined(this.href)}\"\n        rel=\"${ifDefined(this.rel)}\"\n        target=\"${ifDefined(this.target)}\"\n      >\n        <div class=\"cre8-c-link__text-area\">\n          ${this.iconPosition === 'before'\n        ? html`${this.generateIcon()}`\n        : nothing}\n          <span class=\"cre8-c-link__text\">\n            <slot></slot>\n          </span>\n          ${this.iconPosition === 'after'\n        ? html`${this.generateIcon()}`\n        : nothing}\n        </div>\n        <div class=\"cre8-c-link__variation\">\n          <slot name=\"badge\"></slot>\n          ${this.ctaLink\n        ? html`<div class=\"cre8-c-link__cta-wrapper\">\n                <cre8-icon class=\"cre8-c-link__action\" svg='${svgArrowLeft}' \n                rotate=\"180\" aria-hidden=\"true\"></cre8-icon>\n              </div>`\n        : nothing}\n        </div>\n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-link') === undefined) {\n    customElements.define('cre8-link', Cre8Link);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-link': Cre8Link;\n  }\n}\n\nexport default Cre8Link;\n"]}

package/lib/components/modal/modal.js

@@ -6,12 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, } from 'lit';
 import { property, query } from 'lit/decorators.js';
-import svgError from '@tmorrow/cre8-wc/icons/System/Regular/Error.svg?raw';
-import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';
-import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';
-import svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';
-import svgHelp from '@tmorrow/cre8-wc/icons/System/Regular/Help.svg?raw';
-import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
+import svgError from '@tmorrow/cre8-wc/icons/Error.svg?raw';
+import svgWarningFilled from '@tmorrow/cre8-wc/icons/Warning.svg?raw';
+import svgCheckCircle from '@tmorrow/cre8-wc/icons/Check_Filled.svg?raw';
+import svgInfoFilled from '@tmorrow/cre8-wc/icons/Info.svg?raw';
+import svgHelp from '@tmorrow/cre8-wc/icons/Help.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon.js';
 import '@a11y/focus-trap';

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/System/Regular/Error.svg?raw';\nimport svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';\nimport svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';\nimport svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';\nimport svgHelp from '@tmorrow/cre8-wc/icons/System/Regular/Help.svg?raw';\nimport svgClose from '@tmorrow/cre8-wc/icons/System/Regular/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 */\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 */\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"]}

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

@@ -12,8 +12,8 @@ import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { html, nothing, } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { nanoid } from 'nanoid';
-import svgCaretDown from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Down.svg?raw';
-import svgClear from '@tmorrow/cre8-wc/icons/System/Regular/Clear_X.svg?raw';
+import svgCaretDown from '@tmorrow/cre8-wc/icons/Caret_Down.svg?raw';
+import svgClear from '@tmorrow/cre8-wc/icons/Clear_X.svg?raw';
 import styles from './multi-select.styles.js';
 import { Cre8Element } from '../cre8-element';
 import '../remove-tag/remove-tag';

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/System/Regular/Caret_Down.svg?raw';\nimport svgClear from '@tmorrow/cre8-wc/icons/System/Regular/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 */\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              aria-label=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n              aria-labelledby=\"${this.fieldId}\"\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 `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 */\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              aria-label=\"Open Dropdown\"\n              aria-expanded=\"${this.dropdownOpen}\"\n              aria-labelledby=\"${this.fieldId}\"\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.js

@@ -9,11 +9,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing, } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property, queryAll, state } from 'lit/decorators.js';
-import svgCaretLeft from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Left.svg?raw';
-import svgFirstPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';
-import svgLastPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';
-import svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';
-import svgEllipsis from '@tmorrow/cre8-wc/icons/System/Regular/Ellipsis.svg?raw';
+import svgCaretLeft from '@tmorrow/cre8-wc/icons/Caret_Left.svg?raw';
+import svgFirstPage from '@tmorrow/cre8-wc/icons/Caret_Double_Left.svg?raw';
+import svgLastPage from '@tmorrow/cre8-wc/icons/Caret_Double_Right.svg?raw';
+import svgCaretRight from '@tmorrow/cre8-wc/icons/Caret_Right.svg?raw';
+import svgEllipsis from '@tmorrow/cre8-wc/icons/Ellipsis.svg?raw';
 import { Cre8Element } from '../cre8-element';
 import { Cre8Button } from '../button/button';
 import { isMobile, screenSizes } from '../../utilities/is-mobile';

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/System/Regular/Caret_Left.svg?raw';\nimport svgFirstPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Left.svg?raw';\nimport svgLastPage from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Double_Right.svg?raw';\nimport svgCaretRight from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Right.svg?raw';\nimport svgEllipsis from '@tmorrow/cre8-wc/icons/System/Regular/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\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    @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\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    @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"]}

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

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 /* eslint-disable indent */
 import { html, nothing, } from 'lit';
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
 import { property } from 'lit/decorators.js';
 import { Cre8Element } from '../cre8-element';
 import '../button/button';

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,wDAAwD,CAAC;AAChF,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;6BACT,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;;AAnEM,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;AAmD9B,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/System/Regular/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                      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;;;;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;6BACT,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;;AAnEM,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;AAmD9B,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                      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/remove-tag/remove-tag.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import classnames from 'classnames';
 import { html, } from 'lit';
 import { property } from 'lit/decorators.js';
-import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';
 import { Cre8Element } from '../cre8-element';
 import '../icon/icon';
 import styles from './remove-tag.styles.js';

package/lib/components/remove-tag/remove-tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('removeTagClicked', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-label=\"remove\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}
+{"version":3,"file":"remove-tag.js","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AACtB,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAE5C,MAAM,CAAN,IAAY,KAGX;AAHD,WAAY,KAAK;IACf,wBAAe,CAAA;IACf,0BAAiB,CAAA;AACnB,CAAC,EAHW,KAAK,KAAL,KAAK,QAGhB;AAED,MAAM,CAAN,IAAY,KAIX;AAJD,WAAY,KAAK;IACf,4BAAmB,CAAA;IACnB,4BAAmB,CAAA;IACnB,yCAAgC,CAAA;AAClC,CAAC,EAJW,KAAK,KAAL,KAAK,QAIhB;AAED;;;GAGG;AACH,MAAM,OAAO,aAAc,SAAQ,WAAW;IAA9C;;QASE;;;;;;WAMG;QAEC,UAAK,GAAwD,KAAK,CAAC,OAAO,CAAC;QAE/E;;;;;WAKG;QAEC,UAAK,GAA+B,KAAK,CAAC,KAAK,CAAC;IA6CtD,CAAC;IArCC;;OAEG;IACK,uBAAuB;QAC3B,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,kBAAkB,EAAE;YACpD,MAAM,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;YAC1C,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,UAAU,CAAC,mBAAmB,EAAE;YACvD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,4BAA4B,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS;YACtD,mCAAmC,EAAE,IAAI,CAAC,KAAK,KAAK,gBAAgB;YACpE,0BAA0B,EAAE,IAAI,CAAC,KAAK,KAAK,OAAO;YAClD,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;eACF,kBAAkB;gBACjB,IAAI,CAAC,uBAAuB;kBAC1B,IAAI,CAAC,QAAQ;;cAEjB,IAAI,CAAC,IAAI;;;;;iBAKN,QAAQ;;;;cAIX,CAAC;IACb,CAAC;;AArEQ,oBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACT;AAUd;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACoD;AAS3E;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CACyB;AAMhD;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACL;AAyCzB,IAAI,cAAc,CAAC,GAAG,CAAC,iBAAiB,CAAC,KAAK,SAAS,EAAE,CAAC;IACtD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,aAAa,CAAC,CAAC;AAC5D,CAAC;AAQD,eAAe,aAAa,CAAC","sourcesContent":["import classnames from 'classnames';\nimport { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport svgClose from '@tmorrow/cre8-wc/icons/Close.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon';\nimport styles from './remove-tag.styles.js';\n\nexport enum Shape {\n  Round = 'round',\n  Square = 'square',\n}\n\nexport enum Color {\n  Neutral = 'neutral',\n  Branded = 'branded',\n  NeutralHybrid = 'neutral-hybrid',\n}\n\n/**\n * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).\n * These tags always display a \"Close\" icon.\n */\nexport class Cre8RemoveTag extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * The tag text\n   */\n  @property({ type: String })\n      text?: string;\n\n  /**\n   * The tag color scheme\n   *\n   *  - **neutral** should be used when doing non-link actions such as filters or multi-select, within forms, etc.\n   *  - **neutral-hybrid** should be used for when tags are doing an action like a button or a link\n   *  - **branded** should be used like Neutral, but for marketing / actionable items\n   */\n  @property({ type: String })\n      color: Color.Neutral | Color.Branded | Color.NeutralHybrid = Color.Neutral;\n\n  /**\n   * The tag shape\n   *\n   * - **round** will give the tag a rounded border\n   * - **square** will give the tag a squared border\n   */\n  @property({ type: String })\n      shape: Shape.Round | Shape.Square = Shape.Round;\n\n  /**\n   * Disabled state for remove tag\n   */\n  @property({ type: Boolean })\n      disabled?: boolean;\n\n  /**\n   * Dispatches an event when the tag is clicked\n   */\n  private _handleRemoveTagClicked() {\n      const customEvent = new CustomEvent('removeTagClicked', {\n          detail: { message: 'Remove Tag clicked.' },\n          bubbles: true,\n          composed: true,\n      });\n      this.dispatchEvent(customEvent);\n  }\n\n  render() {\n      const componentClassName = classnames('cre8-c-remove-tag', {\n          'cre8-c-remove-tag--neutral': this.color === 'neutral',\n          'cre8-c-remove-tag--branded': this.color === 'branded',\n          'cre8-c-remove-tag--neutral-hybrid': this.color === 'neutral-hybrid',\n          'cre8-c-remove-tag--round': this.shape === 'round',\n          'cre8-c-remove-tag--square': this.shape === 'square',\n      });\n\n      return html` <button\n      class=\"${componentClassName}\"\n      @click=\"${this._handleRemoveTagClicked}\"\n      ?disabled=${this.disabled}\n    >\n      <span>${this.text}</span>\n      <div class=\"cre8-c-remove-tag-item__icon\">\n        <cre8-icon\n          width=\"16\"\n          height=\"16\"\n          svg=\"${svgClose}\"\n          aria-label=\"remove\"\n        ></cre8-icon>\n      </div>\n    </button>`;\n  }\n}\n\nif (customElements.get('cre8-remove-tag') === undefined) {\n    customElements.define('cre8-remove-tag', Cre8RemoveTag);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-remove-tag': Cre8RemoveTag;\n  }\n}\n\nexport default Cre8RemoveTag;\n"]}

package/lib/components/select/select.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';
+import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';
 import { html, nothing, } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { property, queryAll } from 'lit/decorators.js';

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

@@ -1 +1 @@
-{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,eAAe,MAAM,yBAAyB,CAAC;AAYtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,OAAO,UAAW,SAAQ,eAAe;IAA/C;;QAEW,SAAI,GAAG,QAAQ,CAAC;QAGzB;;;;;;;;WAQG;QAEH,UAAK,GAAoD,EAAE,CAAC;QAE5D;;;WAGG;QAEH,UAAK,GAAW,OAAO,CAAC;QA+BxB;;;WAGG;QAEH,aAAQ,GAAY,KAAK,CAAC;IA2O5B,CAAC;IApLC;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,EAAE,CAAC;QAC1D,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACvC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,IAAI,MAAM,EAAE,CAAC;QAC9E,CAAC;IACH,CAAC;IAED;;;;;;;OAOG;IACK,cAAc;QACpB,IAAI,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3D,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO;QAC7E,CAAC;QACD,IAAI,IAAI,CAAC,yBAAyB,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;YAC9D,OAAO,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO;QAChD,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO;IACtC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;IAClD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IACD;;;;;OAKG;IACH,YAAY;QACV,KAAK,CAAC,YAAY,EAAE,CAAC;QACrB,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAA2C,EAAE,EAAE;YAC/E,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO;YACzC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,kBAAkB,CAAC,CAAC,CAAC,OAAO;QACzH,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;;KAIC;IACO,YAAY;QAClB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,CAAC;IAED;;;;OAIG;IACK,eAAe,CAAC,CAAQ;QAC9B,OAAO;QACP,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAGzC,OAAO;QACP,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAClC,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAA8C,EAAE,EAAE;YACvE,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;gBACtB,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAwB,EAAE,EAAE,CAAC,IAAI,CAAA;mCAC9C,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;eACjD,CAAC,CAAC;gBACT,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,aAAa;YAC7C,aAAa;oBACL,CAAC;YACf,CAAC;YACD,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,WAAW,CAAC;QACpE,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACK,4BAA4B;QAClC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;YACP,OAAO,IAAI,CAAA;;uBAEM,IAAI,CAAC,SAAS;eACtB,IAAI,CAAC,yBAAyB;;;;YAIjC,IAAI,CAAC,WAAW;2BACD,CAAC;QACxB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO;YACP,OAAO,IAAI,CAAA;;qBAEI,IAAI,CAAC,OAAO;eAClB,IAAI,CAAC,yBAAyB;;;;YAIjC,IAAI,CAAC,SAAS;2BACC,CAAC;QACxB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE;YACpE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,mBAAmB;mDACY,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;;;;iBAI7D,IAAI,CAAC,OAAO;mBACV,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;wBACf,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;gCACL,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;sBAC1C,IAAI,CAAC,eAAe;;cAE5B,IAAI,CAAC,oBAAoB,EAAE;;;8BAGX,UAAU;;;;QAIhC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YAChD,CAAC,CAAC,IAAI,CAAA;;iBAEG,IAAI,CAAC,eAAe;;oCAED,IAAI,CAAC,SAAS,2BAA2B;YACrE,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,4BAA4B,EAAE;KACtC,CAAC;IACJ,CAAC;;AAjSM,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAYzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCACkC;AAO5D;IADC,QAAQ,EAAE;yCACa;AAQxB;IADC,QAAQ,EAAE;2CACM;AAOjB;IADC,QAAQ,EAAE;6CACQ;AAOnB;IADC,QAAQ,EAAE;mDACc;AAOzB;IADC,QAAQ,EAAE;6DACwB;AAOnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACjB;AAO1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACzB;AAOlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACzB;AAOlB;IADC,QAAQ,EAAE;6CACQ;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACvB;AAOpB;IADC,QAAQ,EAAE;+CACU;AAYrB;IADC,QAAQ,CAAC,QAAQ,CAAC;kDACmB;AA8LxC,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/System/Regular/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\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 required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\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  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\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  connectedCallback(): void {\n    super.connectedCallback();\n    this.field.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\n  }\n\n  /**\n   * Handle On Change\n   * 1. Set the value when the select is changed.\n   * 2. Fire the custom event with the current value.\n   */\n  private _handleOnChange(e: Event) {\n    /* 1 */\n    const target = e.target as HTMLSelectElement;\n    this.value = target.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\n\n    /* 2 */\n    const customEvent = new CustomEvent('change', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\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`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-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`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-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('cre8-c-select', {\n      'cre8-is-error': this.isError,\n      'cre8-is-success': this.isSuccess,\n    });\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../../components/select/select.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,EAAE,IAAI,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,eAAe,MAAM,yBAAyB,CAAC;AAYtD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,MAAM,OAAO,UAAW,SAAQ,eAAe;IAA/C;;QAEW,SAAI,GAAG,QAAQ,CAAC;QAGzB;;;;;;;;WAQG;QAEH,UAAK,GAAoD,EAAE,CAAC;QAE5D;;;WAGG;QAEH,UAAK,GAAW,OAAO,CAAC;QA+BxB;;;WAGG;QAEH,aAAQ,GAAY,KAAK,CAAC;IA2O5B,CAAC;IApLC;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC;QACxC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;YACrD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,MAAM,EAAE,CAAC;QAC1D,CAAC;QACD,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACvC,IAAI,CAAC,yBAAyB,GAAG,IAAI,CAAC,yBAAyB,IAAI,MAAM,EAAE,CAAC;QAC9E,CAAC;IACH,CAAC;IAED;;;;;;;OAOG;IACK,cAAc;QACpB,IAAI,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC3D,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,yBAAyB,EAAE,CAAC,CAAC,OAAO;QAC7E,CAAC;QACD,IAAI,IAAI,CAAC,yBAAyB,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;YAC9D,OAAO,IAAI,CAAC,yBAAyB,CAAC,CAAC,OAAO;QAChD,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,OAAO;IACtC,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC,CAAA;IAClD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;IAC/B,CAAC;IACD;;;;;OAKG;IACH,YAAY;QACV,KAAK,CAAC,YAAY,EAAE,CAAC;QACrB,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,IAA2C,EAAE,EAAE;YAC/E,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;gBAC3B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO;YACzC,CAAC;QACH,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,kBAAkB,CAAC,CAAC,CAAC,OAAO;QACzH,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;;;KAIC;IACO,YAAY;QAClB,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,CAAC;IAED;;;;OAIG;IACK,eAAe,CAAC,CAAQ;QAC9B,OAAO;QACP,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;QACxD,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAGzC,OAAO;QACP,MAAM,WAAW,GAAG,IAAI,WAAW,CAAC,QAAQ,EAAE;YAC5C,MAAM,EAAE;gBACN,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB;YACD,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;IAClC,CAAC;IAED;;OAEG;IACK,oBAAoB;QAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAA8C,EAAE,EAAE;YACvE,IAAI,SAAS,IAAI,IAAI,EAAE,CAAC;gBACtB,MAAM,aAAa,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAwB,EAAE,EAAE,CAAC,IAAI,CAAA;mCAC9C,MAAM,CAAC,KAAK,KAAK,MAAM,CAAC,KAAK;eACjD,CAAC,CAAC;gBACT,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,aAAa;YAC7C,aAAa;oBACL,CAAC;YACf,CAAC;YACD,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,WAAW,CAAC;QACpE,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACK,4BAA4B;QAClC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;YACP,OAAO,IAAI,CAAA;;uBAEM,IAAI,CAAC,SAAS;eACtB,IAAI,CAAC,yBAAyB;;;;YAIjC,IAAI,CAAC,WAAW;2BACD,CAAC;QACxB,CAAC;QACD,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO;YACP,OAAO,IAAI,CAAA;;qBAEI,IAAI,CAAC,OAAO;eAClB,IAAI,CAAC,yBAAyB;;;;YAIjC,IAAI,CAAC,SAAS;2BACC,CAAC;QACxB,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE;YACpE,eAAe,EAAE,IAAI,CAAC,OAAO;YAC7B,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,mBAAmB;mDACY,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC,KAAK;;;;iBAI7D,IAAI,CAAC,OAAO;mBACV,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;wBACf,IAAI,CAAC,QAAQ;wBACb,IAAI,CAAC,QAAQ;gCACL,SAAS,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;sBAC1C,IAAI,CAAC,eAAe;;cAE5B,IAAI,CAAC,oBAAoB,EAAE;;;8BAGX,UAAU;;;;QAIhC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;YAChD,CAAC,CAAC,IAAI,CAAA;;iBAEG,IAAI,CAAC,eAAe;;oCAED,IAAI,CAAC,SAAS,2BAA2B;YACrE,CAAC,CAAC,OAAO;QACT,IAAI,CAAC,4BAA4B,EAAE;KACtC,CAAC;IACJ,CAAC;;AAjSM,iBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAYzB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;yCACkC;AAO5D;IADC,QAAQ,EAAE;yCACa;AAQxB;IADC,QAAQ,EAAE;2CACM;AAOjB;IADC,QAAQ,EAAE;6CACQ;AAOnB;IADC,QAAQ,EAAE;mDACc;AAOzB;IADC,QAAQ,EAAE;6DACwB;AAOnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACjB;AAO1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACzB;AAOlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CACzB;AAOlB;IADC,QAAQ,EAAE;6CACQ;AAOnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACvB;AAOpB;IADC,QAAQ,EAAE;+CACU;AAYrB;IADC,QAAQ,CAAC,QAAQ,CAAC;kDACmB;AA8LxC,IAAI,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE,CAAC;IACpD,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACnD,CAAC","sourcesContent":["import svgCaretUp from '@tmorrow/cre8-wc/icons/Caret_Up.svg?raw';\nimport { html, nothing, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { nanoid } from 'nanoid';\nimport '../field-note/field-note';\nimport styles from './select.styles.js';\nimport Cre8FormElement from '../cre8-form-element.js';\n\nexport interface Cre8SelectOption {\n  label: string;\n  value: number | string;\n}\n\nexport interface Cre8SelectOptionGroup {\n  optGroupLabel: string;\n  options: Cre8SelectOption[];\n}\n\n/**\n * The Select control is designed and built to be used for selecting between choices in a form.\n * It is not a Dropdown control which is generally used for displaying lists of choices\n * that act as links or actions, like filter options.\n *\n * Consider the use of a Select control carefully.\n * When you have less than 5 options for the user to choose from,\n * Radio or Checkbox inputs may be a better choice to display all of the options at once.\n * Users have to slow down to scan a list with more than 15 options,\n * so using an option group to give the options hierarchy may help users find their choice faster.\n * Alternately, a text input field might be a more appropriate control to use when there are too many options,\n * especially when used with typeahead/auto-complete.\n *\n * ## How to use\n * 1. The collapsed default state always shows a default placeholder value or a selected value.\n * 2. Sort list items in a logical order, such as grouping highly related options together,\n *    placing most common options first, using alphabetical or numeric orders or dates in chronological order.\n * 3. A list that includes 6+ items should show a scrollbar.\n * 4. Users should be able to use a keystroke to quickly jump\n *    to selecting an option that begins with the entered letter.\n * 5. Utilize appropriate native controls for when a user is on a mobile device rather than our custom Select.\n * 6. Adhere to our common form field conventions and always include a Label,\n *    provide short and clear error messages in context, avoid using the Read-only\n *    and Disabled states as much as possible, and utilize the info/formatting tip\n *    or helpful link rather than placeholder text.\n *\n * @slot fieldNote - Container for optional field note content\n */\n\nexport class Cre8Select extends Cre8FormElement {\n\n  readonly type = 'select';\n  static styles = [styles];\n\n  /**\n   * A mix of Cre8SelectOption and Cre8SelectOptionGroup definitions:\n   * - Cre8SelectOption\n   *   - label: option label text - `string`\n   *   - value: option value - `number | string`\n   * - Cre8SelectOptionGroup\n   *  - optGroupLabel: optgroup label text - `string`\n   *  - options: Array of multiple Cre8SelectOption items - `Cre8SelectOption[]`\n   */\n  @property({ type: Array })\n  items: Array<Cre8SelectOption | Cre8SelectOptionGroup> = [];\n\n  /**\n   * The required label that appears above the select\n   * @attr {string}\n   */\n  @property()\n  label: string = 'Label';\n\n\n  /**\n  * The unique id of the select\n  * @attr {string}\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 required attribute on the select\n   * @attr {boolean}\n   */\n  @property({ type: Boolean, reflect: true })\n  required: boolean = false;\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  /**\n   * Select input querySelector\n   */\n\n\n\n  /**\n   * Get all select option elements\n   */\n  @queryAll('option')\n  _selectOptions: HTMLOptionsCollection;\n\n\n  /**\n   * Selected item value\n   */\n  private selectedItem: string;\n\n  /**\n   * Initialize aria attributes\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  connectedCallback(): void {\n    super.connectedCallback();\n    this.field.setAttribute('name', this.name ?? '')\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n  /**\n   * First updatedLifecycle\n   * 1) Get the option in the items array with selected set to true. Set that as the selected item\n   * 2) The default value is set to the `option` with the `selected` if one exists. Otherwise, use the\n   * select the first item value like the native select.\n   */\n  firstUpdated() {\n    super.firstUpdated();\n    [...this._selectOptions].forEach((item: { selected: boolean; value: string; }) => { /* 1 */\n      if (item.selected === true) {\n        this.selectedItem = item.value; /* 1 */\n      }\n    });\n    this.defaultValue = this.selectedItem ? this.selectedItem : (this._selectOptions[0].value ?? 'Select An Option'); /* 2 */\n    this._setFormData();\n    this._initializeAria();\n    this.updateField();\n  }\n\n  /**\n * Set form data\n * 1) Set the element internals to the selected item value if it exists,\n *    otherwise the default selected item is the first one\n */\n  private _setFormData() {\n    if (this.selectedItem) {\n      return this._internals?.setFormValue(this.selectedItem);\n    }\n    return this._internals?.setFormValue(this.defaultValue.toString());\n  }\n\n  /**\n   * Handle On Change\n   * 1. Set the value when the select is changed.\n   * 2. Fire the custom event with the current value.\n   */\n  private _handleOnChange(e: Event) {\n    /* 1 */\n    const target = e.target as HTMLSelectElement;\n    this.value = target.options[target.selectedIndex].value;\n    this._internals.setFormValue(this.value);\n\n\n    /* 2 */\n    const customEvent = new CustomEvent('change', {\n      detail: {\n        name: this.name,\n        value: this.value,\n      },\n      bubbles: true,\n      composed: true,\n    });\n    this.dispatchEvent(customEvent);\n  }\n\n  /**\n   * Render the select options\n   */\n  private _renderSelectOptions() {\n    return this.items.map((item: Cre8SelectOption | Cre8SelectOptionGroup) => {\n      if ('options' in item) {\n        const selectedGroup = item.options.map((option: Cre8SelectOption) => html`\n                  <option value=\"${option.value}\">${option.label}</option>\n              `);\n        return html`<optgroup label=\"${item.optGroupLabel}\">\n          ${selectedGroup}\n        </optgroup>`;\n      }\n      return html`<option value=\"${item.value}\">${item.label}</option>`;\n    });\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`\n        <cre8-field-note\n          ?isSuccess=${this.isSuccess}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-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`\n        <cre8-field-note\n          ?isError=${this.isError}\n          id=${this.validationAriaDescribedBy}\n          class=\"cre8-c-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('cre8-c-select', {\n      'cre8-is-error': this.isError,\n      'cre8-is-success': this.isSuccess,\n    });\n\n    return html`\n      <div class=\"${componentClassNames}\">\n        <label class=\"cre8-c-select__label\" for=\"${this.fieldId}\">${this.label}</label>\n        <div class=\"cre8-c-select__body\">\n          <select\n            class=\"cre8-c-select__input\"\n            id=${this.fieldId}\n            name=${ifDefined(this.name)}\n            ?required=${this.required}\n            ?disabled=${this.disabled}\n            aria-describedby=\"${ifDefined(this._fieldNoteAria())}\"\n            @change=${this._handleOnChange}\n          >\n            ${this._renderSelectOptions()}\n          </select>\n          <div class=\"cre8-c-select__icons\">\n            <cre8-icon svg='${svgCaretUp}' rotate=\"180\" class=\"cre8-c-select__icon-arrow\" aria-hidden='true'>\n          </div>\n        </div>\n      </div>\n      ${this.fieldNote || this.slotNotEmpty('fieldNote')\n        ? html`\n          <cre8-field-note\n            id=${this.ariaDescribedBy}\n            class=\"cre8-c-select__field-note\"\n          ><slot name=\"fieldNote\">${this.fieldNote}</slot></cre8-field-note>`\n        : nothing}\n      ${this._renderSuccessErrorFieldNote()}\n    `;\n  }\n}\n\nif (customElements.get('cre8-select') === undefined) {\n  customElements.define('cre8-select', Cre8Select);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-select': Cre8Select;\n  }\n}\n"]}

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import svgCheck from '@tmorrow/cre8-wc/icons/System/Regular/Check.svg?raw';
+import svgCheck from '@tmorrow/cre8-wc/icons/Check.svg?raw';
 import { LitElement, html, } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit-html/directives/if-defined.js';