scb-wc-test 0.1.261 → 0.1.262
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/all.js +2 -0
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/mvc/components/all.js +1 -0
- package/mvc/components/scb-drop-zone/scb-drop-zone.js +327 -0
- package/mvc/components/scb-select/scb-select.js +29 -0
- package/mvc/components/scb-table/scb-table.js +3 -3
- package/mvc/components/scb-textfield/scb-textfield.js +29 -3
- package/package.json +6 -2
- package/scb-drop-zone/scb-drop-zone.d.ts +107 -0
- package/scb-drop-zone/scb-drop-zone.js +595 -0
- package/scb-select/scb-select.d.ts +1 -1
- package/scb-select/scb-select.js +32 -3
- package/scb-table/scb-table.d.ts +9 -0
- package/scb-table/scb-table.js +135 -80
- package/scb-textfield/scb-textfield.d.ts +1 -1
- package/scb-textfield/scb-textfield.js +66 -40
- package/scb-wc-test.bundle.js +830 -449
- package/scb-wc-test.d.ts +2 -0
package/all.js
CHANGED
|
@@ -23,6 +23,7 @@ import './mvc/components/scb-datepicker/scb-datepicker.js';
|
|
|
23
23
|
import './mvc/components/scb-dialog/scb-dialog.js';
|
|
24
24
|
import './mvc/components/scb-divider/scb-divider.js';
|
|
25
25
|
import './mvc/components/scb-drawer/scb-drawer.js';
|
|
26
|
+
import './mvc/components/scb-drop-zone/scb-drop-zone.js';
|
|
26
27
|
import './mvc/components/scb-dropdown/scb-dropdown.js';
|
|
27
28
|
import './mvc/components/scb-fab/scb-fab.js';
|
|
28
29
|
import './mvc/components/scb-fact-card/scb-fact-card-content.js';
|
|
@@ -107,6 +108,7 @@ import './scb-datepicker/scb-datepicker.js';
|
|
|
107
108
|
import './scb-dialog/scb-dialog.js';
|
|
108
109
|
import './scb-divider/scb-divider.js';
|
|
109
110
|
import './scb-drawer/scb-drawer.js';
|
|
111
|
+
import './scb-drop-zone/scb-drop-zone.js';
|
|
110
112
|
import './scb-dropdown/scb-dropdown.js';
|
|
111
113
|
import './scb-fab/scb-fab.js';
|
|
112
114
|
import './scb-fact-card/scb-fact-card-content.js';
|
package/index.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export * from './scb-datepicker/scb-datepicker';
|
|
|
19
19
|
export * from './scb-dialog/scb-dialog';
|
|
20
20
|
export * from './scb-divider/scb-divider';
|
|
21
21
|
export * from './scb-drawer/scb-drawer';
|
|
22
|
+
export * from './scb-drop-zone/scb-drop-zone';
|
|
22
23
|
export * from './scb-dropdown/scb-dropdown';
|
|
23
24
|
export * from './scb-fab/scb-fab';
|
|
24
25
|
export * from './scb-fact-card/scb-fact-card-content';
|
package/index.js
CHANGED
|
@@ -19,6 +19,7 @@ import "./scb-datepicker/scb-datepicker.js";
|
|
|
19
19
|
import "./scb-dialog/scb-dialog.js";
|
|
20
20
|
import "./scb-divider/scb-divider.js";
|
|
21
21
|
import "./scb-drawer/scb-drawer.js";
|
|
22
|
+
import "./scb-drop-zone/scb-drop-zone.js";
|
|
22
23
|
import "./scb-dropdown/scb-dropdown.js";
|
|
23
24
|
import "./scb-fab/scb-fab.js";
|
|
24
25
|
import "./scb-fact-card/scb-fact-card-content.js";
|
package/mvc/components/all.js
CHANGED
|
@@ -19,6 +19,7 @@ import './scb-datepicker/scb-datepicker.js';
|
|
|
19
19
|
import './scb-dialog/scb-dialog.js';
|
|
20
20
|
import './scb-divider/scb-divider.js';
|
|
21
21
|
import './scb-drawer/scb-drawer.js';
|
|
22
|
+
import './scb-drop-zone/scb-drop-zone.js';
|
|
22
23
|
import './scb-dropdown/scb-dropdown.js';
|
|
23
24
|
import './scb-fab/scb-fab.js';
|
|
24
25
|
import './scb-fact-card/scb-fact-card.js';
|
|
@@ -0,0 +1,327 @@
|
|
|
1
|
+
import{a as v,n as a,r as c,i as h,x as p,t as _}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(o,s,l){try{customElements.get(o)||t(o,s,l)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(e,t,o,s)=>{for(var l=s>1?void 0:s?b(t,o):t,n=e.length-1,d;n>=0;n--)(d=e[n])&&(l=(s?d(t,o,l):d(l))||l);return s&&l&&u(t,o,l),l};let r=class extends h{constructor(){super(...arguments),this.type="default",this.label="",this.supportingText="",this.metaText="",this.buttonLabel="",this.replaceButtonLabel="",this.removeButtonLabel="",this.previewEyebrow="",this.emptyPreviewTitle="",this.emptyPreviewMeta="",this.accept="",this.showPreview=!0,this.disabled=!1,this.previewSrc="",this.previewAlt="",this.previewTitle="",this.previewMeta="",this._isDragOver=!1,this._selectedPreviewKind="empty",this._selectedPreviewSrc="",this._selectedPreviewAlt="",this._selectedPreviewTitle="",this._selectedPreviewMeta="",this._dragDepth=0,this._previewSource="external",this._objectUrl=""}get _resolvedAccept(){return this.accept.trim()||(this.type==="image"?"image/*,.png,.jpg,.jpeg,.webp,.svg,.gif,.bmp,.avif":"")}get _hasExternalPreview(){return!!this.previewSrc.trim()||!!this.previewTitle.trim()||!!this.previewMeta.trim()}get _resolvedPreviewKind(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewSrc.trim()?"image":"file":this._selectedPreviewKind}get _hasPreview(){return this._resolvedPreviewKind!=="empty"}get _resolvedLabel(){return this.label||(this.type==="image"?"Ladda upp bild":"Ladda upp fil")}get _resolvedSupportingText(){return this.supportingText||(this.type==="image"?"Dra och släpp en bild här, eller välj en bild från din dator.":"Dra och släpp en fil här, eller välj en fil från din dator.")}get _resolvedMetaText(){return this.metaText?this.metaText:this.type==="image"?"PNG, JPG, SVG, GIF, BMP, AVIF och WebP stöds.":"Alla filtyper stöds."}get _resolvedButtonLabel(){return this.buttonLabel||(this.type==="image"?"Välj bild":"Välj fil")}get _resolvedReplaceButtonLabel(){return this.replaceButtonLabel?this.replaceButtonLabel:this._resolvedPreviewKind==="image"?"Byt bild":"Byt fil"}get _resolvedRemoveButtonLabel(){return this.removeButtonLabel?this.removeButtonLabel:this._resolvedPreviewKind==="image"?"Ta bort bild":"Ta bort fil"}get _resolvedPreviewEyebrow(){return this.previewEyebrow?this.previewEyebrow:this._hasPreview?this._resolvedPreviewKind==="image"?"Uppladdad bild":"Uppladdad fil":"Förhandsvisning"}get _resolvedEmptyPreviewTitle(){return this.emptyPreviewTitle?this.emptyPreviewTitle:this.type==="image"?"Ingen bild uppladdad":"Ingen fil uppladdad"}get _resolvedEmptyPreviewMeta(){return this.emptyPreviewMeta?this.emptyPreviewMeta:this.type==="image"?"Förhandsvisningen visas här när du har laddat upp en bild.":"Förhandsvisningen visas här när du har laddat upp en fil."}get _resolvedPreviewSrc(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewSrc:this._selectedPreviewSrc}get _resolvedPreviewAlt(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewAlt:this._selectedPreviewAlt}get _resolvedPreviewTitle(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewTitle||(this._resolvedPreviewKind==="image"?"Uppladdad bild":"Uppladdad fil"):this._selectedPreviewTitle}get _resolvedPreviewMeta(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewMeta:this._selectedPreviewMeta}disconnectedCallback(){this._revokeObjectUrl(),super.disconnectedCallback()}updated(e){e.has("type")&&this.type==="image"&&this._selectedPreviewKind==="file"&&this._clearSelectedFileState()}openPicker(){if(this.disabled)return;const e=this.renderRoot.querySelector('[data-role="native-input"]');if(e){try{e.value=""}catch{}e.click()}}setPreviewState(e){this.previewSrc=e?.src??"",this.previewAlt=e?.alt??"",this.previewTitle=e?.title??"",this.previewMeta=e?.meta??"",this._previewSource="external"}clearPreviewState(){this.previewSrc="",this.previewAlt="",this.previewTitle="",this.previewMeta="",this._previewSource="external",this._clearSelectedFileState(),this._clearNativeInputValue()}_dispatch(e,t={},o=!1){const s=new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,cancelable:o});return this.dispatchEvent(s),s}_handleFiles(e){const t=e&&e[0]?e[0]:null;!t||!this._isAcceptedFile(t)||(this._setSelectedFileState(t),this._dispatch("file-selected",{file:t}),this._dispatch("change",{file:t}))}_onZoneClick(e){this.disabled||e.composedPath().some(s=>s instanceof HTMLElement&&s.getAttribute("data-role")==="choose-button")||this.openPicker()}_onZoneKeydown(e){this.disabled||(e.key==="Enter"||e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.openPicker())}_preventDefaultDrag(e){e.preventDefault(),e.stopPropagation()}_onDragEnter(e){this.disabled||(this._preventDefaultDrag(e),this._dragDepth+=1,this._isDragOver=!0)}_onDragOver(e){this.disabled||(this._preventDefaultDrag(e),this._isDragOver=!0)}_onDragLeave(e){this.disabled||(this._preventDefaultDrag(e),this._dragDepth=Math.max(0,this._dragDepth-1),this._dragDepth||(this._isDragOver=!1))}_onDrop(e){this.disabled||(this._preventDefaultDrag(e),this._dragDepth=0,this._isDragOver=!1,this._handleFiles(e.dataTransfer?.files??null))}_onNativeInputChange(e){const t=e.currentTarget;this._handleFiles(t?.files??null)}_onChooseButtonClick(e){e.preventDefault(),e.stopPropagation(),this.openPicker()}_onReplaceButtonClick(e){e.preventDefault(),e.stopPropagation(),this.openPicker()}_onRemoveButtonClick(e){e.preventDefault(),e.stopPropagation(),this._dispatch("clear-request",{},!0).defaultPrevented||this.clearPreviewState()}_isAcceptedFile(e){const t=this._resolvedAccept.trim();if(!t)return!0;const o=e.name.toLowerCase(),s=(e.type||"").toLowerCase(),l=t.split(",").map(n=>n.trim().toLowerCase()).filter(Boolean);return l.length?l.some(n=>n==="*/*"?!0:n.endsWith("/*")?s.startsWith(n.slice(0,-1)):n.startsWith(".")?o.endsWith(n):s===n):!0}_setSelectedFileState(e){const t=this._getPreviewKindForFile(e),o=this._getFileTypeLabel(e),s=this._formatFileSize(e.size);this._revokeObjectUrl(),this._selectedPreviewKind=t,this._selectedPreviewTitle=e.name||(t==="image"?"Uppladdad bild":"Uppladdad fil"),this._selectedPreviewMeta=[o,s].filter(Boolean).join(" • "),this._selectedPreviewAlt=t==="image"?e.name||"Uppladdad bild":"",this._selectedPreviewSrc="",t==="image"&&(this._objectUrl=URL.createObjectURL(e),this._selectedPreviewSrc=this._objectUrl),this._previewSource="internal"}_clearSelectedFileState(){this._revokeObjectUrl(),this._selectedPreviewKind="empty",this._selectedPreviewSrc="",this._selectedPreviewAlt="",this._selectedPreviewTitle="",this._selectedPreviewMeta=""}_clearNativeInputValue(){const e=this.renderRoot.querySelector('[data-role="native-input"]');if(e)try{e.value=""}catch{}}_revokeObjectUrl(){this._objectUrl&&(URL.revokeObjectURL(this._objectUrl),this._objectUrl="")}_getPreviewKindForFile(e){const t=(e.type||"").toLowerCase(),o=this._getFileExtension(e.name).toLowerCase();return t.startsWith("image/")||["png","jpg","jpeg","webp","svg","gif","bmp","avif"].includes(o)?"image":"file"}_getFileExtension(e){return/\.([^.]+)$/.exec(e||"")?.[1]??""}_getFileExtensionLabel(e){return(this._getFileExtension(e)||(this._resolvedPreviewKind==="image"?"IMG":"FIL")).slice(0,6).toUpperCase()}_getFileTypeLabel(e){if(e.type)return e.type;const t=this._getFileExtension(e.name);return t?t.toUpperCase():"Okänd filtyp"}_formatFileSize(e){return!Number.isFinite(e)||e<0?"":e<1024?`${e} B`:e<1024*1024?`${new Intl.NumberFormat("sv-SE",{maximumFractionDigits:1}).format(e/1024)} kB`:`${new Intl.NumberFormat("sv-SE",{maximumFractionDigits:1}).format(e/(1024*1024))} MB`}_renderPreviewMedia(){return this._resolvedPreviewKind==="image"&&this._resolvedPreviewSrc?p`<img class="scb-drop-zone__preview-image" src=${this._resolvedPreviewSrc} alt=${this._resolvedPreviewAlt} />`:this._hasPreview?p`
|
|
2
|
+
<div class="scb-drop-zone__preview-file-card">
|
|
3
|
+
<div class="scb-drop-zone__preview-file-card-inner">
|
|
4
|
+
<span class="scb-drop-zone__preview-file-extension">${this._getFileExtensionLabel(this._resolvedPreviewTitle)}</span>
|
|
5
|
+
<p class="scb-drop-zone__preview-file-label">Vald fil</p>
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
`:p`
|
|
9
|
+
<div class="scb-drop-zone__preview-placeholder">
|
|
10
|
+
<div class="scb-drop-zone__preview-placeholder-inner">
|
|
11
|
+
<span class="scb-drop-zone__preview-placeholder-label">${this.type==="image"?"Bild":"Fil"}</span>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
14
|
+
`}_renderPreview(){if(!this.showPreview)return null;const e=this._hasPreview?this._resolvedPreviewTitle:this._resolvedEmptyPreviewTitle,t=this._hasPreview?this._resolvedPreviewMeta:this._resolvedEmptyPreviewMeta;return p`
|
|
15
|
+
<div class="scb-drop-zone__preview">
|
|
16
|
+
<div class="scb-drop-zone__preview-media">
|
|
17
|
+
${this._renderPreviewMedia()}
|
|
18
|
+
</div>
|
|
19
|
+
|
|
20
|
+
<div class="scb-drop-zone__preview-body">
|
|
21
|
+
<p class="scb-drop-zone__preview-eyebrow">${this._resolvedPreviewEyebrow}</p>
|
|
22
|
+
<h3 class="scb-drop-zone__preview-title">${e}</h3>
|
|
23
|
+
<p class="scb-drop-zone__preview-meta">${t}</p>
|
|
24
|
+
|
|
25
|
+
${this._hasPreview?p`
|
|
26
|
+
<div class="scb-drop-zone__preview-actions">
|
|
27
|
+
<scb-button
|
|
28
|
+
data-role="replace-button"
|
|
29
|
+
variant="outlined"
|
|
30
|
+
size="medium"
|
|
31
|
+
label=${this._resolvedReplaceButtonLabel}
|
|
32
|
+
@click=${this._onReplaceButtonClick}
|
|
33
|
+
></scb-button>
|
|
34
|
+
<scb-button
|
|
35
|
+
data-role="remove-button"
|
|
36
|
+
variant="text"
|
|
37
|
+
size="medium"
|
|
38
|
+
label=${this._resolvedRemoveButtonLabel}
|
|
39
|
+
@click=${this._onRemoveButtonClick}
|
|
40
|
+
></scb-button>
|
|
41
|
+
</div>
|
|
42
|
+
`:null}
|
|
43
|
+
</div>
|
|
44
|
+
</div>
|
|
45
|
+
`}render(){const e={"scb-drop-zone__surface":!0,"is-dragover":this._isDragOver};return p`
|
|
46
|
+
<div class="scb-drop-zone">
|
|
47
|
+
<div class="scb-drop-zone__layout ${this.showPreview?"scb-drop-zone__layout--with-preview":""}">
|
|
48
|
+
<div
|
|
49
|
+
class=${Object.keys(e).filter(t=>e[t]).join(" ")}
|
|
50
|
+
data-role="zone"
|
|
51
|
+
role="button"
|
|
52
|
+
tabindex=${this.disabled?"-1":"0"}
|
|
53
|
+
aria-label=${this._resolvedLabel}
|
|
54
|
+
@click=${this._onZoneClick}
|
|
55
|
+
@keydown=${this._onZoneKeydown}
|
|
56
|
+
@dragenter=${this._onDragEnter}
|
|
57
|
+
@dragover=${this._onDragOver}
|
|
58
|
+
@dragleave=${this._onDragLeave}
|
|
59
|
+
@drop=${this._onDrop}
|
|
60
|
+
>
|
|
61
|
+
<input
|
|
62
|
+
class="scb-drop-zone__native-input"
|
|
63
|
+
data-role="native-input"
|
|
64
|
+
type="file"
|
|
65
|
+
.accept=${this._resolvedAccept}
|
|
66
|
+
?disabled=${this.disabled}
|
|
67
|
+
@change=${this._onNativeInputChange}
|
|
68
|
+
/>
|
|
69
|
+
|
|
70
|
+
<div class="scb-drop-zone__inner">
|
|
71
|
+
<h2 class="scb-drop-zone__title">${this._resolvedLabel}</h2>
|
|
72
|
+
<p class="scb-drop-zone__lead">${this._resolvedSupportingText}</p>
|
|
73
|
+
${this._resolvedMetaText?p`<p class="scb-drop-zone__meta">${this._resolvedMetaText}</p>`:null}
|
|
74
|
+
|
|
75
|
+
<div class="scb-drop-zone__actions">
|
|
76
|
+
<scb-button
|
|
77
|
+
data-role="choose-button"
|
|
78
|
+
variant="filled"
|
|
79
|
+
size="medium"
|
|
80
|
+
label=${this._resolvedButtonLabel}
|
|
81
|
+
@click=${this._onChooseButtonClick}
|
|
82
|
+
></scb-button>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
${this._renderPreview()}
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
`}};r.styles=v`
|
|
91
|
+
:host {
|
|
92
|
+
display: block;
|
|
93
|
+
width: 100%;
|
|
94
|
+
min-width: 0;
|
|
95
|
+
font-family: var(--brand-font, Inter, sans-serif);
|
|
96
|
+
color: var(--md-sys-color-on-surface, #111111);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.scb-drop-zone {
|
|
100
|
+
display: block;
|
|
101
|
+
width: 100%;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.scb-drop-zone__layout {
|
|
105
|
+
display: grid;
|
|
106
|
+
gap: var(--spacing-5, 16px);
|
|
107
|
+
align-items: stretch;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.scb-drop-zone__layout--with-preview {
|
|
111
|
+
grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.scb-drop-zone__surface,
|
|
115
|
+
.scb-drop-zone__preview {
|
|
116
|
+
min-width: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.scb-drop-zone__surface {
|
|
120
|
+
box-sizing: border-box;
|
|
121
|
+
width: 100%;
|
|
122
|
+
min-height: var(--scb-drop-zone-min-height, min(46vh, 420px));
|
|
123
|
+
height: 100%;
|
|
124
|
+
display: flex;
|
|
125
|
+
align-items: center;
|
|
126
|
+
justify-content: center;
|
|
127
|
+
padding: var(--spacing-8, 32px);
|
|
128
|
+
border: 2px dashed var(--md-sys-color-outline-variant, #cccccc);
|
|
129
|
+
border-radius: var(--radius-l, 16px);
|
|
130
|
+
background: var(--md-sys-color-surface-container-lowest, #ffffff);
|
|
131
|
+
cursor: pointer;
|
|
132
|
+
transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
|
|
133
|
+
outline: none;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
.scb-drop-zone__surface:hover,
|
|
137
|
+
.scb-drop-zone__surface:focus-visible,
|
|
138
|
+
.scb-drop-zone__surface.is-dragover {
|
|
139
|
+
border-color: var(--md-sys-color-primary, #005799);
|
|
140
|
+
background: var(--md-sys-color-surface-container, #f5f5f5);
|
|
141
|
+
box-shadow: 0 0 0 1px var(--md-sys-color-primary, #005799);
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
:host([disabled]) .scb-drop-zone__surface {
|
|
145
|
+
cursor: default;
|
|
146
|
+
opacity: 0.6;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.scb-drop-zone__inner {
|
|
150
|
+
width: min(760px, 100%);
|
|
151
|
+
text-align: center;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.scb-drop-zone__title {
|
|
155
|
+
margin: 0 0 var(--spacing-3, 8px) 0;
|
|
156
|
+
font-size: var(--md-sys-typescale-headline-medium-size, 24px);
|
|
157
|
+
line-height: var(--md-sys-typescale-headline-medium-line-height, 30px);
|
|
158
|
+
color: var(--md-sys-color-on-surface, #111111);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.scb-drop-zone__lead {
|
|
162
|
+
margin: 0;
|
|
163
|
+
color: var(--md-sys-color-on-surface-variant, #444444);
|
|
164
|
+
line-height: 1.6;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.scb-drop-zone__meta {
|
|
168
|
+
margin: var(--spacing-4, 12px) 0 0 0;
|
|
169
|
+
color: var(--md-sys-color-on-surface-variant, #444444);
|
|
170
|
+
line-height: 1.6;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.scb-drop-zone__actions {
|
|
174
|
+
display: flex;
|
|
175
|
+
justify-content: center;
|
|
176
|
+
margin-top: var(--spacing-6, 20px);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.scb-drop-zone__native-input {
|
|
180
|
+
display: none;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.scb-drop-zone__preview {
|
|
184
|
+
display: grid;
|
|
185
|
+
grid-template-columns: 1fr;
|
|
186
|
+
grid-template-rows: minmax(0, 1fr) auto;
|
|
187
|
+
gap: var(--spacing-6, 20px);
|
|
188
|
+
min-height: var(--scb-drop-zone-min-height, min(46vh, 420px));
|
|
189
|
+
height: 100%;
|
|
190
|
+
padding: var(--spacing-6, 20px);
|
|
191
|
+
box-sizing: border-box;
|
|
192
|
+
border: 1px solid var(--md-sys-color-outline-variant, #cccccc);
|
|
193
|
+
border-radius: var(--radius-l, 16px);
|
|
194
|
+
background: var(--md-sys-color-surface-container-lowest, #ffffff);
|
|
195
|
+
align-items: stretch;
|
|
196
|
+
align-content: stretch;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.scb-drop-zone__preview-media {
|
|
200
|
+
width: 100%;
|
|
201
|
+
height: 100%;
|
|
202
|
+
min-height: 0;
|
|
203
|
+
display: flex;
|
|
204
|
+
align-items: center;
|
|
205
|
+
justify-content: center;
|
|
206
|
+
padding: 0;
|
|
207
|
+
box-sizing: border-box;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
.scb-drop-zone__preview-image {
|
|
211
|
+
display: block;
|
|
212
|
+
max-width: 100%;
|
|
213
|
+
max-height: var(--scb-drop-zone-preview-max-height, 240px);
|
|
214
|
+
width: auto;
|
|
215
|
+
height: auto;
|
|
216
|
+
object-fit: contain;
|
|
217
|
+
border-radius: var(--radius-m, 12px);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.scb-drop-zone__preview-placeholder,
|
|
221
|
+
.scb-drop-zone__preview-file-card {
|
|
222
|
+
box-sizing: border-box;
|
|
223
|
+
width: 100%;
|
|
224
|
+
height: 100%;
|
|
225
|
+
display: flex;
|
|
226
|
+
align-items: center;
|
|
227
|
+
justify-content: center;
|
|
228
|
+
padding: var(--spacing-6, 20px);
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.scb-drop-zone__preview-placeholder-inner,
|
|
232
|
+
.scb-drop-zone__preview-file-card-inner {
|
|
233
|
+
box-sizing: border-box;
|
|
234
|
+
width: 100%;
|
|
235
|
+
max-width: 320px;
|
|
236
|
+
height: 100%;
|
|
237
|
+
min-height: 180px;
|
|
238
|
+
display: flex;
|
|
239
|
+
flex-direction: column;
|
|
240
|
+
align-items: center;
|
|
241
|
+
justify-content: center;
|
|
242
|
+
gap: var(--spacing-4, 12px);
|
|
243
|
+
padding: var(--spacing-6, 20px);
|
|
244
|
+
border: 2px dashed var(--md-sys-color-outline-variant, #cccccc);
|
|
245
|
+
border-radius: var(--radius-m, 12px);
|
|
246
|
+
background: var(--md-sys-color-surface-container-lowest, #ffffff);
|
|
247
|
+
text-align: center;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.scb-drop-zone__preview-file-card-inner {
|
|
251
|
+
border-style: solid;
|
|
252
|
+
background: var(--md-sys-color-surface-container, #f5f5f5);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.scb-drop-zone__preview-placeholder-label,
|
|
256
|
+
.scb-drop-zone__preview-file-extension {
|
|
257
|
+
display: inline-flex;
|
|
258
|
+
align-items: center;
|
|
259
|
+
justify-content: center;
|
|
260
|
+
min-width: 72px;
|
|
261
|
+
min-height: 72px;
|
|
262
|
+
padding: var(--spacing-3, 8px);
|
|
263
|
+
border-radius: var(--radius-m, 12px);
|
|
264
|
+
background: var(--md-sys-color-surface-container, #f5f5f5);
|
|
265
|
+
color: var(--md-sys-color-on-surface, #111111);
|
|
266
|
+
font-size: var(--md-sys-typescale-title-medium-size, 16px);
|
|
267
|
+
line-height: var(--md-sys-typescale-title-medium-line-height, 24px);
|
|
268
|
+
font-weight: 700;
|
|
269
|
+
letter-spacing: 0.06em;
|
|
270
|
+
text-transform: uppercase;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.scb-drop-zone__preview-file-extension {
|
|
274
|
+
background: var(--md-sys-color-primary-container, #d9e2ff);
|
|
275
|
+
color: var(--md-sys-color-on-primary-container, #001944);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.scb-drop-zone__preview-file-label {
|
|
279
|
+
margin: 0;
|
|
280
|
+
color: var(--md-sys-color-on-surface-variant, #444444);
|
|
281
|
+
line-height: 1.6;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.scb-drop-zone__preview-body {
|
|
285
|
+
display: flex;
|
|
286
|
+
flex-direction: column;
|
|
287
|
+
min-width: 0;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.scb-drop-zone__preview-eyebrow {
|
|
291
|
+
margin: 0 0 var(--spacing-2, 4px) 0;
|
|
292
|
+
color: var(--md-sys-color-on-surface-variant, #444444);
|
|
293
|
+
font-size: var(--md-sys-typescale-body-small-size, 14px);
|
|
294
|
+
line-height: var(--md-sys-typescale-body-small-line-height, 20px);
|
|
295
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking, 0.1px);
|
|
296
|
+
text-transform: uppercase;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.scb-drop-zone__preview-title {
|
|
300
|
+
margin: 0;
|
|
301
|
+
color: var(--md-sys-color-on-surface, #111111);
|
|
302
|
+
font-size: var(--md-sys-typescale-title-large-size, 20px);
|
|
303
|
+
line-height: var(--md-sys-typescale-title-large-line-height, 28px);
|
|
304
|
+
word-break: break-word;
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.scb-drop-zone__preview-meta {
|
|
308
|
+
margin: var(--spacing-3, 8px) 0 0 0;
|
|
309
|
+
color: var(--md-sys-color-on-surface-variant, #444444);
|
|
310
|
+
line-height: 1.6;
|
|
311
|
+
word-break: break-word;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.scb-drop-zone__preview-actions {
|
|
315
|
+
display: flex;
|
|
316
|
+
flex-wrap: wrap;
|
|
317
|
+
gap: var(--spacing-3, 8px);
|
|
318
|
+
margin-top: auto;
|
|
319
|
+
padding-top: var(--spacing-5, 16px);
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
@media (max-width: 900px) {
|
|
323
|
+
.scb-drop-zone__layout--with-preview {
|
|
324
|
+
grid-template-columns: 1fr;
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
`;i([a({type:String,reflect:!0})],r.prototype,"type",2);i([a({type:String})],r.prototype,"label",2);i([a({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);i([a({type:String,attribute:"meta-text"})],r.prototype,"metaText",2);i([a({type:String,attribute:"button-label"})],r.prototype,"buttonLabel",2);i([a({type:String,attribute:"replace-button-label"})],r.prototype,"replaceButtonLabel",2);i([a({type:String,attribute:"remove-button-label"})],r.prototype,"removeButtonLabel",2);i([a({type:String,attribute:"preview-eyebrow"})],r.prototype,"previewEyebrow",2);i([a({type:String,attribute:"empty-preview-title"})],r.prototype,"emptyPreviewTitle",2);i([a({type:String,attribute:"empty-preview-meta"})],r.prototype,"emptyPreviewMeta",2);i([a({type:String})],r.prototype,"accept",2);i([a({type:Boolean,attribute:"show-preview",reflect:!0})],r.prototype,"showPreview",2);i([a({type:Boolean,reflect:!0})],r.prototype,"disabled",2);i([a({type:String,attribute:!1})],r.prototype,"previewSrc",2);i([a({type:String,attribute:!1})],r.prototype,"previewAlt",2);i([a({type:String,attribute:!1})],r.prototype,"previewTitle",2);i([a({type:String,attribute:!1})],r.prototype,"previewMeta",2);i([c()],r.prototype,"_isDragOver",2);i([c()],r.prototype,"_selectedPreviewKind",2);i([c()],r.prototype,"_selectedPreviewSrc",2);i([c()],r.prototype,"_selectedPreviewAlt",2);i([c()],r.prototype,"_selectedPreviewTitle",2);i([c()],r.prototype,"_selectedPreviewMeta",2);r=i([_("scb-drop-zone")],r);
|
|
@@ -72,6 +72,17 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
72
72
|
--scb-select-option-letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
73
73
|
--scb-select-option-icon-size: var(--icon-size-small, 20px);
|
|
74
74
|
}
|
|
75
|
+
:host([size='extra-small']) {
|
|
76
|
+
--scb-select-option-padding-y: var(--spacing-2);
|
|
77
|
+
--scb-select-option-padding-x: var(--spacing-3);
|
|
78
|
+
--scb-select-option-gap: var(--spacing-2);
|
|
79
|
+
--scb-select-option-min-height: 32px;
|
|
80
|
+
|
|
81
|
+
--scb-select-option-font-size: var(--md-sys-typescale-body-small-size);
|
|
82
|
+
--scb-select-option-line-height: var(--md-sys-typescale-body-small-line-height);
|
|
83
|
+
--scb-select-option-letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
84
|
+
--scb-select-option-icon-size: var(--icon-size-extra-small, 16px);
|
|
85
|
+
}
|
|
75
86
|
.select {
|
|
76
87
|
position: relative;
|
|
77
88
|
|
|
@@ -115,6 +126,11 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
115
126
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
116
127
|
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
117
128
|
}
|
|
129
|
+
:host([size='extra-small']) .selected-value {
|
|
130
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
131
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
132
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
133
|
+
}
|
|
118
134
|
.selected-value-container:focus-within {
|
|
119
135
|
outline: none;
|
|
120
136
|
}
|
|
@@ -136,6 +152,11 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
136
152
|
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
137
153
|
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
138
154
|
}
|
|
155
|
+
:host([size='extra-small']) .select-label {
|
|
156
|
+
font-size: var(--md-sys-typescale-label-small-size);
|
|
157
|
+
line-height: var(--md-sys-typescale-label-small-line-height);
|
|
158
|
+
letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
159
|
+
}
|
|
139
160
|
.select-sub-label{
|
|
140
161
|
font-size: var(--md-sys-typescale-body-large-size);
|
|
141
162
|
line-height: var(--md-sys-typescale-body-large-line-height);
|
|
@@ -152,6 +173,11 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
152
173
|
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
153
174
|
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
154
175
|
}
|
|
176
|
+
:host([size='extra-small']) .select-sub-label {
|
|
177
|
+
font-size: var(--md-sys-typescale-body-small-size);
|
|
178
|
+
line-height: var(--md-sys-typescale-body-small-line-height);
|
|
179
|
+
letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
180
|
+
}
|
|
155
181
|
md-focus-ring {
|
|
156
182
|
position:absolute;
|
|
157
183
|
border-radius: 8px;
|
|
@@ -220,5 +246,8 @@ import{a as d,n,i as h,j as u,x as p,t as g}from"../../vendor/vendor.js";import"
|
|
|
220
246
|
:host([size='small']) .selected-value-container {
|
|
221
247
|
padding: var(--spacing-4) 52px var(--spacing-4) var(--spacing-4);
|
|
222
248
|
}
|
|
249
|
+
:host([size='extra-small']) .selected-value-container {
|
|
250
|
+
padding: var(--spacing-3) 44px var(--spacing-3) var(--spacing-3);
|
|
251
|
+
}
|
|
223
252
|
|
|
224
253
|
`;o([n({type:String})],l.prototype,"variant",2);o([n({type:String})],l.prototype,"value",2);o([n({type:Array})],l.prototype,"values",2);o([n({type:Boolean})],l.prototype,"disabled",2);o([n({type:Boolean,reflect:!0})],l.prototype,"open",2);o([n({type:String})],l.prototype,"label",2);o([n({type:String})],l.prototype,"name",2);o([n({type:String})],l.prototype,"placeholder",2);o([n({type:String,attribute:"supporting-text"})],l.prototype,"supportingText",2);o([n({type:Boolean,attribute:"with-radiobuttons"})],l.prototype,"withRadiobuttons",2);o([n({type:String,reflect:!0})],l.prototype,"size",2);o([n({type:String,reflect:!0})],l.prototype,"spacing",2);o([n({type:String,attribute:"spacing-top",reflect:!0})],l.prototype,"spacingTop",2);o([n({type:String,attribute:"spacing-bottom",reflect:!0})],l.prototype,"spacingBottom",2);o([n({type:String,attribute:"spacing-left",reflect:!0})],l.prototype,"spacingLeft",2);o([n({type:String,attribute:"spacing-right",reflect:!0})],l.prototype,"spacingRight",2);o([n({type:String,attribute:"z-index"})],l.prototype,"zIndex",2);l=o([g("scb-select")],l);
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{a as
|
|
1
|
+
import{a as f,n as p,i as b,x as g,t as _}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";(function(){try{var o=typeof globalThis<"u"?globalThis:window;if(!o.__scb_ce_guard_installed__){o.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(s,t,l){try{customElements.get(s)||r(s,t,l)}catch(a){var i=String(a||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,y=(o,r,s,t)=>{for(var l=t>1?void 0:t?w(r,s):r,i=o.length-1,a;i>=0;i--)(a=o[i])&&(l=(t?a(r,s,l):a(l))||l);return t&&l&&v(r,s,l),l};let m=class extends b{constructor(){super(...arguments),this.dataSorting=!1,this.columnWidthMode="auto",this._sortedColumn=null,this._sortDirection="asc",this._columnWidthFrame=null,this._onSlotChange=()=>{this._attachThListeners()}}render(){return g`
|
|
2
2
|
<div class="scb-table-scroll-wrapper">
|
|
3
3
|
<slot @slotchange=${this._onSlotChange}></slot>
|
|
4
4
|
</div>
|
|
5
|
-
`}firstUpdated(){const
|
|
5
|
+
`}firstUpdated(){const o=this.shadowRoot?.querySelector("slot");o&&(o.addEventListener("slotchange",()=>this._attachThListeners()),this._attachThListeners())}updated(o){o.has("dataSorting")&&(this.dataSorting||(this._sortedColumn=null,this._sortDirection="asc"),this._attachThListeners()),o.has("columnWidthMode")&&this._queueColumnWidthUpdate()}disconnectedCallback(){super.disconnectedCallback(),this._columnWidthFrame!==null&&(cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=null)}_getTbody(){const o=this.shadowRoot?.querySelector("slot");if(!o)return null;const r=o.assignedNodes({flatten:!0});for(const s of r)if(s.nodeType===Node.ELEMENT_NODE){const t=s,l=t.tagName.toLowerCase()==="tbody"?t:t.querySelector("tbody");if(l)return l}return null}_getTables(){const o=this.shadowRoot?.querySelector("slot");if(!o)return[];const r=o.assignedNodes({flatten:!0}),s=[];return r.forEach(t=>{if(t.nodeType===Node.ELEMENT_NODE){const l=t;l.tagName.toLowerCase()==="table"&&s.push(l),s.push(...Array.from(l.querySelectorAll("table")))}}),s}_attachThListeners(){const o=this.shadowRoot?.querySelector("slot");if(!o)return;const r=o.assignedNodes({flatten:!0}),s=[],t=[],l=[],i=[];r.forEach(e=>{e.nodeType===Node.ELEMENT_NODE&&(s.push(...e.querySelectorAll("thead")),t.push(...e.querySelectorAll("th")),l.push(...e.querySelectorAll("td")),i.push(...e.querySelectorAll("tr")))}),s.forEach(e=>{e.style.borderTop="1px solid var(--md-sys-color-on-surface)"}),t.forEach((e,d)=>{e.style.textAlign="left",e.style.padding="12px",e.style.position="relative",e.style.backgroundColor="var(--md-sys-color-surface)",e.style.fontFamily="var(--md-sys-typescale-label-medium-font)",e.style.fontSize="var(--md-sys-typescale-label-medium-size)",e.style.lineHeight="var(--md-sys-typescale-label-medium-line-height)",e.style.fontWeight=" var(--weight-bold)",e.style.letterSpacing="var(--md-sys-typescale-label-medium-tracking)",e.style.verticalAlign="bottom",e.style.borderRight="1px solid var(--md-sys-color-on-surface)",e.style.borderBottom="1px solid var(--md-sys-color-on-surface)";const h=(e.textContent??"").replace(/\s+/g," ").trim();for(;e.firstChild;)e.removeChild(e.firstChild);const c=document.createElement("p");if(c.textContent=h,c.style.margin="0",this.dataSorting){const n=document.createElement("scb-icon-button");n.className="scb-sort-icon",n.onclick=()=>this._onThClick(d),n.setAttribute("variant","standard"),n.setAttribute("size","small"),n.style.alignSelf="end",this._sortedColumn===d?(n.setAttribute("variant","filled-tonal"),n.setAttribute("icon",this._sortDirection==="asc"?"arrow_downward":"arrow_upward")):(n.setAttribute("icon","swap_horiz"),n.style.transform+=" rotate(90deg)");const u=document.createElement("div");u.style.display="flex",u.style.gap="8px",u.style.flexWrap="nowrap",u.style.alignItems="center",u.appendChild(c),u.appendChild(n),e.appendChild(u)}else e.appendChild(c)}),l.forEach(e=>{e.style.padding="12px",e.style.textAlign="left",e.style.borderTop="1px solid var(--md-sys-color-outline-variant)",e.style.verticalAlign="text-top",e.style.backgroundColor="var(--md-sys-color-surface)",e.style.fontFamily="var(--md-sys-typescale-body-medium-font)",e.style.fontSize="var(--md-sys-typescale-body-medium-size)",e.style.lineHeight="var(--md-sys-typescale-body-medium-line-height)",e.style.fontWeight="var(--md-sys-typescale-body-medium-weight)",e.style.letterSpacing="var(--md-sys-typescale-body-medium-tracking)",e.style.borderRight="1px solid var(--md-sys-color-on-surface)",e.style.borderBottom="1px solid var(--md-sys-color-on-surface)"}),i.forEach(e=>{const d=e.querySelectorAll("th");d.length>0&&d.forEach((c,n)=>{n===d.length-1&&(c.style.borderRight="none")});const h=e.querySelectorAll("td");h.length>0&&h.forEach((c,n)=>{n===h.length-1&&(c.style.borderRight="none")})});const a=this._getTbody();a&&Array.from(a.querySelectorAll("tr")).forEach((d,h)=>{const c=h%2===0?"var(--md-sys-color-surface-container)":"var(--md-sys-color-surface)";d.querySelectorAll("td").forEach(n=>{n.style.backgroundColor=c})}),this._queueColumnWidthUpdate()}_queueColumnWidthUpdate(){this._columnWidthFrame!==null&&cancelAnimationFrame(this._columnWidthFrame),this._columnWidthFrame=requestAnimationFrame(()=>{this._columnWidthFrame=null,this._applyColumnWidthMode()})}_applyColumnWidthMode(){this._getTables().forEach(r=>{if(this._removeGeneratedColGroup(r),r.style.tableLayout="",this.columnWidthMode!=="header")return;const s=Array.from(r.querySelectorAll("thead tr")),t=s[s.length-1];if(!t)return;const i=Array.from(t.cells).map(a=>`${Math.ceil(this._measureCellContentWidth(a))}px`);this._applyGeneratedColGroup(r,i),r.style.tableLayout="fixed"})}_applyGeneratedColGroup(o,r){const s=document.createElement("colgroup");s.setAttribute("data-scb-generated-column-widths","true"),r.forEach(t=>{const l=document.createElement("col");l.style.width=t,l.style.minWidth=t,s.appendChild(l)}),o.insertBefore(s,o.firstChild)}_removeGeneratedColGroup(o){o.querySelector('colgroup[data-scb-generated-column-widths="true"]')?.remove()}_measureCellContentWidth(o){const r=o.firstElementChild?.cloneNode(!0)??document.createElement("span");o.firstElementChild||(r.textContent=o.textContent??"");const s=window.getComputedStyle(o),t=document.createElement("div");t.style.position="absolute",t.style.left="-99999px",t.style.top="0",t.style.visibility="hidden",t.style.pointerEvents="none",t.style.width="max-content",t.style.maxWidth="none",t.style.whiteSpace="nowrap",t.style.fontFamily=s.fontFamily,t.style.fontSize=s.fontSize,t.style.fontWeight=s.fontWeight,t.style.lineHeight=s.lineHeight,t.style.letterSpacing=s.letterSpacing,r instanceof HTMLElement&&(r.style.width="max-content",r.style.maxWidth="none",r.style.whiteSpace="nowrap"),t.appendChild(r),document.body.appendChild(t);const l=parseFloat(s.paddingLeft||"0"),i=parseFloat(s.paddingRight||"0"),a=t.getBoundingClientRect().width+l+i;return document.body.removeChild(t),a}_onThClick(o){this.dataSorting&&(this._sortedColumn===o?this._sortDirection=this._sortDirection==="asc"?"desc":"asc":(this._sortedColumn=o,this._sortDirection="asc"),this._sortTable(o,this._sortDirection),this._attachThListeners())}_sortTable(o,r){const s=this._getTbody();if(!s)return;const t=Array.from(s.querySelectorAll("tr"));t.sort((l,i)=>{const a=l.children[o]?.textContent?.trim()??"",e=i.children[o]?.textContent?.trim()??"",d=Date.parse(a.replace(/\s+/g," ")),h=Date.parse(e.replace(/\s+/g," "));if(!isNaN(d)&&!isNaN(h))return r==="asc"?d-h:h-d;const c=parseFloat(a.replace(",",".")),n=parseFloat(e.replace(",","."));if(!isNaN(c)&&!isNaN(n))return r==="asc"?c-n:n-c;const u=a.localeCompare(e,"sv");return r==="asc"?u:-u}),t.forEach(l=>s.appendChild(l))}};m.styles=f`
|
|
6
6
|
:host {
|
|
7
7
|
display: block;
|
|
8
8
|
color: var(--md-sys-color-on-surface);
|
|
@@ -48,4 +48,4 @@ import{a as m,n as f,i as b,x as g,t as v}from"../../vendor/vendor.js";import"..
|
|
|
48
48
|
::slotted(th:hover) .scb-sort-icon {
|
|
49
49
|
pointer-events: auto;
|
|
50
50
|
}
|
|
51
|
-
`;
|
|
51
|
+
`;y([p({type:Boolean,attribute:"data-sorting"})],m.prototype,"dataSorting",2);y([p({type:String,attribute:"column-width-mode"})],m.prototype,"columnWidthMode",2);m=y([_("scb-table")],m);
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as _,n,r as w,i as $,x as c,t as
|
|
1
|
+
import{a as _,n,r as w,i as $,x as c,t as z}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-datepicker/scb-datepicker.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,o,d){try{customElements.get(i)||t(i,o,d)}catch(h){var p=String(h||"");if(p.indexOf("already been used")===-1&&p.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var k=Object.defineProperty,E=Object.getOwnPropertyDescriptor,v=e=>{throw TypeError(e)},l=(e,t,i,o)=>{for(var d=o>1?void 0:o?E(t,i):t,p=e.length-1,h;p>=0;p--)(h=e[p])&&(d=(o?h(t,i,d):h(d))||d);return o&&d&&k(t,i,d),d},S=(e,t,i)=>t.has(e)||v("Cannot "+i),L=(e,t,i)=>t.has(e)?v("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,i),r=(e,t,i)=>(S(e,t,"access private method"),i),a,f,b,g,m,x,y,u;let s=class extends ${constructor(){super(),L(this,a),this._internals=null,this._inputFocused=!1,this._kbShouldShowRing=!1,this._onGlobalKeydown=e=>{e.key==="Tab"&&(this._kbShouldShowRing=!0,this._inputFocused&&r(this,a,u).call(this))},this._onGlobalPointerDown=()=>{this._kbShouldShowRing=!1,this._inputFocused&&r(this,a,u).call(this)},this._hasRenderedOnce=!1,this._boundField=null,this._onFieldInput=()=>{const e=this._boundField;if(!e)return;const t=e;if(this.value=t.value,this._internals){const i=this.disabled?null:this.value;this._internals.setFormValue(i)}r(this,a,g).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,r(this,a,u).call(this)},this._onFieldBlur=()=>{this._inputFocused=!1,r(this,a,u).call(this)},this.type="text",this.label="",this.supportingText="",this.errorText="",this.leadingIcon="",this.name="",this.pattern="",this.value="",this.underLabel="",this.error=!1,this.disabled=!1,this.required=!1,this.size="large",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._inputId="",this._showDatepicker=!1,this._toggleDatepicker=()=>{this._showDatepicker=!this._showDatepicker},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)}r(this,a,g).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==="extra-small"?this.setAttribute("data-density","-5"):this.size==="small"?this.setAttribute("data-density","-4"):this.size==="medium"?this.setAttribute("data-density","-2"):this.removeAttribute("data-density")}render(){const e=this.leadingIcon?c`<md-icon class="scb-textfield-icon">${this.leadingIcon}</md-icon>`:null,t=this.error?c`<md-icon class="scb-textfield-error-icon" aria-hidden="true">error</md-icon>`:null;this.underLabel=this.error?this.errorText||"Ogiltig inmatning.":this.supportingText,this.value=this.value||"";const i=this.underLabel?`${this._inputId}-supporting-text`:void 0,o=this.type==="search"&&this.value?c`
|
|
2
2
|
<button
|
|
3
3
|
type="button"
|
|
4
4
|
class="scb-textfield-clear"
|
|
@@ -196,7 +196,7 @@ import{a as _,n,r as w,i as $,x as c,t as k}from"../../vendor/vendor.js";import"
|
|
|
196
196
|
<md-focus-ring class="input-ring"></md-focus-ring>
|
|
197
197
|
</div>
|
|
198
198
|
</div>
|
|
199
|
-
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),
|
|
199
|
+
`}firstUpdated(e){super.firstUpdated(e),this._initialValue=this.value,this._internals&&this.value&&this._internals.setFormValue(this.value),r(this,a,m).call(this),r(this,a,f).call(this)}updated(e){if(super.updated(e),this.toggleAttribute("aria-disabled",this.disabled),e.has("size")&&this._syncDensityForSize(),this._internals&&(e.has("value")||e.has("disabled"))){const t=this.disabled?null:this.value;this._internals.setFormValue(t)}e.has("type")&&(r(this,a,m).call(this),this._hasRenderedOnce&&r(this,a,y).call(this)),(e.has("spacing")||e.has("spacingTop")||e.has("spacingBottom")||e.has("spacingLeft")||e.has("spacingRight"))&&r(this,a,f).call(this),this._hasRenderedOnce=!0}formDisabledCallback(e){this.disabled=e}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.value=this._initialValue;const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value=this._initialValue),this.error=!1},this._form.addEventListener("reset",this._formResetHandler,!0)),window.addEventListener("keydown",this._onGlobalKeydown,!0),window.addEventListener("pointerdown",this._onGlobalPointerDown,!0)}disconnectedCallback(){super.disconnectedCallback(),this._form&&this._formSubmitHandler&&(this._form.removeEventListener("submit",this._formSubmitHandler,!0),this._formResetHandler&&this._form.removeEventListener("reset",this._formResetHandler,!0)),r(this,a,x).call(this),window.removeEventListener("keydown",this._onGlobalKeydown,!0),window.removeEventListener("pointerdown",this._onGlobalPointerDown,!0)}reportValidity(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){this.required&&!e.value?e.setCustomValidity(this.errorText||"Ogiltig inmatning."):e.setCustomValidity("");const t=e.reportValidity();this.error=!t;const i=t?"":this.errorText||e.validationMessage||"Ogiltig inmatning.";return t||(this.errorText=i),this._internals&&(t?this._internals.setValidity({}):this._internals.setValidity({customError:!0},i,e)),t}return!0}_onClearClick(){const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)){if(e.value="",this.value="",this._internals){const t=this.disabled?null:this.value;this._internals.setFormValue(t),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()}}};a=new WeakSet;f=function(){const e=r(this,a,b).call(this,this.spacing),t=r(this,a,b).call(this,this.spacingTop)??e,i=r(this,a,b).call(this,this.spacingBottom)??e,o=r(this,a,b).call(this,this.spacingLeft),d=r(this,a,b).call(this,this.spacingRight);t?this.style.setProperty("--scb-textfield-spacing-block-start",t):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"),o?this.style.setProperty("--scb-textfield-spacing-inline-start",o):this.style.removeProperty("--scb-textfield-spacing-inline-start"),d?this.style.setProperty("--scb-textfield-spacing-inline-end",d):this.style.removeProperty("--scb-textfield-spacing-inline-end")};b=function(e){if(!e)return;const t=String(e).trim();if(t)return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t};g=function(){if(!this.pattern)return;if(!this.value){this.error=!1;return}const e=new RegExp(this.pattern);this.error=!e.test(this.value)};m=function(){const e=this.shadowRoot?.querySelector(".scb-textfield");e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&this._boundField!==e&&(r(this,a,x).call(this),this._boundField=e,this.type!=="time"&&e.addEventListener("input",this._onFieldInput),e.addEventListener("change",this._onFieldChange),e.addEventListener("select",this._onFieldSelect),e.addEventListener("focus",this._onFieldFocus),e.addEventListener("blur",this._onFieldBlur))};x=function(){const e=this._boundField;e&&(e.removeEventListener("input",this._onFieldInput),e.removeEventListener("change",this._onFieldChange),e.removeEventListener("select",this._onFieldSelect),e.removeEventListener("focus",this._onFieldFocus),e.removeEventListener("blur",this._onFieldBlur),this._boundField=null)};y=function(){this._showDatepicker=!1;const e=this.shadowRoot?.querySelector(".scb-textfield");if(e&&(e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement)&&(e.value="",e.setCustomValidity("")),this.value="",this.error=!1,this._internals){const t=this.disabled?null:"";this._internals.setFormValue(t),this._internals.setValidity({})}};u=function(){const e=this.renderRoot?.querySelector(".ripple-wrapper");e&&(this._inputFocused&&this._kbShouldShowRing?e.setAttribute("data-kb-focus","true"):e.removeAttribute("data-kb-focus"))};s.formAssociated=!0;s.styles=[_`
|
|
200
200
|
:host {
|
|
201
201
|
--scb-textfield-number-max-width: 280px;
|
|
202
202
|
--scb-textfield-text-max-width: 400px;
|
|
@@ -304,6 +304,32 @@ import{a as _,n,r as w,i as $,x as c,t as k}from"../../vendor/vendor.js";import"
|
|
|
304
304
|
--scb-textfield-trailing-action-size: var(--scale-09, 36px);
|
|
305
305
|
}
|
|
306
306
|
|
|
307
|
+
:host([size='extra-small']) {
|
|
308
|
+
--scb-textfield-padding-x: var(--spacing-3);
|
|
309
|
+
--scb-textfield-padding-y: var(--spacing-2);
|
|
310
|
+
--scb-textfield-min-height: 32px;
|
|
311
|
+
|
|
312
|
+
--scb-textfield-font-size: var(--md-sys-typescale-body-small-size);
|
|
313
|
+
--scb-textfield-line-height: var(--md-sys-typescale-body-small-line-height);
|
|
314
|
+
|
|
315
|
+
--scb-textfield-label-font-size: var(--md-sys-typescale-label-small-size);
|
|
316
|
+
--scb-textfield-label-line-height: var(--md-sys-typescale-label-small-line-height);
|
|
317
|
+
--scb-textfield-label-letter-spacing: var(--md-sys-typescale-label-small-tracking);
|
|
318
|
+
|
|
319
|
+
--scb-textfield-supporting-font-size: var(--md-sys-typescale-body-small-size);
|
|
320
|
+
--scb-textfield-supporting-line-height: var(--md-sys-typescale-body-small-line-height);
|
|
321
|
+
--scb-textfield-supporting-letter-spacing: var(--md-sys-typescale-body-small-tracking);
|
|
322
|
+
|
|
323
|
+
--scb-textfield-leading-inset: var(--spacing-3);
|
|
324
|
+
--scb-textfield-leading-icon-size: var(--icon-size-extra-small, 16px);
|
|
325
|
+
--scb-textfield-leading-gap: var(--spacing-4);
|
|
326
|
+
|
|
327
|
+
--scb-textfield-trailing-inset: var(--spacing-3);
|
|
328
|
+
--scb-textfield-trailing-icon-size: var(--icon-size-extra-small, 16px);
|
|
329
|
+
--scb-textfield-trailing-gap: var(--spacing-2);
|
|
330
|
+
--scb-textfield-trailing-action-size: var(--scale-08, 32px);
|
|
331
|
+
}
|
|
332
|
+
|
|
307
333
|
:host([type='number']) {
|
|
308
334
|
--scb-textfield-max-width: var(--scb-textfield-number-max-width);
|
|
309
335
|
}
|
|
@@ -534,4 +560,4 @@ import{a as _,n,r as w,i as $,x as c,t as k}from"../../vendor/vendor.js";import"
|
|
|
534
560
|
transform: translateY(-50%);
|
|
535
561
|
z-index: 4;
|
|
536
562
|
}
|
|
537
|
-
`];
|
|
563
|
+
`];l([n({type:String,reflect:!0})],s.prototype,"type",2);l([n({type:String})],s.prototype,"label",2);l([n({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);l([n({type:String,attribute:"error-text"})],s.prototype,"errorText",2);l([n({type:String,attribute:"leading-icon"})],s.prototype,"leadingIcon",2);l([n({type:String})],s.prototype,"name",2);l([n({type:String})],s.prototype,"pattern",2);l([n({type:String,attribute:"value"})],s.prototype,"value",2);l([n({type:String})],s.prototype,"underLabel",2);l([n({type:Boolean,reflect:!0})],s.prototype,"error",2);l([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2);l([n({type:Boolean,reflect:!0})],s.prototype,"required",2);l([n({type:String,reflect:!0})],s.prototype,"size",2);l([n({type:String,reflect:!0})],s.prototype,"spacing",2);l([n({type:String,attribute:"spacing-top",reflect:!0})],s.prototype,"spacingTop",2);l([n({type:String,attribute:"spacing-bottom",reflect:!0})],s.prototype,"spacingBottom",2);l([n({type:String,attribute:"spacing-left",reflect:!0})],s.prototype,"spacingLeft",2);l([n({type:String,attribute:"spacing-right",reflect:!0})],s.prototype,"spacingRight",2);l([w()],s.prototype,"_showDatepicker",2);s=l([z("scb-textfield")],s);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "scb-wc-test",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.262",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "index.js",
|
|
@@ -148,6 +148,10 @@
|
|
|
148
148
|
"import": "./scb-drawer/scb-drawer.js",
|
|
149
149
|
"require": "./scb-drawer/scb-drawer.js"
|
|
150
150
|
},
|
|
151
|
+
"./scb-drop-zone": {
|
|
152
|
+
"import": "./scb-drop-zone/scb-drop-zone.js",
|
|
153
|
+
"require": "./scb-drop-zone/scb-drop-zone.js"
|
|
154
|
+
},
|
|
151
155
|
"./scb-dropdown": {
|
|
152
156
|
"import": "./scb-dropdown/scb-dropdown.js",
|
|
153
157
|
"require": "./scb-dropdown/scb-dropdown.js"
|
|
@@ -382,5 +386,5 @@
|
|
|
382
386
|
},
|
|
383
387
|
"./mvc/*": "./mvc/*"
|
|
384
388
|
},
|
|
385
|
-
"buildHash": "
|
|
389
|
+
"buildHash": "AADD15F68BB936A4DA1ABF19BA9A84452DFF8C292670F10EC8E4ACF08323D8F2"
|
|
386
390
|
}
|