@scania/tegel 0.0.51 → 0.0.61

package/dist/components/sdds-footer.js

@@ -2,39 +2,38 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 
 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%}}";
 
-const SddsFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.modeVariant = null;
-    this.hasTopPart = undefined;
-  }
-  connectedCallback() {
-    const children = Array.from(this.host.children);
-    this.hasTopPart = children.some((element) => element.slot === 'top');
-  }
-  render() {
-    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, this.hasTopPart && (h("div", { class: "footer-top" }, h("slot", { name: "top" }))), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, h("div", { class: "footer-bottom-left" }, h("slot", { name: "main-left" })), h("div", { class: "footer-bottom-right" }, h("slot", { name: "main-right" }))), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), h("div", { class: "brand" }, h("p", null, "Scania")))))));
-  }
-  get host() { return this; }
-  static get style() { return sddsFooterCss; }
-}, [1, "sdds-footer", {
-    "modeVariant": [1, "mode-variant"],
-    "hasTopPart": [32]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-footer"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-footer":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SddsFooter$1);
-      }
-      break;
-  } });
+const SddsFooter$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.modeVariant = null;
+    this.hasTopPart = undefined;
+  }
+  connectedCallback() {
+    this.hasTopPart = Array.from(this.host.children).some((element) => element.slot === 'top');
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("footer", null, this.hasTopPart && (h("div", { class: "footer-top" }, h("slot", { name: "top" }))), h("div", { class: "footer-main" }, h("div", { class: "footer-main-top" }, h("div", { class: "footer-bottom-left" }, h("slot", { name: "main-left" })), h("div", { class: "footer-bottom-right" }, h("slot", { name: "main-right" }))), h("div", { class: "footer-main-bottom" }, h("small", { class: "copyright" }, "Copyright \u00A9 ", new Date().getFullYear(), " Scania"), h("div", { class: "brand" }, h("p", null, "Scania")))))));
+  }
+  get host() { return this; }
+  static get style() { return sddsFooterCss; }
+}, [1, "sdds-footer", {
+    "modeVariant": [1, "mode-variant"],
+    "hasTopPart": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-footer"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-footer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SddsFooter$1);
+      }
+      break;
+  } });
 }
 
 const SddsFooter = SddsFooter$1;

package/dist/components/sdds-footer.js.map

