scu-web-components 0.0.75 → 0.0.76

package/dist/chunks/chunk.VGAEOORC.js

@@ -0,0 +1,500 @@
+import{a as t}from"./chunk.YBPGY7E7.js";import{a as r,b as i,f as e}from"./chunk.5MDLYG3I.js";import{a as o,d as l}from"./chunk.G2G2TPJK.js";import{f as a}from"./chunk.PE5ZEEQ2.js";var s=r`
+:host {
+  display: inline-flex;
+}`;var n=r`
+.scw-link {
+  background-color: var(--scw-color-primary);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.6);
+  padding-right: calc(var(--scw-spacing-1) * 1.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.8);
+  text-decoration: none;
+  background-color: var(--scw-theme-color, var(--scw-color-primary));
+  border-color: var(--scw-theme-color, var(--scw-color-primary));
+}
+.scw-link > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+.scw-link scw-icon {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0);
+  --scw-icon-color: var(--scw-theme-color-inv, var(--scw-color-grey-10));
+}
+.scw-link .left-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+.scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  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: 0px;
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-10);
+  color: var(--scw-theme-color-inv, var(--scw-color-grey-10));
+}
+.scw-link .label > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.scw-link .right-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+
+.scw-link:hover {
+  background-color: var(--scw-color-primary-02);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary-02);
+  background-color: var(--scw-theme-color-hover, var(--scw-color-primary-02));
+  border-color: var(--scw-theme-color-hover, var(--scw-color-primary-02));
+}
+.scw-link:hover .label {
+  color: var(--scw-theme-color-hover-inv, var(--scw-color-grey-10));
+}
+
+:host([aria-disabled=true]) .scw-link {
+  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-095);
+}
+:host([aria-disabled=true]) .scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-08);
+}
+:host([aria-disabled=true]) .scw-link scw-icon,
+:host([aria-disabled=true]) .scw-link .icon {
+  --scw-icon-color: var(--scw-color-grey-08);
+}`;var d=r`
+.scw-link {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 1.6);
+  padding-right: calc(var(--scw-spacing-1) * 1.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.8);
+  text-decoration: none;
+  background-color: var(--scw-theme-color-inv, var(--scw-color-grey-10));
+  border-color: var(--scw-theme-color, var(--scw-color-primary));
+}
+.scw-link > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+.scw-link scw-icon {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0);
+  --scw-icon-color: var(--scw-theme-color, var(--scw-color-primary-05));
+}
+.scw-link .left-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+.scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  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: 0px;
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-primary);
+  color: var(--scw-theme-color, var(--scw-color-primary));
+}
+.scw-link .label > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.scw-link .right-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+
+.scw-link:hover {
+  background-color: var(--scw-color-primary);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-10);
+  background-color: var(--scw-theme-color-hover, var(--scw-color-primary));
+  border-color: var(--scw-theme-color-hover, var(--scw-color-primary));
+}
+.scw-link:hover .label {
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-10);
+  color: var(--scw-theme-color-hover-inv, var(--scw-color-grey-10));
+}
+
+:host([aria-disabled=true]) .scw-link {
+  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-095);
+}
+:host([aria-disabled=true]) .scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  text-align: LEFT;
+  font: var(--scw-type-text-bold-font);
+  color: var(--scw-color-grey-08);
+}
+:host([aria-disabled=true]) .scw-link scw-icon,
+:host([aria-disabled=true]) .scw-link .icon {
+  --scw-icon-color: var(--scw-color-grey-08);
+}`;var p=r`
+.scw-link {
+  outline: none;
+  display: inline-block;
+  text-decoration: none;
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+
+.scw-link:focus {
+  background-color: rgb(255, 255, 255);
+  border-radius: 4px 4px 4px 4px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+  box-shadow: var(--scw-effect-focus-shadow);
+}`;var g=r`
+.scw-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  text-decoration: none;
+}
+.scw-link > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.2);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.2 );
+}
+.scw-link scw-icon {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0);
+  --scw-icon-color: var(--scw-theme-color, var(--scw-color-primary-05));
+}
+.scw-link .left-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+.scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc(var(--scw-spacing-1) * 0.1);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.1);
+  text-align: LEFT;
+  font: 400 1rem/1.25rem "Proxima Nova";
+  color: var(--scw-color-primary);
+  text-decoration: underline;
+  color: var(--scw-theme-color, var(--scw-color-primary));
+}
+.scw-link .label > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.scw-link .right-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+
+.scw-link:hover {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+.scw-link:hover .label {
+  color: var(--scw-theme-color-hover, var(--scw-color-primary-02));
+}
+
+:host([aria-disabled=true]) .scw-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+:host([aria-disabled=true]) .scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  text-align: LEFT;
+  font: 400 1rem/1.25rem "Proxima Nova";
+  color: var(--scw-color-grey-08);
+}
+:host([aria-disabled=true]) .scw-link scw-icon,
+:host([aria-disabled=true]) .scw-link .icon {
+  --scw-icon-color: var(--scw-color-grey-08);
+}`;var w=r`
+.scw-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc(var(--scw-spacing-1) * 0.8);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.8);
+  text-decoration: none;
+}
+.scw-link > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+.scw-link scw-icon {
+  width: 20px;
+  height: 20px;
+  background-color: rgba(0, 0, 0, 0);
+  --scw-icon-color: var(--scw-color-grey-10);
+}
+.scw-link .left-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+.scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-top: calc(var(--scw-spacing-1) * 0.1);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.1);
+  text-align: LEFT;
+  font: 400 1rem/1.25rem "Proxima Nova";
+  color: var(--scw-color-primary);
+  text-decoration: underline;
+  color: var(--scw-theme-color, var(--scw-color-primary));
+}
+.scw-link .label > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.scw-link .right-icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 20px;
+  height: 20px;
+}
+
+.scw-link:hover {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+.scw-link:hover .label {
+  color: var(--scw-theme-color-hover, var(--scw-color-primary-02));
+}
+
+:host([aria-disabled=true]) .scw-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+:host([aria-disabled=true]) .scw-link .label {
+  background-color: rgba(0, 0, 0, 0);
+  text-align: LEFT;
+  font: 400 1rem/1.25rem "Proxima Nova";
+  color: var(--scw-color-grey-08);
+}
+:host([aria-disabled=true]) .scw-link scw-icon,
+:host([aria-disabled=true]) .scw-link .icon {
+  --scw-icon-color: var(--scw-color-grey-08);
+}`;var b=r`
+.scw-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 0.6);
+  padding-right: calc(var(--scw-spacing-1) * 0.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.6);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.6);
+  text-decoration: none;
+}
+.scw-link > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+.scw-link scw-icon,
+.scw-link .icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 26px;
+  height: 26px;
+  --scw-icon-color: var(--scw-theme-color, var(--scw-color-primary-05));
+}
+
+.scw-link:hover {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+.scw-link:hover scw-icon,
+.scw-link:hover .icon {
+  --scw-icon-color: var(--scw-theme-color-hover, var(--scw-color-primary-04));
+}
+
+:host([aria-disabled=true]) .scw-link {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0);
+}
+:host([aria-disabled=true]) .scw-link scw-icon,
+:host([aria-disabled=true]) .scw-link .icon {
+  --scw-icon-color: var(--scw-color-grey-08);
+}`;var h=r`
+.scw-link {
+  background-color: var(--scw-color-primary);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary);
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 0.6);
+  padding-right: calc(var(--scw-spacing-1) * 0.6);
+  padding-top: calc(var(--scw-spacing-1) * 0.6);
+  padding-bottom: calc(var(--scw-spacing-1) * 0.6);
+  background-color: var(--scw-theme-color, var(--scw-color-primary));
+  text-decoration: none;
+}
+.scw-link > *:not(:last-child) {
+  margin-right: calc(var(--scw-spacing-1) * 0.4);
+  --margin-right: calc( var( --scw-spacing-1 ) * 0.4 );
+}
+.scw-link scw-icon,
+.scw-link .icon {
+  background-color: rgba(0, 0, 0, 0);
+  width: 26px;
+  height: 26px;
+  --scw-icon-color: var(--scw-theme-color-inv, var(--scw-color-grey-10));
+}
+
+.scw-link:hover {
+  background-color: var(--scw-color-primary-02);
+  border-radius: 8px 8px 8px 8px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary-02);
+  background-color: var(--scw-theme-color-hover, var(--scw-color-primary-02));
+}
+.scw-link:hover scw-icon,
+.scw-link:hover .icon {
+  --scw-icon-color: var(
+    --scw-theme-color-hover-inv,
+    var(--scw-color-grey-10)
+  );
+}
+
+:host([aria-disabled=true]) .scw-link {
+  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-095);
+}
+:host([aria-disabled=true]) .scw-link scw-icon,
+:host([aria-disabled=true]) .scw-link .icon {
+  --scw-icon-color: var(--scw-color-grey-08);
+}`;var c=class extends e{constructor(){super();this.icon="";this.iconSide="";this.design="solid";this.href="";this.ariaLabel="";this.ariaDisabled="false";this.element="link-v2"}static get styles(){return[super.styles,s]}findStyle(){switch(this.design){case"solid":return n;case"outlined":return d;case"text":return g;case"block":return w;case"icon":return b;case"solidIcon":return h;case"plain":default:return p}}renderIcon(){return o`
+      <div class="icon">
+        <scw-icon
+          size="30"
+          icon="${this.icon}"></scw-icon>
+      </div>
+    `}renderContent(){return this.design==="icon"||this.design==="solidIcon"?this.renderIcon():o`
+        ${this.icon&&this.iconSide!=="right"?o`<div class="left-icon">${this.renderIcon()}</div>`:""}
+        <div class="label">${this.ariaLabel}</div>
+        ${this.icon&&this.iconSide==="right"?o`<div class="right-icon">${this.renderIcon()}</div>`:""}
+      `}render(){let x=`<style>${this.findStyle().cssText}</style>`;return o`
+      ${t(x)}
+      ${this.ariaDisabled==="true"?o`
+            <div
+              class="scw-link"
+              aria-label="${this.ariaLabel}"
+              aria-disabled="true">
+              ${this.design==="plain"?o`<slot></slot>`:o`${this.renderContent()}`}
+            </div>
+          `:o`
+            <a
+              class="scw-link"
+              href="${this.href?this.href:"javascript:"}"
+              target="${this.target?this.target:l}"
+              aria-label="${this.ariaLabel}">
+              ${this.design==="plain"?o`<slot></slot>`:o`${this.renderContent()}`}
+            </a>
+          `}
+    `}};a([i({type:String,attribute:"icon"})],c.prototype,"icon",2),a([i({type:String,attribute:"icon-side"})],c.prototype,"iconSide",2),a([i({type:String,attribute:"design"})],c.prototype,"design",2),a([i({type:String,attribute:"href"})],c.prototype,"href",2),a([i({type:String,attribute:"target"})],c.prototype,"target",2),a([i({type:String,attribute:"aria-label"})],c.prototype,"ariaLabel",2),a([i({type:String,attribute:"aria-disabled"})],c.prototype,"ariaDisabled",2);export{c as a};

