@ds-mo/ui 15.11.1 → 15.11.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/dist/.package-ready.json +1 -1
- package/dist/agent-patterns.json +1 -1
- package/dist/agent.json +1 -1
- package/dist/components/THIRD-PARTY-NOTICES +1 -1
- package/dist/components/bundled-dependencies.json +1 -1
- package/dist/components/ds-agent-questionnaire.js +1 -1
- package/dist/components/ds-agent-response.js +1 -1
- package/dist/components/ds-banner.js +1 -1
- package/dist/components/ds-bar-nav.js +1 -1
- package/dist/components/ds-bar-page-title.js +1 -1
- package/dist/components/ds-bar-title.js +1 -1
- package/dist/components/ds-bar-workflow.js +1 -1
- package/dist/components/ds-button-unfilled.js +1 -1
- package/dist/components/ds-calendar.js +1 -1
- package/dist/components/ds-card-chart.js +1 -1
- package/dist/components/ds-card-overview.js +1 -1
- package/dist/components/ds-card-setting.js +1 -1
- package/dist/components/ds-chart.js +1 -1
- package/dist/components/ds-code-block.js +1 -1
- package/dist/components/ds-data-customize.js +1 -1
- package/dist/components/ds-data-filter.js +1 -1
- package/dist/components/ds-data-group.js +1 -1
- package/dist/components/ds-data-preferences.js +1 -1
- package/dist/components/ds-data-saved-views.js +1 -1
- package/dist/components/ds-data-search.js +1 -1
- package/dist/components/ds-data-sort.js +1 -1
- package/dist/components/ds-filter-menu.js +1 -1
- package/dist/components/ds-input-date.js +1 -1
- package/dist/components/ds-input-time.js +1 -1
- package/dist/components/ds-input.js +1 -1
- package/dist/components/ds-markdown.js +1 -1
- package/dist/components/ds-menu.js +1 -1
- package/dist/components/ds-message-actions.js +1 -1
- package/dist/components/ds-message-composer.js +1 -1
- package/dist/components/ds-message-scroller.js +1 -1
- package/dist/components/ds-mobile-header.js +1 -1
- package/dist/components/ds-mobile-section-switcher.js +1 -1
- package/dist/components/ds-mobile-sheet-nav.js +1 -1
- package/dist/components/ds-modal.js +1 -1
- package/dist/components/ds-pagination.js +1 -1
- package/dist/components/ds-panel-nav.js +1 -1
- package/dist/components/ds-panel-tool-header.js +1 -1
- package/dist/components/ds-panel-tool-search.js +1 -1
- package/dist/components/ds-panel-tools.js +1 -1
- package/dist/components/ds-select.js +1 -1
- package/dist/components/ds-shell-app.js +1 -1
- package/dist/components/ds-shell-tools.js +1 -1
- package/dist/components/ds-table.js +1 -1
- package/dist/components/ds-table.js.map +1 -1
- package/dist/components/ds-toast.js +1 -1
- package/dist/components/ds-tooltip-chart.js +1 -1
- package/dist/components/ds-tooltip.js +1 -1
- package/dist/components/{p-B9Q7fXxW.js → p-4qKHg502.js} +2 -2
- package/dist/components/{p-DixX2_Bd.js → p-529k8euH.js} +2 -2
- package/dist/components/{p-CEB8RFih.js → p-BI6L3JoU.js} +2 -2
- package/dist/components/p-BjYoM1f8.js +2 -0
- package/dist/components/{p-BqIRExej.js.map → p-BjYoM1f8.js.map} +1 -1
- package/dist/components/p-BkKdzYZP.js +2 -0
- package/dist/components/{p-B5rN3slq.js.map → p-BkKdzYZP.js.map} +1 -1
- package/dist/components/{p-DKG26pp5.js → p-BrJebF5t.js} +2 -2
- package/dist/components/{p-y2Sdv9M3.js → p-BvlkO__o.js} +2 -2
- package/dist/components/{p-DvMCOJwc.js → p-C31AjGbg.js} +2 -2
- package/dist/components/{p-DwFnt0W0.js → p-C4kVTIBc.js} +2 -2
- package/dist/components/{p-BNnw_O4e.js → p-C6VWVB87.js} +2 -2
- package/dist/components/{p-CaNMVLhm.js → p-CC4X8rpT.js} +2 -2
- package/dist/components/{p-S5QCVAdH.js → p-CJ-igzsZ.js} +2 -2
- package/dist/components/{p-D-cZ6cRI.js → p-CTstnsLe.js} +2 -2
- package/dist/components/{p-Ba-dSshd.js → p-CXF8wj9I.js} +2 -2
- package/dist/components/{p-OFJpWJcN.js → p-Cqg9T781.js} +2 -2
- package/dist/components/p-D0kzIzGQ.js +2 -0
- package/dist/components/p-D0kzIzGQ.js.map +1 -0
- package/dist/components/p-DEJLfD7k.js +2 -0
- package/dist/components/p-DEJLfD7k.js.map +1 -0
- package/dist/components/{p-BkajUPiA.js → p-DHmHllUM.js} +2 -2
- package/dist/components/p-DNtwJJOC.js +2 -0
- package/dist/components/p-DNtwJJOC.js.map +1 -0
- package/dist/components/{p-DfwvHxYi.js → p-DXEInGEq.js} +2 -2
- package/dist/components/{p-DGDF4NMV.js → p-DcVK0W4X.js} +2 -2
- package/dist/components/{p-Cxk1A7Sx.js → p-Ds58qo_J.js} +2 -2
- package/dist/components/{p-CMrHRjjH.js → p-DwcAROOo.js} +2 -2
- package/dist/components/{p-CW-7vLUB.js → p-DxVokKm8.js} +2 -2
- package/dist/components/{p-CqW2eyiF.js → p-E0RqkUNq.js} +2 -2
- package/dist/components/p-HNktxWtF.js +2 -0
- package/dist/components/p-HNktxWtF.js.map +1 -0
- package/dist/components/{p-DfzXyVoM.js → p-YE1r-XSR.js} +2 -2
- package/dist/components/{p-CeXf9-X3.js → p-mSCnWLhL.js} +2 -2
- package/dist/components/{p-C8D853vs.js → p-vrRbdZAI.js} +2 -2
- package/dist/docs/components.json +16 -16
- package/dist/mcp-data/registry/agent-activity.json +2 -2
- package/dist/mcp-data/registry/agent-questionnaire.json +2 -2
- package/dist/mcp-data/registry/agent-response.json +2 -2
- package/dist/mcp-data/registry/agent-source-list.json +2 -2
- package/dist/mcp-data/registry/agent-tool-call.json +2 -2
- package/dist/mcp-data/registry/attachment-list.json +2 -2
- package/dist/mcp-data/registry/avatar.json +2 -2
- package/dist/mcp-data/registry/badge.json +2 -2
- package/dist/mcp-data/registry/banner.json +2 -2
- package/dist/mcp-data/registry/bar-action.json +2 -2
- package/dist/mcp-data/registry/bar-nav.json +2 -2
- package/dist/mcp-data/registry/bar-page-title.json +2 -2
- package/dist/mcp-data/registry/bar-title.json +2 -2
- package/dist/mcp-data/registry/bar-workflow.json +2 -2
- package/dist/mcp-data/registry/breadcrumb.json +2 -2
- package/dist/mcp-data/registry/button-filled.json +2 -2
- package/dist/mcp-data/registry/button-inverted.json +2 -2
- package/dist/mcp-data/registry/button-unfilled.json +2 -2
- package/dist/mcp-data/registry/calendar.json +2 -2
- package/dist/mcp-data/registry/card-action-center.json +2 -2
- package/dist/mcp-data/registry/card-chart.json +2 -2
- package/dist/mcp-data/registry/card-navigation.json +2 -2
- package/dist/mcp-data/registry/card-overview.json +2 -2
- package/dist/mcp-data/registry/card-setting.json +2 -2
- package/dist/mcp-data/registry/card-settings-scope.json +2 -2
- package/dist/mcp-data/registry/chart-legend.json +2 -2
- package/dist/mcp-data/registry/chart.json +2 -2
- package/dist/mcp-data/registry/checkbox-group.json +2 -2
- package/dist/mcp-data/registry/checkbox.json +2 -2
- package/dist/mcp-data/registry/chip.json +2 -2
- package/dist/mcp-data/registry/code-block.json +2 -2
- package/dist/mcp-data/registry/conversation-list-item.json +2 -2
- package/dist/mcp-data/registry/conversation-list-section.json +2 -2
- package/dist/mcp-data/registry/conversation-list.json +2 -2
- package/dist/mcp-data/registry/data-customize.json +2 -2
- package/dist/mcp-data/registry/data-filter.json +2 -2
- package/dist/mcp-data/registry/data-group.json +2 -2
- package/dist/mcp-data/registry/data-preferences.json +2 -2
- package/dist/mcp-data/registry/data-saved-views.json +2 -2
- package/dist/mcp-data/registry/data-search.json +2 -2
- package/dist/mcp-data/registry/data-sort.json +2 -2
- package/dist/mcp-data/registry/data-toolbar.json +2 -2
- package/dist/mcp-data/registry/divider.json +2 -2
- package/dist/mcp-data/registry/empty-state.json +2 -2
- package/dist/mcp-data/registry/field.json +2 -2
- package/dist/mcp-data/registry/filter-menu.json +2 -2
- package/dist/mcp-data/registry/icon.json +2 -2
- package/dist/mcp-data/registry/inline-banner-settings.json +2 -2
- package/dist/mcp-data/registry/input-date.json +3 -3
- package/dist/mcp-data/registry/input-time.json +3 -3
- package/dist/mcp-data/registry/input.json +2 -2
- package/dist/mcp-data/registry/loader.json +2 -2
- package/dist/mcp-data/registry/map-cluster-marker.json +2 -2
- package/dist/mcp-data/registry/map-entity-marker.json +2 -2
- package/dist/mcp-data/registry/map-marker.json +2 -2
- package/dist/mcp-data/registry/markdown.json +2 -2
- package/dist/mcp-data/registry/menu.json +2 -2
- package/dist/mcp-data/registry/message-actions.json +2 -2
- package/dist/mcp-data/registry/message-bubble.json +2 -2
- package/dist/mcp-data/registry/message-composer.json +2 -2
- package/dist/mcp-data/registry/message-scroller.json +2 -2
- package/dist/mcp-data/registry/message.json +2 -2
- package/dist/mcp-data/registry/mobile-bar-nav.json +2 -2
- package/dist/mcp-data/registry/mobile-header.json +2 -2
- package/dist/mcp-data/registry/mobile-section-switcher.json +2 -2
- package/dist/mcp-data/registry/mobile-sheet-nav.json +2 -2
- package/dist/mcp-data/registry/modal.json +2 -2
- package/dist/mcp-data/registry/navigation-tab-group.json +2 -2
- package/dist/mcp-data/registry/pagination.json +2 -2
- package/dist/mcp-data/registry/panel-nav.json +2 -2
- package/dist/mcp-data/registry/panel-sub-nav.json +2 -2
- package/dist/mcp-data/registry/panel-tool-header.json +2 -2
- package/dist/mcp-data/registry/panel-tool-search.json +2 -2
- package/dist/mcp-data/registry/panel-tools.json +2 -2
- package/dist/mcp-data/registry/paper-texture.json +2 -2
- package/dist/mcp-data/registry/radio-tile.json +2 -2
- package/dist/mcp-data/registry/radio.json +2 -2
- package/dist/mcp-data/registry/registry.json +2 -2
- package/dist/mcp-data/registry/score.json +2 -2
- package/dist/mcp-data/registry/scroll-overlay.json +2 -2
- package/dist/mcp-data/registry/select-toggle.json +2 -2
- package/dist/mcp-data/registry/select.json +2 -2
- package/dist/mcp-data/registry/setting-row-checkbox.json +2 -2
- package/dist/mcp-data/registry/setting-row-radio.json +2 -2
- package/dist/mcp-data/registry/setting-row-toggle.json +2 -2
- package/dist/mcp-data/registry/shell-app.json +2 -2
- package/dist/mcp-data/registry/shell-page.json +2 -2
- package/dist/mcp-data/registry/shell-tools.json +2 -2
- package/dist/mcp-data/registry/skeleton.json +2 -2
- package/dist/mcp-data/registry/slider.json +2 -2
- package/dist/mcp-data/registry/swatch-picker.json +2 -2
- package/dist/mcp-data/registry/switch.json +2 -2
- package/dist/mcp-data/registry/tab-group.json +2 -2
- package/dist/mcp-data/registry/table.json +14 -4
- package/dist/mcp-data/registry/tag.json +2 -2
- package/dist/mcp-data/registry/text.json +2 -2
- package/dist/mcp-data/registry/textarea.json +2 -2
- package/dist/mcp-data/registry/time-picker.json +2 -2
- package/dist/mcp-data/registry/toast.json +2 -2
- package/dist/mcp-data/registry/tooltip-chart.json +2 -2
- package/dist/mcp-data/registry/tooltip.json +2 -2
- package/dist/mcp-data/registry/typing-indicator.json +2 -2
- package/dist/types/components/InputDate/InputDate.d.ts +5 -6
- package/dist/types/components/InputTime/InputTime.d.ts +5 -6
- package/dist/types/components/Table/Table.d.ts +5 -48
- package/dist/types/components/Table/table-caption-controller.d.ts +54 -0
- package/dist/types/components/Table/table-cell-editor.d.ts +1 -1
- package/dist/types/components/Table/table-editing-controller.d.ts +37 -0
- package/dist/types/utils/picker-popup-controller.d.ts +24 -0
- package/dist/types/utils/select-controller.d.ts +1 -0
- package/package.json +6 -6
- package/dist/components/p-B5rN3slq.js +0 -2
- package/dist/components/p-BT6xQogY.js +0 -2
- package/dist/components/p-BT6xQogY.js.map +0 -1
- package/dist/components/p-BqIRExej.js +0 -2
- package/dist/components/p-CPNA8raE.js +0 -2
- package/dist/components/p-CPNA8raE.js.map +0 -1
- package/dist/components/p-Djkk338n.js +0 -2
- package/dist/components/p-Djkk338n.js.map +0 -1
- package/dist/types/utils/cartesian-chart-layout.d.ts +0 -13
- package/dist/types/utils/chart-viewport-controller.d.ts +0 -21
- /package/dist/components/{p-B9Q7fXxW.js.map → p-4qKHg502.js.map} +0 -0
- /package/dist/components/{p-DixX2_Bd.js.map → p-529k8euH.js.map} +0 -0
- /package/dist/components/{p-CEB8RFih.js.map → p-BI6L3JoU.js.map} +0 -0
- /package/dist/components/{p-DKG26pp5.js.map → p-BrJebF5t.js.map} +0 -0
- /package/dist/components/{p-y2Sdv9M3.js.map → p-BvlkO__o.js.map} +0 -0
- /package/dist/components/{p-DvMCOJwc.js.map → p-C31AjGbg.js.map} +0 -0
- /package/dist/components/{p-DwFnt0W0.js.map → p-C4kVTIBc.js.map} +0 -0
- /package/dist/components/{p-BNnw_O4e.js.map → p-C6VWVB87.js.map} +0 -0
- /package/dist/components/{p-CaNMVLhm.js.map → p-CC4X8rpT.js.map} +0 -0
- /package/dist/components/{p-S5QCVAdH.js.map → p-CJ-igzsZ.js.map} +0 -0
- /package/dist/components/{p-D-cZ6cRI.js.map → p-CTstnsLe.js.map} +0 -0
- /package/dist/components/{p-Ba-dSshd.js.map → p-CXF8wj9I.js.map} +0 -0
- /package/dist/components/{p-OFJpWJcN.js.map → p-Cqg9T781.js.map} +0 -0
- /package/dist/components/{p-BkajUPiA.js.map → p-DHmHllUM.js.map} +0 -0
- /package/dist/components/{p-DfwvHxYi.js.map → p-DXEInGEq.js.map} +0 -0
- /package/dist/components/{p-DGDF4NMV.js.map → p-DcVK0W4X.js.map} +0 -0
- /package/dist/components/{p-Cxk1A7Sx.js.map → p-Ds58qo_J.js.map} +0 -0
- /package/dist/components/{p-CMrHRjjH.js.map → p-DwcAROOo.js.map} +0 -0
- /package/dist/components/{p-CW-7vLUB.js.map → p-DxVokKm8.js.map} +0 -0
- /package/dist/components/{p-CqW2eyiF.js.map → p-E0RqkUNq.js.map} +0 -0
- /package/dist/components/{p-DfzXyVoM.js.map → p-YE1r-XSR.js.map} +0 -0
- /package/dist/components/{p-CeXf9-X3.js.map → p-mSCnWLhL.js.map} +0 -0
- /package/dist/components/{p-C8D853vs.js.map → p-vrRbdZAI.js.map} +0 -0
|
@@ -128,8 +128,8 @@
|
|
|
128
128
|
},
|
|
129
129
|
"peerDependencies": {
|
|
130
130
|
"required": [
|
|
131
|
-
"@ds-mo/tokens ^8.0.
|
|
132
|
-
"@ds-mo/icons ^8.1.
|
|
131
|
+
"@ds-mo/tokens ^8.0.1",
|
|
132
|
+
"@ds-mo/icons ^8.1.2"
|
|
133
133
|
],
|
|
134
134
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
135
135
|
}
|
|
@@ -90,8 +90,8 @@
|
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"required": [
|
|
93
|
-
"@ds-mo/tokens ^8.0.
|
|
94
|
-
"@ds-mo/icons ^8.1.
|
|
93
|
+
"@ds-mo/tokens ^8.0.1",
|
|
94
|
+
"@ds-mo/icons ^8.1.2"
|
|
95
95
|
],
|
|
96
96
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
97
97
|
}
|
|
@@ -369,8 +369,8 @@
|
|
|
369
369
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fieldOrder, fields, hiddenFieldIds, options.",
|
|
370
370
|
"peerDependencies": {
|
|
371
371
|
"required": [
|
|
372
|
-
"@ds-mo/tokens ^8.0.
|
|
373
|
-
"@ds-mo/icons ^8.1.
|
|
372
|
+
"@ds-mo/tokens ^8.0.1",
|
|
373
|
+
"@ds-mo/icons ^8.1.2"
|
|
374
374
|
],
|
|
375
375
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
376
376
|
}
|
|
@@ -487,8 +487,8 @@
|
|
|
487
487
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: filters, matchModes, values.",
|
|
488
488
|
"peerDependencies": {
|
|
489
489
|
"required": [
|
|
490
|
-
"@ds-mo/tokens ^8.0.
|
|
491
|
-
"@ds-mo/icons ^8.1.
|
|
490
|
+
"@ds-mo/tokens ^8.0.1",
|
|
491
|
+
"@ds-mo/icons ^8.1.2"
|
|
492
492
|
],
|
|
493
493
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
494
494
|
}
|
|
@@ -351,8 +351,8 @@
|
|
|
351
351
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: grouping, options.",
|
|
352
352
|
"peerDependencies": {
|
|
353
353
|
"required": [
|
|
354
|
-
"@ds-mo/tokens ^8.0.
|
|
355
|
-
"@ds-mo/icons ^8.1.
|
|
354
|
+
"@ds-mo/tokens ^8.0.1",
|
|
355
|
+
"@ds-mo/icons ^8.1.2"
|
|
356
356
|
],
|
|
357
357
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
358
358
|
}
|
|
@@ -573,8 +573,8 @@
|
|
|
573
573
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: customizeOptions, customizeSections, fieldOrder, fields, filters, grouping, groupingOptions, hiddenFieldIds, matchModes, pinnedFieldIds, sort, sortColumns, values.",
|
|
574
574
|
"peerDependencies": {
|
|
575
575
|
"required": [
|
|
576
|
-
"@ds-mo/tokens ^8.0.
|
|
577
|
-
"@ds-mo/icons ^8.1.
|
|
576
|
+
"@ds-mo/tokens ^8.0.1",
|
|
577
|
+
"@ds-mo/icons ^8.1.2"
|
|
578
578
|
],
|
|
579
579
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
580
580
|
}
|
|
@@ -418,8 +418,8 @@
|
|
|
418
418
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: views.",
|
|
419
419
|
"peerDependencies": {
|
|
420
420
|
"required": [
|
|
421
|
-
"@ds-mo/tokens ^8.0.
|
|
422
|
-
"@ds-mo/icons ^8.1.
|
|
421
|
+
"@ds-mo/tokens ^8.0.1",
|
|
422
|
+
"@ds-mo/icons ^8.1.2"
|
|
423
423
|
],
|
|
424
424
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
425
425
|
}
|
|
@@ -348,8 +348,8 @@
|
|
|
348
348
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, selectedFieldIds.",
|
|
349
349
|
"peerDependencies": {
|
|
350
350
|
"required": [
|
|
351
|
-
"@ds-mo/tokens ^8.0.
|
|
352
|
-
"@ds-mo/icons ^8.1.
|
|
351
|
+
"@ds-mo/tokens ^8.0.1",
|
|
352
|
+
"@ds-mo/icons ^8.1.2"
|
|
353
353
|
],
|
|
354
354
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
355
355
|
}
|
|
@@ -244,8 +244,8 @@
|
|
|
244
244
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: fields, sort.",
|
|
245
245
|
"peerDependencies": {
|
|
246
246
|
"required": [
|
|
247
|
-
"@ds-mo/tokens ^8.0.
|
|
248
|
-
"@ds-mo/icons ^8.1.
|
|
247
|
+
"@ds-mo/tokens ^8.0.1",
|
|
248
|
+
"@ds-mo/icons ^8.1.2"
|
|
249
249
|
],
|
|
250
250
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
251
251
|
}
|
|
@@ -165,8 +165,8 @@
|
|
|
165
165
|
},
|
|
166
166
|
"peerDependencies": {
|
|
167
167
|
"required": [
|
|
168
|
-
"@ds-mo/tokens ^8.0.
|
|
169
|
-
"@ds-mo/icons ^8.1.
|
|
168
|
+
"@ds-mo/tokens ^8.0.1",
|
|
169
|
+
"@ds-mo/icons ^8.1.2"
|
|
170
170
|
],
|
|
171
171
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
172
172
|
}
|
|
@@ -208,8 +208,8 @@
|
|
|
208
208
|
},
|
|
209
209
|
"peerDependencies": {
|
|
210
210
|
"required": [
|
|
211
|
-
"@ds-mo/tokens ^8.0.
|
|
212
|
-
"@ds-mo/icons ^8.1.
|
|
211
|
+
"@ds-mo/tokens ^8.0.1",
|
|
212
|
+
"@ds-mo/icons ^8.1.2"
|
|
213
213
|
],
|
|
214
214
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
215
215
|
}
|
|
@@ -194,8 +194,8 @@
|
|
|
194
194
|
},
|
|
195
195
|
"peerDependencies": {
|
|
196
196
|
"required": [
|
|
197
|
-
"@ds-mo/tokens ^8.0.
|
|
198
|
-
"@ds-mo/icons ^8.1.
|
|
197
|
+
"@ds-mo/tokens ^8.0.1",
|
|
198
|
+
"@ds-mo/icons ^8.1.2"
|
|
199
199
|
],
|
|
200
200
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
201
201
|
}
|
|
@@ -218,8 +218,8 @@
|
|
|
218
218
|
},
|
|
219
219
|
"peerDependencies": {
|
|
220
220
|
"required": [
|
|
221
|
-
"@ds-mo/tokens ^8.0.
|
|
222
|
-
"@ds-mo/icons ^8.1.
|
|
221
|
+
"@ds-mo/tokens ^8.0.1",
|
|
222
|
+
"@ds-mo/icons ^8.1.2"
|
|
223
223
|
],
|
|
224
224
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
225
225
|
}
|
|
@@ -899,8 +899,8 @@
|
|
|
899
899
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary, filters, matchModes, values.",
|
|
900
900
|
"peerDependencies": {
|
|
901
901
|
"required": [
|
|
902
|
-
"@ds-mo/tokens ^8.0.
|
|
903
|
-
"@ds-mo/icons ^8.1.
|
|
902
|
+
"@ds-mo/tokens ^8.0.1",
|
|
903
|
+
"@ds-mo/icons ^8.1.2"
|
|
904
904
|
],
|
|
905
905
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
906
906
|
}
|
|
@@ -221,8 +221,8 @@
|
|
|
221
221
|
},
|
|
222
222
|
"peerDependencies": {
|
|
223
223
|
"required": [
|
|
224
|
-
"@ds-mo/tokens ^8.0.
|
|
225
|
-
"@ds-mo/icons ^8.1.
|
|
224
|
+
"@ds-mo/tokens ^8.0.1",
|
|
225
|
+
"@ds-mo/icons ^8.1.2"
|
|
226
226
|
],
|
|
227
227
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
228
228
|
}
|
|
@@ -146,8 +146,8 @@
|
|
|
146
146
|
},
|
|
147
147
|
"peerDependencies": {
|
|
148
148
|
"required": [
|
|
149
|
-
"@ds-mo/tokens ^8.0.
|
|
150
|
-
"@ds-mo/icons ^8.1.
|
|
149
|
+
"@ds-mo/tokens ^8.0.1",
|
|
150
|
+
"@ds-mo/icons ^8.1.2"
|
|
151
151
|
],
|
|
152
152
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
153
153
|
}
|
|
@@ -532,8 +532,8 @@
|
|
|
532
532
|
},
|
|
533
533
|
"peerDependencies": {
|
|
534
534
|
"required": [
|
|
535
|
-
"@ds-mo/tokens ^8.0.
|
|
536
|
-
"@ds-mo/icons ^8.1.
|
|
535
|
+
"@ds-mo/tokens ^8.0.1",
|
|
536
|
+
"@ds-mo/icons ^8.1.2"
|
|
537
537
|
],
|
|
538
538
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
539
539
|
}
|
|
@@ -556,7 +556,7 @@
|
|
|
556
556
|
},
|
|
557
557
|
{
|
|
558
558
|
"path": "src/wc/components/InputDate/InputDate.tsx",
|
|
559
|
-
"content": "import {\n AttachInternals,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n Method,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n formatIsoCalendarDateLabel,\n isIsoCalendarDate,\n parseLooseCalendarDate,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n restoreStringFormState,\n setFormControlValue,\n TOKEN_DEFAULTS,\n type ControlSize,\n type ControlWidth,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\n\nexport type InputDateSize = ControlSize;\nexport type InputDateWidth = ControlWidth;\n\nlet idCounter = 0;\n\nconst INVALID_DATE_MESSAGE = 'Enter a valid date.';\nconst DATE_BEFORE_MIN_MESSAGE = 'Date is before the minimum allowed date.';\nconst DATE_AFTER_MAX_MESSAGE = 'Date is after the maximum allowed date.';\n\n@Component({\n tag: 'ds-input-date',\n styleUrl: 'InputDate.css',\n scoped: true,\n formAssociated: true,\n})\nexport class InputDate {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-date-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n private popupId = `${this.generatedId}-popup`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n @Prop() min: string | undefined;\n @Prop() max: string | undefined;\n @Prop() size: InputDateSize = 'md';\n @Prop() width: InputDateWidth = 'fill';\n @Prop() hasBorder: boolean = true;\n @Prop() hasInteractionFill: boolean = true;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private initialValue = '';\n private inputEl?: HTMLInputElement;\n private controlEl?: HTMLElement;\n private calendarButton?: HTMLDsButtonUnfilledElement;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n @State() private formDisabled = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private draftText = '';\n @State() private open = false;\n @State() private shouldRender = false;\n @State() private closing = false;\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-date-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n anchorAlignment: 'popup-frame',\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-date-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.closePicker(false),\n });\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get formInactive(): boolean {\n return this.isInactive || this.disabled || this.formDisabled;\n }\n\n private get pickerInactive(): boolean {\n return this.formInactive || this.readOnly;\n }\n\n private get hasConstraintError(): boolean {\n if (!this.value) return false;\n if (!isIsoCalendarDate(this.value)) return true;\n if (this.min && isIsoCalendarDate(this.min) && this.value < this.min) return true;\n if (this.max && isIsoCalendarDate(this.max) && this.value > this.max) return true;\n return false;\n }\n\n private get isInvalid(): boolean {\n return (\n this.error ||\n (!this.formInactive &&\n ((this.required && this.value.length === 0) || this.hasConstraintError))\n );\n }\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n disconnectedCallback() {\n this.teardownListeners();\n this.open = false;\n this.shouldRender = false;\n this.closing = false;\n this.positionReady = false;\n this.focused = false;\n }\n\n @Watch('value')\n @Watch('required')\n @Watch('requiredMessage')\n @Watch('min')\n @Watch('max')\n syncFormValue() {\n const inactive = this.formInactive;\n setFormControlValue(this.internals, this.value, { inactive });\n const flags: ValidityStateFlags = {};\n let message = '';\n if (!inactive) {\n if (this.required && this.value.length === 0) {\n flags.valueMissing = true;\n message = this.requiredMessage;\n } else if (this.value && !isIsoCalendarDate(this.value)) {\n flags.badInput = true;\n message = INVALID_DATE_MESSAGE;\n } else if (this.value && this.min && isIsoCalendarDate(this.min) && this.value < this.min) {\n flags.rangeUnderflow = true;\n message = DATE_BEFORE_MIN_MESSAGE;\n } else if (this.value && this.max && isIsoCalendarDate(this.max) && this.value > this.max) {\n flags.rangeOverflow = true;\n message = DATE_AFTER_MAX_MESSAGE;\n }\n }\n this.internals.setValidity(flags, message);\n }\n\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('readOnly')\n onInteractionStateChange() {\n this.syncFormValue();\n if (this.pickerInactive && this.shouldRender) this.closePicker(false);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.onInteractionStateChange();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.draftText = this.displayValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n this.draftText = this.displayValue;\n }\n\n @Method()\n async setFocus() {\n this.inputEl?.focus();\n }\n\n @Listen('keydown')\n handleHostKeyDown(event: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.closePicker('button');\n return;\n }\n if (event.key !== 'Tab') return;\n const popup = this.el.querySelector<HTMLElement>('.input-date-popup');\n if (!popup || !event.composedPath().includes(popup)) return;\n if (!this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.closePicker(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get displayValue(): string {\n return formatIsoCalendarDateLabel(this.value);\n }\n\n private parseDraft(text: string): string | null {\n const trimmed = text.trim();\n if (!trimmed) return '';\n const iso = parseLooseCalendarDate(trimmed);\n if (!iso) return null;\n if (this.min && isIsoCalendarDate(this.min) && iso < this.min) return null;\n if (this.max && isIsoCalendarDate(this.max) && iso > this.max) return null;\n return iso;\n }\n\n private commitIso(iso: string, emit = true) {\n if (this.value !== iso) {\n this.value = iso;\n if (emit) this.dsChange.emit(iso);\n }\n this.draftText = formatIsoCalendarDateLabel(iso);\n }\n\n private teardownListeners() {\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private openPicker() {\n const inactive = this.isInactive || this.disabled || this.formDisabled || this.readOnly;\n if (inactive || this.open || !this.el.isConnected) return;\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.open = true;\n this.teardownListeners();\n this.interaction.connect();\n this.position.observe();\n this.position.schedule();\n }\n\n private closePicker(restore: 'input' | 'button' | false) {\n if (!this.shouldRender || this.closing) return;\n this.open = false;\n this.position.cancel();\n this.closing = true;\n this.interaction.disconnect();\n this.position.unobserve();\n if (restore === 'input') this.inputEl?.focus();\n if (restore === 'button') void this.calendarButton?.setFocus();\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (duration <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => this.finishClose(), duration);\n }\n\n private finishClose() {\n const popup = this.el.querySelector<HTMLElement>('.input-date-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }\n\n private togglePicker = () => {\n if (this.isInactive || this.disabled || this.formDisabled || this.readOnly) return;\n if (this.open) this.closePicker('button');\n else this.openPicker();\n };\n\n private handleInput = (event: Event) => {\n if (this.pickerInactive) return;\n this.draftText = (event.target as HTMLInputElement).value;\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) return;\n this.commitIso(parsed);\n };\n\n private handleFocus = () => {\n this.draftText = this.displayValue || this.value;\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n if (this.pickerInactive) {\n this.draftText = this.displayValue;\n return;\n }\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) {\n this.draftText = this.displayValue;\n return;\n }\n this.commitIso(parsed);\n };\n\n private handleCalendarChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n if (this.pickerInactive) return;\n const parsed = this.parseDraft(event.detail);\n if (parsed === null) return;\n this.commitIso(parsed);\n this.closePicker('input');\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.formInactive;\n const pickerInactive = this.pickerInactive;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const textClass = `ds-text--${textVariant.replace('text-', '')}`;\n const describedBy =\n [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n undefined;\n const popupStyle = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: 'var(--dimension-z-index-floating)',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-field-stack--supporting-inset': !this.hasBorder,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.isInvalid ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n ref={element => {\n this.controlEl = element;\n }}\n class={{\n 'input-control': true,\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder,\n 'input-control--error': this.hasBorder && this.error,\n 'ds-interaction-fill': this.hasInteractionFill,\n [`ds-control--${this.size}`]: true,\n }}\n >\n <input\n ref={element => {\n this.inputEl = element;\n }}\n type=\"text\"\n id={inputId}\n value={this.focused ? this.draftText : this.displayValue}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete=\"off\"\n spellcheck={false}\n class={{\n 'native-input': true,\n 'native-input--align-start': true,\n 'ds-control-label-box': true,\n [textClass]: true,\n 'ds-text--regular': true,\n }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.isInvalid ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <ds-button-unfilled\n ref={element => {\n this.calendarButton = element as HTMLDsButtonUnfilledElement | undefined;\n }}\n class=\"input-control__datetime-action\"\n variant=\"icon\"\n size={this.size}\n icon=\"Calendar\"\n hasBorder={false}\n isInset\n isInactive={pickerInactive}\n ariaLabel=\"Choose date\"\n haspopup=\"dialog\"\n expanded={this.open}\n surfaceOpen={this.open || this.closing}\n controls={this.open ? this.popupId : undefined}\n onDsClick={this.togglePicker}\n />\n </div>\n {this.shouldRender ? (\n <div\n id={this.popupId}\n popover=\"manual\"\n class={{\n 'input-date-popup': true,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n }}\n style={popupStyle}\n role=\"dialog\"\n aria-label=\"Choose date\"\n >\n <ds-calendar\n selectionMode=\"single\"\n value={this.value}\n min={this.min}\n max={this.max}\n isInactive={pickerInactive}\n autoFocus\n onDsChange={this.handleCalendarChange}\n />\n </div>\n ) : null}\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n",
|
|
559
|
+
"content": "import {\n AttachInternals,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n Method,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n formatIsoCalendarDateLabel,\n isIsoCalendarDate,\n parseLooseCalendarDate,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n restoreStringFormState,\n setFormControlValue,\n TOKEN_DEFAULTS,\n type ControlSize,\n type ControlWidth,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { PickerPopupController, type PickerPopupPhase } from '../../utils/picker-popup-controller';\n\nexport type InputDateSize = ControlSize;\nexport type InputDateWidth = ControlWidth;\n\nlet idCounter = 0;\n\nconst INVALID_DATE_MESSAGE = 'Enter a valid date.';\nconst DATE_BEFORE_MIN_MESSAGE = 'Date is before the minimum allowed date.';\nconst DATE_AFTER_MAX_MESSAGE = 'Date is after the maximum allowed date.';\n\n@Component({\n tag: 'ds-input-date',\n styleUrl: 'InputDate.css',\n scoped: true,\n formAssociated: true,\n})\nexport class InputDate {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-date-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n private popupId = `${this.generatedId}-popup`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n @Prop() min: string | undefined;\n @Prop() max: string | undefined;\n @Prop() size: InputDateSize = 'md';\n @Prop() width: InputDateWidth = 'fill';\n @Prop() hasBorder: boolean = true;\n @Prop() hasInteractionFill: boolean = true;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private initialValue = '';\n private inputEl?: HTMLInputElement;\n private controlEl?: HTMLElement;\n private calendarButton?: HTMLDsButtonUnfilledElement;\n @State() private formDisabled = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private draftText = '';\n @State() private popupPhase: PickerPopupPhase = 'closed';\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-date-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n anchorAlignment: 'popup-frame',\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-date-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.closePicker(false),\n });\n private readonly pickerPopup = new PickerPopupController({\n position: this.position,\n interaction: this.interaction,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-date-popup'),\n onPhaseChange: phase => {\n this.popupPhase = phase;\n },\n });\n\n private get open(): boolean {\n return this.popupPhase === 'open';\n }\n\n private get shouldRender(): boolean {\n return this.popupPhase !== 'closed';\n }\n\n private get closing(): boolean {\n return this.popupPhase === 'closing';\n }\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get formInactive(): boolean {\n return this.isInactive || this.disabled || this.formDisabled;\n }\n\n private get pickerInactive(): boolean {\n return this.formInactive || this.readOnly;\n }\n\n private get hasConstraintError(): boolean {\n if (!this.value) return false;\n if (!isIsoCalendarDate(this.value)) return true;\n if (this.min && isIsoCalendarDate(this.min) && this.value < this.min) return true;\n if (this.max && isIsoCalendarDate(this.max) && this.value > this.max) return true;\n return false;\n }\n\n private get isInvalid(): boolean {\n return (\n this.error ||\n (!this.formInactive &&\n ((this.required && this.value.length === 0) || this.hasConstraintError))\n );\n }\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n disconnectedCallback() {\n this.pickerPopup.disconnect();\n this.positionReady = false;\n this.focused = false;\n }\n\n @Watch('value')\n @Watch('required')\n @Watch('requiredMessage')\n @Watch('min')\n @Watch('max')\n syncFormValue() {\n const inactive = this.formInactive;\n setFormControlValue(this.internals, this.value, { inactive });\n const flags: ValidityStateFlags = {};\n let message = '';\n if (!inactive) {\n if (this.required && this.value.length === 0) {\n flags.valueMissing = true;\n message = this.requiredMessage;\n } else if (this.value && !isIsoCalendarDate(this.value)) {\n flags.badInput = true;\n message = INVALID_DATE_MESSAGE;\n } else if (this.value && this.min && isIsoCalendarDate(this.min) && this.value < this.min) {\n flags.rangeUnderflow = true;\n message = DATE_BEFORE_MIN_MESSAGE;\n } else if (this.value && this.max && isIsoCalendarDate(this.max) && this.value > this.max) {\n flags.rangeOverflow = true;\n message = DATE_AFTER_MAX_MESSAGE;\n }\n }\n this.internals.setValidity(flags, message);\n }\n\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('readOnly')\n onInteractionStateChange() {\n this.syncFormValue();\n if (this.pickerInactive && this.shouldRender) this.closePicker(false);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.onInteractionStateChange();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.draftText = this.displayValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n this.draftText = this.displayValue;\n }\n\n @Method()\n async setFocus() {\n this.inputEl?.focus();\n }\n\n @Listen('keydown')\n handleHostKeyDown(event: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.closePicker('button');\n return;\n }\n if (event.key !== 'Tab') return;\n const popup = this.el.querySelector<HTMLElement>('.input-date-popup');\n if (!popup || !event.composedPath().includes(popup)) return;\n if (!this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.closePicker(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get displayValue(): string {\n return formatIsoCalendarDateLabel(this.value);\n }\n\n private parseDraft(text: string): string | null {\n const trimmed = text.trim();\n if (!trimmed) return '';\n const iso = parseLooseCalendarDate(trimmed);\n if (!iso) return null;\n if (this.min && isIsoCalendarDate(this.min) && iso < this.min) return null;\n if (this.max && isIsoCalendarDate(this.max) && iso > this.max) return null;\n return iso;\n }\n\n private commitIso(iso: string, emit = true) {\n if (this.value !== iso) {\n this.value = iso;\n if (emit) this.dsChange.emit(iso);\n }\n this.draftText = formatIsoCalendarDateLabel(iso);\n }\n\n private openPicker() {\n if (this.pickerInactive || this.open || !this.el.isConnected) return;\n this.positionReady = false;\n this.pickerPopup.open();\n }\n\n private closePicker(restore: 'input' | 'button' | false) {\n this.pickerPopup.close(() => {\n if (restore === 'input') this.inputEl?.focus();\n if (restore === 'button') void this.calendarButton?.setFocus();\n });\n }\n\n private togglePicker = () => {\n if (this.pickerInactive) return;\n if (this.open) this.closePicker('button');\n else this.openPicker();\n };\n\n private handleInput = (event: Event) => {\n if (this.pickerInactive) return;\n this.draftText = (event.target as HTMLInputElement).value;\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) return;\n this.commitIso(parsed);\n };\n\n private handleFocus = () => {\n this.draftText = this.displayValue || this.value;\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n if (this.pickerInactive) {\n this.draftText = this.displayValue;\n return;\n }\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) {\n this.draftText = this.displayValue;\n return;\n }\n this.commitIso(parsed);\n };\n\n private handleCalendarChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n if (this.pickerInactive) return;\n const parsed = this.parseDraft(event.detail);\n if (parsed === null) return;\n this.commitIso(parsed);\n this.closePicker('input');\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.formInactive;\n const pickerInactive = this.pickerInactive;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const textClass = `ds-text--${textVariant.replace('text-', '')}`;\n const describedBy =\n [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n undefined;\n const popupStyle = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: 'var(--dimension-z-index-floating)',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-field-stack--supporting-inset': !this.hasBorder,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.isInvalid ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n ref={element => {\n this.controlEl = element;\n }}\n class={{\n 'input-control': true,\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder,\n 'input-control--error': this.hasBorder && this.error,\n 'ds-interaction-fill': this.hasInteractionFill,\n [`ds-control--${this.size}`]: true,\n }}\n >\n <input\n ref={element => {\n this.inputEl = element;\n }}\n type=\"text\"\n id={inputId}\n value={this.focused ? this.draftText : this.displayValue}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete=\"off\"\n spellcheck={false}\n class={{\n 'native-input': true,\n 'native-input--align-start': true,\n 'ds-control-label-box': true,\n [textClass]: true,\n 'ds-text--regular': true,\n }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.isInvalid ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <ds-button-unfilled\n ref={element => {\n this.calendarButton = element as HTMLDsButtonUnfilledElement | undefined;\n }}\n class=\"input-control__datetime-action\"\n variant=\"icon\"\n size={this.size}\n icon=\"Calendar\"\n hasBorder={false}\n isInset\n isInactive={pickerInactive}\n ariaLabel=\"Choose date\"\n haspopup=\"dialog\"\n expanded={this.open}\n surfaceOpen={this.open || this.closing}\n controls={this.open ? this.popupId : undefined}\n onDsClick={this.togglePicker}\n />\n </div>\n {this.shouldRender ? (\n <div\n id={this.popupId}\n popover=\"manual\"\n class={{\n 'input-date-popup': true,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n }}\n style={popupStyle}\n role=\"dialog\"\n aria-label=\"Choose date\"\n >\n <ds-calendar\n selectionMode=\"single\"\n value={this.value}\n min={this.min}\n max={this.max}\n isInactive={pickerInactive}\n autoFocus\n onDsChange={this.handleCalendarChange}\n />\n </div>\n ) : null}\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n",
|
|
560
560
|
"type": "registry:ui"
|
|
561
561
|
}
|
|
562
562
|
]
|
|
@@ -570,8 +570,8 @@
|
|
|
570
570
|
},
|
|
571
571
|
"peerDependencies": {
|
|
572
572
|
"required": [
|
|
573
|
-
"@ds-mo/tokens ^8.0.
|
|
574
|
-
"@ds-mo/icons ^8.1.
|
|
573
|
+
"@ds-mo/tokens ^8.0.1",
|
|
574
|
+
"@ds-mo/icons ^8.1.2"
|
|
575
575
|
],
|
|
576
576
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
577
577
|
}
|
|
@@ -594,7 +594,7 @@
|
|
|
594
594
|
},
|
|
595
595
|
{
|
|
596
596
|
"path": "src/wc/components/InputTime/InputTime.tsx",
|
|
597
|
-
"content": "import {\n AttachInternals,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n Method,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n formatClockTimeLabel,\n isClockTime,\n isClockTimeStepAligned,\n parseLooseClockTime,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n resolveMotionTimeMs,\n restoreStringFormState,\n setFormControlValue,\n TOKEN_DEFAULTS,\n type ControlSize,\n type ControlWidth,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\n\nexport type InputTimeSize = ControlSize;\nexport type InputTimeWidth = ControlWidth;\n\nlet idCounter = 0;\n\nconst INVALID_TIME_MESSAGE = 'Enter a valid time.';\nconst TIME_BEFORE_MIN_MESSAGE = 'Time is before the minimum allowed time.';\nconst TIME_AFTER_MAX_MESSAGE = 'Time is after the maximum allowed time.';\nconst TIME_STEP_MESSAGE = 'Time does not match the allowed interval.';\n\n@Component({\n tag: 'ds-input-time',\n styleUrl: 'InputTime.css',\n scoped: true,\n formAssociated: true,\n})\nexport class InputTime {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-time-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n private popupId = `${this.generatedId}-popup`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n /** Native time step in seconds. Defaults to minutes (`60`). */\n @Prop() step: string | number = 60;\n /** Display format; submitted values remain HH:MM in either format. */\n @Prop() hourFormat: '12' | '24' = '12';\n @Prop() min: string | undefined;\n @Prop() max: string | undefined;\n @Prop() size: InputTimeSize = 'md';\n @Prop() width: InputTimeWidth = 'fill';\n @Prop() hasBorder: boolean = true;\n @Prop() hasInteractionFill: boolean = true;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private initialValue = '';\n private inputEl?: HTMLInputElement;\n private controlEl?: HTMLElement;\n private clockButton?: HTMLDsButtonUnfilledElement;\n private closeTimer: ReturnType<typeof setTimeout> | null = null;\n @State() private formDisabled = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private draftText = '';\n @State() private open = false;\n @State() private shouldRender = false;\n @State() private closing = false;\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n anchorAlignment: 'popup-frame',\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.closePicker(false),\n });\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get formInactive(): boolean {\n return this.isInactive || this.disabled || this.formDisabled;\n }\n\n private get pickerInactive(): boolean {\n return this.formInactive || this.readOnly;\n }\n\n private get hasConstraintError(): boolean {\n if (!this.value) return false;\n if (!isClockTime(this.value)) return true;\n if (this.min && isClockTime(this.min) && this.value < this.min) return true;\n if (this.max && isClockTime(this.max) && this.value > this.max) return true;\n return !isClockTimeStepAligned(this.value, this.step, this.min);\n }\n\n private get isInvalid(): boolean {\n return (\n this.error ||\n (!this.formInactive &&\n ((this.required && this.value.length === 0) || this.hasConstraintError))\n );\n }\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n disconnectedCallback() {\n this.teardownListeners();\n this.open = false;\n this.shouldRender = false;\n this.closing = false;\n this.positionReady = false;\n this.focused = false;\n }\n\n @Watch('hourFormat')\n onHourFormatChange() {\n this.draftText = this.displayValue;\n }\n\n @Watch('value')\n @Watch('required')\n @Watch('requiredMessage')\n @Watch('min')\n @Watch('max')\n @Watch('step')\n syncFormValue() {\n const inactive = this.formInactive;\n setFormControlValue(this.internals, this.value, { inactive });\n const flags: ValidityStateFlags = {};\n let message = '';\n if (!inactive) {\n if (this.required && this.value.length === 0) {\n flags.valueMissing = true;\n message = this.requiredMessage;\n } else if (this.value && !isClockTime(this.value)) {\n flags.badInput = true;\n message = INVALID_TIME_MESSAGE;\n } else if (this.value && this.min && isClockTime(this.min) && this.value < this.min) {\n flags.rangeUnderflow = true;\n message = TIME_BEFORE_MIN_MESSAGE;\n } else if (this.value && this.max && isClockTime(this.max) && this.value > this.max) {\n flags.rangeOverflow = true;\n message = TIME_AFTER_MAX_MESSAGE;\n } else if (this.value && !isClockTimeStepAligned(this.value, this.step, this.min)) {\n flags.stepMismatch = true;\n message = TIME_STEP_MESSAGE;\n }\n }\n this.internals.setValidity(flags, message);\n }\n\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('readOnly')\n onInteractionStateChange() {\n this.syncFormValue();\n if (this.pickerInactive && this.shouldRender) this.closePicker(false);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.onInteractionStateChange();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.draftText = this.displayValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n this.draftText = this.displayValue;\n }\n\n @Method()\n async setFocus() {\n this.inputEl?.focus();\n }\n\n @Listen('keydown')\n handleHostKeyDown(event: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.closePicker('button');\n return;\n }\n if (event.key !== 'Tab') return;\n const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n if (!popup || !event.composedPath().includes(popup)) return;\n if (!this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.closePicker(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get displayValue(): string {\n return this.hourFormat === '24' ? this.value : formatClockTimeLabel(this.value);\n }\n\n private parseDraft(text: string): string | null {\n const trimmed = text.trim();\n if (!trimmed) return '';\n const iso = parseLooseClockTime(trimmed);\n if (!iso) return null;\n if (this.min && isClockTime(this.min) && iso < this.min) return null;\n if (this.max && isClockTime(this.max) && iso > this.max) return null;\n if (!isClockTimeStepAligned(iso, this.step, this.min)) return null;\n return iso;\n }\n\n private commitIso(iso: string, emit = true) {\n if (this.value !== iso) {\n this.value = iso;\n if (emit) this.dsChange.emit(iso);\n }\n this.draftText = this.hourFormat === '24' ? iso : formatClockTimeLabel(iso);\n }\n\n private teardownListeners() {\n this.position.unobserve();\n this.interaction.disconnect();\n if (this.closeTimer) {\n clearTimeout(this.closeTimer);\n this.closeTimer = null;\n }\n }\n\n private openPicker() {\n const inactive = this.isInactive || this.disabled || this.formDisabled || this.readOnly;\n if (inactive || this.open || !this.el.isConnected) return;\n this.shouldRender = true;\n this.closing = false;\n this.positionReady = false;\n this.open = true;\n this.teardownListeners();\n this.interaction.connect();\n this.position.observe();\n this.position.schedule();\n }\n\n private closePicker(restore: 'input' | 'button' | false) {\n if (!this.shouldRender || this.closing) return;\n this.open = false;\n this.position.cancel();\n this.closing = true;\n this.interaction.disconnect();\n this.position.unobserve();\n if (restore === 'input') this.inputEl?.focus();\n if (restore === 'button') void this.clockButton?.setFocus();\n const duration = resolveMotionTimeMs(\n TOKEN_DEFAULTS.motionShort2,\n TOKEN_DEFAULTS.animationDurationShort3\n );\n if (duration <= 0) {\n this.finishClose();\n return;\n }\n this.closeTimer = setTimeout(() => this.finishClose(), duration);\n }\n\n private finishClose() {\n const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n if (popup?.matches(':popover-open')) popup.hidePopover();\n this.shouldRender = false;\n this.closing = false;\n this.closeTimer = null;\n }\n\n private togglePicker = () => {\n if (this.isInactive || this.disabled || this.formDisabled || this.readOnly) return;\n if (this.open) this.closePicker('button');\n else this.openPicker();\n };\n\n private handleInput = (event: Event) => {\n if (this.pickerInactive) return;\n this.draftText = (event.target as HTMLInputElement).value;\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) return;\n this.commitIso(parsed);\n };\n\n private handleFocus = () => {\n this.draftText = this.displayValue || this.value;\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n if (this.pickerInactive) {\n this.draftText = this.displayValue;\n return;\n }\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) {\n this.draftText = this.displayValue;\n return;\n }\n this.commitIso(parsed);\n };\n\n private handleTimeChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n if (this.pickerInactive) return;\n const parsed = this.parseDraft(event.detail);\n if (parsed === null) return;\n this.commitIso(parsed);\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.formInactive;\n const pickerInactive = this.pickerInactive;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const textClass = `ds-text--${textVariant.replace('text-', '')}`;\n const describedBy =\n [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n undefined;\n const popupStyle = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: 'var(--dimension-z-index-floating)',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-field-stack--supporting-inset': !this.hasBorder,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.isInvalid ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n ref={element => {\n this.controlEl = element;\n }}\n class={{\n 'input-control': true,\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder,\n 'input-control--error': this.hasBorder && this.error,\n 'ds-interaction-fill': this.hasInteractionFill,\n [`ds-control--${this.size}`]: true,\n }}\n >\n <input\n ref={element => {\n this.inputEl = element;\n }}\n type=\"text\"\n id={inputId}\n value={this.focused ? this.draftText : this.displayValue}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete=\"off\"\n spellcheck={false}\n class={{\n 'native-input': true,\n 'native-input--align-start': true,\n 'ds-control-label-box': true,\n [textClass]: true,\n 'ds-text--regular': true,\n }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.isInvalid ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <ds-button-unfilled\n ref={element => {\n this.clockButton = element as HTMLDsButtonUnfilledElement | undefined;\n }}\n class=\"input-control__datetime-action\"\n variant=\"icon\"\n size={this.size}\n icon=\"Clock\"\n hasBorder={false}\n isInset\n isInactive={pickerInactive}\n ariaLabel=\"Choose time\"\n haspopup=\"dialog\"\n expanded={this.open}\n surfaceOpen={this.open || this.closing}\n controls={this.open ? this.popupId : undefined}\n onDsClick={this.togglePicker}\n />\n </div>\n {this.shouldRender ? (\n <div\n id={this.popupId}\n popover=\"manual\"\n class={{\n 'input-time-popup': true,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n }}\n style={popupStyle}\n role=\"dialog\"\n aria-label=\"Choose time\"\n >\n <ds-time-picker\n hourFormat={this.hourFormat}\n value={this.value}\n min={this.min}\n max={this.max}\n step={this.step}\n isInactive={pickerInactive}\n autoFocus\n onDsChange={this.handleTimeChange}\n />\n </div>\n ) : null}\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n",
|
|
597
|
+
"content": "import {\n AttachInternals,\n Component,\n Element,\n Prop,\n State,\n Event,\n EventEmitter,\n Listen,\n Method,\n Watch,\n h,\n Host,\n} from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n formatClockTimeLabel,\n isClockTime,\n isClockTimeStepAligned,\n parseLooseClockTime,\n resolveChoicePopupAlignOffset,\n resolveCssLengthPx,\n restoreStringFormState,\n setFormControlValue,\n TOKEN_DEFAULTS,\n type ControlSize,\n type ControlWidth,\n} from '../../utils';\nimport { AnchoredPositionController } from '../../utils/anchored-position-controller';\nimport { AnchoredOverlayInteractionController } from '../../utils/anchored-overlay-interaction-controller';\nimport { resolveAnchoredOverlayBoundaryRect } from '../../utils/anchored-overlay-boundary';\nimport { PickerPopupController, type PickerPopupPhase } from '../../utils/picker-popup-controller';\n\nexport type InputTimeSize = ControlSize;\nexport type InputTimeWidth = ControlWidth;\n\nlet idCounter = 0;\n\nconst INVALID_TIME_MESSAGE = 'Enter a valid time.';\nconst TIME_BEFORE_MIN_MESSAGE = 'Time is before the minimum allowed time.';\nconst TIME_AFTER_MAX_MESSAGE = 'Time is after the maximum allowed time.';\nconst TIME_STEP_MESSAGE = 'Time does not match the allowed interval.';\n\n@Component({\n tag: 'ds-input-time',\n styleUrl: 'InputTime.css',\n scoped: true,\n formAssociated: true,\n})\nexport class InputTime {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-time-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n private popupId = `${this.generatedId}-popup`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n /** Native time step in seconds. Defaults to minutes (`60`). */\n @Prop() step: string | number = 60;\n /** Display format; submitted values remain HH:MM in either format. */\n @Prop() hourFormat: '12' | '24' = '12';\n @Prop() min: string | undefined;\n @Prop() max: string | undefined;\n @Prop() size: InputTimeSize = 'md';\n @Prop() width: InputTimeWidth = 'fill';\n @Prop() hasBorder: boolean = true;\n @Prop() hasInteractionFill: boolean = true;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n\n private initialValue = '';\n private inputEl?: HTMLInputElement;\n private controlEl?: HTMLElement;\n private clockButton?: HTMLDsButtonUnfilledElement;\n @State() private formDisabled = false;\n @State() private focused = false;\n @State() private touched = false;\n @State() private draftText = '';\n @State() private popupPhase: PickerPopupPhase = 'closed';\n @State() private positionReady = false;\n @State() private pos = { x: 0, y: 0 };\n\n private readonly position = new AnchoredPositionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n measure: (anchor, popup) => {\n if (!this.open) return null;\n const sectionInsetPx = resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050);\n return {\n anchorRect: anchor.getBoundingClientRect(),\n popupWidth: popup.offsetWidth || this.popupFallbackWidth,\n popupHeight: popup.offsetHeight || this.popupFallbackHeight,\n side: 'bottom',\n align: 'end',\n sideOffsetPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n alignOffsetPx: resolveChoicePopupAlignOffset({\n align: 'end',\n alignOffsetPx: 0,\n sectionInsetPx,\n anchorAlignment: 'popup-frame',\n }),\n viewportPadPx: resolveCssLengthPx(TOKEN_DEFAULTS.space050, TOKEN_DEFAULTS.space050),\n viewportWidth: window.innerWidth,\n viewportHeight: window.innerHeight,\n collisionRect: resolveAnchoredOverlayBoundaryRect(anchor),\n };\n },\n apply: ({ x, y }) => {\n this.pos = { x, y };\n },\n onReady: () => {\n this.positionReady = true;\n },\n liveUpdate: 'double-frame',\n observeResize: true,\n topLayer: true,\n });\n private readonly interaction = new AnchoredOverlayInteractionController({\n getAnchor: () => this.controlEl ?? null,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n getOwnerDocument: () => this.el.ownerDocument,\n onOutsideActivation: () => this.closePicker(false),\n });\n private readonly pickerPopup = new PickerPopupController({\n position: this.position,\n interaction: this.interaction,\n getPopup: () => this.el.querySelector<HTMLElement>('.input-time-popup'),\n onPhaseChange: phase => {\n this.popupPhase = phase;\n },\n });\n\n private get open(): boolean {\n return this.popupPhase === 'open';\n }\n\n private get shouldRender(): boolean {\n return this.popupPhase !== 'closed';\n }\n\n private get closing(): boolean {\n return this.popupPhase === 'closing';\n }\n\n private get popupFallbackWidth(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuWidthXs, TOKEN_DEFAULTS.menuWidthXs);\n }\n\n private get popupFallbackHeight(): number {\n return resolveCssLengthPx(TOKEN_DEFAULTS.menuFallbackHeight, TOKEN_DEFAULTS.menuFallbackHeight);\n }\n\n private get formInactive(): boolean {\n return this.isInactive || this.disabled || this.formDisabled;\n }\n\n private get pickerInactive(): boolean {\n return this.formInactive || this.readOnly;\n }\n\n private get hasConstraintError(): boolean {\n if (!this.value) return false;\n if (!isClockTime(this.value)) return true;\n if (this.min && isClockTime(this.min) && this.value < this.min) return true;\n if (this.max && isClockTime(this.max) && this.value > this.max) return true;\n return !isClockTimeStepAligned(this.value, this.step, this.min);\n }\n\n private get isInvalid(): boolean {\n return (\n this.error ||\n (!this.formInactive &&\n ((this.required && this.value.length === 0) || this.hasConstraintError))\n );\n }\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.syncFormValue();\n }\n\n disconnectedCallback() {\n this.pickerPopup.disconnect();\n this.positionReady = false;\n this.focused = false;\n }\n\n @Watch('hourFormat')\n onHourFormatChange() {\n this.draftText = this.displayValue;\n }\n\n @Watch('value')\n @Watch('required')\n @Watch('requiredMessage')\n @Watch('min')\n @Watch('max')\n @Watch('step')\n syncFormValue() {\n const inactive = this.formInactive;\n setFormControlValue(this.internals, this.value, { inactive });\n const flags: ValidityStateFlags = {};\n let message = '';\n if (!inactive) {\n if (this.required && this.value.length === 0) {\n flags.valueMissing = true;\n message = this.requiredMessage;\n } else if (this.value && !isClockTime(this.value)) {\n flags.badInput = true;\n message = INVALID_TIME_MESSAGE;\n } else if (this.value && this.min && isClockTime(this.min) && this.value < this.min) {\n flags.rangeUnderflow = true;\n message = TIME_BEFORE_MIN_MESSAGE;\n } else if (this.value && this.max && isClockTime(this.max) && this.value > this.max) {\n flags.rangeOverflow = true;\n message = TIME_AFTER_MAX_MESSAGE;\n } else if (this.value && !isClockTimeStepAligned(this.value, this.step, this.min)) {\n flags.stepMismatch = true;\n message = TIME_STEP_MESSAGE;\n }\n }\n this.internals.setValidity(flags, message);\n }\n\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('readOnly')\n onInteractionStateChange() {\n this.syncFormValue();\n if (this.pickerInactive && this.shouldRender) this.closePicker(false);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.onInteractionStateChange();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n this.draftText = this.displayValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n this.draftText = this.displayValue;\n }\n\n @Method()\n async setFocus() {\n this.inputEl?.focus();\n }\n\n @Listen('keydown')\n handleHostKeyDown(event: KeyboardEvent) {\n if (!this.shouldRender || this.closing) return;\n if (event.key === 'Escape') {\n event.preventDefault();\n this.closePicker('button');\n return;\n }\n if (event.key !== 'Tab') return;\n const popup = this.el.querySelector<HTMLElement>('.input-time-popup');\n if (!popup || !event.composedPath().includes(popup)) return;\n if (!this.interaction.tabLeavesPopup(event)) return;\n event.preventDefault();\n this.closePicker(false);\n this.interaction.moveFocusAfterTab(event.shiftKey);\n }\n\n private get displayValue(): string {\n return this.hourFormat === '24' ? this.value : formatClockTimeLabel(this.value);\n }\n\n private parseDraft(text: string): string | null {\n const trimmed = text.trim();\n if (!trimmed) return '';\n const iso = parseLooseClockTime(trimmed);\n if (!iso) return null;\n if (this.min && isClockTime(this.min) && iso < this.min) return null;\n if (this.max && isClockTime(this.max) && iso > this.max) return null;\n if (!isClockTimeStepAligned(iso, this.step, this.min)) return null;\n return iso;\n }\n\n private commitIso(iso: string, emit = true) {\n if (this.value !== iso) {\n this.value = iso;\n if (emit) this.dsChange.emit(iso);\n }\n this.draftText = this.hourFormat === '24' ? iso : formatClockTimeLabel(iso);\n }\n\n private openPicker() {\n if (this.pickerInactive || this.open || !this.el.isConnected) return;\n this.positionReady = false;\n this.pickerPopup.open();\n }\n\n private closePicker(restore: 'input' | 'button' | false) {\n this.pickerPopup.close(() => {\n if (restore === 'input') this.inputEl?.focus();\n if (restore === 'button') void this.clockButton?.setFocus();\n });\n }\n\n private togglePicker = () => {\n if (this.pickerInactive) return;\n if (this.open) this.closePicker('button');\n else this.openPicker();\n };\n\n private handleInput = (event: Event) => {\n if (this.pickerInactive) return;\n this.draftText = (event.target as HTMLInputElement).value;\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) return;\n this.commitIso(parsed);\n };\n\n private handleFocus = () => {\n this.draftText = this.displayValue || this.value;\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n if (this.pickerInactive) {\n this.draftText = this.displayValue;\n return;\n }\n const parsed = this.parseDraft(this.draftText);\n if (parsed === null) {\n this.draftText = this.displayValue;\n return;\n }\n this.commitIso(parsed);\n };\n\n private handleTimeChange = (event: CustomEvent<string>) => {\n event.stopPropagation();\n if (this.pickerInactive) return;\n const parsed = this.parseDraft(event.detail);\n if (parsed === null) return;\n this.commitIso(parsed);\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.formInactive;\n const pickerInactive = this.pickerInactive;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const textClass = `ds-text--${textVariant.replace('text-', '')}`;\n const describedBy =\n [this.ariaDescribedby, showError ? this.errorId : undefined].filter(Boolean).join(' ') ||\n undefined;\n const popupStyle = {\n position: 'fixed',\n left: '0',\n top: '0',\n transform: `translate(${Math.round(this.pos.x)}px, ${Math.round(this.pos.y)}px)`,\n zIndex: 'var(--dimension-z-index-floating)',\n visibility: this.positionReady ? 'visible' : 'hidden',\n };\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-field-stack--supporting-inset': !this.hasBorder,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.isInvalid ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n ref={element => {\n this.controlEl = element;\n }}\n class={{\n 'input-control': true,\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder,\n 'input-control--error': this.hasBorder && this.error,\n 'ds-interaction-fill': this.hasInteractionFill,\n [`ds-control--${this.size}`]: true,\n }}\n >\n <input\n ref={element => {\n this.inputEl = element;\n }}\n type=\"text\"\n id={inputId}\n value={this.focused ? this.draftText : this.displayValue}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete=\"off\"\n spellcheck={false}\n class={{\n 'native-input': true,\n 'native-input--align-start': true,\n 'ds-control-label-box': true,\n [textClass]: true,\n 'ds-text--regular': true,\n }}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.isInvalid ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <ds-button-unfilled\n ref={element => {\n this.clockButton = element as HTMLDsButtonUnfilledElement | undefined;\n }}\n class=\"input-control__datetime-action\"\n variant=\"icon\"\n size={this.size}\n icon=\"Clock\"\n hasBorder={false}\n isInset\n isInactive={pickerInactive}\n ariaLabel=\"Choose time\"\n haspopup=\"dialog\"\n expanded={this.open}\n surfaceOpen={this.open || this.closing}\n controls={this.open ? this.popupId : undefined}\n onDsClick={this.togglePicker}\n />\n </div>\n {this.shouldRender ? (\n <div\n id={this.popupId}\n popover=\"manual\"\n class={{\n 'input-time-popup': true,\n 'ds-choice-popup': true,\n 'ds-choice-popup--closing': this.closing,\n 'ds-chrome-column': true,\n 'ds-chrome-space--sm': true,\n }}\n style={popupStyle}\n role=\"dialog\"\n aria-label=\"Choose time\"\n >\n <ds-time-picker\n hourFormat={this.hourFormat}\n value={this.value}\n min={this.min}\n max={this.max}\n step={this.step}\n isInactive={pickerInactive}\n autoFocus\n onDsChange={this.handleTimeChange}\n />\n </div>\n ) : null}\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n",
|
|
598
598
|
"type": "registry:ui"
|
|
599
599
|
}
|
|
600
600
|
]
|
|
@@ -1037,8 +1037,8 @@
|
|
|
1037
1037
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: suggestions, tokens.",
|
|
1038
1038
|
"peerDependencies": {
|
|
1039
1039
|
"required": [
|
|
1040
|
-
"@ds-mo/tokens ^8.0.
|
|
1041
|
-
"@ds-mo/icons ^8.1.
|
|
1040
|
+
"@ds-mo/tokens ^8.0.1",
|
|
1041
|
+
"@ds-mo/icons ^8.1.2"
|
|
1042
1042
|
],
|
|
1043
1043
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
1044
1044
|
}
|
|
@@ -191,8 +191,8 @@
|
|
|
191
191
|
},
|
|
192
192
|
"peerDependencies": {
|
|
193
193
|
"required": [
|
|
194
|
-
"@ds-mo/tokens ^8.0.
|
|
195
|
-
"@ds-mo/icons ^8.1.
|
|
194
|
+
"@ds-mo/tokens ^8.0.1",
|
|
195
|
+
"@ds-mo/icons ^8.1.2"
|
|
196
196
|
],
|
|
197
197
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
198
198
|
}
|
|
@@ -241,8 +241,8 @@
|
|
|
241
241
|
},
|
|
242
242
|
"peerDependencies": {
|
|
243
243
|
"required": [
|
|
244
|
-
"@ds-mo/tokens ^8.0.
|
|
245
|
-
"@ds-mo/icons ^8.1.
|
|
244
|
+
"@ds-mo/tokens ^8.0.1",
|
|
245
|
+
"@ds-mo/icons ^8.1.2"
|
|
246
246
|
],
|
|
247
247
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
248
248
|
}
|
|
@@ -297,8 +297,8 @@
|
|
|
297
297
|
},
|
|
298
298
|
"peerDependencies": {
|
|
299
299
|
"required": [
|
|
300
|
-
"@ds-mo/tokens ^8.0.
|
|
301
|
-
"@ds-mo/icons ^8.1.
|
|
300
|
+
"@ds-mo/tokens ^8.0.1",
|
|
301
|
+
"@ds-mo/icons ^8.1.2"
|
|
302
302
|
],
|
|
303
303
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
304
304
|
}
|
|
@@ -257,8 +257,8 @@
|
|
|
257
257
|
},
|
|
258
258
|
"peerDependencies": {
|
|
259
259
|
"required": [
|
|
260
|
-
"@ds-mo/tokens ^8.0.
|
|
261
|
-
"@ds-mo/icons ^8.1.
|
|
260
|
+
"@ds-mo/tokens ^8.0.1",
|
|
261
|
+
"@ds-mo/icons ^8.1.2"
|
|
262
262
|
],
|
|
263
263
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
264
264
|
}
|
|
@@ -138,8 +138,8 @@
|
|
|
138
138
|
},
|
|
139
139
|
"peerDependencies": {
|
|
140
140
|
"required": [
|
|
141
|
-
"@ds-mo/tokens ^8.0.
|
|
142
|
-
"@ds-mo/icons ^8.1.
|
|
141
|
+
"@ds-mo/tokens ^8.0.1",
|
|
142
|
+
"@ds-mo/icons ^8.1.2"
|
|
143
143
|
],
|
|
144
144
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
145
145
|
}
|
|
@@ -581,8 +581,8 @@
|
|
|
581
581
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: anchor, boundary, items, sections.",
|
|
582
582
|
"peerDependencies": {
|
|
583
583
|
"required": [
|
|
584
|
-
"@ds-mo/tokens ^8.0.
|
|
585
|
-
"@ds-mo/icons ^8.1.
|
|
584
|
+
"@ds-mo/tokens ^8.0.1",
|
|
585
|
+
"@ds-mo/icons ^8.1.2"
|
|
586
586
|
],
|
|
587
587
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
588
588
|
}
|
|
@@ -167,8 +167,8 @@
|
|
|
167
167
|
},
|
|
168
168
|
"peerDependencies": {
|
|
169
169
|
"required": [
|
|
170
|
-
"@ds-mo/tokens ^8.0.
|
|
171
|
-
"@ds-mo/icons ^8.1.
|
|
170
|
+
"@ds-mo/tokens ^8.0.1",
|
|
171
|
+
"@ds-mo/icons ^8.1.2"
|
|
172
172
|
],
|
|
173
173
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
174
174
|
}
|
|
@@ -127,8 +127,8 @@
|
|
|
127
127
|
},
|
|
128
128
|
"peerDependencies": {
|
|
129
129
|
"required": [
|
|
130
|
-
"@ds-mo/tokens ^8.0.
|
|
131
|
-
"@ds-mo/icons ^8.1.
|
|
130
|
+
"@ds-mo/tokens ^8.0.1",
|
|
131
|
+
"@ds-mo/icons ^8.1.2"
|
|
132
132
|
],
|
|
133
133
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
134
134
|
}
|
|
@@ -285,8 +285,8 @@
|
|
|
285
285
|
},
|
|
286
286
|
"peerDependencies": {
|
|
287
287
|
"required": [
|
|
288
|
-
"@ds-mo/tokens ^8.0.
|
|
289
|
-
"@ds-mo/icons ^8.1.
|
|
288
|
+
"@ds-mo/tokens ^8.0.1",
|
|
289
|
+
"@ds-mo/icons ^8.1.2"
|
|
290
290
|
],
|
|
291
291
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
292
292
|
}
|
|
@@ -212,8 +212,8 @@
|
|
|
212
212
|
},
|
|
213
213
|
"peerDependencies": {
|
|
214
214
|
"required": [
|
|
215
|
-
"@ds-mo/tokens ^8.0.
|
|
216
|
-
"@ds-mo/icons ^8.1.
|
|
215
|
+
"@ds-mo/tokens ^8.0.1",
|
|
216
|
+
"@ds-mo/icons ^8.1.2"
|
|
217
217
|
],
|
|
218
218
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
219
219
|
}
|
|
@@ -259,8 +259,8 @@
|
|
|
259
259
|
},
|
|
260
260
|
"peerDependencies": {
|
|
261
261
|
"required": [
|
|
262
|
-
"@ds-mo/tokens ^8.0.
|
|
263
|
-
"@ds-mo/icons ^8.1.
|
|
262
|
+
"@ds-mo/tokens ^8.0.1",
|
|
263
|
+
"@ds-mo/icons ^8.1.2"
|
|
264
264
|
],
|
|
265
265
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
266
266
|
}
|
|
@@ -429,8 +429,8 @@
|
|
|
429
429
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: currentArea.",
|
|
430
430
|
"peerDependencies": {
|
|
431
431
|
"required": [
|
|
432
|
-
"@ds-mo/tokens ^8.0.
|
|
433
|
-
"@ds-mo/icons ^8.1.
|
|
432
|
+
"@ds-mo/tokens ^8.0.1",
|
|
433
|
+
"@ds-mo/icons ^8.1.2"
|
|
434
434
|
],
|
|
435
435
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
436
436
|
}
|
|
@@ -368,8 +368,8 @@
|
|
|
368
368
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections, subsections.",
|
|
369
369
|
"peerDependencies": {
|
|
370
370
|
"required": [
|
|
371
|
-
"@ds-mo/tokens ^8.0.
|
|
372
|
-
"@ds-mo/icons ^8.1.
|
|
371
|
+
"@ds-mo/tokens ^8.0.1",
|
|
372
|
+
"@ds-mo/icons ^8.1.2"
|
|
373
373
|
],
|
|
374
374
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
375
375
|
}
|
|
@@ -229,8 +229,8 @@
|
|
|
229
229
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: sections.",
|
|
230
230
|
"peerDependencies": {
|
|
231
231
|
"required": [
|
|
232
|
-
"@ds-mo/tokens ^8.0.
|
|
233
|
-
"@ds-mo/icons ^8.1.
|
|
232
|
+
"@ds-mo/tokens ^8.0.1",
|
|
233
|
+
"@ds-mo/icons ^8.1.2"
|
|
234
234
|
],
|
|
235
235
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
236
236
|
}
|
|
@@ -390,8 +390,8 @@
|
|
|
390
390
|
"complexPropertyNote": "Assign these non-primitive values as JavaScript properties: dashboardGroups, settingsGroups.",
|
|
391
391
|
"peerDependencies": {
|
|
392
392
|
"required": [
|
|
393
|
-
"@ds-mo/tokens ^8.0.
|
|
394
|
-
"@ds-mo/icons ^8.1.
|
|
393
|
+
"@ds-mo/tokens ^8.0.1",
|
|
394
|
+
"@ds-mo/icons ^8.1.2"
|
|
395
395
|
],
|
|
396
396
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
397
397
|
}
|
|
@@ -298,8 +298,8 @@
|
|
|
298
298
|
},
|
|
299
299
|
"peerDependencies": {
|
|
300
300
|
"required": [
|
|
301
|
-
"@ds-mo/tokens ^8.0.
|
|
302
|
-
"@ds-mo/icons ^8.1.
|
|
301
|
+
"@ds-mo/tokens ^8.0.1",
|
|
302
|
+
"@ds-mo/icons ^8.1.2"
|
|
303
303
|
],
|
|
304
304
|
"frameworks": "Custom Elements; React 18/19 wrappers; Vue 3 wrappers; Angular 19-22 standalone adapters."
|
|
305
305
|
}
|