@scania/tegel 0.0.4 → 0.0.6

package/dist/tegel/p-6354cc6e.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as s,g as r}from"./p-0a99765f.js";import{i as a}from"./p-5e9e9d8a.js";const o=":host .wrapper{height:var(--sdds-header-height);position:relative}:host .wrapper .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--sdds-header-height));box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background);border-radius:0}:host .wrapper .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .wrapper .menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}:host .wrapper .menu ::-webkit-scrollbar-button{height:0;width:0}@media all and (max-width: 384px){:host .wrapper .menu{width:100vw}}:host .wrapper.state-list-type-menu .menu{height:calc(100vh - var(--sdds-header-height))}:host .wrapper.state-open .button{position:relative;z-index:801}";const i=class{constructor(e){t(this,e);this.uuid=crypto.randomUUID();this.open=false;this.buttonEl=undefined;this.hasListTypeMenu=false}onAnyClick(t){const e=!t.composedPath().includes(this.host);if(e){this.open=false}}componentDidLoad(){const t=this.host.shadowRoot.querySelector("slot:not([name])");const e=t.assignedElements();const s=e.some((t=>t.tagName.toLowerCase()==="sdds-header-launcher-list"));if(s){this.hasListTypeMenu=true}}toggleLauncher(){this.open=!this.open}render(){this.ariaAttributes=Object.assign(Object.assign({},this.ariaAttributes),a(this.host,["role"]));const t=Object.assign(Object.assign({},this.ariaAttributes),{"aria-expanded":`${this.open}`,"aria-controls":`launcher-${this.uuid}`,class:"button",active:this.open,onClick:()=>{this.toggleLauncher()},ref:t=>{this.buttonEl=t}});return e(s,null,e("div",{class:{wrapper:true,"state-open":this.open,"state-list-type-menu":this.hasListTypeMenu}},e("sdds-header-launcher-button",Object.assign({},t)),this.buttonEl&&e("sdds-popover-canvas",{id:`sdds-launcher-${this.uuid}`,class:"menu",referenceEl:this.buttonEl,placement:"bottom-start",show:this.open,offsetDistance:0,modifiers:[{name:"flip",options:{fallbackPlacements:[]}}]},e("slot",null))))}get host(){return r(this)}};i.style=o;export{i as sdds_header_launcher};
+//# sourceMappingURL=p-6354cc6e.entry.js.map

package/dist/tegel/p-6354cc6e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["headerLauncherCss","HeaderLauncher","this","uuid","crypto","randomUUID","onAnyClick","event","isClickOutside","composedPath","includes","host","open","componentDidLoad","slotElement","shadowRoot","querySelector","slottedElements","assignedElements","hasListTypeMenu","some","element","tagName","toLowerCase","toggleLauncher","render","ariaAttributes","Object","assign","inheritAriaAttributes","buttonAttributes","class","active","onClick","ref","el","buttonEl","h","Host","wrapper","id","referenceEl","placement","show","offsetDistance","modifiers","name","options","fallbackPlacements"],"sources":["./src/components/header/webcomponent/header-launcher/header-launcher.scss?tag=sdds-header-launcher&encapsulation=shadow","./src/components/header/webcomponent/header-launcher/header-launcher.tsx"],"sourcesContent":["@import '../../../../mixins/scrollbar';\n@import '../../../../mixins/z-index';\n@import '../../../../global/_variables.scss';\n\n:host {\n  .wrapper {\n    height: var(--sdds-header-height);\n    position: relative;\n\n    .menu {\n      /** Should control only height, position, and overflow here. \n        Width and appearance are set inside nested components */\n      flex-direction: column;\n\n      @include sdds-scrollbar;\n\n      overflow-y: auto;\n      max-height: calc(100vh - var(--sdds-header-height));\n      box-shadow: var(--sdds-nav-dropdown-menu-box);\n      background-color: var(--sdds-header-app-launcher-menu-background);\n      border-radius: 0;\n\n      @media all and (max-width: $media-fullwidth) {\n        width: 100vw;\n      }\n    }\n\n    &.state-list-type-menu {\n      .menu {\n        height: calc(100vh - var(--sdds-header-height));\n      }\n    }\n\n    &.state-open {\n      .button {\n        position: relative;\n        z-index: z(tooltip) + 1;\n      }\n    }\n  }\n}\n","import { Component, Host, h, Element, Listen, State } from '@stencil/core';\nimport { Attributes, inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-launcher',\n  styleUrl: 'header-launcher.scss',\n  shadow: true,\n})\nexport class HeaderLauncher {\n  @Element() host: HTMLElement;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLSddsHeaderLauncherButtonElement;\n\n  @State() hasListTypeMenu = false;\n\n  private uuid: string = crypto.randomUUID();\n\n  private ariaAttributes: Attributes;\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  componentDidLoad() {\n    const slotElement = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const slottedElements = slotElement.assignedElements();\n    const hasListTypeMenu = slottedElements.some(\n      (element) => element.tagName.toLowerCase() === 'sdds-header-launcher-list',\n    );\n\n    if (hasListTypeMenu) {\n      this.hasListTypeMenu = true;\n    }\n  }\n\n  toggleLauncher() {\n    this.open = !this.open;\n  }\n\n  render() {\n    this.ariaAttributes = { ...this.ariaAttributes, ...inheritAriaAttributes(this.host, ['role']) };\n\n    const buttonAttributes = {\n      ...this.ariaAttributes,\n      'aria-expanded': `${this.open}`,\n      'aria-controls': `launcher-${this.uuid}`,\n      'class': 'button',\n      'active': this.open,\n      'onClick': () => {\n        this.toggleLauncher();\n      },\n      'ref': (el: HTMLSddsHeaderLauncherButtonElement) => {\n        this.buttonEl = el;\n      },\n    };\n\n    return (\n      <Host>\n        <div\n          class={{\n            'wrapper': true,\n            'state-open': this.open,\n            'state-list-type-menu': this.hasListTypeMenu,\n          }}\n        >\n          <sdds-header-launcher-button {...buttonAttributes}></sdds-header-launcher-button>\n\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-launcher-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAoB,8uB,MCQbC,EAAc,M,yBASjBC,KAAAC,KAAeC,OAAOC,a,UANL,M,6CAIE,K,CAO3BC,WAAWC,GAET,MAAMC,GAAkBD,EAAME,eAAeC,SAASR,KAAKS,MAC3D,GAAIH,EAAgB,CAClBN,KAAKU,KAAO,K,EAIhBC,mBACE,MAAMC,EAAcZ,KAAKS,KAAKI,WAAWC,cAAc,oBACvD,MAAMC,EAAkBH,EAAYI,mBACpC,MAAMC,EAAkBF,EAAgBG,MACrCC,GAAYA,EAAQC,QAAQC,gBAAkB,8BAGjD,GAAIJ,EAAiB,CACnBjB,KAAKiB,gBAAkB,I,EAI3BK,iBACEtB,KAAKU,MAAQV,KAAKU,I,CAGpBa,SACEvB,KAAKwB,eAAcC,OAAAC,OAAAD,OAAAC,OAAA,GAAQ1B,KAAKwB,gBAAmBG,EAAsB3B,KAAKS,KAAM,CAAC,UAErF,MAAMmB,EAAgBH,OAAAC,OAAAD,OAAAC,OAAA,GACjB1B,KAAKwB,gBAAc,CACtB,gBAAiB,GAAGxB,KAAKU,OACzB,gBAAiB,YAAYV,KAAKC,OAClC4B,MAAS,SACTC,OAAU9B,KAAKU,KACfqB,QAAW,KACT/B,KAAKsB,gBAAgB,EAEvBU,IAAQC,IACNjC,KAAKkC,SAAWD,CAAE,IAItB,OACEE,EAACC,EAAI,KACHD,EAAA,OACEN,MAAO,CACLQ,QAAW,KACX,aAAcrC,KAAKU,KACnB,uBAAwBV,KAAKiB,kBAG/BkB,EAAA,8BAAAV,OAAAC,OAAA,GAAiCE,IAEhC5B,KAAKkC,UACJC,EAAA,uBACEG,GAAI,iBAAiBtC,KAAKC,OAC1B4B,MAAM,OACNU,YAAavC,KAAKkC,SAClBM,UAAU,eACVC,KAAMzC,KAAKU,KACXgC,eAAgB,EAChBC,UAAW,CACT,CACEC,KAAM,OACNC,QAAS,CACPC,mBAAoB,OAK1BX,EAAA,e"}

package/dist/tegel/p-65e2e26e.entry.js

@@ -0,0 +1,2 @@
+import{r as s,c as n,h as e,H as r,g as o}from"./p-0a99765f.js";const i=":root,.sdds-mode-light{--sdds-link:var(--sdds-blue-500);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-grey-900);--sdds-link-disabled:var(--sdds-grey-400)}.sdds-mode-dark{--sdds-link:var(--sdds-blue-300);--sdds-link-hover:var(--sdds-blue-400);--sdds-link-focus:var(--sdds-blue-400);--sdds-link-visited:var(--sdds-blue-100);--sdds-link-disabled:var(--sdds-grey-800)}:host(.hide){display:none;visibility:hidden}:host(.error){background-color:var(--sdds-banner-background-error)}:host(.information){background-color:var(--sdds-banner-background-info)}:host{display:flex;background-color:var(--sdds-banner-background-default);z-index:400}:host .banner-icon{padding-left:20px;padding-top:14px;padding-right:12px;color:var(--sdds-banner-prefix-default-color)}:host .banner-icon.error{color:var(--sdds-banner-prefix-error-color)}:host .banner-icon.information{color:var(--sdds-banner-prefix-info-color)}:host .banner-content{color:var(--sdds-banner-text-color);display:flex;flex-direction:column;flex-grow:1;padding:16px 0}:host .banner-content.no-icon{padding-left:16px}:host .banner-content .banner-header{font:var(--sdds-headline-06);letter-spacing:var(--sdds-headline-06-ls)}:host .banner-content slot[name=banner-subheader]{display:block;margin-top:4px;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls)}:host .banner-content .banner-link slot[name=banner-link]{display:block;width:fit-content;margin-top:16px}:host .banner-content .banner-link.no-subheader slot[name=banner-link]{margin-top:4px}:host .banner-close{color:var(--sdds-banner-x-color)}:host .banner-close button{padding-right:16px;padding-top:14px;background-color:transparent;border:none;color:var(--sdds-banner-x-color)}:host .banner-close button:hover{cursor:pointer}:host .banner-close button:focus{outline:none}:host .banner-close button:focus sdds-icon{outline:2px solid var(--sdds-link-focus)}";const d=class{constructor(e){s(this,e);this.sddsClose=n(this,"sddsClose",7);this.sddsShow=n(this,"sddsShow",7);this.handleClose=()=>{const s=this.sddsClose.emit({bannerId:this.bannerId});if(!s.defaultPrevented){this.hidden=true}};this.handleShow=()=>{const s=this.sddsShow.emit({bannerId:this.bannerId});if(!s.defaultPrevented){this.hidden=false}};this.icon=undefined;this.header=undefined;this.type="none";this.bannerId=crypto.randomUUID();this.persistent=false;this.hidden=false;this.hasSubheader=undefined;this.hasLink=undefined}async hideBanner(){this.handleClose()}async showBanner(){this.handleShow()}connectedCallback(){if(this.type==="error"){this.icon="error"}else if(this.type==="information"){this.icon="info"}const s=Array.from(this.host.children);this.hasSubheader=s.some((s=>s.slot==="banner-subheader"));this.hasLink=s.some((s=>s.slot==="banner-link"))}render(){return e(r,{role:"banner","aria-hidden":`${this.hidden}`,"aria-live":this.host.getAttribute("aria-live")?this.host.getAttribute("aria-live"):"polite","aria-atomic":this.host.getAttribute("aria-atomic"),class:`${this.type} ${this.hidden?"hide":"show"}`},this.icon&&e("div",{class:`banner-icon ${this.type}`},e("sdds-icon",{name:this.icon,size:"20px"})),e("div",{class:`banner-content ${this.type} ${!this.icon?"no-icon":""}`},this.header&&e("span",{class:`banner-header`},this.header),this.hasSubheader&&e("slot",{name:"banner-subheader"}),this.hasLink&&e("div",{class:`banner-link ${!this.hasSubheader?"no-subheader":""}`},e("slot",{name:"banner-link"}))),!this.persistent&&e("div",{class:`banner-close`},e("button",{onClick:()=>{this.handleClose()}},e("sdds-icon",{name:"cross",size:"20px"}))))}get host(){return o(this)}};d.style=i;export{d as sdds_banner};
+//# sourceMappingURL=p-65e2e26e.entry.js.map

package/dist/tegel/p-65e2e26e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsBannerCss","SddsBanner","this","handleClose","sddsCloseEvent","sddsClose","emit","bannerId","defaultPrevented","hidden","handleShow","sddsShow","crypto","randomUUID","async","connectedCallback","type","icon","children","Array","from","host","hasSubheader","some","childElement","slot","hasLink","render","h","Host","role","getAttribute","class","name","size","header","persistent","onClick"],"sources":["./src/components/banner/sdds-banner.scss?tag=sdds-banner&encapsulation=shadow","./src/components/banner/sdds-banner.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import '../../mixins/box-sizing';\n@import '../link/link-vars.scss';\n\n:host(.hide) {\n  display: none;\n  visibility: hidden;\n}\n\n:host(.error) {\n  background-color: var(--sdds-banner-background-error);\n}\n\n:host(.information) {\n  background-color: var(--sdds-banner-background-info);\n}\n\n:host {\n  display: flex;\n  background-color: var(--sdds-banner-background-default);\n  z-index: z(banner);\n\n  .banner-icon {\n    padding-left: 20px;\n    padding-top: 14px;\n    padding-right: 12px;\n    color: var(--sdds-banner-prefix-default-color);\n\n    &.error {\n      color: var(--sdds-banner-prefix-error-color);\n    }\n\n    &.information {\n      color: var(--sdds-banner-prefix-info-color);\n    }\n  }\n\n  .banner-content {\n    color: var(--sdds-banner-text-color);\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    padding: 16px 0;\n\n    &.no-icon {\n      padding-left: 16px;\n    }\n\n    .banner-header {\n      font: var(--sdds-headline-06);\n      letter-spacing: var(--sdds-headline-06-ls);\n    }\n\n    slot[name='banner-subheader'] {\n      display: block;\n      margin-top: 4px;\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n    }\n\n    .banner-link {\n      slot[name='banner-link'] {\n        display: block;\n        width: fit-content;\n        margin-top: 16px;\n      }\n\n      &.no-subheader {\n        slot[name='banner-link'] {\n          margin-top: 4px;\n        }\n      }\n    }\n  }\n\n  .banner-close {\n    color: var(--sdds-banner-x-color);\n\n    button {\n      padding-right: 16px;\n      padding-top: 14px;\n      background-color: transparent;\n      border: none;\n      color: var(--sdds-banner-x-color);\n\n      &:hover {\n        cursor: pointer;\n      }\n\n      &:focus {\n        outline: none;\n\n        sdds-icon {\n          outline: 2px solid var(--sdds-link-focus);\n        }\n      }\n    }\n  }\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n  }>;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsShow',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsShow: EventEmitter<{\n    bannerId: string;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    this.handleClose();\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    this.handleShow();\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  handleShow = () => {\n    const sddsCloseEvent = this.sddsShow.emit({\n      bannerId: this.bannerId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.hasSubheader && <slot name=\"banner-subheader\"></slot>}\n          {this.hasLink && (\n            <div class={`banner-link ${!this.hasSubheader ? 'no-subheader' : ''}`}>\n              <slot name=\"banner-link\"></slot>\n            </div>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAgB,u5D,MCQTC,EAAU,M,iGAyErBC,KAAAC,YAAc,KACZ,MAAMC,EAAiBF,KAAKG,UAAUC,KAAK,CACzCC,SAAUL,KAAKK,WAEjB,IAAKH,EAAeI,iBAAkB,CACpCN,KAAKO,OAAS,I,GAIlBP,KAAAQ,WAAa,KACX,MAAMN,EAAiBF,KAAKS,SAASL,KAAK,CACxCC,SAAUL,KAAKK,WAEjB,IAAKH,EAAeI,iBAAkB,CACpCN,KAAKO,OAAS,K,uDA/E+B,O,cAMtBG,OAAOC,a,gBAGJ,M,YAGb,M,mDAgCjBC,mBACEZ,KAAKC,a,CAKPW,mBACEZ,KAAKQ,Y,CAGPK,oBACE,GAAIb,KAAKc,OAAS,QAAS,CACzBd,KAAKe,KAAO,O,MACP,GAAIf,KAAKc,OAAS,cAAe,CACtCd,KAAKe,KAAO,M,CAEd,MAAMC,EAAWC,MAAMC,KAAKlB,KAAKmB,KAAKH,UACtChB,KAAKoB,aAAeJ,EAASK,MAAMC,GAAiBA,EAAaC,OAAS,qBAC1EvB,KAAKwB,QAAUR,EAASK,MAAMC,GAAiBA,EAAaC,OAAS,e,CAqBvEE,SACE,OACEC,EAACC,EAAI,CACHC,KAAK,SAAQ,cACA,GAAG5B,KAAKO,SAAQ,YAE3BP,KAAKmB,KAAKU,aAAa,aAAe7B,KAAKmB,KAAKU,aAAa,aAAe,SAAQ,cAEzE7B,KAAKmB,KAAKU,aAAa,eACpCC,MAAO,GAAG9B,KAAKc,QAAQd,KAAKO,OAAS,OAAS,UAE7CP,KAAKe,MACJW,EAAA,OAAKI,MAAO,eAAe9B,KAAKc,QAC9BY,EAAA,aAAWK,KAAM/B,KAAKe,KAAMiB,KAAK,UAGrCN,EAAA,OAAKI,MAAO,kBAAkB9B,KAAKc,SAASd,KAAKe,KAAO,UAAY,MACjEf,KAAKiC,QAAUP,EAAA,QAAMI,MAAO,iBAAkB9B,KAAKiC,QACnDjC,KAAKoB,cAAgBM,EAAA,QAAMK,KAAK,qBAChC/B,KAAKwB,SACJE,EAAA,OAAKI,MAAO,gBAAgB9B,KAAKoB,aAAe,eAAiB,MAC/DM,EAAA,QAAMK,KAAK,mBAIf/B,KAAKkC,YACLR,EAAA,OAAKI,MAAO,gBACVJ,EAAA,UACES,QAAS,KACPnC,KAAKC,aAAa,GAGpByB,EAAA,aAAWK,KAAK,QAAQC,KAAK,W"}

package/dist/tegel/p-6767e1f9.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as e,H as t,g as r}from"./p-0a99765f.js";import{i}from"./p-5e9e9d8a.js";const o=":host{color:var(--sdds-white)}:host sdds-header-item{display:block}:host .icon{position:relative;margin-left:-6px;left:3px;transition:all 0.2s ease-in-out}@media screen and (min-width: 992px){:host sdds-header-item{display:none}:host([persistent]) sdds-header-item{display:block}}";const a=class{constructor(e){s(this,e)}render(){const s=Object.assign({},i(this.host));return e(t,null,e("sdds-header-item",null,e("button",Object.assign({},s),e("sdds-icon",{class:"icon",name:"burger",size:"20px"}))))}get host(){return r(this)}};a.style=o;export{a as sdds_header_hamburger};
+//# sourceMappingURL=p-6767e1f9.entry.js.map

