npm - @scania/tegel - Versions diffs - 0.0.52 → 0.0.61 - Mend

@scania/tegel 0.0.52 → 0.0.61

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

package/dist/esm/sdds-folder-tabs-button.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-folder-tabs-button.entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,svDAAsvD;;MCOzwD,oBAAoB;;;oBAEH,KAAK;oBAGL,KAAK;;;;EAMjC,MAAM,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,cACE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EACtC,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;YACvC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACC,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.scss?tag=sdds-folder-tabs-button&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n position: relative;\n z-index: z(tab);\n\n button {\n min-width: 142px;\n height: 100%;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n cursor: pointer;\n color: var(--sdds-folder-tab-color);\n padding: 16px;\n white-space: nowrap;\n text-decoration: none;\n text-align: left;\n outline: none;\n border: none;\n border-top: 2px solid var(--sdds-folder-tab-background);\n background-color: var(--sdds-folder-tab-background);\n border-right: none;\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity);\n }\n\n &.selected {\n background-color: var(--sdds-folder-tab-background-selected);\n border-top: 2px solid var(--sdds-folder-tab-border-selected);\n\n &::before {\n // This ::before element hides the border-right of the tab to the left of the selected tab\n content: ' ';\n background-color: var(--sdds-folder-tab-background);\n width: 1px;\n top: 0;\n bottom: 0;\n left: -1px;\n display: block;\n position: absolute;\n }\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-selected);\n }\n }\n\n &:not(.selected) {\n border-right-width: 1px;\n border-right-style: solid;\n border-right-color: var(--sdds-folder-tab-divider-color);\n\n &:hover {\n border-top-color: var(--sdds-folder-tab-background-hover);\n background-color: var(--sdds-folder-tab-background-hover);\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-hover);\n }\n }\n }\n\n &.disabled {\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-disabled);\n }\n\n &:focus-visible {\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-disabled);\n }\n\n outline: none;\n }\n }\n\n &:focus-visible {\n @include sdds-focus-state;\n\n opacity: var(--sdds-folder-tab-color-opacity-focus);\n }\n }\n}\n\n:host(.last) {\n button:not(.selected) {\n border-right-color: transparent;\n }\n}\n","import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-folder-tabs-button',\n styleUrl: 'sdds-folder-tabs-button.scss',\n shadow: true,\n})\nexport class SddsFolderTabsButton {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n @State() tabWidth: number;\n\n /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n @Method()\n async setTabWidth(width: number) {\n this.tabWidth = width;\n }\n\n render() {\n return (\n <Host role=\"listitem\">\n <button\n style={{ width: `${this.tabWidth}px` }}\n class={`${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}`}\n disabled={this.disabled}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-folder-tabs-link.entry.js DELETED Viewed

@@ -1,30 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
-const sddsFolderTabsLinkCss = ":host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host a{min-width:142px;display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);cursor:pointer;padding:16px;white-space:nowrap;text-decoration:none;text-align:left;outline:none;border:none;border-right:1px solid;border-right-color:transparent;color:var(--sdds-folder-tab-color);border-top:2px solid var(--sdds-folder-tab-background);background-color:var(--sdds-folder-tab-background)}:host a .label{opacity:var(--sdds-folder-tab-color-opacity)}:host a.selected{background-color:var(--sdds-folder-tab-background-selected);border-top:2px solid var(--sdds-folder-tab-border-selected)}:host a.selected::before{content:\" \";background-color:var(--sdds-folder-tab-background-selected);width:1px;top:0;bottom:0;left:-1px;display:block;position:absolute}:host a.selected .label{opacity:var(--sdds-folder-tab-color-opacity-selected)}:host a:not(.selected){border-right-color:var(--sdds-folder-tab-divider-color)}:host a:not(.selected):hover{background-color:var(--sdds-folder-tab-background-hover)}:host a:not(.selected):hover .label{opacity:var(--sdds-folder-tab-color-opacity-hover)}:host a.disabled{pointer-events:none}:host a.disabled .label{opacity:var(--sdds-folder-tab-color-opacity-disabled)}:host a.disabled:focus-visible{outline:none}:host a.disabled:focus-visible .label{opacity:var(--sdds-folder-tab-color-opacity-disabled)}:host a:focus-visible{outline:2px solid var(--sdds-blue-400);outline-offset:-2px;opacity:var(--sdds-folder-tab-color-opacity-focus)}:host(.last) a:not(.selected){border-right-color:transparent}";
-const SddsFolderTabsLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-    this.tabWidth = undefined;
-  }
-  /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */
-  async setTabWidth(width) {
-    this.tabWidth = width;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { style: { width: `${this.tabWidth}px` }, class: `
-        ${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-};
-SddsFolderTabsLink.style = sddsFolderTabsLinkCss;
-export { SddsFolderTabsLink as sdds_folder_tabs_link };
-//# sourceMappingURL=sdds-folder-tabs-link.entry.js.map

package/dist/esm/sdds-folder-tabs-link.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-folder-tabs-link.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,snDAAsnD;;MCOvoD,kBAAkB;;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;;;EAMhC,MAAM,WAAW,CAAC,KAAa;IAC7B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;GACvB;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,EACtC,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.scss?tag=sdds-folder-tabs-link&encapsulation=shadow","./src/components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n position: relative;\n z-index: z(tab);\n\n a {\n min-width: 142px;\n display: block;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n cursor: pointer;\n padding: 16px;\n white-space: nowrap;\n text-decoration: none;\n text-align: left;\n outline: none;\n border: none;\n border-right: 1px solid;\n border-right-color: transparent;\n color: var(--sdds-folder-tab-color);\n border-top: 2px solid var(--sdds-folder-tab-background);\n background-color: var(--sdds-folder-tab-background);\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity);\n }\n\n &.selected {\n background-color: var(--sdds-folder-tab-background-selected);\n border-top: 2px solid var(--sdds-folder-tab-border-selected);\n\n &::before {\n content: ' ';\n background-color: var(--sdds-folder-tab-background-selected);\n width: 1px;\n top: 0;\n bottom: 0;\n left: -1px;\n display: block;\n position: absolute;\n }\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-selected);\n }\n }\n\n &:not(.selected) {\n border-right-color: var(--sdds-folder-tab-divider-color);\n\n &:hover {\n background-color: var(--sdds-folder-tab-background-hover);\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-hover);\n }\n }\n }\n\n &.disabled {\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-disabled);\n }\n\n &:focus-visible {\n .label {\n opacity: var(--sdds-folder-tab-color-opacity-disabled);\n }\n\n outline: none;\n }\n }\n\n &:focus-visible {\n @include sdds-focus-state;\n\n opacity: var(--sdds-folder-tab-color-opacity-focus);\n }\n }\n}\n\n:host(.last) {\n a:not(.selected) {\n border-right-color: transparent;\n }\n}\n","import { Component, Host, h, Prop, State, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-folder-tabs-link',\n styleUrl: 'sdds-folder-tabs-link.scss',\n shadow: true,\n})\nexport class SddsFolderTabsLink {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n /** Href for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n @State() tabWidth: number;\n\n /** @internal Method to set the width of the tab. Used by the <sdds-folder-tabs> */\n @Method()\n async setTabWidth(width: number) {\n this.tabWidth = width;\n }\n\n render() {\n return (\n <Host role=\"listitem\">\n <a\n style={{ width: `${this.tabWidth}px` }}\n class={`\n ${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}\n `}\n href={this.href}\n target={this.target}\n rel={this.rel}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-footer-link-group.entry.js DELETED Viewed

@@ -1,32 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-fdfb114c.js';
-const sddsFooterLinkGroupCss = ".sc-sdds-footer-link-group-h{display:block;width:100%}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);opacity:var(--sdds-footer-top-title-opacity);color:var(--sdds-footer-top-links);padding-bottom:8px}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:none;border:none;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--sdds-footer-top-divider)}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group{border-bottom:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transform:rotateZ(180deg)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:hover{cursor:pointer}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:active{background-color:var(--sdds-footer-top-button-active)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transition:transform 0.2s ease-in-out}.sc-sdds-footer-link-group-h [role=list].sc-sdds-footer-link-group{list-style:none;padding:0;margin:0;display:flex;gap:8px}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{flex-direction:column}@media all and (max-width: 992px){.sc-sdds-footer-link-group-h [role=list].left.sc-sdds-footer-link-group:not(.top-part-child){flex-direction:column}.sc-sdds-footer-link-group-h [role=list].top-part-child.closed.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{gap:0}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:flex;align-items:center}}";
-const SddsFooterLinkGroup = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.rightSlot = false;
-    this.parentIsTopPart = false;
-    this.titleText = undefined;
-    this.open = false;
-  }
-  connectedCallback() {
-    this.rightSlot = this.host.parentElement.slot === 'main-right';
-    this.parentIsTopPart = this.host.parentElement.slot === 'top';
-  }
-  render() {
-    return (h(Host, null, this.titleText && this.parentIsTopPart && (h("div", { class: "footer-top-title" }, this.titleText)), this.titleText && this.parentIsTopPart && (h("button", { onClick: () => {
-        this.open = !this.open;
-      }, class: `footer-top-title-button  ${this.open ? 'expanded' : 'closed'}` }, this.titleText, h("sdds-icon", { name: "chevron_down", size: "20px" }))), h("div", { role: "list", class: `
-        ${this.rightSlot ? 'right' : 'left'}
-        ${this.parentIsTopPart ? 'top-part-child' : ''}
-        ${this.open ? 'expanded' : 'closed'}
-        ` }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
-};
-SddsFooterLinkGroup.style = sddsFooterLinkGroupCss;
-export { SddsFooterLinkGroup as sdds_footer_link_group };
-//# sourceMappingURL=sdds-footer-link-group.entry.js.map

package/dist/esm/sdds-footer-link-group.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-footer-link-group.entry.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,mlEAAmlE;;MCSrmE,mBAAmB;;;IAQ9B,cAAS,GAAY,KAAK,CAAC;IAE3B,oBAAe,GAAY,KAAK,CAAC;;gBAJR,KAAK;;EAM9B,iBAAiB;IACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,YAAY,CAAC;IAC/D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;GAC/D;EAED,MAAM;IACJ,QACE,EAAC,IAAI,QACF,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,KACrC,WAAK,KAAK,EAAC,kBAAkB,IAAE,IAAI,CAAC,SAAS,CAAO,CACrD,EAEA,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,KACrC,cACE,OAAO,EAAE;QACP,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;OACxB,EACD,KAAK,EAAE,4BAA4B,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ,EAAE,IAErE,IAAI,CAAC,SAAS,EACf,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CAChD,CACV,EACD,WACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAE;UACP,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,MAAM;UACjC,IAAI,CAAC,eAAe,GAAG,gBAAgB,GAAG,EAAE;UAC5C,IAAI,CAAC,IAAI,GAAG,UAAU,GAAG,QAAQ;SAClC,IAEC,eAAa,CACT,CACD,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.scss?tag=sdds-footer-link-group&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n .footer-top-title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n opacity: var(--sdds-footer-top-title-opacity);\n color: var(--sdds-footer-top-links);\n padding-bottom: 8px;\n }\n\n button.footer-top-title-button {\n display: none;\n border: none;\n width: 100%;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-footer-top-links);\n background-color: transparent;\n text-align: left;\n padding: 19px 24px;\n justify-content: space-between;\n border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n &.expanded {\n border-bottom: none;\n\n sdds-icon {\n transform: rotateZ(180deg);\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: var(--sdds-footer-top-button-active);\n }\n\n sdds-icon {\n transition: transform 0.2s ease-in-out;\n }\n }\n\n [role='list'] {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n gap: 8px;\n\n &.top-part-child {\n flex-direction: column;\n }\n }\n\n @media all and (max-width: 992px) {\n [role='list'].left:not(.top-part-child) {\n flex-direction: column;\n }\n\n [role='list'].top-part-child.closed {\n display: none;\n }\n\n [role='list'].top-part-child {\n gap: 0;\n }\n\n .footer-top-title {\n display: none;\n }\n\n button.footer-top-title-button {\n display: flex;\n align-items: center;\n }\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer-link-group',\n styleUrl: 'sdds-footer-link-group.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsFooterLinkGroup {\n /** Title text for the link group, only valid on top part of footer. */\n @Prop() titleText: string;\n\n @Element() host: HostElement;\n\n @State() open: boolean = false;\n\n rightSlot: boolean = false;\n\n parentIsTopPart: boolean = false;\n\n connectedCallback() {\n this.rightSlot = this.host.parentElement.slot === 'main-right';\n this.parentIsTopPart = this.host.parentElement.slot === 'top';\n }\n\n render() {\n return (\n <Host>\n {this.titleText && this.parentIsTopPart && (\n <div class=\"footer-top-title\">{this.titleText}</div>\n )}\n\n {this.titleText && this.parentIsTopPart && (\n <button\n onClick={() => {\n this.open = !this.open;\n }}\n class={`footer-top-title-button ${this.open ? 'expanded' : 'closed'}`}\n >\n {this.titleText}\n <sdds-icon name=\"chevron_down\" size=\"20px\"></sdds-icon>\n </button>\n )}\n <div\n role=\"list\"\n class={`\n ${this.rightSlot ? 'right' : 'left'}\n ${this.parentIsTopPart ? 'top-part-child' : ''}\n ${this.open ? 'expanded' : 'closed'}\n `}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-footer-link.entry.js DELETED Viewed

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, g as getElement } from './index-fdfb114c.js';
-const sddsFooterLinkCss = "[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);color:var(--sdds-footer-main-links);opacity:var(--sdds-footer-main-links-opacity);text-decoration:none}[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}[role=listitem].sc-sdds-footer-link a.sc-sdds-footer-link:hover{text-decoration:underline}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link{color:var(--sdds-footer-top-links);font-family:\"Scania Sans Semi Condensed\", \"Scania Sans Condensed\", arial, helvetica, sans-serif;font-weight:bold;font-size:14px;line-height:18px}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child.sc-sdds-footer-link{border-bottom:1px solid var(--sdds-footer-top-divider)}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link{display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:hover{text-decoration:underline;background-color:var(--sdds-footer-top-links-background-hover)}[role=listitem].top-part-child.sc-sdds-footer-link a.sc-sdds-footer-link:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}}";
-const SddsFooterLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.parentIsTopPart = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  connectedCallback() {
-    this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';
-  }
-  render() {
-    return (h("div", { role: "listitem", class: `${this.parentIsTopPart ? 'top-part-child' : ''}` }, h("a", { target: this.target, rel: this.rel, href: this.href }, h("slot", null))));
-  }
-  get host() { return getElement(this); }
-};
-SddsFooterLink.style = sddsFooterLinkCss;
-export { SddsFooterLink as sdds_footer_link };
-//# sourceMappingURL=sdds-footer-link.entry.js.map

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

@@ -1 +0,0 @@

- {"file":"sdds-footer-link.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,i5CAAi5C;;MCS95C,cAAc;;;IAYzB,oBAAe,GAAY,KAAK,CAAC;;kBAPyB,OAAO;eAG3C,UAAU;;EAMhC,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,wBAAwB,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,KAAK,CAAC;GACjG;EAED,MAAM;IACJ,QACE,WAAK,IAAI,EAAC,UAAU,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,eAAe,GAAG,gBAAgB,GAAG,EAAE,EAAE,IAC3E,SAAG,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IACpD,eAAa,CACX,CACA,EACN;GACH;;;;;;;","names":[],"sources":["./src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.scss?tag=sdds-footer-link&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link/sdds-footer-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n[role='listitem'] {\n a {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n color: var(--sdds-footer-main-links);\n opacity: var(--sdds-footer-main-links-opacity);\n text-decoration: none;\n\n &:focus {\n @include sdds-focus-state;\n }\n\n &:hover {\n text-decoration: underline;\n }\n }\n\n &.top-part-child {\n a {\n color: var(--sdds-footer-top-links);\n font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica,\n sans-serif;\n font-weight: bold;\n font-size: 14px;\n line-height: 18px;\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n }\n}\n\n@media all and (max-width: 992px) {\n [role='listitem'].top-part-child {\n border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n a {\n display: block;\n height: 100%;\n padding: 19px 40px;\n font-weight: normal;\n\n &:hover {\n text-decoration: underline;\n background-color: var(--sdds-footer-top-links-background-hover);\n }\n\n &:focus {\n @include sdds-focus-state;\n }\n }\n }\n}\n","import { Component, Element, h, Prop } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer-link',\n styleUrl: 'sdds-footer-link.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsFooterLink {\n /** URL for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** 'noopener' is a security measure for legacy browsers that prevents the opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n @Element() host: HostElement;\n\n parentIsTopPart: boolean = false;\n\n connectedCallback() {\n this.parentIsTopPart = this.host.closest('sdds-footer-link-group').parentElement.slot === 'top';\n }\n\n render() {\n return (\n <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n <a target={this.target} rel={this.rel} href={this.href}>\n <slot></slot>\n </a>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-inline-tabs-button.entry.js DELETED Viewed

@@ -1,20 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
-const sddsInlineTabsButtonCss = ":host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host button{all:unset;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-tab-color);padding:8px 4px;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0}:host button .label{margin:12px 0}:host button:hover{cursor:pointer}:host button:hover::after{width:100%}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host button.selected{color:var(--sdds-inline-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host button.disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsInlineTabsButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.disabled = false;
-    this.selected = false;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-};
-SddsInlineTabsButton.style = sddsInlineTabsButtonCss;
-export { SddsInlineTabsButton as sdds_inline_tabs_button };
-//# sourceMappingURL=sdds-inline-tabs-button.entry.js.map

package/dist/esm/sdds-inline-tabs-button.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-inline-tabs-button.entry.js","mappings":";;AAAA,MAAM,uBAAuB,GAAG,8wCAA8wC;;MCOjyC,oBAAoB;;;oBAEH,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UACzC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACC,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.scss?tag=sdds-inline-tabs-button&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n position: relative;\n z-index: z(tab);\n\n button {\n all: unset;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-inline-tabs-tab-color);\n padding: 8px 4px;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out 0s;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n\n .label {\n margin: 12px 0;\n }\n\n &:hover {\n cursor: pointer;\n\n &::after {\n width: 100%;\n }\n }\n\n &:focus-visible {\n .label {\n @include sdds-focus-state;\n }\n }\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0%;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out 0s;\n z-index: 1;\n }\n\n &.selected {\n color: var(--sdds-inline-tabs-tab-color-selected);\n\n &::after {\n width: 100%;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n }\n }\n\n &.disabled {\n color: var(--sdds-inline-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n }\n }\n }\n}\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tabs-button',\n styleUrl: 'sdds-inline-tabs-button.scss',\n shadow: true,\n})\nexport class SddsInlineTabsButton {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host role=\"listitem\">\n <button\n class={`${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}`}\n disabled={this.disabled}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-inline-tabs-link.entry.js DELETED Viewed

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
-const sddsInlineTabsLinkCss = ":host{box-sizing:border-box;display:block;position:relative;z-index:200}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-inline-tabs-tab-color);padding:8px 4px;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out 0s;white-space:nowrap;background-color:transparent;border:0}:host a .label{margin:12px 0}:host a:hover{cursor:pointer}:host a:hover::after{width:100%}:host a:focus-visible{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0%;margin-right:auto;height:2px;background-color:var(--sdds-inline-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out 0s;z-index:1}:host a.selected{color:var(--sdds-inline-tabs-tab-color-selected)}:host a.selected .label{opacity:var(--sdds-inline-tab-color-opacity-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-inline-tabs-tab-indicator-background-active)}:host a.disabled{color:var(--sdds-inline-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-inline-tabs-tab-color-opacity-disabled)}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsInlineTabsLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `
-        ${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-};
-SddsInlineTabsLink.style = sddsInlineTabsLinkCss;
-export { SddsInlineTabsLink as sdds_inline_tabs_link };
-//# sourceMappingURL=sdds-inline-tabs-link.entry.js.map

package/dist/esm/sdds-inline-tabs-link.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-inline-tabs-link.entry.js","mappings":";;AAAA,MAAM,qBAAqB,GAAG,yxCAAyxC;;MCO1yC,kBAAkB;;;oBAED,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.scss?tag=sdds-inline-tabs-link&encapsulation=shadow","./src/components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/z-index';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n display: block;\n position: relative;\n z-index: z(tab);\n\n a {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-inline-tabs-tab-color);\n padding: 8px 4px;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out 0s;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n \n .label {\n margin: 12px 0;\n }\n\n &:hover {\n cursor: pointer;\n\n &::after {\n width: 100%;\n }\n }\n\n &:focus-visible {\n @include sdds-focus-state;\n }\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0%;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out 0s;\n z-index: 1;\n }\n\n &.selected {\n color: var(--sdds-inline-tabs-tab-color-selected);\n\n .label {\n opacity: var(--sdds-inline-tab-color-opacity-selected);\n }\n\n &::after {\n width: 100%;\n background-color: var(--sdds-inline-tabs-tab-indicator-background-active);\n }\n }\n\n &.disabled {\n color: var(--sdds-inline-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-inline-tabs-tab-color-opacity-disabled);\n }\n }\n }\n}\n\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-inline-tabs-link',\n styleUrl: 'sdds-inline-tabs-link.scss',\n shadow: true,\n})\nexport class SddsInlineTabsLink {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n /** Href for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n render() {\n return (\n <Host role=\"listitem\">\n <a\n class={`\n ${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}\n `}\n href={this.href}\n target={this.target}\n rel={this.rel}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-navigation-tabs-button.entry.js DELETED Viewed

@@ -1,20 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
-const sddsNavigationTabsButtonCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host button{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host button.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host button.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host button .label{padding:8px 4px}:host button:focus-visible{outline:none}:host button:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host button:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host button:hover::after{width:100%}:host button.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host button.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host button::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsNavigationTabsButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.disabled = false;
-    this.selected = false;
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-         ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-};
-SddsNavigationTabsButton.style = sddsNavigationTabsButtonCss;
-export { SddsNavigationTabsButton as sdds_navigation_tabs_button };
-//# sourceMappingURL=sdds-navigation-tabs-button.entry.js.map

package/dist/esm/sdds-navigation-tabs-button.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-navigation-tabs-button.entry.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,+zCAA+zC;;MCOt1C,wBAAwB;;;oBAEP,KAAK;oBAGL,KAAK;;EAEjC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,cACE,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;WACxC,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,EAAE,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACC,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.scss?tag=sdds-navigation-tabs-button&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n button {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-navigation-tabs-tab-color);\n padding: 18px 0;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n\n &.selected {\n color: var(--sdds-navigation-tabs-tab-color-selected);\n\n &::after {\n width: 100%;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n }\n }\n\n .label {\n padding: 8px 4px;\n }\n\n &:focus-visible {\n outline: none;\n\n .label {\n @include sdds-focus-state;\n }\n }\n\n &:hover {\n color: var(--sdds-navigation-tabs-tab-color-hover);\n opacity: 1;\n\n &::after {\n width: 100%;\n }\n }\n\n &.disabled {\n color: var(--sdds-navigation-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n }\n }\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n}\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-navigation-tabs-button',\n styleUrl: 'sdds-navigation-tabs-button.scss',\n shadow: true,\n})\nexport class SddsNavigationTabsButton {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n render() {\n return (\n <Host role=\"listitem\">\n <button\n class={`${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}`}\n disabled={this.disabled}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/sdds-navigation-tabs-link.entry.js DELETED Viewed

@@ -1,25 +0,0 @@
-import { r as registerInstance, h, H as Host } from './index-fdfb114c.js';
-const sddsNavigationTabsLinkCss = ":host{box-sizing:border-box}:host *{box-sizing:border-box}:host a{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-navigation-tabs-tab-color);padding:18px 0;margin-right:32px;text-decoration:none;display:block;position:relative;transition:color 0.15s ease-in-out;white-space:nowrap;background-color:transparent;border:0}:host a.selected{color:var(--sdds-navigation-tabs-tab-color-selected)}:host a.selected::after{width:100%;background-color:var(--sdds-navigation-tabs-tab-indicator-background-active)}:host a .label{padding:8px 4px}:host a:focus-visible{outline:none}:host a:focus-visible .label{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host a:hover{color:var(--sdds-navigation-tabs-tab-color-hover);opacity:1}:host a:hover::after{width:100%}:host a.disabled{color:var(--sdds-navigation-tabs-tab-color-disabled);pointer-events:none}:host a.disabled .label{opacity:var(--sdds-navigation-tabs-tab-color-opacity-disabled)}:host a::after{content:\" \";position:absolute;bottom:0;right:0;left:0;margin-left:auto;width:0;margin-right:auto;height:2px;background-color:var(--sdds-navigation-tabs-tab-indicator-background-hover);transition:width 0.15s ease-in-out;z-index:1}:host(.first){margin-left:32px}:host(.last){margin-right:32px}";
-const SddsNavigationTabsLink = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.disabled = false;
-    this.selected = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.rel = 'noopener';
-  }
-  render() {
-    return (h(Host, { role: "listitem" }, h("a", { class: `
-        ${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}
-        `, href: this.href, target: this.target, rel: this.rel }, h("div", { class: "label" }, h("slot", { name: "label" })))));
-  }
-};
-SddsNavigationTabsLink.style = sddsNavigationTabsLinkCss;
-export { SddsNavigationTabsLink as sdds_navigation_tabs_link };
-//# sourceMappingURL=sdds-navigation-tabs-link.entry.js.map

package/dist/esm/sdds-navigation-tabs-link.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"file":"sdds-navigation-tabs-link.entry.js","mappings":";;AAAA,MAAM,yBAAyB,GAAG,wwCAAwwC;;MCO7xC,sBAAsB;;;oBAEL,KAAK;oBAGL,KAAK;;kBAMyB,OAAO;eAG3C,UAAU;;EAEhC,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,UAAU,IACnB,SACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;UAC/B,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE;SAChC,EACC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,IAEb,WAAK,KAAK,EAAC,OAAO,IAChB,YAAM,IAAI,EAAC,OAAO,GAAQ,CACtB,CACJ,CACC,EACP;GACH;;;;;;","names":[],"sources":["./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.scss?tag=sdds-navigation-tabs-link&encapsulation=shadow","./src/components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n@import '../../../../mixins/box-sizing';\n\n:host {\n @include sdds-box-sizing;\n\n a {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-navigation-tabs-tab-color);\n padding: 18px 0;\n margin-right: 32px;\n text-decoration: none;\n display: block;\n position: relative;\n transition: color 0.15s ease-in-out;\n white-space: nowrap;\n background-color: transparent;\n border: 0;\n\n &.selected {\n color: var(--sdds-navigation-tabs-tab-color-selected);\n\n &::after {\n width: 100%;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-active);\n }\n }\n\n .label {\n padding: 8px 4px;\n }\n\n &:focus-visible {\n outline: none;\n\n .label {\n @include sdds-focus-state;\n }\n }\n\n &:hover {\n color: var(--sdds-navigation-tabs-tab-color-hover);\n opacity: 1;\n\n &::after {\n width: 100%;\n }\n }\n\n &.disabled {\n color: var(--sdds-navigation-tabs-tab-color-disabled);\n pointer-events: none;\n\n .label {\n opacity: var(--sdds-navigation-tabs-tab-color-opacity-disabled);\n }\n }\n\n &::after {\n content: ' ';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n margin-left: auto;\n width: 0;\n margin-right: auto;\n height: 2px;\n background-color: var(--sdds-navigation-tabs-tab-indicator-background-hover);\n transition: width 0.15s ease-in-out;\n z-index: 1;\n }\n }\n}\n\n:host(.first) {\n margin-left: 32px;\n}\n\n:host(.last) {\n margin-right: 32px;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'sdds-navigation-tabs-link',\n styleUrl: 'sdds-navigation-tabs-link.scss',\n shadow: true,\n})\nexport class SddsNavigationTabsLink {\n /** Disables the tab. */\n @Prop() disabled: boolean = false;\n\n /** Marks the tab as the selected one. */\n @Prop() selected: boolean = false;\n\n /** Href for the link */\n @Prop() href: string;\n\n /** Where to open the linked URL */\n @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n @Prop() rel: string = 'noopener';\n\n render() {\n return (\n <Host role=\"listitem\">\n <a\n class={`\n ${this.selected ? 'selected' : ''}\n ${this.disabled ? 'disabled' : ''}\n `}\n href={this.href}\n target={this.target}\n rel={this.rel}\n >\n <div class=\"label\">\n <slot name=\"label\"></slot>\n </div>\n </a>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/tegel/p-12f566b7.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as o,h as t,H as s,g as r}from"./p-387e1798.js";const e=".sc-sdds-footer-link-group-h{display:block;width:100%}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);opacity:var(--sdds-footer-top-title-opacity);color:var(--sdds-footer-top-links);padding-bottom:8px}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:none;border:none;width:100%;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-footer-top-links);background-color:transparent;text-align:left;padding:19px 24px;justify-content:space-between;border-bottom:1px solid var(--sdds-footer-top-divider)}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group{border-bottom:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.expanded.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transform:rotateZ(180deg)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:hover{cursor:pointer}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group:active{background-color:var(--sdds-footer-top-button-active)}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group sdds-icon.sc-sdds-footer-link-group{transition:transform 0.2s ease-in-out}.sc-sdds-footer-link-group-h [role=list].sc-sdds-footer-link-group{list-style:none;padding:0;margin:0;display:flex;gap:8px}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{flex-direction:column}@media all and (max-width: 992px){.sc-sdds-footer-link-group-h [role=list].left.sc-sdds-footer-link-group:not(.top-part-child){flex-direction:column}.sc-sdds-footer-link-group-h [role=list].top-part-child.closed.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h [role=list].top-part-child.sc-sdds-footer-link-group{gap:0}.sc-sdds-footer-link-group-h .footer-top-title.sc-sdds-footer-link-group{display:none}.sc-sdds-footer-link-group-h button.footer-top-title-button.sc-sdds-footer-link-group{display:flex;align-items:center}}";const d=class{constructor(t){o(this,t);this.rightSlot=false;this.parentIsTopPart=false;this.titleText=undefined;this.open=false}connectedCallback(){this.rightSlot=this.host.parentElement.slot==="main-right";this.parentIsTopPart=this.host.parentElement.slot==="top"}render(){return t(s,null,this.titleText&&this.parentIsTopPart&&t("div",{class:"footer-top-title"},this.titleText),this.titleText&&this.parentIsTopPart&&t("button",{onClick:()=>{this.open=!this.open},class:`footer-top-title-button ${this.open?"expanded":"closed"}`},this.titleText,t("sdds-icon",{name:"chevron_down",size:"20px"})),t("div",{role:"list",class:`\n ${this.rightSlot?"right":"left"}\n ${this.parentIsTopPart?"top-part-child":""}\n ${this.open?"expanded":"closed"}\n `},t("slot",null)))}get host(){return r(this)}};d.style=e;export{d as sdds_footer_link_group};
2	- //# sourceMappingURL=p-12f566b7.entry.js.map

package/dist/tegel/p-12f566b7.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sddsFooterLinkGroupCss","SddsFooterLinkGroup","this","rightSlot","parentIsTopPart","connectedCallback","host","parentElement","slot","render","h","Host","titleText","class","onClick","open","name","size","role"],"sources":["./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.scss?tag=sdds-footer-link-group&encapsulation=scoped","./src/components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n .footer-top-title {\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n opacity: var(--sdds-footer-top-title-opacity);\n color: var(--sdds-footer-top-links);\n padding-bottom: 8px;\n }\n\n button.footer-top-title-button {\n display: none;\n border: none;\n width: 100%;\n font: var(--sdds-headline-07);\n letter-spacing: var(--sdds-headline-07-ls);\n color: var(--sdds-footer-top-links);\n background-color: transparent;\n text-align: left;\n padding: 19px 24px;\n justify-content: space-between;\n border-bottom: 1px solid var(--sdds-footer-top-divider);\n\n &.expanded {\n border-bottom: none;\n\n sdds-icon {\n transform: rotateZ(180deg);\n }\n }\n\n &:hover {\n cursor: pointer;\n }\n\n &:active {\n background-color: var(--sdds-footer-top-button-active);\n }\n\n sdds-icon {\n transition: transform 0.2s ease-in-out;\n }\n }\n\n [role='list'] {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n gap: 8px;\n\n &.top-part-child {\n flex-direction: column;\n }\n }\n\n @media all and (max-width: 992px) {\n [role='list'].left:not(.top-part-child) {\n flex-direction: column;\n }\n\n [role='list'].top-part-child.closed {\n display: none;\n }\n\n [role='list'].top-part-child {\n gap: 0;\n }\n\n .footer-top-title {\n display: none;\n }\n\n button.footer-top-title-button {\n display: flex;\n align-items: center;\n }\n }\n}\n","import { Component, Host, h, Prop, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n tag: 'sdds-footer-link-group',\n styleUrl: 'sdds-footer-link-group.scss',\n shadow: false,\n scoped: true,\n})\nexport class SddsFooterLinkGroup {\n /** Title text for the link group, only valid on top part of footer. */\n @Prop() titleText: string;\n\n @Element() host: HostElement;\n\n @State() open: boolean = false;\n\n rightSlot: boolean = false;\n\n parentIsTopPart: boolean = false;\n\n connectedCallback() {\n this.rightSlot = this.host.parentElement.slot === 'main-right';\n this.parentIsTopPart = this.host.parentElement.slot === 'top';\n }\n\n render() {\n return (\n <Host>\n {this.titleText && this.parentIsTopPart && (\n <div class=\"footer-top-title\">{this.titleText}</div>\n )}\n\n {this.titleText && this.parentIsTopPart && (\n <button\n onClick={() => {\n this.open = !this.open;\n }}\n class={`footer-top-title-button ${this.open ? 'expanded' : 'closed'}`}\n >\n {this.titleText}\n <sdds-icon name=\"chevron_down\" size=\"20px\"></sdds-icon>\n </button>\n )}\n <div\n role=\"list\"\n class={`\n ${this.rightSlot ? 'right' : 'left'}\n ${this.parentIsTopPart ? 'top-part-child' : ''}\n ${this.open ? 'expanded' : 'closed'}\n `}\n >\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAyB,olE,MCSlBC,EAAmB,M,yBAQ9BC,KAAAC,UAAqB,MAErBD,KAAAE,gBAA2B,M,mCAJF,K,CAMzBC,oBACEH,KAAKC,UAAYD,KAAKI,KAAKC,cAAcC,OAAS,aAClDN,KAAKE,gBAAkBF,KAAKI,KAAKC,cAAcC,OAAS,K,CAG1DC,SACE,OACEC,EAACC,EAAI,KACFT,KAAKU,WAAaV,KAAKE,iBACtBM,EAAA,OAAKG,MAAM,oBAAoBX,KAAKU,WAGrCV,KAAKU,WAAaV,KAAKE,iBACtBM,EAAA,UACEI,QAAS,KACPZ,KAAKa,MAAQb,KAAKa,IAAI,EAExBF,MAAO,4BAA4BX,KAAKa,KAAO,WAAa,YAE3Db,KAAKU,UACNF,EAAA,aAAWM,KAAK,eAAeC,KAAK,UAGxCP,EAAA,OACEQ,KAAK,OACLL,MAAO,aACPX,KAAKC,UAAY,QAAU,mBAC3BD,KAAKE,gBAAkB,iBAAmB,eAC1CF,KAAKa,KAAO,WAAa,sBAGzBL,EAAA,c"}

package/dist/tegel/p-15c44320.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,c as s,h as a,H as t,g as i}from"./p-387e1798.js";const r=".card{box-shadow:var(--sdds-card-box);background-color:var(--sdds-card-background);display:block;border-radius:4px;max-width:368px;overflow:hidden;width:100%}.card.clickable:hover{box-shadow:var(--sdds-card-box-hover);cursor:pointer}.card .card-top{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls);padding:16px;display:flex;align-items:center}.card .card-top img.card-top-image{width:36px;height:36px;border-radius:100%}.card .card-top .card-top-header{padding-left:16px;display:flex;flex-direction:column;row-gap:4px}.card .card-top .card-top-header.no-header-img{padding-left:0}.card .card-top .card-top-header.single-line-header{row-gap:0}.card .card-top.below{padding-top:16px}.card .card-header{color:var(--sdds-card-headline)}.card .card-subheader{color:var(--sdds-card-sub-headline)}.card .card-body-img{width:100%}.card .sdds-divider{margin:16px 16px 0;background-color:var(--sdds-card-divider);height:1px}.card slot[name=card-body]::slotted(){font:var(--sdds-detail-03);letter-spacing:var(--sdds-detail-03-ls);color:var(--sdds-card-body-color);padding:0 16px;margin-bottom:16px;margin-top:16px}.card slot[name=card-bottom]::slotted(){display:flex;padding:16px}button{border:none;text-align:left;padding:0}button:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}button:active{box-shadow:var(--sdds-card-box-pressed)}";const e=class{constructor(t){d(this,t);this.sddsClick=s(this,"sddsClick",7);this.handleClick=()=>{this.sddsClick.emit({cardId:this.cardId})};this.getCardContent=()=>a("div",null,this.headerPlacement==="above"&&a("div",{class:`card-top ${this.headerPlacement}`},this.headerImg&&a("img",{class:`card-top-image`,src:this.headerImg,alt:this.headerImgAlt})," ",a("div",{class:`\n card-top-header\n ${!this.headerImg?"no-header-img":""}\n ${!this.header\|\|!this.subheader?"single-line-header":""}\n `},a("span",{class:`card-header`},this.header),a("span",{class:`card-subheader`},this.subheader))),a("div",{class:`card-body`},this.bodyImg&&a("img",{class:`card-body-img`,src:this.bodyImg,alt:this.bodyImgAlt}),this.headerPlacement==="below"&&(this.headerImg\|\|this.header\|\|this.subheader)&&a("div",{class:`card-top ${this.headerPlacement}`},this.headerImg&&a("img",{class:`card-top-image`,src:this.headerImg,alt:this.headerImgAlt}),a("div",{class:`\n card-top-header\n ${!this.headerImg?"no-header-img":""}\n ${!this.header\|\|!this.subheader?"single-line-header":""}\n `},a("span",{class:`card-header`},this.header),a("span",{class:`card-subheader`},this.subheader))),this.bodyDivider&&a("div",{class:`sdds-divider`}),a("slot",{name:"card-body"})),a("div",{class:`card-bottom`},this.hasCardBottomSlot&&a("slot",{name:`card-bottom`})));this.modeVariant=null;this.headerPlacement="above";this.header=undefined;this.subheader=undefined;this.headerImg=undefined;this.headerImgAlt=undefined;this.bodyImg=undefined;this.bodyImgAlt=undefined;this.bodyDivider=false;this.clickable=false;this.cardId=crypto.randomUUID();this.hasCardBottomSlot=false;this.hasCardBodySlot=false}connectedCallback(){this.hasCardBottomSlot=!!this.hostElement.querySelector('[slot="card-bottom"]');this.hasCardBodySlot=!!this.hostElement.querySelector('[slot="card-body"]')}render(){return a(t,{class:this.modeVariant&&`sdds-mode-variant-${this.modeVariant}`},this.clickable?a("button",{class:`card ${this.clickable?"clickable":""} ${this.headerPlacement}`,onClick:()=>{if(this.clickable){this.handleClick()}}},this.getCardContent()):a("div",{class:`card ${this.clickable?"clickable":""} ${this.headerPlacement}`},this.getCardContent()))}get hostElement(){return i(this)}};e.style=r;export{e as sdds_card};
2	- //# sourceMappingURL=p-15c44320.entry.js.map

package/dist/tegel/p-15c44320.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sddsCardCss","SddsCard","this","handleClick","sddsClick","emit","cardId","getCardContent","h","headerPlacement","class","headerImg","src","alt","headerImgAlt","header","subheader","bodyImg","bodyImgAlt","bodyDivider","name","hasCardBottomSlot","crypto","randomUUID","connectedCallback","hostElement","querySelector","hasCardBodySlot","render","Host","modeVariant","clickable","onClick"],"sources":["./src/components/card/sdds-card.scss?tag=sdds-card&encapsulation=shadow","./src/components/card/sdds-card.tsx"],"sourcesContent":[".card {\n box-shadow: var(--sdds-card-box);\n background-color: var(--sdds-card-background);\n display: block;\n border-radius: 4px;\n max-width: 368px;\n overflow: hidden;\n width: 100%;\n\n &.clickable {\n &:hover {\n box-shadow: var(--sdds-card-box-hover);\n cursor: pointer;\n }\n }\n\n .card-top {\n font: var(--sdds-headline-06);\n letter-spacing: var(--sdds-headline-06-ls);\n padding: 16px;\n display: flex;\n align-items: center;\n\n img.card-top-image {\n width: 36px;\n height: 36px;\n border-radius: 100%;\n }\n\n .card-top-header {\n padding-left: 16px;\n display: flex;\n flex-direction: column;\n row-gap: 4px;\n\n &.no-header-img {\n padding-left: 0;\n }\n\n &.single-line-header {\n row-gap: 0;\n }\n }\n\n &.below {\n padding-top: 16px;\n }\n }\n\n .card-header {\n color: var(--sdds-card-headline);\n }\n\n .card-subheader {\n color: var(--sdds-card-sub-headline);\n }\n\n .card-body-img {\n width: 100%;\n }\n\n .sdds-divider {\n margin: 16px 16px 0;\n background-color: var(--sdds-card-divider);\n height: 1px;\n }\n\n slot[name='card-body']::slotted(*) {\n font: var(--sdds-detail-03);\n letter-spacing: var(--sdds-detail-03-ls);\n color: var(--sdds-card-body-color);\n padding: 0 16px;\n margin-bottom: 16px;\n margin-top: 16px;\n }\n\n slot[name='card-bottom']::slotted(*) {\n display: flex;\n padding: 16px;\n }\n}\n\nbutton {\n border: none;\n text-align: left;\n padding: 0;\n\n &:focus {\n outline: 2px solid var(--sdds-blue-400);\n outline-offset: -2px;\n }\n\n &:active {\n box-shadow: var(--sdds-card-box-pressed);\n }\n}\n","import { Component, h, Prop, Event, EventEmitter, Element, State, Host } from '@stencil/core';\n\n@Component({\n tag: 'sdds-card',\n styleUrl: 'sdds-card.scss',\n shadow: true,\n})\nexport class SddsCard {\n /** Variant of the card based on the theme used. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** Placement of the header */\n @Prop() headerPlacement: 'above' | 'below' = 'above';\n\n /** Text in the header */\n @Prop() header: string;\n\n /** Subheader text in the header */\n @Prop() subheader: string;\n\n /** Header image src */\n @Prop() headerImg: string;\n\n /** Alt text for the header image */\n @Prop() headerImgAlt: string;\n\n /** Body image src */\n @Prop() bodyImg: string;\n\n /** Alt text for the body image */\n @Prop() bodyImgAlt: string;\n\n /** Divider for the body */\n @Prop() bodyDivider: boolean = false;\n\n /** Makes the card clickable. */\n @Prop() clickable: boolean = false;\n\n /** ID for the card, must be unique.\n *\n * **NOTE**: If you're listening for card events you need to set this ID yourself to identify the card, as the default ID is random and will be different every time.\n */\n @Prop() cardId: string = crypto.randomUUID();\n\n /** Sends unique card identifier when the card is clicked, if clickable=true */\n @Event({\n eventName: 'sddsClick',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsClick: EventEmitter<{\n cardId: string;\n }>;\n\n @Element() hostElement: HTMLSddsCardElement;\n\n @State() hasCardBottomSlot: boolean = false;\n\n @State() hasCardBodySlot: boolean = false;\n\n connectedCallback() {\n this.hasCardBottomSlot = !!this.hostElement.querySelector('[slot=\"card-bottom\"]');\n this.hasCardBodySlot = !!this.hostElement.querySelector('[slot=\"card-body\"]');\n }\n\n handleClick = () => {\n this.sddsClick.emit({\n cardId: this.cardId,\n });\n };\n\n getCardContent = () => (\n <div>\n {this.headerPlacement === 'above' && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}{' '}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header || !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n <div class={`card-body`}>\n {this.bodyImg && <img class={`card-body-img`} src={this.bodyImg} alt={this.bodyImgAlt} />}\n {this.headerPlacement === 'below' && (this.headerImg || this.header || this.subheader) && (\n <div class={`card-top ${this.headerPlacement}`}>\n {this.headerImg && (\n <img class={`card-top-image`} src={this.headerImg} alt={this.headerImgAlt} />\n )}\n <div\n class={`\n card-top-header\n ${!this.headerImg ? 'no-header-img' : ''}\n ${!this.header || !this.subheader ? 'single-line-header' : ''}\n `}\n >\n <span class={`card-header`}>{this.header}</span>\n <span class={`card-subheader`}>{this.subheader}</span>\n </div>\n </div>\n )}\n {this.bodyDivider && <div class={`sdds-divider`}></div>}\n <slot name=\"card-body\"></slot>\n </div>\n <div class={`card-bottom`}>\n {this.hasCardBottomSlot && <slot name={`card-bottom`}></slot>}\n </div>\n </div>\n );\n\n render() {\n return (\n <Host class={this.modeVariant && `sdds-mode-variant-${this.modeVariant}`}>\n {this.clickable ? (\n <button\n class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}\n onClick={() => {\n if (this.clickable) {\n this.handleClick();\n }\n }}\n >\n {this.getCardContent()}\n </button>\n ) : (\n <div class={`card ${this.clickable ? 'clickable' : ''} ${this.headerPlacement}`}>\n {this.getCardContent()}\n </div>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAc,u1C,MCOPC,EAAQ,M,8DA2DnBC,KAAAC,YAAc,KACZD,KAAKE,UAAUC,KAAK,CAClBC,OAAQJ,KAAKI,QACb,EAGJJ,KAAAK,eAAiB,IACfC,EAAA,WACGN,KAAKO,kBAAoB,SACxBD,EAAA,OAAKE,MAAO,YAAYR,KAAKO,mBAC1BP,KAAKS,WACJH,EAAA,OAAKE,MAAO,iBAAkBE,IAAKV,KAAKS,UAAWE,IAAKX,KAAKY,eAC5D,IACHN,EAAA,OACEE,MAAO,2CAENR,KAAKS,UAAY,gBAAkB,kBACnCT,KAAKa,SAAWb,KAAKc,UAAY,qBAAuB,kBAGzDR,EAAA,QAAME,MAAO,eAAgBR,KAAKa,QAClCP,EAAA,QAAME,MAAO,kBAAmBR,KAAKc,aAI3CR,EAAA,OAAKE,MAAO,aACTR,KAAKe,SAAWT,EAAA,OAAKE,MAAO,gBAAiBE,IAAKV,KAAKe,QAASJ,IAAKX,KAAKgB,aAC1EhB,KAAKO,kBAAoB,UAAYP,KAAKS,WAAaT,KAAKa,QAAUb,KAAKc,YAC1ER,EAAA,OAAKE,MAAO,YAAYR,KAAKO,mBAC1BP,KAAKS,WACJH,EAAA,OAAKE,MAAO,iBAAkBE,IAAKV,KAAKS,UAAWE,IAAKX,KAAKY,eAE/DN,EAAA,OACEE,MAAO,+CAENR,KAAKS,UAAY,gBAAkB,oBACnCT,KAAKa,SAAWb,KAAKc,UAAY,qBAAuB,oBAGzDR,EAAA,QAAME,MAAO,eAAgBR,KAAKa,QAClCP,EAAA,QAAME,MAAO,kBAAmBR,KAAKc,aAI1Cd,KAAKiB,aAAeX,EAAA,OAAKE,MAAO,iBACjCF,EAAA,QAAMY,KAAK,eAEbZ,EAAA,OAAKE,MAAO,eACTR,KAAKmB,mBAAqBb,EAAA,QAAMY,KAAM,kB,iBAzGE,K,qBAGF,Q,sKAqBd,M,eAGF,M,YAMJE,OAAOC,a,uBAeM,M,qBAEF,K,CAEpCC,oBACEtB,KAAKmB,oBAAsBnB,KAAKuB,YAAYC,cAAc,wBAC1DxB,KAAKyB,kBAAoBzB,KAAKuB,YAAYC,cAAc,qB,CAwD1DE,SACE,OACEpB,EAACqB,EAAI,CAACnB,MAAOR,KAAK4B,aAAe,qBAAqB5B,KAAK4B,eACxD5B,KAAK6B,UACJvB,EAAA,UACEE,MAAO,QAAQR,KAAK6B,UAAY,YAAc,MAAM7B,KAAKO,kBACzDuB,QAAS,KACP,GAAI9B,KAAK6B,UAAW,CAClB7B,KAAKC,a,IAIRD,KAAKK,kBAGRC,EAAA,OAAKE,MAAO,QAAQR,KAAK6B,UAAY,YAAc,MAAM7B,KAAKO,mBAC3DP,KAAKK,kB"}

package/dist/tegel/p-1a7f94d3.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as d,c as e,h as t}from"./p-387e1798.js";const s='.sdds-datetime-input[type=datetime-local]~.icon-time,.sdds-datetime-input-md[type=datetime-local]~.icon-time,.sdds-datetime-input-sm[type=datetime-local]~.icon-time{display:none}.sdds-datetime-input[type=date]~.icon-time,.sdds-datetime-input-md[type=date]~.icon-time,.sdds-datetime-input-sm[type=date]~.icon-time{display:none}.sdds-datetime-input[type=time]~.icon-datetime-local,.sdds-datetime-input-md[type=time]~.icon-datetime-local,.sdds-datetime-input-sm[type=time]~.icon-datetime-local{display:none}.sdds-datetime-input{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.sdds-datetime-input {box-sizing:border-box}.sdds-datetime-input::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-input-md{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-datetime-input-md {box-sizing:border-box}.sdds-datetime-input-md::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-md:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input-md:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input-md:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input-md:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-input-sm{box-sizing:border-box;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-datetime-color);background-color:var(--sdds-datetime-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.sdds-datetime-input-sm *{box-sizing:border-box}.sdds-datetime-input-sm::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-sm:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input-sm:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input-sm:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input-sm:disabled~.sdds-datetime-label-inside{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-container{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-datetime-background);border-bottom:1px solid var(--sdds-datetime-border-bottom);transition:border-bottom-color 200ms ease}.sdds-datetime-container:hover{border-bottom-color:var(--sdds-datetime-border-bottom-hover)}.sdds-form-datetime-md .sdds-datetime-container{height:48px}.sdds-form-datetime-sm .sdds-datetime-container{height:40px}.sdds-datetime-input-container{position:relative;width:100%}.sdds-datetime-input-container .datetime-icon{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none}.sdds-datetime-input-container .datetime-icon path{fill:var(--sdds-datetime-icon)}.sdds-datetime-label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-datetime-label-color)}.sdds-datetime-label-inside{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-datetime-label-inside-color);left:16px}.sdds-form-datetime{display:block;min-width:208px}.sdds-form-datetime-nomin{min-width:auto}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input~.sdds-datetime-label-inside{top:20px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md~.sdds-datetime-label-inside{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-md:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm~.sdds-datetime-label-inside{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm ::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside .sdds-datetime-input-sm:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-sm~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-sm~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input-md~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input-md~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-focus .sdds-datetime-input~.sdds-datetime-label-inside,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data .sdds-datetime-input~.sdds-datetime-label-inside{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-datetime-bar{position:absolute;width:100%}.sdds-datetime-bar::before,.sdds-datetime-bar::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-datetime-bar);transition:0.35s ease all}.sdds-form-datetime-md .sdds-datetime-bar::before,.sdds-form-datetime-md .sdds-datetime-bar::after{top:46px}.sdds-form-datetime-sm .sdds-datetime-bar::before,.sdds-form-datetime-sm .sdds-datetime-bar::after{top:40px}.sdds-datetime-bar::before{left:50%}.sdds-datetime-bar::after{right:50%}.sdds-datetime-focus .sdds-datetime-bar::before,.sdds-datetime-focus .sdds-datetime-bar::after{width:50%}.sdds-datetime-helper{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-datetime-helper)}.sdds-datetime-helper .sdds-helper{display:inline-flex;gap:8px}.sdds-form-datetime-disabled .sdds-datetime-container{border-bottom-color:transparent}.sdds-form-datetime-disabled .datetime-icon svg path{fill:var(--sdds-datetime-icon-disabled)}.sdds-form-datetime-disabled .sdds-datetime-label{color:var(--sdds-datetime-label-disabled);cursor:not-allowed}.sdds-form-datetime-success .sdds-datetime-container{border-bottom-color:var(--sdds-datetime-border-bottom-success);color:var(--sdds-datetime-color-success)}.sdds-form-datetime-success .sdds-datetime-bar::before,.sdds-form-datetime-success .sdds-datetime-bar::after{background:var(--sdds-datetime-bar-sucess)}.sdds-form-datetime-error .sdds-datetime-helper{color:var(--sdds-datetime-helper-error)}.sdds-form-datetime-error .sdds-datetime-container{border-bottom-color:var(--sdds-datetime-border-bottom-error)}.sdds-form-datetime-error .sdds-datetime-bar::before,.sdds-form-datetime-error .sdds-datetime-bar::after{background:var(--sdds-datetime-bar-error)}.sdds-form-datetime-error .datetime-icon path{fill:var(--sdds-datetime-icon-error)}.sdds-datetime-textcounter{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter);float:right}.sdds-datetime-textcounter .sdds-datetime-textcounter-divider{letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter-divider)}input[type=datetime-local]::-webkit-inner-spin-button,input[type=datetime-local]::-webkit-calendar-picker-indicator{opacity:0}input[type=date]::-webkit-inner-spin-button,input[type=date]::-webkit-calendar-picker-indicator{opacity:0}input[type=time]::-webkit-inner-spin-button,input[type=time]::-webkit-calendar-picker-indicator{opacity:0}.sdds-mode-variant-primary{--sdds-datetime-background:var(--sdds-datetime-background-primary)}.sdds-mode-variant-secondary{--sdds-datetime-background:var(--sdds-datetime-background-secondary)}';const i=class{constructor(t){d(this,t);this.sddsChange=e(this,"sddsChange",7);this.sddsBlur=e(this,"sddsBlur",6);this.sddsFocus=e(this,"sddsFocus",6);this.getDefaultValue=()=>{const d={year:this.defaultValue.slice(0,4),month:this.defaultValue.slice(5,7),day:this.defaultValue.slice(8,10),hours:this.defaultValue.slice(11,13),minutes:this.defaultValue.slice(14,16)};switch(this.type){case"datetime-local":return`${d.year}-${d.month}-${d.day}T${d.hours}:${d.minutes}`;case"date":return`${d.year}-${d.month}-${d.day}`;case"time":return`${this.defaultValue.slice(0,2)}:${this.defaultValue.slice(3,5)}`;default:throw new Error("Invalid type.")}};this.type="datetime-local";this.value="";this.defaultValue="none";this.disabled=false;this.size="lg";this.noMinWidth=false;this.modeVariant=null;this.name="";this.state=undefined;this.autofocus=false;this.label="";this.helper="";this.focusInput=undefined}componentWillLoad(){if(this.defaultValue!=="none"){this.value=this.getDefaultValue()}}handleFocusIn(){this.focusInput=true}handleFocusOut(){this.focusInput=false}handleInput(d){this.value=d.target.value;this.sddsChange.emit(d)}handleChange(d){this.sddsChange.emit(d)}handleFocusClick(d){this.textInput.focus();this.sddsFocus.emit(d)}handleBlur(d){this.textInput.blur();this.sddsBlur.emit(d)}render(){let d=" sdds-datetime-input";if(this.size==="md"){d+=`${d}-md`}if(this.size==="sm"){d+=`${d}-sm`}return t("div",{class:`\n ${this.noMinWidth?"sdds-form-datetime-nomin":""}\n ${this.focusInput?"sdds-form-datetime sdds-datetime-focus":" sdds-form-datetime"}\n ${this.value.length>0?"sdds-datetime-data":""}\n ${this.disabled?"sdds-form-datetime-disabled":""}\n ${this.size==="md"?"sdds-form-datetime-md":""}\n ${this.size==="sm"?"sdds-form-datetime-sm":""}\n ${this.state==="error"\|\|this.state==="success"?`sdds-form-datetime-${this.state}`:""}\n ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n `},this.label&&t("label",{htmlFor:this.name,class:"sdds-datetime-label"},this.label),t("div",{onClick:d=>this.handleFocusClick(d),class:"sdds-datetime-container sdds-datetime-container"},t("div",{class:"sdds-datetime-input-container"},t("input",{ref:d=>this.textInput=d,class:d,type:this.type,disabled:this.disabled,value:this.value,autofocus:this.autofocus,name:this.name,onInput:d=>this.handleInput(d),onBlur:d=>this.handleBlur(d),onChange:d=>this.handleChange(d)}),t("div",{class:"datetime-icon icon-datetime-local"},t("svg",{fill:"none",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z",fill:"currentColor"}))),t("div",{class:"datetime-icon icon-time"},t("svg",{fill:"none",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 32 32"},t("path",{d:"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z",fill:"currentColor"}),t("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z",fill:"currentColor"})))),t("div",{class:"sdds-datetime-bar"})),t("div",{class:"sdds-datetime-helper"},this.helper&&t("div",{class:"sdds-helper"},this.state==="error"&&t("sdds-icon",{name:"error",size:"16px"}),this.helper)))}};i.style=s;export{i as sdds_datetime};
2	- //# sourceMappingURL=p-1a7f94d3.entry.js.map

package/dist/tegel/p-1a7f94d3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["datetimeCss","Datetime","this","getDefaultValue","dateTimeObj","year","defaultValue","slice","month","day","hours","minutes","type","Error","componentWillLoad","value","handleFocusIn","focusInput","handleFocusOut","handleInput","e","target","sddsChange","emit","handleChange","handleFocusClick","textInput","focus","sddsFocus","handleBlur","blur","sddsBlur","render","className","size","h","class","noMinWidth","length","disabled","state","modeVariant","label","htmlFor","name","onClick","ref","inputEl","autofocus","onInput","onBlur","onChange","fill","xmlns","viewBox","d","helper"],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=shadow","./src/components/datetime/datetime.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@mixin datetime-base {\n @include sdds-box-sizing;\n\n border-radius: 4px 4px 0 0;\n width: 100%;\n box-sizing: border-box;\n margin: 0;\n border: none;\n outline: none;\n height: 100%;\n color: var(--sdds-datetime-color);\n background-color: var(--sdds-datetime-background);\n\n &::placeholder {\n opacity: 1;\n color: var(--sdds-datetime-placeholder);\n }\n\n &:focus::placeholder {\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n\n &:disabled {\n background-color: var(--sdds-datetime-background-disabled);\n color: var(--sdds-datetime-color-disabled);\n cursor: not-allowed;\n\n &::placeholder {\n color: var(--sdds-datetime-placeholder-disabled);\n }\n\n ~ .sdds-datetime-label-inside {\n color: var(--sdds-datetime-label-disabled);\n }\n }\n}\n\n// icons\n\n.sdds-datetime-input,\n.sdds-datetime-input-md,\n.sdds-datetime-input-sm {\n &[type='datetime-local'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='date'] {\n ~ .icon-time {\n display: none;\n }\n }\n\n &[type='time'] {\n ~ .icon-datetime-local {\n display: none;\n }\n }\n}\n\n//Sizes\n.sdds-datetime-input {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-md {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n.sdds-datetime-input-sm {\n @include datetime-base;\n\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n padding: var(--sdds-spacing-element-16);\n}\n\n//Container for input field and prefix/suffix\n.sdds-datetime-container {\n border-radius: 4px 4px 0 0;\n display: flex;\n position: relative;\n height: 56px;\n box-sizing: border-box;\n background-color: var(--sdds-datetime-background);\n border-bottom: 1px solid var(--sdds-datetime-border-bottom);\n transition: border-bottom-color 200ms ease;\n\n &:hover {\n border-bottom-color: var(--sdds-datetime-border-bottom-hover);\n }\n\n .sdds-form-datetime-md & {\n height: 48px;\n }\n\n .sdds-form-datetime-sm & {\n height: 40px;\n }\n}\n\n.sdds-datetime-input-container {\n position: relative;\n width: 100%;\n\n .datetime-icon {\n height: 20px;\n width: 20px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n right: 18px;\n pointer-events: none;\n\n path {\n fill: var(--sdds-datetime-icon);\n }\n }\n}\n\n.sdds-datetime-label {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n margin-bottom: var(--sdds-spacing-element-8);\n color: var(--sdds-datetime-label-color);\n}\n\n.sdds-datetime-label-inside {\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n position: absolute;\n pointer-events: none;\n color: var(--sdds-datetime-label-inside-color);\n left: 16px;\n}\n\n@mixin placeholder-label {\n &::placeholder {\n color: transparent;\n }\n\n &::input-placeholder {\n color: transparent;\n }\n\n &:placeholder {\n color: transparent;\n }\n\n ::placeholder {\n color: transparent;\n }\n\n //Input field in focus\n &:focus::placeholder {\n transition: color 0.35s ease;\n color: var(--sdds-datetime-placeholder-color-focus);\n }\n}\n\n@mixin label-inside-transition {\n transition: 0.1s ease all;\n}\n\n//Form control\n.sdds-form-datetime {\n display: block;\n min-width: 208px;\n\n &-nomin {\n min-width: auto;\n }\n}\n\n//datetime container with label inside\n//Handling position, focus and transition for label inside\n.sdds-form-datetime.sdds-datetime-container-label-inside {\n .sdds-datetime-input {\n padding-top: var(--sdds-spacing-element-24);\n padding-bottom: 15px;\n\n ~ .sdds-datetime-label-inside {\n top: 20px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-md {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n .sdds-datetime-input-sm {\n padding-top: var(--sdds-spacing-element-20);\n padding-bottom: 11px;\n\n ~ .sdds-datetime-label-inside {\n top: 16px;\n }\n\n @include placeholder-label;\n }\n\n &.sdds-datetime-focus,\n &.sdds-datetime-data {\n .sdds-datetime-input-sm ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input-md ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 8px;\n }\n\n .sdds-datetime-input ~ .sdds-datetime-label-inside {\n font: var(--sdds-detail-07);\n letter-spacing: var(--sdds-detail-07-ls);\n @include label-inside-transition;\n\n top: 12px;\n }\n }\n}\n\n//datetime bottom bar when in focus\n.sdds-datetime-bar {\n position: absolute;\n width: 100%;\n\n &::before,\n &::after {\n content: '';\n height: 2px;\n top: 54px;\n width: 0;\n position: absolute;\n background: var(--sdds-datetime-bar);\n transition: 0.35s ease all;\n\n .sdds-form-datetime-md & {\n top: 46px;\n }\n\n .sdds-form-datetime-sm & {\n top: 40px;\n }\n }\n\n &::before {\n left: 50%;\n }\n\n &::after {\n right: 50%;\n }\n\n .sdds-datetime-focus &::before,\n .sdds-datetime-focus &::after {\n width: 50%;\n }\n}\n\n//Helper text\n.sdds-datetime-helper {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n display: block;\n flex-basis: 100%;\n padding-top: var(--sdds-spacing-element-4);\n color: var(--sdds-datetime-helper);\n\n .sdds-helper {\n display: inline-flex;\n gap: 8px;\n }\n}\n\n//Disabled state\n.sdds-form-datetime-disabled {\n .sdds-datetime-container {\n border-bottom-color: transparent;\n }\n\n .datetime-icon {\n svg {\n path {\n fill: var(--sdds-datetime-icon-disabled);\n }\n }\n }\n\n .sdds-datetime-label {\n color: var(--sdds-datetime-label-disabled);\n cursor: not-allowed;\n }\n}\n\n//Success state\n.sdds-form-datetime-success {\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-success);\n color: var(--sdds-datetime-color-success);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-sucess);\n }\n }\n}\n\n//Error State\n.sdds-form-datetime-error {\n .sdds-datetime-helper {\n color: var(--sdds-datetime-helper-error);\n }\n\n .sdds-datetime-container {\n border-bottom-color: var(--sdds-datetime-border-bottom-error);\n }\n\n .sdds-datetime-bar {\n &::before,\n &::after {\n background: var(--sdds-datetime-bar-error);\n }\n }\n .datetime-icon path {\n fill: var(--sdds-datetime-icon-error);\n }\n}\n\n.sdds-datetime-textcounter {\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter);\n float: right;\n\n & .sdds-datetime-textcounter-divider {\n // font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n color: var(--sdds-datetime-textcounter-divider);\n }\n}\n\n/* datetime picker icon remove testing */\n\ninput[type='datetime-local']::-webkit-inner-spin-button,\ninput[type='datetime-local']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='date']::-webkit-inner-spin-button,\ninput[type='date']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n\ninput[type='time']::-webkit-inner-spin-button,\ninput[type='time']::-webkit-calendar-picker-indicator {\n opacity: 0;\n}\n.sdds-mode-variant-primary {\n --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\n.sdds-mode-variant-secondary {\n --sdds-datetime-background: var(--sdds-datetime-background-secondary);\n}\n","import { Component, State, h, Prop, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sdds-datetime',\n styleUrl: 'datetime.scss',\n shadow: true,\n})\nexport class Datetime {\n /** Textinput for focus state */\n textInput?: HTMLInputElement;\n\n /** Which input type, text, password or similar */\n @Prop({ reflect: true }) type: 'datetime-local' | 'date' | 'time' = 'datetime-local';\n\n /** Value of the input text */\n @Prop({ reflect: true }) value = '';\n\n /** Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM */\n @Prop() defaultValue: string | 'none' = 'none';\n\n /** Set input in disabled state */\n @Prop() disabled: boolean = false;\n\n /** Size of the input */\n @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n /** Resets min width rule */\n @Prop() noMinWidth: boolean = false;\n\n /** Set the variant of the datetime component. */\n @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n /** Name property */\n @Prop() name = '';\n\n /** Error state of input */\n @Prop() state: string;\n\n /** Autofocus for input */\n @Prop() autofocus: boolean = false;\n\n /** Label text for the component */\n @Prop() label: string = '';\n\n /** Helper text for the component */\n @Prop() helper: string = '';\n\n /** Listen to the focus state of the input */\n @State() focusInput: boolean;\n\n /** Change event for the datetime */\n @Event({\n composed: true,\n bubbles: true,\n cancelable: true,\n })\n sddsChange: EventEmitter;\n\n /** Blur event for the datetime */\n @Event({\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsBlur: EventEmitter<FocusEvent>;\n\n /** Focus event for the datetime */\n @Event({\n eventName: 'sddsFocus',\n composed: true,\n bubbles: true,\n cancelable: false,\n })\n sddsFocus: EventEmitter<FocusEvent>;\n\n getDefaultValue = () => {\n const dateTimeObj = {\n year: this.defaultValue.slice(0, 4),\n month: this.defaultValue.slice(5, 7),\n day: this.defaultValue.slice(8, 10),\n hours: this.defaultValue.slice(11, 13),\n minutes: this.defaultValue.slice(14, 16),\n };\n switch (this.type) {\n case 'datetime-local':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;\n case 'date':\n return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;\n case 'time':\n return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;\n default:\n throw new Error('Invalid type.');\n }\n };\n\n componentWillLoad() {\n if (this.defaultValue !== 'none') {\n this.value = this.getDefaultValue();\n }\n }\n\n // Listener if input enters focus state\n @Listen('focus')\n handleFocusIn() {\n this.focusInput = true;\n }\n\n // Listener if input leaves focus state\n @Listen('focusout')\n handleFocusOut() {\n this.focusInput = false;\n }\n\n // Data input event in value prop\n handleInput(e): void {\n this.value = e.target.value;\n this.sddsChange.emit(e);\n }\n\n // Change event isn't a composed:true by default in for input\n handleChange(e: Event): void {\n this.sddsChange.emit(e);\n }\n\n /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleFocusClick(e): void {\n this.textInput.focus();\n this.sddsFocus.emit(e);\n }\n\n /** Set the input as focus when clicking the whole datetime with suffix/prefix */\n handleBlur(e): void {\n this.textInput.blur();\n this.sddsBlur.emit(e);\n }\n\n render() {\n let className = ' sdds-datetime-input';\n if (this.size === 'md') {\n className += `${className}-md`;\n }\n if (this.size === 'sm') {\n className += `${className}-sm`;\n }\n return (\n <div\n class={`\n ${this.noMinWidth ? 'sdds-form-datetime-nomin' : ''}\n ${this.focusInput ? 'sdds-form-datetime sdds-datetime-focus' : ' sdds-form-datetime'}\n ${this.value.length > 0 ? 'sdds-datetime-data' : ''}\n ${this.disabled ? 'sdds-form-datetime-disabled' : ''}\n ${this.size === 'md' ? 'sdds-form-datetime-md' : ''}\n ${this.size === 'sm' ? 'sdds-form-datetime-sm' : ''}\n ${\n this.state === 'error' || this.state === 'success'\n ? `sdds-form-datetime-${this.state}`\n : ''\n }\n ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n `}\n >\n {this.label && (\n <label htmlFor={this.name} class=\"sdds-datetime-label\">\n {this.label}\n </label>\n )}\n <div\n onClick={(e) => this.handleFocusClick(e)}\n class=\"sdds-datetime-container sdds-datetime-container\"\n >\n <div class=\"sdds-datetime-input-container\">\n <input\n ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n class={className}\n type={this.type}\n disabled={this.disabled}\n value={this.value}\n autofocus={this.autofocus}\n name={this.name}\n onInput={(e) => this.handleInput(e)}\n onBlur={(e) => this.handleBlur(e)}\n onChange={(e) => this.handleChange(e)}\n />\n\n <div class=\"datetime-icon icon-datetime-local\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M23.625 2.977a1 1 0 1 0-2 0v2.985l-11.344.01V2.99a1 1 0 1 0-2 0v2.985H6.25a4.2 4.2 0 0 0-4.2 4.2V25.77a4.2 4.2 0 0 0 4.2 4.2h19.54a4.2 4.2 0 0 0 4.2-4.2V10.167a4.2 4.2 0 0 0-4.191-4.2l-2.174-.004V2.977ZM4.05 10.174a2.2 2.2 0 0 1 2.2-2.2l16.376-.013 3.17.006a2.2 2.2 0 0 1 2.195 2.2v1.847H4.05l-.001-1.84Zm0 3.84V25.77a2.2 2.2 0 0 0 2.2 2.2h19.54a2.2 2.2 0 0 0 2.2-2.2V14.014H4.05Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n\n <div class=\"datetime-icon icon-time\">\n <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 32 32\">\n <path\n d=\"M17 7a1 1 0 1 0-2 0v8a2 2 0 0 0 2 2h6a1 1 0 1 0 0-2h-6V7Z\"\n fill=\"currentColor\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M16 2C8.268 2 2 8.268 2 16s6.268 14 14 14 14-6.268 14-14S23.732 2 16 2ZM4 16C4 9.373 9.373 4 16 4s12 5.373 12 12-5.373 12-12 12S4 22.627 4 16Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n </div>\n <div class=\"sdds-datetime-bar\"></div>\n </div>\n\n <div class=\"sdds-datetime-helper\">\n {this.helper && (\n <div class=\"sdds-helper\">\n {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n {this.helper}\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/tegel/p-1df2e987.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as s,c as d,h as i}from"./p-387e1798.js";const e=':root,.sdds-mode-light{--sdds-slider-label-color:var(--sdds-grey-958);--sdds-slider-thumb-color:var(--sdds-blue-800);--sdds-slider-divider-color:var(--sdds-grey-400);--sdds-slider-track-color:var(--sdds-grey-400);--sdds-slider-track-fill-color:var(--sdds-blue-800);--sdds-slider-input-inputfield-color:var(--sdds-grey-700);--sdds-slider-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-958);--sdds-slider-inputfield-background:var(--sdds-white);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-400);--sdds-slider-divider-values-color:var(--sdds-grey-958);--sdds-slider-disabled:var(--sdds-grey-400);--sdds-slider-value-tooltip-background:var(--sdds-grey-800);--sdds-slider-value-tooltip-color:var(--sdds-white)}.sdds-mode-dark{--sdds-slider-label-color:var(--sdds-grey-100);--sdds-slider-thumb-color:var(--sdds-grey-100);--sdds-slider-divider-color:var(--sdds-grey-700);--sdds-slider-track-color:var(--sdds-grey-700);--sdds-slider-track-fill-color:var(--sdds-grey-100);--sdds-slider-inputfield-color:var(--sdds-grey-700);--sdds-slider-input-inputfield-color:var(--sdds-grey-400);--sdds-slider-controls-color:var(--sdds-grey-100);--sdds-slider-inputfield-background:var(--sdds-grey-900);--sdds-slider-inputfield-box-shadow:var(--sdds-grey-800);--sdds-slider-divider-values-color:var(--sdds-grey-100);--sdds-slider-disabled:var(--sdds-grey-700);--sdds-slider-value-tooltip-background:var(--sdds-grey-200);--sdds-slider-value-tooltip-color:var(--sdds-grey-958)}sdds-slider{box-sizing:border-box;width:100%}sdds-slider {box-sizing:border-box}sdds-slider input[type=range].sdds-slider-native-element{display:none}.sdds-slider-wrapper{width:100%}.sdds-slider-wrapper.read-only{pointer-events:none}.sdds-slider{width:100%;display:flex;flex-wrap:nowrap;padding-top:65px}.sdds-slider .sdds-slider-inner{width:100%;height:20px;position:relative}.sdds-slider .sdds-slider__controls{position:relative;top:-25px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:pointer}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus{padding:18px 18px 18px 0}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus{padding:18px 0 18px 18px}.sdds-slider .sdds-slider__input-values{position:relative;top:-25px;display:flex;flex-wrap:nowrap;align-items:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-value{user-select:none;padding:18px;color:var(--sdds-grey-700);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper{background-color:var(--sdds-slider-inputfield-background);display:flex;align-items:center;justify-content:center}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-slider-input-inputfield-color);border:0;background-color:transparent;text-align:center;padding:12px;box-shadow:inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);border-radius:4px 4px 0 0}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover{box-shadow:inset 0 -1px 0 var(--sdds-grey-600)}.sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:focus{box-shadow:inset 0 -2px 0 var(--sdds-blue-400);outline:0}.sdds-slider label{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);user-select:none;position:absolute;color:var(--sdds-slider-label-color);top:-16px;transform:translateY(-100%)}.sdds-slider label.offset{top:-35px}.sdds-slider .sdds-slider__value{font:var(--sdds-detail-01);letter-spacing:var(--sdds-detail-01-ls);user-select:none;border-radius:4px;padding:8px;position:absolute;transform:translate(-50%, -100%);top:-24px;background-color:var(--sdds-slider-value-tooltip-background);color:var(--sdds-slider-value-tooltip-color)}.sdds-slider .sdds-slider__value svg{color:var(--sdds-slider-value-tooltip-background);position:absolute;left:50%;transform:translateX(-50%);top:34px}.sdds-slider .sdds-slider__scrubber{position:absolute}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:20px;height:20px;border-radius:100%;background-color:var(--sdds-slider-thumb-color);position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);cursor:pointer}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{content:" ";display:none;width:48px;height:48px;background-color:var(--sdds-slider-thumb-color);position:absolute;border-radius:100%;top:50%;left:50%;transform:translate(-50%, -50%)}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner:hover::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:24px;height:24px}.sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed::before{display:block;opacity:0.16 !important}.sdds-slider .sdds-slider__value-dividers-wrapper{position:relative;width:100%;pointer-events:none}.sdds-slider .sdds-slider__value-dividers{pointer-events:none;position:absolute;display:flex;justify-content:space-between;width:100%}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider{transform:translateY(-50%);height:16px;background-color:var(--sdds-slider-divider-color);color:var(--sdds-slider-divider-values-color);width:1px}.sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span{display:block;user-select:none;color:var(-sdds-grey-700);font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);position:relative;top:-7px;left:50%;transform:translate(-50%, -100%);width:50px;text-align:center}.sdds-slider .sdds-slider__track{width:100%;height:2px;border-radius:1px;background-color:var(--sdds-slider-track-color);position:relative}.sdds-slider .sdds-slider__track:focus{outline:0}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:24px;height:24px}.sdds-slider .sdds-slider__track:focus .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{display:block;opacity:0.08}.sdds-slider .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-track-fill-color);border-radius:2px;height:4px;position:absolute;left:0;top:-1px}.sdds-slider.disabled{cursor:not-allowed}.sdds-slider.disabled>{pointer-events:none}.sdds-slider.disabled label{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg{fill:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper{pointer-events:none}.sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field{color:var(--sdds-slider-disabled);pointer-events:none}.sdds-slider.disabled .sdds-slider__value{display:none}.sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill{background-color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span{color:var(--sdds-slider-disabled)}.sdds-slider.disabled .sdds-slider__scrubber{pointer-events:none}.sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner{background-color:var(--sdds-slider-disabled);cursor:default}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner{width:16px;height:16px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner::before{width:40px;height:40px}.sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed{width:20px;height:20px}.sdds-slider .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-controls-color)}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control{cursor:default}.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus sdds-icon,.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus sdds-icon{color:var(--sdds-slider-disabled)}';const r=class{constructor(i){s(this,i);this.sddsChange=d(this,"sddsChange",7);this.wrapperElement=null;this.scrubberElement=null;this.scrubberInnerElement=null;this.dividersElement=null;this.trackElement=null;this.trackFillElement=null;this.minusElement=null;this.plusElement=null;this.inputElement=null;this.nativeRangeInputElement=null;this.scrubberGrabPos={x:0,y:0};this.scrubberGrabbed=false;this.scrubberLeft=0;this.tickValues=[];this.disabledState=false;this.readonlyState=false;this.useControls=false;this.useInput=false;this.useSmall=false;this.useSnapping=false;this.supposedValueSlot=-1;this.eventListenersAdded=false;this.resizeObserverAdded=false;this.label="";this.value="0";this.min="0";this.max="100";this.ticks="0";this.showTickNumbers=false;this.tooltip=false;this.disabled=false;this.readOnly=false;this.controls=false;this.input=false;this.step="1";this.name="";this.scrubberSize="lg";this.snap=false;this.sliderId=crypto.randomUUID()}async reset(){this.componentWillLoad();this.componentDidLoad()}handleKeydown(s){switch(s.key){case"ArrowLeft":this.stepLeft();break;case"ArrowRight":this.stepRight();break}}handleMouseUp(){if(!this.scrubberGrabbed){return}this.scrubberGrabbed=false;this.scrubberInnerElement.classList.remove("pressed");this.updateValue();this.trackElement.focus()}handleTouchEnd(){if(!this.scrubberGrabbed){return}this.scrubberGrabbed=false;this.scrubberInnerElement.classList.remove("pressed");this.updateValue();this.trackElement.focus()}handleMouseMove(s){if(!this.scrubberGrabbed){return}const d=parseInt(this.ticks);const i=this.trackElement.getBoundingClientRect();let e=s.clientX-i.left;this.supposedValueSlot=-1;if(this.useSnapping&&d>0){const s=Math.round(this.getTrackWidth()/(d+1));e=Math.round(e/s)s;this.supposedValueSlot=Math.round(e/s)}this.scrubberLeft=this.constrainScrubber(e);this.scrubberElement.style.left=`${this.scrubberLeft}px`;this.updateValue();this.updateTrack()}handleTouchMove(s){s.preventDefault();if(!this.scrubberGrabbed){return}const d=parseInt(this.ticks);const i=this.trackElement.getBoundingClientRect();let e=s.touches[0].clientX-i.left;this.supposedValueSlot=-1;if(this.useSnapping&&d>0){const s=Math.round(this.getTrackWidth()/(d+1));e=Math.round(e/s)s;this.supposedValueSlot=Math.round(e/s)}this.scrubberLeft=this.constrainScrubber(e);this.scrubberElement.style.left=`${this.scrubberLeft}px`;this.updateValue();this.updateTrack()}updateTrack(){const s=this.getTrackWidth();const d=this.scrubberLeft/s100;this.trackFillElement.style.width=`${d}%`}dispatchChangeEvent(){this.sddsChange.emit({value:this.value})}updateValue(){const s=this.getTrackWidth();if(this.supposedValueSlot>0){const s=this.tickValues[this.supposedValueSlot];this.value=`${s}`}else{const d=this.scrubberLeft/s;this.value=`${Math.trunc(this.getMin()+d(this.getMax()-this.getMin()))}`}this.dispatchChangeEvent()}updateValueForced(s){this.value=s;this.dispatchChangeEvent()}getMin(){return parseFloat(this.min)}getMax(){return parseFloat(this.max)}constrainScrubber(s){const d=this.getTrackWidth();if(s<0){return 0}if(s>d){return d}return s}getTrackWidth(){const s=this.trackElement.getBoundingClientRect();return s.right-s.left}calculateScrubberLeftFromValue(s){const d=s;const i=this.getTrackWidth();const e=d-this.getMin();const r=this.getMax()-this.getMin();const t=e/ri;this.scrubberLeft=t;this.scrubberElement.style.left=`${this.scrubberLeft}px`}componentDidLoad(){if(!this.resizeObserverAdded){this.resizeObserverAdded=true;const s=new ResizeObserver((()=>{this.calculateScrubberLeftFromValue(this.value);this.updateTrack()}));s.observe(this.wrapperElement)}if(!this.eventListenersAdded){this.eventListenersAdded=true;this.scrubberElement.addEventListener("mousedown",(s=>{s.preventDefault();this.grabScrubber(s.offsetX,s.offsetY)}));this.scrubberElement.addEventListener("touchstart",(s=>{const d=this.scrubberElement.getBoundingClientRect();const i=s.targetTouches[0].pageX-d.left;const e=s.targetTouches[0].pageY-d.top;this.grabScrubber(i,e)}));if(this.useControls){this.minusElement.addEventListener("click",(()=>{this.stepLeft()}));this.plusElement.addEventListener("click",(()=>{this.stepRight()}))}if(this.inputElement){this.inputElement.addEventListener("keydown",(s=>{s.stopPropagation();if(s.key==="Enter"){let s=parseInt(this.inputElement.value);if(s<this.getMin()){s=this.getMin()}else if(s>this.getMax()){s=this.getMax()}this.calculateScrubberLeftFromValue(s);this.updateValueForced(s);this.updateTrack();this.inputElement.blur();this.wrapperElement.focus()}}))}}this.calculateScrubberLeftFromValue(this.value);this.updateTrack()}grabScrubber(s,d){if(this.readonlyState){return}this.scrubberGrabPos={x:s,y:d};this.scrubberGrabbed=true;this.scrubberInnerElement.classList.add("pressed")}calculateInputSizeFromMax(){return this.max.length}controlsStep(s){if(this.readonlyState\|\|this.disabled){return}const d=this.getTrackWidth();const i=this.scrubberLeft/d;const e=parseInt(this.ticks);let r=this.getMin()+i(this.getMax()-this.getMin());r+=s;if(r<this.getMin()){r=this.getMin()}else if(r>this.getMax()){r=this.getMax()}this.value=`${r}`;if(this.useSnapping&&e>0){const d=s>0?1:-1;this.supposedValueSlot+=d;if(this.supposedValueSlot<0){this.supposedValueSlot=0}else if(this.supposedValueSlot>e+1){this.supposedValueSlot=e+1}}this.calculateScrubberLeftFromValue(r);this.updateTrack();this.updateValue()}stepLeft(){this.controlsStep(-parseInt(this.step))}stepRight(){this.controlsStep(parseInt(this.step))}componentWillLoad(){const s=parseInt(this.ticks);if(s>0){this.tickValues=[this.getMin()];const d=(this.getMax()-this.getMin())/(s+1);for(let i=1;i<s+1;i++){this.tickValues.push(this.getMin()+Math.round(d*i))}this.tickValues.push(this.getMax())}if(this.disabled){this.disabledState=true}else{this.disabledState=false}if(this.readOnly){this.readonlyState=true}else{this.readonlyState=false}this.useInput=false;this.useControls=false;if(this.controls){this.useControls=true}else if(this.input){this.useInput=true}this.useSmall=false;if(this.scrubberSize==="sm"){this.useSmall=true}this.useSnapping=false;if(this.snap){this.useSnapping=true}const d=this.getMin();const i=this.getMax();if(d>i){console.warn("min-prop must have a higher value than max-prop for the component to work correctly.");this.disabledState=true}}render(){return i("div",{class:`sdds-slider-wrapper ${this.readonlyState?"read-only":""}`},i("input",{ref:s=>{this.nativeRangeInputElement=s},class:"sdds-slider-native-element",type:"range",value:this.value,name:this.name,min:this.min,max:this.max,disabled:this.disabled}),i("div",{class:`sdds-slider ${this.disabledState?"disabled":""} ${this.useSmall?"sdds-slider-small":""}`,ref:s=>{this.wrapperElement=s}},this.useInput&&i("div",{class:"sdds-slider__input-values"},i("div",{ref:s=>{this.minusElement=s},class:"sdds-slider__input-value"},this.min)),this.useControls&&i("div",{class:"sdds-slider__controls"},i("div",{ref:s=>this.minusElement=s,class:"sdds-slider__control sdds-slider__control-minus"},i("sdds-icon",{name:"minus",size:"16px"}))),i("div",{class:"sdds-slider-inner"},i("label",{class:this.tickValues.length>0&&"offset"},this.label),this.tickValues.length>0&&i("div",{class:"sdds-slider__value-dividers-wrapper"},i("div",{ref:s=>{this.dividersElement=s},class:"sdds-slider__value-dividers"},this.tickValues.map((s=>i("div",{class:"sdds-slider__value-divider"},this.showTickNumbers&&i("span",null,s)))))),i("div",{class:"sdds-slider__track",ref:s=>{this.trackElement=s},tabindex:this.disabled?"-1":"0"},i("div",{class:"sdds-slider__track-fill",ref:s=>{this.trackFillElement=s}}),i("div",{class:"sdds-slider__scrubber",ref:s=>{this.scrubberElement=s}},this.tooltip&&i("div",{class:"sdds-slider__value"},this.value,i("svg",{width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z",fill:"currentColor"}))),i("div",{class:"sdds-slider__scrubber-inner",ref:s=>{this.scrubberInnerElement=s}})))),this.useInput&&i("div",{class:"sdds-slider__input-values"},i("div",{ref:s=>{this.minusElement=s},class:"sdds-slider__input-value"},this.max),i("div",{class:"sdds-slider__input-field-wrapper"},i("input",{onFocus:s=>{if(this.readonlyState){s.preventDefault();this.inputElement.blur()}},size:this.calculateInputSizeFromMax(),class:"sdds-slider__input-field",value:this.value,ref:s=>{this.inputElement=s}}))),this.useControls&&i("div",{class:"sdds-slider__controls"},i("div",{ref:s=>this.plusElement=s,class:"sdds-slider__control sdds-slider__control-plus"},i("sdds-icon",{name:"plus",size:"16px"})))))}};r.style=e;export{r as sdds_slider};
2	- //# sourceMappingURL=p-1df2e987.entry.js.map

package/dist/tegel/p-1df2e987.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sliderCss","Slider","this","wrapperElement","scrubberElement","scrubberInnerElement","dividersElement","trackElement","trackFillElement","minusElement","plusElement","inputElement","nativeRangeInputElement","scrubberGrabPos","x","y","scrubberGrabbed","scrubberLeft","tickValues","disabledState","readonlyState","useControls","useInput","useSmall","useSnapping","supposedValueSlot","eventListenersAdded","resizeObserverAdded","crypto","randomUUID","async","componentWillLoad","componentDidLoad","handleKeydown","event","key","stepLeft","stepRight","handleMouseUp","classList","remove","updateValue","focus","handleTouchEnd","handleMouseMove","numTicks","parseInt","ticks","trackRect","getBoundingClientRect","localLeft","clientX","left","v","Math","round","getTrackWidth","constrainScrubber","style","updateTrack","handleTouchMove","preventDefault","touches","trackWidth","percentageFilled","width","dispatchChangeEvent","sddsChange","emit","value","supposedValue","percentage","trunc","getMin","getMax","updateValueForced","parseFloat","min","max","right","calculateScrubberLeftFromValue","initValue","normalizedValue","normalizedMax","calculatedLeft","resizeObserver","ResizeObserver","observe","addEventListener","grabScrubber","offsetX","offsetY","rect","targetTouches","pageX","pageY","top","stopPropagation","newValue","blur","xOffset","yOffset","add","calculateInputSizeFromMax","length","controlsStep","delta","disabled","currentValue","stepDir","step","i","push","readOnly","controls","input","scrubberSize","snap","console","warn","render","h","class","ref","el","type","name","size","label","map","showTickNumbers","tabindex","tooltip","height","viewBox","fill","xmlns","d","onFocus","e"],"sources":["./src/components/slider/slider.scss?tag=sdds-slider","./src/components/slider/slider.tsx"],"sourcesContent":["@import 'slider-vars';\n@import '../../mixins/box-sizing';\n\nsdds-slider {\n @include sdds-box-sizing;\n\n width: 100%;\n\n input[type='range'].sdds-slider-native-element {\n display: none;\n }\n}\n\n.sdds-slider-wrapper {\n width: 100%;\n\n &.read-only {\n pointer-events: none;\n }\n}\n\n.sdds-slider {\n width: 100%;\n display: flex;\n flex-wrap: nowrap;\n padding-top: 65px;\n\n .sdds-slider-inner {\n width: 100%;\n height: 20px;\n position: relative;\n }\n\n .sdds-slider__controls {\n position: relative;\n top: -25px;\n\n .sdds-slider__control {\n cursor: pointer;\n\n &.sdds-slider__control-minus {\n padding: 18px 18px 18px 0;\n }\n\n &.sdds-slider__control-plus {\n padding: 18px 0 18px 18px;\n }\n }\n }\n\n .sdds-slider__input-values {\n position: relative;\n top: -25px;\n display: flex;\n flex-wrap: nowrap;\n align-items: center;\n\n .sdds-slider__input-value {\n user-select: none;\n padding: 18px;\n color: var(--sdds-grey-700);\n\n //@include type-style('detail-02');\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n }\n\n .sdds-slider__input-field-wrapper {\n background-color: var(--sdds-slider-inputfield-background);\n display: flex;\n align-items: center;\n justify-content: center;\n\n input.sdds-slider__input-field {\n // @include type-style('detail-02');\n font: var(--sdds-detail-02);\n letter-spacing: var(--sdds-detail-02-ls);\n color: var(--sdds-slider-input-inputfield-color);\n border: 0;\n background-color: transparent;\n text-align: center;\n padding: 12px;\n box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);\n border-radius: 4px 4px 0 0;\n\n &:hover {\n box-shadow: inset 0 -1px 0 var(--sdds-grey-600);\n }\n\n &:focus {\n box-shadow: inset 0 -2px 0 var(--sdds-blue-400);\n outline: 0;\n }\n }\n }\n }\n\n label {\n // @include type-style('detail-05');\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n user-select: none;\n position: absolute;\n color: var(--sdds-slider-label-color);\n top: -16px;\n transform: translateY(-100%);\n\n &.offset {\n top: -35px;\n }\n }\n\n .sdds-slider__value {\n // @include type-style('detail-01');\n font: var(--sdds-detail-01);\n letter-spacing: var(--sdds-detail-01-ls);\n user-select: none;\n border-radius: 4px;\n padding: 8px;\n position: absolute;\n transform: translate(-50%, -100%);\n top: -24px;\n background-color: var(--sdds-slider-value-tooltip-background);\n color: var(--sdds-slider-value-tooltip-color);\n\n svg {\n color: var(--sdds-slider-value-tooltip-background);\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n top: 34px;\n }\n }\n\n .sdds-slider__scrubber {\n position: absolute;\n\n .sdds-slider__scrubber-inner {\n width: 20px;\n height: 20px;\n border-radius: 100%;\n background-color: var(--sdds-slider-thumb-color);\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n cursor: pointer;\n\n &::before {\n content: ' ';\n display: none;\n width: 48px;\n height: 48px;\n background-color: var(--sdds-slider-thumb-color);\n position: absolute;\n border-radius: 100%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:hover {\n &::before {\n display: block;\n opacity: 0.08;\n }\n }\n\n &.pressed {\n width: 24px;\n height: 24px;\n\n &::before {\n display: block;\n opacity: 0.16 !important;\n }\n }\n }\n }\n\n .sdds-slider__value-dividers-wrapper {\n position: relative;\n width: 100%;\n pointer-events: none;\n }\n\n .sdds-slider__value-dividers {\n pointer-events: none;\n position: absolute;\n display: flex;\n justify-content: space-between;\n width: 100%;\n\n .sdds-slider__value-divider {\n transform: translateY(-50%);\n height: 16px;\n background-color: var(--sdds-slider-divider-color);\n color: var(--sdds-slider-divider-values-color);\n width: 1px;\n\n span {\n display: block;\n user-select: none;\n color: var(-sdds-grey-700);\n\n // @include type-style('detail-05');\n font: var(--sdds-detail-05);\n letter-spacing: var(--sdds-detail-05-ls);\n position: relative;\n top: -7px;\n left: 50%;\n transform: translate(-50%, -100%);\n width: 50px;\n text-align: center;\n }\n }\n }\n\n .sdds-slider__track {\n width: 100%;\n height: 2px;\n border-radius: 1px;\n background-color: var(--sdds-slider-track-color);\n position: relative;\n\n &:focus {\n outline: 0;\n\n .sdds-slider__scrubber {\n .sdds-slider__scrubber-inner {\n width: 24px;\n height: 24px;\n\n &::before {\n display: block;\n opacity: 0.08;\n }\n }\n }\n }\n\n .sdds-slider__track-fill {\n background-color: var(--sdds-slider-track-fill-color);\n border-radius: 2px;\n height: 4px;\n position: absolute;\n left: 0;\n top: -1px;\n }\n }\n\n &.disabled {\n // pointer-events: none;\n cursor: not-allowed;\n\n > * {\n pointer-events: none;\n }\n\n label {\n color: var(--sdds-slider-disabled);\n }\n\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n svg {\n fill: var(--sdds-slider-disabled);\n }\n }\n }\n }\n\n .sdds-slider__input-values {\n .sdds-slider__input-value {\n color: var(--sdds-slider-disabled);\n }\n\n .sdds-slider__input-field-wrapper {\n pointer-events: none;\n\n input.sdds-slider__input-field {\n color: var(--sdds-slider-disabled);\n pointer-events: none;\n }\n }\n }\n\n .sdds-slider__value {\n display: none;\n }\n\n .sdds-slider__track {\n .sdds-slider__track-fill {\n background-color: var(--sdds-slider-disabled);\n }\n }\n\n .sdds-slider__value-dividers {\n .sdds-slider__value-divider {\n span {\n color: var(--sdds-slider-disabled);\n }\n }\n }\n\n .sdds-slider__scrubber {\n pointer-events: none;\n\n .sdds-slider__scrubber-inner {\n background-color: var(--sdds-slider-disabled);\n cursor: default;\n }\n }\n }\n\n &.sdds-slider-small {\n .sdds-slider__scrubber {\n .sdds-slider__scrubber-inner {\n width: 16px;\n height: 16px;\n\n &::before {\n width: 40px;\n height: 40px;\n }\n\n &.pressed {\n width: 20px;\n height: 20px;\n }\n }\n }\n }\n}\n\n.sdds-slider {\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n sdds-icon {\n color: var(--sdds-slider-controls-color);\n }\n }\n }\n }\n\n &.disabled {\n .sdds-slider__controls {\n .sdds-slider__control {\n cursor: default;\n\n &.sdds-slider__control-minus,\n &.sdds-slider__control-plus {\n sdds-icon {\n color: var(--sdds-slider-disabled);\n }\n }\n }\n }\n }\n}\n","import { Component, h, Prop, Listen, EventEmitter, Event, Method } from '@stencil/core';\n\n@Component({\n tag: 'sdds-slider',\n styleUrl: 'slider.scss',\n shadow: false,\n})\nexport class Slider {\n /** Text for label */\n @Prop() label: string = '';\n\n /** Initial value */\n @Prop() value: string = '0';\n\n /** Minimum value */\n @Prop() min: string = '0';\n\n /** Maximum value */\n @Prop() max: string = '100';\n\n /** Number of tick markers (tick for min- and max-value will be added automatically) */\n @Prop() ticks: string = '0';\n\n /** Decide to show numbers above the tick markers or not */\n @Prop() showTickNumbers: boolean = false;\n\n /** Decide to show the tooltip or not */\n @Prop() tooltip: boolean = false;\n\n /** Sets the disabled state for the whole component */\n @Prop() disabled: boolean = false;\n\n /** Sets the read only state for the whole component */\n @Prop() readOnly: boolean = false;\n\n /** Decide to show the controls or not */\n @Prop() controls: boolean = false;\n\n /** Decide to show the input field or not */\n @Prop() input: boolean = false;\n\n /** Defines how much to increment/decrement the value when using controls */\n @Prop() step: string = '1';\n\n /** Name property (will be inherited by the native slider component) */\n @Prop() name: string = '';\n\n /** Sets the size of the scrubber */\n @Prop() scrubberSize: 'sm' | 'lg' = 'lg';\n\n /** Snap to the ticks grid */\n @Prop() snap: boolean = false;\n\n /** Id for the sliders input element, randomly generated if not specified. */\n @Prop() sliderId: string = crypto.randomUUID();\n\n wrapperElement: HTMLElement = null;\n\n scrubberElement: HTMLElement = null;\n\n scrubberInnerElement: HTMLElement = null;\n\n dividersElement: HTMLElement = null;\n\n trackElement: HTMLElement = null;\n\n trackFillElement: HTMLElement = null;\n\n minusElement: HTMLElement = null;\n\n plusElement: HTMLElement = null;\n\n inputElement: HTMLInputElement = null;\n\n nativeRangeInputElement: HTMLInputElement = null;\n\n scrubberGrabPos: object = { x: 0, y: 0 };\n\n scrubberGrabbed: boolean = false;\n\n scrubberLeft: number = 0;\n\n tickValues: Array<number> = [];\n\n disabledState: boolean = false;\n\n readonlyState: boolean = false;\n\n useControls: boolean = false;\n\n useInput: boolean = false;\n\n useSmall: boolean = false;\n\n useSnapping: boolean = false;\n\n supposedValueSlot: number = -1;\n\n eventListenersAdded: boolean = false;\n\n resizeObserverAdded: boolean = false;\n\n /** Sends the value of the slider when changed. */\n @Event({\n eventName: 'sddsChange',\n composed: true,\n cancelable: true,\n bubbles: true,\n })\n sddsChange: EventEmitter<{\n value: string;\n }>;\n\n /** Public method to re-initialise the slider if some configuration props are changed */\n @Method() async reset() {\n // @TODO: maybe refactor to use watch-decorators instead\n this.componentWillLoad();\n this.componentDidLoad();\n }\n\n @Listen('keydown')\n handleKeydown(event) {\n switch (event.key) {\n case 'ArrowLeft':\n this.stepLeft();\n break;\n\n case 'ArrowRight':\n this.stepRight();\n break;\n\n default:\n break;\n }\n }\n\n @Listen('mouseup', { target: 'window' })\n handleMouseUp() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('touchend', { target: 'window' })\n handleTouchEnd() {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n this.scrubberGrabbed = false;\n this.scrubberInnerElement.classList.remove('pressed');\n this.updateValue();\n\n this.trackElement.focus();\n }\n\n @Listen('mousemove', { target: 'window' })\n handleMouseMove(event) {\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.clientX - trackRect.left;\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n @Listen('touchmove', { target: 'window' })\n handleTouchMove(event) {\n event.preventDefault();\n\n if (!this.scrubberGrabbed) {\n return;\n }\n\n const numTicks = parseInt(this.ticks);\n const trackRect = this.trackElement.getBoundingClientRect();\n let localLeft = event.touches[0].clientX - trackRect.left;\n\n this.supposedValueSlot = -1;\n\n if (this.useSnapping && numTicks > 0) {\n const v = Math.round(this.getTrackWidth() / (numTicks + 1));\n localLeft = Math.round(localLeft / v) * v;\n\n this.supposedValueSlot = Math.round(localLeft / v);\n }\n\n this.scrubberLeft = this.constrainScrubber(localLeft);\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n\n this.updateValue();\n this.updateTrack();\n }\n\n updateTrack() {\n const trackWidth = this.getTrackWidth();\n const percentageFilled = (this.scrubberLeft / trackWidth) * 100;\n\n this.trackFillElement.style.width = `${percentageFilled}%`;\n }\n\n dispatchChangeEvent() {\n this.sddsChange.emit({ value: this.value });\n }\n\n updateValue() {\n const trackWidth = this.getTrackWidth();\n\n /* if snapping (supposedValueSlot > 0) is enabled, make sure we display the supposed value (instead of maybe getting a -1/+1 depending on rounding) */\n if (this.supposedValueSlot > 0) {\n const supposedValue = this.tickValues[this.supposedValueSlot];\n this.value = `${supposedValue}`;\n } else {\n const percentage = this.scrubberLeft / trackWidth;\n this.value = `${Math.trunc(this.getMin() + percentage * (this.getMax() - this.getMin()))}`;\n }\n\n this.dispatchChangeEvent();\n }\n\n updateValueForced(value) {\n this.value = value;\n this.dispatchChangeEvent();\n }\n\n getMin() {\n return parseFloat(this.min);\n }\n\n getMax() {\n return parseFloat(this.max);\n }\n\n constrainScrubber(x) {\n const width = this.getTrackWidth();\n\n if (x < 0) {\n return 0;\n }\n\n if (x > width) {\n return width;\n }\n\n return x;\n }\n\n getTrackWidth() {\n const trackRect = this.trackElement.getBoundingClientRect();\n return trackRect.right - trackRect.left;\n }\n\n calculateScrubberLeftFromValue(value) {\n const initValue = value;\n const trackWidth = this.getTrackWidth();\n\n const normalizedValue = initValue - this.getMin();\n const normalizedMax = this.getMax() - this.getMin();\n\n const calculatedLeft = (normalizedValue / normalizedMax) * trackWidth;\n\n this.scrubberLeft = calculatedLeft;\n\n this.scrubberElement.style.left = `${this.scrubberLeft}px`;\n }\n\n componentDidLoad() {\n if (!this.resizeObserverAdded) {\n this.resizeObserverAdded = true;\n\n const resizeObserver = new ResizeObserver((/* entries */) => {\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n });\n\n resizeObserver.observe(this.wrapperElement);\n }\n\n if (!this.eventListenersAdded) {\n this.eventListenersAdded = true;\n\n this.scrubberElement.addEventListener('mousedown', (event) => {\n event.preventDefault();\n this.grabScrubber(event.offsetX, event.offsetY);\n });\n\n this.scrubberElement.addEventListener('touchstart', (event) => {\n const rect = this.scrubberElement.getBoundingClientRect();\n const x = event.targetTouches[0].pageX - rect.left;\n const y = event.targetTouches[0].pageY - rect.top;\n this.grabScrubber(x, y);\n });\n\n if (this.useControls) {\n this.minusElement.addEventListener('click', () => {\n this.stepLeft();\n });\n\n this.plusElement.addEventListener('click', () => {\n this.stepRight();\n });\n }\n\n if (this.inputElement) {\n this.inputElement.addEventListener('keydown', (event) => {\n event.stopPropagation();\n\n if (event.key === 'Enter') {\n let newValue = parseInt(this.inputElement.value);\n\n if (newValue < this.getMin()) {\n newValue = this.getMin();\n } else if (newValue > this.getMax()) {\n newValue = this.getMax();\n }\n\n this.calculateScrubberLeftFromValue(newValue);\n this.updateValueForced(newValue);\n this.updateTrack();\n\n this.inputElement.blur();\n this.wrapperElement.focus();\n }\n });\n }\n }\n\n this.calculateScrubberLeftFromValue(this.value);\n this.updateTrack();\n }\n\n grabScrubber(xOffset, yOffset) {\n if (this.readonlyState) {\n return;\n }\n\n this.scrubberGrabPos = {\n x: xOffset,\n y: yOffset,\n };\n\n this.scrubberGrabbed = true;\n this.scrubberInnerElement.classList.add('pressed');\n }\n\n calculateInputSizeFromMax() {\n return this.max.length;\n }\n\n controlsStep(delta) {\n if (this.readonlyState || this.disabled) {\n return;\n }\n\n const trackWidth = this.getTrackWidth();\n const percentage = this.scrubberLeft / trackWidth;\n const numTicks = parseInt(this.ticks);\n\n let currentValue = this.getMin() + percentage * (this.getMax() - this.getMin());\n\n currentValue += delta;\n\n if (currentValue < this.getMin()) {\n currentValue = this.getMin();\n } else if (currentValue > this.getMax()) {\n currentValue = this.getMax();\n }\n\n this.value = `${currentValue}`;\n\n /* if snapping is enabled, instead just increment or decrement the current \"fixed\" value from our ticknumber array */\n if (this.useSnapping && numTicks > 0) {\n const stepDir = delta > 0 ? 1 : -1;\n this.supposedValueSlot += stepDir;\n\n if (this.supposedValueSlot < 0) {\n this.supposedValueSlot = 0;\n } else if (this.supposedValueSlot > numTicks + 1) {\n this.supposedValueSlot = numTicks + 1;\n }\n }\n\n this.calculateScrubberLeftFromValue(currentValue);\n this.updateTrack();\n this.updateValue();\n }\n\n stepLeft() {\n this.controlsStep(-parseInt(this.step));\n }\n\n stepRight() {\n this.controlsStep(parseInt(this.step));\n }\n\n componentWillLoad() {\n const numTicks = parseInt(this.ticks);\n\n if (numTicks > 0) {\n this.tickValues = [this.getMin()];\n\n const step = (this.getMax() - this.getMin()) / (numTicks + 1);\n\n for (let i = 1; i < numTicks + 1; i++) {\n this.tickValues.push(this.getMin() + Math.round(step * i));\n }\n\n this.tickValues.push(this.getMax());\n }\n\n if (this.disabled) {\n this.disabledState = true;\n } else {\n this.disabledState = false;\n }\n\n if (this.readOnly) {\n this.readonlyState = true;\n } else {\n this.readonlyState = false;\n }\n\n this.useInput = false;\n this.useControls = false;\n\n if (this.controls) {\n this.useControls = true;\n } else if (this.input) {\n this.useInput = true;\n }\n\n this.useSmall = false;\n\n if (this.scrubberSize === 'sm') {\n this.useSmall = true;\n }\n\n this.useSnapping = false;\n\n if (this.snap) {\n this.useSnapping = true;\n }\n\n const min = this.getMin();\n const max = this.getMax();\n\n if (min > max) {\n console.warn(\n 'min-prop must have a higher value than max-prop for the component to work correctly.',\n );\n this.disabledState = true;\n }\n }\n\n render() {\n return (\n <div class={`sdds-slider-wrapper ${this.readonlyState ? 'read-only' : ''}`}>\n <input\n ref={(el) => {\n this.nativeRangeInputElement = el as HTMLInputElement;\n }}\n class=\"sdds-slider-native-element\"\n type=\"range\"\n value={this.value}\n name={this.name}\n min={this.min}\n max={this.max}\n disabled={this.disabled}\n ></input>\n\n <div\n class={`sdds-slider ${this.disabledState ? 'disabled' : ''} ${\n this.useSmall ? 'sdds-slider-small' : ''\n }`}\n ref={(el) => {\n this.wrapperElement = el as HTMLElement;\n }}\n >\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.min}\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.minusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-minus\"\n >\n <sdds-icon name=\"minus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n\n <div class=\"sdds-slider-inner\">\n <label class={this.tickValues.length > 0 && 'offset'}>{this.label}</label>\n\n {this.tickValues.length > 0 && (\n <div class=\"sdds-slider__value-dividers-wrapper\">\n <div\n ref={(el) => {\n this.dividersElement = el as HTMLElement;\n }}\n class=\"sdds-slider__value-dividers\"\n >\n {this.tickValues.map((value) => (\n <div class=\"sdds-slider__value-divider\">\n {this.showTickNumbers && <span>{value}</span>}\n </div>\n ))}\n </div>\n </div>\n )}\n\n <div\n class=\"sdds-slider__track\"\n ref={(el) => {\n this.trackElement = el as HTMLElement;\n }}\n tabindex={this.disabled ? '-1' : '0'}\n >\n <div\n class=\"sdds-slider__track-fill\"\n ref={(el) => {\n this.trackFillElement = el as HTMLElement;\n }}\n ></div>\n\n <div\n class=\"sdds-slider__scrubber\"\n ref={(el) => {\n this.scrubberElement = el as HTMLElement;\n }}\n >\n {this.tooltip && (\n <div class=\"sdds-slider__value\">\n {this.value}\n <svg\n width=\"18\"\n height=\"14\"\n viewBox=\"0 0 18 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z\"\n fill=\"currentColor\"\n />\n </svg>\n </div>\n )}\n\n <div\n class=\"sdds-slider__scrubber-inner\"\n ref={(el) => {\n this.scrubberInnerElement = el as HTMLElement;\n }}\n ></div>\n </div>\n </div>\n </div>\n\n {this.useInput && (\n <div class=\"sdds-slider__input-values\">\n <div\n ref={(el) => {\n this.minusElement = el as HTMLElement;\n }}\n class=\"sdds-slider__input-value\"\n >\n {this.max}\n </div>\n <div class=\"sdds-slider__input-field-wrapper\">\n <input\n onFocus={(e) => {\n if (this.readonlyState) {\n e.preventDefault();\n this.inputElement.blur();\n }\n }}\n size={this.calculateInputSizeFromMax()}\n class=\"sdds-slider__input-field\"\n value={this.value}\n ref={(el) => {\n this.inputElement = el as HTMLInputElement;\n }}\n />\n </div>\n </div>\n )}\n\n {this.useControls && (\n <div class=\"sdds-slider__controls\">\n <div\n ref={(el) => (this.plusElement = el as HTMLElement)}\n class=\"sdds-slider__control sdds-slider__control-plus\"\n >\n <sdds-icon name=\"plus\" size=\"16px\"></sdds-icon>\n </div>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}