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

@scania/tegel 0.0.5 → 0.0.6

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

Files changed (1107) 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,eAAa,CACT,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></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", null)))));
-  }
-};
-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,eAAa,CACT,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></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.linkHref = 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.linkHref }, 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,QAAQ,IACxD,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() linkHref: 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.linkHref}>\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-navigation-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", null)))));
-  }
-};
-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,kxCAAkxC;;MCOryC,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,eAAa,CACT,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-navigation-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></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-navigation-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", null)))));
-  }
-};
-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,6xCAA6xC;;MCO9yC,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,eAAa,CACT,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-navigation-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></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", null)))));
-  }
-};
-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,eAAa,CACT,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></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", null)))));
-  }
-};
-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,eAAa,CACT,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></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":"kDAAA,MAAMA,EAAc,6sV,MCOPC,EAAQ,M,wIAoEnBC,KAAAC,gBAAkB,KAChB,MAAMC,EAAc,CAClBC,KAAMH,KAAKI,aAAaC,MAAM,EAAG,GACjCC,MAAON,KAAKI,aAAaC,MAAM,EAAG,GAClCE,IAAKP,KAAKI,aAAaC,MAAM,EAAG,IAChCG,MAAOR,KAAKI,aAAaC,MAAM,GAAI,IACnCI,QAAST,KAAKI,aAAaC,MAAM,GAAI,KAEvC,OAAQL,KAAKU,MACX,IAAK,iBACH,MAAO,GAAGR,EAAYC,QAAQD,EAAYI,SAASJ,EAAYK,OAAOL,EAAYM,SAASN,EAAYO,UACzG,IAAK,OACH,MAAO,GAAGP,EAAYC,QAAQD,EAAYI,SAASJ,EAAYK,MACjE,IAAK,OACH,MAAO,GAAGP,KAAKI,aAAaC,MAAM,EAAG,MAAML,KAAKI,aAAaC,MAAM,EAAG,KACxE,QACE,MAAM,IAAIM,MAAM,iB,YA/E8C,iB,WAGnC,G,kBAGO,O,cAGZ,M,UAGO,K,gBAGL,M,iBAGiB,K,UAGhC,G,oCAMc,M,WAGL,G,YAGC,G,0BAkDzBC,oBACE,GAAIZ,KAAKI,eAAiB,OAAQ,CAChCJ,KAAKa,MAAQb,KAAKC,iB,EAMtBa,gBACEd,KAAKe,WAAa,I,CAKpBC,iBACEhB,KAAKe,WAAa,K,CAIpBE,YAAYC,GACVlB,KAAKa,MAAQK,EAAEC,OAAON,MACtBb,KAAKoB,WAAWC,KAAKH,E,CAIvBI,aAAaJ,GACXlB,KAAKoB,WAAWC,KAAKH,E,CAIvBK,iBAAiBL,GACflB,KAAKwB,UAAUC,QACfzB,KAAK0B,UAAUL,KAAKH,E,CAItBS,WAAWT,GACTlB,KAAKwB,UAAUI,OACf5B,KAAK6B,SAASR,KAAKH,E,CAGrBY,SACE,IAAIC,EAAY,uBAChB,GAAI/B,KAAKgC,OAAS,KAAM,CACtBD,GAAa,GAAGA,M,CAElB,GAAI/B,KAAKgC,OAAS,KAAM,CACtBD,GAAa,GAAGA,M,CAElB,OACEE,EAAA,OACEC,MAAO,aACLlC,KAAKmC,WAAa,2BAA6B,eAC/CnC,KAAKe,WAAa,yCAA2C,kCAC7Df,KAAKa,MAAMuB,OAAS,EAAI,qBAAuB,eAC/CpC,KAAKqC,SAAW,8BAAgC,eAChDrC,KAAKgC,OAAS,KAAO,wBAA0B,eAC/ChC,KAAKgC,OAAS,KAAO,wBAA0B,eAE/ChC,KAAKsC,QAAU,SAAWtC,KAAKsC,QAAU,UACrC,sBAAsBtC,KAAKsC,QAC3B,eAEJtC,KAAKuC,cAAgB,KAAO,qBAAqBvC,KAAKuC,cAAgB,gBAGvEvC,KAAKwC,OACJP,EAAA,SAAOQ,QAASzC,KAAK0C,KAAMR,MAAM,uBAC9BlC,KAAKwC,OAGVP,EAAA,OACEU,QAAUzB,GAAMlB,KAAKuB,iBAAiBL,GACtCgB,MAAM,mDAEND,EAAA,OAAKC,MAAM,iCACTD,EAAA,SACEW,IAAMC,GAAa7C,KAAKwB,UAAYqB,EACpCX,MAAOH,EACPrB,KAAMV,KAAKU,KACX2B,SAAUrC,KAAKqC,SACfxB,MAAOb,KAAKa,MACZiC,UAAW9C,KAAK8C,UAChBJ,KAAM1C,KAAK0C,KACXK,QAAU7B,GAAMlB,KAAKiB,YAAYC,GACjC8B,OAAS9B,GAAMlB,KAAK2B,WAAWT,GAC/B+B,SAAW/B,GAAMlB,KAAKsB,aAAaJ,KAGrCe,EAAA,OAAKC,MAAM,qCACTD,EAAA,OAAKiB,KAAK,OAAOC,MAAM,6BAA6BC,QAAQ,aAC1DnB,EAAA,oBACY,UAAS,YACT,UACVoB,EAAE,+XACFH,KAAK,mBAKXjB,EAAA,OAAKC,MAAM,2BACTD,EAAA,OAAKiB,KAAK,OAAOC,MAAM,6BAA6BC,QAAQ,aAC1DnB,EAAA,QACEoB,EAAE,4DACFH,KAAK,iBAEPjB,EAAA,oBACY,UAAS,YACT,UACVoB,EAAE,iJACFH,KAAK,oBAKbjB,EAAA,OAAKC,MAAM,uBAGbD,EAAA,OAAKC,MAAM,wBACRlC,KAAKsD,QACJrB,EAAA,OAAKC,MAAM,eACRlC,KAAKsC,QAAU,SAAWL,EAAA,aAAWS,KAAK,QAAQV,KAAK,SACvDhC,KAAKsD,S"}