package/dist/tegel/p-6767e1f9.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["headerHamburgerCss","HeaderHamburger","render","inheritedButtonProps","Object","assign","inheritAriaAttributes","this","host","h","Host","class","name","size"],"sources":["./src/components/header/webcomponent/header-hamburger/header-hamburger.scss?tag=sdds-header-hamburger&encapsulation=shadow","./src/components/header/webcomponent/header-hamburger/header-hamburger.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n\n:host {\n  color: var(--sdds-white);\n\n  sdds-header-item {\n    display: block;\n  }\n\n  .icon {\n    position: relative;\n    margin-left: -6px;\n    left: 3px;\n    transition: all 0.2s ease-in-out;\n  }\n}\n\n@media screen and (min-width: $grid-lg) {\n  :host sdds-header-item {\n    display: none;\n  }\n\n  :host([persistent]) sdds-header-item {\n    display: block;\n  }\n}\n","import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-header-hamburger',\n  styleUrl: 'header-hamburger.scss',\n  shadow: true,\n})\nexport class HeaderHamburger {\n  @Element() host: HTMLElement;\n\n  render() {\n    const inheritedButtonProps = {\n      ...inheritAriaAttributes(this.host),\n    };\n\n    return (\n      <Host>\n        <sdds-header-item>\n          <button {...inheritedButtonProps}>\n            <sdds-icon class=\"icon\" name=\"burger\" size=\"20px\"></sdds-icon>\n          </button>\n        </sdds-header-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wFAAA,MAAMA,EAAqB,2R,MCQdC,EAAe,M,yBAG1BC,SACE,MAAMC,EAAoBC,OAAAC,OAAA,GACrBC,EAAsBC,KAAKC,OAGhC,OACEC,EAACC,EAAI,KACHD,EAAA,wBACEA,EAAA,SAAAL,OAAAC,OAAA,GAAYF,GACVM,EAAA,aAAWE,MAAM,OAAOC,KAAK,SAASC,KAAK,W"}

package/dist/tegel/p-726b317a.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as e,H as o,g as s}from"./p-0a99765f.js";import{d as n}from"./p-5e9e9d8a.js";const d=":host{display:block}:host .component ::slotted(a),:host .component ::slotted(button){all:unset;box-sizing:border-box;height:68px;width:100%;display:flex;align-items:center;gap:12px;padding:0 24px;border:none;background-color:var(--sdds-sidebar-side-menu-background-cover);font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .component ::slotted(a:focus-visible),:host .component ::slotted(button:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}:host .component:hover ::slotted(a),:host .component:hover ::slotted(button){cursor:pointer;background-color:var(--sdds-sidebar-item-state-hover)}:host .component-collapsed ::slotted(a),:host .component-collapsed ::slotted(button){padding:0;display:flex;justify-content:center;align-items:center}:host .component-selected:not(:host .component-active) ::slotted(a),:host .component-selected:not(:host .component-active) ::slotted(button){border-left:4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);padding-left:20px;background-color:var(--sdds-sidebar-item-state-selected)}@media (min-width: 992px){:host .component.component-collapsed ::slotted(a),:host .component.component-collapsed ::slotted(button){color:rgba(90, 90, 90, 0);overflow:hidden}}";const i=class{constructor(e){t(this,e);this.selected=false;this.active=false;this.collapsed=false}updateSlotted(t,e){const o=this.slotEl.assignedElements({flatten:true});const s=o[0];if(s){const o=n(s,t);if(o){e(o)}}}updateSlottedElements(){if(this.slotEl){const t=t=>t.tagName.toLowerCase()==="sdds-icon"||t.tagName.toLowerCase()==="svg";const e=t=>{t.classList.add("__sdds-side-menu-item-icon");if(this.collapsed){t.classList.add("__sdds-side-menu-item-icon-collapsed")}else{t.classList.remove("__sdds-side-menu-item-icon-collapsed")}};this.updateSlotted(t,e)}}connectedCallback(){var t;this.sideMenuEl=this.host.closest("sdds-side-menu");this.collapsed=(t=this.sideMenuEl)===null||t===void 0?void 0:t.collapsed}componentDidLoad(){this.slotEl=this.host.shadowRoot.querySelector("slot");this.updateSlottedElements();this.slotEl.addEventListener("slotchange",this.updateSlottedElements)}collapsedSideMenuEventHandeler(t){this.collapsed=t.detail.collapsed;this.updateSlottedElements()}render(){return e(o,null,e("div",{class:{component:true,"component-selected":this.selected,"component-active":this.active,"component-collapsed":this.collapsed}},e("slot",null)))}get host(){return s(this)}};i.style=d;export{i as sdds_side_menu_item};
+//# sourceMappingURL=p-726b317a.entry.js.map

