@xplor-education/core-stencil-components 3.0.0 → 3.1.1
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/components/index.js.map +1 -1
- package/components/{p-DxxjL3sU.js → p-B49oUO_9.js} +3 -3
- package/components/{p-DxxjL3sU.js.map → p-B49oUO_9.js.map} +1 -1
- package/components/{p-DURNLP66.js → p-VIJbFoA4.js} +3 -3
- package/components/{p-DURNLP66.js.map → p-VIJbFoA4.js.map} +1 -1
- package/components/xplor-chat-widget.js +1 -1
- package/components/xplor-date-picker.js +1 -1
- package/components/xplor-drag-and-drop-input.js +3 -3
- package/components/xplor-drag-and-drop-input.js.map +1 -1
- package/components/xplor-dropdown.js +1 -1
- package/components/xplor-expansion-panel.js +4 -4
- package/components/xplor-expansion-panels.js +1 -1
- package/components/xplor-inline-checkbox.js +2 -2
- package/components/xplor-inline-date-picker.js +1 -1
- package/components/xplor-inline-switch.js +1 -1
- package/components/xplor-input-file.js +1 -1
- package/components/xplor-input-search.js +2 -2
- package/components/xplor-input-send.js +2 -2
- package/components/xplor-input-text-area.js +2 -2
- package/components/xplor-input-text-secondary.js +2 -2
- package/components/xplor-input-text.js +2 -2
- package/components/xplor-input-title.js +1 -1
- package/components/xplor-links.js +1 -1
- package/components/xplor-modal-persistent.js +1 -1
- package/components/xplor-radio-btn.js +2 -2
- package/components/xplor-section-card.js +2 -2
- package/components/xplor-section-heading.js +2 -2
- package/components/xplor-table.js +5 -5
- package/components/xplor-text-bubble.js +2 -2
- package/components/xplor-text-field.js +2 -2
- package/components/xplor-time-picker.js +6 -6
- package/dist/cjs/index-BjAapk2n.js.map +1 -1
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js +48 -48
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +1 -1
- package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js +4 -4
- package/dist/collection/components/xplor-badge-session-booking/xplor-badge-session-booking.js +2 -2
- package/dist/collection/components/xplor-btn-menu/xplor-btn-menu.js +2 -2
- package/dist/collection/components/xplor-combobox/xplor-combobox.js +2 -2
- package/dist/collection/components/xplor-datatable/xplor-datatable.js +3 -3
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +3 -8
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +2 -2
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/collection/components/xplor-dropdown/xplor-dropdown.js +1 -1
- package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js +4 -4
- package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js +1 -1
- package/dist/collection/components/xplor-file-upload/xplor-file-upload.js +2 -2
- package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.js +2 -2
- package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js +1 -1
- package/dist/collection/components/xplor-inline-switch/xplor-inline-switch.js +1 -1
- package/dist/collection/components/xplor-input-file/xplor-input-file.js +1 -1
- package/dist/collection/components/xplor-input-search/xplor-input-search.js +2 -2
- package/dist/collection/components/xplor-input-select/xplor-input-select.js +1 -1
- package/dist/collection/components/xplor-input-send/xplor-input-send.js +2 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.js +2 -2
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js +2 -2
- package/dist/collection/components/xplor-input-text-secondary/xplor-input-text-secondary.js +2 -2
- package/dist/collection/components/xplor-input-title/xplor-input-title.js +1 -1
- package/dist/collection/components/xplor-links/xplor-links.js +1 -1
- package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js +1 -1
- package/dist/collection/components/xplor-nav-tabs/xplor-nav-tabs.js +1 -1
- package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js +2 -2
- package/dist/collection/components/xplor-section-card/xplor-section-card.js +2 -2
- package/dist/collection/components/xplor-section-heading/xplor-section-heading.js +2 -2
- package/dist/collection/components/xplor-table/xplor-table.js +5 -5
- package/dist/collection/components/xplor-text-bubble/xplor-text-bubble.js +2 -2
- package/dist/collection/components/xplor-text-field/xplor-text-field.js +2 -2
- package/dist/collection/components/xplor-time-picker/xplor-time-picker.js +6 -6
- package/dist/collection/components/xplor-tooltip/xplor-tooltip.js +2 -2
- package/dist/collection/test-utils/index.js +3 -0
- package/dist/collection/test-utils/index.js.map +1 -0
- package/dist/collection/test-utils/mocks.js +46 -0
- package/dist/collection/test-utils/mocks.js.map +1 -0
- package/dist/collection/test-utils/spec-helpers.js +43 -0
- package/dist/collection/test-utils/spec-helpers.js.map +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-Dh0wQJt6.js → p-DQ8MCJFX.js} +3 -3
- package/dist/components/{p-Dh0wQJt6.js.map → p-DQ8MCJFX.js.map} +1 -1
- package/dist/components/{p-oOSnPjGy.js → p-J41B2nOt.js} +3 -3
- package/dist/components/{p-oOSnPjGy.js.map → p-J41B2nOt.js.map} +1 -1
- package/dist/components/xplor-chat-widget.js +1 -1
- package/dist/components/xplor-date-picker.js +1 -1
- package/dist/components/xplor-drag-and-drop-input.js +3 -3
- package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/components/xplor-dropdown.js +1 -1
- package/dist/components/xplor-expansion-panel.js +4 -4
- package/dist/components/xplor-expansion-panels.js +1 -1
- package/dist/components/xplor-inline-checkbox.js +2 -2
- package/dist/components/xplor-inline-date-picker.js +1 -1
- package/dist/components/xplor-inline-switch.js +1 -1
- package/dist/components/xplor-input-file.js +1 -1
- package/dist/components/xplor-input-search.js +2 -2
- package/dist/components/xplor-input-send.js +2 -2
- package/dist/components/xplor-input-text-area.js +2 -2
- package/dist/components/xplor-input-text-secondary.js +2 -2
- package/dist/components/xplor-input-text.js +2 -2
- package/dist/components/xplor-input-title.js +1 -1
- package/dist/components/xplor-links.js +1 -1
- package/dist/components/xplor-modal-persistent.js +1 -1
- package/dist/components/xplor-radio-btn.js +2 -2
- package/dist/components/xplor-section-card.js +2 -2
- package/dist/components/xplor-section-heading.js +2 -2
- package/dist/components/xplor-table.js +5 -5
- package/dist/components/xplor-text-bubble.js +2 -2
- package/dist/components/xplor-text-field.js +2 -2
- package/dist/components/xplor-time-picker.js +6 -6
- package/dist/esm/index-KRfMjDC2.js.map +1 -1
- package/dist/esm/xplor-alert-dialog_58.entry.js +48 -48
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +1 -1
- package/dist/hydrate/index.js +48 -48
- package/dist/hydrate/index.mjs +48 -48
- package/dist/types/test-utils/index.d.ts +2 -0
- package/dist/types/test-utils/mocks.d.ts +16 -0
- package/dist/types/test-utils/spec-helpers.d.ts +26 -0
- package/dist/xplor-component-library/{p-0df9ea5d.entry.js → p-5b0cee73.entry.js} +2 -2
- package/dist/xplor-component-library/p-5b0cee73.entry.js.map +1 -0
- package/dist/xplor-component-library/p-KRfMjDC2.js.map +1 -1
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +7 -3
- package/dist/xplor-component-library/p-0df9ea5d.entry.js.map +0 -1
|
@@ -242,7 +242,7 @@ export class XplorAutocomplete {
|
|
|
242
242
|
"references": {
|
|
243
243
|
"AutocompleteItem": {
|
|
244
244
|
"location": "local",
|
|
245
|
-
"path": "/Users/
|
|
245
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
|
|
246
246
|
"id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
|
|
247
247
|
}
|
|
248
248
|
}
|
|
@@ -505,7 +505,7 @@ export class XplorAutocomplete {
|
|
|
505
505
|
"references": {
|
|
506
506
|
"AutocompleteItem": {
|
|
507
507
|
"location": "local",
|
|
508
|
-
"path": "/Users/
|
|
508
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
|
|
509
509
|
"id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
|
|
510
510
|
}
|
|
511
511
|
}
|
|
@@ -529,7 +529,7 @@ export class XplorAutocomplete {
|
|
|
529
529
|
"references": {
|
|
530
530
|
"AutocompleteItem": {
|
|
531
531
|
"location": "local",
|
|
532
|
-
"path": "/Users/
|
|
532
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
|
|
533
533
|
"id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
|
|
534
534
|
}
|
|
535
535
|
}
|
|
@@ -586,7 +586,7 @@ export class XplorAutocomplete {
|
|
|
586
586
|
"references": {
|
|
587
587
|
"AutocompleteItem": {
|
|
588
588
|
"location": "local",
|
|
589
|
-
"path": "/Users/
|
|
589
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-autocomplete/xplor-autocomplete.tsx",
|
|
590
590
|
"id": "src/components/xplor-autocomplete/xplor-autocomplete.tsx::AutocompleteItem"
|
|
591
591
|
}
|
|
592
592
|
}
|
package/dist/collection/components/xplor-badge-session-booking/xplor-badge-session-booking.js
CHANGED
|
@@ -49,7 +49,7 @@ export class XplorBadgeSessionBooking {
|
|
|
49
49
|
"references": {
|
|
50
50
|
"Booking": {
|
|
51
51
|
"location": "local",
|
|
52
|
-
"path": "/Users/
|
|
52
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-badge-session-booking/xplor-badge-session-booking.tsx",
|
|
53
53
|
"id": "src/components/xplor-badge-session-booking/xplor-badge-session-booking.tsx::Booking"
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -73,7 +73,7 @@ export class XplorBadgeSessionBooking {
|
|
|
73
73
|
"references": {
|
|
74
74
|
"BookingItem": {
|
|
75
75
|
"location": "local",
|
|
76
|
-
"path": "/Users/
|
|
76
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-badge-session-booking/xplor-badge-session-booking.tsx",
|
|
77
77
|
"id": "src/components/xplor-badge-session-booking/xplor-badge-session-booking.tsx::BookingItem"
|
|
78
78
|
}
|
|
79
79
|
}
|
|
@@ -223,7 +223,7 @@ export class XplorBtnMenu {
|
|
|
223
223
|
"references": {
|
|
224
224
|
"MenuOption": {
|
|
225
225
|
"location": "local",
|
|
226
|
-
"path": "/Users/
|
|
226
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-btn-menu/xplor-btn-menu.tsx",
|
|
227
227
|
"id": "src/components/xplor-btn-menu/xplor-btn-menu.tsx::MenuOption"
|
|
228
228
|
}
|
|
229
229
|
}
|
|
@@ -341,7 +341,7 @@ export class XplorBtnMenu {
|
|
|
341
341
|
"references": {
|
|
342
342
|
"MenuOption": {
|
|
343
343
|
"location": "local",
|
|
344
|
-
"path": "/Users/
|
|
344
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-btn-menu/xplor-btn-menu.tsx",
|
|
345
345
|
"id": "src/components/xplor-btn-menu/xplor-btn-menu.tsx::MenuOption"
|
|
346
346
|
}
|
|
347
347
|
}
|
|
@@ -258,7 +258,7 @@ export class XplorCombobox {
|
|
|
258
258
|
"references": {
|
|
259
259
|
"ComboboxItem": {
|
|
260
260
|
"location": "local",
|
|
261
|
-
"path": "/Users/
|
|
261
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-combobox/xplor-combobox.tsx",
|
|
262
262
|
"id": "src/components/xplor-combobox/xplor-combobox.tsx::ComboboxItem"
|
|
263
263
|
}
|
|
264
264
|
}
|
|
@@ -515,7 +515,7 @@ export class XplorCombobox {
|
|
|
515
515
|
"references": {
|
|
516
516
|
"ComboboxItem": {
|
|
517
517
|
"location": "local",
|
|
518
|
-
"path": "/Users/
|
|
518
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-combobox/xplor-combobox.tsx",
|
|
519
519
|
"id": "src/components/xplor-combobox/xplor-combobox.tsx::ComboboxItem"
|
|
520
520
|
}
|
|
521
521
|
}
|
|
@@ -213,7 +213,7 @@ export class XplorDatatable {
|
|
|
213
213
|
"references": {
|
|
214
214
|
"DatatableColumn": {
|
|
215
215
|
"location": "local",
|
|
216
|
-
"path": "/Users/
|
|
216
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-datatable/xplor-datatable.tsx",
|
|
217
217
|
"id": "src/components/xplor-datatable/xplor-datatable.tsx::DatatableColumn"
|
|
218
218
|
}
|
|
219
219
|
}
|
|
@@ -277,7 +277,7 @@ export class XplorDatatable {
|
|
|
277
277
|
"references": {
|
|
278
278
|
"DatatablePagination": {
|
|
279
279
|
"location": "local",
|
|
280
|
-
"path": "/Users/
|
|
280
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-datatable/xplor-datatable.tsx",
|
|
281
281
|
"id": "src/components/xplor-datatable/xplor-datatable.tsx::DatatablePagination"
|
|
282
282
|
}
|
|
283
283
|
}
|
|
@@ -506,7 +506,7 @@ export class XplorDatatable {
|
|
|
506
506
|
"references": {
|
|
507
507
|
"DatatablePagination": {
|
|
508
508
|
"location": "local",
|
|
509
|
-
"path": "/Users/
|
|
509
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-datatable/xplor-datatable.tsx",
|
|
510
510
|
"id": "src/components/xplor-datatable/xplor-datatable.tsx::DatatablePagination"
|
|
511
511
|
}
|
|
512
512
|
}
|
|
@@ -1052,7 +1052,6 @@ ul.mdc-list li.mdc-list-item {
|
|
|
1052
1052
|
|
|
1053
1053
|
.drag-drop-zone {
|
|
1054
1054
|
position: relative;
|
|
1055
|
-
padding-bottom: 2.5rem;
|
|
1056
1055
|
}
|
|
1057
1056
|
|
|
1058
1057
|
.drag-drop-input-hidden {
|
|
@@ -1064,7 +1063,7 @@ ul.mdc-list li.mdc-list-item {
|
|
|
1064
1063
|
border-radius: 8px;
|
|
1065
1064
|
border: 2px dashed var(--color-secondary);
|
|
1066
1065
|
min-height: 160px;
|
|
1067
|
-
padding:
|
|
1066
|
+
padding: 1.5rem;
|
|
1068
1067
|
text-align: center;
|
|
1069
1068
|
transition: all 0.2s ease;
|
|
1070
1069
|
cursor: default;
|
|
@@ -1086,8 +1085,7 @@ ul.mdc-list li.mdc-list-item {
|
|
|
1086
1085
|
display: flex;
|
|
1087
1086
|
flex-direction: column;
|
|
1088
1087
|
align-items: center;
|
|
1089
|
-
gap: 0.
|
|
1090
|
-
padding: 0.25rem 0 0;
|
|
1088
|
+
gap: 0.75rem;
|
|
1091
1089
|
}
|
|
1092
1090
|
|
|
1093
1091
|
.drag-drop-card__icon {
|
|
@@ -1117,10 +1115,7 @@ ul.mdc-list li.mdc-list-item {
|
|
|
1117
1115
|
}
|
|
1118
1116
|
|
|
1119
1117
|
.drag-drop-card__action {
|
|
1120
|
-
|
|
1121
|
-
left: 50%;
|
|
1122
|
-
bottom: 0;
|
|
1123
|
-
transform: translateX(-50%);
|
|
1118
|
+
margin-top: 0.25rem;
|
|
1124
1119
|
}
|
|
1125
1120
|
|
|
1126
1121
|
.file-info {
|
|
@@ -123,9 +123,9 @@ export class XplorDragAndDropInput {
|
|
|
123
123
|
'drag-drop-card': true,
|
|
124
124
|
'drag-drop-card--dragover': this.dragover,
|
|
125
125
|
'drag-drop-card--disabled': this.disabled,
|
|
126
|
-
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, h("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), h("p", { key: '
|
|
126
|
+
}, onDrop: this.onDrop, onDragOver: this.onDragOver, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, role: "region", "aria-label": dropZoneLabel }, h("div", { key: '49325fd7ff2d44a045eba593e2cb3708316a5be4', class: "drag-drop-card__content" }, h("svg", { key: '23b8f38df073266201a01ec78a45b1cac924a3e4', class: "drag-drop-card__icon", xmlns: "http://www.w3.org/2000/svg", width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" }, h("path", { key: 'eb1c750d1657fd578cf15c9bc16d5d1885d703e8', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z", fill: "currentColor", opacity: "0.3" }), h("path", { key: '04dc16407d2abd999fbef9cc02346d499644f0a7', d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z", fill: "currentColor" })), h("h3", { key: '82c31b56cb5f17445748e0bfb8668caef4ceea59', class: "drag-drop-card__title" }, this.label), this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (h("p", { key: 'cd9a640967ce9cd8c959000771d78a57fe1df4ea', class: "drag-drop-card__accepts" }, "Accepted file types: ", this.getAcceptsLabel())), h("div", { key: 'c9a3987e06aceba90a379f6f5264998c218497a1', class: "drag-drop-card__action" }, h("xplor-button", { key: 'a26dd92027f90fb052ce3fa5cc456b18b5732b41', text: this.browseLabel, type: this.disabled ? 'disabled' : 'secondary', clickAction: this.openFileDialog, "aria-label": this.browseLabel }))))), this.currentFile && (h("div", { key: '75258825a2415d4f78dc05caa4931c2b65675c10', class: "file-info", "aria-live": "polite" }, this.showProgress() && (h("p", { key: '643fca5089d411ac0c2ac7cb2d8548450e18df49', class: "file-info__status" }, "Uploading ", this.progress === 100 ? '1' : '0', " / 1")), h("div", { key: '6829f00a6550dee83fc60496c6534272443c2974', class: "file-info__card" }, h("div", { key: 'cb234a2213fc3ae39993b11cb3d99878d643878f', class: "file-info__icon", "aria-hidden": "true" }, h("svg", { key: 'f657669caa7dd95b095b419908f94cf16e8530d7', xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'ef502814c77090e682f8b7e3e2d41dc3434a14fa', d: "M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z" }))), h("div", { key: '6bcc15939b14fbcfa71408e733489933e9322efa', class: "file-info__details" }, h("p", { key: '9840cd50a70cfec9ceb8588116677ed0da2d5b14', class: "file-info__name" }, this.currentFile.name), h("p", { key: 'f8aaf5f729278070ebd1d3a8137460dab67a130a', class: "file-info__meta" }, this.formatFileSize(this.currentFile.size), this.currentFile.lastModified
|
|
127
127
|
? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`
|
|
128
|
-
: ''), this.showProgress() && (h("div", { key: '
|
|
128
|
+
: ''), this.showProgress() && (h("div", { key: 'e30ab7e1514f72034cac41f748df00cd19423d2d', class: "file-info__progress-row" }, h("div", { key: '4ef4e335b0154adc44d940784ac0f01358fa4fd0', class: "file-info__progress-bar", role: "progressbar", "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": `Upload progress: ${Math.round(progressValue)}%` }, h("div", { key: '3328873cc9d457401ccfe46c3cee8c7c7d5280ab', class: "file-info__progress-fill", style: { width: `${progressValue}%` } })), h("span", { key: 'f3fab0a39db233a16bb1fefdbb15c2174808543d', class: "file-info__progress-text", "aria-hidden": "true" }, Math.round(this.progress), "%")))), h("button", { key: '70ff008be7088ff5744130ffecab2694eceff8ff', class: "file-info__remove", onClick: () => this.clearCurrentFile(), "aria-label": `Remove file ${this.currentFile.name}` }, h("svg", { key: '0c6957c250bde4af18641704ba8b248ff8b815b4', xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '0131e03966350788114f5ac999488c19d0186f90', d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z" })))))), h("input", { key: 'a40511c99ac1292d5eb5a37be23a235b5103ab65', id: "drag-drop-file-select", type: "file", disabled: this.disabled, accept: this.accepts, class: "drag-drop-input-hidden", ref: (el) => (this.fileInputEl = el), onChange: this.onFileSelect, "aria-label": `${this.browseLabel} - ${this.label}`, tabindex: -1 })));
|
|
129
129
|
}
|
|
130
130
|
static get is() { return "xplor-drag-and-drop-input"; }
|
|
131
131
|
static get encapsulation() { return "scoped"; }
|
package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /**\n * Disable the file upload\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Accepted file types (e.g., 'image/png,.pdf')\n */\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /**\n * Instruction text displayed in the drop zone\n */\n @Prop() label: string = 'Drag and drop your files here';\n\n /**\n * Browse button label text\n */\n @Prop() browseLabel: string = 'Browse Files';\n\n /**\n * Accessible label for the drop zone area\n */\n @Prop() ariaLabel: string;\n\n /**\n * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n */\n @Prop() progress: number = -1;\n\n @State() dragover: boolean = false;\n @State() currentFile: File | null = null;\n\n /**\n * Emitted when a file is selected via drop or click\n */\n @Event() fileSelect: EventEmitter<File>;\n\n /**\n * Emitted when the current file is cleared\n */\n @Event() fileClear: EventEmitter<void>;\n\n private fileInputEl: HTMLInputElement;\n\n /**\n * Clears the currently selected file\n */\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n return '*';\n }\n\n return accepts;\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n private formatDate = (timestamp: number): string => {\n const date = new Date(timestamp);\n const day = date.getDate();\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n\n const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n : (day === 2 || day === 22) ? 'nd'\n : (day === 3 || day === 23) ? 'rd'\n : 'th';\n\n const hours = date.getHours();\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n\n return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n };\n\n private showProgress = (): boolean => {\n return this.progress >= 0 && this.progress <= 100;\n };\n\n render() {\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\n const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n return (\n <Host>\n <div class=\"drag-drop-zone\">\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n role=\"region\"\n aria-label={dropZoneLabel}\n >\n <div class=\"drag-drop-card__content\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n fill=\"currentColor\"\n />\n </svg>\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n <p class=\"drag-drop-card__divider\">or</p>\n </div>\n </div>\n\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'secondary'}\n clickAction={this.openFileDialog}\n aria-label={this.browseLabel}\n ></xplor-button>\n </div>\n </div>\n\n {this.currentFile && (\n <div class=\"file-info\" aria-live=\"polite\">\n {this.showProgress() && (\n <p class=\"file-info__status\">\n Uploading {this.progress === 100 ? '1' : '0'} / 1\n </p>\n )}\n <div class=\"file-info__card\">\n <div class=\"file-info__icon\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n </svg>\n </div>\n <div class=\"file-info__details\">\n <p class=\"file-info__name\">{this.currentFile.name}</p>\n <p class=\"file-info__meta\">\n {this.formatFileSize(this.currentFile.size)}\n {this.currentFile.lastModified\n ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n : ''}\n </p>\n {this.showProgress() && (\n <div class=\"file-info__progress-row\">\n <div\n class=\"file-info__progress-bar\"\n role=\"progressbar\"\n aria-valuenow={progressValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n >\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${progressValue}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n </div>\n )}\n </div>\n <button\n class=\"file-info__remove\"\n onClick={() => this.clearCurrentFile()}\n aria-label={`Remove file ${this.currentFile.name}`}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n </svg>\n </button>\n </div>\n </div>\n )}\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n aria-label={`${this.browseLabel} - ${this.label}`}\n tabindex={-1}\n />\n </Host>\n );\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"xplor-drag-and-drop-input.js","sourceRoot":"","sources":["../../../src/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Method } from '@stencil/core';\n\nconst DEFAULT_ACCEPT_ALL = '*' + '/' + '*';\n\n@Component({\n tag: 'xplor-drag-and-drop-input',\n styleUrl: 'xplor-drag-and-drop-input.scss',\n scoped: true,\n})\nexport class XplorDragAndDropInput {\n /**\n * Disable the file upload\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Accepted file types (e.g., 'image/png,.pdf')\n */\n @Prop() accepts: string = DEFAULT_ACCEPT_ALL;\n\n /**\n * Instruction text displayed in the drop zone\n */\n @Prop() label: string = 'Drag and drop your files here';\n\n /**\n * Browse button label text\n */\n @Prop() browseLabel: string = 'Browse Files';\n\n /**\n * Accessible label for the drop zone area\n */\n @Prop() ariaLabel: string;\n\n /**\n * Upload progress percentage (0-100). Set to -1 or leave undefined to hide the progress bar.\n */\n @Prop() progress: number = -1;\n\n @State() dragover: boolean = false;\n @State() currentFile: File | null = null;\n\n /**\n * Emitted when a file is selected via drop or click\n */\n @Event() fileSelect: EventEmitter<File>;\n\n /**\n * Emitted when the current file is cleared\n */\n @Event() fileClear: EventEmitter<void>;\n\n private fileInputEl: HTMLInputElement;\n\n /**\n * Clears the currently selected file\n */\n @Method()\n async clearCurrentFile() {\n this.currentFile = null;\n if (this.fileInputEl) {\n this.fileInputEl.value = '';\n }\n this.fileClear.emit();\n }\n\n private onDrop = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n\n if (this.disabled) return;\n\n const file = e.dataTransfer?.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n };\n\n private onDragOver = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragEnter = (e: DragEvent) => {\n e.preventDefault();\n if (!this.disabled) {\n this.dragover = true;\n }\n };\n\n private onDragLeave = (e: DragEvent) => {\n e.preventDefault();\n this.dragover = false;\n };\n\n private onFileSelect = (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n if (file) {\n this.currentFile = file;\n this.fileSelect.emit(this.currentFile);\n }\n input.value = '';\n };\n\n private openFileDialog = () => {\n if (this.disabled) {\n return;\n }\n\n this.fileInputEl?.click();\n };\n\n private getAcceptsLabel = () => {\n const accepts = this.accepts?.trim();\n if (!accepts || accepts === DEFAULT_ACCEPT_ALL) {\n return '*';\n }\n\n return accepts;\n };\n\n private formatFileSize = (bytes: number): string => {\n if (bytes === 0) return '0 Bytes';\n const k = 1024;\n const sizes = ['Bytes', 'KB', 'MB', 'GB'];\n const i = Math.floor(Math.log(bytes) / Math.log(k));\n return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];\n };\n\n private formatDate = (timestamp: number): string => {\n const date = new Date(timestamp);\n const day = date.getDate();\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];\n const month = months[date.getMonth()];\n const year = date.getFullYear();\n\n const suffix = (day === 1 || day === 21 || day === 31) ? 'st'\n : (day === 2 || day === 22) ? 'nd'\n : (day === 3 || day === 23) ? 'rd'\n : 'th';\n\n const hours = date.getHours();\n const minutes = date.getMinutes().toString().padStart(2, '0');\n const seconds = date.getSeconds().toString().padStart(2, '0');\n const ampm = hours >= 12 ? 'PM' : 'AM';\n const displayHours = hours % 12 || 12;\n\n return `${day}${suffix} ${month} ${year}, ${displayHours}:${minutes}:${seconds} ${ampm}`;\n };\n\n private showProgress = (): boolean => {\n return this.progress >= 0 && this.progress <= 100;\n };\n\n render() {\n const progressValue = Math.min(Math.max(this.progress, 0), 100);\n const dropZoneLabel = this.ariaLabel || `${this.label}. Accepted file types: ${this.getAcceptsLabel()}. Or use the ${this.browseLabel} button.`;\n\n return (\n <Host>\n <div class=\"drag-drop-zone\">\n <div\n class={{\n 'drag-drop-card': true,\n 'drag-drop-card--dragover': this.dragover,\n 'drag-drop-card--disabled': this.disabled,\n }}\n onDrop={this.onDrop}\n onDragOver={this.onDragOver}\n onDragEnter={this.onDragEnter}\n onDragLeave={this.onDragLeave}\n role=\"region\"\n aria-label={dropZoneLabel}\n >\n <div class=\"drag-drop-card__content\">\n <svg\n class=\"drag-drop-card__icon\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"40\"\n height=\"40\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n aria-hidden=\"true\"\n >\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04Z\"\n fill=\"currentColor\"\n opacity=\"0.3\"\n />\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM14 13V17H10V13H7L12 8L17 13H14Z\"\n fill=\"currentColor\"\n />\n </svg>\n <h3 class=\"drag-drop-card__title\">{this.label}</h3>\n {this.accepts && this.accepts !== DEFAULT_ACCEPT_ALL && (\n <p class=\"drag-drop-card__accepts\">Accepted file types: {this.getAcceptsLabel()}</p>\n )}\n <div class=\"drag-drop-card__action\">\n <xplor-button\n text={this.browseLabel}\n type={this.disabled ? 'disabled' : 'secondary'}\n clickAction={this.openFileDialog}\n aria-label={this.browseLabel}\n ></xplor-button>\n </div>\n </div>\n </div>\n </div>\n\n {this.currentFile && (\n <div class=\"file-info\" aria-live=\"polite\">\n {this.showProgress() && (\n <p class=\"file-info__status\">\n Uploading {this.progress === 100 ? '1' : '0'} / 1\n </p>\n )}\n <div class=\"file-info__card\">\n <div class=\"file-info__icon\" aria-hidden=\"true\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n <path d=\"M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2ZM6 20V4H13V9H18V20H6Z\" />\n </svg>\n </div>\n <div class=\"file-info__details\">\n <p class=\"file-info__name\">{this.currentFile.name}</p>\n <p class=\"file-info__meta\">\n {this.formatFileSize(this.currentFile.size)}\n {this.currentFile.lastModified\n ? ` | Last modified: ${this.formatDate(this.currentFile.lastModified)}`\n : ''}\n </p>\n {this.showProgress() && (\n <div class=\"file-info__progress-row\">\n <div\n class=\"file-info__progress-bar\"\n role=\"progressbar\"\n aria-valuenow={progressValue}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-label={`Upload progress: ${Math.round(progressValue)}%`}\n >\n <div\n class=\"file-info__progress-fill\"\n style={{ width: `${progressValue}%` }}\n ></div>\n </div>\n <span class=\"file-info__progress-text\" aria-hidden=\"true\">{Math.round(this.progress)}%</span>\n </div>\n )}\n </div>\n <button\n class=\"file-info__remove\"\n onClick={() => this.clearCurrentFile()}\n aria-label={`Remove file ${this.currentFile.name}`}\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\">\n <path d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\" />\n </svg>\n </button>\n </div>\n </div>\n )}\n\n <input\n id=\"drag-drop-file-select\"\n type=\"file\"\n disabled={this.disabled}\n accept={this.accepts}\n class=\"drag-drop-input-hidden\"\n ref={(el) => (this.fileInputEl = el)}\n onChange={this.onFileSelect}\n aria-label={`${this.browseLabel} - ${this.label}`}\n tabindex={-1}\n />\n </Host>\n );\n }\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class XplorDropdown {
|
|
3
3
|
render() {
|
|
4
|
-
return (h(Host, { key: '
|
|
4
|
+
return (h(Host, { key: '51c3f9372a79efeeffc662149ada3cd50c76fcbf' }, h("select", { key: '5bf6285178fd454f76089f62ad17d49654e88bf8', class: "xplor-dropdown", onChange: this.handleChange }, this.options.map((option) => (h("option", { value: option, selected: this.selected === option }, option))))));
|
|
5
5
|
}
|
|
6
6
|
static get is() { return "xplor-dropdown"; }
|
|
7
7
|
static get encapsulation() { return "shadow"; }
|
|
@@ -26,16 +26,16 @@ export class XplorExpansionPanel {
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
render() {
|
|
29
|
-
return (h(Host, { key: '
|
|
29
|
+
return (h(Host, { key: '3db1f2fc99643b6c032e49d12c8eedb06ae2ceb9' }, h("div", { key: 'ba08fc1332346fd14e2614184a2da5f99c90e217', class: {
|
|
30
30
|
'expansion-panel': true,
|
|
31
31
|
'expansion-panel--open': this.open,
|
|
32
32
|
'expansion-panel--disabled': this.disabled,
|
|
33
|
-
} }, h("button", { key: '
|
|
33
|
+
} }, h("button", { key: 'b370c00ac9b58af67594679a7c28915d7ecaf622', class: "expansion-panel__header", onClick: this.handleToggle, disabled: this.disabled, "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.panelId}-content`, type: "button" }, h("div", { key: '7a2a65a0189cb9fbdbca615091f6e13e3d94b748', class: "expansion-panel__header-content" }, h("slot", { key: 'a20162d047d41cf219fb412973a92c3f16844640', name: "header" })), h("span", { key: '4dd148cb2d4461285fce95de5bf8cbb3df36e7b7', class: {
|
|
34
34
|
'expansion-panel__icon': true,
|
|
35
35
|
'expansion-panel__icon--open': this.open,
|
|
36
|
-
} }, "\u25BC")), h("div", { key: '
|
|
36
|
+
} }, "\u25BC")), h("div", { key: '9d8a260d927387f5dd1e7e3d429f86d31f2689bf', class: "expansion-panel__content", id: `${this.panelId}-content`, role: "region", "aria-labelledby": this.panelId, style: {
|
|
37
37
|
maxHeight: this.open ? `${this.contentHeight}px` : '0',
|
|
38
|
-
} }, h("div", { key: '
|
|
38
|
+
} }, h("div", { key: '0ac08b6ca30a0fabc7e44f2c8737ee29fccec08a', class: "expansion-panel__content-inner", ref: (el) => (this.contentEl = el) }, h("slot", { key: '94753fe13b1378a95cac9cb4c940aedbc127c1b0' }))))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "xplor-expansion-panel"; }
|
|
41
41
|
static get encapsulation() { return "scoped"; }
|
|
@@ -33,7 +33,7 @@ export class XplorExpansionPanels {
|
|
|
33
33
|
this.value = this.multiple ? Array.from(this.openPanels) : Array.from(this.openPanels)[0] || '';
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '70452b8f734ded39c59a984b6a21e010d6512905' }, h("div", { key: '60ba67dc176b9cc141dd12d56e9f3e977eccd859', class: "expansion-panels", "aria-label": "Accordion" }, h("slot", { key: '99b9f4d51d54b8145ea0964638eecf687c2c8432' }))));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "xplor-expansion-panels"; }
|
|
39
39
|
static get encapsulation() { return "scoped"; }
|
|
@@ -300,7 +300,7 @@ export class XplorFileUpload {
|
|
|
300
300
|
"references": {
|
|
301
301
|
"UploadedFile": {
|
|
302
302
|
"location": "local",
|
|
303
|
-
"path": "/Users/
|
|
303
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
|
|
304
304
|
"id": "src/components/xplor-file-upload/xplor-file-upload.tsx::UploadedFile"
|
|
305
305
|
}
|
|
306
306
|
}
|
|
@@ -321,7 +321,7 @@ export class XplorFileUpload {
|
|
|
321
321
|
"references": {
|
|
322
322
|
"UploadedFile": {
|
|
323
323
|
"location": "local",
|
|
324
|
-
"path": "/Users/
|
|
324
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-file-upload/xplor-file-upload.tsx",
|
|
325
325
|
"id": "src/components/xplor-file-upload/xplor-file-upload.tsx::UploadedFile"
|
|
326
326
|
}
|
|
327
327
|
}
|
|
@@ -33,9 +33,9 @@ export class XplorInlineCheckbox {
|
|
|
33
33
|
'xplor-inline-checkbox--disabled': this.disabled,
|
|
34
34
|
'xplor-inline-checkbox--checked': this.checked,
|
|
35
35
|
};
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: '34aa08258f2a12280c9709f94883af3e0423175f' }, h("label", { key: 'fd6fe47c8e1da57aba09a4ce7cbc95f7e1947dfe', class: containerClasses }, h("input", { key: '17a4c41cb304ae9826476d22ffa18d9bf5810ed5', type: "checkbox", class: "xplor-inline-checkbox__input", checked: this.checked, value: this.value, disabled: this.disabled, indeterminate: this.indeterminate, onChange: this.handleChange, style: {
|
|
37
37
|
accentColor: this.color,
|
|
38
|
-
} }), this.label && h("span", { key: '
|
|
38
|
+
} }), this.label && h("span", { key: '31afabdf1498e609f06530f1db28a05b2a0ba00b', class: "xplor-inline-checkbox__label" }, this.label), h("slot", { key: '2a32c92c16906869dd82272590dd83ebc1905e71' }))));
|
|
39
39
|
}
|
|
40
40
|
static get is() { return "xplor-inline-checkbox"; }
|
|
41
41
|
static get encapsulation() { return "scoped"; }
|
|
@@ -206,7 +206,7 @@ export class XplorInlineDatePicker {
|
|
|
206
206
|
render() {
|
|
207
207
|
const sidebarDate = this.getSidebarDate();
|
|
208
208
|
const dayHeaders = this.startWeekOnSunday ? this.dayNames : this.dayNamesStartMonday;
|
|
209
|
-
return (h(Host, { key: '
|
|
209
|
+
return (h(Host, { key: '031460c16f831f29173bbac372ee4de5b0473828' }, h("div", { key: 'b0d890fec94358a882d10a30b229196ee8fc4ea5', class: "xplor-inline-date-picker", style: { '--picker-color': this.color } }, h("div", { key: '2d5496299d0091d1960fb8507726f15828d68313', class: "xplor-inline-date-picker__sidebar" }, h("div", { key: 'b1645b35975a52e916eb6d18ccda16c3b90519c3', class: "xplor-inline-date-picker__sidebar-year" }, sidebarDate.year), h("div", { key: 'b812bbbd4686d06d6c4c602846c870777847c9ca', class: "xplor-inline-date-picker__sidebar-day" }, sidebarDate.day, ","), h("div", { key: 'd78744d1b353ddafa302693ac105837f33be736e', class: "xplor-inline-date-picker__sidebar-date" }, sidebarDate.date)), h("div", { key: '1e0519719bff8801a3f6a7d23c8140b4017656d8', class: "xplor-inline-date-picker__calendar" }, h("div", { key: '1f13bb35c2bbbc921f6f4d0a4dde12e47d010c81', class: "xplor-inline-date-picker__header" }, h("button", { key: 'dd726c543dc74ed85bb3dd128b45e5a74ffde1f6', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.previousMonth, "aria-label": "Previous month" }, "\u2039"), h("div", { key: 'ffb6cf26f1b1a0ef2c75ccb827f38110a6cfbdbe', class: "xplor-inline-date-picker__title" }, this.monthNames[this.currentMonth], " ", this.currentYear), h("button", { key: '69b0c08aae5b24b2814c37be40de942ed2ff8abb', type: "button", class: "xplor-inline-date-picker__arrow", onClick: this.nextMonth, "aria-label": "Next month" }, "\u203A")), h("div", { key: '25ef6b996fdccc121b44f6dafe018aef316ab09d', class: "xplor-inline-date-picker__weekdays" }, dayHeaders.map((day) => (h("div", { class: "xplor-inline-date-picker__weekday" }, day)))), h("div", { key: '6d092079f76ab7c06fcdb07c8d43d0cd9ace8faa', class: "xplor-inline-date-picker__days", role: "grid" }, this.renderCalendarDays())))));
|
|
210
210
|
}
|
|
211
211
|
static get is() { return "xplor-inline-date-picker"; }
|
|
212
212
|
static get encapsulation() { return "scoped"; }
|
|
@@ -29,7 +29,7 @@ export class XplorInlineSwitch {
|
|
|
29
29
|
'xplor-inline-switch--disabled': this.disabled,
|
|
30
30
|
'xplor-inline-switch--checked': this.checked,
|
|
31
31
|
};
|
|
32
|
-
return (h(Host, { key: '
|
|
32
|
+
return (h(Host, { key: 'ac7b6e824b55bd184f81fd5a36174ee765bd649d' }, h("label", { key: 'e4042ad1236aba72343231013d9d0784593dcf26', class: containerClasses, style: { '--switch-color': this.color } }, h("input", { key: '9e5b96a0367a55785f0c87f74cf9ba0850e227c6', type: "checkbox", class: "xplor-inline-switch__input", checked: this.checked, value: this.value, disabled: this.disabled, onChange: this.handleChange }), h("span", { key: 'c35a3721624cfddd2448d9420a5e8c85a8a51108', class: "xplor-inline-switch__track" }, h("span", { key: '6b9026daf7d5641378d8243ed7b1b7e424db8171', class: "xplor-inline-switch__thumb" })), this.label && h("span", { key: '46423101cb78df16e84b5b79baa9a2a8c88bc91b', class: "xplor-inline-switch__label" }, this.label), h("slot", { key: '0841e31a5d0a9b27c3e8eeafff0218e92a4bf24a' }))));
|
|
33
33
|
}
|
|
34
34
|
static get is() { return "xplor-inline-switch"; }
|
|
35
35
|
static get encapsulation() { return "scoped"; }
|
|
@@ -77,7 +77,7 @@ export class XplorInputFile {
|
|
|
77
77
|
};
|
|
78
78
|
const visibleFiles = this.selectedFiles.slice(0, this.maxChips);
|
|
79
79
|
const additionalCount = this.selectedFiles.length - this.maxChips;
|
|
80
|
-
return (h(Host, { key: '
|
|
80
|
+
return (h(Host, { key: '855205ba51f297ec42d8e0a6e6a8632575f14266' }, h("div", { key: 'b3f5e11bae52b44c70d44964128e7a921002dbb1', class: containerClasses }, this.label && (h("label", { key: '8ed4472b4d74227d3f383733d70fdce13724b3c2', class: "xplor-input-file__label", htmlFor: this.inputId }, this.label)), h("div", { key: '3796c38f41eb6cabb61a71341e2172d6afe588da', class: "xplor-input-file__field" }, h("span", { key: '5c252125213d25d051549308974241fa1764e77c', class: "xplor-input-file__icon" }, this.prependInnerIcon), h("div", { key: 'eb7e79be04bd2c7d6c5a38669486fafa79da2886', class: "xplor-input-file__content" }, this.selectedFiles.length === 0 ? (h("span", { class: "xplor-input-file__placeholder" }, this.placeholder)) : (h("div", { class: "xplor-input-file__chips" }, visibleFiles.map((file) => (h("div", { class: "xplor-input-file__chip", key: file.name }, h("span", { class: "xplor-input-file__chip-text" }, file.name), this.showSize && file.size && (h("span", { class: "xplor-input-file__chip-size" }, "(", this.formatFileSize(file.size), ")"))))), additionalCount > 0 && (h("span", { class: "xplor-input-file__additional" }, "+", additionalCount, " additional file", additionalCount > 1 ? 's' : ''))))), this.selectedFiles.length > 0 && !this.disabled && (h("button", { key: '3de68e44d93f65880e9db5d94a285bc36f5a5b27', type: "button", class: "xplor-input-file__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715")), h("input", { key: '2744056445124a7c857f4b56271cd343e50ed9f2', id: this.inputId, ref: (el) => (this.fileInputRef = el), type: "file", class: "xplor-input-file__input", multiple: this.multiple, accept: this.accept, disabled: this.disabled, onChange: this.handleFileChange, "aria-label": this.label || 'Choose file' })), this.counter && this.selectedFiles.length > 0 && (h("div", { key: '3bd470d17e927b0fbe7776ad67513bb52d91109e', class: "xplor-input-file__counter" }, this.selectedFiles.length, " file", this.selectedFiles.length > 1 ? 's' : '', " selected")))));
|
|
81
81
|
}
|
|
82
82
|
static get is() { return "xplor-input-file"; }
|
|
83
83
|
static get encapsulation() { return "scoped"; }
|
|
@@ -48,9 +48,9 @@ export class XplorInputSearch {
|
|
|
48
48
|
'xplor-input-search--focused': this.isFocused,
|
|
49
49
|
'xplor-input-search--disabled': this.disabled,
|
|
50
50
|
};
|
|
51
|
-
return (h(Host, { key: '
|
|
51
|
+
return (h(Host, { key: '159334f666a4d38aaeeba61788fc73ae85511f1c' }, h("div", { key: 'de6a7c4d9097bdabc955bd2f85ce9c6f9f35aa19', class: containerClasses }, h("div", { key: 'b14ca74cb368ef4efa67330f5b5fc76b54828c33', class: "xplor-input-search__field" }, h("input", { key: '1f8e4d2842d4f45fa3ca7e2b3de7b697a75abd02', id: this.inputId, type: "search", class: "xplor-input-search__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
|
|
52
52
|
backgroundColor: this.bgColor,
|
|
53
|
-
}, role: "searchbox", "aria-label": "Search" }), h("slot", { key: '
|
|
53
|
+
}, role: "searchbox", "aria-label": "Search" }), h("slot", { key: '3b914900d3b529b142ec31d8835ebfa83497b877', name: "append-inner" }, h("button", { key: '83ffab122b79d64e5fadb6ff0abf508847ecb721', type: "button", class: "xplor-input-search__button", onClick: this.handleSearch, disabled: this.disabled, "data-testid": "input-search-button", "aria-label": "Search" }, h("svg", { key: 'b0d8e393c391b3ca214bb1cd8b1673eb3b634a88', viewBox: "0 0 24 24", class: "xplor-input-search__icon" }, h("path", { key: '78d38f7b9e578cf8519edcc7eea19ffa294aba74', d: "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" }))))))));
|
|
54
54
|
}
|
|
55
55
|
static get is() { return "xplor-input-search"; }
|
|
56
56
|
static get encapsulation() { return "scoped"; }
|
|
@@ -340,7 +340,7 @@ export class XplorInputSelect {
|
|
|
340
340
|
"references": {
|
|
341
341
|
"SelectOption": {
|
|
342
342
|
"location": "local",
|
|
343
|
-
"path": "/Users/
|
|
343
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-input-select/xplor-input-select.tsx",
|
|
344
344
|
"id": "src/components/xplor-input-select/xplor-input-select.tsx::SelectOption"
|
|
345
345
|
}
|
|
346
346
|
}
|
|
@@ -36,10 +36,10 @@ export class XplorInputSend {
|
|
|
36
36
|
this.internalValue = this.value;
|
|
37
37
|
}
|
|
38
38
|
render() {
|
|
39
|
-
return (h(Host, { key: '
|
|
39
|
+
return (h(Host, { key: 'bcce41da602a265f2ee48f278e1f173dcb7a478c' }, h("div", { key: '5db92c3276ea1e021fa872d8f7b34e0c20b6d6ea', class: {
|
|
40
40
|
'input-send': true,
|
|
41
41
|
'input-send--disabled': this.disabled,
|
|
42
|
-
} }, h("input", { key: '
|
|
42
|
+
} }, h("input", { key: '9395e4d6f8190e3010fd9c0323a4a4c51643c998', ref: (el) => (this.inputEl = el), type: "text", class: "input-send__input", placeholder: this.placeholder, value: this.internalValue, onInput: this.handleInput, onKeyDown: this.handleKeyDown, disabled: this.disabled, maxLength: this.maxLength, "aria-label": this.placeholder || 'Type a message' }), h("xplor-button", { key: 'f4d9784400fd7c31c2766af49fe3971216f5828f', class: "input-send__button", text: this.buttonText, type: this.disabled || !this.internalValue.trim() ? 'disabled' : this.buttonType, onClick: this.handleSend }))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "xplor-input-send"; }
|
|
45
45
|
static get encapsulation() { return "scoped"; }
|
|
@@ -81,9 +81,9 @@ export class XplorInputText {
|
|
|
81
81
|
'xplor-input-text--error': !!this.error,
|
|
82
82
|
};
|
|
83
83
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
84
|
-
return (h(Host, { key: '
|
|
84
|
+
return (h(Host, { key: 'c7da02996d0b420a58337eb30bec6d38fe9e395f' }, h("div", { key: '229582f2e17300332a14fd58ff60cd1a43d10f40', class: containerClasses }, this.label && (h("label", { key: '2fc2d7c76396e98397df42d6b793d070d061c918', class: "xplor-input-text__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '2bc7348d1a415a36aae485c61743b0fd3f98d363', class: "xplor-input-text__required" }, "*"))), h("div", { key: 'f6f79203738d3827dbd06faaea60f94022d5d965', class: "xplor-input-text__field" }, h("input", { key: 'ff6a346441f195cd71c5e6c585fffd24b79ce181', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
85
85
|
backgroundColor: this.bgColor,
|
|
86
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: '
|
|
86
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'fa160af8991c46e7418960e2058d85a912aa182c', name: "append-inner" })), showDetails && (h("div", { key: 'bd131696fea277bcc3c727cb2a9a901a9c360f53', class: "xplor-input-text__details" }, this.error && h("div", { key: '7a5351abc5cb7ed0dc1a5a71262f86a34230020a', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '7457664c7a216c5c4a9c18de4030a76796dd97bc', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '2acc8a1746276cb19b6d8a0b2dd0054a5fa7f6ac', name: "append" }))));
|
|
87
87
|
}
|
|
88
88
|
static get is() { return "xplor-input-text"; }
|
|
89
89
|
static get encapsulation() { return "scoped"; }
|
|
@@ -83,9 +83,9 @@ export class XplorInputTextArea {
|
|
|
83
83
|
};
|
|
84
84
|
const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
|
|
85
85
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
86
|
-
return (h(Host, { key: '
|
|
86
|
+
return (h(Host, { key: '8d29b69ab2e27bd4e1b285cf2c592b22a79518f2' }, h("div", { key: 'd6fa4df24c83488f1e88e8e9ddffeed3c4ebd0d7', class: containerClasses }, this.label && (h("label", { key: '5be952c8c6ce762a578d22da1b883512118ea3d4', class: "xplor-input-text-area__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '20c3fd980d575e9e0c3f5573d02556bf9e14099e', class: "xplor-input-text-area__required" }, "*"))), h("div", { key: 'bd37545a117401be68d17f0346321e35d39e544a', class: "xplor-input-text-area__field" }, h("textarea", { key: '164d86d89c96572adca9deec4292b8339c8efd50', id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, rows: this.rows, onInput: this.handleInput, onChange: this.handleChange, onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), style: {
|
|
87
87
|
backgroundColor: this.bgColor,
|
|
88
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (h("button", { key: '
|
|
88
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), showClearButton && (h("button", { key: 'a818cd20c397af9517c1ed013f534ee2d53ccfc3', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: '6b2a6d5a6d8d7e66eef815dbebf3e2ea1c4f80b7', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '8e22ad68e9a5609b7abfa30751685c570c0e3dca', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '0eaa1976d2ac0c2e25c301fd23e690f28d9a3494', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
|
|
89
89
|
}
|
|
90
90
|
static get is() { return "xplor-input-text-area"; }
|
|
91
91
|
static get encapsulation() { return "scoped"; }
|
|
@@ -46,9 +46,9 @@ export class XplorInputTextSecondary {
|
|
|
46
46
|
'input-secondary--dirty': this.isDirty,
|
|
47
47
|
};
|
|
48
48
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
49
|
-
return (h(Host, { key: '
|
|
49
|
+
return (h(Host, { key: '805c82be35d46be51ebc3e29e78345ae81bf1368' }, h("div", { key: 'df8e81a6553efbd0dade36a7d5871e8d1d789213', class: containerClasses }, this.label && (h("label", { key: '289689dbe52f2ae19af90664ae99240eee499d61', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: '7e711647c5cdc04033f2f774eee8d810835685ae', class: "input-secondary__required" }, "*"))), h("div", { key: '6cab22daaade60aa7e5130afda2f2692c1ae73b1', class: "input-secondary__field" }, h("input", { key: 'eb9cc2994c5f68d15683c4584ac270bcb5c20664', id: this.inputId, type: this.type, class: "input-secondary__input", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, required: this.required, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur, style: {
|
|
50
50
|
backgroundColor: this.bgColor,
|
|
51
|
-
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: '
|
|
51
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), h("slot", { key: 'e51cb67efac2e7037c2a903d78164348ce56998d', name: "append-inner" })), showDetails && (h("div", { key: '5c490ba173da365e8b9393ffee34a4259e9b3dbd', class: "input-secondary__details" }, this.error && h("div", { key: '4415c1feb83542ef0f0202fc48dfb13effc9d4c4', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: 'fb7e6c208fef2ea8139325438c19612538e1d845', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'e2479a9561cb0bf63f1115b2fc0b1d768bc705ed', name: "append" }))));
|
|
52
52
|
}
|
|
53
53
|
static get is() { return "xplor-input-text-secondary"; }
|
|
54
54
|
static get encapsulation() { return "scoped"; }
|
|
@@ -33,7 +33,7 @@ export class XplorInputTitle {
|
|
|
33
33
|
};
|
|
34
34
|
}
|
|
35
35
|
render() {
|
|
36
|
-
return (h(Host, { key: '
|
|
36
|
+
return (h(Host, { key: 'ef2d69909fe74019c12da557fa136e0389336e05' }, h("input", { key: 'dfdc0a0072ec511a1edfc68a6fad9e4169064f8f', type: "text", class: "xplor-input-title", value: this.value, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, "aria-label": this.ariaLabel, onInput: this.handleInput, onChange: this.handleChange })));
|
|
37
37
|
}
|
|
38
38
|
static get is() { return "xplor-input-title"; }
|
|
39
39
|
static get encapsulation() { return "scoped"; }
|
|
@@ -5,7 +5,7 @@ export class XplorLinks {
|
|
|
5
5
|
this.imageAlt = '';
|
|
6
6
|
}
|
|
7
7
|
render() {
|
|
8
|
-
return (h(Host, { key: '
|
|
8
|
+
return (h(Host, { key: '1d0963855eaf79dacbae5d6a5b86cc6b6ae84632', class: `theme-${this.brand}` }, h("a", { key: 'd95d148b5745909e17a51e7d44e6412956a4844b', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '05c27ca582f5d298e00a46240700088f3ef1c250', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '9f4180eef39b9006277a72534d385ce3b742e40c', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'fe5ffb8f988e0df18e53a04873d6dfe63e7ca26e', class: "bg-white py-24 sm:py-32" }, h("div", { key: '09bd7b00cd955c991e662f3f71addac329d4b189', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '36f6bd91ab4db26df78b21e533c2f584ba656d26', class: "max-w-xl" }, h("h2", { key: '165380866054da7add2a455b15370f4cd8a7ad65', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '726b4e94c27bafe707c6a48f6604a28cb15d1c47', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'a884c969151b0b935d40e5a98d9418d5a8bcc415', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c5b4adca7d9a2038462dcd2958b95b5a7c661314' }, h("div", { key: '4a013658a1982d345000bbce12ace33b5e6bd2d8', class: "flex items-center gap-x-6" }, h("img", { key: 'c93cc4184e758ca5d1b9942bbbec8a5afb219732', class: "size-16 rounded-full", src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80", alt: this.imageAlt }), h("div", { key: 'a05b6b18dbf663af70b0c7840d034973b2cc15df' }, h("h3", { key: '7d6ff8ca21af23e69497e067f346b3b0b61de42c', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '33528098f6f09a748251f49a8e0b377992f2c4e1', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
|
|
9
9
|
}
|
|
10
10
|
static get is() { return "xplor-links"; }
|
|
11
11
|
static get encapsulation() { return "shadow"; }
|
|
@@ -23,7 +23,7 @@ export class XplorModalPersistent {
|
|
|
23
23
|
this.loading = false;
|
|
24
24
|
}
|
|
25
25
|
render() {
|
|
26
|
-
return (h(Host, { key: '
|
|
26
|
+
return (h(Host, { key: '884f843600d455676714efef74a7102467cf7fe5' }, h("xplor-modal", { key: 'c3886708722829887adb5213f4eb98470ad16132', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '0f6b7f60e3f9354994b00f15ee7056c2b5f4a454', name: "title", slot: "title" }), h("slot", { key: '03a625acfe4a23677d1e532d56b0797c9d0f6457', name: "subtitle", slot: "subtitle" }), h("slot", { key: '57d9c7c4897299b0bb84de291e202d6c00d3914f', name: "body", slot: "body" }), h("slot", { key: '9290ae4fede095d8e11f32396029e59da7212e16', name: "actions", slot: "actions" }))));
|
|
27
27
|
}
|
|
28
28
|
static get is() { return "xplor-modal-persistent"; }
|
|
29
29
|
static get properties() {
|