@kubex/zinc 0.0.3 → 1.0.1
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/.editorconfig +18 -0
- package/.eslintignore +8 -0
- package/.eslintrc.cjs +208 -0
- package/.github/workflows/eleventy_build.yml +42 -0
- package/.github/workflows/js_build_and_deploy.yaml +65 -0
- package/custom-elements-manifest.config.js +230 -0
- package/docs/_includes/component.njk +340 -0
- package/docs/_includes/default.njk +137 -0
- package/docs/_includes/sidebar.njk +24 -0
- package/docs/_utilities/active-links.cjs +41 -0
- package/docs/_utilities/anchor-headings.cjs +74 -0
- package/docs/_utilities/cem.cjs +89 -0
- package/docs/_utilities/code-previews.cjs +98 -0
- package/docs/_utilities/copy-code-buttons.cjs +26 -0
- package/docs/_utilities/external-links.cjs +53 -0
- package/docs/_utilities/highlight-code.cjs +74 -0
- package/docs/_utilities/markdown.cjs +74 -0
- package/docs/_utilities/prettier.cjs +26 -0
- package/docs/_utilities/replacer.cjs +24 -0
- package/docs/_utilities/scrolling-tables.cjs +23 -0
- package/docs/_utilities/strings.cjs +16 -0
- package/docs/_utilities/table-of-contents.cjs +48 -0
- package/docs/_utilities/typography.cjs +24 -0
- package/docs/assets/icons.json +57989 -0
- package/docs/assets/images/chrome.png +0 -0
- package/docs/assets/images/edge.png +0 -0
- package/docs/assets/images/firefox.png +0 -0
- package/docs/assets/images/opera.png +0 -0
- package/docs/assets/images/safari.png +0 -0
- package/docs/assets/images/watermark.svg +1 -0
- package/docs/assets/rip.js +78 -0
- package/docs/assets/scripts/code-previews.js +250 -0
- package/docs/assets/scripts/docs.js +374 -0
- package/docs/assets/scripts/search.js +441 -0
- package/docs/assets/scripts/turbo.js +29 -0
- package/docs/assets/styles/code-previews.css +169 -0
- package/docs/assets/styles/docs.css +1168 -0
- package/docs/assets/styles/search.css +347 -0
- package/docs/eleventy.config.cjs +262 -0
- package/docs/pages/components/absolute-container.md +35 -0
- package/docs/pages/components/action-bar.md +58 -0
- package/docs/pages/components/alert.md +45 -0
- package/docs/pages/components/bulk-actions.md +26 -0
- package/docs/pages/components/button-group.md +78 -0
- package/docs/pages/components/button-menu.md +127 -0
- package/docs/pages/components/button.md +80 -0
- package/docs/pages/components/chart.md +27 -0
- package/docs/pages/components/checkbox-group.md +196 -0
- package/docs/pages/components/checkbox.md +157 -0
- package/docs/pages/components/chip.md +61 -0
- package/docs/pages/components/collapsible.md +52 -0
- package/docs/pages/components/cols.md +66 -0
- package/docs/pages/components/confirm.md +52 -0
- package/docs/pages/components/content-block.md +108 -0
- package/docs/pages/components/copy-button.md +22 -0
- package/docs/pages/components/data-select.md +54 -0
- package/docs/pages/components/data-table-filter.md +23 -0
- package/docs/pages/components/data-table-sort.md +20 -0
- package/docs/pages/components/data-table.md +74 -0
- package/docs/pages/components/datepicker.md +25 -0
- package/docs/pages/components/defined-label.md +26 -0
- package/docs/pages/components/dialog.md +145 -0
- package/docs/pages/components/dropdown.md +22 -0
- package/docs/pages/components/editor.md +26 -0
- package/docs/pages/components/empty-state.md +51 -0
- package/docs/pages/components/expanding-action.md +55 -0
- package/docs/pages/components/file.md +45 -0
- package/docs/pages/components/form-group.md +22 -0
- package/docs/pages/components/header.md +103 -0
- package/docs/pages/components/icon.md +322 -0
- package/docs/pages/components/inline-edit.md +41 -0
- package/docs/pages/components/input.md +261 -0
- package/docs/pages/components/item.md +78 -0
- package/docs/pages/components/linked-select.md +41 -0
- package/docs/pages/components/menu-item.md +22 -0
- package/docs/pages/components/menu.md +36 -0
- package/docs/pages/components/navbar.md +57 -0
- package/docs/pages/components/note.md +55 -0
- package/docs/pages/components/option.md +22 -0
- package/docs/pages/components/order-table.md +22 -0
- package/docs/pages/components/page-nav.md +23 -0
- package/docs/pages/components/pagination.md +22 -0
- package/docs/pages/components/pane.md +22 -0
- package/docs/pages/components/panel.md +124 -0
- package/docs/pages/components/popup.md +22 -0
- package/docs/pages/components/progress-bar.md +22 -0
- package/docs/pages/components/progress-tile.md +22 -0
- package/docs/pages/components/query-builder.md +148 -0
- package/docs/pages/components/radio-group.md +129 -0
- package/docs/pages/components/radio.md +20 -0
- package/docs/pages/components/rating.md +28 -0
- package/docs/pages/components/scroll-container.md +22 -0
- package/docs/pages/components/select.md +452 -0
- package/docs/pages/components/sidebar.md +28 -0
- package/docs/pages/components/simple-chart.md +23 -0
- package/docs/pages/components/skeleton.md +70 -0
- package/docs/pages/components/slideout.md +23 -0
- package/docs/pages/components/sp.md +87 -0
- package/docs/pages/components/split-button.md +32 -0
- package/docs/pages/components/split-pane.md +22 -0
- package/docs/pages/components/stat.md +24 -0
- package/docs/pages/components/status-indicator.md +13 -0
- package/docs/pages/components/stepper.md +20 -0
- package/docs/pages/components/style.md +106 -0
- package/docs/pages/components/table.md +22 -0
- package/docs/pages/components/tabs.md +57 -0
- package/docs/pages/components/textarea.md +120 -0
- package/docs/pages/components/tile-property.md +29 -0
- package/docs/pages/components/tile.md +51 -0
- package/docs/pages/components/timer.md +22 -0
- package/docs/pages/components/toggle.md +22 -0
- package/docs/pages/components/tooltip.md +242 -0
- package/docs/pages/components/vertical-stepper.md +22 -0
- package/docs/pages/components/well.md +13 -0
- package/docs/pages/getting-started/example-layout.md +143 -0
- package/docs/pages/getting-started/example-page.md +83 -0
- package/docs/pages/getting-started/form-controls.md +552 -0
- package/docs/pages/getting-started/form-examples.md +122 -0
- package/docs/pages/getting-started/table-examples.md +43 -0
- package/docs/pages/index.md +32 -0
- package/index.html +22 -0
- package/package.json +111 -11
- package/scripts/build.js +381 -0
- package/scripts/generator/generator.js +102 -0
- package/scripts/generator/index.js +17 -0
- package/scripts/generator/preprocess.js +20 -0
- package/scripts/generator/resolver.js +86 -0
- package/scripts/generator/tailwind.config.js +14 -0
- package/scripts/make-metadata.js +10 -0
- package/scripts/make-themes.js +27 -0
- package/scripts/plop/plopfile.js +63 -0
- package/scripts/plop/templates/component.hbs +43 -0
- package/scripts/plop/templates/define.hbs +12 -0
- package/scripts/plop/templates/docs.hbs +20 -0
- package/scripts/plop/templates/style.hbs +5 -0
- package/scripts/plop/templates/test.hbs +10 -0
- package/scss/_global-components.scss +4 -0
- package/scss/_global-spacing.scss +96 -0
- package/scss/_root.scss +202 -0
- package/scss/boot.scss +29 -0
- package/scss/mixins/_helper-mixins.scss +24 -0
- package/scss/mixins/_spacing-mixins.scss +84 -0
- package/scss/mixins/index.scss +2 -0
- package/scss/shared/_base.scss +138 -0
- package/scss/shared/_button.scss +27 -0
- package/scss/shared/_form-elements.scss +162 -0
- package/scss/shared/_opacity.scss +27 -0
- package/scss/shared/_reset.scss +288 -0
- package/scss/shared/_table.scss +73 -0
- package/scss/shared/divide.scss +41 -0
- package/scss/shared/index.scss +12 -0
- package/scss/shared/layout.scss +290 -0
- package/scss/shared/nav.scss +71 -0
- package/scss/themes/_dark.scss +277 -0
- package/scss/themes/_index.scss +3 -0
- package/scss/themes/_light.scss +540 -0
- package/scss/themes/_utility.scss +44 -0
- package/scss/variables/_spacing.scss +35 -0
- package/scss/variables/index.scss +1 -0
- package/src/components/absolute-container/absolute-container.component.ts +62 -0
- package/src/components/absolute-container/absolute-container.test.ts +10 -0
- package/src/components/absolute-container/index.ts +12 -0
- package/src/components/action-bar/action-bar.component.ts +41 -0
- package/src/components/action-bar/action-bar.scss +33 -0
- package/src/components/action-bar/action-bar.test.ts +10 -0
- package/src/components/action-bar/index.ts +12 -0
- package/src/components/alert/alert.component.ts +71 -0
- package/src/components/alert/alert.scss +170 -0
- package/src/components/alert/alert.test.ts +10 -0
- package/src/components/alert/index.ts +12 -0
- package/src/components/bulk-actions/bulk-actions.component.ts +229 -0
- package/src/components/bulk-actions/bulk-actions.scss +56 -0
- package/src/components/bulk-actions/bulk-actions.test.ts +10 -0
- package/src/components/bulk-actions/index.ts +12 -0
- package/src/components/button/button.component.ts +242 -0
- package/src/components/button/button.scss +346 -0
- package/src/components/button/button.test.ts +32 -0
- package/src/components/button/index.ts +12 -0
- package/src/components/button-group/button-group.component.ts +74 -0
- package/src/components/button-group/button-group.scss +39 -0
- package/src/components/button-group/button-group.test.ts +10 -0
- package/src/components/button-group/index.ts +12 -0
- package/src/components/button-menu/button-menu.component.ts +353 -0
- package/src/components/button-menu/button-menu.scss +41 -0
- package/src/components/button-menu/button-menu.test.ts +10 -0
- package/src/components/button-menu/index.ts +12 -0
- package/src/components/chart/chart.component.ts +206 -0
- package/src/components/chart/chart.scss +11 -0
- package/src/components/chart/chart.test.ts +10 -0
- package/src/components/chart/index.ts +12 -0
- package/src/components/checkbox/checkbox.component.ts +326 -0
- package/src/components/checkbox/checkbox.scss +202 -0
- package/src/components/checkbox/checkbox.test.ts +10 -0
- package/src/components/checkbox/index.ts +12 -0
- package/src/components/checkbox-group/checkbox-group.component.ts +351 -0
- package/src/components/checkbox-group/checkbox-group.scss +60 -0
- package/src/components/checkbox-group/checkbox-group.test.ts +10 -0
- package/src/components/checkbox-group/index.ts +12 -0
- package/src/components/chip/chip.component.ts +70 -0
- package/src/components/chip/chip.scss +101 -0
- package/src/components/chip/chip.test.ts +10 -0
- package/src/components/chip/index.ts +12 -0
- package/src/components/collapsible/collapsible.component.ts +86 -0
- package/src/components/collapsible/collapsible.scss +100 -0
- package/src/components/collapsible/collapsible.test.ts +10 -0
- package/src/components/collapsible/index.ts +12 -0
- package/src/components/cols/cols.component.ts +76 -0
- package/src/components/cols/cols.scss +99 -0
- package/src/components/cols/cols.test.ts +10 -0
- package/src/components/cols/index.ts +12 -0
- package/src/components/confirm/confirm.component.ts +181 -0
- package/src/components/confirm/confirm.scss +44 -0
- package/src/components/confirm/confirm.test.ts +10 -0
- package/src/components/confirm/index.ts +12 -0
- package/src/components/content-block/content-block.component.ts +225 -0
- package/src/components/content-block/content-block.scss +64 -0
- package/src/components/content-block/content-block.test.ts +10 -0
- package/src/components/content-block/index.ts +12 -0
- package/src/components/copy-button/copy-button.component.ts +163 -0
- package/src/components/copy-button/copy-button.scss +47 -0
- package/src/components/copy-button/copy-button.test.ts +10 -0
- package/src/components/copy-button/index.ts +12 -0
- package/src/components/data-select/data-select.component.ts +219 -0
- package/src/components/data-select/data-select.scss +43 -0
- package/src/components/data-select/data-select.test.ts +10 -0
- package/src/components/data-select/index.ts +12 -0
- package/src/components/data-select/providers/color-data-provider.ts +16 -0
- package/src/components/data-select/providers/country-code-data-provider.ts +517 -0
- package/src/components/data-select/providers/country-data-provider.ts +527 -0
- package/src/components/data-select/providers/currency-data-provider.ts +328 -0
- package/src/components/data-select/providers/provider.ts +32 -0
- package/src/components/data-table/data-table.component.ts +1093 -0
- package/src/components/data-table/data-table.scss +330 -0
- package/src/components/data-table/data-table.test.ts +10 -0
- package/src/components/data-table/index.ts +12 -0
- package/src/components/data-table-filter/data-table-filter.component.ts +126 -0
- package/src/components/data-table-filter/data-table-filter.scss +22 -0
- package/src/components/data-table-filter/data-table-filter.test.ts +10 -0
- package/src/components/data-table-filter/index.ts +12 -0
- package/src/components/data-table-sort/data-table-sort.component.ts +56 -0
- package/src/components/data-table-sort/data-table-sort.scss +37 -0
- package/src/components/data-table-sort/data-table-sort.test.ts +10 -0
- package/src/components/data-table-sort/index.ts +12 -0
- package/src/components/datepicker/datepicker.component.ts +315 -0
- package/src/components/datepicker/datepicker.scss +237 -0
- package/src/components/datepicker/datepicker.test.ts +10 -0
- package/src/components/datepicker/index.ts +12 -0
- package/src/components/defined-label/defined-label.component.ts +241 -0
- package/src/components/defined-label/defined-label.scss +43 -0
- package/src/components/defined-label/defined-label.test.ts +10 -0
- package/src/components/defined-label/index.ts +12 -0
- package/src/components/dialog/dialog.component.ts +237 -0
- package/src/components/dialog/dialog.scss +197 -0
- package/src/components/dialog/dialog.test.ts +10 -0
- package/src/components/dialog/index.ts +12 -0
- package/src/components/dropdown/dropdown.component.ts +380 -0
- package/src/components/dropdown/dropdown.scss +9 -0
- package/src/components/dropdown/dropdown.test.ts +10 -0
- package/src/components/dropdown/index.ts +12 -0
- package/src/components/editor/editor.component.ts +423 -0
- package/src/components/editor/editor.scss +131 -0
- package/src/components/editor/editor.test.ts +10 -0
- package/src/components/editor/index.ts +12 -0
- package/src/components/editor/modules/attachment-module.ts +195 -0
- package/src/components/editor/modules/dialog-module/dialog-module.component.ts +289 -0
- package/src/components/editor/modules/dialog-module/dialog-module.scss +115 -0
- package/src/components/editor/modules/dialog-module/dialog-module.ts +99 -0
- package/src/components/editor/modules/drag-drop-module.ts +125 -0
- package/src/components/editor/modules/events/zn-command-select.ts +7 -0
- package/src/components/editor/modules/events/zn-editor-update.ts +7 -0
- package/src/components/editor/modules/events/zn-show-canned-response-dialog.ts +15 -0
- package/src/components/editor/modules/image-resize-module/image-resize-module.ts +157 -0
- package/src/components/editor/modules/menu-module/menu-module.component.ts +149 -0
- package/src/components/editor/modules/menu-module/menu-module.scss +17 -0
- package/src/components/editor/modules/menu-module/menu-module.ts +203 -0
- package/src/components/editor/modules/time-tracking-module.ts +35 -0
- package/src/components/empty-state/empty-state.component.ts +63 -0
- package/src/components/empty-state/empty-state.scss +91 -0
- package/src/components/empty-state/empty-state.test.ts +10 -0
- package/src/components/empty-state/index.ts +12 -0
- package/src/components/expanding-action/expanding-action.component.ts +312 -0
- package/src/components/expanding-action/expanding-action.scss +87 -0
- package/src/components/expanding-action/expanding-action.test.ts +10 -0
- package/src/components/expanding-action/index.ts +12 -0
- package/src/components/file/file.component.ts +619 -0
- package/src/components/file/file.scss +200 -0
- package/src/components/file/file.test.ts +10 -0
- package/src/components/file/index.ts +12 -0
- package/src/components/form-group/form-group.component.ts +93 -0
- package/src/components/form-group/form-group.scss +84 -0
- package/src/components/form-group/form-group.test.ts +10 -0
- package/src/components/form-group/index.ts +12 -0
- package/src/components/header/header.component.ts +186 -0
- package/src/components/header/header.scss +244 -0
- package/src/components/header/header.test.ts +10 -0
- package/src/components/header/index.ts +12 -0
- package/src/components/hover-container/hover-container.component.ts +214 -0
- package/src/components/hover-container/hover-container.scss +59 -0
- package/src/components/hover-container/hover-container.ts +10 -0
- package/src/components/hover-container/index.ts +12 -0
- package/src/components/icon/icon.component.ts +251 -0
- package/src/components/icon/icon.scss +186 -0
- package/src/components/icon/icon.test.ts +10 -0
- package/src/components/icon/index.ts +13 -0
- package/src/components/icon/lni.scss +2492 -0
- package/src/components/inline-edit/index.ts +12 -0
- package/src/components/inline-edit/inline-edit.component.ts +289 -0
- package/src/components/inline-edit/inline-edit.scss +139 -0
- package/src/components/inline-edit/inline-edit.test.ts +10 -0
- package/src/components/input/index.ts +12 -0
- package/src/components/input/input.component.ts +614 -0
- package/src/components/input/input.scss +355 -0
- package/src/components/input/input.test.ts +10 -0
- package/src/components/item/index.ts +12 -0
- package/src/components/item/item.component.ts +102 -0
- package/src/components/item/item.scss +161 -0
- package/src/components/item/item.test.ts +10 -0
- package/src/components/linked-select/index.ts +12 -0
- package/src/components/linked-select/linked-select.component.ts +156 -0
- package/src/components/linked-select/linked-select.scss +9 -0
- package/src/components/linked-select/linked-select.test.ts +17 -0
- package/src/components/menu/index.ts +12 -0
- package/src/components/menu/menu.component.ts +243 -0
- package/src/components/menu/menu.scss +14 -0
- package/src/components/menu/menu.test.ts +10 -0
- package/src/components/menu-item/index.ts +12 -0
- package/src/components/menu-item/menu-item.component.ts +220 -0
- package/src/components/menu-item/menu-item.scss +157 -0
- package/src/components/menu-item/menu-item.test.ts +10 -0
- package/src/components/menu-item/submenu-controller.ts +291 -0
- package/src/components/navbar/index.ts +12 -0
- package/src/components/navbar/navbar.component.ts +240 -0
- package/src/components/navbar/navbar.scss +411 -0
- package/src/components/navbar/navbar.test.ts +10 -0
- package/src/components/note/index.ts +12 -0
- package/src/components/note/note.component.ts +60 -0
- package/src/components/note/note.scss +69 -0
- package/src/components/note/note.test.ts +10 -0
- package/src/components/option/index.ts +12 -0
- package/src/components/option/option.component.ts +152 -0
- package/src/components/option/option.scss +88 -0
- package/src/components/option/option.test.ts +10 -0
- package/src/components/order-table/index.ts +12 -0
- package/src/components/order-table/order-table.component.ts +323 -0
- package/src/components/order-table/order-table.scss +154 -0
- package/src/components/order-table/order-table.test.ts +10 -0
- package/src/components/page-nav/index.ts +12 -0
- package/src/components/page-nav/page-nav.component.ts +117 -0
- package/src/components/page-nav/page-nav.scss +155 -0
- package/src/components/page-nav/page-nav.test.ts +10 -0
- package/src/components/pagination/index.ts +12 -0
- package/src/components/pagination/pagination.component.ts +91 -0
- package/src/components/pagination/pagination.scss +76 -0
- package/src/components/pagination/pagination.test.ts +10 -0
- package/src/components/pane/index.ts +12 -0
- package/src/components/pane/pane.component.ts +52 -0
- package/src/components/pane/pane.scss +45 -0
- package/src/components/pane/pane.test.ts +10 -0
- package/src/components/panel/index.ts +12 -0
- package/src/components/panel/panel.component.ts +100 -0
- package/src/components/panel/panel.scss +129 -0
- package/src/components/panel/panel.test.ts +10 -0
- package/src/components/popup/index.ts +12 -0
- package/src/components/popup/popup.component.ts +543 -0
- package/src/components/popup/popup.scss +59 -0
- package/src/components/popup/popup.test.ts +10 -0
- package/src/components/progress-bar/index.ts +12 -0
- package/src/components/progress-bar/progress-bar.component.ts +80 -0
- package/src/components/progress-bar/progress-bar.scss +46 -0
- package/src/components/progress-bar/progress-bar.test.ts +10 -0
- package/src/components/progress-tile/index.ts +12 -0
- package/src/components/progress-tile/progress-tile.component.ts +127 -0
- package/src/components/progress-tile/progress-tile.scss +116 -0
- package/src/components/progress-tile/progress-tile.test.ts +10 -0
- package/src/components/query-builder/index.ts +12 -0
- package/src/components/query-builder/query-builder.component.ts +544 -0
- package/src/components/query-builder/query-builder.scss +53 -0
- package/src/components/query-builder/query-builder.test.ts +10 -0
- package/src/components/radio/index.ts +12 -0
- package/src/components/radio/radio.component.ts +305 -0
- package/src/components/radio/radio.scss +197 -0
- package/src/components/radio/radio.test.ts +10 -0
- package/src/components/radio-group/index.ts +12 -0
- package/src/components/radio-group/radio-group.component.ts +362 -0
- package/src/components/radio-group/radio-group.scss +60 -0
- package/src/components/radio-group/radio-group.test.ts +10 -0
- package/src/components/rating/index.ts +12 -0
- package/src/components/rating/rating.component.ts +235 -0
- package/src/components/rating/rating.scss +82 -0
- package/src/components/rating/rating.test.ts +10 -0
- package/src/components/scroll-container/index.ts +12 -0
- package/src/components/scroll-container/scroll-container.component.ts +41 -0
- package/src/components/scroll-container/scroll-container.scss +17 -0
- package/src/components/scroll-container/scroll-container.test.ts +10 -0
- package/src/components/select/index.ts +12 -0
- package/src/components/select/select.component.ts +984 -0
- package/src/components/select/select.scss +325 -0
- package/src/components/select/select.test.ts +10 -0
- package/src/components/sidebar/index.ts +12 -0
- package/src/components/sidebar/sidebar.component.ts +98 -0
- package/src/components/sidebar/sidebar.scss +294 -0
- package/src/components/sidebar/sidebar.test.ts +10 -0
- package/src/components/simple-chart/index.ts +12 -0
- package/src/components/simple-chart/simple-chart.component.ts +204 -0
- package/src/components/simple-chart/simple-chart.scss +9 -0
- package/src/components/simple-chart/simple-chart.test.ts +10 -0
- package/src/components/skeleton/index.ts +12 -0
- package/src/components/skeleton/skeleton.component.ts +34 -0
- package/src/components/skeleton/skeleton.scss +39 -0
- package/src/components/skeleton/skeleton.test.ts +10 -0
- package/src/components/slideout/index.ts +12 -0
- package/src/components/slideout/slideout.component.ts +223 -0
- package/src/components/slideout/slideout.scss +96 -0
- package/src/components/slideout/slideout.test.ts +10 -0
- package/src/components/sp/index.ts +12 -0
- package/src/components/sp/sp.component.ts +86 -0
- package/src/components/sp/sp.scss +88 -0
- package/src/components/sp/sp.test.ts +10 -0
- package/src/components/split-button/index.ts +12 -0
- package/src/components/split-button/split-button.component.ts +154 -0
- package/src/components/split-button/split-button.scss +9 -0
- package/src/components/split-button/split-button.test.ts +10 -0
- package/src/components/split-pane/index.ts +12 -0
- package/src/components/split-pane/split-pane.component.ts +195 -0
- package/src/components/split-pane/split-pane.scss +303 -0
- package/src/components/split-pane/split-pane.test.ts +10 -0
- package/src/components/stat/index.ts +12 -0
- package/src/components/stat/stat.component.ts +117 -0
- package/src/components/stat/stat.scss +92 -0
- package/src/components/stat/stat.test.ts +10 -0
- package/src/components/status-indicator/index.ts +12 -0
- package/src/components/status-indicator/status-indicator.component.ts +31 -0
- package/src/components/status-indicator/status-indicator.scss +32 -0
- package/src/components/status-indicator/status-indicator.test.ts +10 -0
- package/src/components/stepper/index.ts +12 -0
- package/src/components/stepper/stepper.component.ts +80 -0
- package/src/components/stepper/stepper.scss +88 -0
- package/src/components/stepper/stepper.test.ts +10 -0
- package/src/components/style/index.ts +12 -0
- package/src/components/style/style.component.ts +150 -0
- package/src/components/style/style.scss +1 -0
- package/src/components/style/style.test.ts +10 -0
- package/src/components/table/index.ts +12 -0
- package/src/components/table/table.component.ts +297 -0
- package/src/components/table/table.scss +209 -0
- package/src/components/table/table.test.ts +10 -0
- package/src/components/tabs/index.ts +12 -0
- package/src/components/tabs/tabs.component.ts +496 -0
- package/src/components/tabs/tabs.scss +147 -0
- package/src/components/tabs/tabs.test.ts +10 -0
- package/src/components/textarea/index.ts +12 -0
- package/src/components/textarea/textarea.component.ts +417 -0
- package/src/components/textarea/textarea.scss +152 -0
- package/src/components/textarea/textarea.test.ts +10 -0
- package/src/components/tile/index.ts +12 -0
- package/src/components/tile/tile.component.ts +105 -0
- package/src/components/tile/tile.scss +144 -0
- package/src/components/tile/tile.test.ts +10 -0
- package/src/components/tile-property/index.ts +12 -0
- package/src/components/tile-property/tile-property.component.ts +43 -0
- package/src/components/tile-property/tile-property.scss +43 -0
- package/src/components/tile-property/tile-property.test.ts +10 -0
- package/src/components/timer/index.ts +12 -0
- package/src/components/timer/timer.component.ts +88 -0
- package/src/components/timer/timer.scss +40 -0
- package/src/components/timer/timer.test.ts +10 -0
- package/src/components/toggle/index.ts +12 -0
- package/src/components/toggle/toggle.component.ts +203 -0
- package/src/components/toggle/toggle.scss +93 -0
- package/src/components/toggle/toggle.test.ts +10 -0
- package/src/components/tooltip/index.ts +12 -0
- package/src/components/tooltip/tooltip.component.ts +215 -0
- package/src/components/tooltip/tooltip.scss +43 -0
- package/src/components/tooltip/tooltip.test.ts +10 -0
- package/src/components/vertical-stepper/index.ts +12 -0
- package/src/components/vertical-stepper/vertical-stepper.component.ts +53 -0
- package/src/components/vertical-stepper/vertical-stepper.scss +84 -0
- package/src/components/vertical-stepper/vertical-stepper.test.ts +10 -0
- package/src/components/well/index.ts +12 -0
- package/src/components/well/well.component.ts +43 -0
- package/src/components/well/well.scss +19 -0
- package/src/components/well/well.test.ts +10 -0
- package/src/declaration.d.ts +39 -0
- package/src/events/events.ts +7 -0
- package/src/events/zn-after-collapse.ts +7 -0
- package/src/events/zn-after-expand.ts +7 -0
- package/src/events/zn-after-hide.ts +7 -0
- package/src/events/zn-after-show.ts +7 -0
- package/src/events/zn-blur.ts +7 -0
- package/src/events/zn-cancel.ts +7 -0
- package/src/events/zn-change.ts +7 -0
- package/src/events/zn-clear.ts +7 -0
- package/src/events/zn-close.ts +7 -0
- package/src/events/zn-collapse.ts +7 -0
- package/src/events/zn-copy.ts +7 -0
- package/src/events/zn-element-added.ts +7 -0
- package/src/events/zn-error.ts +7 -0
- package/src/events/zn-expand.ts +7 -0
- package/src/events/zn-filter-change.ts +7 -0
- package/src/events/zn-finish.ts +7 -0
- package/src/events/zn-focus.ts +7 -0
- package/src/events/zn-hide.ts +7 -0
- package/src/events/zn-hover.ts +10 -0
- package/src/events/zn-initial-focus.ts +7 -0
- package/src/events/zn-input.ts +7 -0
- package/src/events/zn-invalid.ts +7 -0
- package/src/events/zn-load.ts +7 -0
- package/src/events/zn-menu-ready.ts +9 -0
- package/src/events/zn-menu-select.ts +9 -0
- package/src/events/zn-open.ts +7 -0
- package/src/events/zn-remove.ts +7 -0
- package/src/events/zn-request-close.ts +7 -0
- package/src/events/zn-select.ts +9 -0
- package/src/events/zn-show.ts +7 -0
- package/src/events/zn-sort-change.ts +7 -0
- package/src/events/zn-submit.ts +7 -0
- package/src/form-control.scss +123 -0
- package/src/internal/animate.ts +64 -0
- package/src/internal/default-value.ts +49 -0
- package/src/internal/event.ts +75 -0
- package/src/internal/form.ts +527 -0
- package/src/internal/offset.ts +13 -0
- package/src/internal/scroll.ts +69 -0
- package/src/internal/slot.ts +110 -0
- package/src/internal/storage.ts +70 -0
- package/src/internal/tabbable.ts +198 -0
- package/src/internal/theme.ts +54 -0
- package/src/internal/watch.ts +63 -0
- package/src/internal/zinc-element.ts +113 -0
- package/src/translations/en.ts +30 -0
- package/src/utilities/animation-registry.ts +74 -0
- package/src/utilities/base-path.ts +46 -0
- package/src/utilities/lit-to-html.ts +7 -0
- package/src/utilities/localize.ts +37 -0
- package/src/utilities/md5.ts +216 -0
- package/src/utilities/on.ts +29 -0
- package/src/utilities/query.ts +36 -0
- package/src/wc.scss +33 -0
- package/src/zinc-autoloader.ts +58 -0
- package/src/zinc.ts +83 -0
- package/tsconfig.json +41 -0
- package/tsconfig.prod.json +12 -0
- package/web-test-runner.config.js +50 -0
- package/.idea/.name +0 -1
- package/.idea/fusion.iml +0 -9
- package/.idea/modules.xml +0 -8
- package/.idea/php.xml +0 -4
- package/.idea/vcs.xml +0 -6
- package/.idea/watcherTasks.xml +0 -25
- package/components/Blank/demo/demo.html +0 -11
- package/components/Blank/dist/zn-blank.js +0 -39
- package/components/Blank/go/component.go +0 -18
- package/components/Blank/go/go.mod +0 -3
- package/components/Blank/package.json +0 -33
- package/components/Blank/php/composer.json +0 -25
- package/components/Blank/php/src/Blank.php +0 -15
- package/components/Blank/rollup.config.js +0 -32
- package/components/Blank/scss/Styles.scss +0 -6
- package/components/Blank/ts/Component.ts +0 -15
- package/components/Blank/tsconfig.json +0 -7
- package/components/Icon/demo/demo.html +0 -90
- package/components/Icon/dist/zn-icon.js +0 -55
- package/components/Icon/go/component.go +0 -56
- package/components/Icon/go/go.mod +0 -3
- package/components/Icon/package.json +0 -33
- package/components/Icon/php/composer.json +0 -26
- package/components/Icon/php/src/Icon.php +0 -38
- package/components/Icon/php/src/Library.php +0 -17
- package/components/Icon/php/src/Size.php +0 -42
- package/components/Icon/roadmap.md +0 -7
- package/components/Icon/rollup.config.js +0 -32
- package/components/Icon/scss/Styles.scss +0 -65
- package/components/Icon/ts/Component.ts +0 -108
- package/components/Icon/ts/md5.ts +0 -215
- package/components/Icon/tsconfig.json +0 -7
- package/components/MaxWidth/demo/demo.html +0 -11
- package/components/MaxWidth/dist/zn-max-width.js +0 -51
- package/components/MaxWidth/go/component.go +0 -24
- package/components/MaxWidth/go/go.mod +0 -3
- package/components/MaxWidth/package.json +0 -33
- package/components/MaxWidth/php/composer.json +0 -25
- package/components/MaxWidth/php/src/MaxWidth.php +0 -32
- package/components/MaxWidth/rollup.config.js +0 -32
- package/components/MaxWidth/scss/Styles.scss +0 -13
- package/components/MaxWidth/ts/Component.ts +0 -27
- package/components/MaxWidth/tsconfig.json +0 -7
- package/components/roadmap.md +0 -4
- package/layout/components/Columns/demo/demo.html +0 -16
- package/layout/components/Columns/ts/Component.ts +0 -59
- package/layout/demo/index.html +0 -26
- package/layout/dist/zn-layout.js +0 -93
- package/layout/package.json +0 -38
- package/layout/rollup.config.js +0 -38
- package/layout/scss/layout.scss +0 -24
- package/layout/tailwind.config.js +0 -42
- package/layout/ts/container.ts +0 -132
- package/layout/ts/import.ts +0 -2
- package/layout/tsconfig.json +0 -7
- /package/{layout/components/Columns/scss/Styles.scss → src/internal/zinc-element.test.ts} +0 -0
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Data Table
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
fullWidth: true
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
```html:preview
|
|
10
|
+
|
|
11
|
+
<zn-data-table
|
|
12
|
+
standalone
|
|
13
|
+
data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}"
|
|
14
|
+
headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}">
|
|
15
|
+
|
|
16
|
+
<zn-data-table-sort slot="sort"></zn-data-table-sort>
|
|
17
|
+
|
|
18
|
+
<zn-data-table-filter
|
|
19
|
+
slot="filter"
|
|
20
|
+
filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]">
|
|
21
|
+
</zn-data-table-filter>
|
|
22
|
+
</zn-data-table>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Examples
|
|
26
|
+
|
|
27
|
+
### No Data
|
|
28
|
+
|
|
29
|
+
```html:preview
|
|
30
|
+
|
|
31
|
+
<zn-panel>
|
|
32
|
+
<zn-data-table
|
|
33
|
+
data="{"data":[]}"
|
|
34
|
+
headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}">
|
|
35
|
+
</zn-data-table>
|
|
36
|
+
</zn-panel>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### In a Panel
|
|
40
|
+
|
|
41
|
+
```html:preview
|
|
42
|
+
|
|
43
|
+
<zn-panel>
|
|
44
|
+
<zn-data-table
|
|
45
|
+
data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}"
|
|
46
|
+
headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}">
|
|
47
|
+
|
|
48
|
+
<zn-data-table-sort slot="sort"></zn-data-table-sort>
|
|
49
|
+
|
|
50
|
+
<zn-data-table-filter
|
|
51
|
+
slot="filter"
|
|
52
|
+
filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]">
|
|
53
|
+
</zn-data-table-filter>
|
|
54
|
+
</zn-data-table>
|
|
55
|
+
</zn-panel>
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
### Lots of Data
|
|
59
|
+
|
|
60
|
+
```html:preview
|
|
61
|
+
|
|
62
|
+
<zn-data-table
|
|
63
|
+
standalone
|
|
64
|
+
data="{"data":[{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"Visa","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}},{"caption":{"caption":{"title":"4111********1111","summary":"LudwigOrtiz","uri":"*","target":"slide"}},"duplicate":"","type":"CreditCard","scheme":"V+","pfp":"A0D476-58OIGH","last4":"1111","expiry":"2025-12-01","issuer":"CONOTOXIASP.ZO.O","transactions":"4\/0","actions":{"buttons":[{"tooltip":"Make Default","color":"star","size":"small","icon":"star","iconSize":"16"},{"id":"delete-method","tooltip":"Archive","href":"*","target":"slide","color":"error","size":"small","icon":"close","iconSize":"16","outline":true}]}}]}"
|
|
65
|
+
headers="{"caption":"Name","duplicate":"Duplicate","type":"Type","scheme":"Scheme","pfp":"Fingerprint","last4":"Last 4","expiry":"Expiry","issuer":"Issuer","transactions":"Transactions","actions":""}">
|
|
66
|
+
|
|
67
|
+
<zn-data-table-sort slot="sort"></zn-data-table-sort>
|
|
68
|
+
|
|
69
|
+
<zn-data-table-filter
|
|
70
|
+
slot="filter"
|
|
71
|
+
filters="[{"id":"title","name":"Title","operators":["eq"]},{"id":"author","name":"Author","operators":["eq","fuzzy"]},{"id":"genre","name":"Genre","options":{"action":"Action","comedy":"Comedy","drama":"Drama","fantasy":"Fantasy","horror":"Horror","mystery":"Mystery","romance":"Romance","thriller":"Thriller","sci-fi":"ScienceFiction"},"maxOptionsVisible":"3","operators":["eq","in"]},{"id":"rating","name":"Rating","type":"number","operators":["eq","gt","gte","lt","lte"]},{"id":"created","name":"Created","type":"date","operators":["eq","before","after"]}]">
|
|
72
|
+
</zn-data-table-filter>
|
|
73
|
+
</zn-data-table>
|
|
74
|
+
```
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Datepicker
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
```html:preview
|
|
9
|
+
<zn-datepicker></zn-datepicker>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Examples
|
|
13
|
+
|
|
14
|
+
### Range
|
|
15
|
+
|
|
16
|
+
```html:preview
|
|
17
|
+
<zn-datepicker range></zn-datepicker>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Second Example
|
|
22
|
+
|
|
23
|
+
TODO
|
|
24
|
+
|
|
25
|
+
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Defined Label
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
```html:preview
|
|
9
|
+
|
|
10
|
+
<zn-defined-label
|
|
11
|
+
allow-custom
|
|
12
|
+
predefined-labels="[{"name":"asc2","options":[]},{"name":"one","options":[]},{"name":"outbound","options":[]},{"name":"two","options":[]},{"name":"another","options":["one","two","three"]},{"name":"awesome","options":["one","two","three","four"]}]">
|
|
13
|
+
</zn-defined-label>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Examples
|
|
17
|
+
|
|
18
|
+
### First Example
|
|
19
|
+
|
|
20
|
+
TODO
|
|
21
|
+
|
|
22
|
+
### Second Example
|
|
23
|
+
|
|
24
|
+
TODO
|
|
25
|
+
|
|
26
|
+
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Dialog
|
|
4
|
+
description: 'Dialogs, also called "modals", appear above the page and require the users immediate attention.'
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Examples
|
|
9
|
+
|
|
10
|
+
### Basic Dialog
|
|
11
|
+
|
|
12
|
+
This is a basic dialog. It has a trigger button that opens the dialog. The dialog has a close button and two buttons in
|
|
13
|
+
the footer.
|
|
14
|
+
|
|
15
|
+
```html:preview
|
|
16
|
+
|
|
17
|
+
<zn-button id="dialog-trigger">Open Basic dialog</zn-button>
|
|
18
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog">
|
|
19
|
+
This is the dialog’s body.
|
|
20
|
+
|
|
21
|
+
<zn-button color="default" slot="footer">Do Something</zn-button>
|
|
22
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
23
|
+
</zn-dialog>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Dialog Variants
|
|
27
|
+
|
|
28
|
+
Use the header-icon slot to display an sl-icon to the left of the dialog header (label).
|
|
29
|
+
|
|
30
|
+
Use this pattern for confirmation dialogs, when asking people to confirm that they want to take an action, and for
|
|
31
|
+
informational dialogs.
|
|
32
|
+
|
|
33
|
+
Set the dialog variant (default or warning) to apply the right color theme to the icon: default for confirmation of
|
|
34
|
+
neutral actions (like submitting a form), and warning for confirmation of destructive actions (like canceling or
|
|
35
|
+
deleting something).
|
|
36
|
+
|
|
37
|
+
```html:preview
|
|
38
|
+
|
|
39
|
+
<zn-button id="dialog-trigger">Open Default Dialog</zn-button>
|
|
40
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog">
|
|
41
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
42
|
+
If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now?
|
|
43
|
+
|
|
44
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
45
|
+
<zn-button color="default" slot="footer" type="submit">Do Something</zn-button>
|
|
46
|
+
</zn-dialog>
|
|
47
|
+
|
|
48
|
+
<zn-button id="dialog-trigger-2">Open Warning Dialog</zn-button>
|
|
49
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger-2" label="Dialog" variant="warning">
|
|
50
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
51
|
+
If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now?
|
|
52
|
+
|
|
53
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
54
|
+
<zn-button color="warning" slot="footer">Do Something</zn-button>
|
|
55
|
+
</zn-dialog>
|
|
56
|
+
|
|
57
|
+
<zn-button id="dialog-trigger-3" color="warning">Open Announcement Dialog</zn-button>
|
|
58
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger-3" label="Meet your new Monthly Numbers dashboard" variant="announcement">
|
|
59
|
+
<div slot="announcement-intro">Welcome!</div>
|
|
60
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
61
|
+
If you need to, you can cancel this request after submitting it. Are you sure you want to submit it now?
|
|
62
|
+
|
|
63
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
64
|
+
<zn-button color="default" slot="footer">Do Something</zn-button>
|
|
65
|
+
<div slot="footer-text"><a href="#">Learn more about Monthly Numbers</a></div>
|
|
66
|
+
</zn-dialog>
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Dialogs as Forms
|
|
70
|
+
|
|
71
|
+
Use dialogs as forms when you need to collect information from users. This example shows a dialog with a form inside it.
|
|
72
|
+
|
|
73
|
+
```html:preview
|
|
74
|
+
|
|
75
|
+
<form method="post" action="#" style="display: inline-block">
|
|
76
|
+
<zn-button id="dialog-trigger">Open Form Dialog</zn-button>
|
|
77
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog" size="large">
|
|
78
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
79
|
+
|
|
80
|
+
<zn-form-group
|
|
81
|
+
label="Profile"
|
|
82
|
+
label-tooltip="huh"
|
|
83
|
+
help-text="This information will be displayed publicly so be careful what you share">
|
|
84
|
+
|
|
85
|
+
<div class="form-spacing">
|
|
86
|
+
<zn-input type="text" name="name" label="Name" required></zn-input>
|
|
87
|
+
<zn-select label="Favorite Animal" clearable required>
|
|
88
|
+
<zn-option value="birds">Birds</zn-option>
|
|
89
|
+
<zn-option value="cats">Cats</zn-option>
|
|
90
|
+
<zn-option value="dogs">Dogs</zn-option>
|
|
91
|
+
<zn-option value="other">Other</zn-option>
|
|
92
|
+
</zn-select>
|
|
93
|
+
|
|
94
|
+
<zn-textarea name="comment" label="Comment" required></zn-textarea>
|
|
95
|
+
|
|
96
|
+
<zn-checkbox required>Check me before submitting</zn-checkbox>
|
|
97
|
+
|
|
98
|
+
<br>
|
|
99
|
+
<zn-checkbox-group label="Checkbox group" help-text="Select at least one" label-tooltip="Do you need help?"
|
|
100
|
+
required>
|
|
101
|
+
<zn-checkbox value="I'm option 1">Option 1</zn-checkbox>
|
|
102
|
+
<zn-checkbox value="I'm option 2">Option 2</zn-checkbox>
|
|
103
|
+
<zn-checkbox value="I'm option 3">Option 3</zn-checkbox>
|
|
104
|
+
</zn-checkbox-group>
|
|
105
|
+
</div>
|
|
106
|
+
</zn-form-group>
|
|
107
|
+
|
|
108
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
109
|
+
<zn-button color="default" slot="footer" type="submit">Submit</zn-button>
|
|
110
|
+
</zn-dialog>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
### Dialog Sizes
|
|
114
|
+
|
|
115
|
+
Dialogs come in three different sizes: `small`, `medium`, and `large`. The default size is `medium`.
|
|
116
|
+
|
|
117
|
+
```html:preview
|
|
118
|
+
|
|
119
|
+
<zn-button id="dialog-trigger">Open Small Dialog</zn-button>
|
|
120
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger" label="Dialog" size="small">
|
|
121
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
122
|
+
This is a small dialog.
|
|
123
|
+
|
|
124
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
125
|
+
<zn-button color="default" slot="footer">Do Something</zn-button>
|
|
126
|
+
</zn-dialog>
|
|
127
|
+
|
|
128
|
+
<zn-button id="dialog-trigger-2">Open Medium Dialog</zn-button>
|
|
129
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger-2" label="Dialog">
|
|
130
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
131
|
+
This is a medium dialog.
|
|
132
|
+
|
|
133
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
134
|
+
<zn-button color="default" slot="footer">Do Something</zn-button>
|
|
135
|
+
</zn-dialog>
|
|
136
|
+
|
|
137
|
+
<zn-button id="dialog-trigger-3">Open Large Dialog</zn-button>
|
|
138
|
+
<zn-dialog class="dialog-basic" trigger="dialog-trigger-3" label="Dialog" size="large">
|
|
139
|
+
<zn-icon src="info" slot="header-icon"></zn-icon>
|
|
140
|
+
This is a large dialog.
|
|
141
|
+
|
|
142
|
+
<zn-button color="secondary" slot="footer" dialog-closer>Close Dialog</zn-button>
|
|
143
|
+
<zn-button color="default" slot="footer">Do Something</zn-button>
|
|
144
|
+
</zn-dialog>
|
|
145
|
+
```
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Editor
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
```html:preview
|
|
9
|
+
|
|
10
|
+
<zn-editor style="height: 400px"
|
|
11
|
+
canned-responses="[{"title": "Example With Data","content": "Hi \n\nThis is a message from Kyle Essex to test data. \n\n\nFrom ","labels": ["test"],"command": "example-with-data"},{"title": "Example With Data","content": "Hi \n\nThis is a message from Kyle Essex to test data. \n\n\nFrom ","labels": ["test"],"command": "example-with-data"},{"title": "Styled Response","content": "<p>It's for chat,</p>\n\n<p>Try not to use any specific styling</p>\n","labels": ["styled, test"],"command": "styled-response"}]">
|
|
12
|
+
|
|
13
|
+
</zn-editor>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
## Examples
|
|
17
|
+
|
|
18
|
+
### First Example
|
|
19
|
+
|
|
20
|
+
TODO
|
|
21
|
+
|
|
22
|
+
### Second Example
|
|
23
|
+
|
|
24
|
+
TODO
|
|
25
|
+
|
|
26
|
+
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Empty State
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
```html:preview
|
|
9
|
+
<zn-empty-state
|
|
10
|
+
caption="The Caption"
|
|
11
|
+
description="The Description"
|
|
12
|
+
type="primary"
|
|
13
|
+
icon="check">
|
|
14
|
+
</zn-empty-state>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Examples
|
|
18
|
+
|
|
19
|
+
### With Buttons
|
|
20
|
+
|
|
21
|
+
```html:preview
|
|
22
|
+
|
|
23
|
+
<zn-empty-state
|
|
24
|
+
caption="The Caption"
|
|
25
|
+
description="The Description"
|
|
26
|
+
icon="check">
|
|
27
|
+
<zn-button-group>
|
|
28
|
+
<zn-button>Button 1</zn-button>
|
|
29
|
+
<zn-button>Button 2</zn-button>
|
|
30
|
+
</zn-button-group>
|
|
31
|
+
</zn-empty-state>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Padded
|
|
35
|
+
|
|
36
|
+
```html:preview
|
|
37
|
+
|
|
38
|
+
<zn-empty-state
|
|
39
|
+
padded
|
|
40
|
+
type="primary"
|
|
41
|
+
caption="The Caption"
|
|
42
|
+
description="The Description"
|
|
43
|
+
icon="check">
|
|
44
|
+
<zn-button-group>
|
|
45
|
+
<zn-button>Button 1</zn-button>
|
|
46
|
+
<zn-button>Button 2</zn-button>
|
|
47
|
+
</zn-button-group>
|
|
48
|
+
</zn-empty-state>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: Expanding Action
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
```html:preview
|
|
9
|
+
<zn-expanding-action icon="new_label"
|
|
10
|
+
uri=""
|
|
11
|
+
method="fill"
|
|
12
|
+
count-uri=""
|
|
13
|
+
prefetch>
|
|
14
|
+
This is the content here, this will probably be loaded from one of the URIs.
|
|
15
|
+
if count uri is set, use that to retrieve the number to display as a notification
|
|
16
|
+
if prefetch is set, we need to lod the uri which should have the count with it.
|
|
17
|
+
</zn-expanding-action>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Multiple Examples
|
|
21
|
+
|
|
22
|
+
```html:preview
|
|
23
|
+
<zn-expanding-action icon="edit_note"
|
|
24
|
+
method="fill"
|
|
25
|
+
count-uri="/note/count"
|
|
26
|
+
slot="actions"
|
|
27
|
+
prefetch>
|
|
28
|
+
Hello there
|
|
29
|
+
</zn-expanding-action>
|
|
30
|
+
|
|
31
|
+
<zn-expanding-action icon="new_label"
|
|
32
|
+
content-uri="/test"
|
|
33
|
+
method="drop"
|
|
34
|
+
slot="actions">
|
|
35
|
+
<p>This is the content here, this will probably be loaded from one of the URIs.</p>
|
|
36
|
+
<p>if count uri is set, use that to retrieve the number to display as a notification
|
|
37
|
+
if prefetch is set, we need to lod the uri which should have the count with it.</p>
|
|
38
|
+
</zn-expanding-action>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Header Example
|
|
42
|
+
|
|
43
|
+
```html:preview
|
|
44
|
+
<zn-header caption="Expanding Action Example"
|
|
45
|
+
navigation="[{"path":"#","title":"Dashboard"},{"path":"#","title":"Another"}]">
|
|
46
|
+
<zn-navbar slot="nav">
|
|
47
|
+
<zn-expanding-action icon="new_label" method="fill">
|
|
48
|
+
<zn-defined-label
|
|
49
|
+
allow-custom
|
|
50
|
+
predefined-labels="[{"name":"asc2","options":[]},{"name":"one","options":[]},{"name":"outbound","options":[]},{"name":"two","options":[]},{"name":"another","options":["one","two","three"]},{"name":"awesome","options":["one","two","three","four"]}]">
|
|
51
|
+
</zn-defined-label>
|
|
52
|
+
</zn-expanding-action>
|
|
53
|
+
</zn-navbar>
|
|
54
|
+
</zn-header>
|
|
55
|
+
```
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
---
|
|
2
|
+
meta:
|
|
3
|
+
title: File
|
|
4
|
+
description:
|
|
5
|
+
layout: component
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
```html:preview
|
|
9
|
+
<zn-file multiple clearable></zn-file>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Examples
|
|
13
|
+
|
|
14
|
+
### Label
|
|
15
|
+
|
|
16
|
+
```html:preview
|
|
17
|
+
<zn-file label="File Upload"></zn-file>
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Droparea
|
|
21
|
+
|
|
22
|
+
```html:preview
|
|
23
|
+
<zn-file accept="text/plain,image/*" multiple droparea></zn-file>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
### Help Text
|
|
27
|
+
|
|
28
|
+
```html:preview
|
|
29
|
+
<zn-file help-text="You can drag and drop files here"></zn-file>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Multiple Upload
|
|
33
|
+
|
|
34
|
+
```html:preview
|
|
35
|
+
|
|
36
|
+
<zn-file multiple></zn-file>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Hide Value
|
|
40
|
+
|
|
41
|
+
```html:preview
|
|
42
|
+
|
|
43
|
+
<zn-file hide-value></zn-file>
|
|
44
|
+
```
|
|
45
|
+
|