package/dist/tegel/p-726b317a.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sideMenuItemCss","SddsSideMenuItem","updateSlotted","searchPredicate","mutationCallback","assignedElements","this","slotEl","flatten","firstSlottedElement","foundElement","dfs","updateSlottedElements","isIconOrSvg","element","tagName","toLowerCase","addIconClass","classList","add","collapsed","remove","connectedCallback","sideMenuEl","host","closest","_a","componentDidLoad","shadowRoot","querySelector","addEventListener","collapsedSideMenuEventHandeler","event","detail","render","h","Host","class","component","selected","active"],"sources":["./src/components/side-menu/webcomponent/side-menu-item/side-menu-item.scss?tag=sdds-side-menu-item&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-item/side-menu-item.tsx"],"sourcesContent":["@import '../theme/core/spacing/vars';\n@import '../../../../mixins/focus-state';\n\n:host {\n  display: block;\n\n  .component {\n    ::slotted(a),\n    ::slotted(button) {\n      all: unset;\n      box-sizing: border-box;\n      height: 68px;\n      width: 100%;\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 0 24px;\n      border: none;\n      background-color: var(--sdds-sidebar-side-menu-background-cover);\n      font: var(--sdds-headline-07);\n      letter-spacing: var(--sdds-headline-07-ls);\n      color: var(--sdds-sidebar-side-menu-single-item-color);\n    }\n\n    ::slotted(a:focus-visible),\n    ::slotted(button:focus-visible) {\n      @include sdds-focus-state;\n    }\n\n    &:hover {\n      ::slotted(a),\n      ::slotted(button) {\n        cursor: pointer;\n        background-color: var(--sdds-sidebar-item-state-hover);\n      }\n    }\n\n    &-collapsed {\n      ::slotted(a),\n      ::slotted(button) {\n        padding: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n    }\n\n    &-selected:not(&-active) {\n      ::slotted(a),\n      ::slotted(button) {\n        border-left: 4px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);\n        padding-left: 20px;\n        background-color: var(--sdds-sidebar-item-state-selected);\n      }\n    }\n  }\n}\n\n@media (min-width: $grid-lg) {\n  :host {\n    .component.component-collapsed {\n      ::slotted(a),\n      ::slotted(button) {\n        color: rgb(90 90 90 / 0%);\n        overflow: hidden;\n      }\n    }\n  }\n}\n","import { Component, h, Host, Element, Listen, Prop, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\nimport { dfs } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-side-menu-item',\n  styleUrl: 'side-menu-item.scss',\n  shadow: true,\n})\nexport class SddsSideMenuItem {\n  @Element() host: HTMLSddsSideMenuItemElement;\n\n  /** If the item should appear selected. */\n  @Prop() selected: boolean = false;\n\n  /** If the item should appear active. Can be used when the item is\n   * triggering a dropdown, and the dropdown is open, for example. */\n  @Prop() active: boolean = false;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  private slotEl: HTMLSlotElement;\n\n  updateSlotted(\n    searchPredicate: (element: HTMLElement) => boolean,\n    mutationCallback: (element: HTMLElement) => void,\n  ) {\n    const assignedElements = this.slotEl.assignedElements({ flatten: true });\n    const firstSlottedElement = assignedElements[0] as HTMLElement;\n    if (firstSlottedElement) {\n      const foundElement = dfs(firstSlottedElement, searchPredicate);\n      if (foundElement) {\n        mutationCallback(foundElement);\n      }\n    }\n  }\n\n  /**\n   * This function is needed because we can't use CSS selectors to style something in the light dom\n   */\n  updateSlottedElements() {\n    if (this.slotEl) {\n      const isIconOrSvg = (element) =>\n        element.tagName.toLowerCase() === 'sdds-icon' || element.tagName.toLowerCase() === 'svg';\n      const addIconClass = (element) => {\n        element.classList.add('__sdds-side-menu-item-icon');\n        if (this.collapsed) {\n          element.classList.add('__sdds-side-menu-item-icon-collapsed');\n        } else {\n          element.classList.remove('__sdds-side-menu-item-icon-collapsed');\n        }\n      };\n      this.updateSlotted(isIconOrSvg, addIconClass);\n    }\n  }\n\n  connectedCallback() {\n    // closest() will return null if side-menu-item is inside a shadowRoot that\n    // does not contain a side-menu. This is the case for the side-menu-dropdown.\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl?.collapsed;\n  }\n\n  componentDidLoad() {\n    this.slotEl = this.host.shadowRoot.querySelector('slot');\n    this.updateSlottedElements();\n    this.slotEl.addEventListener('slotchange', this.updateSlottedElements);\n  }\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandeler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n    this.updateSlottedElements();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'component': true,\n            'component-selected': this.selected,\n            'component-active': this.active,\n            'component-collapsed': this.collapsed,\n          }}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,+yC,MCSXC,EAAgB,M,uCAIC,M,YAIF,M,eAEI,K,CAM9BC,cACEC,EACAC,GAEA,MAAMC,EAAmBC,KAAKC,OAAOF,iBAAiB,CAAEG,QAAS,OACjE,MAAMC,EAAsBJ,EAAiB,GAC7C,GAAII,EAAqB,CACvB,MAAMC,EAAeC,EAAIF,EAAqBN,GAC9C,GAAIO,EAAc,CAChBN,EAAiBM,E,GAQvBE,wBACE,GAAIN,KAAKC,OAAQ,CACf,MAAMM,EAAeC,GACnBA,EAAQC,QAAQC,gBAAkB,aAAeF,EAAQC,QAAQC,gBAAkB,MACrF,MAAMC,EAAgBH,IACpBA,EAAQI,UAAUC,IAAI,8BACtB,GAAIb,KAAKc,UAAW,CAClBN,EAAQI,UAAUC,IAAI,uC,KACjB,CACLL,EAAQI,UAAUG,OAAO,uC,GAG7Bf,KAAKJ,cAAcW,EAAaI,E,EAIpCK,oB,MAGEhB,KAAKiB,WAAajB,KAAKkB,KAAKC,QAAQ,kBACpCnB,KAAKc,WAAYM,EAAApB,KAAKiB,cAAU,MAAAG,SAAA,SAAAA,EAAEN,S,CAGpCO,mBACErB,KAAKC,OAASD,KAAKkB,KAAKI,WAAWC,cAAc,QACjDvB,KAAKM,wBACLN,KAAKC,OAAOuB,iBAAiB,aAAcxB,KAAKM,sB,CAIlDmB,+BAA+BC,GAC7B1B,KAAKc,UAAYY,EAAMC,OAAOb,UAC9Bd,KAAKM,uB,CAGPsB,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACLC,UAAa,KACb,qBAAsBhC,KAAKiC,SAC3B,mBAAoBjC,KAAKkC,OACzB,sBAAuBlC,KAAKc,YAG9Be,EAAA,c"}

package/dist/tegel/p-7376bcc5.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as e,H as t}from"./p-0a99765f.js";const d=":host img,:host ::slotted(*){width:34px;height:34px;border-radius:50%}";const i=class{constructor(e){s(this,e);this.src=undefined;this.alt=undefined}render(){return e(t,null,e("slot",null),this.src&&e("img",{src:this.src,alt:this.alt}))}};i.style=d;const r=":host{display:block;font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);color:var(--sdds-sidebar-side-menu-single-item-color)}:host .subheading{color:var(--sdds-grey-500)}";const n=class{constructor(e){s(this,e);this.heading=undefined;this.subheading=undefined}render(){return e(t,null,this.heading,this.subheading&&e("div",{class:"subheading"},this.subheading))}};n.style=r;export{i as sdds_side_menu_user_image,n as sdds_side_menu_user_label};
+//# sourceMappingURL=p-7376bcc5.entry.js.map

package/dist/tegel/p-7376bcc5.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sideMenuUserImageCss","SideMenuUserImage","render","h","Host","this","src","alt","sideMenuUserLabelCss","SideMenuUserLabel","heading","subheading","class"],"sources":["./src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.scss?tag=sdds-side-menu-user-image&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.tsx","./src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.scss?tag=sdds-side-menu-user-label&encapsulation=shadow","./src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.tsx"],"sourcesContent":[":host {\n  img,\n  ::slotted(*) {\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n// TODO this component is just for the dropdown detecting that it should\n// change layout\n@Component({\n  tag: 'sdds-side-menu-user-image',\n  styleUrl: 'side-menu-user-image.scss',\n  shadow: true,\n})\nexport class SideMenuUserImage {\n  /** The image source. */\n  @Prop() src: string;\n\n  /** The image alt text. */\n  @Prop() alt: string;\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        {this.src && <img src={this.src} alt={this.alt} />}\n      </Host>\n    );\n  }\n}\n",":host {\n  display: block;\n  font: var(--sdds-headline-07);\n  letter-spacing: var(--sdds-headline-07-ls);\n  color: var(--sdds-sidebar-side-menu-single-item-color);\n\n  .subheading {\n    color: var(--sdds-grey-500);\n  }\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user-label',\n  styleUrl: 'side-menu-user-label.scss',\n  shadow: true,\n})\nexport class SideMenuUserLabel {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  render() {\n    return (\n      <Host>\n        {this.heading}\n        {this.subheading && <div class=\"subheading\">{this.subheading}</div>}\n      </Host>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAuB,yE,MCShBC,EAAiB,M,+DAO5BC,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,aACCE,KAAKC,KAAOH,EAAA,OAAKG,IAAKD,KAAKC,IAAKC,IAAKF,KAAKE,M,aCpBnD,MAAMC,EAAuB,iM,MCOhBC,EAAiB,M,0EAO5BP,SACE,OACEC,EAACC,EAAI,KACFC,KAAKK,QACLL,KAAKM,YAAcR,EAAA,OAAKS,MAAM,cAAcP,KAAKM,Y"}

package/dist/tegel/p-766c0c4b.entry.js

@@ -0,0 +1,2 @@
+import{r as d,c as s,h as o,H as a,g as l}from"./p-0a99765f.js";const i=":root,.sdds-mode-light{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-white);--sdds-modal-text:var(--sdds-grey-958);--sdds-modal-icon:var(--sdds-black);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='black'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-mode-dark{--sdds-modal-backdrop:rgba(0 0 0 / 40%);--sdds-modal-background:var(--sdds-grey-900);--sdds-modal-text:var(--sdds-grey-50);--sdds-modal-icon:var(--sdds-white);--sdds-modal-icon-native:url(\"data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40338 2.34308C3.11048 2.05019 2.63561 2.05019 2.34272 2.34308C2.04982 2.63598 2.04982 3.11085 2.34272 3.40374L6.93897 8L2.34283 12.5961C2.04994 12.889 2.04994 13.3639 2.34283 13.6568C2.63572 13.9497 3.1106 13.9497 3.40349 13.6568L7.99963 9.06066L12.5958 13.6568C12.8887 13.9497 13.3635 13.9497 13.6564 13.6568C13.9493 13.3639 13.9493 12.889 13.6564 12.5961L9.06029 8L13.6565 3.40376C13.9494 3.11086 13.9494 2.63599 13.6565 2.3431C13.3636 2.0502 12.8888 2.0502 12.5959 2.3431L7.99963 6.93934L3.40338 2.34308Z' fill='white'/%3E%3C/svg%3E%0A\");--sdds-modal-scrollbar:var(--sdds-grey-300);--sdds-modal-scrollbar-track:var(--sdds-grey-300);--sdds-modal-scrollbar-thumb:var(--sdds-grey-500)}.sdds-modal{box-sizing:border-box;background-color:var(--sdds-modal-background);margin:auto;position:relative;border-radius:4px;padding:16px;max-height:85vh;overflow-y:auto;}.sdds-modal *{box-sizing:border-box}.sdds-modal::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-track{background-color:var(--sdds-grey-300);border-radius:0 1em 1em 0}.sdds-modal::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500);border-radius:0 1em 1em 0}.sdds-modal__actions-sticky{overflow:hidden}.sdds-modal__actions-sticky .sdds-modal-body{font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:96px;margin:0 -16px 0 0;max-height:calc(85vh - 36px);overflow-y:auto}.sdds-modal__actions-sticky .sdds-modal-actions{position:absolute;bottom:-1px;left:0;right:0;background-color:var(--sdds-modal-background);padding:var(--sdds-spacing-element-16);display:flex;gap:16px}.sdds-modal__actions-static .sdds-modal-actions{background-color:var(--sdds-modal-background);display:flex;gap:16px}@media (min-width: 320px){.sdds-modal-xs{width:100%}.sdds-modal-sm{width:100%}.sdds-modal-md{width:100%}.sdds-modal-lg{width:100%}}@media (min-width: 672px){.sdds-modal-xs{width:75%}.sdds-modal-sm{width:62.5%}.sdds-modal-md{width:75%}.sdds-modal-lg{width:100%}}@media (min-width: 1056px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:43.75%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1312px){.sdds-modal-xs{width:31.25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:62.5%}.sdds-modal-lg{width:75%}}@media (min-width: 1584px){.sdds-modal-xs{width:25%}.sdds-modal-sm{width:37.5%}.sdds-modal-md{width:50%}.sdds-modal-lg{width:75%}}@media (max-width: 320px){.sdds-modal-md,.sdds-modal-lg,.sdds-modal-sm{height:100%}.sdds-modal-md slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-lg slot[name=sdds-modal-actions]::slotted(*),.sdds-modal-sm slot[name=sdds-modal-actions]::slotted(*){display:flex}}.sdds-modal-header{display:flex;padding-bottom:var(--sdds-spacing-element-8);position:sticky;top:0;background-color:var(--sdds-modal-background);z-index:1}.sdds-modal-header::before{content:\" \";position:absolute;height:16px;top:-16px;width:100%;background-color:var(--sdds-modal-background)}.sdds-modal-headline{color:var(--sdds-modal-text);font:var(--sdds-headline-05);letter-spacing:var(--sdds-headline-05-ls);margin:0;flex:1;color:var(--sdds-modal-text)}.sdds-modal-body{color:var(--sdds-modal-text);font:var(--sdds-body-01);letter-spacing:var(--sdds-body-01-ls);padding-bottom:40px;overflow-y:visible;padding-right:16px;}.sdds-modal-body::-webkit-scrollbar{width:5px;background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-track{background-color:var(--sdds-grey-300)}.sdds-modal-body::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-500)}@media (min-width: 1056px){.sdds-modal-body{padding-right:64px}}.sdds-modal-backdrop{box-sizing:border-box;left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}.sdds-modal-backdrop *{box-sizing:border-box}@media (max-width: 320px){.sdds-modal-backdrop{padding:0}}.sdds-modal-backdrop.show{display:flex}.sdds-modal-backdrop.hide{display:none}button.sdds-modal-close{background-color:transparent;border:0;padding:0;appearance:unset}.sdds-modal-close{display:inline-block;height:auto;color:var(--sdds-modal-icon);cursor:pointer}.sdds-modal-close:focus{outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media (min-width: 320px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn{display:inline-block;height:auto;background-repeat:no-repeat;cursor:pointer}@media (min-width: 320px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-16)}}@media (min-width: 1056px){.sdds-modal-close-btn{margin-left:var(--sdds-spacing-element-48)}}.sdds-modal-close-btn svg{fill:var(--sdds-modal-icon)}.sdds-modal-overflow{overflow:hidden}:host{left:0;top:0;position:fixed;height:100%;width:100%;z-index:600;background-color:var(--sdds-modal-backdrop);padding:0 16px}@media (max-width: 320px){:host{padding:0}}:host.show{display:flex}:host.hide{display:none}:host .sdds-modal-close{border:none;background-color:transparent}:host .sdds-modal-close-btn{border:none;background-color:transparent}:host(.show){display:flex}:host(.hide){display:none}";const t=class{constructor(o){d(this,o);this.sddsClose=s(this,"sddsClose",7);this.handleClose=d=>{const s=this.sddsClose.emit(d);if(!s.defaultPrevented){this.isShown=false}};this.handleShow=()=>{this.isShown=true};this.initializeReferenceElement=d=>{if(d){d.addEventListener("click",(d=>{if(this.isShown){this.handleClose(d)}else{this.handleShow()}}))}};this.setShowButton=()=>{var d;if(this.selector||this.referenceEl){const s=(d=this.referenceEl)!==null&&d!==void 0?d:document.querySelector(this.selector);if(s){this.initializeReferenceElement(s)}}};this.prevent=false;this.size="md";this.actions="static";this.selector=undefined;this.referenceEl=undefined;this.show=undefined;this.isShown=false}async showModal(){this.handleShow()}async closeModal(){this.handleClose()}connectedCallback(){if(this.show!==null){this.isShown=this.show}this.setDissmissButtons();this.setShowButton()}handleOverlayClick(d){const s=d.composedPath();const o=s[0];if(o.classList[0]==="sdds-modal-close"||o.classList[0]==="sdds-modal-backdrop"&&this.prevent===false){this.handleClose(d)}}setDissmissButtons(){this.host.querySelectorAll("[data-dismiss-modal]").forEach((d=>{d.addEventListener("click",(d=>{this.handleClose(d)}))}))}render(){return o(a,{onClick:d=>{this.handleOverlayClick(d)},class:`sdds-modal-backdrop ${this.isShown?"show":"hide"}`},o("div",{class:`sdds-modal ${this.actions?`sdds-modal__actions-${this.actions}`:""} ${this.size?`sdds-modal-${this.size}`:""} `},o("div",{class:"sdds-modal-header"},o("slot",{name:"sdds-modal-headline"}),o("button",{class:"sdds-modal-close","aria-label":"close",onClick:()=>this.handleClose()},o("sdds-icon",{name:"cross",size:"20px"}))),o("div",{class:"sdds-modal-body"},o("slot",{name:"sdds-modal-body"})),o("div",{class:"sdds-modal-actions"},o("slot",{name:"sdds-modal-actions"}))))}get host(){return l(this)}};t.style=i;export{t as sdds_modal};
+//# sourceMappingURL=p-766c0c4b.entry.js.map

package/dist/tegel/p-766c0c4b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["modalCss","Modal","this","handleClose","event","closeEvent","sddsClose","emit","defaultPrevented","isShown","handleShow","initializeReferenceElement","referenceEl","addEventListener","setShowButton","selector","_a","document","querySelector","async","connectedCallback","show","setDissmissButtons","handleOverlayClick","targetList","composedPath","target","classList","prevent","host","querySelectorAll","forEach","dismissButton","render","h","Host","onClick","class","actions","size","name"],"sources":["./src/components/modal/modal.scss?tag=sdds-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@import '../../mixins/z-index';\n@import 'modal-vars';\n@import '../../mixins/box-sizing';\n@import '../../mixins/focus-state';\n\n//TODO: Find a way to create a mixin in spacings that can be used for screen size in rem\n//Media rules doesn't calculate correct with using rem\n// Screen breakpoints\n$screen-s: 320px; //320px\n$screen-md: 672px; // 672px\n$screen-l: 1056px; //1056px\n$screen-xl: 1312px; //1312px\n$screen-xxl: 1584px; //1584px\n\n$modals: (\n  $screen-s: (\n    xs: 100%,\n    sm: 100%,\n    md: 100%,\n    lg: 100%,\n  ),\n  $screen-md: (\n    xs: 75%,\n    sm: 62.5%,\n    md: 75%,\n    lg: 100%,\n  ),\n  $screen-l: (\n    xs: 31.25%,\n    sm: 43.75%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xl: (\n    xs: 31.25%,\n    sm: 37.5%,\n    md: 62.5%,\n    lg: 75%,\n  ),\n  $screen-xxl: (\n    xs: 25%,\n    sm: 37.5%,\n    md: 50%,\n    lg: 75%,\n  ),\n);\n\n/* MIXINS */\n\n@mixin modal-scroll-inner {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n  }\n}\n\n@mixin modal-scroll-outer {\n  /* SCROLL STUFF */\n\n  /* width */\n  &::-webkit-scrollbar {\n    width: 5px;\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Track */\n  &::-webkit-scrollbar-track {\n    background-color: var(--sdds-grey-300);\n    border-radius: 0 1em 1em 0;\n  }\n\n  /* Handle */\n  &::-webkit-scrollbar-thumb {\n    background-color: var(--sdds-grey-500);\n    border-radius: 0 1em 1em 0;\n  }\n}\n\n@mixin modal-host {\n  left: 0;\n  top: 0;\n  position: fixed;\n  height: 100%;\n  width: 100%;\n  z-index: z(modal);\n  background-color: var(--sdds-modal-backdrop);\n  padding: 0 16px;\n\n  @media (max-width: $screen-s) {\n    padding: 0;\n  }\n\n  &.show {\n    display: flex;\n  }\n\n  &.hide {\n    display: none;\n  }\n}\n\n@mixin modal-header {\n  display: flex;\n  padding-bottom: var(--sdds-spacing-element-8);\n  position: sticky;\n  top: 0;\n  background-color: var(--sdds-modal-background);\n  z-index: 1;\n\n  &::before {\n    content: ' ';\n    position: absolute;\n    height: 16px;\n    top: -16px;\n    width: 100%;\n    background-color: var(--sdds-modal-background);\n  }\n}\n\n@mixin modal-headline {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-headline-05);\n  letter-spacing: var(--sdds-headline-05-ls);\n  margin: 0;\n  flex: 1;\n}\n\n@mixin modal-body {\n  color: var(--sdds-modal-text);\n  font: var(--sdds-body-01);\n  letter-spacing: var(--sdds-body-01-ls);\n  padding-bottom: 40px;\n  overflow-y: visible;\n  padding-right: 16px;\n  @include modal-scroll-inner;\n\n  @media (min-width: $screen-l) {\n    padding-right: 64px;\n  }\n}\n\n/* MODAL STYLING */\n\n.sdds-modal {\n  @include sdds-box-sizing;\n\n  background-color: var(--sdds-modal-background);\n  margin: auto;\n  position: relative;\n  border-radius: 4px;\n  padding: 16px;\n  max-height: 85vh;\n  overflow-y: auto;\n\n  @include modal-scroll-outer;\n\n  &__actions-sticky {\n    overflow: hidden;\n\n    .sdds-modal-body {\n      font: var(--sdds-body-01);\n      letter-spacing: var(--sdds-body-01-ls);\n      padding-bottom: 96px;\n      margin: 0 -16px 0 0;\n      max-height: calc(85vh - 36px);\n      overflow-y: auto;\n    }\n\n    .sdds-modal-actions {\n      position: absolute;\n      bottom: -1px;\n      left: 0;\n      right: 0;\n      background-color: var(--sdds-modal-background);\n      padding: var(--sdds-spacing-element-16);\n      display: flex;\n      gap: 16px;\n    }\n  }\n\n  &__actions-static {\n    .sdds-modal-actions {\n      background-color: var(--sdds-modal-background);\n      display: flex;\n      gap: 16px;\n    }\n  }\n}\n\n//Width of modals in different breakpoints\n@each $screen, $modals in $modals {\n  @media (min-width: $screen) {\n    @each $modal, $value in $modals {\n      .sdds-modal-#{$modal} {\n        width: $value;\n      }\n    }\n  }\n}\n\n@media (max-width: $screen-s) {\n  .sdds-modal-md,\n  .sdds-modal-lg,\n  .sdds-modal-sm {\n    height: 100%;\n\n    slot[name='sdds-modal-actions']::slotted(*) {\n      display: flex;\n    }\n  }\n}\n\n/* MODAL SUBELEMENTS */\n\n.sdds-modal-header {\n  @include modal-header;\n}\n\n.sdds-modal-headline {\n  @include modal-headline;\n\n  color: var(--sdds-modal-text);\n}\n\n.sdds-modal-body {\n  @include modal-body;\n}\n\n.sdds-modal-backdrop {\n  @include sdds-box-sizing;\n  @include modal-host;\n}\n\nbutton.sdds-modal-close {\n  background-color: transparent;\n  border: 0;\n  padding: 0;\n  appearance: unset;\n}\n\n.sdds-modal-close {\n  display: inline-block;\n  height: auto;\n  color: var(--sdds-modal-icon);\n  cursor: pointer;\n\n  &:focus {\n    @include sdds-focus-state;\n  }\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n}\n\n//web component with nested svg\n.sdds-modal-close-btn {\n  display: inline-block;\n  height: auto;\n  background-repeat: no-repeat;\n  cursor: pointer;\n\n  @media (min-width: $screen-s) {\n    margin-left: var(--sdds-spacing-element-16);\n  }\n\n  @media (min-width: $screen-l) {\n    margin-left: var(--sdds-spacing-element-48);\n  }\n\n  svg {\n    fill: var(--sdds-modal-icon);\n  }\n}\n\n.sdds-modal-overflow {\n  overflow: hidden;\n}\n\n/* WEB COMPONENT STUFF */\n\n:host {\n  @include modal-host;\n\n  .sdds-modal-close {\n    border: none;\n    background-color: transparent;\n  }\n\n  .sdds-modal-close-btn {\n    border: none;\n    background-color: transparent;\n  }\n}\n\n:host(.show) {\n  display: flex;\n}\n\n:host(.hide) {\n  display: none;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Element,\n  Method,\n  State,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\n@Component({\n  tag: 'sdds-modal',\n  styleUrl: 'modal.scss',\n  shadow: true,\n})\nexport class Modal {\n  @Element() host: HTMLElement;\n\n  /** Disables closing modal on clicking on overlay area. */\n  @Prop() prevent: boolean = false;\n\n  /** Size of modal  */\n  @Prop() size: 'xs' | 'sm' | 'md' | 'lg' = 'md';\n\n  /** Sticky or Static Actions  */\n  @Prop() actions: 'sticky' | 'static' = 'static';\n\n  /** CSS selector for the element that will show the modal. */\n  @Prop() selector: string;\n\n  /** Element that will show the modal (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls whether the modal is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside. */\n  @Prop() show: boolean;\n\n  // State that keeps track of show/closed state for the modal.\n  @State() isShown: boolean = false;\n\n  /** Shows the modal.  */\n  @Method()\n  async showModal() {\n    this.handleShow();\n  }\n\n  /** Closes the modal. */\n  @Method()\n  async closeModal() {\n    this.handleClose();\n  }\n\n  /** Emitts when the modal is closed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<any>;\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n    this.setDissmissButtons();\n    this.setShowButton();\n  }\n\n  /** Emits a close event and then close the modal if it is not prevented. */\n  handleClose = (event?) => {\n    const closeEvent = this.sddsClose.emit(event);\n    if (!closeEvent.defaultPrevented) {\n      this.isShown = false;\n    }\n  };\n\n  handleShow = () => {\n    this.isShown = true;\n  };\n\n  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */\n  handleOverlayClick(event) {\n    const targetList = event.composedPath();\n    const target = targetList[0];\n    if (\n      target.classList[0] === 'sdds-modal-close' ||\n      (target.classList[0] === 'sdds-modal-backdrop' && this.prevent === false)\n    ) {\n      this.handleClose(event);\n    }\n  }\n\n  /** Adds an event listener to the reference element that shows/closes the modal. */\n  initializeReferenceElement = (referenceEl) => {\n    if (referenceEl) {\n      referenceEl.addEventListener('click', (event) => {\n        if (this.isShown) {\n          this.handleClose(event);\n        } else {\n          this.handleShow();\n        }\n      });\n    }\n  };\n\n  /** Check if there is a referenceElement or selector and adds event listener to them if so. */\n  setShowButton = () => {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n      if (referenceEl) {\n        this.initializeReferenceElement(referenceEl);\n      }\n    }\n  };\n\n  /** Adds an event listener to the dismiss buttons that closes the modal. */\n  setDissmissButtons() {\n    this.host.querySelectorAll('[data-dismiss-modal]').forEach((dismissButton) => {\n      dismissButton.addEventListener('click', (event) => {\n        this.handleClose(event);\n      });\n    });\n  }\n\n  render() {\n    return (\n      <Host\n        onClick={(event) => {\n          this.handleOverlayClick(event);\n        }}\n        class={`sdds-modal-backdrop ${this.isShown ? 'show' : 'hide'}`}\n      >\n        <div\n          class={`sdds-modal ${this.actions ? `sdds-modal__actions-${this.actions}` : ''} ${\n            this.size ? `sdds-modal-${this.size}` : ''\n          } `}\n        >\n          <div class=\"sdds-modal-header\">\n            <slot name=\"sdds-modal-headline\"></slot>\n            <button class=\"sdds-modal-close\" aria-label=\"close\" onClick={() => this.handleClose()}>\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n\n          <div class=\"sdds-modal-body\">\n            <slot name=\"sdds-modal-body\"></slot>\n          </div>\n\n          <div class=\"sdds-modal-actions\">\n            <slot name=\"sdds-modal-actions\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,++M,MCiBJC,EAAK,M,8DAuDhBC,KAAAC,YAAeC,IACb,MAAMC,EAAaH,KAAKI,UAAUC,KAAKH,GACvC,IAAKC,EAAWG,iBAAkB,CAChCN,KAAKO,QAAU,K,GAInBP,KAAAQ,WAAa,KACXR,KAAKO,QAAU,IAAI,EAgBrBP,KAAAS,2BAA8BC,IAC5B,GAAIA,EAAa,CACfA,EAAYC,iBAAiB,SAAUT,IACrC,GAAIF,KAAKO,QAAS,CAChBP,KAAKC,YAAYC,E,KACZ,CACLF,KAAKQ,Y,OAObR,KAAAY,cAAgB,K,MACd,GAAIZ,KAAKa,UAAYb,KAAKU,YAAa,CACrC,MAAMA,GAAcI,EAAAd,KAAKU,eAAW,MAAAI,SAAA,EAAAA,EAAIC,SAASC,cAAchB,KAAKa,UACpE,GAAIH,EAAa,CACfV,KAAKS,2BAA2BC,E,iBA5FX,M,UAGe,K,aAGH,S,oFAaX,K,CAI5BO,kBACEjB,KAAKQ,Y,CAKPS,mBACEjB,KAAKC,a,CAYPiB,oBACE,GAAIlB,KAAKmB,OAAS,KAAM,CACtBnB,KAAKO,QAAUP,KAAKmB,I,CAEtBnB,KAAKoB,qBACLpB,KAAKY,e,CAgBPS,mBAAmBnB,GACjB,MAAMoB,EAAapB,EAAMqB,eACzB,MAAMC,EAASF,EAAW,GAC1B,GACEE,EAAOC,UAAU,KAAO,oBACvBD,EAAOC,UAAU,KAAO,uBAAyBzB,KAAK0B,UAAY,MACnE,CACA1B,KAAKC,YAAYC,E,EA4BrBkB,qBACEpB,KAAK2B,KAAKC,iBAAiB,wBAAwBC,SAASC,IAC1DA,EAAcnB,iBAAiB,SAAUT,IACvCF,KAAKC,YAAYC,EAAM,GACvB,G,CAIN6B,SACE,OACEC,EAACC,EAAI,CACHC,QAAUhC,IACRF,KAAKqB,mBAAmBnB,EAAM,EAEhCiC,MAAO,uBAAuBnC,KAAKO,QAAU,OAAS,UAEtDyB,EAAA,OACEG,MAAO,cAAcnC,KAAKoC,QAAU,uBAAuBpC,KAAKoC,UAAY,MAC1EpC,KAAKqC,KAAO,cAAcrC,KAAKqC,OAAS,OAG1CL,EAAA,OAAKG,MAAM,qBACTH,EAAA,QAAMM,KAAK,wBACXN,EAAA,UAAQG,MAAM,mBAAkB,aAAY,QAAQD,QAAS,IAAMlC,KAAKC,eACtE+B,EAAA,aAAWM,KAAK,QAAQD,KAAK,WAIjCL,EAAA,OAAKG,MAAM,mBACTH,EAAA,QAAMM,KAAK,qBAGbN,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMM,KAAK,yB"}

package/dist/tegel/p-785aa4e2.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as d}from"./p-0a99765f.js";const s='.textfield-input-lg.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16)}.textfield-input-lg.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-lg.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-lg.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-lg.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-md.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-md.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-md.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-md.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-md.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-md.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-input-sm.sc-sdds-textfield{all:unset;border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textfield-color);background-color:var(--sdds-textfield-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-16)}.textfield-input-sm.sc-sdds-textfield::placeholder{opacity:1;color:var(--sdds-textfield-placeholder)}.textfield-input-sm.sc-sdds-textfield:focus::placeholder{color:var(--sdds-textfield-placeholder-focus-color)}.textfield-input-sm.sc-sdds-textfield:disabled{cursor:not-allowed;background-color:var(--sdds-textfield-background-disabled);color:var(--sdds-textfield-color-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled::placeholder{color:var(--sdds-textfield-placeholder-disabled)}.textfield-input-sm.sc-sdds-textfield:disabled~.textfield-label-inside.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-container.sc-sdds-textfield{border-radius:4px 4px 0 0;display:flex;position:relative;height:56px;box-sizing:border-box;background-color:var(--sdds-textfield-background);border-bottom:1px solid var(--sdds-textfield-border-bottom);transition:border-bottom-color 200ms ease}.textfield-container.sc-sdds-textfield:hover{border-bottom-color:var(--sdds-textfield-border-bottom-hover)}.form-textfield-md.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:48px}.form-textfield-sm.sc-sdds-textfield .textfield-container.sc-sdds-textfield{height:40px}.textfield-input-container.sc-sdds-textfield{position:relative;width:100%}.textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textfield-label-color)}.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);position:absolute;pointer-events:none;color:var(--sdds-textfield-label-inside-color);left:16px}.form-textfield.sc-sdds-textfield{display:block;min-width:208px}.form-textfield-nomin.sc-sdds-textfield{min-width:auto}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:20px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{top:16px}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield .sc-sdds-textfield::placeholder{color:transparent}.form-textfield.textfield-container-label-inside.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textfield-placeholder-focus-color)}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-sm.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-md.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:8px}.form-textfield.textfield-container-label-inside.textfield-focus.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield,.form-textfield.textfield-container-label-inside.textfield-data.sc-sdds-textfield .textfield-input-lg.sc-sdds-textfield~.textfield-label-inside.sc-sdds-textfield{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.textfield-bar.sc-sdds-textfield{position:absolute;width:100%}.textfield-bar.sc-sdds-textfield::before,.textfield-bar.sc-sdds-textfield::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-textfield-bar);transition:0.35s ease all}.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-md.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:46px}.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-sm.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{top:40px}.textfield-bar.sc-sdds-textfield::before{left:50%}.textfield-bar.sc-sdds-textfield::after{right:50%}.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.textfield-focus.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{width:50%}.textfield-helper.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;justify-content:space-between;flex-basis:100%;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textfield-helper)}.textfield-helper.sc-sdds-textfield .textfield-textcounter.sc-sdds-textfield{margin-left:auto}.form-textfield-disabled.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:transparent}.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-prefix.sc-sdds-textfield>*.sc-sdds-textfield,.form-textfield-disabled.sc-sdds-textfield .textfield-slot-wrap-suffix.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-disabled)}.form-textfield-disabled.sc-sdds-textfield .textfield-label-outside.sc-sdds-textfield>*.sc-sdds-textfield{color:var(--sdds-textfield-label-disabled)}.textfield-icon__readonly.sc-sdds-textfield{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textfield-icon-read-only-label-color)}.textfield-icon__readonly-label.sc-sdds-textfield{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;white-space:nowrap;border-radius:4px 0 4px 4px;background-color:var(--sdds-textfield-icon-read-only-label-background)}.form-textfield-readonly.sc-sdds-textfield{pointer-events:none}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-icon__readonly.sc-sdds-textfield:hover~.textfield-icon__readonly-label.sc-sdds-textfield{display:block}.form-textfield-readonly.sc-sdds-textfield .textfield-input.sc-sdds-textfield{padding-right:54px;background-color:transparent}.form-textfield-success.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-success)}.form-textfield-error.sc-sdds-textfield .textfield-helper.sc-sdds-textfield{color:var(--sdds-textfield-helper-error)}.form-textfield-error.sc-sdds-textfield .textfield-container.sc-sdds-textfield{border-bottom-color:var(--sdds-textfield-border-bottom-error)}.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::before,.form-textfield-error.sc-sdds-textfield .textfield-bar.sc-sdds-textfield::after{background:var(--sdds-textfield-bar-error)}.textfield-helper-error-state.sc-sdds-textfield{display:flex;gap:8px;flex-wrap:nowrap}.textfield-textcounter.sc-sdds-textfield{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textfield-textcounter);float:right}.textfield-textcounter.sc-sdds-textfield .textfield-textcounter-divider.sc-sdds-textfield{color:var(--sdds-textfield-textcounter-divider)}.textfield-slot-wrap-prefix.sc-sdds-textfield,.textfield-slot-wrap-suffix.sc-sdds-textfield{align-self:center;font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);margin:0 0 0 14px;color:var(--sdds-textfield-ps-color)}.textfield-slot-wrap-prefix.sc-sdds-textfield-s>:not(sdds-icon),.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 0 0 2px}.textfield-slot-wrap-prefix.textfield-error.sc-sdds-textfield,.textfield-slot-wrap-suffix.textfield-error.sc-sdds-textfield{color:var(--sdds-textfield-ps-color-error)}.textfield-slot-wrap-suffix.sc-sdds-textfield{margin:0 14px 0 0}.textfield-slot-wrap-suffix.sc-sdds-textfield-s>:not(sdds-icon){margin:0 2px 0 0}';const i=class{constructor(d){e(this,d);this.sddsChange=t(this,"sddsChange",6);this.sddsInput=t(this,"sddsInput",6);this.sddsFocus=t(this,"sddsFocus",6);this.sddsBlur=t(this,"sddsBlur",6);this.type="text";this.labelPosition="no-label";this.label="";this.helper=undefined;this.placeholder="";this.value="";this.disabled=false;this.readOnly=false;this.size="lg";this.modeVariant=null;this.noMinWidth=false;this.name="";this.state="default";this.maxLength=undefined;this.autofocus=false;this.focusInput=undefined}handleChange(e){this.sddsChange.emit(e)}handleInput(e){this.sddsInput.emit(e);this.value=e.target.value}handleFocus(e){this.textInput.focus();this.focusInput=true;this.sddsFocus.emit(e)}handleBlur(e){this.focusInput=false;this.sddsBlur.emit(e)}render(){var e;return d("div",{class:`\n        ${this.noMinWidth?"form-textfield-nomin":""}\n        ${this.focusInput&&!this.disabled?"form-textfield textfield-focus":" form-textfield"}\n        ${this.value?"textfield-data":""}\n        ${this.labelPosition==="inside"&&this.size!=="sm"?"textfield-container-label-inside":""}\n        ${this.disabled?"form-textfield-disabled":""}\n        ${this.readOnly?"form-textfield-readonly":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n        ${this.size==="md"?"form-textfield-md":""}\n        ${this.size==="sm"?"form-textfield-sm":""}\n        ${this.state==="error"||this.state==="success"?`form-textfield-${this.state}`:""}\n        `},this.labelPosition==="outside"&&d("div",{class:"textfield-label-outside"},d("div",null,this.label)),d("div",{onClick:()=>this.textInput.focus(),class:"textfield-container"},d("div",{class:`textfield-slot-wrap-prefix textfield-${this.state}`},d("slot",{name:"prefix"})),d("div",{class:"textfield-input-container"},d("input",{ref:e=>this.textInput=e,class:`textfield-input textfield-input-${this.size}`,type:this.type,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,autofocus:this.autofocus,maxlength:this.maxLength,name:this.name,onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e),onFocus:e=>{if(!this.readOnly){this.handleFocus(e)}},onBlur:e=>{if(!this.readOnly){this.handleBlur(e)}}}),this.labelPosition==="inside"&&this.size!=="sm"&&d("label",{class:"textfield-label-inside"},this.label)),d("div",{class:"textfield-bar"}),d("div",{class:`textfield-slot-wrap-suffix textfield-${this.state}`},d("slot",{name:"suffix"})),d("span",{class:"textfield-icon__readonly"},d("sdds-icon",{name:"edit_inactive",size:"20px"})),d("span",{class:"textfield-icon__readonly-label"},"This field is non-editable")),d("div",{class:"textfield-helper"},this.state==="error"&&d("div",{class:"textfield-helper-error-state"},d("sdds-icon",{name:"error",size:"16px"}),this.helper),this.state!=="error"&&this.helper,this.maxLength>0&&d("div",{class:"textfield-textcounter"},this.value===null?0:(e=this.value)===null||e===void 0?void 0:e.length,d("span",{class:"textfield-textcounter-divider"}," / "),this.maxLength)))}};i.style=s;export{i as sdds_textfield};
+//# sourceMappingURL=p-785aa4e2.entry.js.map

package/dist/tegel/p-785aa4e2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textfieldCss","Textfield","handleChange","event","this","sddsChange","emit","handleInput","sddsInput","value","target","handleFocus","textInput","focus","focusInput","sddsFocus","handleBlur","sddsBlur","render","h","class","noMinWidth","disabled","labelPosition","size","readOnly","modeVariant","state","label","onClick","name","ref","inputEl","type","readonly","placeholder","autofocus","maxlength","maxLength","onInput","onChange","onFocus","onBlur","helper","_a","length"],"sources":["./src/components/textfield/textfield.scss?tag=sdds-textfield&encapsulation=scoped","./src/components/textfield/textfield.tsx"],"sourcesContent":["@mixin textfield-base {\n  all: unset;\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-textfield-color);\n  background-color: var(--sdds-textfield-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textfield-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textfield-placeholder-focus-color);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    background-color: var(--sdds-textfield-background-disabled);\n    color: var(--sdds-textfield-color-disabled);\n\n    &::placeholder {\n      color: var(--sdds-textfield-placeholder-disabled);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Sizes\n.textfield-input-lg {\n  @include textfield-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.textfield-input-md {\n  @include textfield-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.textfield-input-sm {\n  @include textfield-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.textfield-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-textfield-background);\n  border-bottom: 1px solid var(--sdds-textfield-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  &:hover {\n    border-bottom-color: var(--sdds-textfield-border-bottom-hover);\n  }\n\n  .form-textfield-md & {\n    height: 48px;\n  }\n\n  .form-textfield-sm & {\n    height: 40px;\n  }\n}\n\n.textfield-input-container {\n  position: relative;\n  width: 100%;\n}\n\n//Textfield label\n\n.textfield-label-outside > * {\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-textfield-label-color);\n}\n\n.textfield-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-textfield-label-inside-color);\n  left: 16px;\n}\n\n@mixin placeholder-label {\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-textfield-placeholder-focus-color);\n  }\n}\n\n@mixin label-inside-transition {\n  transition: 0.1s ease all;\n}\n\n//Form control\n.form-textfield {\n  display: block;\n  min-width: 208px;\n\n  &-nomin {\n    min-width: auto;\n  }\n}\n\n//Textfield container with label inside\n//Handling position, focus and transition for label inside\n.form-textfield.textfield-container-label-inside {\n  .textfield-input-lg {\n    padding-top: var(--sdds-spacing-element-24);\n    padding-bottom: 15px;\n\n    ~ .textfield-label-inside {\n      top: 20px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-md {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  .textfield-input-sm {\n    padding-top: var(--sdds-spacing-element-20);\n    padding-bottom: 11px;\n\n    ~ .textfield-label-inside {\n      top: 16px;\n    }\n\n    @include placeholder-label;\n  }\n\n  &.textfield-focus,\n  &.textfield-data {\n    .textfield-input-sm ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-md ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 8px;\n    }\n\n    .textfield-input-lg ~ .textfield-label-inside {\n      font: var(--sdds-detail-07);\n      letter-spacing: var(--sdds-detail-07-ls);\n\n      @include label-inside-transition;\n\n      top: 12px;\n    }\n  }\n}\n\n//Textfield bottom bar when in focus\n.textfield-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-textfield-bar);\n    transition: 0.35s ease all;\n\n    .form-textfield-md & {\n      top: 46px;\n    }\n\n    .form-textfield-sm & {\n      top: 40px;\n    }\n  }\n\n  &::before {\n    left: 50%;\n  }\n\n  &::after {\n    right: 50%;\n  }\n\n  .textfield-focus &::before,\n  .textfield-focus &::after {\n    width: 50%;\n  }\n}\n\n//Helper text\n.textfield-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n\n  & .textfield-textcounter {\n    margin-left: auto;\n  }\n\n  flex-basis: 100%;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textfield-helper);\n}\n\n//Disabled state\n.form-textfield-disabled {\n  .textfield-container {\n    border-bottom-color: transparent;\n  }\n\n  .textfield-slot-wrap-prefix,\n  .textfield-slot-wrap-suffix {\n    > * {\n      color: var(--sdds-textfield-ps-color-disabled);\n    }\n  }\n\n  .textfield-label-outside {\n    > * {\n      color: var(--sdds-textfield-label-disabled);\n    }\n  }\n}\n\n//Read only state\n\n.textfield-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textfield-icon-read-only-label-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n    background-color: var(--sdds-textfield-icon-read-only-label-background);\n  }\n}\n\n.form-textfield-readonly {\n  pointer-events: none;\n\n  .textfield-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textfield-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n}\n\n//Success state\n.form-textfield-success {\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-success);\n  }\n}\n\n//Error State\n.form-textfield-error {\n  .textfield-helper {\n    color: var(--sdds-textfield-helper-error);\n  }\n\n  .textfield-container {\n    border-bottom-color: var(--sdds-textfield-border-bottom-error);\n  }\n\n  .textfield-bar {\n    &::before,\n    &::after {\n      background: var(--sdds-textfield-bar-error);\n    }\n  }\n}\n\n// .textfield-textcounter {\n.textfield-helper-error-state {\n  display: flex;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n\n.textfield-textcounter {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textfield-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    // @include type-style('detail-05');\n    color: var(--sdds-textfield-textcounter-divider);\n  }\n}\n\n.textfield-slot-wrap-prefix,\n.textfield-slot-wrap-suffix {\n  align-self: center;\n  font: var(--sdds-detail-02);\n  letter-spacing: var(--sdds-detail-02-ls);\n  margin: 0 0 0 14px;\n  color: var(--sdds-textfield-ps-color);\n\n  &::slotted(:not(sdds-icon)) {\n    margin: 0 0 0 2px;\n  }\n\n  &.textfield-error {\n    color: var(--sdds-textfield-ps-color-error);\n  }\n}\n\n.textfield-slot-wrap-suffix {\n  margin: 0 14px 0 0;\n\n  &::slotted(:not(sdds-icon)) {\n    margin: 0 2px 0 0;\n  }\n}\n","import { Component, h, State, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textfield',\n  styleUrl: 'textfield.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textfield {\n  /** Textinput for focus state */\n  textInput?: HTMLInputElement;\n\n  /** Which input type, text, password or similar */\n  @Prop({ reflect: true }) type: 'text' | 'password' = 'text';\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop({ reflect: true }) value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Size of the input */\n  @Prop() size: 'sm' | 'md' | 'lg' = 'lg';\n\n  /** Mode variant of the textfield */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** With setting */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Name property */\n  @Prop() name = '';\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Autofocus for input */\n  @Prop() autofocus: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textfield */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Input event for the textfield */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textfield */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textInput.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  /** Blur event for the textfield */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  /** Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleBlur(event): void {\n    this.focusInput = false;\n    this.sddsBlur.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        ${this.noMinWidth ? 'form-textfield-nomin' : ''}\n        ${this.focusInput && !this.disabled ? 'form-textfield textfield-focus' : ' form-textfield'}\n        ${this.value ? 'textfield-data' : ''}\n        ${\n          this.labelPosition === 'inside' && this.size !== 'sm'\n            ? 'textfield-container-label-inside'\n            : ''\n        }\n        ${this.disabled ? 'form-textfield-disabled' : ''}\n        ${this.readOnly ? 'form-textfield-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.size === 'md' ? 'form-textfield-md' : ''}\n        ${this.size === 'sm' ? 'form-textfield-sm' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `form-textfield-${this.state}` : ''}\n        `}\n      >\n        {this.labelPosition === 'outside' && (\n          <div class=\"textfield-label-outside\">\n            <div>{this.label}</div>\n          </div>\n        )}\n        <div onClick={() => this.textInput.focus()} class=\"textfield-container\">\n          <div class={`textfield-slot-wrap-prefix textfield-${this.state}`}>\n            <slot name=\"prefix\" />\n          </div>\n\n          <div class=\"textfield-input-container\">\n            <input\n              ref={(inputEl) => (this.textInput = inputEl as HTMLInputElement)}\n              class={`textfield-input textfield-input-${this.size}`}\n              type={this.type}\n              disabled={this.disabled}\n              readonly={this.readOnly}\n              placeholder={this.placeholder}\n              value={this.value}\n              autofocus={this.autofocus}\n              maxlength={this.maxLength}\n              name={this.name}\n              onInput={(event) => this.handleInput(event)}\n              onChange={(event) => this.handleChange(event)}\n              onFocus={(event) => {\n                if (!this.readOnly) {\n                  this.handleFocus(event);\n                }\n              }}\n              onBlur={(event) => {\n                if (!this.readOnly) {\n                  this.handleBlur(event);\n                }\n              }}\n            />\n\n            {this.labelPosition === 'inside' && this.size !== 'sm' && (\n              <label class=\"textfield-label-inside\">{this.label}</label>\n            )}\n          </div>\n          <div class=\"textfield-bar\"></div>\n\n          <div class={`textfield-slot-wrap-suffix textfield-${this.state}`}>\n            <slot name=\"suffix\" />\n          </div>\n          <span class=\"textfield-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\" size=\"20px\"></sdds-icon>\n          </span>\n          <span class=\"textfield-icon__readonly-label\">This field is non-editable</span>\n        </div>\n\n        <div class=\"textfield-helper\">\n          {this.state === 'error' && (\n            <div class=\"textfield-helper-error-state\">\n              <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>\n              {this.helper}\n            </div>\n          )}\n          {this.state !== 'error' && this.helper}\n\n          {this.maxLength > 0 && (\n            <div class=\"textfield-textcounter\">\n              {this.value === null ? 0 : this.value?.length}\n              <span class=\"textfield-textcounter-divider\"> / </span>\n              {this.maxLength}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,02X,MCQRC,EAAS,M,uLAKiC,O,mBAGM,W,WAGnC,G,uCAMM,G,WAGW,G,cAGb,M,cAGA,M,UAGO,K,iBAGY,K,gBAGjB,M,UAGf,G,WAGkC,U,wCAMpB,M,0BAc7BC,aAAaC,GACXC,KAAKC,WAAWC,KAAKH,E,CAavBI,YAAYJ,GACVC,KAAKI,UAAUF,KAAKH,GACpBC,KAAKK,MAAQN,EAAMO,OAAOD,K,CAa5BE,YAAYR,GACVC,KAAKQ,UAAUC,QACfT,KAAKU,WAAa,KAClBV,KAAKW,UAAUT,KAAKH,E,CAatBa,WAAWb,GACTC,KAAKU,WAAa,MAClBV,KAAKa,SAASX,KAAKH,E,CAGrBe,S,MACE,OACEC,EAAA,OACEC,MAAO,aACLhB,KAAKiB,WAAa,uBAAyB,eAC3CjB,KAAKU,aAAeV,KAAKkB,SAAW,iCAAmC,8BACvElB,KAAKK,MAAQ,iBAAmB,eAEhCL,KAAKmB,gBAAkB,UAAYnB,KAAKoB,OAAS,KAC7C,mCACA,eAEJpB,KAAKkB,SAAW,0BAA4B,eAC5ClB,KAAKqB,SAAW,0BAA4B,eAC5CrB,KAAKsB,cAAgB,KAAO,qBAAqBtB,KAAKsB,cAAgB,eACtEtB,KAAKoB,OAAS,KAAO,oBAAsB,eAC3CpB,KAAKoB,OAAS,KAAO,oBAAsB,eAC3CpB,KAAKuB,QAAU,SAAWvB,KAAKuB,QAAU,UAAY,kBAAkBvB,KAAKuB,QAAU,gBAGvFvB,KAAKmB,gBAAkB,WACtBJ,EAAA,OAAKC,MAAM,2BACTD,EAAA,WAAMf,KAAKwB,QAGfT,EAAA,OAAKU,QAAS,IAAMzB,KAAKQ,UAAUC,QAASO,MAAM,uBAChDD,EAAA,OAAKC,MAAO,wCAAwChB,KAAKuB,SACvDR,EAAA,QAAMW,KAAK,YAGbX,EAAA,OAAKC,MAAM,6BACTD,EAAA,SACEY,IAAMC,GAAa5B,KAAKQ,UAAYoB,EACpCZ,MAAO,mCAAmChB,KAAKoB,OAC/CS,KAAM7B,KAAK6B,KACXX,SAAUlB,KAAKkB,SACfY,SAAU9B,KAAKqB,SACfU,YAAa/B,KAAK+B,YAClB1B,MAAOL,KAAKK,MACZ2B,UAAWhC,KAAKgC,UAChBC,UAAWjC,KAAKkC,UAChBR,KAAM1B,KAAK0B,KACXS,QAAUpC,GAAUC,KAAKG,YAAYJ,GACrCqC,SAAWrC,GAAUC,KAAKF,aAAaC,GACvCsC,QAAUtC,IACR,IAAKC,KAAKqB,SAAU,CAClBrB,KAAKO,YAAYR,E,GAGrBuC,OAASvC,IACP,IAAKC,KAAKqB,SAAU,CAClBrB,KAAKY,WAAWb,E,KAKrBC,KAAKmB,gBAAkB,UAAYnB,KAAKoB,OAAS,MAChDL,EAAA,SAAOC,MAAM,0BAA0BhB,KAAKwB,QAGhDT,EAAA,OAAKC,MAAM,kBAEXD,EAAA,OAAKC,MAAO,wCAAwChB,KAAKuB,SACvDR,EAAA,QAAMW,KAAK,YAEbX,EAAA,QAAMC,MAAM,4BACVD,EAAA,aAAWW,KAAK,gBAAgBN,KAAK,UAEvCL,EAAA,QAAMC,MAAM,kCAAgC,+BAG9CD,EAAA,OAAKC,MAAM,oBACRhB,KAAKuB,QAAU,SACdR,EAAA,OAAKC,MAAM,gCACTD,EAAA,aAAWW,KAAK,QAAQN,KAAK,SAC5BpB,KAAKuC,QAGTvC,KAAKuB,QAAU,SAAWvB,KAAKuC,OAE/BvC,KAAKkC,UAAY,GAChBnB,EAAA,OAAKC,MAAM,yBACRhB,KAAKK,QAAU,KAAO,GAAImC,EAAAxC,KAAKK,SAAK,MAAAmC,SAAA,SAAAA,EAAEC,OACvC1B,EAAA,QAAMC,MAAM,iCAA+B,OAC1ChB,KAAKkC,Y"}

package/dist/tegel/{p-25af32a7.entry.js → p-78f323de.entry.js}

@@ -1,2 +1,2 @@
-import{r as s,c as a,h as t,H as e,g as r}from"./p-0b4eba86.js";const d=':host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--sdds-data-table-toolbar-background);color:var(--sdds-data-table-color);padding:0 var(--sdds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .sdds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .sdds-table__title{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding-top:var(--sdds-spacing-element-16);text-align:left}:host .sdds-table__actionbar{display:flex;align-self:center;gap:8px}:host .sdds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .sdds-table__searchbar::after{content:"";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--sdds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .sdds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .sdds-table__searchbar:focus-within,:host .sdds-table__searchbar.sdds-table__searchbar--active{width:208px;background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar:focus-within:hover,:host .sdds-table__searchbar.sdds-table__searchbar--active:hover{background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar .sdds-table__searchbar-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-data-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .sdds-table__searchbar .sdds-table__searchbar-input :focus{background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar:hover{background-color:var(--sdds-data-table-toolbar-searchbar-background-hover)}:host .sdds-table__searchbar .sdds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.sdds-table--compact){height:56px}';const o=["compactDesign","noMinWidth","verticalDividers"];const i=class{constructor(t){s(this,t);this.tableFilteringTerm=a(this,"tableFilteringTerm",7);this.tableTitle="";this.enableFiltering=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.tableId=""}tablePropsChangedEventListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>o.includes(s))).forEach((a=>{if(typeof this[a]==="undefined"){throw new Error(`Table prop is not supported: ${a}`)}this[a]=s.detail[a]}))}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){o.forEach((s=>{this[s]=this.tableEl[s]}))}searchFunction(s){const a=s.currentTarget.value.toLowerCase();const t=s.currentTarget.parentElement;this.tableFilteringTerm.emit([this.tableId,a]);if(a.length>0){t.classList.add("sdds-table__searchbar--active")}else{t.classList.remove("sdds-table__searchbar--active")}}render(){return t(e,{class:this.compactDesign?"sdds-table--compact":""},t("div",{class:"sdds-table__upper-bar-flex"},t("caption",{class:"sdds-table__title"},this.tableTitle),t("div",{class:"sdds-table__actionbar"},this.enableFiltering&&t("div",{class:"sdds-table__searchbar"},t("input",{class:"sdds-table__searchbar-input",type:"text",onKeyUp:s=>this.searchFunction(s)}),t("span",{class:"sdds-table__searchbar-icon"},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:"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z",fill:"currentColor"})))),t("slot",{name:"sdds-table__actionbar"}))))}get host(){return r(this)}};i.style=d;export{i as sdds_table_toolbar};
-//# sourceMappingURL=p-25af32a7.entry.js.map
+import{r as s,c as a,h as t,H as e,g as r}from"./p-0a99765f.js";const d=':host{box-sizing:border-box;display:table-caption;position:relative;background-color:var(--sdds-data-table-toolbar-background);color:var(--sdds-data-table-color);padding:0 var(--sdds-spacing-element-16);height:64px;border-top-left-radius:4px;border-top-right-radius:4px}:host *{box-sizing:border-box}:host .sdds-table__upper-bar-flex{width:100%;height:100%;display:flex;justify-content:space-between}:host .sdds-table__title{font:var(--sdds-headline-07);letter-spacing:var(--sdds-headline-07-ls);padding-top:var(--sdds-spacing-element-16);text-align:left}:host .sdds-table__actionbar{display:flex;align-self:center;gap:8px}:host .sdds-table__searchbar{display:flex;align-self:center;position:relative;height:40px;width:40px;border-radius:4px 4px 0 0;transition:background-color 250ms ease, width 250ms ease;overflow:hidden;background-color:transparent}:host .sdds-table__searchbar::after{content:"";width:100%;height:2px;position:absolute;bottom:0;background-color:var(--sdds-blue-400);transform:scaleX(0);transition:transform 150ms ease}:host .sdds-table__searchbar:focus-within::after{transform:scaleX(100%)}:host .sdds-table__searchbar:focus-within,:host .sdds-table__searchbar.sdds-table__searchbar--active{width:208px;background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar:focus-within:hover,:host .sdds-table__searchbar.sdds-table__searchbar--active:hover{background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar .sdds-table__searchbar-input{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);color:var(--sdds-data-table-color);z-index:1;width:100%;height:100%;border:none;padding:0 36px 0 16px;background-color:transparent;outline:none;cursor:pointer}:host .sdds-table__searchbar .sdds-table__searchbar-input :focus{background-color:var(--sdds-data-table-toolbar-searchbar-background)}:host .sdds-table__searchbar:hover{background-color:var(--sdds-data-table-toolbar-searchbar-background-hover)}:host .sdds-table__searchbar .sdds-table__searchbar-icon{z-index:0;position:absolute;right:9px;top:9px;width:20px;height:20px}:host(.sdds-table--compact){height:56px}';const o=["compactDesign","noMinWidth","verticalDividers"];const i=class{constructor(t){s(this,t);this.sddsFilter=a(this,"sddsFilter",6);this.tableTitle="";this.enableFiltering=false;this.verticalDividers=false;this.compactDesign=false;this.noMinWidth=false;this.whiteBackground=false;this.tableId=""}internalSddsPropChangeListener(s){if(this.tableId===s.detail.tableId){s.detail.changed.filter((s=>o.includes(s))).forEach((a=>{if(typeof this[a]==="undefined"){throw new Error(`Table prop is not supported: ${a}`)}this[a]=s.detail[a]}))}}connectedCallback(){this.tableEl=this.host.closest("sdds-table");this.tableId=this.tableEl.tableId}componentWillLoad(){o.forEach((s=>{this[s]=this.tableEl[s]}))}searchFunction(s){const a=s.currentTarget.value.toLowerCase();const t=s.currentTarget.parentElement;this.sddsFilter.emit([this.tableId,a]);if(a.length>0){t.classList.add("sdds-table__searchbar--active")}else{t.classList.remove("sdds-table__searchbar--active")}}render(){return t(e,{class:this.compactDesign?"sdds-table--compact":""},t("div",{class:"sdds-table__upper-bar-flex"},t("caption",{class:"sdds-table__title"},this.tableTitle),t("div",{class:"sdds-table__actionbar"},this.enableFiltering&&t("div",{class:"sdds-table__searchbar"},t("input",{class:"sdds-table__searchbar-input",type:"text",onKeyUp:s=>this.searchFunction(s)}),t("span",{class:"sdds-table__searchbar-icon"},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:"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z",fill:"currentColor"})))),t("slot",{name:"sdds-table__actionbar"}))))}get host(){return r(this)}};i.style=d;export{i as sdds_table_toolbar};
+//# sourceMappingURL=p-78f323de.entry.js.map

