@nordhealth/components 3.17.0 → 3.18.0
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/README.md +1 -1
- package/custom-elements.json +3855 -3838
- package/lib/AutocompleteMixin-Dk_gVU09.js +2 -0
- package/lib/{AutocompleteMixin-5a7e10b2.js.map → AutocompleteMixin-Dk_gVU09.js.map} +1 -1
- package/lib/Avatar.js +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/Badge.js +1 -1
- package/lib/Badge.js.map +1 -1
- package/lib/Banner.js +1 -1
- package/lib/Banner.js.map +1 -1
- package/lib/Button.js +1 -1
- package/lib/Button.js.map +1 -1
- package/lib/ButtonGroup.js +1 -1
- package/lib/ButtonGroup.js.map +1 -1
- package/lib/Calendar-loNMUV5l.js +2 -0
- package/lib/Calendar-loNMUV5l.js.map +1 -0
- package/lib/Calendar.js +1 -1
- package/lib/Card.js +1 -1
- package/lib/Card.js.map +1 -1
- package/lib/Checkbox.js +1 -1
- package/lib/Checkbox.js.map +1 -1
- package/lib/CommandMenu.js +1 -1
- package/lib/CommandMenu.js.map +1 -1
- package/lib/CommandMenuAction.js +1 -1
- package/lib/CommandMenuAction.js.map +1 -1
- package/lib/Component-BuB0QgQM.js +2 -0
- package/lib/Component-BuB0QgQM.js.map +1 -0
- package/lib/DatePicker.js +1 -1
- package/lib/DatePicker.js.map +1 -1
- package/lib/DateSelectEvent.js +1 -1
- package/lib/DateSelectEvent.js.map +1 -1
- package/lib/{DirectionController-f35f5476.js → DirectionController-DiJ1Su1I.js} +1 -1
- package/lib/{DirectionController-f35f5476.js.map → DirectionController-DiJ1Su1I.js.map} +1 -1
- package/lib/Divider.js +1 -1
- package/lib/Divider.js.map +1 -1
- package/lib/Drawer.js +1 -1
- package/lib/Drawer.js.map +1 -1
- package/lib/Dropdown.js +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/DropdownGroup.js +1 -1
- package/lib/DropdownGroup.js.map +1 -1
- package/lib/DropdownItem-DpwKwVOT.js +2 -0
- package/lib/DropdownItem-DpwKwVOT.js.map +1 -0
- package/lib/DropdownItem.js +1 -1
- package/lib/DropdownItem.js.map +1 -1
- package/lib/EmptyState.js +1 -1
- package/lib/EmptyState.js.map +1 -1
- package/lib/{EventController-d99ebeef.js → EventController-BG-WpaBb.js} +1 -1
- package/lib/{EventController-d99ebeef.js.map → EventController-BG-WpaBb.js.map} +1 -1
- package/lib/Fieldset.js +1 -1
- package/lib/Fieldset.js.map +1 -1
- package/lib/FocusableMixin-DriuCNli.js +2 -0
- package/lib/{FocusableMixin-d30213b4.js.map → FocusableMixin-DriuCNli.js.map} +1 -1
- package/lib/Footer.js +1 -1
- package/lib/Footer.js.map +1 -1
- package/lib/FormAssociatedMixin-DXVeQVgN.js +2 -0
- package/lib/{FormAssociatedMixin-3fa55d53.js.map → FormAssociatedMixin-DXVeQVgN.js.map} +1 -1
- package/lib/{FormDataController-592ff3dd.js → FormDataController-OUt5L5uC.js} +1 -1
- package/lib/FormDataController-OUt5L5uC.js.map +1 -0
- package/lib/FormField-Cl7HHI9A.js +2 -0
- package/lib/FormField-Cl7HHI9A.js.map +1 -0
- package/lib/Header.js +1 -1
- package/lib/Header.js.map +1 -1
- package/lib/Icon.js +2 -2
- package/lib/Icon.js.map +1 -1
- package/lib/IconManager.js +1 -1
- package/lib/Input.js +1 -1
- package/lib/Input.js.map +1 -1
- package/lib/InputMixin-B-nPfhjc.js +2 -0
- package/lib/InputMixin-B-nPfhjc.js.map +1 -0
- package/lib/KeyboardController.js +1 -1
- package/lib/KeyboardController.js.map +1 -1
- package/lib/Layout.js +1 -1
- package/lib/Layout.js.map +1 -1
- package/lib/{LightDismissController-0a66b0a0.js → LightDismissController-BBolVMtn.js} +2 -2
- package/lib/LightDismissController-BBolVMtn.js.map +1 -0
- package/lib/LightDomController-BtyFuJKD.js +2 -0
- package/lib/LightDomController-BtyFuJKD.js.map +1 -0
- package/lib/LightSlotController-BDkcldj-.js +2 -0
- package/lib/LightSlotController-BDkcldj-.js.map +1 -0
- package/lib/LocalizeController.js.map +1 -1
- package/lib/Message.js +1 -1
- package/lib/Message.js.map +1 -1
- package/lib/Modal.js +1 -1
- package/lib/Modal.js.map +1 -1
- package/lib/ModalController.js +1 -1
- package/lib/ModalController.js.map +1 -1
- package/lib/NavGroup.js +1 -1
- package/lib/NavGroup.js.map +1 -1
- package/lib/NavItem.js +1 -1
- package/lib/NavItem.js.map +1 -1
- package/lib/NavToggle-BW4ie2pA.js +2 -0
- package/lib/{NavToggle-735b5262.js.map → NavToggle-BW4ie2pA.js.map} +1 -1
- package/lib/NavToggle.js +1 -1
- package/lib/Navigation.js +1 -1
- package/lib/Navigation.js.map +1 -1
- package/lib/Notification.js +1 -1
- package/lib/Notification.js.map +1 -1
- package/lib/NotificationGroup.js +1 -1
- package/lib/NotificationGroup.js.map +1 -1
- package/lib/NotificationMixin-BMymOlRC.js +2 -0
- package/lib/{NotificationMixin-207f1f56.js.map → NotificationMixin-BMymOlRC.js.map} +1 -1
- package/lib/Popout-CqmQIaOr.js +2 -0
- package/lib/Popout-CqmQIaOr.js.map +1 -0
- package/lib/Popout.js +1 -1
- package/lib/ProgressBar.js +1 -1
- package/lib/ProgressBar.js.map +1 -1
- package/lib/Qrcode.js +1 -1
- package/lib/Qrcode.js.map +1 -1
- package/lib/Radio.js +1 -1
- package/lib/Radio.js.map +1 -1
- package/lib/Range.js +1 -1
- package/lib/Range.js.map +1 -1
- package/lib/{ScrollbarController-773c79f4.js → ScrollbarController-C5CMxfb3.js} +1 -1
- package/lib/{ScrollbarController-773c79f4.js.map → ScrollbarController-C5CMxfb3.js.map} +1 -1
- package/lib/SegmentedControl.js +1 -1
- package/lib/SegmentedControl.js.map +1 -1
- package/lib/SegmentedControlItem.js +1 -1
- package/lib/SegmentedControlItem.js.map +1 -1
- package/lib/Select.js +1 -1
- package/lib/Select.js.map +1 -1
- package/lib/SelectEvent.js +1 -1
- package/lib/{ShortcutController-87615e31.js → ShortcutController-nMRUu6ns.js} +2 -2
- package/lib/{ShortcutController-87615e31.js.map → ShortcutController-nMRUu6ns.js.map} +1 -1
- package/lib/SizeMixin-DW6qUBEN.js +2 -0
- package/lib/{SizeMixin-ab074eff.js.map → SizeMixin-DW6qUBEN.js.map} +1 -1
- package/lib/Skeleton.js +1 -1
- package/lib/Skeleton.js.map +1 -1
- package/lib/{SlotController-d733c575.js → SlotController-BL-tOh6b.js} +2 -2
- package/lib/SlotController-BL-tOh6b.js.map +1 -0
- package/lib/Spinner.js +1 -1
- package/lib/Spinner.js.map +1 -1
- package/lib/Stack.js +1 -1
- package/lib/Stack.js.map +1 -1
- package/lib/Sticky--4fNQ3K3.js +2 -0
- package/lib/Sticky--4fNQ3K3.js.map +1 -0
- package/lib/Tab.js +1 -1
- package/lib/Tab.js.map +1 -1
- package/lib/TabGroup.js +1 -1
- package/lib/TabGroup.js.map +1 -1
- package/lib/TabPanel.js +1 -1
- package/lib/TabPanel.js.map +1 -1
- package/lib/Table.js +1 -1
- package/lib/Table.js.map +1 -1
- package/lib/Tag.js +1 -1
- package/lib/Tag.js.map +1 -1
- package/lib/TagGroup.js +1 -1
- package/lib/TagGroup.js.map +1 -1
- package/lib/TextField-CmHW8rL5.js +2 -0
- package/lib/{TextField-2d778949.js.map → TextField-CmHW8rL5.js.map} +1 -1
- package/lib/TextSelectableMixin-B_mtmFv0.js +2 -0
- package/lib/{TextSelectableMixin-aac97d82.js.map → TextSelectableMixin-B_mtmFv0.js.map} +1 -1
- package/lib/Textarea.js +1 -1
- package/lib/Textarea.js.map +1 -1
- package/lib/Toast.js +1 -1
- package/lib/Toast.js.map +1 -1
- package/lib/ToastGroup.js +1 -1
- package/lib/ToastGroup.js.map +1 -1
- package/lib/Toggle.js +1 -1
- package/lib/Toggle.js.map +1 -1
- package/lib/Tooltip.js +1 -1
- package/lib/Tooltip.js.map +1 -1
- package/lib/TopBar.js +1 -1
- package/lib/TopBar.js.map +1 -1
- package/lib/VisuallyHidden.js +1 -1
- package/lib/VisuallyHidden.js.map +1 -1
- package/lib/bundle.js +19 -41
- package/lib/bundle.js.map +1 -1
- package/lib/class-map-BQZJmA_8.js +7 -0
- package/lib/class-map-BQZJmA_8.js.map +1 -0
- package/lib/collection-CJHuUy_1.js +7 -0
- package/lib/collection-CJHuUy_1.js.map +1 -0
- package/lib/cond-Cuc_PMkN.js +2 -0
- package/lib/{cond-bb9ee891.js.map → cond-Cuc_PMkN.js.map} +1 -1
- package/lib/custom-element-CDWT-yC_.js +30 -0
- package/lib/custom-element-CDWT-yC_.js.map +1 -0
- package/lib/date-adapter.js +1 -1
- package/lib/{dates-5b651fbe.js → dates-lbaNvUdr.js} +2 -2
- package/lib/{dates-5b651fbe.js.map → dates-lbaNvUdr.js.map} +1 -1
- package/lib/{directive-e9ce14b4.js → directive-DQ0jBES2.js} +2 -2
- package/lib/directive-DQ0jBES2.js.map +1 -0
- package/lib/{events-d9666e88.js → events-Bv6wNHwJ.js} +1 -1
- package/lib/{events-d9666e88.js.map → events-Bv6wNHwJ.js.map} +1 -1
- package/lib/{fsm-50373df9.js → fsm-Bq5jMQrK.js} +1 -1
- package/lib/fsm-Bq5jMQrK.js.map +1 -0
- package/lib/if-defined-C2kZHWU2.js +7 -0
- package/lib/if-defined-C2kZHWU2.js.map +1 -0
- package/lib/index.js +1 -1
- package/lib/{interface-checked-small-07292940.js → interface-checked-small-BtICPEsp.js} +2 -2
- package/lib/{interface-checked-small-07292940.js.map → interface-checked-small-BtICPEsp.js.map} +1 -1
- package/lib/{interface-close-small-f26b0299.js → interface-close-small-CnpAFMO3.js} +2 -2
- package/lib/{interface-close-small-f26b0299.js.map → interface-close-small-CnpAFMO3.js.map} +1 -1
- package/lib/{number-c3ab3e95.js → number-Dg2vCfGd.js} +1 -1
- package/lib/{number-c3ab3e95.js.map → number-Dg2vCfGd.js.map} +1 -1
- package/lib/{observe-a9c6dfb6.js → observe-D0n0zOfU.js} +1 -1
- package/lib/observe-D0n0zOfU.js.map +1 -0
- package/lib/positioning-CHP-_dKQ.js +2 -0
- package/lib/positioning-CHP-_dKQ.js.map +1 -0
- package/lib/property-DeTTNf1t.js +7 -0
- package/lib/property-DeTTNf1t.js.map +1 -0
- package/lib/query-hiZs21fO.js +12 -0
- package/lib/query-hiZs21fO.js.map +1 -0
- package/lib/ref-BYkj-TPb.js +17 -0
- package/lib/ref-BYkj-TPb.js.map +1 -0
- package/lib/src/avatar/Avatar.d.ts +3 -3
- package/lib/src/badge/Badge.d.ts +1 -1
- package/lib/src/banner/Banner.d.ts +1 -1
- package/lib/src/button-group/ButtonGroup.d.ts +1 -1
- package/lib/src/calendar/Calendar.d.ts +1 -1
- package/lib/src/card/Card.d.ts +1 -1
- package/lib/src/checkbox/Checkbox.d.ts +1 -1
- package/lib/src/command-menu/CommandMenu.d.ts +1 -1
- package/lib/src/command-menu/CommandMenuAction.d.ts +1 -1
- package/lib/src/date-picker/DatePicker.d.ts +6 -1
- package/lib/src/drawer/Drawer.d.ts +1 -1
- package/lib/src/dropdown/Dropdown.d.ts +5 -4
- package/lib/src/dropdown-group/DropdownGroup.d.ts +1 -1
- package/lib/src/empty-state/EmptyState.d.ts +1 -1
- package/lib/src/fieldset/Fieldset.d.ts +1 -1
- package/lib/src/footer/Footer.d.ts +1 -1
- package/lib/src/header/Header.d.ts +1 -1
- package/lib/src/icon/Icon.d.ts +1 -1
- package/lib/src/input/Input.d.ts +2 -2
- package/lib/src/layout/Layout.d.ts +1 -1
- package/lib/src/modal/Modal.d.ts +1 -1
- package/lib/src/nav-group/NavGroup.d.ts +1 -1
- package/lib/src/nav-toggle/NavToggle.d.ts +1 -1
- package/lib/src/navigation/Navigation.d.ts +1 -1
- package/lib/src/notification/Notification.d.ts +1 -1
- package/lib/src/notification-group/NotificationGroup.d.ts +1 -1
- package/lib/src/popout/Popout.d.ts +1 -1
- package/lib/src/progress-bar/ProgressBar.d.ts +1 -1
- package/lib/src/qrcode/Qrcode.d.ts +1 -1
- package/lib/src/radio/Radio.d.ts +1 -1
- package/lib/src/range/Range.d.ts +1 -1
- package/lib/src/segmented-control/SegmentedControl.d.ts +1 -1
- package/lib/src/segmented-control-item/SegmentedControlItem.d.ts +1 -1
- package/lib/src/select/Select.d.ts +1 -1
- package/lib/src/skeleton/Skeleton.d.ts +1 -1
- package/lib/src/spinner/Spinner.d.ts +1 -1
- package/lib/src/stack/Stack.d.ts +1 -1
- package/lib/src/tab/Tab.d.ts +1 -1
- package/lib/src/tab-group/TabGroup.d.ts +1 -1
- package/lib/src/tab-panel/TabPanel.d.ts +1 -1
- package/lib/src/tag/Tag.d.ts +1 -1
- package/lib/src/tag-group/TagGroup.d.ts +1 -1
- package/lib/src/textarea/Textarea.d.ts +1 -1
- package/lib/src/toast/Toast.d.ts +1 -1
- package/lib/src/toast-group/ToastGroup.d.ts +1 -1
- package/lib/src/toggle/Toggle.d.ts +1 -1
- package/lib/src/tooltip/Tooltip.d.ts +1 -1
- package/lib/src/top-bar/TopBar.d.ts +1 -1
- package/lib/src/visually-hidden/VisuallyHidden.d.ts +1 -1
- package/lib/state-BFYKuryf.js +7 -0
- package/lib/state-BFYKuryf.js.map +1 -0
- package/lib/style-map-VR90KNpY.js +7 -0
- package/lib/style-map-VR90KNpY.js.map +1 -0
- package/lib/test-utils/commands/examples/command.d.ts +13 -0
- package/lib/test-utils/commands/mouse/command.d.ts +7 -0
- package/lib/test-utils/commands/select/command.d.ts +5 -0
- package/lib/test-utils/spy.d.ts +13 -0
- package/lib/{tinykeys.module-84e6cc41.js → tinykeys.module-_6MZt7MP.js} +1 -1
- package/lib/{tinykeys.module-84e6cc41.js.map → tinykeys.module-_6MZt7MP.js.map} +1 -1
- package/lib/translation.js +1 -1
- package/lib/translation.js.map +1 -1
- package/package.json +53 -65
- package/lib/AutocompleteMixin-5a7e10b2.js +0 -2
- package/lib/Calendar-5fbf9d8d.js +0 -2
- package/lib/Calendar-5fbf9d8d.js.map +0 -1
- package/lib/Component-2253424f.js +0 -2
- package/lib/Component-2253424f.js.map +0 -1
- package/lib/DropdownItem-32052903.js +0 -2
- package/lib/DropdownItem-32052903.js.map +0 -1
- package/lib/FocusableMixin-d30213b4.js +0 -2
- package/lib/FormAssociatedMixin-3fa55d53.js +0 -2
- package/lib/FormDataController-592ff3dd.js.map +0 -1
- package/lib/FormField-bf5eb166.js +0 -2
- package/lib/FormField-bf5eb166.js.map +0 -1
- package/lib/InputMixin-83b5bd46.js +0 -2
- package/lib/InputMixin-83b5bd46.js.map +0 -1
- package/lib/LightDismissController-0a66b0a0.js.map +0 -1
- package/lib/LightDomController-5388d84c.js +0 -2
- package/lib/LightDomController-5388d84c.js.map +0 -1
- package/lib/LightSlotController-c51e9cf5.js +0 -2
- package/lib/LightSlotController-c51e9cf5.js.map +0 -1
- package/lib/NavToggle-735b5262.js +0 -2
- package/lib/NotificationMixin-207f1f56.js +0 -2
- package/lib/Popout-9ea00c67.js +0 -2
- package/lib/Popout-9ea00c67.js.map +0 -1
- package/lib/SizeMixin-ab074eff.js +0 -2
- package/lib/SlotController-d733c575.js.map +0 -1
- package/lib/Sticky-c34c9b12.js +0 -2
- package/lib/Sticky-c34c9b12.js.map +0 -1
- package/lib/TextField-2d778949.js +0 -2
- package/lib/TextSelectableMixin-aac97d82.js +0 -2
- package/lib/class-map-512f0bc1.js +0 -7
- package/lib/class-map-512f0bc1.js.map +0 -1
- package/lib/collection-511dcfac.js +0 -7
- package/lib/collection-511dcfac.js.map +0 -1
- package/lib/cond-bb9ee891.js +0 -2
- package/lib/directive-e9ce14b4.js.map +0 -1
- package/lib/fsm-50373df9.js.map +0 -1
- package/lib/if-defined-cccde88f.js +0 -7
- package/lib/if-defined-cccde88f.js.map +0 -1
- package/lib/observe-a9c6dfb6.js.map +0 -1
- package/lib/positioning-35c8d434.js +0 -2
- package/lib/positioning-35c8d434.js.map +0 -1
- package/lib/property-c78323b1.js +0 -7
- package/lib/property-c78323b1.js.map +0 -1
- package/lib/query-36bfe0e4.js +0 -12
- package/lib/query-36bfe0e4.js.map +0 -1
- package/lib/query-assigned-elements-92ce7494.js +0 -51
- package/lib/query-assigned-elements-92ce7494.js.map +0 -1
- package/lib/ref-99418ab4.js +0 -17
- package/lib/ref-99418ab4.js.map +0 -1
- package/lib/state-d31c6912.js +0 -7
- package/lib/state-d31c6912.js.map +0 -1
- package/lib/style-map-f8a1c8d5.js +0 -7
- package/lib/style-map-f8a1c8d5.js.map +0 -1
package/lib/Dropdown.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,
|
|
1
|
+
import{i as o,k as e,h as t,_ as n,t as r}from"./custom-element-CDWT-yC_.js";import{n as s}from"./property-DeTTNf1t.js";import{e as d}from"./query-hiZs21fO.js";import{t as a}from"./if-defined-C2kZHWU2.js";import{S as i}from"./SlotController-BL-tOh6b.js";import{F as l}from"./Popout-CqmQIaOr.js";import{o as p}from"./observe-D0n0zOfU.js";import{s as c}from"./Component-BuB0QgQM.js";import"./EventController-BG-WpaBb.js";import"./state-BFYKuryf.js";import"./positioning-CHP-_dKQ.js";import"./LightDismissController-BBolVMtn.js";import"./ShortcutController-nMRUu6ns.js";import"./tinykeys.module-_6MZt7MP.js";import"./ScrollbarController-C5CMxfb3.js";import"./events-Bv6wNHwJ.js";import"./DirectionController-DiJ1Su1I.js";const h=o`:host{--_n-dropdown-size:var(--n-dropdown-size, 250px)}.n-dropdown-content{padding:var(--n-space-s) 0;min-inline-size:var(--_n-dropdown-size);max-inline-size:calc(var(--_n-dropdown-size) * 1.5);max-block-size:460px;overflow-y:auto}@media (max-width:35.9375em){.n-dropdown-content{max-block-size:70vh;max-inline-size:none}}::slotted(nord-dropdown-group),::slotted(nord-dropdown-item){padding-inline-start:var(--n-space-s);padding-inline-end:var(--n-space-s)}::slotted(nord-dropdown-group){padding-block-end:var(--n-space-s);border-block-end:1px solid var(--n-color-border);margin-block-end:var(--n-space-s)}::slotted(nord-dropdown-group:last-child){padding-block-end:0;border-block-end:0;margin-block-end:0}::slotted(nord-message:first-of-type){padding-block-start:0}::slotted(nord-message:last-of-type){margin-block-end:var(--n-space-s)}slot[name=toggle]{display:inline-block}:host([expand]) slot[name=toggle]{inline-size:100%}:host([size="s"]){--_n-dropdown-size:var(--n-dropdown-size, 150px)}:host([size="l"]){--_n-dropdown-size:var(--n-dropdown-size, 300px)}.n-dropdown-header{padding:calc(var(--n-space-m) + 2px) var(--n-space-m);border-block-end:1px solid var(--n-color-border);background-color:var(--n-color-surface-raised);border-start-start-radius:var(--n-border-radius);border-start-end-radius:var(--n-border-radius);font-weight:var(--n-font-weight);display:flex;gap:var(--n-space-s);align-items:center;flex-wrap:wrap}.n-dropdown-header ::slotted(nord-button){--n-button-gap:var(--n-space-xs);--n-button-background-color:var(--n-color-surface)}.n-dropdown-header ::slotted(nord-button:hover){--n-button-background-color:var(--n-color-button-hover)}::slotted([slot=header-end]){margin-inline-start:auto;gap:var(--n-space-s);display:flex;align-items:center;flex-wrap:wrap}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){margin:0!important}`;let m=class extends(l(t)){constructor(){super(...arguments),this.headerSlot=new i(this,"header"),this.headerEndSlot=new i(this,"header-end"),this.expand=!1,this.size="m"}connectedCallback(){super.connectedCallback();const o=this.querySelector('[slot="toggle"]');null==o||o.setAttribute("aria-haspopup","true")}render(){return e`<div class="n-dropdown" @focusout="${this.handleBlur}"><slot name="toggle" aria-controls="popout"></slot><nord-popout id="popout" align="${a(this.align)}" position="${a(this.position)}" ?open="${this.open}" @open="${this.handleOpen}" @close="${this.handleClose}"><div class="n-dropdown-header" ?hidden="${this.headerSlot.isEmpty&&this.headerEndSlot.isEmpty}"><slot name="${this.headerSlot.slotName}"></slot><slot name="${this.headerEndSlot.slotName}"></slot></div><div class="n-dropdown-content"><slot></slot></div></nord-popout></div>`}handleBlur(o){const e=o.relatedTarget;e&&!this.contains(e)&&this.popout.hide(!1)}handleOpen(){this.open=!0}handleClose(){this.open=!1}handleOpenChange(){var o;if(this.open){const e=null!==(o=this.querySelector("[autofocus]"))&&void 0!==o?o:this.querySelector("nord-dropdown-item, nord-message");null==e||e.focus(),this.list.scrollTop=0}}hide(o){return this.popout.hide(o)}show(){return this.popout.show()}};m.styles=[c,h],m.shadowRootOptions={...t.shadowRootOptions,delegatesFocus:!0},n([d(".n-dropdown-content")],m.prototype,"list",void 0),n([d("nord-popout",!0)],m.prototype,"popout",void 0),n([s({reflect:!0,type:Boolean})],m.prototype,"expand",void 0),n([s({reflect:!0})],m.prototype,"size",void 0),n([p("open","updated")],m.prototype,"handleOpenChange",null),m=n([r("nord-dropdown")],m);var u=m;export{u as default};
|
|
2
2
|
//# sourceMappingURL=Dropdown.js.map
|
package/lib/Dropdown.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n\n @query(\".n-dropdown-content\") private list!: HTMLElement\n @query(\"nord-popout\", true) private popout!: Popout\n\n /**\n * Controls whether the toggle slot expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * The size of the dropdown. This affects the minimum and maximum inline-size\n * of the dropdown.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute(\"aria-haspopup\", \"true\")\n }\n\n render() {\n return html`\n <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n >\n <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <div class=\"n-dropdown-content\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as Node\n\n // Safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (relatedTarget && !this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.open = true\n }\n\n private handleClose() {\n this.open = false\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenChange() {\n if (this.open) {\n const focusTarget =\n this.querySelector<HTMLElement>(\"[autofocus]\") ??\n this.querySelector<HTMLElement>(\"nord-dropdown-item, nord-message\")\n\n focusTarget?.focus()\n this.list.scrollTop = 0\n }\n }\n\n /**\n * Hide the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n */\n hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n return this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's show() method](/components/popout#methods-hide) for more details.\n */\n show(): Promise<TransitionEvent | void> {\n return this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown\": Dropdown\n }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","isEmpty","slotName","e","relatedTarget","contains","popout","hide","handleOpenChange","focusTarget","_a","focus","list","scrollTop","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","observe","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property, query } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { FloatingMixin } from \"../common/mixins/FloatingComponentMixin.js\"\nimport { observe } from \"../common/decorators/observe.js\"\n\nimport type Popout from \"../popout/Popout.js\"\nimport \"../popout/Popout.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Dropdown.css\"\n\n/**\n * Dropdown menu displays a list of actions or selectable options for\n * a user. Dropdown uses popout component internally to create\n * the overlay functionality.\n *\n * @status ready\n * @category action\n *\n * @slot - The dropdown content.\n * @slot toggle - Used to place the toggle for dropdown.\n * @slot header - Optional slot that holds a header for the dropdown.\n * @slot header-end - Optional slot that positions content at the end of the header. Useful for actions or additional info.\n *\n * @fires {NordEvent} open - Dispatched when the popout is opened.\n * @fires {NordEvent} close - Dispatched when the popout is closed.\n *\n * @cssprop [--n-dropdown-size=250px] - Controls the inline size, or width, of the dropdown. Will resize up to 1.5 times to account for larger content.\n */\n@customElement(\"nord-dropdown\")\nexport default class Dropdown extends FloatingMixin(LitElement) {\n static styles = [componentStyle, style]\n\n /**\n * we delegate focus, to ensure focus does not move to body if you click\n * some whitespace or a dropdown-group heading, as this would close the dropdown\n * @internal\n */\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n\n private headerSlot = new SlotController(this, \"header\")\n private headerEndSlot = new SlotController(this, \"header-end\")\n\n @query(\".n-dropdown-content\") private list!: HTMLElement\n @query(\"nord-popout\", true) private popout!: Popout\n\n /**\n * Controls whether the toggle slot expands to fill the width of its container.\n */\n @property({ reflect: true, type: Boolean }) expand = false\n\n /**\n * The size of the dropdown. This affects the minimum and maximum inline-size\n * of the dropdown.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" | \"l\" = \"m\"\n\n connectedCallback() {\n super.connectedCallback()\n\n const toggle = this.querySelector(`[slot=\"toggle\"]`)\n toggle?.setAttribute(\"aria-haspopup\", \"true\")\n }\n\n render() {\n return html`\n <div class=\"n-dropdown\" @focusout=${this.handleBlur}>\n <slot name=\"toggle\" aria-controls=\"popout\"></slot>\n <nord-popout\n id=\"popout\"\n align=${ifDefined(this.align)}\n position=${ifDefined(this.position)}\n ?open=${this.open}\n @open=${this.handleOpen}\n @close=${this.handleClose}\n >\n <div class=\"n-dropdown-header\" ?hidden=${this.headerSlot.isEmpty && this.headerEndSlot.isEmpty}>\n <slot name=${this.headerSlot.slotName}></slot>\n <slot name=${this.headerEndSlot.slotName}></slot>\n </div>\n <div class=\"n-dropdown-content\">\n <slot></slot>\n </div>\n </nord-popout>\n </div>\n `\n }\n\n private handleBlur(e: FocusEvent) {\n const relatedTarget = e.relatedTarget as Node\n\n // Safari will set relatedTarget to null when clicking on the trigger button\n // because it doesn't focus buttons on click.\n // this caused weird behavior where the dropdown closed _and_ opened with a single click.\n // so we only run this logic if relatedTarget is set, which sidesteps this issue\n if (relatedTarget && !this.contains(relatedTarget)) {\n this.popout.hide(false)\n }\n }\n\n private handleOpen() {\n this.open = true\n }\n\n private handleClose() {\n this.open = false\n }\n\n @observe(\"open\", \"updated\")\n protected handleOpenChange() {\n if (this.open) {\n const focusTarget =\n this.querySelector<HTMLElement>(\"[autofocus]\") ??\n this.querySelector<HTMLElement>(\"nord-dropdown-item, nord-message\")\n\n focusTarget?.focus()\n this.list.scrollTop = 0\n }\n }\n\n /**\n * Hide the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's hide() method](/components/popout#methods-hide) for more details.\n * @param moveFocusToButton A boolean option to move the focus to the original button that opens the dropdown.\n */\n hide(moveFocusToButton?: boolean): Promise<TransitionEvent | void> {\n return this.popout.hide(moveFocusToButton)\n }\n\n /**\n * Show the dropdown programmatically.\n * This method delegates to the Dropdown's internal Popout component.\n * See [Popout's show() method](/components/popout#methods-hide) for more details.\n */\n show(): Promise<TransitionEvent | void> {\n return this.popout.show()\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown\": Dropdown\n }\n}\n"],"names":["Dropdown","FloatingMixin","LitElement","constructor","this","headerSlot","SlotController","headerEndSlot","expand","size","connectedCallback","super","toggle","querySelector","setAttribute","render","html","handleBlur","ifDefined","align","position","open","handleOpen","handleClose","isEmpty","slotName","e","relatedTarget","contains","popout","hide","handleOpenChange","focusTarget","_a","focus","list","scrollTop","moveFocusToButton","show","styles","componentStyle","style","shadowRootOptions","delegatesFocus","__decorate","query","prototype","property","reflect","type","Boolean","observe","customElement"],"mappings":"0gFAgCe,IAAMA,EAAN,cAAuBC,EAAcC,IAArC,WAAAC,uBAULC,KAAUC,WAAG,IAAIC,EAAeF,KAAM,UACtCA,KAAaG,cAAG,IAAID,EAAeF,KAAM,cAQLA,KAAMI,QAAG,EAMxBJ,KAAIK,KAAoB,GAmFtD,CAjFC,iBAAAC,GACEC,MAAMD,oBAEN,MAAME,EAASR,KAAKS,cAAc,mBAClCD,SAAAA,EAAQE,aAAa,gBAAiB,OACvC,CAED,MAAAC,GACE,OAAOC,CAAI,sCAC2BZ,KAAKa,iGAI7BC,EAAUd,KAAKe,qBACZD,EAAUd,KAAKgB,qBAClBhB,KAAKiB,gBACLjB,KAAKkB,uBACJlB,KAAKmB,wDAE2BnB,KAAKC,WAAWmB,SAAWpB,KAAKG,cAAciB,wBACxEpB,KAAKC,WAAWoB,gCAChBrB,KAAKG,cAAckB,gGAQzC,CAEO,UAAAR,CAAWS,GACjB,MAAMC,EAAgBD,EAAEC,cAMpBA,IAAkBvB,KAAKwB,SAASD,IAClCvB,KAAKyB,OAAOC,MAAK,EAEpB,CAEO,UAAAR,GACNlB,KAAKiB,MAAO,CACb,CAEO,WAAAE,GACNnB,KAAKiB,MAAO,CACb,CAGS,gBAAAU,SACR,GAAI3B,KAAKiB,KAAM,CACb,MAAMW,EAC0C,QAA9CC,EAAA7B,KAAKS,cAA2B,sBAAc,IAAAoB,EAAAA,EAC9C7B,KAAKS,cAA2B,oCAElCmB,SAAAA,EAAaE,QACb9B,KAAK+B,KAAKC,UAAY,CACvB,CACF,CAQD,IAAAN,CAAKO,GACH,OAAOjC,KAAKyB,OAAOC,KAAKO,EACzB,CAOD,IAAAC,GACE,OAAOlC,KAAKyB,OAAOS,MACpB,GA1GMtC,EAAAuC,OAAS,CAACC,EAAgBC,GAO1BzC,EAAA0C,kBAAoB,IAAKxC,EAAWwC,kBAAmBC,gBAAgB,GAKxCC,EAAA,CAArCC,EAAM,wBAAiD7C,EAAA8C,UAAA,YAAA,GACpBF,EAAA,CAAnCC,EAAM,eAAe,IAA6B7C,EAAA8C,UAAA,cAAA,GAKPF,EAAA,CAA3CG,EAAS,CAAEC,SAAS,EAAMC,KAAMC,WAAyBlD,EAAA8C,UAAA,cAAA,GAM7BF,EAAA,CAA5BG,EAAS,CAAEC,SAAS,KAAmChD,EAAA8C,UAAA,YAAA,GAsD9CF,EAAA,CADTO,EAAQ,OAAQ,YAUhBnD,EAAA8C,UAAA,mBAAA,MAxFkB9C,EAAQ4C,EAAA,CAD5BQ,EAAc,kBACMpD,SAAAA"}
|
package/lib/DropdownGroup.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as
|
|
1
|
+
import{i as e,_ as o,h as n,k as a,D as r,t as d}from"./custom-element-CDWT-yC_.js";import{n as s}from"./property-DeTTNf1t.js";import{s as t}from"./Component-BuB0QgQM.js";const i=e`.n-dropdown-group-heading{font-size:var(--n-font-size-xs);font-weight:var(--n-font-weight-heading);color:var(--n-color-text-weaker);padding:var(--n-space-xs) var(--n-space-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width:35.9375em){.n-dropdown-group-heading{padding:calc(var(--n-space-s)/ 1.5) var(--n-space-m)}}.n-dropdown-group-content{display:flex;flex-direction:column}::slotted(nord-message){inline-size:calc(100% + calc(var(--n-space-s) * 2));margin-inline-start:calc(var(--n-space-s) * -1)}::slotted(nord-message:last-of-type){padding-block-end:0;border-block-end:0}`;let p=class extends n{render(){return a`<div class="n-dropdown-group">${this.heading?a`<p id="heading" aria-hidden="true" class="n-dropdown-group-heading">${this.heading}</p>`:r}<div class="n-dropdown-group-content" role="group" aria-labelledby="${this.heading?"heading":r}"><slot></slot></div></div>`}};p.styles=[t,i],o([s({reflect:!0})],p.prototype,"heading",void 0),p=o([d("nord-dropdown-group")],p);var l=p;export{l as default};
|
|
2
2
|
//# sourceMappingURL=DropdownGroup.js.map
|
package/lib/DropdownGroup.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownGroup.css\"\n\n/**\n * Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n *\n * @status ready\n * @category action\n * @slot - The dropdown group content.\n */\n@customElement(\"nord-dropdown-group\")\nexport default class DropdownGroup extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * Heading and accessible label for the dropdown group.\n */\n @property({ reflect: true }) heading?: string\n\n render() {\n return html`\n <div class=\"n-dropdown-group\">\n ${this.heading\n ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n : nothing}\n <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n <slot></slot>\n </div>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown-group\": DropdownGroup\n }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownGroup.js","sources":["../src/dropdown-group/DropdownGroup.ts"],"sourcesContent":["import { LitElement, html, nothing } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownGroup.css\"\n\n/**\n * Dropdown group includes all the actions or items in a single dropdown\n * group and is used for grouping items into related categories.\n *\n * @status ready\n * @category action\n * @slot - The dropdown group content.\n */\n@customElement(\"nord-dropdown-group\")\nexport default class DropdownGroup extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * Heading and accessible label for the dropdown group.\n */\n @property({ reflect: true }) heading?: string\n\n render() {\n return html`\n <div class=\"n-dropdown-group\">\n ${this.heading\n ? html`<p id=\"heading\" aria-hidden=\"true\" class=\"n-dropdown-group-heading\">${this.heading}</p>`\n : nothing}\n <div class=\"n-dropdown-group-content\" role=\"group\" aria-labelledby=${this.heading ? \"heading\" : nothing}>\n <slot></slot>\n </div>\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown-group\": DropdownGroup\n }\n}\n"],"names":["DropdownGroup","LitElement","render","html","this","heading","nothing","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"kxBAee,IAAMA,EAAN,cAA4BC,EAQzC,MAAAC,GACE,OAAOC,CAAI,iCAELC,KAAKC,QACHF,CAAI,uEAAuEC,KAAKC,cAChFC,wEACiEF,KAAKC,QAAU,UAAYC,8BAKrG,GAlBMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAwBZ,EAAAa,UAAA,eAAA,GAN1Bb,EAAaU,EAAA,CADjCI,EAAc,wBACMd,SAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{i as o}from"./custom-element-CDWT-yC_.js";const n=o`:host{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, transparent);--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text));display:flex;line-height:var(--n-line-height-tight)}.n-dropdown-item{-webkit-appearance:none;appearance:none;cursor:pointer;display:flex;flex:1;gap:var(--n-space-s);align-items:center;font-family:inherit;font-size:inherit;font-weight:var(--n-font-weight);text-decoration:none;border:0;color:var(--_n-dropdown-item-color);padding:var(--n-space-s);border-radius:var(--n-border-radius-s);background:var(--_n-dropdown-item-background-color);text-align:start;box-shadow:var(--n-dropdown-item-box-shadow,none);min-inline-size:0}.n-dropdown-item:hover{--_n-dropdown-item-background-color:var(--n-dropdown-item-background-color, var(--n-color-accent));--_n-dropdown-item-color:var(--n-dropdown-item-color, var(--n-color-text-on-accent))}.n-dropdown-item:hover ::slotted(*){color:var(--n-dropdown-item-color,var(--n-color-text-on-accent))!important}.n-dropdown-item ::slotted(nord-icon){color:var(--n-color-icon)}.n-dropdown-item:hover ::slotted(nord-icon){color:currentColor}.n-dropdown-item:active{opacity:.7}.n-dropdown-item:focus{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent);outline:0;position:relative;z-index:var(--n-index-masked)}@supports selector(:focus-visible){.n-dropdown-item:focus{--n-dropdown-item-box-shadow:none}.n-dropdown-item:focus-visible{--n-dropdown-item-box-shadow:0 0 0 2px var(--n-color-accent)}}@media (max-width:35.9375em){.n-dropdown-item{gap:var(--n-space-m);padding:calc(var(--n-space-m)/ 1.5) var(--n-space-m)}.n-dropdown-item ::slotted(nord-icon){block-size:var(--n-size-icon-m);inline-size:var(--n-size-icon-m)}}slot[name=end],slot[name=start]{flex:0 0 auto}slot[name=end]{display:flex;margin-inline-start:auto}.n-content{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}::slotted(nord-icon:not([size])){--_n-icon-size:var(--n-size-icon-s)}`;export{n as s};
|
|
2
|
+
//# sourceMappingURL=DropdownItem-DpwKwVOT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownItem-DpwKwVOT.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/DropdownItem.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{k as t,_ as o,t as s,h as e}from"./custom-element-CDWT-yC_.js";import{n as r}from"./property-DeTTNf1t.js";import{t as i}from"./if-defined-C2kZHWU2.js";import{K as n}from"./ref-BYkj-TPb.js";import{F as m}from"./FocusableMixin-DriuCNli.js";import{S as a}from"./SlotController-BL-tOh6b.js";import{s as l}from"./Component-BuB0QgQM.js";import{s as d}from"./DropdownItem-DpwKwVOT.js";import"./directive-DQ0jBES2.js";import"./EventController-BG-WpaBb.js";let p=class extends(m(e)){constructor(){super(...arguments),this.endSlot=new a(this,"end"),this.target="_self"}render(){return(this.href?o=>t`<a href="${i(this.href)}" ${n(this.focusableRef)} target="${this.target}" class="n-dropdown-item">${o}</a>`:o=>t`<button ${n(this.focusableRef)} class="n-dropdown-item">${o}</button>`)(t`<slot name="start"></slot><div class="n-content"><slot></slot></div><slot name="end" ?hidden="${this.endSlot.isEmpty}"></slot>`)}};p.styles=[l,d],o([r({reflect:!0})],p.prototype,"href",void 0),o([r()],p.prototype,"target",void 0),p=o([s("nord-dropdown-item")],p);var f=p;export{f as default};
|
|
2
2
|
//# sourceMappingURL=DropdownItem.js.map
|
package/lib/DropdownItem.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n *\n * @cssprop [--n-dropdown-item-background-color=transparent] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-dropdown-item-color=var(--n-color-text)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, \"end\")\n\n /**\n * The url the dropdown item should link to.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n render() {\n const link = (content: TemplateResult) =>\n html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} target=${this.target} class=\"n-dropdown-item\">\n ${content}\n </a>`\n const button = (content: TemplateResult) =>\n html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n const container = this.href ? link : button\n\n return container(html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\"><slot></slot></div>\n <slot name=\"end\" ?hidden=${this.endSlot.isEmpty}></slot>\n `)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown-item\": DropdownItem\n }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","constructor","this","endSlot","SlotController","target","render","href","content","html","ifDefined","ref","focusableRef","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sources":["../src/dropdown-item/DropdownItem.ts"],"sourcesContent":["import { LitElement, html, TemplateResult } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { ref } from \"lit/directives/ref.js\"\nimport { FocusableMixin } from \"../common/mixins/FocusableMixin.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./DropdownItem.css\"\n\n/**\n * Dropdown item populates dropdown with actions. Items can be\n * placed either inside a dropdown group or directly inside a\n * dropdown component.\n *\n * @status ready\n * @category action\n * @slot - The dropdown item content.\n * @slot start - Used to place content before dropdown item text. Typically used for icons.\n * @slot end - Used to place content after dropdown item text. Typically used for icons.\n *\n * @cssprop [--n-dropdown-item-background-color=transparent] - Controls the background color of the item, using our [color tokens](/tokens/#color).\n * @cssprop [--n-dropdown-item-color=var(--n-color-text)] - Controls the color of the text within the item, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-dropdown-item\")\nexport default class DropdownItem extends FocusableMixin(LitElement) {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, \"end\")\n\n /**\n * The url the dropdown item should link to.\n */\n @property({ reflect: true }) href?: string\n\n /**\n * When provided together with a href property, determines where\n * to open the linked URL. The keywords have special meanings for\n * where to load the URL: “_self” means the current browsing context,\n * “_blank” usually a new tab but users can configure browsers this to\n * open a new window instead, “_parent” means the parent browsing\n * context of the current one, but if no parent exists, behaves as\n * _self, and finally “top” means the topmost browsing context.\n */\n @property() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\"\n\n render() {\n const link = (content: TemplateResult) =>\n html`<a href=${ifDefined(this.href)} ${ref(this.focusableRef)} target=${this.target} class=\"n-dropdown-item\">\n ${content}\n </a>`\n const button = (content: TemplateResult) =>\n html`<button ${ref(this.focusableRef)} class=\"n-dropdown-item\">${content}</button>`\n\n const container = this.href ? link : button\n\n return container(html`\n <slot name=\"start\"></slot>\n <div class=\"n-content\"><slot></slot></div>\n <slot name=\"end\" ?hidden=${this.endSlot.isEmpty}></slot>\n `)\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-dropdown-item\": DropdownItem\n }\n}\n"],"names":["DropdownItem","FocusableMixin","LitElement","constructor","this","endSlot","SlotController","target","render","href","content","html","ifDefined","ref","focusableRef","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"ucAyBe,IAAMA,EAAN,cAA2BC,EAAeC,IAA1C,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAgB/BA,KAAMG,OAA4C,OAkB/D,CAhBC,MAAAC,GAUE,OAFkBJ,KAAKK,KAPTC,GACZC,CAAI,YAAWC,EAAUR,KAAKK,UAASI,EAAIT,KAAKU,yBAAwBV,KAAKG,mCACzEG,QAEUA,GACdC,CAAI,WAAWE,EAAIT,KAAKU,yCAAyCJ,cAIlDC,CAAI,iGAGQP,KAAKC,QAAQU,mBAE3C,GAnCMf,EAAAgB,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBrB,EAAAsB,UAAA,YAAA,GAW9BH,EAAA,CAAXC,KAAoEpB,EAAAsB,UAAA,cAAA,GAnBlDtB,EAAYmB,EAAA,CADhCI,EAAc,uBACMvB,SAAAA"}
|
package/lib/EmptyState.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,_ as e,
|
|
1
|
+
import{i as t,_ as e,h as n,k as a,t as r}from"./custom-element-CDWT-yC_.js";import{s as o}from"./Component-BuB0QgQM.js";const i=t`:host{background:var(--n-color-surface);color:var(--n-color-text)}.n-empty-state{text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:var(--n-space-xl)}@media (max-width:500px){.n-empty-state{padding:var(--n-space-l) var(--n-space-m)}}::slotted(:is(h1, h2, h3, h4, h5, h6)){color:var(--n-color-text)!important;margin:0 0 var(--n-space-m)!important;font-weight:var(--n-font-weight-heading)!important;font-size:var(--n-font-size-xl)!important;line-height:var(--n-line-height-heading)!important}::slotted(p){margin:0 0 var(--n-space-l)!important;font-size:var(--n-font-size-m)!important;color:var(--n-color-text-weaker)!important;line-height:var(--n-line-height)!important;max-inline-size:var(--n-empty-state-text-width,400px)}::slotted(:is(h1, h2, h3, h4, h5, h6, p)){text-wrap:balance!important}`;let s=class extends n{render(){return a`<div class="n-empty-state"><slot></slot></div>`}};s.styles=[o,i],s=e([r("nord-empty-state")],s);var l=s;export{l as default};
|
|
2
2
|
//# sourceMappingURL=EmptyState.js.map
|
package/lib/EmptyState.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state provides\n * explanation and guidance to help user progress.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n static styles = [componentStyle, style]\n\n render() {\n return html`<div class=\"n-empty-state\">\n <slot></slot>\n </div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-empty-state\": EmptyState\n }\n}\n"],"names":["EmptyState","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmptyState.js","sources":["../src/empty-state/EmptyState.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement } from \"lit/decorators.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./EmptyState.css\"\n\n/**\n * Empty state can be used when there is no data to display to\n * describe what the user can do next. Empty state provides\n * explanation and guidance to help user progress.\n *\n * @status ready\n * @category feedback\n * @slot - default slot\n */\n@customElement(\"nord-empty-state\")\nexport default class EmptyState extends LitElement {\n static styles = [componentStyle, style]\n\n render() {\n return html`<div class=\"n-empty-state\">\n <slot></slot>\n </div>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-empty-state\": EmptyState\n }\n}\n"],"names":["EmptyState","LitElement","render","html","styles","componentStyle","style","__decorate","customElement"],"mappings":"i9BAgBe,IAAMA,EAAN,cAAyBC,EAGtC,MAAAC,GACE,OAAOC,CAAI,gDAGZ,GANMH,EAAAI,OAAS,CAACC,EAAgBC,GADdN,EAAUO,EAAA,CAD9BC,EAAc,qBACMR,SAAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
class s{constructor(s){this.listeners=[],s.addController(this)}hostDisconnected(){this.listeners.forEach((s=>s())),this.listeners=[]}listen(s,e,t,i){s.addEventListener(e,t,i);this.listeners.push((()=>s.removeEventListener(e,t,i)))}}export{s as E};
|
|
2
|
-
//# sourceMappingURL=EventController-
|
|
2
|
+
//# sourceMappingURL=EventController-BG-WpaBb.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EventController-
|
|
1
|
+
{"version":3,"file":"EventController-BG-WpaBb.js","sources":["../src/common/controllers/EventController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\n\ninterface ShadowRootEventMap {\n slotchange: Event\n}\n\nexport class EventController implements ReactiveController {\n private listeners: Array<() => void> = []\n\n constructor(host: ReactiveControllerHost) {\n host.addController(this)\n }\n\n hostDisconnected() {\n this.listeners.forEach(stop => stop())\n this.listeners = []\n }\n\n listen<K extends keyof WindowEventMap>(\n window: Window,\n type: K,\n listener: (this: Window, ev: WindowEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n ): void\n\n listen<K extends keyof DocumentEventMap>(\n document: Document,\n type: K,\n listener: (this: Document, ev: DocumentEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n ): void\n\n listen<K extends keyof HTMLElementEventMap>(\n element: HTMLElement,\n type: K,\n listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n ): void\n\n listen<K extends keyof ShadowRootEventMap>(\n element: ShadowRoot,\n type: K,\n listener: (this: ShadowRoot, ev: ShadowRootEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n ): void\n\n listen<K extends keyof MediaQueryListEventMap>(\n element: MediaQueryList,\n type: K,\n listener: (this: ShadowRoot, ev: MediaQueryListEventMap[K]) => void,\n options?: boolean | AddEventListenerOptions\n ): void\n\n listen(\n element: EventTarget,\n type: string,\n listener: (this: EventTarget, ev: Event) => void,\n options?: boolean | AddEventListenerOptions\n ): void\n\n listen(\n element: EventTarget,\n type: string,\n listener: (this: EventTarget, ev: Event) => void,\n options?: boolean | AddEventListenerOptions\n ) {\n element.addEventListener(type, listener, options)\n\n const stop = () => element.removeEventListener(type, listener, options)\n this.listeners.push(stop)\n }\n}\n"],"names":["EventController","constructor","host","this","listeners","addController","hostDisconnected","forEach","stop","listen","element","type","listener","options","addEventListener","push","removeEventListener"],"mappings":"MAMaA,EAGX,WAAAC,CAAYC,GAFJC,KAASC,UAAsB,GAGrCF,EAAKG,cAAcF,KACpB,CAED,gBAAAG,GACEH,KAAKC,UAAUG,SAAQC,GAAQA,MAC/BL,KAAKC,UAAY,EAClB,CA4CD,MAAAK,CACEC,EACAC,EACAC,EACAC,GAEAH,EAAQI,iBAAiBH,EAAMC,EAAUC,GAGzCV,KAAKC,UAAUW,MADF,IAAML,EAAQM,oBAAoBL,EAAMC,EAAUC,IAEhE"}
|
package/lib/Fieldset.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,
|
|
1
|
+
import{i as e,_ as r,h as t,k as i,t as o}from"./custom-element-CDWT-yC_.js";import{n as s}from"./property-DeTTNf1t.js";import{S as n}from"./SlotController-BL-tOh6b.js";import{c as l}from"./cond-Cuc_PMkN.js";import{s as a}from"./Component-BuB0QgQM.js";import{s as d}from"./FormField-Cl7HHI9A.js";import"./EventController-BG-WpaBb.js";const h=e`fieldset{border:none}.n-label-container{margin-block-end:calc(var(--n-space-s) * 2)}:host([size="s"]) .n-label-container{margin-block-end:var(--n-space-s)}.n-hidden{position:absolute;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);block-size:1px;inline-size:1px;white-space:nowrap}`;let p=class extends t{constructor(){super(...arguments),this.errorSlot=new n(this,"error"),this.hintSlot=new n(this,"hint"),this.label="",this.required=!1,this.hideRequired=!1,this.hideLabel=!1,this.size="m"}render(){const{hasError:e}=this;return i`<fieldset aria-invalid="${l(e,"true")}" aria-describedby="${l(e,"error")}" aria-required="${l(this.required,"true")}"><legend class="n-label-container ${this.hideLabel?"n-hidden":""}"><div class="n-label"><slot name="label">${this.label}</slot><span aria-hidden="true" class="n-required" ?hidden="${!this.required||this.hideRequired}">*</span></div><div class="n-caption n-hint" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div></legend><slot></slot><div class="n-caption n-error" id="error" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div></fieldset>`}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}};p.styles=[a,d,h],r([s({reflect:!0})],p.prototype,"label",void 0),r([s({reflect:!0})],p.prototype,"hint",void 0),r([s({reflect:!0})],p.prototype,"error",void 0),r([s({reflect:!0,type:Boolean})],p.prototype,"required",void 0),r([s({reflect:!0,type:Boolean,attribute:"hide-required"})],p.prototype,"hideRequired",void 0),r([s({reflect:!0,type:Boolean,attribute:"hide-label"})],p.prototype,"hideLabel",void 0),r([s({reflect:!0})],p.prototype,"size",void 0),p=r([o("nord-fieldset")],p);var c=p;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Fieldset.js.map
|
package/lib/Fieldset.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n static styles = [componentStyle, formFieldStyle, style]\n\n private errorSlot = new SlotController(this, \"error\")\n private hintSlot = new SlotController(this, \"hint\")\n\n /**\n * Label for the fieldset. Rendered as a `<legend>` element.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property({ reflect: true }) hint?: string\n\n /**\n * Optional error to be shown with the fieldset. Alternatively use the error slot.\n */\n @property({ reflect: true }) error?: string\n\n /**\n * Determines whether the fieldset is required or not.\n * A fieldset marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ reflect: true, type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * The size of the label.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n render() {\n const { hasError } = this\n\n return html`\n <fieldset\n aria-invalid=${cond(hasError, \"true\")}\n aria-describedby=${cond(hasError, \"error\")}\n aria-required=${cond(this.required, \"true\")}\n >\n <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n <div class=\"n-label\">\n <slot name=\"label\">${this.label}</slot\n ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n </div>\n\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n </legend>\n\n <slot></slot>\n\n <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n </fieldset>\n `\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-fieldset\": Fieldset\n }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","hideLabel","size","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Fieldset.js","sources":["../src/fieldset/Fieldset.ts"],"sourcesContent":["import { html, LitElement } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport { cond } from \"../common/directives/cond.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport formFieldStyle from \"../common/styles/FormField.css\"\nimport style from \"./Fieldset.css\"\n\n/**\n * Fieldset is used for grouping sets of input components.\n * It is necessary to use a fieldset with radio and checkbox components.\n * It can also be useful for logically grouping other types of inputs.\n *\n * @status ready\n * @category form\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Optional slot that holds hint text for the fieldset.\n * @slot error - Optional slot that holds error text for the fieldset.\n *\n * @cssprop [--n-label-color=var(--n-color-text)] - Controls the text color of the label, using our [color tokens](/tokens/#color).\n */\n@customElement(\"nord-fieldset\")\nexport default class Fieldset extends LitElement {\n static styles = [componentStyle, formFieldStyle, style]\n\n private errorSlot = new SlotController(this, \"error\")\n private hintSlot = new SlotController(this, \"hint\")\n\n /**\n * Label for the fieldset. Rendered as a `<legend>` element.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property({ reflect: true }) hint?: string\n\n /**\n * Optional error to be shown with the fieldset. Alternatively use the error slot.\n */\n @property({ reflect: true }) error?: string\n\n /**\n * Determines whether the fieldset is required or not.\n * A fieldset marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ reflect: true, type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * The size of the label.\n */\n @property({ reflect: true }) size: \"s\" | \"m\" = \"m\"\n\n render() {\n const { hasError } = this\n\n return html`\n <fieldset\n aria-invalid=${cond(hasError, \"true\")}\n aria-describedby=${cond(hasError, \"error\")}\n aria-required=${cond(this.required, \"true\")}\n >\n <legend class=\"n-label-container ${this.hideLabel ? \"n-hidden\" : \"\"}\">\n <div class=\"n-label\">\n <slot name=\"label\">${this.label}</slot\n ><span aria-hidden=\"true\" class=\"n-required\" ?hidden=${!this.required || this.hideRequired}>*</span>\n </div>\n\n <div class=\"n-caption n-hint\" ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n </legend>\n\n <slot></slot>\n\n <div class=\"n-caption n-error\" id=\"error\" role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n </fieldset>\n `\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-fieldset\": Fieldset\n }\n}\n"],"names":["Fieldset","LitElement","constructor","this","errorSlot","SlotController","hintSlot","label","required","hideRequired","hideLabel","size","render","hasError","html","cond","hasHint","hint","error","Boolean","hasContent","styles","componentStyle","formFieldStyle","style","__decorate","property","reflect","prototype","type","attribute","customElement"],"mappings":"2nBAuBe,IAAMA,EAAN,cAAuBC,EAAvB,WAAAC,uBAGLC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAAQG,SAAG,IAAID,EAAeF,KAAM,QAKfA,KAAKI,MAAW,GAiBDJ,KAAQK,UAAG,EAMiBL,KAAYM,cAAG,EAKlBN,KAASO,WAAG,EAKpDP,KAAIQ,KAAc,GAsChD,CApCC,MAAAC,GACE,MAAMC,SAAEA,GAAaV,KAErB,OAAOW,CAAI,2BAEQC,EAAKF,EAAU,8BACXE,EAAKF,EAAU,4BAClBE,EAAKZ,KAAKK,SAAU,6CAEDL,KAAKO,UAAY,WAAa,+CAExCP,KAAKI,qEAC8BJ,KAAKK,UAAYL,KAAKM,uEAGvCN,KAAKa,8BACxBb,KAAKc,2GAMqCd,KAAKU,gCAChDV,KAAKe,+BAIjC,CAED,WAAcF,GACZ,OAAOG,QAAQhB,KAAKc,OAASd,KAAKG,SAASc,UAC5C,CAED,YAAcP,GACZ,OAAOM,QAAQhB,KAAKe,QAAUf,KAAKC,UAAUgB,UAC9C,GA9EMpB,EAAMqB,OAAG,CAACC,EAAgBC,EAAgBC,GAQpBC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0B3B,EAAA4B,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqB3B,EAAA4B,UAAA,YAAA,GAKbH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsB3B,EAAA4B,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMV,WAA2BnB,EAAA4B,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,mBAAuC9B,EAAA4B,UAAA,oBAAA,GAKvBH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMV,QAASW,UAAW,gBAAiC9B,EAAA4B,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6B3B,EAAA4B,UAAA,YAAA,GA1C/B5B,EAAQyB,EAAA,CAD5BM,EAAc,kBACM/B,SAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{i as l}from"./ref-BYkj-TPb.js";function s(s){return class extends s{constructor(){super(...arguments),this.focusableRef=l()}focus(l){var s;null===(s=this.focusableRef.value)||void 0===s||s.focus(l)}blur(){var l;null===(l=this.focusableRef.value)||void 0===l||l.blur()}click(){var l;null===(l=this.focusableRef.value)||void 0===l||l.click()}}}export{s as F};
|
|
2
|
+
//# sourceMappingURL=FocusableMixin-DriuCNli.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FocusableMixin-
|
|
1
|
+
{"version":3,"file":"FocusableMixin-DriuCNli.js","sources":["../src/common/mixins/FocusableMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\n\nimport { LitElement } from \"lit\"\nimport { createRef, Ref } from \"lit/directives/ref.js\"\n\ntype Constructable<T = Record<string, unknown>> = new (...args: any[]) => T\n\nexport declare class FocusableMixinInterface {\n protected focusableRef: Ref<HTMLElement>\n focus(options?: FocusOptions): void\n blur(): void\n click(): void\n}\n\nexport function FocusableMixin<T extends Constructable<LitElement>>(superClass: T) {\n class FocusableElement extends superClass {\n protected focusableRef = createRef<HTMLElement>()\n\n /**\n * Programmatically move focus to the component.\n * @param {FocusOptions} options An object which controls aspects of the focusing process.\n */\n focus(options?: FocusOptions) {\n this.focusableRef.value?.focus(options)\n }\n\n /**\n * Programmatically remove focus from the component.\n */\n blur() {\n this.focusableRef.value?.blur()\n }\n\n /**\n * Programmatically simulates a click on the component.\n */\n click() {\n this.focusableRef.value?.click()\n }\n }\n\n return FocusableElement as unknown as Constructable<FocusableMixinInterface> & T\n}\n"],"names":["FocusableMixin","superClass","constructor","this","focusableRef","createRef","focus","options","_a","value","blur","click"],"mappings":"sCAcM,SAAUA,EAAoDC,GA2BlE,OA1BA,cAA+BA,EAA/B,WAAAC,uBACYC,KAAYC,aAAGC,GAuB1B,CAjBC,KAAAC,CAAMC,iBACJC,EAAAL,KAAKC,aAAaK,sBAAOH,MAAMC,EAChC,CAKD,IAAAG,SAC2B,QAAzBF,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAE,MAC1B,CAKD,KAAAC,SAC2B,QAAzBH,EAAAL,KAAKC,aAAaK,aAAO,IAAAD,GAAAA,EAAAG,OAC1B,EAIL"}
|
package/lib/Footer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as o,_ as r,
|
|
1
|
+
import{i as o,_ as r,h as e,k as t,t as n}from"./custom-element-CDWT-yC_.js";import{n as a}from"./property-DeTTNf1t.js";import{s}from"./Component-BuB0QgQM.js";const d=o`:host{--_n-footer-padding-inline:var(--n-footer-padding-inline, var(--n-space-l));--_n-footer-box-shadow:var(--n-footer-box-shadow, var(--n-box-shadow-header));--_n-footer-background-color:var(--n-footer-background-color, var(--n-color-surface));--_n-footer-padding-block:var(--n-space-m);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-footer{display:flex;flex-flow:row;align-items:center;flex-wrap:wrap;gap:var(--n-space-s);padding:var(--_n-footer-padding-block) var(--_n-footer-padding-inline);background-color:var(--_n-footer-background-color);border-block-start:1px solid var(--n-color-border);box-shadow:var(--_n-footer-box-shadow);justify-content:flex-end}:host([size="s"]){--_n-footer-padding-block:var(--n-space-s)}`;let l=class extends e{constructor(){super(...arguments),this.size="m"}render(){return t`<footer class="n-footer"><slot></slot></footer>`}};l.styles=[s,d],r([a({reflect:!0})],l.prototype,"size",void 0),l=r([n("nord-footer")],l);var c=l;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Footer.js.map
|
package/lib/Footer.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.js","sources":["../src/footer/Footer.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Footer.css\"\n\n/**\n * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.\n *\n * @status new\n * @category structure\n * @slot - The footer content.\n *\n * @cssprop [--n-footer-padding-inline=var(--n-space-l)] - Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).\n * @cssprop [--n-footer-box-shadow=var(--n-box-shadow-header)] - Controls the box shadow of the footer, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-footer-background-color=var(--n-color-surface)] - Controls the background color of the footer, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-footer\")\nexport default class Footer extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * Controls the size of the footer component.\n */\n @property({ reflect: true }) size: \"m\" | \"s\" = \"m\"\n\n render() {\n return html`\n <footer class=\"n-footer\">\n <slot></slot>\n </footer>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-footer\": Footer\n }\n}\n"],"names":["Footer","LitElement","constructor","this","size","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Footer.js","sources":["../src/footer/Footer.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Footer.css\"\n\n/**\n * The footer is a block of designated space for providing additional information or actions that are positioned below the main content.\n *\n * @status new\n * @category structure\n * @slot - The footer content.\n *\n * @cssprop [--n-footer-padding-inline=var(--n-space-l)] - Controls the inline padding around the footer’s main slot, using [spacing tokens](/tokens/#space).\n * @cssprop [--n-footer-box-shadow=var(--n-box-shadow-header)] - Controls the box shadow of the footer, using [box shadow tokens](/tokens/#box-shadow).\n * @cssprop [--n-footer-background-color=var(--n-color-surface)] - Controls the background color of the footer, using [color tokens](/tokens/#color).\n */\n@customElement(\"nord-footer\")\nexport default class Footer extends LitElement {\n static styles = [componentStyle, style]\n\n /**\n * Controls the size of the footer component.\n */\n @property({ reflect: true }) size: \"m\" | \"s\" = \"m\"\n\n render() {\n return html`\n <footer class=\"n-footer\">\n <slot></slot>\n </footer>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-footer\": Footer\n }\n}\n"],"names":["Footer","LitElement","constructor","this","size","render","html","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"0/BAiBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAMgBC,KAAIC,KAAc,GAShD,CAPC,MAAAC,GACE,OAAOC,CAAI,iDAKZ,GAbMN,EAAAO,OAAS,CAACC,EAAgBC,GAKJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6BZ,EAAAa,UAAA,YAAA,GAN/Bb,EAAMU,EAAA,CAD1BI,EAAc,gBACMd,SAAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{_ as t,k as e}from"./custom-element-CDWT-yC_.js";import{n as r}from"./property-DeTTNf1t.js";import{F as i}from"./FormDataController-OUt5L5uC.js";import{S as o}from"./SlotController-BL-tOh6b.js";import{N as s}from"./events-Bv6wNHwJ.js";import"./VisuallyHidden.js";function n(n){class h extends n{constructor(){super(...arguments),this.labelSlot=new o(this,"label"),this.errorSlot=new o(this,"error"),this.hintSlot=new o(this,"hint"),this.formData=new i(this,{value:()=>this.formValue}),this.inputId="input",this.errorId="error",this.hintId="hint",this.label="",this.hideLabel=!1,this.required=!1,this.hideRequired=!1}get formValue(){return this.value}handleInput(t){t.stopPropagation();const e=t.target;this.value=e.value,this.dispatchEvent(new s("input"))}handleChange(t){t.stopPropagation(),this.dispatchEvent(new s("change"))}renderLabel(t){const r=e`<label for="${this.inputId}"><slot name="label">${this.label}</slot><span ?hidden="${!this.required||this.hideRequired}" aria-hidden="true" class="n-required">*</span> ${t}</label><div class="n-caption n-hint" id="${this.hintId}" ?hidden="${!this.hasHint}"><slot name="hint">${this.hint}</slot></div>`;return this.hideLabel?e`<nord-visually-hidden>${r}</nord-visually-hidden>`:e`<div class="n-label-container">${r}</div>`}renderError(){return e`<div class="n-caption n-error" id="${this.errorId}" role="alert" ?hidden="${!this.hasError}"><slot name="error">${this.error}</slot></div>`}getDescribedBy(){const{hasHint:t,hasError:e}=this;return t&&e?`${this.hintId} ${this.errorId}`:t?this.hintId:e?this.errorId:void 0}getInvalid(){return this.hasError?"true":void 0}get hasHint(){return Boolean(this.hint)||this.hintSlot.hasContent}get hasError(){return Boolean(this.error)||this.errorSlot.hasContent}}return t([r({reflect:!0})],h.prototype,"label",void 0),t([r({reflect:!0})],h.prototype,"hint",void 0),t([r({reflect:!0,type:Boolean,attribute:"hide-label"})],h.prototype,"hideLabel",void 0),t([r({reflect:!0})],h.prototype,"placeholder",void 0),t([r({reflect:!0})],h.prototype,"error",void 0),t([r({reflect:!0,type:Boolean})],h.prototype,"required",void 0),t([r({reflect:!0,type:Boolean,attribute:"hide-required"})],h.prototype,"hideRequired",void 0),h}export{n as F};
|
|
2
|
+
//# sourceMappingURL=FormAssociatedMixin-DXVeQVgN.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormAssociatedMixin-
|
|
1
|
+
{"version":3,"file":"FormAssociatedMixin-DXVeQVgN.js","sources":["../src/common/mixins/FormAssociatedMixin.ts"],"sourcesContent":["/* eslint-disable max-classes-per-file */\nimport { html, LitElement, TemplateResult } from \"lit\"\nimport { property } from \"lit/decorators.js\"\nimport { FormDataController } from \"../controllers/FormDataController.js\"\nimport { SlotController } from \"../controllers/SlotController.js\"\nimport { NordEvent } from \"../events.js\"\nimport { InputMixinInterface } from \"./InputMixin.js\"\nimport \"../../visually-hidden/VisuallyHidden.js\"\n\ntype Constructor<T = Record<string, unknown>> = new (...args: any[]) => T\ntype NativeInputElement = HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement\n\nexport declare class FormAssociatedMixinInterface {\n label: string\n required: boolean\n hideRequired: boolean\n hint?: string\n hideLabel: boolean\n placeholder?: string\n error?: string\n\n protected inputId: string\n protected errorId: string\n protected hintId: string\n protected labelSlot: SlotController\n protected hintSlot: SlotController\n protected errorSlot: SlotController\n protected formData: FormDataController\n\n protected get formValue(): string | undefined\n protected get hasError(): boolean\n protected get hasHint(): boolean\n\n protected handleChange(e: Event): void\n protected handleInput(e: Event): void\n protected renderLabel(additionalContent?: TemplateResult): TemplateResult\n protected renderError(): TemplateResult\n protected getDescribedBy(): string | undefined\n protected getInvalid(): \"true\" | undefined\n}\n\nexport function FormAssociatedMixin<T extends Constructor<InputMixinInterface & LitElement>>(superClass: T) {\n // TODO: would be nice if custom elements analyzer could pick up the slot docs from the mixin\n\n /**\n * @slot label - Use when a label requires more than plain text.\n * @slot hint - Use when a hint requires more than plain text.\n * @slot error - Optional slot that holds error text for the input.\n */\n class FormAssociatedElement extends superClass {\n protected labelSlot = new SlotController(this, \"label\")\n protected errorSlot = new SlotController(this, \"error\")\n protected hintSlot = new SlotController(this, \"hint\")\n protected formData = new FormDataController(this, { value: () => this.formValue })\n\n protected get formValue() {\n return this.value\n }\n\n protected inputId = \"input\"\n protected errorId = \"error\"\n protected hintId = \"hint\"\n\n /**\n * Label for the input.\n */\n @property({ reflect: true }) label: string = \"\"\n\n /**\n * Optional hint text to be displayed with the input. Alternatively use the hint slot.\n */\n @property({ reflect: true }) hint?: string\n\n /**\n * Visually hide the label, but still show it to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-label\" }) hideLabel = false\n\n /**\n * Placeholder text to display within the input.\n */\n @property({ reflect: true }) placeholder?: string\n\n /**\n * Optional error to be shown with the input. Alternatively use the error slot.\n */\n @property({ reflect: true }) error?: string\n\n /**\n * Determines whether the input is required or not.\n * An input marked as required will be announced as such to users of assistive technology.\n * When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.\n */\n @property({ reflect: true, type: Boolean }) required = false\n\n /**\n * Visually hide the required indicator, but still show\n * required attribute to assistive technologies like screen readers.\n */\n @property({ reflect: true, type: Boolean, attribute: \"hide-required\" }) hideRequired = false\n\n protected handleInput(e: Event) {\n e.stopPropagation()\n const target = e.target as NativeInputElement\n this.value = target.value\n\n /**\n * Fired as the user types into the input.\n */\n this.dispatchEvent(new NordEvent(\"input\"))\n }\n\n protected handleChange(e: Event) {\n e.stopPropagation()\n\n /**\n * Fired whenever the input's value is changed via user interaction.\n */\n this.dispatchEvent(new NordEvent(\"change\"))\n }\n\n protected renderLabel(additionalContent?: TemplateResult) {\n const label = html`\n <label for=${this.inputId}>\n <slot name=\"label\">${this.label}</slot\n ><span ?hidden=${!this.required || this.hideRequired} aria-hidden=\"true\" class=\"n-required\">*</span>\n ${additionalContent}\n </label>\n\n <div class=\"n-caption n-hint\" id=${this.hintId} ?hidden=${!this.hasHint}>\n <slot name=\"hint\">${this.hint}</slot>\n </div>\n `\n\n return this.hideLabel\n ? html`<nord-visually-hidden>${label}</nord-visually-hidden>`\n : html`<div class=\"n-label-container\">${label}</div>`\n }\n\n protected renderError() {\n return html`\n <div class=\"n-caption n-error\" id=${this.errorId} role=\"alert\" ?hidden=${!this.hasError}>\n <slot name=\"error\">${this.error}</slot>\n </div>\n `\n }\n\n protected getDescribedBy() {\n const { hasHint, hasError } = this\n\n if (hasHint && hasError) {\n return `${this.hintId} ${this.errorId}`\n }\n if (hasHint) {\n return this.hintId\n }\n if (hasError) {\n return this.errorId\n }\n\n return undefined\n }\n\n protected getInvalid() {\n return this.hasError ? \"true\" : undefined\n }\n\n protected get hasHint() {\n return Boolean(this.hint) || this.hintSlot.hasContent\n }\n\n protected get hasError() {\n return Boolean(this.error) || this.errorSlot.hasContent\n }\n }\n\n return FormAssociatedElement as unknown as Constructor<FormAssociatedMixinInterface> & T\n}\n"],"names":["FormAssociatedMixin","superClass","FormAssociatedElement","constructor","this","labelSlot","SlotController","errorSlot","hintSlot","formData","FormDataController","value","formValue","inputId","errorId","hintId","label","hideLabel","required","hideRequired","handleInput","e","stopPropagation","target","dispatchEvent","NordEvent","handleChange","renderLabel","additionalContent","html","hasHint","hint","renderError","hasError","error","getDescribedBy","getInvalid","undefined","Boolean","hasContent","__decorate","property","reflect","prototype","type","attribute"],"mappings":"8QAyCM,SAAUA,EAA6EC,GAQ3F,MAAMC,UAA8BD,EAApC,WAAAE,uBACYC,KAASC,UAAG,IAAIC,EAAeF,KAAM,SACrCA,KAASG,UAAG,IAAID,EAAeF,KAAM,SACrCA,KAAQI,SAAG,IAAIF,EAAeF,KAAM,QACpCA,KAAAK,SAAW,IAAIC,EAAmBN,KAAM,CAAEO,MAAO,IAAMP,KAAKQ,YAM5DR,KAAOS,QAAG,QACVT,KAAOU,QAAG,QACVV,KAAMW,OAAG,OAKUX,KAAKY,MAAW,GAUwBZ,KAASa,WAAG,EAiBrCb,KAAQc,UAAG,EAMiBd,KAAYe,cAAG,CA2ExF,CAvHC,aAAcP,GACZ,OAAOR,KAAKO,KACb,CA4CS,WAAAS,CAAYC,GACpBA,EAAEC,kBACF,MAAMC,EAASF,EAAEE,OACjBnB,KAAKO,MAAQY,EAAOZ,MAKpBP,KAAKoB,cAAc,IAAIC,EAAU,SAClC,CAES,YAAAC,CAAaL,GACrBA,EAAEC,kBAKFlB,KAAKoB,cAAc,IAAIC,EAAU,UAClC,CAES,WAAAE,CAAYC,GACpB,MAAMZ,EAAQa,CAAI,eACHzB,KAAKS,+BACKT,KAAKY,+BACRZ,KAAKc,UAAYd,KAAKe,gEACtCS,8CAG+BxB,KAAKW,qBAAmBX,KAAK0B,8BAC1C1B,KAAK2B,oBAI7B,OAAO3B,KAAKa,UACRY,CAAI,yBAAyBb,2BAC7Ba,CAAI,kCAAkCb,SAC3C,CAES,WAAAgB,GACR,OAAOH,CAAI,sCAC2BzB,KAAKU,mCAAiCV,KAAK6B,gCACxD7B,KAAK8B,oBAG/B,CAES,cAAAC,GACR,MAAML,QAAEA,EAAOG,SAAEA,GAAa7B,KAE9B,OAAI0B,GAAWG,EACN,GAAG7B,KAAKW,UAAUX,KAAKU,UAE5BgB,EACK1B,KAAKW,OAEVkB,EACK7B,KAAKU,aADd,CAKD,CAES,UAAAsB,GACR,OAAOhC,KAAK6B,SAAW,YAASI,CACjC,CAED,WAAcP,GACZ,OAAOQ,QAAQlC,KAAK2B,OAAS3B,KAAKI,SAAS+B,UAC5C,CAED,YAAcN,GACZ,OAAOK,QAAQlC,KAAK8B,QAAU9B,KAAKG,UAAUgC,UAC9C,EAGH,OA9G+BC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA0BxC,EAAAyC,UAAA,aAAA,GAKlBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAqBxC,EAAAyC,UAAA,YAAA,GAK2BH,EAAA,CAApEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,gBAAiC3C,EAAAyC,UAAA,iBAAA,GAKzDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4BxC,EAAAyC,UAAA,mBAAA,GAKpBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBxC,EAAAyC,UAAA,aAAA,GAOCH,EAAA,CAA3CC,EAAS,CAAEC,SAAS,EAAME,KAAMN,WAA2BpC,EAAAyC,UAAA,gBAAA,GAMYH,EAAA,CAAvEC,EAAS,CAAEC,SAAS,EAAME,KAAMN,QAASO,UAAW,mBAAuC3C,EAAAyC,UAAA,oBAAA,GA6EvFzC,CACT"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
class t{constructor(t,s){this.host=t,this.options=s,this._form=null,this.handleFormData=t=>{const{disabled:s,name:o}=this.host;if(s)return;if(!o)return;const i=this.options.value();null!=i&&t.formData.append(o,i)},t.addController(this)}hostConnected(){this.listen(this.host.form)}hostUpdated(){this.listen(this.host.form)}hostDisconnected(){this.cleanup()}listen(t){var s;this._form!==t&&(this.cleanup(),this._form=t,null===(s=this._form)||void 0===s||s.addEventListener("formdata",this.handleFormData))}cleanup(){var t;null===(t=this._form)||void 0===t||t.removeEventListener("formdata",this.handleFormData),this._form=null}}export{t as F};
|
|
2
|
-
//# sourceMappingURL=FormDataController-
|
|
2
|
+
//# sourceMappingURL=FormDataController-OUt5L5uC.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormDataController-OUt5L5uC.js","sources":["../src/common/controllers/FormDataController.ts"],"sourcesContent":["import { ReactiveController, ReactiveControllerHost } from \"lit\"\nimport { InputMixinInterface } from \"../mixins/InputMixin.js\"\n\ntype FormDataOptions = {\n value: () => string | undefined\n}\n\nexport class FormDataController implements ReactiveController {\n private _form: HTMLFormElement | null = null\n\n constructor(\n private host: ReactiveControllerHost & InputMixinInterface,\n private options: FormDataOptions\n ) {\n host.addController(this)\n }\n\n hostConnected() {\n this.listen(this.host.form)\n }\n\n hostUpdated() {\n this.listen(this.host.form)\n }\n\n hostDisconnected() {\n this.cleanup()\n }\n\n private listen(form: HTMLFormElement | null) {\n if (this._form !== form) {\n this.cleanup()\n this._form = form\n this._form?.addEventListener(\"formdata\", this.handleFormData)\n }\n }\n\n private cleanup() {\n this._form?.removeEventListener(\"formdata\", this.handleFormData)\n this._form = null\n }\n\n private handleFormData = (e: FormDataEvent) => {\n const { disabled, name } = this.host\n\n if (disabled) {\n return\n }\n if (!name) {\n return\n }\n\n const value = this.options.value()\n if (value != null) {\n e.formData.append(name, value)\n }\n }\n}\n"],"names":["FormDataController","constructor","host","options","this","_form","handleFormData","e","disabled","name","value","formData","append","addController","hostConnected","listen","form","hostUpdated","hostDisconnected","cleanup","_a","addEventListener","removeEventListener"],"mappings":"MAOaA,EAGX,WAAAC,CACUC,EACAC,GADAC,KAAIF,KAAJA,EACAE,KAAOD,QAAPA,EAJFC,KAAKC,MAA2B,KAkChCD,KAAAE,eAAkBC,IACxB,MAAMC,SAAEA,EAAQC,KAAEA,GAASL,KAAKF,KAEhC,GAAIM,EACF,OAEF,IAAKC,EACH,OAGF,MAAMC,EAAQN,KAAKD,QAAQO,QACd,MAATA,GACFH,EAAEI,SAASC,OAAOH,EAAMC,EACzB,EAzCDR,EAAKW,cAAcT,KACpB,CAED,aAAAU,GACEV,KAAKW,OAAOX,KAAKF,KAAKc,KACvB,CAED,WAAAC,GACEb,KAAKW,OAAOX,KAAKF,KAAKc,KACvB,CAED,gBAAAE,GACEd,KAAKe,SACN,CAEO,MAAAJ,CAAOC,SACTZ,KAAKC,QAAUW,IACjBZ,KAAKe,UACLf,KAAKC,MAAQW,EACH,QAAVI,EAAAhB,KAAKC,aAAK,IAAAe,GAAAA,EAAEC,iBAAiB,WAAYjB,KAAKE,gBAEjD,CAEO,OAAAa,SACI,QAAVC,EAAAhB,KAAKC,aAAK,IAAAe,GAAAA,EAAEE,oBAAoB,WAAYlB,KAAKE,gBACjDF,KAAKC,MAAQ,IACd"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{i as n}from"./custom-element-CDWT-yC_.js";const o=n`:host{--_n-label-color:var(--n-label-color, var(--n-color-text))}.n-caption,::slotted(.n-caption){font-size:var(--n-font-size-s);line-height:var(--n-line-height-caption)}.n-label-container{margin-block-end:var(--n-space-s);display:inline-block}.n-label,::slotted(label),label{display:block!important;color:var(--_n-label-color);font-family:var(--n-font-family);font-size:var(--n-font-size-m);font-weight:var(--n-font-weight-heading)!important;line-height:var(--n-line-height-heading);margin:0!important}.n-hint{padding-block-start:var(--n-space-xs);color:var(--n-color-text-weaker)}:host([size="s"]) ::slotted(label),:host([size="s"]) :is(label,.n-label){font-size:var(--n-font-size-s)}.n-error{margin-block-start:var(--n-space-s);color:var(--n-color-text-error)}.n-required{color:var(--n-color-status-danger);margin-inline-start:var(--n-space-xs)}`;export{o as s};
|
|
2
|
+
//# sourceMappingURL=FormField-Cl7HHI9A.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FormField-Cl7HHI9A.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/lib/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as e,_ as r,
|
|
1
|
+
import{i as e,_ as r,h as a,k as n,t as o}from"./custom-element-CDWT-yC_.js";import{n as d}from"./property-DeTTNf1t.js";import{S as s}from"./SlotController-BL-tOh6b.js";import{s as t}from"./Component-BuB0QgQM.js";import"./EventController-BG-WpaBb.js";const l=e`:host{--_n-header-box-shadow:var(--n-box-shadow-header);--_n-header-block-size:var(--n-header-block-size, var(--n-space-xxl));--_n-header-padding-block:var(--n-space-m);--_n-header-padding-inline:var(--n-space-l);color:var(--n-color-text)}::slotted(*){margin:0!important}::slotted(a){color:var(--n-color-text-link);text-decoration:underline}::slotted(a:hover){text-decoration:none}.n-header,.n-header-end{display:flex;flex-flow:row;align-items:center;gap:var(--n-space-m)}.n-header{padding:var(--_n-header-padding-block) var(--_n-header-padding-inline);padding-inline-start:calc(var(--_n-header-padding-inline) + var(--_n-header-gutter,0px));background-color:var(--n-color-surface);border-block-end:1px solid var(--n-color-border);box-shadow:var(--_n-header-box-shadow);block-size:var(--_n-header-block-size)}.n-header-end{margin-inline-start:auto;gap:var(--n-space-s)}:host([size="s"]){--_n-header-block-size:var(--n-size-top-bar);--_n-header-padding-block:var(--n-space-s)}`;let i=class extends a{constructor(){super(...arguments),this.endSlot=new s(this,"end"),this.size="m"}render(){return n`<header class="n-header"><slot></slot><div class="n-header-end" ?hidden="${this.endSlot.isEmpty}"><slot name="end"></slot></div></header>`}};i.styles=[t,l],r([d({reflect:!0})],i.prototype,"size",void 0),i=r([o("nord-header")],i);var c=i;export{c as default};
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/lib/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, \"end\")\n\n /**\n * Controls the size of the header component.\n */\n @property({ reflect: true }) size: \"m\" | \"s\" = \"m\"\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-header\": Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../src/header/Header.ts"],"sourcesContent":["import { LitElement, html } from \"lit\"\nimport { customElement, property } from \"lit/decorators.js\"\nimport { SlotController } from \"../common/controllers/SlotController.js\"\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Header.css\"\n\n/**\n * The header is a block of designated space for labelling the currently\n * viewed context as well as providing primary actions.\n *\n * @status ready\n * @category structure\n * @slot - The header content.\n * @slot end - Optional slot for buttons, toggles, etc.\n */\n@customElement(\"nord-header\")\nexport default class Header extends LitElement {\n static styles = [componentStyle, style]\n\n private endSlot = new SlotController(this, \"end\")\n\n /**\n * Controls the size of the header component.\n */\n @property({ reflect: true }) size: \"m\" | \"s\" = \"m\"\n\n render() {\n return html`\n <header class=\"n-header\">\n <slot></slot>\n <div class=\"n-header-end\" ?hidden=${this.endSlot.isEmpty}>\n <slot name=\"end\"></slot>\n </div>\n </header>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-header\": Header\n }\n}\n"],"names":["Header","LitElement","constructor","this","endSlot","SlotController","size","render","html","isEmpty","styles","componentStyle","style","__decorate","property","reflect","prototype","customElement"],"mappings":"stCAgBe,IAAMA,EAAN,cAAqBC,EAArB,WAAAC,uBAGLC,KAAOC,QAAG,IAAIC,EAAeF,KAAM,OAKdA,KAAIG,KAAc,GAYhD,CAVC,MAAAC,GACE,OAAOC,CAAI,4EAG6BL,KAAKC,QAAQK,kDAKtD,GAlBMT,EAAAU,OAAS,CAACC,EAAgBC,GAOJC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA6Bf,EAAAgB,UAAA,YAAA,GAR/BhB,EAAMa,EAAA,CAD1BI,EAAc,gBACMjB,SAAAA"}
|
package/lib/Icon.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{D as i,R as e,i as s,_ as t,h as r,k as o,t as n}from"./custom-element-CDWT-yC_.js";import{n as a}from"./property-DeTTNf1t.js";import{r as c}from"./state-BFYKuryf.js";import{t as l}from"./if-defined-C2kZHWU2.js";import{i as h,t as v,e as m}from"./directive-DQ0jBES2.js";import{c as d}from"./cond-Cuc_PMkN.js";import{IconManager as p}from"./IconManager.js";import{s as z}from"./Component-BuB0QgQM.js";import{o as u}from"./observe-D0n0zOfU.js";
|
|
2
2
|
/**
|
|
3
3
|
* @license
|
|
4
4
|
* Copyright 2017 Google LLC
|
|
5
5
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
6
|
-
*/class
|
|
6
|
+
*/class f extends h{constructor(e){if(super(e),this.it=i,e.type!==v.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(s){if(s===i||null==s)return this._t=void 0,this.it=s;if(s===e)return s;if("string"!=typeof s)throw Error(this.constructor.directiveName+"() called with a non-string value");if(s===this.it)return this._t;this.it=s;const t=[s];return t.raw=t,this._t={_$litType$:this.constructor.resultType,strings:t,values:[]}}}f.directiveName="unsafeHTML",f.resultType=1;const g=m(f),y=s`:host{--_n-icon-size:var(--n-icon-size, var(--n-size-icon-m));display:inline-block;block-size:var(--_n-icon-size);inline-size:var(--_n-icon-size);min-inline-size:var(--_n-icon-size)}:host([size=xxs]){--_n-icon-size:var(--n-size-icon-xxs)}:host([size=xs]){--_n-icon-size:var(--n-size-icon-xs)}:host([size="s"]){--_n-icon-size:var(--n-size-icon-s)}:host([size="l"]){--_n-icon-size:var(--n-size-icon-l)}:host([size=xl]){--_n-icon-size:var(--n-size-icon-xl)}:host([size=xxl]){--_n-icon-size:var(--n-size-icon-xxl)}.n-icon{display:block}svg{display:block}`;var x;let _=x=class extends r{constructor(){super(...arguments),this.name="",this.svg=""}static registerResolver(i){this.manager.resolver=i}static registerIcon(i,e){return this.manager.registerIcon(i,e)}render(){return o`<div role="${d(this.label,"img")}" style="${d(this.color,`color:${this.color}`)}" aria-label="${l(this.label)}"><slot aria-hidden="true"></slot><div aria-hidden="true">${g(this.svg)}</div></div>`}handleNameChange(){this.name?x.manager.resolve(this.name,(i=>{this.svg=i})):this.svg=""}};_.styles=[z,y],_.manager=new p,t([a({reflect:!0})],_.prototype,"name",void 0),t([a({reflect:!0})],_.prototype,"size",void 0),t([a({reflect:!0})],_.prototype,"color",void 0),t([a({reflect:!0})],_.prototype,"label",void 0),t([c()],_.prototype,"svg",void 0),t([u("name")],_.prototype,"handleNameChange",null),_=x=t([n("nord-icon")],_);var b=_;export{b as default};
|
|
7
7
|
//# sourceMappingURL=Icon.js.map
|
package/lib/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sources":["../node_modules/lit
|
|
1
|
+
{"version":3,"file":"Icon.js","sources":["../node_modules/lit-html/directives/unsafe-html.js","../src/icon/Icon.ts"],"sourcesContent":["import{nothing as D,noChange as R}from\"../lit-html.js\";import{Directive as i,PartType as t,directive as e}from\"../directive.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */class le extends i{constructor(i){if(super(i),this.it=D,i.type!==t.CHILD)throw Error(this.constructor.directiveName+\"() can only be used in child bindings\")}render(t){if(t===D||null==t)return this._t=void 0,this.it=t;if(t===R)return t;if(\"string\"!=typeof t)throw Error(this.constructor.directiveName+\"() called with a non-string value\");if(t===this.it)return this._t;this.it=t;const i=[t];return i.raw=i,this._t={_$litType$:this.constructor.resultType,strings:i,values:[]}}}le.directiveName=\"unsafeHTML\",le.resultType=1;const ae=e(le);export{le as UnsafeHTMLDirective,ae as unsafeHTML};\n//# sourceMappingURL=unsafe-html.js.map\n","import { html, LitElement } from \"lit\"\nimport { customElement, property, state } from \"lit/decorators.js\"\nimport { ifDefined } from \"lit/directives/if-defined.js\"\nimport { unsafeHTML } from \"lit/directives/unsafe-html.js\"\nimport { cond } from \"../common/directives/cond.js\"\nimport { IconManager, IconResolver } from \"./IconManager.js\"\n\nimport componentStyle from \"../common/styles/Component.css\"\nimport style from \"./Icon.css\"\nimport { observe } from \"../common/decorators/observe.js\"\n\n/**\n * Icons are used to provide additional meaning or in places where text label doesn’t fit.\n * Icon component allows you to display an icon from the Nordicons library.\n *\n * @status ready\n * @category image\n * @slot - The default slot used for placing a custom SVG icon.\n */\n@customElement(\"nord-icon\")\nexport default class Icon extends LitElement {\n static styles = [componentStyle, style]\n\n private static manager = new IconManager()\n\n /**\n * Register a custom icon resolver, which accepts the icon name as an parameter, and returns an SVG string.\n * Can return a string synchronously, or a promise of a string.\n * By default, will load icons from the Nord CDN.\n * @param resolver The resolver function to register.\n */\n static registerResolver(resolver: IconResolver) {\n this.manager.resolver = resolver\n }\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param icon An object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * This is intended to be used in cases where you import an icon's entire ES module and register it directly.\n */\n static registerIcon(icon: { title: string; default: string }): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param name The name of the icon to be registered.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(name: string, icon: string): void\n\n /**\n * Register an individual icon so it can be rendered synchronously, to avoid loading over the network.\n * @param iconOrName The name of the icon to be registered or an object representing the icon to be registered, where \"title\" is the icon's name, and \"default\" is the SVG string.\n * @param icon The SVG string for the icon.\n */\n static registerIcon(iconOrName: string | { title: string; default: string }, icon?: string) {\n return this.manager.registerIcon(iconOrName, icon)\n }\n\n /**\n * The name of the icon to display, as defined by [nordicons](/nordicons/).\n */\n @property({ reflect: true }) name: string = \"\"\n\n /**\n * The size of the icon.\n * @default \"m\"\n */\n @property({ reflect: true }) size?: \"xxs\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\" | \"xxl\"\n\n /**\n * The color of the icon.\n * Can accept any valid CSS color value, including custom properties.\n */\n @property({ reflect: true }) color?: string\n\n /**\n * An accessible label for the icon.\n * If no label is supplied, the icon is hidden from assistive technology.\n */\n @property({ reflect: true }) label?: string\n\n @state() private svg: string = \"\"\n\n render() {\n // if a label is supplied, we give the div a role of img.\n // without this we could not use aria-label, since it is only valid on elements of certain roles.\n // we always hide the inner svg, since the svg does not have any text/title/label itself.\n return html`\n <div\n role=${cond(this.label, \"img\")}\n style=${cond(this.color, `color:${this.color}`)}\n aria-label=${ifDefined(this.label)}\n >\n <slot aria-hidden=\"true\"></slot>\n <div aria-hidden=\"true\">${unsafeHTML(this.svg)}</div>\n </div>\n `\n }\n\n @observe(\"name\")\n protected handleNameChange() {\n if (!this.name) {\n this.svg = \"\"\n return\n }\n\n Icon.manager.resolve(this.name, svg => {\n this.svg = svg\n })\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n \"nord-icon\": Icon\n }\n}\n"],"names":["le","i","constructor","super","this","it","D","type","t","CHILD","Error","directiveName","render","_t","R","raw","_$litType$","resultType","strings","values","ae","e","Icon","Icon_1","LitElement","name","svg","registerResolver","resolver","manager","registerIcon","iconOrName","icon","html","cond","label","color","ifDefined","unsafeHTML","handleNameChange","resolve","styles","componentStyle","style","IconManager","__decorate","property","reflect","prototype","state","observe","customElement"],"mappings":";;;;;GAKG,MAAMA,UAAWC,EAAE,WAAAC,CAAYD,GAAG,GAAGE,MAAMF,GAAGG,KAAKC,GAAGC,EAAEL,EAAEM,OAAOC,EAAEC,MAAM,MAAMC,MAAMN,KAAKF,YAAYS,cAAc,wCAAwC,CAAC,MAAAC,CAAOJ,GAAG,GAAGA,IAAIF,GAAG,MAAME,EAAE,OAAOJ,KAAKS,QAAG,EAAOT,KAAKC,GAAGG,EAAE,GAAGA,IAAIM,EAAE,OAAON,EAAE,GAAG,iBAAiBA,EAAE,MAAME,MAAMN,KAAKF,YAAYS,cAAc,qCAAqC,GAAGH,IAAIJ,KAAKC,GAAG,OAAOD,KAAKS,GAAGT,KAAKC,GAAGG,EAAE,MAAMP,EAAE,CAACO,GAAG,OAAOP,EAAEc,IAAId,EAAEG,KAAKS,GAAG,CAACG,WAAWZ,KAAKF,YAAYe,WAAWC,QAAQjB,EAAEkB,OAAO,GAAG,EAAEnB,EAAGW,cAAc,aAAaX,EAAGiB,WAAW,EAAE,MAAMG,EAAGC,EAAErB,qjBCevgB,IAAMsB,EAAIC,EAAV,cAAmBC,EAAnB,WAAAtB,uBAyCgBE,KAAIqB,KAAW,GAoB3BrB,KAAGsB,IAAW,EA6BhC,CA/EC,uBAAOC,CAAiBC,GACtBxB,KAAKyB,QAAQD,SAAWA,CACzB,CAqBD,mBAAOE,CAAaC,EAAyDC,GAC3E,OAAO5B,KAAKyB,QAAQC,aAAaC,EAAYC,EAC9C,CA2BD,MAAApB,GAIE,OAAOqB,CAAI,cAEAC,EAAK9B,KAAK+B,MAAO,kBAChBD,EAAK9B,KAAKgC,MAAO,SAAShC,KAAKgC,yBAC1BC,EAAUjC,KAAK+B,mEAGFG,EAAWlC,KAAKsB,kBAG/C,CAGS,gBAAAa,GACHnC,KAAKqB,KAKVF,EAAKM,QAAQW,QAAQpC,KAAKqB,MAAMC,IAC9BtB,KAAKsB,IAAMA,CAAG,IALdtB,KAAKsB,IAAM,EAOd,GAxFMJ,EAAAmB,OAAS,CAACC,EAAgBC,GAElBrB,EAAAO,QAAU,IAAIe,EAsCAC,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAyBzB,EAAA0B,UAAA,YAAA,GAMjBH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAA4DzB,EAAA0B,UAAA,YAAA,GAMpDH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAMdH,EAAA,CAA5BC,EAAS,CAAEC,SAAS,KAAsBzB,EAAA0B,UAAA,aAAA,GAE1BH,EAAA,CAAhBI,KAAgC3B,EAAA0B,UAAA,WAAA,GAmBvBH,EAAA,CADTK,EAAQ,SAUR5B,EAAA0B,UAAA,mBAAA,MAzFkB1B,EAAIC,EAAAsB,EAAA,CADxBM,EAAc,cACM7B,SAAAA","x_google_ignoreList":[0]}
|
package/lib/IconManager.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.
|
|
1
|
+
const e=e=>fetch(`https://nordcdn.net/ds/icons/3.5.0/assets/${e}.svg`).then((t=>{if(!t.ok)throw new TypeError(`NORD: unknown icon: '${e}'`);return t.text()}));class t{constructor(){this.cache=new Map,this.resolver=e}resolve(e,t){let r=this.cache.get(e);"string"!=typeof r?(r||(r=this.resolver(e).catch((()=>"")).then((t=>(this.cache.set(e,t),t))),this.cache.set(e,r)),r.then(t)):t(r)}registerIcon(e,t){let r,s;if("string"==typeof e?(r=e,s=t):(r=e.title,s=e.default),!r)throw new Error("name is required when registering an icon");if(!s)throw new Error("icon must not be empty");this.cache.set(r,s)}clear(){this.cache.clear()}}export{t as IconManager};
|
|
2
2
|
//# sourceMappingURL=IconManager.js.map
|
package/lib/Input.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{i as t,
|
|
1
|
+
import{i as t,k as n,D as e,_ as o,t as i,h as r}from"./custom-element-CDWT-yC_.js";import{n as s}from"./property-DeTTNf1t.js";import{e as a}from"./query-hiZs21fO.js";import{t as d}from"./if-defined-C2kZHWU2.js";import{R as l}from"./class-map-BQZJmA_8.js";import{K as p}from"./ref-BYkj-TPb.js";import{s as c}from"./style-map-VR90KNpY.js";import{F as u}from"./FocusableMixin-DriuCNli.js";import{F as m}from"./FormAssociatedMixin-DXVeQVgN.js";import{I as h}from"./InputMixin-B-nPfhjc.js";import{R as v,s as b}from"./TextField-CmHW8rL5.js";import{A as f}from"./AutocompleteMixin-Dk_gVU09.js";import{T as g}from"./TextSelectableMixin-B_mtmFv0.js";import{S as w}from"./SizeMixin-DW6qUBEN.js";import{s as y}from"./Component-BuB0QgQM.js";import{s as z}from"./FormField-Cl7HHI9A.js";import{D as x}from"./DirectionController-DiJ1Su1I.js";import{c as j}from"./cond-Cuc_PMkN.js";import $ from"./Icon.js";import{N as S}from"./events-Bv6wNHwJ.js";import"./directive-DQ0jBES2.js";import"./FormDataController-OUt5L5uC.js";import"./SlotController-BL-tOh6b.js";import"./EventController-BG-WpaBb.js";import"./VisuallyHidden.js";import"./state-BFYKuryf.js";import"./IconManager.js";import"./observe-D0n0zOfU.js";var _=Object.freeze({__proto__:null,default:'<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="m16.03 14.61c1.23-1.54 1.97-3.49 1.97-5.61 0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.12 0 4.07-.74 5.61-1.97l3.97 3.97 1.41-1.41-3.97-3.97zm-7.03 1.39c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7z" fill="currentColor"/></svg>',tags:"nordicon navigation menu find search magnifying glass",title:"navigation-search"});const k=t`.n-input::-webkit-search-cancel-button,.n-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.n-input-container{font-size:var(--n-font-size-m);display:grid;grid-template-columns:max-content 1fr max-content}.n-input{grid-area:1/1/2/4;padding-inline-start:var(--_n-input-start-inline-size,var(--_n-input-padding-inline));padding-inline-end:var(--_n-input-end-inline-size,var(--_n-input-padding-inline))}slot[name=end],slot[name=start]{pointer-events:none;display:flex;align-items:center;color:var(--n-color-icon)}:host([disabled]) slot:is([name=start],[name=end]){color:var(--n-color-text-weakest)}slot[name=start]{grid-area:1/1/2/2;order:1}slot[name=end]{grid-area:1/3/2/4}.is-rtl slot[name=end],slot[name=start]{--n-button-border-radius:var(--n-border-radius-s) 0 0 var(--n-border-radius-s)}.is-rtl slot[name=start],slot[name=end]{--n-button-border-radius:0 var(--n-border-radius-s) var(--n-border-radius-s) 0}:is([name=start],[name=end])::slotted(*){font-size:var(--_n-input-font-size)}[name=start]::slotted(*),nord-icon{margin-inline-start:var(--_n-input-padding-inline)!important;margin-inline-end:calc(var(--_n-input-padding-inline)/ 2)!important}[name=end]::slotted(*){margin-inline-start:calc(var(--_n-input-padding-inline)/ 2)!important;margin-inline-end:var(--_n-input-padding-inline)!important}[name=start]::slotted(:is(nord-button, nord-dropdown)){margin-inline-start:0!important}[name=end]::slotted(:is(nord-button, nord-dropdown)){margin-inline-end:0!important}nord-icon{--_n-input-icon-color:var(--n-input-icon-color, var(--n-color-icon));color:var(--_n-input-icon-color)}::slotted(:is(nord-button:not([disabled]), nord-dropdown)){pointer-events:auto;position:relative}::slotted(nord-button:not([disabled],:focus)),::slotted(nord-dropdown:not(:focus-within)){--n-button-box-shadow:none}::slotted(nord-button:active),::slotted(nord-dropdown:active:not([open])){inset-block-start:-1px}::slotted(nord-button[disabled]){--n-button-color:var(--n-color-text-weaker);-webkit-text-fill-color:var(--n-button-color);opacity:.8}.n-input-container:hover:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)),.n-label-container:hover~.n-input-container:not(:focus-within) ::slotted(:is(nord-button:not([disabled]),nord-dropdown)){--n-button-border-color:var(--n-input-border-color, var(--n-color-border-hover))}.n-input-container:focus-within ::slotted(:is(nord-button,nord-dropdown:not([open]))){--n-button-border-color:var(--n-input-border-color, var(--n-color-accent))}:host([error]) .n-input-container ::slotted(:is(nord-button:not(:focus),nord-dropdown:not(:focus-within),nord-dropdown[open])){--n-button-border-color:var(--n-input-border-color, var(--n-color-status-danger))}:host([size="s"]) ::slotted(nord-button){--_n-button-padding-inline:calc(var(--n-space-s) * 1.4)}:host{--_n-input-icon-size:var(--n-size-icon-s)}:host([size="s"]){--_n-input-icon-size:var(--n-size-icon-xs)}:host([size="l"]){--_n-input-icon-size:var(--n-size-icon-m)}::slotted(nord-icon:not([size])),nord-icon{--_n-icon-size:var(--_n-input-icon-size)}:host([type=unit]) :is(.n-input-container,.n-input){--_n-input-text-align:var(--n-input-text-align, end);font-family:var(--n-font-family-code)!important}:host([type=button]) :is(.n-input-container,.n-input){cursor:pointer}`;class F{constructor(t,n){this.target=n,this.hadFirstUpdate=!1,t.addController(this),this.observer=new ResizeObserver((([n])=>{const[e]=n.borderBoxSize;this.borderBoxSize=e,t.requestUpdate()}))}get inlineSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.inlineSize}get blockSize(){var t;return null===(t=this.borderBoxSize)||void 0===t?void 0:t.blockSize}hostUpdated(){this.hadFirstUpdate||(this.observer.observe(this.target()),this.hadFirstUpdate=!0)}hostConnected(){this.hadFirstUpdate&&this.observer.observe(this.target())}hostDisconnected(){this.observer.disconnect()}}$.registerIcon(_);const C=t=>t?`${t}px`:void 0;let I=class extends(w(m(f(v(g(h(u(r)))))))){constructor(){super(...arguments),this.startObserver=new F(this,(()=>this.startSlot)),this.endObserver=new F(this,(()=>this.endSlot)),this.direction=new x(this),this.type="text",this.expand=!1,this.disallowPattern=void 0,this.handleInputChange=t=>{const n=t.target;this.disallowPattern&&function(t,n){const{value:e}=t,o=t.selectionStart,i=e.slice(0,o),r=e.slice(o,e.length),s=i.replace(n,""),a=s+r.replace(n,""),d=s.length;t.value=a,t.selectionStart=d,t.selectionEnd=d}(n,new RegExp(this.disallowPattern,"g")),this.handleInput(t)}}render(){var t;const o="number"===this.type;return n`${this.renderLabel()}<div class="${l({"n-input-container":!0,"is-rtl":"rtl"===this.direction.dir})}" style="${c({"--_n-input-start-inline-size":C(this.startObserver.inlineSize),"--_n-input-end-inline-size":C(this.endObserver.inlineSize)})}"><slot name="start">${"search"===this.type?n`<nord-icon name="navigation-search"></nord-icon>`:e}</slot><input ${p(this.textSelectableRef)} ${p(this.focusableRef)} id="${this.inputId}" class="n-input" type="${o||"unit"===this.type?"text":this.type}" inputmode="${j(o,"numeric")}" pattern="${j(o,"[0-9]*")}" ?disabled="${this.disabled}" ?required="${this.required}" ?readonly="${this.readonly}" name="${d(this.name)}" .value="${null!==(t=this.value)&&void 0!==t?t:""}" placeholder="${d(this.placeholder)}" @input="${this.handleInputChange}" @change="${this.handleChange}" @keydown="${this.handleKeydown}" @select="${this.handleSelect}" aria-describedby="${d(this.getDescribedBy())}" aria-invalid="${d(this.getInvalid())}" spellcheck="false" autocomplete="${this.autocomplete}"><slot name="end"></slot></div>${this.renderError()}`}handleKeydown(t){if("Enter"!==t.key)return;const{form:n}=this;if(n){const t=function(t){let n=t.querySelector('button[type="submit"]');!n&&t.id&&(n=t.getRootNode().querySelector(`button[form=${t.id}]`));return n}(n);setTimeout((()=>null==t?void 0:t.click()),0)}}handleSelect(t){t.stopPropagation(),this.dispatchEvent(new S("select"))}};I.styles=[y,z,b,k],o([a("slot[name='start']")],I.prototype,"startSlot",void 0),o([a("slot[name='end']")],I.prototype,"endSlot",void 0),o([s({reflect:!0})],I.prototype,"type",void 0),o([s({reflect:!0,type:Boolean})],I.prototype,"expand",void 0),o([s({reflect:!0,attribute:"disallow-pattern"})],I.prototype,"disallowPattern",void 0),I=o([i("nord-input")],I);var q=I;export{q as default};
|
|
2
2
|
//# sourceMappingURL=Input.js.map
|