scu-web-components 0.0.97 → 0.0.99

package/dist/chunks/chunk.4B3EEISE.js

@@ -0,0 +1,225 @@
+import{a as u}from"./chunk.4SWKJDYZ.js";import{a as p}from"./chunk.KILRDKGP.js";import{a as m}from"./chunk.QHUZYUAT.js";import{a as f,b as n,d as h,f as g}from"./chunk.CONKFFEA.js";import{a as l}from"./chunk.G2G2TPJK.js";import{f as a}from"./chunk.PE5ZEEQ2.js";var b=f`
+:host {
+  z-index: 10;
+}
+
+.modal-wrapper {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal-wrapper.open {
+  display: flex;
+}
+
+.modal-background {
+  height: 100%;
+  width: 100%;
+  position: relative;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.modal {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 20px 20px 20px 20px;
+  box-shadow: 0px 2px 26px 0px rgba(0, 0, 0, 0.11);
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: var(--scw-spacing-2);
+  padding-right: var(--scw-spacing-2);
+  padding-top: var(--scw-spacing-2);
+  padding-bottom: var(--scw-spacing-2);
+  width: var(--modal-width);
+  max-width: 90%;
+  height: var(--modal-height);
+  max-height: 90%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.modal > *:not(:last-child) {
+  margin-bottom: 0px;
+  --margin-bottom: 0px;
+}
+
+.modal-header {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.modal-header > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.modal-header .label-left {
+  text-align: LEFT;
+  font: var(--scw-type-text-semibold-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+.modal-header .heading {
+  text-align: CENTER;
+  font: var(--scw-type-text-bold-06-font);
+  color: var(--scw-color-grey-02);
+}
+.modal-header .label-right {
+  text-align: RIGHT;
+  font: var(--scw-type-text-semibold-font);
+  color: var(--scw-color-grey-02);
+  flex: 1;
+}
+
+.content {
+  background-color: rgb(255, 255, 255);
+  align-self: stretch;
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: var(--scw-spacing-2);
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-03);
+  flex: 1;
+  overflow-y: auto;
+}
+.content > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+
+.modal-footer {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  gap: var(--scw-spacing-1);
+}
+.modal-footer > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.modal-footer ::slotted(:first-child) {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  gap: var(--scw-spacing-1);
+}
+.modal-footer ::slotted(:first-child) > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.modal-footer ::slotted(:last-child) {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-end;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  gap: var(--scw-spacing-1);
+}
+.modal-footer ::slotted(:last-child) > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+
+@media (max-width: 576px) {
+  .modal-footer {
+    flex-direction: column;
+  }
+  .modal-footer ::slotted(*) {
+    width: 100%;
+    justify-content: center !important;
+  }
+}`;function x(e){let s=e.tagName.toLowerCase();if(!e.offsetParent||window.getComputedStyle(e).visibility==="hidden"||e.getAttribute("tabindex")==="-1"||e.hasAttribute("disabled")||e.hasAttribute("aria-disabled")&&e.getAttribute("aria-disabled")!=="false")return!1;if((s==="audio"||s==="video")&&e.hasAttribute("controls")||e.hasAttribute("contenteditable")&&e.getAttribute("contenteditable")!=="false")return!0;let t=["button","input","select","textarea","a","audio","video","summary"].includes(s);return!t&&e.isLink===!0?!0:t}function w(e){let s=[];function t(i){i instanceof HTMLElement&&(s.push(i),i.shadowRoot&&i.shadowRoot.mode==="open"&&t(i.shadowRoot)),[...i.querySelectorAll("*")].map(r=>t(r))}t(e);let d=s.find(i=>x(i))||null,c=s.reverse().find(i=>x(i))||null;return{start:d,end:c}}var v=(t=>(t.close="close",t.back="back",t))(v||{}),o=class extends g{constructor(){super();this.heading="";this.open=!1;this.closeIcon=!1;this.backIcon=!1;this.height="400px";this.width="600px";this.closeLabel="Close";this.backLabel="";this.ignoreOutsideClick=!1;this.originalTrigger=null;this.tabDirection="forward";this.handleDocumentFocusIn=t=>{let d=t.composedPath();if(this&&!d.includes(this)){let{start:c,end:i}=w(this),r=this.tabDirection==="forward"?c:i;typeof(r==null?void 0:r.focus)=="function"&&r.focus()}};this.handleDocumentKeyDown=t=>{t.key==="Tab"&&t.shiftKey&&(this.tabDirection="backward",setTimeout(()=>this.tabDirection="forward"))};this.handleDocumentMouseDown=t=>{let d=t.composedPath();!this.ignoreOutsideClick&&this.modal&&!d.includes(this.modal)&&(this.open=!1)};this.element="modal"}static get styles(){return[super.styles,b]}async firstUpdated(){this.handleOpenChange()}addOpenListeners(){document.addEventListener("focusin",this.handleDocumentFocusIn),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){document.removeEventListener("focusin",this.handleDocumentFocusIn),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}disconnectedCallback(){this.removeOpenListeners(),super.disconnectedCallback()}handleClose(){this.open=!1,p("scw-action",this,{action:"close"})}handleBack(){p("scw-action",this,{action:"back"})}async handleOpenChange(){if(this.open&&this.ariaDisabled==="false")this.originalTrigger=document.activeElement,this.addOpenListeners();else{this.removeOpenListeners();let t=this.originalTrigger;t&&typeof t.focus=="function"&&setTimeout(()=>t.focus())}}render(){return l`
+    <div class="${u({"modal-wrapper":!0,open:this.open})}">
+      <div class="modal-background"></div>
+      <div
+        class="modal"
+        style="
+          --modal-width: ${this.width};
+          --modal-height: ${this.height};
+        ">
+        <div class="modal-header">
+          ${this.backLabel!==""?l` 
+            <div class="label-left">
+              <scw-link
+                @click=${this.handleBack}
+                aria-label=${this.backLabel}
+                design=${this.backIcon?"plain":"block"}>
+                ${this.backIcon?l`
+                  <scw-icon
+                    size="30"
+                    icon="chevron-left"></scw-icon>
+                `:this.backLabel}
+              </scw-link>
+            </div> 
+          `:""}
+          <div class="heading">
+            ${this.heading}
+          </div>
+          ${this.closeLabel!==""?l` 
+            <div class="label-right">
+              <scw-link
+                @click=${this.handleClose}
+                aria-label=${this.closeLabel}
+                design=${this.closeIcon?"plain":"block"}>
+                ${this.closeIcon?l`
+                  <scw-icon
+                    size="30"
+                    icon="close"></scw-icon>
+                `:this.closeLabel}
+              </scw-link>
+            </div> 
+          `:""}
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="modal-footer">
+          <slot name="left-footer"></slot>
+          <slot name="right-footer"></slot>
+        </div>
+      </div>
+    </div>    
+    `}};a([n({type:String,attribute:"heading",reflect:!1})],o.prototype,"heading",2),a([n({type:Boolean,attribute:"open",reflect:!0})],o.prototype,"open",2),a([n({type:Boolean,attribute:"close-icon",reflect:!1})],o.prototype,"closeIcon",2),a([n({type:Boolean,attribute:"back-icon",reflect:!1})],o.prototype,"backIcon",2),a([n({type:String,attribute:"height",reflect:!1})],o.prototype,"height",2),a([n({type:String,attribute:"width",reflect:!1})],o.prototype,"width",2),a([n({type:String,attribute:"close-label",reflect:!1})],o.prototype,"closeLabel",2),a([n({type:String,attribute:"back-label",reflect:!1})],o.prototype,"backLabel",2),a([n({type:String,attribute:"ignore-outside-click",reflect:!1})],o.prototype,"ignoreOutsideClick",2),a([h(".modal")],o.prototype,"modal",2),a([m("open",{waitUntilFirstUpdate:!0})],o.prototype,"handleOpenChange",1);export{v as a,o as b};

