@xplor-education/core-stencil-components 3.1.1 → 3.1.2
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/xplor-input-text-area.js +6 -3
- package/components/xplor-input-text-area.js.map +1 -1
- package/components/xplor-input-text.js +6 -3
- package/components/xplor-input-text.js.map +1 -1
- package/dist/cjs/index-BjAapk2n.js.map +1 -1
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js +12 -6
- 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-file-upload/xplor-file-upload.js +2 -2
- package/dist/collection/components/xplor-input-select/xplor-input-select.js +1 -1
- 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-nav-tabs/xplor-nav-tabs.js +1 -1
- package/dist/collection/components/xplor-tooltip/xplor-tooltip.js +2 -2
- package/dist/components/index.js.map +1 -1
- 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.js +6 -3
- package/dist/components/xplor-input-text.js.map +1 -1
- package/dist/esm/index-KRfMjDC2.js.map +1 -1
- package/dist/esm/xplor-alert-dialog_58.entry.js +12 -6
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +1 -1
- package/dist/hydrate/index.js +12 -6
- package/dist/hydrate/index.mjs +12 -6
- package/dist/xplor-component-library/{p-5b0cee73.entry.js → p-7ecb45dd.entry.js} +2 -2
- package/dist/xplor-component-library/p-7ecb45dd.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 +1 -1
- package/dist/xplor-component-library/p-5b0cee73.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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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
|
}
|
|
@@ -300,7 +300,7 @@ export class XplorFileUpload {
|
|
|
300
300
|
"references": {
|
|
301
301
|
"UploadedFile": {
|
|
302
302
|
"location": "local",
|
|
303
|
-
"path": "/Users/
|
|
303
|
+
"path": "/Users/darryn.lee-warden/Documents/DEV/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/darryn.lee-warden/Documents/DEV/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
|
}
|
|
@@ -340,7 +340,7 @@ export class XplorInputSelect {
|
|
|
340
340
|
"references": {
|
|
341
341
|
"SelectOption": {
|
|
342
342
|
"location": "local",
|
|
343
|
-
"path": "/Users/
|
|
343
|
+
"path": "/Users/darryn.lee-warden/Documents/DEV/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
|
}
|
|
@@ -273,12 +273,6 @@ ul.mdc-list li.mdc-list-item {
|
|
|
273
273
|
.xplor-input-text {
|
|
274
274
|
display: flex;
|
|
275
275
|
flex-direction: column;
|
|
276
|
-
gap: 0.25rem;
|
|
277
|
-
}
|
|
278
|
-
.xplor-input-text__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__required {
|
|
284
278
|
color: #d32f2f;
|
|
@@ -289,6 +283,21 @@ ul.mdc-list li.mdc-list-item {
|
|
|
289
283
|
display: flex;
|
|
290
284
|
align-items: center;
|
|
291
285
|
}
|
|
286
|
+
.xplor-input-text__label {
|
|
287
|
+
position: absolute;
|
|
288
|
+
left: 1rem;
|
|
289
|
+
top: 50%;
|
|
290
|
+
transform: translateY(-50%);
|
|
291
|
+
font-size: 1rem;
|
|
292
|
+
color: rgba(0, 0, 0, 0.6);
|
|
293
|
+
pointer-events: none;
|
|
294
|
+
padding: 0 0.25rem;
|
|
295
|
+
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);
|
|
296
|
+
max-width: calc(100% - 2rem);
|
|
297
|
+
overflow: hidden;
|
|
298
|
+
text-overflow: ellipsis;
|
|
299
|
+
white-space: nowrap;
|
|
300
|
+
}
|
|
292
301
|
.xplor-input-text__input {
|
|
293
302
|
width: 100%;
|
|
294
303
|
padding: 0.875rem 1rem;
|
|
@@ -297,18 +306,14 @@ ul.mdc-list li.mdc-list-item {
|
|
|
297
306
|
border: 1px solid rgba(0, 0, 0, 0.23);
|
|
298
307
|
border-radius: 1rem;
|
|
299
308
|
outline: none;
|
|
300
|
-
transition: border-color 0.
|
|
309
|
+
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);
|
|
310
|
+
min-height: 3rem;
|
|
301
311
|
}
|
|
302
312
|
.xplor-input-text__input::placeholder {
|
|
303
313
|
color: rgba(0, 0, 0, 0.38);
|
|
304
314
|
}
|
|
305
315
|
.xplor-input-text__input:hover:not(:disabled) {
|
|
306
|
-
border-color: rgba(0, 0, 0, 0.
|
|
307
|
-
}
|
|
308
|
-
.xplor-input-text__input:focus {
|
|
309
|
-
border-color: #008480;
|
|
310
|
-
border-width: 2px;
|
|
311
|
-
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
316
|
+
border-color: rgba(0, 0, 0, 0.87);
|
|
312
317
|
}
|
|
313
318
|
.xplor-input-text__input:disabled {
|
|
314
319
|
background-color: rgba(0, 0, 0, 0.04);
|
|
@@ -318,9 +323,32 @@ ul.mdc-list li.mdc-list-item {
|
|
|
318
323
|
.xplor-input-text__input:read-only {
|
|
319
324
|
background-color: rgba(0, 0, 0, 0.04);
|
|
320
325
|
}
|
|
326
|
+
.xplor-input-text--floating .xplor-input-text__label {
|
|
327
|
+
top: 0;
|
|
328
|
+
transform: translateY(-50%);
|
|
329
|
+
font-size: 0.75rem;
|
|
330
|
+
}
|
|
331
|
+
.xplor-input-text--focused .xplor-input-text__input {
|
|
332
|
+
border-color: #008480;
|
|
333
|
+
border-width: 2px;
|
|
334
|
+
padding: calc(0.875rem - 1px) calc(1rem - 1px);
|
|
335
|
+
}
|
|
336
|
+
.xplor-input-text--focused .xplor-input-text__label {
|
|
337
|
+
color: #008480;
|
|
338
|
+
}
|
|
321
339
|
.xplor-input-text--error .xplor-input-text__input {
|
|
322
340
|
border-color: #d32f2f;
|
|
323
341
|
}
|
|
342
|
+
.xplor-input-text--error .xplor-input-text__label {
|
|
343
|
+
color: #d32f2f;
|
|
344
|
+
}
|
|
345
|
+
.xplor-input-text--error.xplor-input-text--focused .xplor-input-text__input {
|
|
346
|
+
border-color: #d32f2f;
|
|
347
|
+
border-width: 2px;
|
|
348
|
+
}
|
|
349
|
+
.xplor-input-text--disabled .xplor-input-text__label {
|
|
350
|
+
color: rgba(0, 0, 0, 0.38);
|
|
351
|
+
}
|
|
324
352
|
.xplor-input-text__details {
|
|
325
353
|
min-height: 1.25rem;
|
|
326
354
|
padding: 0 1rem;
|
|
@@ -74,16 +74,19 @@ export class XplorInputText {
|
|
|
74
74
|
};
|
|
75
75
|
}
|
|
76
76
|
render() {
|
|
77
|
+
const hasValue = this.value != null && this.value !== '';
|
|
78
|
+
const isFloating = this.isFocused || hasValue;
|
|
77
79
|
const containerClasses = {
|
|
78
80
|
'xplor-input-text': true,
|
|
79
81
|
'xplor-input-text--focused': this.isFocused,
|
|
82
|
+
'xplor-input-text--floating': isFloating,
|
|
80
83
|
'xplor-input-text--disabled': this.disabled,
|
|
81
84
|
'xplor-input-text--error': !!this.error,
|
|
82
85
|
};
|
|
83
86
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && (this.error || this.helperText));
|
|
84
|
-
return (h(Host, { key: '
|
|
87
|
+
return (h(Host, { key: 'ad1ea36a553bd5e2f5f20c22d890bfad0c26acb3' }, h("div", { key: 'e4c0a0a4c63b1a5c8396004e79274b67ecf739eb', class: containerClasses }, h("div", { key: 'fae83f51d4cce2ff16c4a62c18ca824c6fa3dca8', class: "xplor-input-text__field" }, h("input", { key: '333a51d2b0be3015c8ea73f968c15af7932c60b5', id: this.inputId, type: this.type, class: "xplor-input-text__input", value: this.value, placeholder: isFloating ? 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
88
|
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: '
|
|
89
|
+
}, "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: '0b09ac4c387ebbab0ff3f347af7f9d9f3c4eecee', class: "xplor-input-text__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && h("span", { key: 'df37f253d33b836f4c3d314c91dcd175afaa78ea', class: "xplor-input-text__required" }, "*"))), h("slot", { key: '3a45420f690eb79f22788a26e2b3dcb3b72c4a55', name: "append-inner" })), showDetails && (h("div", { key: '4b9ab78e1362a44e9d9f0297424b8069a3f69840', class: "xplor-input-text__details" }, this.error && h("div", { key: 'eb69eade9944edb5f088b279603d6c98800122a2', class: "xplor-input-text__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: '433ad514edd52b3eb544fd1f5ec7e0ab96fae3b1', class: "xplor-input-text__helper-text", id: this.helperId }, this.helperText))), h("slot", { key: '05881a3abae9226639eb0ffe646f9bd5cd92343c', name: "append" }))));
|
|
87
90
|
}
|
|
88
91
|
static get is() { return "xplor-input-text"; }
|
|
89
92
|
static get encapsulation() { return "scoped"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"xplor-input-text.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text/xplor-input-text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAErF,IAAI,kBAAkB,GAAG,CAAC,CAAC;AAO3B,MAAM,OAAO,cAAc;IAL3B;QAMU,YAAO,GAAG,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;QACrD,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,SAAI,GAAW,MAAM,CAAC;QAE9B;;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,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;QAsBzB,cAAS,GAAY,KAAK,CAAC;QAE5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,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,MAA0B,CAAC;YAChD,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,CAAC,KAAiB,EAAE,EAAE;YAC1C,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC,CAAC;QAEM,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"xplor-input-text.js","sourceRoot":"","sources":["../../../src/components/xplor-input-text/xplor-input-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, State } from '@stencil/core';\n\nlet inputTextIdCounter = 0;\n\n@Component({\n tag: 'xplor-input-text',\n styleUrl: 'xplor-input-text.scss',\n scoped: true,\n})\nexport class XplorInputText {\n private inputId = `xplor-input-text-${++inputTextIdCounter}`;\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 * Input type (text, email, password, number, etc.)\n */\n @Prop() type: string = 'text';\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 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 * Focus event\n */\n @Event() xplorFocus: EventEmitter<FocusEvent>;\n\n /**\n * Blur event\n */\n @Event() xplorBlur: EventEmitter<FocusEvent>;\n\n @State() isFocused: boolean = false;\n\n private handleInput = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorInput.emit(this.value);\n };\n\n private handleChange = (event: Event) => {\n const target = event.target as HTMLInputElement;\n this.value = target.value;\n this.xplorChange.emit(this.value);\n };\n\n private handleFocus = (event: FocusEvent) => {\n this.isFocused = true;\n this.xplorFocus.emit(event);\n };\n\n private handleBlur = (event: FocusEvent) => {\n this.isFocused = false;\n this.xplorBlur.emit(event);\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': true,\n 'xplor-input-text--focused': this.isFocused,\n 'xplor-input-text--floating': isFloating,\n 'xplor-input-text--disabled': this.disabled,\n 'xplor-input-text--error': !!this.error,\n };\n\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__field\">\n <input\n id={this.inputId}\n type={this.type}\n class=\"xplor-input-text__input\"\n value={this.value}\n placeholder={isFloating ? this.placeholder : ''}\n disabled={this.disabled}\n readonly={this.readonly}\n required={this.required}\n onInput={this.handleInput}\n onChange={this.handleChange}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\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__label\"\n htmlFor={this.inputId}\n style={{ backgroundColor: this.bgColor }}\n >\n {this.label}\n {this.required && <span class=\"xplor-input-text__required\">*</span>}\n </label>\n )}\n <slot name=\"append-inner\" />\n </div>\n\n {showDetails && (\n <div class=\"xplor-input-text__details\">\n {this.error && <div class=\"xplor-input-text__error-message\" id={this.errorId}>{this.error}</div>}\n {!this.error && this.helperText && <div class=\"xplor-input-text__helper-text\" id={this.helperId}>{this.helperText}</div>}\n </div>\n )}\n\n <slot name=\"append\" />\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -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: '03e7821b3945d7d8e00a5ce1551a6b26d21001fa' }, h("div", { key: '36f0e99d90b1adb5cb38a8ca8d987511569b39e6', class: containerClasses }, h("div", { key: '7f8880ab17fdfd446f7bf08dc3db46584cb5419e', class: "xplor-input-text-area__field" }, h("textarea", { key: 'fd8941771e1378818d9b668315013fa66ed49c78', 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: '6df4ae89eff4ff09d6b2e09a9c002c60d1ca8b27', class: "xplor-input-text-area__label", htmlFor: this.inputId, style: { backgroundColor: this.bgColor } }, this.label, this.required && h("span", { key: 'd5e01ae02bdd95ba101f4e335c01557d0c49247b', class: "xplor-input-text-area__required" }, "*"))), showClearButton && (h("button", { key: 'e38945bc2f3e46d0583d2c28e0b03d659eb4887a', type: "button", class: "xplor-input-text-area__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u2715"))), showDetails && (h("div", { key: 'e9deb3dfb6d8fbe9e677cf726c21bcee9b7cf5e5', class: "xplor-input-text-area__details" }, this.error && h("div", { key: 'cdb4c09dd0e9b2e5f71e10b01b7662d6cbfe5fe9', class: "xplor-input-text-area__error-message", id: this.errorId }, this.error), !this.error && this.helperText && h("div", { key: 'baa31eb60d09957f394f839f86bca1d1d90e9d9c', 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":"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","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"]}
|
|
@@ -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
|
}
|
|
@@ -184,7 +184,7 @@ export class XplorTooltip {
|
|
|
184
184
|
"references": {
|
|
185
185
|
"TooltipPosition": {
|
|
186
186
|
"location": "local",
|
|
187
|
-
"path": "/Users/
|
|
187
|
+
"path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-tooltip/xplor-tooltip.tsx",
|
|
188
188
|
"id": "src/components/xplor-tooltip/xplor-tooltip.tsx::TooltipPosition"
|
|
189
189
|
}
|
|
190
190
|
}
|
|
@@ -210,7 +210,7 @@ export class XplorTooltip {
|
|
|
210
210
|
"references": {
|
|
211
211
|
"TooltipTrigger": {
|
|
212
212
|
"location": "local",
|
|
213
|
-
"path": "/Users/
|
|
213
|
+
"path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-tooltip/xplor-tooltip.tsx",
|
|
214
214
|
"id": "src/components/xplor-tooltip/xplor-tooltip.tsx::TooltipTrigger"
|
|
215
215
|
}
|
|
216
216
|
}
|