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/cjs/sdds-footer.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-18eb94f0.js');
+const index = require('./index-681dc796.js');
 const sddsFooterCss = ":host{display:block}:host .footer-top{background-color:var(--sdds-footer-top-background);padding:40px}:host .footer-top ::slotted(*){display:grid;grid-template-columns:1fr 1fr 1fr 1fr;row-gap:40px;width:100%}:host .footer-main{background-color:var(--sdds-footer-main-background);padding:0 40px}:host .footer-main-top{padding:40px 0;display:flex;justify-content:space-between}:host .footer-bottom-right ::slotted(*),:host .footer-bottom-left ::slotted(*){display:flex;column-gap:24px}:host .footer-main-bottom{padding:40px 0;display:flex;justify-content:space-between;border-top:1px solid var(--sdds-footer-main-divider)}:host .footer-main-bottom small.copyright{margin:0;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-footer-main-copyright)}:host .footer-main-bottom .brand{background-image:var(--sdds-background-image-scania-wordmark-white-svg);background-repeat:no-repeat;background-size:117px;background-position:right;width:117px;height:20px}:host .footer-main-bottom .brand p{color:transparent;padding:0;margin:0;height:100%;visibility:hidden}@media all and (max-width: 992px){:host .footer-top{padding:0}:host .footer-top ::slotted(*){display:block;width:100%}:host .footer-main{padding:0 24px}:host .footer-main-top{flex-direction:column;row-gap:48px;padding:24px 0}:host .footer-bottom-left ::slotted(*){flex-direction:column;gap:8px}:host .footer-main-bottom{flex-direction:column;padding-bottom:32px}:host .footer-main-bottom p.copyright{padding-bottom:96px}:host .footer-main-bottom .brand{width:100%}}";
@@ -13,8 +13,7 @@ const SddsFooter = class {
     this.hasTopPart = undefined;
   }
   connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasTopPart = children.some((element) => element.slot === 'top');
+    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
   }
   render() {
     return (index.h(index.Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, index.h("footer", null, this.hasTopPart && (index.h("div", { class: "footer-top" }, index.h("slot", { name: "top" }))), index.h("div", { class: "footer-main" }, index.h("div", { class: "footer-main-top" }, index.h("div", { class: "footer-bottom-left" }, index.h("slot", { name: "main-left" })), index.h("div", { class: "footer-bottom-right" }, index.h("slot", { name: "main-right" }))), index.h("div", { class: "footer-main-bottom" }, index.h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), index.h("div", { class: "brand" }, index.h("p", null, "Scania")))))));

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

	@@ -1 +1 @@
