@nldd/design-system 0.8.63 → 0.8.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/styles/{slotted-reset.d.ts → style-resets.d.ts} +1 -1
- package/dist/assets/styles/style-resets.d.ts.map +1 -0
- package/dist/assets/styles/{slotted-reset.fixtures.d.ts → style-resets.fixtures.d.ts} +4 -4
- package/dist/assets/styles/style-resets.fixtures.d.ts.map +1 -0
- package/dist/assets/styles/{slotted-reset.fixtures.js → style-resets.fixtures.js} +4 -4
- package/dist/assets/styles/style-resets.fixtures.js.map +1 -0
- package/dist/assets/styles/{slotted-reset.js → style-resets.js} +1 -1
- package/dist/assets/styles/style-resets.js.map +1 -0
- package/dist/components/actions/button/button.styles.js +7 -7
- package/dist/components/actions/button/button.styles.js.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.d.ts.map +1 -1
- package/dist/components/actions/button-bar/button-bar.styles.js +3 -0
- package/dist/components/actions/button-bar/button-bar.styles.js.map +1 -1
- package/dist/components/actions/button-group/button-group.styles.d.ts.map +1 -1
- package/dist/components/actions/button-group/button-group.styles.js +3 -0
- package/dist/components/actions/button-group/button-group.styles.js.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.d.ts.map +1 -1
- package/dist/components/actions/icon-button/icon-button.styles.js +4 -1
- package/dist/components/actions/icon-button/icon-button.styles.js.map +1 -1
- package/dist/components/actions/menu/menu.styles.d.ts.map +1 -1
- package/dist/components/actions/menu/menu.styles.js +4 -1
- package/dist/components/actions/menu/menu.styles.js.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.d.ts.map +1 -1
- package/dist/components/actions/split-button/split-button.styles.js +4 -1
- package/dist/components/actions/split-button/split-button.styles.js.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.d.ts.map +1 -1
- package/dist/components/actions/toolbar/toolbar.styles.js +4 -1
- package/dist/components/actions/toolbar/toolbar.styles.js.map +1 -1
- package/dist/components/components.js +31 -30
- package/dist/components/content/blockquote/blockquote.styles.d.ts.map +1 -1
- package/dist/components/content/blockquote/blockquote.styles.js +4 -1
- package/dist/components/content/blockquote/blockquote.styles.js.map +1 -1
- package/dist/components/content/byline/byline.styles.d.ts.map +1 -1
- package/dist/components/content/byline/byline.styles.js +4 -1
- package/dist/components/content/byline/byline.styles.js.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.d.ts.map +1 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js +4 -1
- package/dist/components/content/code-viewer/code-viewer.styles.js.map +1 -1
- package/dist/components/content/icon/icon-aliases.js +1 -1
- package/dist/components/content/icon/icon-aliases.js.map +1 -1
- package/dist/components/content/icon/icon.styles.d.ts.map +1 -1
- package/dist/components/content/icon/icon.styles.js +3 -0
- package/dist/components/content/icon/icon.styles.js.map +1 -1
- package/dist/components/content/image/image.styles.d.ts.map +1 -1
- package/dist/components/content/image/image.styles.js +4 -1
- package/dist/components/content/image/image.styles.js.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.d.ts.map +1 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js +4 -1
- package/dist/components/content/keyboard-shortcut/keyboard-shortcut.styles.js.map +1 -1
- package/dist/components/content/tag/tag.styles.d.ts.map +1 -1
- package/dist/components/content/tag/tag.styles.js +4 -1
- package/dist/components/content/tag/tag.styles.js.map +1 -1
- package/dist/components/content/title/title.styles.d.ts.map +1 -1
- package/dist/components/content/title/title.styles.js +4 -1
- package/dist/components/content/title/title.styles.js.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.d.ts.map +1 -1
- package/dist/components/content/tooltip/tooltip.styles.js +4 -1
- package/dist/components/content/tooltip/tooltip.styles.js.map +1 -1
- package/dist/components/forms/form-actions/form-actions.styles.d.ts.map +1 -1
- package/dist/components/forms/form-actions/form-actions.styles.js +3 -0
- package/dist/components/forms/form-actions/form-actions.styles.js.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.d.ts.map +1 -1
- package/dist/components/forms/form-field/form-field.styles.js +4 -1
- package/dist/components/forms/form-field/form-field.styles.js.map +1 -1
- package/dist/components/{index-BVaijKe_.js → index-BNhqNvDd.js} +3672 -2673
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox/checkbox.styles.js +3 -0
- package/dist/components/inputs/checkbox/checkbox.styles.js.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js +4 -1
- package/dist/components/inputs/checkbox-field/checkbox-field.styles.js.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.d.ts.map +1 -1
- package/dist/components/inputs/code-editor/code-editor.styles.js +4 -1
- package/dist/components/inputs/code-editor/code-editor.styles.js.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.d.ts.map +1 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js +4 -1
- package/dist/components/inputs/combo-box/combo-box.styles.js.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.d.ts.map +1 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js +4 -1
- package/dist/components/inputs/dropdown/dropdown.styles.js.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js +4 -1
- package/dist/components/inputs/multi-line-text-field/multi-line-text-field.styles.js.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/number-field/number-field.styles.js +4 -1
- package/dist/components/inputs/number-field/number-field.styles.js.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/password-field/password-field.styles.js +4 -1
- package/dist/components/inputs/password-field/password-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button/radio-button.styles.js +3 -0
- package/dist/components/inputs/radio-button/radio-button.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js +4 -1
- package/dist/components/inputs/radio-button-field/radio-button-field.styles.js.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.d.ts.map +1 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js +4 -1
- package/dist/components/inputs/radio-button-group/radio-button-group.styles.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.styles.js +13 -1
- package/dist/components/inputs/search-field/search-field.styles.js.map +1 -1
- package/dist/components/inputs/search-field/search-field.template.d.ts.map +1 -1
- package/dist/components/inputs/search-field/search-field.template.js +47 -39
- package/dist/components/inputs/search-field/search-field.template.js.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.d.ts.map +1 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js +4 -1
- package/dist/components/inputs/segmented-control/segmented-control.styles.js.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.d.ts.map +1 -1
- package/dist/components/inputs/stepper/stepper.styles.js +3 -0
- package/dist/components/inputs/stepper/stepper.styles.js.map +1 -1
- package/dist/components/inputs/switch/switch.styles.d.ts.map +1 -1
- package/dist/components/inputs/switch/switch.styles.js +3 -0
- package/dist/components/inputs/switch/switch.styles.js.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/switch-field/switch-field.styles.js +4 -1
- package/dist/components/inputs/switch-field/switch-field.styles.js.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.d.ts.map +1 -1
- package/dist/components/inputs/text-field/text-field.styles.js +4 -1
- package/dist/components/inputs/text-field/text-field.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js +4 -1
- package/dist/components/inputs/toggle-button/toggle-button.styles.js.map +1 -1
- package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.d.ts.map +1 -1
- package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js +3 -0
- package/dist/components/inputs/toggle-button-group/toggle-button-group.styles.js.map +1 -1
- package/dist/components/inputs/token/token.styles.d.ts.map +1 -1
- package/dist/components/inputs/token/token.styles.js +4 -1
- package/dist/components/inputs/token/token.styles.js.map +1 -1
- package/dist/components/layout/app-view/app-view.styles.d.ts.map +1 -1
- package/dist/components/layout/app-view/app-view.styles.js +3 -0
- package/dist/components/layout/app-view/app-view.styles.js.map +1 -1
- package/dist/components/layout/box/box.styles.d.ts.map +1 -1
- package/dist/components/layout/box/box.styles.js +3 -0
- package/dist/components/layout/box/box.styles.js.map +1 -1
- package/dist/components/layout/card/card.d.ts +28 -2
- package/dist/components/layout/card/card.d.ts.map +1 -1
- package/dist/components/layout/card/card.i18n.d.ts +5 -0
- package/dist/components/layout/card/card.i18n.d.ts.map +1 -0
- package/dist/components/layout/card/card.i18n.js +4 -0
- package/dist/components/layout/card/card.i18n.js.map +1 -0
- package/dist/components/layout/card/card.js +54 -2
- package/dist/components/layout/card/card.js.map +1 -1
- package/dist/components/layout/card/card.styles.d.ts.map +1 -1
- package/dist/components/layout/card/card.styles.js +20 -0
- package/dist/components/layout/card/card.styles.js.map +1 -1
- package/dist/components/layout/card/card.template.d.ts.map +1 -1
- package/dist/components/layout/card/card.template.js +17 -1
- package/dist/components/layout/card/card.template.js.map +1 -1
- package/dist/components/layout/collection/collection.d.ts +5 -5
- package/dist/components/layout/collection/collection.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.js +4 -4
- package/dist/components/layout/collection/collection.styles.d.ts.map +1 -1
- package/dist/components/layout/collection/collection.styles.js +5 -2
- package/dist/components/layout/collection/collection.styles.js.map +1 -1
- package/dist/components/layout/container/container.d.ts +7 -3
- package/dist/components/layout/container/container.d.ts.map +1 -1
- package/dist/components/layout/container/container.js +15 -3
- package/dist/components/layout/container/container.js.map +1 -1
- package/dist/components/layout/container/container.styles.d.ts.map +1 -1
- package/dist/components/layout/container/container.styles.js +42 -1
- package/dist/components/layout/container/container.styles.js.map +1 -1
- package/dist/components/layout/divider/divider.styles.d.ts.map +1 -1
- package/dist/components/layout/divider/divider.styles.js +3 -0
- package/dist/components/layout/divider/divider.styles.js.map +1 -1
- package/dist/components/layout/page/page.styles.d.ts.map +1 -1
- package/dist/components/layout/page/page.styles.js +3 -0
- package/dist/components/layout/page/page.styles.js.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.d.ts.map +1 -1
- package/dist/components/layout/page-footer/page-footer.styles.js +4 -1
- package/dist/components/layout/page-footer/page-footer.styles.js.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js +3 -0
- package/dist/components/layout/page-sections/full-bleed-section/full-bleed-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.d.ts +25 -5
- package/dist/components/layout/page-sections/hero/hero.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.js +60 -11
- package/dist/components/layout/page-sections/hero/hero.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.styles.js +15 -4
- package/dist/components/layout/page-sections/hero/hero.styles.js.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.template.d.ts.map +1 -1
- package/dist/components/layout/page-sections/hero/hero.template.js +13 -1
- package/dist/components/layout/page-sections/hero/hero.template.js.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js +3 -0
- package/dist/components/layout/page-sections/one-half-one-half-section/one-half-one-half-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js +3 -0
- package/dist/components/layout/page-sections/one-third-two-thirds-section/one-third-two-thirds-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts +119 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts +6 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js +5 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.i18n.js.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js +219 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.js.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts +2 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js +157 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.styles.js.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts +4 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts.map +1 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js +57 -0
- package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.js.map +1 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js +3 -0
- package/dist/components/layout/page-sections/simple-section/simple-section.styles.js.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.d.ts.map +1 -1
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js +3 -0
- package/dist/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.js.map +1 -1
- package/dist/components/layout/popover/popover.styles.d.ts.map +1 -1
- package/dist/components/layout/popover/popover.styles.js +3 -0
- package/dist/components/layout/popover/popover.styles.js.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.d.ts.map +1 -1
- package/dist/components/layout/sheet/sheet.styles.js +3 -0
- package/dist/components/layout/sheet/sheet.styles.js.map +1 -1
- package/dist/components/layout/spacer/spacer.styles.d.ts.map +1 -1
- package/dist/components/layout/spacer/spacer.styles.js +3 -0
- package/dist/components/layout/spacer/spacer.styles.js.map +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js +3 -0
- package/dist/components/layout/split-views/bar-split-view/bar-split-view.styles.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts +47 -19
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js +123 -73
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js +17 -14
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.styles.js.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.d.ts.map +1 -1
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.js +10 -8
- package/dist/components/layout/split-views/navigation-split-view/navigation-split-view.template.js.map +1 -1
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js +3 -0
- package/dist/components/layout/split-views/side-by-side-split-view/side-by-side-split-view.styles.js.map +1 -1
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js +3 -0
- package/dist/components/layout/split-views/split-view-divider/split-view-divider.styles.js.map +1 -1
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js +3 -0
- package/dist/components/layout/split-views/split-view-pane/split-view-pane.styles.js.map +1 -1
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.d.ts.map +1 -1
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js +3 -0
- package/dist/components/layout/split-views/stacked-split-view/stacked-split-view.styles.js.map +1 -1
- package/dist/components/layout/window/window.d.ts +1 -19
- package/dist/components/layout/window/window.d.ts.map +1 -1
- package/dist/components/layout/window/window.js +1 -187
- package/dist/components/layout/window/window.js.map +1 -1
- package/dist/components/layout/window/window.styles.d.ts.map +1 -1
- package/dist/components/layout/window/window.styles.js +5 -28
- package/dist/components/layout/window/window.styles.js.map +1 -1
- package/dist/components/layout/window/window.template.d.ts.map +1 -1
- package/dist/components/layout/window/window.template.js +1 -2
- package/dist/components/layout/window/window.template.js.map +1 -1
- package/dist/components/lists-and-tables/cells/cell/cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/cell/cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/cell/cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/description-cell/description-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/drag-handle-cell/drag-handle-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/icon-cell/icon-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/spacer-cell/spacer-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/text-cell/text-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js +3 -0
- package/dist/components/lists-and-tables/cells/timeline-track-cell/timeline-track-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js +4 -1
- package/dist/components/lists-and-tables/cells/title-cell/title-cell.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.d.ts +138 -8
- package/dist/components/lists-and-tables/list/list.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.i18n.d.ts +2 -0
- package/dist/components/lists-and-tables/list/list.i18n.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.i18n.js +2 -0
- package/dist/components/lists-and-tables/list/list.i18n.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.js +368 -16
- package/dist/components/lists-and-tables/list/list.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.styles.js +163 -25
- package/dist/components/lists-and-tables/list/list.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts +26 -1
- package/dist/components/lists-and-tables/list/list.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list/list.template.js +76 -18
- package/dist/components/lists-and-tables/list/list.template.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.d.ts +20 -7
- package/dist/components/lists-and-tables/list-item/list-item.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.js +49 -24
- package/dist/components/lists-and-tables/list-item/list-item.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.styles.js +50 -28
- package/dist/components/lists-and-tables/list-item/list-item.styles.js.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.d.ts.map +1 -1
- package/dist/components/lists-and-tables/list-item/list-item.template.js +9 -6
- package/dist/components/lists-and-tables/list-item/list-item.template.js.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.d.ts.map +1 -1
- package/dist/components/lists-and-tables/table/table.styles.js +4 -1
- package/dist/components/lists-and-tables/table/table.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts +0 -44
- package/dist/components/navigation/breadcrumbs/breadcrumbs.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js +0 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.i18n.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js +1 -84
- package/dist/components/navigation/breadcrumbs/breadcrumbs.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js +6 -52
- package/dist/components/navigation/breadcrumbs/breadcrumbs.styles.js.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.d.ts.map +1 -1
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js +1 -17
- package/dist/components/navigation/breadcrumbs/breadcrumbs.template.js.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js +4 -1
- package/dist/components/navigation/document-tab-bar/document-tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/link/link.styles.d.ts.map +1 -1
- package/dist/components/navigation/link/link.styles.js +4 -1
- package/dist/components/navigation/link/link.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js +4 -1
- package/dist/components/navigation/menu-bar/menu-bar.styles.js.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.d.ts.map +1 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js +4 -1
- package/dist/components/navigation/menu-bar-item/menu-bar-item.styles.js.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.d.ts.map +1 -1
- package/dist/components/navigation/pagination/pagination.styles.js +4 -1
- package/dist/components/navigation/pagination/pagination.styles.js.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.d.ts.map +1 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js +4 -1
- package/dist/components/navigation/skip-link/skip-link.styles.js.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js +4 -1
- package/dist/components/navigation/tab-bar/tab-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts +5 -0
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js +17 -0
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.js.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js +32 -16
- package/dist/components/navigation/top-navigation-bar/top-navigation-bar.styles.js.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.d.ts.map +1 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js +4 -1
- package/dist/components/navigation/top-title-bar/top-title-bar.styles.js.map +1 -1
- package/dist/components/{prism-python-Tr_Ff1KJ.js → prism-python--N285k7w.js} +1 -1
- package/dist/components/{prism-rust-CxUpjfK5.js → prism-rust-Cnm1tSdo.js} +1 -1
- package/dist/components/{prism-typescript-zaF4YQWN.js → prism-typescript-BPJAiB1s.js} +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js +4 -1
- package/dist/components/status-and-feedback/activity-indicator/activity-indicator.styles.js.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js +4 -1
- package/dist/components/status-and-feedback/badge/badge.styles.js.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js +4 -1
- package/dist/components/status-and-feedback/banner/banner.styles.js.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js +4 -1
- package/dist/components/status-and-feedback/inline-dialog/inline-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts +5 -4
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.d.ts.map +1 -1
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js +5 -5
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.js.map +1 -1
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js +5 -2
- package/dist/components/status-and-feedback/just-in-time-education/just-in-time-education.styles.js.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js +4 -1
- package/dist/components/status-and-feedback/modal-dialog/modal-dialog.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js +4 -1
- package/dist/components/status-and-feedback/progress-bar/progress-bar.styles.js.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js +4 -1
- package/dist/components/status-and-feedback/progress-circle/progress-circle.styles.js.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.d.ts.map +1 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.js +4 -1
- package/dist/components/status-and-feedback/status-bar/status-bar.styles.js.map +1 -1
- package/dist/css/rich-text.css +63 -0
- package/dist/css/settings.css +10 -3
- package/package.json +5 -1
- package/dist/assets/styles/slotted-reset.d.ts.map +0 -1
- package/dist/assets/styles/slotted-reset.fixtures.d.ts.map +0 -1
- package/dist/assets/styles/slotted-reset.fixtures.js.map +0 -1
- package/dist/assets/styles/slotted-reset.js.map +0 -1
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Nederlandse Digitale Dienst Sidebar Section Component (Lit + TypeScript)
|
|
3
|
+
*
|
|
4
|
+
* A page section with a left sidebar alongside the main content.
|
|
5
|
+
*
|
|
6
|
+
* - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable
|
|
7
|
+
* tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets
|
|
8
|
+
* default to 16px; override with `sticky-top` / `sticky-bottom` so it clears
|
|
9
|
+
* other sticky page elements (e.g. a sticky header).
|
|
10
|
+
* - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on
|
|
11
|
+
* md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed`
|
|
12
|
+
* attribute. The consumer owns the trigger: place
|
|
13
|
+
* any chrome (a button, a chosen-filters bar, …) wherever you want, show it only
|
|
14
|
+
* while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by
|
|
15
|
+
* reading `collapsed` / listening to `collapse-change`), and call `show()` /
|
|
16
|
+
* `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events.
|
|
17
|
+
* The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a
|
|
18
|
+
* "Sluit" button — overridable via the `sheet-top-title-bar` slot.
|
|
19
|
+
*
|
|
20
|
+
* The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the
|
|
21
|
+
* box (expanded) and the sheet (collapsed) so there is a single, never-duplicated
|
|
22
|
+
* copy — the light DOM (and its state) is preserved across the switch.
|
|
23
|
+
*
|
|
24
|
+
* The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the
|
|
25
|
+
* host), not the viewport — so a sidebar-section in a narrow column or a split-view
|
|
26
|
+
* pane collapses to the sheet just like one in a narrow viewport, and the sidebar
|
|
27
|
+
* never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow
|
|
28
|
+
* section then stacks the sidebar (full-width) above the main instead of using a sheet.
|
|
29
|
+
*
|
|
30
|
+
* Inherits block `padding` and `height` from PageSectionMixin.
|
|
31
|
+
*
|
|
32
|
+
* @element nldd-sidebar-section
|
|
33
|
+
*
|
|
34
|
+
* @slot - Main content
|
|
35
|
+
* @slot sidebar - Sidebar content (sticky box when expanded, a left/bottom sheet when
|
|
36
|
+
* collapsed). The box and the sheet add no padding of their own — wrap
|
|
37
|
+
* the content in a padded container (e.g. nldd-container) for inset spacing.
|
|
38
|
+
* @slot sheet-top-title-bar - Replaces the sheet's default title bar (when collapsed). Empty falls back to an
|
|
39
|
+
* `nldd-top-title-bar` with the `sidebar-label` as title and a "Sluit" button.
|
|
40
|
+
* @slot header - Content above the columns
|
|
41
|
+
* @slot footer - Content below the columns
|
|
42
|
+
*
|
|
43
|
+
* @attr {boolean} [collapsed] - Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome.
|
|
44
|
+
* @attr {boolean} [no-collapse] - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
|
|
45
|
+
* @attr {string} [width] - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
|
|
46
|
+
* @attr {string} [sticky-top] - Sticky top inset on lg (CSS length; default = 16px).
|
|
47
|
+
* @attr {string} [sticky-bottom]- Sticky bottom inset on lg (CSS length; default = 16px).
|
|
48
|
+
* @attr {string} [sidebar-label]- Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
|
|
49
|
+
*
|
|
50
|
+
* @fires open - The sidebar sheet opened.
|
|
51
|
+
* @fires close - The sidebar sheet closed.
|
|
52
|
+
* @fires collapse-change - The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`.
|
|
53
|
+
*
|
|
54
|
+
* @method show() - Opens the sidebar sheet (collapsed only; no-op on lg).
|
|
55
|
+
* @method hide() - Closes the sidebar sheet.
|
|
56
|
+
* @method toggle() - Opens or closes the sidebar sheet (collapsed only).
|
|
57
|
+
*/
|
|
58
|
+
import { LitElement, type PropertyValues } from 'lit';
|
|
59
|
+
import '../../sheet/sheet.js';
|
|
60
|
+
import '../../page/page.js';
|
|
61
|
+
import '../../../navigation/top-title-bar/top-title-bar.js';
|
|
62
|
+
declare const NLDDSidebarSection_base: typeof LitElement & (new (...args: any[]) => LitElement & {
|
|
63
|
+
background: import("../../../../utilities/page-section-mixin.js").PageSectionBackground;
|
|
64
|
+
scheme: import("../../../../utilities/page-section-mixin.js").PageSectionScheme;
|
|
65
|
+
paddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
66
|
+
paddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
67
|
+
paddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
68
|
+
smPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
69
|
+
smPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
70
|
+
smPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
71
|
+
mdPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
72
|
+
mdPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
73
|
+
mdPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
74
|
+
lgPaddingBlock?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
75
|
+
lgPaddingTop?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
76
|
+
lgPaddingBottom?: import("../../../../utilities/page-section-mixin.js").PageSectionPadding;
|
|
77
|
+
height?: string;
|
|
78
|
+
_onSlotChange(e: Event): void;
|
|
79
|
+
});
|
|
80
|
+
export declare class NLDDSidebarSection extends NLDDSidebarSection_base {
|
|
81
|
+
static styles: import("lit").CSSResult;
|
|
82
|
+
width: string;
|
|
83
|
+
stickyTop: string;
|
|
84
|
+
stickyBottom: string;
|
|
85
|
+
sidebarLabel: string;
|
|
86
|
+
noCollapse: boolean;
|
|
87
|
+
collapsed: boolean;
|
|
88
|
+
private _sheet?;
|
|
89
|
+
private _ro?;
|
|
90
|
+
private readonly _lgMin;
|
|
91
|
+
private _hasMeasured;
|
|
92
|
+
private _sheetOpen;
|
|
93
|
+
get _resolvedSidebarLabel(): string;
|
|
94
|
+
/** Dismiss-button label for the sheet's default title bar (i18n). */
|
|
95
|
+
get _sheetDismissText(): string;
|
|
96
|
+
connectedCallback(): void;
|
|
97
|
+
disconnectedCallback(): void;
|
|
98
|
+
firstUpdated(): void;
|
|
99
|
+
private _onResize;
|
|
100
|
+
private _applyCollapsed;
|
|
101
|
+
updated(changed: PropertyValues): void;
|
|
102
|
+
private _applyInset;
|
|
103
|
+
/** Opens the sidebar sheet. No-op on lg, where the sidebar is always visible. */
|
|
104
|
+
show(): void;
|
|
105
|
+
/** Closes the sidebar sheet. */
|
|
106
|
+
hide(): void;
|
|
107
|
+
/** Opens or closes the sidebar sheet. No-op on lg. */
|
|
108
|
+
toggle(): void;
|
|
109
|
+
_onSheetOpen: () => void;
|
|
110
|
+
_onSheetClose: () => void;
|
|
111
|
+
render(): import("lit-html").TemplateResult;
|
|
112
|
+
}
|
|
113
|
+
declare global {
|
|
114
|
+
interface HTMLElementTagNameMap {
|
|
115
|
+
'nldd-sidebar-section': NLDDSidebarSection;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
export {};
|
|
119
|
+
//# sourceMappingURL=sidebar-section.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwDG;AACH,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAOtD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oDAAoD,CAAC;;;;;;;;;;;;;;;;;;;AAG5D,qBACa,kBAAmB,SAAQ,uBAA4B;IACnE,OAAgB,MAAM,0BAAwB;IAG9C,KAAK,SAAM;IAGX,SAAS,SAAM;IAGf,YAAY,SAAM;IAGlB,YAAY,SAAM;IAGlB,UAAU,UAAS;IAGnB,SAAS,UAAS;IAGlB,OAAO,CAAC,MAAM,CAAC,CAAY;IAE3B,OAAO,CAAC,GAAG,CAAC,CAAiB;IAC7B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAmC;IAC1D,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAE3B,IAAI,qBAAqB,IAAI,MAAM,CAElC;IAED,qEAAqE;IACrE,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAEQ,iBAAiB,IAAI,IAAI;IAQzB,oBAAoB,IAAI,IAAI;IAO5B,YAAY,IAAI,IAAI;IAM7B,OAAO,CAAC,SAAS,CAOf;IAEF,OAAO,CAAC,eAAe;IAcd,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAoB/C,OAAO,CAAC,WAAW;IAQnB,iFAAiF;IACjF,IAAI,IAAI,IAAI;IAKZ,gCAAgC;IAChC,IAAI,IAAI,IAAI;IAIZ,sDAAsD;IACtD,MAAM,IAAI,IAAI;IAQd,YAAY,QAAO,IAAI,CAAgC;IACvD,aAAa,QAAO,IAAI,CAAiC;IAEhD,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,sBAAsB,EAAE,kBAAkB,CAAC;KAC3C;CACD"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
export declare const nlddSidebarSectionTranslations: {
|
|
2
|
+
'components.sidebar-section.sidebar-label': string;
|
|
3
|
+
'components.sidebar-section.sheet-dismiss-action': string;
|
|
4
|
+
};
|
|
5
|
+
export type NLDDSidebarSectionTranslations = typeof nlddSidebarSectionTranslations;
|
|
6
|
+
//# sourceMappingURL=sidebar-section.i18n.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.i18n.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.i18n.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,8BAA8B;;;CAG1C,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG,OAAO,8BAA8B,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.i18n.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.i18n.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,8BAA8B,GAAG;IAC7C,0CAA0C,EAAE,SAAS;IACrD,iDAAiD,EAAE,OAAO;CAC1D,CAAC"}
|
|
@@ -0,0 +1,219 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Nederlandse Digitale Dienst Sidebar Section Component (Lit + TypeScript)
|
|
9
|
+
*
|
|
10
|
+
* A page section with a left sidebar alongside the main content.
|
|
11
|
+
*
|
|
12
|
+
* - **Wide (section >= 1008px):** two columns. The sidebar is a sticky, scrollable
|
|
13
|
+
* tinted box (max-width 320px) beside the main content. Its sticky top/bottom insets
|
|
14
|
+
* default to 16px; override with `sticky-top` / `sticky-bottom` so it clears
|
|
15
|
+
* other sticky page elements (e.g. a sticky header).
|
|
16
|
+
* - **Narrow (section < 1008px):** the sidebar collapses behind a sheet (a left panel on
|
|
17
|
+
* md+ viewports, a bottom sheet on mobile), and the host reflects a `collapsed`
|
|
18
|
+
* attribute. The consumer owns the trigger: place
|
|
19
|
+
* any chrome (a button, a chosen-filters bar, …) wherever you want, show it only
|
|
20
|
+
* while collapsed (e.g. `nldd-sidebar-section[collapsed] .my-trigger { … }` or by
|
|
21
|
+
* reading `collapsed` / listening to `collapse-change`), and call `show()` /
|
|
22
|
+
* `toggle()` to open the sheet. Bind `aria-expanded` via the `open`/`close` events.
|
|
23
|
+
* The sheet gets a sticky title bar by default — the `sidebar-label` as title plus a
|
|
24
|
+
* "Sluit" button — overridable via the `sheet-top-title-bar` slot.
|
|
25
|
+
*
|
|
26
|
+
* The sidebar content lives in `slot="sidebar"`. Its slot outlet moves between the
|
|
27
|
+
* box (expanded) and the sheet (collapsed) so there is a single, never-duplicated
|
|
28
|
+
* copy — the light DOM (and its state) is preserved across the switch.
|
|
29
|
+
*
|
|
30
|
+
* The box <-> sheet switch follows the section's OWN width (a ResizeObserver on the
|
|
31
|
+
* host), not the viewport — so a sidebar-section in a narrow column or a split-view
|
|
32
|
+
* pane collapses to the sheet just like one in a narrow viewport, and the sidebar
|
|
33
|
+
* never stacks above or crowds the main. Set `no-collapse` to opt out: a narrow
|
|
34
|
+
* section then stacks the sidebar (full-width) above the main instead of using a sheet.
|
|
35
|
+
*
|
|
36
|
+
* Inherits block `padding` and `height` from PageSectionMixin.
|
|
37
|
+
*
|
|
38
|
+
* @element nldd-sidebar-section
|
|
39
|
+
*
|
|
40
|
+
* @slot - Main content
|
|
41
|
+
* @slot sidebar - Sidebar content (sticky box when expanded, a left/bottom sheet when
|
|
42
|
+
* collapsed). The box and the sheet add no padding of their own — wrap
|
|
43
|
+
* the content in a padded container (e.g. nldd-container) for inset spacing.
|
|
44
|
+
* @slot sheet-top-title-bar - Replaces the sheet's default title bar (when collapsed). Empty falls back to an
|
|
45
|
+
* `nldd-top-title-bar` with the `sidebar-label` as title and a "Sluit" button.
|
|
46
|
+
* @slot header - Content above the columns
|
|
47
|
+
* @slot footer - Content below the columns
|
|
48
|
+
*
|
|
49
|
+
* @attr {boolean} [collapsed] - Read-only, reflected: true while the sidebar is a sheet (the section is narrower than lg). Target it via CSS to reveal sheet-only chrome.
|
|
50
|
+
* @attr {boolean} [no-collapse] - Opt out of the sheet: a narrow section stacks the sidebar above the main instead of collapsing. `collapsed` then stays false.
|
|
51
|
+
* @attr {string} [width] - Body max-width: 'full' removes the constraint; any CSS length overrides the default.
|
|
52
|
+
* @attr {string} [sticky-top] - Sticky top inset on lg (CSS length; default = 16px).
|
|
53
|
+
* @attr {string} [sticky-bottom]- Sticky bottom inset on lg (CSS length; default = 16px).
|
|
54
|
+
* @attr {string} [sidebar-label]- Accessible name for the sidebar (the aside landmark on lg and the sheet on sm/md). Default 'Zijbalk'.
|
|
55
|
+
*
|
|
56
|
+
* @fires open - The sidebar sheet opened.
|
|
57
|
+
* @fires close - The sidebar sheet closed.
|
|
58
|
+
* @fires collapse-change - The collapsed state flipped because the section's width crossed the lg breakpoint; `{ collapsed }`.
|
|
59
|
+
*
|
|
60
|
+
* @method show() - Opens the sidebar sheet (collapsed only; no-op on lg).
|
|
61
|
+
* @method hide() - Closes the sidebar sheet.
|
|
62
|
+
* @method toggle() - Opens or closes the sidebar sheet (collapsed only).
|
|
63
|
+
*/
|
|
64
|
+
import { LitElement } from 'lit';
|
|
65
|
+
import { customElement, property, query } from 'lit/decorators.js';
|
|
66
|
+
import { PageSectionMixin } from '../../../../utilities/page-section-mixin.js';
|
|
67
|
+
import { breakpoints } from '../../../../assets/styles/breakpoints.js';
|
|
68
|
+
import { sidebarSectionStyles } from './sidebar-section.styles.js';
|
|
69
|
+
import { sidebarSectionTemplate } from './sidebar-section.template.js';
|
|
70
|
+
import { nlddSidebarSectionTranslations } from './sidebar-section.i18n.js';
|
|
71
|
+
import '../../sheet/sheet.js';
|
|
72
|
+
import '../../page/page.js';
|
|
73
|
+
import '../../../navigation/top-title-bar/top-title-bar.js';
|
|
74
|
+
let NLDDSidebarSection = class NLDDSidebarSection extends PageSectionMixin(LitElement) {
|
|
75
|
+
constructor() {
|
|
76
|
+
super(...arguments);
|
|
77
|
+
this.width = '';
|
|
78
|
+
this.stickyTop = '';
|
|
79
|
+
this.stickyBottom = '';
|
|
80
|
+
this.sidebarLabel = '';
|
|
81
|
+
this.noCollapse = false;
|
|
82
|
+
this.collapsed = false;
|
|
83
|
+
this._lgMin = parseInt(breakpoints.lgMin, 10);
|
|
84
|
+
this._hasMeasured = false;
|
|
85
|
+
this._sheetOpen = false;
|
|
86
|
+
this._onResize = (entries) => {
|
|
87
|
+
const entry = entries[0];
|
|
88
|
+
const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
|
|
89
|
+
// The first delivery is the initial measurement, not a breakpoint crossing.
|
|
90
|
+
const announce = this._hasMeasured;
|
|
91
|
+
this._hasMeasured = true;
|
|
92
|
+
this._applyCollapsed(width, announce);
|
|
93
|
+
};
|
|
94
|
+
// Track open state for toggle(); the open/close events still bubble out to the
|
|
95
|
+
// consumer (for aria-expanded) — these handlers don't stop them.
|
|
96
|
+
this._onSheetOpen = () => { this._sheetOpen = true; };
|
|
97
|
+
this._onSheetClose = () => { this._sheetOpen = false; };
|
|
98
|
+
}
|
|
99
|
+
get _resolvedSidebarLabel() {
|
|
100
|
+
return this.sidebarLabel || nlddSidebarSectionTranslations['components.sidebar-section.sidebar-label'];
|
|
101
|
+
}
|
|
102
|
+
/** Dismiss-button label for the sheet's default title bar (i18n). */
|
|
103
|
+
get _sheetDismissText() {
|
|
104
|
+
return nlddSidebarSectionTranslations['components.sidebar-section.sheet-dismiss-action'];
|
|
105
|
+
}
|
|
106
|
+
connectedCallback() {
|
|
107
|
+
super.connectedCallback();
|
|
108
|
+
// Collapse on the section's OWN width, not the viewport, so it adapts to
|
|
109
|
+
// whatever space it's placed in (a narrow column, a split-view pane, …).
|
|
110
|
+
this._ro = new ResizeObserver(this._onResize);
|
|
111
|
+
this._ro.observe(this);
|
|
112
|
+
}
|
|
113
|
+
disconnectedCallback() {
|
|
114
|
+
super.disconnectedCallback();
|
|
115
|
+
this._ro?.disconnect();
|
|
116
|
+
this._ro = undefined;
|
|
117
|
+
this._hasMeasured = false;
|
|
118
|
+
}
|
|
119
|
+
firstUpdated() {
|
|
120
|
+
// Seed the collapsed state from the rendered width before the first paint,
|
|
121
|
+
// so there's no flash of the wrong layout; the ResizeObserver owns it after.
|
|
122
|
+
this._applyCollapsed(this.clientWidth, false);
|
|
123
|
+
}
|
|
124
|
+
_applyCollapsed(width, announce) {
|
|
125
|
+
// no-collapse opts out of the sheet entirely — the sidebar stacks instead.
|
|
126
|
+
const next = width < this._lgMin && !this.noCollapse;
|
|
127
|
+
if (next === this.collapsed)
|
|
128
|
+
return;
|
|
129
|
+
this.collapsed = next;
|
|
130
|
+
if (announce) {
|
|
131
|
+
this.dispatchEvent(new CustomEvent('collapse-change', {
|
|
132
|
+
detail: { collapsed: next },
|
|
133
|
+
bubbles: true,
|
|
134
|
+
composed: true,
|
|
135
|
+
}));
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
updated(changed) {
|
|
139
|
+
super.updated(changed);
|
|
140
|
+
if (changed.has('width')) {
|
|
141
|
+
const w = this.width;
|
|
142
|
+
// 'full' is handled by CSS (--_max-width: none); CSS lengths feed the var.
|
|
143
|
+
if (w && w !== 'full' && CSS.supports('max-width', w)) {
|
|
144
|
+
this.style.setProperty('--_max-width', w);
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
this.style.removeProperty('--_max-width');
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
if (changed.has('stickyTop'))
|
|
151
|
+
this._applyInset('--_sticky-top', this.stickyTop);
|
|
152
|
+
if (changed.has('stickyBottom'))
|
|
153
|
+
this._applyInset('--_sticky-bottom', this.stickyBottom);
|
|
154
|
+
// Toggling no-collapse flips whether a narrow section collapses — re-evaluate.
|
|
155
|
+
if (changed.has('noCollapse'))
|
|
156
|
+
this._applyCollapsed(this.clientWidth, false);
|
|
157
|
+
// Expanding to the box (lg) moves the sidebar slot out of the sheet, so close
|
|
158
|
+
// any open sheet rather than leave an empty modal behind.
|
|
159
|
+
if (changed.has('collapsed') && !this.collapsed)
|
|
160
|
+
this._sheet?.hide();
|
|
161
|
+
}
|
|
162
|
+
_applyInset(name, value) {
|
|
163
|
+
if (value && CSS.supports('top', value)) {
|
|
164
|
+
this.style.setProperty(name, value);
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
this.style.removeProperty(name);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
/** Opens the sidebar sheet. No-op on lg, where the sidebar is always visible. */
|
|
171
|
+
show() {
|
|
172
|
+
if (!this.collapsed)
|
|
173
|
+
return;
|
|
174
|
+
this._sheet?.show();
|
|
175
|
+
}
|
|
176
|
+
/** Closes the sidebar sheet. */
|
|
177
|
+
hide() {
|
|
178
|
+
this._sheet?.hide();
|
|
179
|
+
}
|
|
180
|
+
/** Opens or closes the sidebar sheet. No-op on lg. */
|
|
181
|
+
toggle() {
|
|
182
|
+
if (!this.collapsed)
|
|
183
|
+
return;
|
|
184
|
+
if (this._sheetOpen)
|
|
185
|
+
this._sheet?.hide();
|
|
186
|
+
else
|
|
187
|
+
this._sheet?.show();
|
|
188
|
+
}
|
|
189
|
+
render() {
|
|
190
|
+
return sidebarSectionTemplate(this);
|
|
191
|
+
}
|
|
192
|
+
};
|
|
193
|
+
NLDDSidebarSection.styles = sidebarSectionStyles;
|
|
194
|
+
__decorate([
|
|
195
|
+
property({ type: String, reflect: true })
|
|
196
|
+
], NLDDSidebarSection.prototype, "width", void 0);
|
|
197
|
+
__decorate([
|
|
198
|
+
property({ type: String, reflect: true, attribute: 'sticky-top' })
|
|
199
|
+
], NLDDSidebarSection.prototype, "stickyTop", void 0);
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: String, reflect: true, attribute: 'sticky-bottom' })
|
|
202
|
+
], NLDDSidebarSection.prototype, "stickyBottom", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: String, attribute: 'sidebar-label' })
|
|
205
|
+
], NLDDSidebarSection.prototype, "sidebarLabel", void 0);
|
|
206
|
+
__decorate([
|
|
207
|
+
property({ type: Boolean, reflect: true, attribute: 'no-collapse' })
|
|
208
|
+
], NLDDSidebarSection.prototype, "noCollapse", void 0);
|
|
209
|
+
__decorate([
|
|
210
|
+
property({ type: Boolean, reflect: true })
|
|
211
|
+
], NLDDSidebarSection.prototype, "collapsed", void 0);
|
|
212
|
+
__decorate([
|
|
213
|
+
query('.sidebar-section__sheet')
|
|
214
|
+
], NLDDSidebarSection.prototype, "_sheet", void 0);
|
|
215
|
+
NLDDSidebarSection = __decorate([
|
|
216
|
+
customElement('nldd-sidebar-section')
|
|
217
|
+
], NLDDSidebarSection);
|
|
218
|
+
export { NLDDSidebarSection };
|
|
219
|
+
//# sourceMappingURL=sidebar-section.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,oBAAoB,yBAqJhC,CAAC"}
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { breakpoints } from '../../../../assets/styles/breakpoints.js';
|
|
3
|
+
const smMax = unsafeCSS(breakpoints.smMax);
|
|
4
|
+
const mdMin = unsafeCSS(breakpoints.mdMin);
|
|
5
|
+
const mdMax = unsafeCSS(breakpoints.mdMax);
|
|
6
|
+
const lgMin = unsafeCSS(breakpoints.lgMin);
|
|
7
|
+
export const sidebarSectionStyles = css `
|
|
8
|
+
:host {
|
|
9
|
+
box-sizing: border-box;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
/* # Host
|
|
14
|
+
|
|
15
|
+
Container queries on the section's OWN width (not the viewport): the row
|
|
16
|
+
<-> stacked switch and the padding follow the space the section is given.
|
|
17
|
+
The collapse-to-sheet is JS-driven — a ResizeObserver on the host sets
|
|
18
|
+
[collapsed] (see the .ts) — and only happens when the section is narrow AND
|
|
19
|
+
not [no-collapse]; the lg breakpoint (>= ${lgMin}) is the switch. */
|
|
20
|
+
|
|
21
|
+
:host {
|
|
22
|
+
container-type: inline-size;
|
|
23
|
+
/* Block-padding overrides from PageSectionMixin; resolved per breakpoint
|
|
24
|
+
below (scope override -> base override -> responsive default). */
|
|
25
|
+
--_padding-top: initial;
|
|
26
|
+
--_padding-bottom: initial;
|
|
27
|
+
--_sm-padding-top: initial;
|
|
28
|
+
--_sm-padding-bottom: initial;
|
|
29
|
+
--_md-padding-top: initial;
|
|
30
|
+
--_md-padding-bottom: initial;
|
|
31
|
+
--_lg-padding-top: initial;
|
|
32
|
+
--_lg-padding-bottom: initial;
|
|
33
|
+
--_max-width: var(--semantics-page-sections-body-max-width);
|
|
34
|
+
/* Sticky insets default to 16px top and bottom; override via sticky-top /
|
|
35
|
+
sticky-bottom to clear other sticky page elements (e.g. a sticky header). */
|
|
36
|
+
--_sticky-top: var(--primitives-space-16);
|
|
37
|
+
--_sticky-bottom: var(--primitives-space-16);
|
|
38
|
+
--_sidebar-width: var(--primitives-area-320);
|
|
39
|
+
|
|
40
|
+
display: flex;
|
|
41
|
+
width: 100%;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
align-items: center;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
:host([hidden]) {
|
|
47
|
+
display: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
:host([width="full"]) {
|
|
51
|
+
--_max-width: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
/* # Block */
|
|
56
|
+
|
|
57
|
+
.sidebar-section {
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
display: flex;
|
|
60
|
+
width: 100%;
|
|
61
|
+
flex-direction: column;
|
|
62
|
+
align-items: center;
|
|
63
|
+
|
|
64
|
+
@container (max-width: ${smMax}) {
|
|
65
|
+
padding-inline: var(--semantics-page-sections-sm-margin-inline);
|
|
66
|
+
padding-top: var(--_sm-padding-top, var(--_padding-top, var(--semantics-page-sections-sm-margin-block)));
|
|
67
|
+
padding-bottom: var(--_sm-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-sm-margin-block)));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
@container (min-width: ${mdMin}) and (max-width: ${mdMax}) {
|
|
71
|
+
padding-inline: var(--semantics-page-sections-md-margin-inline);
|
|
72
|
+
padding-top: var(--_md-padding-top, var(--_padding-top, var(--semantics-page-sections-md-margin-block)));
|
|
73
|
+
padding-bottom: var(--_md-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-md-margin-block)));
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@container (min-width: ${lgMin}) {
|
|
77
|
+
padding-inline: var(--semantics-page-sections-lg-margin-inline);
|
|
78
|
+
padding-top: var(--_lg-padding-top, var(--_padding-top, var(--semantics-page-sections-lg-margin-block)));
|
|
79
|
+
padding-bottom: var(--_lg-padding-bottom, var(--_padding-bottom, var(--semantics-page-sections-lg-margin-block)));
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
/* # Body */
|
|
85
|
+
|
|
86
|
+
.sidebar-section__body {
|
|
87
|
+
display: flex;
|
|
88
|
+
width: 100%;
|
|
89
|
+
max-width: var(--_max-width);
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
|
|
92
|
+
@container (max-width: ${smMax}) { gap: var(--semantics-page-sections-sm-gap); }
|
|
93
|
+
@container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--semantics-page-sections-md-gap); }
|
|
94
|
+
@container (min-width: ${lgMin}) { gap: var(--semantics-page-sections-lg-gap); }
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.sidebar-section__header[hidden],
|
|
98
|
+
.sidebar-section__footer[hidden] {
|
|
99
|
+
display: none;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
/* # Columns — stacked (column) by default, two columns (row) when the section
|
|
104
|
+
is wide. Pure width switch, like the other page-sections. When collapsed the
|
|
105
|
+
aside is removed in JS (it moves to the sheet), so only the main remains;
|
|
106
|
+
with [no-collapse] the aside stays and this is the stacked fallback. */
|
|
107
|
+
|
|
108
|
+
.sidebar-section__columns {
|
|
109
|
+
display: flex;
|
|
110
|
+
flex-direction: column;
|
|
111
|
+
|
|
112
|
+
@container (max-width: ${smMax}) { gap: var(--semantics-page-sections-sm-gap); }
|
|
113
|
+
@container (min-width: ${mdMin}) and (max-width: ${mdMax}) { gap: var(--semantics-page-sections-md-gap); }
|
|
114
|
+
@container (min-width: ${lgMin}) {
|
|
115
|
+
flex-direction: row;
|
|
116
|
+
gap: var(--semantics-page-sections-lg-gap);
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.sidebar-section__main {
|
|
121
|
+
min-width: 0;
|
|
122
|
+
flex-grow: 1;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
/* # Sidebar — full-width when stacked (narrow, [no-collapse]); a fixed-width
|
|
127
|
+
column beside the main when wide. */
|
|
128
|
+
|
|
129
|
+
.sidebar-section__sidebar {
|
|
130
|
+
flex-shrink: 0;
|
|
131
|
+
|
|
132
|
+
@container (min-width: ${lgMin}) {
|
|
133
|
+
width: var(--_sidebar-width);
|
|
134
|
+
max-width: var(--_sidebar-width);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/* # Box — tinted always. Sticky + scrollable only beside the main (wide); when
|
|
139
|
+
stacked it's a plain full-width tinted box above the main, so no sticky (which
|
|
140
|
+
would scroll over the main) and no viewport height cap. */
|
|
141
|
+
|
|
142
|
+
.sidebar-section__sidebar-box {
|
|
143
|
+
box-sizing: border-box;
|
|
144
|
+
border-radius: var(--components-sidebar-section-sidebar-box-corner-radius);
|
|
145
|
+
background-color: var(--components-sidebar-section-sidebar-box-background-color);
|
|
146
|
+
box-shadow: inset 0 0 0 1px var(--components-sidebar-section-sidebar-box-highlight-border-color);
|
|
147
|
+
|
|
148
|
+
@container (min-width: ${lgMin}) {
|
|
149
|
+
position: sticky;
|
|
150
|
+
top: var(--_sticky-top);
|
|
151
|
+
bottom: var(--_sticky-bottom);
|
|
152
|
+
max-height: calc(100dvh - var(--_sticky-top) - var(--_sticky-bottom));
|
|
153
|
+
overflow-y: auto;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
`;
|
|
157
|
+
//# sourceMappingURL=sidebar-section.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;+CAYQ,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA6CzB,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;2BACL,KAAK,qBAAqB,KAAK;2BAC/B,KAAK;;;;;;;;;;;;;;;;;;2BAkBL,KAAK;;;;;;;;;;;;;;;;2BAgBL,KAAK;;;;;;;;CAQ/B,CAAC"}
|
package/dist/components/layout/page-sections/sidebar-section/sidebar-section.template.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.template.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE/D,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,kBAAkB,GAAG,cAAc,CAsDpF"}
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import { html, nothing } from 'lit';
|
|
2
|
+
export function sidebarSectionTemplate(component) {
|
|
3
|
+
const collapsed = component.collapsed;
|
|
4
|
+
const sidebarLabel = component._resolvedSidebarLabel;
|
|
5
|
+
return html `
|
|
6
|
+
<section class="sidebar-section">
|
|
7
|
+
<div class="sidebar-section__body">
|
|
8
|
+
<header class="sidebar-section__header"
|
|
9
|
+
hidden
|
|
10
|
+
>
|
|
11
|
+
<slot name="header" @slotchange=${component._onSlotChange}></slot>
|
|
12
|
+
</header>
|
|
13
|
+
<div class="sidebar-section__columns">
|
|
14
|
+
${!collapsed ? html `
|
|
15
|
+
<aside class="sidebar-section__sidebar"
|
|
16
|
+
aria-label=${sidebarLabel}
|
|
17
|
+
>
|
|
18
|
+
<div class="sidebar-section__sidebar-box">
|
|
19
|
+
<slot name="sidebar"></slot>
|
|
20
|
+
</div>
|
|
21
|
+
</aside>
|
|
22
|
+
` : nothing}
|
|
23
|
+
<div class="sidebar-section__main">
|
|
24
|
+
<slot></slot>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<footer class="sidebar-section__footer"
|
|
28
|
+
hidden
|
|
29
|
+
>
|
|
30
|
+
<slot name="footer" @slotchange=${component._onSlotChange}></slot>
|
|
31
|
+
</footer>
|
|
32
|
+
</div>
|
|
33
|
+
</section>
|
|
34
|
+
<nldd-sheet class="sidebar-section__sheet"
|
|
35
|
+
placement="left"
|
|
36
|
+
accessible-label=${sidebarLabel}
|
|
37
|
+
@open=${component._onSheetOpen}
|
|
38
|
+
@close=${component._onSheetClose}
|
|
39
|
+
>
|
|
40
|
+
${collapsed ? html `
|
|
41
|
+
<nldd-page sticky-header>
|
|
42
|
+
<slot
|
|
43
|
+
name="sheet-top-title-bar"
|
|
44
|
+
slot="header"
|
|
45
|
+
>
|
|
46
|
+
<nldd-top-title-bar
|
|
47
|
+
text=${sidebarLabel}
|
|
48
|
+
dismiss-text=${component._sheetDismissText}
|
|
49
|
+
></nldd-top-title-bar>
|
|
50
|
+
</slot>
|
|
51
|
+
<slot name="sidebar"></slot>
|
|
52
|
+
</nldd-page>
|
|
53
|
+
` : nothing}
|
|
54
|
+
</nldd-sheet>
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
//# sourceMappingURL=sidebar-section.template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.template.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/sidebar-section/sidebar-section.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAGzD,MAAM,UAAU,sBAAsB,CAAC,SAA6B;IACnE,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,CAAC;IACtC,MAAM,YAAY,GAAG,SAAS,CAAC,qBAAqB,CAAC;IACrD,OAAO,IAAI,CAAA;;;;;;uCAM2B,SAAS,CAAC,aAAa;;;OAGvD,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;oBAEJ,YAAY;;;;;;MAM1B,CAAC,CAAC,CAAC,OAAO;;;;;;;;uCAQuB,SAAS,CAAC,aAAa;;;;;;sBAMxC,YAAY;WACvB,SAAS,CAAC,YAAY;YACrB,SAAS,CAAC,aAAa;;KAE9B,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;cAOP,YAAY;sBACJ,SAAS,CAAC,iBAAiB;;;;;IAK7C,CAAC,CAAC,CAAC,OAAO;;EAEZ,CAAC;AACH,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"simple-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,mBAAmB,yBA6G/B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"simple-section.styles.js","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/simple-section/simple-section.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC3C,MAAM,KAAK,GAAG,SAAS,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAsDX,KAAK;;;;;;2BAML,KAAK,qBAAqB,KAAK;;;;;;2BAM/B,KAAK;;;;;;;;;;;;;;;;;2BAiBL,KAAK;;;;2BAIL,KAAK,qBAAqB,KAAK;;;;2BAI/B,KAAK;;;;;;;;;;;;;;;;;;CAkB/B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,
|
|
1
|
+
{"version":3,"file":"two-thirds-one-third-section.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/layout/page-sections/two-thirds-one-third-section/two-thirds-one-third-section.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,8BAA8B,yBAoI1C,CAAC"}
|