scb-wc-test 0.1.118 → 0.1.119

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,7 +25,7 @@ import{a as g,n as s,i as v,E as p,x as l,t as u}from"../../vendor/vendor.js";im
25
25
  ${this.supportingText?l`<div class="supporting-text">${this.supportingText}</div>`:p}
26
26
  </div>
27
27
 
28
- <md-icon class="chevron">expand_more</md-icon>
28
+ <md-icon class="chevron">keyboard_arrow_down</md-icon>
29
29
  </summary>
30
30
 
31
31
  <div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${e}>
@@ -39,7 +39,7 @@ import{_ as l}from"../../vendor/preload-helper.js";import{a as h,n as p,r as b,i
39
39
  `}
40
40
  ${r?c`
41
41
  <scb-icon-button
42
- icon="${this.expanded?"expand_less":"expand_more"}"
42
+ icon="${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}"
43
43
  role="presentation"
44
44
  tabindex="-1"
45
45
  @click=${s=>{s.stopPropagation(),this._toggleExpand(s)}}
@@ -1,4 +1,4 @@
1
- import{a as h,n as r,i as p,x as d,t as u}from"../../vendor/vendor.js";import"./scb-select-option.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,i,o){try{customElements.get(e)||s(e,i,o)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,n=(t,s,e,i)=>{for(var o=i>1?void 0:i?v(s,e):s,a=t.length-1,c;a>=0;a--)(c=t[a])&&(o=(i?c(s,e,o):c(o))||o);return i&&o&&b(s,e,o),o};let l=class extends p{constructor(){super(),this._internals=null,this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.withRadiobuttons=!1,this._onDocumentClick=t=>{if(!this.open)return;t.composedPath().includes(this)||(this.open=!1,this.removeAttribute("open"))},this._onSlotClick=t=>{const s=this.shadowRoot?.querySelector("slot");if(!s)return;const e=s.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-select-option"),i=t.composedPath(),o=e.find(a=>i.includes(a));o&&(this._selectOption(o),t.stopPropagation())},this._onKeyDown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._toggleOpen())},this._onOptionKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();const s=this.shadowRoot?.querySelector("slot");if(!s)return;const e=s.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-select-option"),i=t.composedPath(),o=e.find(a=>i.includes(a));o&&this._selectOption(o)}},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick)}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),super.disconnectedCallback()}_toggleOpen(){this.disabled||(this.open=!this.open,this.open?(this.focusedIndex=0,this.requestUpdate()):this.focusedIndex=-1)}_selectOption(t){t.disabled||(this.variant==="multi-select"?(this.values.indexOf(t.value)>-1?this.values=this.values.filter(e=>e!==t.value):this.values=[...this.values,t.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))):this.variant==="single-select"&&this.withRadiobuttons?(this.value=t.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=t.value,this.open=!1,this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))),this._updateOptionsChecked(),this.requestUpdate())}_getSelectedLabel(){const t=this.shadowRoot?.querySelector("slot");if(!t)return"";const s=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-select-option");if(this.variant==="multi-select"){const e=s.filter(i=>this.values.includes(i.value));return e&&e.length>0?e.map(i=>i.label).join(", "):""}else{const e=s.find(i=>i.value===this.value);return e?e.label:""}}firstUpdated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value)}updated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value)}_updateOptionsChecked(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-select-option").forEach(e=>{this.variant==="multi-select"?(e.showCheckbox=!0,e.checked=this.values.includes(e.value),e.showRadio=!1):(e.showCheckbox=!1,e.checked=this.value===e.value,this.withRadiobuttons&&(e.showRadio=!0))})}render(){return d`
1
+ import{a as h,n,i as p,x as d,t as u}from"../../vendor/vendor.js";import"./scb-select-option.js";import"../../vendor/vendor-material.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,i,o){try{customElements.get(e)||s(e,i,o)}catch(c){var a=String(c||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var b=Object.defineProperty,v=Object.getOwnPropertyDescriptor,r=(t,s,e,i)=>{for(var o=i>1?void 0:i?v(s,e):s,a=t.length-1,c;a>=0;a--)(c=t[a])&&(o=(i?c(s,e,o):c(o))||o);return i&&o&&b(s,e,o),o};let l=class extends p{constructor(){super(),this._internals=null,this.focusedIndex=-1,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.open=!1,this.label="",this.name="",this.placeholder="",this.supportingText="",this.withRadiobuttons=!1,this._onDocumentClick=t=>{if(!this.open)return;t.composedPath().includes(this)||(this.open=!1,this.removeAttribute("open"))},this._onSlotClick=t=>{const s=this.shadowRoot?.querySelector("slot");if(!s)return;const e=s.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-select-option"),i=t.composedPath(),o=e.find(a=>i.includes(a));o&&(this._selectOption(o),t.stopPropagation())},this._onKeyDown=t=>{(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),this._toggleOpen())},this._onOptionKeyDown=t=>{if(t.key==="Enter"||t.key===" "){t.preventDefault();const s=this.shadowRoot?.querySelector("slot");if(!s)return;const e=s.assignedElements({flatten:!0}).filter(a=>a.tagName.toLowerCase()==="scb-select-option"),i=t.composedPath(),o=e.find(a=>i.includes(a));o&&this._selectOption(o)}},"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),document.addEventListener("mousedown",this._onDocumentClick)}disconnectedCallback(){document.removeEventListener("mousedown",this._onDocumentClick),super.disconnectedCallback()}_toggleOpen(){this.disabled||(this.open=!this.open,this.open?(this.focusedIndex=0,this.requestUpdate()):this.focusedIndex=-1)}_selectOption(t){t.disabled||(this.variant==="multi-select"?(this.values.indexOf(t.value)>-1?this.values=this.values.filter(e=>e!==t.value):this.values=[...this.values,t.value],this.value=this.values.join(","),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0}))):this.variant==="single-select"&&this.withRadiobuttons?(this.value=t.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))):(this.value=t.value,this.open=!1,this.removeAttribute("open"),this.dispatchEvent(new CustomEvent("change",{detail:{value:this.value},bubbles:!0,composed:!0}))),this._updateOptionsChecked(),this.requestUpdate())}_getSelectedLabel(){const t=this.shadowRoot?.querySelector("slot");if(!t)return"";const s=t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-select-option");if(this.variant==="multi-select"){const e=s.filter(i=>this.values.includes(i.value));return e&&e.length>0?e.map(i=>i.label).join(", "):""}else{const e=s.find(i=>i.value===this.value);return e?e.label:""}}firstUpdated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value)}updated(){this._updateOptionsChecked(),this._internals&&this._internals.setFormValue(this.value)}_updateOptionsChecked(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;t.assignedElements({flatten:!0}).filter(e=>e.tagName.toLowerCase()==="scb-select-option").forEach(e=>{this.variant==="multi-select"?(e.showCheckbox=!0,e.checked=this.values.includes(e.value),e.showRadio=!1):(e.showCheckbox=!1,e.checked=this.value===e.value,this.withRadiobuttons&&(e.showRadio=!0))})}render(){return d`
2
2
  ${this.label||this.supportingText?d`
3
3
  <label class="select-label" id="scb-select-label-${this.name}">
4
4
  ${this.label?d`
@@ -26,7 +26,7 @@ import{a as h,n as r,i as p,x as d,t as u}from"../../vendor/vendor.js";import"./
26
26
  placeholder="${this.placeholder}"
27
27
  />
28
28
  <span class="arrow">
29
- <md-icon>${this.open?"expand_less":"expand_more"}</md-icon>
29
+ <md-icon>${this.open?"keyboard_arrow_up":"keyboard_arrow_down"}</md-icon>
30
30
  </span>
31
31
  </div>
32
32
  <div class="options" @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
@@ -159,4 +159,4 @@ import{a as h,n as r,i as p,x as d,t as u}from"../../vendor/vendor.js";import"./
159
159
  padding: var(--spacing-6) 52px var(--spacing-6) var(--spacing-5);
160
160
  }
161
161
 
162
- `;n([r({type:String})],l.prototype,"variant",2);n([r({type:String})],l.prototype,"value",2);n([r({type:Array})],l.prototype,"values",2);n([r({type:Boolean})],l.prototype,"disabled",2);n([r({type:Boolean,reflect:!0})],l.prototype,"open",2);n([r({type:String})],l.prototype,"label",2);n([r({type:String})],l.prototype,"name",2);n([r({type:String})],l.prototype,"placeholder",2);n([r({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",2);n([r({type:Boolean,attribute:"with-radiobuttons"})],l.prototype,"withRadiobuttons",2);l=n([u("scb-select")],l);
162
+ `;r([n({type:String})],l.prototype,"variant",2);r([n({type:String})],l.prototype,"value",2);r([n({type:Array})],l.prototype,"values",2);r([n({type:Boolean})],l.prototype,"disabled",2);r([n({type:Boolean,reflect:!0})],l.prototype,"open",2);r([n({type:String})],l.prototype,"label",2);r([n({type:String})],l.prototype,"name",2);r([n({type:String})],l.prototype,"placeholder",2);r([n({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",2);r([n({type:Boolean,attribute:"with-radiobuttons"})],l.prototype,"withRadiobuttons",2);l=r([u("scb-select")],l);
@@ -1,4 +1,4 @@
1
- import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,l,n){try{customElements.get(i)||e(i,l,n)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var n=l>1?void 0:l?w(e,i):e,p=t.length-1,h;p>=0;p--)(h=t[p])&&(n=(l?h(e,i,n):h(n))||n);return l&&n&&_(e,i,n),n},$=(t,e,i)=>e.has(t)||m("Cannot "+i),k=(t,e,i)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),c=(t,e,i)=>($(t,e,"access private method"),i),o,f,b,u;let s=class extends g{constructor(){super(),k(this,o),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&c(this,o,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&c(this,o,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}if(this.pattern)if(!this.value)this.error=!1;else{const e=new RegExp(this.pattern);this.error=!e.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,l=this.type==="search"&&this.value?d`
1
+ import{a as _,n,r as w,i as $,x as d,t as k}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(i,c,o){try{customElements.get(i)||e(i,c,o)}catch(p){var h=String(p||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var E=Object.defineProperty,S=Object.getOwnPropertyDescriptor,g=t=>{throw TypeError(t)},a=(t,e,i,c)=>{for(var o=c>1?void 0:c?S(e,i):e,h=t.length-1,p;h>=0;h--)(p=t[h])&&(o=(c?p(e,i,o):p(o))||o);return c&&o&&E(e,i,o),o},L=(t,e,i)=>e.has(t)||g("Cannot "+i),F=(t,e,i)=>e.has(t)?g("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),l=(t,e,i)=>(L(t,e,"access private method"),i),r,f,b,m,v,x,y,u;let s=class extends ${constructor(){super(),F(this,r),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=t=>{t.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&l(this,r,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&l(this,r,u).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const t=this._boundField;if(!t)return;const e=t;if(this.value=e.value,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}l(this,r,m).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},this._onFieldChange=()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))},this._onFieldSelect=()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))},this._onFieldFocus=()=>{this._inputFocused=!0,l(this,r,u).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,l(this,r,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._onDateSelected=t=>{if(this.value=t.detail.value,this._showDatepicker=!1,this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}l(this,r,m).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))},"attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?d`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?d`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,c=this.type==="search"&&this.value?d`
2
2
  <button
3
3
  type="button"
4
4
  class="scb-textfield-clear"
@@ -6,9 +6,30 @@ import{a as v,n as a,r as x,i as g,x as d,t as y}from"../../vendor/vendor.js";im
6
6
  aria-label="Rensa fält"
7
7
  >
8
8
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
9
- <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>
10
- <line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2"></line>
11
- <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2"></line>
9
+ <circle
10
+ cx="12"
11
+ cy="12"
12
+ r="10"
13
+ fill="none"
14
+ stroke="currentColor"
15
+ stroke-width="2"
16
+ ></circle>
17
+ <line
18
+ x1="8"
19
+ y1="8"
20
+ x2="16"
21
+ y2="16"
22
+ stroke="currentColor"
23
+ stroke-width="2"
24
+ ></line>
25
+ <line
26
+ x1="16"
27
+ y1="8"
28
+ x2="8"
29
+ y2="16"
30
+ stroke="currentColor"
31
+ stroke-width="2"
32
+ ></line>
12
33
  </svg>
13
34
  </button>
14
35
  `:null;return this.type==="textarea"?d`
@@ -140,7 +161,7 @@ ${this.value}</textarea
140
161
  ?required=${this.required}
141
162
  aria-invalid=${this.error?"true":"false"}
142
163
  aria-describedby=${i}
143
- @input=${n=>{const p=n.target;if(this.value=p.value,this._internals){const h=this.disabled?null:this.value;this._internals.setFormValue(h)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}}
164
+ @input=${o=>{const h=o.target;if(this.value=h.value,this._internals){const p=this.disabled?null:this.value;this._internals.setFormValue(p)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}}
144
165
  />
145
166
  ${e}
146
167
  <md-ripple></md-ripple>
@@ -168,13 +189,13 @@ ${this.value}</textarea
168
189
  aria-invalid=${this.error?"true":"false"}
169
190
  aria-describedby=${i}
170
191
  />
171
- ${l}
192
+ ${c}
172
193
  ${e}
173
194
  <md-ripple></md-ripple>
174
195
  <md-focus-ring class="input-ring"></md-focus-ring>
175
196
  </div>
176
197
  </div>
177
- `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e.addEventListener("input",()=>{const i=e;if(this.value=i.value,this._internals){const l=this.disabled?null:this.value;this._internals.setFormValue(l)}if(this.pattern)if(!this.value)this.error=!1;else{const l=new RegExp(this.pattern);this.error=!l.test(this.value)}this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}),e.addEventListener("change",()=>{this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.addEventListener("select",()=>{this.dispatchEvent(new Event("select",{bubbles:!0,composed:!0}))}),e.addEventListener("focus",()=>{this._inputFocused=!0,c(this,o,u).call(this)}),e.addEventListener("blur",()=>{this._inputFocused=!1,c(this,o,u).call(this)})),c(this,o,f).call(this)}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&c(this,o,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};o=new WeakSet;f=function(){const t=c(this,o,b).call(this,this.spacing),e=c(this,o,b).call(this,this.spacingTop)??t,i=c(this,o,b).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[v`
198
+ `}firstUpdated(t){super.firstUpdated(t),this._initialValue=this.value,l(this,r,v).call(this),l(this,r,f).call(this),this._hasRenderedOnce=!0}updated(t){if(super.updated(t),this.toggleAttribute("aria-disabled",this.disabled),this._internals&&(t.has("value")||t.has("disabled"))){const e=this.disabled?null:this.value;this._internals.setFormValue(e)}t.has("type")&&(l(this,r,v).call(this),this._hasRenderedOnce&&l(this,r,y).call(this)),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&l(this,r,f).call(this)}formDisabledCallback(t){this.disabled=t}connectedCallback(){super.connectedCallback(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=t=>{this.reportValidity()||(t.preventDefault(),t.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>{this.value=this._initialValue;const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),l(this,r,x).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){this.required&&!t.value?t.setCustomValidity(this.errorText||"Ogiltig inmatning."):t.setCustomValidity("");const e=t.reportValidity();this.error=!e;const i=e?"":this.errorText||t.validationMessage||"Ogiltig inmatning.";return e||(this.errorText=i),this._internals&&(e?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,t)),e}return!0}_onClearClick(){const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)){if(t.value="",this.value="",this._internals){const e=this.disabled?null:this.value;this._internals.setFormValue(e),this._internals.setValidity({})}this.error=!1,t.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),t.focus()}}};r=new WeakSet;f=function(){const t=l(this,r,b).call(this,this.spacing),e=l(this,r,b).call(this,this.spacingTop)??t,i=l(this,r,b).call(this,this.spacingBottom)??t;e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),i?this.style.setProperty("--scb-textfield-spacing-block-end",i):this.style.removeProperty("--scb-textfield-spacing-block-end")};b=function(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e};m=function(){if(!this.pattern)return;if(!this.value){this.error=!1;return}const t=new RegExp(this.pattern);this.error=!t.test(this.value)};v=function(){const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&this._boundField!==t&&(l(this,r,x).call(this),this._boundField=t,this.type!=="time"&&t.addEventListener("input",this._onFieldInput),t.addEventListener("change",this._onFieldChange),t.addEventListener("select",this._onFieldSelect),t.addEventListener("focus",this._onFieldFocus),t.addEventListener("blur",this._onFieldBlur))};x=function(){const t=this._boundField;t&&(t.removeEventListener("input",this._onFieldInput),t.removeEventListener("change",this._onFieldChange),t.removeEventListener("select",this._onFieldSelect),t.removeEventListener("focus",this._onFieldFocus),t.removeEventListener("blur",this._onFieldBlur),this._boundField=null)};y=function(){this._showDatepicker=!1;const t=this.shadowRoot?.querySelector(".scb-textfield");if(t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&(t.value="",t.setCustomValidity("")),this.value="",this.error=!1,this._internals){const e=this.disabled?null:"";this._internals.setFormValue(e),this._internals.setValidity({})}};u=function(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[_`
178
199
  :host {
179
200
  --scb-textfield-number-max-width: 280px;
180
201
  --scb-textfield-text-max-width: 400px;
@@ -416,4 +437,4 @@ ${this.value}</textarea
416
437
  transform: translateY(-50%);
417
438
  z-index: 4;
418
439
  }
419
- `];r([a({type:String,reflect:!0})],s.prototype,"type",2);r([a({type:String})],s.prototype,"label",2);r([a({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);r([a({type:String,attribute:"error-text"})],s.prototype,"errorText",2);r([a({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);r([a({type:String})],s.prototype,"name",2);r([a({type:String})],s.prototype,"pattern",2);r([a({type:String,attribute:"value"})],s.prototype,"value",2);r([a({type:String})],s.prototype,"underLabel",2);r([a({type:Boolean,reflect:!0})],s.prototype,"error",2);r([a({type:Boolean,reflect:!0})],s.prototype,"disabled",2);r([a({type:Boolean,reflect:!0})],s.prototype,"required",2);r([a({type:String,reflect:!0})],s.prototype,"spacing",2);r([a({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);r([a({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);r([x()],s.prototype,"_showDatepicker",2);s=r([y("scb-textfield")],s);
440
+ `];a([n({type:String,reflect:!0})],s.prototype,"type",2);a([n({type:String})],s.prototype,"label",2);a([n({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);a([n({type:String,attribute:"error-text"})],s.prototype,"errorText",2);a([n({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);a([n({type:String})],s.prototype,"name",2);a([n({type:String})],s.prototype,"pattern",2);a([n({type:String,attribute:"value"})],s.prototype,"value",2);a([n({type:String})],s.prototype,"underLabel",2);a([n({type:Boolean,reflect:!0})],s.prototype,"error",2);a([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2);a([n({type:Boolean,reflect:!0})],s.prototype,"required",2);a([n({type:String,reflect:!0})],s.prototype,"spacing",2);a([n({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);a([n({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);a([w()],s.prototype,"_showDatepicker",2);s=a([k("scb-textfield")],s);
@@ -29,7 +29,7 @@ import{a as h,n as p,i as m,x as u,t as f}from"../../vendor/vendor.js";import"..
29
29
  @keydown=${this._onKeyDown}
30
30
  >
31
31
  <md-ripple></md-ripple>
32
- <md-icon class="toc-chevron-icon" aria-hidden="true">expand_more</md-icon>
32
+ <md-icon class="toc-chevron-icon" aria-hidden="true">keyboard_arrow_down</md-icon>
33
33
  </button>
34
34
  <md-focus-ring for=${i} inward></md-focus-ring>
35
35
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc-test",
3
- "version": "0.1.118",
3
+ "version": "0.1.119",
4
4
  "type": "module",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
@@ -353,5 +353,5 @@
353
353
  },
354
354
  "./mvc/*": "./mvc/*"
355
355
  },
356
- "buildHash": "5163F09E157CFC736420587AFE2434E158CD391731A5E8185003D695ECA7F8C9"
356
+ "buildHash": "A962B1714D5005AAEEADB1C4869AE006FB9046D6732AA334CB23DEF1F42080A6"
357
357
  }
@@ -95,7 +95,7 @@ let i = class extends m {
95
95
  ${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : p}
96
96
  </div>
97
97
 
98
- <md-icon class="chevron">expand_more</md-icon>
98
+ <md-icon class="chevron">keyboard_arrow_down</md-icon>
99
99
  </summary>
100
100
 
101
101
  <div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${e}>
@@ -1,11 +1,11 @@
1
- import { css as w, LitElement as x, nothing as u, html as c } from "lit";
2
- import { property as l, state as _, customElement as v } from "lit/decorators.js";
1
+ import { css as w, LitElement as v, nothing as u, html as c } from "lit";
2
+ import { property as l, state as g, customElement as x } from "lit/decorators.js";
3
3
  var y = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (e, s, i, r) => {
4
4
  for (var a = r > 1 ? void 0 : r ? S(s, i) : s, o = e.length - 1, d; o >= 0; o--)
5
5
  (d = e[o]) && (a = (r ? d(s, i, a) : d(a)) || a);
6
6
  return r && a && y(s, i, a), a;
7
7
  };
8
- let t = class extends x {
8
+ let t = class extends v {
9
9
  constructor() {
10
10
  super(...arguments), this.label = "", this.selected = !1, this.leadingIcon = "", this.itemHref = "", this.hasSlotContent = !1, this.expanded = !1, this.__submenuId = `sub-${Math.random().toString(36).slice(2)}`, this.__focusId = `f-${Math.random().toString(36).slice(2)}`, this._toggleExpand = (e) => {
11
11
  e && e.stopPropagation(), this.hasSlotContent && this.__setExpanded(!this.expanded);
@@ -14,7 +14,7 @@ let t = class extends x {
14
14
  }, this._onLinkClick = () => {
15
15
  this._dispatchSelect();
16
16
  }, this._onKeyDown = (e) => {
17
- var r, a, o, d, b, h, m, f, g;
17
+ var r, a, o, d, b, h, m, _, f;
18
18
  const s = Array.from(
19
19
  ((r = this.parentElement) == null ? void 0 : r.querySelectorAll("scb-drawer-item")) || []
20
20
  ), i = s.indexOf(this);
@@ -38,9 +38,9 @@ let t = class extends x {
38
38
  break;
39
39
  }
40
40
  case "End": {
41
- e.preventDefault(), (g = (f = s[s.length - 1].shadowRoot) == null ? void 0 : f.querySelector(
41
+ e.preventDefault(), (f = (_ = s[s.length - 1].shadowRoot) == null ? void 0 : _.querySelector(
42
42
  ".scb-drawer-label-text"
43
- )) == null || g.focus();
43
+ )) == null || f.focus();
44
44
  break;
45
45
  }
46
46
  }
@@ -139,7 +139,7 @@ let t = class extends x {
139
139
  `}
140
140
  ${i ? c`
141
141
  <scb-icon-button
142
- icon="${this.expanded ? "expand_less" : "expand_more"}"
142
+ icon="${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}"
143
143
  role="presentation"
144
144
  tabindex="-1"
145
145
  @click=${(r) => {
@@ -283,13 +283,13 @@ n([
283
283
  l({ type: String, attribute: "item-href" })
284
284
  ], t.prototype, "itemHref", 2);
285
285
  n([
286
- _()
286
+ g()
287
287
  ], t.prototype, "hasSlotContent", 2);
288
288
  n([
289
- _()
289
+ g()
290
290
  ], t.prototype, "expanded", 2);
291
291
  t = n([
292
- v("scb-drawer-item")
292
+ x("scb-drawer-item")
293
293
  ], t);
294
294
  export {
295
295
  t as ScbDrawerItem
@@ -99,7 +99,7 @@ let a = class extends p {
99
99
  placeholder="${this.placeholder}"
100
100
  />
101
101
  <span class="arrow">
102
- <md-icon>${this.open ? "expand_less" : "expand_more"}</md-icon>
102
+ <md-icon>${this.open ? "keyboard_arrow_up" : "keyboard_arrow_down"}</md-icon>
103
103
  </span>
104
104
  </div>
105
105
  <div class="options" @click=${this._onSlotClick} @keydown=${this._onOptionKeyDown}>
@@ -7,6 +7,13 @@ export declare class ScbTextField extends LitElement {
7
7
  private _kbShouldShowRing;
8
8
  private _onGlobalKeydown;
9
9
  private _onGlobalPointerDown;
10
+ private _hasRenderedOnce;
11
+ private _boundField;
12
+ private _onFieldInput;
13
+ private _onFieldChange;
14
+ private _onFieldSelect;
15
+ private _onFieldFocus;
16
+ private _onFieldBlur;
10
17
  constructor();
11
18
  type: 'number' | 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'textarea' | 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
12
19
  label: string;