package/dist/chunks/chunk.4FMRCDJZ.js

@@ -0,0 +1,226 @@
+import{a as n}from"./chunk.BSDAEHQI.js";import{a as s,b as a}from"./chunk.CONKFFEA.js";import{a as o}from"./chunk.G2G2TPJK.js";import{f as r}from"./chunk.PE5ZEEQ2.js";var l=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-03);
+}
+
+: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-03);
+}
+
+: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-03);
+  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: 27px;
+}
+: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-grey-02);
+}
+:host([design=utility]:hover) .icon svg * {
+  fill: var(--scw-color-grey-02);
+}
+
+: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-grey-02);
+}
+:host([design=utility][aria-selected=true]) .icon svg * {
+  fill: var(--scw-color-grey-02);
+}
+
+: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-02);
+}
+:host([design=utility][aria-disabled=true]) .icon svg * {
+  fill: var(--scw-color-grey-02);
+}
+
+: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,l]}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.5ADR4CDO.js

@@ -0,0 +1,171 @@
+import{a as p,b as n,c as d,d as c}from"./chunk.44O2H36B.js";import{a as u}from"./chunk.4SWKJDYZ.js";import{c as s}from"./chunk.R7SOOULM.js";import{a as o}from"./chunk.X4CHYX5J.js";import{a as i}from"./chunk.KILRDKGP.js";import{a as l,b as r}from"./chunk.CONKFFEA.js";import{f as e}from"./chunk.PE5ZEEQ2.js";var f=l`
+.inputWrapper {
+  background-color: rgba(0, 0, 0, 0);
+  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;
+}
+.inputWrapper > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.5);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.5 );
+}
+.inputWrapper .input-label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-03-font);
+  color: var(--scw-color-grey-02);
+}
+.inputWrapper .input-field {
+  transition: color 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
+  background-color: var(--scw-color-grey-10);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-07);
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.inputWrapper .input-field > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.inputWrapper .input-field .input-text {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+  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;
+  height: 100%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.inputWrapper .input-field .input-text > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.inputWrapper .input-field .input-text textarea {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: rgb(114, 118, 121);
+  flex: 1;
+  color: var(--scw-theme-body-color, var(--scw-color-grey-02));
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border: 0;
+  background-color: rgba(0, 0, 0, 0);
+  z-index: 2;
+  min-height: var(--scw-min-height, 100px);
+  position: relative;
+}
+.inputWrapper .input-field .input-text textarea:focus {
+  outline: none;
+}
+.inputWrapper .input-field .placeholder {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: rgb(114, 118, 121);
+  flex: 1;
+  z-index: 1;
+  top: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: absolute;
+}
+.inputWrapper .input-feedback {
+  text-align: LEFT;
+  font: var(--scw-type-text-02-font);
+  color: var(--scw-color-grey-04);
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+:host([aria-disabled]) .input-field {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-07);
+  align-self: stretch;
+}
+:host([aria-disabled]) .input-field .placeholder {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-06);
+  flex: 1;
+}
+:host([aria-disabled]) .input-field textarea {
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-grey-06);
+  flex: 1;
+}
+
+.focused .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-07);
+  box-shadow: var(--scw-effect-focus-shadow);
+  align-self: stretch;
+}
+
+.invalid .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-error);
+  align-self: stretch;
+}
+.invalid .input-feedback {
+  text-align: LEFT;
+  font: var(--scw-type-text-02-font);
+  color: var(--scw-color-error);
+}`;var t=class extends s{constructor(){super();this.type="text";this.autoCapitalize="none";this.autoComplete="on";this.autoCorrect="off";this.autoFocus=!1;this.inputSize="default";this.hideFeedback=!1;this.defaultFeedback="";this.element="textarea"}static get styles(){return[super.styles,f]}_focusHandler(){this.focused=!0,i("scw-focus",this)}_blurHandler(){this.focused=!1,this.validate(),i("scw-blur",this)}_valueChangeHandler(a){a.target&&(this.value=a.target.value,i("scw-value-change",this))}render(){let a={focused:this.focused,invalid:this.invalid,inputWrapper:!0,small:this.inputSize==="small"};return o`<div class=${u(a)}>
+        ${this.ariaLabel?o` <div class="input-label">
+              ${this.ariaLabel}${this.required?o`<span class="required-label">
+                    ${this.requiredLabel}
+                  </span>`:""}
+            </div>`:""}
+        <div class="input-field">
+          <div class="input-text">
+            <textarea
+              ?disabled=${this.ariaDisabled==="true"}
+              autocapitalize=${this.autoCapitalize}
+              autocomplete=${this.autoComplete}
+              autocorrect=${this.autoCorrect}
+              ?autofocus=${this.autoFocus}
+              ?readonly=${this.readOnly}
+              @focus=${this._focusHandler}
+              @blur=${this._blurHandler}
+              @input=${this._valueChangeHandler}
+              .value=${this.value}></textarea>
+
+            ${this.value?"":o` <div class="placeholder">${this.placeholder}</div>`}
+          </div>
+        </div>
+        ${this.hideFeedback?"":o` <div class="input-feedback">
+              ${this.feedback?this.feedback:this.defaultFeedback}&nbsp;
+            </div>`}
+      </div>
+      <slot name="validation"></slot> `}};e([r({type:p})],t.prototype,"type",2),e([r({type:n,attribute:"autocapitalize"})],t.prototype,"autoCapitalize",2),e([r({type:d,attribute:"autocomplete"})],t.prototype,"autoComplete",2),e([r({type:c,attribute:"autocorrect"})],t.prototype,"autoCorrect",2),e([r({type:Boolean,attribute:"autofocus"})],t.prototype,"autoFocus",2),e([r({type:String,attribute:"size"})],t.prototype,"inputSize",2),e([r({type:String,attribute:"hide-feedback"})],t.prototype,"hideFeedback",2),e([r({type:String,attribute:"default-feedback"})],t.prototype,"defaultFeedback",2);export{t as a};