package/dist/tegel/p-78f323de.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tableToolbarCss","relevantTableProps","TableToolbar","internalSddsPropChangeListener","event","this","tableId","detail","changed","filter","changedProp","includes","forEach","Error","connectedCallback","tableEl","host","closest","componentWillLoad","tablePropName","searchFunction","searchTerm","currentTarget","value","toLowerCase","sddsTableSearchBar","parentElement","sddsFilter","emit","length","classList","add","remove","render","h","Host","class","compactDesign","tableTitle","enableFiltering","type","onKeyUp","fill","xmlns","viewBox","d","name"],"sources":["./src/components/data-table/table-toolbar/table-toolbar.scss?tag=sdds-table-toolbar&encapsulation=shadow","./src/components/data-table/table-toolbar/table-toolbar.tsx"],"sourcesContent":["@import '../../../mixins/box-sizing';\n\n:host {\n  @include sdds-box-sizing;\n\n  display: table-caption;\n  position: relative;\n  background-color: var(--sdds-data-table-toolbar-background);\n  color: var(--sdds-data-table-color);\n  padding: 0 var(--sdds-spacing-element-16);\n  height: 64px;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n\n  .sdds-table__upper-bar-flex {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .sdds-table__title {\n    font: var(--sdds-headline-07);\n    letter-spacing: var(--sdds-headline-07-ls);\n    padding-top: var(--sdds-spacing-element-16);\n    text-align: left;\n  }\n\n  .sdds-table__actionbar {\n    display: flex;\n    align-self: center;\n    gap: 8px;\n  }\n\n  .sdds-table__searchbar {\n    display: flex;\n    align-self: center;\n    position: relative;\n    height: 40px;\n    width: 40px;\n    border-radius: 4px 4px 0 0;\n    transition: background-color 250ms ease, width 250ms ease;\n    overflow: hidden;\n    background-color: transparent;\n\n    &::after {\n      content: '';\n      width: 100%;\n      height: 2px;\n      position: absolute;\n      bottom: 0;\n      background-color: var(--sdds-blue-400);\n      transform: scaleX(0);\n      transition: transform 150ms ease;\n    }\n\n    &:focus-within {\n      &::after {\n        transform: scaleX(100%);\n      }\n    }\n\n    &:focus-within,\n    &.sdds-table__searchbar--active {\n      width: 208px;\n      background-color: var(--sdds-data-table-toolbar-searchbar-background);\n\n      &:hover {\n        background-color: var(--sdds-data-table-toolbar-searchbar-background);\n      }\n    }\n\n    .sdds-table__searchbar-input {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      color: var(--sdds-data-table-color);\n      z-index: 1;\n      width: 100%;\n      height: 100%;\n      border: none;\n      padding: 0 36px 0 16px;\n      background-color: transparent;\n      outline: none;\n      cursor: pointer;\n\n      :focus {\n        background-color: var(--sdds-data-table-toolbar-searchbar-background);\n      }\n    }\n\n    &:hover {\n      background-color: var(--sdds-data-table-toolbar-searchbar-background-hover);\n    }\n\n    .sdds-table__searchbar-icon {\n      z-index: 0;\n      position: absolute;\n      right: 9px;\n      top: 9px;\n      width: 20px;\n      height: 20px;\n    }\n  }\n}\n\n:host(.sdds-table--compact) {\n  height: 56px;\n}\n","import {\n  Component,\n  h,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Element,\n} from '@stencil/core';\nimport { InternalSddsTablePropChange } from '../table/table';\n\nconst relevantTableProps: InternalSddsTablePropChange['changed'] = [\n  'compactDesign',\n  'noMinWidth',\n  'verticalDividers',\n];\n\n@Component({\n  tag: 'sdds-table-toolbar',\n  styleUrl: 'table-toolbar.scss',\n  shadow: true,\n})\nexport class TableToolbar {\n  /** Adds title to the data-table */\n  @Prop({ reflect: true }) tableTitle: string = '';\n\n  /** Enables preview of searchbar */\n  @Prop({ reflect: true }) enableFiltering: boolean = false;\n\n  @State() verticalDividers: boolean = false;\n\n  @State() compactDesign: boolean = false;\n\n  @State() noMinWidth: boolean = false;\n\n  @State() whiteBackground: boolean = false;\n\n  @State() tableId: string = '';\n\n  @Element() host: HTMLElement;\n\n  tableEl: HTMLSddsTableElement;\n\n  /** Used for sending users input to main parent <sdds-table> component, can also be listened to in order to implement custom sorting logic. */\n  @Event({\n    eventName: 'sddsFilter',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsFilter: EventEmitter<any>;\n\n  @Listen('internalSddsTablePropChange', { target: 'body' })\n  internalSddsPropChangeListener(event: CustomEvent<InternalSddsTablePropChange>) {\n    if (this.tableId === event.detail.tableId) {\n      event.detail.changed\n        .filter((changedProp) => relevantTableProps.includes(changedProp))\n        .forEach((changedProp) => {\n          if (typeof this[changedProp] === 'undefined') {\n            throw new Error(`Table prop is not supported: ${changedProp}`);\n          }\n          this[changedProp] = event.detail[changedProp];\n        });\n    }\n  }\n\n  connectedCallback() {\n    this.tableEl = this.host.closest('sdds-table');\n    this.tableId = this.tableEl.tableId;\n  }\n\n  componentWillLoad() {\n    relevantTableProps.forEach((tablePropName) => {\n      this[tablePropName] = this.tableEl[tablePropName];\n    });\n  }\n\n  searchFunction(event) {\n    const searchTerm = event.currentTarget.value.toLowerCase();\n    const sddsTableSearchBar = event.currentTarget.parentElement;\n\n    this.sddsFilter.emit([this.tableId, searchTerm]);\n\n    if (searchTerm.length > 0) {\n      sddsTableSearchBar.classList.add('sdds-table__searchbar--active');\n    } else {\n      sddsTableSearchBar.classList.remove('sdds-table__searchbar--active');\n    }\n  }\n\n  render() {\n    return (\n      <Host class={this.compactDesign ? 'sdds-table--compact' : ''}>\n        <div class=\"sdds-table__upper-bar-flex\">\n          <caption class=\"sdds-table__title\">{this.tableTitle}</caption>\n          <div class=\"sdds-table__actionbar\">\n            {this.enableFiltering && (\n              <div class=\"sdds-table__searchbar\">\n                <input\n                  class=\"sdds-table__searchbar-input\"\n                  type=\"text\"\n                  onKeyUp={(event) => this.searchFunction(event)}\n                />\n                <span class=\"sdds-table__searchbar-icon\">\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=\"M12.942 1.985c-6.051 0-10.957 4.905-10.957 10.957 0 6.051 4.906 10.957 10.957 10.957 2.666 0 5.109-.952 7.008-2.534l8.332 8.331a1 1 0 1 0 1.414-1.414l-8.331-8.331a10.912 10.912 0 0 0 2.534-7.01c0-6.05-4.905-10.956-10.957-10.956ZM3.985 12.942a8.957 8.957 0 1 1 17.914 0 8.957 8.957 0 0 1-17.914 0Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </span>\n              </div>\n            )}\n            <slot name=\"sdds-table__actionbar\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"gEAAA,MAAMA,EAAkB,2nECaxB,MAAMC,EAA6D,CACjE,gBACA,aACA,oB,MAQWC,EAAY,M,gFAEuB,G,qBAGM,M,sBAEf,M,mBAEH,M,gBAEH,M,qBAEK,M,aAET,E,CAgB3BC,+BAA+BC,GAC7B,GAAIC,KAAKC,UAAYF,EAAMG,OAAOD,QAAS,CACzCF,EAAMG,OAAOC,QACVC,QAAQC,GAAgBT,EAAmBU,SAASD,KACpDE,SAASF,IACR,UAAWL,KAAKK,KAAiB,YAAa,CAC5C,MAAM,IAAIG,MAAM,gCAAgCH,I,CAElDL,KAAKK,GAAeN,EAAMG,OAAOG,EAAY,G,EAKrDI,oBACET,KAAKU,QAAUV,KAAKW,KAAKC,QAAQ,cACjCZ,KAAKC,QAAUD,KAAKU,QAAQT,O,CAG9BY,oBACEjB,EAAmBW,SAASO,IAC1Bd,KAAKc,GAAiBd,KAAKU,QAAQI,EAAc,G,CAIrDC,eAAehB,GACb,MAAMiB,EAAajB,EAAMkB,cAAcC,MAAMC,cAC7C,MAAMC,EAAqBrB,EAAMkB,cAAcI,cAE/CrB,KAAKsB,WAAWC,KAAK,CAACvB,KAAKC,QAASe,IAEpC,GAAIA,EAAWQ,OAAS,EAAG,CACzBJ,EAAmBK,UAAUC,IAAI,gC,KAC5B,CACLN,EAAmBK,UAAUE,OAAO,gC,EAIxCC,SACE,OACEC,EAACC,EAAI,CAACC,MAAO/B,KAAKgC,cAAgB,sBAAwB,IACxDH,EAAA,OAAKE,MAAM,8BACTF,EAAA,WAASE,MAAM,qBAAqB/B,KAAKiC,YACzCJ,EAAA,OAAKE,MAAM,yBACR/B,KAAKkC,iBACJL,EAAA,OAAKE,MAAM,yBACTF,EAAA,SACEE,MAAM,8BACNI,KAAK,OACLC,QAAUrC,GAAUC,KAAKe,eAAehB,KAE1C8B,EAAA,QAAME,MAAM,8BACVF,EAAA,OAAKQ,KAAK,OAAOC,MAAM,6BAA6BC,QAAQ,aAC1DV,EAAA,oBACY,UAAS,YACT,UACVW,EAAE,2SACFH,KAAK,oBAMfR,EAAA,QAAMY,KAAK,4B"}

package/dist/tegel/p-81ae5f85.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as t,h as a}from"./p-0a99765f.js";const s='.textarea-container.sc-sdds-textarea{border-radius:4px 4px 0 0;position:relative;box-sizing:border-box;height:auto;width:100%;min-width:208px;display:inline-flex;background-color:transparent;flex-flow:row wrap;border-bottom:0}.textarea-container.no-min-width.sc-sdds-textarea{min-width:unset}.textarea-container.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea{position:relative;width:unset;min-width:100%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before,.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after{content:"";height:2px;width:0;position:absolute;background:var(--sdds-textarea-bar);transition:0.35s ease all}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before{left:50%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after{right:50%}.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::after,.textarea-container.sc-sdds-textarea:not(.textarea-disabled) .textarea-wrapper.sc-sdds-textarea::before{top:calc(100% - 2px)}.textarea-input.sc-sdds-textarea{border-radius:4px 4px 0 0;width:100%;box-sizing:border-box;margin:0;border:none;outline:none;height:100%;color:var(--sdds-textarea-color);background-color:var(--sdds-textarea-background);font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);padding:var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);display:block;resize:vertical;border-bottom:1px solid var(--sdds-textarea-border-bottom);transition:border-bottom-color 200ms ease}.textarea-input.sc-sdds-textarea::placeholder{opacity:1;color:var(--sdds-textarea-placeholder)}.textarea-input.sc-sdds-textarea:focus::placeholder{color:var(--sdds-textarea-placeholder-focus-color)}.textarea-input.sc-sdds-textarea:disabled{background-color:var(--sdds-textarea-disabled-background);color:var(--sdds-textarea-disabled-color);cursor:not-allowed}.textarea-input.sc-sdds-textarea:disabled::placeholder{color:var(--sdds-textarea-disabled-placeholder)}.textarea-input.sc-sdds-textarea:disabled~.textfield-label-inside.sc-sdds-textarea{color:var(--sdds-textarea-disabled-label)}.textarea-input.sc-sdds-textarea::-webkit-resizer{display:none}.textarea-input.sc-sdds-textarea:hover{border-bottom-color:var(--sdds-textarea-border-bottom-hover)}.textarea-resizer-icon.sc-sdds-textarea{color:var(--sdds-textarea-resize-icon);position:absolute;display:block;bottom:2px;right:1px;padding-bottom:2px;padding-right:2px;pointer-events:none;background-color:var(--sdds-textarea-background)}.textarea-resizer-icon.sc-sdds-textarea svg.sc-sdds-textarea{display:block}.textarea-label.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:block;z-index:1;margin-bottom:var(--sdds-spacing-element-8);color:var(--sdds-textarea-label-color)}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-02);letter-spacing:var(--sdds-detail-02-ls);transition:0.1s ease all;color:var(--sdds-textarea-label-inside-color);position:absolute;top:var(--sdds-spacing-element-20);left:var(--sdds-spacing-element-16)}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea .sc-sdds-textarea::placeholder{color:transparent}.textarea-container.textarea-label-inside.sc-sdds-textarea .textarea-input.sc-sdds-textarea:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-textarea-placeholder-focus-color)}.textarea-container.textarea-focus.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.textarea-container.textarea-focus.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::before,.textarea-container.textarea-focus.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::after{width:50%}.textarea-container.textarea-data.textarea-label-inside.sc-sdds-textarea .textarea-label.sc-sdds-textarea{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);top:var(--sdds-spacing-element-8)}.textarea-textcounter.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter);float:right;flex-basis:100%;text-align:right;padding-top:var(--sdds-spacing-element-4)}.textarea-textcounter.sc-sdds-textarea .textfield-textcounter-divider.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-textarea-textcounter-divider)}.textarea-helper.sc-sdds-textarea{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);display:flex;gap:8px;align-items:center;padding-top:var(--sdds-spacing-element-4);color:var(--sdds-textarea-helper);flex-grow:2;flex-basis:auto}.textarea-helper.sc-sdds-textarea~.textarea-textcounter.sc-sdds-textarea{flex-basis:auto}.textarea-success.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:var(--sdds-textarea-border-bottom-success)}.textarea-error.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:var(--sdds-textarea-border-bottom-error)}.textarea-error.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::after,.textarea-error.sc-sdds-textarea .textarea-wrapper.sc-sdds-textarea::before{background:var(--sdds-textarea-bar-error)}.textarea-error.sc-sdds-textarea .textarea-helper.sc-sdds-textarea{color:var(--sdds-textarea-helper-error)}.textarea-disabled.sc-sdds-textarea .textarea-input.sc-sdds-textarea{border-bottom-color:transparent}.textarea-disabled.sc-sdds-textarea .textarea-label.sc-sdds-textarea{color:var(--sdds-textarea-disabled-label)}.textarea-icon__readonly.sc-sdds-textarea{display:none;position:absolute;right:18px;top:18px;color:var(--sdds-textarea-icon-read-only-color)}.textarea-icon__readonly-label.sc-sdds-textarea{display:none;position:absolute;right:18px;top:48px;font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);padding:8px;color:var(--sdds-textarea-icon-read-only-label-color);background-color:var(--sdds-textarea-icon-read-only-label-background);white-space:nowrap;border-radius:4px 0 4px 4px}.textarea-readonly.sc-sdds-textarea{pointer-events:none}.textarea-readonly.sc-sdds-textarea .textarea-icon__readonly.sc-sdds-textarea{display:block}.textarea-readonly.sc-sdds-textarea .textarea-icon__readonly.sc-sdds-textarea:hover~.textarea-icon__readonly-label.sc-sdds-textarea{display:block}.textarea-readonly.sc-sdds-textarea .textfield-input.sc-sdds-textarea{padding-right:54px;background-color:transparent}.textarea-readonly.sc-sdds-textarea .textfield-container.sc-sdds-textarea{background-color:transparent}';const r=class{constructor(a){e(this,a);this.sddsChange=t(this,"sddsChange",6);this.sddsBlur=t(this,"sddsBlur",6);this.sddsInput=t(this,"sddsInput",6);this.sddsFocus=t(this,"sddsFocus",6);this.label="";this.name="";this.helper=undefined;this.cols=undefined;this.rows=undefined;this.labelPosition="no-label";this.placeholder="";this.value="";this.disabled=false;this.readOnly=false;this.state="default";this.maxLength=undefined;this.modeVariant=null;this.autoFocus=false;this.noMinWidth=false;this.focusInput=undefined}handleChange(e){this.sddsChange.emit(e)}handleBlur(e){this.sddsBlur.emit(e);this.focusInput=false}handleInput(e){this.sddsInput.emit(e);this.value=e.target.value}handleFocus(e){this.textEl.focus();this.focusInput=true;this.sddsFocus.emit(e)}render(){var e;return a("div",{class:`\n        textarea-container\n        ${this.labelPosition==="inside"?"textarea-label-inside":""}\n        ${this.focusInput?"textarea-focus":""}\n        ${this.disabled?"textarea-disabled":""}\n        ${this.readOnly?"textarea-readonly":""}\n        ${this.modeVariant!==null?`sdds-mode-variant-${this.modeVariant}`:""}\n        ${this.value?"textarea-data":""}\n        ${this.state==="error"||this.state==="success"?`textarea-${this.state}`:""}\n        ${this.noMinWidth?"no-min-width":""}\n        `},this.labelPosition!=="no-label"&&a("span",{class:"textarea-label"},this.label),a("div",{class:"textarea-wrapper"},a("textarea",{class:"textarea-input",ref:e=>this.textEl=e,disabled:this.disabled,readonly:this.readOnly,placeholder:this.placeholder,value:this.value,name:this.name,autofocus:this.autoFocus,maxlength:this.maxLength,cols:this.cols,rows:this.rows,onFocus:e=>{if(!this.readOnly){this.handleFocus(e)}},onBlur:e=>{if(!this.readOnly){this.handleBlur(e)}},onInput:e=>this.handleInput(e),onChange:e=>this.handleChange(e)}),a("span",{class:"textarea-resizer-icon"},a("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z",fill:"currentColor"}))),a("span",{class:"textarea-icon__readonly"},a("sdds-icon",{name:"edit_inactive"})),a("span",{class:"textarea-icon__readonly-label"},"This field is non-editable")),a("span",{class:"textarea-helper"},this.state==="error"&&a("sdds-icon",{name:"error",size:"16px"}),this.helper),this.maxLength>0&&a("div",{class:"textarea-textcounter"},this.value===null?0:(e=this.value)===null||e===void 0?void 0:e.length,a("span",{class:"textfield-textcounter-divider"}," / ")," ",this.maxLength))}};r.style=s;export{r as sdds_textarea};
+//# sourceMappingURL=p-81ae5f85.entry.js.map

package/dist/tegel/p-81ae5f85.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["textareaCss","Textarea","handleChange","event","this","sddsChange","emit","handleBlur","sddsBlur","focusInput","handleInput","sddsInput","value","target","handleFocus","textEl","focus","sddsFocus","render","h","class","labelPosition","disabled","readOnly","modeVariant","state","noMinWidth","label","ref","inputEl","readonly","placeholder","name","autofocus","autoFocus","maxlength","maxLength","cols","rows","onFocus","onBlur","onInput","onChange","width","height","viewBox","fill","xmlns","d","size","helper","_a","length"],"sources":["./src/components/textarea/textarea.scss?tag=sdds-textarea&encapsulation=scoped","./src/components/textarea/textarea.tsx"],"sourcesContent":["@mixin textfield-base {\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-textarea-color);\n  background-color: var(--sdds-textarea-background);\n\n  &::placeholder {\n    opacity: 1;\n    color: var(--sdds-textarea-placeholder);\n  }\n\n  &:focus::placeholder {\n    color: var(--sdds-textarea-placeholder-focus-color);\n  }\n\n  &:disabled {\n    background-color: var(--sdds-textarea-disabled-background);\n    color: var(--sdds-textarea-disabled-color);\n    cursor: not-allowed;\n\n    &::placeholder {\n      color: var(--sdds-textarea-disabled-placeholder);\n    }\n\n    ~ .textfield-label-inside {\n      color: var(--sdds-textarea-disabled-label);\n    }\n  }\n}\n\n@mixin placeholder-label {\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-textarea-placeholder-focus-color);\n  }\n}\n\n.textarea-container {\n  //@extend .sdds-textfield-container;\n  border-radius: 4px 4px 0 0;\n  position: relative;\n  box-sizing: border-box;\n\n  //@extend end\n\n  height: auto;\n  width: 100%;\n  min-width: 208px;\n  display: inline-flex;\n  background-color: transparent;\n  flex-flow: row wrap;\n  border-bottom: 0;\n\n  &.no-min-width {\n    min-width: unset;\n  }\n}\n\n.textarea-container {\n  .textarea-wrapper {\n    position: relative;\n    width: unset;\n    min-width: 100%;\n  }\n}\n\n.textarea-container:not(.textarea-disabled) {\n  .textarea-wrapper {\n    &::before,\n    &::after {\n      content: '';\n      height: 2px;\n      width: 0;\n      position: absolute;\n      background: var(--sdds-textarea-bar);\n      transition: 0.35s ease all;\n    }\n\n    &::before {\n      left: 50%;\n    }\n\n    &::after {\n      right: 50%;\n    }\n\n    &::after,\n    &::before {\n      top: calc(100% - 2px);\n    }\n  }\n}\n\n.textarea-input {\n  @include textfield-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  display: block;\n  resize: vertical;\n  border-bottom: 1px solid var(--sdds-textarea-border-bottom);\n  transition: border-bottom-color 200ms ease;\n\n  // Display none only works in Chrome\n  &::-webkit-resizer {\n    display: none;\n  }\n\n  &:hover {\n    border-bottom-color: var(--sdds-textarea-border-bottom-hover);\n  }\n}\n\n// Need to override default resizer in FF & Safari\n.textarea-resizer-icon {\n  color: var(--sdds-textarea-resize-icon);\n  position: absolute;\n  display: block;\n  bottom: 2px;\n  right: 1px;\n  padding-bottom: 2px;\n  padding-right: 2px;\n  pointer-events: none;\n  background-color: var(--sdds-textarea-background);\n\n  svg {\n    display: block;\n  }\n}\n\n.textarea-label {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: block;\n  z-index: 1;\n  margin-bottom: var(--sdds-spacing-element-8);\n  color: var(--sdds-textarea-label-color);\n}\n\n.textarea-container {\n  &.textarea-label-inside {\n    .textarea-label {\n      font: var(--sdds-detail-02);\n      letter-spacing: var(--sdds-detail-02-ls);\n      transition: 0.1s ease all;\n\n      //@include end\n\n      color: var(--sdds-textarea-label-inside-color);\n      position: absolute;\n      top: var(--sdds-spacing-element-20);\n      left: var(--sdds-spacing-element-16);\n    }\n\n    .textarea-input {\n      @include placeholder-label;\n    }\n  }\n\n  &.textarea-focus {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n\n    .textarea-wrapper {\n      &::before,\n      &::after {\n        width: 50%;\n      }\n    }\n  }\n\n  &.textarea-data {\n    &.textarea-label-inside {\n      .textarea-label {\n        font: var(--sdds-detail-07);\n        letter-spacing: var(--sdds-detail-07-ls);\n        top: var(--sdds-spacing-element-8);\n      }\n    }\n  }\n}\n\n.textarea-textcounter {\n  //@extend .sdds-textfield-textcounter;\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  color: var(--sdds-textarea-textcounter);\n  float: right;\n\n  & .textfield-textcounter-divider {\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    color: var(--sdds-textarea-textcounter-divider);\n  }\n\n  //@extend end\n\n  flex-basis: 100%;\n  text-align: right;\n  padding-top: var(--sdds-spacing-element-4);\n}\n\n.textarea-helper {\n  font: var(--sdds-detail-05);\n  letter-spacing: var(--sdds-detail-05-ls);\n  display: flex;\n  gap: 8px;\n  align-items: center;\n  padding-top: var(--sdds-spacing-element-4);\n  color: var(--sdds-textarea-helper);\n  flex-grow: 2;\n  flex-basis: auto;\n\n  ~ .textarea-textcounter {\n    flex-basis: auto;\n  }\n}\n\n// Different state\n\n.textarea-success {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-success);\n  }\n}\n\n.textarea-error {\n  .textarea-input {\n    border-bottom-color: var(--sdds-textarea-border-bottom-error);\n  }\n\n  .textarea-wrapper {\n    &::after,\n    &::before {\n      background: var(--sdds-textarea-bar-error);\n    }\n  }\n\n  .textarea-helper {\n    color: var(--sdds-textarea-helper-error);\n  }\n}\n\n//Disabled state\n.textarea-disabled {\n  .textarea-input {\n    border-bottom-color: transparent;\n  }\n\n  .textarea-label {\n    color: var(--sdds-textarea-disabled-label);\n  }\n}\n\n//Read only state\n\n.textarea-icon__readonly {\n  display: none;\n  position: absolute;\n  right: 18px;\n  top: 18px;\n  color: var(--sdds-textarea-icon-read-only-color);\n\n  &-label {\n    display: none;\n    position: absolute;\n    right: 18px;\n    top: 48px;\n    font: var(--sdds-detail-05);\n    letter-spacing: var(--sdds-detail-05-ls);\n    padding: 8px;\n    color: var(--sdds-textarea-icon-read-only-label-color);\n    background-color: var(--sdds-textarea-icon-read-only-label-background);\n    white-space: nowrap;\n    border-radius: 4px 0 4px 4px;\n  }\n}\n\n.textarea-readonly {\n  pointer-events: none;\n\n  .textarea-icon__readonly {\n    display: block;\n\n    &:hover {\n      ~ .textarea-icon__readonly-label {\n        display: block;\n      }\n    }\n  }\n\n  .textfield-input {\n    padding-right: 54px;\n    background-color: transparent;\n  }\n\n  .textfield-container {\n    background-color: transparent;\n  }\n}\n","import { Component, h, Prop, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class Textarea {\n  /** Textinput for focus state */\n  textEl?: HTMLTextAreaElement;\n\n  /** Label text */\n  @Prop() label: string = '';\n\n  /** Name attribute */\n  @Prop() name: string = '';\n\n  /** Helper text */\n  @Prop() helper: string;\n\n  /** Textarea cols attribute */\n  @Prop() cols: number;\n\n  /** Textarea rows attribute */\n  @Prop() rows: number;\n\n  /** Position of the label for the textfield. */\n  @Prop() labelPosition: 'inside' | 'outside' | 'no-label' = 'no-label';\n\n  /** Placeholder text */\n  @Prop() placeholder: string = '';\n\n  /** Value of the input text */\n  @Prop() value: string = '';\n\n  /** Set input in disabled state */\n  @Prop() disabled: boolean = false;\n\n  /** Set input in readonly state */\n  @Prop() readOnly: boolean = false;\n\n  /** Error state of input */\n  @Prop() state: 'error' | 'success' | 'default' = 'default';\n\n  /** Max length of input */\n  @Prop() maxLength: number;\n\n  /** Mode variant of the textarea */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  /** Control of autofocus */\n  @Prop() autoFocus: boolean = false;\n\n  /** Unset minimum width of 208px. */\n  @Prop() noMinWidth: boolean = false;\n\n  /** Listen to the focus state of the input */\n  @State() focusInput;\n\n  /** Change event for the textarea */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  handleChange(event): void {\n    this.sddsChange.emit(event);\n  }\n\n  /** Blur event for the textarea */\n  @Event({\n    eventName: 'sddsBlur',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsBlur: EventEmitter<FocusEvent>;\n\n  handleBlur(event): void {\n    this.sddsBlur.emit(event);\n    this.focusInput = false;\n  }\n\n  /** Input event for the textarea */\n  @Event({\n    eventName: 'sddsInput',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsInput: EventEmitter<InputEvent>;\n\n  // Data input event in value prop\n  handleInput(event): void {\n    this.sddsInput.emit(event);\n    this.value = event.target.value;\n  }\n\n  /** Focus event for the textarea */\n  @Event({\n    eventName: 'sddsFocus',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsFocus: EventEmitter<FocusEvent>;\n\n  /* Set the input as focus when clicking the whole textfield with suffix/prefix */\n  handleFocus(event): void {\n    this.textEl.focus();\n    this.focusInput = true;\n    this.sddsFocus.emit(event);\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n        textarea-container\n        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}\n        ${this.focusInput ? 'textarea-focus' : ''}\n        ${this.disabled ? 'textarea-disabled' : ''}\n        ${this.readOnly ? 'textarea-readonly' : ''}\n        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}\n        ${this.value ? 'textarea-data' : ''}\n        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}\n        ${this.noMinWidth ? 'no-min-width' : ''}\n        `}\n      >\n        {this.labelPosition !== 'no-label' && <span class={'textarea-label'}>{this.label}</span>}\n        <div class=\"textarea-wrapper\">\n          <textarea\n            class={'textarea-input'}\n            ref={(inputEl) => (this.textEl = inputEl as HTMLTextAreaElement)}\n            disabled={this.disabled}\n            readonly={this.readOnly}\n            placeholder={this.placeholder}\n            value={this.value}\n            name={this.name}\n            autofocus={this.autoFocus}\n            maxlength={this.maxLength}\n            cols={this.cols}\n            rows={this.rows}\n            onFocus={(event) => {\n              if (!this.readOnly) {\n                this.handleFocus(event);\n              }\n            }}\n            onBlur={(event) => {\n              if (!this.readOnly) {\n                this.handleBlur(event);\n              }\n            }}\n            onInput={(event) => this.handleInput(event)}\n            onChange={(event) => this.handleChange(event)}\n          ></textarea>\n          <span class=\"textarea-resizer-icon\">\n            <svg\n              width=\"12\"\n              height=\"12\"\n              viewBox=\"0 0 12 12\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n          </span>\n          <span class=\"textarea-icon__readonly\">\n            <sdds-icon name=\"edit_inactive\"></sdds-icon>\n          </span>\n          <span class=\"textarea-icon__readonly-label\">This field is non-editable</span>\n        </div>\n        <span class={'textarea-helper'}>\n          {this.state === 'error' && <sdds-icon name=\"error\" size=\"16px\"></sdds-icon>}\n          {this.helper}\n        </span>\n\n        {this.maxLength > 0 && (\n          <div class={'textarea-textcounter'}>\n            {this.value === null ? 0 : this.value?.length}\n            <span class=\"textfield-textcounter-divider\"> / </span> {this.maxLength}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,stN,MCQPC,EAAQ,M,wLAKK,G,UAGD,G,iFAYoC,W,iBAG7B,G,WAGN,G,cAGI,M,cAGA,M,WAGqB,U,0CAMF,K,eAGlB,M,gBAGC,M,0BAc9BC,aAAaC,GACXC,KAAKC,WAAWC,KAAKH,E,CAYvBI,WAAWJ,GACTC,KAAKI,SAASF,KAAKH,GACnBC,KAAKK,WAAa,K,CAapBC,YAAYP,GACVC,KAAKO,UAAUL,KAAKH,GACpBC,KAAKQ,MAAQT,EAAMU,OAAOD,K,CAa5BE,YAAYX,GACVC,KAAKW,OAAOC,QACZZ,KAAKK,WAAa,KAClBL,KAAKa,UAAUX,KAAKH,E,CAGtBe,S,MACE,OACEC,EAAA,OACEC,MAAO,yCAELhB,KAAKiB,gBAAkB,SAAW,wBAA0B,eAC5DjB,KAAKK,WAAa,iBAAmB,eACrCL,KAAKkB,SAAW,oBAAsB,eACtClB,KAAKmB,SAAW,oBAAsB,eACtCnB,KAAKoB,cAAgB,KAAO,qBAAqBpB,KAAKoB,cAAgB,eACtEpB,KAAKQ,MAAQ,gBAAkB,eAC/BR,KAAKqB,QAAU,SAAWrB,KAAKqB,QAAU,UAAY,YAAYrB,KAAKqB,QAAU,eAChFrB,KAAKsB,WAAa,eAAiB,gBAGpCtB,KAAKiB,gBAAkB,YAAcF,EAAA,QAAMC,MAAO,kBAAmBhB,KAAKuB,OAC3ER,EAAA,OAAKC,MAAM,oBACTD,EAAA,YACEC,MAAO,iBACPQ,IAAMC,GAAazB,KAAKW,OAASc,EACjCP,SAAUlB,KAAKkB,SACfQ,SAAU1B,KAAKmB,SACfQ,YAAa3B,KAAK2B,YAClBnB,MAAOR,KAAKQ,MACZoB,KAAM5B,KAAK4B,KACXC,UAAW7B,KAAK8B,UAChBC,UAAW/B,KAAKgC,UAChBC,KAAMjC,KAAKiC,KACXC,KAAMlC,KAAKkC,KACXC,QAAUpC,IACR,IAAKC,KAAKmB,SAAU,CAClBnB,KAAKU,YAAYX,E,GAGrBqC,OAASrC,IACP,IAAKC,KAAKmB,SAAU,CAClBnB,KAAKG,WAAWJ,E,GAGpBsC,QAAUtC,GAAUC,KAAKM,YAAYP,GACrCuC,SAAWvC,GAAUC,KAAKF,aAAaC,KAEzCgB,EAAA,QAAMC,MAAM,yBACVD,EAAA,OACEwB,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAEN5B,EAAA,oBACY,UAAS,YACT,UACV6B,EAAE,6uBACFF,KAAK,mBAIX3B,EAAA,QAAMC,MAAM,2BACVD,EAAA,aAAWa,KAAK,mBAElBb,EAAA,QAAMC,MAAM,iCAA+B,+BAE7CD,EAAA,QAAMC,MAAO,mBACVhB,KAAKqB,QAAU,SAAWN,EAAA,aAAWa,KAAK,QAAQiB,KAAK,SACvD7C,KAAK8C,QAGP9C,KAAKgC,UAAY,GAChBjB,EAAA,OAAKC,MAAO,wBACThB,KAAKQ,QAAU,KAAO,GAAIuC,EAAA/C,KAAKQ,SAAK,MAAAuC,SAAA,SAAAA,EAAEC,OACvCjC,EAAA,QAAMC,MAAM,iCAA+B,OAAW,IAAEhB,KAAKgC,W"}

package/dist/tegel/p-8bd381dc.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as i,H as t,g as o}from"./p-0a99765f.js";import{c as e}from"./p-ec26fc38.js";const n=":host{box-sizing:border-box;color:var(--sdds-popover-canvas-color);background-color:var(--sdds-popover-canvas-background);box-shadow:0 3px 3px rgba(0, 0, 0, 0.15), 0 -1px 1px rgba(0, 0, 0, 0.1);border-radius:4px;z-index:800;display:none}:host *{box-sizing:border-box}:host(.sdds-popover-canvas-show){display:block}";const h=class{constructor(i){s(this,i);this.initialize=s=>{this.popperInstance=e(s,this.host,{placement:this.placement,modifiers:[{name:"offset",options:{offset:[this.offsetSkidding,this.offsetDistance]}},...this.modifiers]});if(this.show===null){s.addEventListener("click",(s=>{s.stopPropagation();if(this.isShown){this.isShown=false}else{this.isShown=true}}))}};this.selector="";this.referenceEl=undefined;this.show=null;this.placement="auto";this.offsetSkidding=0;this.offsetDistance=8;this.modifiers=[];this.renderedShowValue=false;this.popperInstance=undefined;this.target=undefined;this.isShown=false}onShowChange(s){this.isShown=s}onReferenceElChange(s,i){var t;if(s!==i){(t=this.popperInstance)===null||t===void 0?void 0:t.destroy();if(s){this.initialize(s)}}}onAnyClick(s){if(this.isShown&&this.show===null){const i=!s.composedPath().includes(this.host);if(i){this.isShown=false}}}connectedCallback(){if(this.show!==null){this.isShown=this.show}}componentDidLoad(){var s;if(this.selector||this.referenceEl){const i=(s=this.referenceEl)!==null&&s!==void 0?s:document.querySelector(this.selector);if(i){this.initialize(i)}else{console.error(`Could not initialize popover-canvas: element with selector '${this.selector}' not found.`)}}}componentDidRender(){if(this.isShown&&!this.renderedShowValue){this.popperInstance.update()}this.renderedShowValue=this.isShown}disconnectedCallback(){var s;(s=this.popperInstance)===null||s===void 0?void 0:s.destroy()}render(){return i(t,{class:`sdds-popover-canvas ${this.isShown?"sdds-popover-canvas-show":""}`},i("slot",null))}get host(){return o(this)}static get watchers(){return{show:["onShowChange"],referenceEl:["onReferenceElChange"]}}};h.style=n;export{h as sdds_popover_canvas};
+//# sourceMappingURL=p-8bd381dc.entry.js.map

package/dist/tegel/p-8bd381dc.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["popoverCanvasCss","PopoverCanvas","this","initialize","referenceEl","popperInstance","createPopper","host","placement","modifiers","name","options","offset","offsetSkidding","offsetDistance","show","addEventListener","event","stopPropagation","isShown","onShowChange","newValue","onReferenceElChange","oldValue","_a","destroy","onAnyClick","isClickOutside","composedPath","includes","connectedCallback","componentDidLoad","selector","document","querySelector","console","error","componentDidRender","renderedShowValue","update","disconnectedCallback","render","h","Host","class"],"sources":["./src/components/popover-canvas/popover-canvas.scss?tag=sdds-popover-canvas&encapsulation=shadow","./src/components/popover-canvas/popover-canvas.tsx"],"sourcesContent":["@import '../../mixins/box-sizing';\n\n@import '../../mixins/z-index';\n\n:host {\n  @include sdds-box-sizing;\n\n  color: var(--sdds-popover-canvas-color);\n  background-color: var(--sdds-popover-canvas-background);\n  box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);\n  border-radius: 4px;\n  z-index: z(tooltip);\n  display: none;\n}\n\n:host(.sdds-popover-canvas-show) {\n  display: block;\n}\n","import { Component, Host, Element, Listen, h, Prop, State, Watch } from '@stencil/core';\nimport { createPopper } from '@popperjs/core';\nimport type { Placement, Instance } from '@popperjs/core';\n\n@Component({\n  tag: 'sdds-popover-canvas',\n  styleUrl: 'popover-canvas.scss',\n  shadow: true,\n})\nexport class PopoverCanvas {\n  @Element() host!: HTMLSddsPopoverCanvasElement;\n\n  /** The CSS-selector for an element that will trigger the popover */\n  @Prop() selector: string = '';\n\n  /** Element that will trigger the popover (takes priority over selector) */\n  @Prop() referenceEl: HTMLElement;\n\n  /** Controls wether the popover is shown or not. If this is set hiding and showing\n   * will be decided by this prop and will need to be controlled from the outside.\n   */\n  @Prop() show: boolean = null;\n\n  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */\n  @Prop() placement: Placement = 'auto';\n\n  /** Sets the offset skidding */\n  @Prop() offsetSkidding: number = 0;\n\n  /** Sets the offset distance */\n  @Prop() offsetDistance: number = 8;\n\n  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */\n  @Prop() modifiers: Object[] = [];\n\n  @State() renderedShowValue: boolean = false;\n\n  @State() popperInstance: Instance;\n\n  @State() target: any;\n\n  @State() isShown: boolean = false;\n\n  @Watch('show')\n  onShowChange(newValue: boolean) {\n    this.isShown = newValue;\n  }\n\n  @Watch('referenceEl')\n  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement) {\n    if (newValue !== oldValue) {\n      this.popperInstance?.destroy();\n\n      if (newValue) {\n        this.initialize(newValue);\n      }\n    }\n  }\n\n  @Listen('click', { target: 'window' })\n  onAnyClick(event: MouseEvent) {\n    if (this.isShown && this.show === null) {\n      // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n      const isClickOutside = !event.composedPath().includes(this.host as any);\n      if (isClickOutside) {\n        this.isShown = false;\n      }\n    }\n  }\n\n  initialize = (referenceEl) => {\n    this.popperInstance = createPopper(referenceEl, this.host, {\n      placement: this.placement,\n      modifiers: [\n        {\n          name: 'offset',\n          options: {\n            offset: [this.offsetSkidding, this.offsetDistance],\n          },\n        },\n        ...this.modifiers,\n      ],\n    });\n\n    if (this.show === null) {\n      referenceEl.addEventListener('click', (event) => {\n        event.stopPropagation();\n        if (this.isShown) {\n          this.isShown = false;\n        } else {\n          this.isShown = true;\n        }\n      });\n    }\n  };\n\n  connectedCallback() {\n    if (this.show !== null) {\n      this.isShown = this.show;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.selector || this.referenceEl) {\n      const referenceEl = this.referenceEl ?? document.querySelector(this.selector);\n\n      if (referenceEl) {\n        this.initialize(referenceEl);\n      } else {\n        console.error(\n          `Could not initialize popover-canvas: element with selector '${this.selector}' not found.`,\n        );\n      }\n    }\n  }\n\n  componentDidRender() {\n    if (this.isShown && !this.renderedShowValue) {\n      // Here we update the popper position since its position is wrong\n      // before it is rendered.\n      this.popperInstance.update();\n    }\n    this.renderedShowValue = this.isShown;\n  }\n\n  disconnectedCallback() {\n    this.popperInstance?.destroy();\n  }\n\n  render() {\n    return (\n      <Host class={`sdds-popover-canvas ${this.isShown ? 'sdds-popover-canvas-show' : ''}`}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,6T,MCSZC,EAAa,M,yBA6DxBC,KAAAC,WAAcC,IACZF,KAAKG,eAAiBC,EAAaF,EAAaF,KAAKK,KAAM,CACzDC,UAAWN,KAAKM,UAChBC,UAAW,CACT,CACEC,KAAM,SACNC,QAAS,CACPC,OAAQ,CAACV,KAAKW,eAAgBX,KAAKY,qBAGpCZ,KAAKO,aAIZ,GAAIP,KAAKa,OAAS,KAAM,CACtBX,EAAYY,iBAAiB,SAAUC,IACrCA,EAAMC,kBACN,GAAIhB,KAAKiB,QAAS,CAChBjB,KAAKiB,QAAU,K,KACV,CACLjB,KAAKiB,QAAU,I,qBA7EI,G,qCAQH,K,eAGO,O,oBAGE,E,oBAGA,E,eAGH,G,uBAEQ,M,iEAMV,K,CAG5BC,aAAaC,GACXnB,KAAKiB,QAAUE,C,CAIjBC,oBAAoBD,EAAuBE,G,MACzC,GAAIF,IAAaE,EAAU,EACzBC,EAAAtB,KAAKG,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,UAErB,GAAIJ,EAAU,CACZnB,KAAKC,WAAWkB,E,GAMtBK,WAAWT,GACT,GAAIf,KAAKiB,SAAWjB,KAAKa,OAAS,KAAM,CAEtC,MAAMY,GAAkBV,EAAMW,eAAeC,SAAS3B,KAAKK,MAC3D,GAAIoB,EAAgB,CAClBzB,KAAKiB,QAAU,K,GA+BrBW,oBACE,GAAI5B,KAAKa,OAAS,KAAM,CACtBb,KAAKiB,QAAUjB,KAAKa,I,EAIxBgB,mB,MACE,GAAI7B,KAAK8B,UAAY9B,KAAKE,YAAa,CACrC,MAAMA,GAAcoB,EAAAtB,KAAKE,eAAW,MAAAoB,SAAA,EAAAA,EAAIS,SAASC,cAAchC,KAAK8B,UAEpE,GAAI5B,EAAa,CACfF,KAAKC,WAAWC,E,KACX,CACL+B,QAAQC,MACN,+DAA+DlC,KAAK8B,uB,GAM5EK,qBACE,GAAInC,KAAKiB,UAAYjB,KAAKoC,kBAAmB,CAG3CpC,KAAKG,eAAekC,Q,CAEtBrC,KAAKoC,kBAAoBpC,KAAKiB,O,CAGhCqB,uB,OACEhB,EAAAtB,KAAKG,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,S,CAGvBgB,SACE,OACEC,EAACC,EAAI,CAACC,MAAO,uBAAuB1C,KAAKiB,QAAU,2BAA6B,MAC9EuB,EAAA,a"}

package/dist/tegel/p-8cfe4835.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as o,g as e}from"./p-0a99765f.js";const s='[role=listitem] ::slotted(*){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] ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}[role=listitem] ::slotted(*:hover){text-decoration:underline}[role=listitem].top-part-child ::slotted(*){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 ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}@media all and (max-width: 992px){[role=listitem].top-part-child{border-bottom:1px solid var(--sdds-footer-top-divider)}[role=listitem].top-part-child ::slotted(*){display:block;height:100%;padding:19px 40px;font-weight:normal}[role=listitem].top-part-child ::slotted(*:hover){text-decoration:underline;background-color:var(--sdds-footer-top-links-background-hover)}[role=listitem].top-part-child ::slotted(*:focus-visible){outline:2px solid var(--sdds-blue-400);outline-offset:-2px}}';const i=class{constructor(o){t(this,o);this.parentIsTopPart=false}connectedCallback(){this.parentIsTopPart=this.host.closest("sdds-footer-group").parentElement.slot==="top"}render(){return o("div",{role:"listitem",class:`${this.parentIsTopPart?"top-part-child":""}`},o("slot",null))}get host(){return e(this)}};i.style=s;export{i as sdds_footer_item};
+//# sourceMappingURL=p-8cfe4835.entry.js.map

package/dist/tegel/p-8cfe4835.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsFooterItemCss","SddsFooterItem","constructor","hostRef","this","parentIsTopPart","connectedCallback","host","closest","parentElement","slot","render","h","role","class"],"sources":["./src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.scss?tag=sdds-footer-item&encapsulation=shadow","./src/components/footer/webcomponent/sdds-footer-item/sdds-footer-item.tsx"],"sourcesContent":["@import '../../../../mixins/focus-state';\n\n[role='listitem'] {\n  ::slotted(*) {\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  }\n\n  ::slotted(*:focus-visible) {\n    @include sdds-focus-state;\n  }\n\n\n  ::slotted(*:hover) {\n    text-decoration: underline;\n    }\n\n  &.top-part-child {\n    ::slotted(*) {\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\n    ::slotted(*:focus-visible) {\n      @include sdds-focus-state;\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    ::slotted(*) {\n      display: block;\n      height: 100%;\n      padding: 19px 40px;\n      font-weight: normal;\n    }\n\n\n    ::slotted(*:hover){\n        text-decoration: underline;\n        background-color: var(--sdds-footer-top-links-background-hover);\n    }\n\n    ::slotted(*:focus-visible){\n      @include sdds-focus-state;\n    }\n  }\n}\n","import { Component, Element, h } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-footer-item',\n  styleUrl: 'sdds-footer-item.scss',\n  shadow: true,\n})\nexport class SddsFooterItem {\n  @Element() host: HostElement;\n\n  private parentIsTopPart: boolean = false;\n\n  connectedCallback() {\n    this.parentIsTopPart = this.host.closest('sdds-footer-group').parentElement.slot === 'top';\n  }\n\n  render() {\n    return (\n      <div role=\"listitem\" class={`${this.parentIsTopPart ? 'top-part-child' : ''}`}>\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAoB,0qC,MCQbC,EAAc,MAL3BC,YAAAC,G,UAQUC,KAAAC,gBAA2B,K,CAEnCC,oBACEF,KAAKC,gBAAkBD,KAAKG,KAAKC,QAAQ,qBAAqBC,cAAcC,OAAS,K,CAGvFC,SACE,OACEC,EAAA,OAAKC,KAAK,WAAWC,MAAO,GAAGV,KAAKC,gBAAkB,iBAAmB,MACvEO,EAAA,a"}

package/dist/tegel/p-912b92f2.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as o,g as e}from"./p-0a99765f.js";const i=":host{height:var(--sdds-header-height);position:relative}:host .menu{flex-direction:column;overflow-y:auto;max-height:calc(100vh - var(--sdds-header-height));box-shadow:var(--sdds-nav-dropdown-menu-box);background-color:var(--sdds-header-app-launcher-menu-background);border-top-right-radius:0;border-top-left-radius:0}:host .menu::-webkit-scrollbar{width:4px;background-color:inherit}:host .menu::-webkit-scrollbar-thumb{background-color:var(--sdds-grey-300)}:host .menu ::-webkit-scrollbar-button{height:0;width:0}:host .state-open .dropdown-icon{transform:rotateZ(180deg)}:host .state-open .button{position:relative;z-index:801}";const r=class{constructor(s){t(this,s);this.uuid=crypto.randomUUID();this.buttonLabel=undefined;this.noDropdownIcon=false;this.selected=false;this.open=false;this.buttonEl=undefined}onAnyClick(t){const s=!t.composedPath().includes(this.host);if(s){this.open=false}}toggleDropdown(){this.open=!this.open}render(){return s(o,null,s("div",{class:{"state-open":this.open}},s("sdds-header-item",{class:"button",active:this.open,selected:this.selected},s("button",{ref:t=>{this.buttonEl=t},"aria-expanded":`${this.open}`,"aria-controls":`launcher-${this.uuid}`,"aria-current":this.selected?"location":"false",onClick:()=>{this.toggleDropdown()}},s("slot",{name:"button-icon"}),this.buttonLabel,s("slot",{name:"button-label"}),!this.noDropdownIcon&&s("sdds-icon",{class:"dropdown-icon",name:"chevron_down",size:"16px"}))),this.buttonEl&&s("sdds-popover-canvas",{id:`sdds-dropdown-${this.uuid}`,class:"menu",referenceEl:this.buttonEl,placement:"bottom-start",show:this.open,offsetDistance:0,modifiers:[{name:"flip",options:{fallbackPlacements:[]}}]},s("slot",null))))}get host(){return e(this)}};r.style=i;export{r as sdds_header_dropdown};
+//# sourceMappingURL=p-912b92f2.entry.js.map

package/dist/tegel/p-912b92f2.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["headerDropdownCss","HeaderDropdown","this","uuid","crypto","randomUUID","onAnyClick","event","isClickOutside","composedPath","includes","host","open","toggleDropdown","render","h","Host","class","active","selected","ref","el","buttonEl","onClick","name","buttonLabel","noDropdownIcon","size","id","referenceEl","placement","show","offsetDistance","modifiers","options","fallbackPlacements"],"sources":["./src/components/header/webcomponent/header-dropdown/header-dropdown.scss?tag=sdds-header-dropdown&encapsulation=shadow","./src/components/header/webcomponent/header-dropdown/header-dropdown.tsx"],"sourcesContent":["@import '../../../../mixins/scrollbar';\n@import '../../../../mixins/z-index';\n\n:host {\n  height: var(--sdds-header-height);\n  position: relative;\n\n  .menu {\n    flex-direction: column;\n\n    @include sdds-scrollbar;\n\n    overflow-y: auto;\n    max-height: calc(100vh - var(--sdds-header-height));\n    box-shadow: var(--sdds-nav-dropdown-menu-box);\n    background-color: var(--sdds-header-app-launcher-menu-background);\n    border-top-right-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .state-open {\n    .dropdown-icon {\n      transform: rotateZ(180deg);\n    }\n\n    .button {\n      position: relative;\n      z-index: z(tooltip) + 1;\n    }\n  }\n}\n","import { Component, Element, h, Host, Listen, Prop, State } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-header-dropdown',\n  styleUrl: 'header-dropdown.scss',\n  shadow: true,\n})\nexport class HeaderDropdown {\n  @Element() host: HTMLElement;\n\n  /** The label of the button that opens the dropdown.\n   * This is an alternative to the button-label slot. */\n  @Prop() buttonLabel: string;\n\n  /** If the dropdown icon (downwards chevron) should be hidden. */\n  @Prop() noDropdownIcon: boolean = false;\n\n  /** If the button that opens the dropdown should appear selected. */\n  @Prop() selected: boolean = false;\n\n  @State() open: boolean = false;\n\n  @State() buttonEl?: HTMLButtonElement;\n\n  private uuid: string = crypto.randomUUID();\n\n  @Listen('click', { target: 'document' })\n  onAnyClick(event: MouseEvent) {\n    // Source: https://lamplightdev.com/blog/2021/04/10/how-to-detect-clicks-outside-of-a-web-component/\n    const isClickOutside = !event.composedPath().includes(this.host as any);\n    if (isClickOutside) {\n      this.open = false;\n    }\n  }\n\n  toggleDropdown() {\n    this.open = !this.open;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'state-open': this.open,\n          }}\n        >\n          <sdds-header-item class=\"button\" active={this.open} selected={this.selected}>\n            <button\n              ref={(el) => {\n                this.buttonEl = el;\n              }}\n              aria-expanded={`${this.open}`}\n              aria-controls={`launcher-${this.uuid}`}\n              aria-current={this.selected ? 'location' : 'false'}\n              onClick={() => {\n                this.toggleDropdown();\n              }}\n            >\n              <slot name=\"button-icon\"></slot>\n              {this.buttonLabel}\n              <slot name=\"button-label\"></slot>\n              {!this.noDropdownIcon && (\n                <sdds-icon class=\"dropdown-icon\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n              )}\n            </button>\n          </sdds-header-item>\n          {this.buttonEl && (\n            <sdds-popover-canvas\n              id={`sdds-dropdown-${this.uuid}`}\n              class=\"menu\"\n              referenceEl={this.buttonEl}\n              placement=\"bottom-start\"\n              show={this.open}\n              offsetDistance={0}\n              modifiers={[\n                {\n                  name: 'flip',\n                  options: {\n                    fallbackPlacements: [],\n                  },\n                },\n              ]}\n            >\n              <slot></slot>\n            </sdds-popover-canvas>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,0nB,MCObC,EAAc,M,yBAiBjBC,KAAAC,KAAeC,OAAOC,a,+CATI,M,cAGN,M,UAEH,M,wBAOzBC,WAAWC,GAET,MAAMC,GAAkBD,EAAME,eAAeC,SAASR,KAAKS,MAC3D,GAAIH,EAAgB,CAClBN,KAAKU,KAAO,K,EAIhBC,iBACEX,KAAKU,MAAQV,KAAKU,I,CAGpBE,SACE,OACEC,EAACC,EAAI,KACHD,EAAA,OACEE,MAAO,CACL,aAAcf,KAAKU,OAGrBG,EAAA,oBAAkBE,MAAM,SAASC,OAAQhB,KAAKU,KAAMO,SAAUjB,KAAKiB,UACjEJ,EAAA,UACEK,IAAMC,IACJnB,KAAKoB,SAAWD,CAAE,EACnB,gBACc,GAAGnB,KAAKU,OAAM,gBACd,YAAYV,KAAKC,OAAM,eACxBD,KAAKiB,SAAW,WAAa,QAC3CI,QAAS,KACPrB,KAAKW,gBAAgB,GAGvBE,EAAA,QAAMS,KAAK,gBACVtB,KAAKuB,YACNV,EAAA,QAAMS,KAAK,kBACTtB,KAAKwB,gBACLX,EAAA,aAAWE,MAAM,gBAAgBO,KAAK,eAAeG,KAAK,WAI/DzB,KAAKoB,UACJP,EAAA,uBACEa,GAAI,iBAAiB1B,KAAKC,OAC1Bc,MAAM,OACNY,YAAa3B,KAAKoB,SAClBQ,UAAU,eACVC,KAAM7B,KAAKU,KACXoB,eAAgB,EAChBC,UAAW,CACT,CACET,KAAM,OACNU,QAAS,CACPC,mBAAoB,OAK1BpB,EAAA,e"}

package/dist/tegel/p-9a2c823b.entry.js

@@ -0,0 +1,2 @@
+import{r as n,h as o,g as s}from"./p-0a99765f.js";const e=".sdds-link-component{all:unset;cursor:pointer;outline:none;color:var(--sdds-link);text-decoration:underline}.sdds-link-component.active,.sdds-link-component:active{color:var(--sdds-link);text-decoration:underline;text-decoration-color:var(--sdds-link)}.sdds-link-component:hover{color:var(--sdds-link-hover);text-decoration:underline;text-decoration-color:var(--sdds-link-hover)}.sdds-link-component:visited{color:var(--sdds-link-visited);text-decoration-color:var(--sdds-link-visited)}.sdds-link-component:focus{color:var(--sdds-link-focus);text-decoration:none;outline:2px solid var(--sdds-link-focus);outline-offset:-2px}.disabled .sdds-link-component{color:var(--sdds-link-disabled);text-decoration-color:var(--sdds-link-disabled);pointer-events:none}.no-underline .sdds-link-component{text-decoration:none}.no-underline:hover .sdds-link-component{text-decoration:none}";const d=class{constructor(o){n(this,o);this.disabled=false;this.underline=true}connectedCallback(){this.host.children[0].classList.add("sdds-link-component")}render(){return o("div",{class:`\n          ${this.disabled?"disabled":""}\n          ${!this.underline?"no-underline":""}\n          `},o("slot",null))}get host(){return s(this)}};d.style=e;export{d as sdds_link};
+//# sourceMappingURL=p-9a2c823b.entry.js.map

package/dist/tegel/p-9a2c823b.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sddsLinkCss","SddsLink","connectedCallback","this","host","children","classList","add","render","h","class","disabled","underline"],"sources":["./src/components/link/sdds-link.scss?tag=sdds-link","./src/components/link/sdds-link.tsx"],"sourcesContent":[".sdds-link-component {\n  all: unset;\n  cursor: pointer;\n  outline: none;\n  color: var(--sdds-link);\n  text-decoration: underline;\n\n  &.active,\n  &:active {\n    color: var(--sdds-link);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link);\n  }\n\n  &:hover {\n    color: var(--sdds-link-hover);\n    text-decoration: underline;\n    text-decoration-color: var(--sdds-link-hover);\n  }\n\n  &:visited {\n    color: var(--sdds-link-visited);\n    text-decoration-color: var(--sdds-link-visited);\n  }\n\n  &:focus {\n    color: var(--sdds-link-focus);\n    text-decoration: none;\n    outline: 2px solid var(--sdds-link-focus);\n    outline-offset: -2px;\n  }\n}\n\n.disabled {\n  .sdds-link-component {\n    color: var(--sdds-link-disabled);\n    text-decoration-color: var(--sdds-link-disabled);\n    pointer-events: none;\n  }\n}\n\n.no-underline {\n  .sdds-link-component {\n    text-decoration: none;\n  }\n}\n\n.no-underline {\n  &:hover {\n    .sdds-link-component {\n      text-decoration: none;\n    }\n  }\n}\n","import { Component, h, Prop, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-link',\n  styleUrl: 'sdds-link.scss',\n  shadow: false,\n})\nexport class SddsLink {\n  /** Disables the link */\n  @Prop() disabled: boolean = false;\n\n  /** Displays the link with an underline. */\n  @Prop() underline: boolean = true;\n\n  @Element() host: HostElement;\n\n  connectedCallback() {\n    this.host.children[0].classList.add('sdds-link-component');\n  }\n\n  render() {\n    return (\n      <div\n        class={`\n          ${this.disabled ? 'disabled' : ''}\n          ${!this.underline ? 'no-underline' : ''}\n          `}\n      >\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,42B,MCQPC,EAAQ,M,uCAES,M,eAGC,I,CAI7BC,oBACEC,KAAKC,KAAKC,SAAS,GAAGC,UAAUC,IAAI,sB,CAGtCC,SACE,OACEC,EAAA,OACEC,MAAO,eACHP,KAAKQ,SAAW,WAAa,kBAC5BR,KAAKS,UAAY,eAAiB,kBAGvCH,EAAA,a"}

package/dist/tegel/p-9e2c89f9.entry.js

@@ -0,0 +1,2 @@
+import{r as d,c as s,h as e}from"./p-0a99765f.js";const t='.sdds-datetime-input[type=datetime-local].sc-sdds-datetime~.icon-time.sc-sdds-datetime,.sdds-datetime-input-md[type=datetime-local].sc-sdds-datetime~.icon-time.sc-sdds-datetime,.sdds-datetime-input-sm[type=datetime-local].sc-sdds-datetime~.icon-time.sc-sdds-datetime{display:none}.sdds-datetime-input[type=date].sc-sdds-datetime~.icon-time.sc-sdds-datetime,.sdds-datetime-input-md[type=date].sc-sdds-datetime~.icon-time.sc-sdds-datetime,.sdds-datetime-input-sm[type=date].sc-sdds-datetime~.icon-time.sc-sdds-datetime{display:none}.sdds-datetime-input[type=time].sc-sdds-datetime~.icon-datetime-local.sc-sdds-datetime,.sdds-datetime-input-md[type=time].sc-sdds-datetime~.icon-datetime-local.sc-sdds-datetime,.sdds-datetime-input-sm[type=time].sc-sdds-datetime~.icon-datetime-local.sc-sdds-datetime{display:none}.sdds-datetime-input.sc-sdds-datetime{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.sc-sdds-datetime *.sc-sdds-datetime{box-sizing:border-box}.sdds-datetime-input.sc-sdds-datetime::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input.sc-sdds-datetime:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input.sc-sdds-datetime:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input.sc-sdds-datetime:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input.sc-sdds-datetime:disabled~.sdds-datetime-label-inside.sc-sdds-datetime{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-input-md.sc-sdds-datetime{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.sc-sdds-datetime *.sc-sdds-datetime{box-sizing:border-box}.sdds-datetime-input-md.sc-sdds-datetime::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-md.sc-sdds-datetime:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input-md.sc-sdds-datetime:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input-md.sc-sdds-datetime:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input-md.sc-sdds-datetime:disabled~.sdds-datetime-label-inside.sc-sdds-datetime{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-input-sm.sc-sdds-datetime{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.sc-sdds-datetime *.sc-sdds-datetime{box-sizing:border-box}.sdds-datetime-input-sm.sc-sdds-datetime::placeholder{opacity:1;color:var(--sdds-datetime-placeholder)}.sdds-datetime-input-sm.sc-sdds-datetime:focus::placeholder{color:var(--sdds-datetime-placeholder-color-focus)}.sdds-datetime-input-sm.sc-sdds-datetime:disabled{background-color:var(--sdds-datetime-background-disabled);color:var(--sdds-datetime-color-disabled);cursor:not-allowed}.sdds-datetime-input-sm.sc-sdds-datetime:disabled::placeholder{color:var(--sdds-datetime-placeholder-disabled)}.sdds-datetime-input-sm.sc-sdds-datetime:disabled~.sdds-datetime-label-inside.sc-sdds-datetime{color:var(--sdds-datetime-label-disabled)}.sdds-datetime-container.sc-sdds-datetime{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.sc-sdds-datetime:hover{border-bottom-color:var(--sdds-datetime-border-bottom-hover)}.sdds-form-datetime-md.sc-sdds-datetime .sdds-datetime-container.sc-sdds-datetime{height:48px}.sdds-form-datetime-sm.sc-sdds-datetime .sdds-datetime-container.sc-sdds-datetime{height:40px}.sdds-datetime-input-container.sc-sdds-datetime{position:relative;width:100%}.sdds-datetime-input-container.sc-sdds-datetime .datetime-icon.sc-sdds-datetime{height:20px;width:20px;position:absolute;top:50%;transform:translateY(-50%);right:18px;pointer-events:none}.sdds-datetime-input-container.sc-sdds-datetime .datetime-icon.sc-sdds-datetime path.sc-sdds-datetime{fill:var(--sdds-datetime-icon)}.sdds-datetime-label.sc-sdds-datetime{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.sc-sdds-datetime{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.sc-sdds-datetime{display:block;min-width:208px;background:unset}.sdds-form-datetime-nomin.sc-sdds-datetime{min-width:auto}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime{padding-top:var(--sdds-spacing-element-24);padding-bottom:15px}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime{top:20px}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime .sc-sdds-datetime::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime .sc-sdds-datetime::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime:focus::placeholder{transition:color 0.35s ease;color:var(--sdds-datetime-placeholder-color-focus)}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime{padding-top:var(--sdds-spacing-element-20);padding-bottom:11px}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime{top:16px}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime::input-placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime:placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime .sc-sdds-datetime::placeholder{color:transparent}.sdds-form-datetime.sdds-datetime-container-label-inside.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime: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.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data.sc-sdds-datetime .sdds-datetime-input-sm.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime{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.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data.sc-sdds-datetime .sdds-datetime-input-md.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime{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.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime,.sdds-form-datetime.sdds-datetime-container-label-inside.sdds-datetime-data.sc-sdds-datetime .sdds-datetime-input.sc-sdds-datetime~.sdds-datetime-label-inside.sc-sdds-datetime{font:var(--sdds-detail-07);letter-spacing:var(--sdds-detail-07-ls);transition:0.1s ease all;top:12px}.sdds-datetime-bar.sc-sdds-datetime{position:absolute;width:100%}.sdds-datetime-bar.sc-sdds-datetime::before,.sdds-datetime-bar.sc-sdds-datetime::after{content:"";height:2px;top:54px;width:0;position:absolute;background:var(--sdds-datetime-bar);transition:0.35s ease all}.sdds-form-datetime-md.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::before,.sdds-form-datetime-md.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::after{top:46px}.sdds-form-datetime-sm.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::before,.sdds-form-datetime-sm.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::after{top:40px}.sdds-datetime-bar.sc-sdds-datetime::before{left:50%}.sdds-datetime-bar.sc-sdds-datetime::after{right:50%}.sdds-datetime-focus.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::before,.sdds-datetime-focus.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::after{width:50%}.sdds-datetime-helper.sc-sdds-datetime{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.sc-sdds-datetime .sdds-helper.sc-sdds-datetime{display:inline-flex;gap:8px}.sdds-form-datetime-disabled.sc-sdds-datetime .sdds-datetime-container.sc-sdds-datetime{border-bottom-color:transparent}.sdds-form-datetime-disabled.sc-sdds-datetime .datetime-icon.sc-sdds-datetime sdds-icon.sc-sdds-datetime{color:var(--sdds-datetime-icon-disabled)}.sdds-form-datetime-disabled.sc-sdds-datetime .sdds-datetime-label.sc-sdds-datetime{color:var(--sdds-datetime-label-disabled);cursor:not-allowed}.sdds-form-datetime-success.sc-sdds-datetime .sdds-datetime-container.sc-sdds-datetime{border-bottom-color:var(--sdds-datetime-border-bottom-success);color:var(--sdds-datetime-color-success)}.sdds-form-datetime-success.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::before,.sdds-form-datetime-success.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::after{background:var(--sdds-datetime-bar-sucess)}.sdds-form-datetime-error.sc-sdds-datetime .sdds-datetime-helper.sc-sdds-datetime{color:var(--sdds-datetime-helper-error)}.sdds-form-datetime-error.sc-sdds-datetime .sdds-datetime-container.sc-sdds-datetime{border-bottom-color:var(--sdds-datetime-border-bottom-error)}.sdds-form-datetime-error.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::before,.sdds-form-datetime-error.sc-sdds-datetime .sdds-datetime-bar.sc-sdds-datetime::after{background:var(--sdds-datetime-bar-error)}.sdds-form-datetime-error.sc-sdds-datetime .datetime-icon.sc-sdds-datetime sdds-icon.sc-sdds-datetime{color:var(--sdds-datetime-icon-error)}.sdds-datetime-textcounter.sc-sdds-datetime{font:var(--sdds-detail-05);letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter);float:right}.sdds-datetime-textcounter.sc-sdds-datetime .sdds-datetime-textcounter-divider.sc-sdds-datetime{letter-spacing:var(--sdds-detail-05-ls);color:var(--sdds-datetime-textcounter-divider)}input[type=datetime-local].sc-sdds-datetime::-webkit-inner-spin-button,input[type=datetime-local].sc-sdds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=date].sc-sdds-datetime::-webkit-inner-spin-button,input[type=date].sc-sdds-datetime::-webkit-calendar-picker-indicator{opacity:0}input[type=time].sc-sdds-datetime::-webkit-inner-spin-button,input[type=time].sc-sdds-datetime::-webkit-calendar-picker-indicator{opacity:0}.sdds-mode-variant-primary.sc-sdds-datetime{--sdds-datetime-background:var(--sdds-datetime-background-primary)}.sdds-mode-variant-secondary.sc-sdds-datetime{--sdds-datetime-background:var(--sdds-datetime-background-secondary)}';const i=class{constructor(e){d(this,e);this.sddsChange=s(this,"sddsChange",6);this.sddsBlur=s(this,"sddsBlur",6);this.sddsFocus=s(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 e("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&&e("label",{htmlFor:this.name,class:"sdds-datetime-label"},this.label),e("div",{onClick:d=>this.handleFocusClick(d),class:"sdds-datetime-container sdds-datetime-container"},e("div",{class:"sdds-datetime-input-container"},e("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)}),e("div",{class:"datetime-icon icon-datetime-local"},e("sdds-icon",{size:"20px",name:"calendar"})),e("div",{class:"datetime-icon icon-time"},e("sdds-icon",{size:"20px",name:"clock"}))),e("div",{class:"sdds-datetime-bar"})),e("div",{class:"sdds-datetime-helper"},this.helper&&e("div",{class:"sdds-helper"},this.state==="error"&&e("sdds-icon",{name:"error",size:"16px"}),this.helper)))}};i.style=t;export{i as sdds_datetime};
+//# sourceMappingURL=p-9e2c89f9.entry.js.map