package/dist/chunks/chunk.VOQKI3GF.js

@@ -0,0 +1,181 @@
+import{a as c}from"./chunk.WKH73SBC.js";import{a,b as o,f as s}from"./chunk.5MDLYG3I.js";import{a as r}from"./chunk.G2G2TPJK.js";import{f as t}from"./chunk.PE5ZEEQ2.js";var l=a`
+:host {
+  background-color: rgb(255, 255, 255);
+  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 > *:not(:last-child) {
+  margin-bottom: calc(var(--scw-spacing-1) * 0.6);
+  --margin-bottom: calc( var( --scw-spacing-1 ) * 0.6 );
+}
+:host .input-field-single {
+  flex: 1;
+}
+:host .input-feedback {
+  background-color: rgba(0, 0, 0, 0);
+  align-self: stretch;
+  text-align: LEFT;
+  font: var(--scw-type-text-04-font);
+  color: var(--scw-color-error);
+}
+
+.input-field {
+  background-color: rgba(0, 0, 0, 0);
+  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;
+  align-self: stretch;
+  padding: 0;
+}
+.input-field > *:not(:last-child) {
+  margin-right: 0px;
+  --margin-right: 0px;
+}
+.input-field .left-icon {
+  background-color: var(--scw-color-grey-095);
+  border-radius: 4px 0px 0px 4px;
+  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;
+}
+.input-field .left-icon > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+.input-field .left-icon .icon {
+  background-color: rgba(0, 0, 0, 0);
+}
+.input-field .input-text {
+  background-color: rgba(0, 0, 0, 0);
+  flex: 1;
+}
+.input-field .right-icon-2 {
+  align-self: center;
+}
+.input-field .right-icon {
+  align-self: center;
+}
+.input-field .right-action {
+  background-color: var(--scw-color-primary-03);
+  border-radius: 0px 4px 4px 0px;
+  align-self: stretch;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding-left: calc(var(--scw-spacing-1) * 0.4);
+  padding-right: calc(var(--scw-spacing-1) * 0.4);
+  padding-top: 0px;
+  padding-bottom: 0px;
+  border-radius: 0;
+}
+.input-field .right-action > *:not(:last-child) {
+  margin-right: var(--scw-spacing-1);
+  --margin-right: var( --scw-spacing-1 );
+}
+
+:host .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary-03);
+  align-self: stretch;
+}
+
+:host([aria-disabled]) .input-field {
+  background-color: var(--scw-color-grey-092);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-grey-08);
+  align-self: stretch;
+}
+
+:host([invalid]) .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-error);
+  align-self: stretch;
+}
+
+:host([focused]) .input-field {
+  background-color: var(--scw-color-grey-10);
+  border-radius: 6px 6px 6px 6px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--scw-color-primary-03);
+  box-shadow: var(--scw-effect-focus-shadow);
+  align-self: stretch;
+}
+
+::slotted(*) {
+  width: 100%;
+}`;var d=(e=>(e.rightIcon="right-icon",e.right2Icon="right-2-icon",e.rightAction="right-action",e))(d||{}),i=class extends s{constructor(){super();this.hideFeedback=!1;this.element="single-input-layout"}static get styles(){return[super.styles,l]}_right2ClickHandler(n){n.stopPropagation(),c("scw-action",this,{action:"right-2-icon"})}_rightClickHandler(n){n.stopPropagation(),c("scw-action",this,{action:"right-icon"})}_rightActionClickHandler(n){n.stopPropagation(),c("scw-action",this,{action:"right-action"})}render(){return r`
+      <div class="input-field">
+        ${this.leftActionIcon?r`
+            <div class="left-icon">
+              <scw-icon
+                class="icon"
+                .icon="${this.leftActionIcon}"
+                size="30">
+              </scw-icon>
+            </div>`:""}
+        <div class="input-field-single">
+          <slot></slot>
+        </div>
+        ${this.right2Icon?r`
+            <scw-icon
+              class="right-icon-2"
+              .icon="${this.right2Icon}"
+              size="30"
+              aria-label="Clear Input"
+              link
+              @click=${this._right2ClickHandler}>
+            </scw-icon>`:""}
+        ${this.rightIcon?r`
+            <scw-icon
+              class="right-icon"
+              .icon="${this.rightIcon}"
+              size="30"
+              aria-label="Show Password"
+              link
+              @click=${this._rightClickHandler}>
+            </scw-icon>`:""}
+        ${this.rightActionIcon?r`
+            <div class="right-action">
+              <scw-icon
+                class="icon-right-action"
+                .icon="${this.rightActionIcon}"
+                color="white"
+                size="30"
+                aria-label="Submit Search"
+                link
+                @click=${this._rightActionClickHandler}>
+              </scw-icon>
+            </div>`:""}
+      </div>
+      ${this.hideFeedback?"":r`
+          <div class="input-feedback">
+            ${this.feedback}&nbsp;
+          </div>`}
+    `}};t([o({type:String})],i.prototype,"feedback",2),t([o({type:String,attribute:"hide-feedback"})],i.prototype,"hideFeedback",2),t([o({type:String,attribute:"left-action-icon"})],i.prototype,"leftActionIcon",2),t([o({type:String,attribute:"right-action-icon"})],i.prototype,"rightActionIcon",2),t([o({type:String,attribute:"right-icon"})],i.prototype,"rightIcon",2),t([o({type:String,attribute:"right-2-icon"})],i.prototype,"right2Icon",2);export{d as a,i as b};