@xplor-education/core-stencil-components 3.1.1 → 3.1.3
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 +28 -3
- package/components/index.js.map +1 -1
- package/components/{p-B49oUO_9.js → p-AzuDJugb.js} +3 -3
- package/components/{p-B49oUO_9.js.map → p-AzuDJugb.js.map} +1 -1
- package/components/{p-D4jVa8dE.js → p-BQ6aLuGP.js} +4 -4
- package/components/{p-D4jVa8dE.js.map → p-BQ6aLuGP.js.map} +1 -1
- package/components/{p-VIJbFoA4.js → p-BZQ63ULK.js} +3 -3
- package/components/{p-VIJbFoA4.js.map → p-BZQ63ULK.js.map} +1 -1
- package/components/{p-Bs_ocvfe.js → p-CyGsSa4H.js} +7 -4
- package/components/p-CyGsSa4H.js.map +1 -0
- package/components/{p-B3zR7peH.js → p-oanCZPh6.js} +4 -4
- package/components/{p-B3zR7peH.js.map → p-oanCZPh6.js.map} +1 -1
- package/components/xplor-alert-message.js +2 -2
- package/components/xplor-avatar-and-name.js +2 -2
- package/components/xplor-avatar.js +1 -1
- package/components/xplor-badge-active.js +1 -1
- package/components/xplor-badge-archived.js +1 -1
- package/components/xplor-badge-deleted.js +1 -1
- package/components/xplor-badge-expired.js +1 -1
- package/components/xplor-badge-inactive.js +1 -1
- package/components/xplor-badge-recalled.js +1 -1
- package/components/xplor-badge-upcoming.js +1 -1
- package/components/xplor-badge-waitlist.js +1 -1
- package/components/xplor-badge.js +1 -1
- package/components/xplor-btn-back-to-parent.js +1 -1
- package/components/xplor-btn-back.js +1 -1
- package/components/xplor-btn-icon.js +1 -1
- package/components/xplor-btn-toggle-group.js +1 -1
- package/components/xplor-btn-toggle-secondary.js +1 -1
- package/components/xplor-btn-toggle.js +1 -1
- package/components/xplor-btn-tooltip.js +3 -3
- package/components/xplor-button.js +1 -1
- package/components/xplor-canvas-editor.d.ts +11 -0
- package/components/xplor-canvas-editor.js +369 -0
- package/components/xplor-canvas-editor.js.map +1 -0
- package/components/xplor-chat-widget.js +3 -3
- package/components/xplor-checkbox.js +1 -1
- package/components/xplor-combobox.js +5 -5
- package/components/xplor-datatable.js +2 -2
- package/components/xplor-date-picker.js +5 -5
- package/components/xplor-drag-and-drop-input.js +26 -5
- 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-file-upload.js +2 -2
- 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-select.js +2 -2
- package/components/xplor-input-send.js +3 -3
- package/components/xplor-input-text-area.js +6 -3
- package/components/xplor-input-text-area.js.map +1 -1
- package/components/xplor-input-text-secondary.js +2 -2
- package/components/xplor-input-text.js +6 -3
- package/components/xplor-input-text.js.map +1 -1
- 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-nav-tabs.js +2 -2
- package/components/xplor-radio-btn.js +2 -2
- package/components/xplor-rich-text-editor.d.ts +11 -0
- package/components/xplor-rich-text-editor.js +23754 -0
- package/components/xplor-rich-text-editor.js.map +1 -0
- 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/components/xplor-tooltip.js +1 -1
- package/dist/cjs/{index-BjAapk2n.js → index--_m3aUsf.js} +32 -7
- package/dist/cjs/index--_m3aUsf.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js +29457 -0
- package/dist/cjs/xplor-alert-dialog_60.cjs.entry.js.map +1 -0
- package/dist/cjs/xplor-component-library.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -0
- package/dist/collection/components/xplor-alert-message/xplor-alert-message.js +2 -2
- package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js +4 -4
- package/dist/collection/components/xplor-avatar/xplor-avatar.js +2 -2
- package/dist/collection/components/xplor-avatar-and-name/xplor-avatar-and-name.js +1 -1
- package/dist/collection/components/xplor-badge/xplor-badge.js +1 -1
- package/dist/collection/components/xplor-badge-active/xplor-badge-active.js +1 -1
- package/dist/collection/components/xplor-badge-archived/xplor-badge-archived.js +1 -1
- package/dist/collection/components/xplor-badge-deleted/xplor-badge-deleted.js +1 -1
- package/dist/collection/components/xplor-badge-expired/xplor-badge-expired.js +1 -1
- package/dist/collection/components/xplor-badge-inactive/xplor-badge-inactive.js +1 -1
- package/dist/collection/components/xplor-badge-recalled/xplor-badge-recalled.js +1 -1
- package/dist/collection/components/xplor-badge-session-booking/xplor-badge-session-booking.js +2 -2
- package/dist/collection/components/xplor-badge-upcoming/xplor-badge-upcoming.js +1 -1
- package/dist/collection/components/xplor-badge-waitlist/xplor-badge-waitlist.js +1 -1
- package/dist/collection/components/xplor-btn-back/xplor-btn-back.js +1 -1
- package/dist/collection/components/xplor-btn-back-to-parent/xplor-btn-back-to-parent.js +1 -1
- package/dist/collection/components/xplor-btn-icon/xplor-btn-icon.js +1 -1
- package/dist/collection/components/xplor-btn-menu/xplor-btn-menu.js +2 -2
- package/dist/collection/components/xplor-btn-toggle/xplor-btn-toggle.js +1 -1
- package/dist/collection/components/xplor-btn-toggle-group/xplor-btn-toggle-group.js +1 -1
- package/dist/collection/components/xplor-btn-toggle-secondary/xplor-btn-toggle-secondary.js +1 -1
- package/dist/collection/components/xplor-btn-tooltip/xplor-btn-tooltip.js +1 -1
- package/dist/collection/components/xplor-button/xplor-button.css +8 -3
- package/dist/collection/components/xplor-button/xplor-button.js +23 -1
- package/dist/collection/components/xplor-button/xplor-button.js.map +1 -1
- package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.css +1224 -0
- package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.js +520 -0
- package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.js.map +1 -0
- package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.stories.js +280 -0
- package/dist/collection/components/xplor-canvas-editor/xplor-canvas-editor.stories.js.map +1 -0
- package/dist/collection/components/xplor-chat-widget/xplor-chat-widget.js +1 -1
- package/dist/collection/components/xplor-checkbox/xplor-checkbox.js +1 -1
- package/dist/collection/components/xplor-combobox/xplor-combobox.js +7 -7
- package/dist/collection/components/xplor-datatable/xplor-datatable.js +5 -5
- package/dist/collection/components/xplor-date-picker/xplor-date-picker.js +4 -4
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +62 -29
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +25 -4
- 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 +4 -4
- 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 +3 -3
- package/dist/collection/components/xplor-input-send/xplor-input-send.js +2 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.css +41 -13
- package/dist/collection/components/xplor-input-text/xplor-input-text.js +5 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.js.map +1 -1
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.css +39 -13
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js +5 -2
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js.map +1 -1
- 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 +3 -3
- package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js +2 -2
- package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.css +1445 -0
- package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.js +800 -0
- package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.js.map +1 -0
- package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.js +260 -0
- package/dist/collection/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.js.map +1 -0
- 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 +4 -4
- package/dist/collection/utils/slate-legacy-converter.js +223 -0
- package/dist/collection/utils/slate-legacy-converter.js.map +1 -0
- package/dist/components/index.js +28 -3
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p--zhT6rvJ.js → p-DGaHlr-k.js} +4 -4
- package/dist/components/{p--zhT6rvJ.js.map → p-DGaHlr-k.js.map} +1 -1
- package/dist/components/{p-B5rS_jjI.js → p-DWaTb2EJ.js} +7 -4
- package/dist/components/p-DWaTb2EJ.js.map +1 -0
- package/dist/components/{p-J41B2nOt.js → p-DroQBoSo.js} +3 -3
- package/dist/components/{p-J41B2nOt.js.map → p-DroQBoSo.js.map} +1 -1
- package/dist/components/{p-DQ8MCJFX.js → p-TfYzqGwr.js} +3 -3
- package/dist/components/{p-DQ8MCJFX.js.map → p-TfYzqGwr.js.map} +1 -1
- package/dist/components/{p-DbQ6ZNvh.js → p-vl-J3tKJ.js} +4 -4
- package/dist/components/{p-DbQ6ZNvh.js.map → p-vl-J3tKJ.js.map} +1 -1
- package/dist/components/xplor-alert-message.js +2 -2
- package/dist/components/xplor-avatar-and-name.js +2 -2
- package/dist/components/xplor-avatar.js +1 -1
- package/dist/components/xplor-badge-active.js +1 -1
- package/dist/components/xplor-badge-archived.js +1 -1
- package/dist/components/xplor-badge-deleted.js +1 -1
- package/dist/components/xplor-badge-expired.js +1 -1
- package/dist/components/xplor-badge-inactive.js +1 -1
- package/dist/components/xplor-badge-recalled.js +1 -1
- package/dist/components/xplor-badge-upcoming.js +1 -1
- package/dist/components/xplor-badge-waitlist.js +1 -1
- package/dist/components/xplor-badge.js +1 -1
- package/dist/components/xplor-btn-back-to-parent.js +1 -1
- package/dist/components/xplor-btn-back.js +1 -1
- package/dist/components/xplor-btn-icon.js +1 -1
- package/dist/components/xplor-btn-toggle-group.js +1 -1
- package/dist/components/xplor-btn-toggle-secondary.js +1 -1
- package/dist/components/xplor-btn-toggle.js +1 -1
- package/dist/components/xplor-btn-tooltip.js +3 -3
- package/dist/components/xplor-button.js +1 -1
- package/dist/components/xplor-canvas-editor.d.ts +11 -0
- package/dist/components/xplor-canvas-editor.js +370 -0
- package/dist/components/xplor-canvas-editor.js.map +1 -0
- package/dist/components/xplor-chat-widget.js +3 -3
- package/dist/components/xplor-checkbox.js +1 -1
- package/dist/components/xplor-combobox.js +5 -5
- package/dist/components/xplor-datatable.js +2 -2
- package/dist/components/xplor-date-picker.js +5 -5
- package/dist/components/xplor-drag-and-drop-input.js +26 -5
- 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-file-upload.js +2 -2
- 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-select.js +2 -2
- package/dist/components/xplor-input-send.js +3 -3
- package/dist/components/xplor-input-text-area.js +6 -3
- package/dist/components/xplor-input-text-area.js.map +1 -1
- package/dist/components/xplor-input-text-secondary.js +2 -2
- package/dist/components/xplor-input-text.js +6 -3
- package/dist/components/xplor-input-text.js.map +1 -1
- 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-nav-tabs.js +2 -2
- package/dist/components/xplor-radio-btn.js +2 -2
- package/dist/components/xplor-rich-text-editor.d.ts +11 -0
- package/dist/components/xplor-rich-text-editor.js +23755 -0
- package/dist/components/xplor-rich-text-editor.js.map +1 -0
- 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/components/xplor-tooltip.js +1 -1
- package/dist/esm/{index-KRfMjDC2.js → index-QwDfQUbw.js} +32 -7
- package/dist/esm/index-QwDfQUbw.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/xplor-alert-dialog_60.entry.js +29396 -0
- package/dist/esm/xplor-alert-dialog_60.entry.js.map +1 -0
- package/dist/esm/xplor-component-library.js +3 -3
- package/dist/hydrate/index.js +24238 -97
- package/dist/hydrate/index.mjs +24238 -97
- package/dist/types/components/xplor-button/xplor-button.d.ts +2 -0
- package/dist/types/components/xplor-canvas-editor/xplor-canvas-editor.d.ts +63 -0
- package/dist/types/components/xplor-canvas-editor/xplor-canvas-editor.stories.d.ts +84 -0
- package/dist/types/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.d.ts +6 -0
- package/dist/types/components/xplor-rich-text-editor/xplor-rich-text-editor.d.ts +129 -0
- package/dist/types/components/xplor-rich-text-editor/xplor-rich-text-editor.stories.d.ts +105 -0
- package/dist/types/components.d.ts +290 -0
- package/dist/types/utils/slate-legacy-converter.d.ts +83 -0
- package/dist/xplor-component-library/p-QwDfQUbw.js +3 -0
- package/dist/xplor-component-library/p-QwDfQUbw.js.map +1 -0
- package/dist/xplor-component-library/p-df68ccde.entry.js +2 -0
- package/dist/xplor-component-library/p-df68ccde.entry.js.map +1 -0
- package/dist/xplor-component-library/xplor-component-library.css +1 -1
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +7 -1
- package/components/p-Bs_ocvfe.js.map +0 -1
- package/dist/cjs/index-BjAapk2n.js.map +0 -1
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js +0 -5389
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +0 -1
- package/dist/components/p-B5rS_jjI.js.map +0 -1
- package/dist/esm/index-KRfMjDC2.js.map +0 -1
- package/dist/esm/xplor-alert-dialog_58.entry.js +0 -5330
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +0 -1
- package/dist/xplor-component-library/p-5b0cee73.entry.js +0 -2
- package/dist/xplor-component-library/p-5b0cee73.entry.js.map +0 -1
- package/dist/xplor-component-library/p-KRfMjDC2.js +0 -3
- package/dist/xplor-component-library/p-KRfMjDC2.js.map +0 -1
|
@@ -273,12 +273,6 @@ ul.mdc-list li.mdc-list-item {
|
|
|
273
273
|
.xplor-input-text-area {
|
|
274
274
|
display: flex;
|
|
275
275
|
flex-direction: column;
|
|
276
|
-
gap: 0.25rem;
|
|
277
|
-
}
|
|
278
|
-
.xplor-input-text-area__label {
|
|
279
|
-
font-size: 0.875rem;
|
|
280
|
-
color: rgba(0, 0, 0, 0.6);
|
|
281
|
-
margin-bottom: 0.25rem;
|
|
282
276
|
}
|
|
283
277
|
.xplor-input-text-area__required {
|
|
284
278
|
color: #d32f2f;
|
|
@@ -289,6 +283,20 @@ ul.mdc-list li.mdc-list-item {
|
|
|
289
283
|
display: flex;
|
|
290
284
|
align-items: flex-start;
|
|
291
285
|
}
|
|
286
|
+
.xplor-input-text-area__label {
|
|
287
|
+
position: absolute;
|
|
288
|
+
left: 1rem;
|
|
289
|
+
top: 0.875rem;
|
|
290
|
+
font-size: 1rem;
|
|
291
|
+
color: rgba(0, 0, 0, 0.6);
|
|
292
|
+
pointer-events: none;
|
|
293
|
+
padding: 0 0.25rem;
|
|
294
|
+
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), top 0.15s cubic-bezier(0.4, 0, 0.2, 1), font-size 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
295
|
+
max-width: calc(100% - 2rem);
|
|
296
|
+
overflow: hidden;
|
|
297
|
+
text-overflow: ellipsis;
|
|
298
|
+
white-space: nowrap;
|
|
299
|
+
}
|
|
292
300
|
.xplor-input-text-area__input {
|
|
293
301
|
width: 100%;
|
|
294
302
|
padding: 0.875rem 1rem;
|
|
@@ -299,18 +307,13 @@ ul.mdc-list li.mdc-list-item {
|
|
|
299
307
|
outline: none;
|
|
300
308
|
resize: vertical;
|
|
301
309
|
min-height: 56px;
|
|
302
|
-
transition: border-color 0.
|
|
310
|
+
transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-width 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
|
303
311
|
}
|
|
304
312
|
.xplor-input-text-area__input::placeholder {
|
|
305
313
|
color: rgba(0, 0, 0, 0.38);
|
|
306
314
|
}
|
|
307
315
|
.xplor-input-text-area__input:hover:not(:disabled) {
|
|
308
|
-
border-color: rgba(0, 0, 0, 0.
|
|
309
|
-
}
|
|
310
|
-
.xplor-input-text-area__input:focus {
|
|
311
|
-
border-color: #008480;
|
|
312
|
-
border-width: 2px;
|
|
313
|
-
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
316
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
314
317
|
}
|
|
315
318
|
.xplor-input-text-area__input:disabled {
|
|
316
319
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -343,9 +346,32 @@ ul.mdc-list li.mdc-list-item {
|
|
|
343
346
|
.xplor-input-text-area__clear:active {
|
|
344
347
|
background-color: rgba(0, 0, 0, 0.08);
|
|
345
348
|
}
|
|
349
|
+
.xplor-input-text-area--floating .xplor-input-text-area__label {
|
|
350
|
+
top: 0;
|
|
351
|
+
transform: translateY(-50%);
|
|
352
|
+
font-size: 0.75rem;
|
|
353
|
+
}
|
|
354
|
+
.xplor-input-text-area--focused .xplor-input-text-area__input {
|
|
355
|
+
border-color: #008480;
|
|
356
|
+
border-width: 2px;
|
|
357
|
+
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
358
|
+
}
|
|
359
|
+
.xplor-input-text-area--focused .xplor-input-text-area__label {
|
|
360
|
+
color: #008480;
|
|
361
|
+
}
|
|
346
362
|
.xplor-input-text-area--error .xplor-input-text-area__input {
|
|
347
363
|
border-color: #d32f2f;
|
|
348
364
|
}
|
|
365
|
+
.xplor-input-text-area--error .xplor-input-text-area__label {
|
|
366
|
+
color: #d32f2f;
|
|
367
|
+
}
|
|
368
|
+
.xplor-input-text-area--error.xplor-input-text-area--focused .xplor-input-text-area__input {
|
|
369
|
+
border-color: #d32f2f;
|
|
370
|
+
border-width: 2px;
|
|
371
|
+
}
|
|
372
|
+
.xplor-input-text-area--disabled .xplor-input-text-area__label {
|
|
373
|
+
color: rgba(0, 0, 0, 0.38);
|
|
374
|
+
}
|
|
349
375
|
.xplor-input-text-area__details {
|
|
350
376
|
min-height: 1.25rem;
|
|
351
377
|
padding: 0 1rem;
|
|
@@ -75,17 +75,20 @@ export class XplorInputTextArea {
|
|
|
75
75
|
};
|
|
76
76
|
}
|
|
77
77
|
render() {
|
|
78
|
+
const hasValue = this.value != null && this.value !== '';
|
|
79
|
+
const isFloating = this.isFocused || hasValue;
|
|
78
80
|
const containerClasses = {
|
|
79
81
|
'xplor-input-text-area': true,
|
|
80
82
|
'xplor-input-text-area--focused': this.isFocused,
|
|
83
|
+
'xplor-input-text-area--floating': isFloating,
|
|
81
84
|
'xplor-input-text-area--disabled': this.disabled,
|
|
82
85
|
'xplor-input-text-area--error': !!this.error,
|
|
83
86
|
};
|
|
84
87
|
const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;
|
|
85
88
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
86
|
-
return (h(Host, { key: '
|
|
89
|
+
return (h(Host, { key: '499771f2851bb143873f4eeffd8b94b2ebea25d1' }, h("div", { key: '1146216625f0e53726e89fa501b6693a2fa193d6', class: containerClasses }, h("div", { key: 'b15032551ad190e6a55aef831e1a5aca8362a858', class: "xplor-input-text-area__field" }, h("textarea", { key: '48727ed731a8c91ec7d60c1416505485c9986941', id: this.inputId, class: "xplor-input-text-area__input", value: this.value, placeholder: isFloating ? 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
90
|
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: '
|
|
91
|
+
}, "aria-invalid": this.error ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": this.error ? this.errorId : this.helperText ? this.helperId : undefined }), this.label && (h("label", { key: 'be53c38576a49ca6e569628944d2ffde34a1f974', class: "xplor-input-text-area__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && h("span", { key: 'c5c477c25d45ecad8eaa796486d9957b6bad2b42', class: "xplor-input-text-area__required" }, "*"))), showClearButton && (h("button", { key: '3071ff6a2a2f95a27bad3f2659591a442c9ad472', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'dbc13a86ce7ef5f97851e50a64b6905f04eb896d', class: "xplor-input-text-area__details" }, this.error && h("div", { key: '9575a980cca5901ee68b5a40a1ee26827ac45126', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '32a790df7518f6a042bf0737bf1466098f947beb', class: "xplor-input-text-area__helper-text", id: this.helperId }, this.helperText))))));
|
|
89
92
|
}
|
|
90
93
|
static get is() { return "xplor-input-text-area"; }
|
|
91
94
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xplor-input-text-area.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAErF,IAAI,sBAAsB,GAAG,CAAC,CAAC;AAO/B,MAAM,OAAO,kBAAkB;IAL/B;QAMU,YAAO,GAAG,yBAAyB,EAAE,sBAAsB,EAAE,CAAC;QAC9D,YAAO,GAAG,GAAG,IAAI,CAAC,OAAO,QAAQ,CAAC;QAClC,aAAQ,GAAG,GAAG,IAAI,CAAC,OAAO,SAAS,CAAC;QAC5C;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAY,IAAI,CAAC;QAElC;;WAEG;QACK,SAAI,GAAW,CAAC,CAAC;QAEzB;;WAEG;QACK,gBAAW,GAAqB,MAAM,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,eAAU,GAAW,EAAE,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAiBzB,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"xplor-input-text-area.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text-area/xplor-input-text-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAErF,IAAI,sBAAsB,GAAG,CAAC,CAAC;AAO/B,MAAM,OAAO,kBAAkB;IAL/B;QAMU,YAAO,GAAG,yBAAyB,EAAE,sBAAsB,EAAE,CAAC;QAC9D,YAAO,GAAG,GAAG,IAAI,CAAC,OAAO,QAAQ,CAAC;QAClC,aAAQ,GAAG,GAAG,IAAI,CAAC,OAAO,SAAS,CAAC;QAC5C;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,YAAO,GAAW,OAAO,CAAC;QAElC;;WAEG;QACK,UAAK,GAAW,SAAS,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAY,IAAI,CAAC;QAElC;;WAEG;QACK,SAAI,GAAW,CAAC,CAAC;QAEzB;;WAEG;QACK,gBAAW,GAAqB,MAAM,CAAC;QAE/C;;WAEG;QACK,UAAK,GAAW,EAAE,CAAC;QAE3B;;WAEG;QACK,eAAU,GAAW,EAAE,CAAC;QAEhC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAiBzB,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA6B,CAAC;YACnD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;QAEM,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;KAyEH;IAvEC,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;QACzD,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,IAAI,QAAQ,CAAC;QAE9C,MAAM,gBAAgB,GAAG;YACvB,uBAAuB,EAAE,IAAI;YAC7B,gCAAgC,EAAE,IAAI,CAAC,SAAS;YAChD,iCAAiC,EAAE,UAAU;YAC7C,iCAAiC,EAAE,IAAI,CAAC,QAAQ;YAChD,8BAA8B,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC7C,CAAC;QAEF,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;QACzF,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,CAAC,IAAI,CAAC,WAAW,KAAK,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAEnH,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,gBAAgB;gBAC1B,4DAAK,KAAK,EAAC,8BAA8B;oBACvC,iEACE,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAC,8BAA8B,EACpC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EACtC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,EACtC,KAAK,EAAE;4BACL,eAAe,EAAE,IAAI,CAAC,OAAO;yBAC9B,kBACa,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,sBAC/B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GACzF;oBACD,IAAI,CAAC,KAAK,IAAI,CACb,8DACE,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,CAAC,OAAO,EAAE;wBAEvC,IAAI,CAAC,KAAK;wBACV,IAAI,CAAC,QAAQ,IAAI,6DAAM,KAAK,EAAC,iCAAiC,QAAS,CAClE,CACT;oBACA,eAAe,IAAI,CAClB,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,8BAA8B,EACpC,OAAO,EAAE,IAAI,CAAC,WAAW,gBACd,OAAO,aAGX,CACV,CACG;gBAEL,WAAW,IAAI,CACd,4DAAK,KAAK,EAAC,gCAAgC;oBACxC,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,sCAAsC,EAAC,EAAE,EAAE,IAAI,CAAC,OAAO,IAAG,IAAI,CAAC,KAAK,CAAO;oBACpG,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,IAAI,4DAAK,KAAK,EAAC,oCAAoC,EAAC,EAAE,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,UAAU,CAAO,CACzH,CACP,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextAreaIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text-area',\n styleUrl: 'xplor-input-text-area.scss',\n scoped: true,\n})\nexport class XplorInputTextArea {\n private inputId = `xplor-input-text-area-${++inputTextAreaIdCounter}`;\n private errorId = `${this.inputId}-error`;\n private helperId = `${this.inputId}-helper`;\n /**\n * Input value\n */\n @Prop({ mutable: true }) value: string = '';\n\n /**\n * Input label\n */\n @Prop() label: string = '';\n\n /**\n * Input placeholder\n */\n @Prop() placeholder: string = '';\n\n /**\n * Background color\n */\n @Prop() bgColor: string = 'white';\n\n /**\n * Border/focus color\n */\n @Prop() color: string = '#008480';\n\n /**\n * Whether the input is disabled\n */\n @Prop() disabled: boolean = false;\n\n /**\n * Whether the input is readonly\n */\n @Prop() readonly: boolean = false;\n\n /**\n * Whether to show clear button\n */\n @Prop() clearable: boolean = true;\n\n /**\n * Number of rows\n */\n @Prop() rows: number = 3;\n\n /**\n * Whether to hide validation details\n */\n @Prop() hideDetails: boolean | 'auto' = 'auto';\n\n /**\n * Error message\n */\n @Prop() error: string = '';\n\n /**\n * Helper text\n */\n @Prop() helperText: string = '';\n\n /**\n * Whether the input is required\n */\n @Prop() required: boolean = false;\n\n /**\n * Input event\n */\n @Event() xplorInput: EventEmitter<string>;\n\n /**\n * Change event\n */\n @Event() xplorChange: EventEmitter<string>;\n\n /**\n * Clear event\n */\n @Event() xplorClear: EventEmitter<void>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLTextAreaElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleClear = () => {\n this.value = '';\n this.xplorClear.emit();\n this.xplorChange.emit(this.value);\n };\n\n render() {\n const hasValue = this.value != null && this.value !== '';\n const isFloating = this.isFocused || hasValue;\n\n const containerClasses = {\n 'xplor-input-text-area': true,\n 'xplor-input-text-area--focused': this.isFocused,\n 'xplor-input-text-area--floating': isFloating,\n 'xplor-input-text-area--disabled': this.disabled,\n 'xplor-input-text-area--error': !!this.error,\n };\n\n const showClearButton = this.clearable && this.value && !this.readonly && !this.disabled;\n const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));\n\n return (\n <Host>\n <div class={containerClasses}>\n <div class=\"xplor-input-text-area__field\">\n <textarea\n id={this.inputId}\n class=\"xplor-input-text-area__input\"\n value={this.value}\n placeholder={isFloating ? this.placeholder : ''}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n rows={this.rows}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n style={{\n backgroundColor: this.bgColor,\n }}\n aria-invalid={this.error ? 'true' : undefined}\n aria-required={this.required ? 'true' : undefined}\n aria-describedby={this.error ? this.errorId : this.helperText ? this.helperId : undefined}\n />\n {this.label && (\n <label\n class=\"xplor-input-text-area__label\"\n htmlFor={this.inputId}\n style={{ backgroundColor: this.bgColor }}\n >\n {this.label}\n {this.required && <span class=\"xplor-input-text-area__required\">*</span>}\n </label>\n )}\n {showClearButton && (\n <button\n type=\"button\"\n class=\"xplor-input-text-area__clear\"\n onClick={this.handleClear}\n aria-label=\"Clear\"\n >\n ✕\n </button>\n )}\n </div>\n\n {showDetails && (\n <div class=\"xplor-input-text-area__details\">\n {this.error && <div class=\"xplor-input-text-area__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text-area__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -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: 'a62362fc1f52b7206cffc0756a1a32cdcfbf3ec0' }, h("div", { key: 'c4358644e222ebb2d2349d2f11e7bee17d032c1d', class: containerClasses }, this.label && (h("label", { key: '95dd10cc4f9c27d50aaf6beb5993bf68f45a6352', class: "input-secondary__label", htmlFor: this.inputId }, this.label, this.required && h("span", { key: 'c904c62b4d8124adff62eb8b9759da11835a50cf', class: "input-secondary__required" }, "*"))), h("div", { key: '72ee352843e05f39be97683a4c5d16172e72cb9a', class: "input-secondary__field" }, h("input", { key: 'f76ba5ffa6047ff85fbe73541055c3e5fc56632d', 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: '521dbc72d697f2fb86c0d192efeb987f6033c587', name: "append-inner" })), showDetails && (h("div", { key: 'e155a41d29fd859467e277799746bc253f28aa73', class: "input-secondary__details" }, this.error && h("div", { key: 'fa3b2fbc558a6d5024a77d011141264d2155def8', class: "input-secondary__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '9f0598ea14a287cdc25435e4f8caf740b722bfb3', class: "input-secondary__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: 'e65a65f11e1d63118dd2566d0eeae7b950ff5987', 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: 'd704477e948ba0d8184a4a1231b855d56ea8c390' }, h("input", { key: 'd1c171f69b54b7981f56da8b3651f212c52e1af9', 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: '889187734e978da8f6303bc6348d16ff58a4f117', class: `theme-${this.brand}` }, h("a", { key: '31ec1b964e1033ed77ae8e13d4d6a2bbb47681ae', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '5c368f18b9189f2e7d6b078f8d8d55422dbba8be', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: 'c59f722b0c6d67af621872de924f3bfddbee2b71', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '69a8672d3dfa05ae91762f63f879359ee8eaae7c', class: "bg-white py-24 sm:py-32" }, h("div", { key: 'f3cf50757eee5bd60902d9402b9169ace12ab570', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '06c98d24f3fe053033b6e4ab6e7d3339797cfb4f', class: "max-w-xl" }, h("h2", { key: '6a8c0b137fa3cc971271df5f55a87b11d01abc52', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: 'ae46370f680162d2d073a8a81762ee5cabf66506', 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: 'a02b593fe26d9814b2ebe89bb1fc8a93e7b25dbe', 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: 'a2ce1ff6fc5379cc1c3d93dbb0ede1f47dc20e06' }, h("div", { key: '8ef99aacde6e9d5ea9c3c05ee8f4e262655bd130', class: "flex items-center gap-x-6" }, h("img", { key: 'e742f8c1d0cb3e6bd5649a94966c01027314dc7e', 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: 'dd31c47ff1c7b1d6c3f11938abb61b7556ef9e9c' }, h("h3", { key: 'a1c97a24c3c1baaa1a78409bcc8410aad4f4f1f7', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '77709dadf6ff62a9473ac88ce6fc419fe81217fc', 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: 'a63a1be6d3f7f91ee12d9ac55263862d4a304520' }, h("xplor-modal", { key: 'd96ca5c6388f90e2345da0b97b7683b785da01f9', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '8bdf1a54705992482008ffc724b90a182c19d6c9', name: "title", slot: "title" }), h("slot", { key: '91316e16134121d55bb5119a7ed6aacce244161a', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b728a60734f050286b8e36079cfcd6872d5bb737', name: "body", slot: "body" }), h("slot", { key: 'd2f44d88fd6e4b109193e07e013168c92741b202', name: "actions", slot: "actions" }))));
|
|
27
27
|
}
|
|
28
28
|
static get is() { return "xplor-modal-persistent"; }
|
|
29
29
|
static get properties() {
|
|
@@ -49,7 +49,7 @@ export class XplorNavTabs {
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
render() {
|
|
52
|
-
return (h(Host, { key: '
|
|
52
|
+
return (h(Host, { key: 'c2ea1eb0316856196a7c84589fa74cb05cf9bd0a' }, h("div", { key: '360f41422ff1a5b29417ffe02b150e19ad2779d3', class: {
|
|
53
53
|
'nav-tabs': true,
|
|
54
54
|
'nav-tabs--grow': this.grow,
|
|
55
55
|
[`nav-tabs--${this.color}`]: true,
|
|
@@ -57,7 +57,7 @@ export class XplorNavTabs {
|
|
|
57
57
|
'nav-tabs__tab': true,
|
|
58
58
|
'nav-tabs__tab--active': this.value === item.value,
|
|
59
59
|
'nav-tabs__tab--disabled': item.disabled,
|
|
60
|
-
}, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: '
|
|
60
|
+
}, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: '4b070fa29fa37e878b737fdc5d3eaa4b492bdc01' }))));
|
|
61
61
|
}
|
|
62
62
|
static get is() { return "xplor-nav-tabs"; }
|
|
63
63
|
static get encapsulation() { return "scoped"; }
|
|
@@ -102,7 +102,7 @@ export class XplorNavTabs {
|
|
|
102
102
|
"references": {
|
|
103
103
|
"NavTabItem": {
|
|
104
104
|
"location": "local",
|
|
105
|
-
"path": "/Users/
|
|
105
|
+
"path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-nav-tabs/xplor-nav-tabs.tsx",
|
|
106
106
|
"id": "src/components/xplor-nav-tabs/xplor-nav-tabs.tsx::NavTabItem"
|
|
107
107
|
}
|
|
108
108
|
}
|
|
@@ -76,10 +76,10 @@ export class XplorRadioBtn {
|
|
|
76
76
|
return all.filter(radio => radio !== this.el);
|
|
77
77
|
}
|
|
78
78
|
render() {
|
|
79
|
-
return (h("label", { key: '
|
|
79
|
+
return (h("label", { key: '7bc995d1df46cd9818692d9a2b59fc6560f23cdd', class: {
|
|
80
80
|
'radio-wrapper': true,
|
|
81
81
|
'radio-wrapper--disabled': this.disabled,
|
|
82
|
-
} }, h("div", { key: '
|
|
82
|
+
} }, h("div", { key: 'eea71f02b6335bd443f4410b350a61f1706a9b59', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: '0b61c18ef3a9f08f6b89176de2b7a4d21b16d9fc', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: '7b227dca0fa69409dc71a04bc642c2de30bd2562', class: "label" }, this.label))));
|
|
83
83
|
}
|
|
84
84
|
static get is() { return "xplor-radio-btn"; }
|
|
85
85
|
static get encapsulation() { return "shadow"; }
|