scb-wc-test 0.1.116 → 0.1.118

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "scb-wc-test",
3
- "version": "0.1.116",
3
+ "version": "0.1.118",
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": "227F3119B18DEE6767015D3DC4AF88BD68195127792285728F8C3D4A93FEC42D"
356
+ "buildHash": "5163F09E157CFC736420587AFE2434E158CD391731A5E8185003D695ECA7F8C9"
349
357
  }
@@ -0,0 +1,8 @@
1
+ import { LitElement } from 'lit';
2
+ export declare class ScbCalendarEvent extends LitElement {
3
+ title: string;
4
+ date: string;
5
+ description: string;
6
+ static styles: import('lit').CSSResult;
7
+ render(): import('lit-html').TemplateResult<1>;
8
+ }
@@ -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
+ };
@@ -25,10 +25,13 @@ let s = class extends x {
25
25
  const e = this.disabled ? null : this.value;
26
26
  this._internals.setFormValue(e);
27
27
  }
28
- if (this.pattern) {
29
- const e = new RegExp(this.pattern);
30
- this.error = !e.test(this.value);
31
- }
28
+ if (this.pattern)
29
+ if (!this.value)
30
+ this.error = !1;
31
+ else {
32
+ const e = new RegExp(this.pattern);
33
+ this.error = !e.test(this.value);
34
+ }
32
35
  this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
33
36
  new CustomEvent("onValueChanged", {
34
37
  detail: { value: this.value },
@@ -49,30 +52,9 @@ let s = class extends x {
49
52
  aria-label="Rensa fält"
50
53
  >
51
54
  <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
52
- <circle
53
- cx="12"
54
- cy="12"
55
- r="10"
56
- fill="none"
57
- stroke="currentColor"
58
- stroke-width="2"
59
- ></circle>
60
- <line
61
- x1="8"
62
- y1="8"
63
- x2="16"
64
- y2="16"
65
- stroke="currentColor"
66
- stroke-width="2"
67
- ></line>
68
- <line
69
- x1="16"
70
- y1="8"
71
- x2="8"
72
- y2="16"
73
- stroke="currentColor"
74
- stroke-width="2"
75
- ></line>
55
+ <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"></circle>
56
+ <line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2"></line>
57
+ <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2"></line>
76
58
  </svg>
77
59
  </button>
78
60
  ` : null;
@@ -128,12 +110,13 @@ ${this.value}</textarea
128
110
  <md-focus-ring class="input-ring"></md-focus-ring>
129
111
  </div>
130
112
  ${this.error ? e : d`
131
- <scb-icon-button
132
- class="scb-textfield-datepicker-button"
133
- icon="calendar_today"
134
- @click=${this._toggleDatepicker}
135
- aria-label="Välj datum"
136
- ></scb-icon-button>`}
113
+ <scb-icon-button
114
+ class="scb-textfield-datepicker-button"
115
+ icon="calendar_today"
116
+ @click=${this._toggleDatepicker}
117
+ aria-label="Välj datum"
118
+ ></scb-icon-button>
119
+ `}
137
120
  <scb-datepicker
138
121
  .selectedValue=${this.value}
139
122
  .open=${this._showDatepicker}
@@ -149,33 +132,34 @@ ${this.value}</textarea
149
132
  >
150
133
  <div class="scb-textfield-wrapper" style="position:relative;">
151
134
  ${t}
152
- <div class="ripple-wrapper">
153
- <input
154
- class="scb-textfield${this.error ? " has-error-icon" : ""}"
155
- .value=${this.value}
156
- type="text"
157
- name="${this.name}"
158
- id="${this._inputId}"
159
- ?disabled=${this.disabled}
160
- ?required=${this.required}
161
- aria-invalid=${this.error ? "true" : "false"}
162
- aria-describedby=${i}
163
- readonly
164
- @focus=${this._toggleDatepicker}
165
- @click=${this._toggleDatepicker}
166
- />
167
-
168
- <md-ripple></md-ripple>
169
- <md-focus-ring class="input-ring"></md-focus-ring>
135
+ <div class="ripple-wrapper">
136
+ <input
137
+ class="scb-textfield${this.error ? " has-error-icon" : ""}"
138
+ .value=${this.value}
139
+ type="text"
140
+ name="${this.name}"
141
+ id="${this._inputId}"
142
+ ?disabled=${this.disabled}
143
+ ?required=${this.required}
144
+ aria-invalid=${this.error ? "true" : "false"}
145
+ aria-describedby=${i}
146
+ readonly
147
+ @focus=${this._toggleDatepicker}
148
+ @click=${this._toggleDatepicker}
149
+ />
150
+
151
+ <md-ripple></md-ripple>
152
+ <md-focus-ring class="input-ring"></md-focus-ring>
170
153
  </div>
171
154
 
172
155
  ${this.error ? e : d`
173
- <scb-icon-button
174
- class="scb-textfield-datepicker-button"
175
- icon="calendar_today"
176
- @click=${this._toggleDatepicker}
177
- aria-label="Välj datum"
178
- ></scb-icon-button>`}
156
+ <scb-icon-button
157
+ class="scb-textfield-datepicker-button"
158
+ icon="calendar_today"
159
+ @click=${this._toggleDatepicker}
160
+ aria-label="Välj datum"
161
+ ></scb-icon-button>
162
+ `}
179
163
  <scb-datepicker
180
164
  variant="datetime-local"
181
165
  .selectedValue=${this.value}
@@ -266,10 +250,13 @@ ${this.value}</textarea
266
250
  const l = this.disabled ? null : this.value;
267
251
  this._internals.setFormValue(l);
268
252
  }
269
- if (this.pattern) {
270
- const l = new RegExp(this.pattern);
271
- this.error = !l.test(this.value);
272
- }
253
+ if (this.pattern)
254
+ if (!this.value)
255
+ this.error = !1;
256
+ else {
257
+ const l = new RegExp(this.pattern);
258
+ this.error = !l.test(this.value);
259
+ }
273
260
  this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(
274
261
  new CustomEvent("onValueChanged", {
275
262
  detail: { value: this.value },
@@ -423,9 +410,9 @@ s.styles = [
423
410
  :host([type='time']) {
424
411
  --scb-textfield-max-width: var(--scb-textfield-text-max-width);
425
412
  }
426
- input[type="time"]::-webkit-calendar-picker-indicator {
427
- display: none;
428
- background: none;
413
+ input[type='time']::-webkit-calendar-picker-indicator {
414
+ display: none;
415
+ background: none;
429
416
  }
430
417
 
431
418
  :host {