scu-web-components 0.0.68 → 0.0.69

package/dist-node/scw-select/scw-select.js

@@ -1,103 +0,0 @@
-var B=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var c=(s,o)=>()=>(s&&(o=s(s=0)),o);var r=(s,o,e,t)=>{for(var a=t>1?void 0:t?z(o,e):o,l=s.length-1,f;l>=0;l--)(f=s[l])&&(a=(t?f(o,e,a):f(a))||a);return t&&a&&B(o,e,a),a};var g=c(()=>{"use strict"});import{css as j}from"lit-element/lit-element.js";var L,A=c(()=>{"use strict";L=j`
-: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;
-}`});var p,R=c(()=>{"use strict";p=class{constructor(o,e){this._element=o,this._callback=e,this.observe()}observe(){if(this.disconnect(),this._element){let o={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,o)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}}});import{LitElement as P,html as U}from"lit";import{property as h,state as K}from"lit/decorators.js";var d,M=c(()=>{"use strict";g();A();R();d=class extends P{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(e){super.firstUpdated(e),this.dynamic&&(this._lightDomMutationObserver=new p(this,()=>{this.domMutated()}))}domMutated(){}warn(e){this._lastWarning||(this._lastWarning=e,this.setAttribute("warning",e),this.setAttribute("title",`[ERROR]: ${e}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return U`
-      <slot></slot>
-    `}};d.styles=L,r([h({type:String,reflect:!0,attribute:"aria-label"})],d.prototype,"ariaLabel",2),r([h({type:String,attribute:"aria-disabled"})],d.prototype,"ariaDisabled",2),r([h({type:Boolean,reflect:!0,attribute:"is-link"})],d.prototype,"isLink",2),r([h({type:Boolean})],d.prototype,"dynamic",2),r([h({type:String,reflect:!0})],d.prototype,"element",2),r([K()],d.prototype,"_lastWarning",2)});var V=c(()=>{"use strict"});import"lit-element/experimental-hydrate-support.js";var w,E=c(()=>{"use strict"});function m(s="-"){return w&&w.suffix?`${s}${w.suffix}`:""}var v=c(()=>{"use strict";E()});import{html as G}from"lit";import{property as u,state as x}from"lit/decorators.js";var q,n,H=c(()=>{"use strict";M();g();V();v();q=(t=>(t.text="text",t.boolean="boolean",t.submit="submit",t))(q||{}),n=class extends d{constructor(){super(...arguments);this.formType="text";this.value="";this.placeholder="";this.selected=!1;this.readOnly=!1;this.required=!1;this.requiredLabel=" *";this.focused=!1;this.invalid=!1}connectedCallback(){super.connectedCallback(),this.required&&this.createAndAddValidationRule("required",this.requiredFeedback)}decorateValues(e){if(!this.name){this.warn(`${this.element} didn't find a name`);return}this.formType==="boolean"?e[this.name]=this.selected:e[this.name]=this.value}findIfRequired(){let e=this.findValidationRules();return e?e.isRequired():!1}findValidationRules(){return Array.from(this.children).find(a=>a.nodeName.indexOf("SCW-VALIDATION")===0)}validate(){let e=this.findValidationRules(),t=[];return e&&(t=e.validate(this.value)),this.invalid=t.length>0,this.invalid?this.feedback=t[0].feedback:this.feedback="",t}createValidateRule(){return document.createElement(`scw-${"validate"}${m()}`)}addValidationRule(e){let t=this.findValidationRules();t||(t=document.createElement(`scw-${"validation"}${m()}`),this.prepend(t)),Array.from(t.children).find(f=>f.getAttribute("type")===e.type)||t.appendChild(e)}createAndAddValidationRule(e,t){let a=this.createValidateRule();a.setAttribute("type",e),t&&a.setAttribute("feedback",t),this.addValidationRule(a)}removeValidationRule(e){let t=this.findValidationRules();if(!t)return;let l=Array.from(t.children).find(f=>f.type===e);l&&l.parentNode&&l.parentNode.removeChild(l)}render(){return G`
-      scw-form-component
-    `}};r([u({type:q,reflect:!0,attribute:"form-type"})],n.prototype,"formType",2),r([u({type:String})],n.prototype,"name",2),r([u({type:String})],n.prototype,"value",2),r([u({type:String})],n.prototype,"placeholder",2),r([u({type:String})],n.prototype,"selected",2),r([u({type:Boolean,attribute:"read-only"})],n.prototype,"readOnly",2),r([u({type:Boolean})],n.prototype,"required",2),r([u({type:String,attribute:"required-label"})],n.prototype,"requiredLabel",2),r([u({type:String,attribute:"required-feedback"})],n.prototype,"requiredFeedback",2),r([x()],n.prototype,"feedback",2),r([x()],n.prototype,"focused",2),r([x()],n.prototype,"invalid",2)});import{css as J}from"lit-element/lit-element.js";var D,N=c(()=>{"use strict";D=J`
-: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 k,W=c(()=>{"use strict";k=(i=>(i.button="button",i.color="color",i.datetimeLocal="datetimeLocal",i.file="file",i.hidden="hidden",i.image="image",i.month="month",i.number="number",i.range="range",i.reset="reset",i.search="search",i.select="select",i.submit="submit",i.tel="tel",i.time="time",i.url="url",i.week="week",i.fieldset="fieldset",i.date="date",i.checkbox="checkbox",i.email="email",i.password="password",i.radio="radio",i.text="text",i.telephone="telephone",i.currency="currency",i))(k||{})});function y(s,o,e={},t){let a=new CustomEvent(s,{bubbles:!0,cancelable:!1,composed:!0,detail:e,...t});return o.dispatchEvent(a),a}var $=c(()=>{"use strict"});import{html as _}from"lit/static-html.js";import{unsafeStatic as Q}from"lit/static-html.js";import{property as X,state as Y}from"lit/decorators.js";var b,Z=c(()=>{H();g();N();W();$();$();v();b=class extends n{constructor(){super();this._options=[];this.type="text";this.element="input";let e=m();this.scwInputLayout=Q(`scw-${"input-layout"}${e}`),this.processOptions()}static get styles(){return[super.styles,D]}connectedCallback(){super.connectedCallback()}domMutated(){super.domMutated(),this.processOptions()}processOptions(){let e=this.querySelectorAll(":scope > option"),t=Array.from(e).map(a=>{let l=a.value;return _`
-          <option
-            value=${l}
-            ?selected=${l===this.value}>
-            ${a.textContent}
-          </option>`});this._options=[_`
-      <option
-        value=""
-        ?selected=${this.value===""}>
-      </option>`,...t]}_focusHandler(){this.focused=!0}_blurHandler(){this.focused=!1,this.validate()}_valueChangeHandler(e){e.target&&(this.value=e.target.value,y("scw-value-change",this))}checkForSubmit(e){e.key==="Enter"&&y("scw-submit-intent",this)}render(){return _`
-      <${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>
-    `}};r([Y()],b.prototype,"_options",2),r([X({type:k})],b.prototype,"type",2)});Z();export{b as default};

package/dist-node/scw-single-input/scw-single-input.js

@@ -1,237 +0,0 @@
-var Q=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var c=(a,r)=>()=>(a&&(r=a(a=0)),r);var i=(a,r,t,e)=>{for(var n=e>1?void 0:e?T(r,t):r,o=a.length-1,d;o>=0;o--)(d=a[o])&&(n=(e?d(r,t,n):d(n))||n);return e&&n&&Q(r,t,n),n};var w=c(()=>{"use strict"});import{css as X}from"lit-element/lit-element.js";var H,M=c(()=>{"use strict";H=X`
-: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;
-}`});var x,q=c(()=>{"use strict";x=class{constructor(r,t){this._element=r,this._callback=t,this.observe()}observe(){if(this.disconnect(),this._element){let r={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,r)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}}});import{LitElement as Y,html as Z}from"lit";import{property as v,state as C}from"lit/decorators.js";var l,A=c(()=>{"use strict";w();M();q();l=class extends Y{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.dynamic&&(this._lightDomMutationObserver=new x(this,()=>{this.domMutated()}))}domMutated(){}warn(t){this._lastWarning||(this._lastWarning=t,this.setAttribute("warning",t),this.setAttribute("title",`[ERROR]: ${t}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return Z`
-      <slot></slot>
-    `}};l.styles=H,i([v({type:String,reflect:!0,attribute:"aria-label"})],l.prototype,"ariaLabel",2),i([v({type:String,attribute:"aria-disabled"})],l.prototype,"ariaDisabled",2),i([v({type:Boolean,reflect:!0,attribute:"is-link"})],l.prototype,"isLink",2),i([v({type:Boolean})],l.prototype,"dynamic",2),i([v({type:String,reflect:!0})],l.prototype,"element",2),i([C()],l.prototype,"_lastWarning",2)});var I=c(()=>{"use strict"});import"lit-element/experimental-hydrate-support.js";var y,F=c(()=>{"use strict"});function m(a="-"){return y&&y.suffix?`${a}${y.suffix}`:""}var _=c(()=>{"use strict";F()});import{html as et}from"lit";import{property as u,state as R}from"lit/decorators.js";var j,s,W=c(()=>{"use strict";A();w();I();_();j=(e=>(e.text="text",e.boolean="boolean",e.submit="submit",e))(j||{}),s=class extends l{constructor(){super(...arguments);this.formType="text";this.value="";this.placeholder="";this.selected=!1;this.readOnly=!1;this.required=!1;this.requiredLabel=" *";this.focused=!1;this.invalid=!1}connectedCallback(){super.connectedCallback(),this.required&&this.createAndAddValidationRule("required",this.requiredFeedback)}decorateValues(t){if(!this.name){this.warn(`${this.element} didn't find a name`);return}this.formType==="boolean"?t[this.name]=this.selected:t[this.name]=this.value}findIfRequired(){let t=this.findValidationRules();return t?t.isRequired():!1}findValidationRules(){return Array.from(this.children).find(n=>n.nodeName.indexOf("SCW-VALIDATION")===0)}validate(){let t=this.findValidationRules(),e=[];return t&&(e=t.validate(this.value)),this.invalid=e.length>0,this.invalid?this.feedback=e[0].feedback:this.feedback="",e}createValidateRule(){return document.createElement(`scw-${"validate"}${m()}`)}addValidationRule(t){let e=this.findValidationRules();e||(e=document.createElement(`scw-${"validation"}${m()}`),this.prepend(e)),Array.from(e.children).find(d=>d.getAttribute("type")===t.type)||e.appendChild(t)}createAndAddValidationRule(t,e){let n=this.createValidateRule();n.setAttribute("type",t),e&&n.setAttribute("feedback",e),this.addValidationRule(n)}removeValidationRule(t){let e=this.findValidationRules();if(!e)return;let o=Array.from(e.children).find(d=>d.type===t);o&&o.parentNode&&o.parentNode.removeChild(o)}render(){return et`
-      scw-form-component
-    `}};i([u({type:j,reflect:!0,attribute:"form-type"})],s.prototype,"formType",2),i([u({type:String})],s.prototype,"name",2),i([u({type:String})],s.prototype,"value",2),i([u({type:String})],s.prototype,"placeholder",2),i([u({type:String})],s.prototype,"selected",2),i([u({type:Boolean,attribute:"read-only"})],s.prototype,"readOnly",2),i([u({type:Boolean})],s.prototype,"required",2),i([u({type:String,attribute:"required-label"})],s.prototype,"requiredLabel",2),i([u({type:String,attribute:"required-feedback"})],s.prototype,"requiredFeedback",2),i([R()],s.prototype,"feedback",2),i([R()],s.prototype,"focused",2),i([R()],s.prototype,"invalid",2)});import{css as it}from"lit-element/lit-element.js";var U,P=c(()=>{"use strict";U=it`
-:host {
-  display: block;
-}`});import{css as rt}from"lit-element/lit-element.js";var D,z=c(()=>{"use strict";D=rt`
-: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%;
-}`});function h(a,r,t={},e){let n=new CustomEvent(a,{bubbles:!0,cancelable:!1,composed:!0,detail:t,...e});return r.dispatchEvent(n),n}var V=c(()=>{"use strict"});import{html as g}from"lit";import{property as b}from"lit/decorators.js";var p,B=c(()=>{"use strict";A();w();z();V();p=class extends l{constructor(){super();this.hideFeedback=!1;this.element="single-input-layout"}static get styles(){return[super.styles,D]}_right2ClickHandler(t){t.stopPropagation(),h("scw-action",this,{action:"right-2-icon"})}_rightClickHandler(t){t.stopPropagation(),h("scw-action",this,{action:"right-icon"})}_rightActionClickHandler(t){t.stopPropagation(),h("scw-action",this,{action:"right-action"})}render(){return g`
-      <div class="input-field">
-        ${this.leftActionIcon?g`
-            <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?g`
-            <scw-icon
-              class="right-icon-2"
-              .icon="${this.right2Icon}"
-              size="30"
-              aria-label="Clear Input"
-              link
-              @click=${this._right2ClickHandler}>
-            </scw-icon>`:""}
-        ${this.rightIcon?g`
-            <scw-icon
-              class="right-icon"
-              .icon="${this.rightIcon}"
-              size="30"
-              aria-label="Show Password"
-              link
-              @click=${this._rightClickHandler}>
-            </scw-icon>`:""}
-        ${this.rightActionIcon?g`
-            <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?"":g`
-          <div class="input-feedback">
-            ${this.feedback}&nbsp;
-          </div>`}
-    `}};i([b({type:String})],p.prototype,"feedback",2),i([b({type:String,attribute:"hide-feedback"})],p.prototype,"hideFeedback",2),i([b({type:String,attribute:"left-action-icon"})],p.prototype,"leftActionIcon",2),i([b({type:String,attribute:"right-action-icon"})],p.prototype,"rightActionIcon",2),i([b({type:String,attribute:"right-icon"})],p.prototype,"rightIcon",2),i([b({type:String,attribute:"right-2-icon"})],p.prototype,"right2Icon",2)});function N(a,r){return(t,e)=>{let{update:n}=t;r=Object.assign({waitUntilFirstUpdate:!1},r),t.update=function(o){if(o.has(a)){let d=o.get(a),L=this[a];d!==L&&r&&(!r.waitUntilFirstUpdate||this.hasUpdated)&&this[e].call(this,d,L)}n.call(this,o)}}}var S=c(()=>{"use strict"});function K(a,r,t){t=t||"post";let e=document.createElement("form");e.setAttribute("method",t),e.setAttribute("action",a);for(let n in r)if(r.hasOwnProperty(n)){let o=document.createElement("input");o.setAttribute("type","hidden"),o.setAttribute("name",n),o.setAttribute("value",r[n]),e.appendChild(o)}document.body.appendChild(e),e.submit()}var G=c(()=>{"use strict"});import{property as O}from"lit/decorators.js";import{html as k}from"lit/static-html.js";import{unsafeStatic as E}from"lit/static-html.js";import{ref as at,createRef as ot}from"lit/directives/ref.js";var J,f,st=c(()=>{W();w();P();B();V();_();S();I();G();J=(t=>(t.search="search",t.email="email",t))(J||{}),f=class extends s{constructor(){super();this.scwInputRef=ot();this.type="search";this.method="get";this.element="single-input";let t=m();this.scwInputField=E(`scw-${"input-field"}${t}`),this.scwSingleInputLayout=E(`scw-${"single-input-layout"}${t}`),this.scwForm=E(`scw-${"form"}${t}`)}static get styles(){return[super.styles,U]}typeWatcher(t,e){e==="email"?(this.createAndAddValidationRule("required"),this.createAndAddValidationRule("email")):(this.removeValidationRule("email"),this.removeValidationRule("required"))}_focusHandler(){this.focused=!0}_blurHandler(){this.focused=!1,this.validate()}_valueChangeHandler(t){this.value=t.detail.value}_layoutActionHandler(t){if(t.detail.action==="right-icon"){this.value="",t.stopPropagation();return}if(t.detail.action==="right-action"){t.stopPropagation(),this.submit();return}}checkForSubmit(t){t.key==="Enter"&&this.submit()}submit(){this.action&&K(this.action,{keys:this.value},this.method),h("scw-submit",this,{validation:this.validate(),data:{value:this.value}})}renderInputField(){return k`
-      <${this.scwInputField}
-        ${at(this.scwInputRef)}
-        .value=${this.value}
-        .placeholder=${this.placeholder}
-        .name=${this.type}
-        @keyup=${this.checkForSubmit}
-        @scw-focus=${this._focusHandler}
-        @scw-blur=${this._blurHandler}
-        @scw-value-change=${this._valueChangeHandler}>
-      </${this.scwInputField}>
-    `}renderEmail(){return k`
-      <${this.scwSingleInputLayout}
-        .feedback="${this.feedback}"
-        right-action-icon="icon-placeholder"
-        left-action-icon="icon-placeholder"
-        ?focused=${this.focused}
-        ?invalid=${this.invalid}
-        @scw-action=${this._layoutActionHandler}>
-        ${this.renderInputField()}
-      </${this.scwSingleInputLayout}>
-      <slot name="validation"></slot>
-    `}renderSearch(){return k`
-      <${this.scwSingleInputLayout}
-        .feedback="${this.feedback}"
-        right-action-icon="icon-search"
-        right-icon="icon-clear"
-        ?focused=${this.focused}
-        ?invalid=${this.invalid}
-        @scw-action=${this._layoutActionHandler}>
-        ${this.renderInputField()}
-      </${this.scwSingleInputLayout}>
-      <slot name="validation"></slot>
-    `}render(){return this.type==="email"?k`${this.renderEmail()}`:this.renderSearch()}};i([O({type:J})],f.prototype,"type",2),i([O({type:String})],f.prototype,"action",2),i([O({type:String})],f.prototype,"method",2),i([N("type")],f.prototype,"typeWatcher",1)});st();export{f as default};

package/dist-node/scw-single-input-layout/scw-single-input-layout.js

@@ -1,199 +0,0 @@
-var m=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var i=(l,e,t,n)=>{for(var a=n>1?void 0:n?x(e,t):e,h=l.length-1,u;h>=0;h--)(u=l[h])&&(a=(n?u(e,t,a):u(a))||a);return n&&a&&m(e,t,a),a};import{html as c}from"lit";import{property as s}from"lit/decorators.js";import{LitElement as k,html as y}from"lit";import{property as p,state as _}from"lit/decorators.js";import{css as v}from"lit-element/lit-element.js";var f=v`
-: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;
-}`;var d=class{constructor(e,t){this._element=e,this._callback=t,this.observe()}observe(){if(this.disconnect(),this._element){let e={characterData:!0,childList:!0,attributes:!1,subtree:!0};this._mutationObserver=new MutationObserver(()=>this._callback()),this._mutationObserver.observe(this._element,e)}}disconnect(){!this._mutationObserver||this._mutationObserver.disconnect()}};var r=class extends k{constructor(){super(...arguments);this.ariaLabel="";this.ariaDisabled="false";this.isLink=!1;this.dynamic=!1;this.element="component"}disconnectedCallback(){super.disconnectedCallback(),this._lightDomMutationObserver&&this._lightDomMutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.dynamic&&(this._lightDomMutationObserver=new d(this,()=>{this.domMutated()}))}domMutated(){}warn(t){this._lastWarning||(this._lastWarning=t,this.setAttribute("warning",t),this.setAttribute("title",`[ERROR]: ${t}`))}clearWarnings(){this._lastWarning=void 0,this.removeAttribute("warning"),this.removeAttribute("title")}render(){return y`
-      <slot></slot>
-    `}};r.styles=f,i([p({type:String,reflect:!0,attribute:"aria-label"})],r.prototype,"ariaLabel",2),i([p({type:String,attribute:"aria-disabled"})],r.prototype,"ariaDisabled",2),i([p({type:Boolean,reflect:!0,attribute:"is-link"})],r.prototype,"isLink",2),i([p({type:Boolean})],r.prototype,"dynamic",2),i([p({type:String,reflect:!0})],r.prototype,"element",2),i([_()],r.prototype,"_lastWarning",2);import{css as I}from"lit-element/lit-element.js";var b=I`
-: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%;
-}`;function g(l,e,t={},n){let a=new CustomEvent(l,{bubbles:!0,cancelable:!1,composed:!0,detail:t,...n});return e.dispatchEvent(a),a}var A=(n=>(n.rightIcon="right-icon",n.right2Icon="right-2-icon",n.rightAction="right-action",n))(A||{}),o=class extends r{constructor(){super();this.hideFeedback=!1;this.element="single-input-layout"}static get styles(){return[super.styles,b]}_right2ClickHandler(t){t.stopPropagation(),g("scw-action",this,{action:"right-2-icon"})}_rightClickHandler(t){t.stopPropagation(),g("scw-action",this,{action:"right-icon"})}_rightActionClickHandler(t){t.stopPropagation(),g("scw-action",this,{action:"right-action"})}render(){return c`
-      <div class="input-field">
-        ${this.leftActionIcon?c`
-            <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?c`
-            <scw-icon
-              class="right-icon-2"
-              .icon="${this.right2Icon}"
-              size="30"
-              aria-label="Clear Input"
-              link
-              @click=${this._right2ClickHandler}>
-            </scw-icon>`:""}
-        ${this.rightIcon?c`
-            <scw-icon
-              class="right-icon"
-              .icon="${this.rightIcon}"
-              size="30"
-              aria-label="Show Password"
-              link
-              @click=${this._rightClickHandler}>
-            </scw-icon>`:""}
-        ${this.rightActionIcon?c`
-            <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?"":c`
-          <div class="input-feedback">
-            ${this.feedback}&nbsp;
-          </div>`}
-    `}};i([s({type:String})],o.prototype,"feedback",2),i([s({type:String,attribute:"hide-feedback"})],o.prototype,"hideFeedback",2),i([s({type:String,attribute:"left-action-icon"})],o.prototype,"leftActionIcon",2),i([s({type:String,attribute:"right-action-icon"})],o.prototype,"rightActionIcon",2),i([s({type:String,attribute:"right-icon"})],o.prototype,"rightIcon",2),i([s({type:String,attribute:"right-2-icon"})],o.prototype,"right2Icon",2);export{A as ScwSingleInputLayoutActions,o as default};