scb-wc-test 0.1.117 → 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.
- package/all.js +4 -0
- package/index.d.ts +2 -0
- package/index.js +126 -122
- package/mvc/components/all.js +2 -0
- package/mvc/components/scb-accordion/scb-accordion-item.js +1 -1
- package/mvc/components/scb-calendar/scb-calendar-event.js +12 -0
- package/mvc/components/scb-calendar/scb-calendar.js +123 -0
- 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 +10 -2
- package/scb-accordion/scb-accordion-item.js +1 -1
- package/scb-calendar/scb-calendar-event.d.ts +8 -0
- package/scb-calendar/scb-calendar-event.js +42 -0
- package/scb-calendar/scb-calendar.d.ts +16 -0
- package/scb-calendar/scb-calendar.js +212 -0
- 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 +527 -373
|
@@ -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.119",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -103,6 +103,14 @@
|
|
|
103
103
|
"import": "./scb-button/scb-button.js",
|
|
104
104
|
"require": "./scb-button/scb-button.js"
|
|
105
105
|
},
|
|
106
|
+
"./scb-calendar": {
|
|
107
|
+
"import": "./scb-calendar/scb-calendar.js",
|
|
108
|
+
"require": "./scb-calendar/scb-calendar.js"
|
|
109
|
+
},
|
|
110
|
+
"./scb-calendar/scb-calendar-event": {
|
|
111
|
+
"import": "./scb-calendar/scb-calendar-event.js",
|
|
112
|
+
"require": "./scb-calendar/scb-calendar-event.js"
|
|
113
|
+
},
|
|
106
114
|
"./scb-calendar-card": {
|
|
107
115
|
"import": "./scb-calendar-card/scb-calendar-card.js",
|
|
108
116
|
"require": "./scb-calendar-card/scb-calendar-card.js"
|
|
@@ -345,5 +353,5 @@
|
|
|
345
353
|
},
|
|
346
354
|
"./mvc/*": "./mvc/*"
|
|
347
355
|
},
|
|
348
|
-
"buildHash": "
|
|
356
|
+
"buildHash": "A962B1714D5005AAEEADB1C4869AE006FB9046D6732AA334CB23DEF1F42080A6"
|
|
349
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}>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { css as c, LitElement as d, html as f } from "lit";
|
|
2
|
+
import { property as l, customElement as h } from "lit/decorators.js";
|
|
3
|
+
var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, p = (a, r, i, s) => {
|
|
4
|
+
for (var t = s > 1 ? void 0 : s ? m(r, i) : r, o = a.length - 1, n; o >= 0; o--)
|
|
5
|
+
(n = a[o]) && (t = (s ? n(r, i, t) : n(t)) || t);
|
|
6
|
+
return s && t && v(r, i, t), t;
|
|
7
|
+
};
|
|
8
|
+
let e = class extends d {
|
|
9
|
+
constructor() {
|
|
10
|
+
super(...arguments), this.title = "", this.date = "", this.description = "";
|
|
11
|
+
}
|
|
12
|
+
render() {
|
|
13
|
+
return f`
|
|
14
|
+
<div>
|
|
15
|
+
<h3>${this.title}</h3>
|
|
16
|
+
<p>${this.date}</p>
|
|
17
|
+
<p>${this.description}</p>
|
|
18
|
+
</div>
|
|
19
|
+
`;
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
e.styles = c`
|
|
23
|
+
:host {
|
|
24
|
+
display: block;
|
|
25
|
+
font-family: var(--brand-font, Arial, sans-serif)
|
|
26
|
+
}
|
|
27
|
+
`;
|
|
28
|
+
p([
|
|
29
|
+
l({ type: String })
|
|
30
|
+
], e.prototype, "title", 2);
|
|
31
|
+
p([
|
|
32
|
+
l({ type: String })
|
|
33
|
+
], e.prototype, "date", 2);
|
|
34
|
+
p([
|
|
35
|
+
l({ type: String })
|
|
36
|
+
], e.prototype, "description", 2);
|
|
37
|
+
e = p([
|
|
38
|
+
h("scb-calendar-event")
|
|
39
|
+
], e);
|
|
40
|
+
export {
|
|
41
|
+
e as ScbCalendarEvent
|
|
42
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { LitElement } from 'lit';
|
|
2
|
+
export declare class ScbCalendar extends LitElement {
|
|
3
|
+
label: string;
|
|
4
|
+
value: string;
|
|
5
|
+
static styles: import('lit').CSSResult;
|
|
6
|
+
private _today;
|
|
7
|
+
private _current;
|
|
8
|
+
private _popupEvent;
|
|
9
|
+
private _daysInMonth;
|
|
10
|
+
private _firstDayOfWeek;
|
|
11
|
+
private _prevMonth;
|
|
12
|
+
private _nextMonth;
|
|
13
|
+
private _showEventPopup;
|
|
14
|
+
private _closePopup;
|
|
15
|
+
render(): import('lit-html').TemplateResult<1>;
|
|
16
|
+
}
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { css as _, LitElement as w, html as i } from "lit";
|
|
2
|
+
import { property as f, customElement as $ } from "lit/decorators.js";
|
|
3
|
+
import "./scb-calendar-event.js";
|
|
4
|
+
import "../scb-icon-button/scb-icon-button.js";
|
|
5
|
+
var M = Object.defineProperty, D = Object.getOwnPropertyDescriptor, b = (t, e, o, s) => {
|
|
6
|
+
for (var a = s > 1 ? void 0 : s ? D(e, o) : e, c = t.length - 1, d; c >= 0; c--)
|
|
7
|
+
(d = t[c]) && (a = (s ? d(e, o, a) : d(a)) || a);
|
|
8
|
+
return s && a && M(e, o, a), a;
|
|
9
|
+
};
|
|
10
|
+
let u = class extends w {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments), this.label = "", this.value = "", this._today = /* @__PURE__ */ new Date(), this._current = /* @__PURE__ */ new Date(), this._popupEvent = null;
|
|
13
|
+
}
|
|
14
|
+
_daysInMonth(t, e) {
|
|
15
|
+
return new Date(t, e + 1, 0).getDate();
|
|
16
|
+
}
|
|
17
|
+
_firstDayOfWeek(t, e) {
|
|
18
|
+
return new Date(t, e, 1).getDay();
|
|
19
|
+
}
|
|
20
|
+
_prevMonth() {
|
|
21
|
+
this._current = new Date(this._current.getFullYear(), this._current.getMonth() - 1, 1), this.requestUpdate();
|
|
22
|
+
}
|
|
23
|
+
_nextMonth() {
|
|
24
|
+
this._current = new Date(this._current.getFullYear(), this._current.getMonth() + 1, 1), this.requestUpdate();
|
|
25
|
+
}
|
|
26
|
+
_showEventPopup(t) {
|
|
27
|
+
this._popupEvent = t, this.requestUpdate(), setTimeout(() => {
|
|
28
|
+
const e = (o) => {
|
|
29
|
+
var s;
|
|
30
|
+
(s = o.target) != null && s.closest(".event-popup") || this._closePopup();
|
|
31
|
+
};
|
|
32
|
+
window.addEventListener("mousedown", e, { once: !0 });
|
|
33
|
+
}, 0);
|
|
34
|
+
}
|
|
35
|
+
_closePopup() {
|
|
36
|
+
this._popupEvent = null, this.requestUpdate();
|
|
37
|
+
}
|
|
38
|
+
render() {
|
|
39
|
+
const t = this._current.getFullYear(), e = this._current.getMonth(), o = this._daysInMonth(t, e), s = this._firstDayOfWeek(t, e), a = this._today, c = Array.from(this.querySelectorAll("scb-calendar-event")), d = /* @__PURE__ */ new Map();
|
|
40
|
+
for (const r of c)
|
|
41
|
+
if (r.date && r.title) {
|
|
42
|
+
const p = d.get(r.date) || [];
|
|
43
|
+
p.push({ title: r.title, description: r.description }), d.set(r.date, p);
|
|
44
|
+
}
|
|
45
|
+
const m = [];
|
|
46
|
+
let l = 1;
|
|
47
|
+
for (let r = 0; r < 6; r++) {
|
|
48
|
+
const p = [];
|
|
49
|
+
for (let h = 0; h < 7; h++)
|
|
50
|
+
if (r === 0 && h < s) {
|
|
51
|
+
const g = e === 0 ? 11 : e - 1, y = e === 0 ? t - 1 : t, v = this._daysInMonth(y, g) - (s - h - 1);
|
|
52
|
+
p.push(i`
|
|
53
|
+
<div class="calendar-day calendar-day--other">
|
|
54
|
+
<span class="calendar-day-number">${v}</span>
|
|
55
|
+
</div>
|
|
56
|
+
`);
|
|
57
|
+
} else if (l > o)
|
|
58
|
+
p.push(i`<div></div>`);
|
|
59
|
+
else {
|
|
60
|
+
const g = a.getFullYear() === t && a.getMonth() === e && a.getDate() === l, y = `${t}-${String(e + 1).padStart(2, "0")}-${String(l).padStart(2, "0")}`, n = d.get(y) || [];
|
|
61
|
+
p.push(i`
|
|
62
|
+
<div
|
|
63
|
+
class="calendar-day${g ? " today" : ""}${n.length ? " has-event" : ""}"
|
|
64
|
+
@click=${n.length ? () => this._showEventPopup({ date: y, events: n }) : null}
|
|
65
|
+
title=${n.length === 1 ? n[0].title : n.length > 1 ? n.map((v) => v.title).join(", ") : ""}
|
|
66
|
+
>
|
|
67
|
+
<span class="calendar-day-number">${l}</span>
|
|
68
|
+
<div class="calendar-titles-wrapper">
|
|
69
|
+
${n.map((v) => i`<span class="calendar-day-event-title">${v.title}</span>`)}
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
`), l++;
|
|
73
|
+
}
|
|
74
|
+
if (m.push(i`<div class="calendar-grid">${p}</div>`), l > o) break;
|
|
75
|
+
}
|
|
76
|
+
const x = [
|
|
77
|
+
"Januari",
|
|
78
|
+
"Februari",
|
|
79
|
+
"Mars",
|
|
80
|
+
"April",
|
|
81
|
+
"Maj",
|
|
82
|
+
"Juni",
|
|
83
|
+
"Juli",
|
|
84
|
+
"Augusti",
|
|
85
|
+
"September",
|
|
86
|
+
"Oktober",
|
|
87
|
+
"November",
|
|
88
|
+
"December"
|
|
89
|
+
];
|
|
90
|
+
return i`
|
|
91
|
+
<div class="calendar-header">
|
|
92
|
+
<scb-icon-button @click=${this._prevMonth} icon="chevron_left" aria-label="Föregående månad"></scb-icon-button>
|
|
93
|
+
<span>${x[e]} ${t}</span>
|
|
94
|
+
<scb-icon-button @click=${this._nextMonth} icon="chevron_right" aria-label="Nästa månad"></scb-icon-button>
|
|
95
|
+
</div>
|
|
96
|
+
<div class="calendar-grid calendar-grid-days">
|
|
97
|
+
<div>Mån</div><div>Tis</div><div>Ons</div><div>Tor</div><div>Fre</div><div>Lör</div><div>Sön</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="calendar-weeks">
|
|
100
|
+
${m}
|
|
101
|
+
<div>
|
|
102
|
+
${this._popupEvent && Array.isArray(this._popupEvent.events) ? i`
|
|
103
|
+
<div class="event-popup-backdrop" @click=${this._closePopup}></div>
|
|
104
|
+
<div class="event-popup">
|
|
105
|
+
<button class="close-btn" @click=${this._closePopup} title="Stäng">×</button>
|
|
106
|
+
<div>${this._popupEvent.date}</div>
|
|
107
|
+
<ul>
|
|
108
|
+
${this._popupEvent.events.map((r) => i`<li><strong>${r.title}</strong>${r.description ? i`<div>${r.description}</div>` : ""}</li>`)}
|
|
109
|
+
</ul>
|
|
110
|
+
</div>
|
|
111
|
+
` : ""}
|
|
112
|
+
`;
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
u.styles = _`
|
|
116
|
+
:host {
|
|
117
|
+
display: block;
|
|
118
|
+
font-family: var(--brand-font, Arial, sans-serif);
|
|
119
|
+
background: var(--md-sys-color-surface, #fff);
|
|
120
|
+
color: var(--md-sys-color-on-surface, #222);
|
|
121
|
+
border-radius: 12px;
|
|
122
|
+
border: var(--scb-elevation-2, 0 2px 8px rgba(0,0,0,0.08));
|
|
123
|
+
padding: 16px;
|
|
124
|
+
}
|
|
125
|
+
.calendar-header {
|
|
126
|
+
display: flex;
|
|
127
|
+
align-items: center;
|
|
128
|
+
justify-content: space-between;
|
|
129
|
+
margin-bottom: 16px;
|
|
130
|
+
border-bottom: 1px solid rgb(224, 224, 224);
|
|
131
|
+
padding-bottom: 8px;
|
|
132
|
+
}
|
|
133
|
+
.calendar-grid {
|
|
134
|
+
display: grid;
|
|
135
|
+
grid-template-columns: repeat(7, 1fr);
|
|
136
|
+
gap: 4px;
|
|
137
|
+
margin-bottom: 4px;
|
|
138
|
+
}
|
|
139
|
+
.calendar-grid-days{
|
|
140
|
+
font-weight: 600;
|
|
141
|
+
margin-bottom: 16px;
|
|
142
|
+
}
|
|
143
|
+
.calendar-weeks {
|
|
144
|
+
display: grid;
|
|
145
|
+
grid-auto-rows: 1fr;
|
|
146
|
+
}
|
|
147
|
+
.calendar-titles-wrapper{
|
|
148
|
+
display: grid;
|
|
149
|
+
gap: 4px;
|
|
150
|
+
}
|
|
151
|
+
.calendar-day {
|
|
152
|
+
border-radius: 6px;
|
|
153
|
+
min-height: 3.2em;
|
|
154
|
+
display: flex;
|
|
155
|
+
padding: 8px;
|
|
156
|
+
box-sizing: border-box;
|
|
157
|
+
overflow: hidden;
|
|
158
|
+
gap: 8px;
|
|
159
|
+
border: 1px solid #e0e0e0;
|
|
160
|
+
flex-direction: column;
|
|
161
|
+
}
|
|
162
|
+
.calendar-day--other {
|
|
163
|
+
opacity: 0.4;
|
|
164
|
+
}
|
|
165
|
+
.calendar-day-number {
|
|
166
|
+
font-size: 1em;
|
|
167
|
+
line-height: 1.2;
|
|
168
|
+
}
|
|
169
|
+
.calendar-day-event-title {
|
|
170
|
+
font-size: 12px;
|
|
171
|
+
color: var(--md-sys-color-primary);
|
|
172
|
+
white-space: nowrap;
|
|
173
|
+
overflow: hidden;
|
|
174
|
+
text-overflow: ellipsis;
|
|
175
|
+
display: block;
|
|
176
|
+
width: 100%;
|
|
177
|
+
}
|
|
178
|
+
.calendar-day.today {
|
|
179
|
+
border: 1px solid var(--md-sys-color-primary);
|
|
180
|
+
}
|
|
181
|
+
.calendar-day.has-event {
|
|
182
|
+
cursor: pointer;
|
|
183
|
+
border: 2px solid var(--md-sys-color-primary);
|
|
184
|
+
position: relative;
|
|
185
|
+
}
|
|
186
|
+
.event-popup {
|
|
187
|
+
position: fixed;
|
|
188
|
+
z-index: 1000;
|
|
189
|
+
background: #fff;
|
|
190
|
+
color: #222;
|
|
191
|
+
border-radius: 10px;
|
|
192
|
+
box-shadow: 0 4px 24px rgba(0,0,0,0.18);
|
|
193
|
+
min-width: 220px;
|
|
194
|
+
max-width: 320px;
|
|
195
|
+
padding: 16px 20px 16px 20px;
|
|
196
|
+
top: 30%;
|
|
197
|
+
left: 50%;
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
`;
|
|
201
|
+
b([
|
|
202
|
+
f({ type: String })
|
|
203
|
+
], u.prototype, "label", 2);
|
|
204
|
+
b([
|
|
205
|
+
f({ type: String })
|
|
206
|
+
], u.prototype, "value", 2);
|
|
207
|
+
u = b([
|
|
208
|
+
$("scb-calendar")
|
|
209
|
+
], u);
|
|
210
|
+
export {
|
|
211
|
+
u as ScbCalendar
|
|
212
|
+
};
|
|
@@ -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}>
|
|
@@ -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;
|