package/dist/tegel/p-9e2c89f9.entry.js.map

@@ -0,0 +1 @@
+{"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","helper"],"sources":["./src/components/datetime/datetime.scss?tag=sdds-datetime&encapsulation=scoped","./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  background: unset;\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    sdds-icon {\n      color: var(--sdds-datetime-icon-disabled);\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\n  .datetime-icon {\n    sdds-icon {\n      color: var(--sdds-datetime-icon-error);\n    }\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\n.sdds-mode-variant-primary {\n  --sdds-datetime-background: var(--sdds-datetime-background-primary);\n}\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: false,\n  scoped: 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    eventName: 'sddsChange',\n    composed: true,\n    bubbles: true,\n    cancelable: false,\n  })\n  sddsChange: EventEmitter;\n\n  /** Blur event for the datetime */\n  @Event({\n    eventName: 'sddsBlur',\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              <sdds-icon size=\"20px\" name=\"calendar\"></sdds-icon>\n            </div>\n\n            <div class=\"datetime-icon icon-time\">\n              <sdds-icon size=\"20px\" name=\"clock\"></sdds-icon>\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,4vb,MCQPC,EAAQ,M,wIAsEnBC,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,YAjF8C,iB,WAGnC,G,kBAGO,O,cAGZ,M,UAGO,K,gBAGL,M,iBAGiB,K,UAGhC,G,oCAMc,M,WAGL,G,YAGC,G,0BAoDzBC,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,aAAWD,KAAK,OAAOU,KAAK,cAG9BT,EAAA,OAAKC,MAAM,2BACTD,EAAA,aAAWD,KAAK,OAAOU,KAAK,YAGhCT,EAAA,OAAKC,MAAM,uBAGbD,EAAA,OAAKC,MAAM,wBACRlC,KAAKkD,QACJjB,EAAA,OAAKC,MAAM,eACRlC,KAAKsC,QAAU,SAAWL,EAAA,aAAWS,KAAK,QAAQV,KAAK,SACvDhC,KAAKkD,S"}

package/dist/tegel/p-9f92d25c.entry.js

@@ -0,0 +1,2 @@
+import{r as s,h as t,H as r,g as e}from"./p-0a99765f.js";const d=".sdds-header-launcher-list-title{all:unset;box-sizing:border-box;font:var(--sdds-detail-06);letter-spacing:var(--sdds-detail-06-ls);color:var(--sdds-header-app-launcher-category-title-color);text-transform:uppercase;height:48px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--sdds-nav-dropdown-item-border-color);margin:0}";const a=class{constructor(t){s(this,t);this.uuid=crypto.randomUUID()}render(){return t(r,null,t("h3",{class:"sdds-header-launcher-list-title",id:`sdds-${this.uuid}`},t("slot",null)))}get host(){return e(this)}};a.style=d;export{a as sdds_header_launcher_list_title};
+//# sourceMappingURL=p-9f92d25c.entry.js.map