scb-wc-test 0.1.106 → 0.1.108
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/all.js +2 -0
- package/index.d.ts +1 -0
- package/index.js +112 -110
- package/mvc/components/all.js +1 -0
- package/mvc/components/scb-datepicker/scb-datepicker.js +254 -0
- package/mvc/components/scb-dialog/scb-dialog.js +1 -1
- package/mvc/components/scb-icon-button/scb-icon-button.js +13 -12
- package/mvc/components/scb-segmented-button/scb-segmented-button.js +15 -14
- package/mvc/components/scb-textfield/scb-textfield.js +35 -2
- package/package.json +6 -2
- package/scb-datepicker/scb-datepicker.d.ts +28 -0
- package/scb-datepicker/scb-datepicker.js +404 -0
- package/scb-icon-button/scb-icon-button.d.ts +4 -0
- package/scb-icon-button/scb-icon-button.js +46 -39
- package/scb-segmented-button/scb-segmented-button.d.ts +4 -0
- package/scb-segmented-button/scb-segmented-button.js +61 -54
- package/scb-textfield/scb-textfield.d.ts +3 -0
- package/scb-textfield/scb-textfield.js +53 -6
- package/scb-wc-test.bundle.js +750 -462
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
|
|
2
|
-
import{_ as h}from"../../vendor/preload-helper.js";import{a as
|
|
2
|
+
import{_ as h}from"../../vendor/preload-helper.js";import{a as g,n as a,i as m,x as r,t as f}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(i,l,n){try{customElements.get(i)||e(i,l,n)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var v=Object.defineProperty,y=Object.getOwnPropertyDescriptor,b=t=>{throw TypeError(t)},s=(t,e,i,l)=>{for(var n=l>1?void 0:l?y(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(n=(l?c(e,i,n):c(n))||n);return l&&n&&v(e,i,n),n},A=(t,e,i)=>e.has(t)||b("Cannot "+i),$=(t,e,i)=>e.has(t)?b("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(A(t,e,"access private method"),i),_,u;let o=class extends m{constructor(){super(...arguments),$(this,_),this.icon="home",this.tooltip="",this.ariaLabel="",this.variant="standard",this.toggle=!1,this.selected=!1,this.toggleofficon="add",this.toggleonicon="remove",this.disabled=!1,this.spacing="",this.spacingTop="",this.spacingBottom="",this.__loadedVariants=new Set,this.__iconLoaded=!1,this.__lastMdHost=null,this.__onInnerChange=()=>{const e=!!this.__getMdHost()?.selected;this.toggle&&(this.selected=e),this.dispatchEvent(new CustomEvent("change",{detail:{selected:e},bubbles:!0,composed:!0}))}}async firstUpdated(){await this.__ensureDepsLoaded(),await this.updateComplete,this.__attachChangeListener(),this.__syncTitleAndAria(),p(this,_,u).call(this)}updated(t){if(super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&p(this,_,u).call(this),t.has("variant")){this.__ensureDepsLoaded().then(()=>{queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})});return}(t.has("toggle")||t.has("icon")||t.has("toggleofficon")||t.has("toggleonicon")||t.has("selected")||t.has("disabled")||t.has("tooltip")||t.has("ariaLabel"))&&queueMicrotask(()=>{this.__attachChangeListener(),this.__syncTitleAndAria()})}disconnectedCallback(){this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),this.__lastMdHost=null,super.disconnectedCallback()}async __ensureDepsLoaded(){if(!this.__loadedVariants.has(this.variant)){switch(this.variant){case"filled":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.f),__vite__mapDeps([0,1]),import.meta.url);break;case"outlined":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.o),__vite__mapDeps([0,1]),import.meta.url);break;case"filled-tonal":await h(()=>import("../../vendor/vendor-material.js").then(t=>t.c),__vite__mapDeps([0,1]),import.meta.url);break;default:await h(()=>import("../../vendor/vendor-material.js").then(t=>t.d),__vite__mapDeps([0,1]),import.meta.url);break}this.__loadedVariants.add(this.variant)}this.__iconLoaded||(await h(()=>import("../../vendor/vendor-material.js").then(t=>t.i),__vite__mapDeps([0,1]),import.meta.url),this.__iconLoaded=!0)}__getMdHost(){return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button")}__attachChangeListener(){const t=this.__getMdHost();t&&t!==this.__lastMdHost&&(this.__lastMdHost?.removeEventListener?.("change",this.__onInnerChange),t.addEventListener("change",this.__onInnerChange),this.__lastMdHost=t),this.toggle&&t&&"selected"in t&&(t.selected=this.selected)}__syncTitleAndAria(){const t=this.__getMdHost();if(!t)return;const e=(this.tooltip||this.getAttribute("title")||"").trim(),i=(this.ariaLabel||this.getAttribute("aria-label")||"").trim(),l=this.getAttribute("aria-controls"),n=this.getAttribute("aria-expanded");this.tooltip&&this.setAttribute("title",e);const d=i||e||this.icon.trim()||void 0;d?t.setAttribute("aria-label",d):t.removeAttribute("aria-label"),e?t.setAttribute("title",e):t.removeAttribute("title"),l!==null?t.setAttribute("aria-controls",l):t.removeAttribute("aria-controls"),n!==null?t.setAttribute("aria-expanded",n):t.removeAttribute("aria-expanded")}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}__renderToggleIcons(){return r`
|
|
3
3
|
<md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
|
|
4
4
|
<md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
|
|
5
|
-
`}__renderSingleIcon(){return
|
|
5
|
+
`}__renderSingleIcon(){return r`<md-icon aria-hidden="true">${this.icon}</md-icon>`}__renderMd(){const t=this.toggle?this.__renderToggleIcons():this.__renderSingleIcon();if(this.toggle)switch(this.variant){case"filled":return r`
|
|
6
6
|
<md-filled-icon-button
|
|
7
7
|
toggle
|
|
8
8
|
?selected=${this.selected}
|
|
@@ -10,7 +10,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
|
|
|
10
10
|
>
|
|
11
11
|
${t}
|
|
12
12
|
</md-filled-icon-button>
|
|
13
|
-
`;case"outlined":return
|
|
13
|
+
`;case"outlined":return r`
|
|
14
14
|
<md-outlined-icon-button
|
|
15
15
|
toggle
|
|
16
16
|
?selected=${this.selected}
|
|
@@ -18,7 +18,7 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
|
|
|
18
18
|
>
|
|
19
19
|
${t}
|
|
20
20
|
</md-outlined-icon-button>
|
|
21
|
-
`;case"filled-tonal":return
|
|
21
|
+
`;case"filled-tonal":return r`
|
|
22
22
|
<md-filled-tonal-icon-button
|
|
23
23
|
toggle
|
|
24
24
|
?selected=${this.selected}
|
|
@@ -26,29 +26,30 @@ import{_ as h}from"../../vendor/preload-helper.js";import{a as f,n as r,i as g,x
|
|
|
26
26
|
>
|
|
27
27
|
${t}
|
|
28
28
|
</md-filled-tonal-icon-button>
|
|
29
|
-
`;default:return
|
|
29
|
+
`;default:return r`
|
|
30
30
|
<md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled}>
|
|
31
31
|
${t}
|
|
32
32
|
</md-icon-button>
|
|
33
|
-
`}switch(this.variant){case"filled":return
|
|
33
|
+
`}switch(this.variant){case"filled":return r`
|
|
34
34
|
<md-filled-icon-button ?disabled=${this.disabled}>
|
|
35
35
|
${t}
|
|
36
36
|
</md-filled-icon-button>
|
|
37
|
-
`;case"outlined":return
|
|
37
|
+
`;case"outlined":return r`
|
|
38
38
|
<md-outlined-icon-button ?disabled=${this.disabled}>
|
|
39
39
|
${t}
|
|
40
40
|
</md-outlined-icon-button>
|
|
41
|
-
`;case"filled-tonal":return
|
|
41
|
+
`;case"filled-tonal":return r`
|
|
42
42
|
<md-filled-tonal-icon-button ?disabled=${this.disabled}>
|
|
43
43
|
${t}
|
|
44
44
|
</md-filled-tonal-icon-button>
|
|
45
|
-
`;default:return
|
|
45
|
+
`;default:return r`
|
|
46
46
|
<md-icon-button ?disabled=${this.disabled}>
|
|
47
47
|
${t}
|
|
48
48
|
</md-icon-button>
|
|
49
|
-
`}}render(){return this.__renderMd()}};_=new WeakSet;u=function(){const t=this.mapSpacingToken(this.spacing);
|
|
49
|
+
`}}render(){return this.__renderMd()}};_=new WeakSet;u=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,i=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-icon-button-spacing-block-start",e):this.style.removeProperty("--scb-icon-button-spacing-block-start"),i?this.style.setProperty("--scb-icon-button-spacing-block-end",i):this.style.removeProperty("--scb-icon-button-spacing-block-end")};o.styles=g`
|
|
50
50
|
:host {
|
|
51
51
|
display: inline-flex;
|
|
52
|
-
margin-block: var(--scb-icon-button-spacing-block, 0);
|
|
52
|
+
margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
|
|
53
|
+
margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
|
|
53
54
|
}
|
|
54
|
-
`;
|
|
55
|
+
`;s([a({type:String})],o.prototype,"icon",2);s([a({type:String})],o.prototype,"tooltip",2);s([a({type:String,attribute:"aria-label"})],o.prototype,"ariaLabel",2);s([a({type:String})],o.prototype,"variant",2);s([a({type:Boolean,reflect:!0})],o.prototype,"toggle",2);s([a({type:Boolean,reflect:!0})],o.prototype,"selected",2);s([a({type:String})],o.prototype,"toggleofficon",2);s([a({type:String})],o.prototype,"toggleonicon",2);s([a({type:Boolean,reflect:!0})],o.prototype,"disabled",2);s([a({type:String,reflect:!0})],o.prototype,"spacing",2);s([a({type:String,attribute:"spacing-top",reflect:!0})],o.prototype,"spacingTop",2);s([a({type:String,attribute:"spacing-bottom",reflect:!0})],o.prototype,"spacingBottom",2);o=s([f("scb-icon-button")],o);export{o as ScbIconButton};
|
|
@@ -1,29 +1,30 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as p,n as l,i as f,x as b,t as v}from"../../vendor/vendor.js";import"./scb-segmented-item.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(s,i,r){try{customElements.get(s)||e(s,i,r)}catch(u){var o=String(u||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw u}}}}catch{}})();var g=Object.defineProperty,_=Object.getOwnPropertyDescriptor,m=t=>{throw TypeError(t)},n=(t,e,s,i)=>{for(var r=i>1?void 0:i?_(e,s):e,o=t.length-1,u;o>=0;o--)(u=t[o])&&(r=(i?u(e,s,r):u(r))||r);return i&&r&&g(e,s,r),r},y=(t,e,s)=>e.has(t)||m("Cannot "+s),S=(t,e,s)=>e.has(t)?m("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,s),h=(t,e,s)=>(y(t,e,"access private method"),s),d,c;let a=class extends f{constructor(){super(),S(this,d),this._internals=null,this.variant="single-select",this.value="",this.values=[],this.disabled=!1,this.name="",this.spacing="",this.spacingTop="",this.spacingBottom="",this._form=null,this._formResetHandler=null,this._initialValue="",this._initialValues=[],"attachInternals"in this&&(this._internals=this.attachInternals())}connectedCallback(){super.connectedCallback(),this._form=this.closest("form"),this._form&&(this._formResetHandler=()=>{this.value=this._initialValue,this.values=Array.isArray(this._initialValues)?[...this._initialValues]:[],this.updateSegments(),this._syncFormValue()},this._form.addEventListener("reset",this._formResetHandler,!0))}disconnectedCallback(){this._form&&this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0),super.disconnectedCallback()}firstUpdated(){this._initialValue=this.value,this._initialValues=Array.isArray(this.values)?[...this.values]:[],this.updateSegments();const t=this.shadowRoot?.querySelector("slot");t&&(t.addEventListener("click",e=>this.onSlotClick(e)),t.addEventListener("focus",()=>{this.dispatchEvent(new CustomEvent("focus",{detail:{},bubbles:!0,composed:!0}))},!0),t.addEventListener("blur",()=>{this.dispatchEvent(new CustomEvent("blur",{detail:{},bubbles:!0,composed:!0}))},!0),t.addEventListener("keydown",e=>{if(e.code==="Space"||e.code==="Enter"||e.code==="NumpadEnter"){const s=e.target;if(s&&s.closest){const i=s.closest("scb-segmented-item");i&&!i.hasAttribute("disabled")&&!this.disabled&&(this.onSlotClick(e),e.preventDefault())}}})),this._syncFormValue(),h(this,d,c).call(this)}updated(t){super.updated(t),this.updateSegments(),(t.has("value")||t.has("values")||t.has("disabled")||t.has("variant")||t.has("name"))&&this._syncFormValue(),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom"))&&h(this,d,c).call(this)}onSlotClick(t){let e=t.target;if(!e||!e.closest)return;const s=e.closest("scb-segmented-item");if(!s||this.disabled||s.hasAttribute("disabled"))return;const i=s.getAttribute("value")||"";i&&(this.variant==="multi-select"?(this.values.indexOf(i)===-1?this.values=[...this.values,i]:this.values=this.values.filter(o=>o!==i),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0})),this.updateSegments()):i!==this.value&&(this.value=i,this.dispatchEvent(new CustomEvent("change",{detail:{value:i},bubbles:!0,composed:!0})),this.updateSegments()))}updateSegments(){const t=this.shadowRoot?.querySelector("slot");if(!t)return;t.assignedElements().forEach(s=>{if(s.tagName==="SCB-SEGMENTED-ITEM"){const i=s.getAttribute("value")||"";if(i){let r=!1;this.variant==="multi-select"?r=!!this.values&&this.values.includes(i):r=i===this.value,s.setAttribute("aria-pressed",r?"true":"false"),r?s.setAttribute("selected","true"):s.removeAttribute("selected")}this.disabled&&s.setAttribute("disabled","true")}})}formDisabledCallback(t){this.disabled=t}_syncFormValue(){if(this._internals){if(this.disabled||!this.name){this._internals.setFormValue(null);return}if(this.variant==="multi-select"){if(!this.values||this.values.length===0){this._internals.setFormValue(null);return}const t=new FormData;for(const e of this.values)t.append(this.name,e);this._internals.setFormValue(t)}else{if(!this.value){this._internals.setFormValue(null);return}this._internals.setFormValue(this.value)}}}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}render(){return b`<slot></slot>`}};d=new WeakSet;c=function(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,s=this.mapSpacingToken(this.spacingBottom)??t;e?this.style.setProperty("--scb-segmented-button-spacing-block-start",e):this.style.removeProperty("--scb-segmented-button-spacing-block-start"),s?this.style.setProperty("--scb-segmented-button-spacing-block-end",s):this.style.removeProperty("--scb-segmented-button-spacing-block-end")};a.formAssociated=!0;a.styles=p`
|
|
2
2
|
:host {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
3
|
+
--scb-segmented-button-width: 100%;
|
|
4
|
+
--scb-segmented-button-height: 48px;
|
|
5
|
+
max-width: var(--scb-segmented-button-width);
|
|
6
|
+
height: var(--scb-segmented-button-height);
|
|
7
|
+
display: grid;
|
|
8
|
+
grid-auto-flow: column;
|
|
9
|
+
grid-auto-columns: 1fr;
|
|
10
|
+
font-family: var(--brand, Inter);
|
|
11
|
+
margin-block-start: var(--scb-segmented-button-spacing-block-start, 0);
|
|
12
|
+
margin-block-end: var(--scb-segmented-button-spacing-block-end, 0);
|
|
12
13
|
}
|
|
13
14
|
/* Border radius only on first and last button */
|
|
14
15
|
::slotted(scb-segmented-item:first-child .segmented-item),
|
|
15
|
-
::slotted([role=
|
|
16
|
+
::slotted([role='button']:first-child .segmented-item) {
|
|
16
17
|
border-top-left-radius: var(--md-sys-shape-corner-full);
|
|
17
18
|
border-bottom-left-radius: var(--md-sys-shape-corner-full);
|
|
18
19
|
}
|
|
19
20
|
::slotted(scb-segmented-item:last-child .segmented-item),
|
|
20
|
-
::slotted([role=
|
|
21
|
+
::slotted([role='button']:last-child .segmented-item) {
|
|
21
22
|
border-top-right-radius: var(--md-sys-shape-corner-full);
|
|
22
23
|
border-bottom-right-radius: var(--md-sys-shape-corner-full);
|
|
23
24
|
}
|
|
24
25
|
/* First button gets left border */
|
|
25
26
|
::slotted(scb-segmented-item:first-child .segmented-item),
|
|
26
|
-
::slotted([role=
|
|
27
|
+
::slotted([role='button']:first-child .segmented-item) {
|
|
27
28
|
border-left: 1px solid var(--md-sys-color-outline);
|
|
28
29
|
}
|
|
29
|
-
`;
|
|
30
|
+
`;n([l({type:String,reflect:!0})],a.prototype,"variant",2);n([l({type:String,reflect:!0})],a.prototype,"value",2);n([l({type:Array})],a.prototype,"values",2);n([l({type:Boolean,reflect:!0})],a.prototype,"disabled",2);n([l({type:String,reflect:!0})],a.prototype,"name",2);n([l({type:String,reflect:!0})],a.prototype,"spacing",2);n([l({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",2);n([l({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",2);a=n([v("scb-segmented-button")],a);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as m,n as a,i as x,x as h,t as v}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(i,l,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var o=l>1?void 0:l?g(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&y(e,i,o),o},_=(t,e,i)=>e.has(t)||f("Cannot "+i),w=(t,e,i)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(_(t,e,"access private method"),i),n,b,u;let s=class extends x{constructor(){super(),w(this,n),this._internals=null,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="","attachInternals"in this&&(this._internals=this.attachInternals())}render(){const t=this.leadingIcon?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<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?h`
|
|
1
|
+
import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.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,o){try{customElements.get(i)||e(i,l,o)}catch(c){var d=String(c||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var y=Object.defineProperty,g=Object.getOwnPropertyDescriptor,f=t=>{throw TypeError(t)},r=(t,e,i,l)=>{for(var o=l>1?void 0:l?g(e,i):e,d=t.length-1,c;d>=0;d--)(c=t[d])&&(o=(l?c(e,i,o):c(o))||o);return l&&o&&y(e,i,o),o},_=(t,e,i)=>e.has(t)||f("Cannot "+i),w=(t,e,i)=>e.has(t)?f("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),p=(t,e,i)=>(_(t,e,"access private method"),i),n,b,u;let s=class extends x{constructor(){super(),w(this,n),this._internals=null,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=>{this.value=t.detail.value,this._showDatepicker=!1,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?h`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,e=this.error?h`<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?h`
|
|
2
2
|
<button
|
|
3
3
|
type="button"
|
|
4
4
|
class="scb-textfield-clear"
|
|
@@ -52,6 +52,36 @@ import{a as m,n as a,i as x,x as h,t as v}from"../../vendor/vendor.js";import"..
|
|
|
52
52
|
${this.value}</textarea
|
|
53
53
|
>
|
|
54
54
|
</div>
|
|
55
|
+
`:this.type==="date"?h`
|
|
56
|
+
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
57
|
+
<span
|
|
58
|
+
class="scb-textfield-supporting-text"
|
|
59
|
+
id="${this.underLabel?`${this._inputId}-supporting-text`:""}"
|
|
60
|
+
>${this.underLabel}</span
|
|
61
|
+
>
|
|
62
|
+
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
63
|
+
${t}
|
|
64
|
+
<input
|
|
65
|
+
class="scb-textfield${this.error?" has-error-icon":""}"
|
|
66
|
+
.value=${this.value}
|
|
67
|
+
type="text"
|
|
68
|
+
name="${this.name}"
|
|
69
|
+
id="${this._inputId}"
|
|
70
|
+
?disabled=${this.disabled}
|
|
71
|
+
?required=${this.required}
|
|
72
|
+
aria-invalid=${this.error?"true":"false"}
|
|
73
|
+
aria-describedby=${i}
|
|
74
|
+
readonly
|
|
75
|
+
/>
|
|
76
|
+
<scb-icon-button icon="calendar_today" @click=${this._toggleDatepicker} aria-label="Välj datum" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);"></scb-icon-button>
|
|
77
|
+
<scb-datepicker
|
|
78
|
+
variant="popup"
|
|
79
|
+
.selectedValue=${this.value}
|
|
80
|
+
.open=${this._showDatepicker}
|
|
81
|
+
@date-selected=${this._onDateSelected}
|
|
82
|
+
></scb-datepicker>
|
|
83
|
+
${e}
|
|
84
|
+
</div>
|
|
55
85
|
`:h`
|
|
56
86
|
<label class="scb-textfield-label" for="${this._inputId}">${this.label}</label>
|
|
57
87
|
<span
|
|
@@ -99,6 +129,9 @@ ${this.value}</textarea
|
|
|
99
129
|
:host([type='text']) {
|
|
100
130
|
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
101
131
|
}
|
|
132
|
+
:host([type='date']) {
|
|
133
|
+
--scb-textfield-max-width: var(--scb-textfield-text-max-width);
|
|
134
|
+
}
|
|
102
135
|
:host([type='search']) {
|
|
103
136
|
--scb-textfield-max-width: var(--scb-textfield-search-max-width);
|
|
104
137
|
}
|
|
@@ -252,4 +285,4 @@ ${this.value}</textarea
|
|
|
252
285
|
height: 100%;
|
|
253
286
|
display: block;
|
|
254
287
|
}
|
|
255
|
-
`];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);s=r([v("scb-textfield")],s);
|
|
288
|
+
`];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([a({type:Boolean})],s.prototype,"_showDatepicker",2);s=r([v("scb-textfield")],s);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.108",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -123,6 +123,10 @@
|
|
|
123
123
|
"import": "./scb-chip/scb-chip.js",
|
|
124
124
|
"require": "./scb-chip/scb-chip.js"
|
|
125
125
|
},
|
|
126
|
+
"./scb-datepicker": {
|
|
127
|
+
"import": "./scb-datepicker/scb-datepicker.js",
|
|
128
|
+
"require": "./scb-datepicker/scb-datepicker.js"
|
|
129
|
+
},
|
|
126
130
|
"./scb-dialog": {
|
|
127
131
|
"import": "./scb-dialog/scb-dialog.js",
|
|
128
132
|
"require": "./scb-dialog/scb-dialog.js"
|
|
@@ -337,5 +341,5 @@
|
|
|
337
341
|
},
|
|
338
342
|
"./mvc/*": "./mvc/*"
|
|
339
343
|
},
|
|
340
|
-
"buildHash": "
|
|
344
|
+
"buildHash": "35C00C1CE77F40BCC22105339704C4FB4E5291B028748939B0A8797CF24AB24E"
|
|
341
345
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { LitElement, PropertyValues, TemplateResult } from 'lit';
|
|
2
|
+
export declare class ScbDatepicker extends LitElement {
|
|
3
|
+
private _currentDate;
|
|
4
|
+
private _selectedDate;
|
|
5
|
+
private _showMonthDropdown;
|
|
6
|
+
private _showYearDropdown;
|
|
7
|
+
variant: 'static' | 'popup';
|
|
8
|
+
lang: 'sv' | 'en';
|
|
9
|
+
selectedValue: string;
|
|
10
|
+
open: boolean;
|
|
11
|
+
static styles: import('lit').CSSResult[];
|
|
12
|
+
updated(changed: PropertyValues): void;
|
|
13
|
+
private _getMonthDays;
|
|
14
|
+
private _monthNames;
|
|
15
|
+
render(): TemplateResult;
|
|
16
|
+
private _toggleMonthDropdown;
|
|
17
|
+
private _toggleYearDropdown;
|
|
18
|
+
private _onMonthChangeCustom;
|
|
19
|
+
private _onYearChangeCustom;
|
|
20
|
+
private _prevYear;
|
|
21
|
+
private _nextYear;
|
|
22
|
+
private _isToday;
|
|
23
|
+
private _isSelected;
|
|
24
|
+
private _selectDate;
|
|
25
|
+
private _prevMonth;
|
|
26
|
+
private _nextMonth;
|
|
27
|
+
private _close;
|
|
28
|
+
}
|