scb-wc 0.1.237 → 0.1.239
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/README.md +19 -16
- package/all.d.ts +14 -0
- package/all.js +14 -0
- package/index.js +99 -85
- package/mvc/components/all.js +9 -0
- package/mvc/components/scb-accordion/scb-accordion-item.js +1 -1
- package/mvc/components/scb-accordion/scb-accordion.js +1 -1
- package/mvc/components/scb-app-bar/scb-app-bar.js +1 -1
- package/mvc/components/scb-button/scb-button.js +3 -3
- package/mvc/components/scb-calendar/scb-calendar.js +1 -1
- package/mvc/components/scb-calendar-card/scb-calendar-card.js +4 -4
- package/mvc/components/scb-card/scb-card.js +2 -2
- package/mvc/{vendor → components/scb-chevron}/scb-chevron.js +1 -1
- package/mvc/components/scb-cookies-consent/scb-cookies-consent.js +1 -1
- package/mvc/components/scb-datepicker/scb-datepicker.js +143 -0
- package/mvc/components/scb-dialog/scb-dialog.js +1 -1
- package/mvc/components/scb-drawer/scb-drawer.js +3 -3
- package/mvc/components/scb-drop-zone/scb-drop-zone.js +1 -1
- package/mvc/components/scb-dropdown/scb-dropdown.js +1 -1
- package/mvc/components/scb-fact-card/scb-fact-card.js +1 -1
- package/mvc/components/scb-header/scb-header.js +2 -2
- package/mvc/components/scb-horizontal-scroller/scb-horizontal-scroller.js +6 -6
- package/mvc/components/scb-icon-button/scb-icon-button.js +5 -5
- package/mvc/components/scb-keyfigure-card/scb-keyfigure-card.js +6 -6
- package/mvc/components/scb-link/scb-link.js +1 -1
- package/mvc/components/scb-link-button/scb-link-button.js +1 -1
- package/mvc/components/scb-list/scb-list-item.js +6 -6
- package/mvc/components/scb-menu/scb-menu-item.js +3 -3
- package/mvc/components/scb-menu/scb-menu.js +5 -5
- package/mvc/components/scb-nav/scb-nav.js +1 -1
- package/mvc/components/scb-notification-card/scb-notification-card.js +1 -1
- package/mvc/components/scb-options-menu/scb-options-menu-item.js +1 -1
- package/mvc/components/scb-options-menu/scb-options-menu.js +2 -2
- package/mvc/components/scb-options-menu/scb-options-sub-menu.js +1 -1
- package/mvc/components/scb-overlay/scb-overlay.js +3 -3
- package/mvc/components/scb-pagination/scb-pagination.js +1 -1
- package/mvc/components/scb-progress-stepper/scb-progress-step.js +1 -1
- package/mvc/components/scb-search/scb-search.js +3 -3
- package/mvc/components/scb-segmented-button/scb-segmented-item.js +1 -1
- package/mvc/components/scb-select/scb-select-option.js +1 -1
- package/mvc/components/scb-select/scb-select.js +1 -1
- package/mvc/components/scb-snackbar/scb-snackbar.js +1 -1
- package/mvc/components/scb-stepper/scb-step.js +1 -1
- package/mvc/components/scb-table/scb-table.js +1 -1
- package/mvc/components/scb-table-advanced/scb-table-advanced.js +1 -1
- package/mvc/components/scb-table-next/read-table.js +1 -0
- package/mvc/components/scb-table-next/scb-table-next.js +6 -0
- package/mvc/components/scb-textfield/scb-textfield.js +34 -176
- package/mvc/components/scb-toc/scb-toc-item.js +1 -1
- package/mvc/components/scb-tooltip/scb-tooltip.js +1 -1
- package/mvc/{vendor → components/shared}/component-size-token.js +1 -1
- package/mvc/components/shared/lazy-focus-ring.js +2 -0
- package/mvc/components/shared/lazy-ripple.js +2 -0
- package/mvc/{vendor → components/shared}/manual-popover.js +1 -1
- package/mvc/components/shared/scb-icon-svg.js +11 -0
- package/package.json +12 -2
- package/scb-components/index.d.ts +108 -0
- package/scb-components/scb-table-next/read-table.d.ts +29 -0
- package/scb-components/scb-table-next/scb-table-next.d.ts +22 -0
- package/scb-components/scb-viz/scb-viz-actions-runtime.d.ts +26 -0
- package/scb-components/scb-viz/scb-viz-print-runtime.d.ts +30 -0
- package/scb-components/scb-viz/scb-viz-series-differentiation-registry.d.ts +21 -0
- package/scb-components/scb-viz/scb-viz-series-differentiation-runtime.d.ts +42 -0
- package/scb-components/scb-viz/scb-viz-table-runtime.d.ts +28 -0
- package/scb-components/shared/component-size-token.d.ts +1 -0
- package/scb-components/shared/lazy-focus-ring.d.ts +4 -0
- package/scb-components/shared/lazy-ripple.d.ts +9 -0
- package/scb-components/shared/manual-popover.d.ts +7 -0
- package/scb-components/shared/scb-icon-svg.d.ts +3 -0
- package/scb-menu/scb-menu-item.js +7 -1
- package/scb-menu/scb-menu.js +3 -0
- package/scb-table-next/read-table.js +87 -0
- package/scb-table-next/scb-table-next.js +226 -0
- package/scb-viz/scb-viz-series-differentiation-registry.js +10 -7
- package/scb-viz/scb-viz.js +43 -43
- package/scb-wc.bundle.js +417 -287
- package/scb-wc.d.ts +28 -0
- package/shared/scb-icon-svg.js +5 -2
- package/mvc/vendor/lazy-focus-ring.js +0 -2
- package/mvc/vendor/lazy-ripple.js +0 -2
- package/mvc/vendor/scb-icon-svg.js +0 -11
|
@@ -1,146 +1,4 @@
|
|
|
1
|
-
import{f as
|
|
2
|
-
<div class="datepicker-popup popup" @keydown=${this._onPopupKeydown}>
|
|
3
|
-
<div class="header">
|
|
4
|
-
<div class="month-selector ${this._showMonthDropdown?"open":""} ${this._showYearDropdown?"disable":""}">
|
|
5
|
-
<scb-icon-button size=${y(this,"--scb-datepicker-design-navigation-icon-button-size-medium",["tiny","extra-small","small","medium","large"],"medium")} icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang=="sv"?"Föregående månad":"Previous month"}></scb-icon-button>
|
|
6
|
-
<div class="custom-dropdown month-dropdown">
|
|
7
|
-
<div
|
|
8
|
-
tabindex=${this._showYearDropdown?-1:0}
|
|
9
|
-
class="dropdown-selected"
|
|
10
|
-
role="button"
|
|
11
|
-
aria-haspopup="listbox"
|
|
12
|
-
aria-expanded=${String(this._showMonthDropdown)}
|
|
13
|
-
aria-label=${this.lang=="sv"?"Välj månad":"Choose month"}
|
|
14
|
-
@click=${()=>this._toggleMonthDropdown()}
|
|
15
|
-
@keydown=${l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),this._toggleMonthDropdown())}}
|
|
16
|
-
>
|
|
17
|
-
${this._monthNames[t].slice(0,3)}
|
|
18
|
-
<md-icon aria-hidden="true">arrow_drop_down</md-icon>
|
|
19
|
-
<md-focus-ring></md-focus-ring>
|
|
20
|
-
<md-ripple></md-ripple>
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
<scb-icon-button size=${y(this,"--scb-datepicker-design-navigation-icon-button-size-medium",["tiny","extra-small","small","medium","large"],"medium")} icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang=="sv"?"Nästa månad":"Next month"}></scb-icon-button>
|
|
24
|
-
</div>
|
|
25
|
-
<div class="year-selector ${this._showMonthDropdown?"disable":""} ${this._showYearDropdown?"open":""}">
|
|
26
|
-
<scb-icon-button size=${y(this,"--scb-datepicker-design-navigation-icon-button-size-medium",["tiny","extra-small","small","medium","large"],"medium")} icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang=="sv"?"Föregående år":"Previous year"}></scb-icon-button>
|
|
27
|
-
<div class="custom-dropdown year-dropdown">
|
|
28
|
-
<div
|
|
29
|
-
tabindex=${this._showMonthDropdown?-1:0}
|
|
30
|
-
class="dropdown-selected"
|
|
31
|
-
role="button"
|
|
32
|
-
aria-haspopup="listbox"
|
|
33
|
-
aria-expanded=${String(this._showYearDropdown)}
|
|
34
|
-
aria-label=${this.lang=="sv"?"Välj år":"Choose year"}
|
|
35
|
-
@click=${()=>this._toggleYearDropdown()}
|
|
36
|
-
@keydown=${l=>{(l.key==="Enter"||l.key===" ")&&(l.preventDefault(),this._toggleYearDropdown())}}
|
|
37
|
-
>
|
|
38
|
-
${e}
|
|
39
|
-
<md-icon aria-hidden="true">arrow_drop_down</md-icon>
|
|
40
|
-
<md-focus-ring></md-focus-ring>
|
|
41
|
-
<md-ripple></md-ripple>
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
44
|
-
<scb-icon-button size=${y(this,"--scb-datepicker-design-navigation-icon-button-size-medium",["tiny","extra-small","small","medium","large"],"medium")} icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang=="sv"?"Nästa år":"Next year"}></scb-icon-button>
|
|
45
|
-
</div>
|
|
46
|
-
</div>
|
|
47
|
-
${this._showMonthDropdown||this._showYearDropdown?o`<scb-divider></scb-divider>`:""}
|
|
48
|
-
<div class="datepicker-content" style="position:relative;">
|
|
49
|
-
${this._showMonthDropdown?o`
|
|
50
|
-
<div class="dropdown-list" role="listbox" aria-label=${this.lang=="sv"?"Månader":"Months"}>
|
|
51
|
-
${this._monthNames.map((l,n)=>o`
|
|
52
|
-
<div
|
|
53
|
-
@keydown=${m=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),this._onMonthChangeCustom(n))}}
|
|
54
|
-
tabindex="0"
|
|
55
|
-
role="option"
|
|
56
|
-
aria-selected=${n===t?"true":"false"}
|
|
57
|
-
class="dropdown-item${n===t?" selected":""}"
|
|
58
|
-
@click=${()=>this._onMonthChangeCustom(n)}
|
|
59
|
-
id=${n===t?"selected-month":""}
|
|
60
|
-
>
|
|
61
|
-
${n===t?o`<md-icon aria-hidden="true">check</md-icon>`:""}
|
|
62
|
-
${l}
|
|
63
|
-
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
64
|
-
</div>
|
|
65
|
-
`)}
|
|
66
|
-
</div>
|
|
67
|
-
`:""}
|
|
68
|
-
${this._showYearDropdown?o`
|
|
69
|
-
<div class="dropdown-list" role="listbox" aria-label=${this.lang=="sv"?"År":"Years"}>
|
|
70
|
-
${d.map(l=>o`
|
|
71
|
-
<div
|
|
72
|
-
@keydown=${n=>{(n.key==="Enter"||n.key===" ")&&(n.preventDefault(),this._onYearChangeCustom(l))}}
|
|
73
|
-
tabindex="0"
|
|
74
|
-
role="option"
|
|
75
|
-
aria-selected=${l===e?"true":"false"}
|
|
76
|
-
class="dropdown-item${l===e?" selected":""}"
|
|
77
|
-
@click=${()=>this._onYearChangeCustom(l)}
|
|
78
|
-
id=${l===e?"selected-year":""}
|
|
79
|
-
>
|
|
80
|
-
${l===e?o`<md-icon aria-hidden="true">check</md-icon>`:""}
|
|
81
|
-
${l}
|
|
82
|
-
<md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
|
|
83
|
-
</div>
|
|
84
|
-
`)}
|
|
85
|
-
</div>
|
|
86
|
-
`:""}
|
|
87
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?o`
|
|
88
|
-
<div class="datepicker-calendar">
|
|
89
|
-
<table>
|
|
90
|
-
<thead>
|
|
91
|
-
<tr>
|
|
92
|
-
<th>${this.lang=="sv"?"Må":"Mo"}</th><th>${this.lang=="sv"?"Ti":"Tu"}</th><th>${this.lang=="sv"?"On":"We"}</th><th>${this.lang=="sv"?"To":"Th"}</th><th>${this.lang=="sv","Fr"}</th><th>${this.lang=="sv"?"Lö":"Sa"}</th><th>${this.lang=="sv"?"Sö":"Su"}</th>
|
|
93
|
-
</tr>
|
|
94
|
-
</thead>
|
|
95
|
-
<tbody>
|
|
96
|
-
${r.map(l=>o`
|
|
97
|
-
<tr>
|
|
98
|
-
${l.map(n=>n?o`
|
|
99
|
-
<td>
|
|
100
|
-
<div
|
|
101
|
-
@keydown=${m=>{(m.key==="Enter"||m.key===" ")&&(m.preventDefault(),this._selectDate(n))}}
|
|
102
|
-
role="button"
|
|
103
|
-
aria-label=${this._formatDateLabel(n)}
|
|
104
|
-
aria-pressed=${this._isSelected(n)?"true":"false"}
|
|
105
|
-
tabindex="0"
|
|
106
|
-
class="day${this._isToday(n,i)?" today":""}${this._isSelected(n)?" selected":""}"
|
|
107
|
-
@click=${()=>this._selectDate(n)}
|
|
108
|
-
>${n.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
|
|
109
|
-
</td>
|
|
110
|
-
`:o`<td></td>`)}
|
|
111
|
-
</tr>
|
|
112
|
-
`)}
|
|
113
|
-
</tbody>
|
|
114
|
-
</table>
|
|
115
|
-
</div>
|
|
116
|
-
`:""}
|
|
117
|
-
</div>
|
|
118
|
-
${h?o`
|
|
119
|
-
<div class="time-field">
|
|
120
|
-
<label class="time-label">
|
|
121
|
-
<span>${this.lang=="sv"?"Tid:":"Time:"}</span>
|
|
122
|
-
<scb-textfield
|
|
123
|
-
type="time"
|
|
124
|
-
size=${y(this,"--scb-datepicker-design-time-field-component-size-medium",["extra-small","small","medium","large"],"medium")}
|
|
125
|
-
.value=${`${String(this._selectedHour).padStart(2,"0")}:${String(this._selectedMinute).padStart(2,"0")}`}
|
|
126
|
-
@blur=${this._onTimeChange}
|
|
127
|
-
aria-label="${this.lang=="sv"?"Tid":"Time"}"
|
|
128
|
-
></scb-textfield>
|
|
129
|
-
</label>
|
|
130
|
-
</div>
|
|
131
|
-
`:""}
|
|
132
|
-
<div class="datepicker-footer">
|
|
133
|
-
${!this._showMonthDropdown&&!this._showYearDropdown?o`
|
|
134
|
-
<scb-button
|
|
135
|
-
variant="text"
|
|
136
|
-
size=${y(this,"--scb-datepicker-design-actions-button-size-medium",["small","medium","large"],"medium")}
|
|
137
|
-
label=${this.lang=="sv"?"Stäng":"Close"}
|
|
138
|
-
@click=${this._close}
|
|
139
|
-
></scb-button>
|
|
140
|
-
`:""}
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
`}_getMonthDays(e,t){const i=new Date(Date.UTC(e,t,1)),r=new Date(Date.UTC(e,t+1,0)),d=[];let h=[],l=i.getUTCDay(),n=l===0?6:l-1;for(let m=0;m<n;m++)h.push(null);for(let m=1;m<=r.getUTCDate();m++){const w=new Date(Date.UTC(e,t,m));h.push(w),h.length===7&&(d.push(h),h=[])}if(h.length){for(;h.length<7;)h.push(null);d.push(h)}return d}_toggleMonthDropdown(){this._showMonthDropdown=!this._showMonthDropdown,this._showMonthDropdown&&(this._showYearDropdown=!1,setTimeout(()=>{this._centerOptionInContent("#selected-month")},0))}_toggleYearDropdown(){this._showYearDropdown=!this._showYearDropdown,this._showYearDropdown&&(this._showMonthDropdown=!1,setTimeout(()=>{this._centerOptionInContent("#selected-year")},0))}_centerOptionInContent(e){const t=this.renderRoot.querySelector(".datepicker-content"),i=this.renderRoot.querySelector(e);if(!t||!i)return;const r=t.getBoundingClientRect(),d=i.getBoundingClientRect();t.scrollTop+=d.top-r.top-(t.clientHeight-d.height)/2}_onMonthChangeCustom(e){const t=this._currentDate.getFullYear();this._currentDate=new Date(t,e,1),this._showMonthDropdown=!1}_onYearChangeCustom(e){const t=this._currentDate.getMonth();this._currentDate=new Date(e,t,1),this._showYearDropdown=!1}_isToday(e,t){return e.getDate()===t.getDate()&&e.getMonth()===t.getMonth()&&e.getFullYear()===t.getFullYear()}_isSelected(e){return this._selectedDate&&e.getDate()===this._selectedDate.getDate()&&e.getMonth()===this._selectedDate.getMonth()&&e.getFullYear()===this._selectedDate.getFullYear()}_selectDate(e){if(this._selectedDate=e,this.variant==="datetime-local"){const t=new Date(e);t.setHours(this._selectedHour??0,this._selectedMinute??0,0,0),this._selectedHour=t.getHours(),this._selectedMinute=t.getMinutes();const i=d=>d.toString().padStart(2,"0"),r=`${t.getFullYear()}-${i(t.getMonth()+1)}-${i(t.getDate())} ${i(t.getHours())}:${i(t.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:r},bubbles:!0,composed:!0}))}else{const t=e.toISOString().slice(0,10);this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:t},bubbles:!0,composed:!0}))}}_fireDateTimeChange(){if(this.variant==="datetime-local"&&this._selectedDate){const e=new Date(this._selectedDate);e.setHours(this._selectedHour??0,this._selectedMinute??0,0,0);const t=r=>r.toString().padStart(2,"0"),i=`${e.getFullYear()}-${t(e.getMonth()+1)}-${t(e.getDate())} ${t(e.getHours())}:${t(e.getMinutes())}`;this.dispatchEvent(new CustomEvent("date-selected",{detail:{value:i},bubbles:!0,composed:!0}))}}},T.styles=[H`:host{--scb-datepicker-z-index:var(--scb-layer-popover, 1100);--scb-datepicker-viewport-margin:8px;--scb-datepicker-offset:var(--spacing-2, 4px);max-width:var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width, 380px), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));font-family:var(--brand-font);color:var(--scb-datepicker-panel-content-color, var(--md-sys-color-on-surface));display:block;position:var(--scb-datepicker-position, fixed);top:var(--scb-datepicker-top, calc(100% + var(--scb-datepicker-offset)));bottom:var(--scb-datepicker-bottom, auto);left:var(--scb-datepicker-left, 0);width:var(--scb-datepicker-computed-width, min(var(--scb-datepicker-width, 380px), calc(100vw - (var(--scb-datepicker-viewport-margin) * 2))));transform:var(--scb-datepicker-transform, translateX(0px));z-index:var(--scb-datepicker-z-index)}.dropdown-selected,.month-selector,.year-selector{display:flex;align-items:center}.dropdown-selected md-icon{inline-size:var(--scb-datepicker-design-dropdown-icon-medium);block-size:var(--scb-datepicker-design-dropdown-icon-medium);font-size:var(--scb-datepicker-design-dropdown-icon-medium)}.dropdown-item md-icon{inline-size:var(--scb-datepicker-design-selected-icon-medium);block-size:var(--scb-datepicker-design-selected-icon-medium);font-size:var(--scb-datepicker-design-selected-icon-medium)}.dropdown-selected{position:relative;border-radius:var(--scb-datepicker-design-dropdown-selected-radius-medium);font-family:var(--scb-datepicker-design-dropdown-selected-text-medium-font);font-size:var(--scb-datepicker-design-dropdown-selected-text-medium-size);line-height:var(--scb-datepicker-design-dropdown-selected-text-medium-line-height);font-weight:var(--scb-datepicker-design-dropdown-selected-text-medium-weight);letter-spacing:var(--scb-datepicker-design-dropdown-selected-text-medium-tracking);cursor:pointer;text-align:left;gap:var(--scb-datepicker-design-dropdown-selected-gap-medium);padding-block:var(--scb-datepicker-design-dropdown-selected-padding-block-medium);padding-inline:var(--scb-datepicker-design-dropdown-selected-padding-inline-medium)}.dropdown-selected:focus{outline:0}.dropdown-selected md-focus-ring{border-radius:var(--scb-datepicker-design-dropdown-selected-radius-medium)}.dropdown-list{position:relative;background:var(--scb-datepicker-panel-surface-color, var(--md-sys-color-surface));padding-block:var(--scb-datepicker-design-dropdown-list-padding-block-medium)}.dropdown-item{display:flex;position:relative;cursor:pointer;padding-block:var(--scb-datepicker-design-option-padding-block-medium);padding-inline:var(--scb-datepicker-design-option-padding-inline-medium);min-height:var(--scb-datepicker-design-option-height-medium);align-items:center}.dropdown-item:focus-within{outline:0}.dropdown-item md-focus-ring{border-radius:var(--md-sys-shape-corner-small)}.dropdown-item.selected{background:var(--scb-datepicker-selected-container-color, var(--md-sys-color-secondary-container, var(--p-95)));color:var(--scb-datepicker-selected-content-color, var(--md-sys-color-on-surface));font-weight:var(--scb-datepicker-design-dropdown-selected-text-medium-weight);padding-inline-start:var(--scb-datepicker-design-option-selected-padding-inline-start-medium);gap:var(--scb-datepicker-design-option-selected-gap-medium)}.datepicker-popup{background:var(--scb-datepicker-panel-surface-color, var(--md-sys-color-surface));border-radius:var(--scb-datepicker-design-surface-radius-medium);box-shadow:var(--scb-datepicker-popover-shadow, var(--scb-shadow-menu));max-width:100%;width:100%;max-height:var(--scb-datepicker-max-height, 80vh);overflow:auto;overflow-x:hidden;font-family:var(--brand-font)}.datepicker-popup[popover]{box-sizing:border-box;margin:0;border:0;padding:0;inset:auto}.datepicker-content{overflow-y:auto;max-height:var(--scb-datepicker-content-max-height, 290px)}.datepicker-content::-webkit-scrollbar{width:var(--scb-datepicker-design-scrollbar-width-medium);background:var(--scb-datepicker-panel-surface-color, var(--md-sys-color-surface));border-radius:var(--md-sys-shape-corner-small)}.datepicker-content::-webkit-scrollbar-thumb{background:var(--scb-datepicker-outline-color, var(--md-sys-color-outline));border-radius:var(--md-sys-shape-corner-small);border:var(--scb-datepicker-design-scrollbar-thumb-border-width-medium) solid var(--scb-datepicker-panel-surface-color, var(--md-sys-color-surface))}.datepicker-content::-webkit-scrollbar-track{background:var(--scb-datepicker-panel-surface-color, var(--md-sys-color-surface));border-radius:var(--md-sys-shape-corner-small)}.popup{position:absolute;top:0;left:0;z-index:1}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--scb-datepicker-design-datepicker-header-gap-medium);padding-block-start:var(--scb-datepicker-design-header-padding-block-start-medium);padding-block-end:var(--scb-datepicker-design-datepicker-header-padding-block-end-medium);padding-inline:var(--scb-datepicker-design-header-padding-inline-medium);flex-wrap:wrap}.datepicker-footer{padding-block-start:var(--scb-datepicker-design-footer-padding-block-start-medium);padding-block-end:var(--scb-datepicker-design-footer-padding-block-end-medium);padding-inline:var(--scb-datepicker-design-footer-padding-inline-medium)}.datepicker-calendar{padding-inline:var(--scb-datepicker-design-calendar-padding-inline-medium)}table{width:100%;border-collapse:collapse;margin-bottom:var(--scb-datepicker-design-table-margin-block-end-medium)}th{color:var(--scb-datepicker-secondary-content-color, var(--md-sys-color-on-surface-variant, var(--n-50)));font-family:var(--scb-datepicker-design-datepicker-weekday-text-medium-font);font-size:var(--scb-datepicker-design-datepicker-weekday-text-medium-size);line-height:var(--scb-datepicker-design-datepicker-weekday-text-medium-line-height);font-weight:var(--scb-datepicker-design-datepicker-weekday-text-medium-weight);letter-spacing:var(--scb-datepicker-design-datepicker-weekday-text-medium-tracking);padding-bottom:var(--scb-datepicker-design-weekday-padding-block-end-medium)}td{text-align:center}.day:focus-within{outline:0}.day{position:relative;width:var(--scb-datepicker-design-day-cell-size-medium);height:var(--scb-datepicker-design-day-cell-size-medium);border-radius:var(--scb-datepicker-design-day-cell-radius-medium);border:0;background:0 0;font-family:var(--scb-datepicker-design-day-text-medium-font);font-size:var(--scb-datepicker-design-day-text-medium-size);line-height:var(--scb-datepicker-design-day-text-medium-line-height);font-weight:var(--scb-datepicker-design-day-text-medium-weight);letter-spacing:var(--scb-datepicker-design-day-text-medium-tracking);cursor:pointer;align-content:center}.day.selected{background:var(--scb-datepicker-selected-container-color, var(--md-sys-color-secondary-container));color:var(--scb-datepicker-selected-content-color, var(--md-sys-color-on-surface))}.time-field{padding-inline:var(--scb-datepicker-design-time-padding-inline-medium)}.time-label{display:flex;align-items:center;gap:var(--scb-datepicker-design-time-gap-medium);font-family:var(--scb-datepicker-design-time-text-medium-font);font-size:var(--scb-datepicker-design-time-text-medium-size);line-height:var(--scb-datepicker-design-time-text-medium-line-height);font-weight:var(--scb-datepicker-design-time-text-medium-weight);letter-spacing:var(--scb-datepicker-design-time-text-medium-tracking)}:host{--scb-datepicker-design-scrollbar-width-medium:var(--scb-datepicker-scrollbar-width, var(--spacing-4, 12px));--scb-datepicker-design-scrollbar-thumb-border-width-medium:var(--scb-datepicker-scrollbar-thumb-border-width, var(--spacing-2, 4px));--scb-datepicker-design-dropdown-selected-text-medium-font:var(--scb-datepicker-dropdown-selected-font, var(--scb-typography-label-medium-font, var(--md-sys-typescale-label-medium-font, var(--brand))));--scb-datepicker-design-dropdown-selected-text-medium-size:var(--scb-datepicker-dropdown-selected-size, var(--scb-typography-label-medium-size, var(--md-sys-typescale-label-medium-size, 16px)));--scb-datepicker-design-dropdown-selected-text-medium-line-height:var(--scb-datepicker-dropdown-selected-line-height, var(--scb-typography-label-medium-line-height, var(--md-sys-typescale-label-medium-line-height, 24px)));--scb-datepicker-design-dropdown-selected-text-medium-tracking:var(--scb-datepicker-dropdown-selected-tracking, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking, var(--tracking-03, -0.15px))));--scb-datepicker-design-dropdown-selected-text-medium-weight:var(--scb-datepicker-dropdown-selected-weight, var(--weight-medium, 500));--scb-datepicker-design-dropdown-selected-text-medium-letter-spacing:var(--scb-datepicker-dropdown-selected-letter-spacing, var(--scb-datepicker-dropdown-selected-tracking, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking, var(--tracking-03, -0.15px)))));--scb-datepicker-design-dropdown-selected-text-medium-font-weight:var(--scb-datepicker-dropdown-selected-font-weight, var(--scb-datepicker-dropdown-selected-weight, var(--weight-medium, 500)));--scb-datepicker-design-dropdown-selected-padding-block-medium:var(--scb-datepicker-dropdown-selected-padding-block, var(--spacing-2, 4px));--scb-datepicker-design-dropdown-selected-padding-inline-medium:var(--scb-datepicker-dropdown-selected-padding-inline, var(--spacing-3, 8px));--scb-datepicker-design-dropdown-selected-gap-medium:var(--scb-datepicker-dropdown-selected-gap, var(--spacing-3, 8px));--scb-datepicker-design-dropdown-selected-radius-medium:var(--scb-datepicker-dropdown-selected-radius, var(--radius-small, 8px));--scb-datepicker-design-navigation-icon-button-size-medium:var(--scb-datepicker-navigation-icon-button-size, medium);--scb-datepicker-design-dropdown-icon-medium:var(--scb-datepicker-dropdown-icon-size, var(--icon-size-medium, 24px));--scb-datepicker-design-selected-icon-medium:var(--scb-datepicker-selected-icon-size, var(--icon-size-medium, 24px));--scb-datepicker-design-dropdown-list-padding-block-medium:var(--scb-datepicker-dropdown-list-padding-block, var(--spacing-2, 4px));--scb-datepicker-design-option-height-medium:var(--scb-datepicker-dropdown-item-min-height, var(--scb-fields-option-height-medium, var(--scale-10, 40px)));--scb-datepicker-design-option-padding-block-medium:var(--scb-datepicker-dropdown-item-padding-block, var(--spacing-3, 8px));--scb-datepicker-design-option-padding-inline-medium:var(--scb-datepicker-dropdown-item-padding-inline, var(--scale-12, 56px));--scb-datepicker-design-option-selected-padding-inline-start-medium:var(--scb-datepicker-dropdown-item-selected-padding-inline-start, var(--spacing-5, 16px));--scb-datepicker-design-option-selected-gap-medium:var(--scb-datepicker-dropdown-item-selected-gap, var(--spacing-5, 16px));--scb-datepicker-design-datepicker-header-gap-medium:var(--scb-datepicker-header-gap, var(--spacing-7, 20px));--scb-datepicker-design-header-padding-block-start-medium:var(--scb-datepicker-header-padding-block-start, var(--spacing-7, 20px));--scb-datepicker-design-datepicker-header-padding-block-end-medium:var(--scb-datepicker-header-padding-block-end, var(--spacing-0, 0px));--scb-datepicker-design-header-padding-inline-medium:var(--scb-datepicker-header-padding-inline, var(--spacing-5, 16px));--scb-datepicker-design-footer-padding-block-start-medium:var(--scb-datepicker-footer-padding-block-start, var(--spacing-3, 8px));--scb-datepicker-design-footer-padding-inline-medium:var(--scb-datepicker-footer-padding-inline, var(--spacing-5, 16px));--scb-datepicker-design-footer-padding-block-end-medium:var(--scb-datepicker-footer-padding-block-end, var(--spacing-8, 24px));--scb-datepicker-design-calendar-padding-inline-medium:var(--scb-datepicker-calendar-padding-inline, var(--spacing-5, 16px));--scb-datepicker-design-table-margin-block-end-medium:var(--scb-datepicker-table-margin-block-end, var(--spacing-3, 8px));--scb-datepicker-design-weekday-padding-block-end-medium:var(--scb-datepicker-weekday-padding-block-end, var(--spacing-4, 12px));--scb-datepicker-design-day-cell-size-medium:var(--scb-datepicker-day-cell-size, var(--scale-10, 40px));--scb-datepicker-design-day-cell-radius-medium:var(--scb-datepicker-day-cell-radius, var(--radius-full, 1000px));--scb-datepicker-design-datepicker-weekday-text-medium-font:var(--scb-datepicker-weekday-font, var(--scb-typography-label-medium-font, var(--md-sys-typescale-label-medium-font, var(--brand))));--scb-datepicker-design-datepicker-weekday-text-medium-size:var(--scb-datepicker-weekday-size, var(--scb-typography-label-medium-size, var(--md-sys-typescale-label-medium-size, 16px)));--scb-datepicker-design-datepicker-weekday-text-medium-line-height:var(--scb-datepicker-weekday-line-height, var(--scb-typography-label-medium-line-height, var(--md-sys-typescale-label-medium-line-height, 24px)));--scb-datepicker-design-datepicker-weekday-text-medium-tracking:var(--scb-datepicker-weekday-tracking, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking, var(--tracking-03, -0.15px))));--scb-datepicker-design-datepicker-weekday-text-medium-weight:var(--scb-datepicker-weekday-weight, var(--scb-typography-label-medium-weight, var(--md-sys-typescale-label-medium-weight, var(--weight-semibold, 600))));--scb-datepicker-design-datepicker-weekday-text-medium-letter-spacing:var(--scb-datepicker-weekday-letter-spacing, var(--scb-datepicker-weekday-tracking, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking, var(--tracking-03, -0.15px)))));--scb-datepicker-design-datepicker-weekday-text-medium-font-weight:var(--scb-datepicker-weekday-font-weight, var(--scb-datepicker-weekday-weight, var(--scb-typography-label-medium-weight, var(--md-sys-typescale-label-medium-weight, var(--weight-semibold, 600)))));--scb-datepicker-design-day-text-medium-font:var(--scb-datepicker-day-font, var(--scb-typography-label-medium-font, var(--md-sys-typescale-label-medium-font, var(--brand))));--scb-datepicker-design-day-text-medium-size:var(--scb-datepicker-day-size, var(--scb-typography-label-medium-size, var(--md-sys-typescale-label-medium-size, 16px)));--scb-datepicker-design-day-text-medium-line-height:var(--scb-datepicker-day-line-height, var(--scb-typography-label-medium-line-height, var(--md-sys-typescale-label-medium-line-height, 24px)));--scb-datepicker-design-day-text-medium-tracking:var(--scb-datepicker-day-tracking, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking, var(--tracking-03, -0.15px))));--scb-datepicker-design-day-text-medium-weight:var(--scb-datepicker-day-weight, var(--scb-typography-label-medium-weight, var(--md-sys-typescale-label-medium-weight, var(--weight-semibold, 600))));--scb-datepicker-design-day-text-medium-letter-spacing:var(--scb-datepicker-day-letter-spacing, var(--scb-datepicker-day-tracking, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking, var(--tracking-03, -0.15px)))));--scb-datepicker-design-day-text-medium-font-weight:var(--scb-datepicker-day-font-weight, var(--scb-datepicker-day-weight, var(--scb-typography-label-medium-weight, var(--md-sys-typescale-label-medium-weight, var(--weight-semibold, 600)))));--scb-datepicker-design-time-text-medium-font:var(--scb-datepicker-time-label-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))));--scb-datepicker-design-time-text-medium-size:var(--scb-datepicker-time-label-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)));--scb-datepicker-design-time-text-medium-line-height:var(--scb-datepicker-time-label-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)));--scb-datepicker-design-time-text-medium-tracking:var(--scb-datepicker-time-label-tracking, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))));--scb-datepicker-design-time-text-medium-weight:var(--scb-datepicker-time-label-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))));--scb-datepicker-design-time-text-medium-letter-spacing:var(--scb-datepicker-time-label-letter-spacing, var(--scb-datepicker-time-label-tracking, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))));--scb-datepicker-design-time-text-medium-font-weight:var(--scb-datepicker-time-label-font-weight, var(--scb-datepicker-time-label-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))));--scb-datepicker-design-time-padding-inline-medium:var(--scb-datepicker-time-padding-inline, var(--spacing-8, 24px));--scb-datepicker-design-time-gap-medium:var(--scb-datepicker-time-gap, var(--spacing-3, 8px));--scb-datepicker-design-time-field-component-size-medium:var(--scb-datepicker-time-field-component-size, medium);--scb-datepicker-design-actions-button-size-medium:var(--scb-datepicker-close-button-size, medium);--scb-datepicker-design-surface-radius-medium:var(--scb-datepicker-popup-radius, var(--radius-small, 8px))}`],T);a([x()],f.prototype,"_currentDate",void 0);a([x()],f.prototype,"_selectedDate",void 0);a([x()],f.prototype,"_showMonthDropdown",void 0);a([x()],f.prototype,"_showYearDropdown",void 0);a([p({type:String})],f.prototype,"variant",void 0);a([p({type:String})],f.prototype,"lang",void 0);a([p({type:String})],f.prototype,"selectedValue",void 0);a([p({type:Boolean})],f.prototype,"open",void 0);a([x()],f.prototype,"_selectedHour",void 0);a([x()],f.prototype,"_selectedMinute",void 0);f=a([q("scb-datepicker")],f);var c,S,b=(c=new WeakSet,S=class extends P{constructor(){super(),N(this,c),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(B(),this._kbShouldShowRing=!0,this._inputFocused&&g(c,this,E).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&g(c,this,E).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const e=this._boundField;if(!e)return;const t=e;this.value=t instanceof HTMLInputElement&&t.type==="file"?t.files?.[0]?.name??"":t.value,g(c,this,L).call(this),g(c,this,u).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,g(c,this,E).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,g(c,this,E).call(this)},this.type="text",this.lang="sv",this.label="",this.supportingText="",this.helpText="",this.helpLabel="Visa hjälptext",this.clearLabel="Rensa fält",this.dateButtonLabel="Välj datum",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.accept="",this.multiple=!1,this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.size=W["scb-textfield"].size,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._customValidationMessage="",this._validationMessage="",this._hasValidationBeenReported=!1,this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._openDatepicker=()=>{this._showDatepicker=!0},this._onDatepickerClosed=()=>{this._showDatepicker=!1},this._onDateSelected=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}g(c,this,u).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())}_syncDensityForSize(){this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}_renderLabel(){const e=!!this.underLabel,t=o`
|
|
1
|
+
import{f as S,g as w,h as L,m as V,p as n,v as o,y as E}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import"../../vendor/icon.js";import"../../vendor/ripple.js";import{ensureFocusRingReady as F}from"../shared/lazy-focus-ring.js";import{componentSizeToken as T}from"../shared/component-size-token.js";import{t as q}from"../../vendor/component-defaults.js";import{t as r}from"../../vendor/decorate.js";import{t as l}from"../../vendor/assertClassBrand.js";import{t as M}from"../../vendor/classPrivateMethodInitSpec.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-tooltip/scb-tooltip.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,d,c){try{customElements.get(i)||e(i,d,c)}catch(b){var g=String(b||"");if(g.indexOf("already been used")===-1&&g.indexOf("NotSupportedError")===-1)throw b}}}}catch{}})();var s,u,a=(s=new WeakSet,u=class extends L{constructor(){super(),M(this,s),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(F(),this._kbShouldShowRing=!0,this._inputFocused&&l(s,this,x).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&l(s,this,x).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const e=this._boundField;if(!e)return;const i=e;this.value=i instanceof HTMLInputElement&&i.type==="file"?i.files?.[0]?.name??"":i.value,l(s,this,m).call(this),l(s,this,p).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(s,this,x).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,l(s,this,x).call(this)},this.type="text",this.lang="sv",this.label="",this.supportingText="",this.helpText="",this.helpLabel="Visa hjälptext",this.clearLabel="Rensa fält",this.dateButtonLabel="Välj datum",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.accept="",this.multiple=!1,this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.size=q["scb-textfield"].size,this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this._form=null,this._formSubmitHandler=null,this._formResetHandler=null,this._initialValue="",this._customValidationMessage="",this._validationMessage="",this._hasValidationBeenReported=!1,this._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},this._openDatepicker=()=>{this._showDatepicker=!0},this._onDatepickerClosed=()=>{this._showDatepicker=!1},this._onDateSelected=e=>{if(this.value=e.detail.value,this._showDatepicker=!1,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}l(s,this,p).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())}_syncDensityForSize(){this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}_renderLabel(){const e=!!this.underLabel,i=o`
|
|
144
2
|
<label
|
|
145
3
|
class="scb-textfield-label ${!e&&!this.helpText?"scb-textfield-label--without-supporting":""}"
|
|
146
4
|
for="${this._inputId}"
|
|
@@ -149,7 +7,7 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
149
7
|
</label>
|
|
150
8
|
`;return this.helpText?o`
|
|
151
9
|
<div class="scb-textfield-label-row ${e?"":"scb-textfield-label-row--without-supporting"}">
|
|
152
|
-
${
|
|
10
|
+
${i}
|
|
153
11
|
<scb-tooltip
|
|
154
12
|
class="scb-textfield-help-tooltip"
|
|
155
13
|
supporting-text=${this.helpText}
|
|
@@ -160,16 +18,16 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
160
18
|
<scb-icon-button
|
|
161
19
|
class="scb-textfield-help-button"
|
|
162
20
|
icon="help"
|
|
163
|
-
size=${
|
|
21
|
+
size=${T(this,`--scb-textfield-design-help-icon-button-size-${this.size}`,["tiny","extra-small","small","medium","large"],"tiny")}
|
|
164
22
|
aria-label=${this._localizedDefaultLabel(this.helpLabel,"Visa hjälptext","Show help text")}
|
|
165
23
|
></scb-icon-button>
|
|
166
24
|
</scb-tooltip>
|
|
167
25
|
</div>
|
|
168
|
-
`:
|
|
26
|
+
`:i}_renderSupportingText(){return this.underLabel?o`
|
|
169
27
|
<span class="scb-textfield-supporting-text" id="${this._inputId}-supporting-text">
|
|
170
28
|
${this.underLabel}
|
|
171
29
|
</span>
|
|
172
|
-
`:null}render(){const e=this.leadingIcon?o`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,
|
|
30
|
+
`:null}render(){const e=this.leadingIcon?o`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,i=this.error?o`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this._validationMessage||this.errorText||this._invalidInputMessage():this.supportingText,this.value=this.value||"";const d=this.underLabel?`${this._inputId}-supporting-text`:void 0,c=this._renderLabel(),g=this._renderSupportingText(),b=this.type==="search"&&this.value?o`
|
|
173
31
|
<button
|
|
174
32
|
type="button"
|
|
175
33
|
class="scb-textfield-clear"
|
|
@@ -204,8 +62,8 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
204
62
|
</svg>
|
|
205
63
|
</button>
|
|
206
64
|
`:null;return this.type==="textarea"?o`
|
|
207
|
-
${
|
|
208
|
-
${
|
|
65
|
+
${c}
|
|
66
|
+
${g}
|
|
209
67
|
<div class="scb-textfield-wrapper">
|
|
210
68
|
<div class="ripple-wrapper">
|
|
211
69
|
<textarea
|
|
@@ -216,15 +74,15 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
216
74
|
id="${this._inputId}"
|
|
217
75
|
?required=${this.required}
|
|
218
76
|
aria-invalid=${this.error?"true":"false"}
|
|
219
|
-
aria-describedby=${
|
|
77
|
+
aria-describedby=${d}
|
|
220
78
|
></textarea>
|
|
221
79
|
<md-ripple></md-ripple>
|
|
222
80
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
223
81
|
</div>
|
|
224
82
|
</div>
|
|
225
83
|
`:this.type==="date"?o`
|
|
226
|
-
${
|
|
227
|
-
${
|
|
84
|
+
${c}
|
|
85
|
+
${g}
|
|
228
86
|
<div class="scb-textfield-wrapper">
|
|
229
87
|
${e}
|
|
230
88
|
<div class="ripple-wrapper">
|
|
@@ -237,7 +95,7 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
237
95
|
?disabled=${this.disabled}
|
|
238
96
|
?required=${this.required}
|
|
239
97
|
aria-invalid=${this.error?"true":"false"}
|
|
240
|
-
aria-describedby=${
|
|
98
|
+
aria-describedby=${d}
|
|
241
99
|
readonly
|
|
242
100
|
@focus=${this._openDatepicker}
|
|
243
101
|
@click=${this._openDatepicker}
|
|
@@ -245,7 +103,7 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
245
103
|
<md-ripple></md-ripple>
|
|
246
104
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
247
105
|
</div>
|
|
248
|
-
${this.error?
|
|
106
|
+
${this.error?i:o`
|
|
249
107
|
<scb-icon-button
|
|
250
108
|
class="scb-textfield-datepicker-button"
|
|
251
109
|
icon="calendar_today"
|
|
@@ -263,8 +121,8 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
263
121
|
></scb-datepicker>
|
|
264
122
|
</div>
|
|
265
123
|
`:this.type==="datetime-local"?o`
|
|
266
|
-
${
|
|
267
|
-
${
|
|
124
|
+
${c}
|
|
125
|
+
${g}
|
|
268
126
|
<div class="scb-textfield-wrapper" style="position:relative;">
|
|
269
127
|
${e}
|
|
270
128
|
<div class="ripple-wrapper">
|
|
@@ -277,7 +135,7 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
277
135
|
?disabled=${this.disabled}
|
|
278
136
|
?required=${this.required}
|
|
279
137
|
aria-invalid=${this.error?"true":"false"}
|
|
280
|
-
aria-describedby=${
|
|
138
|
+
aria-describedby=${d}
|
|
281
139
|
readonly
|
|
282
140
|
@focus=${this._openDatepicker}
|
|
283
141
|
@click=${this._openDatepicker}
|
|
@@ -287,7 +145,7 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
287
145
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
288
146
|
</div>
|
|
289
147
|
|
|
290
|
-
${this.error?
|
|
148
|
+
${this.error?i:o`
|
|
291
149
|
<scb-icon-button
|
|
292
150
|
class="scb-textfield-datepicker-button"
|
|
293
151
|
icon="calendar_today"
|
|
@@ -306,8 +164,8 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
306
164
|
></scb-datepicker>
|
|
307
165
|
</div>
|
|
308
166
|
`:this.type==="time"?o`
|
|
309
|
-
${
|
|
310
|
-
${
|
|
167
|
+
${c}
|
|
168
|
+
${g}
|
|
311
169
|
<div class="scb-textfield-wrapper">
|
|
312
170
|
${e}
|
|
313
171
|
<div class="ripple-wrapper">
|
|
@@ -320,17 +178,17 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
320
178
|
?disabled=${this.disabled}
|
|
321
179
|
?required=${this.required}
|
|
322
180
|
aria-invalid=${this.error?"true":"false"}
|
|
323
|
-
aria-describedby=${
|
|
324
|
-
@input=${
|
|
181
|
+
aria-describedby=${d}
|
|
182
|
+
@input=${f=>{const v=f.target;if(this.value=v.value,this._internals){const y=this.disabled?null:this.value;this._internals.setFormValue(y)}l(s,this,p).call(this),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0}))}}
|
|
325
183
|
/>
|
|
326
|
-
${
|
|
184
|
+
${i}
|
|
327
185
|
<md-ripple></md-ripple>
|
|
328
186
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
329
187
|
</div>
|
|
330
188
|
</div>
|
|
331
189
|
`:this.type==="file"?o`
|
|
332
|
-
${
|
|
333
|
-
${
|
|
190
|
+
${c}
|
|
191
|
+
${g}
|
|
334
192
|
<div class="scb-textfield-wrapper">
|
|
335
193
|
${e}
|
|
336
194
|
<div class="ripple-wrapper">
|
|
@@ -339,21 +197,21 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
339
197
|
type="file"
|
|
340
198
|
name=${this.name}
|
|
341
199
|
id=${this._inputId}
|
|
342
|
-
accept=${this.accept||
|
|
200
|
+
accept=${this.accept||w}
|
|
343
201
|
?multiple=${this.multiple}
|
|
344
202
|
?disabled=${this.disabled}
|
|
345
203
|
?required=${this.required}
|
|
346
204
|
aria-invalid=${this.error?"true":"false"}
|
|
347
|
-
aria-describedby=${
|
|
205
|
+
aria-describedby=${d}
|
|
348
206
|
/>
|
|
349
|
-
${
|
|
207
|
+
${i}
|
|
350
208
|
<md-ripple></md-ripple>
|
|
351
209
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
352
210
|
</div>
|
|
353
211
|
</div>
|
|
354
212
|
`:o`
|
|
355
|
-
${
|
|
356
|
-
${
|
|
213
|
+
${c}
|
|
214
|
+
${g}
|
|
357
215
|
<div class="scb-textfield-wrapper">
|
|
358
216
|
${e}
|
|
359
217
|
<div class="ripple-wrapper">
|
|
@@ -365,17 +223,17 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
365
223
|
id="${this._inputId}"
|
|
366
224
|
?disabled=${this.disabled}
|
|
367
225
|
?required=${this.required}
|
|
368
|
-
pattern=${this.pattern||
|
|
226
|
+
pattern=${this.pattern||w}
|
|
369
227
|
aria-invalid=${this.error?"true":"false"}
|
|
370
|
-
aria-describedby=${
|
|
228
|
+
aria-describedby=${d}
|
|
371
229
|
/>
|
|
372
|
-
${
|
|
373
|
-
${
|
|
230
|
+
${b}
|
|
231
|
+
${i}
|
|
374
232
|
<md-ripple></md-ripple>
|
|
375
233
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
376
234
|
</div>
|
|
377
235
|
</div>
|
|
378
|
-
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,
|
|
236
|
+
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,l(s,this,m).call(this),l(s,this,z).call(this),l(s,this,_).call(this)}updated(e){super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),e.has("size")&&this._syncDensityForSize(),e.has("lang")&&this._hasValidationBeenReported&&l(s,this,p).call(this,!1),this._internals&&(e.has("value")||e.has("disabled")||e.has("multiple"))&&l(s,this,m).call(this),e.has("type")&&(l(s,this,z).call(this),this._hasRenderedOnce&&l(s,this,C).call(this)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&l(s,this,_).call(this),this._hasRenderedOnce=!0}formDisabledCallback(e){this.disabled=e,e&&(this._hasValidationBeenReported=!1)}connectedCallback(){super.connectedCallback(),this._syncDensityForSize(),this._inputId=this.id||`scb-textfield-${Math.random().toString(36).substr(2,9)}`,this._formSubmitHandler=e=>{this.reportValidity()||(e.preventDefault(),e.stopPropagation())},this._form=this.closest("form"),this._form&&(this._form.addEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler=()=>this.formResetCallback(),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(s,this,k).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){return this._hasValidationBeenReported=!0,l(s,this,p).call(this,!0)}checkValidity(){return l(s,this,p).call(this,!1)}setCustomValidity(e){this._customValidationMessage=String(e??""),l(s,this,p).call(this,!1)}get form(){return this._internals?.form??this._form}get validity(){return this._internals?.validity??this._boundField?.validity}get validationMessage(){return this._internals?.validationMessage||this._validationMessage||this._boundField?.validationMessage||""}get willValidate(){return this._internals?.willValidate??!this.disabled}get labels(){return this._internals?.labels}get files(){return this.type!=="file"?null:this.shadowRoot?.querySelector('input[type="file"]')?.files??null}formResetCallback(){this.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=e instanceof HTMLInputElement&&e.type==="file"?"":this._initialValue),this.error=!1,this._hasValidationBeenReported=!1,l(s,this,m).call(this),l(s,this,p).call(this,!1)}_onClearClick(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i),this._internals.setValidity({})}this.error=!1,e.setCustomValidity(""),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("onValueChanged",{detail:{value:this.value},bubbles:!0,composed:!0})),e.focus()}}get _resolvedLang(){return String(this.lang??"").trim().toLowerCase().split(/[-_]/,1)[0]==="en"?"en":"sv"}_localizedDefaultLabel(e,i,d){return this._resolvedLang==="en"&&e===i?d:e}_invalidInputMessage(){return this._resolvedLang==="en"?"Invalid input.":"Ogiltig inmatning."}_requiredMessage(){return this._resolvedLang==="en"?"Fill in this field.":"Fyll i det här fältet."}},u.formAssociated=!0,u.styles=[E`:host{--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-medium-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-medium-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-medium-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-medium-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-medium-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-medium-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-medium-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-medium-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-medium-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-medium-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-medium-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-medium-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-medium-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-medium-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-medium-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-medium-font-weight, var(--scb-fields-option-text-medium-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-medium-letter-spacing, var(--scb-fields-option-text-medium-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-medium-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-medium-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-medium-font, var(--scb-fields-option-text-font));--scb-textfield-number-max-width:280px;--scb-textfield-text-max-width:400px;--scb-textfield-search-max-width:600px;--scb-textfield-email-max-width:400px;--scb-textfield-password-max-width:400px;--scb-textfield-tel-max-width:400px;--scb-textfield-url-max-width:400px;--scb-textfield-textarea-max-width:600px;font-family:var(--brand-font);color:var(--scb-fields-content-color, var(--md-sys-color-on-surface));margin-block-start:var(--scb-textfield-spacing-block-start, 0);margin-block-end:var(--scb-textfield-spacing-block-end, 0);margin-inline-start:var(--scb-textfield-spacing-inline-start, 0);margin-inline-end:var(--scb-textfield-spacing-inline-end, 0);-webkit-tap-highlight-color:transparent;--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-medium);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-medium);--scb-textfield-min-height:var(--scb-textfield-design-height-medium);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-medium);--scb-textfield-font-family:var(--scb-fields-text-font-current, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font)));--scb-textfield-font-size:var(--scb-fields-text-size-current, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size)));--scb-textfield-line-height:var(--scb-fields-text-line-height-current, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height)));--scb-textfield-letter-spacing:var(--scb-fields-text-letter-spacing-current, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking)));--scb-textfield-font-weight:var(--scb-fields-text-font-weight-current, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight)));--scb-textfield-label-font-family:var(--scb-fields-label-font-current, var(--scb-typography-label-medium-font, var(--md-sys-typescale-label-medium-font)));--scb-textfield-label-font-size:var(--scb-fields-label-size-current, var(--scb-typography-label-medium-size, var(--md-sys-typescale-label-medium-size)));--scb-textfield-label-line-height:var(--scb-fields-label-line-height-current, var(--scb-typography-label-medium-line-height, var(--md-sys-typescale-label-medium-line-height)));--scb-textfield-label-letter-spacing:var(--scb-fields-label-letter-spacing-current, var(--scb-typography-label-medium-tracking, var(--md-sys-typescale-label-medium-tracking)));--scb-textfield-label-font-weight:var(--scb-fields-label-font-weight-current, var(--scb-typography-label-medium-weight, var(--md-sys-typescale-label-medium-weight, var(--weight-semibold))));--scb-textfield-supporting-font-family:var(--scb-fields-supporting-font-current, var(--scb-typography-body-medium-font, var(--md-sys-typescale-body-medium-font)));--scb-textfield-supporting-font-size:var(--scb-fields-supporting-size-current, var(--scb-typography-body-medium-size, var(--md-sys-typescale-body-medium-size)));--scb-textfield-supporting-line-height:var(--scb-fields-supporting-line-height-current, var(--scb-typography-body-medium-line-height, var(--md-sys-typescale-body-medium-line-height)));--scb-textfield-supporting-letter-spacing:var(--scb-fields-supporting-letter-spacing-current, var(--scb-typography-body-medium-tracking, var(--md-sys-typescale-body-medium-tracking)));--scb-textfield-supporting-font-weight:var(--scb-fields-supporting-font-weight-current, var(--scb-typography-body-medium-weight, var(--md-sys-typescale-body-medium-weight, var(--weight-regular))));--scb-textfield-label-gap:var(--scb-textfield-design-field-label-gap);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-medium);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-medium);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-medium);--scb-textfield-leading-padding:calc(
|
|
379
237
|
var(--scb-textfield-leading-inset) +
|
|
380
238
|
var(--scb-textfield-leading-icon-size) +
|
|
381
239
|
var(--scb-textfield-leading-gap)
|
|
@@ -383,4 +241,4 @@ import{f as x,g as F,h as P,m as q,p,v as o,y as H}from"../../vendor/vendor.js";
|
|
|
383
241
|
var(--scb-textfield-trailing-inset) +
|
|
384
242
|
var(--scb-textfield-trailing-action-size) +
|
|
385
243
|
var(--spacing-2)
|
|
386
|
-
)}:host([size='large']){--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-large-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-large-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-large-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-large-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-large-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-large-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-large-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-large-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-large-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-large-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-large-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-large-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-large-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-large-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-large-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-large-font-weight, var(--scb-fields-option-text-large-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-large-letter-spacing, var(--scb-fields-option-text-large-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-large-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-large-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-large-font, var(--scb-fields-option-text-font));--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-large);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-large);--scb-textfield-min-height:var(--scb-textfield-design-height-large);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-large);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-large);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-large);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-large);--scb-textfield-trailing-inset:var(--scb-textfield-design-icon-inset-large);--scb-textfield-trailing-icon-size:var(--scb-textfield-design-icon-large);--scb-textfield-trailing-gap:var(--scb-textfield-design-trailing-gap-large);--scb-textfield-trailing-action-size:var(--scb-textfield-design-height-large)}:host([size='medium']){--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-medium-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-medium-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-medium-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-medium-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-medium-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-medium-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-medium-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-medium-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-medium-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-medium-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-medium-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-medium-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-medium-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-medium-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-medium-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-medium-font-weight, var(--scb-fields-option-text-medium-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-medium-letter-spacing, var(--scb-fields-option-text-medium-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-medium-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-medium-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-medium-font, var(--scb-fields-option-text-font));--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-medium);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-medium);--scb-textfield-min-height:var(--scb-textfield-design-height-medium);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-medium);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-medium);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-medium);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-medium);--scb-textfield-trailing-inset:var(--scb-textfield-design-icon-inset-medium);--scb-textfield-trailing-icon-size:var(--scb-textfield-design-icon-medium);--scb-textfield-trailing-gap:var(--scb-textfield-design-trailing-gap-medium);--scb-textfield-trailing-action-size:var(--scb-textfield-design-height-medium)}:host([size='small']){--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-small-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-small-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-small-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-small-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-small-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-small-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-small-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-small-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-small-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-small-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-small-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-small-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-small-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-small-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-small-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-small-font-weight, var(--scb-fields-option-text-small-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-small-letter-spacing, var(--scb-fields-option-text-small-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-small-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-small-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-small-font, var(--scb-fields-option-text-font));--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-small);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-small);--scb-textfield-min-height:var(--scb-textfield-design-height-small);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-small);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-small);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-small);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-small);--scb-textfield-trailing-inset:var(--scb-textfield-design-icon-inset-small);--scb-textfield-trailing-icon-size:var(--scb-textfield-design-icon-small);--scb-textfield-trailing-gap:var(--scb-textfield-design-trailing-gap-small);--scb-textfield-trailing-action-size:var(--scb-textfield-design-height-small)}:host([type='number']){--scb-textfield-max-width:var(--scb-textfield-number-max-width)}:host([type='datetime-local']),:host([type='text']){--scb-textfield-max-width:var(--scb-textfield-text-max-width)}:host([type='search']){--scb-textfield-max-width:var(--scb-textfield-search-max-width)}:host([type='email']){--scb-textfield-max-width:var(--scb-textfield-email-max-width)}:host([type='password']){--scb-textfield-max-width:var(--scb-textfield-password-max-width)}:host([type='tel']){--scb-textfield-max-width:var(--scb-textfield-tel-max-width)}:host([type='url']){--scb-textfield-max-width:var(--scb-textfield-url-max-width)}:host([type='textarea']){--scb-textfield-max-width:var(--scb-textfield-textarea-max-width)}:host([type='date']),:host([type='time']){--scb-textfield-max-width:var(--scb-textfield-text-max-width)}input[type=time]::-webkit-calendar-picker-indicator{display:none;background:0 0}:host{display:flex;flex-direction:column;max-width:var(--scb-textfield-max-width);--md-focus-ring-color:var(--scb-fields-focus-color, var(--md-sys-color-primary))}:host([error]) .scb-textfield-supporting-text{color:var(--scb-fields-error-color, var(--md-sys-color-error))}:host([error]) .scb-textfield{border-color:var(--scb-fields-error-color, var(--md-sys-color-error))}:host([error]) .scb-textfield:focus-visible{border-color:var(--scb-fields-error-color, var(--md-sys-color-error));box-shadow:inset 0 0 0 2px var(--scb-fields-error-color, var(--md-sys-color-error))}:host([disabled]){opacity:.38;cursor:default}.scb-textfield-label{display:block;font-family:var(--scb-textfield-label-font-family);font-size:var(--scb-textfield-label-font-size);font-weight:var(--scb-textfield-label-font-weight);line-height:var(--scb-textfield-label-line-height);letter-spacing:var(--scb-textfield-label-letter-spacing)}.scb-textfield-label-row{display:flex;align-items:center;gap:var(--scb-textfield-design-label-help-gap)}.scb-textfield-label-row--without-supporting{margin-bottom:var(--scb-textfield-label-gap)}.scb-textfield-help-tooltip{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}.scb-textfield-help-button{--scb-icon-button-icon-size:var(--scb-textfield-design-help-icon-medium)}:host([size='small']) .scb-textfield-help-button{--scb-icon-button-icon-size:var(--scb-textfield-design-help-icon-small)}:host([size='large']) .scb-textfield-help-button{--scb-icon-button-icon-size:var(--scb-textfield-design-help-icon-large)}.scb-textfield-label--without-supporting,.scb-textfield-supporting-text{margin-bottom:var(--scb-textfield-label-gap)}.scb-textfield-supporting-text{display:block;font-family:var(--scb-textfield-supporting-font-family);font-size:var(--scb-textfield-supporting-font-size);line-height:var(--scb-textfield-supporting-line-height);font-weight:var(--scb-textfield-supporting-font-weight);letter-spacing:var(--scb-textfield-supporting-letter-spacing);color:var(--scb-fields-secondary-content-color, var(--md-sys-color-on-surface-variant))}.scb-textfield{padding:var(--scb-textfield-padding-y) var(--scb-textfield-padding-x);block-size:var(--scb-textfield-min-height);min-height:var(--scb-textfield-min-height);border:1px solid var(--scb-fields-outline-color, var(--md-sys-color-outline));border-radius:var(--scb-textfield-radius);font-size:var(--scb-textfield-font-size);font-family:var(--scb-textfield-font-family);line-height:var(--scb-textfield-line-height);font-weight:var(--scb-textfield-font-weight);letter-spacing:var(--scb-textfield-letter-spacing);width:100%;box-sizing:border-box;background-color:var(--scb-textfield-surface-color, var(--scb-fields-surface-color, var(--md-sys-color-surface)));color:var(--scb-fields-content-color, var(--md-sys-color-on-surface));position:relative;z-index:1}:host([type='date']) .scb-textfield,:host([type='search']) .scb-textfield{padding-right:var(--scb-textfield-trailing-reserved)}md-icon+.ripple-wrapper>.scb-textfield{padding-left:var(--scb-textfield-leading-padding)}.scb-textfield-icon{position:absolute;left:var(--scb-textfield-leading-inset);top:50%;transform:translateY(-50%);pointer-events:none;font-size:var(--scb-textfield-leading-icon-size);z-index:2}.scb-textfield:focus-visible{outline:0;border-color:var(--scb-fields-focus-color, var(--md-sys-color-primary));box-shadow:inset 0 0 0 2px var(--scb-fields-focus-color, var(--md-sys-color-primary));border:1px solid var(--scb-fields-focus-color, var(--md-sys-color-primary))}.ripple-wrapper,.scb-textfield-wrapper{position:relative;width:100%}md-focus-ring.input-ring,md-ripple{border-radius:var(--scb-textfield-radius);position:absolute;inset:0;pointer-events:none}md-focus-ring.input-ring{display:none;z-index:3}.ripple-wrapper[data-kb-focus=true] md-focus-ring.input-ring{display:block}md-ripple{z-index:0;--md-ripple-hover-color:transparent;--md-ripple-hover-opacity:0}input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}.scb-textfield-clear,.scb-textfield-error-icon{position:absolute;right:var(--scb-textfield-trailing-inset);top:50%;transform:translateY(-50%);z-index:2}.scb-textfield-error-icon{pointer-events:none;font-size:var(--scb-textfield-trailing-icon-size);color:var(--scb-fields-error-color, var(--md-sys-color-error))}.scb-textfield.has-error-icon{padding-right:calc(var(--scb-textfield-trailing-inset) + var(--scb-textfield-trailing-icon-size) + var(--scb-textfield-trailing-gap))}.scb-textfield-clear{width:var(--scb-textfield-trailing-icon-size);height:var(--scb-textfield-trailing-icon-size);padding:0;margin:0;border:0;background:0 0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--scb-fields-content-color, var(--md-sys-color-on-surface))}:host([error]) .scb-textfield-clear{right:calc(var(--scb-textfield-trailing-inset) + var(--scb-textfield-trailing-icon-size) + var(--spacing-2))}.scb-textfield-clear:focus-visible{outline:2px solid var(--scb-fields-focus-color, var(--md-sys-color-primary));outline-offset:2px}.scb-textfield-clear svg{width:100%;height:100%;display:block}.scb-textfield-datepicker-button{position:absolute;right:var(--scb-textfield-trailing-inset);top:50%;transform:translateY(-50%);z-index:4}:host{--scb-textfield-design-height-small:var(--scb-fields-control-size-small, var(--scb-control-size-small, var(--scale-08, 32px)));--scb-textfield-design-height-medium:var(--scb-fields-control-size-medium, var(--scb-control-size-medium, var(--scale-10, 40px)));--scb-textfield-design-height-large:var(--scb-fields-control-size-large, var(--scb-control-size-large, var(--scale-12, 56px)));--scb-textfield-design-text-small-font:var(--scb-fields-text-small-font, var(--scb-fields-text-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-text-small-size:var(--scb-fields-text-small-size, var(--scb-fields-text-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-text-small-line-height:var(--scb-fields-text-small-line-height, var(--scb-fields-text-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-text-small-tracking:var(--scb-fields-text-small-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-text-small-weight:var(--scb-fields-text-small-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-text-small-letter-spacing:var(--scb-fields-text-small-letter-spacing, var(--scb-fields-text-small-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-text-small-font-weight:var(--scb-fields-text-small-font-weight, var(--scb-fields-text-small-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-text-medium-font:var(--scb-fields-text-medium-font, var(--scb-fields-text-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-text-medium-size:var(--scb-fields-text-medium-size, var(--scb-fields-text-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-text-medium-line-height:var(--scb-fields-text-medium-line-height, var(--scb-fields-text-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-text-medium-tracking:var(--scb-fields-text-medium-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-text-medium-weight:var(--scb-fields-text-medium-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-text-medium-letter-spacing:var(--scb-fields-text-medium-letter-spacing, var(--scb-fields-text-medium-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-text-medium-font-weight:var(--scb-fields-text-medium-font-weight, var(--scb-fields-text-medium-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-text-large-font:var(--scb-fields-text-large-font, var(--scb-fields-text-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-text-large-size:var(--scb-fields-text-large-size, var(--scb-fields-text-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-text-large-line-height:var(--scb-fields-text-large-line-height, var(--scb-fields-text-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-text-large-tracking:var(--scb-fields-text-large-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-text-large-weight:var(--scb-fields-text-large-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-text-large-letter-spacing:var(--scb-fields-text-large-letter-spacing, var(--scb-fields-text-large-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-text-large-font-weight:var(--scb-fields-text-large-font-weight, var(--scb-fields-text-large-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-label-small-font:var(--scb-fields-label-small-font, var(--scb-fields-label-font, var(--scb-form-question-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))))));--scb-textfield-design-label-small-size:var(--scb-fields-label-small-size, var(--scb-fields-label-size, var(--scb-form-question-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)))));--scb-textfield-design-label-small-line-height:var(--scb-fields-label-small-line-height, var(--scb-fields-label-line-height, var(--scb-form-question-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)))));--scb-textfield-design-label-small-tracking:var(--scb-fields-label-small-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-label-small-weight:var(--scb-fields-label-small-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))))));--scb-textfield-design-label-small-letter-spacing:var(--scb-fields-label-small-letter-spacing, var(--scb-fields-label-small-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-label-small-font-weight:var(--scb-fields-label-small-font-weight, var(--scb-fields-label-small-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))))));--scb-textfield-design-label-medium-font:var(--scb-fields-label-medium-font, var(--scb-fields-label-font, var(--scb-form-question-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))))));--scb-textfield-design-label-medium-size:var(--scb-fields-label-medium-size, var(--scb-fields-label-size, var(--scb-form-question-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)))));--scb-textfield-design-label-medium-line-height:var(--scb-fields-label-medium-line-height, var(--scb-fields-label-line-height, var(--scb-form-question-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)))));--scb-textfield-design-label-medium-tracking:var(--scb-fields-label-medium-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-label-medium-weight:var(--scb-fields-label-medium-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))))));--scb-textfield-design-label-medium-letter-spacing:var(--scb-fields-label-medium-letter-spacing, var(--scb-fields-label-medium-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-label-medium-font-weight:var(--scb-fields-label-medium-font-weight, var(--scb-fields-label-medium-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))))));--scb-textfield-design-label-large-font:var(--scb-fields-label-large-font, var(--scb-fields-label-font, var(--scb-form-question-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))))));--scb-textfield-design-label-large-size:var(--scb-fields-label-large-size, var(--scb-fields-label-size, var(--scb-form-question-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)))));--scb-textfield-design-label-large-line-height:var(--scb-fields-label-large-line-height, var(--scb-fields-label-line-height, var(--scb-form-question-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)))));--scb-textfield-design-label-large-tracking:var(--scb-fields-label-large-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-label-large-weight:var(--scb-fields-label-large-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))))));--scb-textfield-design-label-large-letter-spacing:var(--scb-fields-label-large-letter-spacing, var(--scb-fields-label-large-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-label-large-font-weight:var(--scb-fields-label-large-font-weight, var(--scb-fields-label-large-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))))));--scb-textfield-design-supporting-small-font:var(--scb-fields-supporting-small-font, var(--scb-fields-supporting-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-supporting-small-size:var(--scb-fields-supporting-small-size, var(--scb-fields-supporting-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-supporting-small-line-height:var(--scb-fields-supporting-small-line-height, var(--scb-fields-supporting-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-supporting-small-tracking:var(--scb-fields-supporting-small-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-supporting-small-weight:var(--scb-fields-supporting-small-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-supporting-small-letter-spacing:var(--scb-fields-supporting-small-letter-spacing, var(--scb-fields-supporting-small-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-supporting-small-font-weight:var(--scb-fields-supporting-small-font-weight, var(--scb-fields-supporting-small-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-supporting-medium-font:var(--scb-fields-supporting-medium-font, var(--scb-fields-supporting-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-supporting-medium-size:var(--scb-fields-supporting-medium-size, var(--scb-fields-supporting-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-supporting-medium-line-height:var(--scb-fields-supporting-medium-line-height, var(--scb-fields-supporting-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-supporting-medium-tracking:var(--scb-fields-supporting-medium-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-supporting-medium-weight:var(--scb-fields-supporting-medium-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-supporting-medium-letter-spacing:var(--scb-fields-supporting-medium-letter-spacing, var(--scb-fields-supporting-medium-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-supporting-medium-font-weight:var(--scb-fields-supporting-medium-font-weight, var(--scb-fields-supporting-medium-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-supporting-large-font:var(--scb-fields-supporting-large-font, var(--scb-fields-supporting-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-supporting-large-size:var(--scb-fields-supporting-large-size, var(--scb-fields-supporting-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-supporting-large-line-height:var(--scb-fields-supporting-large-line-height, var(--scb-fields-supporting-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-supporting-large-tracking:var(--scb-fields-supporting-large-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-supporting-large-weight:var(--scb-fields-supporting-large-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-supporting-large-letter-spacing:var(--scb-fields-supporting-large-letter-spacing, var(--scb-fields-supporting-large-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-supporting-large-font-weight:var(--scb-fields-supporting-large-font-weight, var(--scb-fields-supporting-large-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-icon-small:var(--scb-fields-icon-size-small, var(--icon-size-small, 20px));--scb-textfield-design-icon-medium:var(--scb-fields-icon-size-medium, var(--icon-size-small, 20px));--scb-textfield-design-icon-large:var(--scb-fields-icon-size-large, var(--icon-size-medium, 24px));--scb-textfield-design-help-icon-button-size-small:var(--scb-fields-help-icon-button-size-small, tiny);--scb-textfield-design-help-icon-button-size-medium:var(--scb-fields-help-icon-button-size-medium, tiny);--scb-textfield-design-help-icon-button-size-large:var(--scb-fields-help-icon-button-size-large, tiny);--scb-textfield-design-help-icon-small:var(--scb-fields-help-icon-size-small, var(--icon-size-extra-small, 16px));--scb-textfield-design-help-icon-medium:var(--scb-fields-help-icon-size-medium, var(--icon-size-extra-small, 16px));--scb-textfield-design-help-icon-large:var(--scb-fields-help-icon-size-large, var(--icon-size-extra-small, 16px));--scb-textfield-design-field-label-gap-small:var(--scb-fields-label-gap, var(--spacing-3, 8px));--scb-textfield-design-field-label-gap-medium:var(--scb-fields-label-gap, var(--spacing-3, 8px));--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-medium);--scb-textfield-design-field-label-gap-large:var(--scb-fields-label-gap, var(--spacing-3, 8px));--scb-textfield-design-label-help-gap-small:var(--scb-fields-label-help-gap, var(--spacing-1, 2px));--scb-textfield-design-label-help-gap-medium:var(--scb-fields-label-help-gap, var(--spacing-1, 2px));--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-medium);--scb-textfield-design-label-help-gap-large:var(--scb-fields-label-help-gap, var(--spacing-1, 2px));--scb-textfield-design-icon-inset-small:var(--scb-fields-icon-inset-small, var(--spacing-3, 8px));--scb-textfield-design-icon-inset-medium:var(--scb-fields-icon-inset-medium, var(--spacing-3, 8px));--scb-textfield-design-icon-inset-large:var(--scb-fields-icon-inset-large, var(--spacing-4, 12px));--scb-textfield-design-leading-gap-small:var(--scb-fields-leading-gap-small, var(--spacing-5, 16px));--scb-textfield-design-leading-gap-medium:var(--scb-fields-leading-gap-medium, var(--spacing-5, 16px));--scb-textfield-design-leading-gap-large:var(--scb-fields-leading-gap-large, var(--spacing-5, 16px));--scb-textfield-design-trailing-gap-small:var(--scb-fields-trailing-gap-small, var(--spacing-3, 8px));--scb-textfield-design-trailing-gap-medium:var(--scb-fields-trailing-gap-medium, var(--spacing-3, 8px));--scb-textfield-design-trailing-gap-large:var(--scb-fields-trailing-gap-large, var(--spacing-3, 8px));--scb-textfield-design-surface-radius-small:var(--scb-fields-surface-radius-small, var(--radius-small, 8px));--scb-textfield-design-surface-radius-medium:var(--scb-fields-surface-radius-medium, var(--radius-small, 8px));--scb-textfield-design-surface-radius-large:var(--scb-fields-surface-radius-large, var(--radius-small, 8px));--scb-textfield-design-padding-inline-small:var(--scb-fields-padding-inline-small, var(--spacing-4, 12px));--scb-textfield-design-padding-inline-medium:var(--scb-fields-padding-inline-medium, var(--spacing-4, 12px));--scb-textfield-design-padding-inline-large:var(--scb-fields-padding-inline-large, var(--scale-05, 20px));--scb-textfield-design-padding-block-small:var(--scb-fields-padding-block-small, var(--spacing-1, 2px));--scb-textfield-design-padding-block-medium:var(--scb-fields-padding-block-medium, var(--spacing-2, 4px));--scb-textfield-design-padding-block-large:var(--scb-fields-padding-block-large, var(--spacing-4, 12px))}:host([size="small"]){--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-small);--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-small)}:host([size="medium"]){--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-medium);--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-medium)}:host([size="large"]){--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-large);--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-large)}`],S);function V(){const s=g(c,this,$).call(this,this.spacing),e=g(c,this,$).call(this,this.spacingTop)??s,t=g(c,this,$).call(this,this.spacingBottom)??s,i=g(c,this,$).call(this,this.spacingLeft),r=g(c,this,$).call(this,this.spacingRight);e?this.style.setProperty("--scb-textfield-spacing-block-start",e):this.style.removeProperty("--scb-textfield-spacing-block-start"),t?this.style.setProperty("--scb-textfield-spacing-block-end",t):this.style.removeProperty("--scb-textfield-spacing-block-end"),i?this.style.setProperty("--scb-textfield-spacing-inline-start",i):this.style.removeProperty("--scb-textfield-spacing-inline-start"),r?this.style.setProperty("--scb-textfield-spacing-inline-end",r):this.style.removeProperty("--scb-textfield-spacing-inline-end")}function $(s){if(!s)return;const e=String(s).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}function L(){if(!this._internals)return;if(this.disabled){this._internals.setFormValue(null);return}if(this.type!=="file"){this._internals.setFormValue(this.value);return}const s=this.files;if(!s?.length){this._internals.setFormValue(null);return}if(!this.multiple){this._internals.setFormValue(s[0]);return}const e=new FormData,t=this.name.trim()||"file";for(const i of Array.from(s))e.append(t,i);this._internals.setFormValue(e)}function u(s=!1){const e=this.shadowRoot?.querySelector(".scb-textfield");if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement))return!0;const t=this._invalidInputMessage();let i="",r="customError";if(e.setCustomValidity(""),this.disabled)i="";else if(this._customValidationMessage)i=this._customValidationMessage,r="customError",e.setCustomValidity(i);else if(this.required&&!e.value)i=this.errorText||this._requiredMessage(),r="valueMissing",e.setCustomValidity(i);else if(!e.validity.valid){const m=e.validity;r=["badInput","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"].find(w=>m[w])??"customError",i=this.errorText||e.validationMessage||t,this.errorText&&e.setCustomValidity(this.errorText)}const d=s?e.reportValidity():e.checkValidity(),h=d?"":this._customValidationMessage||this.errorText||i||e.validationMessage||t,l=this.error,n=this._validationMessage;return this._validationMessage=h,this.error=this.disabled?!1:h?this._hasValidationBeenReported||l:l&&!this._hasValidationBeenReported&&!n,this._internals&&(d?this._internals.setValidity({}):this._internals.setValidity({[r]:!0},h,e)),(l!==this.error||n!==this._validationMessage)&&this.requestUpdate(),d}function R(){const s=this.shadowRoot?.querySelector(".scb-textfield");s&&(s instanceof HTMLInputElement||s instanceof HTMLTextAreaElement)&&this._boundField!==s&&(g(c,this,I).call(this),this._boundField=s,this.type!=="time"&&s.addEventListener("input",this._onFieldInput),s.addEventListener("change",this._onFieldChange),s.addEventListener("select",this._onFieldSelect),s.addEventListener("focus",this._onFieldFocus),s.addEventListener("blur",this._onFieldBlur))}function I(){const s=this._boundField;s&&(s.removeEventListener("input",this._onFieldInput),s.removeEventListener("change",this._onFieldChange),s.removeEventListener("select",this._onFieldSelect),s.removeEventListener("focus",this._onFieldFocus),s.removeEventListener("blur",this._onFieldBlur),this._boundField=null)}function G(){this._showDatepicker=!1;const s=this.shadowRoot?.querySelector(".scb-textfield");if(s&&(s instanceof HTMLInputElement||s instanceof HTMLTextAreaElement)&&(s.value="",s.setCustomValidity("")),this.value="",this.error=!1,this._internals){const e=this.disabled?null:"";this._internals.setFormValue(e),this._internals.setValidity({})}}function E(){const s=this.renderRoot?.querySelector(".ripple-wrapper");s&&(this._inputFocused&&this._kbShouldShowRing?s.setAttribute("data-kb-focus","true"):s.removeAttribute("data-kb-focus"))}a([p({type:String,reflect:!0})],b.prototype,"type",void 0);a([p({type:String})],b.prototype,"lang",void 0);a([p({type:String})],b.prototype,"label",void 0);a([p({type:String,attribute:"supporting-text"})],b.prototype,"supportingText",void 0);a([p({type:String,attribute:"help-text"})],b.prototype,"helpText",void 0);a([p({type:String,attribute:"help-label"})],b.prototype,"helpLabel",void 0);a([p({type:String,attribute:"clear-label"})],b.prototype,"clearLabel",void 0);a([p({type:String,attribute:"date-button-label"})],b.prototype,"dateButtonLabel",void 0);a([p({type:String,attribute:"error-text"})],b.prototype,"errorText",void 0);a([p({type:String,attribute:"leading-icon"})],b.prototype,"leadingIcon",void 0);a([p({type:String})],b.prototype,"name",void 0);a([p({type:String})],b.prototype,"pattern",void 0);a([p({type:String})],b.prototype,"accept",void 0);a([p({type:Boolean,reflect:!0})],b.prototype,"multiple",void 0);a([p({type:String,attribute:"value"})],b.prototype,"value",void 0);a([p({type:String})],b.prototype,"underLabel",void 0);a([p({type:Boolean,reflect:!0})],b.prototype,"error",void 0);a([p({type:Boolean,reflect:!0})],b.prototype,"disabled",void 0);a([p({type:Boolean,reflect:!0})],b.prototype,"required",void 0);a([p({type:String,reflect:!0})],b.prototype,"size",void 0);a([p({type:String,reflect:!0})],b.prototype,"spacing",void 0);a([p({type:String,attribute:"spacing-top",reflect:!0})],b.prototype,"spacingTop",void 0);a([p({type:String,attribute:"spacing-bottom",reflect:!0})],b.prototype,"spacingBottom",void 0);a([p({type:String,attribute:"spacing-left",reflect:!0})],b.prototype,"spacingLeft",void 0);a([p({type:String,attribute:"spacing-right",reflect:!0})],b.prototype,"spacingRight",void 0);a([x()],b.prototype,"_showDatepicker",void 0);b=a([q("scb-textfield")],b);
|
|
244
|
+
)}:host([size='large']){--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-large-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-large-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-large-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-large-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-large-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-large-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-large-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-large-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-large-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-large-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-large-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-large-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-large-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-large-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-large-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-large-font-weight, var(--scb-fields-option-text-large-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-large-letter-spacing, var(--scb-fields-option-text-large-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-large-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-large-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-large-font, var(--scb-fields-option-text-font));--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-large);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-large);--scb-textfield-min-height:var(--scb-textfield-design-height-large);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-large);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-large);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-large);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-large);--scb-textfield-trailing-inset:var(--scb-textfield-design-icon-inset-large);--scb-textfield-trailing-icon-size:var(--scb-textfield-design-icon-large);--scb-textfield-trailing-gap:var(--scb-textfield-design-trailing-gap-large);--scb-textfield-trailing-action-size:var(--scb-textfield-design-height-large)}:host([size='medium']){--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-medium-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-medium-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-medium-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-medium-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-medium-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-medium-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-medium-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-medium-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-medium-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-medium-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-medium-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-medium-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-medium-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-medium-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-medium-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-medium-font-weight, var(--scb-fields-option-text-medium-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-medium-letter-spacing, var(--scb-fields-option-text-medium-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-medium-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-medium-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-medium-font, var(--scb-fields-option-text-font));--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-medium);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-medium);--scb-textfield-min-height:var(--scb-textfield-design-height-medium);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-medium);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-medium);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-medium);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-medium);--scb-textfield-trailing-inset:var(--scb-textfield-design-icon-inset-medium);--scb-textfield-trailing-icon-size:var(--scb-textfield-design-icon-medium);--scb-textfield-trailing-gap:var(--scb-textfield-design-trailing-gap-medium);--scb-textfield-trailing-action-size:var(--scb-textfield-design-height-medium)}:host([size='small']){--scb-fields-text-font-weight-current:var(--scb-textfield-design-text-small-font-weight);--scb-fields-text-letter-spacing-current:var(--scb-textfield-design-text-small-letter-spacing);--scb-fields-text-line-height-current:var(--scb-textfield-design-text-small-line-height);--scb-fields-text-size-current:var(--scb-textfield-design-text-small-size);--scb-fields-text-font-current:var(--scb-textfield-design-text-small-font);--scb-fields-label-font-weight-current:var(--scb-textfield-design-label-small-font-weight);--scb-fields-label-letter-spacing-current:var(--scb-textfield-design-label-small-letter-spacing);--scb-fields-label-line-height-current:var(--scb-textfield-design-label-small-line-height);--scb-fields-label-size-current:var(--scb-textfield-design-label-small-size);--scb-fields-label-font-current:var(--scb-textfield-design-label-small-font);--scb-fields-supporting-font-weight-current:var(--scb-textfield-design-supporting-small-font-weight);--scb-fields-supporting-letter-spacing-current:var(--scb-textfield-design-supporting-small-letter-spacing);--scb-fields-supporting-line-height-current:var(--scb-textfield-design-supporting-small-line-height);--scb-fields-supporting-size-current:var(--scb-textfield-design-supporting-small-size);--scb-fields-supporting-font-current:var(--scb-textfield-design-supporting-small-font);--scb-fields-option-text-font-weight-current:var(--scb-fields-option-text-small-font-weight, var(--scb-fields-option-text-small-weight, var(--scb-fields-option-text-font-weight, var(--scb-fields-option-text-weight))));--scb-fields-option-text-letter-spacing-current:var(--scb-fields-option-text-small-letter-spacing, var(--scb-fields-option-text-small-tracking, var(--scb-fields-option-text-letter-spacing, var(--scb-fields-option-text-tracking))));--scb-fields-option-text-line-height-current:var(--scb-fields-option-text-small-line-height, var(--scb-fields-option-text-line-height));--scb-fields-option-text-size-current:var(--scb-fields-option-text-small-size, var(--scb-fields-option-text-size));--scb-fields-option-text-font-current:var(--scb-fields-option-text-small-font, var(--scb-fields-option-text-font));--scb-textfield-padding-x:var(--scb-textfield-design-padding-inline-small);--scb-textfield-padding-y:var(--scb-textfield-design-padding-block-small);--scb-textfield-min-height:var(--scb-textfield-design-height-small);--scb-textfield-radius:var(--scb-textfield-design-surface-radius-small);--scb-textfield-leading-inset:var(--scb-textfield-design-icon-inset-small);--scb-textfield-leading-icon-size:var(--scb-textfield-design-icon-small);--scb-textfield-leading-gap:var(--scb-textfield-design-leading-gap-small);--scb-textfield-trailing-inset:var(--scb-textfield-design-icon-inset-small);--scb-textfield-trailing-icon-size:var(--scb-textfield-design-icon-small);--scb-textfield-trailing-gap:var(--scb-textfield-design-trailing-gap-small);--scb-textfield-trailing-action-size:var(--scb-textfield-design-height-small)}:host([type='number']){--scb-textfield-max-width:var(--scb-textfield-number-max-width)}:host([type='datetime-local']),:host([type='text']){--scb-textfield-max-width:var(--scb-textfield-text-max-width)}:host([type='search']){--scb-textfield-max-width:var(--scb-textfield-search-max-width)}:host([type='email']){--scb-textfield-max-width:var(--scb-textfield-email-max-width)}:host([type='password']){--scb-textfield-max-width:var(--scb-textfield-password-max-width)}:host([type='tel']){--scb-textfield-max-width:var(--scb-textfield-tel-max-width)}:host([type='url']){--scb-textfield-max-width:var(--scb-textfield-url-max-width)}:host([type='textarea']){--scb-textfield-max-width:var(--scb-textfield-textarea-max-width)}:host([type='date']),:host([type='time']){--scb-textfield-max-width:var(--scb-textfield-text-max-width)}input[type=time]::-webkit-calendar-picker-indicator{display:none;background:0 0}:host{display:flex;flex-direction:column;max-width:var(--scb-textfield-max-width);--md-focus-ring-color:var(--scb-fields-focus-color, var(--md-sys-color-primary))}:host([error]) .scb-textfield-supporting-text{color:var(--scb-fields-error-color, var(--md-sys-color-error))}:host([error]) .scb-textfield{border-color:var(--scb-fields-error-color, var(--md-sys-color-error))}:host([error]) .scb-textfield:focus-visible{border-color:var(--scb-fields-error-color, var(--md-sys-color-error));box-shadow:inset 0 0 0 2px var(--scb-fields-error-color, var(--md-sys-color-error))}:host([disabled]){opacity:.38;cursor:default}.scb-textfield-label{display:block;font-family:var(--scb-textfield-label-font-family);font-size:var(--scb-textfield-label-font-size);font-weight:var(--scb-textfield-label-font-weight);line-height:var(--scb-textfield-label-line-height);letter-spacing:var(--scb-textfield-label-letter-spacing)}.scb-textfield-label-row{display:flex;align-items:center;gap:var(--scb-textfield-design-label-help-gap)}.scb-textfield-label-row--without-supporting{margin-bottom:var(--scb-textfield-label-gap)}.scb-textfield-help-tooltip{display:inline-flex;align-items:center;flex:0 0 auto;line-height:0}.scb-textfield-help-button{--scb-icon-button-icon-size:var(--scb-textfield-design-help-icon-medium)}:host([size='small']) .scb-textfield-help-button{--scb-icon-button-icon-size:var(--scb-textfield-design-help-icon-small)}:host([size='large']) .scb-textfield-help-button{--scb-icon-button-icon-size:var(--scb-textfield-design-help-icon-large)}.scb-textfield-label--without-supporting,.scb-textfield-supporting-text{margin-bottom:var(--scb-textfield-label-gap)}.scb-textfield-supporting-text{display:block;font-family:var(--scb-textfield-supporting-font-family);font-size:var(--scb-textfield-supporting-font-size);line-height:var(--scb-textfield-supporting-line-height);font-weight:var(--scb-textfield-supporting-font-weight);letter-spacing:var(--scb-textfield-supporting-letter-spacing);color:var(--scb-fields-secondary-content-color, var(--md-sys-color-on-surface-variant))}.scb-textfield{padding:var(--scb-textfield-padding-y) var(--scb-textfield-padding-x);block-size:var(--scb-textfield-min-height);min-height:var(--scb-textfield-min-height);border:1px solid var(--scb-fields-outline-color, var(--md-sys-color-outline));border-radius:var(--scb-textfield-radius);font-size:var(--scb-textfield-font-size);font-family:var(--scb-textfield-font-family);line-height:var(--scb-textfield-line-height);font-weight:var(--scb-textfield-font-weight);letter-spacing:var(--scb-textfield-letter-spacing);width:100%;box-sizing:border-box;background-color:var(--scb-textfield-surface-color, var(--scb-fields-surface-color, var(--md-sys-color-surface)));color:var(--scb-fields-content-color, var(--md-sys-color-on-surface));position:relative;z-index:1}:host([type='date']) .scb-textfield,:host([type='search']) .scb-textfield{padding-right:var(--scb-textfield-trailing-reserved)}md-icon+.ripple-wrapper>.scb-textfield{padding-left:var(--scb-textfield-leading-padding)}.scb-textfield-icon{position:absolute;left:var(--scb-textfield-leading-inset);top:50%;transform:translateY(-50%);pointer-events:none;font-size:var(--scb-textfield-leading-icon-size);z-index:2}.scb-textfield:focus-visible{outline:0;border-color:var(--scb-fields-focus-color, var(--md-sys-color-primary));box-shadow:inset 0 0 0 2px var(--scb-fields-focus-color, var(--md-sys-color-primary));border:1px solid var(--scb-fields-focus-color, var(--md-sys-color-primary))}.ripple-wrapper,.scb-textfield-wrapper{position:relative;width:100%}md-focus-ring.input-ring,md-ripple{border-radius:var(--scb-textfield-radius);position:absolute;inset:0;pointer-events:none}md-focus-ring.input-ring{display:none;z-index:3}.ripple-wrapper[data-kb-focus=true] md-focus-ring.input-ring{display:block}md-ripple{z-index:0;--md-ripple-hover-color:transparent;--md-ripple-hover-opacity:0}input[type=search]::-webkit-search-cancel-button{appearance:none;display:none}.scb-textfield-clear,.scb-textfield-error-icon{position:absolute;right:var(--scb-textfield-trailing-inset);top:50%;transform:translateY(-50%);z-index:2}.scb-textfield-error-icon{pointer-events:none;font-size:var(--scb-textfield-trailing-icon-size);color:var(--scb-fields-error-color, var(--md-sys-color-error))}.scb-textfield.has-error-icon{padding-right:calc(var(--scb-textfield-trailing-inset) + var(--scb-textfield-trailing-icon-size) + var(--scb-textfield-trailing-gap))}.scb-textfield-clear{width:var(--scb-textfield-trailing-icon-size);height:var(--scb-textfield-trailing-icon-size);padding:0;margin:0;border:0;background:0 0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--scb-fields-content-color, var(--md-sys-color-on-surface))}:host([error]) .scb-textfield-clear{right:calc(var(--scb-textfield-trailing-inset) + var(--scb-textfield-trailing-icon-size) + var(--spacing-2))}.scb-textfield-clear:focus-visible{outline:2px solid var(--scb-fields-focus-color, var(--md-sys-color-primary));outline-offset:2px}.scb-textfield-clear svg{width:100%;height:100%;display:block}.scb-textfield-datepicker-button{position:absolute;right:var(--scb-textfield-trailing-inset);top:50%;transform:translateY(-50%);z-index:4}:host{--scb-textfield-design-height-small:var(--scb-fields-control-size-small, var(--scb-control-size-small, var(--scale-08, 32px)));--scb-textfield-design-height-medium:var(--scb-fields-control-size-medium, var(--scb-control-size-medium, var(--scale-10, 40px)));--scb-textfield-design-height-large:var(--scb-fields-control-size-large, var(--scb-control-size-large, var(--scale-12, 56px)));--scb-textfield-design-text-small-font:var(--scb-fields-text-small-font, var(--scb-fields-text-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-text-small-size:var(--scb-fields-text-small-size, var(--scb-fields-text-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-text-small-line-height:var(--scb-fields-text-small-line-height, var(--scb-fields-text-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-text-small-tracking:var(--scb-fields-text-small-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-text-small-weight:var(--scb-fields-text-small-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-text-small-letter-spacing:var(--scb-fields-text-small-letter-spacing, var(--scb-fields-text-small-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-text-small-font-weight:var(--scb-fields-text-small-font-weight, var(--scb-fields-text-small-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-text-medium-font:var(--scb-fields-text-medium-font, var(--scb-fields-text-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-text-medium-size:var(--scb-fields-text-medium-size, var(--scb-fields-text-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-text-medium-line-height:var(--scb-fields-text-medium-line-height, var(--scb-fields-text-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-text-medium-tracking:var(--scb-fields-text-medium-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-text-medium-weight:var(--scb-fields-text-medium-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-text-medium-letter-spacing:var(--scb-fields-text-medium-letter-spacing, var(--scb-fields-text-medium-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-text-medium-font-weight:var(--scb-fields-text-medium-font-weight, var(--scb-fields-text-medium-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-text-large-font:var(--scb-fields-text-large-font, var(--scb-fields-text-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-text-large-size:var(--scb-fields-text-large-size, var(--scb-fields-text-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-text-large-line-height:var(--scb-fields-text-large-line-height, var(--scb-fields-text-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-text-large-tracking:var(--scb-fields-text-large-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-text-large-weight:var(--scb-fields-text-large-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-text-large-letter-spacing:var(--scb-fields-text-large-letter-spacing, var(--scb-fields-text-large-tracking, var(--scb-fields-text-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-text-large-font-weight:var(--scb-fields-text-large-font-weight, var(--scb-fields-text-large-weight, var(--scb-fields-text-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-label-small-font:var(--scb-fields-label-small-font, var(--scb-fields-label-font, var(--scb-form-question-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))))));--scb-textfield-design-label-small-size:var(--scb-fields-label-small-size, var(--scb-fields-label-size, var(--scb-form-question-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)))));--scb-textfield-design-label-small-line-height:var(--scb-fields-label-small-line-height, var(--scb-fields-label-line-height, var(--scb-form-question-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)))));--scb-textfield-design-label-small-tracking:var(--scb-fields-label-small-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-label-small-weight:var(--scb-fields-label-small-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))))));--scb-textfield-design-label-small-letter-spacing:var(--scb-fields-label-small-letter-spacing, var(--scb-fields-label-small-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-label-small-font-weight:var(--scb-fields-label-small-font-weight, var(--scb-fields-label-small-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))))));--scb-textfield-design-label-medium-font:var(--scb-fields-label-medium-font, var(--scb-fields-label-font, var(--scb-form-question-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))))));--scb-textfield-design-label-medium-size:var(--scb-fields-label-medium-size, var(--scb-fields-label-size, var(--scb-form-question-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)))));--scb-textfield-design-label-medium-line-height:var(--scb-fields-label-medium-line-height, var(--scb-fields-label-line-height, var(--scb-form-question-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)))));--scb-textfield-design-label-medium-tracking:var(--scb-fields-label-medium-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-label-medium-weight:var(--scb-fields-label-medium-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))))));--scb-textfield-design-label-medium-letter-spacing:var(--scb-fields-label-medium-letter-spacing, var(--scb-fields-label-medium-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-label-medium-font-weight:var(--scb-fields-label-medium-font-weight, var(--scb-fields-label-medium-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))))));--scb-textfield-design-label-large-font:var(--scb-fields-label-large-font, var(--scb-fields-label-font, var(--scb-form-question-font, var(--scb-typography-label-large-font, var(--md-sys-typescale-label-large-font, var(--brand))))));--scb-textfield-design-label-large-size:var(--scb-fields-label-large-size, var(--scb-fields-label-size, var(--scb-form-question-size, var(--scb-typography-label-large-size, var(--md-sys-typescale-label-large-size, 18px)))));--scb-textfield-design-label-large-line-height:var(--scb-fields-label-large-line-height, var(--scb-fields-label-line-height, var(--scb-form-question-line-height, var(--scb-typography-label-large-line-height, var(--md-sys-typescale-label-large-line-height, 26px)))));--scb-textfield-design-label-large-tracking:var(--scb-fields-label-large-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-label-large-weight:var(--scb-fields-label-large-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600))))));--scb-textfield-design-label-large-letter-spacing:var(--scb-fields-label-large-letter-spacing, var(--scb-fields-label-large-tracking, var(--scb-fields-label-letter-spacing, var(--scb-form-question-letter-spacing, var(--scb-typography-label-large-tracking, var(--md-sys-typescale-label-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-label-large-font-weight:var(--scb-fields-label-large-font-weight, var(--scb-fields-label-large-weight, var(--scb-fields-label-font-weight, var(--scb-form-question-font-weight, var(--scb-typography-label-large-weight, var(--md-sys-typescale-label-large-weight, var(--weight-semibold, 600)))))));--scb-textfield-design-supporting-small-font:var(--scb-fields-supporting-small-font, var(--scb-fields-supporting-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-supporting-small-size:var(--scb-fields-supporting-small-size, var(--scb-fields-supporting-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-supporting-small-line-height:var(--scb-fields-supporting-small-line-height, var(--scb-fields-supporting-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-supporting-small-tracking:var(--scb-fields-supporting-small-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-supporting-small-weight:var(--scb-fields-supporting-small-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-supporting-small-letter-spacing:var(--scb-fields-supporting-small-letter-spacing, var(--scb-fields-supporting-small-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-supporting-small-font-weight:var(--scb-fields-supporting-small-font-weight, var(--scb-fields-supporting-small-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-supporting-medium-font:var(--scb-fields-supporting-medium-font, var(--scb-fields-supporting-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-supporting-medium-size:var(--scb-fields-supporting-medium-size, var(--scb-fields-supporting-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-supporting-medium-line-height:var(--scb-fields-supporting-medium-line-height, var(--scb-fields-supporting-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-supporting-medium-tracking:var(--scb-fields-supporting-medium-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-supporting-medium-weight:var(--scb-fields-supporting-medium-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-supporting-medium-letter-spacing:var(--scb-fields-supporting-medium-letter-spacing, var(--scb-fields-supporting-medium-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-supporting-medium-font-weight:var(--scb-fields-supporting-medium-font-weight, var(--scb-fields-supporting-medium-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-supporting-large-font:var(--scb-fields-supporting-large-font, var(--scb-fields-supporting-font, var(--scb-form-primary-font, var(--scb-typography-body-large-font, var(--md-sys-typescale-body-large-font, var(--brand))))));--scb-textfield-design-supporting-large-size:var(--scb-fields-supporting-large-size, var(--scb-fields-supporting-size, var(--scb-form-primary-size, var(--scb-typography-body-large-size, var(--md-sys-typescale-body-large-size, 18px)))));--scb-textfield-design-supporting-large-line-height:var(--scb-fields-supporting-large-line-height, var(--scb-fields-supporting-line-height, var(--scb-form-primary-line-height, var(--scb-typography-body-large-line-height, var(--md-sys-typescale-body-large-line-height, 26px)))));--scb-textfield-design-supporting-large-tracking:var(--scb-fields-supporting-large-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px))))));--scb-textfield-design-supporting-large-weight:var(--scb-fields-supporting-large-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400))))));--scb-textfield-design-supporting-large-letter-spacing:var(--scb-fields-supporting-large-letter-spacing, var(--scb-fields-supporting-large-tracking, var(--scb-fields-supporting-letter-spacing, var(--scb-form-primary-letter-spacing, var(--scb-typography-body-large-tracking, var(--md-sys-typescale-body-large-tracking, var(--tracking-05, -0.3px)))))));--scb-textfield-design-supporting-large-font-weight:var(--scb-fields-supporting-large-font-weight, var(--scb-fields-supporting-large-weight, var(--scb-fields-supporting-font-weight, var(--scb-form-primary-font-weight, var(--scb-typography-body-large-weight, var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400)))))));--scb-textfield-design-icon-small:var(--scb-fields-icon-size-small, var(--icon-size-small, 20px));--scb-textfield-design-icon-medium:var(--scb-fields-icon-size-medium, var(--icon-size-small, 20px));--scb-textfield-design-icon-large:var(--scb-fields-icon-size-large, var(--icon-size-medium, 24px));--scb-textfield-design-help-icon-button-size-small:var(--scb-fields-help-icon-button-size-small, tiny);--scb-textfield-design-help-icon-button-size-medium:var(--scb-fields-help-icon-button-size-medium, tiny);--scb-textfield-design-help-icon-button-size-large:var(--scb-fields-help-icon-button-size-large, tiny);--scb-textfield-design-help-icon-small:var(--scb-fields-help-icon-size-small, var(--icon-size-extra-small, 16px));--scb-textfield-design-help-icon-medium:var(--scb-fields-help-icon-size-medium, var(--icon-size-extra-small, 16px));--scb-textfield-design-help-icon-large:var(--scb-fields-help-icon-size-large, var(--icon-size-extra-small, 16px));--scb-textfield-design-field-label-gap-small:var(--scb-fields-label-gap, var(--spacing-3, 8px));--scb-textfield-design-field-label-gap-medium:var(--scb-fields-label-gap, var(--spacing-3, 8px));--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-medium);--scb-textfield-design-field-label-gap-large:var(--scb-fields-label-gap, var(--spacing-3, 8px));--scb-textfield-design-label-help-gap-small:var(--scb-fields-label-help-gap, var(--spacing-1, 2px));--scb-textfield-design-label-help-gap-medium:var(--scb-fields-label-help-gap, var(--spacing-1, 2px));--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-medium);--scb-textfield-design-label-help-gap-large:var(--scb-fields-label-help-gap, var(--spacing-1, 2px));--scb-textfield-design-icon-inset-small:var(--scb-fields-icon-inset-small, var(--spacing-3, 8px));--scb-textfield-design-icon-inset-medium:var(--scb-fields-icon-inset-medium, var(--spacing-3, 8px));--scb-textfield-design-icon-inset-large:var(--scb-fields-icon-inset-large, var(--spacing-4, 12px));--scb-textfield-design-leading-gap-small:var(--scb-fields-leading-gap-small, var(--spacing-5, 16px));--scb-textfield-design-leading-gap-medium:var(--scb-fields-leading-gap-medium, var(--spacing-5, 16px));--scb-textfield-design-leading-gap-large:var(--scb-fields-leading-gap-large, var(--spacing-5, 16px));--scb-textfield-design-trailing-gap-small:var(--scb-fields-trailing-gap-small, var(--spacing-3, 8px));--scb-textfield-design-trailing-gap-medium:var(--scb-fields-trailing-gap-medium, var(--spacing-3, 8px));--scb-textfield-design-trailing-gap-large:var(--scb-fields-trailing-gap-large, var(--spacing-3, 8px));--scb-textfield-design-surface-radius-small:var(--scb-fields-surface-radius-small, var(--radius-small, 8px));--scb-textfield-design-surface-radius-medium:var(--scb-fields-surface-radius-medium, var(--radius-small, 8px));--scb-textfield-design-surface-radius-large:var(--scb-fields-surface-radius-large, var(--radius-small, 8px));--scb-textfield-design-padding-inline-small:var(--scb-fields-padding-inline-small, var(--spacing-4, 12px));--scb-textfield-design-padding-inline-medium:var(--scb-fields-padding-inline-medium, var(--spacing-4, 12px));--scb-textfield-design-padding-inline-large:var(--scb-fields-padding-inline-large, var(--scale-05, 20px));--scb-textfield-design-padding-block-small:var(--scb-fields-padding-block-small, var(--spacing-1, 2px));--scb-textfield-design-padding-block-medium:var(--scb-fields-padding-block-medium, var(--spacing-2, 4px));--scb-textfield-design-padding-block-large:var(--scb-fields-padding-block-large, var(--spacing-4, 12px))}:host([size="small"]){--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-small);--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-small)}:host([size="medium"]){--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-medium);--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-medium)}:host([size="large"]){--scb-textfield-design-field-label-gap:var(--scb-textfield-design-field-label-gap-large);--scb-textfield-design-label-help-gap:var(--scb-textfield-design-label-help-gap-large)}`],u);function _(){const t=l(s,this,h).call(this,this.spacing),e=l(s,this,h).call(this,this.spacingTop)??t,i=l(s,this,h).call(this,this.spacingBottom)??t,d=l(s,this,h).call(this,this.spacingLeft),c=l(s,this,h).call(this,this.spacingRight);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"),d?this.style.setProperty("--scb-textfield-spacing-inline-start",d):this.style.removeProperty("--scb-textfield-spacing-inline-start"),c?this.style.setProperty("--scb-textfield-spacing-inline-end",c):this.style.removeProperty("--scb-textfield-spacing-inline-end")}function h(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}function m(){if(!this._internals)return;if(this.disabled){this._internals.setFormValue(null);return}if(this.type!=="file"){this._internals.setFormValue(this.value);return}const t=this.files;if(!t?.length){this._internals.setFormValue(null);return}if(!this.multiple){this._internals.setFormValue(t[0]);return}const e=new FormData,i=this.name.trim()||"file";for(const d of Array.from(t))e.append(i,d);this._internals.setFormValue(e)}function p(t=!1){const e=this.shadowRoot?.querySelector(".scb-textfield");if(!(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement))return!0;const i=this._invalidInputMessage();let d="",c="customError";if(e.setCustomValidity(""),this.disabled)d="";else if(this._customValidationMessage)d=this._customValidationMessage,c="customError",e.setCustomValidity(d);else if(this.required&&!e.value)d=this.errorText||this._requiredMessage(),c="valueMissing",e.setCustomValidity(d);else if(!e.validity.valid){const y=e.validity;c=["badInput","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"].find($=>y[$])??"customError",d=this.errorText||e.validationMessage||i,this.errorText&&e.setCustomValidity(this.errorText)}const g=t?e.reportValidity():e.checkValidity(),b=g?"":this._customValidationMessage||this.errorText||d||e.validationMessage||i,f=this.error,v=this._validationMessage;return this._validationMessage=b,this.error=this.disabled?!1:b?this._hasValidationBeenReported||f:f&&!this._hasValidationBeenReported&&!v,this._internals&&(g?this._internals.setValidity({}):this._internals.setValidity({[c]:!0},b,e)),(f!==this.error||v!==this._validationMessage)&&this.requestUpdate(),g}function z(){const t=this.shadowRoot?.querySelector(".scb-textfield");t&&(t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement)&&this._boundField!==t&&(l(s,this,k).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))}function k(){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)}function C(){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({})}}function x(){const t=this.renderRoot?.querySelector(".ripple-wrapper");t&&(this._inputFocused&&this._kbShouldShowRing?t.setAttribute("data-kb-focus","true"):t.removeAttribute("data-kb-focus"))}r([n({type:String,reflect:!0})],a.prototype,"type",void 0);r([n({type:String})],a.prototype,"lang",void 0);r([n({type:String})],a.prototype,"label",void 0);r([n({type:String,attribute:"supporting-text"})],a.prototype,"supportingText",void 0);r([n({type:String,attribute:"help-text"})],a.prototype,"helpText",void 0);r([n({type:String,attribute:"help-label"})],a.prototype,"helpLabel",void 0);r([n({type:String,attribute:"clear-label"})],a.prototype,"clearLabel",void 0);r([n({type:String,attribute:"date-button-label"})],a.prototype,"dateButtonLabel",void 0);r([n({type:String,attribute:"error-text"})],a.prototype,"errorText",void 0);r([n({type:String,attribute:"leading-icon"})],a.prototype,"leadingIcon",void 0);r([n({type:String})],a.prototype,"name",void 0);r([n({type:String})],a.prototype,"pattern",void 0);r([n({type:String})],a.prototype,"accept",void 0);r([n({type:Boolean,reflect:!0})],a.prototype,"multiple",void 0);r([n({type:String,attribute:"value"})],a.prototype,"value",void 0);r([n({type:String})],a.prototype,"underLabel",void 0);r([n({type:Boolean,reflect:!0})],a.prototype,"error",void 0);r([n({type:Boolean,reflect:!0})],a.prototype,"disabled",void 0);r([n({type:Boolean,reflect:!0})],a.prototype,"required",void 0);r([n({type:String,reflect:!0})],a.prototype,"size",void 0);r([n({type:String,reflect:!0})],a.prototype,"spacing",void 0);r([n({type:String,attribute:"spacing-top",reflect:!0})],a.prototype,"spacingTop",void 0);r([n({type:String,attribute:"spacing-bottom",reflect:!0})],a.prototype,"spacingBottom",void 0);r([n({type:String,attribute:"spacing-left",reflect:!0})],a.prototype,"spacingLeft",void 0);r([n({type:String,attribute:"spacing-right",reflect:!0})],a.prototype,"spacingRight",void 0);r([S()],a.prototype,"_showDatepicker",void 0);a=r([V("scb-textfield")],a);
|