npm - @tmorrow/cre8-wc - Versions diffs - 2.0.4 → 2.0.5 - Mend

@tmorrow/cre8-wc 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (194) hide show

package/lib/components/page-header/page-header.js CHANGED Viewed

@@ -10,6 +10,7 @@ import { Cre8Element } from '../cre8-element';
 import styles from './page-header.styles.js';
 /**
  * @slot - The page header content
+ * @slot titleAfter - Content rendered after the heading text, inside the title element
  */
 export class Cre8PageHeader extends Cre8Element {
     constructor() {
@@ -25,9 +26,9 @@ export class Cre8PageHeader extends Cre8Element {
       <div class="${componentClassName}">
         <h1 class="cre8-c-page-header__title">
           ${this.heading}
-          ${this.slotNotEmpty('titCre8ter') && html `
+          ${this.slotNotEmpty('titleAfter') && html `
           <div class="cre8-c-page-header__title-after">
-            <slot name="titCre8ter"></slot>
+            <slot name="titleAfter"></slot>
           </div>`}
         </h1>
         <div class="cre8-c-page-header__description">

package/lib/components/page-header/page-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../components/page-header/page-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C~~;;GAEG~~;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QAGE;;WAEG;QAEC,YAAO,GAAW,mBAAmB,CAAC;IAoB5C,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE9E,OAAO,IAAI,CAAA;oBACG,kBAAkB;;YAE1B,IAAI,CAAC,OAAO;YACZ,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAA;;;iBAGlC;;;;;;KAMZ,CAAC;IACJ,CAAC;;AAzBQ,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACe;AAsB5C,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './page-header.styles.js';\n\n/*\n @slot - The page header content\n /\nexport class Cre8PageHeader extends Cre8Element {\n static styles = [styles];\n\n /\n Page header title\n */\n @property({ type: String })\n heading: string = 'Page header title';\n\n render() {\n const componentClassName = this.componentClassNames('cre8-c-page-header', {});\n\n return html`\n <div class=\"${componentClassName}\">\n <h1 class=\"cre8-c-page-header__title\">\n ${this.heading}\n ${this.slotNotEmpty('~~titCre8ter~~') && html`\n <div class=\"cre8-c-page-header__title-after\">\n <slot name=\"~~titCre8ter~~\"></slot>\n </div>`}\n </h1>\n <div class=\"cre8-c-page-header__description\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-page-header') === undefined) {\n customElements.define('cre8-page-header', Cre8PageHeader);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-page-header': Cre8PageHeader;\n }\n}\n\nexport default Cre8PageHeader;\n"]}
1	+ {"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../components/page-header/page-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAE7C;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QAGE;;WAEG;QAEC,YAAO,GAAW,mBAAmB,CAAC;IAoB5C,CAAC;IAlBC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE,EAAE,CAAC,CAAC;QAE9E,OAAO,IAAI,CAAA;oBACG,kBAAkB;;YAE1B,IAAI,CAAC,OAAO;YACZ,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAA;;;iBAGlC;;;;;;KAMZ,CAAC;IACJ,CAAC;;AAzBQ,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAMvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACe;AAsB5C,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './page-header.styles.js';\n\n/*\n @slot - The page header content\n * @slot titleAfter - Content rendered after the heading text, inside the title element\n /\nexport class Cre8PageHeader extends Cre8Element {\n static styles = [styles];\n\n /\n Page header title\n */\n @property({ type: String })\n heading: string = 'Page header title';\n\n render() {\n const componentClassName = this.componentClassNames('cre8-c-page-header', {});\n\n return html`\n <div class=\"${componentClassName}\">\n <h1 class=\"cre8-c-page-header__title\">\n ${this.heading}\n ${this.slotNotEmpty('titleAfter') && html`\n <div class=\"cre8-c-page-header__title-after\">\n <slot name=\"titleAfter\"></slot>\n </div>`}\n </h1>\n <div class=\"cre8-c-page-header__description\">\n <slot></slot>\n </div>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-page-header') === undefined) {\n customElements.define('cre8-page-header', Cre8PageHeader);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-page-header': Cre8PageHeader;\n }\n}\n\nexport default Cre8PageHeader;\n"]}

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

@@ -51,6 +51,10 @@ import './page-counter/page-counter';
  * @cssproperty "--pagination-display" - controls the display css property
  * @cssproperty "--pagination-justify-content" - controls horizontal alignment of pagination
  * @cssproperty "--pagination-align-items" - controls vertical alignment of pagination
+ *
+ * @slot - Optional content rendered alongside the pagination controls
+ *
+ * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
  */
 export declare class Cre8Pagination extends Cre8Element {
     static styles: import("lit").CSSResult[];
@@ -99,6 +103,9 @@ export declare class Cre8Pagination extends Cre8Element {
     * @optional
     */
     hideLastAndFirstButtons?: boolean;
+    /**
+     * The currently active page (1-based). Setting it programmatically navigates the pagination.
+     */
     get currentPage(): number;
     set currentPage(newPage: number);
     connectedCallBack(): void;

package/lib/components/pagination/pagination.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"AAEA,OAAO,EACG,kBAAkB,EAC3B,MAAM,KAAK,CAAC;AAQb,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,6BAA6B,CAAC;AAGrC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG~~;AAEH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB,MAAM,CAAC,kBAAkB;;MAEvB;IAGF,YAAY,EAAE,MAAM,CAAM;IAE1B;;;;OAIG;IAEH,YAAY,EAAG,MAAM,CAAC;IAGtB;;;OAGG;IACH,IACI,QAAQ,IAIU,MAAM,CAF3B;IAED,IAAI,QAAQ,CAAC,OAAO,EAAE,MAAM,EAI3B;IAGD,SAAS,SAAM;IAGf;;;;;OAKG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAK;IAE1B;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE9C;;;OAGG;IAEH,WAAW,EAAG,MAAM,CAAC;IAGrB,OAAO,EAAE,OAAO,UAAU,EAAE,CAAC;IAE7B;;;MAGE;IAEF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC,IACI,WAAW,IAIU,MAAM,CAF9B;IAED,IAAI,WAAW,CAAC,OAAO,EAAE,MAAM,EAI9B;IAED,iBAAiB;IAIjB,IAAI,eAAe,WAelB;IAGD,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,eAAe;IAIvB,YAAY;IAKZ,SAAS,KAAK,SAAS,IAAI,MAAM,EAAE,CAOlC;cAEe,YAAY;IAuB5B,oBAAoB;IAKpB,YAAY,IAAI,kBAAkB;IAUlC,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,CAAC,SAAS,CAkBf;IAEK,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM;IAI1C,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,OA9Be,aAAa;IAkClF,MAAM;CA0IT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,cAAc,CAAC;KACrC;CACJ"}
1	+ {"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../components/pagination/pagination.ts"],"names":[],"mappings":"AAEA,OAAO,EACG,kBAAkB,EAC3B,MAAM,KAAK,CAAC;AAQb,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,6BAA6B,CAAC;AAGrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAEH,qBAAa,cAAe,SAAQ,WAAW;IAC3C,MAAM,CAAC,MAAM,4BAAY;IAEzB,MAAM,CAAC,kBAAkB;;MAEvB;IAGF,YAAY,EAAE,MAAM,CAAM;IAE1B;;;;OAIG;IAEH,YAAY,EAAG,MAAM,CAAC;IAGtB;;;OAGG;IACH,IACI,QAAQ,IAIU,MAAM,CAF3B;IAED,IAAI,QAAQ,CAAC,OAAO,EAAE,MAAM,EAI3B;IAGD,SAAS,SAAM;IAGf;;;;;OAKG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAK;IAE1B;;;;;;;;OAQG;IAEH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE9C;;;OAGG;IAEH,WAAW,EAAG,MAAM,CAAC;IAGrB,OAAO,EAAE,OAAO,UAAU,EAAE,CAAC;IAE7B;;;MAGE;IAEF,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAElC;;OAEG;IACH,IACI,WAAW,IAIU,MAAM,CAF9B;IAED,IAAI,WAAW,CAAC,OAAO,EAAE,MAAM,EAI9B;IAED,iBAAiB;IAIjB,IAAI,eAAe,WAelB;IAGD,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,CAAC,eAAe;IAIvB,YAAY;IAKZ,SAAS,KAAK,SAAS,IAAI,MAAM,EAAE,CAOlC;cAEe,YAAY;IAuB5B,oBAAoB;IAKpB,YAAY,IAAI,kBAAkB;IAUlC,OAAO,CAAC,cAAc,CAIpB;IAEF,OAAO,CAAC,SAAS,CAkBf;IAEK,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM;IAI1C,aAAa,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,OA9Be,aAAa;IAkClF,MAAM;CA0IT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,iBAAiB,EAAE,cAAc,CAAC;KACrC;CACJ"}

package/lib/components/pagination/pagination.js CHANGED Viewed

@@ -68,6 +68,10 @@ import styles from './pagination.styles.js';
  * @cssproperty "--pagination-display" - controls the display css property
  * @cssproperty "--pagination-justify-content" - controls horizontal alignment of pagination
  * @cssproperty "--pagination-align-items" - controls vertical alignment of pagination
+ *
+ * @slot - Optional content rendered alongside the pagination controls
+ *
+ * @fires pagination.click - Fires when the page changes. `event.detail` is `{ buttonName, value }` where `value` is the new current page.
  */
 export class Cre8Pagination extends Cre8Element {
     constructor() {
@@ -115,6 +119,9 @@ export class Cre8Pagination extends Cre8Element {
         this._pageSize = newSize;
         this.requestUpdate('pageSize', oldSize);
     }
+    /**
+     * The currently active page (1-based). Setting it programmatically navigates the pagination.
+     */
     get currentPage() {
         return this._currentPage;
     }

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

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

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

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

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

@@ -37,6 +37,7 @@ export class Cre8PercentBar extends Cre8Element {
                 ${this.isFirstStep()
             ? html ` <cre8-button
                       ?hideText=${true}
+                      text="Previous step"
                       svg="${svgCaretUp}"
                       iconRotateDegree="-90"
                       variant="tertiary"

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

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

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

@@ -4,6 +4,12 @@ import '../heading/heading';
  * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.
  * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.
  * @slot - The component content
+ * @slot trigger - The element that toggles the popover open and closed
+ * @slot header - Custom header content for the popover panel
+ * @slot footer - Custom footer content for the popover panel
+ *
+ * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.
+ * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.
  */
 export declare class Cre8Popover extends Cre8Element {
     static styles: import("lit").CSSResult[];

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

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

package/lib/components/popover/popover.js CHANGED Viewed

@@ -13,6 +13,12 @@ import styles from './popover.styles.js';
  * The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.
  * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.
  * @slot - The component content
+ * @slot trigger - The element that toggles the popover open and closed
+ * @slot header - Custom header content for the popover panel
+ * @slot footer - Custom footer content for the popover panel
+ *
+ * @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.
+ * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.
  */
 export class Cre8Popover extends Cre8Element {
     constructor() {
@@ -125,7 +131,7 @@ export class Cre8Popover extends Cre8Element {
     addAria() {
         /* 1 */
         let popoverTrigger;
-        if (this._Cre8PopoverTrigger[0].tagName === 'cre8-BUTTON') {
+        if (this._Cre8PopoverTrigger[0].tagName === 'CRE8-BUTTON') {
             popoverTrigger = this._Cre8PopoverTrigger[0];
             popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;
         }

package/lib/components/popover/popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../heading/heading';\nimport styles from './popover.styles.js';\nimport { Cre8Button } from '../button/button';\n\n/*\n The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.\n * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.\n * @slot - The component content\n /\n\nexport class Cre8Popover extends Cre8Element {\n static styles = [styles];\n\n /\n The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.\n * @attr {string \| undefined}\n /\n @property()\n heading?: string;\n\n /\n Positions the popover panel absolutely to the trigger\n * - default positions the popover panel below the trigger\n * - top positions the popover panel below the trigger\n * - left positions the popover panel below the trigger\n * - right positions the popover panel below the trigger\n * @attr {string \| undefined}\n /\n @property()\n position?: 'top' \| 'left' \| 'right';\n\n /\n Set to prevent the popover panel from hiding on scroll\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isVisibleOnScroll?: boolean;\n\n /\n The dynamic state for the popover\n * - If true, the popover panel placement is determined by its position in the viewport\n * - If false, the popover panel placement will be placed according to the position value\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isDynamic?: boolean;\n\n /\n The dynamic active state\n * _This property is dynamically set_\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isActiveDynamic?: boolean;\n\n /\n The active state for the popover\n * - If true, the popover panel is visible\n * - If false, the popover panel is hidden\n \n _This property is dynamically set_\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isActive?: boolean;\n\n\n /\n Query the popover panel element\n /\n @query('.cre8-c-popover')\n _Cre8Popover: HTMLElement;\n\n /\n Query the popover panel element\n /\n @query('.cre8-c-popover__panel')\n _Cre8PopoverPanel: HTMLElement;\n\n /\n Query the assigned elements in the trigger slot\n /\n @queryAssignedElements({ slot: 'trigger' })\n _Cre8PopoverTrigger: Array<HTMLElement>;\n\n /\n Query the assigned elements in the footer slot\n /\n @queryAssignedElements({ slot: 'footer' })\n _Cre8PopoverFooter: Array<HTMLElement>;\n\n /\n Query the document direction value\n * <br/><br/> _This property is dynamically set_\n /\n get isRTL() {\n return document.dir === 'rtl';\n }\n\n /*\n Connected Callback Lifecycle\n * 1. Add window resize event listener\n * 2. Add window scroll event listener\n * 3. Add window orientation change event listener\n * 4. Add mousedown event listener\n /\n connectedCallback() {\n super.connectedCallback();\n globalThis.window.addEventListener('resize', this.removeActive); / 1 /\n globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); / 2 /\n globalThis.window.addEventListener('orientationchange', this.removeActive); / 3 /\n globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); / 4 /\n }\n\n /\n Disconnected Callback Lifecycle\n * 1. Remove window resize event listener\n * 2. Remove window scroll event listener\n * 3. Remove window orientation change event listener\n * 4. Remove mousedown event listener\n /\n disconnectedCallback() {\n super.disconnectedCallback();\n globalThis.window.removeEventListener('resize', this.removeActive); / 1 /\n globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); / 2 /\n globalThis.window.removeEventListener('orientationchange', this.removeActive); / 3 /\n globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); / 4 /\n }\n\n /\n First Updated Lifecycle\n * 1. Set attribute since aria expanded can't be passed down through the slot\n /\n firstUpdated() {\n this.addAria(); / 1 /\n }\n\n /\n Add aria attributes on the trigger button\n * 1. Select the element within the trigger slot\n * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.\n * 3 Set the type to button.\n /\n addAria() {\n / 1 /\n let popoverTrigger;\n if (this._Cre8PopoverTrigger[0].tagName === 'cre8-BUTTON') {\n popoverTrigger = this._Cre8PopoverTrigger[0] as Cre8Button;\n popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;\n } else {\n popoverTrigger = this._Cre8PopoverTrigger[0];\n popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); / 2 /\n popoverTrigger.setAttribute('type', 'button'); / 3 /\n }\n }\n\n /\n Handle all dynamic placement\n /\n dynamicPosition() {\n // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n / eslint complexity: [\"warn\", 10] /\n if (this.isDynamic && this._Cre8PopoverPanel) {\n const body = document.querySelector('body').getBoundingClientRect();\n const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n\n /\n If popover panel breaks out the left side of the window, position it to the right\n /\n if (popoverPanel.left < 0) {\n this.position = this.isRTL ? 'left' : 'right';\n }\n\n /\n If popover panel breaks out the right side of the window, position it to the left\n /\n if (popoverPanel.right >= body.width) {\n this.position = this.isRTL ? 'right' : 'left';\n }\n\n /\n If popover panel breaks out the top side of the window only, position it to the bottom\n /\n if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {\n this.position = null;\n }\n\n /\n If popover panel breaks out the bottom side of the window only, position it to the top\n /\n if (\n popoverPanel.bottom >= window.innerHeight\n && popoverPanel.left >= 0\n && popoverPanel.right <= body.width\n ) {\n this.position = 'top';\n }\n }\n }\n\n /\n Set Popover Active State\n * 1. Toggle the active state between true and false\n * 2. Set attribute since aria expanded can't be passed down through the slot\n * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.\n * This accounts for both design system buttons and native HTML buttons\n /\n private _toggleActive() {\n this.isActive = !this.isActive; / 1 /\n this.addAria(); / 2 /\n\n if (this.isActive) {\n requestAnimationFrame(() => {\n this.dynamicPosition();\n });\n this.dispatchEvent(\n new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n );\n } else {\n / 3 /\n this.dispatchEvent(\n new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n );\n }\n\n /\n Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position\n /\n setTimeout(() => {\n if (this.isActive) {\n this.isActiveDynamic = true;\n } else {\n this.isActiveDynamic = false;\n }\n }, 2);\n }\n\n /\n Handle Keydown\n * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button\n * 2. If the panel is opened, tab away closes the popover panel\n * 3. The panel can be opened and closed by Enter or Space keys.\n /\n private _handleKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape' && this.isActive === true) {\n this._toggleActive();\n } else if (e.key === 'Tab') {\n this._handleTabNavigation(e);\n }\n }\n\n private _handleTabNavigation(e: KeyboardEvent) {\n if (this.isActive) {\n this._navigateInsidePopover(e);\n }\n }\n\n private _navigateInsidePopover(e: KeyboardEvent) {\n const focusableElements = this._getFocusableElements();\n if (focusableElements.length === 0) {\n this._closePopoverAndFocusTrigger(e);\n return;\n }\n\n const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n if (document.activeElement === lastFocusableElement) {\n this._closePopoverAndFocusTrigger(e);\n e.preventDefault();\n }\n }\n\n private _getFocusableElements(): HTMLElement[] {\n const panelFocusableElements = Array.from(this._Cre8PopoverFooter);\n return [...panelFocusableElements];\n }\n\n private _closePopoverAndFocusTrigger(e: KeyboardEvent) {\n this._toggleActive();\n e.preventDefault();\n }\n\n /\n Handle click outside the component\n * 1. Close the show/hide popover panel on click outside\n * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early\n * 3. By the time a user clicks on the page the shadowRoot will almost certainly be\n * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n * undefined. To work around that we'll check that we have a shadowRoot (and a\n * rendered .host) element here to appease the TypeScript compiler. This should never\n * actually be shown or run for a human end user.\n * 4. Check to see if we clicked inside the active panel\n * 5. If the panel is active and we've clicked outside of the panel then it should be closed.\n /\n handleOnClickOutside = (e: MouseEvent) => {\n / 2 /\n if (!this.isActive) {\n return;\n }\n\n / 3 /\n if (!this.shadowRoot?.host) {\n throw Error('Could not determine panel context during click handler');\n }\n\n / 4 /\n const didClickInside = e.composedPath().includes(this.shadowRoot.host);\n\n / 5 /\n if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {\n if (this.isActive && !didClickInside) {\n this._toggleActive();\n }\n }\n };\n\n /\n Remove Active State on Scroll\n * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state\n * 2. If the popover height is less than the window height, then allow the active to remove on scroll\n /\n removeActiveOnScroll = () => {\n / 1 /\n if (this.isActive && !this.isVisibleOnScroll) {\n / 2 /\n const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n const popoverTrigger = this._Cre8Popover;\n const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;\n\n if (popoverHeight < window.innerHeight) {\n this._toggleActive();\n }\n }\n };\n\n /\n Remove Active State\n * 1. If a specific event is fired, remove the active state.\n */\n removeActive = () => {\n if (this.isActive) {\n this._toggleActive();\n }\n };\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-popover', {\n 'cre8-c-popover--top': this.position === 'top',\n 'cre8-c-popover--left': this.position === 'left',\n 'cre8-c-popover--right': this.position === 'right',\n 'cre8-is-active': this.isActive,\n 'cre8-is-dynamic': this.isDynamic,\n 'cre8-is-dynamic-active': this.isActiveDynamic,\n });\n\n return html`\n <div class=\"${componentClassNames}\">\n ${this.slotNotEmpty('trigger')\n && html` <slot name=\"trigger\" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}\n ${this.isActive\n ? html`\n <div tabindex=\"0\" class=\"cre8-c-popover__panel\" @keydown=${this._handleKeydown}>\n ${(this.slotNotEmpty('header') \|\| this.heading)\n && html`\n <div class=\"cre8-c-popover__header\">\n ${this.heading\n ? html`<div class=\"cre8-c-popover__heading\">${this.heading}</div>`\n : html`<slot name=\"header\"></slot>`}\n </div>\n `}\n <slot></slot>\n ${this.slotNotEmpty('footer')\n && html`\n <div class=\"cre8-c-popover__footer\">\n <slot name=\"footer\"></slot>\n </div>\n `}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-popover') === undefined) {\n customElements.define('cre8-popover', Cre8Popover);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-popover': Cre8Popover;\n }\n}\n\nexport default Cre8Popover;\n"]}
1	+ {"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../components/popover/popover.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing, } from 'lit';\nimport { property, query, queryAssignedElements } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport '../heading/heading';\nimport styles from './popover.styles.js';\nimport { Cre8Button } from '../button/button';\n\n/*\n The Popover is for progressive disclosure of relevant content often hidden behind a help or info icon.\n * Its content should be no longer than 3-4 lines in addition to a line of heading text and an optional button.\n * @slot - The component content\n * @slot trigger - The element that toggles the popover open and closed\n * @slot header - Custom header content for the popover panel\n * @slot footer - Custom footer content for the popover panel\n \n @fires open - Fires when the popover opens. `event.detail.isActive` is `true`.\n * @fires close - Fires when the popover closes. `event.detail.isActive` is `false`.\n /\n\nexport class Cre8Popover extends Cre8Element {\n static styles = [styles];\n\n /\n The heading text that appears at the top of the popover panel. Should only be 2-3 lines max.\n * @attr {string \| undefined}\n /\n @property()\n heading?: string;\n\n /\n Positions the popover panel absolutely to the trigger\n * - default positions the popover panel below the trigger\n * - top positions the popover panel below the trigger\n * - left positions the popover panel below the trigger\n * - right positions the popover panel below the trigger\n * @attr {string \| undefined}\n /\n @property()\n position?: 'top' \| 'left' \| 'right';\n\n /\n Set to prevent the popover panel from hiding on scroll\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isVisibleOnScroll?: boolean;\n\n /\n The dynamic state for the popover\n * - If true, the popover panel placement is determined by its position in the viewport\n * - If false, the popover panel placement will be placed according to the position value\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isDynamic?: boolean;\n\n /\n The dynamic active state\n * _This property is dynamically set_\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isActiveDynamic?: boolean;\n\n /\n The active state for the popover\n * - If true, the popover panel is visible\n * - If false, the popover panel is hidden\n \n _This property is dynamically set_\n * @attr {boolean \| undefined}\n /\n @property({ type: Boolean, reflect: true })\n isActive?: boolean;\n\n\n /\n Query the popover panel element\n /\n @query('.cre8-c-popover')\n _Cre8Popover: HTMLElement;\n\n /\n Query the popover panel element\n /\n @query('.cre8-c-popover__panel')\n _Cre8PopoverPanel: HTMLElement;\n\n /\n Query the assigned elements in the trigger slot\n /\n @queryAssignedElements({ slot: 'trigger' })\n _Cre8PopoverTrigger: Array<HTMLElement>;\n\n /\n Query the assigned elements in the footer slot\n /\n @queryAssignedElements({ slot: 'footer' })\n _Cre8PopoverFooter: Array<HTMLElement>;\n\n /\n Query the document direction value\n * <br/><br/> _This property is dynamically set_\n /\n get isRTL() {\n return document.dir === 'rtl';\n }\n\n /*\n Connected Callback Lifecycle\n * 1. Add window resize event listener\n * 2. Add window scroll event listener\n * 3. Add window orientation change event listener\n * 4. Add mousedown event listener\n /\n connectedCallback() {\n super.connectedCallback();\n globalThis.window.addEventListener('resize', this.removeActive); / 1 /\n globalThis.window.addEventListener('scroll', this.removeActiveOnScroll); / 2 /\n globalThis.window.addEventListener('orientationchange', this.removeActive); / 3 /\n globalThis.document.addEventListener('mousedown', this.handleOnClickOutside, false); / 4 /\n }\n\n /\n Disconnected Callback Lifecycle\n * 1. Remove window resize event listener\n * 2. Remove window scroll event listener\n * 3. Remove window orientation change event listener\n * 4. Remove mousedown event listener\n /\n disconnectedCallback() {\n super.disconnectedCallback();\n globalThis.window.removeEventListener('resize', this.removeActive); / 1 /\n globalThis.window.removeEventListener('scroll', this.removeActiveOnScroll); / 2 /\n globalThis.window.removeEventListener('orientationchange', this.removeActive); / 3 /\n globalThis.document.removeEventListener('mousedown', this.handleOnClickOutside, false); / 4 /\n }\n\n /\n First Updated Lifecycle\n * 1. Set attribute since aria expanded can't be passed down through the slot\n /\n firstUpdated() {\n this.addAria(); / 1 /\n }\n\n /\n Add aria attributes on the trigger button\n * 1. Select the element within the trigger slot\n * 2. Set aria-expanded on the popover trigger to the active state if provided. Otherwise, set to false.\n * 3 Set the type to button.\n /\n addAria() {\n / 1 /\n let popoverTrigger;\n if (this._Cre8PopoverTrigger[0].tagName === 'CRE8-BUTTON') {\n popoverTrigger = this._Cre8PopoverTrigger[0] as Cre8Button;\n popoverTrigger.buttonAriaExpanded = this.isActive ? this.isActive : false;\n } else {\n popoverTrigger = this._Cre8PopoverTrigger[0];\n popoverTrigger.setAttribute('aria-expanded', `${this.isActive ? this.isActive : false}`); / 2 /\n popoverTrigger.setAttribute('type', 'button'); / 3 /\n }\n }\n\n /\n Handle all dynamic placement\n /\n dynamicPosition() {\n // TODO: Temporarily keep eslint complexity as warning. Update during specific story for this rule.\n / eslint complexity: [\"warn\", 10] /\n if (this.isDynamic && this._Cre8PopoverPanel) {\n const body = document.querySelector('body').getBoundingClientRect();\n const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n\n /\n If popover panel breaks out the left side of the window, position it to the right\n /\n if (popoverPanel.left < 0) {\n this.position = this.isRTL ? 'left' : 'right';\n }\n\n /\n If popover panel breaks out the right side of the window, position it to the left\n /\n if (popoverPanel.right >= body.width) {\n this.position = this.isRTL ? 'right' : 'left';\n }\n\n /\n If popover panel breaks out the top side of the window only, position it to the bottom\n /\n if (popoverPanel.top < 0 && popoverPanel.left > 0 && popoverPanel.right < body.width) {\n this.position = null;\n }\n\n /\n If popover panel breaks out the bottom side of the window only, position it to the top\n /\n if (\n popoverPanel.bottom >= window.innerHeight\n && popoverPanel.left >= 0\n && popoverPanel.right <= body.width\n ) {\n this.position = 'top';\n }\n }\n }\n\n /\n Set Popover Active State\n * 1. Toggle the active state between true and false\n * 2. Set attribute since aria expanded can't be passed down through the slot\n * 3. If the active state is toggled to false, close the panel and return focus to the dropdown trigger.\n * This accounts for both design system buttons and native HTML buttons\n /\n private _toggleActive() {\n this.isActive = !this.isActive; / 1 /\n this.addAria(); / 2 /\n\n if (this.isActive) {\n requestAnimationFrame(() => {\n this.dynamicPosition();\n });\n this.dispatchEvent(\n new CustomEvent('open', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n );\n } else {\n / 3 /\n this.dispatchEvent(\n new CustomEvent('close', { detail: { isActive: this.isActive }, bubbles: true, composed: true })\n );\n }\n\n /\n Toggle the active state for dynamic. This prevents a flash of the popover in the orginal position\n /\n setTimeout(() => {\n if (this.isActive) {\n this.isActiveDynamic = true;\n } else {\n this.isActiveDynamic = false;\n }\n }, 2);\n }\n\n /\n Handle Keydown\n * 1. If the panel is open and escape is keyed, close the popover panel and return focus to the trigger button\n * 2. If the panel is opened, tab away closes the popover panel\n * 3. The panel can be opened and closed by Enter or Space keys.\n /\n private _handleKeydown(e: KeyboardEvent) {\n if (e.key === 'Escape' && this.isActive === true) {\n this._toggleActive();\n } else if (e.key === 'Tab') {\n this._handleTabNavigation(e);\n }\n }\n\n private _handleTabNavigation(e: KeyboardEvent) {\n if (this.isActive) {\n this._navigateInsidePopover(e);\n }\n }\n\n private _navigateInsidePopover(e: KeyboardEvent) {\n const focusableElements = this._getFocusableElements();\n if (focusableElements.length === 0) {\n this._closePopoverAndFocusTrigger(e);\n return;\n }\n\n const lastFocusableElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n if (document.activeElement === lastFocusableElement) {\n this._closePopoverAndFocusTrigger(e);\n e.preventDefault();\n }\n }\n\n private _getFocusableElements(): HTMLElement[] {\n const panelFocusableElements = Array.from(this._Cre8PopoverFooter);\n return [...panelFocusableElements];\n }\n\n private _closePopoverAndFocusTrigger(e: KeyboardEvent) {\n this._toggleActive();\n e.preventDefault();\n }\n\n /\n Handle click outside the component\n * 1. Close the show/hide popover panel on click outside\n * 2. If the popover panel is already closed then we don't care about outside clicks and we can bail early\n * 3. By the time a user clicks on the page the shadowRoot will almost certainly be\n * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n * undefined. To work around that we'll check that we have a shadowRoot (and a\n * rendered .host) element here to appease the TypeScript compiler. This should never\n * actually be shown or run for a human end user.\n * 4. Check to see if we clicked inside the active panel\n * 5. If the panel is active and we've clicked outside of the panel then it should be closed.\n /\n handleOnClickOutside = (e: MouseEvent) => {\n / 2 /\n if (!this.isActive) {\n return;\n }\n\n / 3 /\n if (!this.shadowRoot?.host) {\n throw Error('Could not determine panel context during click handler');\n }\n\n / 4 /\n const didClickInside = e.composedPath().includes(this.shadowRoot.host);\n\n / 5 /\n if (!(e.target === document.querySelector('html') && e.clientX >= document.documentElement.offsetWidth)) {\n if (this.isActive && !didClickInside) {\n this._toggleActive();\n }\n }\n };\n\n /\n Remove Active State on Scroll\n * 1. If a scroll event is fired and visibileOnScroll is not true, remove the active state\n * 2. If the popover height is less than the window height, then allow the active to remove on scroll\n /\n removeActiveOnScroll = () => {\n / 1 /\n if (this.isActive && !this.isVisibleOnScroll) {\n / 2 /\n const popoverPanel = this._Cre8PopoverPanel.getBoundingClientRect();\n const popoverTrigger = this._Cre8Popover;\n const popoverHeight = popoverTrigger.clientHeight + popoverPanel.height + popoverPanel.top;\n\n if (popoverHeight < window.innerHeight) {\n this._toggleActive();\n }\n }\n };\n\n /\n Remove Active State\n * 1. If a specific event is fired, remove the active state.\n */\n removeActive = () => {\n if (this.isActive) {\n this._toggleActive();\n }\n };\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-popover', {\n 'cre8-c-popover--top': this.position === 'top',\n 'cre8-c-popover--left': this.position === 'left',\n 'cre8-c-popover--right': this.position === 'right',\n 'cre8-is-active': this.isActive,\n 'cre8-is-dynamic': this.isDynamic,\n 'cre8-is-dynamic-active': this.isActiveDynamic,\n });\n\n return html`\n <div class=\"${componentClassNames}\">\n ${this.slotNotEmpty('trigger')\n && html` <slot name=\"trigger\" @keydown=${this._handleKeydown} @click=${this._toggleActive}></slot> `}\n ${this.isActive\n ? html`\n <div tabindex=\"0\" class=\"cre8-c-popover__panel\" @keydown=${this._handleKeydown}>\n ${(this.slotNotEmpty('header') \|\| this.heading)\n && html`\n <div class=\"cre8-c-popover__header\">\n ${this.heading\n ? html`<div class=\"cre8-c-popover__heading\">${this.heading}</div>`\n : html`<slot name=\"header\"></slot>`}\n </div>\n `}\n <slot></slot>\n ${this.slotNotEmpty('footer')\n && html`\n <div class=\"cre8-c-popover__footer\">\n <slot name=\"footer\"></slot>\n </div>\n `}\n </div>\n `\n : nothing}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-popover') === undefined) {\n customElements.define('cre8-popover', Cre8Popover);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-popover': Cre8Popover;\n }\n}\n\nexport default Cre8Popover;\n"]}

package/lib/components/primary-nav-item/primary-nav-item.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { Cre8Element } from '../cre8-element';
 /**
  * @slot - The label for the navigation item
+ * @slot itemBefore - Content rendered before the item label, such as an icon
+ * @slot itemAfter - Content rendered after the item label, such as an icon
  */
 export declare class Cre8PrimaryNavItem extends Cre8Element {
     /**

package/lib/components/primary-nav-item/primary-nav-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"primary-nav-item.d.ts","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C~~;;GAEG~~;AACP,qBAAa,kBAAmB,SAAQ,WAAW;IAC/C;;OAEG;IAEC,IAAI,SAAc;IAEtB;;OAEG;IAEC,IAAI,SAAO;IAEf;;OAEG;IAEC,QAAQ,CAAC,EAAE,MAAM,CAAgB;IAErC;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;;IAOH;;OAEG;IACH,iBAAiB;IAOjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;CAyDT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;CACJ;AAED,eAAe,kBAAkB,CAAC"}
1	+ {"version":3,"file":"primary-nav-item.d.ts","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG1C;;;;GAIG;AACP,qBAAa,kBAAmB,SAAQ,WAAW;IAC/C;;OAEG;IAEC,IAAI,SAAc;IAEtB;;OAEG;IAEC,IAAI,SAAO;IAEf;;OAEG;IAEC,QAAQ,CAAC,EAAE,MAAM,CAAgB;IAErC;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;;IAOH;;OAEG;IACH,iBAAiB;IAOjB;;;OAGG;IACH,oBAAoB;IAKpB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,qBAAqB;IAoB7B;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,gBAAgB;IAcxB,MAAM;CAyDT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;CACJ;AAED,eAAe,kBAAkB,CAAC"}

package/lib/components/primary-nav-item/primary-nav-item.js CHANGED Viewed

@@ -11,6 +11,8 @@ import { Cre8Element } from '../cre8-element';
 import styles from './primary-nav-item.styles.js';
 /**
  * @slot - The label for the navigation item
+ * @slot itemBefore - Content rendered before the item label, such as an icon
+ * @slot itemAfter - Content rendered after the item label, such as an icon
  */
 export class Cre8PrimaryNavItem extends Cre8Element {
     /**

package/lib/components/primary-nav-item/primary-nav-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"primary-nav-item.js","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAE9C;;GAEG;AACP,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAiC/C;;OAEG;IACH;QACI,KAAK,EAAE,CAAC;QApCZ;;WAEG;QAEC,SAAI,GAAG,UAAU,CAAC;QAEtB;;WAEG;QAEC,SAAI,GAAG,GAAG,CAAC;QAEf;;WAEG;QAEC,aAAQ,GAAY,YAAY,CAAC;QAqBjC,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACnE,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvD,CAAC;IAED;;OAEG;IACH,iBAAiB;QACb,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;IAC9E,CAAC;IAED;;;OAGG;IACH,oBAAoB;QAChB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC;QAC7E,KAAK,CAAC,oBAAoB,EAAE,CAAC;IACjC,CAAC;IAED;;;;;;;;;;;;;OAaG;IACK,qBAAqB,CAAC,KAAiB;QAC3C,OAAO;QACP,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,OAAO;QACX,CAAC;QAED,OAAO;QACP,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,CAAC;YACzB,MAAM,KAAK,CAAC,6DAA6D,CAAC,CAAC;QAC/E,CAAC;QAED,OAAO;QACP,MAAM,cAAc,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAE3E,OAAO;QACP,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,cAAc,EAAE,CAAC;YACnC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC1B,CAAC;IACL,CAAC;IAED;;;;OAIG;IACK,aAAa,CAAC,CAAa;QAC/B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;YAC3E,QAAQ,CAAC,OAAO,CAAC,CAAC,OAA2B,EAAE,EAAE;gBAC7C,IAAI,OAAO,KAAK,IAAI,EAAE,CAAC;oBACnB,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC,CAAC,OAAO;gBACrC,CAAC;YACL,CAAC,CAAC,CAAC;QACP,CAAC;QACD,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO;IAC3C,CAAC;IAEO,WAAW;QACf,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;IAC1B,CAAC;IAEO,gBAAgB,CAAC,CAAgB;QACrC,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,EAAE,CAAC;YAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,MAAM,OAAO,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAC1C,2BAA2B,CAC9B,CAAC;YACF,IAAI,OAAO,EAAE,CAAC;gBACV,UAAU,CAAC,GAAG,EAAE;oBACZ,OAAO,CAAC,KAAK,EAAE,CAAC;gBACpB,CAAC,EAAE,CAAC,CAAC,CAAC;YACV,CAAC;QACL,CAAC;IACL,CAAC;IAED,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,0BAA0B,EAAE;YAC5E,gBAAgB,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;YACxC,oCAAoC,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SAC/D,CAAC,CAAC;QAEH,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,OAAO,IAAI,CAAA;0BACG,kBAAkB,cAAc,IAAI,CAAC,gBAAgB;;;;iCAI9C,IAAI,CAAC,aAAa;wCACX,IAAI,CAAC,QAAQ,KAAK,IAAI;;0BAEpC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAA;;;;yBAIxC;0BACC,IAAI,CAAC,IAAI;0BACT,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,IAAI,CAAA;;;;yBAIvC;qEAC4C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC;;;;;;;;;SASpF,CAAC;QACF,CAAC;QACD,OAAO,IAAI,CAAA;0BACO,kBAAkB;;gEAEoB,IAAI,CAAC,IAAI;0BAC/C,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAA;;;;yBAIxC;0BACC,IAAI,CAAC,IAAI;0BACT,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,IAAI,IAAI,CAAA;;;;yBAIvC;;;;SAIhB,CAAC;IACN,CAAC;;AA5JM,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AA1BrB;IADH,QAAQ,EAAE;gDACW;AAMlB;IADH,QAAQ,EAAE;gDACI;AAMX;IADH,QAAQ,EAAE;oDAC0B;AAMjC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACpB;AAMnB;IADH,KAAK,EAAE;oDACe;AAiK3B,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,CAAC;AACvE,CAAC;AAQD,eAAe,kBAAkB,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './primary-nav-item.styles.js';\n\n /*\n @slot - The label for the navigation item\n /\nexport class Cre8PrimaryNavItem extends Cre8Element {\n /\n Primary nav item text\n /\n @property()\n text = 'Nav item';\n\n /\n Primary nav item href\n /\n @property()\n href = '#';\n\n /\n Icon name\n /\n @property()\n iconName?: string = 'caret-down';\n\n /\n Append to the class name. Used for passing in utility classes\n /\n @property({ type: Boolean, reflect: true })\n megaMenu?: boolean;\n\n /\n Append to the class name. Used for passing in utility classes\n /\n @state()\n isActive?: boolean;\n\n static styles = [styles];\n\n /\n Initialize functions\n /\n constructor() {\n super();\n this._handleOnClickOutside = this._handleOnClickOutside.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n /\n Connected Callback lifecycle\n /\n connectedCallback() {\n this.setAttribute('role', 'listitem');\n super.connectedCallback();\n\n document.addEventListener('mousedown', this._handleOnClickOutside, false);\n }\n\n /\n Disconnected callback lifecycle\n * 1) Remove window resize event listener\n /\n disconnectedCallback() {\n document.removeEventListener('mousedown', this._handleOnClickOutside, false);\n super.disconnectedCallback();\n }\n\n /\n Handle click outside the component\n * 1) Close the show hide panel on click outside\n * 2) If the nav is already closed then we don't care about outside clicks and we\n * can bail early\n * 3) By the time a user clicks on the page the shadowRoot will almost certainly be\n * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n * undefined. To work around that we'll check that we have a shadowRoot (and a\n * rendered .host) element here to appease the TypeScript compiler. This should never\n * actually be shown or run for a human end user.\n * 4) Check to see if we clicked inside the active navigation item\n * 5) If the navigation is active and we've clicked outside of the nav then it should\n * be closed.\n /\n private _handleOnClickOutside(event: MouseEvent) {\n / 2 /\n if (!this.isActive) {\n return;\n }\n\n / 3 /\n if (!this.shadowRoot?.host) {\n throw Error('Could not determine navigation context during click handler');\n }\n\n / 4 /\n const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n\n / 5 /\n if (this.isActive && !didClickInside) {\n this.isActive = false;\n }\n }\n\n /\n Toggle active state of primary nav item\n * 1) Remove isActive state from all sibling elements\n * 2) Toggle active state of element selected\n /\n private _clickHandler(e: MouseEvent) {\n e.preventDefault();\n if (this.parentNode) {\n const navItems = this.parentNode.querySelectorAll('cre8-primary-nav-item');\n navItems.forEach((element: Cre8PrimaryNavItem) => {\n if (element !== this) {\n element.isActive = false; / 1 /\n }\n });\n }\n this.isActive = !this.isActive; / 2 */\n }\n\n private _closePanel() {\n this.isActive = false;\n }\n\n private _handleOnKeyDown(e: KeyboardEvent) {\n if (e.key === 'Escape' && this.isActive === true) {\n this._closePanel();\n const navLink = this.shadowRoot?.querySelector<HTMLButtonElement \| HTMLAnchorElement>(\n '.cre8-c-primary-nav__link'\n );\n if (navLink) {\n setTimeout(() => {\n navLink.focus();\n }, 1);\n }\n }\n }\n\n render() {\n const componentClassName = this.componentClassNames('cre8-c-primary-nav__item', {\n 'cre8-is-active': this.isActive === true,\n 'cre8-c-primary-nav__item--megamenu': this.megaMenu === true,\n });\n\n if (this.megaMenu) {\n return html`\n <div class=\"${componentClassName}\" @keydown=${this._handleOnKeyDown}>\n <div class=\"cre8-c-primary-nav__item-content\">\n <button\n class=\"cre8-c-primary-nav__link\"\n @click=${this._clickHandler}\n aria-expanded=${this.isActive === true}\n >\n ${this.slotNotEmpty('itemBefore') && html`\n <div class=\"cre8-c-primary-nav__item-before\">\n <slot name=\"itemBefore\"></slot>\n </div>\n `}\n ${this.text}\n ${this.slotNotEmpty('itemAfter') && html`\n <div class=\"cre8-c-primary-nav__item-after\">\n <slot name=\"itemAfter\"></slot>\n </div>\n `}\n <cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>\n </button>\n </div>\n <div class=\"cre8-c-primary-nav__item-panel\">\n <div class=\"cre8-c-primary-nav__item-panel-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n `;\n }\n return html`\n <div class=\"${componentClassName}\">\n <div class=\"cre8-c-primary-nav__item-content\">\n <a class=\"cre8-c-primary-nav__link\" href=\"${this.href}\">\n ${this.slotNotEmpty('itemBefore') && html`\n <div class=\"cre8-c-primary-nav__item-before\">\n <slot name=\"itemBefore\"></slot>\n </div>\n `}\n ${this.text}\n ${this.slotNotEmpty('itemAfter') && html`\n <div class=\"cre8-c-primary-nav__item-after\">\n <slot name=\"itemAfter\"></slot>\n </div>\n `}\n </a>\n </div>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-primary-nav-item') === undefined) {\n customElements.define('cre8-primary-nav-item', Cre8PrimaryNavItem);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-primary-nav-item': Cre8PrimaryNavItem;\n }\n}\n\nexport default Cre8PrimaryNavItem;\n"]}
1	+ {"version":3,"file":"primary-nav-item.js","sourceRoot":"","sources":["../../../components/primary-nav-item/primary-nav-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './primary-nav-item.styles.js';\n\n /*\n @slot - The label for the navigation item\n * @slot itemBefore - Content rendered before the item label, such as an icon\n * @slot itemAfter - Content rendered after the item label, such as an icon\n /\nexport class Cre8PrimaryNavItem extends Cre8Element {\n /\n Primary nav item text\n /\n @property()\n text = 'Nav item';\n\n /\n Primary nav item href\n /\n @property()\n href = '#';\n\n /\n Icon name\n /\n @property()\n iconName?: string = 'caret-down';\n\n /\n Append to the class name. Used for passing in utility classes\n /\n @property({ type: Boolean, reflect: true })\n megaMenu?: boolean;\n\n /\n Append to the class name. Used for passing in utility classes\n /\n @state()\n isActive?: boolean;\n\n static styles = [styles];\n\n /\n Initialize functions\n /\n constructor() {\n super();\n this._handleOnClickOutside = this._handleOnClickOutside.bind(this);\n this._clickHandler = this._clickHandler.bind(this);\n }\n\n /\n Connected Callback lifecycle\n /\n connectedCallback() {\n this.setAttribute('role', 'listitem');\n super.connectedCallback();\n\n document.addEventListener('mousedown', this._handleOnClickOutside, false);\n }\n\n /\n Disconnected callback lifecycle\n * 1) Remove window resize event listener\n /\n disconnectedCallback() {\n document.removeEventListener('mousedown', this._handleOnClickOutside, false);\n super.disconnectedCallback();\n }\n\n /\n Handle click outside the component\n * 1) Close the show hide panel on click outside\n * 2) If the nav is already closed then we don't care about outside clicks and we\n * can bail early\n * 3) By the time a user clicks on the page the shadowRoot will almost certainly be\n * defined, but TypeScript isn't that trusting and sees this.shadowRoot as possibly\n * undefined. To work around that we'll check that we have a shadowRoot (and a\n * rendered .host) element here to appease the TypeScript compiler. This should never\n * actually be shown or run for a human end user.\n * 4) Check to see if we clicked inside the active navigation item\n * 5) If the navigation is active and we've clicked outside of the nav then it should\n * be closed.\n /\n private _handleOnClickOutside(event: MouseEvent) {\n / 2 /\n if (!this.isActive) {\n return;\n }\n\n / 3 /\n if (!this.shadowRoot?.host) {\n throw Error('Could not determine navigation context during click handler');\n }\n\n / 4 /\n const didClickInside = event.composedPath().includes(this.shadowRoot.host);\n\n / 5 /\n if (this.isActive && !didClickInside) {\n this.isActive = false;\n }\n }\n\n /\n Toggle active state of primary nav item\n * 1) Remove isActive state from all sibling elements\n * 2) Toggle active state of element selected\n /\n private _clickHandler(e: MouseEvent) {\n e.preventDefault();\n if (this.parentNode) {\n const navItems = this.parentNode.querySelectorAll('cre8-primary-nav-item');\n navItems.forEach((element: Cre8PrimaryNavItem) => {\n if (element !== this) {\n element.isActive = false; / 1 /\n }\n });\n }\n this.isActive = !this.isActive; / 2 */\n }\n\n private _closePanel() {\n this.isActive = false;\n }\n\n private _handleOnKeyDown(e: KeyboardEvent) {\n if (e.key === 'Escape' && this.isActive === true) {\n this._closePanel();\n const navLink = this.shadowRoot?.querySelector<HTMLButtonElement \| HTMLAnchorElement>(\n '.cre8-c-primary-nav__link'\n );\n if (navLink) {\n setTimeout(() => {\n navLink.focus();\n }, 1);\n }\n }\n }\n\n render() {\n const componentClassName = this.componentClassNames('cre8-c-primary-nav__item', {\n 'cre8-is-active': this.isActive === true,\n 'cre8-c-primary-nav__item--megamenu': this.megaMenu === true,\n });\n\n if (this.megaMenu) {\n return html`\n <div class=\"${componentClassName}\" @keydown=${this._handleOnKeyDown}>\n <div class=\"cre8-c-primary-nav__item-content\">\n <button\n class=\"cre8-c-primary-nav__link\"\n @click=${this._clickHandler}\n aria-expanded=${this.isActive === true}\n >\n ${this.slotNotEmpty('itemBefore') && html`\n <div class=\"cre8-c-primary-nav__item-before\">\n <slot name=\"itemBefore\"></slot>\n </div>\n `}\n ${this.text}\n ${this.slotNotEmpty('itemAfter') && html`\n <div class=\"cre8-c-primary-nav__item-after\">\n <slot name=\"itemAfter\"></slot>\n </div>\n `}\n <cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>\n </button>\n </div>\n <div class=\"cre8-c-primary-nav__item-panel\">\n <div class=\"cre8-c-primary-nav__item-panel-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n `;\n }\n return html`\n <div class=\"${componentClassName}\">\n <div class=\"cre8-c-primary-nav__item-content\">\n <a class=\"cre8-c-primary-nav__link\" href=\"${this.href}\">\n ${this.slotNotEmpty('itemBefore') && html`\n <div class=\"cre8-c-primary-nav__item-before\">\n <slot name=\"itemBefore\"></slot>\n </div>\n `}\n ${this.text}\n ${this.slotNotEmpty('itemAfter') && html`\n <div class=\"cre8-c-primary-nav__item-after\">\n <slot name=\"itemAfter\"></slot>\n </div>\n `}\n </a>\n </div>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-primary-nav-item') === undefined) {\n customElements.define('cre8-primary-nav-item', Cre8PrimaryNavItem);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-primary-nav-item': Cre8PrimaryNavItem;\n }\n}\n\nexport default Cre8PrimaryNavItem;\n"]}

package/lib/components/remove-tag/remove-tag.d.ts CHANGED Viewed

@@ -12,6 +12,8 @@ export declare enum Color {
 /**
  * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).
  * These tags always display a "Close" icon.
+ *
+ * @fires removeTagClicked - Fires when the remove tag is clicked.
  */
 export declare class Cre8RemoveTag extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/remove-tag/remove-tag.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"remove-tag.d.ts","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAGtB,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,aAAa,mBAAmB;CACjC;AAED~~;;;GAGG~~;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IAEC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,aAAa,CAAiB;IAE/E;;;;;OAKG;IAEC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAe;IAEpD;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAS/B,MAAM;CAyBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF;AAED,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"remove-tag.d.ts","sourceRoot":"","sources":["../../../components/remove-tag/remove-tag.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,cAAc,CAAC;AAGtB,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,oBAAY,KAAK;IACf,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,aAAa,mBAAmB;CACjC;AAED;;;;;GAKG;AACH,qBAAa,aAAc,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,IAAI,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;;OAMG;IAEC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,CAAC,aAAa,CAAiB;IAE/E;;;;;OAKG;IAEC,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAe;IAEpD;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,OAAO,CAAC,uBAAuB;IAS/B,MAAM;CAyBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF;AAED,eAAe,aAAa,CAAC"}

package/lib/components/remove-tag/remove-tag.js CHANGED Viewed

@@ -25,6 +25,8 @@ export var Color;
 /**
  * Clicking a Remove Tag causes it to disappear from the page or field (in the case of Multi-Select).
  * These tags always display a "Close" icon.
+ *
+ * @fires removeTagClicked - Fires when the remove tag is clicked.
  */
 export class Cre8RemoveTag extends Cre8Element {
     constructor() {
@@ -75,7 +77,7 @@ export class Cre8RemoveTag extends Cre8Element {
           width="16"
           height="16"
           svg="${svgClose}"
-          aria-label="remove"
+          aria-hidden="true"
         ></cre8-icon>
       </div>
     </button>`;

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

	@@ -1 +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,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"]}
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,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;;;;;GAKG;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 \n @fires removeTagClicked - Fires when the remove tag is clicked.\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-hidden=\"true\"\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/section/section.d.ts CHANGED Viewed

@@ -15,6 +15,7 @@ import { Cre8Element } from '../cre8-element';
  *
  * @slot The content of the section should go here.
  * It could be a cre8-text-passage, a cre8-card or any other block level html.
+ * @slot header - Custom header content, rendered in place of the `headline` property
  */
 export declare class Cre8Section extends Cre8Element {
     static styles: import("lit").CSSResult[];

package/lib/components/section/section.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../components/section/section.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C~~;;;;;;;;;;;;;;;;GAgBG~~;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAGC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM;CAmBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../components/section/section.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;;;;;;;;;GAiBG;AAEH,qBAAa,WAAY,SAAQ,WAAW;IACxC,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAGC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAEtB,MAAM;CAmBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF;AAED,eAAe,WAAW,CAAC"}

package/lib/components/section/section.js CHANGED Viewed

@@ -24,6 +24,7 @@ import styles from './section.styles.js';
  *
  * @slot The content of the section should go here.
  * It could be a cre8-text-passage, a cre8-card or any other block level html.
+ * @slot header - Custom header content, rendered in place of the `headline` property
  */
 export class Cre8Section extends Cre8Element {
     render() {