scu-web-components 0.0.67 → 0.0.69

package/dist/chunks/chunk.MQ7DDEWU.js

@@ -0,0 +1,226 @@
+import{a as n}from"./chunk.REY5CSRB.js";import{a as s,b as a}from"./chunk.KX2Y5SBY.js";import{a as o}from"./chunk.G2G2TPJK.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var c=s`
+:host([design=main]) {
+  outline: none;
+  background-color: rgba(0, 0, 0, 0);
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: var(--scw-spacing-1);
+  display: inline-flex;
+}
+:host([design=main]) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-07-font);
+  color: var(--scw-color-grey-02);
+}
+
+:host([inherit]) .label {
+  font: inherit;
+}
+
+:host([design=main]:focus-visible) {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: var(--scw-effect-focus-shadow);
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: var(--scw-spacing-1);
+}
+:host([design=main]:focus-visible) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-07-font);
+  color: var(--scw-color-grey-02);
+}
+
+:host([inherit]:focus-visible) .label {
+  font: inherit;
+}
+
+:host([design=main]:hover) {
+  background-color: rgba(0, 0, 0, 0);
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: var(--scw-spacing-1);
+  cursor: pointer;
+}
+:host([design=main]:hover) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-07-font);
+  color: var(--scw-color-primary-03);
+}
+
+:host([inherit]:hover) .label {
+  font: inherit;
+}
+
+:host([design=main][aria-selected=true]) {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: 0px;
+}
+:host([design=main][aria-selected=true]) > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.8);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host([design=main][aria-selected=true]) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-07-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+  flex: 1;
+}
+:host([design=main][aria-selected=true]) .selected {
+  background-color: var(--scw-color-primary-03);
+  align-self: stretch;
+  height: 2px;
+}
+
+:host([inherit] [aria-selected=true]) .label {
+  font: inherit;
+}
+
+:host([design=main][aria-disabled=true]) {
+  background-color: rgba(0, 0, 0, 0);
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: var(--scw-spacing-1);
+  cursor: auto;
+  pointer-events: none;
+}
+:host([design=main][aria-disabled=true]) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-07-font);
+  color: var(--scw-color-grey-08);
+}
+:host([design=main][aria-disabled=true]) .icon svg {
+  fill: var(--scw-color-grey-08);
+}
+:host([design=main][aria-disabled=true]) .icon svg * {
+  fill: var(--scw-color-grey-08);
+}
+
+:host([inherit] [aria-disabled=true]) .label {
+  font: inherit;
+}
+
+:host([design=utility]) .scw-link-base {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  display: inline-flex;
+}
+:host([design=utility]) .scw-link-base > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+:host([design=utility]) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+  min-height: 24px;
+}
+:host([design=utility]) .icon {
+  width: 24px;
+  height: 24px;
+}
+:host([design=utility]) .icon svg {
+  box-sizing: border-box;
+  vertical-align: top;
+  width: 100%;
+  height: 100%;
+  fill: var(--scw-color-grey-02);
+}
+:host([design=utility]) .icon svg * {
+  fill: var(--scw-color-grey-02);
+}
+
+:host([design=utility]:focus-visible) {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 4px 4px 4px 4px;
+  box-shadow: var(--scw-effect-focus-shadow);
+}
+:host([design=utility]:focus-visible) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+}
+:host([design=utility]:focus-visible) .icon svg {
+  fill: var(--scw-color-grey-02);
+}
+:host([design=utility]:focus-visible) .icon svg * {
+  fill: var(--scw-color-grey-02);
+}
+
+:host([design=utility]:hover) {
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+:host([design=utility]:hover) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-primary-03);
+}
+:host([design=utility]:hover) .icon svg {
+  fill: var(--scw-color-primary-04);
+}
+:host([design=utility]:hover) .icon svg * {
+  fill: var(--scw-color-primary-04);
+}
+
+:host([design=utility][aria-selected=true]) {
+  background-color: rgba(0, 0, 0, 0);
+  cursor: pointer;
+}
+:host([design=utility][aria-selected=true]) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-primary-03);
+}
+:host([design=utility][aria-selected=true]) .icon svg {
+  fill: var(--scw-color-primary);
+}
+:host([design=utility][aria-selected=true]) .icon svg * {
+  fill: var(--scw-color-primary);
+}
+
+:host([design=utility][aria-disabled=true]) {
+  cursor: auto;
+  pointer-events: none;
+  background-color: rgba(0, 0, 0, 0);
+}
+:host([design=utility][aria-disabled=true]) .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-07);
+}
+:host([design=utility][aria-disabled=true]) .icon svg {
+  fill: var(--scw-color-grey-07);
+}
+:host([design=utility][aria-disabled=true]) .icon svg * {
+  fill: var(--scw-color-grey-07);
+}
+
+:host {
+  white-space: nowrap;
+}
+:host .label {
+  white-space: nowrap;
+}`;var e=(t=>(t.main="main",t.utility="utility",t))(e||{});var i=class extends n{constructor(){super();this.ariaSelected="false";this.element="menu-item",this.setAttribute("role","menuitem")}static get styles(){return[super.styles,c]}hasPopup(){let t=this.nextElementSibling;return!!(t&&t.nodeName.indexOf("SCW-MENU")===0)}doShowIcon(){return!!(super.doShowIcon()&&this.design!=="main")}validDesigns(){return{...super.validDesigns(),...e}}connectedCallback(){super.connectedCallback(),this.hasPopup()&&this.setAttribute("aria-haspopup","true")}renderContent(){return this.design==="main"&&this.ariaSelected==="true"?(this.setAttribute("aria-current","page"),o`
+          <div>${super.renderContent()}</div>
+          <div class="selected"></div>
+        `):(this.removeAttribute("aria-current"),super.renderContent())}render(){return this.renderLink(this.renderContent())}};r([a({type:String,attribute:"aria-selected"})],i.prototype,"ariaSelected",2);export{i as a};

package/dist/chunks/chunk.N46UZO5Z.js

@@ -0,0 +1,57 @@
+import{a as t,b as o,e as s}from"./chunk.KX2Y5SBY.js";import{a as r}from"./chunk.G2G2TPJK.js";import{f as e}from"./chunk.PE5ZEEQ2.js";var h=t`
+a.scw-link-base h1:hover, a.scw-link-base h2:hover, a.scw-link-base h3:hover, a.scw-link-base h4:hover, a.scw-link-base h5:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+a.scw-link-base[aria-disabled=true] h1, a.scw-link-base[aria-disabled=true] h2, a.scw-link-base[aria-disabled=true] h3, a.scw-link-base[aria-disabled=true] h4, a.scw-link-base[aria-disabled=true] h5,
+:host([anchor][aria-disabled=true]) h1,
+:host([anchor][aria-disabled=true]) h2,
+:host([anchor][aria-disabled=true]) h3,
+:host([anchor][aria-disabled=true]) h4,
+:host([anchor][aria-disabled=true]) h5 {
+  color: var(--scw-color-primary-08);
+}
+a.scw-link-base[aria-disabled=true] h1:hover, a.scw-link-base[aria-disabled=true] h2:hover, a.scw-link-base[aria-disabled=true] h3:hover, a.scw-link-base[aria-disabled=true] h4:hover, a.scw-link-base[aria-disabled=true] h5:hover,
+:host([anchor][aria-disabled=true]) h1:hover,
+:host([anchor][aria-disabled=true]) h2:hover,
+:host([anchor][aria-disabled=true]) h3:hover,
+:host([anchor][aria-disabled=true]) h4:hover,
+:host([anchor][aria-disabled=true]) h5:hover {
+  cursor: auto;
+  text-decoration: initial;
+}
+
+:host a {
+  text-decoration: none;
+}
+:host h1 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-condensed-10-font);
+  color: var(--scw-color-primary);
+}
+:host h2 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-09-font);
+  color: var(--scw-color-primary);
+}
+:host h3 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-08-font);
+  color: var(--scw-color-grey-02);
+}
+:host h4 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-07-font);
+  color: var(--scw-color-grey-02);
+}
+:host h5 {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-02);
+}
+:host h1, :host h2, :host h3, :host h4, :host h5 {
+  margin: 0;
+  padding: 0;
+  color: var(--scw-color-04, var(--scw-color-grey-02));
+}`;var a=class extends s{constructor(){super();this.size="H1";this.element="heading"}static get styles(){return[super.styles,h]}renderHeading(){switch(this.size.toUpperCase()){case"H5":return r`<h5>${this.ariaLabel}</h5>`;case"H4":return r`<h4>${this.ariaLabel}</h4>`;case"H3":return r`<h3>${this.ariaLabel}</h3>`;case"H2":return r`<h2>${this.ariaLabel}</h2>`;case"H1":default:return r`<h1>${this.ariaLabel}</h1>`}}render(){return this.renderHeading()}};e([o({type:String,reflect:!0})],a.prototype,"size",2);export{a};

package/dist/chunks/chunk.NWKS4DIG.js

@@ -0,0 +1 @@
+import{a as m}from"./chunk.REY5CSRB.js";import{a as r}from"./chunk.WKH73SBC.js";import{b as i}from"./chunk.KX2Y5SBY.js";import{f as e}from"./chunk.PE5ZEEQ2.js";var t=class extends m{constructor(){super();this.submitType="submit";this.element="button",this.href="javascript:"}connectedCallback(){super.connectedCallback(),this.addEventListener("click",()=>{this.submitType==="submit"&&r("scw-submit-intent",this)})}};e([i({type:String,reflect:!0,attribute:"submit-type"})],t.prototype,"submitType",2);export{t as a};

package/dist/chunks/chunk.P57PKLID.js

@@ -0,0 +1,60 @@
+import{a as u,b as n,c as l,e as g}from"./chunk.KX2Y5SBY.js";import{a}from"./chunk.G2G2TPJK.js";import{f as s}from"./chunk.PE5ZEEQ2.js";var f=u`
+:host {
+  /* scw element */
+  position: relative;
+  box-sizing: border-box;
+  --margin-right: initial;
+  --margin-bottom: initial;
+  --gap-h-int: initial;
+  --gap-v-int: initial;
+  margin-right: var(--margin-right, var(--gap-h-int, initial));
+  margin-bottom: var(--margin-bottom, var(--gap-v-int, initial));
+  display: block;
+}
+
+:host([warning]) {
+  outline: 2px solid red !important;
+}
+
+:host .scw-link-base {
+  display: block;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+:host .scw-link-base img {
+  display: block;
+  position: absolute;
+}`;var d=class{constructor(){this.callbacks=new WeakMap;this._totalWatched=0;this._intersectionCallback=this._intersectionCallback.bind(this);let e={rootMargin:"0px 0px 200px 0px"};!!1&&IntersectionObserver&&(this.intersectionObserver=new IntersectionObserver(this._intersectionCallback,e))}_intersectionCallback(e){e.map(async t=>{this.callbacks.get(t.target).map(c=>{c(t.isIntersecting,t.intersectionRatio)})})}registerCallback(e,t){if(!this.callbacks.has(e)&&this.intersectionObserver)this.callbacks.set(e,[t]),this.intersectionObserver.observe(e),this._totalWatched++;else{let r=this.callbacks.get(e);r.indexOf(t)===-1&&r.push(t)}}unregisterCallback(e,t){if(this.callbacks.has(e)&&this.intersectionObserver){let r=[];this.callbacks.get(e).map(h=>{h!==t&&r.push(h)}),r.length===0?(this._totalWatched--,this.callbacks.delete(e),this.intersectionObserver.unobserve(e)):this.callbacks.set(e,r)}}},b=new d;function p(o){o.alt||o.warn("alt not found on scw-image"),!o.src&&!o.srcset&&o.warn("no image(s) found on scw-image")}var i=class extends g{constructor(){super();this.preload=!1;this.noLazyLoading=!1;this._isIntersecting=!1;this._hasIntersected=!1;this.element="image"}static get styles(){return[super.styles,f]}firstUpdated(t){super.firstUpdated(t),this._resizeHandler=this._resizeHandler.bind(this),this._intersectionHandler=this._intersectionHandler.bind(this),this.noLazyLoading?this._hasIntersected=!0:b.registerCallback(this,this._intersectionHandler)}disconnectedCallback(){super.disconnectedCallback(),b.unregisterCallback(this,this._intersectionHandler)}domMutated(){super.domMutated(),p(this)}_resizeHandler(){this._imageSize=this.clientWidth}_intersectionHandler(t){this._isIntersecting=t,this._hasIntersected=this._hasIntersected?!0:t}renderContainerCss(){if(this.aspectRatio){let t=this.aspectRatio.split(":"),r=parseFloat(t[0]);return`
+        display: block;
+        padding-bottom: ${parseFloat(t[1])/r*100}%;
+        height: 0;`}return""}renderImgCss(){return this.objectFit||this.objectPosition?`
+        position: absolute;
+        top: 0; left: 0;
+        width: 100%; height: 100%;
+        object-fit: ${this.objectFit?this.objectFit:"contain"};
+        object-position: ${this.objectPosition?this.objectPosition:"center"}`:""}renderPreload(){if(this.preload){if(this._imageSize&&this.srcset)return a`<link 
+        rel="preload"
+        as="image"
+        srcset="${this.srcset}"
+        sizes="${this._imageSize}px" />
+      `;if(this.src)return a`<link 
+          rel="preload"
+          as="image"
+          href="${this.src}" />
+        `}}renderContent(){return this._hasIntersected?this._imageSize&&this.srcset?a`
+          ${this.renderPreload()}
+          <img
+            style="${this.renderImgCss()}"
+            srcset="${this.srcset}"
+            sizes="${this._imageSize}px"
+            alt="${this.alt?this.alt:"NO ALT!"}" />`:a`
+          ${this.renderPreload()}
+          <img
+            style="${this.renderImgCss()}"
+            src="${this.src?this.src:!1}"
+            alt="${this.alt?this.alt:"NO ALT!"}" />`:a``}render(){return a`
+      ${this.renderContent()}
+      ${this.renderContainerCss()}
+    `}};s([n({type:String,attribute:"aspect-ratio"})],i.prototype,"aspectRatio",2),s([n({type:String,attribute:"object-fit"})],i.prototype,"objectFit",2),s([n({type:String,attribute:"object-position"})],i.prototype,"objectPosition",2),s([n({type:String})],i.prototype,"srcset",2),s([n({type:String})],i.prototype,"src",2),s([n({type:String})],i.prototype,"alt",2),s([n({type:Boolean})],i.prototype,"preload",2),s([n({type:Boolean,attribute:"no-lazy-loading"})],i.prototype,"noLazyLoading",2),s([l()],i.prototype,"_imageSize",2),s([l()],i.prototype,"_isIntersecting",2),s([l()],i.prototype,"_hasIntersected",2);export{i as a};

package/dist/chunks/chunk.PE5ZEEQ2.js

@@ -0,0 +1 @@
+var k=Object.create;var f=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var l=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,n=Object.prototype.hasOwnProperty;var o=(b,a)=>()=>(b&&(a=b(b=0)),a);var p=(b,a)=>()=>(a||b((a={exports:{}}).exports,a),a.exports),q=(b,a)=>{for(var d in a)f(b,d,{get:a[d],enumerable:!0})},j=(b,a,d,e)=>{if(a&&typeof a=="object"||typeof a=="function")for(let c of l(a))!n.call(b,c)&&c!==d&&f(b,c,{get:()=>a[c],enumerable:!(e=i(a,c))||e.enumerable});return b};var r=(b,a,d)=>(d=b!=null?k(m(b)):{},j(a||!b||!b.__esModule?f(d,"default",{value:b,enumerable:!0}):d,b)),s=b=>j(f({},"__esModule",{value:!0}),b),t=(b,a,d,e)=>{for(var c=e>1?void 0:e?i(a,d):a,g=b.length-1,h;g>=0;g--)(h=b[g])&&(c=(e?h(a,d,c):h(c))||c);return e&&c&&f(a,d,c),c};export{o as a,p as b,q as c,r as d,s as e,t as f};

package/dist/chunks/chunk.PLEQXYIN.js

@@ -0,0 +1,77 @@
+import{a as i,b as r,e as n}from"./chunk.KX2Y5SBY.js";import{a as s}from"./chunk.G2G2TPJK.js";import{f as o}from"./chunk.PE5ZEEQ2.js";var e=i`
+:host {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: var(--scw-spacing-1);
+  padding-right: var(--scw-spacing-1);
+  padding-top: calc(var(--scw-spacing-1) * 1.5);
+  padding-bottom: calc(var(--scw-spacing-1) * 1.5);
+}
+:host > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.8);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.8 );
+}
+:host .icon {
+  background-color: var(--scw-color-success-light);
+  border-radius: 48px 48px 48px 48px;
+}
+:host .content {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+:host .content > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+:host .content .title {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+:host .content .description {
+  text-align: LEFT;
+  font: var(--scw-type-text-font);
+  color: var(--scw-color-grey-02);
+  align-self: stretch;
+}
+
+:host([type=warning]) .icon {
+  background-color: var(--scw-color-information-light);
+}
+
+:host([link]) {
+  cursor: pointer;
+}
+
+:host([link]:hover) {
+  background-color: var(--scw-color-primary-095);
+}
+
+:host([link]:focus-visible) {
+  box-shadow: var(--scw-effect-focus-shadow);
+}`;var a=(c=>(c.basic="basic",c.warning="warning",c))(a||{}),t=class extends n{constructor(){super();this.title="";this.description="";this.type="basic";this.element="pageAlert"}static get styles(){return[super.styles,e]}connectedCallback(){super.connectedCallback()}render(){return s`
+      <scw-icon
+        icon="icon-placeholder"
+        class="icon"
+        size="30"></scw-icon>
+      <div class="content">
+        <div class="title">
+          ${this.title}
+        </div>
+        <div class="description">
+          ${this.description}
+        </div>
+      </div>`}};o([r({type:String})],t.prototype,"title",2),o([r({type:String})],t.prototype,"description",2),o([r({type:a})],t.prototype,"type",2);export{a,t as b};

package/dist/chunks/chunk.QUUPMXQC.js

@@ -0,0 +1,83 @@
+import{c as u}from"./chunk.HZLIIBNH.js";import{a as d,b as s}from"./chunk.K5LAHA72.js";import{a as p}from"./chunk.4AJTBTEU.js";import{a as f}from"./chunk.UXNK7KZZ.js";import{a as o}from"./chunk.WKH73SBC.js";import{a as n,b as l,c}from"./chunk.KX2Y5SBY.js";import{f as i}from"./chunk.PE5ZEEQ2.js";var h=n`
+:host {
+  display: block;
+}
+
+.input-field {
+  width: 100%;
+  position: relative;
+}
+.input-field .placeholder {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey);
+  flex: 1;
+  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5));
+  z-index: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.input-field .placeholder[scw-hide] {
+  display: none;
+}
+.input-field select {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+  padding: var(--scw-input-padding, calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5) calc(var(--scw-spacing-1) * 0.9) calc(var(--scw-spacing-1) * 1.5));
+  width: calc( 100% - calc(var(--scw-spacing-1) * 1.5) );
+  min-height: var(--scw-min-height, 32px);
+  box-sizing: border-box;
+  border: 0;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 2;
+  position: relative;
+}
+.input-field select:focus {
+  outline: none;
+}
+
+:host([aria-disabled=true]) textarea {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-07);
+  flex: 1;
+}`;var e=class extends u{constructor(){super();this._options=[];this.type="text";this.element="input";let t=p();this.scwInputLayout=d(`scw-${"input-layout"}${t}`),this.processOptions()}static get styles(){return[super.styles,h]}connectedCallback(){super.connectedCallback()}domMutated(){super.domMutated(),this.processOptions()}processOptions(){let t=this.querySelectorAll(":scope > option"),v=Array.from(t).map(a=>{let r=a.value;return s`
+          <option
+            value=${r}
+            ?selected=${r===this.value}>
+            ${a.textContent}
+          </option>`});this._options=[s`
+      <option
+        value=""
+        ?selected=${this.value===""}>
+      </option>`,...v]}_focusHandler(){this.focused=!0}_blurHandler(){this.focused=!1,this.validate()}_valueChangeHandler(t){t.target&&(this.value=t.target.value,o("scw-value-change",this))}checkForSubmit(t){t.key==="Enter"&&o("scw-submit-intent",this)}render(){return s`
+      <${this.scwInputLayout}
+        .label=${this.ariaLabel}
+        .feedback=${this.feedback}
+        aria-disabled=${this.ariaDisabled==="true"?"true":"false"}
+        ?focused=${this.focused}
+        ?invalid=${this.invalid}>
+        <div 
+          class="input-field">
+          <select
+            ?readonly=${this.readOnly}
+            @keyup=${this.checkForSubmit}
+            @focus=${this._focusHandler}
+            @blur=${this._blurHandler}
+            @change=${this._valueChangeHandler}>
+            ${this._options}
+          </select>
+          <div 
+            class="placeholder"
+            ?scw-hide=${!!this.value}>
+            ${this.placeholder}
+          </div>
+        </div>
+      </${this.scwInputLayout}>
+      <slot name="validation"></slot>
+    `}};i([c()],e.prototype,"_options",2),i([l({type:f})],e.prototype,"type",2);export{e as a};