scb-wc-test 0.1.118 → 0.1.120
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.
- package/mvc/components/scb-accordion/scb-accordion-item.js +1 -1
- package/mvc/components/scb-button/scb-button.js +15 -2
- package/mvc/components/scb-drawer/scb-drawer-item.js +1 -1
- package/mvc/components/scb-select/scb-select.js +3 -3
- package/mvc/components/scb-textfield/scb-textfield.js +29 -8
- package/mvc/components/scb-toc/scb-toc-item.js +1 -1
- package/package.json +2 -2
- package/scb-accordion/scb-accordion-item.js +1 -1
- package/scb-button/scb-button.d.ts +1 -0
- package/scb-button/scb-button.js +75 -59
- package/scb-drawer/scb-drawer-item.js +10 -10
- package/scb-select/scb-select.js +1 -1
- package/scb-textfield/scb-textfield.d.ts +7 -0
- package/scb-textfield/scb-textfield.js +141 -108
- package/scb-toc/scb-toc-item.js +1 -1
- package/scb-wc-test.bundle.js +369 -335
|
@@ -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">
|
|
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}>
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{n as
|
|
1
|
+
import{n as l,t as I,i as k,a as w,x as h,E as i}from"../../vendor/vendor.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 e=customElements.define.bind(customElements);customElements.define=function(r,a,s){try{customElements.get(r)||e(r,a,s)}catch(d){var c=String(d||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var T=Object.defineProperty,B=Object.getOwnPropertyDescriptor,A=t=>{throw TypeError(t)},n=(t,e,r,a)=>{for(var s=a>1?void 0:a?B(e,r):e,c=t.length-1,d;c>=0;c--)(d=t[c])&&(s=(a?d(e,r,s):d(s))||s);return a&&s&&T(e,r,s),s},O=(t,e,r)=>e.has(t)||A("Cannot "+r),E=(t,e,r)=>e.has(t)?A("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,r),$=(t,e,r)=>(O(t,e,"access private method"),r),m,y;let o=class extends k{constructor(){super(...arguments),E(this,m),this.variant="filled",this.type="button",this.label="Button",this.trailingIcon=!1,this.icon="",this.disabled=!1,this.fullWidth=!1,this.href="",this.target="",this.rel="",this.spacing="",this.spacingTop="",this.spacingBottom=""}__getMdHost(){return this.renderRoot.querySelector("md-filled-button, md-outlined-button, md-filled-tonal-button, md-text-button")}__getInnerNativeButton(t){return t?.shadowRoot?.querySelector("button")??null}__syncAriaToInner(){const t=this.__getMdHost(),e=this.__getInnerNativeButton(t);if(!t||!e)return;const r=(this.getAttribute("aria-label")||"").trim(),a=(t.getAttribute("aria-label")||"").trim(),s=this.label.trim()===""?(this.icon||"").trim():"",c=r||a||s;c?e.setAttribute("aria-label",c):e.removeAttribute("aria-label");const d=this.getAttribute("aria-controls");d!==null?e.setAttribute("aria-controls",d):e.removeAttribute("aria-controls");const g=this.getAttribute("aria-expanded");g!==null?e.setAttribute("aria-expanded",g):e.removeAttribute("aria-expanded"),t.removeAttribute("aria-label"),t.removeAttribute("aria-controls"),t.removeAttribute("aria-expanded"),this.removeAttribute("aria-expanded"),this.__ariaObserver?.disconnect(),this.__ariaObserver=new MutationObserver(x=>{const u=this.__getMdHost(),p=this.__getInnerNativeButton(u);if(!(!u||!p)){for(const f of x){if(f.type!=="attributes"||!f.attributeName)continue;const b=f.attributeName,v=this.getAttribute(b);if(b==="aria-label"){const S=(u.getAttribute("aria-label")||"").trim(),_=(v||S||(this.label.trim()===""?(this.icon||"").trim():"")).trim();_?p.setAttribute("aria-label",_):p.removeAttribute("aria-label"),u.removeAttribute("aria-label")}else(b==="aria-controls"||b==="aria-expanded")&&(v===null?p.removeAttribute(b):p.setAttribute(b,v),b==="aria-expanded"&&this.removeAttribute("aria-expanded"))}u.removeAttribute("aria-label"),u.removeAttribute("aria-controls"),u.removeAttribute("aria-expanded")}}),this.__ariaObserver.observe(this,{attributes:!0,attributeFilter:["aria-label","aria-controls","aria-expanded"]})}firstUpdated(){(this.type==="submit"||this.type==="reset")&&this.addEventListener("click",()=>{if(!this.disabled){const t=this.closest("form");t&&(this.type==="submit"&&t.requestSubmit(),this.type==="reset"&&t.reset())}}),this.__syncAriaToInner(),$(this,m,y).call(this)}updated(t){t.has("variant")&&this.__syncAriaToInner(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&$(this,m,y).call(this)}disconnectedCallback(){this.__ariaObserver?.disconnect(),super.disconnectedCallback()}mapSpacingToken(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}static get styles(){return w`
|
|
2
2
|
/* Gör hosten stretchbar i t.ex. flex/grid */
|
|
3
3
|
:host {
|
|
4
4
|
display: inline-flex;
|
|
@@ -7,6 +7,11 @@ import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";im
|
|
|
7
7
|
margin-block-end: var(--scb-button-spacing-block-end, 0);
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
+
:host([full-width]) {
|
|
11
|
+
display: flex;
|
|
12
|
+
inline-size: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
10
15
|
/* Låt inre md-knappar fylla hostens höjd */
|
|
11
16
|
md-filled-button,
|
|
12
17
|
md-outlined-button,
|
|
@@ -15,6 +20,14 @@ import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";im
|
|
|
15
20
|
block-size: 100%;
|
|
16
21
|
}
|
|
17
22
|
|
|
23
|
+
:host([full-width]) md-filled-button,
|
|
24
|
+
:host([full-width]) md-outlined-button,
|
|
25
|
+
:host([full-width]) md-filled-tonal-button,
|
|
26
|
+
:host([full-width]) md-text-button {
|
|
27
|
+
inline-size: 100%;
|
|
28
|
+
flex: 1 1 auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
18
31
|
/* Errorvarianter */
|
|
19
32
|
/*
|
|
20
33
|
md-filled-button[variant='error'],
|
|
@@ -119,4 +132,4 @@ import{n as s,t as I,i as k,a as T,x as h,E as i}from"../../vendor/vendor.js";im
|
|
|
119
132
|
${this.label}
|
|
120
133
|
${t&&this.trailingIcon?e:i}
|
|
121
134
|
</md-text-button>
|
|
122
|
-
`;default:return h``}}};m=new WeakSet;
|
|
135
|
+
`;default:return h``}}};m=new WeakSet;y=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,r=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-button-spacing-block-start",e):this.style.removeProperty("--scb-button-spacing-block-start"),r?this.style.setProperty("--scb-button-spacing-block-end",r):this.style.removeProperty("--scb-button-spacing-block-end")};n([l({type:String,reflect:!0})],o.prototype,"variant",2);n([l({type:String,reflect:!0})],o.prototype,"type",2);n([l({type:String})],o.prototype,"label",2);n([l({type:Boolean,attribute:"trailing-icon"})],o.prototype,"trailingIcon",2);n([l({type:String})],o.prototype,"icon",2);n([l({type:Boolean,reflect:!0})],o.prototype,"disabled",2);n([l({type:Boolean,attribute:"full-width",reflect:!0})],o.prototype,"fullWidth",2);n([l({type:String})],o.prototype,"href",2);n([l({type:String})],o.prototype,"target",2);n([l({type:String})],o.prototype,"rel",2);n([l({type:String,reflect:!0})],o.prototype,"spacing",2);n([l({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);n([l({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);o=n([I("scb-button")],o);
|
|
@@ -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?"
|
|
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
|
|
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?"
|
|
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
|
-
`;
|
|
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
|
|
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
|
|
10
|
-
|
|
11
|
-
|
|
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=${
|
|
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
|
-
${
|
|
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
|
|
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
|
-
`];
|
|
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">
|
|
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.
|
|
3
|
+
"version": "0.1.120",
|
|
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": "
|
|
356
|
+
"buildHash": "0897A21AC399DEBBBDCA38AD987E4E012CB498B06670BDFBE404ECBFDEDDA489"
|
|
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">
|
|
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}>
|
package/scb-button/scb-button.js
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import { LitElement as k, css as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as k, css as w, html as h, nothing as r } from "lit";
|
|
2
|
+
import { property as a, customElement as B } from "lit/decorators.js";
|
|
3
3
|
import "@material/web/button/filled-button.js";
|
|
4
4
|
import "@material/web/button/outlined-button.js";
|
|
5
5
|
import "@material/web/button/filled-tonal-button.js";
|
|
6
6
|
import "@material/web/button/text-button.js";
|
|
7
7
|
import "@material/web/icon/icon.js";
|
|
8
|
-
var
|
|
8
|
+
var T = Object.defineProperty, O = Object.getOwnPropertyDescriptor, x = (t) => {
|
|
9
9
|
throw TypeError(t);
|
|
10
|
-
},
|
|
11
|
-
for (var
|
|
12
|
-
(
|
|
13
|
-
return
|
|
14
|
-
}, L = (t, e, i) => e.has(t) || x("Cannot " + i), P = (t, e, i) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), A = (t, e, i) => (L(t, e, "access private method"), i), m,
|
|
10
|
+
}, n = (t, e, i, s) => {
|
|
11
|
+
for (var l = s > 1 ? void 0 : s ? O(e, i) : e, u = t.length - 1, b; u >= 0; u--)
|
|
12
|
+
(b = t[u]) && (l = (s ? b(e, i, l) : b(l)) || l);
|
|
13
|
+
return s && l && T(e, i, l), l;
|
|
14
|
+
}, L = (t, e, i) => e.has(t) || x("Cannot " + i), P = (t, e, i) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), A = (t, e, i) => (L(t, e, "access private method"), i), m, y;
|
|
15
15
|
let o = class extends k {
|
|
16
16
|
constructor() {
|
|
17
|
-
super(...arguments), P(this, m), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.href = "", this.target = "", this.rel = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
|
|
17
|
+
super(...arguments), P(this, m), this.variant = "filled", this.type = "button", this.label = "Button", this.trailingIcon = !1, this.icon = "", this.disabled = !1, this.fullWidth = !1, this.href = "", this.target = "", this.rel = "", this.spacing = "", this.spacingTop = "", this.spacingBottom = "";
|
|
18
18
|
}
|
|
19
19
|
// Hosta md-* elementet (värden flyttas därifrån in i dess shadow <button>)
|
|
20
20
|
__getMdHost() {
|
|
@@ -32,21 +32,21 @@ let o = class extends k {
|
|
|
32
32
|
var $;
|
|
33
33
|
const t = this.__getMdHost(), e = this.__getInnerNativeButton(t);
|
|
34
34
|
if (!t || !e) return;
|
|
35
|
-
const i = (this.getAttribute("aria-label") || "").trim(),
|
|
36
|
-
|
|
37
|
-
const
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
const c = this.__getMdHost(),
|
|
42
|
-
if (!(!c || !
|
|
35
|
+
const i = (this.getAttribute("aria-label") || "").trim(), s = (t.getAttribute("aria-label") || "").trim(), l = this.label.trim() === "" ? (this.icon || "").trim() : "", u = i || s || l;
|
|
36
|
+
u ? e.setAttribute("aria-label", u) : e.removeAttribute("aria-label");
|
|
37
|
+
const b = this.getAttribute("aria-controls");
|
|
38
|
+
b !== null ? e.setAttribute("aria-controls", b) : e.removeAttribute("aria-controls");
|
|
39
|
+
const g = this.getAttribute("aria-expanded");
|
|
40
|
+
g !== null ? e.setAttribute("aria-expanded", g) : e.removeAttribute("aria-expanded"), t.removeAttribute("aria-label"), t.removeAttribute("aria-controls"), t.removeAttribute("aria-expanded"), this.removeAttribute("aria-expanded"), ($ = this.__ariaObserver) == null || $.disconnect(), this.__ariaObserver = new MutationObserver((S) => {
|
|
41
|
+
const c = this.__getMdHost(), p = this.__getInnerNativeButton(c);
|
|
42
|
+
if (!(!c || !p)) {
|
|
43
43
|
for (const f of S) {
|
|
44
44
|
if (f.type !== "attributes" || !f.attributeName) continue;
|
|
45
45
|
const d = f.attributeName, v = this.getAttribute(d);
|
|
46
46
|
if (d === "aria-label") {
|
|
47
47
|
const I = (c.getAttribute("aria-label") || "").trim(), _ = (v || I || (this.label.trim() === "" ? (this.icon || "").trim() : "")).trim();
|
|
48
|
-
_ ?
|
|
49
|
-
} else (d === "aria-controls" || d === "aria-expanded") && (v === null ?
|
|
48
|
+
_ ? p.setAttribute("aria-label", _) : p.removeAttribute("aria-label"), c.removeAttribute("aria-label");
|
|
49
|
+
} else (d === "aria-controls" || d === "aria-expanded") && (v === null ? p.removeAttribute(d) : p.setAttribute(d, v), d === "aria-expanded" && this.removeAttribute("aria-expanded"));
|
|
50
50
|
}
|
|
51
51
|
c.removeAttribute("aria-label"), c.removeAttribute("aria-controls"), c.removeAttribute("aria-expanded");
|
|
52
52
|
}
|
|
@@ -62,11 +62,11 @@ let o = class extends k {
|
|
|
62
62
|
const t = this.closest("form");
|
|
63
63
|
t && (this.type === "submit" && t.requestSubmit(), this.type === "reset" && t.reset());
|
|
64
64
|
}
|
|
65
|
-
}), this.__syncAriaToInner(), A(this, m,
|
|
65
|
+
}), this.__syncAriaToInner(), A(this, m, y).call(this);
|
|
66
66
|
}
|
|
67
67
|
// Kör även när variant/icon/spacing ändras
|
|
68
68
|
updated(t) {
|
|
69
|
-
t.has("variant") && this.__syncAriaToInner(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && A(this, m,
|
|
69
|
+
t.has("variant") && this.__syncAriaToInner(), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && A(this, m, y).call(this);
|
|
70
70
|
}
|
|
71
71
|
disconnectedCallback() {
|
|
72
72
|
var t;
|
|
@@ -79,7 +79,7 @@ let o = class extends k {
|
|
|
79
79
|
return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
|
|
80
80
|
}
|
|
81
81
|
static get styles() {
|
|
82
|
-
return
|
|
82
|
+
return w`
|
|
83
83
|
/* Gör hosten stretchbar i t.ex. flex/grid */
|
|
84
84
|
:host {
|
|
85
85
|
display: inline-flex;
|
|
@@ -88,6 +88,11 @@ let o = class extends k {
|
|
|
88
88
|
margin-block-end: var(--scb-button-spacing-block-end, 0);
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
+
:host([full-width]) {
|
|
92
|
+
display: flex;
|
|
93
|
+
inline-size: 100%;
|
|
94
|
+
}
|
|
95
|
+
|
|
91
96
|
/* Låt inre md-knappar fylla hostens höjd */
|
|
92
97
|
md-filled-button,
|
|
93
98
|
md-outlined-button,
|
|
@@ -96,6 +101,14 @@ let o = class extends k {
|
|
|
96
101
|
block-size: 100%;
|
|
97
102
|
}
|
|
98
103
|
|
|
104
|
+
:host([full-width]) md-filled-button,
|
|
105
|
+
:host([full-width]) md-outlined-button,
|
|
106
|
+
:host([full-width]) md-filled-tonal-button,
|
|
107
|
+
:host([full-width]) md-text-button {
|
|
108
|
+
inline-size: 100%;
|
|
109
|
+
flex: 1 1 auto;
|
|
110
|
+
}
|
|
111
|
+
|
|
99
112
|
/* Errorvarianter */
|
|
100
113
|
/*
|
|
101
114
|
md-filled-button[variant='error'],
|
|
@@ -143,17 +156,17 @@ let o = class extends k {
|
|
|
143
156
|
`;
|
|
144
157
|
}
|
|
145
158
|
render() {
|
|
146
|
-
var
|
|
147
|
-
const t = !!((
|
|
159
|
+
var l;
|
|
160
|
+
const t = !!((l = this.icon) != null && l.trim()), e = t ? h`<md-icon slot="icon">${this.icon}</md-icon>` : r, i = r, s = this.label.trim() === "" ? this.icon : void 0;
|
|
148
161
|
switch (this.variant) {
|
|
149
162
|
case "filled":
|
|
150
|
-
return
|
|
163
|
+
return h`
|
|
151
164
|
<md-filled-button
|
|
152
165
|
type=${this.type}
|
|
153
166
|
variant=${i}
|
|
154
167
|
?trailing-icon=${this.trailingIcon}
|
|
155
168
|
?disabled=${this.disabled}
|
|
156
|
-
aria-label=${
|
|
169
|
+
aria-label=${s}
|
|
157
170
|
href=${this.href || r}
|
|
158
171
|
target=${this.target || r}
|
|
159
172
|
rel=${this.rel || r}
|
|
@@ -164,13 +177,13 @@ let o = class extends k {
|
|
|
164
177
|
</md-filled-button>
|
|
165
178
|
`;
|
|
166
179
|
case "outlined":
|
|
167
|
-
return
|
|
180
|
+
return h`
|
|
168
181
|
<md-outlined-button
|
|
169
182
|
type=${this.type}
|
|
170
183
|
variant=${i}
|
|
171
184
|
?trailing-icon=${this.trailingIcon}
|
|
172
185
|
?disabled=${this.disabled}
|
|
173
|
-
aria-label=${
|
|
186
|
+
aria-label=${s}
|
|
174
187
|
href=${this.href || r}
|
|
175
188
|
target=${this.target || r}
|
|
176
189
|
rel=${this.rel || r}
|
|
@@ -181,13 +194,13 @@ let o = class extends k {
|
|
|
181
194
|
</md-outlined-button>
|
|
182
195
|
`;
|
|
183
196
|
case "filled-tonal":
|
|
184
|
-
return
|
|
197
|
+
return h`
|
|
185
198
|
<md-filled-tonal-button
|
|
186
199
|
type=${this.type}
|
|
187
200
|
variant=${i}
|
|
188
201
|
?trailing-icon=${this.trailingIcon}
|
|
189
202
|
?disabled=${this.disabled}
|
|
190
|
-
aria-label=${
|
|
203
|
+
aria-label=${s}
|
|
191
204
|
href=${this.href || r}
|
|
192
205
|
target=${this.target || r}
|
|
193
206
|
rel=${this.rel || r}
|
|
@@ -198,13 +211,13 @@ let o = class extends k {
|
|
|
198
211
|
</md-filled-tonal-button>
|
|
199
212
|
`;
|
|
200
213
|
case "text":
|
|
201
|
-
return
|
|
214
|
+
return h`
|
|
202
215
|
<md-text-button
|
|
203
216
|
type=${this.type}
|
|
204
217
|
variant=${i}
|
|
205
218
|
?trailing-icon=${this.trailingIcon}
|
|
206
219
|
?disabled=${this.disabled}
|
|
207
|
-
aria-label=${
|
|
220
|
+
aria-label=${s}
|
|
208
221
|
href=${this.href || r}
|
|
209
222
|
target=${this.target || r}
|
|
210
223
|
rel=${this.rel || r}
|
|
@@ -215,52 +228,55 @@ let o = class extends k {
|
|
|
215
228
|
</md-text-button>
|
|
216
229
|
`;
|
|
217
230
|
default:
|
|
218
|
-
return
|
|
231
|
+
return h``;
|
|
219
232
|
}
|
|
220
233
|
}
|
|
221
234
|
};
|
|
222
235
|
m = /* @__PURE__ */ new WeakSet();
|
|
223
|
-
|
|
236
|
+
y = function() {
|
|
224
237
|
const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t;
|
|
225
238
|
e ? this.style.setProperty("--scb-button-spacing-block-start", e) : this.style.removeProperty("--scb-button-spacing-block-start"), i ? this.style.setProperty("--scb-button-spacing-block-end", i) : this.style.removeProperty("--scb-button-spacing-block-end");
|
|
226
239
|
};
|
|
227
|
-
|
|
228
|
-
|
|
240
|
+
n([
|
|
241
|
+
a({ type: String, reflect: !0 })
|
|
229
242
|
], o.prototype, "variant", 2);
|
|
230
|
-
|
|
231
|
-
|
|
243
|
+
n([
|
|
244
|
+
a({ type: String, reflect: !0 })
|
|
232
245
|
], o.prototype, "type", 2);
|
|
233
|
-
|
|
234
|
-
|
|
246
|
+
n([
|
|
247
|
+
a({ type: String })
|
|
235
248
|
], o.prototype, "label", 2);
|
|
236
|
-
|
|
237
|
-
|
|
249
|
+
n([
|
|
250
|
+
a({ type: Boolean, attribute: "trailing-icon" })
|
|
238
251
|
], o.prototype, "trailingIcon", 2);
|
|
239
|
-
|
|
240
|
-
|
|
252
|
+
n([
|
|
253
|
+
a({ type: String })
|
|
241
254
|
], o.prototype, "icon", 2);
|
|
242
|
-
|
|
243
|
-
|
|
255
|
+
n([
|
|
256
|
+
a({ type: Boolean, reflect: !0 })
|
|
244
257
|
], o.prototype, "disabled", 2);
|
|
245
|
-
|
|
246
|
-
|
|
258
|
+
n([
|
|
259
|
+
a({ type: Boolean, attribute: "full-width", reflect: !0 })
|
|
260
|
+
], o.prototype, "fullWidth", 2);
|
|
261
|
+
n([
|
|
262
|
+
a({ type: String })
|
|
247
263
|
], o.prototype, "href", 2);
|
|
248
|
-
|
|
249
|
-
|
|
264
|
+
n([
|
|
265
|
+
a({ type: String })
|
|
250
266
|
], o.prototype, "target", 2);
|
|
251
|
-
|
|
252
|
-
|
|
267
|
+
n([
|
|
268
|
+
a({ type: String })
|
|
253
269
|
], o.prototype, "rel", 2);
|
|
254
|
-
|
|
255
|
-
|
|
270
|
+
n([
|
|
271
|
+
a({ type: String, reflect: !0 })
|
|
256
272
|
], o.prototype, "spacing", 2);
|
|
257
|
-
|
|
258
|
-
|
|
273
|
+
n([
|
|
274
|
+
a({ type: String, attribute: "spacing-top", reflect: !0 })
|
|
259
275
|
], o.prototype, "spacingTop", 2);
|
|
260
|
-
|
|
261
|
-
|
|
276
|
+
n([
|
|
277
|
+
a({ type: String, attribute: "spacing-bottom", reflect: !0 })
|
|
262
278
|
], o.prototype, "spacingBottom", 2);
|
|
263
|
-
o =
|
|
279
|
+
o = n([
|
|
264
280
|
B("scb-button")
|
|
265
281
|
], o);
|
|
266
282
|
export {
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { css as w, LitElement as
|
|
2
|
-
import { property as l, state as
|
|
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
|
|
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,
|
|
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(), (
|
|
41
|
+
e.preventDefault(), (f = (_ = s[s.length - 1].shadowRoot) == null ? void 0 : _.querySelector(
|
|
42
42
|
".scb-drawer-label-text"
|
|
43
|
-
)) == null ||
|
|
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 ? "
|
|
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
|
-
|
|
292
|
+
x("scb-drawer-item")
|
|
293
293
|
], t);
|
|
294
294
|
export {
|
|
295
295
|
t as ScbDrawerItem
|
package/scb-select/scb-select.js
CHANGED
|
@@ -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 ? "
|
|
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}>
|