@@ -1 +1 @@
-{"file":"sdds-footer.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhDA,YAAU;;;;;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":["SddsFooter"],"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 &#169; {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}
+{"file":"sdds-footer.js","mappings":";;AAAA,MAAM,aAAa,GAAG,ghDAAghD;;MCQzhDA,YAAU;;;;;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":["SddsFooter"],"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 &#169; {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/components/sdds-header-brand-symbol.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsHeaderBrandSymbol extends Components.SddsHeaderBrandSymbol, HTMLElement {}
+export const SddsHeaderBrandSymbol: {
+  prototype: SddsHeaderBrandSymbol;
+  new (): SddsHeaderBrandSymbol;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-header-brand-symbol.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAriaAttributes } from './utils.js';
+import { d as defineCustomElement$3 } from './core-header-item.js';
+import { d as defineCustomElement$2 } from './header-item.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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return headerBrandSymbolCss; }
+}, [1, "sdds-header-brand-symbol", {
+    "linkHref": [1, "link-href"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-brand-symbol", "sdds-core-header-item", "sdds-header-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-brand-symbol":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, HeaderBrandSymbol);
+      }
+      break;
+    case "sdds-core-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "sdds-header-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const SddsHeaderBrandSymbol = HeaderBrandSymbol;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderBrandSymbol, defineCustomElement };
+
+//# sourceMappingURL=sdds-header-brand-symbol.js.map

package/dist/components/sdds-header-brand-symbol.js.map

@@ -0,0 +1 @@
+{"file":"sdds-header-brand-symbol.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/components/sdds-header-cell.js

@@ -2,162 +2,162 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 
 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}";
 
-const relevantTableProps = [
-  'enableMultiselect',
-  'enableExpandableRows',
-  'compactDesign',
-  'noMinWidth',
-  'verticalDividers',
-];
-const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.sddsSortChange = createEvent(this, "sddsSortChange", 7);
-    this.internalSddsTextAlign = createEvent(this, "internalSddsTextAlign", 7);
-    this.internalSddsHover = createEvent(this, "internalSddsHover", 7);
-    this.sortButtonClick = (key) => {
-      // Toggling direction of sorting as we only use one button for sorting
-      if (this.sortingDirection !== 'asc') {
-        this.sortingDirection = 'asc';
-      }
-      else {
-        this.sortingDirection = 'desc';
-      }
-      // 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.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);
-    };
-    this.headerCellContent = () => {
-      if (this.sortable && !this.disableSortingBtn) {
-        return (h("button", { class: "sdds-table__header-button", onClick: () => this.sortButtonClick(this.columnKey) }, h("span", { class: "sdds-table__header-button-text", style: { textAlign: this.textAlignState } }, this.columnTitle), this.sortingDirection === '' && (h("svg", { class: "sdds-table__header-button-icon", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 15" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" }))), this.sortingDirection !== '' && (h("svg", { class: `sdds-table__header-button-icon ${this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''}`, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" })))));
-      }
-      return (h("p", { class: "sdds-table__header-text", style: { textAlign: this.textAlignState } }, this.columnTitle));
-    };
-    this.onHeadCellHover = (key) => {
-      this.internalSddsHover.emit([this.tableId, key]);
-    };
-    this.columnKey = undefined;
-    this.columnTitle = undefined;
-    this.customWidth = undefined;
-    this.sortable = false;
-    this.textAlign = undefined;
-    this.textAlignState = undefined;
-    this.sortingDirection = '';
-    this.sortedByMyKey = false;
-    this.disableSortingBtn = false;
-    this.verticalDividers = false;
-    this.compactDesign = false;
-    this.noMinWidth = false;
-    this.enableMultiselect = false;
-    this.enableToolbarDesign = false;
-    this.tableId = '';
-    this.enableExpandableRows = false;
-  }
-  internalSddsPropChangeListener(event) {
-    if (this.tableId === event.detail.tableId) {
-      event.detail.changed
-        .filter((changedProp) => relevantTableProps.includes(changedProp))
-        .forEach((changedProp) => {
-        if (typeof this[changedProp] === 'undefined') {
-          throw new Error(`Table prop is not supported: ${changedProp}`);
-        }
-        this[changedProp] = event.detail[changedProp];
-      });
-    }
-  }
-  // Listen to parent data-table if sorting is allowed
-  internalSddsSortingChangeListener(event) {
-    const [receivedID, receivedSortingStatus] = event.detail;
-    if (this.tableId === receivedID) {
-      this.disableSortingBtn = receivedSortingStatus;
-    }
-  }
-  // target is set to body so other instances of same component "listen" and react to the change
-  updateOptionsContent(event) {
-    if (this.tableId === event.detail[0]) {
-      // grab only value at position 1 as it is the "key"
-      if (this.columnKey !== event.detail[1]) {
-        this.sortedByMyKey = false;
-        // To sync with CSS transition timing
-        setTimeout(() => {
-          this.sortingDirection = '';
-        }, 200);
-      }
-    }
-  }
-  connectedCallback() {
-    this.tableEl = this.host.closest('sdds-table');
-    this.tableId = this.tableEl.tableId;
-  }
-  componentWillLoad() {
-    relevantTableProps.forEach((tablePropName) => {
-      this[tablePropName] = this.tableEl[tablePropName];
-    });
-  }
-  componentWillRender() {
-    // enable only right or left text align
-    if (this.textAlign === 'right' || this.textAlign === 'end') {
-      this.textAlignState = 'right';
-    }
-    else {
-      this.textAlignState = 'left';
-    }
-    // To enable body cells text align per rules set in head cell
-    this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);
-    this.enableToolbarDesign =
-      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;
-  }
-  render() {
-    return (h(Host, { class: {
-        'sdds-table__header-cell': true,
-        'sdds-table__header-cell--sortable': this.sortable,
-        'sdds-table__header-cell--is-sorted': this.sortedByMyKey,
-        'sdds-table__header-cell--custom-width': this.customWidth !== '',
-        'sdds-table__header-cell--right-align': this.textAlignState === 'right',
-        'sdds-table--compact': this.compactDesign,
-        'sdds-table--divider': this.verticalDividers,
-        'sdds-table--no-min-width': this.noMinWidth,
-        'sdds-table--extra-column': this.enableMultiselect || this.enableExpandableRows,
-        'sdds-table--toolbar-available': this.enableToolbarDesign,
-      }, style: { width: this.customWidth },
-      // Calling actions from here to enable hover functionality for both sortable and un-sortable tables
-      onMouseOver: () => this.onHeadCellHover(this.columnKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
-  }
-  get host() { return this; }
-  static get style() { return tableHeaderCellCss; }
-}, [1, "sdds-header-cell", {
-    "columnKey": [513, "column-key"],
-    "columnTitle": [513, "column-title"],
-    "customWidth": [513, "custom-width"],
-    "sortable": [4],
-    "textAlign": [513, "text-align"],
-    "textAlignState": [32],
-    "sortingDirection": [32],
-    "sortedByMyKey": [32],
-    "disableSortingBtn": [32],
-    "verticalDividers": [32],
-    "compactDesign": [32],
-    "noMinWidth": [32],
-    "enableMultiselect": [32],
-    "enableToolbarDesign": [32],
-    "tableId": [32],
-    "enableExpandableRows": [32]
-  }, [[16, "internalSddsPropChange", "internalSddsPropChangeListener"], [16, "internalSddsSortingChange", "internalSddsSortingChangeListener"], [16, "sddsSortChange", "updateOptionsContent"]]]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["sdds-header-cell"];
-  components.forEach(tagName => { switch (tagName) {
-    case "sdds-header-cell":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, TableHeaderCell);
-      }
-      break;
-  } });
+const relevantTableProps = [
+  'enableMultiselect',
+  'enableExpandableRows',
+  'compactDesign',
+  'noMinWidth',
+  'verticalDividers',
+];
+const TableHeaderCell = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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') {
+        this.sortingDirection = 'asc';
+      }
+      else {
+        this.sortingDirection = 'desc';
+      }
+      // 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.sddsSortChange.emit([this.tableId, key, this.sortingDirection]);
+    };
+    this.headerCellContent = () => {
+      if (this.sortable && !this.disableSortingBtn) {
+        return (h("button", { class: "sdds-table__header-button", onClick: () => this.sortButtonClick(this.columnKey) }, h("span", { class: "sdds-table__header-button-text", style: { textAlign: this.textAlignState } }, this.columnTitle), this.sortingDirection === '' && (h("svg", { class: "sdds-table__header-button-icon", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 15" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M8.45 13.67V4.62a.5.5 0 0 1 1 0v9.05h-1Z" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" }), h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" }))), this.sortingDirection !== '' && (h("svg", { class: `sdds-table__header-button-icon ${this.sortingDirection === 'desc' ? 'sdds-table__header-button-icon--rotate' : ''}`, fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", 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" })))));
+      }
+      return (h("p", { class: "sdds-table__header-text", style: { textAlign: this.textAlignState } }, this.columnTitle));
+    };
+    this.onHeadCellHover = (key) => {
+      this.internalSddsHover.emit([this.tableId, key]);
+    };
+    this.columnKey = undefined;
+    this.columnTitle = undefined;
+    this.customWidth = undefined;
+    this.sortable = false;
+    this.textAlign = undefined;
+    this.textAlignState = undefined;
+    this.sortingDirection = '';
+    this.sortedByMyKey = false;
+    this.disableSortingBtn = false;
+    this.verticalDividers = false;
+    this.compactDesign = false;
+    this.noMinWidth = false;
+    this.enableMultiselect = false;
+    this.enableToolbarDesign = false;
+    this.tableId = '';
+    this.enableExpandableRows = false;
+  }
+  internalSddsPropChangeListener(event) {
+    if (this.tableId === event.detail.tableId) {
+      event.detail.changed
+        .filter((changedProp) => relevantTableProps.includes(changedProp))
+        .forEach((changedProp) => {
+        if (typeof this[changedProp] === 'undefined') {
+          throw new Error(`Table prop is not supported: ${changedProp}`);
+        }
+        this[changedProp] = event.detail[changedProp];
+      });
+    }
+  }
+  // Listen to parent data-table if sorting is allowed
+  internalSddsSortingChangeListener(event) {
+    const [receivedID, receivedSortingStatus] = event.detail;
+    if (this.tableId === receivedID) {
+      this.disableSortingBtn = receivedSortingStatus;
+    }
+  }
+  // target is set to body so other instances of same component "listen" and react to the change
+  updateOptionsContent(event) {
+    if (this.tableId === event.detail[0]) {
+      // grab only value at position 1 as it is the "key"
+      if (this.columnKey !== event.detail[1]) {
+        this.sortedByMyKey = false;
+        // To sync with CSS transition timing
+        setTimeout(() => {
+          this.sortingDirection = '';
+        }, 200);
+      }
+    }
+  }
+  connectedCallback() {
+    this.tableEl = this.host.closest('sdds-table');
+    this.tableId = this.tableEl.tableId;
+  }
+  componentWillLoad() {
+    relevantTableProps.forEach((tablePropName) => {
+      this[tablePropName] = this.tableEl[tablePropName];
+    });
+  }
+  componentWillRender() {
+    // enable only right or left text align
+    if (this.textAlign === 'right' || this.textAlign === 'end') {
+      this.textAlignState = 'right';
+    }
+    else {
+      this.textAlignState = 'left';
+    }
+    // To enable body cells text align per rules set in head cell
+    this.internalSddsTextAlign.emit([this.tableId, this.columnKey, this.textAlignState]);
+    this.enableToolbarDesign =
+      this.host.closest('sdds-table').getElementsByTagName('sdds-table-toolbar').length >= 1;
+  }
+  render() {
+    return (h(Host, { class: {
+        'sdds-table__header-cell': true,
+        'sdds-table__header-cell--sortable': this.sortable,
+        'sdds-table__header-cell--is-sorted': this.sortedByMyKey,
+        'sdds-table__header-cell--custom-width': this.customWidth !== '',
+        'sdds-table__header-cell--right-align': this.textAlignState === 'right',
+        'sdds-table--compact': this.compactDesign,
+        'sdds-table--divider': this.verticalDividers,
+        'sdds-table--no-min-width': this.noMinWidth,
+        'sdds-table--extra-column': this.enableMultiselect || this.enableExpandableRows,
+        'sdds-table--toolbar-available': this.enableToolbarDesign,
+      }, style: { width: this.customWidth },
+      // Calling actions from here to enable hover functionality for both sortable and un-sortable tables
+      onMouseOver: () => this.onHeadCellHover(this.columnKey), onMouseLeave: () => this.onHeadCellHover('') }, this.headerCellContent()));
+  }
+  get host() { return this; }
+  static get style() { return tableHeaderCellCss; }
+}, [1, "sdds-header-cell", {
+    "columnKey": [513, "column-key"],
+    "columnTitle": [513, "column-title"],
+    "customWidth": [513, "custom-width"],
+    "sortable": [4],
+    "textAlign": [513, "text-align"],
+    "textAlignState": [32],
+    "sortingDirection": [32],
+    "sortedByMyKey": [32],
+    "disableSortingBtn": [32],
+    "verticalDividers": [32],
+    "compactDesign": [32],
+    "noMinWidth": [32],
+    "enableMultiselect": [32],
+    "enableToolbarDesign": [32],
+    "tableId": [32],
+    "enableExpandableRows": [32]
+  }, [[16, "internalSddsPropChange", "internalSddsPropChangeListener"], [16, "internalSddsSortingChange", "internalSddsSortingChangeListener"], [16, "sddsSortChange", "updateOptionsContent"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["sdds-header-cell"];
+  components.forEach(tagName => { switch (tagName) {
+    case "sdds-header-cell":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, TableHeaderCell);
+      }
+      break;
+  } });
 }
 
 const SddsHeaderCell = TableHeaderCell;

package/dist/components/sdds-header-cell.js.map

@@ -1 +1 @@
-{"file":"sdds-header-cell.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: true,\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: true,\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: true,\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}
+{"file":"sdds-header-cell.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/components/sdds-header-dropdown-list-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SddsHeaderDropdownListItem extends Components.SddsHeaderDropdownListItem, HTMLElement {}
+export const SddsHeaderDropdownListItem: {
+  prototype: SddsHeaderDropdownListItem;
+  new (): SddsHeaderDropdownListItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/sdds-header-dropdown-list-item.js

@@ -0,0 +1,8 @@
+import { H as HeaderDropdownListItem, d as defineCustomElement$1 } from './header-dropdown-list-item.js';
+
+const SddsHeaderDropdownListItem = HeaderDropdownListItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { SddsHeaderDropdownListItem, defineCustomElement };
+
+//# sourceMappingURL=sdds-header-dropdown-list-item.js.map

package/dist/components/sdds-header-dropdown-list-item.js.map

@@ -0,0 +1 @@
+{"file":"sdds-header-dropdown-list-item.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}