npm - @scania/tegel - Versions diffs - 0.0.4 → 0.0.6 - Mend

@scania/tegel 0.0.4 → 0.0.6

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 (1252) hide show

package/dist/esm/sdds-footer.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-footer.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhD,UAAU;;;~~uBAE0B~~,IAAI;;;~~EAMnD~~,iBAAiB;IACf,~~MAAM~~,~~QAAQ~~,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC~~;IAChD~~,IAAI,CAAC,~~UAAU,GAAG,QAAQ,~~CAAC,~~IAAI,CAAC,CAAC,~~OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;~~GACtE~~;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,kBACG,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnF,WAAK,KAAK,EAAC,OAAO,IAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n display: block;\n\n $grid-~~xs: 0;\n $grid-sm: 608px;\n $grid-md: 800px;\n $grid-~~lg: 992px;\n ~~$grid-xlg: 1184px;\n $grid-xxlg: 1376px;\n $grid-max: 1584px;\n~~\n .footer-top {\n background-color: var(--sdds-footer-top-background);\n padding: 40px;\n\n ::slotted() {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 40px;\n width: 100%;\n }\n }\n\n .footer-main {\n background-color: var(--sdds-footer-main-background);\n padding: 0 40px;\n }\n\n .footer-main-top {\n padding: 40px 0;\n display: flex;\n justify-content: space-between;\n }\n\n .footer-bottom-right,\n .footer-bottom-left {\n ::slotted() {\n display: flex;\n column-gap: 24px;\n }\n }\n\n .footer-main-bottom {\n padding: 40px 0;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--sdds-footer-main-divider);\n\n small.copyright {\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-footer-main-copyright);\n }\n\n .brand {\n background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n background-repeat: no-repeat;\n background-size: 117px;\n background-position: right;\n width: 117px;\n height: 20px;\n\n p {\n color: transparent;\n padding: 0;\n margin: 0;\n height: 100%;\n visibility: hidden;\n }\n }\n }\n\n @media all and (max-width: $grid-lg) {\n .footer-top {\n padding: 0;\n\n ::slotted() {\n display: block;\n width: 100%;\n }\n }\n\n .footer-main {\n padding: 0 24px;\n }\n\n .footer-main-top {\n flex-direction: column;\n row-gap: 48px;\n padding: 24px 0;\n }\n\n .footer-bottom-left {\n ::slotted() {\n flex-direction: column;\n gap: 8px;\n }\n }\n\n .footer-main-bottom {\n flex-direction: column;\n padding-bottom: 32px;\n\n p.copyright {\n padding-bottom: 96px;\n }\n\n .brand {\n width: 100%;\n }\n }\n }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer',\n styleUrl: 'sdds-footer.scss',\n shadow: true,\n})\nexport class SddsFooter {\n /** Mode variant of the component, based on current mode. */\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n ~~@State()~~ ~~hasTopPart:~~ ~~boolean;\~~n\n @~~Element~~() ~~host~~: ~~HostElement~~;\n\n connectedCallback() {\n ~~const~~ ~~children~~ = Array.from(this.host.children)~~;\n this~~.~~hasTopPart = children.~~some((element) => element.slot === 'top');\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <footer>\n {this.hasTopPart && (\n <div class=\"footer-top\">\n <slot name=\"top\"></slot>\n </div>\n )}\n <div class=\"footer-main\">\n <div class=\"footer-main-top\">\n <div class=\"footer-bottom-left\">\n <slot name=\"main-left\"></slot>\n </div>\n <div class=\"footer-bottom-right\">\n <slot name=\"main-right\"></slot>\n </div>\n </div>\n <div class=\"footer-main-bottom\">\n <small class=\"copyright\">Copyright © {new Date().getFullYear()} Scania</small>\n <div class=\"brand\">\n <p>Scania</p>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-footer.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhD,UAAU;;;uBAI0B,IAAI;;;EAKnD,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,KAAK,OAAO,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC;GAC5F;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/E,kBACG,IAAI,CAAC,UAAU,KACd,WAAK,KAAK,EAAC,YAAY,IACrB,YAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACD,WAAK,KAAK,EAAC,aAAa,IACtB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,WAAK,KAAK,EAAC,oBAAoB,IAC7B,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACN,WAAK,KAAK,EAAC,qBAAqB,IAC9B,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACN,WAAK,KAAK,EAAC,oBAAoB,IAC7B,aAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnF,WAAK,KAAK,EAAC,OAAO,IAChB,sBAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer.scss?tag=sdds-footer&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer.tsx"],"sourcesContent":[":host {\n display: block;\n\n $grid-lg: 992px;\n\n .footer-top {\n background-color: var(--sdds-footer-top-background);\n padding: 40px;\n\n ::slotted() {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n row-gap: 40px;\n width: 100%;\n }\n }\n\n .footer-main {\n background-color: var(--sdds-footer-main-background);\n padding: 0 40px;\n }\n\n .footer-main-top {\n padding: 40px 0;\n display: flex;\n justify-content: space-between;\n }\n\n .footer-bottom-right,\n .footer-bottom-left {\n ::slotted() {\n display: flex;\n column-gap: 24px;\n }\n }\n\n .footer-main-bottom {\n padding: 40px 0;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--sdds-footer-main-divider);\n\n small.copyright {\n margin: 0;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-footer-main-copyright);\n }\n\n .brand {\n background-image: var(--sdds-background-image-scania-wordmark-white-svg);\n background-repeat: no-repeat;\n background-size: 117px;\n background-position: right;\n width: 117px;\n height: 20px;\n\n p {\n color: transparent;\n padding: 0;\n margin: 0;\n height: 100%;\n visibility: hidden;\n }\n }\n }\n\n @media all and (max-width: $grid-lg) {\n .footer-top {\n padding: 0;\n\n ::slotted() {\n display: block;\n width: 100%;\n }\n }\n\n .footer-main {\n padding: 0 24px;\n }\n\n .footer-main-top {\n flex-direction: column;\n row-gap: 48px;\n padding: 24px 0;\n }\n\n .footer-bottom-left {\n ::slotted() {\n flex-direction: column;\n gap: 8px;\n }\n }\n\n .footer-main-bottom {\n flex-direction: column;\n padding-bottom: 32px;\n\n p.copyright {\n padding-bottom: 96px;\n }\n\n .brand {\n width: 100%;\n }\n }\n }\n}\n","import { Component, h, State, Element } from '@stencil/core';\nimport { Host, HostElement, Prop } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer',\n styleUrl: 'sdds-footer.scss',\n shadow: true,\n})\nexport class SddsFooter {\n @Element() host: HostElement;\n\n /** Mode variant of the component, based on current mode. /\n @Prop() modeVariant: 'primary' \| 'secondary' = null;\n\n /* Indictes whether or not the footer has a top part. */\n @State() hasTopPart: boolean;\n\n connectedCallback() {\n this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');\n }\n\n render() {\n return (\n <Host class={`${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}`}>\n <footer>\n {this.hasTopPart && (\n <div class=\"footer-top\">\n <slot name=\"top\"></slot>\n </div>\n )}\n <div class=\"footer-main\">\n <div class=\"footer-main-top\">\n <div class=\"footer-bottom-left\">\n <slot name=\"main-left\"></slot>\n </div>\n <div class=\"footer-bottom-right\">\n <slot name=\"main-right\"></slot>\n </div>\n </div>\n <div class=\"footer-main-bottom\">\n <small class=\"copyright\">Copyright © {new Date().getFullYear()} Scania</small>\n <div class=\"brand\">\n <p>Scania</p>\n </div>\n </div>\n </div>\n </footer>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-brand-symbol.entry.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { i as inheritAriaAttributes } from './utils-a3c1c64a.js';
+const headerBrandSymbolCss = ":host sdds-header-item{display:none}:host sdds-header-item a{background-image:var(--sdds-background-image-scania-symbol-svg), var(--sdds-background-image-scania-symbol-png);background-size:30px auto;background-position:center;background-repeat:no-repeat}@media (min-width: 521px){:host sdds-header-item{display:block}}";
+const HeaderBrandSymbol = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.linkHref = 'https://www.scania.com';
+  }
+  render() {
+    const inheritedLinkProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderBrandSymbol.style = headerBrandSymbolCss;
+export { HeaderBrandSymbol as sdds_header_brand_symbol };
+//# sourceMappingURL=sdds-header-brand-symbol.entry.js.map

package/dist/esm/sdds-header-brand-symbol.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-brand-symbol.entry.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,gUAAgU;;MCQhV,iBAAiB;;;oBAID,wBAAwB;;EAEnD,MAAM;IACJ,MAAM,kBAAkB,qBACnB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,QACE,EAAC,IAAI,QACH,4BACE,yBAAO,kBAAkB,IAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAM,CACnC,CACd,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.scss?tag=sdds-header-brand-symbol&encapsulation=shadow","./src/components/header/webcomponent/header-brand-symbol/header-brand-symbol.tsx"],"sourcesContent":[":host {\n // \"On smaller breakpoints, starting from the width 520px, the Scania symbol is removed.\"\n // (tegel.scania.com, 2023-03-01)\n sdds-header-item {\n display: none;\n }\n\n sdds-header-item a {\n background-image: var(--sdds-background-image-scania-symbol-svg),\n var(--sdds-background-image-scania-symbol-png);\n background-size: 30px auto;\n background-position: center;\n background-repeat: no-repeat;\n }\n\n @media (min-width: 521px) {\n sdds-header-item {\n display: block;\n }\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-brand-symbol',\n styleUrl: 'header-brand-symbol.scss',\n shadow: true,\n})\nexport class HeaderBrandSymbol {\n @Element() host: HTMLElement;\n\n /** The href for the logo link. */\n @Prop() linkHref: string = 'https://www.scania.com';\n\n render() {\n const inheritedLinkProps = {\n ...inheritAriaAttributes(this.host),\n };\n return (\n <Host>\n <sdds-header-item>\n <a {...inheritedLinkProps} href={this.linkHref}></a>\n </sdds-header-item>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-cell.entry.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-96563708.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
 const tableHeaderCellCss = ":host(.sdds-table__header-cell){box-sizing:border-box;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);display:table-cell;text-align:left;color:var(--sdds-data-table-color);background-color:var(--sdds-data-table-header-background);border-bottom:1px solid var(--sdds-data-table-header-background-hover);padding:0;height:48px;min-width:192px;box-sizing:border-box;vertical-align:middle;overflow:hidden;transition:background-color 200ms ease}:host(.sdds-table__header-cell) *{box-sizing:border-box}:host(.sdds-table__header-cell) .sdds-table__header-text{padding:0 16px;margin:0}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button{display:flex;align-items:center;gap:8px;justify-content:start;flex-direction:row;width:100%;height:100%;padding:0 16px;background-color:transparent;border:none;cursor:pointer;transition:background-color 200ms ease}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:focus{outline:2px solid var(--sdds-data-table-header-btn-focus);outline-offset:-2px}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:focus .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button .sdds-table__header-button-text{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);text-align:left;color:var(--sdds-data-table-header-btn-color)}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button .sdds-table__header-button-icon{flex:0 0 16px;height:16px;opacity:0;transform-origin:center;transition:opacity 200ms ease-in, transform 200ms ease;fill:var(--sdds-data-table-color)}:host(.sdds-table__header-cell--sortable) .sdds-table__header-button:hover .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--right-align) .sdds-table__header-button{text-align:right;justify-content:end;flex-direction:row-reverse}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button{background-color:var(--sdds-data-table-header-btn-background)}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button:hover{background-color:var(--sdds-data-table-header-btn-background-hover)}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button .sdds-table__header-button-icon{opacity:1}:host(.sdds-table__header-cell--is-sorted) .sdds-table__header-button .sdds-table__header-button-icon--rotate{transform:rotate(180deg)}:host(.sdds-table--compact){height:33px}:host(.sdds-table--divider){border-right:1px solid var(--sdds-data-table-divider)}:host(.sdds-table--divider:last-of-type){border-right:none}:host(.sdds-table--no-min-width){min-width:unset}:host(.sdds-table__header-cell:first-of-type){border-top-left-radius:4px}:host(.sdds-table__header-cell:last-of-type){border-top-right-radius:4px}:host(.sdds-table--extra-column:first-of-type){border-top-left-radius:0}:host(.sdds-table--toolbar-available){border-radius:0}:host(.sdds-table--extra-column.sdds-table--toolbar-available){border-radius:0}:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type){border-top-left-radius:0}:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type){border-top-right-radius:0}";
@@ -12,9 +12,9 @@ const relevantTableProps = [
 const TableHeaderCell = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.sortColumnDataEvent = createEvent(this, "sortColumnDataEvent", 7);
-    this.textAlignEvent = createEvent(this, "textAlignEvent", 7);
-    this.headCellHoverEvent = createEvent(this, "headCellHoverEvent", 7);
+    this.sddsSortChange = createEvent(this, "sddsSortChange", 6);
+    this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 6);
+    this.internalSddsHover = createEvent(this, "internalSddsHover", 6);
     this.sortButtonClick = (key) => {
       // Toggling direction of sorting as we only use one button for sorting
       if (this.sortingDirection !== 'asc') {
@@ -26,7 +26,7 @@ const TableHeaderCell = class {
       // Setting to true we can set enable CSS class for "active" state of column
       this.sortedByMyKey = true;
       // Use array to send both key and sorting direction
-      this.sortColumnDataEvent.emit([this.tableId, key, this.sortingDirection]);
+      this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);
     };
     this.headerCellContent = () => {
       if (this.sortable && !this.disableSortingBtn) {
@@ -35,7 +35,7 @@ const TableHeaderCell = class {
       return (h("p", { class: "sdds-table__header-text", style: { textAlign: this.textAlignState } }, this.columnTitle));
     };
     this.onHeadCellHover = (key) => {
-      this.headCellHoverEvent.emit([this.tableId, key]);
+      this.internalSddsHover.emit([this.tableId, key]);
     };
     this.columnKey = undefined;
     this.columnTitle = undefined;
@@ -54,7 +54,7 @@ const TableHeaderCell = class {
     this.tableId = '';
     this.enableExpandableRows = false;
   }
-  tablePropsChangedEventListener(event) {
+  internalSddsPropChangeListener(event) {
     if (this.tableId === event.detail.tableId) {
       event.detail.changed
         .filter((changedProp) => relevantTableProps.includes(changedProp))
@@ -67,7 +67,7 @@ const TableHeaderCell = class {
     }
   }
   // Listen to parent data-table if sorting is allowed
-  sortingSwitcherEventListener(event) {
+  internalSddsSortingChangeListener(event) {
     const [receivedID, receivedSortingStatus] = event.detail;
     if (this.tableId === receivedID) {
       this.disableSortingBtn = receivedSortingStatus;
@@ -86,10 +86,6 @@ const TableHeaderCell = class {
       }
     }
   }
-  enableMultiselectEventListener(event) {
-    if (this.tableId === event.detail[0])
-      [, this.enableMultiselect] = event.detail;
-  }
   connectedCallback() {
     this.tableEl = this.host.closest('sdds-table');
     this.tableId = this.tableEl.tableId;
@@ -108,7 +104,7 @@ const TableHeaderCell = class {
       this.textAlignState = 'left';
     }
     // To enable body cells text align per rules set in head cell
-    this.textAlignEvent.emit([this.tableId, this.columnKey, this.textAlignState]);
+    this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);
     this.enableToolbarDesign =
       this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;
   }

package/dist/esm/sdds-header-cell.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-header-cell.entry.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-header-cell/table-header-cell.scss?tag=sdds-header-cell&encapsulation=shadow","./src/components/data-table/table-header-cell/table-header-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__header-cell) {\n @include sdds-box-sizing;\n\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-header-background-hover);\n padding: 0;\n height: 48px;\n min-width: 192px;\n box-sizing: border-box;\n vertical-align: middle;\n overflow: hidden;\n transition: background-color 200ms ease;\n\n .sdds-table__header-text {\n padding: 0 16px;\n margin: 0;\n }\n}\n\n:host(.sdds-table__header-cell--sortable) {\n .sdds-table__header-button {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: start;\n flex-direction: row;\n width: 100%;\n height: 100%;\n padding: 0 16px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: background-color 200ms ease;\n\n &:focus {\n outline: 2px solid var(--sdds-data-table-header-btn-focus);\n outline-offset: -2px;\n\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n }\n\n .sdds-table__header-button-text {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n text-align: left;\n color: var(--sdds-data-table-header-btn-color);\n }\n\n .sdds-table__header-button-icon {\n /* not to shrink on lot of text /\n flex: 0 0 16px;\n height: 16px;\n opacity: 0;\n transform-origin: center;\n transition: opacity 200ms ease-in, transform 200ms ease;\n fill: var(--sdds-data-table-color);\n }\n\n &:hover {\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n }\n }\n}\n\n:host(.sdds-table__header-cell--right-align) {\n .sdds-table__header-button {\n text-align: right;\n justify-content: end;\n flex-direction: row-reverse;\n }\n}\n\n:host(.sdds-table__header-cell--is-sorted) {\n .sdds-table__header-button {\n background-color: var(--sdds-data-table-header-btn-background);\n\n &:hover {\n background-color: var(--sdds-data-table-header-btn-background-hover);\n }\n\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n\n .sdds-table__header-button-icon--rotate {\n transform: rotate(180deg);\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 33px;\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n\n// border-radius style control\n// it depends id multiselect si on or off, same for if toolbar is there or not\n:host(.sdds-table__header-cell:first-of-type) {\n border-top-left-radius: 4px;\n}\n\n:host(.sdds-table__header-cell:last-of-type) {\n border-top-right-radius: 4px;\n}\n\n:host(.sdds-table--extra-column:first-of-type) {\n border-top-left-radius: 0;\n}\n\n:host(.sdds-table--toolbar-available) {\n border-radius: 0;\n}\n\n:host(.sdds-table--extra-column.sdds-table--toolbar-available) {\n border-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type) {\n border-top-left-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type) {\n border-top-right-radius: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Event,\n EventEmitter,\n State,\n Listen,\n Element,\n} from '@stencil/core';\nimport { TablePropsChangedEvent } from '../table/table';\n\nconst relevantTableProps: TablePropsChangedEvent['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-header-cell',\n styleUrl: 'table-header-cell.scss',\n shadow: true,\n})\nexport class TableHeaderCell {\n /* Value of column key, usually comes from JSON, needed for sorting /\n @Prop({ reflect: true }) columnKey: string;\n\n /* Text that displays in column cell /\n @Prop({ reflect: true }) columnTitle: string;\n\n /* In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" /\n @Prop({ reflect: true }) customWidth: string;\n\n /* If passed as prop, enables sorting on that column /\n @Prop() sortable: boolean = false;\n\n /* Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values /\n @Prop({ reflect: true }) textAlign: string;\n\n @State() textAlignState: string;\n\n @State() sortingDirection: string = '';\n\n @State() sortedByMyKey: boolean = false;\n\n @State() disableSortingBtn: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() enableMultiselect: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @State() enableExpandableRows: boolean = false;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Sends unique table identifier,column key and sorting direction to the sdds-table-body component /\n @Event({\n eventName: 'sortColumnDataEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sortColumnDataEvent: EventEmitter<any>;\n\n /* Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell /\n @Event({\n eventName: 'textAlignEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n textAlignEvent: EventEmitter<any>;\n\n /* Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell /\n @Event({\n eventName: 'headCellHoverEvent',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n headCellHoverEvent: EventEmitter<any>;\n\n @Listen('tablePropsChangedEvent', { target: 'body' })\n tablePropsChangedEventListener(event: CustomEvent<TablePropsChangedEvent>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n // Listen to parent data-table if sorting is allowed\n @Listen('sortingSwitcherEvent', { target: 'body' })\n sortingSwitcherEventListener(event: CustomEvent<any>) {\n const [receivedID, receivedSortingStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.disableSortingBtn = receivedSortingStatus;\n }\n }\n\n // target is set to body so other instances of same component \"listen\" and react to the change\n @Listen('sortColumnDataEvent', { target: 'body' })\n updateOptionsContent(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // grab only value at position 1 as it is the \"key\"\n if (this.columnKey !== event.detail[1]) {\n this.sortedByMyKey = false;\n // To sync with CSS transition timing\n setTimeout(() => {\n this.sortingDirection = '';\n }, 200);\n }\n }\n }\n\n @Listen('enableMultiselectEvent', { target: 'body' })\n enableMultiselectEventListener(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) [, this.enableMultiselect] = event.detail;\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n // enable only right or left text align\n if (this.textAlign === 'right' \|\| this.textAlign === 'end') {\n this.textAlignState = 'right';\n } else {\n this.textAlignState = 'left';\n }\n // To enable body cells text align per rules set in head cell\n this.textAlignEvent.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n sortButtonClick = (key) => {\n // Toggling direction of sorting as we only use one button for sorting\n if (this.sortingDirection !== 'asc') {\n this.sortingDirection = 'asc';\n } else {\n this.sortingDirection = 'desc';\n }\n // Setting to true we can set enable CSS class for \"active\" state of column\n this.sortedByMyKey = true;\n // Use array to send both key and sorting direction\n this.sortColumnDataEvent.emit([this.tableId, key, this.sortingDirection]);\n };\n\n headerCellContent = () => {\n if (this.sortable && !this.disableSortingBtn) {\n return (\n <button\n class=\"sdds-table__header-button\"\n onClick={() => this.sortButtonClick(this.columnKey)}\n >\n <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </span>\n\n {this.sortingDirection === '' && (\n <svg\n class=\"sdds-table__header-button-icon\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 15\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n />\n </svg>\n )}\n {/ First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n {this.sortingDirection !== '' && (\n <svg\n class={`sdds-table__header-button-icon ${\n this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n }`}\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n />\n </svg>\n )}\n </button>\n );\n }\n return (\n <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </p>\n );\n };\n\n onHeadCellHover = (key) => {\n this.headCellHoverEvent.emit([this.tableId, key]);\n };\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__header-cell': true,\n 'sdds-table__header-cell--sortable': this.sortable,\n 'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n 'sdds-table__header-cell--custom-width': this.customWidth !== '',\n 'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--extra-column': this.enableMultiselect \|\| this.enableExpandableRows,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n style={{ width: this.customWidth }}\n // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n onMouseLeave={() => this.onHeadCellHover('')}\n >\n {this.headerCellContent()}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"sdds-header-cell.entry.js","mappings":"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","names":[],"sources":["./src/components/data-table/table-header-cell/table-header-cell.scss?tag=sdds-header-cell&encapsulation=shadow","./src/components/data-table/table-header-cell/table-header-cell.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host(.sdds-table__header-cell) {\n @include sdds-box-sizing;\n\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n display: table-cell;\n text-align: left;\n color: var(--sdds-data-table-color);\n background-color: var(--sdds-data-table-header-background);\n border-bottom: 1px solid var(--sdds-data-table-header-background-hover);\n padding: 0;\n height: 48px;\n min-width: 192px;\n box-sizing: border-box;\n vertical-align: middle;\n overflow: hidden;\n transition: background-color 200ms ease;\n\n .sdds-table__header-text {\n padding: 0 16px;\n margin: 0;\n }\n}\n\n:host(.sdds-table__header-cell--sortable) {\n .sdds-table__header-button {\n display: flex;\n align-items: center;\n gap: 8px;\n justify-content: start;\n flex-direction: row;\n width: 100%;\n height: 100%;\n padding: 0 16px;\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: background-color 200ms ease;\n\n &:focus {\n outline: 2px solid var(--sdds-data-table-header-btn-focus);\n outline-offset: -2px;\n\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n }\n\n .sdds-table__header-button-text {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n text-align: left;\n color: var(--sdds-data-table-header-btn-color);\n }\n\n .sdds-table__header-button-icon {\n /* not to shrink on lot of text /\n flex: 0 0 16px;\n height: 16px;\n opacity: 0;\n transform-origin: center;\n transition: opacity 200ms ease-in, transform 200ms ease;\n fill: var(--sdds-data-table-color);\n }\n\n &:hover {\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n }\n }\n}\n\n:host(.sdds-table__header-cell--right-align) {\n .sdds-table__header-button {\n text-align: right;\n justify-content: end;\n flex-direction: row-reverse;\n }\n}\n\n:host(.sdds-table__header-cell--is-sorted) {\n .sdds-table__header-button {\n background-color: var(--sdds-data-table-header-btn-background);\n\n &:hover {\n background-color: var(--sdds-data-table-header-btn-background-hover);\n }\n\n .sdds-table__header-button-icon {\n opacity: 1;\n }\n\n .sdds-table__header-button-icon--rotate {\n transform: rotate(180deg);\n }\n }\n}\n\n:host(.sdds-table--compact) {\n height: 33px;\n}\n\n:host(.sdds-table--divider) {\n border-right: 1px solid var(--sdds-data-table-divider);\n}\n\n:host(.sdds-table--divider:last-of-type) {\n border-right: none;\n}\n\n:host(.sdds-table--no-min-width) {\n min-width: unset;\n}\n\n// border-radius style control\n// it depends id multiselect si on or off, same for if toolbar is there or not\n:host(.sdds-table__header-cell:first-of-type) {\n border-top-left-radius: 4px;\n}\n\n:host(.sdds-table__header-cell:last-of-type) {\n border-top-right-radius: 4px;\n}\n\n:host(.sdds-table--extra-column:first-of-type) {\n border-top-left-radius: 0;\n}\n\n:host(.sdds-table--toolbar-available) {\n border-radius: 0;\n}\n\n:host(.sdds-table--extra-column.sdds-table--toolbar-available) {\n border-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:first-of-type) {\n border-top-left-radius: 0;\n}\n\n:host(.sdds-table__header-cell.sdds-table--toolbar-available:last-of-type) {\n border-top-right-radius: 0;\n}\n","import {\n Component,\n Prop,\n h,\n Host,\n Event,\n EventEmitter,\n State,\n Listen,\n Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n 'enableMultiselect',\n 'enableExpandableRows',\n 'compactDesign',\n 'noMinWidth',\n 'verticalDividers',\n];\n\n@Component({\n tag: 'sdds-header-cell',\n styleUrl: 'table-header-cell.scss',\n shadow: true,\n})\nexport class TableHeaderCell {\n /* Value of column key, usually comes from JSON, needed for sorting /\n @Prop({ reflect: true }) columnKey: string;\n\n /* Text that displays in column cell /\n @Prop({ reflect: true }) columnTitle: string;\n\n /* In case noMinWidth setting, user has to specify width value for each column, for example \"150px\" /\n @Prop({ reflect: true }) customWidth: string;\n\n /* If passed as prop, enables sorting on that column /\n @Prop() sortable: boolean = false;\n\n /* Setting for text align, default is left, but user can pass \"right\" as string - useful for numeric values /\n @Prop({ reflect: true }) textAlign: string;\n\n @State() textAlignState: string;\n\n @State() sortingDirection: string = '';\n\n @State() sortedByMyKey: boolean = false;\n\n @State() disableSortingBtn: boolean = false;\n\n @State() verticalDividers: boolean = false;\n\n @State() compactDesign: boolean = false;\n\n @State() noMinWidth: boolean = false;\n\n @State() enableMultiselect: boolean = false;\n\n @State() enableToolbarDesign: boolean = false;\n\n @State() tableId: string = '';\n\n @State() enableExpandableRows: boolean = false;\n\n @Element() host: HTMLElement;\n\n tableEl: HTMLSddsTableElement;\n\n /* Sends unique table identifier,column key and sorting direction to the sdds-table-body component, can also be listened to in order to implement custom sorting logic. /\n @Event({\n eventName: 'sddsSortChange',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n sddsSortChange: EventEmitter<any>;\n\n /* @internal Sends unique table identifier, column key and text align value so the body cells with same key take the same text alignment as header cell /\n @Event({\n eventName: 'internalSddsTextAlign',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsTextAlign: EventEmitter<any>;\n\n /* @internal Sends unique table identifier, column key so the body cells with the same key change background when user hovers over header cell /\n @Event({\n eventName: 'internalSddsHover',\n composed: true,\n cancelable: false,\n bubbles: true,\n })\n internalSddsHover: EventEmitter<any>;\n\n @Listen('internalSddsPropChange', { target: 'body' })\n internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n if (this.tableId === event.detail.tableId) {\n event.detail.changed\n .filter((changedProp) => relevantTableProps.includes(changedProp))\n .forEach((changedProp) => {\n if (typeof this[changedProp] === 'undefined') {\n throw new Error(`Table prop is not supported: ${changedProp}`);\n }\n this[changedProp] = event.detail[changedProp];\n });\n }\n }\n\n // Listen to parent data-table if sorting is allowed\n @Listen('internalSddsSortingChange', { target: 'body' })\n internalSddsSortingChangeListener(event: CustomEvent<any>) {\n const [receivedID, receivedSortingStatus] = event.detail;\n if (this.tableId === receivedID) {\n this.disableSortingBtn = receivedSortingStatus;\n }\n }\n\n // target is set to body so other instances of same component \"listen\" and react to the change\n @Listen('sddsSortChange', { target: 'body' })\n updateOptionsContent(event: CustomEvent<any>) {\n if (this.tableId === event.detail[0]) {\n // grab only value at position 1 as it is the \"key\"\n if (this.columnKey !== event.detail[1]) {\n this.sortedByMyKey = false;\n // To sync with CSS transition timing\n setTimeout(() => {\n this.sortingDirection = '';\n }, 200);\n }\n }\n }\n\n connectedCallback() {\n this.tableEl = this.host.closest('sdds-table');\n this.tableId = this.tableEl.tableId;\n }\n\n componentWillLoad() {\n relevantTableProps.forEach((tablePropName) => {\n this[tablePropName] = this.tableEl[tablePropName];\n });\n }\n\n componentWillRender() {\n // enable only right or left text align\n if (this.textAlign === 'right' \|\| this.textAlign === 'end') {\n this.textAlignState = 'right';\n } else {\n this.textAlignState = 'left';\n }\n // To enable body cells text align per rules set in head cell\n this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);\n\n this.enableToolbarDesign =\n this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;\n }\n\n sortButtonClick = (key) => {\n // Toggling direction of sorting as we only use one button for sorting\n if (this.sortingDirection !== 'asc') {\n this.sortingDirection = 'asc';\n } else {\n this.sortingDirection = 'desc';\n }\n // Setting to true we can set enable CSS class for \"active\" state of column\n this.sortedByMyKey = true;\n // Use array to send both key and sorting direction\n this.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);\n };\n\n headerCellContent = () => {\n if (this.sortable && !this.disableSortingBtn) {\n return (\n <button\n class=\"sdds-table__header-button\"\n onClick={() => this.sortButtonClick(this.columnKey)}\n >\n <span class=\"sdds-table__header-button-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </span>\n\n {this.sortingDirection === '' && (\n <svg\n class=\"sdds-table__header-button-icon\"\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 12 15\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M6.07 10.28a.5.5 0 0 1 .7.08l2.1 2.66a.1.1 0 0 0 .15 0l2.09-2.66a.5.5 0 1 1 .78.62l-2.08 2.66a1.1 1.1 0 0 1-1.73 0l-2.1-2.66a.5.5 0 0 1 .1-.7ZM3.55.4v9.04a.5.5 0 1 1-1 0V.39h1Z\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M5.93 3.78a.5.5 0 0 1-.7-.08l-2.1-2.66a.1.1 0 0 0-.15 0L.89 3.7a.5.5 0 0 1-.78-.62L2.19.42a1.1 1.1 0 0 1 1.73 0l2.1 2.66a.5.5 0 0 1-.1.7Z\"\n />\n </svg>\n )}\n {/ First icon is arrow down as first set direction is ascending, clicking it again rotates the icon as we set descending order */}\n {this.sortingDirection !== '' && (\n <svg\n class={`sdds-table__header-button-icon ${\n this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''\n }`}\n fill=\"currentColor\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 32 32\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M17 2.974a1 1 0 0 0-2 0v24.3l-9.312-9.312a1 1 0 0 0-1.414 1.414l9.887 9.888a2.6 2.6 0 0 0 3.677 0l9.888-9.888a1 1 0 0 0-1.414-1.414L17 27.274v-24.3Z\"\n />\n </svg>\n )}\n </button>\n );\n }\n return (\n <p class=\"sdds-table__header-text\" style={{ textAlign: this.textAlignState }}>\n {this.columnTitle}\n </p>\n );\n };\n\n onHeadCellHover = (key) => {\n this.internalSddsHover.emit([this.tableId, key]);\n };\n\n render() {\n return (\n <Host\n class={{\n 'sdds-table__header-cell': true,\n 'sdds-table__header-cell--sortable': this.sortable,\n 'sdds-table__header-cell--is-sorted': this.sortedByMyKey,\n 'sdds-table__header-cell--custom-width': this.customWidth !== '',\n 'sdds-table__header-cell--right-align': this.textAlignState === 'right',\n 'sdds-table--compact': this.compactDesign,\n 'sdds-table--divider': this.verticalDividers,\n 'sdds-table--no-min-width': this.noMinWidth,\n 'sdds-table--extra-column': this.enableMultiselect \|\| this.enableExpandableRows,\n 'sdds-table--toolbar-available': this.enableToolbarDesign,\n }}\n style={{ width: this.customWidth }}\n // Calling actions from here to enable hover functionality for both sortable and un-sortable tables\n onMouseOver={() => this.onHeadCellHover(this.columnKey)}\n onMouseLeave={() => this.onHeadCellHover('')}\n >\n {this.headerCellContent()}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown-list-item.entry.js ADDED Viewed

@@ -0,0 +1,23 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+const headerDropdownListItemCss = ":host{display:block;box-sizing:border-box;height:var(--sdds-header-list-item-md-height);width:100%}:host .component{height:100%}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;border:none;display:flex;align-items:center;height:100%;padding:0 24px;width:100%;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);background-color:var(--sdds-header-nav-item-dropdown-opened-background);color:var(--sdds-header-nav-item-dropdown-opened-color)}:host .component ::slotted(a:hover){background-color:var(--sdds-nav-item-background-hover);cursor:pointer}:host .component ::slotted(a:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component-selected{background-color:var(--sdds-nav-item-background-selected);padding-right:4px;border-left-width:4px;border-left-style:solid;border-left-color:var(--sdds-nav-item-border-color-active)}:host .component-selected ::slotted(a),:host .component-selected ::slotted(button){background-color:var(--sdds-nav-item-background-selected)}:host(:not(:last-child)){border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}:host([type=lg]){height:var(--sdds-header-height)}:host([type=lg]) ::slotted(a),:host([type=lg]) ::slotted(button){padding:0 16px;color:var(--sdds-header-app-launcher-item-color)}";
+const HeaderDropdownListItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.selected = false;
+    this.type = 'md';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+      } }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderDropdownListItem.style = headerDropdownListItemCss;
+export { HeaderDropdownListItem as sdds_header_dropdown_list_item };
+//# sourceMappingURL=sdds-header-dropdown-list-item.entry.js.map

package/dist/esm/sdds-header-dropdown-list-item.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown-list-item.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,ozCAAozC;;MCOz0C,sBAAsB;;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAED,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.scss?tag=sdds-header-dropdown-list-item&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n display: block;\n box-sizing: border-box;\n height: var(--sdds-header-list-item-md-height);\n width: 100%;\n\n .component {\n height: 100%;\n\n ::slotted(a),\n ::slotted(button) {\n all: unset;\n box-sizing: border-box;\n border: none;\n display: flex;\n align-items: center;\n height: 100%;\n padding: 0 24px;\n width: 100%;\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n background-color: var(--sdds-header-nav-item-dropdown-opened-background);\n color: var(--sdds-header-nav-item-dropdown-opened-color);\n }\n\n ::slotted(a:hover) {\n background-color: var(--sdds-nav-item-background-hover);\n cursor: pointer;\n }\n\n ::slotted(a:focus-visible) {\n @include sdds-focus-state;\n }\n\n &-selected {\n background-color: var(--sdds-nav-item-background-selected);\n padding-right: 4px;\n border-left-width: 4px;\n border-left-style: solid;\n border-left-color: var(--sdds-nav-item-border-color-active);\n\n ::slotted(a),\n ::slotted(button) {\n background-color: var(--sdds-nav-item-background-selected);\n }\n }\n }\n}\n\n:host(:not(:last-child)) {\n border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n}\n\n:host([type='lg']) {\n height: var(--sdds-header-height);\n\n ::slotted(a),\n ::slotted(button) {\n padding: 0 16px;\n color: var(--sdds-header-app-launcher-item-color);\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-header-dropdown-list-item',\n styleUrl: 'header-dropdown-list-item.scss',\n shadow: true,\n})\nexport class HeaderDropdownListItem {\n @Element() host: HTMLElement;\n\n /** If the link should appear selected. */\n @Prop() selected: boolean = false;\n\n /** The type of the list. */\n @Prop({ reflect: true }) type: 'md' | 'lg' = 'md';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'component': true,\n 'component-selected': this.selected,\n }}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown-list-user.entry.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+const headerDropdownListUserCss = ":host{background-color:var(--sdds-header-avatar-item-background);display:flex;height:84px}:host .user-box{gap:16px;width:100%;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color)}:host img,:host slot[name=image]::slotted(*){width:34px;border-radius:100%}:host .user-content{display:flex;flex-direction:column;gap:4px}:host .user-content .header{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls)}:host .user-content .subheader{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-header-avatar-item-color)}";
+const HeaderDropdownListLgUser = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.imgUrl = undefined;
+    this.imgAlt = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("div", { class: "user-box" }, this.imgUrl && h("img", { src: this.imgUrl, alt: this.imgAlt }), h("slot", { name: "image" }), h("div", { class: "user-content" }, h("div", { class: "header" }, this.heading, h("slot", { name: "heading" })), h("div", { class: "subheader" }, this.subheading, h("slot", { name: "subheading" }))))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderDropdownListLgUser.style = headerDropdownListUserCss;
+export { HeaderDropdownListLgUser as sdds_header_dropdown_list_user };
+//# sourceMappingURL=sdds-header-dropdown-list-user.entry.js.map

package/dist/esm/sdds-header-dropdown-list-user.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown-list-user.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,gnBAAgnB;;MCOroB,wBAAwB;;;;;;;;EAenC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,WAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,MAAM,IAAI,WAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,EAC3D,YAAM,IAAI,EAAC,OAAO,GAAQ,EAC1B,WAAK,KAAK,EAAC,cAAc,IACvB,WAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,OAAO,EACb,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACN,WAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,UAAU,EAChB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.scss?tag=sdds-header-dropdown-list-user&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.tsx"],"sourcesContent":[":host {\n background-color: var(--sdds-header-avatar-item-background);\n display: flex;\n height: 84px;\n\n .user-box {\n gap: 16px;\n width: 100%;\n padding: 0 16px;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n }\n\n img,\n slot[name='image']::slotted(*) {\n width: 34px;\n border-radius: 100%;\n }\n\n .user-content {\n display: flex;\n flex-direction: column;\n gap: 4px;\n\n .header {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n }\n\n .subheader {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-header-avatar-item-color);\n }\n }\n}\n","import { Component, h, Prop, Element, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-header-dropdown-list-user',\n styleUrl: 'header-dropdown-list-user.scss',\n shadow: true,\n})\nexport class HeaderDropdownListLgUser {\n /** Image URL. */\n @Prop() imgUrl: string;\n\n /** Image alt text. */\n @Prop() imgAlt: string;\n\n /** Heading, usually the users first name and last name. */\n @Prop() heading: string;\n\n /** Subheading. */\n @Prop() subheading: string;\n\n @Element() host: HTMLElement;\n\n render() {\n return (\n <Host role=\"listitem\">\n <div class=\"user-box\">\n {this.imgUrl && <img src={this.imgUrl} alt={this.imgAlt} />}\n <slot name=\"image\"></slot>\n <div class=\"user-content\">\n <div class=\"header\">\n {this.heading}\n <slot name=\"heading\"></slot>\n </div>\n <div class=\"subheader\">\n {this.subheading}\n <slot name=\"subheading\"></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown-list.entry.js ADDED Viewed

@@ -0,0 +1,83 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, a as isHeadingElement } from './utils-a3c1c64a.js';
+const headerDropdownListCss = ":host{display:block;width:190px;padding:0;margin:0;list-style:none;border-radius:none;background-color:var(--sdds-header-app-launcher-menu-bg)}@media all and (max-width: 384px){:host{width:100vw}}:host([type=lg]){width:320px}";
+const HeaderDropdownList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    // A Map to store the slots and their associated slotchange listeners.
+    this.slotListeners = new Map();
+    this.type = 'md';
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const { children } = this.host;
+    // Set the type prop for each child, if they have such a property
+    for (let i = 0; i < children.length; i++) {
+      const child = children[i];
+      if ('type' in child) {
+        child.type = this.type;
+      }
+    }
+    let listRoot = this.host;
+    if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {
+      listRoot = this.host.parentElement;
+    }
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  componentDidLoad() {
+    this.host.shadowRoot.querySelectorAll('slot').forEach((slot) => {
+      // Add the slotchange event listener.
+      const onSlotChange = (e) => {
+        this.processAssignedElements(e.target);
+      };
+      slot.addEventListener('slotchange', onSlotChange);
+      onSlotChange({ target: slot });
+      // Store the slot and its listener in the Map.
+      this.slotListeners.set(slot, onSlotChange);
+    });
+  }
+  processAssignedElements(slot) {
+    const nodes = slot.assignedElements();
+    nodes.forEach((node) => {
+      // Add a listitem role to the assigned element if needed.
+      if (node.tagName.toLowerCase() !== 'li' &&
+        node.tagName.toLowerCase() !== 'slot' &&
+        node.getAttribute('role') !== 'listitem') {
+        node.setAttribute('role', 'listitem');
+      }
+      // If the assigned element is a slot, process its assigned elements recursively.
+      if (node.tagName.toLowerCase() === 'slot') {
+        this.processAssignedElements(node);
+      }
+    });
+  }
+  disconnectedCallback() {
+    this.slotListeners.forEach((listener, slot) => {
+      // Remove the slotchange event listener and delete the entry from the Map.
+      slot.removeEventListener('slotchange', listener);
+      this.slotListeners.delete(slot);
+    });
+  }
+  render() {
+    var _a;
+    const attributes = {
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, Object.assign({}, attributes), h("slot", null)));
+  }
+  get host() { return getElement(this); }
+};
+HeaderDropdownList.style = headerDropdownListCss;
+export { HeaderDropdownList as sdds_header_dropdown_list };
+//# sourceMappingURL=sdds-header-dropdown-list.entry.js.map

package/dist/esm/sdds-header-dropdown-list.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown-list.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,mOAAmO;;MCWpP,kBAAkB;;;;IAIrB,kBAAa,GAAwC,IAAI,GAAG,EAAE,CAAC;gBAE1B,IAAI;;;EAIjD,iBAAiB;IACf,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;;IAG/B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;MACxC,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAQ,CAAC;MAEjC,IAAI,MAAM,IAAI,KAAK,EAAE;QACnB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;OACxB;KACF;IAED,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IACzB,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,2BAA2B,EAAE;MACjF,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KACpC;IAED,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAEvF,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,gBAAgB;IACd,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,IAAqB;;MAE1E,MAAM,YAAY,GAAkB,CAAC,CAAQ;QAC3C,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,MAAyB,CAAC,CAAC;OAC3D,CAAC;MAEF,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;MAElD,YAAY,CAAC,EAAE,MAAM,EAAE,IAAI,EAAsB,CAAC,CAAC;;MAGnD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAC5C,CAAC,CAAC;GACJ;EAED,uBAAuB,CAAC,IAAqB;IAC3C,MAAM,KAAK,GAAc,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACjD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAa;;MAE1B,IACE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,IAAI;QACnC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM;QACrC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,UAAU,EACxC;QACA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC;;MAGD,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,MAAM,EAAE;QACzC,IAAI,CAAC,uBAAuB,CAAC,IAAuB,CAAC,CAAC;OACvD;KACF,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,QAAuB,EAAE,IAAqB;;MAExE,IAAI,CAAC,mBAAmB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;MACjD,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;KACjC,CAAC,CAAC;GACJ;EAED,MAAM;;IACJ,MAAM,UAAU,GAAG;MACjB,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IAEF,QACE,EAAC,IAAI,oBAAK,UAAU,GAClB,eAAa,CACR,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.scss?tag=sdds-header-dropdown-list&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown-list/header-dropdown-list.tsx"],"sourcesContent":["@import '../../../../global/_variables.scss';\n\n:host {\n display: block;\n width: 190px;\n\n @media all and (max-width: $media-fullwidth) {\n width: 100vw;\n }\n\n padding: 0;\n margin: 0;\n list-style: none;\n border-radius: none;\n background-color: var(--sdds-header-app-launcher-menu-bg);\n}\n\n:host([type='lg']) {\n width: 320px;\n}\n","import { Component, Element, Host, h, Prop, State } from '@stencil/core';\nimport {\n getPreviousNestedChildOfSiblingsMatching,\n isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-dropdown-list',\n styleUrl: 'header-dropdown-list.scss',\n shadow: true,\n})\nexport class HeaderDropdownList {\n @Element() host: HTMLElement;\n\n // A Map to store the slots and their associated slotchange listeners.\n private slotListeners: Map<HTMLSlotElement, EventListener> = new Map();\n\n @Prop({ reflect: true }) type: 'lg' | 'md' = 'md';\n\n @State() headingElement: HTMLElement;\n\n componentWillLoad() {\n const { children } = this.host;\n\n // Set the type prop for each child, if they have such a property\n for (let i = 0; i < children.length; i++) {\n const child = children[i] as any;\n\n if ('type' in child) {\n child.type = this.type;\n }\n }\n\n let listRoot = this.host;\n if (this.host.parentElement.tagName.toLowerCase() === 'sdds-header-launcher-list') {\n listRoot = this.host.parentElement;\n }\n\n const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, isHeadingElement);\n\n if (headingEl) {\n this.headingElement = headingEl;\n } else {\n console.warn('Heading element for list not found');\n }\n }\n\n componentDidLoad() {\n this.host.shadowRoot.querySelectorAll('slot').forEach((slot: HTMLSlotElement) => {\n // Add the slotchange event listener.\n const onSlotChange: EventListener = (e: Event) => {\n this.processAssignedElements(e.target as HTMLSlotElement);\n };\n\n slot.addEventListener('slotchange', onSlotChange);\n\n onSlotChange({ target: slot } as unknown as Event);\n\n // Store the slot and its listener in the Map.\n this.slotListeners.set(slot, onSlotChange);\n });\n }\n\n processAssignedElements(slot: HTMLSlotElement): void {\n const nodes: Element[] = slot.assignedElements();\n nodes.forEach((node: Element) => {\n // Add a listitem role to the assigned element if needed.\n if (\n node.tagName.toLowerCase() !== 'li' &&\n node.tagName.toLowerCase() !== 'slot' &&\n node.getAttribute('role') !== 'listitem'\n ) {\n node.setAttribute('role', 'listitem');\n }\n\n // If the assigned element is a slot, process its assigned elements recursively.\n if (node.tagName.toLowerCase() === 'slot') {\n this.processAssignedElements(node as HTMLSlotElement);\n }\n });\n }\n\n disconnectedCallback() {\n this.slotListeners.forEach((listener: EventListener, slot: HTMLSlotElement) => {\n // Remove the slotchange event listener and delete the entry from the Map.\n slot.removeEventListener('slotchange', listener);\n this.slotListeners.delete(slot);\n });\n }\n\n render() {\n const attributes = {\n 'role': 'list',\n 'aria-labelledby': this.headingElement?.id,\n };\n\n return (\n <Host {...attributes}>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-dropdown.entry.js ADDED Viewed

@@ -0,0 +1,47 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+const headerDropdownCss = ":host{height:var(--sdds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--sdds-header-height));box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}:host .menu ::-webkit-scrollbar-button{height:0;width:0}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .button{position:relative;z-index:801}";
+const HeaderDropdown = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.uuid = crypto.randomUUID();
+    this.buttonLabel = undefined;
+    this.noDropdownIcon = false;
+    this.selected = false;
+    this.open = false;
+    this.buttonEl = undefined;
+  }
+  onAnyClick(event) {
+    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/
+    const isClickOutside = !event.composedPath().includes(this.host);
+    if (isClickOutside) {
+      this.open = false;
+    }
+  }
+  toggleDropdown() {
+    this.open = !this.open;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        'state-open': this.open,
+      } }, h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, h("button", { ref: (el) => {
+        this.buttonEl = el;
+      }, "aria-expanded": `${this.open}`, "aria-controls": `launcher-${this.uuid}`, "aria-current": this.selected ? 'location' : 'false', onClick: () => {
+        this.toggleDropdown();
+      } }, h("slot", { name: "button-icon" }), this.buttonLabel, h("slot", { name: "button-label" }), !this.noDropdownIcon && (h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (h("sdds-popover-canvas", { id: `sdds-dropdown-${this.uuid}`, class: "menu", referenceEl: this.buttonEl, placement: "bottom-start", show: this.open, offsetDistance: 0, modifiers: [
+        {
+          name: 'flip',
+          options: {
+            fallbackPlacements: [],
+          },
+        },
+      ] }, h("slot", null))))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderDropdown.style = headerDropdownCss;
+export { HeaderDropdown as sdds_header_dropdown };
+//# sourceMappingURL=sdds-header-dropdown.entry.js.map

package/dist/esm/sdds-header-dropdown.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,ynBAAynB;;MCOtoB,cAAc;;;IAiBjB,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;;0BATT,KAAK;oBAGX,KAAK;gBAER,KAAK;;;EAO9B,UAAU,CAAC,KAAiB;;IAE1B,MAAM,cAAc,GAAG,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAW,CAAC,CAAC;IACxE,IAAI,cAAc,EAAE;MAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACnB;GACF;EAED,cAAc;IACZ,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;GACxB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACH,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI;OACxB,IAED,wBAAkB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACzE,cACE,GAAG,EAAE,CAAC,EAAE;QACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;OACpB,mBACc,GAAG,IAAI,CAAC,IAAI,EAAE,mBACd,YAAY,IAAI,CAAC,IAAI,EAAE,kBACxB,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,OAAO,EAClD,OAAO,EAAE;QACP,IAAI,CAAC,cAAc,EAAE,CAAC;OACvB,IAED,YAAM,IAAI,EAAC,aAAa,GAAQ,EAC/B,IAAI,CAAC,WAAW,EACjB,YAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,CAAC,IAAI,CAAC,cAAc,KACnB,iBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAC9E,CACM,CACQ,EAClB,IAAI,CAAC,QAAQ,KACZ,2BACE,EAAE,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE,EAChC,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,IAAI,CAAC,QAAQ,EAC1B,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,cAAc,EAAE,CAAC,EACjB,SAAS,EAAE;QACT;UACE,IAAI,EAAE,MAAM;UACZ,OAAO,EAAE;YACP,kBAAkB,EAAE,EAAE;WACvB;SACF;OACF,IAED,eAAa,CACO,CACvB,CACG,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-dropdown/header-dropdown.scss?tag=sdds-header-dropdown&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown/header-dropdown.tsx"],"sourcesContent":["@import '../../../../mixins/scrollbar';\n@import '../../../../mixins/z-index';\n\n:host {\n height: var(--sdds-header-height);\n position: relative;\n\n .menu {\n flex-direction: column;\n\n @include sdds-scrollbar;\n\n overflow-y: auto;\n max-height: calc(100vh - var(--sdds-header-height));\n box-shadow: var(--sdds-nav-dropdown-menu-box);\n background-color: var(--sdds-header-app-launcher-menu-background);\n border-top-right-radius: 0;\n border-top-left-radius: 0;\n }\n\n .state-open {\n .dropdown-icon {\n transform: rotateZ(180deg);\n }\n\n .button {\n position: relative;\n z-index: z(tooltip) + 1;\n }\n }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n tag: 'sdds-header-dropdown',\n styleUrl: 'header-dropdown.scss',\n shadow: true,\n})\nexport class HeaderDropdown {\n @Element() host: HTMLElement;\n\n /** The label of the button that opens the dropdown.\n * This is an alternative to the button-label slot. */\n @Prop() buttonLabel: string;\n\n /** If the dropdown icon (downwards chevron) should be hidden. */\n @Prop() noDropdownIcon: boolean = false;\n\n /** If the button that opens the dropdown should appear selected. */\n @Prop() selected: boolean = false;\n\n @State() open: boolean = false;\n\n @State() buttonEl?: HTMLButtonElement;\n\n private uuid: string = crypto.randomUUID();\n\n @Listen('click', { target: 'document' })\n onAnyClick(event: MouseEvent) {\n // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n const isClickOutside = !event.composedPath().includes(this.host as any);\n if (isClickOutside) {\n this.open = false;\n }\n }\n\n toggleDropdown() {\n this.open = !this.open;\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'state-open': this.open,\n }}\n >\n <sdds-header-item class=\"button\" active={this.open} selected={this.selected}>\n <button\n ref={(el) => {\n this.buttonEl = el;\n }}\n aria-expanded={`${this.open}`}\n aria-controls={`launcher-${this.uuid}`}\n aria-current={this.selected ? 'location' : 'false'}\n onClick={() => {\n this.toggleDropdown();\n }}\n >\n <slot name=\"button-icon\"></slot>\n {this.buttonLabel}\n <slot name=\"button-label\"></slot>\n {!this.noDropdownIcon && (\n <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n )}\n </button>\n </sdds-header-item>\n {this.buttonEl && (\n <sdds-popover-canvas\n id={`sdds-dropdown-${this.uuid}`}\n class=\"menu\"\n referenceEl={this.buttonEl}\n placement=\"bottom-start\"\n show={this.open}\n offsetDistance={0}\n modifiers={[\n {\n name: 'flip',\n options: {\n fallbackPlacements: [],\n },\n },\n ]}\n >\n <slot></slot>\n </sdds-popover-canvas>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-hamburger.entry.js ADDED Viewed

@@ -0,0 +1,20 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { i as inheritAriaAttributes } from './utils-a3c1c64a.js';
+const headerHamburgerCss = ":host{color:var(--sdds-white)}:host sdds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}@media screen and (min-width: 992px){:host sdds-header-item{display:none}:host([persistent]) sdds-header-item{display:block}}";
+const HeaderHamburger = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const inheritedButtonProps = Object.assign({}, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("sdds-header-item", null, h("button", Object.assign({}, inheritedButtonProps), h("sdds-icon", { class: "icon", name: "burger", size: "20px" })))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderHamburger.style = headerHamburgerCss;
+export { HeaderHamburger as sdds_header_hamburger };
+//# sourceMappingURL=sdds-header-hamburger.entry.js.map

package/dist/esm/sdds-header-hamburger.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-hamburger.entry.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,0RAA0R;;MCQxS,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,oBAAoB,qBACrB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,4BACE,8BAAY,oBAAoB,GAC9B,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,GAAa,CACvD,CACQ,CACd,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-hamburger/header-hamburger.scss?tag=sdds-header-hamburger&encapsulation=shadow","./src/components/header/webcomponent/header-hamburger/header-hamburger.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n\n:host {\n color: var(--sdds-white);\n\n sdds-header-item {\n display: block;\n }\n\n .icon {\n position: relative;\n margin-left: -6px;\n left: 3px;\n transition: all 0.2s ease-in-out;\n }\n}\n\n@media screen and (min-width: $grid-lg) {\n :host sdds-header-item {\n display: none;\n }\n\n :host([persistent]) sdds-header-item {\n display: block;\n }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-hamburger',\n styleUrl: 'header-hamburger.scss',\n shadow: true,\n})\nexport class HeaderHamburger {\n @Element() host: HTMLElement;\n\n render() {\n const inheritedButtonProps = {\n ...inheritAriaAttributes(this.host),\n };\n\n return (\n <Host>\n <sdds-header-item>\n <button {...inheritedButtonProps}>\n <sdds-icon class=\"icon\" name=\"burger\" size=\"20px\"></sdds-icon>\n </button>\n </sdds-header-item>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-button.entry.js ADDED Viewed

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { i as inheritAriaAttributes } from './utils-a3c1c64a.js';
+const headerLauncherButtonCss = ":host{display:block}:host sdds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}";
+const HeaderLauncherButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.active = false;
+  }
+  render() {
+    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), inheritAriaAttributes(this.host));
+    const buttonProps = Object.assign({}, this.ariaAttributes);
+    return (h(Host, null, h("sdds-header-item", { active: this.active }, h("button", Object.assign({}, buttonProps), h("sdds-icon", { class: "icon", name: "bento", size: "20px" })))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderLauncherButton.style = headerLauncherButtonCss;
+export { HeaderLauncherButton as sdds_header_launcher_button };
+//# sourceMappingURL=sdds-header-launcher-button.entry.js.map

package/dist/esm/sdds-header-launcher-button.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-launcher-button.entry.js","mappings":";;;AAAA,MAAM,uBAAuB,GAAG,mJAAmJ;;MCQtK,oBAAoB;;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAK,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,QACE,EAAC,IAAI,QACH,wBAAkB,MAAM,EAAE,IAAI,CAAC,MAAM,IACnC,8BAAY,WAAW,GACrB,iBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-button/header-launcher-button.scss?tag=sdds-header-launcher-button&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-button/header-launcher-button.tsx"],"sourcesContent":[":host {\n display: block;\n\n sdds-header-item {\n display: block; // launcher button is always visible, regular header buttons are not.\n }\n\n .icon {\n position: relative;\n margin-left: -6px;\n left: 3px;\n transition: all 0.2s ease-in-out;\n }\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-launcher-button',\n styleUrl: 'header-launcher-button.scss',\n shadow: true,\n})\nexport class HeaderLauncherButton {\n @Element() host: HTMLElement;\n\n /** If the button should appear active. Can be used when the button is\n * triggering a dropdown, and the dropdown is open, for example. */\n @Prop() active = false;\n\n private ariaAttributes: Attributes;\n\n render() {\n this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host) };\n const buttonProps = {\n ...this.ariaAttributes,\n };\n\n return (\n <Host>\n <sdds-header-item active={this.active}>\n <button {...buttonProps}>\n <sdds-icon class=\"icon\" name=\"bento\" size=\"20px\"></sdds-icon>\n </button>\n </sdds-header-item>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-grid-item.entry.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+const headerLauncherGridItemCss = ":host{display:block;width:96px;height:96px}:host ::slotted(a),:host ::slotted(button){all:unset;box-sizing:border-box;border-right:1px solid var(--sdds-nav-item-border-color);width:100%;height:100%;border:none;padding:0 12px;display:flex;text-align:center;justify-content:center;align-items:center;flex-direction:column;gap:8px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);background-color:var(--sdds-header-app-launcher-menu-bg);color:var(--sdds-grey-800);border-radius:4px;transition:background-color 150ms ease}:host ::slotted(a:hover),:host ::slotted(button:hover){background-color:var(--sdds-grey-100);cursor:pointer}:host ::slotted(a:focus-visible),:host ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}";
+const HeaderLauncherGridItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, { role: "listitem" }, h("slot", null)));
+  }
+};
+HeaderLauncherGridItem.style = headerLauncherGridItemCss;
+export { HeaderLauncherGridItem as sdds_header_launcher_grid_item };
+//# sourceMappingURL=sdds-header-launcher-grid-item.entry.js.map

package/dist/esm/sdds-header-launcher-grid-item.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-launcher-grid-item.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,wwBAAwwB;;MCO7xB,sBAAsB;;;;EACjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,eAAa,CACR,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.scss?tag=sdds-header-launcher-grid-item&encapsulation=shadow","./src/components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n:host {\n display: block;\n width: 96px;\n height: 96px;\n\n ::slotted(a),\n ::slotted(button) {\n all: unset;\n box-sizing: border-box;\n border-right: 1px solid var(--sdds-nav-item-border-color);\n width: 100%;\n height: 100%;\n border: none;\n padding: 0 12px;\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 8px;\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n background-color: var(--sdds-header-app-launcher-menu-bg);\n color: var(--sdds-grey-800);\n border-radius: 4px;\n transition: background-color 150ms ease;\n }\n\n ::slotted(a:hover),\n ::slotted(button:hover) {\n background-color: var(--sdds-grey-100);\n cursor: pointer;\n }\n\n ::slotted(a:focus-visible),\n ::slotted(button:focus-visible) {\n @include sdds-focus-state;\n }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-header-launcher-grid-item',\n styleUrl: 'header-launcher-grid-item.scss',\n shadow: true,\n})\nexport class HeaderLauncherGridItem {\n render() {\n return (\n <Host role=\"listitem\">\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-grid-title.entry.js ADDED Viewed

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, H as Host } from './index-2d8c4bc9.js';
+const headerLauncherGridTitleCss = ".sdds-header-launcher-grid-title{all:unset;box-sizing:border-box;font:var(--sdds-detail-04);letter-spacing:var(--sdds-detail-04-ls);color:var(--sdds-header-app-launcher-grid-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color);margin:0}";
+const HeaderLauncherGridTitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.uuid = crypto.randomUUID();
+  }
+  render() {
+    return (h(Host, null, h("h3", { class: "sdds-header-launcher-grid-title", id: `sdds-${this.uuid}` }, h("slot", null))));
+  }
+};
+HeaderLauncherGridTitle.style = headerLauncherGridTitleCss;
+export { HeaderLauncherGridTitle as sdds_header_launcher_grid_title };
+//# sourceMappingURL=sdds-header-launcher-grid-title.entry.js.map

package/dist/esm/sdds-header-launcher-grid-title.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-launcher-grid-title.entry.js","mappings":";;AAAA,MAAM,0BAA0B,GAAG,sWAAsW;;MCO5X,uBAAuB;EALpC;;IAMU,SAAI,GAAW,MAAM,CAAC,UAAU,EAAE,CAAC;GAW5C;EATC,MAAM;IACJ,QACE,EAAC,IAAI,QACH,UAAI,KAAK,EAAC,iCAAiC,EAAC,EAAE,EAAE,QAAQ,IAAI,CAAC,IAAI,EAAE,IACjE,eAAa,CACV,CACA,EACP;GACH;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.scss?tag=sdds-header-launcher-grid-title","./src/components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.tsx"],"sourcesContent":[".sdds-header-launcher-grid-title {\n all: unset;\n box-sizing: border-box;\n font: var(--sdds-detail-04);\n letter-spacing: var(--sdds-detail-04-ls);\n color: var(--sdds-header-app-launcher-grid-category-title-color);\n text-transform: uppercase;\n height: 48px;\n padding: 0 16px;\n display: flex;\n align-items: center;\n border-bottom: 1px solid var(--sdds-nav-dropdown-item-border-color);\n margin: 0;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-header-launcher-grid-title',\n styleUrl: 'header-launcher-grid-title.scss',\n shadow: false,\n})\nexport class HeaderLauncherGridTitle {\n private uuid: string = crypto.randomUUID();\n\n render() {\n return (\n <Host>\n <h3 class=\"sdds-header-launcher-grid-title\" id={`sdds-${this.uuid}`}>\n <slot></slot>\n </h3>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-header-launcher-grid.entry.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-2d8c4bc9.js';
+import { g as getPreviousNestedChildOfSiblingsMatching, a as isHeadingElement } from './utils-a3c1c64a.js';
+const headerLauncherGridCss = ".sdds-header-launcher-grid{box-sizing:border-box;padding:12px;margin:0;list-style:none;width:100%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;border-radius:none}";
+const HeaderLauncherGrid = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.headingElement = undefined;
+  }
+  componentWillLoad() {
+    const listRoot = this.host;
+    const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {
+      const e = el;
+      return isHeadingElement(e);
+    });
+    if (headingEl) {
+      this.headingElement = headingEl;
+    }
+    else {
+      console.warn('Heading element for list not found');
+    }
+  }
+  render() {
+    var _a;
+    const listAttributes = {
+      'class': 'sdds-header-launcher-grid',
+      'role': 'list',
+      'aria-labelledby': (_a = this.headingElement) === null || _a === void 0 ? void 0 : _a.id,
+    };
+    return (h(Host, null, h("div", Object.assign({}, listAttributes), h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+HeaderLauncherGrid.style = headerLauncherGridCss;
+export { HeaderLauncherGrid as sdds_header_launcher_grid };
+//# sourceMappingURL=sdds-header-launcher-grid.entry.js.map

package/dist/esm/sdds-header-launcher-grid.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"sdds-header-launcher-grid.entry.js","mappings":";;;AAAA,MAAM,qBAAqB,GAAG,8KAA8K;;MCW/L,kBAAkB;;;;;EAK7B,iBAAiB;IACf,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC;IAE3B,MAAM,SAAS,GAAG,wCAAwC,CAAC,QAAQ,EAAE,CAAC,EAAE;MACtE,MAAM,CAAC,GAAG,EAAE,CAAC;MACb,OAAO,gBAAgB,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAC,CAAC;IAEH,IAAI,SAAS,EAAE;MACb,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;KACjC;SAAM;MACL,OAAO,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;KACpD;GACF;EAED,MAAM;;IACJ,MAAM,cAAc,GAAG;MACrB,OAAO,EAAE,2BAA2B;MACpC,MAAM,EAAE,MAAM;MACd,iBAAiB,EAAE,MAAA,IAAI,CAAC,cAAc,0CAAE,EAAE;KAC3C,CAAC;IACF,QACE,EAAC,IAAI,QACH,2BAAS,cAAc,GACrB,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.scss?tag=sdds-header-launcher-grid","./src/components/header/webcomponent/header-launcher-grid/header-launcher-grid.tsx"],"sourcesContent":[".sdds-header-launcher-grid {\n box-sizing: border-box;\n padding: 12px;\n margin: 0;\n list-style: none;\n width: 100%;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 4px;\n border-radius: none;\n}\n","import { Component, Element, h, Host, State } from '@stencil/core';\nimport {\n getPreviousNestedChildOfSiblingsMatching,\n isHeadingElement,\n} from '../../../../utils/utils';\n\n@Component({\n tag: 'sdds-header-launcher-grid',\n styleUrl: 'header-launcher-grid.scss',\n shadow: false,\n})\nexport class HeaderLauncherGrid {\n @Element() host: HTMLElement;\n\n @State() headingElement: HTMLElement;\n\n componentWillLoad() {\n const listRoot = this.host;\n\n const headingEl = getPreviousNestedChildOfSiblingsMatching(listRoot, (el) => {\n const e = el;\n return isHeadingElement(e);\n });\n\n if (headingEl) {\n this.headingElement = headingEl;\n } else {\n console.warn('Heading element for list not found');\n }\n }\n\n render() {\n const listAttributes = {\n 'class': 'sdds-header-launcher-grid',\n 'role': 'list',\n 'aria-labelledby': this.headingElement?.id,\n };\n return (\n <Host>\n <div {...listAttributes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}