@kubex/zinc 1.1.184 → 2.0.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/.browserslistrc +2 -0
- package/.github/workflows/js_build_and_deploy.yaml +54 -1
- package/.github/workflows/test.yaml +27 -0
- package/dist/chunks/zn.UWJLIXDT.js +1 -0
- package/dist/custom-elements.json +10344 -2583
- package/dist/vscode.html-custom-data.json +1102 -125
- package/dist/web-types.json +2217 -224
- package/dist/zn.d.ts +2306 -417
- package/dist/zn.min.css +1 -1
- package/dist/zn.min.js +2313 -1635
- package/docs/_includes/default.njk +4 -1
- package/docs/assets/scripts/docs.js +22 -6
- package/docs/assets/styles/docs.css +9 -2
- package/docs/data/report-table-day-compare.json +380 -0
- package/docs/data/report-table.json +314 -0
- package/docs/pages/components/avatar-group.md +57 -0
- package/docs/pages/components/badge.md +67 -0
- package/docs/pages/components/button.md +41 -1
- package/docs/pages/components/chat-message.md +16 -0
- package/docs/pages/components/checkbox.md +1 -1
- package/docs/pages/components/chip.md +25 -13
- package/docs/pages/components/color-picker.md +37 -0
- package/docs/pages/components/copy-button.md +2 -2
- package/docs/pages/components/data-table-filter.md +33 -50
- package/docs/pages/components/data-table-search.md +4 -4
- package/docs/pages/components/data-table.md +27 -3
- package/docs/pages/components/date-range.md +116 -0
- package/docs/pages/components/dialog.md +29 -37
- package/docs/pages/components/diff-row.md +28 -0
- package/docs/pages/components/diff.md +46 -0
- package/docs/pages/components/editor.md +55 -0
- package/docs/pages/components/filter-wrapper.md +20 -0
- package/docs/pages/components/icon.md +46 -1
- package/docs/pages/components/input.md +30 -11
- package/docs/pages/components/item.md +35 -0
- package/docs/pages/components/key-value.md +25 -0
- package/docs/pages/components/menu.md +74 -7
- package/docs/pages/components/nav-item.md +15 -0
- package/docs/pages/components/nav-list.md +132 -0
- package/docs/pages/components/navbar.md +100 -1
- package/docs/pages/components/page.md +242 -74
- package/docs/pages/components/priority-list.md +43 -5
- package/docs/pages/components/query-builder.md +23 -0
- package/docs/pages/components/radio-group.md +33 -1
- package/docs/pages/components/radio.md +1 -1
- package/docs/pages/components/report-table.md +202 -0
- package/docs/pages/components/stat.md +30 -0
- package/docs/pages/components/tile.md +11 -0
- package/docs/pages/components/tooltip.md +1 -1
- package/docs/pages/components/translation-grid.md +86 -0
- package/docs/pages/components/vertical-stepper.md +108 -64
- package/package.json +2 -1
- package/scss/_global-spacing.scss +2 -2
- package/scss/_root.scss +11 -171
- package/scss/boot.scss +14 -0
- package/scss/mixins/_helper-mixins.scss +24 -2
- package/scss/mixins/_motion-mixins.scss +126 -0
- package/scss/mixins/_spacing-mixins.scss +4 -3
- package/scss/mixins/_tab-indicator-mixins.scss +12 -0
- package/scss/mixins/_typography-mixins.scss +1 -1
- package/scss/mixins/index.scss +14 -0
- package/scss/shared/_base.scss +32 -1
- package/scss/shared/_button-mixin.scss +7 -5
- package/scss/shared/_table.scss +35 -4
- package/scss/shared/nav.scss +4 -0
- package/scss/shared/shimmer.scss +1 -1
- package/scss/table-controls.scss +206 -0
- package/scss/themes/_dark.scss +1 -3
- package/scss/themes/_index.scss +1 -1
- package/scss/themes/_light.scss +46 -6
- package/scss/themes/_modes.scss +11 -11
- package/scss/themes/_openbyte.scss +944 -0
- package/scss/themes/_typography.scss +4 -2
- package/scss/variables/index.scss +0 -9
- package/src/components/alert/alert.component.ts +14 -4
- package/src/components/alert/alert.scss +55 -69
- package/src/components/alert/alert.test.ts +8 -0
- package/src/components/animated-button/animated-button.component.ts +3 -2
- package/src/components/animated-button/animated-button.scss +6 -23
- package/src/components/animated-button/animated-button.test.ts +4 -3
- package/src/components/avatar-group/avatar-group.component.ts +84 -0
- package/src/components/avatar-group/avatar-group.scss +54 -0
- package/src/components/avatar-group/avatar-group.test.ts +59 -0
- package/src/components/avatar-group/index.ts +12 -0
- package/src/components/badge/badge.component.ts +49 -0
- package/src/components/badge/badge.scss +80 -0
- package/src/components/badge/badge.test.ts +34 -0
- package/src/components/badge/index.ts +12 -0
- package/src/components/bulk-actions/bulk-actions.component.ts +14 -2
- package/src/components/button/button.component.ts +242 -11
- package/src/components/button/button.scss +133 -25
- package/src/components/button/button.test.ts +122 -0
- package/src/components/button-menu/button-menu.component.ts +32 -11
- package/src/components/button-menu/button-menu.scss +5 -1
- package/src/components/channel-tile/channel-tile.component.ts +34 -27
- package/src/components/channel-tile/channel-tile.scss +76 -43
- package/src/components/chart/builders.test.ts +46 -0
- package/src/components/chart/builders.ts +27 -3
- package/src/components/chart/chart-live.test.ts +4 -6
- package/src/components/chart/chart.component.ts +125 -5
- package/src/components/chart/chart.scss +121 -0
- package/src/components/chart/chart.test.ts +81 -0
- package/src/components/chat-message/chat-message.component.ts +21 -1
- package/src/components/chat-message/chat-message.scss +13 -2
- package/src/components/chat-message/chat-message.test.ts +9 -0
- package/src/components/checkbox/checkbox.component.ts +61 -27
- package/src/components/checkbox/checkbox.scss +58 -25
- package/src/components/checkbox-group/checkbox-group.component.ts +7 -1
- package/src/components/chip/chip.component.ts +11 -1
- package/src/components/chip/chip.scss +91 -26
- package/src/components/chip/chip.test.ts +17 -0
- package/src/components/collapsible/collapsible.component.ts +17 -3
- package/src/components/collapsible/collapsible.scss +19 -10
- package/src/components/color-picker/color-picker.component.ts +277 -0
- package/src/components/color-picker/color-picker.scss +141 -0
- package/src/components/color-picker/color-picker.test.ts +57 -0
- package/src/components/color-picker/index.ts +12 -0
- package/src/components/cols/cols.component.ts +17 -3
- package/src/components/cols/cols.scss +24 -13
- package/src/components/cols/cols.test.ts +33 -0
- package/src/components/confirm/confirm.component.ts +20 -6
- package/src/components/confirm/confirm.test.ts +52 -0
- package/src/components/content-block/content-block.component.ts +38 -9
- package/src/components/content-block/content-block.scss +11 -5
- package/src/components/content-block/content-block.test.ts +26 -0
- package/src/components/copy-button/copy-button.component.ts +2 -2
- package/src/components/copy-button/copy-button.scss +17 -4
- package/src/components/data-select/data-select.component.ts +3 -1
- package/src/components/data-table/data-table.component.ts +364 -142
- package/src/components/data-table/data-table.scss +133 -60
- package/src/components/data-table/data-table.test.ts +356 -4
- package/src/components/data-table-filter/data-table-filter.component.ts +426 -406
- package/src/components/data-table-filter/data-table-filter.scss +176 -148
- package/src/components/data-table-filter/data-table-filter.test.ts +271 -273
- package/src/components/data-table-search/data-table-search.component.ts +4 -2
- package/src/components/data-table-search/data-table-search.scss +8 -1
- package/src/components/data-table-search/data-table-search.test.ts +29 -0
- package/src/components/date-range/date-range-math.test.ts +78 -0
- package/src/components/date-range/date-range-math.ts +105 -0
- package/src/components/date-range/date-range.component.ts +375 -0
- package/src/components/date-range/date-range.scss +272 -0
- package/src/components/date-range/date-range.test.ts +247 -0
- package/src/components/date-range/index.ts +12 -0
- package/src/components/datepicker/datepicker.component.ts +44 -7
- package/src/components/datepicker/datepicker.scss +9 -0
- package/src/components/datepicker/datepicker.test.ts +2 -2
- package/src/components/dialog/dialog.component.ts +38 -19
- package/src/components/dialog/dialog.scss +65 -36
- package/src/components/dialog/dialog.test.ts +14 -0
- package/src/components/diff/diff.component.ts +55 -0
- package/src/components/diff/diff.scss +46 -0
- package/src/components/diff/diff.test.ts +15 -0
- package/src/components/diff/index.ts +12 -0
- package/src/components/diff-row/diff-row.component.ts +75 -0
- package/src/components/diff-row/diff-row.scss +70 -0
- package/src/components/diff-row/diff-row.test.ts +37 -0
- package/src/components/diff-row/index.ts +12 -0
- package/src/components/dropdown/dropdown.component.ts +12 -10
- package/src/components/dropdown/dropdown.scss +2 -0
- package/src/components/editor/editor.component.ts +159 -11
- package/src/components/editor/editor.scss +250 -1
- package/src/components/editor/editor.test.ts +31 -3
- package/src/components/editor/modules/ai/panel/ai-panel.scss +0 -1
- package/src/components/editor/modules/attachment/attachment.ts +53 -31
- package/src/components/editor/modules/context-menu/context-menu.ts +17 -0
- package/src/components/editor/modules/dialog/dialog.component.ts +23 -1
- package/src/components/editor/modules/dialog/dialog.test.ts +28 -0
- package/src/components/editor/modules/emoji/emoji.ts +4 -5
- package/src/components/editor/modules/merge-field/merge-field.ts +83 -0
- package/src/components/editor/modules/toolbar/toolbar.component.ts +121 -68
- package/src/components/editor/modules/toolbar/toolbar.scss +38 -0
- package/src/components/editor/modules/toolbar/toolbar.ts +25 -1
- package/src/components/empty-state/empty-state.component.ts +6 -1
- package/src/components/empty-state/empty-state.scss +21 -4
- package/src/components/expanding-action/expanding-action.component.ts +22 -34
- package/src/components/expanding-action/expanding-action.scss +3 -45
- package/src/components/expanding-action/expanding-action.test.ts +2 -1
- package/src/components/file/file.component.ts +30 -2
- package/src/components/file/file.scss +6 -0
- package/src/components/filter-wrapper/filter-wrapper.component.ts +45 -10
- package/src/components/filter-wrapper/filter-wrapper.test.ts +58 -2
- package/src/components/flow-builder/flow-builder.component.ts +36 -3
- package/src/components/flow-builder/flow-builder.scss +0 -6
- package/src/components/flow-builder/modules/flow-canvas/flow-canvas.component.ts +8 -0
- package/src/components/flow-builder/modules/flow-canvas/flow-canvas.scss +10 -5
- package/src/components/flow-builder/modules/flow-node/flow-node.component.ts +17 -0
- package/src/components/flow-builder/modules/flow-node/flow-node.scss +10 -0
- package/src/components/form-actions/form-actions.component.ts +48 -2
- package/src/components/form-actions/form-actions.scss +1 -1
- package/src/components/form-group/form-group.component.ts +10 -3
- package/src/components/form-group/form-group.scss +37 -4
- package/src/components/form-group/form-group.test.ts +10 -0
- package/src/components/header/header.component.ts +11 -4
- package/src/components/header/header.scss +47 -5
- package/src/components/hover-container/hover-container.component.ts +4 -5
- package/src/components/icon/icon.component.ts +95 -9
- package/src/components/icon/icon.scss +70 -6
- package/src/components/icon/icon.test.ts +55 -0
- package/src/components/icon-picker/icon-picker.component.ts +35 -1
- package/src/components/inline-edit/inline-edit.component.ts +38 -8
- package/src/components/inline-edit/inline-edit.scss +128 -19
- package/src/components/input/input.component.ts +173 -297
- package/src/components/input/input.scss +65 -43
- package/src/components/input/input.test.ts +86 -4
- package/src/components/item/item.component.ts +12 -0
- package/src/components/item/item.scss +102 -3
- package/src/components/item/item.test.ts +23 -0
- package/src/components/key/key.component.ts +2 -2
- package/src/components/key/key.scss +11 -0
- package/src/components/key-value/index.ts +12 -0
- package/src/components/key-value/key-value.component.ts +160 -0
- package/src/components/key-value/key-value.scss +20 -0
- package/src/components/key-value/key-value.test.ts +22 -0
- package/src/components/markdown-editor/markdown-editor.component.ts +8 -1
- package/src/components/menu/menu.component.ts +21 -2
- package/src/components/menu/menu.scss +43 -23
- package/src/components/menu/menu.test.ts +33 -0
- package/src/components/menu-item/menu-item.component.ts +13 -2
- package/src/components/menu-item/menu-item.scss +56 -23
- package/src/components/menu-item/menu-item.test.ts +31 -0
- package/src/components/menu-item/submenu-controller.ts +25 -15
- package/src/components/menu-label/index.ts +12 -0
- package/src/components/menu-label/menu-label.component.ts +30 -0
- package/src/components/menu-label/menu-label.scss +18 -0
- package/src/components/nav-item/index.ts +12 -0
- package/src/components/nav-item/nav-item.component.ts +83 -0
- package/src/components/nav-item/nav-item.scss +128 -0
- package/src/components/nav-list/index.ts +12 -0
- package/src/components/nav-list/nav-list.component.ts +313 -0
- package/src/components/nav-list/nav-list.scss +87 -0
- package/src/components/nav-list/nav-list.test.ts +250 -0
- package/src/components/navbar/navbar.component.ts +235 -171
- package/src/components/navbar/navbar.scss +333 -169
- package/src/components/navbar/navbar.test.ts +63 -143
- package/src/components/page/page.component.ts +114 -29
- package/src/components/page/page.scss +223 -95
- package/src/components/page/page.test.ts +214 -3
- package/src/components/page-builder/page-builder.component.ts +51 -5
- package/src/components/page-builder/page-builder.scss +6 -1
- package/src/components/page-nav/page-nav.component.ts +25 -3
- package/src/components/page-nav/page-nav.scss +10 -2
- package/src/components/pagination/pagination.scss +1 -1
- package/src/components/panel/panel.component.ts +14 -13
- package/src/components/panel/panel.scss +14 -10
- package/src/components/panel/panel.test.ts +42 -0
- package/src/components/popup/popup.component.ts +20 -13
- package/src/components/popup/popup.test.ts +21 -1
- package/src/components/priority-list/priority-list.component.ts +157 -172
- package/src/components/priority-list/priority-list.scss +113 -17
- package/src/components/priority-list/priority-list.test.ts +301 -3
- package/src/components/progress-bar/progress-bar.component.ts +1 -1
- package/src/components/progress-bar/progress-bar.scss +16 -4
- package/src/components/progress-tile/progress-tile.scss +1 -1
- package/src/components/query-builder/query-builder.component.ts +85 -10
- package/src/components/query-builder/query-builder.scss +7 -1
- package/src/components/query-builder/query-builder.test.ts +40 -0
- package/src/components/radio/radio.component.ts +57 -18
- package/src/components/radio/radio.scss +101 -26
- package/src/components/radio-group/radio-group.component.ts +45 -7
- package/src/components/radio-group/radio-group.scss +17 -0
- package/src/components/radio-group/radio-group.test.ts +63 -2
- package/src/components/rating/rating.component.ts +23 -0
- package/src/components/rating/rating.scss +1 -1
- package/src/components/remarkd-editor/remarkd-editor.component.ts +60 -5
- package/src/components/remarkd-editor/remarkd-editor.scss +12 -4
- package/src/components/report-table/index.ts +12 -0
- package/src/components/report-table/report-format.test.ts +86 -0
- package/src/components/report-table/report-format.ts +72 -0
- package/src/components/report-table/report-math.test.ts +74 -0
- package/src/components/report-table/report-math.ts +252 -0
- package/src/components/report-table/report-table.component.ts +681 -0
- package/src/components/report-table/report-table.scss +328 -0
- package/src/components/report-table/report-table.test.ts +702 -0
- package/src/components/reveal/reveal.component.ts +15 -1
- package/src/components/reveal/reveal.scss +5 -0
- package/src/components/schedule-builder/schedule-builder.component.ts +23 -8
- package/src/components/scroll-container/scroll-container.component.ts +19 -1
- package/src/components/scroll-container/scroll-container.scss +6 -1
- package/src/components/select/select.component.ts +52 -36
- package/src/components/select/select.scss +42 -25
- package/src/components/select/select.test.ts +14 -2
- package/src/components/settings-container/settings-container.scss +18 -5
- package/src/components/sidebar/sidebar.component.ts +8 -1
- package/src/components/sidebar/sidebar.scss +6 -1
- package/src/components/skeleton/skeleton.component.ts +3 -3
- package/src/components/skeleton/skeleton.scss +6 -6
- package/src/components/skeleton/skeleton.test.ts +9 -0
- package/src/components/slash-menu/slash-menu.scss +1 -1
- package/src/components/slideout/slideout.component.ts +20 -3
- package/src/components/slideout/slideout.scss +13 -6
- package/src/components/slideout/slideout.test.ts +19 -0
- package/src/components/split-button/split-button.component.ts +1 -1
- package/src/components/split-pane/split-pane.component.ts +71 -8
- package/src/components/split-pane/split-pane.scss +145 -41
- package/src/components/split-pane/split-pane.test.ts +23 -3
- package/src/components/stat/stat.component.ts +209 -14
- package/src/components/stat/stat.scss +305 -5
- package/src/components/stat/stat.test.ts +143 -2
- package/src/components/status-indicator/status-indicator.scss +22 -21
- package/src/components/stepper/stepper.scss +3 -3
- package/src/components/tab/tab.component.ts +1 -0
- package/src/components/table/table.component.ts +12 -1
- package/src/components/table/table.scss +21 -13
- package/src/components/table/table.test.ts +17 -0
- package/src/components/tabs/tabs.component.ts +150 -37
- package/src/components/tabs/tabs.scss +48 -7
- package/src/components/tabs/tabs.test.ts +169 -0
- package/src/components/textarea/textarea.component.ts +25 -3
- package/src/components/textarea/textarea.scss +10 -0
- package/src/components/textarea/textarea.test.ts +8 -4
- package/src/components/theme-editor/theme-editor.scss +0 -6
- package/src/components/tile/tile.component.ts +32 -2
- package/src/components/tile/tile.scss +40 -7
- package/src/components/tile/tile.test.ts +10 -0
- package/src/components/toggle/toggle.component.ts +23 -7
- package/src/components/toggle/toggle.scss +36 -29
- package/src/components/toggle/toggle.test.ts +17 -0
- package/src/components/tooltip/tooltip.component.ts +3 -0
- package/src/components/tooltip/tooltip.scss +11 -6
- package/src/components/tooltip/tooltip.test.ts +12 -0
- package/src/components/translation-field/index.ts +12 -0
- package/src/components/translation-field/translation-field.component.ts +55 -0
- package/src/components/translation-field/translation-field.scss +101 -0
- package/src/components/translation-fields/index.ts +12 -0
- package/src/components/translation-fields/translation-fields.component.ts +80 -0
- package/src/components/translation-fields/translation-fields.scss +60 -0
- package/src/components/translation-grid/index.ts +12 -0
- package/src/components/translation-grid/translation-grid.component.ts +157 -0
- package/src/components/translation-grid/translation-grid.scss +138 -0
- package/src/components/translation-grid/translation-grid.test.ts +28 -0
- package/src/components/vertical-stepper/vertical-stepper.component.ts +35 -9
- package/src/components/vertical-stepper/vertical-stepper.scss +110 -39
- package/src/components/vertical-stepper/vertical-stepper.test.ts +35 -0
- package/src/components/well/well.scss +2 -2
- package/src/events/events.ts +2 -0
- package/src/events/zn-chart-click.ts +13 -0
- package/src/events/zn-report-change.ts +7 -0
- package/src/form-control.scss +36 -3
- package/src/internal/anchored-popover.ts +175 -0
- package/src/internal/animate.ts +19 -5
- package/src/internal/cosmic-border.ts +15 -0
- package/src/internal/form.ts +1 -1
- package/src/internal/hover-intent.ts +15 -0
- package/src/internal/input-modality.ts +15 -0
- package/src/internal/pointer-intent.ts +37 -0
- package/src/internal/reorder.ts +625 -0
- package/src/internal/scroll.ts +51 -3
- package/src/internal/selection-card.ts +1 -1
- package/src/internal/tab-indicator.ts +92 -0
- package/src/internal/table-sort.ts +25 -0
- package/src/internal/table-tabs.ts +108 -0
- package/src/internal/test-drag.ts +35 -0
- package/src/internal/theme-openbyte.test.ts +126 -0
- package/src/internal/theme.ts +4 -4
- package/src/internal/zinc-element.ts +2 -2
- package/src/selection-card.scss +25 -0
- package/src/types/web-test-runner-commands.d.ts +1 -0
- package/src/utilities/color.test.ts +43 -0
- package/src/utilities/color.ts +189 -0
- package/src/zinc.ts +14 -0
- package/.github/workflows/eleventy_build.yml +0 -42
- package/scss/themes/_aura.scss +0 -114
package/dist/zn.d.ts
CHANGED
|
@@ -342,7 +342,16 @@ declare module "utilities/localize" {
|
|
|
342
342
|
numFilesSelected: (num: number) => string;
|
|
343
343
|
}
|
|
344
344
|
}
|
|
345
|
+
declare module "events/zn-reposition" {
|
|
346
|
+
export type ZnRepositionEvent = CustomEvent<Record<PropertyKey, never>>;
|
|
347
|
+
global {
|
|
348
|
+
interface GlobalEventHandlersEventMap {
|
|
349
|
+
'zn-reposition': ZnRepositionEvent;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
}
|
|
345
353
|
declare module "components/popup/popup.component" {
|
|
354
|
+
import "events/zn-reposition";
|
|
346
355
|
import ZincElement from "internal/zinc-element";
|
|
347
356
|
import type { CSSResultGroup } from 'lit';
|
|
348
357
|
export interface VirtualElement {
|
|
@@ -386,7 +395,7 @@ declare module "components/popup/popup.component" {
|
|
|
386
395
|
active: boolean;
|
|
387
396
|
/**
|
|
388
397
|
* The preferred placement of the popup. Note that the actual placement will vary as configured to keep the
|
|
389
|
-
* panel inside
|
|
398
|
+
* panel inside the viewport.
|
|
390
399
|
*/
|
|
391
400
|
placement: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
|
|
392
401
|
/**
|
|
@@ -499,12 +508,14 @@ declare module "components/menu-item/submenu-controller" {
|
|
|
499
508
|
import type ZnMenuItem from "components/menu-item/index";
|
|
500
509
|
/** A reactive controller to manage the registration of event listeners for submenus. */
|
|
501
510
|
export class SubmenuController implements ReactiveController {
|
|
511
|
+
private static readonly openSubmenus;
|
|
502
512
|
private host;
|
|
503
513
|
private popupRef;
|
|
504
514
|
private enableSubmenuTimer;
|
|
505
515
|
private isConnected;
|
|
506
516
|
private isPopupConnected;
|
|
507
517
|
private skidding;
|
|
518
|
+
private distance;
|
|
508
519
|
private readonly hasSlotController;
|
|
509
520
|
private readonly localize;
|
|
510
521
|
private readonly submenuOpenDelay;
|
|
@@ -536,29 +547,15 @@ declare module "utilities/sha256" {
|
|
|
536
547
|
declare module "components/icon/icon.component" {
|
|
537
548
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
538
549
|
import ZincElement from "internal/zinc-element";
|
|
539
|
-
export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" | "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" | "lucide";
|
|
550
|
+
export type IconLibrary = "src" | "material" | "material-outlined" | "material-round" | "material-sharp" | "material-two-tone" | "material-symbols-outlined" | "gravatar" | "libravatar" | "avatar" | "brands" | "line" | "lucide" | "flag";
|
|
551
|
+
export type AvatarPresence = 'online' | 'away' | 'busy' | 'meeting' | 'offline';
|
|
540
552
|
export type IconColor = "default" | "primary" | "accent" | "info" | "warning" | "error" | "success" | "white" | "disabled" | "red" | "blue" | "green" | "orange" | "yellow" | "indigo" | "violet" | "pink" | "grey" | (string & Record<never, never>);
|
|
541
|
-
/**
|
|
542
|
-
* @summary Short summary of the component's intended use.
|
|
543
|
-
* @documentation https://zinc.style/components/icon
|
|
544
|
-
* @status experimental
|
|
545
|
-
* @since 1.0
|
|
546
|
-
*
|
|
547
|
-
* @dependency zn-example
|
|
548
|
-
*
|
|
549
|
-
* @event zn-event-name - Emitted as an example.
|
|
550
|
-
*
|
|
551
|
-
* @slot - The default slot.
|
|
552
|
-
* @slot example - An example slot.
|
|
553
|
-
*
|
|
554
|
-
* @csspart base - The component's base wrapper.
|
|
555
|
-
*
|
|
556
|
-
* @cssproperty --example - An example CSS custom property.
|
|
557
|
-
*/
|
|
558
553
|
export default class ZnIcon extends ZincElement {
|
|
559
554
|
static styles: CSSResultGroup;
|
|
555
|
+
private _lineIconsAdopted;
|
|
560
556
|
src: string;
|
|
561
557
|
alt: string;
|
|
558
|
+
/** Size in pixels, or one of the avatar sizes `sm` (22), `md` (28), `lg` (40) and `xl` (56). */
|
|
562
559
|
size: number;
|
|
563
560
|
round: boolean;
|
|
564
561
|
tile: boolean;
|
|
@@ -569,6 +566,10 @@ declare module "components/icon/icon.component" {
|
|
|
569
566
|
padded: boolean;
|
|
570
567
|
blink: boolean;
|
|
571
568
|
squared: boolean;
|
|
569
|
+
/** A live-status dot on an avatar: `online`, `away`, `busy`, `meeting` or `offline`. */
|
|
570
|
+
presence: AvatarPresence;
|
|
571
|
+
/** Draws an avatar as a solid circle even where the theme tints avatars. */
|
|
572
|
+
solid: boolean;
|
|
572
573
|
private static readonly presetColors;
|
|
573
574
|
private isPresetColor;
|
|
574
575
|
gravatarOptions: string;
|
|
@@ -582,15 +583,18 @@ declare module "components/icon/icon.component" {
|
|
|
582
583
|
private parseSrc;
|
|
583
584
|
private applyHashFragment;
|
|
584
585
|
private normalizeRavatarEmail;
|
|
586
|
+
protected updated(changedProperties: PropertyValues<this>): void;
|
|
587
|
+
private adoptLineIcons;
|
|
585
588
|
render(): import("lit-html").TemplateResult<1>;
|
|
586
589
|
private getAvatarInitials;
|
|
587
590
|
private renderLucideIcon;
|
|
591
|
+
private renderFlagIcon;
|
|
588
592
|
private getLucideIcon;
|
|
589
593
|
private toPascalCase;
|
|
590
594
|
private getLucideSvg;
|
|
591
595
|
private getSvgAttributes;
|
|
592
596
|
private escapeSvgAttribute;
|
|
593
|
-
protected getColorForAvatar(
|
|
597
|
+
protected getColorForAvatar(name: string): string;
|
|
594
598
|
}
|
|
595
599
|
}
|
|
596
600
|
declare module "components/icon/index" {
|
|
@@ -622,6 +626,7 @@ declare module "components/menu-item/menu-item.component" {
|
|
|
622
626
|
* @slot example - An example slot.
|
|
623
627
|
*
|
|
624
628
|
* @csspart base - The component's base wrapper.
|
|
629
|
+
* @csspart shortcut - The key cap showing the item's `shortcut`.
|
|
625
630
|
*
|
|
626
631
|
* @cssproperty --example - An example CSS custom property.
|
|
627
632
|
*/
|
|
@@ -668,6 +673,8 @@ declare module "components/menu-item/menu-item.component" {
|
|
|
668
673
|
noBorder: boolean;
|
|
669
674
|
/** Marks the menu item as currently active/selected. */
|
|
670
675
|
active: boolean;
|
|
676
|
+
/** A keyboard shortcut shown as a key cap at the end of the item, such as `E` or `⌘K`. */
|
|
677
|
+
shortcut: string;
|
|
671
678
|
private readonly localize;
|
|
672
679
|
private readonly hasSlotController;
|
|
673
680
|
private submenuController;
|
|
@@ -707,6 +714,10 @@ declare module "events/zn-select" {
|
|
|
707
714
|
}
|
|
708
715
|
}
|
|
709
716
|
}
|
|
717
|
+
declare module "internal/cosmic-border" {
|
|
718
|
+
/** Registers `--rotate` so the cosmic border's gradient can animate; `@property` rules inside a shadow root are ignored. */
|
|
719
|
+
export function registerCosmicBorder(): void;
|
|
720
|
+
}
|
|
710
721
|
declare module "internal/offset" {
|
|
711
722
|
/**
|
|
712
723
|
* Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
|
|
@@ -737,22 +748,27 @@ declare module "internal/scroll" {
|
|
|
737
748
|
* boundaries are crossed, so a host's own scroller and the app's outer one are both found.
|
|
738
749
|
*/
|
|
739
750
|
export function getScrolledAncestors(element: Element | null | undefined): Element[];
|
|
740
|
-
/**
|
|
741
|
-
|
|
751
|
+
/**
|
|
752
|
+
* Shows a newly selected tab from its start. Scrollers inside `host` return to their top; scrollers around it only
|
|
753
|
+
* scroll back far enough to show the top of `host`, leaving the reader's place alone while the tabs are in view.
|
|
754
|
+
*/
|
|
755
|
+
export function revealTop(containers: Iterable<Element>, host: HTMLElement): void;
|
|
756
|
+
/** Scrolls each scroller around `element`, innermost first, just far enough to show its bottom edge. */
|
|
757
|
+
export function revealBottom(element: Element): void;
|
|
742
758
|
}
|
|
743
759
|
declare module "components/dialog/dialog.component" {
|
|
744
760
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
745
761
|
import ZincElement from "internal/zinc-element";
|
|
746
762
|
import ZnButton from "components/button/index";
|
|
747
763
|
/**
|
|
748
|
-
* @summary
|
|
764
|
+
* @summary A modal that appears above the page for a decision that blocks the flow.
|
|
749
765
|
* @documentation https://zinc.style/components/dialog
|
|
750
766
|
* @status experimental
|
|
751
767
|
* @since 1.0
|
|
752
768
|
*
|
|
753
769
|
* @dependency zn-button
|
|
754
770
|
*
|
|
755
|
-
* @event zn-show - Emitted when the dialog
|
|
771
|
+
* @event zn-show - Emitted when the dialog opens.
|
|
756
772
|
* @event zn-close - Emitted when the dialog is closed.
|
|
757
773
|
* @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} zn-request-close - Emitted when the user attempts to
|
|
758
774
|
* close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
|
|
@@ -763,7 +779,7 @@ declare module "components/dialog/dialog.component" {
|
|
|
763
779
|
* @slot label - The dialog's label. Alternatively you can use the `label` attribute.
|
|
764
780
|
* @slot header-icon - Optional icon to add to the left of the dialog's label (title). A color will be applied
|
|
765
781
|
* to the icon depending on the dialog variant.
|
|
766
|
-
* @slot announcement-intro - Optional
|
|
782
|
+
* @slot announcement-intro - Optional intro text to display below the icon, when using the variant `announcement`.
|
|
767
783
|
* @slot header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
|
|
768
784
|
* @slot footer - The dialog's footer. This is typically used for buttons representing various options.
|
|
769
785
|
* @slot footer-text - Optional text to include below the footer buttons, when using the variant `announcement`.
|
|
@@ -773,14 +789,23 @@ declare module "components/dialog/dialog.component" {
|
|
|
773
789
|
* @csspart header-actions - Optional actions to add to the header. Works best with `<zn-button>` elements.
|
|
774
790
|
* @csspart title - The dialog's title.
|
|
775
791
|
* @csspart close-button - The dialog's close button.
|
|
776
|
-
* @csspart close-button__base - The close
|
|
792
|
+
* @csspart close-button__base - The close button's exported `base` part.
|
|
777
793
|
* @csspart body - The dialog's body.
|
|
778
794
|
* @csspart footer - The dialog's footer.
|
|
779
795
|
*
|
|
780
|
-
* @cssproperty --width - The preferred width of
|
|
796
|
+
* @cssproperty --width - The preferred width of a `size="custom"` dialog. The dialog shrinks to fit smaller screens.
|
|
781
797
|
* @cssproperty --header-spacing - The amount of padding to use for the header.
|
|
782
798
|
* @cssproperty --body-spacing - The amount of padding to use for the body.
|
|
783
799
|
* @cssproperty --footer-spacing - The amount of padding to use for the footer.
|
|
800
|
+
* @cssproperty --zn-dialog-width-small - Theme token: the width of `size="small"`.
|
|
801
|
+
* @cssproperty --zn-dialog-width-medium - Theme token: the width of `size="medium"`.
|
|
802
|
+
* @cssproperty --zn-dialog-width-large - Theme token: the width of `size="large"`.
|
|
803
|
+
* @cssproperty --zn-dialog-border-radius - Theme token: the dialog's corner radius.
|
|
804
|
+
* @cssproperty --zn-dialog-backdrop - Theme token: the backdrop behind the dialog.
|
|
805
|
+
* @cssproperty --zn-dialog-body-color - Theme token: the body text colour.
|
|
806
|
+
* @cssproperty --zn-dialog-icon-background - Theme token: the fill behind a default or warning header icon.
|
|
807
|
+
* @cssproperty --zn-dialog-close-color - Theme token: the close button's icon colour.
|
|
808
|
+
* @cssproperty --zn-dialog-close-icon-size - Theme token: the close button's icon size, read when the dialog opens.
|
|
784
809
|
*/
|
|
785
810
|
export default class ZnDialog extends ZincElement {
|
|
786
811
|
static styles: CSSResultGroup;
|
|
@@ -816,10 +841,14 @@ declare module "components/dialog/dialog.component" {
|
|
|
816
841
|
* will need to manually open the dialog using the `show()` method.
|
|
817
842
|
*/
|
|
818
843
|
trigger: string;
|
|
844
|
+
/** Read from `--zn-dialog-close-icon-size` on open, as zn-icon takes its size as an attribute. */
|
|
845
|
+
private closeIconSize;
|
|
819
846
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
820
847
|
connectedCallback(): void;
|
|
821
848
|
disconnectedCallback(): void;
|
|
822
849
|
private requestClose;
|
|
850
|
+
private handleCancel;
|
|
851
|
+
private handleNativeClose;
|
|
823
852
|
private addOpenListeners;
|
|
824
853
|
private removeOpenListeners;
|
|
825
854
|
/** Shows the dialog. */
|
|
@@ -904,10 +933,11 @@ declare module "components/confirm/confirm.component" {
|
|
|
904
933
|
private failed;
|
|
905
934
|
private failure;
|
|
906
935
|
private submitted;
|
|
936
|
+
private generatedForm;
|
|
907
937
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
908
938
|
connectedCallback(): void;
|
|
909
939
|
updateTriggers(): void;
|
|
910
|
-
show: (event?: Event | undefined) => void
|
|
940
|
+
show: (event?: Event | undefined) => Promise<void>;
|
|
911
941
|
hide(): void;
|
|
912
942
|
disconnectedCallback(): void;
|
|
913
943
|
private reset;
|
|
@@ -933,6 +963,38 @@ declare module "components/confirm/index" {
|
|
|
933
963
|
}
|
|
934
964
|
}
|
|
935
965
|
}
|
|
966
|
+
declare module "components/menu-label/menu-label.component" {
|
|
967
|
+
import { type CSSResultGroup } from 'lit';
|
|
968
|
+
import ZincElement from "internal/zinc-element";
|
|
969
|
+
/**
|
|
970
|
+
* @summary A heading for a group of items in a `zn-menu`. It is skipped by the menu's keyboard navigation.
|
|
971
|
+
* @documentation https://zinc.style/components/menu
|
|
972
|
+
* @status experimental
|
|
973
|
+
* @since 1.0
|
|
974
|
+
*
|
|
975
|
+
* @slot - The label text.
|
|
976
|
+
*
|
|
977
|
+
* @csspart base - The component's base wrapper.
|
|
978
|
+
*
|
|
979
|
+
* @cssproperty --zn-menu-label-padding - Space around the label.
|
|
980
|
+
* @cssproperty --zn-menu-label-color - The label's text colour.
|
|
981
|
+
*/
|
|
982
|
+
export default class ZnMenuLabel extends ZincElement {
|
|
983
|
+
static styles: CSSResultGroup;
|
|
984
|
+
connectedCallback(): void;
|
|
985
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
986
|
+
}
|
|
987
|
+
}
|
|
988
|
+
declare module "components/menu-label/index" {
|
|
989
|
+
import ZnMenuLabel from "components/menu-label/menu-label.component";
|
|
990
|
+
export * from "components/menu-label/menu-label.component";
|
|
991
|
+
export default ZnMenuLabel;
|
|
992
|
+
global {
|
|
993
|
+
interface HTMLElementTagNameMap {
|
|
994
|
+
'zn-menu-label': ZnMenuLabel;
|
|
995
|
+
}
|
|
996
|
+
}
|
|
997
|
+
}
|
|
936
998
|
declare module "components/tooltip/tooltip.component" {
|
|
937
999
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
938
1000
|
import ZincElement from "internal/zinc-element";
|
|
@@ -1004,6 +1066,7 @@ declare module "components/menu/menu.component" {
|
|
|
1004
1066
|
import ZnDropdown from "components/dropdown/index";
|
|
1005
1067
|
import ZnIcon from "components/icon/index";
|
|
1006
1068
|
import ZnMenuItem from "components/menu-item/index";
|
|
1069
|
+
import ZnMenuLabel from "components/menu-label/index";
|
|
1007
1070
|
import ZnTooltip from "components/tooltip/index";
|
|
1008
1071
|
/**
|
|
1009
1072
|
* @summary Short summary of the component's intended use.
|
|
@@ -1033,6 +1096,7 @@ declare module "components/menu/menu.component" {
|
|
|
1033
1096
|
'zn-dropdown': typeof ZnDropdown;
|
|
1034
1097
|
'zn-icon': typeof ZnIcon;
|
|
1035
1098
|
'zn-menu-item': typeof ZnMenuItem;
|
|
1099
|
+
'zn-menu-label': typeof ZnMenuLabel;
|
|
1036
1100
|
'zn-tooltip': typeof ZnTooltip;
|
|
1037
1101
|
};
|
|
1038
1102
|
defaultSlot: HTMLSlotElement;
|
|
@@ -1141,12 +1205,12 @@ declare module "components/dropdown/dropdown.component" {
|
|
|
1141
1205
|
private preloadContent;
|
|
1142
1206
|
private handlePreload;
|
|
1143
1207
|
handleTriggerClick(): Promise<void>;
|
|
1144
|
-
handleKeyDown(event: KeyboardEvent)
|
|
1208
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
1145
1209
|
private handleTriggerKeyDown;
|
|
1146
1210
|
private handleTriggerKeyUp;
|
|
1147
1211
|
private handleTriggerSlotChange;
|
|
1148
1212
|
private handleDocumentMouseDown;
|
|
1149
|
-
handleDocumentKeyDown(event: KeyboardEvent)
|
|
1213
|
+
handleDocumentKeyDown: (event: KeyboardEvent) => void;
|
|
1150
1214
|
/** Opens the dropdown */
|
|
1151
1215
|
show(): Promise<void>;
|
|
1152
1216
|
/** Closes the dropdown */
|
|
@@ -1172,6 +1236,7 @@ declare module "components/dropdown/index" {
|
|
|
1172
1236
|
declare module "components/button/button.component" {
|
|
1173
1237
|
import { type CSSResultGroup } from 'lit';
|
|
1174
1238
|
import ZincElement from "internal/zinc-element";
|
|
1239
|
+
import ZnDropdown from "components/dropdown/index";
|
|
1175
1240
|
import ZnIcon from "components/icon/index";
|
|
1176
1241
|
import ZnTooltip from "components/tooltip/index";
|
|
1177
1242
|
import type { IconColor, IconLibrary } from "components/icon/index";
|
|
@@ -1182,6 +1247,7 @@ declare module "components/button/button.component" {
|
|
|
1182
1247
|
* @status stable
|
|
1183
1248
|
* @since 2.0
|
|
1184
1249
|
*
|
|
1250
|
+
* @dependency zn-dropdown
|
|
1185
1251
|
* @dependency zn-icon
|
|
1186
1252
|
* @dependency zn-tooltip
|
|
1187
1253
|
*
|
|
@@ -1193,6 +1259,7 @@ declare module "components/button/button.component" {
|
|
|
1193
1259
|
* @slot prefix - A presentational prefix icon or similar element.
|
|
1194
1260
|
* @slot suffix - A presentational suffix icon or similar element.
|
|
1195
1261
|
* @slot cancel - Slot for custom cancel button/content when autoClick is active.
|
|
1262
|
+
* @slot menu - A `<zn-menu>` of advanced options, opened by a long press, a right click, or ArrowDown on the button.
|
|
1196
1263
|
*
|
|
1197
1264
|
* @csspart base - The component's base wrapper.
|
|
1198
1265
|
* @csspart prefix - The container that wraps the prefix.
|
|
@@ -1204,6 +1271,7 @@ declare module "components/button/button.component" {
|
|
|
1204
1271
|
export default class ZnButton extends ZincElement implements ZincFormControl {
|
|
1205
1272
|
static styles: CSSResultGroup;
|
|
1206
1273
|
static dependencies: {
|
|
1274
|
+
'zn-dropdown': typeof ZnDropdown;
|
|
1207
1275
|
'zn-tooltip': typeof ZnTooltip;
|
|
1208
1276
|
'zn-icon': typeof ZnIcon;
|
|
1209
1277
|
};
|
|
@@ -1211,12 +1279,25 @@ declare module "components/button/button.component" {
|
|
|
1211
1279
|
private readonly hasSlotController;
|
|
1212
1280
|
private _autoClickTimeout;
|
|
1213
1281
|
private _loadingState;
|
|
1282
|
+
private _longPressTimeout;
|
|
1283
|
+
private _longPressOrigin;
|
|
1284
|
+
/** The pointer that opened the menu is still down, so releasing it over an item selects that item. */
|
|
1285
|
+
private _menuPointerHeld;
|
|
1286
|
+
/** Swallows the click that ends a long press, so the button's own action does not run. */
|
|
1287
|
+
private _suppressClick;
|
|
1288
|
+
private _menuHadFocus;
|
|
1289
|
+
private menuOpen;
|
|
1214
1290
|
button: HTMLButtonElement;
|
|
1291
|
+
menuDropdown: ZnDropdown;
|
|
1215
1292
|
countdownContainer: HTMLElement[];
|
|
1216
|
-
|
|
1293
|
+
/** `ai` is reserved for actions that invoke or act on AI-generated content. */
|
|
1294
|
+
color: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'ai' | 'transparent' | 'star' | (string & Record<never, never>);
|
|
1295
|
+
size: 'small' | 'medium' | 'large';
|
|
1217
1296
|
hoverColor: string;
|
|
1218
1297
|
text: boolean;
|
|
1219
1298
|
outline: boolean;
|
|
1299
|
+
/** Keeps the filled look where a container forces `text`, such as a page header's action menu. */
|
|
1300
|
+
solid: boolean;
|
|
1220
1301
|
disabled: boolean;
|
|
1221
1302
|
grow: boolean;
|
|
1222
1303
|
square: boolean;
|
|
@@ -1233,6 +1314,10 @@ declare module "components/button/button.component" {
|
|
|
1233
1314
|
* weight. For label-like triggers such as filter chips. */
|
|
1234
1315
|
pill: boolean;
|
|
1235
1316
|
panelBackground: boolean;
|
|
1317
|
+
/** How long, in milliseconds, the button must be held to open the `menu` slot. */
|
|
1318
|
+
longPressDelay: number;
|
|
1319
|
+
/** Where the `menu` slot opens relative to the button. */
|
|
1320
|
+
menuPlacement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
|
|
1236
1321
|
dropdownCloser: boolean;
|
|
1237
1322
|
notification: number;
|
|
1238
1323
|
mutedNotifications: boolean;
|
|
@@ -1263,14 +1348,23 @@ declare module "components/button/button.component" {
|
|
|
1263
1348
|
label: string;
|
|
1264
1349
|
/** Toggle state, forwarded to the inner button's `aria-pressed`. */
|
|
1265
1350
|
pressed: 'true' | 'false' | 'mixed';
|
|
1351
|
+
/** Popup state, forwarded to the inner button's `aria-expanded`. */
|
|
1352
|
+
expanded: 'true' | 'false';
|
|
1353
|
+
/** Popup type, forwarded to the inner button's `aria-haspopup`. */
|
|
1354
|
+
hasPopup: string;
|
|
1266
1355
|
autoClick: boolean;
|
|
1267
1356
|
autoClickDelay: number;
|
|
1268
1357
|
loadingText: string;
|
|
1269
1358
|
loadingTextPosition: 'left' | 'right' | 'center' | string;
|
|
1270
1359
|
loading: boolean;
|
|
1360
|
+
/** Shows a spinner and ignores clicks, e.g. while a request is in flight. */
|
|
1361
|
+
processing: boolean;
|
|
1362
|
+
/** Replaces the label while processing. */
|
|
1363
|
+
processingText: string;
|
|
1271
1364
|
get validity(): ValidityState;
|
|
1272
1365
|
get validationMessage(): string;
|
|
1273
1366
|
firstUpdated(): void;
|
|
1367
|
+
connectedCallback(): void;
|
|
1274
1368
|
disconnectedCallback(): void;
|
|
1275
1369
|
handleAutoClickChange(_old: boolean, value: boolean): Promise<void>;
|
|
1276
1370
|
protected updated(changedProps: Map<string, any>): void;
|
|
@@ -1280,6 +1374,24 @@ declare module "components/button/button.component" {
|
|
|
1280
1374
|
setCustomValidity(message: string): void;
|
|
1281
1375
|
click(): void;
|
|
1282
1376
|
handleClick: () => void;
|
|
1377
|
+
private _hasMenu;
|
|
1378
|
+
private getMenu;
|
|
1379
|
+
/** Opens the advanced options in the `menu` slot. */
|
|
1380
|
+
showMenu(): Promise<void>;
|
|
1381
|
+
/** Closes the advanced options in the `menu` slot. */
|
|
1382
|
+
hideMenu(): Promise<void>;
|
|
1383
|
+
private handleHostClickCapture;
|
|
1384
|
+
private handleMenuPointerDown;
|
|
1385
|
+
private handleMenuPointerMove;
|
|
1386
|
+
private handleMenuPointerUp;
|
|
1387
|
+
private handleMenuPointerCancel;
|
|
1388
|
+
private cancelLongPress;
|
|
1389
|
+
private handleMenuContextMenu;
|
|
1390
|
+
private handleMenuKeyDown;
|
|
1391
|
+
private handleMenuShow;
|
|
1392
|
+
private handleMenuHide;
|
|
1393
|
+
private handleMenuAfterHide;
|
|
1394
|
+
private _renderMenu;
|
|
1283
1395
|
private _isLink;
|
|
1284
1396
|
private _isButton;
|
|
1285
1397
|
private getIconButtonColor;
|
|
@@ -1341,6 +1453,32 @@ declare module "events/zn-input" {
|
|
|
1341
1453
|
}
|
|
1342
1454
|
}
|
|
1343
1455
|
}
|
|
1456
|
+
declare module "internal/animate" {
|
|
1457
|
+
export const EASE_OUT = "cubic-bezier(0.23, 1, 0.32, 1)";
|
|
1458
|
+
export const EASE_DRAWER = "cubic-bezier(0.32, 0.72, 0, 1)";
|
|
1459
|
+
/**
|
|
1460
|
+
* Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
|
|
1461
|
+
*/
|
|
1462
|
+
export function animateTo(el: Element, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
|
|
1463
|
+
/** Parses a CSS duration and returns the number of milliseconds. */
|
|
1464
|
+
export function parseDuration(delay: number | string): number;
|
|
1465
|
+
/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
|
|
1466
|
+
export function prefersReducedMotion(): boolean;
|
|
1467
|
+
/**
|
|
1468
|
+
* Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
|
|
1469
|
+
*/
|
|
1470
|
+
export function stopAnimations(el: HTMLElement): Promise<unknown[]>;
|
|
1471
|
+
/**
|
|
1472
|
+
* We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
|
|
1473
|
+
* element's scrollHeight before the animation.
|
|
1474
|
+
*/
|
|
1475
|
+
export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
|
|
1476
|
+
height: string | number | null | undefined;
|
|
1477
|
+
composite?: CompositeOperationOrAuto;
|
|
1478
|
+
easing?: string;
|
|
1479
|
+
offset?: number | null;
|
|
1480
|
+
}[];
|
|
1481
|
+
}
|
|
1344
1482
|
declare module "internal/default-value" {
|
|
1345
1483
|
import type { ReactiveElement } from 'lit';
|
|
1346
1484
|
export const defaultValue: (propertyName?: string) => (proto: ReactiveElement, key: string) => void;
|
|
@@ -1357,6 +1495,7 @@ declare module "components/toggle/toggle.component" {
|
|
|
1357
1495
|
* @dependency zn-tooltip
|
|
1358
1496
|
*
|
|
1359
1497
|
* @event zn-input - Emitted when the toggle receives input.
|
|
1498
|
+
* @event zn-change - Emitted when the toggle is switched on or off.
|
|
1360
1499
|
*
|
|
1361
1500
|
* @slot - The toggle's label.
|
|
1362
1501
|
* @slot description - A description of the toggle's label. Alternatively, you can use the `description` attribute.
|
|
@@ -1374,6 +1513,7 @@ declare module "components/toggle/toggle.component" {
|
|
|
1374
1513
|
private readonly hasSlotController;
|
|
1375
1514
|
private readonly formControlController;
|
|
1376
1515
|
input: HTMLInputElement;
|
|
1516
|
+
knob: HTMLElement;
|
|
1377
1517
|
hasFocus: boolean;
|
|
1378
1518
|
title: string;
|
|
1379
1519
|
name: string;
|
|
@@ -1398,6 +1538,7 @@ declare module "components/toggle/toggle.component" {
|
|
|
1398
1538
|
get validity(): ValidityState;
|
|
1399
1539
|
get validationMessage(): string;
|
|
1400
1540
|
firstUpdated(_changedProperties: PropertyValues): void;
|
|
1541
|
+
updated(changedProperties: PropertyValues<this>): void;
|
|
1401
1542
|
private handleBlur;
|
|
1402
1543
|
private handleInvalid;
|
|
1403
1544
|
private handleInput;
|
|
@@ -1471,6 +1612,7 @@ declare module "components/collapsible/collapsible.component" {
|
|
|
1471
1612
|
private stopAnimating;
|
|
1472
1613
|
private handleTransitionEnd;
|
|
1473
1614
|
handleCollapse: (e: MouseEvent) => void;
|
|
1615
|
+
handleHeaderKeyDown: (e: KeyboardEvent) => void;
|
|
1474
1616
|
recalculateNumberOfItems: () => void;
|
|
1475
1617
|
render(): import("lit-html").TemplateResult<1>;
|
|
1476
1618
|
}
|
|
@@ -1508,12 +1650,16 @@ declare module "components/alert/alert.component" {
|
|
|
1508
1650
|
export default class ZnAlert extends ZincElement {
|
|
1509
1651
|
static styles: CSSResultGroup;
|
|
1510
1652
|
icon: string;
|
|
1653
|
+
/** The status icon's size in pixels. */
|
|
1654
|
+
iconSize: number;
|
|
1511
1655
|
caption: string;
|
|
1512
1656
|
collapse: boolean;
|
|
1513
1657
|
appearance: 'transparent' | 'solid';
|
|
1514
|
-
|
|
1658
|
+
/** `ai` marks AI-generated content only. */
|
|
1659
|
+
level: 'primary' | 'error' | 'info' | 'success' | 'warning' | 'note' | 'cosmic' | 'ai';
|
|
1515
1660
|
center: boolean;
|
|
1516
1661
|
size: 'small' | 'medium' | 'large';
|
|
1662
|
+
connectedCallback(): void;
|
|
1517
1663
|
render(): import("lit-html").TemplateResult<1>;
|
|
1518
1664
|
hideAlert(): void;
|
|
1519
1665
|
}
|
|
@@ -1608,6 +1754,7 @@ declare module "components/chat-message/chat-message.component" {
|
|
|
1608
1754
|
* @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
|
|
1609
1755
|
* @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,
|
|
1610
1756
|
* which auto-assigns itself to this slot.
|
|
1757
|
+
* @slot footer - Content beneath the bubble, such as reactions or a thread summary.
|
|
1611
1758
|
* @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
|
|
1612
1759
|
* @slot edit-dialog - Pass-through for an associated dialog element.
|
|
1613
1760
|
*
|
|
@@ -1618,6 +1765,7 @@ declare module "components/chat-message/chat-message.component" {
|
|
|
1618
1765
|
* @csspart bubble - The message bubble.
|
|
1619
1766
|
* @csspart content - The message content within the bubble.
|
|
1620
1767
|
* @csspart attachments - The attachments row beneath the message content.
|
|
1768
|
+
* @csspart footer - The row beneath the bubble.
|
|
1621
1769
|
* @csspart system-card - The card rendered for system action types.
|
|
1622
1770
|
*
|
|
1623
1771
|
* @cssproperty --message-background - The bubble's background color.
|
|
@@ -1651,11 +1799,14 @@ declare module "components/chat-message/chat-message.component" {
|
|
|
1651
1799
|
hideSender: boolean;
|
|
1652
1800
|
/** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */
|
|
1653
1801
|
private hasAttachments;
|
|
1802
|
+
/** Whether any element is assigned to the `footer` slot — drives the footer row visibility. */
|
|
1803
|
+
private hasFooter;
|
|
1654
1804
|
connectedCallback(): void;
|
|
1655
1805
|
protected render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
1656
1806
|
protected firstUpdated(): void;
|
|
1657
1807
|
private handleAttachmentsSlotChange;
|
|
1658
1808
|
private syncHasAttachments;
|
|
1809
|
+
private syncHasFooter;
|
|
1659
1810
|
private isSystemMessage;
|
|
1660
1811
|
private renderSystemCard;
|
|
1661
1812
|
private systemLabel;
|
|
@@ -1757,7 +1908,12 @@ declare module "components/chip/chip.component" {
|
|
|
1757
1908
|
icon: string;
|
|
1758
1909
|
caption: string;
|
|
1759
1910
|
iconSize: number;
|
|
1760
|
-
|
|
1911
|
+
/** `ai` marks AI-generated content only. */
|
|
1912
|
+
type: 'info' | 'success' | 'warning' | 'error' | 'primary' | 'ai' | 'transparent' | 'custom' | 'neutral';
|
|
1913
|
+
/** Fills the chip with its type colour. */
|
|
1914
|
+
solid: boolean;
|
|
1915
|
+
/** Leads the label with a dot in the type colour. */
|
|
1916
|
+
dot: boolean;
|
|
1761
1917
|
flush: boolean;
|
|
1762
1918
|
flushX: boolean;
|
|
1763
1919
|
flushY: boolean;
|
|
@@ -1864,6 +2020,179 @@ declare module "components/copy-button/index" {
|
|
|
1864
2020
|
}
|
|
1865
2021
|
}
|
|
1866
2022
|
}
|
|
2023
|
+
declare module "internal/table-sort" {
|
|
2024
|
+
import { type TemplateResult } from 'lit';
|
|
2025
|
+
export type SortState = 'ascending' | 'descending' | 'none';
|
|
2026
|
+
export function renderSortIcon(state: SortState): TemplateResult;
|
|
2027
|
+
export function sortKeyHandler(onSort: () => void): (e: KeyboardEvent) => void;
|
|
2028
|
+
}
|
|
2029
|
+
declare module "internal/reorder" {
|
|
2030
|
+
import type { FormControlController } from "internal/form";
|
|
2031
|
+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2032
|
+
/** A component whose keyed items can be dragged, or moved by keyboard, into a new order. */
|
|
2033
|
+
export interface ReorderHost extends ReactiveControllerHost, HTMLElement {
|
|
2034
|
+
/** The item keys in their current order. */
|
|
2035
|
+
reorderKeys: () => string[];
|
|
2036
|
+
/** Shows the items in a new order. */
|
|
2037
|
+
applyReorder: (keys: string[]) => void;
|
|
2038
|
+
/** The row drawn for an item, measured to slide it from its old position. */
|
|
2039
|
+
reorderRow: (key: string) => HTMLElement | null;
|
|
2040
|
+
/** Every element that slides with an item, when more than its row does (a table column's cells). */
|
|
2041
|
+
reorderSlides?: (key: string) => HTMLElement[];
|
|
2042
|
+
/** Whether an item is pinned where it is; nothing can move past it either. */
|
|
2043
|
+
reorderLocked?: (key: string) => boolean;
|
|
2044
|
+
/** Where the pointer must be for a drag to land; letting go outside it cancels. Defaults to the rows' parent. */
|
|
2045
|
+
reorderArea?: () => HTMLElement | null;
|
|
2046
|
+
/** The element that follows the pointer while dragging. Defaults to a copy of the item's row. */
|
|
2047
|
+
reorderGhost?: (key: string) => HTMLElement;
|
|
2048
|
+
/** Submits the form after each reorder when set: to this URL, or the form's own action when empty. */
|
|
2049
|
+
formAction?: string;
|
|
2050
|
+
disabled?: boolean;
|
|
2051
|
+
}
|
|
2052
|
+
export interface ReorderOptions {
|
|
2053
|
+
/** Submits through the host's form, which announces the form so a host page can intercept the submit. */
|
|
2054
|
+
formControl?: FormControlController;
|
|
2055
|
+
/** Fields for a temporary form when the host has a `formaction` but no form of its own. */
|
|
2056
|
+
fallbackFields?: () => [string, string][];
|
|
2057
|
+
/** Keys that move the focused item. With `alt`, plain arrows are left to navigate between items. */
|
|
2058
|
+
modifier?: 'none' | 'alt';
|
|
2059
|
+
/** Focuses an item after it moves by keyboard. */
|
|
2060
|
+
focus?: (key: string) => void;
|
|
2061
|
+
/** Which way the items run: arrow keys, the drag midpoint and the slide follow it. */
|
|
2062
|
+
axis?: 'vertical' | 'horizontal';
|
|
2063
|
+
/**
|
|
2064
|
+
* Leaves the items in place while dragging and tracks `dropIndex` for the host to draw a drop line, moving the item
|
|
2065
|
+
* only on drop. Suits items of very different sizes, which would jump under the pointer when moved live.
|
|
2066
|
+
*/
|
|
2067
|
+
indicator?: boolean;
|
|
2068
|
+
}
|
|
2069
|
+
/**
|
|
2070
|
+
* Pointer and keyboard reordering for a keyed list, with the change announced through `zn-change` and `zn-reorder`
|
|
2071
|
+
* and, when the host has a `formaction`, submitted with its form.
|
|
2072
|
+
*
|
|
2073
|
+
* Dragging runs on pointer events rather than native drag and drop, which hands the cursor to the browser for the
|
|
2074
|
+
* whole drag.
|
|
2075
|
+
*/
|
|
2076
|
+
export class ReorderController implements ReactiveController {
|
|
2077
|
+
/** The item being dragged, styled as its placeholder. */
|
|
2078
|
+
draggedKey: string | null;
|
|
2079
|
+
/** Whether a drag is under way, for transitions while items shift. */
|
|
2080
|
+
isDragging: boolean;
|
|
2081
|
+
/** With `indicator`, the boundary the dragged item would drop at: before the item at this index, or after the last. */
|
|
2082
|
+
dropIndex: number | null;
|
|
2083
|
+
private readonly host;
|
|
2084
|
+
private readonly options;
|
|
2085
|
+
private dragKey;
|
|
2086
|
+
private startOrder;
|
|
2087
|
+
private sliding;
|
|
2088
|
+
private listOverflow;
|
|
2089
|
+
private press;
|
|
2090
|
+
private point;
|
|
2091
|
+
private ghost;
|
|
2092
|
+
private ghostOffset;
|
|
2093
|
+
private shield;
|
|
2094
|
+
private scroller;
|
|
2095
|
+
private scrollFrame;
|
|
2096
|
+
constructor(host: ReorderHost, options?: ReorderOptions);
|
|
2097
|
+
hostConnected(): void;
|
|
2098
|
+
hostDisconnected(): void;
|
|
2099
|
+
private get horizontal();
|
|
2100
|
+
/** The leading edge of a row along the axis. */
|
|
2101
|
+
private start;
|
|
2102
|
+
private keys;
|
|
2103
|
+
isLocked(key: string): boolean;
|
|
2104
|
+
/** A move is allowed when neither the moved item nor any item it would shift past is locked. */
|
|
2105
|
+
canMove(fromIndex: number, toIndex: number): boolean;
|
|
2106
|
+
canStep(key: string, step: number): boolean;
|
|
2107
|
+
/** Moves an item and announces the new order. */
|
|
2108
|
+
move(fromIndex: number, toIndex: number): boolean;
|
|
2109
|
+
step(key: string, step: number): boolean;
|
|
2110
|
+
/** Arrow keys move the item one place and Home/End to either end. Returns whether the key was handled. */
|
|
2111
|
+
handleKeyDown(event: KeyboardEvent, key: string): boolean;
|
|
2112
|
+
/** Starts tracking a press on an item; it becomes a drag once the pointer moves, or a touch holds still. */
|
|
2113
|
+
handlePointerDown(event: PointerEvent, key: string): void;
|
|
2114
|
+
private onPointerMove;
|
|
2115
|
+
private onPointerUp;
|
|
2116
|
+
private onPointerCancel;
|
|
2117
|
+
private onTouchMove;
|
|
2118
|
+
private onNativeDragStart;
|
|
2119
|
+
private onKeyDown;
|
|
2120
|
+
private beginDrag;
|
|
2121
|
+
private placeGhost;
|
|
2122
|
+
private area;
|
|
2123
|
+
private inArea;
|
|
2124
|
+
private hoveredKey;
|
|
2125
|
+
/**
|
|
2126
|
+
* Moves the dragged item to the hovered one's place, once the pointer crosses that item's midpoint. In a gap
|
|
2127
|
+
* between items nothing moves, and letting go there keeps the order so far.
|
|
2128
|
+
*/
|
|
2129
|
+
private dragOver;
|
|
2130
|
+
private pastMidpoint;
|
|
2131
|
+
private trackDropIndex;
|
|
2132
|
+
private setDropIndex;
|
|
2133
|
+
private dropTarget;
|
|
2134
|
+
private autoScroll;
|
|
2135
|
+
private endDrag;
|
|
2136
|
+
private release;
|
|
2137
|
+
/** Shows the new order, sliding each row from its old position. */
|
|
2138
|
+
reorder(keys: string[]): void;
|
|
2139
|
+
private clipWhileSliding;
|
|
2140
|
+
private commit;
|
|
2141
|
+
private emit;
|
|
2142
|
+
/** Submits the host's form when it has a `formaction`. */
|
|
2143
|
+
private submit;
|
|
2144
|
+
}
|
|
2145
|
+
/**
|
|
2146
|
+
* The border radius that rounds a row's corners where it meets the corners of the nearest rounded ancestor of `host`
|
|
2147
|
+
* that clips it (a flush list in a panel), so a drag placeholder's dashed outline follows the clip there instead of
|
|
2148
|
+
* being cut off. Null when nothing rounded clips the row.
|
|
2149
|
+
*/
|
|
2150
|
+
export function clipCornerRadius(host: Element, row: HTMLElement): string | null;
|
|
2151
|
+
}
|
|
2152
|
+
declare module "internal/tab-indicator" {
|
|
2153
|
+
/**
|
|
2154
|
+
* Squishes a sliding tab indicator's height to `--zn-navbar-tab-indicator-squash` during
|
|
2155
|
+
* `--zn-navbar-tab-indicator-delay`, then lets it recover as it travels. Does nothing unless a squash is set.
|
|
2156
|
+
*/
|
|
2157
|
+
export function squishTabIndicator(indicator: HTMLElement): void;
|
|
2158
|
+
export interface IndicatorEdges {
|
|
2159
|
+
left: number;
|
|
2160
|
+
right: number;
|
|
2161
|
+
}
|
|
2162
|
+
/**
|
|
2163
|
+
* Slides an indicator, already placed at `to` by `left` and `width`, from the box `from` using only `transform`, so the
|
|
2164
|
+
* browser can run it off the main thread while the new tab loads. The edge heading for the new tab moves on
|
|
2165
|
+
* `--zn-navbar-tab-indicator-duration`/`-easing`/`-delay`, the other on the `-trail-` tokens, stretching the indicator mid-move.
|
|
2166
|
+
*/
|
|
2167
|
+
export function slideTabIndicator(indicator: HTMLElement, from: IndicatorEdges, to: IndicatorEdges): void;
|
|
2168
|
+
}
|
|
2169
|
+
declare module "internal/table-tabs" {
|
|
2170
|
+
import { nothing, type ReactiveController, type ReactiveControllerHost, type TemplateResult } from 'lit';
|
|
2171
|
+
export interface TableTab {
|
|
2172
|
+
value: string;
|
|
2173
|
+
label: string;
|
|
2174
|
+
count?: number | string;
|
|
2175
|
+
}
|
|
2176
|
+
export class TabRowController implements ReactiveController {
|
|
2177
|
+
private readonly onSelect;
|
|
2178
|
+
private indicator;
|
|
2179
|
+
private indicatorTab;
|
|
2180
|
+
private observer;
|
|
2181
|
+
constructor(host: ReactiveControllerHost, opts: {
|
|
2182
|
+
onSelect: (value: string) => void;
|
|
2183
|
+
});
|
|
2184
|
+
hostUpdated(): void;
|
|
2185
|
+
hostDisconnected(): void;
|
|
2186
|
+
render(tabs: TableTab[], active: string, pill: boolean): TemplateResult | typeof nothing;
|
|
2187
|
+
private setIndicator;
|
|
2188
|
+
private observeBar;
|
|
2189
|
+
/**
|
|
2190
|
+
* One indicator shared by every tab, positioned by its two edges as zn-navbar's is: on a tab
|
|
2191
|
+
* change the edge nearest the destination leads and the other trails, so it slides across.
|
|
2192
|
+
*/
|
|
2193
|
+
syncTabIndicator(): void;
|
|
2194
|
+
}
|
|
2195
|
+
}
|
|
1867
2196
|
declare module "events/zn-filter-change" {
|
|
1868
2197
|
export type ZnFilterChangeEvent = CustomEvent<Record<PropertyKey, never>>;
|
|
1869
2198
|
global {
|
|
@@ -1884,10 +2213,125 @@ declare module "events/zn-search-change" {
|
|
|
1884
2213
|
}
|
|
1885
2214
|
}
|
|
1886
2215
|
}
|
|
2216
|
+
declare module "components/badge/badge.component" {
|
|
2217
|
+
import { type CSSResultGroup } from 'lit';
|
|
2218
|
+
import ZincElement from "internal/zinc-element";
|
|
2219
|
+
/**
|
|
2220
|
+
* @summary Badges label the status or category of a record, such as "Active" or "Past due".
|
|
2221
|
+
* @documentation https://zinc.style/components/badge
|
|
2222
|
+
* @status experimental
|
|
2223
|
+
* @since 1.0
|
|
2224
|
+
*
|
|
2225
|
+
* @dependency zn-icon
|
|
2226
|
+
*
|
|
2227
|
+
* @slot - The badge's label.
|
|
2228
|
+
*
|
|
2229
|
+
* @csspart base - The component's base wrapper.
|
|
2230
|
+
*/
|
|
2231
|
+
export default class ZnBadge extends ZincElement {
|
|
2232
|
+
static styles: CSSResultGroup;
|
|
2233
|
+
/** `ai` marks AI-generated content only. */
|
|
2234
|
+
type: 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'ai';
|
|
2235
|
+
size: 'medium' | 'large';
|
|
2236
|
+
/** Fills the badge with its type colour. */
|
|
2237
|
+
solid: boolean;
|
|
2238
|
+
/** Leads the label with a dot in the type colour. */
|
|
2239
|
+
dot: boolean;
|
|
2240
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
2241
|
+
}
|
|
2242
|
+
}
|
|
2243
|
+
declare module "components/badge/index" {
|
|
2244
|
+
import ZnBadge from "components/badge/badge.component";
|
|
2245
|
+
export * from "components/badge/badge.component";
|
|
2246
|
+
export default ZnBadge;
|
|
2247
|
+
global {
|
|
2248
|
+
interface HTMLElementTagNameMap {
|
|
2249
|
+
'zn-badge': ZnBadge;
|
|
2250
|
+
}
|
|
2251
|
+
}
|
|
2252
|
+
}
|
|
2253
|
+
declare module "internal/anchored-popover" {
|
|
2254
|
+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2255
|
+
export type PopoverHideReason = 'escape' | 'outside' | 'api';
|
|
2256
|
+
interface AnchoredPopoverOptions {
|
|
2257
|
+
/** Selector, in the host's shadow root, of the element the popover hangs from. */
|
|
2258
|
+
trigger: string;
|
|
2259
|
+
/** Selector, in the host's shadow root, of the popover. */
|
|
2260
|
+
popover: string;
|
|
2261
|
+
/** The popover's rendered width in px, used to keep it on screen. */
|
|
2262
|
+
width: () => number;
|
|
2263
|
+
/** Which trigger edge the popover lines up with; it flips when that would run off screen. */
|
|
2264
|
+
align: 'start' | 'end';
|
|
2265
|
+
/** Called whenever the popover closes, with how it was closed. */
|
|
2266
|
+
onHide?: (reason: PopoverHideReason) => void;
|
|
2267
|
+
/**
|
|
2268
|
+
* Selectors, in the popover, tried in order for the element to focus once it opens. When set, focus goes back to the
|
|
2269
|
+
* trigger as it closes, unless it has already moved somewhere else.
|
|
2270
|
+
*/
|
|
2271
|
+
focus?: string[];
|
|
2272
|
+
}
|
|
2273
|
+
/**
|
|
2274
|
+
* A fixed-position popover anchored under a trigger in the host's shadow root, closed by Escape or a click outside
|
|
2275
|
+
* both. Fixed so a panel's overflow can't clip it.
|
|
2276
|
+
*/
|
|
2277
|
+
export class AnchoredPopoverController implements ReactiveController {
|
|
2278
|
+
open: boolean;
|
|
2279
|
+
position: {
|
|
2280
|
+
top: number;
|
|
2281
|
+
left: number;
|
|
2282
|
+
};
|
|
2283
|
+
private readonly host;
|
|
2284
|
+
private readonly opts;
|
|
2285
|
+
private observed;
|
|
2286
|
+
private readonly resizes;
|
|
2287
|
+
constructor(host: ReactiveControllerHost & HTMLElement, opts: AnchoredPopoverOptions);
|
|
2288
|
+
hostConnected(): void;
|
|
2289
|
+
hostDisconnected(): void;
|
|
2290
|
+
hostUpdated(): void;
|
|
2291
|
+
private refit;
|
|
2292
|
+
get style(): string;
|
|
2293
|
+
show(): void;
|
|
2294
|
+
hide(reason?: PopoverHideReason): void;
|
|
2295
|
+
trigger(): HTMLElement | null;
|
|
2296
|
+
private popover;
|
|
2297
|
+
private focusIsLost;
|
|
2298
|
+
private focusTrigger;
|
|
2299
|
+
private place;
|
|
2300
|
+
private outsideClick;
|
|
2301
|
+
private keydown;
|
|
2302
|
+
private reposition;
|
|
2303
|
+
}
|
|
2304
|
+
}
|
|
1887
2305
|
declare module "utilities/lit-to-html" {
|
|
1888
2306
|
import { type TemplateResult } from "lit";
|
|
1889
2307
|
export function litToHTML<T extends HTMLElement>(templateResult: TemplateResult): T | null;
|
|
1890
2308
|
}
|
|
2309
|
+
declare module "utilities/color" {
|
|
2310
|
+
export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
|
|
2311
|
+
/** Red, green and blue, each 0-255. */
|
|
2312
|
+
export type Rgb = [number, number, number];
|
|
2313
|
+
/** Hue 0-360, saturation and value 0-1. */
|
|
2314
|
+
export type Hsv = [number, number, number];
|
|
2315
|
+
export function hsvToRgb(h: number, s: number, v: number): Rgb;
|
|
2316
|
+
export function rgbToHsv(r: number, g: number, b: number): Hsv;
|
|
2317
|
+
/** Rounded to whole degrees and percentages. */
|
|
2318
|
+
export function rgbToHsl(r: number, g: number, b: number): [number, number, number];
|
|
2319
|
+
/** Saturation and lightness are percentages. */
|
|
2320
|
+
export function hslToRgb(h: number, s: number, l: number): Rgb;
|
|
2321
|
+
/** Lightness 0-1, chroma (about 0-0.4), hue in degrees. */
|
|
2322
|
+
export function rgbToOklch(r: number, g: number, b: number): [number, number, number];
|
|
2323
|
+
/** Colours outside sRGB are clamped into it. */
|
|
2324
|
+
export function oklchToRgb(L: number, C: number, H: number): Rgb;
|
|
2325
|
+
/** OKLCH as shown to people: lightness as a percentage to 1dp, chroma to 3dp, hue to 1dp. */
|
|
2326
|
+
export function oklchParts(rgb: Rgb): [number, number, number];
|
|
2327
|
+
export const toHex: (rgb: Rgb) => string;
|
|
2328
|
+
/** The format a colour is written in, or null for a name, a token or anything that isn't a colour. */
|
|
2329
|
+
export function detectColorFormat(value: string): ColorFormat | null;
|
|
2330
|
+
/** Any CSS colour (hex, rgb(), hsl(), oklch(), a name or var(--token)) as RGB, or null when it isn't one. */
|
|
2331
|
+
export function parseColor(value: string): Rgb | null;
|
|
2332
|
+
/** Writes a colour out in the given format, e.g. `#085EFD`, `rgb(8, 94, 253)`, `hsl(219, 98%, 51%)` or `oklch(58.4% 0.226 262.5)`. */
|
|
2333
|
+
export function formatColor(rgb: Rgb, format: ColorFormat): string;
|
|
2334
|
+
}
|
|
1891
2335
|
declare module "components/slash-menu/slash-menu-items" {
|
|
1892
2336
|
export interface SlashMenuItem {
|
|
1893
2337
|
/** The text shown in the menu. */
|
|
@@ -2161,6 +2605,66 @@ declare module "components/slash-menu/index" {
|
|
|
2161
2605
|
}
|
|
2162
2606
|
}
|
|
2163
2607
|
}
|
|
2608
|
+
declare module "components/color-picker/color-picker.component" {
|
|
2609
|
+
import { type ColorFormat } from "utilities/color";
|
|
2610
|
+
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
2611
|
+
import ZincElement from "internal/zinc-element";
|
|
2612
|
+
/**
|
|
2613
|
+
* @summary A colour panel: a saturation/brightness area, a hue slider and the colour's HEX, RGB, HSL and OKLCH values.
|
|
2614
|
+
* @documentation https://zinc.style/components/color-picker
|
|
2615
|
+
* @status experimental
|
|
2616
|
+
* @since 1.0
|
|
2617
|
+
*
|
|
2618
|
+
* @event zn-input - Emitted when the colour or the format being worked in changes.
|
|
2619
|
+
*
|
|
2620
|
+
* @csspart base - The component's base wrapper.
|
|
2621
|
+
*/
|
|
2622
|
+
export default class ZnColorPicker extends ZincElement {
|
|
2623
|
+
static styles: CSSResultGroup;
|
|
2624
|
+
area: HTMLElement;
|
|
2625
|
+
/** The colour, in any CSS colour syntax. Reads back as `#RRGGBB`. */
|
|
2626
|
+
value: string;
|
|
2627
|
+
/** The format being worked in. Focusing or editing a row switches to that row's format. */
|
|
2628
|
+
format: ColorFormat;
|
|
2629
|
+
label: string;
|
|
2630
|
+
private hsv;
|
|
2631
|
+
private editing;
|
|
2632
|
+
private get rgb();
|
|
2633
|
+
connectedCallback(): void;
|
|
2634
|
+
/** Moves focus to the colour area. */
|
|
2635
|
+
focus(options?: FocusOptions): void;
|
|
2636
|
+
handleValueChange(): void;
|
|
2637
|
+
private adopt;
|
|
2638
|
+
private commit;
|
|
2639
|
+
private useFormat;
|
|
2640
|
+
private pick;
|
|
2641
|
+
private handleAreaPointerDown;
|
|
2642
|
+
private handleAreaPointerMove;
|
|
2643
|
+
private handleAreaPointerUp;
|
|
2644
|
+
private handleAreaKeyDown;
|
|
2645
|
+
private handleHueInput;
|
|
2646
|
+
private field;
|
|
2647
|
+
private num;
|
|
2648
|
+
private handleFieldFocus;
|
|
2649
|
+
private handleFieldInput;
|
|
2650
|
+
private handleFieldBlur;
|
|
2651
|
+
/** The colour a row describes once `value` is written into its `key` field, or null when that value is out of range. */
|
|
2652
|
+
private readField;
|
|
2653
|
+
protected updated(changed: PropertyValues): void;
|
|
2654
|
+
private renderTrio;
|
|
2655
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
2656
|
+
}
|
|
2657
|
+
}
|
|
2658
|
+
declare module "components/color-picker/index" {
|
|
2659
|
+
import ZnColorPicker from "components/color-picker/color-picker.component";
|
|
2660
|
+
export * from "components/color-picker/color-picker.component";
|
|
2661
|
+
export default ZnColorPicker;
|
|
2662
|
+
global {
|
|
2663
|
+
interface HTMLElementTagNameMap {
|
|
2664
|
+
'zn-color-picker': ZnColorPicker;
|
|
2665
|
+
}
|
|
2666
|
+
}
|
|
2667
|
+
}
|
|
2164
2668
|
declare module "components/slash-item/slash-item.component" {
|
|
2165
2669
|
import ZincElement from "internal/zinc-element";
|
|
2166
2670
|
import type { CSSResultGroup } from 'lit';
|
|
@@ -2214,9 +2718,12 @@ declare module "components/slash-item/index" {
|
|
|
2214
2718
|
}
|
|
2215
2719
|
}
|
|
2216
2720
|
declare module "components/input/input.component" {
|
|
2721
|
+
import { type ColorFormat } from "utilities/color";
|
|
2217
2722
|
import { type SlashMenuItem } from "components/slash-menu/index";
|
|
2218
2723
|
import ZincElement from "internal/zinc-element";
|
|
2724
|
+
import ZnColorPicker from "components/color-picker/index";
|
|
2219
2725
|
import ZnIcon from "components/icon/index";
|
|
2726
|
+
import ZnPopup from "components/popup/index";
|
|
2220
2727
|
import ZnSlashItem from "components/slash-item/index";
|
|
2221
2728
|
import ZnSlashMenu from "components/slash-menu/index";
|
|
2222
2729
|
import ZnTooltip from "components/tooltip/index";
|
|
@@ -2227,7 +2734,9 @@ declare module "components/input/input.component" {
|
|
|
2227
2734
|
* @status experimental
|
|
2228
2735
|
* @since 1.0
|
|
2229
2736
|
*
|
|
2737
|
+
* @dependency zn-color-picker
|
|
2230
2738
|
* @dependency zn-icon
|
|
2739
|
+
* @dependency zn-popup
|
|
2231
2740
|
* @dependency zn-tooltip
|
|
2232
2741
|
*
|
|
2233
2742
|
* @event zn-blur - Emitted when the control loses focus.
|
|
@@ -2269,6 +2778,8 @@ declare module "components/input/input.component" {
|
|
|
2269
2778
|
* @csspart clear-button - The clear button.
|
|
2270
2779
|
* @csspart password-toggle-button - The password toggle button.
|
|
2271
2780
|
* @csspart suffix - The container that wraps the suffix.
|
|
2781
|
+
* @csspart color-swatch - The swatch that opens the colour panel on colour inputs.
|
|
2782
|
+
* @csspart color-picker - The colour panel.
|
|
2272
2783
|
*
|
|
2273
2784
|
* @cssproperty --zn-range-track-height - The height of a range input's track.
|
|
2274
2785
|
* @cssproperty --zn-range-track-color - The color of a range input's track.
|
|
@@ -2279,7 +2790,9 @@ declare module "components/input/input.component" {
|
|
|
2279
2790
|
export default class ZnInput extends ZincElement implements ZincFormControl {
|
|
2280
2791
|
static styles: import("lit").CSSResult[];
|
|
2281
2792
|
static dependencies: {
|
|
2793
|
+
'zn-color-picker': typeof ZnColorPicker;
|
|
2282
2794
|
'zn-icon': typeof ZnIcon;
|
|
2795
|
+
'zn-popup': typeof ZnPopup;
|
|
2283
2796
|
'zn-slash-item': typeof ZnSlashItem;
|
|
2284
2797
|
'zn-slash-menu': typeof ZnSlashMenu;
|
|
2285
2798
|
'zn-tooltip': typeof ZnTooltip;
|
|
@@ -2289,12 +2802,17 @@ declare module "components/input/input.component" {
|
|
|
2289
2802
|
private readonly localize;
|
|
2290
2803
|
private readonly slashController;
|
|
2291
2804
|
input: HTMLInputElement;
|
|
2292
|
-
|
|
2805
|
+
colorSwatch: HTMLButtonElement;
|
|
2806
|
+
colorPanel: ZnColorPicker;
|
|
2807
|
+
colorPopup: ZnPopup;
|
|
2293
2808
|
slashMenuElement: ZnSlashMenu | null;
|
|
2294
2809
|
private hasFocus;
|
|
2295
2810
|
/** Renders the slash menu only once it has been needed, keeping unused inputs cheap. */
|
|
2296
2811
|
private hasSlashMenu;
|
|
2297
2812
|
private isUserTyping;
|
|
2813
|
+
private colorOpen;
|
|
2814
|
+
private colorInvalid;
|
|
2815
|
+
private escapeSwallowed;
|
|
2298
2816
|
title: string;
|
|
2299
2817
|
private __numberInput;
|
|
2300
2818
|
private __dateInput;
|
|
@@ -2346,8 +2864,11 @@ declare module "components/input/input.component" {
|
|
|
2346
2864
|
passwordVisible: boolean;
|
|
2347
2865
|
/** Hides the browsers built-in increment/decrement spin buttons for number inputs **/
|
|
2348
2866
|
noSpinButtons: boolean;
|
|
2349
|
-
/**
|
|
2350
|
-
|
|
2867
|
+
/**
|
|
2868
|
+
* The format a colour input writes its value in. Typing a colour in another format, or working in another format's
|
|
2869
|
+
* row of the colour panel, switches to that format. Only applies when type is 'color'.
|
|
2870
|
+
*/
|
|
2871
|
+
colorFormat: ColorFormat;
|
|
2351
2872
|
/**
|
|
2352
2873
|
* Appended to the value that range inputs display above the track, on the right, e.g. `rem`. Only applies when type
|
|
2353
2874
|
* is 'range' and no `context-note` is set.
|
|
@@ -2361,6 +2882,8 @@ declare module "components/input/input.component" {
|
|
|
2361
2882
|
form: string;
|
|
2362
2883
|
/** Makes the input a required field. */
|
|
2363
2884
|
required: boolean;
|
|
2885
|
+
/** Short text shown next to the label, styled like the help text, e.g. `optional`. */
|
|
2886
|
+
labelNote: string;
|
|
2364
2887
|
/** A regular expression pattern to validate input against. */
|
|
2365
2888
|
pattern: string;
|
|
2366
2889
|
/** The minimum length of input that will be considered valid. */
|
|
@@ -2439,14 +2962,15 @@ declare module "components/input/input.component" {
|
|
|
2439
2962
|
/** Gets the validation message */
|
|
2440
2963
|
get validationMessage(): string;
|
|
2441
2964
|
private validateMinMax;
|
|
2442
|
-
|
|
2443
|
-
|
|
2444
|
-
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
private
|
|
2448
|
-
private
|
|
2449
|
-
private
|
|
2965
|
+
/**
|
|
2966
|
+
* A colour value as it should be shown: kept as written when it is already a tidy value in the current format (so
|
|
2967
|
+
* `oklch(70% 0.15 250)` isn't nudged by rounding), otherwise written out in full. Anything that isn't a colour is
|
|
2968
|
+
* returned untouched.
|
|
2969
|
+
*/
|
|
2970
|
+
private tidyColor;
|
|
2971
|
+
private get colorText();
|
|
2972
|
+
private get colorHex();
|
|
2973
|
+
private commitColor;
|
|
2450
2974
|
private handleBlur;
|
|
2451
2975
|
private handleChange;
|
|
2452
2976
|
private handleClearClick;
|
|
@@ -2457,9 +2981,14 @@ declare module "components/input/input.component" {
|
|
|
2457
2981
|
private handleKeyDown;
|
|
2458
2982
|
private handlePasswordToggle;
|
|
2459
2983
|
private handleColorSwatchClick;
|
|
2460
|
-
private
|
|
2984
|
+
private openColorPanel;
|
|
2985
|
+
private closeColorPanel;
|
|
2986
|
+
private handleColorDocumentMouseDown;
|
|
2987
|
+
private handleColorDocumentKeyDown;
|
|
2988
|
+
private handleColorPanelInput;
|
|
2461
2989
|
private focusInput;
|
|
2462
2990
|
protected firstUpdated(): void;
|
|
2991
|
+
disconnectedCallback(): void;
|
|
2463
2992
|
/** The insertions the slash menu offers, gathered from every source, in the order they were declared. */
|
|
2464
2993
|
resolveSlashItems(search?: string): Promise<SlashMenuItem[]>;
|
|
2465
2994
|
/** Opens the slash menu at the caret, inserting the trigger if it isn't already there. */
|
|
@@ -2571,30 +3100,6 @@ declare module "components/option/index" {
|
|
|
2571
3100
|
}
|
|
2572
3101
|
}
|
|
2573
3102
|
}
|
|
2574
|
-
declare module "internal/animate" {
|
|
2575
|
-
/**
|
|
2576
|
-
* Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
|
|
2577
|
-
*/
|
|
2578
|
-
export function animateTo(el: HTMLElement, keyframes: Keyframe[], options?: KeyframeAnimationOptions): Promise<unknown>;
|
|
2579
|
-
/** Parses a CSS duration and returns the number of milliseconds. */
|
|
2580
|
-
export function parseDuration(delay: number | string): number;
|
|
2581
|
-
/** Tells if the user has enabled the "reduced motion" setting in their browser or OS. */
|
|
2582
|
-
export function prefersReducedMotion(): boolean;
|
|
2583
|
-
/**
|
|
2584
|
-
* Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
|
|
2585
|
-
*/
|
|
2586
|
-
export function stopAnimations(el: HTMLElement): Promise<unknown[]>;
|
|
2587
|
-
/**
|
|
2588
|
-
* We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
|
|
2589
|
-
* element's scrollHeight before the animation.
|
|
2590
|
-
*/
|
|
2591
|
-
export function shimKeyframesHeightAuto(keyframes: Keyframe[], calculatedHeight: number): {
|
|
2592
|
-
height: string | number | null | undefined;
|
|
2593
|
-
composite?: CompositeOperationOrAuto;
|
|
2594
|
-
easing?: string;
|
|
2595
|
-
offset?: number | null;
|
|
2596
|
-
}[];
|
|
2597
|
-
}
|
|
2598
3103
|
declare module "internal/conditional" {
|
|
2599
3104
|
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
2600
3105
|
export interface ConditionalHost {
|
|
@@ -2625,32 +3130,6 @@ declare module "internal/conditional" {
|
|
|
2625
3130
|
private checkConditionals;
|
|
2626
3131
|
}
|
|
2627
3132
|
}
|
|
2628
|
-
declare module "utilities/animation-registry" {
|
|
2629
|
-
export interface ElementAnimation {
|
|
2630
|
-
keyframes: Keyframe[];
|
|
2631
|
-
rtlKeyframes?: Keyframe[];
|
|
2632
|
-
options?: KeyframeAnimationOptions;
|
|
2633
|
-
}
|
|
2634
|
-
export interface ElementAnimationMap {
|
|
2635
|
-
[animationName: string]: ElementAnimation;
|
|
2636
|
-
}
|
|
2637
|
-
export interface GetAnimationOptions {
|
|
2638
|
-
/**
|
|
2639
|
-
* The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
|
|
2640
|
-
* available using getAnimation().
|
|
2641
|
-
*/
|
|
2642
|
-
dir: string;
|
|
2643
|
-
}
|
|
2644
|
-
/**
|
|
2645
|
-
* Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
|
|
2646
|
-
* for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
|
|
2647
|
-
*/
|
|
2648
|
-
export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
|
|
2649
|
-
/** Sets a custom animation for the specified element. */
|
|
2650
|
-
export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
|
|
2651
|
-
/** Gets an element's animation. Falls back to the default if no animation is found. */
|
|
2652
|
-
export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
|
|
2653
|
-
}
|
|
2654
3133
|
declare module "components/opt-group/opt-group.component" {
|
|
2655
3134
|
import { type CSSResultGroup } from 'lit';
|
|
2656
3135
|
import ZincElement from "internal/zinc-element";
|
|
@@ -2785,6 +3264,7 @@ declare module "components/select/select.component" {
|
|
|
2785
3264
|
private readonly hasSlotController;
|
|
2786
3265
|
private readonly localize;
|
|
2787
3266
|
private typeToSelectString;
|
|
3267
|
+
private escapeSwallowed;
|
|
2788
3268
|
private typeToSelectTimeout;
|
|
2789
3269
|
private closeWatcher;
|
|
2790
3270
|
popup: ZnPopup;
|
|
@@ -2903,6 +3383,8 @@ declare module "components/select/select.component" {
|
|
|
2903
3383
|
form: string;
|
|
2904
3384
|
/** The select's required attribute. */
|
|
2905
3385
|
required: boolean;
|
|
3386
|
+
/** Short text shown next to the label, styled like the help text, e.g. `optional`. */
|
|
3387
|
+
labelNote: string;
|
|
2906
3388
|
cacheKey: string;
|
|
2907
3389
|
triggerSubmit: boolean;
|
|
2908
3390
|
/**
|
|
@@ -3016,6 +3498,7 @@ declare module "components/select/select.component" {
|
|
|
3016
3498
|
private _createFreeTextOption;
|
|
3017
3499
|
private handleOptionClick;
|
|
3018
3500
|
private handleDefaultSlotChange;
|
|
3501
|
+
private handleTagRemoveKeyDown;
|
|
3019
3502
|
private handleTagRemove;
|
|
3020
3503
|
private getAllOptions;
|
|
3021
3504
|
private getAllOptGroups;
|
|
@@ -3073,6 +3556,8 @@ declare module "components/select/select.component" {
|
|
|
3073
3556
|
private updateDependencies;
|
|
3074
3557
|
private updateDependencyState;
|
|
3075
3558
|
private toggleDisabled;
|
|
3559
|
+
private _expandIcon?;
|
|
3560
|
+
private expandIcon;
|
|
3076
3561
|
render(): TemplateResult<1>;
|
|
3077
3562
|
}
|
|
3078
3563
|
}
|
|
@@ -3148,6 +3633,7 @@ declare module "components/datepicker/datepicker.component" {
|
|
|
3148
3633
|
private readonly hasSlotController;
|
|
3149
3634
|
input: HTMLInputElement;
|
|
3150
3635
|
private hasFocus;
|
|
3636
|
+
private escapeSwallowed;
|
|
3151
3637
|
title: string;
|
|
3152
3638
|
/** The name of the input, submitted as a name/value pair with form data. */
|
|
3153
3639
|
name: string;
|
|
@@ -3187,6 +3673,8 @@ declare module "components/datepicker/datepicker.component" {
|
|
|
3187
3673
|
inline: boolean;
|
|
3188
3674
|
/** Makes the input a required field. */
|
|
3189
3675
|
required: boolean;
|
|
3676
|
+
/** Short text shown next to the label, styled like the help text, e.g. `optional`. */
|
|
3677
|
+
labelNote: string;
|
|
3190
3678
|
/** Adds a clear button to the calendar for removing a selected date. **/
|
|
3191
3679
|
clearable: boolean;
|
|
3192
3680
|
/** Makes the input a range picker. **/
|
|
@@ -3277,6 +3765,8 @@ declare module "components/datepicker/datepicker.component" {
|
|
|
3277
3765
|
private handleInvalid;
|
|
3278
3766
|
private handleKeyDown;
|
|
3279
3767
|
private handlePaste;
|
|
3768
|
+
private hideCalendarKeepingFocus;
|
|
3769
|
+
private handleInputClick;
|
|
3280
3770
|
private handleBlur;
|
|
3281
3771
|
private isValidDateString;
|
|
3282
3772
|
private parseDate;
|
|
@@ -3352,6 +3842,7 @@ declare module "components/query-builder/query-builder.component" {
|
|
|
3352
3842
|
NMatch = "nmatch",
|
|
3353
3843
|
Contains = "contains",
|
|
3354
3844
|
DoesNotContain = "doesnotcontain",
|
|
3845
|
+
DnContain = "dncontain",
|
|
3355
3846
|
Starts = "starts",
|
|
3356
3847
|
NStarts = "nstarts",
|
|
3357
3848
|
Ends = "ends",
|
|
@@ -3360,6 +3851,8 @@ declare module "components/query-builder/query-builder.component" {
|
|
|
3360
3851
|
NWild = "nwild",
|
|
3361
3852
|
Like = "like",
|
|
3362
3853
|
NLike = "nlike",
|
|
3854
|
+
LikeIn = "likein",
|
|
3855
|
+
NLikeIn = "nlikein",
|
|
3363
3856
|
Fuzzy = "fuzzy",
|
|
3364
3857
|
NFuzzy = "nfuzzy",
|
|
3365
3858
|
Gte = "gte",
|
|
@@ -3370,6 +3863,11 @@ declare module "components/query-builder/query-builder.component" {
|
|
|
3370
3863
|
export const operatorText: {
|
|
3371
3864
|
[key in QueryBuilderOperators]: string;
|
|
3372
3865
|
};
|
|
3866
|
+
export interface QueryBuilderRule {
|
|
3867
|
+
key: string;
|
|
3868
|
+
comparator: string;
|
|
3869
|
+
value: string | string[];
|
|
3870
|
+
}
|
|
3373
3871
|
export interface CreatedRule {
|
|
3374
3872
|
id: string;
|
|
3375
3873
|
name: string;
|
|
@@ -3413,6 +3911,10 @@ declare module "components/query-builder/query-builder.component" {
|
|
|
3413
3911
|
name: string;
|
|
3414
3912
|
value: PropertyKey;
|
|
3415
3913
|
showValues: string[];
|
|
3914
|
+
/** Rules to start with, in the shape the builder submits. */
|
|
3915
|
+
rules: QueryBuilderRule[];
|
|
3916
|
+
/** Allows a filter to be added more than once, e.g. for a date range. */
|
|
3917
|
+
repeatable: boolean;
|
|
3416
3918
|
private get _usedFilterIds();
|
|
3417
3919
|
get validationMessage(): string;
|
|
3418
3920
|
get validity(): ValidityState;
|
|
@@ -3421,6 +3923,9 @@ declare module "components/query-builder/query-builder.component" {
|
|
|
3421
3923
|
private _handleChange;
|
|
3422
3924
|
private _addRule;
|
|
3423
3925
|
private _createInput;
|
|
3926
|
+
private _inputValue;
|
|
3927
|
+
/** Reverses _updateDateValue, so a submitted date value can be shown again. */
|
|
3928
|
+
private _submittedDate;
|
|
3424
3929
|
private _changeValueInput;
|
|
3425
3930
|
private _createBooleanInput;
|
|
3426
3931
|
private _createNumberInput;
|
|
@@ -3454,101 +3959,120 @@ declare module "components/query-builder/index" {
|
|
|
3454
3959
|
}
|
|
3455
3960
|
declare module "components/data-table-filter/data-table-filter.component" {
|
|
3456
3961
|
import { type CSSResultGroup, nothing, type PropertyValues } from 'lit';
|
|
3457
|
-
import { type
|
|
3962
|
+
import { type QueryBuilderItem } from "components/query-builder/index";
|
|
3458
3963
|
import ZincElement, { type ZincFormControl } from "internal/zinc-element";
|
|
3459
3964
|
import ZnButton from "components/button/index";
|
|
3460
|
-
import
|
|
3461
|
-
import ZnDropdown from "components/dropdown/index";
|
|
3965
|
+
import ZnIcon from "components/icon/index";
|
|
3462
3966
|
import ZnInput from "components/input/index";
|
|
3463
|
-
import
|
|
3464
|
-
import
|
|
3967
|
+
import ZnOptGroup from "components/opt-group/index";
|
|
3968
|
+
import ZnOption from "components/option/index";
|
|
3969
|
+
import ZnSelect from "components/select/index";
|
|
3970
|
+
/** A field offered by the filter: a zn-query-builder filter whose operators may be left out. */
|
|
3971
|
+
export type FilterField = Omit<QueryBuilderItem, 'operators'> & {
|
|
3972
|
+
operators?: QueryBuilderItem['operators'] | string[];
|
|
3973
|
+
};
|
|
3974
|
+
export const FILTER_OPERATOR_LABELS: Record<string, string>;
|
|
3465
3975
|
/**
|
|
3466
|
-
* @summary
|
|
3976
|
+
* @summary The filter for data tables: a funnel that opens a field / operator / value builder, and chips for the
|
|
3977
|
+
* rules that apply.
|
|
3467
3978
|
* @documentation https://zinc.style/components/data-table-filter
|
|
3468
3979
|
* @status experimental
|
|
3469
3980
|
* @since 1.0
|
|
3470
3981
|
*
|
|
3471
3982
|
* @dependency zn-button
|
|
3472
|
-
* @dependency zn-
|
|
3473
|
-
* @dependency zn-dropdown
|
|
3983
|
+
* @dependency zn-icon
|
|
3474
3984
|
* @dependency zn-input
|
|
3475
|
-
* @dependency zn-
|
|
3476
|
-
* @dependency zn-
|
|
3985
|
+
* @dependency zn-opt-group
|
|
3986
|
+
* @dependency zn-option
|
|
3987
|
+
* @dependency zn-select
|
|
3477
3988
|
*
|
|
3478
|
-
* @event zn-filter-change - Emitted when the
|
|
3989
|
+
* @event zn-filter-change - Emitted when the applied rules change. Read the encoded query off `value`.
|
|
3990
|
+
* @event zn-clear - Emitted when `clear()` removes every rule.
|
|
3479
3991
|
*/
|
|
3480
3992
|
export default class ZnDataTableFilter extends ZincElement implements ZincFormControl {
|
|
3481
3993
|
static styles: CSSResultGroup;
|
|
3482
3994
|
static dependencies: {
|
|
3483
3995
|
'zn-button': typeof ZnButton;
|
|
3484
|
-
'zn-
|
|
3485
|
-
'zn-dropdown': typeof ZnDropdown;
|
|
3996
|
+
'zn-icon': typeof ZnIcon;
|
|
3486
3997
|
'zn-input': typeof ZnInput;
|
|
3487
|
-
'zn-
|
|
3488
|
-
'zn-
|
|
3998
|
+
'zn-opt-group': typeof ZnOptGroup;
|
|
3999
|
+
'zn-option': typeof ZnOption;
|
|
4000
|
+
'zn-select': typeof ZnSelect;
|
|
3489
4001
|
};
|
|
3490
4002
|
private _formController;
|
|
3491
|
-
private
|
|
3492
|
-
private
|
|
3493
|
-
|
|
4003
|
+
private readonly _popover;
|
|
4004
|
+
private _mirrors;
|
|
4005
|
+
private _emitted?;
|
|
4006
|
+
filters: FilterField[];
|
|
3494
4007
|
name: string;
|
|
3495
4008
|
value: string;
|
|
3496
|
-
/**
|
|
4009
|
+
/** Fields to offer an empty rule for when the builder opens with nothing applied. */
|
|
3497
4010
|
defaultFilters: string;
|
|
3498
|
-
/** Typeahead values per
|
|
4011
|
+
/** Typeahead values per field. `zn-data-table` fills this from the rows it has loaded. */
|
|
3499
4012
|
suggestions: Record<string, string[]>;
|
|
3500
|
-
|
|
4013
|
+
/**
|
|
4014
|
+
* Another filter to show the chips of. This element then renders only that filter's chips, and that filter stops
|
|
4015
|
+
* rendering its own, so a table can keep the funnel in its header and the chips under it.
|
|
4016
|
+
*/
|
|
4017
|
+
source: ZnDataTableFilter | null;
|
|
4018
|
+
private _rules;
|
|
3501
4019
|
private _typing;
|
|
3502
|
-
private
|
|
4020
|
+
private _fieldSearch;
|
|
3503
4021
|
get validationMessage(): string;
|
|
3504
4022
|
get validity(): ValidityState;
|
|
3505
4023
|
checkValidity(): boolean;
|
|
3506
4024
|
getForm(): HTMLFormElement | null;
|
|
3507
4025
|
reportValidity(): boolean;
|
|
3508
4026
|
setCustomValidity(): void;
|
|
3509
|
-
|
|
3510
|
-
protected updated(changed: PropertyValues): void;
|
|
3511
|
-
protected willUpdate(changed: PropertyValues): void;
|
|
3512
|
-
disconnectedCallback(): void;
|
|
3513
|
-
/** Number of filters with a value set. */
|
|
4027
|
+
/** Number of rules that apply. */
|
|
3514
4028
|
get activeCount(): number;
|
|
3515
|
-
/**
|
|
4029
|
+
/** Opens the filter builder. */
|
|
4030
|
+
show(): void;
|
|
4031
|
+
/** Closes the filter builder. */
|
|
4032
|
+
hide(): void;
|
|
4033
|
+
/** Removes every rule. */
|
|
3516
4034
|
clear(): void;
|
|
3517
|
-
|
|
3518
|
-
|
|
3519
|
-
|
|
4035
|
+
protected firstUpdated(changed: PropertyValues): void;
|
|
4036
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
4037
|
+
protected updated(changed: PropertyValues): void;
|
|
4038
|
+
connectedCallback(): void;
|
|
4039
|
+
disconnectedCallback(): void;
|
|
4040
|
+
private mirror;
|
|
4041
|
+
private unmirror;
|
|
4042
|
+
private readValue;
|
|
4043
|
+
/** The complete rules in `value`, which the builder's edits only reach once they are applied. */
|
|
4044
|
+
private committed;
|
|
4045
|
+
private decoded;
|
|
4046
|
+
private ruleFrom;
|
|
4047
|
+
private field;
|
|
4048
|
+
private operators;
|
|
3520
4049
|
private operatorLabel;
|
|
3521
|
-
private isMultiple;
|
|
3522
4050
|
private optionsFor;
|
|
3523
|
-
private
|
|
3524
|
-
private
|
|
3525
|
-
private
|
|
3526
|
-
private
|
|
3527
|
-
private
|
|
3528
|
-
private
|
|
3529
|
-
private
|
|
3530
|
-
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
* needs the filters schema present to resolve each key. Sets `_active` directly so it neither
|
|
3534
|
-
* re-emits nor overwrites the value it just read.
|
|
3535
|
-
*/
|
|
3536
|
-
private hydrateFromValue;
|
|
3537
|
-
private handleDateInput;
|
|
4051
|
+
private isMultiple;
|
|
4052
|
+
private isDate;
|
|
4053
|
+
private humanize;
|
|
4054
|
+
private isComplete;
|
|
4055
|
+
private values;
|
|
4056
|
+
private ruleText;
|
|
4057
|
+
private setLocal;
|
|
4058
|
+
private setRules;
|
|
4059
|
+
private updateRule;
|
|
4060
|
+
private dateChange;
|
|
3538
4061
|
private serializeDate;
|
|
3539
|
-
private
|
|
4062
|
+
private parseDate;
|
|
4063
|
+
private dateInputValue;
|
|
3540
4064
|
private suggestionsFor;
|
|
3541
4065
|
private applySuggestion;
|
|
3542
|
-
private
|
|
3543
|
-
private
|
|
3544
|
-
private
|
|
3545
|
-
private
|
|
3546
|
-
private
|
|
3547
|
-
private
|
|
3548
|
-
private
|
|
3549
|
-
private
|
|
3550
|
-
private
|
|
3551
|
-
private
|
|
4066
|
+
private keepFocus;
|
|
4067
|
+
private toggle;
|
|
4068
|
+
private apply;
|
|
4069
|
+
private discard;
|
|
4070
|
+
private renderToggle;
|
|
4071
|
+
private renderPopover;
|
|
4072
|
+
private renderRule;
|
|
4073
|
+
private renderValue;
|
|
4074
|
+
private renderSuggestions;
|
|
4075
|
+
private renderChips;
|
|
3552
4076
|
render(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
3553
4077
|
}
|
|
3554
4078
|
}
|
|
@@ -3832,6 +4356,8 @@ declare module "components/empty-state/empty-state.component" {
|
|
|
3832
4356
|
description: string;
|
|
3833
4357
|
type: 'error' | 'info' | 'primary' | '';
|
|
3834
4358
|
padded: boolean;
|
|
4359
|
+
/** Draws the icon small inside a tinted, rounded tile rather than as a large glyph. */
|
|
4360
|
+
tile: boolean;
|
|
3835
4361
|
private readonly hasSlotController;
|
|
3836
4362
|
render(): import("lit-html").TemplateResult<1>;
|
|
3837
4363
|
}
|
|
@@ -3925,17 +4451,24 @@ declare module "components/panel/panel.component" {
|
|
|
3925
4451
|
* @csspart base - The component's base wrapper.
|
|
3926
4452
|
* @csspart header - The header region, when a caption or actions are given.
|
|
3927
4453
|
* @csspart header-content - The padded row inside the header, forwarded from zn-header.
|
|
4454
|
+
* @csspart header-left - The caption and description, forwarded from zn-header.
|
|
3928
4455
|
* @csspart footer - The footer region, when the footer slot is filled.
|
|
3929
4456
|
*
|
|
3930
4457
|
* @cssproperty --zn-panel-basis - The flex-basis of the panel. Can be set using the basis-px attribute.
|
|
3931
4458
|
* @cssproperty --zn-panel-header-padding - Padding around the header row. Defaults to `--zn-base-gap`.
|
|
3932
4459
|
* @cssproperty --zn-panel-footer-padding - Padding around the footer row.
|
|
4460
|
+
* @cssproperty --zn-panel-padding - Padding around the body. Defaults to `--zn-base-gap`.
|
|
4461
|
+
* @cssproperty --zn-panel-shadow - Resting shadow. Defaults to none.
|
|
3933
4462
|
*/
|
|
3934
4463
|
export default class ZnPanel extends ZincElement {
|
|
3935
4464
|
static styles: CSSResultGroup;
|
|
3936
4465
|
private readonly hasSlotController;
|
|
3937
4466
|
basis: number;
|
|
3938
4467
|
caption: string;
|
|
4468
|
+
/** Help text under the caption, in the panel's header. */
|
|
4469
|
+
description: string;
|
|
4470
|
+
/** Sets the description beside the caption rather than under it. */
|
|
4471
|
+
inlineDescription: boolean;
|
|
3939
4472
|
icon: string;
|
|
3940
4473
|
tabbed: boolean;
|
|
3941
4474
|
headerBorderless: boolean;
|
|
@@ -3978,7 +4511,7 @@ declare module "components/skeleton/skeleton.component" {
|
|
|
3978
4511
|
* @property {string} speed - Animation speed for the shimmer effect. Default: "3s"
|
|
3979
4512
|
* @property {string} width - Width of the skeleton element. Default: "100%"
|
|
3980
4513
|
* @property {string} height - Height of the skeleton element. Default: "20px"
|
|
3981
|
-
* @property {string} radius - Border radius of the skeleton element.
|
|
4514
|
+
* @property {string} radius - Border radius of the skeleton element. Defaults to the theme's `--zn-skeleton-border-radius` (4px).
|
|
3982
4515
|
*/
|
|
3983
4516
|
export default class ZnSkeleton extends ZincElement {
|
|
3984
4517
|
static styles: CSSResultGroup;
|
|
@@ -4040,14 +4573,16 @@ declare module "components/style/index" {
|
|
|
4040
4573
|
}
|
|
4041
4574
|
declare module "components/data-table/data-table.component" {
|
|
4042
4575
|
import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
|
|
4576
|
+
import { type TableTab } from "internal/table-tabs";
|
|
4043
4577
|
import { type ZnFilterChangeEvent } from "events/zn-filter-change";
|
|
4044
4578
|
import { type ZnSearchChangeEvent } from "events/zn-search-change";
|
|
4045
4579
|
import ZincElement from "internal/zinc-element";
|
|
4046
4580
|
import ZnAlert from "components/alert/index";
|
|
4581
|
+
import ZnBadge from "components/badge/index";
|
|
4047
4582
|
import ZnButton from "components/button/index";
|
|
4048
|
-
import ZnButtonGroup from "components/button-group/index";
|
|
4049
4583
|
import ZnChip from "components/chip/index";
|
|
4050
4584
|
import ZnConfirm from "components/confirm/index";
|
|
4585
|
+
import ZnDataTableFilter, { type FilterField } from "components/data-table-filter/index";
|
|
4051
4586
|
import ZnDataTableSearch from "components/data-table-search/index";
|
|
4052
4587
|
import ZnDropdown from "components/dropdown/index";
|
|
4053
4588
|
import ZnEmptyState from "components/empty-state/index";
|
|
@@ -4057,6 +4592,11 @@ declare module "components/data-table/data-table.component" {
|
|
|
4057
4592
|
import ZnPanel from "components/panel/index";
|
|
4058
4593
|
import ZnSkeleton from "components/skeleton/index";
|
|
4059
4594
|
import ZnStyle from "components/style/index";
|
|
4595
|
+
import ZnIcon from "components/icon/index";
|
|
4596
|
+
import ZnInput from "components/input/index";
|
|
4597
|
+
import ZnOptGroup from "components/opt-group/index";
|
|
4598
|
+
import ZnOption from "components/option/index";
|
|
4599
|
+
import ZnSelect from "components/select/index";
|
|
4060
4600
|
interface Cell {
|
|
4061
4601
|
text: string;
|
|
4062
4602
|
subText?: string;
|
|
@@ -4070,6 +4610,8 @@ declare module "components/data-table/data-table.component" {
|
|
|
4070
4610
|
hoverContent?: string;
|
|
4071
4611
|
hoverPlacement?: string;
|
|
4072
4612
|
chipColor?: string;
|
|
4613
|
+
badgeType?: string;
|
|
4614
|
+
badgeDot?: boolean;
|
|
4073
4615
|
gaid?: string;
|
|
4074
4616
|
sortValue?: string;
|
|
4075
4617
|
uri?: string;
|
|
@@ -4135,6 +4677,7 @@ declare module "components/data-table/data-table.component" {
|
|
|
4135
4677
|
hideColumn?: boolean;
|
|
4136
4678
|
secondary?: boolean;
|
|
4137
4679
|
type?: string;
|
|
4680
|
+
align?: 'left' | 'right' | 'center';
|
|
4138
4681
|
cellTemplate?: Cell;
|
|
4139
4682
|
ifEmpty?: Cell;
|
|
4140
4683
|
}
|
|
@@ -4146,6 +4689,7 @@ declare module "components/data-table/data-table.component" {
|
|
|
4146
4689
|
* @since 1.0
|
|
4147
4690
|
*
|
|
4148
4691
|
* @dependency zn-alert
|
|
4692
|
+
* @dependency zn-badge
|
|
4149
4693
|
* @dependency zn-button
|
|
4150
4694
|
* @dependency zn-empty-state
|
|
4151
4695
|
* @dependency zn-chip
|
|
@@ -4154,7 +4698,6 @@ declare module "components/data-table/data-table.component" {
|
|
|
4154
4698
|
* @dependency zn-menu
|
|
4155
4699
|
* @dependency zn-menu-item
|
|
4156
4700
|
* @dependency zn-panel
|
|
4157
|
-
* @dependency zn-button-group
|
|
4158
4701
|
* @dependency zn-confirm
|
|
4159
4702
|
* @dependency zn-skeleton
|
|
4160
4703
|
* @dependency zn-data-table-search
|
|
@@ -4180,6 +4723,7 @@ declare module "components/data-table/data-table.component" {
|
|
|
4180
4723
|
static styles: CSSResultGroup;
|
|
4181
4724
|
static dependencies: {
|
|
4182
4725
|
'zn-alert': typeof ZnAlert;
|
|
4726
|
+
'zn-badge': typeof ZnBadge;
|
|
4183
4727
|
'zn-button': typeof ZnButton;
|
|
4184
4728
|
'zn-empty-state': typeof ZnEmptyState;
|
|
4185
4729
|
'zn-chip': typeof ZnChip;
|
|
@@ -4188,11 +4732,16 @@ declare module "components/data-table/data-table.component" {
|
|
|
4188
4732
|
'zn-menu': typeof ZnMenu;
|
|
4189
4733
|
'zn-menu-item': typeof ZnMenuItem;
|
|
4190
4734
|
'zn-panel': typeof ZnPanel;
|
|
4191
|
-
'zn-button-group': typeof ZnButtonGroup;
|
|
4192
4735
|
'zn-confirm': typeof ZnConfirm;
|
|
4193
4736
|
'zn-skeleton': typeof ZnSkeleton;
|
|
4194
4737
|
'zn-style': typeof ZnStyle;
|
|
4738
|
+
'zn-icon': typeof ZnIcon;
|
|
4739
|
+
'zn-input': typeof ZnInput;
|
|
4740
|
+
'zn-opt-group': typeof ZnOptGroup;
|
|
4741
|
+
'zn-option': typeof ZnOption;
|
|
4742
|
+
'zn-select': typeof ZnSelect;
|
|
4195
4743
|
'zn-data-table-search': typeof ZnDataTableSearch;
|
|
4744
|
+
'zn-data-table-filter': typeof ZnDataTableFilter;
|
|
4196
4745
|
};
|
|
4197
4746
|
dataUri: string;
|
|
4198
4747
|
data: Row[] | Row;
|
|
@@ -4216,6 +4765,25 @@ declare module "components/data-table/data-table.component" {
|
|
|
4216
4765
|
caption: string;
|
|
4217
4766
|
emptyStateCaption: string;
|
|
4218
4767
|
emptyStateIcon: string;
|
|
4768
|
+
/** Unit for the row total shown with the caption: "publishers" reads "16 publishers". */
|
|
4769
|
+
totalLabel: string;
|
|
4770
|
+
/** Unit used when the total is exactly one: "publisher" reads "1 publisher". Falls back to `total-label`. */
|
|
4771
|
+
totalLabelSingular: string;
|
|
4772
|
+
/** Tabs rendered inside the table. The selected tab's value is sent as `tab-param` with every request. */
|
|
4773
|
+
tabs: TableTab[];
|
|
4774
|
+
tabParam: string;
|
|
4775
|
+
/** Draws the tabs as a segmented control: a grey track with a pill that slides to the selected tab. */
|
|
4776
|
+
pillTabs: boolean;
|
|
4777
|
+
/** The selected tab's value; the first tab when empty. */
|
|
4778
|
+
tab: string;
|
|
4779
|
+
/**
|
|
4780
|
+
* Fields for the funnel's filter builder. When set, the table renders its own zn-data-table-filter in the
|
|
4781
|
+
* header, in place of the `filter` slot, and the applied rules show as chips under the tabs. Rules are sent
|
|
4782
|
+
* as `filter`.
|
|
4783
|
+
*/
|
|
4784
|
+
filterFields: FilterField[];
|
|
4785
|
+
private readonly _fieldsFilter;
|
|
4786
|
+
private readonly _tabRow;
|
|
4219
4787
|
filters: [];
|
|
4220
4788
|
method: 'GET' | 'POST';
|
|
4221
4789
|
noInitialLoad: boolean;
|
|
@@ -4237,6 +4805,7 @@ declare module "components/data-table/data-table.component" {
|
|
|
4237
4805
|
private _hasLoadedData;
|
|
4238
4806
|
private _lastLoadHadRows;
|
|
4239
4807
|
private _lastTableContent;
|
|
4808
|
+
private _headObserver;
|
|
4240
4809
|
private _sharableInitialised;
|
|
4241
4810
|
private _sharableDefaults;
|
|
4242
4811
|
private readonly _urlManagedKeys;
|
|
@@ -4256,13 +4825,29 @@ declare module "components/data-table/data-table.component" {
|
|
|
4256
4825
|
private _hiddenCells;
|
|
4257
4826
|
private _secondaryHeaders;
|
|
4258
4827
|
private _deselectedColumns;
|
|
4259
|
-
private
|
|
4828
|
+
private _columnOrder;
|
|
4829
|
+
private readonly reorderController;
|
|
4260
4830
|
private _columnDefaultsApplied;
|
|
4261
4831
|
private _formatTemplates;
|
|
4262
4832
|
requestParams: Record<string, any>;
|
|
4263
|
-
refresh(): void
|
|
4833
|
+
refresh(): Promise<void>;
|
|
4264
4834
|
private visibleHeaders;
|
|
4265
4835
|
private selectableHeaders;
|
|
4836
|
+
/** @internal ReorderHost: the visible columns' keys in order. */
|
|
4837
|
+
reorderKeys(): string[];
|
|
4838
|
+
/** @internal ReorderHost: puts the visible columns in a new order, leaving deselected ones in their slots. */
|
|
4839
|
+
applyReorder(keys: string[]): void;
|
|
4840
|
+
/** @internal ReorderHost: the heading drawn for a column. */
|
|
4841
|
+
reorderRow(key: string): HTMLElement;
|
|
4842
|
+
/** @internal ReorderHost: the heading and every cell of a column. */
|
|
4843
|
+
reorderSlides(key: string): HTMLElement[];
|
|
4844
|
+
private reorderable;
|
|
4845
|
+
private renderDropLine;
|
|
4846
|
+
/** @internal ReorderHost: a column lands anywhere over the table, not just its headings. */
|
|
4847
|
+
reorderArea(): HTMLElement | null;
|
|
4848
|
+
/** @internal ReorderHost: the column's label, as a copy of the whole heading is unusable for a wide or wrapped one. */
|
|
4849
|
+
reorderGhost(key: string): HTMLDivElement;
|
|
4850
|
+
private columnCells;
|
|
4266
4851
|
private isColumnVisible;
|
|
4267
4852
|
private applyColumnDefaults;
|
|
4268
4853
|
private toggleColumn;
|
|
@@ -4294,13 +4879,13 @@ declare module "components/data-table/data-table.component" {
|
|
|
4294
4879
|
*/
|
|
4295
4880
|
private _updateSharableUrl;
|
|
4296
4881
|
render(): TemplateResult<1>;
|
|
4882
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
4297
4883
|
connectedCallback(): void;
|
|
4298
4884
|
protected firstUpdated(): void;
|
|
4299
4885
|
protected updated(changed: PropertyValues): void;
|
|
4300
4886
|
private publishFilterSuggestions;
|
|
4301
4887
|
private getTemplate;
|
|
4302
4888
|
disconnectedCallback(): void;
|
|
4303
|
-
filterClearListener: (e: Event) => void;
|
|
4304
4889
|
filterChangeListener: (e: ZnFilterChangeEvent) => void;
|
|
4305
4890
|
searchChangeListener: (e: ZnSearchChangeEvent) => void;
|
|
4306
4891
|
private get isNarrowed();
|
|
@@ -4310,12 +4895,22 @@ declare module "components/data-table/data-table.component" {
|
|
|
4310
4895
|
humanize(str: string): string;
|
|
4311
4896
|
renderTableData(groups: RowGroup[], error?: ResponseError): TemplateResult<1>;
|
|
4312
4897
|
private tableContent;
|
|
4898
|
+
private observeHead;
|
|
4313
4899
|
getTableHeader(): TemplateResult<1>;
|
|
4900
|
+
private totalText;
|
|
4901
|
+
private activeTab;
|
|
4902
|
+
private renderTabs;
|
|
4903
|
+
private selectTab;
|
|
4904
|
+
private renderToolbar;
|
|
4905
|
+
private _toolbarQueued;
|
|
4906
|
+
private toolbarChanged;
|
|
4907
|
+
private toolbarParams;
|
|
4314
4908
|
private getHeaderControls;
|
|
4315
4909
|
private hasRows;
|
|
4316
|
-
private
|
|
4317
|
-
private
|
|
4318
|
-
private
|
|
4910
|
+
private getFilter;
|
|
4911
|
+
private filterSource;
|
|
4912
|
+
private renderFilterChips;
|
|
4913
|
+
private fieldsFilterChange;
|
|
4319
4914
|
private hasColumnSelect;
|
|
4320
4915
|
private hasRefresh;
|
|
4321
4916
|
private getColumnSelect;
|
|
@@ -4328,10 +4923,12 @@ declare module "components/data-table/data-table.component" {
|
|
|
4328
4923
|
getPagination(): TemplateResult<1> | null;
|
|
4329
4924
|
getActions(): TemplateResult<1>[];
|
|
4330
4925
|
private getActionsMenu;
|
|
4926
|
+
private hideActionSources;
|
|
4331
4927
|
private actionTrigger;
|
|
4332
4928
|
private actionLabel;
|
|
4333
4929
|
private runAction;
|
|
4334
4930
|
goToPage(page: number): void;
|
|
4931
|
+
private keepPagerFocus;
|
|
4335
4932
|
goToFirstPage(): void;
|
|
4336
4933
|
goToPreviousPage(): void;
|
|
4337
4934
|
goToNextPage(): void;
|
|
@@ -4345,10 +4942,8 @@ declare module "components/data-table/data-table.component" {
|
|
|
4345
4942
|
updateSort(key: string): () => void;
|
|
4346
4943
|
renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement;
|
|
4347
4944
|
private updateActionKeys;
|
|
4348
|
-
private getTableSortIcon;
|
|
4349
4945
|
private renderCellHeader;
|
|
4350
4946
|
private sortState;
|
|
4351
|
-
private handleSortKeyDown;
|
|
4352
4947
|
private renderCellBody;
|
|
4353
4948
|
private hasHiddenColumns;
|
|
4354
4949
|
private renderExpanderCell;
|
|
@@ -4356,6 +4951,7 @@ declare module "components/data-table/data-table.component" {
|
|
|
4356
4951
|
private toggleRowExpansion;
|
|
4357
4952
|
private isRowSelected;
|
|
4358
4953
|
private pruneSelectedRows;
|
|
4954
|
+
/** Rows are selectable when an action works on the selection; creating does not. */
|
|
4359
4955
|
private isSelectable;
|
|
4360
4956
|
private renderSelectAllCheckbox;
|
|
4361
4957
|
private renderRowCheckbox;
|
|
@@ -4382,6 +4978,557 @@ declare module "components/data-table/index" {
|
|
|
4382
4978
|
}
|
|
4383
4979
|
}
|
|
4384
4980
|
}
|
|
4981
|
+
declare module "components/report-table/report-math" {
|
|
4982
|
+
import type { FilterField } from "components/data-table-filter/data-table-filter.component";
|
|
4983
|
+
export interface ReportValues {
|
|
4984
|
+
[key: string]: number | string | ReportValues;
|
|
4985
|
+
}
|
|
4986
|
+
export type ReportFormat = 'number' | 'decimal' | 'percent' | 'currency' | 'financial' | 'duration' | 'text';
|
|
4987
|
+
export type ReportStyle = 'none' | 'breakeven' | 'ibreakeven' | 'bold';
|
|
4988
|
+
export interface ReportColumn {
|
|
4989
|
+
key: string;
|
|
4990
|
+
label: string;
|
|
4991
|
+
format?: ReportFormat;
|
|
4992
|
+
decimals?: number;
|
|
4993
|
+
style?: ReportStyle;
|
|
4994
|
+
threshold?: number;
|
|
4995
|
+
summable?: boolean;
|
|
4996
|
+
currency?: string;
|
|
4997
|
+
value?: string;
|
|
4998
|
+
formula?: string;
|
|
4999
|
+
}
|
|
5000
|
+
export interface ReportGroup {
|
|
5001
|
+
label: string;
|
|
5002
|
+
columns: ReportColumn[];
|
|
5003
|
+
}
|
|
5004
|
+
export interface ReportLink {
|
|
5005
|
+
uri: string;
|
|
5006
|
+
target?: string;
|
|
5007
|
+
}
|
|
5008
|
+
export interface ReportRow {
|
|
5009
|
+
id: string;
|
|
5010
|
+
label: string;
|
|
5011
|
+
uri?: string;
|
|
5012
|
+
target?: string;
|
|
5013
|
+
values: ReportValues;
|
|
5014
|
+
links?: Record<string, ReportLink>;
|
|
5015
|
+
}
|
|
5016
|
+
export interface ReportOption {
|
|
5017
|
+
value: string;
|
|
5018
|
+
label: string;
|
|
5019
|
+
category?: string;
|
|
5020
|
+
}
|
|
5021
|
+
export type ReportFilterField = FilterField;
|
|
5022
|
+
export interface ReportResponse {
|
|
5023
|
+
dimension?: {
|
|
5024
|
+
label: string;
|
|
5025
|
+
};
|
|
5026
|
+
groups: ReportGroup[];
|
|
5027
|
+
rows: ReportRow[];
|
|
5028
|
+
totals?: Record<string, number>;
|
|
5029
|
+
currency?: string;
|
|
5030
|
+
groupBy?: string;
|
|
5031
|
+
groupBys?: ReportOption[];
|
|
5032
|
+
filterFields?: ReportFilterField[];
|
|
5033
|
+
error?: {
|
|
5034
|
+
text: string;
|
|
5035
|
+
icon?: string;
|
|
5036
|
+
level?: string;
|
|
5037
|
+
};
|
|
5038
|
+
}
|
|
5039
|
+
type Formula = (values: ReportValues) => number;
|
|
5040
|
+
export function resolvePath(values: ReportValues | undefined, path: string): number;
|
|
5041
|
+
export function compileFormula(source: string): Formula;
|
|
5042
|
+
export function columnValue(column: ReportColumn, values: ReportValues): number;
|
|
5043
|
+
export function aggregate(rows: ReportValues[]): ReportValues;
|
|
5044
|
+
export function computeTotals(columns: ReportColumn[], rows: ReportRow[]): Record<string, number | null>;
|
|
5045
|
+
}
|
|
5046
|
+
declare module "components/date-range/date-range-math" {
|
|
5047
|
+
export type Iso = string;
|
|
5048
|
+
export interface DatePreset {
|
|
5049
|
+
label: string;
|
|
5050
|
+
from: Iso;
|
|
5051
|
+
to: Iso;
|
|
5052
|
+
}
|
|
5053
|
+
export interface RangeState {
|
|
5054
|
+
from: Iso | '';
|
|
5055
|
+
to: Iso | '';
|
|
5056
|
+
}
|
|
5057
|
+
export function toUtc(iso: Iso): Date;
|
|
5058
|
+
export function fromUtc(date: Date): Iso;
|
|
5059
|
+
export function isIso(value: unknown): value is Iso;
|
|
5060
|
+
export function addDays(iso: Iso, days: number): Iso;
|
|
5061
|
+
/** The same day `months` away, clamped to the target month's last day. */
|
|
5062
|
+
export function addMonths(iso: Iso, months: number): Iso;
|
|
5063
|
+
export function daysBetween(from: Iso, to: Iso): number;
|
|
5064
|
+
export function todayIso(now?: Date): Iso;
|
|
5065
|
+
export function defaultPresets(today: Iso): DatePreset[];
|
|
5066
|
+
export function monthGrid(year: number, month0: number, weekStart?: number): (Iso | null)[];
|
|
5067
|
+
export function formatDate(iso: Iso): string;
|
|
5068
|
+
export function rangeLabel(from: Iso, to: Iso): string;
|
|
5069
|
+
export function clampRange(range: {
|
|
5070
|
+
from: Iso;
|
|
5071
|
+
to: Iso;
|
|
5072
|
+
}, min: Iso | '', max: Iso | ''): {
|
|
5073
|
+
from: Iso;
|
|
5074
|
+
to: Iso;
|
|
5075
|
+
} | null;
|
|
5076
|
+
export function pick(state: RangeState, day: Iso): {
|
|
5077
|
+
from: Iso;
|
|
5078
|
+
to: Iso | '';
|
|
5079
|
+
};
|
|
5080
|
+
}
|
|
5081
|
+
declare module "components/report-table/report-format" {
|
|
5082
|
+
import type { ReportColumn } from "components/report-table/report-math";
|
|
5083
|
+
export function displayDecimals(column: ReportColumn): number;
|
|
5084
|
+
export function formatValue(column: ReportColumn, value: number | string | null, opts: {
|
|
5085
|
+
currency: string;
|
|
5086
|
+
locale?: string;
|
|
5087
|
+
}): string;
|
|
5088
|
+
export function unitLabel(column: ReportColumn, currency: string): string;
|
|
5089
|
+
export function toneClass(column: ReportColumn, value: number | null): 'report__pos' | 'report__neg' | '';
|
|
5090
|
+
}
|
|
5091
|
+
declare module "internal/pointer-intent" {
|
|
5092
|
+
import type { ReactiveController, ReactiveControllerHost } from 'lit';
|
|
5093
|
+
/**
|
|
5094
|
+
* Tells a control whether its latest state change came from a pointer press, so keyboard and
|
|
5095
|
+
* programmatic changes (arrow keys, select-all, value sync) can skip their animation.
|
|
5096
|
+
*/
|
|
5097
|
+
export class PointerIntentController implements ReactiveController {
|
|
5098
|
+
private host;
|
|
5099
|
+
private pressed;
|
|
5100
|
+
private readonly handlePointerDown;
|
|
5101
|
+
private readonly handleKeyDown;
|
|
5102
|
+
private readonly handleClick;
|
|
5103
|
+
constructor(host: ReactiveControllerHost & HTMLElement);
|
|
5104
|
+
hostConnected(): void;
|
|
5105
|
+
hostDisconnected(): void;
|
|
5106
|
+
/** Whether the change being handled now was pointer-initiated. Call synchronously from the state-change handler. */
|
|
5107
|
+
consume(): boolean;
|
|
5108
|
+
}
|
|
5109
|
+
}
|
|
5110
|
+
declare module "internal/selection-card" {
|
|
5111
|
+
/** Where a selection card renders its image, relative to the card's text. */
|
|
5112
|
+
export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
|
|
5113
|
+
/**
|
|
5114
|
+
* Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
|
|
5115
|
+
* inline position, except on a plain contained radio or checkbox which hides it like `none`.
|
|
5116
|
+
*/
|
|
5117
|
+
export type SelectionCardControlPosition = 'start' | 'none' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
5118
|
+
}
|
|
5119
|
+
declare module "components/checkbox/checkbox.component" {
|
|
5120
|
+
import { type CSSResultGroup } from 'lit';
|
|
5121
|
+
import ZincElement from "internal/zinc-element";
|
|
5122
|
+
import ZnIcon from "components/icon/index";
|
|
5123
|
+
import type { SelectionCardControlPosition, SelectionCardImagePosition } from "internal/selection-card";
|
|
5124
|
+
import type { ZincFormControl } from "internal/zinc-element";
|
|
5125
|
+
type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
|
|
5126
|
+
/**
|
|
5127
|
+
* @summary Short summary of the component's intended use.
|
|
5128
|
+
* @documentation https://zinc.style/components/checkbox
|
|
5129
|
+
* @status experimental
|
|
5130
|
+
* @since 1.0
|
|
5131
|
+
*
|
|
5132
|
+
* @dependency zn-icon
|
|
5133
|
+
*
|
|
5134
|
+
* @slot - The checkbox's label.
|
|
5135
|
+
* @slot image - Replaces the built-in image used by contained checkboxes.
|
|
5136
|
+
* @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
|
|
5137
|
+
* @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
|
|
5138
|
+
*
|
|
5139
|
+
* @event zn-blur - Emitted when the checkbox loses focus.
|
|
5140
|
+
* @event zn-change - Emitted when the checked state changes.
|
|
5141
|
+
* @event zn-focus - Emitted when the checkbox gains focus.
|
|
5142
|
+
* @event zn-input - Emitted when the checkbox receives input.
|
|
5143
|
+
* @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
5144
|
+
*
|
|
5145
|
+
* @csspart base - The component's base wrapper.
|
|
5146
|
+
* @csspart control - The square container that wraps the checkbox's checked state.
|
|
5147
|
+
* @csspart control--checked - Matches the control part when the checkbox is checked.
|
|
5148
|
+
* @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
|
|
5149
|
+
* @csspart checked-icon - The checked icon, an `<zn-icon>` element.
|
|
5150
|
+
* @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
|
|
5151
|
+
* @csspart indeterminate-icon - The indeterminate icon, an `<svg>` element.
|
|
5152
|
+
* @csspart image-container - The wrapper around the built-in image or image slot.
|
|
5153
|
+
* @csspart image - The built-in image.
|
|
5154
|
+
* @csspart card-title - The title inside a selection card.
|
|
5155
|
+
* @csspart label - The container that wraps the checkbox's label.
|
|
5156
|
+
* @csspart description - The container that wraps the checkbox's description.
|
|
5157
|
+
* @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
|
|
5158
|
+
*
|
|
5159
|
+
* @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
|
|
5160
|
+
* @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
|
|
5161
|
+
* @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
|
|
5162
|
+
* @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
|
|
5163
|
+
* @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
|
|
5164
|
+
* @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
|
|
5165
|
+
* @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
|
|
5166
|
+
* @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
|
|
5167
|
+
* @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
|
|
5168
|
+
*/
|
|
5169
|
+
export default class ZnCheckbox extends ZincElement implements ZincFormControl {
|
|
5170
|
+
static styles: CSSResultGroup;
|
|
5171
|
+
static dependencies: {
|
|
5172
|
+
'zn-icon': typeof ZnIcon;
|
|
5173
|
+
};
|
|
5174
|
+
private readonly formControlController;
|
|
5175
|
+
private readonly hasSlotController;
|
|
5176
|
+
private readonly pointerIntent;
|
|
5177
|
+
input: HTMLInputElement;
|
|
5178
|
+
control: HTMLElement;
|
|
5179
|
+
private hasFocus;
|
|
5180
|
+
title: string;
|
|
5181
|
+
/** The name of the checkbox, submitted as a name/value pair with form data. */
|
|
5182
|
+
name: string;
|
|
5183
|
+
/** The current value of the checkbox, submitted as a name/value pair with form data. */
|
|
5184
|
+
value: string;
|
|
5185
|
+
/** Title rendered inside the card. The default slot takes precedence when provided. */
|
|
5186
|
+
cardTitle: string;
|
|
5187
|
+
/** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
|
|
5188
|
+
uncheckedValue: string;
|
|
5189
|
+
/** The checkbox's size. */
|
|
5190
|
+
size: 'small' | 'medium' | 'large';
|
|
5191
|
+
/** Disables the checkbox. */
|
|
5192
|
+
disabled: boolean;
|
|
5193
|
+
/** Draws the checkbox in a checked state. */
|
|
5194
|
+
checked: boolean;
|
|
5195
|
+
/**
|
|
5196
|
+
* Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
|
|
5197
|
+
* all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
|
|
5198
|
+
*/
|
|
5199
|
+
indeterminate: boolean;
|
|
5200
|
+
/** Draws a container around the checkbox. */
|
|
5201
|
+
contained: boolean;
|
|
5202
|
+
/** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
|
|
5203
|
+
square: boolean;
|
|
5204
|
+
/** Centres the text of a contained checkbox that has no image or `card-title`. */
|
|
5205
|
+
centered: boolean;
|
|
5206
|
+
/** URL for the image shown in a contained checkbox. */
|
|
5207
|
+
src: string;
|
|
5208
|
+
/** Accessible text for the built-in image. Leave empty when the image is decorative. */
|
|
5209
|
+
imageAlt: string;
|
|
5210
|
+
/** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
|
|
5211
|
+
imagePosition: SelectionCardImagePosition;
|
|
5212
|
+
/**
|
|
5213
|
+
* Places the checkbox indicator within a contained card. A contained checkbox without an image or `card-title` hides it
|
|
5214
|
+
* at `start`, as does `none`. Requires `contained`.
|
|
5215
|
+
*/
|
|
5216
|
+
controlPosition: SelectionCardControlPosition;
|
|
5217
|
+
/** Removes a container around the checkbox. */
|
|
5218
|
+
borderless: boolean;
|
|
5219
|
+
/** Applies styles relevant to checkboxes in a horizontal layout. */
|
|
5220
|
+
horizontal: boolean;
|
|
5221
|
+
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
5222
|
+
defaultChecked: boolean;
|
|
5223
|
+
/**
|
|
5224
|
+
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
5225
|
+
* to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
|
|
5226
|
+
* the same document or shadow root for this to work.
|
|
5227
|
+
*/
|
|
5228
|
+
form: string;
|
|
5229
|
+
/** Makes the checkbox a required field. */
|
|
5230
|
+
required: boolean;
|
|
5231
|
+
/** Submits the form when checkbox is clicked. */
|
|
5232
|
+
submitOnClick: boolean;
|
|
5233
|
+
/** The checkbox's help text. If you need to display HTML, use the `description` slot instead. */
|
|
5234
|
+
description: string;
|
|
5235
|
+
label: string;
|
|
5236
|
+
labelTooltip: string;
|
|
5237
|
+
/** The icon to show when the checkbox is checked. */
|
|
5238
|
+
checkedIcon: string;
|
|
5239
|
+
/** The icon to show when the checkbox is unchecked. Defaults to a muted `checked-icon`. */
|
|
5240
|
+
uncheckedIcon: string;
|
|
5241
|
+
/** The color of the checkbox. */
|
|
5242
|
+
color: ColorOption;
|
|
5243
|
+
/** The color of the checkbox when checked. Overrides `color`. */
|
|
5244
|
+
checkedColor: ColorOption;
|
|
5245
|
+
/** The color of the checkbox when unchecked. Overrides `color`. */
|
|
5246
|
+
uncheckedColor: ColorOption;
|
|
5247
|
+
/** Gets the validity state object */
|
|
5248
|
+
get validity(): ValidityState;
|
|
5249
|
+
get isChecked(): boolean;
|
|
5250
|
+
/** Gets the validation message */
|
|
5251
|
+
get validationMessage(): string;
|
|
5252
|
+
firstUpdated(): void;
|
|
5253
|
+
private handleClick;
|
|
5254
|
+
private handleBlur;
|
|
5255
|
+
private handleInput;
|
|
5256
|
+
private handleInvalid;
|
|
5257
|
+
private handleFocus;
|
|
5258
|
+
private handleSelectedContentClick;
|
|
5259
|
+
handleDisabledChange(): void;
|
|
5260
|
+
handleStateChange(): Promise<void>;
|
|
5261
|
+
/** Simulates a click on the checkbox. */
|
|
5262
|
+
click(): void;
|
|
5263
|
+
/** Sets focus on the checkbox. */
|
|
5264
|
+
focus(options?: FocusOptions): void;
|
|
5265
|
+
/** Removes focus from the checkbox. */
|
|
5266
|
+
blur(): void;
|
|
5267
|
+
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
|
5268
|
+
checkValidity(): boolean;
|
|
5269
|
+
/** Gets the associated form, if one exists. */
|
|
5270
|
+
getForm(): HTMLFormElement | null;
|
|
5271
|
+
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
5272
|
+
reportValidity(): boolean;
|
|
5273
|
+
/**
|
|
5274
|
+
* Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
|
|
5275
|
+
* the custom validation message, call this method with an empty string.
|
|
5276
|
+
*/
|
|
5277
|
+
setCustomValidity(message: string): void;
|
|
5278
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
5279
|
+
}
|
|
5280
|
+
}
|
|
5281
|
+
declare module "components/checkbox/index" {
|
|
5282
|
+
import ZnCheckbox from "components/checkbox/checkbox.component";
|
|
5283
|
+
export * from "components/checkbox/checkbox.component";
|
|
5284
|
+
export default ZnCheckbox;
|
|
5285
|
+
global {
|
|
5286
|
+
interface HTMLElementTagNameMap {
|
|
5287
|
+
'zn-checkbox': ZnCheckbox;
|
|
5288
|
+
}
|
|
5289
|
+
}
|
|
5290
|
+
}
|
|
5291
|
+
declare module "components/date-range/date-range.component" {
|
|
5292
|
+
import { type DatePreset } from "components/date-range/date-range-math";
|
|
5293
|
+
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
5294
|
+
import ZincElement from "internal/zinc-element";
|
|
5295
|
+
import ZnButton from "components/button/index";
|
|
5296
|
+
import ZnIcon from "components/icon/index";
|
|
5297
|
+
import ZnInput from "components/input/index";
|
|
5298
|
+
/**
|
|
5299
|
+
* @summary A button showing a date range that opens a two-month calendar with quick ranges.
|
|
5300
|
+
* @documentation https://zinc.style/components/date-range
|
|
5301
|
+
* @status experimental
|
|
5302
|
+
* @since 1.0
|
|
5303
|
+
*
|
|
5304
|
+
* @dependency zn-button
|
|
5305
|
+
* @dependency zn-icon
|
|
5306
|
+
* @dependency zn-input
|
|
5307
|
+
*
|
|
5308
|
+
* @event zn-change - Emitted when a range is applied, with `{from, to}` as its detail.
|
|
5309
|
+
*
|
|
5310
|
+
* @csspart trigger - The button that opens the picker.
|
|
5311
|
+
* @csspart popover - The picker popover.
|
|
5312
|
+
*/
|
|
5313
|
+
export default class ZnDateRange extends ZincElement {
|
|
5314
|
+
static styles: CSSResultGroup;
|
|
5315
|
+
static formAssociated: boolean;
|
|
5316
|
+
static dependencies: {
|
|
5317
|
+
'zn-button': typeof ZnButton;
|
|
5318
|
+
'zn-icon': typeof ZnIcon;
|
|
5319
|
+
'zn-input': typeof ZnInput;
|
|
5320
|
+
};
|
|
5321
|
+
/** The first day of the range, `YYYY-MM-DD`. Defaults to today. */
|
|
5322
|
+
from: string;
|
|
5323
|
+
/** The last day of the range, `YYYY-MM-DD`. Defaults to today. */
|
|
5324
|
+
to: string;
|
|
5325
|
+
/** The earliest day that can be picked. */
|
|
5326
|
+
min: string;
|
|
5327
|
+
/** The latest day that can be picked. */
|
|
5328
|
+
max: string;
|
|
5329
|
+
/** Quick ranges as a JSON array of `{label, from, to}`, replacing the default ones. */
|
|
5330
|
+
presets: DatePreset[] | undefined;
|
|
5331
|
+
/** A short line shown under the calendar, such as how the range is used. */
|
|
5332
|
+
note: string;
|
|
5333
|
+
/** Submits `name[from]` and `name[to]` with the form. */
|
|
5334
|
+
name: string;
|
|
5335
|
+
/** The trigger button's size. */
|
|
5336
|
+
size: 'small' | 'medium' | 'large';
|
|
5337
|
+
private draft;
|
|
5338
|
+
private view;
|
|
5339
|
+
private focusDay;
|
|
5340
|
+
private readonly internals;
|
|
5341
|
+
private readonly anchor;
|
|
5342
|
+
constructor();
|
|
5343
|
+
protected updated(changed: PropertyValues): void;
|
|
5344
|
+
private get rangeFrom();
|
|
5345
|
+
private get rangeTo();
|
|
5346
|
+
private get narrow();
|
|
5347
|
+
private get bounds();
|
|
5348
|
+
private syncFormValue;
|
|
5349
|
+
/** Opens the picker. */
|
|
5350
|
+
show(): Promise<void>;
|
|
5351
|
+
/** Closes the picker without applying. */
|
|
5352
|
+
hide(): void;
|
|
5353
|
+
private close;
|
|
5354
|
+
private toggle;
|
|
5355
|
+
private presetRange;
|
|
5356
|
+
private focusTrigger;
|
|
5357
|
+
private applyRange;
|
|
5358
|
+
private showMonth;
|
|
5359
|
+
private shiftMonth;
|
|
5360
|
+
private shiftTo;
|
|
5361
|
+
private isDisabled;
|
|
5362
|
+
private choose;
|
|
5363
|
+
private visible;
|
|
5364
|
+
private dayKeydown;
|
|
5365
|
+
private typed;
|
|
5366
|
+
private stop;
|
|
5367
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
5368
|
+
private renderPopover;
|
|
5369
|
+
private renderMonth;
|
|
5370
|
+
}
|
|
5371
|
+
}
|
|
5372
|
+
declare module "components/date-range/index" {
|
|
5373
|
+
import ZnDateRange from "components/date-range/date-range.component";
|
|
5374
|
+
export * from "components/date-range/date-range.component";
|
|
5375
|
+
export default ZnDateRange;
|
|
5376
|
+
global {
|
|
5377
|
+
interface HTMLElementTagNameMap {
|
|
5378
|
+
'zn-date-range': ZnDateRange;
|
|
5379
|
+
}
|
|
5380
|
+
}
|
|
5381
|
+
}
|
|
5382
|
+
declare module "components/report-table/report-table.component" {
|
|
5383
|
+
import { type ReportColumn, type ReportFilterField, type ReportOption, type ReportResponse, type ReportRow } from "components/report-table/report-math";
|
|
5384
|
+
import { type CSSResultGroup, type PropertyValues, type TemplateResult } from 'lit';
|
|
5385
|
+
import { type DatePreset } from "components/date-range/date-range-math";
|
|
5386
|
+
import ZincElement from "internal/zinc-element";
|
|
5387
|
+
import ZnAlert from "components/alert/index";
|
|
5388
|
+
import ZnButton from "components/button/index";
|
|
5389
|
+
import ZnCheckbox from "components/checkbox/index";
|
|
5390
|
+
import ZnDataTableFilter from "components/data-table-filter/index";
|
|
5391
|
+
import ZnDataTableSearch from "components/data-table-search/index";
|
|
5392
|
+
import ZnDateRange from "components/date-range/index";
|
|
5393
|
+
import ZnEmptyState from "components/empty-state/index";
|
|
5394
|
+
import ZnIcon from "components/icon/index";
|
|
5395
|
+
import ZnPanel from "components/panel/index";
|
|
5396
|
+
import ZnSkeleton from "components/skeleton/index";
|
|
5397
|
+
/**
|
|
5398
|
+
* @summary A grouped report: one row per value of a dimension, read column by column, with a total row.
|
|
5399
|
+
* @documentation https://zinc.style/components/report-table
|
|
5400
|
+
* @status experimental
|
|
5401
|
+
* @since 1.0
|
|
5402
|
+
*
|
|
5403
|
+
* @dependency zn-alert
|
|
5404
|
+
* @dependency zn-button
|
|
5405
|
+
* @dependency zn-checkbox
|
|
5406
|
+
* @dependency zn-data-table-filter
|
|
5407
|
+
* @dependency zn-data-table-search
|
|
5408
|
+
* @dependency zn-date-range
|
|
5409
|
+
* @dependency zn-empty-state
|
|
5410
|
+
* @dependency zn-icon
|
|
5411
|
+
* @dependency zn-panel
|
|
5412
|
+
* @dependency zn-skeleton
|
|
5413
|
+
*
|
|
5414
|
+
* @event zn-report-change - Emitted when the type, group by, date range or filter is changed, before the report is fetched again.
|
|
5415
|
+
*
|
|
5416
|
+
* @slot inputs - Inputs whose name and value are sent with every request (csrf tokens and similar).
|
|
5417
|
+
* @slot empty-state - Replaces the default empty state.
|
|
5418
|
+
*/
|
|
5419
|
+
export default class ZnReportTable extends ZincElement {
|
|
5420
|
+
static styles: CSSResultGroup;
|
|
5421
|
+
static dependencies: {
|
|
5422
|
+
'zn-alert': typeof ZnAlert;
|
|
5423
|
+
'zn-button': typeof ZnButton;
|
|
5424
|
+
'zn-checkbox': typeof ZnCheckbox;
|
|
5425
|
+
'zn-date-range': typeof ZnDateRange;
|
|
5426
|
+
'zn-empty-state': typeof ZnEmptyState;
|
|
5427
|
+
'zn-icon': typeof ZnIcon;
|
|
5428
|
+
'zn-data-table-filter': typeof ZnDataTableFilter;
|
|
5429
|
+
'zn-data-table-search': typeof ZnDataTableSearch;
|
|
5430
|
+
'zn-panel': typeof ZnPanel;
|
|
5431
|
+
'zn-skeleton': typeof ZnSkeleton;
|
|
5432
|
+
};
|
|
5433
|
+
dataUri: string;
|
|
5434
|
+
method: 'GET' | 'POST';
|
|
5435
|
+
caption: string;
|
|
5436
|
+
type: string;
|
|
5437
|
+
groupBy: string;
|
|
5438
|
+
from: string;
|
|
5439
|
+
to: string;
|
|
5440
|
+
filter: string;
|
|
5441
|
+
currency: string;
|
|
5442
|
+
locale: string;
|
|
5443
|
+
/** Report types, shown as tabs when there are two or more. `type` defaults to the first. */
|
|
5444
|
+
types: ReportOption[];
|
|
5445
|
+
/** Group by options; those with a `category` are listed under its heading. */
|
|
5446
|
+
groupBys: ReportOption[];
|
|
5447
|
+
/** Fields for the funnel's filter builder. The funnel is hidden when there are none. */
|
|
5448
|
+
filterFields: ReportFilterField[];
|
|
5449
|
+
/** Quick ranges for the date range, replacing the default ones. */
|
|
5450
|
+
presets: DatePreset[] | undefined;
|
|
5451
|
+
/** The latest day that can be picked. Defaults to today. */
|
|
5452
|
+
maxDate: string;
|
|
5453
|
+
/** A short line shown under the date range's calendar. */
|
|
5454
|
+
dateNote: string;
|
|
5455
|
+
searchPlaceholder: string;
|
|
5456
|
+
/** Mirrors the type, group by, dates, filter and search to the URL query string, and reads them back on load. */
|
|
5457
|
+
sharable: boolean;
|
|
5458
|
+
/** Leaves out columns that are zero or empty in every row, and groups left without columns. */
|
|
5459
|
+
hideEmptyColumns: boolean;
|
|
5460
|
+
/** Gives each row a tick box that highlights it, with one in the heading for every row shown. */
|
|
5461
|
+
selectable: boolean;
|
|
5462
|
+
/** Shades number cells by their size against the largest in their column. */
|
|
5463
|
+
heatmap: boolean;
|
|
5464
|
+
protected response: ReportResponse | null;
|
|
5465
|
+
protected search: string;
|
|
5466
|
+
private sortKey;
|
|
5467
|
+
private sortDirection;
|
|
5468
|
+
private selected;
|
|
5469
|
+
private sharableDefaults;
|
|
5470
|
+
private adoption;
|
|
5471
|
+
private dimObserver;
|
|
5472
|
+
private readonly groupByPopover;
|
|
5473
|
+
private readonly filterEl;
|
|
5474
|
+
private readonly tabRow;
|
|
5475
|
+
private readonly hasSlotController;
|
|
5476
|
+
private readonly _task;
|
|
5477
|
+
connectedCallback(): void;
|
|
5478
|
+
protected willUpdate(): void;
|
|
5479
|
+
protected updated(changed: PropertyValues): void;
|
|
5480
|
+
refresh(): Promise<void>;
|
|
5481
|
+
protected visibleRows(): ReportRow[];
|
|
5482
|
+
protected totalsFor(rows: ReportRow[]): Record<string, number | null>;
|
|
5483
|
+
protected columns(): ReportColumn[];
|
|
5484
|
+
private sortRows;
|
|
5485
|
+
private sortState;
|
|
5486
|
+
private cycleSort;
|
|
5487
|
+
private change;
|
|
5488
|
+
private activeGroupBys;
|
|
5489
|
+
private activeFilterFields;
|
|
5490
|
+
private hasCategories;
|
|
5491
|
+
private dimensionLabel;
|
|
5492
|
+
private readSharableState;
|
|
5493
|
+
private writeSharableState;
|
|
5494
|
+
private inputParams;
|
|
5495
|
+
private format;
|
|
5496
|
+
private cellValue;
|
|
5497
|
+
private renderLink;
|
|
5498
|
+
private cellClasses;
|
|
5499
|
+
private displayGroups;
|
|
5500
|
+
private heatScales;
|
|
5501
|
+
private renderTable;
|
|
5502
|
+
private renderHeading;
|
|
5503
|
+
private renderSelectAll;
|
|
5504
|
+
private toggleRow;
|
|
5505
|
+
private toggleAll;
|
|
5506
|
+
private renderBody;
|
|
5507
|
+
private renderSkeleton;
|
|
5508
|
+
private renderRowCount;
|
|
5509
|
+
private renderGroupBy;
|
|
5510
|
+
private renderGroupByPopover;
|
|
5511
|
+
private toggleGroupBy;
|
|
5512
|
+
private selectGroupBy;
|
|
5513
|
+
private handleSearch;
|
|
5514
|
+
private observeDim;
|
|
5515
|
+
disconnectedCallback(): void;
|
|
5516
|
+
private handleFilter;
|
|
5517
|
+
private handleRange;
|
|
5518
|
+
private renderActions;
|
|
5519
|
+
render(): TemplateResult<1>;
|
|
5520
|
+
}
|
|
5521
|
+
}
|
|
5522
|
+
declare module "components/report-table/index" {
|
|
5523
|
+
import ZnReportTable from "components/report-table/report-table.component";
|
|
5524
|
+
export * from "components/report-table/report-table.component";
|
|
5525
|
+
export default ZnReportTable;
|
|
5526
|
+
global {
|
|
5527
|
+
interface HTMLElementTagNameMap {
|
|
5528
|
+
'zn-report-table': ZnReportTable;
|
|
5529
|
+
}
|
|
5530
|
+
}
|
|
5531
|
+
}
|
|
4385
5532
|
declare module "components/cols/cols.component" {
|
|
4386
5533
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
4387
5534
|
import ZincElement from "internal/zinc-element";
|
|
@@ -4412,6 +5559,8 @@ declare module "components/cols/cols.component" {
|
|
|
4412
5559
|
*/
|
|
4413
5560
|
stackAt: string;
|
|
4414
5561
|
maxColumns: number;
|
|
5562
|
+
/** Minimum width in px of a one-unit column before the row wraps; a column of layout `n` asks for n times this. Defaults to 250. */
|
|
5563
|
+
basis: number;
|
|
4415
5564
|
noGap: boolean;
|
|
4416
5565
|
border: boolean;
|
|
4417
5566
|
pad: boolean;
|
|
@@ -4424,8 +5573,8 @@ declare module "components/cols/cols.component" {
|
|
|
4424
5573
|
disconnectedCallback(): void;
|
|
4425
5574
|
protected updated(changed: PropertyValues<this>): void;
|
|
4426
5575
|
/**
|
|
4427
|
-
* Flags each child that ends its row as laid out, so `divide` only draws
|
|
4428
|
-
* however the columns have wrapped.
|
|
5576
|
+
* Flags each child that ends its row, and each child on the last row, as laid out, so `divide` only draws
|
|
5577
|
+
* between neighbours however the columns have wrapped.
|
|
4429
5578
|
*/
|
|
4430
5579
|
private markRowEnds;
|
|
4431
5580
|
/**
|
|
@@ -4583,13 +5732,14 @@ declare module "components/note/index" {
|
|
|
4583
5732
|
declare module "components/tile/tile.component" {
|
|
4584
5733
|
import { type CSSResultGroup } from 'lit';
|
|
4585
5734
|
import ZincElement from "internal/zinc-element";
|
|
5735
|
+
import ZnIcon from "components/icon/index";
|
|
4586
5736
|
/**
|
|
4587
5737
|
* @summary Short summary of the component's intended use.
|
|
4588
5738
|
* @documentation https://zinc.style/components/tile
|
|
4589
5739
|
* @status experimental
|
|
4590
5740
|
* @since 1.0
|
|
4591
5741
|
*
|
|
4592
|
-
* @dependency zn-
|
|
5742
|
+
* @dependency zn-icon
|
|
4593
5743
|
*
|
|
4594
5744
|
* @event zn-event-name - Emitted as an example.
|
|
4595
5745
|
*
|
|
@@ -4597,14 +5747,24 @@ declare module "components/tile/tile.component" {
|
|
|
4597
5747
|
* @slot example - An example slot.
|
|
4598
5748
|
*
|
|
4599
5749
|
* @csspart base - The component's base wrapper.
|
|
5750
|
+
* @csspart icon - The tinted square around the icon.
|
|
4600
5751
|
*
|
|
4601
5752
|
* @cssproperty --example - An example CSS custom property.
|
|
5753
|
+
* @cssproperty --zn-tile-hover-caption-color - The caption color while a linked tile is hovered.
|
|
5754
|
+
* @cssproperty --zn-tile-hover-caption-decoration - The caption text decoration while a linked tile is hovered.
|
|
4602
5755
|
*/
|
|
4603
5756
|
export default class ZnTile extends ZincElement {
|
|
4604
5757
|
static styles: CSSResultGroup;
|
|
5758
|
+
static dependencies: {
|
|
5759
|
+
'zn-icon': typeof ZnIcon;
|
|
5760
|
+
};
|
|
4605
5761
|
private readonly hasSlotController;
|
|
4606
5762
|
caption: string;
|
|
4607
5763
|
description: string;
|
|
5764
|
+
/** Shows the icon in a tinted square before the caption. */
|
|
5765
|
+
icon: string;
|
|
5766
|
+
/** The tint of the icon square: `success`, `warning`, `danger`, `info`, `ai` or `neutral`. */
|
|
5767
|
+
iconColor: 'success' | 'warning' | 'danger' | 'info' | 'ai' | 'neutral';
|
|
4608
5768
|
href: string;
|
|
4609
5769
|
dataTarget: string;
|
|
4610
5770
|
gaid: string;
|
|
@@ -4620,6 +5780,7 @@ declare module "components/tile/tile.component" {
|
|
|
4620
5780
|
/** Set by `zn-tile-group` to lay the tile out as a shared-column subgrid row. */
|
|
4621
5781
|
grouped: boolean;
|
|
4622
5782
|
private _isLink;
|
|
5783
|
+
private _handleLinkKeyDown;
|
|
4623
5784
|
private _handleActionsClick;
|
|
4624
5785
|
render(): import("lit-html").TemplateResult;
|
|
4625
5786
|
}
|
|
@@ -4797,6 +5958,7 @@ declare module "components/channel-tile/channel-tile.component" {
|
|
|
4797
5958
|
private _remainingSeconds;
|
|
4798
5959
|
private _handleReject;
|
|
4799
5960
|
private _handleClick;
|
|
5961
|
+
private _handleKeyDown;
|
|
4800
5962
|
protected render(): unknown;
|
|
4801
5963
|
private _renderLeading;
|
|
4802
5964
|
private _renderAvailableAction;
|
|
@@ -4876,6 +6038,8 @@ declare module "components/chart/builders" {
|
|
|
4876
6038
|
indicators?: RadarIndicator[];
|
|
4877
6039
|
minValue?: number;
|
|
4878
6040
|
maxValue?: number;
|
|
6041
|
+
/** Marks each line's last point with a hollow dot and hides the others. */
|
|
6042
|
+
markLatest?: boolean;
|
|
4879
6043
|
}
|
|
4880
6044
|
export function buildBarOption(props: BuilderProps): EChartsOption;
|
|
4881
6045
|
export function buildLineOption(props: BuilderProps): EChartsOption;
|
|
@@ -4970,6 +6134,8 @@ declare module "components/chart/chart.component" {
|
|
|
4970
6134
|
* @since 1.0
|
|
4971
6135
|
*
|
|
4972
6136
|
* @csspart base - The component's base wrapper.
|
|
6137
|
+
*
|
|
6138
|
+
* @event zn-chart-click - Emitted when a data point, bar or slice is clicked.
|
|
4973
6139
|
*/
|
|
4974
6140
|
export default class ZnChart extends ZincElement {
|
|
4975
6141
|
static styles: CSSResultGroup;
|
|
@@ -4982,6 +6148,7 @@ declare module "components/chart/chart.component" {
|
|
|
4982
6148
|
datapointSize: number;
|
|
4983
6149
|
stacked: boolean;
|
|
4984
6150
|
live: boolean;
|
|
6151
|
+
/** JSON series polled with `live`; otherwise fetched once, as a series array or `{categories, data}`. */
|
|
4985
6152
|
dataUrl: string;
|
|
4986
6153
|
streamUrl: string;
|
|
4987
6154
|
liveRenewUrl: string;
|
|
@@ -4998,12 +6165,19 @@ declare module "components/chart/chart.component" {
|
|
|
4998
6165
|
showLabels?: boolean;
|
|
4999
6166
|
minValue?: number;
|
|
5000
6167
|
maxValue?: number;
|
|
6168
|
+
/** On line and area charts, marks each series' latest point and hides the rest. */
|
|
6169
|
+
markLatest: boolean;
|
|
5001
6170
|
scale: boolean | number;
|
|
5002
6171
|
private chart?;
|
|
5003
6172
|
private echarts?;
|
|
5004
6173
|
private initPromise?;
|
|
5005
6174
|
private liveTimer?;
|
|
5006
6175
|
private pollAbort?;
|
|
6176
|
+
private loadedUrl;
|
|
6177
|
+
/** Set while `data-url` loads; cartesian charts show a placeholder until the data arrives. */
|
|
6178
|
+
private loading;
|
|
6179
|
+
private loadingOut;
|
|
6180
|
+
private riseIn;
|
|
5007
6181
|
private liveStatus;
|
|
5008
6182
|
private liveWindow;
|
|
5009
6183
|
private replaceLiveSeries;
|
|
@@ -5011,6 +6185,10 @@ declare module "components/chart/chart.component" {
|
|
|
5011
6185
|
private liveTransitionDuration;
|
|
5012
6186
|
private liveSeries;
|
|
5013
6187
|
private updateChart;
|
|
6188
|
+
private prepareRise;
|
|
6189
|
+
private static readonly riseTypes;
|
|
6190
|
+
private static readonly viewOnly;
|
|
6191
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
5014
6192
|
protected updated(changed: PropertyValues): void;
|
|
5015
6193
|
connectedCallback(): void;
|
|
5016
6194
|
private readonly resizeObserver;
|
|
@@ -5018,14 +6196,17 @@ declare module "components/chart/chart.component" {
|
|
|
5018
6196
|
protected getUpdateComplete(): Promise<boolean>;
|
|
5019
6197
|
private getTheme;
|
|
5020
6198
|
private getTextColor;
|
|
6199
|
+
private getPalette;
|
|
5021
6200
|
private getBorderColor;
|
|
5022
6201
|
private buildOption;
|
|
5023
6202
|
private initChart;
|
|
5024
6203
|
private stopLive;
|
|
5025
6204
|
private startLive;
|
|
6205
|
+
private loadData;
|
|
5026
6206
|
private reinit;
|
|
5027
6207
|
attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
|
|
5028
6208
|
disconnectedCallback(): void;
|
|
6209
|
+
private renderLoading;
|
|
5029
6210
|
protected render(): unknown;
|
|
5030
6211
|
}
|
|
5031
6212
|
}
|
|
@@ -5106,8 +6287,17 @@ declare module "components/navbar/navbar.component" {
|
|
|
5106
6287
|
* @slot bottom - Content rendered below the navbar row (e.g. chips, filters).
|
|
5107
6288
|
*
|
|
5108
6289
|
* @csspart base - The component's base wrapper.
|
|
5109
|
-
*
|
|
5110
|
-
*
|
|
6290
|
+
* @csspart indicator - The active-tab indicator that slides between tabs. Exposes
|
|
6291
|
+
* `--zn-navbar-indicator-top` / `--zn-navbar-indicator-height` (the active tab's box) for styles that fill the tab.
|
|
6292
|
+
*
|
|
6293
|
+
* @cssproperty --zn-navbar-tab-indicator-slide - `1` shows the sliding indicator in place of each tab's own line.
|
|
6294
|
+
* @cssproperty --zn-navbar-tab-indicator-duration - Duration of the indicator's leading edge (default 300ms).
|
|
6295
|
+
* @cssproperty --zn-navbar-tab-indicator-easing - Easing of both indicator edges.
|
|
6296
|
+
* @cssproperty --zn-navbar-tab-indicator-trail-duration - Duration of the trailing edge; longer than the lead stretches the indicator.
|
|
6297
|
+
* @cssproperty --zn-navbar-tab-indicator-trail-easing - Easing of the trailing edge; defaults to `--zn-navbar-tab-indicator-easing`.
|
|
6298
|
+
* @cssproperty --zn-navbar-tab-indicator-trail-delay - Delay before the trailing edge follows (default 0ms).
|
|
6299
|
+
* @cssproperty --zn-navbar-tab-indicator-delay - Delay before the indicator starts to move (default 0ms).
|
|
6300
|
+
* @cssproperty --zn-navbar-tab-indicator-squash - Vertical scale the indicator squishes to before it travels (default 1, off).
|
|
5111
6301
|
*/
|
|
5112
6302
|
export default class ZnNavbar extends ZincElement {
|
|
5113
6303
|
static styles: CSSResultGroup;
|
|
@@ -5122,6 +6312,12 @@ declare module "components/navbar/navbar.component" {
|
|
|
5122
6312
|
hideOne: boolean;
|
|
5123
6313
|
flush: boolean;
|
|
5124
6314
|
gutter: boolean;
|
|
6315
|
+
/** Draws the tabs as a segmented control: a grey track with a pill that slides to the active tab. */
|
|
6316
|
+
pill: boolean;
|
|
6317
|
+
/** With `pill`, `small` draws a shorter track to sit with small controls, such as above a form field. */
|
|
6318
|
+
size: 'small' | 'medium';
|
|
6319
|
+
/** The id of a zn-tabs elsewhere on the page that this navbar's tabs switch, such as one below a page header. */
|
|
6320
|
+
tabs: string;
|
|
5125
6321
|
stacked: boolean;
|
|
5126
6322
|
dropdown: never[];
|
|
5127
6323
|
noPad: false;
|
|
@@ -5138,14 +6334,16 @@ declare module "components/navbar/navbar.component" {
|
|
|
5138
6334
|
private _expanding;
|
|
5139
6335
|
private _openedTabs;
|
|
5140
6336
|
private readonly _itemsObserver;
|
|
6337
|
+
private readonly _activeObserver;
|
|
5141
6338
|
private _navItems;
|
|
6339
|
+
private _strip;
|
|
6340
|
+
private _indicator;
|
|
6341
|
+
private _indicatorFrame;
|
|
6342
|
+
private _indicatorTab;
|
|
6343
|
+
private _indicatorTarget;
|
|
5142
6344
|
private _expandable;
|
|
5143
|
-
private _extendedMenu;
|
|
5144
|
-
private readonly _cloneSources;
|
|
5145
6345
|
private readonly _lightDomClones;
|
|
5146
|
-
private _navItemsGap;
|
|
5147
6346
|
private _expandableMargin;
|
|
5148
|
-
private _totalItemWidth;
|
|
5149
6347
|
private _resizeFrame;
|
|
5150
6348
|
private _resizeController;
|
|
5151
6349
|
protected _store: Store;
|
|
@@ -5156,20 +6354,23 @@ declare module "components/navbar/navbar.component" {
|
|
|
5156
6354
|
constructor();
|
|
5157
6355
|
private readonly _expandingActionObserver;
|
|
5158
6356
|
private _scheduleResize;
|
|
6357
|
+
private _scheduleIndicatorSync;
|
|
6358
|
+
/** Moves the shared active-tab indicator under the active tab. */
|
|
6359
|
+
private _syncIndicator;
|
|
5159
6360
|
private _observeExpandingAction;
|
|
5160
6361
|
private _adoptNewLightItems;
|
|
5161
6362
|
connectedCallback(): void;
|
|
5162
6363
|
private _updateVisibility;
|
|
5163
6364
|
itemCount(): number;
|
|
5164
6365
|
private _resolveAvailableWidth;
|
|
5165
|
-
private _measureTotalItemWidth;
|
|
5166
|
-
private _getItemWidth;
|
|
5167
|
-
private _getHorizontalSpacing;
|
|
5168
|
-
private _getMoreItemWidth;
|
|
5169
6366
|
private _syncLastVisibleItem;
|
|
5170
6367
|
private _getExpandableWidth;
|
|
5171
6368
|
handleResize: () => void;
|
|
5172
|
-
|
|
6369
|
+
/** Shows a scroll arrow at each edge of the strip that has tabs beyond it. */
|
|
6370
|
+
private _syncScrollEdges;
|
|
6371
|
+
private _scrollTabs;
|
|
6372
|
+
/** Scrolls the strip so the tab clears the scroll arrows. */
|
|
6373
|
+
private _revealTab;
|
|
5173
6374
|
addItem(item: Element, persist?: boolean): void;
|
|
5174
6375
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
5175
6376
|
private _loadStoredTabs;
|
|
@@ -5218,6 +6419,10 @@ declare module "components/header/header.component" {
|
|
|
5218
6419
|
entityIdShow: boolean;
|
|
5219
6420
|
transparent: boolean;
|
|
5220
6421
|
caption: string;
|
|
6422
|
+
/** A line of muted text under the caption. */
|
|
6423
|
+
description: string;
|
|
6424
|
+
/** Sets the description beside the caption rather than under it, e.g. a row count. */
|
|
6425
|
+
inlineDescription: boolean;
|
|
5221
6426
|
icon: string;
|
|
5222
6427
|
navigation: never[];
|
|
5223
6428
|
fullWidth: boolean;
|
|
@@ -5270,11 +6475,24 @@ declare module "components/tabs/tabs-navigation" {
|
|
|
5270
6475
|
declare module "utilities/md5" {
|
|
5271
6476
|
export function md5(string: string): string;
|
|
5272
6477
|
}
|
|
6478
|
+
declare module "internal/hover-intent" {
|
|
6479
|
+
/** How long the pointer must rest on an element before hover preloading starts. */
|
|
6480
|
+
export const HOVER_INTENT_DELAY = 150;
|
|
6481
|
+
/**
|
|
6482
|
+
* Calls `callback` once the pointer has rested on `element` for `delay` ms. Preloads hang off this
|
|
6483
|
+
* so sweeping across a row of tabs doesn't fetch and render every panel on the way past.
|
|
6484
|
+
*/
|
|
6485
|
+
export function onHoverIntent(element: HTMLElement, callback: () => void, delay?: number): void;
|
|
6486
|
+
}
|
|
6487
|
+
declare module "internal/input-modality" {
|
|
6488
|
+
/** Whether the latest user input was a pointer press inside `within`, made within the last `withinMs`. */
|
|
6489
|
+
export function pointerInitiated(within: Element, withinMs?: number): boolean;
|
|
6490
|
+
}
|
|
5273
6491
|
declare module "components/tabs/tabs.component" {
|
|
5274
6492
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
5275
6493
|
import { Store } from "internal/storage";
|
|
5276
6494
|
import ZincElement from "internal/zinc-element";
|
|
5277
|
-
export const tabContainerSelector = "zn-tabs, zn-page, zn-page-nav";
|
|
6495
|
+
export const tabContainerSelector = "zn-tabs, zn-page, zn-page-nav, zn-navbar[tabs]";
|
|
5278
6496
|
/**
|
|
5279
6497
|
* @summary Short summary of the component's intended use.
|
|
5280
6498
|
* @documentation https://zinc.style/components/tabs
|
|
@@ -5297,6 +6515,7 @@ declare module "components/tabs/tabs.component" {
|
|
|
5297
6515
|
masterId: string;
|
|
5298
6516
|
defaultUri: string;
|
|
5299
6517
|
_current: string;
|
|
6518
|
+
private _hasSelected;
|
|
5300
6519
|
_split: number;
|
|
5301
6520
|
_splitMin: number;
|
|
5302
6521
|
_splitMinSecondary: number;
|
|
@@ -5309,6 +6528,13 @@ declare module "components/tabs/tabs.component" {
|
|
|
5309
6528
|
storeKey: string;
|
|
5310
6529
|
storeTtl: number;
|
|
5311
6530
|
padded: boolean;
|
|
6531
|
+
/**
|
|
6532
|
+
* With `store-key`, opens a tab that has appeared since the page was last shown, such as one for an item just
|
|
6533
|
+
* added, in place of the remembered tab.
|
|
6534
|
+
*/
|
|
6535
|
+
selectAdded: boolean;
|
|
6536
|
+
/** Spaces a left or right slot from the content, for side navigation laid out as its own card. */
|
|
6537
|
+
gap: boolean;
|
|
5312
6538
|
fetchStyle: string;
|
|
5313
6539
|
fullWidth: boolean;
|
|
5314
6540
|
paddedRight: boolean;
|
|
@@ -5337,6 +6563,11 @@ declare module "components/tabs/tabs.component" {
|
|
|
5337
6563
|
protected getStoredTab(): string | null;
|
|
5338
6564
|
protected storeActiveTab(tabName: string): void;
|
|
5339
6565
|
protected restoreStoredTab(stored: string): void;
|
|
6566
|
+
/**
|
|
6567
|
+
* The tabs present now that were not when the page was last shown, oldest first, remembering the current set for
|
|
6568
|
+
* next time. Empty without `select-added`, or on the first showing.
|
|
6569
|
+
*/
|
|
6570
|
+
private takeAddedTabs;
|
|
5340
6571
|
/** Activates the tab the container starts on, ignoring any stored selection. */
|
|
5341
6572
|
protected activateDefaultTab(): void;
|
|
5342
6573
|
private readonly handlePopState;
|
|
@@ -5344,6 +6575,7 @@ declare module "components/tabs/tabs.component" {
|
|
|
5344
6575
|
private getUriForTabId;
|
|
5345
6576
|
_addPanel(panel: HTMLElement): void;
|
|
5346
6577
|
_addTab(tab: HTMLElement): void;
|
|
6578
|
+
private readonly _handleTabKeyDown;
|
|
5347
6579
|
reRegisterTabs: () => void;
|
|
5348
6580
|
firstUpdated(_changedProperties: PropertyValues): void;
|
|
5349
6581
|
switchTab(inc: number): void;
|
|
@@ -5359,9 +6591,12 @@ declare module "components/tabs/tabs.component" {
|
|
|
5359
6591
|
setActiveTab(tabName: string, store: boolean, refresh: boolean, refTab?: string | null, pushHistory?: boolean): void;
|
|
5360
6592
|
_setTabEleActive(ele: Element, active: boolean): void;
|
|
5361
6593
|
selectTab(tabName: string, refresh: boolean): boolean;
|
|
6594
|
+
private _enterPanel;
|
|
5362
6595
|
getActiveTab(): Element[];
|
|
5363
6596
|
observerDom(): void;
|
|
5364
6597
|
removeTabAndPanel(tabId: string): void;
|
|
6598
|
+
/** Navbars elsewhere in this container's root that drive it through `tabs="<this id>"`. */
|
|
6599
|
+
private _linkedNavbars;
|
|
5365
6600
|
_registerTabs: () => void;
|
|
5366
6601
|
render(): import("lit-html").TemplateResult<1>;
|
|
5367
6602
|
}
|
|
@@ -5406,7 +6641,7 @@ declare module "components/expanding-action/expanding-action.component" {
|
|
|
5406
6641
|
private _actions;
|
|
5407
6642
|
private _preload;
|
|
5408
6643
|
private _metaObserved;
|
|
5409
|
-
private
|
|
6644
|
+
private _fillHadFocus;
|
|
5410
6645
|
private readonly _countObserver;
|
|
5411
6646
|
private readonly _colorObserver;
|
|
5412
6647
|
constructor();
|
|
@@ -5423,9 +6658,9 @@ declare module "components/expanding-action/expanding-action.component" {
|
|
|
5423
6658
|
clickAction(target: HTMLElement): void;
|
|
5424
6659
|
handleIconClicked: () => void;
|
|
5425
6660
|
handleIconCloseClicked: () => void;
|
|
5426
|
-
|
|
5427
|
-
|
|
5428
|
-
|
|
6661
|
+
protected willUpdate(changed: PropertyValues<this>): void;
|
|
6662
|
+
protected updated(changed: PropertyValues<this>): void;
|
|
6663
|
+
private _handleFillKeyDown;
|
|
5429
6664
|
render(): import("lit-html").TemplateResult<1>;
|
|
5430
6665
|
protected renderDropdown(): import("lit-html").TemplateResult<1>;
|
|
5431
6666
|
protected renderFill(): import("lit-html").TemplateResult<1>;
|
|
@@ -5455,6 +6690,7 @@ declare module "components/tab/tab.component" {
|
|
|
5455
6690
|
export default class ZnTab extends ZincElement {
|
|
5456
6691
|
static styles: CSSResultGroup;
|
|
5457
6692
|
caption: string;
|
|
6693
|
+
icon: string;
|
|
5458
6694
|
priority: number;
|
|
5459
6695
|
uri: string;
|
|
5460
6696
|
/** When present, zn-page opens this tab on load instead of the first tab. */
|
|
@@ -5497,10 +6733,16 @@ declare module "components/page/page.component" {
|
|
|
5497
6733
|
* @status experimental
|
|
5498
6734
|
* @since 1.0
|
|
5499
6735
|
*
|
|
5500
|
-
* @slot - Page content. Use zn-tab for named tabs
|
|
6736
|
+
* @slot - Page content. Use zn-tab for named tabs; without any, the content is shown as the page's only view. A zn-tab
|
|
6737
|
+
* holding zn-tabs shows them as a second tab set, drawn as pills. Use header-action/header-actions for header actions.
|
|
5501
6738
|
* Clicking an element in the content with `tab="<tab id>"` opens that tab.
|
|
6739
|
+
* @slot caption-badges - Badges shown beside the caption, wrapping onto the next line as one group.
|
|
5502
6740
|
* @slot description - Rich subtitle/description content. Falls back to the `summary` attribute when empty.
|
|
5503
6741
|
* @slot bottom - Content rendered below the navbar row (e.g. chips, filters). Forwarded to the navbar's bottom slot.
|
|
6742
|
+
* @slot footer - Actions pinned below the content, such as a form's `zn-form-actions`. In a modal page it takes the
|
|
6743
|
+
* dialog footer's styling.
|
|
6744
|
+
*
|
|
6745
|
+
* @csspart footer - The footer wrapping the footer slot.
|
|
5504
6746
|
*/
|
|
5505
6747
|
export default class ZnPage extends ZnTabs {
|
|
5506
6748
|
static styles: CSSResultGroup;
|
|
@@ -5519,6 +6761,11 @@ declare module "components/page/page.component" {
|
|
|
5519
6761
|
fullLocation: string;
|
|
5520
6762
|
modal: boolean;
|
|
5521
6763
|
nested: boolean;
|
|
6764
|
+
/**
|
|
6765
|
+
* The tab design: `tabs` (the default), `pills` for a second tab set below a main tab bar, shown without the page
|
|
6766
|
+
* header, or `sidebar` when the tabs are shown outside the page, which hides the tab bar unless it has bottom content.
|
|
6767
|
+
*/
|
|
6768
|
+
navigationStyle: 'tabs' | 'pills' | 'sidebar' | undefined;
|
|
5522
6769
|
primary: boolean;
|
|
5523
6770
|
previousPath: string;
|
|
5524
6771
|
previousTarget: string;
|
|
@@ -5533,6 +6780,9 @@ declare module "components/page/page.component" {
|
|
|
5533
6780
|
disconnectedCallback(): void;
|
|
5534
6781
|
private handleAltPress;
|
|
5535
6782
|
private handleAltUp;
|
|
6783
|
+
private breadcrumbSeparatorIcon;
|
|
6784
|
+
private breadcrumbSeparatorSize;
|
|
6785
|
+
private syncBreadcrumbSeparators;
|
|
5536
6786
|
private handleBreadcrumbSlotChange;
|
|
5537
6787
|
_registerTabs: () => void;
|
|
5538
6788
|
firstUpdated(changedProperties: PropertyValues): void;
|
|
@@ -5541,6 +6791,8 @@ declare module "components/page/page.component" {
|
|
|
5541
6791
|
private refreshExpandingActionsState;
|
|
5542
6792
|
private syncExpandingActionsToNavbar;
|
|
5543
6793
|
private prepareTabs;
|
|
6794
|
+
private groupInnerTabs;
|
|
6795
|
+
private renderTabCaption;
|
|
5544
6796
|
private parsePriority;
|
|
5545
6797
|
private compareTabs;
|
|
5546
6798
|
private captionToId;
|
|
@@ -5630,6 +6882,7 @@ declare module "components/icon-picker/icon-picker.component" {
|
|
|
5630
6882
|
private _searchQuery;
|
|
5631
6883
|
private _iconList;
|
|
5632
6884
|
private _filteredIcons;
|
|
6885
|
+
private _gridFocusIcon;
|
|
5633
6886
|
private _pendingIcon;
|
|
5634
6887
|
private _pendingLibrary;
|
|
5635
6888
|
private _pendingColor;
|
|
@@ -5668,6 +6921,8 @@ declare module "components/icon-picker/icon-picker.component" {
|
|
|
5668
6921
|
private handleSearchInput;
|
|
5669
6922
|
private filterIcons;
|
|
5670
6923
|
private handleIconSelect;
|
|
6924
|
+
private _gridTabStop;
|
|
6925
|
+
private _handleGridKeyDown;
|
|
5671
6926
|
private handleLibraryChange;
|
|
5672
6927
|
private handleColorInput;
|
|
5673
6928
|
private handleFreeInput;
|
|
@@ -5710,7 +6965,9 @@ declare module "components/inline-edit/inline-edit.component" {
|
|
|
5710
6965
|
*
|
|
5711
6966
|
* @csspart base - The component's base wrapper.
|
|
5712
6967
|
*
|
|
5713
|
-
* @cssproperty --
|
|
6968
|
+
* @cssproperty --zn-inline-edit-hover-background - The fill behind a field while hovered or focused.
|
|
6969
|
+
* @cssproperty --zn-inline-edit-bleed - How far the hover fill extends past the left edge of the value.
|
|
6970
|
+
* @cssproperty --zn-inline-edit-underline-color - The dotted underline marking an editable value at rest.
|
|
5714
6971
|
*/
|
|
5715
6972
|
export default class ZnInlineEdit extends ZincElement implements ZincFormControl {
|
|
5716
6973
|
static styles: CSSResultGroup;
|
|
@@ -5802,6 +7059,7 @@ declare module "components/inline-edit/inline-edit.component" {
|
|
|
5802
7059
|
autocomplete: string;
|
|
5803
7060
|
private hasFocus;
|
|
5804
7061
|
private isEditing;
|
|
7062
|
+
private textScrolledToEnd;
|
|
5805
7063
|
private _valueBeforeEdit;
|
|
5806
7064
|
private _editStartValue;
|
|
5807
7065
|
input: ZnInput | ZnSelect;
|
|
@@ -5818,6 +7076,8 @@ declare module "components/inline-edit/inline-edit.component" {
|
|
|
5818
7076
|
protected willUpdate(changedProperties: PropertyValues): void;
|
|
5819
7077
|
handleValueChange(): Promise<void>;
|
|
5820
7078
|
handleIsEditingChange(): Promise<void>;
|
|
7079
|
+
private get textControl();
|
|
7080
|
+
updateTextScrolledToEnd: () => void;
|
|
5821
7081
|
mouseEventHandler: (e: MouseEvent) => void;
|
|
5822
7082
|
escKeyHandler: (e: KeyboardEvent) => void;
|
|
5823
7083
|
submitKeyHandler: (e: KeyboardEvent) => void;
|
|
@@ -5885,41 +7145,149 @@ declare module "components/vertical-stepper/vertical-stepper.component" {
|
|
|
5885
7145
|
* @summary Vertical steppers display a sequence of steps in a vertical layout with descriptions and optional icons.
|
|
5886
7146
|
* @documentation https://zinc.style/components/vertical-stepper
|
|
5887
7147
|
* @status experimental
|
|
5888
|
-
* @since 1.0
|
|
7148
|
+
* @since 1.0
|
|
7149
|
+
*
|
|
7150
|
+
* @property {boolean} last - When true, removes the connecting line below this step (use for the final step in a sequence).
|
|
7151
|
+
* @property {boolean} first - When true, indicates this is the first step in the sequence (affects visual styling).
|
|
7152
|
+
* @property {boolean} active - When true, highlights this step as the current active step in the process.
|
|
7153
|
+
* @property {string} description - A descriptive text explaining what happens in this step or its current status.
|
|
7154
|
+
* @property {string} caption - The main label/title for this step.
|
|
7155
|
+
* @property {string} type - Marker colour: neutral, primary, success, error, warning, info or ai (AI-generated steps only). Overrides `active`.
|
|
7156
|
+
* @property {boolean} selected - When true, rings the marker to show the step is picked.
|
|
7157
|
+
* @property {boolean} dashed - When true, draws the marker's border dashed, for a step that is not yet final.
|
|
7158
|
+
* @property {boolean} highlightLine - When true, colours the line below this step's marker, joining it to the next step.
|
|
7159
|
+
*
|
|
7160
|
+
* @slot - Content below the caption and description, such as metadata or chips.
|
|
7161
|
+
* @slot icon - Optional slot for adding an icon or indicator before the step content.
|
|
7162
|
+
* @slot suffix - Inline content after the caption and description, such as status chips.
|
|
7163
|
+
* @slot actions - Controls aligned to the end of the step.
|
|
7164
|
+
*
|
|
7165
|
+
* @csspart vs - The main container for the vertical stepper.
|
|
7166
|
+
* @csspart vs__left - The left section containing the icon and connecting line.
|
|
7167
|
+
* @csspart vs__icon - The icon container.
|
|
7168
|
+
* @csspart vs__line - The vertical connecting line between steps.
|
|
7169
|
+
* @csspart vs__right - The right section containing caption and description text.
|
|
7170
|
+
* @csspart vs__caption - The caption/title text element.
|
|
7171
|
+
* @csspart vs__description - The description text element.
|
|
7172
|
+
* @csspart vs__content - The container for the default slot.
|
|
7173
|
+
* @csspart vs__actions - The container for the actions slot.
|
|
7174
|
+
*/
|
|
7175
|
+
export default class ZnVerticalStepper extends ZincElement {
|
|
7176
|
+
static styles: CSSResultGroup;
|
|
7177
|
+
last: boolean;
|
|
7178
|
+
first: boolean;
|
|
7179
|
+
active: boolean;
|
|
7180
|
+
description: string;
|
|
7181
|
+
caption: string;
|
|
7182
|
+
type: 'neutral' | 'primary' | 'success' | 'error' | 'warning' | 'info' | 'ai';
|
|
7183
|
+
selected: boolean;
|
|
7184
|
+
dashed: boolean;
|
|
7185
|
+
highlightLine: boolean;
|
|
7186
|
+
private readonly hasSlotController;
|
|
7187
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
7188
|
+
}
|
|
7189
|
+
}
|
|
7190
|
+
declare module "components/vertical-stepper/index" {
|
|
7191
|
+
import ZnVerticalStepper from "components/vertical-stepper/vertical-stepper.component";
|
|
7192
|
+
export * from "components/vertical-stepper/vertical-stepper.component";
|
|
7193
|
+
export default ZnVerticalStepper;
|
|
7194
|
+
global {
|
|
7195
|
+
interface HTMLElementTagNameMap {
|
|
7196
|
+
'zn-vertical-stepper': ZnVerticalStepper;
|
|
7197
|
+
}
|
|
7198
|
+
}
|
|
7199
|
+
}
|
|
7200
|
+
declare module "components/diff/diff.component" {
|
|
7201
|
+
import { type CSSResultGroup } from 'lit';
|
|
7202
|
+
import ZincElement from "internal/zinc-element";
|
|
7203
|
+
/**
|
|
7204
|
+
* @summary A side-by-side comparison of two versions of something, one column each, built from `zn-diff-row`s.
|
|
7205
|
+
* @documentation https://zinc.style/components/diff
|
|
7206
|
+
* @status experimental
|
|
7207
|
+
* @since 1.1
|
|
7208
|
+
*
|
|
7209
|
+
* @property {string} beforeCaption - The left column's heading, such as the older version.
|
|
7210
|
+
* @property {string} beforeDescription - A line under the left heading.
|
|
7211
|
+
* @property {string} afterCaption - The right column's heading, such as the newer version.
|
|
7212
|
+
* @property {string} afterDescription - A line under the right heading.
|
|
7213
|
+
*
|
|
7214
|
+
* @slot - The `zn-diff-row`s.
|
|
7215
|
+
* @slot before - Inline content after the left heading, such as a status badge.
|
|
7216
|
+
* @slot after - Inline content after the right heading, such as a status badge.
|
|
7217
|
+
*
|
|
7218
|
+
* @csspart base - The table.
|
|
7219
|
+
* @csspart head - The sticky row of column headings.
|
|
7220
|
+
*
|
|
7221
|
+
* @cssproperty --zn-diff-head-background - The heading row's background.
|
|
7222
|
+
* @cssproperty --zn-diff-sticky-top - How far from the top of its scroll container the heading row sticks.
|
|
7223
|
+
*/
|
|
7224
|
+
export default class ZnDiff extends ZincElement {
|
|
7225
|
+
static styles: CSSResultGroup;
|
|
7226
|
+
beforeCaption: string;
|
|
7227
|
+
beforeDescription: string;
|
|
7228
|
+
afterCaption: string;
|
|
7229
|
+
afterDescription: string;
|
|
7230
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
7231
|
+
}
|
|
7232
|
+
}
|
|
7233
|
+
declare module "components/diff/index" {
|
|
7234
|
+
import ZnDiff from "components/diff/diff.component";
|
|
7235
|
+
export * from "components/diff/diff.component";
|
|
7236
|
+
export default ZnDiff;
|
|
7237
|
+
global {
|
|
7238
|
+
interface HTMLElementTagNameMap {
|
|
7239
|
+
'zn-diff': ZnDiff;
|
|
7240
|
+
}
|
|
7241
|
+
}
|
|
7242
|
+
}
|
|
7243
|
+
declare module "components/diff-row/diff-row.component" {
|
|
7244
|
+
import { type CSSResultGroup } from 'lit';
|
|
7245
|
+
import ZincElement from "internal/zinc-element";
|
|
7246
|
+
import ZnBadge from "components/badge/index";
|
|
7247
|
+
/**
|
|
7248
|
+
* @summary One aligned row of a `zn-diff`: the same item in both versions, tinted by how it changed.
|
|
7249
|
+
* @documentation https://zinc.style/components/diff-row
|
|
7250
|
+
* @status experimental
|
|
7251
|
+
* @since 1.1
|
|
5889
7252
|
*
|
|
5890
|
-
* @
|
|
5891
|
-
* @property {boolean} first - When true, indicates this is the first step in the sequence (affects visual styling).
|
|
5892
|
-
* @property {boolean} active - When true, highlights this step as the current active step in the process.
|
|
5893
|
-
* @property {string} description - A descriptive text explaining what happens in this step or its current status.
|
|
5894
|
-
* @property {string} caption - The main label/title for this step.
|
|
7253
|
+
* @dependency zn-badge
|
|
5895
7254
|
*
|
|
5896
|
-
* @
|
|
7255
|
+
* @property {string} caption - The item's name, shown in both columns.
|
|
7256
|
+
* @property {string} change - How the item changed: `changed`, `added` or `removed`. Unchanged when empty.
|
|
7257
|
+
* @property {boolean} heading - When true, the row is a heading spanning both columns, such as a section name.
|
|
7258
|
+
* @property {string} beforePlaceholder - Shown in the left column when the item was added.
|
|
7259
|
+
* @property {string} afterPlaceholder - Shown in the right column when the item was removed.
|
|
5897
7260
|
*
|
|
5898
|
-
* @
|
|
5899
|
-
* @
|
|
5900
|
-
*
|
|
5901
|
-
* @csspart
|
|
5902
|
-
* @csspart
|
|
5903
|
-
* @csspart
|
|
5904
|
-
*
|
|
7261
|
+
* @slot before - The item's details in the older version.
|
|
7262
|
+
* @slot after - The item's details in the newer version.
|
|
7263
|
+
*
|
|
7264
|
+
* @csspart row - The row.
|
|
7265
|
+
* @csspart before - The left cell.
|
|
7266
|
+
* @csspart after - The right cell.
|
|
7267
|
+
*
|
|
7268
|
+
* @cssproperty --zn-diff-row-border - The line below the row.
|
|
5905
7269
|
*/
|
|
5906
|
-
export default class
|
|
7270
|
+
export default class ZnDiffRow extends ZincElement {
|
|
5907
7271
|
static styles: CSSResultGroup;
|
|
5908
|
-
|
|
5909
|
-
|
|
5910
|
-
|
|
5911
|
-
description: string;
|
|
7272
|
+
static dependencies: {
|
|
7273
|
+
'zn-badge': typeof ZnBadge;
|
|
7274
|
+
};
|
|
5912
7275
|
caption: string;
|
|
7276
|
+
change: '' | 'changed' | 'added' | 'removed';
|
|
7277
|
+
heading: boolean;
|
|
7278
|
+
beforePlaceholder: string;
|
|
7279
|
+
afterPlaceholder: string;
|
|
7280
|
+
private renderCell;
|
|
5913
7281
|
render(): import("lit-html").TemplateResult<1>;
|
|
5914
7282
|
}
|
|
5915
7283
|
}
|
|
5916
|
-
declare module "components/
|
|
5917
|
-
import
|
|
5918
|
-
export * from "components/
|
|
5919
|
-
export default
|
|
7284
|
+
declare module "components/diff-row/index" {
|
|
7285
|
+
import ZnDiffRow from "components/diff-row/diff-row.component";
|
|
7286
|
+
export * from "components/diff-row/diff-row.component";
|
|
7287
|
+
export default ZnDiffRow;
|
|
5920
7288
|
global {
|
|
5921
7289
|
interface HTMLElementTagNameMap {
|
|
5922
|
-
'zn-
|
|
7290
|
+
'zn-diff-row': ZnDiffRow;
|
|
5923
7291
|
}
|
|
5924
7292
|
}
|
|
5925
7293
|
}
|
|
@@ -6000,6 +7368,7 @@ declare module "components/table/table.component" {
|
|
|
6000
7368
|
connectedCallback(): void;
|
|
6001
7369
|
tableHead(): import("lit-html").TemplateResult<1> | undefined;
|
|
6002
7370
|
tableBody(): import("lit-html").TemplateResult<1>;
|
|
7371
|
+
private handleRowClick;
|
|
6003
7372
|
columnContent(col: any): any;
|
|
6004
7373
|
render(): import("lit-html").TemplateResult<1>;
|
|
6005
7374
|
}
|
|
@@ -6118,10 +7487,13 @@ declare module "components/split-pane/split-pane.component" {
|
|
|
6118
7487
|
protected _store: Store;
|
|
6119
7488
|
connectedCallback(): void;
|
|
6120
7489
|
disconnectedCallback(): void;
|
|
7490
|
+
private keepSecondarySize;
|
|
6121
7491
|
private refreshNarrowState;
|
|
6122
7492
|
firstUpdated(changedProperties: PropertyValues): void;
|
|
6123
7493
|
applyStoredSize(): void;
|
|
6124
7494
|
resize(e: any): void;
|
|
7495
|
+
private storeSize;
|
|
7496
|
+
private handleResizerKeyDown;
|
|
6125
7497
|
setSize(primaryPanelPixels: number): void;
|
|
6126
7498
|
_setFocusPane(idx: number): void;
|
|
6127
7499
|
private getDirectNestedSplitPanes;
|
|
@@ -6300,7 +7672,7 @@ declare module "components/stepper/index" {
|
|
|
6300
7672
|
}
|
|
6301
7673
|
}
|
|
6302
7674
|
declare module "components/stat/stat.component" {
|
|
6303
|
-
import { type CSSResultGroup } from 'lit';
|
|
7675
|
+
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
6304
7676
|
import ZincElement from "internal/zinc-element";
|
|
6305
7677
|
import type { IconColor } from "components/icon/index";
|
|
6306
7678
|
/**
|
|
@@ -6322,8 +7694,21 @@ declare module "components/stat/stat.component" {
|
|
|
6322
7694
|
showDelta: boolean;
|
|
6323
7695
|
color: 'primary' | 'error' | 'info' | 'warning' | 'success' | 'neutral';
|
|
6324
7696
|
/** `value-first` puts the amount under the caption with the description beneath it, and tints the amount rather
|
|
6325
|
-
* than the description with `color`.
|
|
6326
|
-
|
|
7697
|
+
* than the description with `color`. `tile` is a self-contained card: caption, amount, a footer with the delta and
|
|
7698
|
+
* `description`, an optional sparkline, and the default slot beneath. */
|
|
7699
|
+
layout: 'default' | 'value-first' | 'tile';
|
|
7700
|
+
/** Comma-separated values drawn as a sparkline under a `tile`. */
|
|
7701
|
+
spark: string;
|
|
7702
|
+
/** The sparkline's colour: a tone (`primary`, `info`, `success`, `warning`, `danger`, `ai`) or any CSS colour. */
|
|
7703
|
+
sparkColor: string;
|
|
7704
|
+
/** Treats a rise as bad news, so an increase is coloured as a loss (declines, refunds, failures). */
|
|
7705
|
+
invertDelta: boolean;
|
|
7706
|
+
/** A coloured dot before a `tile`'s caption. */
|
|
7707
|
+
tone: '' | 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
7708
|
+
/** Renders a `tile` as a toggle button, for tiles that filter the content below them. */
|
|
7709
|
+
selectable: boolean;
|
|
7710
|
+
/** Whether a `selectable` tile is pressed, or a linked tile marks the view the page is showing. */
|
|
7711
|
+
selected: boolean;
|
|
6327
7712
|
/** How `show-delta` compares with `previous`: the relative change, or the difference in points. */
|
|
6328
7713
|
deltaFormat: 'percent' | 'points';
|
|
6329
7714
|
/** An icon shown beside the amount. */
|
|
@@ -6334,15 +7719,36 @@ declare module "components/stat/stat.component" {
|
|
|
6334
7719
|
size: 'medium' | 'large';
|
|
6335
7720
|
/** Pads the stat, for stats laid edge to edge in a flush container such as `zn-cols no-gap divide`. */
|
|
6336
7721
|
padded: boolean;
|
|
7722
|
+
/** Makes the whole stat a link, marked with an arrow in its corner. */
|
|
7723
|
+
href: string;
|
|
7724
|
+
dataTarget: string;
|
|
7725
|
+
gaid: string;
|
|
7726
|
+
/** JSON fetched once to fill the stat: any of `caption`, `amount`, `description`, `previous`, `spark` and
|
|
7727
|
+
* `sparkColor`. The stat's own attributes show until it loads. */
|
|
7728
|
+
dataUrl: string;
|
|
7729
|
+
/** Shows a `tile` as a placeholder. Set while `data-url` loads; the sparkline draws in once it clears. */
|
|
7730
|
+
loading: boolean;
|
|
7731
|
+
private loaded;
|
|
7732
|
+
private static readonly loadableKeys;
|
|
7733
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
7734
|
+
protected updated(changed: PropertyValues): void;
|
|
7735
|
+
private loadData;
|
|
7736
|
+
private parseNumber;
|
|
6337
7737
|
calcPercentageDifference(): number;
|
|
6338
7738
|
getCurrentAmount(): string;
|
|
6339
7739
|
private getDisplayAmount;
|
|
6340
7740
|
diffText(): import("lit-html").TemplateResult<1> | null;
|
|
7741
|
+
private fromZero;
|
|
6341
7742
|
private pointsDelta;
|
|
6342
7743
|
private renderAmount;
|
|
6343
7744
|
private renderValueFirst;
|
|
6344
7745
|
private percentDelta;
|
|
7746
|
+
private tileDelta;
|
|
7747
|
+
private sparkStroke;
|
|
7748
|
+
private renderSpark;
|
|
7749
|
+
private renderTile;
|
|
6345
7750
|
render(): import("lit-html").TemplateResult<1>;
|
|
7751
|
+
private renderDefault;
|
|
6346
7752
|
}
|
|
6347
7753
|
}
|
|
6348
7754
|
declare module "components/stat/index" {
|
|
@@ -6384,9 +7790,12 @@ declare module "components/scroll-container/scroll-container.component" {
|
|
|
6384
7790
|
private footer;
|
|
6385
7791
|
private _footerObserved;
|
|
6386
7792
|
private _footerHeightFrame;
|
|
7793
|
+
private _scrollEndTimer;
|
|
6387
7794
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
6388
7795
|
protected updated(changedProperties: PropertyValues): void;
|
|
6389
7796
|
disconnectedCallback(): void;
|
|
7797
|
+
private _queueScrollEnd;
|
|
7798
|
+
private _cancelScrollEnd;
|
|
6390
7799
|
scrollEnd(): void;
|
|
6391
7800
|
private _syncFooterHeight;
|
|
6392
7801
|
private readonly _footerResizeObserver;
|
|
@@ -6685,12 +8094,15 @@ declare module "components/editor/modules/toolbar/toolbar.component" {
|
|
|
6685
8094
|
private _overflowGroup;
|
|
6686
8095
|
private _featureConfig;
|
|
6687
8096
|
private _resizeId;
|
|
8097
|
+
private _fitRange;
|
|
8098
|
+
private _measured;
|
|
6688
8099
|
private readonly _resizeObserver;
|
|
6689
8100
|
private _movedContent;
|
|
6690
8101
|
connectedCallback(): void;
|
|
6691
8102
|
disconnectedCallback(): void;
|
|
6692
8103
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
6693
|
-
|
|
8104
|
+
protected updated(changedProperties: PropertyValues): void;
|
|
8105
|
+
handleResize: (width?: number) => void;
|
|
6694
8106
|
configureToolbar(config: EditorFeatureConfig): void;
|
|
6695
8107
|
private getToolbarWidth;
|
|
6696
8108
|
private getOverflowGroupWidth;
|
|
@@ -6700,10 +8112,15 @@ declare module "components/editor/modules/toolbar/toolbar.component" {
|
|
|
6700
8112
|
private updateEmptyGroups;
|
|
6701
8113
|
private _updateDividerClasses;
|
|
6702
8114
|
private calculateOverflow;
|
|
8115
|
+
/** Shows every group and records their widths. Returns the toolbar width. */
|
|
8116
|
+
private measureGroups;
|
|
8117
|
+
/** Shows the leading groups that fit `width` and moves the rest into the overflow menu. */
|
|
8118
|
+
private layoutGroups;
|
|
6703
8119
|
private _dispatchOverflowEvent;
|
|
6704
8120
|
private populateOverflowMenu;
|
|
6705
8121
|
render(): import("lit-html").TemplateResult<1>;
|
|
6706
8122
|
private _textOptions;
|
|
8123
|
+
private _compactToolbar;
|
|
6707
8124
|
private _formatOptions;
|
|
6708
8125
|
private _commonFormatOptions;
|
|
6709
8126
|
private _historyOptions;
|
|
@@ -6733,6 +8150,9 @@ declare module "components/editor/modules/dialog/dialog.component" {
|
|
|
6733
8150
|
connectedCallback(): void;
|
|
6734
8151
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
6735
8152
|
private handleContentCloserClick;
|
|
8153
|
+
/** Inserts the element named by the control's `editor-content-id`: a `<template>` as HTML, anything else as text.
|
|
8154
|
+
* The control's form is submitted first, as inserting closes the dialog and detaches it. */
|
|
8155
|
+
private insertContent;
|
|
6736
8156
|
setContent(content: string): void;
|
|
6737
8157
|
handleOpenChange(): void;
|
|
6738
8158
|
private addOpenListeners;
|
|
@@ -6822,6 +8242,7 @@ declare module "components/editor/modules/toolbar/toolbar" {
|
|
|
6822
8242
|
private _updateMenuCheckedState;
|
|
6823
8243
|
private _updateDropdownTrigger;
|
|
6824
8244
|
private _syncButtonState;
|
|
8245
|
+
private _unlink;
|
|
6825
8246
|
private _insertDivider;
|
|
6826
8247
|
private _openDatePicker;
|
|
6827
8248
|
private _openDialog;
|
|
@@ -6838,9 +8259,10 @@ declare module "components/editor/modules/attachment/attachment" {
|
|
|
6838
8259
|
url: any;
|
|
6839
8260
|
filename: any;
|
|
6840
8261
|
}>;
|
|
6841
|
-
onFileUploaded?: (node: HTMLElement, { url }: {
|
|
8262
|
+
onFileUploaded?: (node: HTMLElement | null, { url }: {
|
|
6842
8263
|
url: string;
|
|
6843
8264
|
}) => void;
|
|
8265
|
+
onFileUploadFailed?: (error: Error) => void;
|
|
6844
8266
|
attachmentInput?: HTMLInputElement;
|
|
6845
8267
|
}
|
|
6846
8268
|
export default class Attachment {
|
|
@@ -6854,6 +8276,8 @@ declare module "components/editor/modules/attachment/attachment" {
|
|
|
6854
8276
|
private _attachmentContainer;
|
|
6855
8277
|
private _createAttachmentContainer;
|
|
6856
8278
|
private _insertAttachment;
|
|
8279
|
+
private _markAttachmentFailed;
|
|
8280
|
+
private _revokeObjectUrl;
|
|
6857
8281
|
private _updateAttachment;
|
|
6858
8282
|
private _createAttachment;
|
|
6859
8283
|
/** Clear every staged attachment preview and reset the backing form input. */
|
|
@@ -6896,6 +8320,8 @@ declare module "components/editor/modules/context-menu/context-menu" {
|
|
|
6896
8320
|
private _dismissedIndex;
|
|
6897
8321
|
private _keydownHandler;
|
|
6898
8322
|
private _docClickHandler;
|
|
8323
|
+
private _pointerHeld;
|
|
8324
|
+
private _pointerReleaseHandler;
|
|
6899
8325
|
private _featureConfig;
|
|
6900
8326
|
private readonly _caretAnchor;
|
|
6901
8327
|
constructor(quill: Quill, options: {
|
|
@@ -7020,6 +8446,30 @@ declare module "components/editor/modules/image-resize/image-resize" {
|
|
|
7020
8446
|
}
|
|
7021
8447
|
export default ImageResize;
|
|
7022
8448
|
}
|
|
8449
|
+
declare module "components/editor/modules/merge-field/merge-field" {
|
|
8450
|
+
import Embed from "quill/blots/embed";
|
|
8451
|
+
import Quill from "quill";
|
|
8452
|
+
export interface MergeFieldValue {
|
|
8453
|
+
token: string;
|
|
8454
|
+
label: string;
|
|
8455
|
+
}
|
|
8456
|
+
/** A `{{token}}` replacement shown as a labelled chip, saved back out as the raw token. */
|
|
8457
|
+
export class MergeFieldBlot extends Embed {
|
|
8458
|
+
static blotName: string;
|
|
8459
|
+
static tagName: string;
|
|
8460
|
+
static className: string;
|
|
8461
|
+
static create(value: MergeFieldValue): HTMLElement;
|
|
8462
|
+
static value(node: HTMLElement): MergeFieldValue;
|
|
8463
|
+
html(): string;
|
|
8464
|
+
}
|
|
8465
|
+
export const normaliseToken: (token: string) => string;
|
|
8466
|
+
class MergeField {
|
|
8467
|
+
constructor(quill: Quill, options: {
|
|
8468
|
+
labels?: Record<string, string>;
|
|
8469
|
+
});
|
|
8470
|
+
}
|
|
8471
|
+
export default MergeField;
|
|
8472
|
+
}
|
|
7023
8473
|
declare module "components/editor/modules/ai/panel/ai-panel.component" {
|
|
7024
8474
|
import ZincElement from "internal/zinc-element";
|
|
7025
8475
|
import type { CSSResultGroup } from "lit";
|
|
@@ -7096,8 +8546,10 @@ declare module "components/textarea/textarea.component" {
|
|
|
7096
8546
|
private readonly formControlController;
|
|
7097
8547
|
private readonly hasSlotController;
|
|
7098
8548
|
private readonly resizeObserver;
|
|
8549
|
+
private pointerHeld;
|
|
7099
8550
|
/** Ensures we only attempt to derive the initial value from light DOM content once */
|
|
7100
8551
|
private _didInitFromContent;
|
|
8552
|
+
private escapeSwallowed;
|
|
7101
8553
|
private readonly slashController;
|
|
7102
8554
|
formControl: HTMLElement;
|
|
7103
8555
|
input: HTMLTextAreaElement;
|
|
@@ -7139,6 +8591,8 @@ declare module "components/textarea/textarea.component" {
|
|
|
7139
8591
|
flush: boolean;
|
|
7140
8592
|
/** Makes the textarea a required field. */
|
|
7141
8593
|
required: boolean;
|
|
8594
|
+
/** Short text shown next to the label, styled like the help text, e.g. `optional`. */
|
|
8595
|
+
labelNote: string;
|
|
7142
8596
|
/** The minimum length of input that will be considered valid. */
|
|
7143
8597
|
minlength: number;
|
|
7144
8598
|
/** The maximum length of input that will be considered valid. */
|
|
@@ -7210,6 +8664,7 @@ declare module "components/textarea/textarea.component" {
|
|
|
7210
8664
|
private handleInput;
|
|
7211
8665
|
private handleInvalid;
|
|
7212
8666
|
private handleKeyDown;
|
|
8667
|
+
private handlePointerDown;
|
|
7213
8668
|
private setTextareaHeight;
|
|
7214
8669
|
handleDisabledChange(): void;
|
|
7215
8670
|
handleRowsChange(): void;
|
|
@@ -7329,6 +8784,7 @@ declare module "components/editor/editor.component" {
|
|
|
7329
8784
|
datesEnabled?: boolean;
|
|
7330
8785
|
emojisEnabled?: boolean;
|
|
7331
8786
|
codeEnabled?: boolean;
|
|
8787
|
+
compact?: boolean;
|
|
7332
8788
|
}
|
|
7333
8789
|
/**
|
|
7334
8790
|
* @summary Short summary of the component's intended use.
|
|
@@ -7342,6 +8798,7 @@ declare module "components/editor/editor.component" {
|
|
|
7342
8798
|
*
|
|
7343
8799
|
* @slot - The default slot.
|
|
7344
8800
|
* @slot example - An example slot.
|
|
8801
|
+
* @slot help-text - Text under the editor. Alternatively, use the `help-text` attribute.
|
|
7345
8802
|
*
|
|
7346
8803
|
* @csspart base - The component's base wrapper.
|
|
7347
8804
|
*
|
|
@@ -7350,12 +8807,28 @@ declare module "components/editor/editor.component" {
|
|
|
7350
8807
|
export default class ZnEditor extends ZincElement implements ZincFormControl {
|
|
7351
8808
|
static styles: CSSResultGroup;
|
|
7352
8809
|
private formControlController;
|
|
8810
|
+
private readonly hasSlotController;
|
|
7353
8811
|
private editor;
|
|
7354
8812
|
private editorHtml;
|
|
7355
8813
|
private toolbar;
|
|
7356
8814
|
id: string;
|
|
7357
8815
|
name: string;
|
|
7358
8816
|
value: string;
|
|
8817
|
+
placeholder: string;
|
|
8818
|
+
/** Draws the editor as a form field: a bordered, resizable box under a small toolbar of bold, italic, link and lists. */
|
|
8819
|
+
compact: boolean;
|
|
8820
|
+
/** Adds a Source button that switches to editing the raw HTML, which is submitted as written. */
|
|
8821
|
+
sourceEnabled: boolean;
|
|
8822
|
+
/** Edits the HTML in place as a whole document, keeping layout the editor can't hold, such as a designed email. */
|
|
8823
|
+
documentMode: boolean;
|
|
8824
|
+
private documentFrame;
|
|
8825
|
+
/** Shows only the content, without a toolbar or box, such as the source beside a translation. */
|
|
8826
|
+
readonly: boolean;
|
|
8827
|
+
/** With `compact`, a short label inside the box ahead of the content, such as a language code. */
|
|
8828
|
+
prefix: string;
|
|
8829
|
+
private _sourceMode;
|
|
8830
|
+
/** Text under the editor that describes how to use it. If you need to display HTML, use the `help-text` slot instead. */
|
|
8831
|
+
helpText: string;
|
|
7359
8832
|
interactionType: 'ticket' | 'chat';
|
|
7360
8833
|
uploadAttachmentUrl: string;
|
|
7361
8834
|
codeBlocksEnabled: boolean;
|
|
@@ -7368,6 +8841,11 @@ declare module "components/editor/editor.component" {
|
|
|
7368
8841
|
emojisEnabled: boolean;
|
|
7369
8842
|
codeEnabled: boolean;
|
|
7370
8843
|
aiEnabled: boolean;
|
|
8844
|
+
/**
|
|
8845
|
+
* Shows `{{token}}` replacements as highlighted chips, labelled from the matching `context-items`
|
|
8846
|
+
* quick action. The value still holds the raw tokens.
|
|
8847
|
+
*/
|
|
8848
|
+
mergeFieldsEnabled: boolean;
|
|
7371
8849
|
aiPath: string;
|
|
7372
8850
|
/**
|
|
7373
8851
|
* Caches unsent content while typing and restores it when the editor next loads,
|
|
@@ -7383,6 +8861,7 @@ declare module "components/editor/editor.component" {
|
|
|
7383
8861
|
private quillElement;
|
|
7384
8862
|
private _content;
|
|
7385
8863
|
private _selectionRange;
|
|
8864
|
+
private _pendingUploads;
|
|
7386
8865
|
get validity(): ValidityState;
|
|
7387
8866
|
get validationMessage(): string;
|
|
7388
8867
|
checkValidity(): boolean;
|
|
@@ -7391,9 +8870,16 @@ declare module "components/editor/editor.component" {
|
|
|
7391
8870
|
setCustomValidity(message: string): void;
|
|
7392
8871
|
connectedCallback(): void;
|
|
7393
8872
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
8873
|
+
private _toggleSource;
|
|
8874
|
+
private _loadDocument;
|
|
8875
|
+
private _fitDocument;
|
|
8876
|
+
private _handleDocumentInput;
|
|
8877
|
+
private _handleSourceInput;
|
|
8878
|
+
private _mergeFieldLabels;
|
|
7394
8879
|
private _handleTextChange;
|
|
7395
8880
|
private _isEmpty;
|
|
7396
8881
|
private _cacheContent;
|
|
8882
|
+
private _settleUpload;
|
|
7397
8883
|
private _clearCachedContent;
|
|
7398
8884
|
private _getQuillKeyboardBindings;
|
|
7399
8885
|
private _handleEditorChange;
|
|
@@ -7417,183 +8903,6 @@ declare module "components/editor/index" {
|
|
|
7417
8903
|
}
|
|
7418
8904
|
}
|
|
7419
8905
|
}
|
|
7420
|
-
declare module "internal/selection-card" {
|
|
7421
|
-
/** Where a selection card renders its image, relative to the card's text. */
|
|
7422
|
-
export type SelectionCardImagePosition = 'top' | 'right' | 'bottom' | 'left';
|
|
7423
|
-
/**
|
|
7424
|
-
* Where a selection card renders its radio/checkbox indicator. `start` keeps the standard
|
|
7425
|
-
* inline position; `none` hides the indicator so the card itself shows the selected state.
|
|
7426
|
-
*/
|
|
7427
|
-
export type SelectionCardControlPosition = 'start' | 'none' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
7428
|
-
}
|
|
7429
|
-
declare module "components/checkbox/checkbox.component" {
|
|
7430
|
-
import { type CSSResultGroup } from 'lit';
|
|
7431
|
-
import ZincElement from "internal/zinc-element";
|
|
7432
|
-
import ZnIcon from "components/icon/index";
|
|
7433
|
-
import type { SelectionCardControlPosition, SelectionCardImagePosition } from "internal/selection-card";
|
|
7434
|
-
import type { ZincFormControl } from "internal/zinc-element";
|
|
7435
|
-
type ColorOption = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'transparent';
|
|
7436
|
-
/**
|
|
7437
|
-
* @summary Short summary of the component's intended use.
|
|
7438
|
-
* @documentation https://zinc.style/components/checkbox
|
|
7439
|
-
* @status experimental
|
|
7440
|
-
* @since 1.0
|
|
7441
|
-
*
|
|
7442
|
-
* @dependency zn-icon
|
|
7443
|
-
*
|
|
7444
|
-
* @slot - The checkbox's label.
|
|
7445
|
-
* @slot image - Replaces the built-in image used by contained checkboxes.
|
|
7446
|
-
* @slot description - A description of the checkbox's label. Serves as help text for a checkbox item. Alternatively, you can use the `description` attribute.
|
|
7447
|
-
* @slot selected-content - Use to nest rich content (like an input) inside a selected checkbox item. Use only with the contained style.
|
|
7448
|
-
*
|
|
7449
|
-
* @event zn-blur - Emitted when the checkbox loses focus.
|
|
7450
|
-
* @event zn-change - Emitted when the checked state changes.
|
|
7451
|
-
* @event zn-focus - Emitted when the checkbox gains focus.
|
|
7452
|
-
* @event zn-input - Emitted when the checkbox receives input.
|
|
7453
|
-
* @event zn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
7454
|
-
*
|
|
7455
|
-
* @csspart base - The component's base wrapper.
|
|
7456
|
-
* @csspart control - The square container that wraps the checkbox's checked state.
|
|
7457
|
-
* @csspart control--checked - Matches the control part when the checkbox is checked.
|
|
7458
|
-
* @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
|
|
7459
|
-
* @csspart checked-icon - The checked icon, an `<zn-icon>` element.
|
|
7460
|
-
* @csspart unchecked-icon - The unchecked icon, an `<zn-icon>` element.
|
|
7461
|
-
* @csspart indeterminate-icon - The indeterminate icon, an `<svg>` element.
|
|
7462
|
-
* @csspart image-container - The wrapper around the built-in image or image slot.
|
|
7463
|
-
* @csspart image - The built-in image.
|
|
7464
|
-
* @csspart card-title - The title inside a selection card.
|
|
7465
|
-
* @csspart label - The container that wraps the checkbox's label.
|
|
7466
|
-
* @csspart description - The container that wraps the checkbox's description.
|
|
7467
|
-
* @csspart selected-content - The container that wraps optional content that appears when a checkbox is checked.
|
|
7468
|
-
*
|
|
7469
|
-
* @cssproperty --zn-selection-card-image-width - Width of the built-in card image.
|
|
7470
|
-
* @cssproperty --zn-selection-card-image-height - Height of the built-in card image.
|
|
7471
|
-
* @cssproperty --zn-selection-card-min-height - Minimum height of a contained checkbox with an image.
|
|
7472
|
-
* @cssproperty --zn-selection-card-content-min-width - Width the card text keeps before it wraps below the image.
|
|
7473
|
-
* @cssproperty --zn-selection-card-title-font-size - Font size of a selection card title.
|
|
7474
|
-
* @cssproperty --zn-selection-card-padding - Equal inset around the contents of a selection card.
|
|
7475
|
-
* @cssproperty --zn-selection-card-gap - Space between the image, title, and indicator gutter.
|
|
7476
|
-
* @cssproperty --zn-selection-card-control-offset - Distance between a positioned control and the card edge.
|
|
7477
|
-
* @cssproperty --zn-selection-card-border-radius - Corner radius of a contained container.
|
|
7478
|
-
*/
|
|
7479
|
-
export default class ZnCheckbox extends ZincElement implements ZincFormControl {
|
|
7480
|
-
static styles: CSSResultGroup;
|
|
7481
|
-
static dependencies: {
|
|
7482
|
-
'zn-icon': typeof ZnIcon;
|
|
7483
|
-
};
|
|
7484
|
-
private readonly formControlController;
|
|
7485
|
-
private readonly hasSlotController;
|
|
7486
|
-
input: HTMLInputElement;
|
|
7487
|
-
private hasFocus;
|
|
7488
|
-
title: string;
|
|
7489
|
-
/** The name of the checkbox, submitted as a name/value pair with form data. */
|
|
7490
|
-
name: string;
|
|
7491
|
-
/** The current value of the checkbox, submitted as a name/value pair with form data. */
|
|
7492
|
-
value: string;
|
|
7493
|
-
/** Title rendered inside the card. The default slot takes precedence when provided. */
|
|
7494
|
-
cardTitle: string;
|
|
7495
|
-
/** The unchecked value of the checkbox, submitted as a name/value pair with form data. */
|
|
7496
|
-
uncheckedValue: string;
|
|
7497
|
-
/** The checkbox's size. */
|
|
7498
|
-
size: 'small' | 'medium' | 'large';
|
|
7499
|
-
/** Disables the checkbox. */
|
|
7500
|
-
disabled: boolean;
|
|
7501
|
-
/** Draws the checkbox in a checked state. */
|
|
7502
|
-
checked: boolean;
|
|
7503
|
-
/**
|
|
7504
|
-
* Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
|
|
7505
|
-
* all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
|
|
7506
|
-
*/
|
|
7507
|
-
indeterminate: boolean;
|
|
7508
|
-
/** Draws a container around the checkbox. */
|
|
7509
|
-
contained: boolean;
|
|
7510
|
-
/** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
|
|
7511
|
-
square: boolean;
|
|
7512
|
-
/** URL for the image shown in a contained checkbox. */
|
|
7513
|
-
src: string;
|
|
7514
|
-
/** Accessible text for the built-in image. Leave empty when the image is decorative. */
|
|
7515
|
-
imageAlt: string;
|
|
7516
|
-
/** Places the image above, beside, or below the checkbox's text. Requires `contained`. */
|
|
7517
|
-
imagePosition: SelectionCardImagePosition;
|
|
7518
|
-
/**
|
|
7519
|
-
* Places the checkbox indicator within a contained card. Use `none` to hide the indicator so the card itself
|
|
7520
|
-
* shows the selected state. Requires `contained`.
|
|
7521
|
-
*/
|
|
7522
|
-
controlPosition: SelectionCardControlPosition;
|
|
7523
|
-
/** Removes a container around the checkbox. */
|
|
7524
|
-
borderless: boolean;
|
|
7525
|
-
/** Applies styles relevant to checkboxes in a horizontal layout. */
|
|
7526
|
-
horizontal: boolean;
|
|
7527
|
-
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
7528
|
-
defaultChecked: boolean;
|
|
7529
|
-
/**
|
|
7530
|
-
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
7531
|
-
* to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
|
|
7532
|
-
* the same document or shadow root for this to work.
|
|
7533
|
-
*/
|
|
7534
|
-
form: string;
|
|
7535
|
-
/** Makes the checkbox a required field. */
|
|
7536
|
-
required: boolean;
|
|
7537
|
-
/** Submits the form when checkbox is clicked. */
|
|
7538
|
-
submitOnClick: boolean;
|
|
7539
|
-
/** The checkbox's help text. If you need to display HTML, use the `description` slot instead. */
|
|
7540
|
-
description: string;
|
|
7541
|
-
label: string;
|
|
7542
|
-
labelTooltip: string;
|
|
7543
|
-
/** The icon to show when the checkbox is checked. */
|
|
7544
|
-
checkedIcon: string;
|
|
7545
|
-
/** The icon to show when the checkbox is unchecked. */
|
|
7546
|
-
uncheckedIcon: string;
|
|
7547
|
-
/** The color of the checkbox. */
|
|
7548
|
-
color: ColorOption;
|
|
7549
|
-
/** The color of the checkbox when checked. Overrides `color`. */
|
|
7550
|
-
checkedColor: ColorOption;
|
|
7551
|
-
/** The color of the checkbox when unchecked. Overrides `color`. */
|
|
7552
|
-
uncheckedColor: ColorOption;
|
|
7553
|
-
/** Gets the validity state object */
|
|
7554
|
-
get validity(): ValidityState;
|
|
7555
|
-
get isChecked(): boolean;
|
|
7556
|
-
/** Gets the validation message */
|
|
7557
|
-
get validationMessage(): string;
|
|
7558
|
-
firstUpdated(): void;
|
|
7559
|
-
private handleClick;
|
|
7560
|
-
private handleBlur;
|
|
7561
|
-
private handleInput;
|
|
7562
|
-
private handleInvalid;
|
|
7563
|
-
private handleFocus;
|
|
7564
|
-
private handleSelectedContentClick;
|
|
7565
|
-
handleDisabledChange(): void;
|
|
7566
|
-
handleStateChange(): void;
|
|
7567
|
-
/** Simulates a click on the checkbox. */
|
|
7568
|
-
click(): void;
|
|
7569
|
-
/** Sets focus on the checkbox. */
|
|
7570
|
-
focus(options?: FocusOptions): void;
|
|
7571
|
-
/** Removes focus from the checkbox. */
|
|
7572
|
-
blur(): void;
|
|
7573
|
-
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
|
7574
|
-
checkValidity(): boolean;
|
|
7575
|
-
/** Gets the associated form, if one exists. */
|
|
7576
|
-
getForm(): HTMLFormElement | null;
|
|
7577
|
-
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
|
7578
|
-
reportValidity(): boolean;
|
|
7579
|
-
/**
|
|
7580
|
-
* Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear
|
|
7581
|
-
* the custom validation message, call this method with an empty string.
|
|
7582
|
-
*/
|
|
7583
|
-
setCustomValidity(message: string): void;
|
|
7584
|
-
render(): import("lit-html").TemplateResult<1>;
|
|
7585
|
-
}
|
|
7586
|
-
}
|
|
7587
|
-
declare module "components/checkbox/index" {
|
|
7588
|
-
import ZnCheckbox from "components/checkbox/checkbox.component";
|
|
7589
|
-
export * from "components/checkbox/checkbox.component";
|
|
7590
|
-
export default ZnCheckbox;
|
|
7591
|
-
global {
|
|
7592
|
-
interface HTMLElementTagNameMap {
|
|
7593
|
-
'zn-checkbox': ZnCheckbox;
|
|
7594
|
-
}
|
|
7595
|
-
}
|
|
7596
|
-
}
|
|
7597
8906
|
declare module "components/form-actions/form-actions.component" {
|
|
7598
8907
|
import { type CSSResultGroup } from 'lit';
|
|
7599
8908
|
import ZincElement from "internal/zinc-element";
|
|
@@ -7640,6 +8949,18 @@ declare module "components/form-actions/form-actions.component" {
|
|
|
7640
8949
|
resetIcon: string;
|
|
7641
8950
|
/** The id of the form to act on. If omitted, the closest containing form is used. */
|
|
7642
8951
|
form: string;
|
|
8952
|
+
/**
|
|
8953
|
+
* Shows the submit button loading and ignores further submits until the console reports the request finished,
|
|
8954
|
+
* so a slow save such as an upload can't be sent twice. Only for forms the console submits.
|
|
8955
|
+
*/
|
|
8956
|
+
loadingOnSubmit: boolean;
|
|
8957
|
+
private submitting;
|
|
8958
|
+
private watchedForm;
|
|
8959
|
+
connectedCallback(): void;
|
|
8960
|
+
disconnectedCallback(): void;
|
|
8961
|
+
private handleFormSubmit;
|
|
8962
|
+
private handleRequested;
|
|
8963
|
+
private handleDone;
|
|
7643
8964
|
private getForm;
|
|
7644
8965
|
private handleCancel;
|
|
7645
8966
|
private handleReset;
|
|
@@ -7691,6 +9012,8 @@ declare module "components/form-group/form-group.component" {
|
|
|
7691
9012
|
helpText: string;
|
|
7692
9013
|
forceCols: boolean;
|
|
7693
9014
|
layout: string;
|
|
9015
|
+
/** Labels the group like one of its fields and keeps it tight to them, for a section inside a form or dialog. */
|
|
9016
|
+
compact: boolean;
|
|
7694
9017
|
pad: boolean;
|
|
7695
9018
|
/** The scroller the label is moved against by hand; null while native sticky is enough. */
|
|
7696
9019
|
private tracked;
|
|
@@ -7905,7 +9228,7 @@ declare module "components/radio/radio.component" {
|
|
|
7905
9228
|
* @csspart base - The component's base wrapper.
|
|
7906
9229
|
* @csspart control - The square container that wraps the radio's checked state.
|
|
7907
9230
|
* @csspart control--checked - Matches the control part when the radio is checked.
|
|
7908
|
-
* @csspart checked-icon - The checked
|
|
9231
|
+
* @csspart checked-icon - The checked dot, a `<span>` element.
|
|
7909
9232
|
* @csspart image-container - The wrapper around the built-in image or image slot.
|
|
7910
9233
|
* @csspart image - The built-in image.
|
|
7911
9234
|
* @csspart card-title - The title inside a selection card.
|
|
@@ -7931,6 +9254,8 @@ declare module "components/radio/radio.component" {
|
|
|
7931
9254
|
private readonly formControlController;
|
|
7932
9255
|
private readonly hasSlotController;
|
|
7933
9256
|
input: HTMLInputElement;
|
|
9257
|
+
control: HTMLElement;
|
|
9258
|
+
private readonly pointerIntent;
|
|
7934
9259
|
private hasFocus;
|
|
7935
9260
|
title: string;
|
|
7936
9261
|
/** The name of the radio, submitted as a name/value pair with form data. */
|
|
@@ -7949,6 +9274,8 @@ declare module "components/radio/radio.component" {
|
|
|
7949
9274
|
contained: boolean;
|
|
7950
9275
|
/** Squares off the corners of the container drawn by `contained`, which is rounded by default. */
|
|
7951
9276
|
square: boolean;
|
|
9277
|
+
/** Centres the text of a contained radio that has no image or `card-title`. */
|
|
9278
|
+
centered: boolean;
|
|
7952
9279
|
/** URL for the image shown in a contained radio. */
|
|
7953
9280
|
src: string;
|
|
7954
9281
|
/** Accessible text for the built-in image. Leave empty when the image is decorative. */
|
|
@@ -7956,12 +9283,16 @@ declare module "components/radio/radio.component" {
|
|
|
7956
9283
|
/** Places the image above, beside, or below the radio's text. Requires `contained`. */
|
|
7957
9284
|
imagePosition: SelectionCardImagePosition;
|
|
7958
9285
|
/**
|
|
7959
|
-
* Places the radio indicator within a contained card.
|
|
7960
|
-
*
|
|
9286
|
+
* Places the radio indicator within a contained card. A contained radio without an image or `card-title` hides it
|
|
9287
|
+
* at `start`, as does `none`. Requires `contained`.
|
|
7961
9288
|
*/
|
|
7962
9289
|
controlPosition: SelectionCardControlPosition;
|
|
7963
9290
|
/** Applies styles relevant to radios in a horizontal layout. */
|
|
7964
9291
|
horizontal: boolean;
|
|
9292
|
+
/** Draws the radio as one segment of a scale. Set by a radio group with `scale`. */
|
|
9293
|
+
scale: boolean;
|
|
9294
|
+
/** Fills a scale segment, as one at or before the group's checked radio. Set by a radio group with `scale`. */
|
|
9295
|
+
filled: boolean;
|
|
7965
9296
|
/** The default value of the form control. Primarily used for resetting the form control. */
|
|
7966
9297
|
defaultChecked: boolean;
|
|
7967
9298
|
/**
|
|
@@ -7982,13 +9313,15 @@ declare module "components/radio/radio.component" {
|
|
|
7982
9313
|
get validationMessage(): string;
|
|
7983
9314
|
firstUpdated(): void;
|
|
7984
9315
|
private handleClick;
|
|
9316
|
+
/** Each input sits in its own shadow root, so the browser can't group same-named radios outside a radio group. */
|
|
9317
|
+
private uncheckNamedSiblings;
|
|
7985
9318
|
private handleBlur;
|
|
7986
9319
|
private handleInput;
|
|
7987
9320
|
private handleInvalid;
|
|
7988
9321
|
private handleFocus;
|
|
7989
9322
|
private handleSelectedContentClick;
|
|
7990
9323
|
handleDisabledChange(): void;
|
|
7991
|
-
handleStateChange(): void
|
|
9324
|
+
handleStateChange(): Promise<void>;
|
|
7992
9325
|
/** Simulates a click on the radio. */
|
|
7993
9326
|
click(): void;
|
|
7994
9327
|
/** Sets focus on the radio. */
|
|
@@ -8087,6 +9420,7 @@ declare module "components/rating/rating.component" {
|
|
|
8087
9420
|
private _getValueFromMousePosition;
|
|
8088
9421
|
private _getValueFromTouchPosition;
|
|
8089
9422
|
private _setValue;
|
|
9423
|
+
private _handleKeyDown;
|
|
8090
9424
|
private _handleClick;
|
|
8091
9425
|
private _handleMouseEnter;
|
|
8092
9426
|
private _handleMouseMove;
|
|
@@ -8160,11 +9494,18 @@ declare module "components/radio-group/radio-group.component" {
|
|
|
8160
9494
|
contained: boolean;
|
|
8161
9495
|
/** Squares off the corners of every contained radio in the group, which are rounded by default. */
|
|
8162
9496
|
square: boolean;
|
|
9497
|
+
/** Centres the text of every contained radio in the group. */
|
|
9498
|
+
centered: boolean;
|
|
8163
9499
|
/**
|
|
8164
9500
|
* Lays horizontal contained radios out as a wrapping row instead of an equal-width grid, so each one sizes from
|
|
8165
9501
|
* `--zn-radio-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
|
|
8166
9502
|
*/
|
|
8167
9503
|
wrap: boolean;
|
|
9504
|
+
/**
|
|
9505
|
+
* Lays the radios out as a segmented scale, in document order, filling every segment up to the checked one. Suits
|
|
9506
|
+
* ordered answers such as 1 to 10, and unlike a range input it has no value until one is picked.
|
|
9507
|
+
*/
|
|
9508
|
+
scale: boolean;
|
|
8168
9509
|
/**
|
|
8169
9510
|
* By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
|
|
8170
9511
|
* to place the form control outside a form and associate it with the form that has this `id`. The form must be in
|
|
@@ -8184,9 +9525,11 @@ declare module "components/radio-group/radio-group.component" {
|
|
|
8184
9525
|
private handleLabelClick;
|
|
8185
9526
|
private handleInvalid;
|
|
8186
9527
|
private syncRadioElements;
|
|
9528
|
+
private syncScale;
|
|
8187
9529
|
private syncRadios;
|
|
8188
9530
|
private updateCheckedRadio;
|
|
8189
9531
|
handleSizeChange(): void;
|
|
9532
|
+
handleScaleChange(): void;
|
|
8190
9533
|
handleValueChange(): void;
|
|
8191
9534
|
/** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
|
|
8192
9535
|
checkValidity(): boolean;
|
|
@@ -8210,6 +9553,32 @@ declare module "components/radio-group/index" {
|
|
|
8210
9553
|
}
|
|
8211
9554
|
}
|
|
8212
9555
|
}
|
|
9556
|
+
declare module "utilities/animation-registry" {
|
|
9557
|
+
export interface ElementAnimation {
|
|
9558
|
+
keyframes: Keyframe[];
|
|
9559
|
+
rtlKeyframes?: Keyframe[];
|
|
9560
|
+
options?: KeyframeAnimationOptions;
|
|
9561
|
+
}
|
|
9562
|
+
export interface ElementAnimationMap {
|
|
9563
|
+
[animationName: string]: ElementAnimation;
|
|
9564
|
+
}
|
|
9565
|
+
export interface GetAnimationOptions {
|
|
9566
|
+
/**
|
|
9567
|
+
* The component's directionality. When set to "rtl", `rtlKeyframes` will be preferred over `keyframes` where
|
|
9568
|
+
* available using getAnimation().
|
|
9569
|
+
*/
|
|
9570
|
+
dir: string;
|
|
9571
|
+
}
|
|
9572
|
+
/**
|
|
9573
|
+
* Sets a default animation. Components should use the `name.animation` for primary animations and `name.part.animation`
|
|
9574
|
+
* for secondary animations, e.g. `dialog.show` and `dialog.overlay.show`. For modifiers, use `drawer.showTop`.
|
|
9575
|
+
*/
|
|
9576
|
+
export function setDefaultAnimation(animationName: string, animation: ElementAnimation | null): void;
|
|
9577
|
+
/** Sets a custom animation for the specified element. */
|
|
9578
|
+
export function setAnimation(el: Element, animationName: string, animation: ElementAnimation | null): void;
|
|
9579
|
+
/** Gets an element's animation. Falls back to the default if no animation is found. */
|
|
9580
|
+
export function getAnimation(el: Element, animationName: string, options: GetAnimationOptions): ElementAnimation;
|
|
9581
|
+
}
|
|
8213
9582
|
declare module "components/file/file.component" {
|
|
8214
9583
|
import { type CSSResultGroup } from 'lit';
|
|
8215
9584
|
import ZincElement, { type ZincFormControl } from "internal/zinc-element";
|
|
@@ -8402,6 +9771,8 @@ declare module "components/file/file.component" {
|
|
|
8402
9771
|
* JSON-serialising hosts such as `zn-page-builder`. Emits `zn-error` when the upload fails.
|
|
8403
9772
|
*/
|
|
8404
9773
|
uploadUrl: string;
|
|
9774
|
+
/** The largest each file can be, in megabytes. A bigger file makes the control invalid. 0 for no limit. */
|
|
9775
|
+
maxSize: number;
|
|
8405
9776
|
private uploading;
|
|
8406
9777
|
/** Gets the validity state object */
|
|
8407
9778
|
get validity(): ValidityState;
|
|
@@ -8429,7 +9800,9 @@ declare module "components/file/file.component" {
|
|
|
8429
9800
|
private handleTransferItems;
|
|
8430
9801
|
private getFilesFromEntry;
|
|
8431
9802
|
private handleClick;
|
|
9803
|
+
private handleDropareaKeyDown;
|
|
8432
9804
|
/** Handles the change event of the native input */
|
|
9805
|
+
private checkSize;
|
|
8433
9806
|
private handleChange;
|
|
8434
9807
|
/**
|
|
8435
9808
|
* Uploads the chosen file to `uploadUrl` and adopts the returned URL as the
|
|
@@ -8542,6 +9915,8 @@ declare module "components/checkbox-group/checkbox-group.component" {
|
|
|
8542
9915
|
contained: boolean;
|
|
8543
9916
|
/** Squares off the corners of every contained checkbox in the group, which are rounded by default. */
|
|
8544
9917
|
square: boolean;
|
|
9918
|
+
/** Centres the text of every contained checkbox in the group. */
|
|
9919
|
+
centered: boolean;
|
|
8545
9920
|
/**
|
|
8546
9921
|
* Lays horizontal contained checkboxes out as a wrapping row instead of an equal-width grid, so each one sizes from
|
|
8547
9922
|
* `--zn-checkbox-group-column-width` (set it to `auto` to size from content) and wraps onto a new line when needed.
|
|
@@ -8622,6 +9997,12 @@ declare module "components/item/item.component" {
|
|
|
8622
9997
|
caption: string;
|
|
8623
9998
|
description: string;
|
|
8624
9999
|
stacked: boolean;
|
|
10000
|
+
/** A fact in a grid of headline attributes: a small muted caption above the value, without padding. */
|
|
10001
|
+
fact: boolean;
|
|
10002
|
+
/** A row in a key–value list: a small muted caption beside a right-aligned value, on a compact row. */
|
|
10003
|
+
keyValue: boolean;
|
|
10004
|
+
/** Shows the value in the monospace font, for identifiers and codes. */
|
|
10005
|
+
mono: boolean;
|
|
8625
10006
|
size: 'small' | 'medium' | 'large';
|
|
8626
10007
|
editOnHover: boolean;
|
|
8627
10008
|
helpTooltip: string;
|
|
@@ -8732,6 +10113,8 @@ declare module "components/button-menu/button-menu.component" {
|
|
|
8732
10113
|
* @since 1.0
|
|
8733
10114
|
*
|
|
8734
10115
|
* @slot - The default slot.
|
|
10116
|
+
* @slot prefix - Controls shown just before the inline buttons, such as a segmented toggle. Their width is kept
|
|
10117
|
+
* free when working out which buttons fit.
|
|
8735
10118
|
*
|
|
8736
10119
|
*/
|
|
8737
10120
|
export default class ZnButtonMenu extends ZincElement {
|
|
@@ -8746,12 +10129,15 @@ declare module "components/button-menu/button-menu.component" {
|
|
|
8746
10129
|
private _buttons;
|
|
8747
10130
|
private _originalButtons;
|
|
8748
10131
|
private _resizeRafId;
|
|
10132
|
+
private _shownCount;
|
|
10133
|
+
private _shownTotal;
|
|
8749
10134
|
private readonly resizeObserver;
|
|
8750
10135
|
protected firstUpdated(_changedProperties: PropertyValues): Promise<void>;
|
|
8751
10136
|
watchContainerMaxWidth(): void;
|
|
8752
10137
|
connectedCallback(): void;
|
|
8753
|
-
calculateVisibleButtons(): void;
|
|
10138
|
+
calculateVisibleButtons(onlyIfChanged?: boolean): void;
|
|
8754
10139
|
calculateMenuButtons(totalButtons: number, visibleButtons: number, buttons: CustomButtonWidths[]): void;
|
|
10140
|
+
private getPrefixWidth;
|
|
8755
10141
|
private getButtonLabel;
|
|
8756
10142
|
render(): import("lit-html").TemplateResult<1>;
|
|
8757
10143
|
addButton(button: ZnButton): void;
|
|
@@ -8831,6 +10217,8 @@ declare module "components/slideout/slideout.component" {
|
|
|
8831
10217
|
connectedCallback(): void;
|
|
8832
10218
|
disconnectedCallback(): void;
|
|
8833
10219
|
private requestClose;
|
|
10220
|
+
private handleCancel;
|
|
10221
|
+
private handleNativeClose;
|
|
8834
10222
|
private addOpenListeners;
|
|
8835
10223
|
private removeOpenListeners;
|
|
8836
10224
|
/** Shows the slideout. */
|
|
@@ -8959,6 +10347,8 @@ declare module "components/page-nav/page-nav.component" {
|
|
|
8959
10347
|
navigation: PageNavData;
|
|
8960
10348
|
breadcrumb: string;
|
|
8961
10349
|
toggleNavigation(): void;
|
|
10350
|
+
private handleToggleKeyDown;
|
|
10351
|
+
private handleNavigationKeyDown;
|
|
8962
10352
|
setActiveTab(tabName: string, store: boolean, refresh: boolean, refTab?: string | null): void;
|
|
8963
10353
|
clickTab(target: HTMLElement, refresh: boolean, close?: boolean): void;
|
|
8964
10354
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -9112,6 +10502,8 @@ declare module "components/content-block/content-block.component" {
|
|
|
9112
10502
|
private _replaceDebounce;
|
|
9113
10503
|
connectedCallback(): void;
|
|
9114
10504
|
disconnectedCallback(): void;
|
|
10505
|
+
private _handleHeaderKeyDown;
|
|
10506
|
+
private _handleReplyKeyDown;
|
|
9115
10507
|
private _collapseContent;
|
|
9116
10508
|
private _toggleText;
|
|
9117
10509
|
private _toggleHtml;
|
|
@@ -9161,9 +10553,17 @@ declare module "components/filter-wrapper/filter-wrapper.component" {
|
|
|
9161
10553
|
export default class ZnFilterWrapper extends ZincElement {
|
|
9162
10554
|
static styles: CSSResultGroup;
|
|
9163
10555
|
button: string;
|
|
9164
|
-
|
|
10556
|
+
/** Submits the filters when Enter is pressed in a text field. */
|
|
10557
|
+
submitOnEnter: boolean;
|
|
10558
|
+
/** Shown on the submit button while results load. */
|
|
10559
|
+
loadingText: string;
|
|
10560
|
+
private loading;
|
|
10561
|
+
private submitButton;
|
|
9165
10562
|
handleSubmit: (event: Event) => void;
|
|
10563
|
+
private setLoading;
|
|
10564
|
+
handleKeyDown: (event: KeyboardEvent) => void;
|
|
9166
10565
|
connectedCallback(): void;
|
|
10566
|
+
disconnectedCallback(): void;
|
|
9167
10567
|
private renderDefaultButton;
|
|
9168
10568
|
render(): import("lit-html").TemplateResult<1>;
|
|
9169
10569
|
}
|
|
@@ -9334,6 +10734,7 @@ declare module "components/reveal/reveal.component" {
|
|
|
9334
10734
|
disconnectedCallback(): void;
|
|
9335
10735
|
private _clearHideTimer;
|
|
9336
10736
|
protected handleToggleReveal(): void;
|
|
10737
|
+
protected handleKeyDown(e: KeyboardEvent): void;
|
|
9337
10738
|
protected handleMouseEnter(): void;
|
|
9338
10739
|
protected handleMouseLeave(): void;
|
|
9339
10740
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -9665,6 +11066,7 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
|
|
|
9665
11066
|
private fenceMarker;
|
|
9666
11067
|
private closesFence;
|
|
9667
11068
|
private updateBlocks;
|
|
11069
|
+
private get editable();
|
|
9668
11070
|
private handleRenderedClick;
|
|
9669
11071
|
/** Parses a block that is purely an image (with optional caption/align lines). */
|
|
9670
11072
|
private parseImageBlock;
|
|
@@ -9713,6 +11115,9 @@ declare module "components/remarkd-editor/remarkd-editor.component" {
|
|
|
9713
11115
|
private commitEdit;
|
|
9714
11116
|
private handleDraftInput;
|
|
9715
11117
|
private handleEditKeydown;
|
|
11118
|
+
/** Focuses the rendered block at `index`, clamped to the blocks there are; the add row when there are none. */
|
|
11119
|
+
private focusRenderedBlock;
|
|
11120
|
+
private moveBlock;
|
|
9716
11121
|
/**
|
|
9717
11122
|
* The draft to commit when Enter should finish the block — pressed on a trailing blank line or
|
|
9718
11123
|
* empty list item, outside any container — with that line dropped. Null otherwise.
|
|
@@ -10319,10 +11724,151 @@ declare module "components/translation-group/index" {
|
|
|
10319
11724
|
}
|
|
10320
11725
|
}
|
|
10321
11726
|
}
|
|
11727
|
+
declare module "components/translation-grid/translation-grid.component" {
|
|
11728
|
+
import { type CSSResultGroup } from 'lit';
|
|
11729
|
+
import ZincElement from "internal/zinc-element";
|
|
11730
|
+
export type TranslationStatus = 'source' | 'translated' | 'outdated' | 'missing';
|
|
11731
|
+
export interface TranslationGridLanguage {
|
|
11732
|
+
code: string;
|
|
11733
|
+
label: string;
|
|
11734
|
+
/** The language's status when there are no `fields`. */
|
|
11735
|
+
status?: TranslationStatus;
|
|
11736
|
+
/** Where choosing the language goes, such as its translation form. */
|
|
11737
|
+
href?: string;
|
|
11738
|
+
}
|
|
11739
|
+
export interface TranslationGridCell {
|
|
11740
|
+
status: TranslationStatus;
|
|
11741
|
+
href?: string;
|
|
11742
|
+
}
|
|
11743
|
+
export interface TranslationGridField {
|
|
11744
|
+
key: string;
|
|
11745
|
+
label: string;
|
|
11746
|
+
/** Each language's cell, keyed by language code. */
|
|
11747
|
+
cells: Record<string, TranslationGridCell>;
|
|
11748
|
+
}
|
|
11749
|
+
/**
|
|
11750
|
+
* @summary Shows how far each language's translation has got, with a column per language to choose and enable it,
|
|
11751
|
+
* and optionally a row per translated field.
|
|
11752
|
+
* @documentation https://zinc.style/components/translation-grid
|
|
11753
|
+
* @status experimental
|
|
11754
|
+
* @since 1.0
|
|
11755
|
+
*
|
|
11756
|
+
* @slot - Help text under the legend.
|
|
11757
|
+
* @slot enable-{code} - The control that enables the language with that code, such as a `zn-checkbox` in a form.
|
|
11758
|
+
* The Enable row only shows when at least one is given.
|
|
11759
|
+
*
|
|
11760
|
+
* @csspart base - The component's base wrapper.
|
|
11761
|
+
*/
|
|
11762
|
+
export default class ZnTranslationGrid extends ZincElement {
|
|
11763
|
+
static styles: CSSResultGroup;
|
|
11764
|
+
/** The languages, in column order, as a JSON array of `{code, label, status, href}`. */
|
|
11765
|
+
languages: TranslationGridLanguage[];
|
|
11766
|
+
/** A row per translated field, as a JSON array of `{key, label, cells}`; without it there is one Translation row. */
|
|
11767
|
+
fields: TranslationGridField[];
|
|
11768
|
+
/** The code of the language being edited. */
|
|
11769
|
+
selected: string;
|
|
11770
|
+
/** The key of the field being edited, when there are `fields`. */
|
|
11771
|
+
selectedField: string;
|
|
11772
|
+
/** Where the language links open, as a console `data-target`; `self` replaces the content they sit in. */
|
|
11773
|
+
linkTarget: string;
|
|
11774
|
+
/** Names the source in the legend, such as "English changed". */
|
|
11775
|
+
sourceLabel: string;
|
|
11776
|
+
private _statusLabel;
|
|
11777
|
+
private _link;
|
|
11778
|
+
private _cell;
|
|
11779
|
+
private _rows;
|
|
11780
|
+
private _legend;
|
|
11781
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
11782
|
+
}
|
|
11783
|
+
}
|
|
11784
|
+
declare module "components/translation-grid/index" {
|
|
11785
|
+
import ZnTranslationGrid from "components/translation-grid/translation-grid.component";
|
|
11786
|
+
export * from "components/translation-grid/translation-grid.component";
|
|
11787
|
+
export default ZnTranslationGrid;
|
|
11788
|
+
global {
|
|
11789
|
+
interface HTMLElementTagNameMap {
|
|
11790
|
+
'zn-translation-grid': ZnTranslationGrid;
|
|
11791
|
+
}
|
|
11792
|
+
}
|
|
11793
|
+
}
|
|
11794
|
+
declare module "components/translation-field/translation-field.component" {
|
|
11795
|
+
import { type CSSResultGroup } from 'lit';
|
|
11796
|
+
import ZincElement from "internal/zinc-element";
|
|
11797
|
+
/**
|
|
11798
|
+
* @summary A field's source text beside the control that translates it.
|
|
11799
|
+
* @documentation https://zinc.style/components/translation-field
|
|
11800
|
+
* @status experimental
|
|
11801
|
+
* @since 1.0
|
|
11802
|
+
*
|
|
11803
|
+
* @slot - The control the translation is written in, such as a `zn-input` with the language code as its prefix.
|
|
11804
|
+
* @slot source - The source text, shown read-only.
|
|
11805
|
+
* @slot actions - Actions beside the label.
|
|
11806
|
+
*
|
|
11807
|
+
* @csspart base - The component's base wrapper.
|
|
11808
|
+
* @csspart source - The box holding the source.
|
|
11809
|
+
*/
|
|
11810
|
+
export default class ZnTranslationField extends ZincElement {
|
|
11811
|
+
static styles: CSSResultGroup;
|
|
11812
|
+
label: string;
|
|
11813
|
+
/** The source's language code, shown beside it. */
|
|
11814
|
+
sourceCode: string;
|
|
11815
|
+
/** For source text that runs over several lines, such as a message body. */
|
|
11816
|
+
multiline: boolean;
|
|
11817
|
+
/** Lines the source up with a control that has a toolbar above it, such as a compact `zn-editor`. */
|
|
11818
|
+
offset: boolean;
|
|
11819
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
11820
|
+
}
|
|
11821
|
+
}
|
|
11822
|
+
declare module "components/translation-field/index" {
|
|
11823
|
+
import ZnTranslationField from "components/translation-field/translation-field.component";
|
|
11824
|
+
export * from "components/translation-field/translation-field.component";
|
|
11825
|
+
export default ZnTranslationField;
|
|
11826
|
+
global {
|
|
11827
|
+
interface HTMLElementTagNameMap {
|
|
11828
|
+
'zn-translation-field': ZnTranslationField;
|
|
11829
|
+
}
|
|
11830
|
+
}
|
|
11831
|
+
}
|
|
11832
|
+
declare module "components/translation-fields/translation-fields.component" {
|
|
11833
|
+
import { type CSSResultGroup } from 'lit';
|
|
11834
|
+
import ZincElement from "internal/zinc-element";
|
|
11835
|
+
export type TranslationFieldsLayout = 'split' | 'stacked';
|
|
11836
|
+
/**
|
|
11837
|
+
* @summary Lays out `zn-translation-field`s with their source beside or above the translation, chosen by the viewer.
|
|
11838
|
+
* @documentation https://zinc.style/components/translation-fields
|
|
11839
|
+
* @status experimental
|
|
11840
|
+
* @since 1.0
|
|
11841
|
+
*
|
|
11842
|
+
* @slot - The `zn-translation-field`s.
|
|
11843
|
+
* @slot actions - Actions level with the layout switch.
|
|
11844
|
+
*
|
|
11845
|
+
* @csspart base - The component's base wrapper.
|
|
11846
|
+
*/
|
|
11847
|
+
export default class ZnTranslationFields extends ZincElement {
|
|
11848
|
+
static styles: CSSResultGroup;
|
|
11849
|
+
layout: TranslationFieldsLayout;
|
|
11850
|
+
/** Remembers the viewer's layout under this key in `localStorage`; leave empty to forget it. */
|
|
11851
|
+
storeKey: string;
|
|
11852
|
+
connectedCallback(): void;
|
|
11853
|
+
private _choose;
|
|
11854
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
11855
|
+
}
|
|
11856
|
+
}
|
|
11857
|
+
declare module "components/translation-fields/index" {
|
|
11858
|
+
import ZnTranslationFields from "components/translation-fields/translation-fields.component";
|
|
11859
|
+
export * from "components/translation-fields/translation-fields.component";
|
|
11860
|
+
export default ZnTranslationFields;
|
|
11861
|
+
global {
|
|
11862
|
+
interface HTMLElementTagNameMap {
|
|
11863
|
+
'zn-translation-fields': ZnTranslationFields;
|
|
11864
|
+
}
|
|
11865
|
+
}
|
|
11866
|
+
}
|
|
10322
11867
|
declare module "components/priority-list/priority-list.component" {
|
|
10323
11868
|
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
10324
11869
|
import { FormControlController } from "internal/form";
|
|
10325
11870
|
import ZincElement from "internal/zinc-element";
|
|
11871
|
+
import ZnButton from "components/button/index";
|
|
10326
11872
|
import ZnIcon from "components/icon/index";
|
|
10327
11873
|
import type { ZincFormControl } from "internal/zinc-element";
|
|
10328
11874
|
export interface PriorityItem {
|
|
@@ -10337,11 +11883,14 @@ declare module "components/priority-list/priority-list.component" {
|
|
|
10337
11883
|
* @status experimental
|
|
10338
11884
|
* @since 1.0
|
|
10339
11885
|
*
|
|
11886
|
+
* @dependency zn-button
|
|
10340
11887
|
* @dependency zn-icon
|
|
10341
11888
|
*
|
|
10342
11889
|
* @slot - The default slot where list items are placed. Each slotted element must have a `value` attribute that
|
|
10343
11890
|
* uniquely identifies the item. The component automatically assigns slot names to project each item into the
|
|
10344
11891
|
* correct position. The item's position in the list determines its priority (top = `priority-start`, incrementing).
|
|
11892
|
+
* Use `zn-tile` items for titled rows with their own actions. Set `locked` on an item to pin it where it is.
|
|
11893
|
+
* @slot action-{value} - Controls shown at the end of the item with that `value`.
|
|
10345
11894
|
* @slot label - The component's label. Required for proper accessibility. Alternatively, use the `label` attribute.
|
|
10346
11895
|
* @slot label-tooltip - Used to add text displayed in a tooltip next to the label.
|
|
10347
11896
|
* @slot help-text - Text that describes how to use the component. Alternatively, use the `help-text` attribute.
|
|
@@ -10368,11 +11917,13 @@ declare module "components/priority-list/priority-list.component" {
|
|
|
10368
11917
|
*/
|
|
10369
11918
|
export default class ZnPriorityList extends ZincElement implements ZincFormControl {
|
|
10370
11919
|
static dependencies: {
|
|
11920
|
+
'zn-button': typeof ZnButton;
|
|
10371
11921
|
'zn-icon': typeof ZnIcon;
|
|
10372
11922
|
};
|
|
10373
11923
|
static styles: CSSResultGroup;
|
|
10374
11924
|
protected readonly formControlController: FormControlController;
|
|
10375
11925
|
private readonly hasSlotController;
|
|
11926
|
+
private readonly reorderController;
|
|
10376
11927
|
hiddenInputsContainer: HTMLDivElement;
|
|
10377
11928
|
/**
|
|
10378
11929
|
* The name prefix for form submission. Each item generates a hidden input named `{name}[{itemValue}]`
|
|
@@ -10387,6 +11938,8 @@ declare module "components/priority-list/priority-list.component" {
|
|
|
10387
11938
|
set value(val: string[]);
|
|
10388
11939
|
private _value;
|
|
10389
11940
|
defaultValue: string[];
|
|
11941
|
+
/** The item holding the list's single tab stop. */
|
|
11942
|
+
private _focusKey;
|
|
10390
11943
|
/** The component's label. Required for proper accessibility. */
|
|
10391
11944
|
label: string;
|
|
10392
11945
|
/** Text that appears in a tooltip next to the label. */
|
|
@@ -10405,6 +11958,18 @@ declare module "components/priority-list/priority-list.component" {
|
|
|
10405
11958
|
required: boolean;
|
|
10406
11959
|
/** The starting priority number. Defaults to 1. */
|
|
10407
11960
|
priorityStart: number;
|
|
11961
|
+
/** Draws the items as rows divided edge to edge, for a list filling a flush panel; the label is kept for
|
|
11962
|
+
* screen readers only. */
|
|
11963
|
+
flush: boolean;
|
|
11964
|
+
/** Lets a click or Enter select an item as well as drag it, for a list that doubles as navigation. The click is
|
|
11965
|
+
* passed on to the item, so a `tab` or link on it acts as if clicked. */
|
|
11966
|
+
selectable: boolean;
|
|
11967
|
+
/** The selected item's value. An item marked active by zn-tabs takes precedence, so the list follows its tabs. */
|
|
11968
|
+
selected: string;
|
|
11969
|
+
/** Hides each item's priority number, for lists where the order shows the priority. */
|
|
11970
|
+
hidePriority: boolean;
|
|
11971
|
+
/** Shows move up and move down buttons on each item. */
|
|
11972
|
+
moveButtons: boolean;
|
|
10408
11973
|
/**
|
|
10409
11974
|
* When set, the associated form will be submitted with the given action URL whenever items are reordered.
|
|
10410
11975
|
* If set to an empty string, the form will be submitted using its existing action.
|
|
@@ -10416,14 +11981,13 @@ declare module "components/priority-list/priority-list.component" {
|
|
|
10416
11981
|
* Any slotted items not listed are appended at the end in DOM order.
|
|
10417
11982
|
*/
|
|
10418
11983
|
order: string;
|
|
10419
|
-
private draggedKey;
|
|
10420
|
-
private isDragging;
|
|
10421
|
-
private dragOverKey;
|
|
10422
11984
|
/** Gets the validity state object. */
|
|
10423
11985
|
get validity(): ValidityState;
|
|
10424
11986
|
/** Gets the validation message. */
|
|
10425
11987
|
get validationMessage(): string;
|
|
11988
|
+
private _itemObserver;
|
|
10426
11989
|
connectedCallback(): void;
|
|
11990
|
+
disconnectedCallback(): void;
|
|
10427
11991
|
protected firstUpdated(_changedProperties: PropertyValues): void;
|
|
10428
11992
|
/**
|
|
10429
11993
|
* Initialize item order from slotted children if no explicit value was provided.
|
|
@@ -10448,19 +12012,20 @@ declare module "components/priority-list/priority-list.component" {
|
|
|
10448
12012
|
* Syncs hidden inputs so form data includes priority values.
|
|
10449
12013
|
*/
|
|
10450
12014
|
private _syncHiddenInputs;
|
|
10451
|
-
|
|
10452
|
-
|
|
10453
|
-
|
|
10454
|
-
|
|
10455
|
-
|
|
10456
|
-
|
|
10457
|
-
|
|
10458
|
-
|
|
10459
|
-
|
|
10460
|
-
private
|
|
10461
|
-
private
|
|
10462
|
-
private
|
|
10463
|
-
private
|
|
12015
|
+
private _item;
|
|
12016
|
+
/** @internal ReorderHost: the items' keys in order. */
|
|
12017
|
+
reorderKeys(): string[];
|
|
12018
|
+
/** @internal ReorderHost: renders the items in a new order. */
|
|
12019
|
+
applyReorder(keys: string[]): void;
|
|
12020
|
+
/** @internal ReorderHost: the row drawn for an item. */
|
|
12021
|
+
reorderRow(key: string): HTMLElement | null;
|
|
12022
|
+
/** @internal ReorderHost: whether an item is pinned where it is. */
|
|
12023
|
+
reorderLocked(key: string): boolean;
|
|
12024
|
+
private _handleStep;
|
|
12025
|
+
private _selectedKey;
|
|
12026
|
+
private _select;
|
|
12027
|
+
private _matchClipCorners;
|
|
12028
|
+
private _handleItemClick;
|
|
10464
12029
|
private _handleKeyDown;
|
|
10465
12030
|
private _handleSlotChange;
|
|
10466
12031
|
/** Checks for validity but does not show a validation message. */
|
|
@@ -10567,6 +12132,7 @@ declare module "components/markdown-editor/markdown-editor.component" {
|
|
|
10567
12132
|
private handleInput;
|
|
10568
12133
|
private handleChange;
|
|
10569
12134
|
private handleViewToggle;
|
|
12135
|
+
private handleKeyDown;
|
|
10570
12136
|
private handleExpandToggle;
|
|
10571
12137
|
handleViewModeChange(): Promise<void>;
|
|
10572
12138
|
handleValueChange(): Promise<void>;
|
|
@@ -11007,6 +12573,7 @@ declare module "components/flow-builder/modules/flow-node/flow-node.component" {
|
|
|
11007
12573
|
private get nodeSubtitle();
|
|
11008
12574
|
private _emit;
|
|
11009
12575
|
private _onBodyPointerDown;
|
|
12576
|
+
private _onBodyKeyDown;
|
|
11010
12577
|
private _action;
|
|
11011
12578
|
private _renderPorts;
|
|
11012
12579
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -11421,6 +12988,8 @@ declare module "components/flow-builder/flow-builder.component" {
|
|
|
11421
12988
|
private _movingNodeId;
|
|
11422
12989
|
/** The "+" picker popover target (an open output, or a wire to insert into), if open. */
|
|
11423
12990
|
private _picker;
|
|
12991
|
+
/** Where focus goes back to when the picker or branch editor closes. */
|
|
12992
|
+
private _focusReturn;
|
|
11424
12993
|
/** The node type currently being dragged from the steps panel, for the canvas drop preview. */
|
|
11425
12994
|
private _draggingType;
|
|
11426
12995
|
private _history;
|
|
@@ -11468,6 +13037,11 @@ declare module "components/flow-builder/flow-builder.component" {
|
|
|
11468
13037
|
*/
|
|
11469
13038
|
private _offerRestoreIfNewer;
|
|
11470
13039
|
private _onKeyDown;
|
|
13040
|
+
private static _deepActiveElement;
|
|
13041
|
+
private _nodeCard;
|
|
13042
|
+
private _returnFocus;
|
|
13043
|
+
private _closeInspector;
|
|
13044
|
+
private _closeBranchEditor;
|
|
11471
13045
|
protected willUpdate(changed: PropertyValues): void;
|
|
11472
13046
|
protected firstUpdated(changed: PropertyValues): void;
|
|
11473
13047
|
private static _parsePorts;
|
|
@@ -12208,6 +13782,7 @@ declare module "components/page-builder/page-builder.component" {
|
|
|
12208
13782
|
private _renderSlot;
|
|
12209
13783
|
/** Types allowed in a container's slots: non-containers, filtered by its accepts list. */
|
|
12210
13784
|
private _slotTypes;
|
|
13785
|
+
private _focusFirstPickerItem;
|
|
12211
13786
|
/** The one type-picker template both drop zones and slot cells render. */
|
|
12212
13787
|
private _renderTypePicker;
|
|
12213
13788
|
private _renderDropZone;
|
|
@@ -12946,6 +14521,9 @@ declare module "components/schedule-builder/schedule-builder.component" {
|
|
|
12946
14521
|
/** Picks a sensible slot for a newly added range: the first hour-wide gap in the day. */
|
|
12947
14522
|
private _nextFreeRange;
|
|
12948
14523
|
private _handleAddRange;
|
|
14524
|
+
private _openEditor;
|
|
14525
|
+
/** Focuses a day's range chip, clamped to the chips there are; the day's "Add range" button when it has none. */
|
|
14526
|
+
private _focusRangeChip;
|
|
12949
14527
|
private _handleRemoveRange;
|
|
12950
14528
|
private _handleRangeEdit;
|
|
12951
14529
|
private _handleEditorKeyDown;
|
|
@@ -13315,6 +14893,270 @@ declare module "components/background/index" {
|
|
|
13315
14893
|
}
|
|
13316
14894
|
}
|
|
13317
14895
|
}
|
|
14896
|
+
declare module "components/nav-item/nav-item.component" {
|
|
14897
|
+
import { type CSSResultGroup } from 'lit';
|
|
14898
|
+
import ZincElement from "internal/zinc-element";
|
|
14899
|
+
import ZnIcon from "components/icon/index";
|
|
14900
|
+
/**
|
|
14901
|
+
* @summary A selectable row in a `zn-nav-list`, with an optional description and count.
|
|
14902
|
+
* @documentation https://zinc.style/components/nav-list
|
|
14903
|
+
* @status experimental
|
|
14904
|
+
* @since 1.0
|
|
14905
|
+
*
|
|
14906
|
+
* @slot - The item's label.
|
|
14907
|
+
*
|
|
14908
|
+
* @csspart base - The component's base wrapper.
|
|
14909
|
+
* @csspart label - The label, truncated with an ellipsis.
|
|
14910
|
+
* @csspart description - The description shown below the label.
|
|
14911
|
+
* @csspart count - The count shown at the end of the row.
|
|
14912
|
+
* @csspart handle - The drag handle, shown when the list is sortable.
|
|
14913
|
+
*/
|
|
14914
|
+
export default class ZnNavItem extends ZincElement {
|
|
14915
|
+
static styles: CSSResultGroup;
|
|
14916
|
+
static dependencies: {
|
|
14917
|
+
'zn-icon': typeof ZnIcon;
|
|
14918
|
+
};
|
|
14919
|
+
/** A count shown at the end of the row, such as the number of entries in the group. */
|
|
14920
|
+
count: string;
|
|
14921
|
+
/** A line of detail shown below the label. */
|
|
14922
|
+
description: string;
|
|
14923
|
+
private readonly _classObserver;
|
|
14924
|
+
connectedCallback(): void;
|
|
14925
|
+
disconnectedCallback(): void;
|
|
14926
|
+
get selected(): boolean;
|
|
14927
|
+
private _syncSelected;
|
|
14928
|
+
private _handleKeyDown;
|
|
14929
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
14930
|
+
}
|
|
14931
|
+
}
|
|
14932
|
+
declare module "components/nav-item/index" {
|
|
14933
|
+
import ZnNavItem from "components/nav-item/nav-item.component";
|
|
14934
|
+
export * from "components/nav-item/nav-item.component";
|
|
14935
|
+
export default ZnNavItem;
|
|
14936
|
+
global {
|
|
14937
|
+
interface HTMLElementTagNameMap {
|
|
14938
|
+
'zn-nav-item': ZnNavItem;
|
|
14939
|
+
}
|
|
14940
|
+
}
|
|
14941
|
+
}
|
|
14942
|
+
declare module "components/nav-list/nav-list.component" {
|
|
14943
|
+
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
14944
|
+
import { FormControlController } from "internal/form";
|
|
14945
|
+
import ZincElement from "internal/zinc-element";
|
|
14946
|
+
import ZnInput from "components/input/index";
|
|
14947
|
+
import type { ZincFormControl } from "internal/zinc-element";
|
|
14948
|
+
import type ZnNavItem from "components/nav-item/index";
|
|
14949
|
+
/**
|
|
14950
|
+
* @summary The list side of a master–detail layout: a card of selectable groups shown beside the selected group's
|
|
14951
|
+
* contents. Place it in the `left` slot of `<zn-tabs gap>`, which switches the detail panels.
|
|
14952
|
+
* @documentation https://zinc.style/components/nav-list
|
|
14953
|
+
* @status experimental
|
|
14954
|
+
* @since 1.0
|
|
14955
|
+
*
|
|
14956
|
+
* @dependency zn-input
|
|
14957
|
+
*
|
|
14958
|
+
* @slot - `zn-nav-item` elements.
|
|
14959
|
+
* @slot actions - Actions in the card's header, beside the caption.
|
|
14960
|
+
*
|
|
14961
|
+
* @csspart base - The component's base wrapper.
|
|
14962
|
+
* @csspart header - The header holding the caption and actions.
|
|
14963
|
+
* @csspart search - The wrapper around the search input.
|
|
14964
|
+
* @csspart list - The scrolling list of items.
|
|
14965
|
+
* @csspart empty - The message shown when the search matches nothing.
|
|
14966
|
+
*
|
|
14967
|
+
* @cssproperty --zn-nav-list-width - The width of the card beside the detail.
|
|
14968
|
+
* @cssproperty --zn-nav-list-max-height - Caps the card's height; the list scrolls beyond it.
|
|
14969
|
+
*
|
|
14970
|
+
* @event zn-change - Emitted when a sortable list's items have been moved.
|
|
14971
|
+
* @event zn-reorder - Emitted when a sortable list's items have been moved.
|
|
14972
|
+
*/
|
|
14973
|
+
export default class ZnNavList extends ZincElement implements ZincFormControl {
|
|
14974
|
+
static styles: CSSResultGroup;
|
|
14975
|
+
static dependencies: {
|
|
14976
|
+
'zn-input': typeof ZnInput;
|
|
14977
|
+
};
|
|
14978
|
+
protected readonly formControlController: FormControlController;
|
|
14979
|
+
private readonly hasSlotController;
|
|
14980
|
+
private readonly reorderController;
|
|
14981
|
+
/** Shows a search input that filters the items by their label. */
|
|
14982
|
+
searchable: boolean;
|
|
14983
|
+
searchPlaceholder: string;
|
|
14984
|
+
/** Shown when the search matches no items. */
|
|
14985
|
+
emptyLabel: string;
|
|
14986
|
+
/** A heading for the card, shown with the `actions` slot above the items. */
|
|
14987
|
+
caption: string;
|
|
14988
|
+
/** Draws the items as full-width rows split by dividers, marking the selected one with a bar on its edge. */
|
|
14989
|
+
divide: boolean;
|
|
14990
|
+
/** Lets the items be dragged, or moved with Alt+Arrow keys, into a new order. */
|
|
14991
|
+
sortable: boolean;
|
|
14992
|
+
/** Submits the order as `[{key, priority}]` JSON, keyed by each item's `value` (or `tab`), counting from 1. */
|
|
14993
|
+
name: string;
|
|
14994
|
+
/** Associates the list with a form by id. */
|
|
14995
|
+
form: string;
|
|
14996
|
+
disabled: boolean;
|
|
14997
|
+
/**
|
|
14998
|
+
* When set, the form is submitted after each reorder, to this URL or, when empty, the form's own action.
|
|
14999
|
+
*/
|
|
15000
|
+
formAction: string;
|
|
15001
|
+
private _query;
|
|
15002
|
+
private readonly _selectionObserver;
|
|
15003
|
+
get validity(): ValidityState;
|
|
15004
|
+
get validationMessage(): string;
|
|
15005
|
+
connectedCallback(): void;
|
|
15006
|
+
disconnectedCallback(): void;
|
|
15007
|
+
private get _items();
|
|
15008
|
+
private get _visibleItems();
|
|
15009
|
+
private _key;
|
|
15010
|
+
private _item;
|
|
15011
|
+
/** The order as `[{key, priority}]` JSON. */
|
|
15012
|
+
get value(): string;
|
|
15013
|
+
/** The order as `{key, priority}` pairs, counting from 1. */
|
|
15014
|
+
getPriorityMap(): {
|
|
15015
|
+
key: string;
|
|
15016
|
+
priority: number;
|
|
15017
|
+
}[];
|
|
15018
|
+
/** @internal ReorderHost: the items' keys in order. */
|
|
15019
|
+
reorderKeys(): string[];
|
|
15020
|
+
/** @internal ReorderHost: puts the items in a new order. */
|
|
15021
|
+
applyReorder(keys: string[]): void;
|
|
15022
|
+
/** @internal ReorderHost: the row drawn for an item. */
|
|
15023
|
+
reorderRow(key: string): ZnNavItem | null;
|
|
15024
|
+
/** @internal ReorderHost: whether an item is pinned where it is. */
|
|
15025
|
+
reorderLocked(key: string): boolean;
|
|
15026
|
+
/** The key of the item an event happened on, when it is one of this list's. */
|
|
15027
|
+
private _eventKey;
|
|
15028
|
+
private _handleSlotChange;
|
|
15029
|
+
private _syncItems;
|
|
15030
|
+
protected updated(changed: PropertyValues): void;
|
|
15031
|
+
/** Rounds a divided list's placeholder into the card corners it moves into while dragging. */
|
|
15032
|
+
private _syncDragCorners;
|
|
15033
|
+
/** Keeps a single tab stop in the list (none when disabled): the selected item when it is visible, otherwise the first. */
|
|
15034
|
+
private _syncTabStops;
|
|
15035
|
+
private _handleSearch;
|
|
15036
|
+
private _handleKeyDown;
|
|
15037
|
+
private _handlePointerDown;
|
|
15038
|
+
checkValidity(): boolean;
|
|
15039
|
+
getForm(): HTMLFormElement | null;
|
|
15040
|
+
reportValidity(): boolean;
|
|
15041
|
+
setCustomValidity(_message?: string): void;
|
|
15042
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
15043
|
+
}
|
|
15044
|
+
}
|
|
15045
|
+
declare module "components/nav-list/index" {
|
|
15046
|
+
import ZnNavList from "components/nav-list/nav-list.component";
|
|
15047
|
+
export * from "components/nav-list/nav-list.component";
|
|
15048
|
+
export default ZnNavList;
|
|
15049
|
+
global {
|
|
15050
|
+
interface HTMLElementTagNameMap {
|
|
15051
|
+
'zn-nav-list': ZnNavList;
|
|
15052
|
+
}
|
|
15053
|
+
}
|
|
15054
|
+
}
|
|
15055
|
+
declare module "components/avatar-group/avatar-group.component" {
|
|
15056
|
+
import { type CSSResultGroup } from 'lit';
|
|
15057
|
+
import ZincElement from "internal/zinc-element";
|
|
15058
|
+
import ZnTooltip from "components/tooltip/index";
|
|
15059
|
+
/**
|
|
15060
|
+
* @summary Overlapping avatars that show each person's name on hover, collapsing any past `max` into a "+N" count.
|
|
15061
|
+
* @documentation https://zinc.style/components/avatar-group
|
|
15062
|
+
* @status experimental
|
|
15063
|
+
* @since 1.0
|
|
15064
|
+
*
|
|
15065
|
+
* @dependency zn-tooltip
|
|
15066
|
+
*
|
|
15067
|
+
* @slot - `zn-icon` avatars. Each one's tooltip shows its `alt`, or its `src` when it has none.
|
|
15068
|
+
*
|
|
15069
|
+
* @csspart base - The component's base wrapper.
|
|
15070
|
+
* @csspart overflow - The "+N" count standing in for the avatars past `max`.
|
|
15071
|
+
*
|
|
15072
|
+
* @cssproperty --zn-avatar-ring-color - The ring that separates overlapping avatars; defaults to the panel surface.
|
|
15073
|
+
*/
|
|
15074
|
+
export default class ZnAvatarGroup extends ZincElement {
|
|
15075
|
+
static styles: CSSResultGroup;
|
|
15076
|
+
static dependencies: {
|
|
15077
|
+
'zn-tooltip': typeof ZnTooltip;
|
|
15078
|
+
};
|
|
15079
|
+
/** The most avatars to show; the rest are counted in a "+N" avatar whose tooltip lists them. 0 shows them all. */
|
|
15080
|
+
max: number;
|
|
15081
|
+
private _avatars;
|
|
15082
|
+
constructor();
|
|
15083
|
+
connectedCallback(): void;
|
|
15084
|
+
private _syncAvatars;
|
|
15085
|
+
private _name;
|
|
15086
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
15087
|
+
}
|
|
15088
|
+
}
|
|
15089
|
+
declare module "components/avatar-group/index" {
|
|
15090
|
+
import ZnAvatarGroup from "components/avatar-group/avatar-group.component";
|
|
15091
|
+
export * from "components/avatar-group/avatar-group.component";
|
|
15092
|
+
export default ZnAvatarGroup;
|
|
15093
|
+
global {
|
|
15094
|
+
interface HTMLElementTagNameMap {
|
|
15095
|
+
'zn-avatar-group': ZnAvatarGroup;
|
|
15096
|
+
}
|
|
15097
|
+
}
|
|
15098
|
+
}
|
|
15099
|
+
declare module "components/key-value/key-value.component" {
|
|
15100
|
+
import { type CSSResultGroup, type PropertyValues } from 'lit';
|
|
15101
|
+
import ZincElement, { type ZincFormControl } from "internal/zinc-element";
|
|
15102
|
+
/**
|
|
15103
|
+
* @summary Edits a list of name and value pairs, submitted as a JSON object.
|
|
15104
|
+
* @documentation https://zinc.style/components/key-value
|
|
15105
|
+
* @status experimental
|
|
15106
|
+
* @since 1.0
|
|
15107
|
+
*
|
|
15108
|
+
* @dependency zn-input
|
|
15109
|
+
* @dependency zn-button
|
|
15110
|
+
*
|
|
15111
|
+
* @event zn-change - Emitted when a pair is added, removed or edited.
|
|
15112
|
+
*
|
|
15113
|
+
* @slot label - The label. Alternatively, use the `label` attribute.
|
|
15114
|
+
* @slot help-text - Text under the pairs. Alternatively, use the `help-text` attribute.
|
|
15115
|
+
*
|
|
15116
|
+
* @csspart base - The component's base wrapper.
|
|
15117
|
+
* @csspart row - Each name and value pair.
|
|
15118
|
+
*/
|
|
15119
|
+
export default class ZnKeyValue extends ZincElement implements ZincFormControl {
|
|
15120
|
+
static styles: CSSResultGroup;
|
|
15121
|
+
private readonly hasSlotController;
|
|
15122
|
+
private readonly formControlController;
|
|
15123
|
+
name: string;
|
|
15124
|
+
/** The pairs as a JSON object, such as `{"1": "{{recipient.firstName}}"}`. */
|
|
15125
|
+
value: string;
|
|
15126
|
+
label: string;
|
|
15127
|
+
helpText: string;
|
|
15128
|
+
keyLabel: string;
|
|
15129
|
+
valueLabel: string;
|
|
15130
|
+
addText: string;
|
|
15131
|
+
/** Passed to each value input, so its slash menu can insert merge fields. */
|
|
15132
|
+
slashItems: string;
|
|
15133
|
+
form: string;
|
|
15134
|
+
disabled: boolean;
|
|
15135
|
+
private _rows;
|
|
15136
|
+
get validity(): ValidityState;
|
|
15137
|
+
get validationMessage(): string;
|
|
15138
|
+
checkValidity(): boolean;
|
|
15139
|
+
getForm(): HTMLFormElement | null;
|
|
15140
|
+
reportValidity(): boolean;
|
|
15141
|
+
setCustomValidity(): void;
|
|
15142
|
+
protected willUpdate(changed: PropertyValues): void;
|
|
15143
|
+
private _parse;
|
|
15144
|
+
private _serialise;
|
|
15145
|
+
private _update;
|
|
15146
|
+
private _edit;
|
|
15147
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
15148
|
+
}
|
|
15149
|
+
}
|
|
15150
|
+
declare module "components/key-value/index" {
|
|
15151
|
+
import ZnKeyValue from "components/key-value/key-value.component";
|
|
15152
|
+
export * from "components/key-value/key-value.component";
|
|
15153
|
+
export default ZnKeyValue;
|
|
15154
|
+
global {
|
|
15155
|
+
interface HTMLElementTagNameMap {
|
|
15156
|
+
'zn-key-value': ZnKeyValue;
|
|
15157
|
+
}
|
|
15158
|
+
}
|
|
15159
|
+
}
|
|
13318
15160
|
declare module "utilities/form" {
|
|
13319
15161
|
export { clearFormStoreValues } from "internal/form";
|
|
13320
15162
|
}
|
|
@@ -13497,6 +15339,20 @@ declare module "events/zn-theme-change" {
|
|
|
13497
15339
|
}
|
|
13498
15340
|
}
|
|
13499
15341
|
}
|
|
15342
|
+
declare module "events/zn-report-change" {
|
|
15343
|
+
export type ZnReportChangeEvent = CustomEvent<{
|
|
15344
|
+
type: string;
|
|
15345
|
+
groupBy: string;
|
|
15346
|
+
from: string;
|
|
15347
|
+
to: string;
|
|
15348
|
+
filter: string;
|
|
15349
|
+
}>;
|
|
15350
|
+
global {
|
|
15351
|
+
interface GlobalEventHandlersEventMap {
|
|
15352
|
+
'zn-report-change': ZnReportChangeEvent;
|
|
15353
|
+
}
|
|
15354
|
+
}
|
|
15355
|
+
}
|
|
13500
15356
|
declare module "events/zn-theme-submit" {
|
|
13501
15357
|
export type ZnThemeSubmitEvent = CustomEvent<{
|
|
13502
15358
|
values: {
|
|
@@ -13534,11 +15390,17 @@ declare module "events/zn-slash-insert" {
|
|
|
13534
15390
|
}
|
|
13535
15391
|
}
|
|
13536
15392
|
}
|
|
13537
|
-
declare module "events/zn-
|
|
13538
|
-
export type
|
|
15393
|
+
declare module "events/zn-chart-click" {
|
|
15394
|
+
export type ZnChartClickEvent = CustomEvent<{
|
|
15395
|
+
seriesName: string;
|
|
15396
|
+
/** The clicked category, or the data item's name. */
|
|
15397
|
+
name: string;
|
|
15398
|
+
dataIndex: number;
|
|
15399
|
+
value: unknown;
|
|
15400
|
+
}>;
|
|
13539
15401
|
global {
|
|
13540
15402
|
interface GlobalEventHandlersEventMap {
|
|
13541
|
-
'zn-
|
|
15403
|
+
'zn-chart-click': ZnChartClickEvent;
|
|
13542
15404
|
}
|
|
13543
15405
|
}
|
|
13544
15406
|
}
|
|
@@ -13563,10 +15425,12 @@ declare module "events/events" {
|
|
|
13563
15425
|
export type { ZnPageChangeEvent } from "events/zn-page-change";
|
|
13564
15426
|
export type { ZnPageSelectionChangeEvent } from "events/zn-page-selection-change";
|
|
13565
15427
|
export type { ZnThemeChangeEvent } from "events/zn-theme-change";
|
|
15428
|
+
export type { ZnReportChangeEvent } from "events/zn-report-change";
|
|
13566
15429
|
export type { ZnThemeSubmitEvent } from "events/zn-theme-submit";
|
|
13567
15430
|
export type { ZnSlashSelectEvent } from "events/zn-slash-select";
|
|
13568
15431
|
export type { ZnSlashInsertEvent } from "events/zn-slash-insert";
|
|
13569
15432
|
export type { ZnRepositionEvent } from "events/zn-reposition";
|
|
15433
|
+
export type { ZnChartClickEvent } from "events/zn-chart-click";
|
|
13570
15434
|
}
|
|
13571
15435
|
declare module "zinc" {
|
|
13572
15436
|
export { default as Button } from "components/button/index";
|
|
@@ -13583,12 +15447,14 @@ declare module "zinc" {
|
|
|
13583
15447
|
export { default as Well } from "components/well/index";
|
|
13584
15448
|
export { default as CopyButton } from "components/copy-button/index";
|
|
13585
15449
|
export { default as DataTable } from "components/data-table/index";
|
|
15450
|
+
export { default as ReportTable } from "components/report-table/index";
|
|
13586
15451
|
export { default as Cols } from "components/cols/index";
|
|
13587
15452
|
export { default as Confirm } from "components/confirm/index";
|
|
13588
15453
|
export { default as Dialog } from "components/dialog/index";
|
|
13589
15454
|
export { default as Dropdown } from "components/dropdown/index";
|
|
13590
15455
|
export { default as Menu } from "components/menu/index";
|
|
13591
15456
|
export { default as MenuItem } from "components/menu-item/index";
|
|
15457
|
+
export { default as MenuLabel } from "components/menu-label/index";
|
|
13592
15458
|
export { default as DefinedLabel } from "components/defined-label/index";
|
|
13593
15459
|
export { default as EmptyState } from "components/empty-state/index";
|
|
13594
15460
|
export { default as Note } from "components/note/index";
|
|
@@ -13606,6 +15472,8 @@ declare module "zinc" {
|
|
|
13606
15472
|
export { default as InlineEdit } from "components/inline-edit/index";
|
|
13607
15473
|
export { default as Pagination } from "components/pagination/index";
|
|
13608
15474
|
export { default as VerticalStepper } from "components/vertical-stepper/index";
|
|
15475
|
+
export { default as Diff } from "components/diff/index";
|
|
15476
|
+
export { default as DiffRow } from "components/diff-row/index";
|
|
13609
15477
|
export { default as Timer } from "components/timer/index";
|
|
13610
15478
|
export { default as Tabs } from "components/tabs/index";
|
|
13611
15479
|
export { default as Panel } from "components/panel/index";
|
|
@@ -13633,6 +15501,7 @@ declare module "zinc" {
|
|
|
13633
15501
|
export { default as Textarea } from "components/textarea/index";
|
|
13634
15502
|
export { default as Checkbox } from "components/checkbox/index";
|
|
13635
15503
|
export { default as Datepicker } from "components/datepicker/index";
|
|
15504
|
+
export { default as DateRange } from "components/date-range/index";
|
|
13636
15505
|
export { default as FormActions } from "components/form-actions/index";
|
|
13637
15506
|
export { default as FormGroup } from "components/form-group/index";
|
|
13638
15507
|
export { default as InputGroup } from "components/input-group/index";
|
|
@@ -13669,6 +15538,9 @@ declare module "zinc" {
|
|
|
13669
15538
|
export { default as KeyContainer } from "components/key-container/index";
|
|
13670
15539
|
export { default as AnimatedButton } from "components/animated-button/index";
|
|
13671
15540
|
export { default as TranslationGroup } from "components/translation-group/index";
|
|
15541
|
+
export { default as TranslationGrid } from "components/translation-grid/index";
|
|
15542
|
+
export { default as TranslationField } from "components/translation-field/index";
|
|
15543
|
+
export { default as TranslationFields } from "components/translation-fields/index";
|
|
13672
15544
|
export { default as OptGroup } from "components/opt-group/index";
|
|
13673
15545
|
export { default as PriorityList } from "components/priority-list/index";
|
|
13674
15546
|
export { default as MarkdownEditor } from "components/markdown-editor/index";
|
|
@@ -13689,6 +15561,12 @@ declare module "zinc" {
|
|
|
13689
15561
|
export { default as Thumbnail } from "components/thumbnail/index";
|
|
13690
15562
|
export { default as ThumbnailGroup } from "components/thumbnail-group/index";
|
|
13691
15563
|
export { default as Background } from "components/background/index";
|
|
15564
|
+
export { default as NavList } from "components/nav-list/index";
|
|
15565
|
+
export { default as NavItem } from "components/nav-item/index";
|
|
15566
|
+
export { default as AvatarGroup } from "components/avatar-group/index";
|
|
15567
|
+
export { default as Badge } from "components/badge/index";
|
|
15568
|
+
export { default as ColorPicker } from "components/color-picker/index";
|
|
15569
|
+
export { default as KeyValue } from "components/key-value/index";
|
|
13692
15570
|
export { default as ZincElement } from "internal/zinc-element";
|
|
13693
15571
|
export * from "utilities/on";
|
|
13694
15572
|
export * from "utilities/query";
|
|
@@ -13907,3 +15785,14 @@ declare module "events/zn-submit" {
|
|
|
13907
15785
|
}
|
|
13908
15786
|
}
|
|
13909
15787
|
}
|
|
15788
|
+
declare module "internal/test-drag" {
|
|
15789
|
+
/** The centre of an element. */
|
|
15790
|
+
export function centre(el: Element): {
|
|
15791
|
+
x: number;
|
|
15792
|
+
y: number;
|
|
15793
|
+
};
|
|
15794
|
+
/** Presses on an element and moves far enough to start dragging it. */
|
|
15795
|
+
export function startDrag(el: Element): void;
|
|
15796
|
+
export function dragTo(x: number, y: number): void;
|
|
15797
|
+
export function drop(x: number, y: number): void;
|
|
15798
|
+
}
|