1	- {"file":"sdds-footer.entry.cjs.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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/ED,wBACG,IAAI,CAAC,UAAU,KACdA,iBAAK,KAAK,EAAC,YAAY,IACrBA,kBAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACDA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACNA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,mBAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnFA,iBAAK,KAAK,EAAC,OAAO,IAChBA,4BAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;","names":["h","Host"],"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.cjs.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,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,GAAG,IAAI,CAAC,WAAW,GAAG,qBAAqB,IAAI,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,IAC/ED,wBACG,IAAI,CAAC,UAAU,KACdA,iBAAK,KAAK,EAAC,YAAY,IACrBA,kBAAM,IAAI,EAAC,KAAK,GAAQ,CACpB,CACP,EACDA,iBAAK,KAAK,EAAC,aAAa,IACtBA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,kBAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,EACNA,iBAAK,KAAK,EAAC,oBAAoB,IAC7BA,mBAAO,KAAK,EAAC,WAAW,yBAAmB,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,YAAgB,EACnFA,iBAAK,KAAK,EAAC,OAAO,IAChBA,4BAAa,CACT,CACF,CACF,CACC,CACJ,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/sdds-header-brand-symbol.cjs.entry.js ADDED Viewed

@@ -0,0 +1,25 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.js');
+const utils = require('./utils-2776882d.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) {
+    index.registerInstance(this, hostRef);
+    this.linkHref = 'https://www.scania.com';
+  }
+  render() {
+    const inheritedLinkProps = Object.assign({}, utils.inheritAriaAttributes(this.host));
+    return (index.h(index.Host, null, index.h("sdds-header-item", null, index.h("a", Object.assign({}, inheritedLinkProps, { href: this.linkHref })))));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderBrandSymbol.style = headerBrandSymbolCss;
+exports.sdds_header_brand_symbol = HeaderBrandSymbol;
+//# sourceMappingURL=sdds-header-brand-symbol.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-brand-symbol.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,oBAAoB,GAAG,gUAAgU;;MCQhV,iBAAiB;;;oBAID,wBAAwB;;EAEnD,MAAM;IACJ,MAAM,kBAAkB,qBACnBA,2BAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,QACEC,QAACC,UAAI,QACHD,kCACEA,+BAAO,kBAAkB,IAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,IAAM,CACnC,CACd,EACP;GACH;;;;;;;","names":["inheritAriaAttributes","h","Host"],"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/cjs/sdds-header-cell.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-18eb94f0.js');
+const index = require('./index-681dc796.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}";
@@ -16,9 +16,9 @@ const relevantTableProps = [
 const TableHeaderCell = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.sortColumnDataEvent = index.createEvent(this, "sortColumnDataEvent", 7);
-    this.textAlignEvent = index.createEvent(this, "textAlignEvent", 7);
-    this.headCellHoverEvent = index.createEvent(this, "headCellHoverEvent", 7);
+    this.sddsSortChange = index.createEvent(this, "sddsSortChange", 6);
+    this.internalSddsTextAlign = index.createEvent(this, "internalSddsTextAlign", 6);
+    this.internalSddsHover = index.createEvent(this, "internalSddsHover", 6);
     this.sortButtonClick = (key) => {
       // Toggling direction of sorting as we only use one button for sorting
       if (this.sortingDirection !== 'asc') {
@@ -30,7 +30,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) {
@@ -39,7 +39,7 @@ const TableHeaderCell = class {
       return (index.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;
@@ -58,7 +58,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))
@@ -71,7 +71,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;
@@ -90,10 +90,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;
@@ -112,7 +108,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/cjs/sdds-header-cell.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"sdds-header-cell.entry.cjs.js","mappings":"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","names":["h","Host"],"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.cjs.js","mappings":"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","names":["h","Host"],"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/cjs/sdds-header-dropdown-list-item.cjs.entry.js ADDED Viewed

@@ -0,0 +1,27 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.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) {
+    index.registerInstance(this, hostRef);
+    this.selected = false;
+    this.type = 'md';
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: {
+        'component': true,
+        'component-selected': this.selected,
+      } }, index.h("slot", null))));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderDropdownListItem.style = headerDropdownListItemCss;
+exports.sdds_header_dropdown_list_item = HeaderDropdownListItem;
+//# sourceMappingURL=sdds-header-dropdown-list-item.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown-list-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,ozCAAozC;;MCOz0C,sBAAsB;;;oBAIL,KAAK;gBAGY,IAAI;;EAEjD,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,WAAW,EAAE,IAAI;QACjB,oBAAoB,EAAE,IAAI,CAAC,QAAQ;OACpC,IAEDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/sdds-header-dropdown-list-user.cjs.entry.js ADDED Viewed

@@ -0,0 +1,26 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.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) {
+    index.registerInstance(this, hostRef);
+    this.imgUrl = undefined;
+    this.imgAlt = undefined;
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: "user-box" }, this.imgUrl && index.h("img", { src: this.imgUrl, alt: this.imgAlt }), index.h("slot", { name: "image" }), index.h("div", { class: "user-content" }, index.h("div", { class: "header" }, this.heading, index.h("slot", { name: "heading" })), index.h("div", { class: "subheader" }, this.subheading, index.h("slot", { name: "subheading" }))))));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderDropdownListLgUser.style = headerDropdownListUserCss;
+exports.sdds_header_dropdown_list_user = HeaderDropdownListLgUser;
+//# sourceMappingURL=sdds-header-dropdown-list-user.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown-list-user.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,gnBAAgnB;;MCOroB,wBAAwB;;;;;;;;EAenC,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,IAAI,EAAC,UAAU,IACnBD,iBAAK,KAAK,EAAC,UAAU,IAClB,IAAI,CAAC,MAAM,IAAIA,iBAAK,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,EAC3DA,kBAAM,IAAI,EAAC,OAAO,GAAQ,EAC1BA,iBAAK,KAAK,EAAC,cAAc,IACvBA,iBAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,OAAO,EACbA,kBAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EACNA,iBAAK,KAAK,EAAC,WAAW,IACnB,IAAI,CAAC,UAAU,EAChBA,kBAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACF,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/sdds-header-dropdown-list.cjs.entry.js ADDED Viewed

@@ -0,0 +1,87 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.js');
+const utils = require('./utils-2776882d.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) {
+    index.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 = utils.getPreviousNestedChildOfSiblingsMatching(listRoot, utils.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 (index.h(index.Host, Object.assign({}, attributes), index.h("slot", null)));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderDropdownList.style = headerDropdownListCss;
+exports.sdds_header_dropdown_list = HeaderDropdownList;
+//# sourceMappingURL=sdds-header-dropdown-list.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown-list.entry.cjs.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,GAAGA,8CAAwC,CAAC,QAAQ,EAAEC,sBAAgB,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,QACEC,QAACC,UAAI,oBAAK,UAAU,GAClBD,qBAAa,CACR,EACP;GACH;;;;;;;","names":["getPreviousNestedChildOfSiblingsMatching","isHeadingElement","h","Host"],"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/cjs/sdds-header-dropdown.cjs.entry.js ADDED Viewed

@@ -0,0 +1,51 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.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) {
+    index.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 (index.h(index.Host, null, index.h("div", { class: {
+        'state-open': this.open,
+      } }, index.h("sdds-header-item", { class: "button", active: this.open, selected: this.selected }, index.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();
+      } }, index.h("slot", { name: "button-icon" }), this.buttonLabel, index.h("slot", { name: "button-label" }), !this.noDropdownIcon && (index.h("sdds-icon", { class: "dropdown-icon", name: "chevron_down", size: "16px" })))), this.buttonEl && (index.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: [],
+          },
+        },
+      ] }, index.h("slot", null))))));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderDropdown.style = headerDropdownCss;
+exports.sdds_header_dropdown = HeaderDropdown;
+//# sourceMappingURL=sdds-header-dropdown.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-dropdown.entry.cjs.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,QACEA,QAACC,UAAI,QACHD,iBACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI,CAAC,IAAI;OACxB,IAEDA,8BAAkB,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,IACzEA,oBACE,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,IAEDA,kBAAM,IAAI,EAAC,aAAa,GAAQ,EAC/B,IAAI,CAAC,WAAW,EACjBA,kBAAM,IAAI,EAAC,cAAc,GAAQ,EAChC,CAAC,IAAI,CAAC,cAAc,KACnBA,uBAAW,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAC9E,CACM,CACQ,EAClB,IAAI,CAAC,QAAQ,KACZA,iCACE,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,IAEDA,qBAAa,CACO,CACvB,CACG,CACD,EACP;GACH;;;;;;;","names":["h","Host"],"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/cjs/sdds-header-hamburger.cjs.entry.js ADDED Viewed

@@ -0,0 +1,24 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.js');
+const utils = require('./utils-2776882d.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    const inheritedButtonProps = Object.assign({}, utils.inheritAriaAttributes(this.host));
+    return (index.h(index.Host, null, index.h("sdds-header-item", null, index.h("button", Object.assign({}, inheritedButtonProps), index.h("sdds-icon", { class: "icon", name: "burger", size: "20px" })))));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderHamburger.style = headerHamburgerCss;
+exports.sdds_header_hamburger = HeaderHamburger;
+//# sourceMappingURL=sdds-header-hamburger.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-hamburger.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,0RAA0R;;MCQxS,eAAe;;;;EAG1B,MAAM;IACJ,MAAM,oBAAoB,qBACrBA,2BAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,kCACEA,oCAAY,oBAAoB,GAC9BA,uBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,MAAM,GAAa,CACvD,CACQ,CACd,EACP;GACH;;;;;;;","names":["inheritAriaAttributes","h","Host"],"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/cjs/sdds-header-launcher-button.cjs.entry.js ADDED Viewed

@@ -0,0 +1,26 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.js');
+const utils = require('./utils-2776882d.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) {
+    index.registerInstance(this, hostRef);
+    this.active = false;
+  }
+  render() {
+    this.ariaAttributes = Object.assign(Object.assign({}, this.ariaAttributes), utils.inheritAriaAttributes(this.host));
+    const buttonProps = Object.assign({}, this.ariaAttributes);
+    return (index.h(index.Host, null, index.h("sdds-header-item", { active: this.active }, index.h("button", Object.assign({}, buttonProps), index.h("sdds-icon", { class: "icon", name: "bento", size: "20px" })))));
+  }
+  get host() { return index.getElement(this); }
+};
+HeaderLauncherButton.style = headerLauncherButtonCss;
+exports.sdds_header_launcher_button = HeaderLauncherButton;
+//# sourceMappingURL=sdds-header-launcher-button.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-launcher-button.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,uBAAuB,GAAG,mJAAmJ;;MCQtK,oBAAoB;;;kBAKd,KAAK;;EAItB,MAAM;IACJ,IAAI,CAAC,cAAc,mCAAQ,IAAI,CAAC,cAAc,GAAKA,2BAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAE,CAAC;IACtF,MAAM,WAAW,qBACZ,IAAI,CAAC,cAAc,CACvB,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,8BAAkB,MAAM,EAAE,IAAI,CAAC,MAAM,IACnCA,oCAAY,WAAW,GACrBA,uBAAW,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACtD,CACQ,CACd,EACP;GACH;;;;;;;","names":["inheritAriaAttributes","h","Host"],"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/cjs/sdds-header-launcher-grid-item.cjs.entry.js ADDED Viewed

@@ -0,0 +1,21 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-681dc796.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) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem" }, index.h("slot", null)));
+  }
+};
+HeaderLauncherGridItem.style = headerLauncherGridItemCss;
+exports.sdds_header_launcher_grid_item = HeaderLauncherGridItem;
+//# sourceMappingURL=sdds-header-launcher-grid-item.cjs.entry.js.map

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

@@ -0,0 +1 @@

+ {"file":"sdds-header-launcher-grid-item.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,yBAAyB,GAAG,wwBAAwwB;;MCO7xB,sBAAsB;;;;EACjC,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,IAAI,EAAC,UAAU,IACnBD,qBAAa,CACR,EACP;GACH;;;;;;","names":["h","Host"],"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}