@public-ui/components 2.2.1 → 3.0.0-alpha.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/custom-elements.json +59 -65
- package/dist/cjs/Alert-f6b0d38e.js +4 -0
- package/dist/cjs/Alert-f6b0d38e.js.map +1 -0
- package/dist/cjs/Collapsible-4e60c250.js +4 -0
- package/dist/cjs/Collapsible-4e60c250.js.map +1 -0
- package/dist/cjs/FormFieldMsg-f9c66f2b.js +4 -0
- package/dist/cjs/{FormFieldMsg-a6239e8f.js.map → FormFieldMsg-f9c66f2b.js.map} +1 -1
- package/dist/cjs/Heading-862fa562.js +4 -0
- package/dist/cjs/Heading-862fa562.js.map +1 -0
- package/dist/cjs/InternalUnderlinedBadgeText-1c6598a7.js +4 -0
- package/dist/cjs/InternalUnderlinedBadgeText-1c6598a7.js.map +1 -0
- package/dist/cjs/Span-95000179.js +4 -0
- package/dist/{esm/kol-span-wc.entry.js.map → cjs/Span-95000179.js.map} +1 -1
- package/dist/cjs/{app-globals-ccb0de79.js → app-globals-cbed5be9.js} +1 -1
- package/dist/cjs/{app-globals-ccb0de79.js.map → app-globals-cbed5be9.js.map} +1 -1
- package/dist/cjs/component-names-7808fb62.js +4 -0
- package/dist/cjs/component-names-7808fb62.js.map +1 -0
- package/dist/cjs/{controller-f5179b00.js → controller-2cf5be5c.js} +1 -1
- package/dist/cjs/{controller-f5179b00.js.map → controller-2cf5be5c.js.map} +1 -1
- package/dist/cjs/{controller-fc146c36.js → controller-3ba0a95f.js} +1 -1
- package/dist/cjs/{controller-fc146c36.js.map → controller-3ba0a95f.js.map} +1 -1
- package/dist/cjs/{controller-2355b966.js → controller-4ad095de.js} +1 -1
- package/dist/cjs/{controller-2355b966.js.map → controller-4ad095de.js.map} +1 -1
- package/dist/cjs/{controller-bf4ff6cd.js → controller-59d57d18.js} +1 -1
- package/dist/cjs/{controller-bf4ff6cd.js.map → controller-59d57d18.js.map} +1 -1
- package/dist/cjs/{controller-3fc3acb5.js → controller-c08f0c47.js} +1 -1
- package/dist/cjs/{controller-3fc3acb5.js.map → controller-c08f0c47.js.map} +1 -1
- package/dist/cjs/{controller-icon-2b593d47.js → controller-icon-0a07b9d4.js} +1 -1
- package/dist/cjs/{controller-icon-2b593d47.js.map → controller-icon-0a07b9d4.js.map} +1 -1
- package/dist/cjs/{dev.utils-3c6636ce.js → dev.utils-91b818ef.js} +1 -1
- package/dist/cjs/{dev.utils-3c6636ce.js.map → dev.utils-91b818ef.js.map} +1 -1
- package/dist/cjs/{devtools-ba424ee7.js → devtools-189e17b0.js} +1 -1
- package/dist/cjs/{devtools-ba424ee7.js.map → devtools-189e17b0.js.map} +1 -1
- package/dist/cjs/index-80062b8e.js +4 -0
- package/dist/cjs/index-80062b8e.js.map +1 -0
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/kol-abbr.cjs.entry.js +1 -1
- package/dist/cjs/kol-abbr.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-accordion.cjs.entry.js +1 -1
- package/dist/cjs/kol-accordion.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-alert-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-alert-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-alert.cjs.entry.js +1 -1
- package/dist/cjs/kol-alert.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-avatar-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-avatar-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-avatar.cjs.entry.js +1 -1
- package/dist/cjs/kol-avatar.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-badge.cjs.entry.js +1 -1
- package/dist/cjs/kol-badge.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-breadcrumb.cjs.entry.js +1 -1
- package/dist/cjs/kol-breadcrumb.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button-group-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-group.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-link.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-button-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-card.cjs.entry.js +1 -1
- package/dist/cjs/kol-card.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-combobox.cjs.entry.js +1 -1
- package/dist/cjs/kol-combobox.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-details.cjs.entry.js +1 -1
- package/dist/cjs/kol-details.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-drawer.cjs.entry.js +1 -1
- package/dist/cjs/kol-form.cjs.entry.js +1 -1
- package/dist/cjs/kol-form.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-heading.cjs.entry.js +1 -1
- package/dist/cjs/kol-heading.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-icon.cjs.entry.js +1 -1
- package/dist/cjs/kol-image.cjs.entry.js +1 -1
- package/dist/cjs/kol-indented-text-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-indented-text.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-checkbox.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-color.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-color.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-date.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-date.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-email.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-email.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-file.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-file.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-number.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-number.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-password.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-password.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-radio.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-radio.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-range.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-range.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input-text.cjs.entry.js +1 -1
- package/dist/cjs/kol-input-text.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-input.cjs.entry.js +1 -1
- package/dist/cjs/kol-input.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-kolibri.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-group.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-link-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-link.cjs.entry.js +1 -1
- package/dist/cjs/kol-logo.cjs.entry.js +1 -1
- package/dist/cjs/kol-modal.cjs.entry.js +1 -1
- package/dist/cjs/kol-nav.cjs.entry.js +1 -1
- package/dist/cjs/kol-pagination.cjs.entry.js +1 -1
- package/dist/cjs/kol-popover-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-progress.cjs.entry.js +1 -1
- package/dist/cjs/kol-quote.cjs.entry.js +1 -1
- package/dist/cjs/kol-select.cjs.entry.js +1 -1
- package/dist/cjs/kol-select.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-single-select.cjs.entry.js +1 -1
- package/dist/cjs/kol-single-select.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-skip-nav.cjs.entry.js +1 -1
- package/dist/cjs/kol-spin.cjs.entry.js +1 -1
- package/dist/cjs/kol-split-button.cjs.entry.js +1 -1
- package/dist/cjs/kol-symbol.cjs.entry.js +1 -1
- package/dist/cjs/kol-table-stateful.cjs.entry.js +1 -1
- package/dist/cjs/kol-table-stateless-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-table-stateless.cjs.entry.js +1 -1
- package/dist/cjs/kol-table.cjs.entry.js +1 -1
- package/dist/cjs/kol-tabs.cjs.entry.js +1 -1
- package/dist/cjs/kol-textarea.cjs.entry.js +1 -1
- package/dist/cjs/kol-textarea.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-toast-container.cjs.entry.js +1 -1
- package/dist/cjs/kol-toast-container.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-toolbar.cjs.entry.js +1 -1
- package/dist/cjs/kol-tooltip-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-tooltip-wc.cjs.entry.js.map +1 -1
- package/dist/cjs/kol-tree-item-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-tree-item.cjs.entry.js +1 -1
- package/dist/cjs/kol-tree-wc.cjs.entry.js +1 -1
- package/dist/cjs/kol-tree.cjs.entry.js +1 -1
- package/dist/cjs/kol-version.cjs.entry.js +1 -1
- package/dist/cjs/kolibri.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/test-component.cjs.entry.js +1 -1
- package/dist/components/Alert.js +1 -1
- package/dist/components/Alert.js.map +1 -1
- package/dist/components/Collapsible.js +1 -1
- package/dist/components/Collapsible.js.map +1 -1
- package/dist/components/Heading.js +4 -0
- package/dist/components/Heading.js.map +1 -0
- package/dist/components/InternalUnderlinedBadgeText.js +1 -1
- package/dist/components/InternalUnderlinedBadgeText.js.map +1 -1
- package/dist/components/Span.js +4 -0
- package/dist/components/Span.js.map +1 -0
- package/dist/components/component-names.js +1 -1
- package/dist/components/component-names.js.map +1 -1
- package/dist/components/controller.js +1 -1
- package/dist/components/kol-abbr.js +1 -1
- package/dist/components/kol-abbr.js.map +1 -1
- package/dist/components/kol-accordion.js +1 -1
- package/dist/components/kol-accordion.js.map +1 -1
- package/dist/components/kol-alert-wc.js +1 -1
- package/dist/components/kol-alert-wc.js.map +1 -1
- package/dist/components/kol-alert.js +1 -1
- package/dist/components/kol-alert.js.map +1 -1
- package/dist/components/kol-avatar-wc.js +1 -1
- package/dist/components/kol-avatar-wc.js.map +1 -1
- package/dist/components/kol-avatar.js +1 -1
- package/dist/components/kol-avatar.js.map +1 -1
- package/dist/components/kol-badge.js +1 -1
- package/dist/components/kol-badge.js.map +1 -1
- package/dist/components/kol-breadcrumb.js +1 -1
- package/dist/components/kol-breadcrumb.js.map +1 -1
- package/dist/components/kol-button-group-wc.js +1 -1
- package/dist/components/kol-button-group.js +1 -1
- package/dist/components/kol-button-link.js +1 -1
- package/dist/components/kol-button-wc.js +1 -1
- package/dist/components/kol-button-wc.js.map +1 -1
- package/dist/components/kol-button.js +1 -1
- package/dist/components/kol-card.js +1 -1
- package/dist/components/kol-card.js.map +1 -1
- package/dist/components/kol-combobox.js +1 -1
- package/dist/components/kol-combobox.js.map +1 -1
- package/dist/components/kol-details.js +1 -1
- package/dist/components/kol-drawer.js +1 -1
- package/dist/components/kol-form.js +1 -1
- package/dist/components/kol-form.js.map +1 -1
- package/dist/components/kol-heading.js +1 -1
- package/dist/components/kol-heading.js.map +1 -1
- package/dist/components/kol-icon.js +1 -1
- package/dist/components/kol-image.js +1 -1
- package/dist/components/kol-indented-text-wc.js +1 -1
- package/dist/components/kol-indented-text.js +1 -1
- package/dist/components/kol-input-checkbox.js +1 -1
- package/dist/components/kol-input-checkbox.js.map +1 -1
- package/dist/components/kol-input-color.js +1 -1
- package/dist/components/kol-input-color.js.map +1 -1
- package/dist/components/kol-input-date.js +1 -1
- package/dist/components/kol-input-date.js.map +1 -1
- package/dist/components/kol-input-email.js +1 -1
- package/dist/components/kol-input-email.js.map +1 -1
- package/dist/components/kol-input-file.js +1 -1
- package/dist/components/kol-input-file.js.map +1 -1
- package/dist/components/kol-input-number.js +1 -1
- package/dist/components/kol-input-number.js.map +1 -1
- package/dist/components/kol-input-password.js +1 -1
- package/dist/components/kol-input-password.js.map +1 -1
- package/dist/components/kol-input-radio.js +1 -1
- package/dist/components/kol-input-radio.js.map +1 -1
- package/dist/components/kol-input-range.js +1 -1
- package/dist/components/kol-input-range.js.map +1 -1
- package/dist/components/kol-input-text.js +1 -1
- package/dist/components/kol-input-text.js.map +1 -1
- package/dist/components/kol-input.js +1 -1
- package/dist/components/kol-kolibri.js +1 -1
- package/dist/components/kol-link-button.js +1 -1
- package/dist/components/kol-link-group.js +1 -1
- package/dist/components/kol-link-wc.js +1 -1
- package/dist/components/kol-link-wc.js.map +1 -1
- package/dist/components/kol-link.js +1 -1
- package/dist/components/kol-logo.js +1 -1
- package/dist/components/kol-modal.js +1 -1
- package/dist/components/kol-nav.js +1 -1
- package/dist/components/kol-pagination.js +1 -1
- package/dist/components/kol-popover-wc.js +1 -1
- package/dist/components/kol-progress.js +1 -1
- package/dist/components/kol-quote.js +1 -1
- package/dist/components/kol-select.js +1 -1
- package/dist/components/kol-select.js.map +1 -1
- package/dist/components/kol-single-select.js +1 -1
- package/dist/components/kol-single-select.js.map +1 -1
- package/dist/components/kol-skip-nav.js +1 -1
- package/dist/components/kol-spin.js +1 -1
- package/dist/components/kol-split-button.js +1 -1
- package/dist/components/kol-symbol.js +1 -1
- package/dist/components/kol-table-stateful.js +1 -1
- package/dist/components/kol-table-stateless-wc.js +1 -1
- package/dist/components/kol-table-stateless.js +1 -1
- package/dist/components/kol-table.js +1 -1
- package/dist/components/kol-tabs.js +1 -1
- package/dist/components/kol-textarea.js +1 -1
- package/dist/components/kol-textarea.js.map +1 -1
- package/dist/components/kol-toast-container.js +1 -1
- package/dist/components/kol-toast-container.js.map +1 -1
- package/dist/components/kol-toolbar.js +1 -1
- package/dist/components/kol-tooltip-wc.js +1 -1
- package/dist/components/kol-tooltip-wc.js.map +1 -1
- package/dist/components/kol-tree-item-wc.js +1 -1
- package/dist/components/kol-tree-item.js +1 -1
- package/dist/components/kol-tree-wc.js +1 -1
- package/dist/components/kol-tree.js +1 -1
- package/dist/components/kol-version.js +1 -1
- package/dist/esm/Alert-1b318619.js +4 -0
- package/dist/esm/Alert-1b318619.js.map +1 -0
- package/dist/esm/Collapsible-53867075.js +4 -0
- package/dist/esm/Collapsible-53867075.js.map +1 -0
- package/dist/esm/FormFieldMsg-6843c725.js +4 -0
- package/dist/esm/{FormFieldMsg-ffa58506.js.map → FormFieldMsg-6843c725.js.map} +1 -1
- package/dist/esm/Heading-1fe830dd.js +4 -0
- package/dist/esm/Heading-1fe830dd.js.map +1 -0
- package/dist/esm/InternalUnderlinedBadgeText-8f2a64b6.js +4 -0
- package/dist/esm/InternalUnderlinedBadgeText-8f2a64b6.js.map +1 -0
- package/dist/esm/Span-7f84ad00.js +4 -0
- package/dist/esm/Span-7f84ad00.js.map +1 -0
- package/dist/esm/{align-e29ed804.js → align-3f029493.js} +1 -1
- package/dist/esm/{align-e29ed804.js.map → align-3f029493.js.map} +1 -1
- package/dist/esm/{app-globals-ccc036b6.js → app-globals-ebbcf310.js} +1 -1
- package/dist/esm/{app-globals-ccc036b6.js.map → app-globals-ebbcf310.js.map} +1 -1
- package/dist/esm/{common-0f1f2276.js → common-54bf85ba.js} +1 -1
- package/dist/esm/{common-0f1f2276.js.map → common-54bf85ba.js.map} +1 -1
- package/dist/esm/component-names-aa3cbc3c.js +4 -0
- package/dist/esm/component-names-aa3cbc3c.js.map +1 -0
- package/dist/esm/{controller-d1097e06.js → controller-1739038d.js} +1 -1
- package/dist/esm/{controller-d1097e06.js.map → controller-1739038d.js.map} +1 -1
- package/dist/esm/{controller-dacdb561.js → controller-506a6c81.js} +1 -1
- package/dist/esm/{controller-dacdb561.js.map → controller-506a6c81.js.map} +1 -1
- package/dist/esm/{controller-96fe2d26.js → controller-64301c42.js} +1 -1
- package/dist/esm/{controller-96fe2d26.js.map → controller-64301c42.js.map} +1 -1
- package/dist/esm/{controller-ff17d912.js → controller-68fd9cd8.js} +1 -1
- package/dist/esm/{controller-ff17d912.js.map → controller-68fd9cd8.js.map} +1 -1
- package/dist/esm/{controller-172fcdb6.js → controller-6c2714a5.js} +1 -1
- package/dist/esm/{controller-172fcdb6.js.map → controller-6c2714a5.js.map} +1 -1
- package/dist/esm/{controller-icon-29af0ac7.js → controller-icon-e20e2d63.js} +1 -1
- package/dist/esm/{controller-icon-29af0ac7.js.map → controller-icon-e20e2d63.js.map} +1 -1
- package/dist/esm/{dev.utils-514126fc.js → dev.utils-8fad8415.js} +1 -1
- package/dist/esm/{dev.utils-514126fc.js.map → dev.utils-8fad8415.js.map} +1 -1
- package/dist/esm/{devtools-aa4f8f79.js → devtools-a0824082.js} +1 -1
- package/dist/esm/{devtools-aa4f8f79.js.map → devtools-a0824082.js.map} +1 -1
- package/dist/esm/{events-e483577f.js → events-3111c1e8.js} +1 -1
- package/dist/esm/{events-e483577f.js.map → events-3111c1e8.js.map} +1 -1
- package/dist/esm/{icons-4c339a19.js → icons-f3b7aabd.js} +1 -1
- package/dist/esm/{icons-4c339a19.js.map → icons-f3b7aabd.js.map} +1 -1
- package/dist/esm/index-a49af574.js +4 -0
- package/dist/esm/index-a49af574.js.map +1 -0
- package/dist/esm/index.js +1 -1
- package/dist/esm/kol-abbr.entry.js +1 -1
- package/dist/esm/kol-abbr.entry.js.map +1 -1
- package/dist/esm/kol-accordion.entry.js +1 -1
- package/dist/esm/kol-accordion.entry.js.map +1 -1
- package/dist/esm/kol-alert-wc.entry.js +1 -1
- package/dist/esm/kol-alert-wc.entry.js.map +1 -1
- package/dist/esm/kol-alert.entry.js +1 -1
- package/dist/esm/kol-alert.entry.js.map +1 -1
- package/dist/esm/kol-avatar-wc.entry.js +1 -1
- package/dist/esm/kol-avatar-wc.entry.js.map +1 -1
- package/dist/esm/kol-avatar.entry.js +1 -1
- package/dist/esm/kol-avatar.entry.js.map +1 -1
- package/dist/esm/kol-badge.entry.js +1 -1
- package/dist/esm/kol-badge.entry.js.map +1 -1
- package/dist/esm/kol-breadcrumb.entry.js +1 -1
- package/dist/esm/kol-breadcrumb.entry.js.map +1 -1
- package/dist/esm/kol-button-group-wc.entry.js +1 -1
- package/dist/esm/kol-button-group.entry.js +1 -1
- package/dist/esm/kol-button-link.entry.js +1 -1
- package/dist/esm/kol-button-wc.entry.js +1 -1
- package/dist/esm/kol-button-wc.entry.js.map +1 -1
- package/dist/esm/kol-button.entry.js +1 -1
- package/dist/esm/kol-card.entry.js +1 -1
- package/dist/esm/kol-card.entry.js.map +1 -1
- package/dist/esm/kol-combobox.entry.js +1 -1
- package/dist/esm/kol-combobox.entry.js.map +1 -1
- package/dist/esm/kol-details.entry.js +1 -1
- package/dist/esm/kol-details.entry.js.map +1 -1
- package/dist/esm/kol-drawer.entry.js +1 -1
- package/dist/esm/kol-form.entry.js +1 -1
- package/dist/esm/kol-form.entry.js.map +1 -1
- package/dist/esm/kol-heading.entry.js +1 -1
- package/dist/esm/kol-heading.entry.js.map +1 -1
- package/dist/esm/kol-icon.entry.js +1 -1
- package/dist/esm/kol-image.entry.js +1 -1
- package/dist/esm/kol-indented-text-wc.entry.js +1 -1
- package/dist/esm/kol-indented-text.entry.js +1 -1
- package/dist/esm/kol-input-checkbox.entry.js +1 -1
- package/dist/esm/kol-input-checkbox.entry.js.map +1 -1
- package/dist/esm/kol-input-color.entry.js +1 -1
- package/dist/esm/kol-input-color.entry.js.map +1 -1
- package/dist/esm/kol-input-date.entry.js +1 -1
- package/dist/esm/kol-input-date.entry.js.map +1 -1
- package/dist/esm/kol-input-email.entry.js +1 -1
- package/dist/esm/kol-input-email.entry.js.map +1 -1
- package/dist/esm/kol-input-file.entry.js +1 -1
- package/dist/esm/kol-input-file.entry.js.map +1 -1
- package/dist/esm/kol-input-number.entry.js +1 -1
- package/dist/esm/kol-input-number.entry.js.map +1 -1
- package/dist/esm/kol-input-password.entry.js +1 -1
- package/dist/esm/kol-input-password.entry.js.map +1 -1
- package/dist/esm/kol-input-radio.entry.js +1 -1
- package/dist/esm/kol-input-radio.entry.js.map +1 -1
- package/dist/esm/kol-input-range.entry.js +1 -1
- package/dist/esm/kol-input-range.entry.js.map +1 -1
- package/dist/esm/kol-input-text.entry.js +1 -1
- package/dist/esm/kol-input-text.entry.js.map +1 -1
- package/dist/esm/kol-input.entry.js +1 -1
- package/dist/esm/kol-input.entry.js.map +1 -1
- package/dist/esm/kol-kolibri.entry.js +1 -1
- package/dist/esm/kol-link-button.entry.js +1 -1
- package/dist/esm/kol-link-group.entry.js +1 -1
- package/dist/esm/kol-link-wc.entry.js +1 -1
- package/dist/esm/kol-link-wc.entry.js.map +1 -1
- package/dist/esm/kol-link.entry.js +1 -1
- package/dist/esm/kol-logo.entry.js +1 -1
- package/dist/esm/kol-modal.entry.js +1 -1
- package/dist/esm/kol-nav.entry.js +1 -1
- package/dist/esm/kol-pagination.entry.js +1 -1
- package/dist/esm/kol-popover-wc.entry.js +1 -1
- package/dist/esm/kol-progress.entry.js +1 -1
- package/dist/esm/kol-quote.entry.js +1 -1
- package/dist/esm/kol-select.entry.js +1 -1
- package/dist/esm/kol-select.entry.js.map +1 -1
- package/dist/esm/kol-single-select.entry.js +1 -1
- package/dist/esm/kol-single-select.entry.js.map +1 -1
- package/dist/esm/kol-skip-nav.entry.js +1 -1
- package/dist/esm/kol-spin.entry.js +1 -1
- package/dist/esm/kol-split-button.entry.js +1 -1
- package/dist/esm/kol-symbol.entry.js +1 -1
- package/dist/esm/kol-table-stateful.entry.js +1 -1
- package/dist/esm/kol-table-stateless-wc.entry.js +1 -1
- package/dist/esm/kol-table-stateless.entry.js +1 -1
- package/dist/esm/kol-table.entry.js +1 -1
- package/dist/esm/kol-tabs.entry.js +1 -1
- package/dist/esm/kol-textarea.entry.js +1 -1
- package/dist/esm/kol-textarea.entry.js.map +1 -1
- package/dist/esm/kol-toast-container.entry.js +1 -1
- package/dist/esm/kol-toast-container.entry.js.map +1 -1
- package/dist/esm/kol-toolbar.entry.js +1 -1
- package/dist/esm/kol-tooltip-wc.entry.js +1 -1
- package/dist/esm/kol-tooltip-wc.entry.js.map +1 -1
- package/dist/esm/kol-tree-item-wc.entry.js +1 -1
- package/dist/esm/kol-tree-item.entry.js +1 -1
- package/dist/esm/kol-tree-wc.entry.js +1 -1
- package/dist/esm/kol-tree.entry.js +1 -1
- package/dist/esm/kol-version.entry.js +1 -1
- package/dist/esm/kolibri.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/test-component.entry.js +1 -1
- package/dist/esm/{tooltip-align-6b648461.js → tooltip-align-c001aae2.js} +1 -1
- package/dist/esm/{tooltip-align-6b648461.js.map → tooltip-align-c001aae2.js.map} +1 -1
- package/dist/kolibri/Alert-1b318619.js +4 -0
- package/dist/kolibri/Alert-1b318619.js.map +1 -0
- package/dist/kolibri/Collapsible-53867075.js +4 -0
- package/dist/kolibri/Collapsible-53867075.js.map +1 -0
- package/dist/kolibri/FormFieldMsg-6843c725.js +4 -0
- package/dist/kolibri/Heading-1fe830dd.js +4 -0
- package/dist/kolibri/Heading-1fe830dd.js.map +1 -0
- package/dist/kolibri/InternalUnderlinedBadgeText-8f2a64b6.js +4 -0
- package/dist/kolibri/InternalUnderlinedBadgeText-8f2a64b6.js.map +1 -0
- package/dist/kolibri/Span-7f84ad00.js +4 -0
- package/dist/kolibri/Span-7f84ad00.js.map +1 -0
- package/dist/kolibri/{align-e29ed804.js → align-3f029493.js} +1 -1
- package/dist/kolibri/{app-globals-ccc036b6.js → app-globals-ebbcf310.js} +1 -1
- package/dist/kolibri/{common-0f1f2276.js → common-54bf85ba.js} +1 -1
- package/dist/kolibri/component-names-aa3cbc3c.js +4 -0
- package/dist/kolibri/component-names-aa3cbc3c.js.map +1 -0
- package/dist/kolibri/{controller-d1097e06.js → controller-1739038d.js} +1 -1
- package/dist/kolibri/{controller-dacdb561.js → controller-506a6c81.js} +1 -1
- package/dist/kolibri/controller-64301c42.js +4 -0
- package/dist/kolibri/{controller-96fe2d26.js.map → controller-64301c42.js.map} +1 -1
- package/dist/kolibri/{controller-ff17d912.js → controller-68fd9cd8.js} +1 -1
- package/dist/kolibri/{controller-172fcdb6.js → controller-6c2714a5.js} +1 -1
- package/dist/kolibri/controller-icon-e20e2d63.js +4 -0
- package/dist/kolibri/{dev.utils-514126fc.js → dev.utils-8fad8415.js} +1 -1
- package/dist/kolibri/{devtools-aa4f8f79.js → devtools-a0824082.js} +1 -1
- package/dist/kolibri/events-3111c1e8.js +4 -0
- package/dist/kolibri/{events-e483577f.js.map → events-3111c1e8.js.map} +1 -1
- package/dist/kolibri/{icons-4c339a19.js → icons-f3b7aabd.js} +1 -1
- package/dist/kolibri/{index-10e4924f.js → index-a49af574.js} +1 -1
- package/dist/kolibri/index-a49af574.js.map +1 -0
- package/dist/kolibri/index.esm.js +1 -1
- package/dist/kolibri/kol-abbr.entry.js +1 -1
- package/dist/kolibri/kol-abbr.entry.js.map +1 -1
- package/dist/kolibri/kol-accordion.entry.js +1 -1
- package/dist/kolibri/kol-accordion.entry.js.map +1 -1
- package/dist/kolibri/kol-alert-wc.entry.js +1 -1
- package/dist/kolibri/kol-alert-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-alert.entry.js +1 -1
- package/dist/kolibri/kol-alert.entry.js.map +1 -1
- package/dist/kolibri/kol-avatar-wc.entry.js +1 -1
- package/dist/kolibri/kol-avatar-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-avatar.entry.js +1 -1
- package/dist/kolibri/kol-avatar.entry.js.map +1 -1
- package/dist/kolibri/kol-badge.entry.js +1 -1
- package/dist/kolibri/kol-badge.entry.js.map +1 -1
- package/dist/kolibri/kol-breadcrumb.entry.js +1 -1
- package/dist/kolibri/kol-breadcrumb.entry.js.map +1 -1
- package/dist/kolibri/kol-button-group-wc.entry.js +1 -1
- package/dist/kolibri/kol-button-group.entry.js +1 -1
- package/dist/kolibri/kol-button-link.entry.js +1 -1
- package/dist/kolibri/kol-button-wc.entry.js +1 -1
- package/dist/kolibri/kol-button-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-button.entry.js +1 -1
- package/dist/kolibri/kol-card.entry.js +1 -1
- package/dist/kolibri/kol-card.entry.js.map +1 -1
- package/dist/kolibri/kol-combobox.entry.js +1 -1
- package/dist/kolibri/kol-combobox.entry.js.map +1 -1
- package/dist/kolibri/kol-details.entry.js +1 -1
- package/dist/kolibri/kol-details.entry.js.map +1 -1
- package/dist/kolibri/kol-drawer.entry.js +1 -1
- package/dist/kolibri/kol-form.entry.js +1 -1
- package/dist/kolibri/kol-form.entry.js.map +1 -1
- package/dist/kolibri/kol-heading.entry.js +1 -1
- package/dist/kolibri/kol-heading.entry.js.map +1 -1
- package/dist/kolibri/kol-icon.entry.js +1 -1
- package/dist/kolibri/kol-image.entry.js +1 -1
- package/dist/kolibri/kol-indented-text-wc.entry.js +1 -1
- package/dist/kolibri/kol-indented-text.entry.js +1 -1
- package/dist/kolibri/kol-input-checkbox.entry.js +1 -1
- package/dist/kolibri/kol-input-checkbox.entry.js.map +1 -1
- package/dist/kolibri/kol-input-color.entry.js +1 -1
- package/dist/kolibri/kol-input-color.entry.js.map +1 -1
- package/dist/kolibri/kol-input-date.entry.js +1 -1
- package/dist/kolibri/kol-input-date.entry.js.map +1 -1
- package/dist/kolibri/kol-input-email.entry.js +1 -1
- package/dist/kolibri/kol-input-email.entry.js.map +1 -1
- package/dist/kolibri/kol-input-file.entry.js +1 -1
- package/dist/kolibri/kol-input-file.entry.js.map +1 -1
- package/dist/kolibri/kol-input-number.entry.js +1 -1
- package/dist/kolibri/kol-input-number.entry.js.map +1 -1
- package/dist/kolibri/kol-input-password.entry.js +1 -1
- package/dist/kolibri/kol-input-password.entry.js.map +1 -1
- package/dist/kolibri/kol-input-radio.entry.js +1 -1
- package/dist/kolibri/kol-input-radio.entry.js.map +1 -1
- package/dist/kolibri/kol-input-range.entry.js +1 -1
- package/dist/kolibri/kol-input-range.entry.js.map +1 -1
- package/dist/kolibri/kol-input-text.entry.js +1 -1
- package/dist/kolibri/kol-input-text.entry.js.map +1 -1
- package/dist/kolibri/kol-input.entry.js +1 -1
- package/dist/kolibri/kol-input.entry.js.map +1 -1
- package/dist/kolibri/kol-kolibri.entry.js +1 -1
- package/dist/kolibri/kol-link-button.entry.js +1 -1
- package/dist/kolibri/kol-link-group.entry.js +1 -1
- package/dist/kolibri/kol-link-wc.entry.js +1 -1
- package/dist/kolibri/kol-link-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-link.entry.js +1 -1
- package/dist/kolibri/kol-logo.entry.js +1 -1
- package/dist/kolibri/kol-modal.entry.js +1 -1
- package/dist/kolibri/kol-nav.entry.js +1 -1
- package/dist/kolibri/kol-pagination.entry.js +1 -1
- package/dist/kolibri/kol-pagination.entry.js.map +1 -1
- package/dist/kolibri/kol-popover-wc.entry.js +1 -1
- package/dist/kolibri/kol-progress.entry.js +1 -1
- package/dist/kolibri/kol-quote.entry.js +1 -1
- package/dist/kolibri/kol-select.entry.js +1 -1
- package/dist/kolibri/kol-select.entry.js.map +1 -1
- package/dist/kolibri/kol-single-select.entry.js +1 -1
- package/dist/kolibri/kol-single-select.entry.js.map +1 -1
- package/dist/kolibri/kol-skip-nav.entry.js +1 -1
- package/dist/kolibri/kol-spin.entry.js +1 -1
- package/dist/kolibri/kol-split-button.entry.js +1 -1
- package/dist/kolibri/kol-split-button.entry.js.map +1 -1
- package/dist/kolibri/kol-symbol.entry.js +1 -1
- package/dist/kolibri/kol-table-stateful.entry.js +1 -1
- package/dist/kolibri/kol-table-stateless-wc.entry.js +1 -1
- package/dist/kolibri/kol-table-stateless.entry.js +1 -1
- package/dist/kolibri/kol-table.entry.js +1 -1
- package/dist/kolibri/kol-tabs.entry.js +1 -1
- package/dist/kolibri/kol-textarea.entry.js +1 -1
- package/dist/kolibri/kol-textarea.entry.js.map +1 -1
- package/dist/kolibri/kol-toast-container.entry.js +1 -1
- package/dist/kolibri/kol-toast-container.entry.js.map +1 -1
- package/dist/kolibri/kol-toolbar.entry.js +1 -1
- package/dist/kolibri/kol-tooltip-wc.entry.js +1 -1
- package/dist/kolibri/kol-tooltip-wc.entry.js.map +1 -1
- package/dist/kolibri/kol-tree-item-wc.entry.js +1 -1
- package/dist/kolibri/kol-tree-item.entry.js +1 -1
- package/dist/kolibri/kol-tree-wc.entry.js +1 -1
- package/dist/kolibri/kol-tree.entry.js +1 -1
- package/dist/kolibri/kol-version.entry.js +1 -1
- package/dist/kolibri/kolibri.esm.js +1 -1
- package/dist/kolibri/kolibri.esm.js.map +1 -1
- package/dist/kolibri/test-component.entry.js +1 -1
- package/dist/kolibri/tooltip-align-c001aae2.js +4 -0
- package/dist/types/components/abbr/shadow.d.ts +2 -5
- package/dist/types/components/badge/shadow.d.ts +1 -0
- package/dist/types/components/card/shadow.d.ts +1 -1
- package/dist/types/components/heading/shadow.d.ts +9 -3
- package/dist/types/components.d.ts +2 -110
- package/dist/types/core/component-names.d.ts +0 -2
- package/dist/types/functional-components/Alert/Alert.d.ts +1 -1
- package/dist/types/functional-components/Collapsible/Collapsible.d.ts +1 -1
- package/dist/types/functional-components/Heading/Heading.d.ts +21 -0
- package/dist/types/functional-components/Heading/index.d.ts +1 -0
- package/dist/types/functional-components/Heading/test/Heading.test.d.ts +1 -0
- package/dist/types/functional-components/Heading/test/snapshot.test.d.ts +1 -0
- package/dist/types/functional-components/Icon/Icon.d.ts +11 -0
- package/dist/types/functional-components/Icon/index.d.ts +1 -0
- package/dist/types/functional-components/InternalUnderlinedBadgeText/InternalUnderlinedBadgeText.d.ts +8 -0
- package/dist/types/functional-components/InternalUnderlinedBadgeText/index.d.ts +1 -0
- package/dist/types/functional-components/Span/IconHelper.d.ts +6 -0
- package/dist/types/functional-components/Span/LabelHelper.d.ts +9 -0
- package/dist/types/functional-components/Span/Span.d.ts +12 -0
- package/dist/types/functional-components/Span/SpanCoreHelper.d.ts +9 -0
- package/dist/types/functional-components/Span/index.d.ts +1 -0
- package/dist/types/functional-components/Span/test/snapshot.test.d.ts +1 -0
- package/dist/types/functional-components/ToastItem/ToastItem.d.ts +10 -0
- package/dist/types/functional-components/ToastItem/index.d.ts +1 -0
- package/dist/types/functional-components/ToastItem/tests/snapshot.test.d.ts +1 -0
- package/dist/types/functional-components/index.d.ts +1 -1
- package/dist/types/schema/components/abbr.d.ts +3 -3
- package/dist/types/schema/components/badge.d.ts +5 -3
- package/dist/types/schema/components/icon.d.ts +1 -0
- package/dist/types/schema/components/textarea.d.ts +1 -1
- package/dist/types/schema/types/icons.d.ts +1 -1
- package/doc/abbr.md +7 -48
- package/doc/accordion.md +1 -108
- package/doc/alert.md +1 -85
- package/doc/avatar.md +1 -45
- package/doc/badge.md +1 -96
- package/doc/breadcrumb.md +1 -84
- package/doc/button-group.md +1 -89
- package/doc/button-link.md +1 -48
- package/doc/button.md +1 -117
- package/doc/card.md +1 -65
- package/doc/combobox.md +1 -50
- package/doc/details.md +1 -89
- package/doc/drawer.md +1 -126
- package/doc/form.md +1 -21
- package/doc/heading.md +5 -38
- package/doc/icon.md +1 -43
- package/doc/image.md +1 -51
- package/doc/indented-text.md +1 -36
- package/doc/input-checkbox.md +1 -78
- package/doc/input-color.md +1 -44
- package/doc/input-date.md +1 -99
- package/doc/input-email.md +1 -65
- package/doc/input-file.md +1 -64
- package/doc/input-number.md +1 -56
- package/doc/input-password.md +1 -57
- package/doc/input-radio.md +1 -97
- package/doc/input-range.md +1 -75
- package/doc/input-text.md +1 -80
- package/doc/kolibri.md +1 -18
- package/doc/link-button.md +1 -26
- package/doc/link-group.md +1 -81
- package/doc/link.md +1 -71
- package/doc/modal.md +1 -91
- package/doc/nav.md +1 -110
- package/doc/pagination.md +1 -42
- package/doc/progress.md +1 -41
- package/doc/quote.md +1 -63
- package/doc/select.md +1 -112
- package/doc/single-select.md +0 -28
- package/doc/skip-nav.md +1 -50
- package/doc/spin.md +1 -113
- package/doc/split-button.md +1 -24
- package/doc/table-stateful.md +1 -184
- package/doc/table-stateless.md +1 -72
- package/doc/table.md +1 -176
- package/doc/tabs.md +1 -89
- package/doc/textarea.md +2 -74
- package/doc/toaster.md +1 -71
- package/doc/toolbar.md +1 -46
- package/doc/tree-item.md +1 -3
- package/doc/tree.md +1 -70
- package/doc/version.md +1 -23
- package/package.json +1 -1
- package/vscode-custom-data.json +52 -76
- package/dist/cjs/Alert-621b81a8.js +0 -4
- package/dist/cjs/Alert-621b81a8.js.map +0 -1
- package/dist/cjs/Collapsible-e451263d.js +0 -4
- package/dist/cjs/Collapsible-e451263d.js.map +0 -1
- package/dist/cjs/FormFieldMsg-a6239e8f.js +0 -4
- package/dist/cjs/InternalUnderlinedBadgeText-aad31745.js +0 -4
- package/dist/cjs/InternalUnderlinedBadgeText-aad31745.js.map +0 -1
- package/dist/cjs/badge-text-1bbf50cd.js +0 -4
- package/dist/cjs/badge-text-1bbf50cd.js.map +0 -1
- package/dist/cjs/component-names-72b76dc7.js +0 -4
- package/dist/cjs/component-names-72b76dc7.js.map +0 -1
- package/dist/cjs/index-f7982219.js +0 -4
- package/dist/cjs/index-f7982219.js.map +0 -1
- package/dist/cjs/kol-heading-wc.cjs.entry.js +0 -4
- package/dist/cjs/kol-heading-wc.cjs.entry.js.map +0 -1
- package/dist/cjs/kol-span-wc.cjs.entry.js +0 -4
- package/dist/cjs/kol-span-wc.cjs.entry.js.map +0 -1
- package/dist/components/badge-text.js +0 -4
- package/dist/components/badge-text.js.map +0 -1
- package/dist/components/kol-heading-wc.d.ts +0 -11
- package/dist/components/kol-heading-wc.js +0 -4
- package/dist/components/kol-heading-wc.js.map +0 -1
- package/dist/components/kol-span-wc.d.ts +0 -11
- package/dist/components/kol-span-wc.js +0 -4
- package/dist/components/kol-span-wc.js.map +0 -1
- package/dist/esm/Alert-84e561fe.js +0 -4
- package/dist/esm/Alert-84e561fe.js.map +0 -1
- package/dist/esm/Collapsible-2207b3ef.js +0 -4
- package/dist/esm/Collapsible-2207b3ef.js.map +0 -1
- package/dist/esm/FormFieldMsg-ffa58506.js +0 -4
- package/dist/esm/InternalUnderlinedBadgeText-30239f48.js +0 -4
- package/dist/esm/InternalUnderlinedBadgeText-30239f48.js.map +0 -1
- package/dist/esm/badge-text-6be73b6a.js +0 -4
- package/dist/esm/badge-text-6be73b6a.js.map +0 -1
- package/dist/esm/component-names-d278f819.js +0 -4
- package/dist/esm/component-names-d278f819.js.map +0 -1
- package/dist/esm/index-10e4924f.js +0 -4
- package/dist/esm/index-10e4924f.js.map +0 -1
- package/dist/esm/kol-heading-wc.entry.js +0 -4
- package/dist/esm/kol-heading-wc.entry.js.map +0 -1
- package/dist/esm/kol-span-wc.entry.js +0 -4
- package/dist/kolibri/Alert-84e561fe.js +0 -4
- package/dist/kolibri/Alert-84e561fe.js.map +0 -1
- package/dist/kolibri/Collapsible-2207b3ef.js +0 -4
- package/dist/kolibri/Collapsible-2207b3ef.js.map +0 -1
- package/dist/kolibri/FormFieldMsg-ffa58506.js +0 -4
- package/dist/kolibri/InternalUnderlinedBadgeText-30239f48.js +0 -4
- package/dist/kolibri/InternalUnderlinedBadgeText-30239f48.js.map +0 -1
- package/dist/kolibri/badge-text-6be73b6a.js +0 -4
- package/dist/kolibri/badge-text-6be73b6a.js.map +0 -1
- package/dist/kolibri/component-names-d278f819.js +0 -4
- package/dist/kolibri/component-names-d278f819.js.map +0 -1
- package/dist/kolibri/controller-96fe2d26.js +0 -4
- package/dist/kolibri/controller-icon-29af0ac7.js +0 -4
- package/dist/kolibri/events-e483577f.js +0 -4
- package/dist/kolibri/index-10e4924f.js.map +0 -1
- package/dist/kolibri/kol-heading-wc.entry.js +0 -4
- package/dist/kolibri/kol-heading-wc.entry.js.map +0 -1
- package/dist/kolibri/kol-span-wc.entry.js +0 -4
- package/dist/kolibri/kol-span-wc.entry.js.map +0 -1
- package/dist/kolibri/tooltip-align-6b648461.js +0 -4
- package/dist/types/components/heading/component.d.ts +0 -17
- package/dist/types/components/span/InternalUnderlinedBadgeText.d.ts +0 -7
- package/dist/types/components/span/component.d.ts +0 -17
- package/dist/types/components/toaster/InternalToast.d.ts +0 -9
- package/doc/popover.md +0 -26
- package/doc/span.md +0 -32
- package/doc/tooltip.md +0 -47
- /package/dist/kolibri/{FormFieldMsg-ffa58506.js.map → FormFieldMsg-6843c725.js.map} +0 -0
- /package/dist/kolibri/{align-e29ed804.js.map → align-3f029493.js.map} +0 -0
- /package/dist/kolibri/{app-globals-ccc036b6.js.map → app-globals-ebbcf310.js.map} +0 -0
- /package/dist/kolibri/{common-0f1f2276.js.map → common-54bf85ba.js.map} +0 -0
- /package/dist/kolibri/{controller-d1097e06.js.map → controller-1739038d.js.map} +0 -0
- /package/dist/kolibri/{controller-dacdb561.js.map → controller-506a6c81.js.map} +0 -0
- /package/dist/kolibri/{controller-ff17d912.js.map → controller-68fd9cd8.js.map} +0 -0
- /package/dist/kolibri/{controller-172fcdb6.js.map → controller-6c2714a5.js.map} +0 -0
- /package/dist/kolibri/{controller-icon-29af0ac7.js.map → controller-icon-e20e2d63.js.map} +0 -0
- /package/dist/kolibri/{dev.utils-514126fc.js.map → dev.utils-8fad8415.js.map} +0 -0
- /package/dist/kolibri/{devtools-aa4f8f79.js.map → devtools-a0824082.js.map} +0 -0
- /package/dist/kolibri/{icons-4c339a19.js.map → icons-f3b7aabd.js.map} +0 -0
- /package/dist/kolibri/{tooltip-align-6b648461.js.map → tooltip-align-c001aae2.js.map} +0 -0
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as n,h as e,H as t}from"./index-
|
4
|
+
import{r as n,h as e,H as t}from"./index-a49af574.js";import{r as i,a as o}from"./unique-nav-labels-768d04e9.js";import{w as a}from"./validation-1a210179.js";import{g as s}from"./component-names-aa3cbc3c.js";import{v as l}from"./label-d70e7c34.js";import"./dev.utils-fab45cbc.js";import"./prop.validators-c5e6ad2d.js";import"./index-541b643a.js";const r="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n ul {\n display: grid;\n list-style: none;\n place-items: center;\n }\n ul li {\n height: 0;\n }\n .kol-link-wc a {\n left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n z-index: 9999999;\n line-height: 1;\n }\n .kol-link-wc a:focus {\n background-color: #fff;\n left: unset;\n position: unset;\n }\n}",d=r,c=class{constructor(e){n(this,e),this._label=void 0,this._links=void 0,this.state={_label:"",_links:[]}}render(){return e(t,{key:"5ea83803fc89d53743361866ce8b871f93e8f3eb",class:"kol-skip-nav"},e("nav",{key:"1895f68248ebf407c4bdb441d56c2fc86892b798","aria-label":this.state._label},e("ul",{key:"701903212b0d1b7bec455f0ba3cb0d8487b3e840"},this.state._links.map(((n,t)=>e("li",{key:t},e(s,Object.assign({},n))))))))}validateLabel(n,e,t=!1){t||i(this.state._label),l(this,n,{required:!0}),o(this.state._label)}validateLinks(n){a("KolSkipNav",this,n)}componentWillLoad(){this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){i(this.state._label)}static get watchers(){return{_label:["validateLabel"],_links:["validateLinks"]}}};c.style={default:d};export{c as kol_skip_nav};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as n,h as e,H as i,F as t}from"./index-
|
4
|
+
import{r as n,h as e,H as i,F as t}from"./index-a49af574.js";import{t as o}from"./i18n-5fe08f1c.js";import{v as a}from"./show-5d826542.js";import{w as r}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const s=["cycle","dot","none"],l=(n,e)=>{r(n,"_variant",(n=>"string"==typeof n&&s.includes(n)),new Set(s),e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n .spin.cycle {\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n height: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.cycle > .loader {\n display: block;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n position: relative;\n animation: 2s linear infinite rotate;\n }\n .spin.cycle > .loader::before {\n content: \"\";\n box-sizing: border-box;\n position: absolute;\n inset: 0;\n border-radius: 50%;\n border: calc(5rem / var(--kolibri-root-font-size, 16)) solid #333;\n animation: 3s linear infinite prixClipFix;\n }\n @keyframes rotate {\n 100% {\n transform: rotate(360deg);\n }\n }\n @keyframes prixClipFix {\n 0% {\n border-color: #fff;\n clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);\n }\n 25% {\n border-color: #666;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);\n }\n 50% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);\n }\n 75% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);\n }\n 100% {\n border-color: #000;\n clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.cycle > .loader {\n animation-duration: 4s;\n }\n .spin.cycle > .loader::before {\n animation-duration: 6s;\n }\n }\n}\n@layer kol-component {\n .spin.dot {\n height: calc(16rem / var(--kolibri-root-font-size, 16));\n width: calc(48rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span {\n animation-timing-function: cubic-bezier(0, 1, 1, 0);\n border-radius: 50%;\n border: calc(0.16rem / var(--kolibri-root-font-size, 16)) solid #fff;\n height: calc(12.8rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n top: calc(0.16rem / var(--kolibri-root-font-size, 16));\n width: calc(12.8rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:first-child {\n background-color: #000;\n z-index: 0;\n animation: 1s infinite spin1;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(2) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(0.16rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(3) {\n background-color: #000;\n z-index: 1;\n animation: 1s infinite spin2;\n left: calc(17.6rem / var(--kolibri-root-font-size, 16));\n }\n .spin.dot > span:nth-child(4) {\n background-color: #666;\n z-index: 0;\n animation: 1s infinite spin3;\n left: calc(33.6rem / var(--kolibri-root-font-size, 16));\n }\n @keyframes spin1 {\n 0% {\n transform: scale(0);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes spin2 {\n 0% {\n transform: translate(0, 0);\n }\n 100% {\n transform: translate(calc(16rem / var(--kolibri-root-font-size, 16)), 0);\n }\n }\n @keyframes spin3 {\n 0% {\n transform: scale(1);\n }\n 100% {\n transform: scale(0);\n }\n }\n /* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#toning_down_the_animation_scaling */\n @media (prefers-reduced-motion) {\n .spin.dot > span:first-child,\n .spin.dot > span:nth-child(2),\n .spin.dot > span:nth-child(3),\n .spin.dot > span:nth-child(4) {\n animation-duration: 2s;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .spin {\n display: block;\n padding: calc(2rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n}",c=d;function p(n){switch(n){case"cycle":return e("span",{class:"loader"});case"none":return e("slot",{name:"expert"});default:return e(t,null,e("span",{class:"bg-spin-1"}),e("span",{class:"bg-spin-2"}),e("span",{class:"bg-spin-3"}),e("span",{class:"bg-neutral"}))}}const h=class{constructor(e){n(this,e),this.showToggled=!1,this._show=!1,this._variant="dot",this.state={_variant:"dot"}}render(){return e(i,{key:"c9c9feb29ef7ac4d0e0f6aac40013a6047310d6b",class:"kol-spin"},this.state._show?e("span",{"aria-busy":"true","aria-label":o("kol-action-running"),"aria-live":"polite",class:{spin:!0,[this.state._variant]:!0},role:"alert"},p(this.state._variant)):this.showToggled&&e("span",{"aria-label":o("kol-action-done"),"aria-busy":"false","aria-live":"polite",role:"alert"}))}validateShow(n){this.showToggled=!0===this.state._show&&!1===this._show,a(this,n)}validateVariant(n){l(this,n)}componentWillLoad(){this.validateShow(this._show),this.validateVariant(this._variant)}static get watchers(){return{_show:["validateShow"],_variant:["validateVariant"]}}};h.style={default:c};export{h as kol_spin};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as n,h as t,H as e}from"./index-
|
4
|
+
import{r as n,h as t,H as e}from"./index-a49af574.js";import{t as i}from"./i18n-5fe08f1c.js";import{m as o,a}from"./component-names-aa3cbc3c.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";const s="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover {\n height: 0;\n position: absolute;\n }\n .kol-popover .popover {\n background-color: #fff;\n min-height: max-content;\n min-width: max-content;\n opacity: 0;\n position: absolute;\n }\n .kol-popover .show {\n animation: 0.3s ease-in forwards fadeInOpacity;\n }\n .kol-popover .disappear {\n animation: 0.3s ease-in backwards fadeInOpacity;\n }\n .kol-popover .arrow {\n background-color: inherit;\n height: var(--font-size);\n position: absolute;\n rotate: 0.125turn;\n width: var(--font-size);\n z-index: -1;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: flex;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n position: relative;\n }\n .split-button-root {\n display: flex;\n position: relative;\n }\n .main-button {\n flex-grow: 1;\n text-align: left;\n }\n .kol-popover .popover {\n margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .kol-popover .arrow {\n display: none;\n }\n}",l=s,r=class{constructor(t){n(this,t),this.clickButtonHandler={onClick:n=>{var t,e;"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(e=this._on)||void 0===e||e.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:()=>this.toggleDropdown()},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return t(e,{key:"d3892425d9d11f197860a4564ffd70c120f7b03c",class:"kol-split-button"},t("div",{key:"ad1eefef2d4afd1b21862faaf92c7e44fc51d46d",class:"split-button-root"},t(a,{key:"fedcf0e60dac1c1cb238828ce7d8f5c47cc99c78",class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),t("div",{key:"ea28cb5e29e5e48301597f3816da88ea60089314",class:"horizontal-line"}),t(a,{key:"87e31aa97726c9a9c9e80b43f5a87d51a02238a0",class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?i(`${n}-close`):i(`${n}-open`),_on:this.clickToggleHandler})),t(o,{key:"38bf2afd667db393b527c04c07e80f29ed7e9df2",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},t("slot",{key:"4db1d90e1b41e602d6e4fc5a4a12c4d71ac6be6f"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};r.style={default:l};export{r as kol_split_button};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["defaultStyleCss","KolSplitButtonDefaultStyle0","KolSplitButton","this","clickButtonHandler","onClick","e","_a","_on","_b","_value","toggleDropdown","clickToggleHandler","state","Object","assign","_show","handleOnClose","render","i18nDropdownLabel","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_label","_name","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","translate","KolPopoverWcTag","onClose","_align","closePopup","Promise","resolve"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../popover/style.scss';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tfont-size: rem(16);\n\t\tposition: relative;\n\t}\n\n\t.split-button-root {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\n\t.main-button {\n\t\tflex-grow: 1;\n\t\ttext-align: left;\n\t}\n\n\t.kol-popover {\n\t\t.popover {\n\t\t\tmargin-top: rem(2);\n\t\t}\n\n\t\t.arrow {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n","import type {\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelPropType,\n\tNamePropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (e: MouseEvent) => {\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(e, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = { onClick: () => this.toggleDropdown() };\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<Host class=\"kol-split-button\">\n\t\t\t\t<div class=\"split-button-root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"mappings":";;;
|
1
|
+
{"version":3,"names":["defaultStyleCss","KolSplitButtonDefaultStyle0","KolSplitButton","this","clickButtonHandler","onClick","e","_a","_on","_b","_value","toggleDropdown","clickToggleHandler","state","Object","assign","_show","handleOnClose","render","i18nDropdownLabel","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_icons","_hideLabel","_label","_name","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","translate","KolPopoverWcTag","onClose","_align","closePopup","Promise","resolve"],"sources":["src/components/split-button/style.scss?tag=kol-split-button&mode=default&encapsulation=shadow","src/components/split-button/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../popover/style.scss';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: flex;\n\t\tfont-size: rem(16);\n\t\tposition: relative;\n\t}\n\n\t.split-button-root {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t}\n\n\t.main-button {\n\t\tflex-grow: 1;\n\t\ttext-align: left;\n\t}\n\n\t.kol-popover {\n\t\t.popover {\n\t\t\tmargin-top: rem(2);\n\t\t}\n\n\t\t.arrow {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n","import type {\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelPropType,\n\tNamePropType,\n\tSplitButtonProps,\n\tSplitButtonStates,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, State } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { KolButtonWcTag, KolPopoverWcTag } from '../../core/component-names';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.\n */\n@Component({\n\ttag: 'kol-split-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {\n\tprivate readonly clickButtonHandler = {\n\t\tonClick: (e: MouseEvent) => {\n\t\t\tif (typeof this._on?.onClick === 'function') {\n\t\t\t\t// TODO: this._on is not validated\n\t\t\t\tthis._on?.onClick(e, this._value);\n\t\t\t} else {\n\t\t\t\tthis.toggleDropdown();\n\t\t\t}\n\t\t},\n\t};\n\tprivate readonly clickToggleHandler = { onClick: () => this.toggleDropdown() };\n\n\tprivate readonly toggleDropdown = () => {\n\t\tthis.state = { ...this.state, _show: !this.state._show };\n\t};\n\n\tprivate readonly handleOnClose = () => {\n\t\tthis.state = { ...this.state, _show: false };\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst i18nDropdownLabel = 'kol-split-button-dropdown-label';\n\t\treturn (\n\t\t\t<Host class=\"kol-split-button\">\n\t\t\t\t<div class=\"split-button-root\">\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\t'main-button': true,\n\t\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t\t_label={this._label}\n\t\t\t\t\t\t_name={this._name}\n\t\t\t\t\t\t_on={this.clickButtonHandler}\n\t\t\t\t\t\t_role={this._role}\n\t\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_type={this._type}\n\t\t\t\t\t\t_value={this._value}\n\t\t\t\t\t\t_variant={this._variant}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t<div class=\"horizontal-line\"></div>\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"secondary-button\"\n\t\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t_icons=\"codicon codicon-triangle-down\"\n\t\t\t\t\t\t_label={this.state._show ? translate(`${i18nDropdownLabel}-close`) : translate(`${i18nDropdownLabel}-open`)}\n\t\t\t\t\t\t_on={this.clickToggleHandler}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t</div>\n\t\t\t\t<KolPopoverWcTag _show={this.state._show} _on={{ onClose: this.handleOnClose }} _align=\"bottom\">\n\t\t\t\t\t<slot />\n\t\t\t\t</KolPopoverWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Method()\n\tpublic async closePopup() {\n\t\tthis.handleOnClose();\n\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n\n\t@State() public state: SplitButtonStates = {\n\t\t_show: false,\n\t};\n}\n"],"mappings":";;;wMAAA,MAAMA,EAAkB,2kNACxB,MAAAC,EAAeD,E,MCiCFE,EAAc,M,yBACTC,KAAAC,mBAAqB,CACrCC,QAAUC,I,QACT,WAAWC,EAAAJ,KAAKK,OAAG,MAAAD,SAAA,SAAAA,EAAEF,WAAY,WAAY,EAE5CI,EAAAN,KAAKK,OAAG,MAAAC,SAAA,SAAAA,EAAEJ,QAAQC,EAAGH,KAAKO,O,KACpB,CACNP,KAAKQ,gB,IAISR,KAAAS,mBAAqB,CAAEP,QAAS,IAAMF,KAAKQ,kBAE3CR,KAAAQ,eAAiB,KACjCR,KAAKU,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQZ,KAAKU,OAAK,CAAEG,OAAQb,KAAKU,MAAMG,OAAO,EAGxCb,KAAAc,cAAgB,KAChCd,KAAKU,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQZ,KAAKU,OAAK,CAAEG,MAAO,OAAO,E,kIAgFR,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,S,WAEP,CAC1CA,MAAO,M,CApJD,MAAAE,GACN,MAAMC,EAAoB,kCAC1B,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,oBACXH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACVH,EAACI,EAAc,CAAAF,IAAA,2CACdC,MAAO,CACN,cAAe,KACfE,OAAQ,KACR,CAACtB,KAAKuB,UAAqBvB,KAAKuB,WAAa,SAC7C,CAACvB,KAAKwB,cAAyBxB,KAAKuB,WAAa,iBAAmBvB,KAAKwB,eAAiB,UAAYxB,KAAKwB,aAAaC,OAAS,GAElIC,cAAe1B,KAAK0B,cACpBC,cAAe3B,KAAK2B,cACpBC,cAAe5B,KAAK4B,cACpBJ,aAAcxB,KAAKwB,aACnBK,UAAW7B,KAAK6B,UAChBC,OAAQ9B,KAAK8B,OACbC,WAAY/B,KAAK+B,WACjBC,OAAQhC,KAAKgC,OACbC,MAAOjC,KAAKiC,MACZ5B,IAAKL,KAAKC,mBACViC,MAAOlC,KAAKkC,MACZC,qBAAsBnC,KAAKmC,qBAC3BC,UAAWpC,KAAKoC,UAChBC,cAAerC,KAAKqC,cACpBC,MAAOtC,KAAKsC,MACZ/B,OAAQP,KAAKO,OACbgB,SAAUvB,KAAKuB,WAEhBN,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACXH,EAACI,EAAc,CAAAF,IAAA,2CACdC,MAAM,mBACNS,UAAW7B,KAAK6B,UAChBE,WAAU,KACVD,OAAO,gCACPE,OAAQhC,KAAKU,MAAMG,MAAQ0B,EAAU,GAAGvB,WAA6BuB,EAAU,GAAGvB,UAClFX,IAAKL,KAAKS,sBAGZQ,EAACuB,EAAe,CAAArB,IAAA,2CAACN,MAAOb,KAAKU,MAAMG,MAAOR,IAAK,CAAEoC,QAASzC,KAAKc,eAAiB4B,OAAO,UACtFzB,EAAA,QAAAE,IAAA,8C,CAOG,gBAAMwB,GACZ3C,KAAKc,gBAEL,OAAO8B,QAAQC,S","ignoreList":[]}
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as
|
4
|
+
import{r as a,h as e,H as s}from"./index-a49af574.js";import{t}from"./i18n-5fe08f1c.js";import{v as i}from"./label-d70e7c34.js";import{i as r}from"./prop.validators-c5e6ad2d.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const o=class{constructor(s){a(this,s),this._label=void 0,this._symbol=void 0,this.state={_label:t("kol-warning"),_symbol:""}}render(){return e(s,{key:"2f2f3e5a8a29ac4c42c0680ba5be729382c6c328",class:"kol-symbol"},e("span",{key:"1bf27b34686a8943c7fdc2fa898c251b2a131329","aria-label":this.state._label,role:"term"},this.state._symbol))}validateLabel(a){i(this,a,{required:!0})}validateSymbol(a){r(this,"_symbol",a,{required:!0})}componentWillLoad(){this.validateLabel(this._label),this.validateSymbol(this._symbol)}static get watchers(){return{_label:["validateLabel"],_symbol:["validateSymbol"]}}};export{o as kol_symbol};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as t,h as n,H as i,g as e}from"./index-10e4924f.js";import{t as o}from"./i18n-5fe08f1c.js";import{t as a,r as s}from"./component-names-d278f819.js";import{t as l}from"./events-29e84d75.js";import{v as r,a as h,b as d,c,E as u}from"./events-e483577f.js";import{w as f,s as p,t as b,i as m,p as v,o as g,j as y}from"./prop.validators-c5e6ad2d.js";import{v as w}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./common-0f1f2276.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const k=["top","bottom","both"],_=(t,n)=>{f(t,"_paginationPosition",(t=>"string"==typeof t&&k.includes(t)),new Set([`PaginationPositionPropType {${k.join(", ")}`]),n,{defaultValue:"bottom"})},S="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :root {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}",z=S,x=[10,20,50,100],j=t=>!0===t||""===t||"object"==typeof t&&null!==t,C=class{constructor(n){t(this,n),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onClick)&&this.state._pagination._on.onClick(t,n),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePage)&&this.state._pagination._on.onChangePage(t,n),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),p(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),p(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void p(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let i=0;i<this.sortData.length;i++){const e=this.sortData[i],a=e.compareFn(t,n);if(0!==a)return"ASC"===e.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}p(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){f(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){r(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){_(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const i=this.sortData.findIndex((n=>n.key===t.key));if(i>=0){const t=this.sortData[i];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(i,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){b(t,(()=>{g(t,(()=>{try{t=v(t)}catch(t){}f(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,i,e,a;const o=t=>{let n=!1;t.forEach((t=>{const i=t.key;if(!i)return;const e=t.sortDirection;"ASC"!==e&&"DESC"!==e||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:i,compareFn:t.compareFn,direction:e}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,e),setTimeout((()=>this.updateSortedData({key:i,label:t.label,sortDirection:e})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(i=s.vertical)||void 0===i||i.forEach(o),s.horizontal&&s.vertical&&(null===(e=s.horizontal)||void 0===e?void 0:e.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,y("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){m(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){d(this,t)}validateOn(t){c(this,t)}validatePagination(t){try{t=v(t)}catch(t){}this.showPagination=j(t),f(this,"_pagination",j,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,i){return"number"==typeof n&&n>0&&"number"==typeof i&&i>0?(this.pageStartSlice=n*(i-1),this.pageEndSlice=n*i>t.length?t.length:n*i,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return n("div",{class:"pagination"},n("span",null,o("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),n("div",null,n(a,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||x,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:o("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const i=this.state._selection;if(i){const e=null!==(n=i.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[e])));if(!1===(null==i?void 0:i.multiple))return a[0];if(e)return a}return null}handleSelectionChange(t,n){var i;const e=this.state._selection;e&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},e),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);l("selection-change",this.host,a),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[u.onSelectionChange])&&this.state._on[u.onSelectionChange](t,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,e,a,o;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),r="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,d={horizontal:null===(a=this.state._headers.horizontal)||void 0===a?void 0:a.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return n(i,{key:"b1d2e0679c35089d9d648174ac72de0f2a6349f8",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&r,n(s,{key:"bd022abcb18d07cc26bebb98ccfcd7e96fb90da7",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&h)}get host(){return e(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};C.style={default:z};export{C as kol_table_stateful};
|
4
|
+
import{r as t,h as n,H as i,g as e}from"./index-a49af574.js";import{t as o}from"./i18n-5fe08f1c.js";import{p as a,o as s}from"./component-names-aa3cbc3c.js";import{t as l}from"./events-29e84d75.js";import{v as r,a as h,b as d,c,E as u}from"./events-3111c1e8.js";import{w as p,s as f,t as b,i as m,p as v,o as g,j as y}from"./prop.validators-c5e6ad2d.js";import{v as w}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./common-54bf85ba.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const k=["top","bottom","both"],_=(t,n)=>{p(t,"_paginationPosition",(t=>"string"==typeof t&&k.includes(t)),new Set([`PaginationPositionPropType {${k.join(", ")}`]),n,{defaultValue:"bottom"})},S="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :root {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n div.pagination .kol-pagination {\n display: flex;\n flex-wrap: wrap;\n }\n div.pagination,\n div.pagination > div:last-child {\n display: grid;\n place-items: center;\n }\n @media (max-width: 1024px) {\n div.pagination .kol-pagination {\n flex-direction: column;\n }\n }\n @media (min-width: 1024px) {\n div.pagination,\n div.pagination > div:last-child {\n grid-auto-flow: column;\n }\n div.pagination .kol-pagination {\n display: flex;\n }\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}",z=S,x=[10,20,50,100],j=t=>!0===t||""===t||"object"==typeof t&&null!==t,C=class{constructor(n){t(this,n),this.catchRef=t=>{this.tableWcRef=t},this.sortDirections=new Map,this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"},this.setSortDirection=(t,n)=>{this.sortDirections.clear(),this.sortDirections.set(t,n),this.sortFunction=t},this.handlePagination={onClick:(t,n)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onClick)&&this.state._pagination._on.onClick(t,n),f(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePage)&&this.state._pagination._on.onChangePage(t,n),f(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var i;"function"==typeof(null===(i=this.state._pagination._on)||void 0===i?void 0:i.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),f(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),f(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=(t=this.sortedColumnHead)=>{if(this.disableSort)return void f(this,"_sortedData",this.state._data);let n=this.state._data;if(this.sortData.length>0)n=this.state._data.sort(((t,n)=>{for(let i=0;i<this.sortData.length;i++){const e=this.sortData[i],a=e.compareFn(t,n);if(0!==a)return"ASC"===e.direction?a:-a}return 0}));else if("function"==typeof this.sortFunction)switch(this.sortDirections.get(this.sortFunction)){case"ASC":n=this.sortFunction([...this.state._data]),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"ASC"};break;case"DESC":n=this.sortFunction([...this.state._data]).reverse(),this.sortedColumnHead={label:t.label,key:t.key,sortDirection:"DESC"};break;default:n=[...this.state._data],this.sortedColumnHead={label:"",key:"",sortDirection:"NOS"}}f(this,"_sortedData",n)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){p(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){r(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){h(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){_(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const i=this.sortData.findIndex((n=>n.key===t.key));if(i>=0){const t=this.sortData[i];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(i,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData(t)}else if("function"==typeof t.sort){switch(this.sortFunction=t.sort,this.sortDirections.get(this.sortFunction)){case"ASC":this.setSortDirection(this.sortFunction,"DESC");break;case"DESC":this.setSortDirection(this.sortFunction,"NOS");break;default:this.setSortDirection(this.sortFunction,"ASC")}this.updateSortedData(t)}}validateHeaders(t){b(t,(()=>{g(t,(()=>{try{t=v(t)}catch(t){}p(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var n,i,e,a;const o=t=>{let n=!1;t.forEach((t=>{const i=t.key;if(!i)return;const e=t.sortDirection;"ASC"!==e&&"DESC"!==e||("function"==typeof t.compareFn?((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:i,compareFn:t.compareFn,direction:e}),n=!0):"function"==typeof t.sort&&(this.setSortDirection(t.sort,e),setTimeout((()=>this.updateSortedData({key:i,label:t.label,sortDirection:e})))))})),n&&setTimeout((()=>this.updateSortedData()))},s=t;null===(n=s.horizontal)||void 0===n||n.forEach(o),null===(i=s.vertical)||void 0===i||i.forEach(o),s.horizontal&&s.vertical&&(null===(e=s.horizontal)||void 0===e?void 0:e.length)>0&&(null===(a=s.vertical)||void 0===a?void 0:a.length)>0&&(this.disableSort=!0,y("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){w(this,t,{required:!0})}validateMinWidth(t){m(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){d(this,t)}validateOn(t){c(this,t)}validatePagination(t){try{t=v(t)}catch(t){}this.showPagination=j(t),p(this,"_pagination",j,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener("kol-selection-change",this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener("kol-selection-change",this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,n,i){return"number"==typeof n&&n>0&&"number"==typeof i&&i>0?(this.pageStartSlice=n*(i-1),this.pageEndSlice=n*i>t.length?t.length:n*i,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return n("div",{class:"pagination"},n("span",null,o("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),n("div",null,n(a,{_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||x,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:o("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&("function"==typeof t.compareFn||"function"==typeof t.sort)){if(t.key===this.sortedColumnHead.key)return this.sortedColumnHead.sortDirection;if(t.key){const n=this.sortData.find((n=>n.key===t.key));if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((n=>n.key===t));n&&this.changeCellSort(n)}getSelectedData(t){var n;const i=this.state._selection;if(i){const e=null!==(n=i.keyPropertyName)&&void 0!==n?n:"id",a=this.state._sortedData.filter((n=>t.includes(n[e])));if(!1===(null==i?void 0:i.multiple))return a[0];if(e)return a}return null}handleSelectionChange(t,n){var i;const e=this.state._selection;e&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},e),{selectedKeys:"object"==typeof n?n:[n]})}));const a=this.getSelectedData(n);l("selection-change",this.host,a),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[u.onSelectionChange])&&this.state._on[u.onSelectionChange](t,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,e,a,o;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),r="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,h="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,d={horizontal:null===(a=this.state._headers.horizontal)||void 0===a?void 0:a.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return n(i,{key:"0637b51df24b703954c3e4e3f6dd6b5fdbe5d967",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&r,n(s,{key:"c4aa2e137545638ac1137ff13c9425787a3f36b9",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&h)}get host(){return e(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};C.style={default:z};export{C as kol_table_stateful};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as t,h as e,F as i,H as s,g as n}from"./index-10e4924f.js";import{g as o,a as l,c as a}from"./component-names-d278f819.js";import{t as r}from"./i18n-5fe08f1c.js";import{n as d}from"./dev.utils-514126fc.js";import{t as c}from"./events-29e84d75.js";import{t as h,o as f,p as u,w as v,i as b}from"./prop.validators-c5e6ad2d.js";import{v as p,a as y,d as m,b as k,E as g}from"./events-e483577f.js";import{v as w}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";import"./common-0f1f2276.js";const _=(e,t)=>{h(t,(()=>{f(t,(()=>{try{t=u(t)}catch(e){}v(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},j=class{constructor(a){t(this,a),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(t,a,i)=>{var l,o;let s=String(a);return this.horizontal&&(null===(l=t[0])||void 0===l?void 0:l.data)&&(s=null!==(o=this.getDataKey(t[0].data))&&void 0!==o?o:s),e("tr",{key:`row-${s}`},this.renderSelectionCell(t,a),t.map(((e,t)=>this.renderTableCell(e,a,t,i))))},this.renderTableCell=(t,a,i,l)=>{let o=`${a}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);o=e?`${e}-${this.horizontal?i:a}`:o}return!1===t.asTd?this.renderHeadingCell(t,a,i,l):e("td",{key:`cell-${o}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){p(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){y(this,e)}validateHeaderCells(e){_(this,e)}validateLabel(e){w(this,e,{required:!0})}validateMinWidth(e){b(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){m(this,e)}validateSelection(e){k(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(a);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,d())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,a;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const l=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),n=0;a&&(n=s,s+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const c=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));for(let i=n;i<s;i++){const s=[];t.vertical.forEach(((e,t)=>{let a=0;if(h[t].forEach((e=>a+=e)),a<=i){const l=e[i-a+d[t]];if("object"==typeof l){s.push(Object.assign(Object.assign({},l),{asTd:!1,data:{}}));let e=1;if("number"==typeof l.rowSpan&&l.rowSpan>1&&(e=l.rowSpan),h[t].push(e),"number"==typeof l.colSpan&&l.colSpan>1)for(let a=1;a<l.colSpan;a++)h[t+a].push(e);d[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=a&&this.state._dataFoot?this.state._dataFoot[i-n]:e[i];"object"==typeof l[t]&&null!==l[t]&&"string"==typeof l[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},l[t]),{colSpan:void 0,data:o,label:o[l[t].key],rowSpan:void 0}))}else"object"==typeof l[i]&&null!==l[i]&&"string"==typeof l[i].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},l[i]),{colSpan:void 0,data:e[t],label:e[t][l[i].key],rowSpan:void 0}));c.push(s)}if(0===e.length){let e=0,a=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{a+=e.rowSpan||1})));const i={colSpan:e,label:r("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===c.length?c.push([i]):c[0].push(i)}return c}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(t,a){var i,s,n;const r=this.state._selection;if(!r)return"";const d=null!==(i=r.keyPropertyName)&&void 0!==i?i:"id",h=null===(s=t[0])||void 0===s?void 0:s.data;if(!h)return"";const v=h[d],p=r.multiple||void 0===r.multiple,b=null===(n=null==r?void 0:r.selectedKeys)||void 0===n?void 0:n.includes(v),u=r.label(h),f={name:"selection",checked:b,id:v,"aria-label":u};return e("td",{key:`tbody-${a}-selection`,class:"selection-cell"},e("div",{class:"input "+(b?"checked":"")},p?e("label",{class:"checkbox-container"},e(o,{class:"icon",_icons:"codicon "+(b?"codicon-check":""),_label:""}),e("input",Object.assign({ref:e=>e&&this.checkboxRefs.push(e)},f,{type:"checkbox",onInput:e=>{var t,a,i;const l=b?null===(a=null==r?void 0:r.selectedKeys)||void 0===a?void 0:a.filter((e=>e!==v)):[...null!==(t=null==r?void 0:r.selectedKeys)&&void 0!==t?t:[],v];c("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,null!=l?l:[])}}))):e("label",{class:"radio-container"},e("input",Object.assign({},f,{type:"radio",onInput:e=>{var t;c("selection-change",this.host,v),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,v)}}))),e(l,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${v}-label`,_label:u})))}renderHeadingSelectionCell(){var t,a;const i=this.state._selection;if(!i||!i.multiple&&void 0!==i.multiple)return e("th",{key:"thead-0"});const s=null!==(t=i.keyPropertyName)&&void 0!==t?t:"id",n=null===(a=i.selectedKeys)||void 0===a?void 0:a.length,d=n===this.state._data.length,h=0!==n&&!d;let v="kol-table-selection-indeterminate";d&&!h&&(v="kol-table-selection-none"),0===n&&(v="kol-table-selection-all");const p=r(v);return e("th",{key:"thead-0-selection",class:"selection-cell selection-control"},e("div",{class:"input "+(h?"indeterminate":d?"checked":"")},e("label",{class:"checkbox-container"},e(o,{class:"icon",_icons:"codicon "+(h?"codicon-remove":d?"codicon-check":""),_label:""}),e("input",{ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:d&&!h,"aria-label":p,type:"checkbox",onInput:e=>{var t;const a=d?[]:this.state._data.map((e=>null==e?void 0:e[s]));c("selection-change",this.host,a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,a)}})),e(l,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${v}-label`,_label:p})))}renderHeaderTdCell(){return e(i,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,i,l,o){let s,n="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":n="codicon codicon-chevron-up",s="ascending";break;case"DESC":n="codicon codicon-chevron-down",s="descending"}const r=o?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${i}-${l}-${t.label}`,class:t.textAlign?`align-${t.textAlign}`:void 0,scope:r,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(a,{class:"table-sort-button",exportparts:"icon",_icons:{right:n},_label:t.label,_on:{onClick:e=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,a){var i,l;const o=(null===(i=this.state._headerCells.vertical)||void 0===i?void 0:i.length)||0,s=null===(l=null==a?void 0:a[0])||void 0===l?void 0:l.reduce(((e,t)=>e+(t.colSpan||1)),0),n=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:`${t}-spacer`},e("td",{colSpan:o+s+n}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",null,[this.renderSpacer("foot",t),t.map(((e,t)=>this.renderTableRow(e,t,!0)))])}render(){const t=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],e(s,{key:"482e452bd3bd6dd800bd0bd277618d543b932511",class:"kol-table-stateless-wc"},e("div",{key:"d237bc287eb2dbb4c423857807f4ce2aa079f4d4",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"a4f3435eb7f8ebb7bea738fded143d2fd5ee1261",style:{minWidth:this.state._minWidth}},e("div",{key:"ad3995862452de82107201bca3cc1b0aadd0cf36",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"c18a326a251676d7abea34f20c47187461d91748",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&e("thead",{key:"770b33b2bfd99cfb6693700cc77a919675101eb9"},[this.state._headerCells.horizontal.map(((t,a)=>e("tr",{key:`thead-${a}`},this.state._selection&&this.renderHeadingSelectionCell(),0===a&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((t,i)=>!0===t.asTd?e("td",{key:`thead-${a}-${i}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:""):this.renderHeadingCell(t,a,i,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),e("tbody",{key:"f0de4de3fd33fced22b3c29062357795409589be"},t.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return n(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{j as kol_table_stateless_wc};
|
4
|
+
import{r as t,h as e,F as i,H as s,g as n}from"./index-a49af574.js";import{d as o,u as a,a as l}from"./component-names-aa3cbc3c.js";import{t as r}from"./i18n-5fe08f1c.js";import{n as d}from"./dev.utils-8fad8415.js";import{t as c}from"./events-29e84d75.js";import{t as h,o as f,p as u,w as v,i as b}from"./prop.validators-c5e6ad2d.js";import{v as p,a as y,d as m,b as k,E as g}from"./events-3111c1e8.js";import{v as w}from"./label-d70e7c34.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./index-541b643a.js";import"./common-54bf85ba.js";const _=(e,t)=>{h(t,(()=>{f(t,(()=>{try{t=u(t)}catch(e){}v(e,"_headerCells",(e=>"object"==typeof e&&null!==e),new Set(["TableHeaderCellsPropType"]),t)}))}))},j=class{constructor(a){t(this,a),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(t,a,i)=>{var l,o;let s=String(a);return this.horizontal&&(null===(l=t[0])||void 0===l?void 0:l.data)&&(s=null!==(o=this.getDataKey(t[0].data))&&void 0!==o?o:s),e("tr",{key:`row-${s}`},this.renderSelectionCell(t,a),t.map(((e,t)=>this.renderTableCell(e,a,t,i))))},this.renderTableCell=(t,a,i,l)=>{let o=`${a}-${i}-${t.label}`;if(t.data){const e=this.getDataKey(t.data);o=e?`${e}-${this.horizontal?i:a}`:o}return!1===t.asTd?this.renderHeadingCell(t,a,i,l):e("td",{key:`cell-${o}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:"")},this.state={_data:[],_label:"",_headerCells:{horizontal:[],vertical:[]}},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){p(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){y(this,e)}validateHeaderCells(e){_(this,e)}validateLabel(e){w(this,e,{required:!0})}validateMinWidth(e){b(this,"_minWidth",e,{defaultValue:void 0})}validateOn(e){m(this,e)}validateSelection(e){k(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let i=this.checkboxRefs.indexOf(a);i>-1&&(e.preventDefault(),"ArrowDown"===e.key?(i=(i+1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()):"ArrowUp"===e.key&&(e.preventDefault(),i=(i+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[i].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,d())})),this.dataToKeyMap.forEach(((t,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}}))))}getNumberOfCols(e,t){let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1})),a<t&&(a=t)})),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let i=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1})),i<t&&(i=t)})),0===i?i=t.length:i-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,i}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,a;let i=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===i.length&&(i=this.getThePrimaryHeadersWithKeysIfExists(null!==(a=e.vertical)&&void 0!==a?a:[]),i.length>0&&(this.horizontal=!1)),i}createDataField(e,t,a){var i;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const l=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),n=0;a&&(n=s,s+=(null===(i=this.state._dataFoot)||void 0===i?void 0:i.length)||0);const c=[],d=[],h=[];t.vertical.forEach(((e,t)=>{d[t]=0,h[t]=[]}));for(let i=n;i<s;i++){const s=[];t.vertical.forEach(((e,t)=>{let a=0;if(h[t].forEach((e=>a+=e)),a<=i){const l=e[i-a+d[t]];if("object"==typeof l){s.push(Object.assign(Object.assign({},l),{asTd:!1,data:{}}));let e=1;if("number"==typeof l.rowSpan&&l.rowSpan>1&&(e=l.rowSpan),h[t].push(e),"number"==typeof l.colSpan&&l.colSpan>1)for(let a=1;a<l.colSpan;a++)h[t+a].push(e);d[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=a&&this.state._dataFoot?this.state._dataFoot[i-n]:e[i];"object"==typeof l[t]&&null!==l[t]&&"string"==typeof l[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},l[t]),{colSpan:void 0,data:o,label:o[l[t].key],rowSpan:void 0}))}else"object"==typeof l[i]&&null!==l[i]&&"string"==typeof l[i].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},l[i]),{colSpan:void 0,data:e[t],label:e[t][l[i].key],rowSpan:void 0}));c.push(s)}if(0===e.length){let e=0,a=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{a+=e.rowSpan||1})));const i={colSpan:e,label:r("kol-no-entries"),render:void 0,rowSpan:Math.max(a,1)};0===c.length?c.push([i]):c[0].push(i)}return c}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(t,i){var l,s,n;const r=this.state._selection;if(!r)return"";const d=null!==(l=r.keyPropertyName)&&void 0!==l?l:"id",h=null===(s=t[0])||void 0===s?void 0:s.data;if(!h)return"";const v=h[d],b=r.multiple||void 0===r.multiple,p=null===(n=null==r?void 0:r.selectedKeys)||void 0===n?void 0:n.includes(v),u=r.label(h),f={name:"selection",checked:p,id:v,"aria-label":u};return e("td",{key:`tbody-${i}-selection`,class:"selection-cell"},e("div",{class:"input "+(p?"checked":"")},b?e("label",{class:"checkbox-container"},e(o,{class:"icon",_icons:"codicon "+(p?"codicon-check":""),_label:""}),e("input",Object.assign({ref:e=>e&&this.checkboxRefs.push(e)},f,{type:"checkbox",onInput:e=>{var t,a,i;const l=p?null===(a=null==r?void 0:r.selectedKeys)||void 0===a?void 0:a.filter((e=>e!==v)):[...null!==(t=null==r?void 0:r.selectedKeys)&&void 0!==t?t:[],v];c("selection-change",this.host,l),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,null!=l?l:[])}}))):e("label",{class:"radio-container"},e("input",Object.assign({},f,{type:"radio",onInput:e=>{var t;c("selection-change",this.host,v),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,v)}}))),e(a,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${v}-label`,_label:u})))}renderHeadingSelectionCell(){var t,i;const l=this.state._selection;if(!l||!l.multiple&&void 0!==l.multiple)return e("th",{key:"thead-0"});const s=null!==(t=l.keyPropertyName)&&void 0!==t?t:"id",n=null===(i=l.selectedKeys)||void 0===i?void 0:i.length,d=n===this.state._data.length,h=0!==n&&!d;let v="kol-table-selection-indeterminate";d&&!h&&(v="kol-table-selection-none"),0===n&&(v="kol-table-selection-all");const b=r(v);return e("th",{key:"thead-0-selection",class:"selection-cell selection-control"},e("div",{class:"input "+(h?"indeterminate":d?"checked":"")},e("label",{class:"checkbox-container"},e(o,{class:"icon",_icons:"codicon "+(h?"codicon-remove":d?"codicon-check":""),_label:""}),e("input",{ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:d&&!h,"aria-label":b,type:"checkbox",onInput:e=>{var t;const a=d?[]:this.state._data.map((e=>null==e?void 0:e[s]));c("selection-change",this.host,a),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t[g.onSelectionChange])&&this.state._on[g.onSelectionChange](e,a)}})),e(a,{"aria-hidden":"true",class:"input-tooltip",_align:"right",_id:`${v}-label`,_label:b})))}renderHeaderTdCell(){return e(i,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&e("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(t,a,i,o){let s,n="codicon codicon-fold";if(t.sortDirection)switch(t.sortDirection){case"ASC":n="codicon codicon-chevron-up",s="ascending";break;case"DESC":n="codicon codicon-chevron-down",s="descending"}const r=o?"row":"number"==typeof t.colSpan&&t.colSpan>1?"colgroup":"col";return e("th",{key:`${a}-${i}-${t.label}`,class:t.textAlign?`align-${t.textAlign}`:void 0,scope:r,colSpan:t.colSpan,rowSpan:t.rowSpan,style:{width:t.width},"aria-sort":s,"data-sort":`sort-${t.sortDirection}`},t.sortDirection?e(l,{class:"table-sort-button",exportparts:"icon",_icons:{right:n},_label:t.label,_on:{onClick:e=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.onSort)&&t.key&&t.sortDirection&&this.state._on.onSort(e,{key:t.key,currentSortDirection:t.sortDirection})}}}):t.label)}renderSpacer(t,a){var i,l;const o=(null===(i=this.state._headerCells.vertical)||void 0===i?void 0:i.length)||0,s=null===(l=null==a?void 0:a[0])||void 0===l?void 0:l.reduce(((e,t)=>e+(t.colSpan||1)),0),n=this.state._selection?1:0;return e("tr",{"aria-hidden":"true",class:`${t}-spacer`},e("td",{colSpan:o+s+n}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const t=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return e("tfoot",null,[this.renderSpacer("foot",t),t.map(((e,t)=>this.renderTableRow(e,t,!0)))])}render(){const t=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],e(s,{key:"3d8cbbd8aff912feb77c6e9b9c90ba8e44d83ca0",class:"kol-table-stateless-wc"},e("div",{key:"0eb9aa614a72d46bf894a9daa320bdb1ed04e2c0",ref:e=>this.tableDivElement=e,class:"table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},e("table",{key:"ffeb4467df0290ea75fe1c5685a03760b2d34bd2",style:{minWidth:this.state._minWidth}},e("div",{key:"f3a7316e412edd349207cfb24be56fe910d550ca",class:"focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),e("caption",{key:"dcef950b77260ed11db14acf5fa6bb370f4240a9",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&e("thead",{key:"feaa81acf3ba4a45baa1aa60efa1cbeb5691f329"},[this.state._headerCells.horizontal.map(((t,a)=>e("tr",{key:`thead-${a}`},this.state._selection&&this.renderHeadingSelectionCell(),0===a&&this.renderHeaderTdCell(),Array.isArray(t)&&t.map(((t,i)=>!0===t.asTd?e("td",{key:`thead-${a}-${i}-${t.label}`,class:{[t.textAlign]:"string"==typeof t.textAlign&&t.textAlign.length>0},colSpan:t.colSpan,rowSpan:t.rowSpan,style:{textAlign:t.textAlign,width:t.width},ref:"function"==typeof t.render?e=>{this.cellRender(t,e)}:void 0},"function"!=typeof t.render?t.label:""):this.renderHeadingCell(t,a,i,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),e("tbody",{key:"f6f98b88e9d5520d7681023ea324cba6cba74506"},t.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot())))}get host(){return n(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{j as kol_table_stateless_wc};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as n,h as t,H as e}from"./index-
|
4
|
+
import{r as n,h as t,H as e}from"./index-a49af574.js";import{o as i}from"./component-names-aa3cbc3c.js";const o="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host,\n .kol-table-stateless-wc {\n display: block;\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .table {\n max-width: 100%;\n overflow-x: auto;\n overflow-y: hidden;\n }\n table {\n width: 100%;\n }\n caption {\n text-align: start;\n }\n .focus-element {\n font-size: 0;\n }\n .focus-element:focus {\n outline: 0 !important;\n }\n .table:has(.focus-element:focus) {\n /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto Highlight;\n outline: calc(5rem / var(--kolibri-root-font-size, 16)) auto -webkit-focus-ring-color;\n outline-offset: calc(2rem / var(--kolibri-root-font-size, 16));\n }\n .table-sort-button .button {\n color: inherit;\n }\n tbody th,\n th.align-left {\n text-align: left;\n }\n tbody th .table-sort-button .button-inner,\n th.align-left .table-sort-button .button-inner {\n justify-items: start;\n }\n th.align-center {\n text-align: center;\n }\n th.align-center .table-sort-button .button-inner {\n justify-items: center;\n }\n th.align-right {\n text-align: right;\n }\n th.align-right .table-sort-button .button-inner {\n justify-items: end;\n }\n tr.foot-spacer,\n tr.head-spacer {\n display: none;\n }\n .selection-header-cell {\n width: 0;\n }\n .selection-cell {\n width: var(--a11y-min-size);\n height: var(--a11y-min-size);\n white-space: nowrap;\n }\n .input label {\n align-items: center;\n cursor: pointer;\n display: flex;\n height: var(--a11y-min-size);\n justify-content: center;\n position: relative;\n width: var(--a11y-min-size);\n }\n .input .icon {\n display: block;\n inset: auto;\n position: absolute;\n z-index: 1;\n }\n .input input {\n appearance: none;\n border-style: solid;\n cursor: pointer;\n margin: 0;\n }\n .input input:before {\n content: \"\";\n }\n .input input[type=checkbox] {\n position: relative;\n display: flex;\n height: calc(var(--a11y-min-size) / 2);\n width: calc(var(--a11y-min-size) / 2);\n align-items: center;\n justify-content: center;\n background-color: rgb(255, 255, 255);\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n line-height: 1.5;\n transition: all 0.5s ease 0s;\n }\n .input input[type=radio] {\n display: flex;\n border-width: calc(2rem / var(--kolibri-root-font-size, 16));\n border-radius: 100%;\n height: 1.5em;\n min-height: 1.5em;\n min-width: 1.5em;\n padding: 0;\n width: 1.5em;\n }\n .input input[type=radio]:before {\n border-radius: 100%;\n margin: auto;\n height: 0.75em;\n width: 0.75em;\n }\n .input input[type=radio]:checked:before {\n background-color: #000;\n }\n @media (forced-colors: active) {\n .input input[type=radio]:checked:before {\n /* Give it a visible background in forced colors mode */\n background-color: selectedItem !important;\n }\n }\n}",a=o,l=class{constructor(t){n(this,t),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return t(e,{key:"6ea545e66ef2fa5aa3f8819a0bc7b9415787b9dc",class:"kol-table-stateless"},t(i,{key:"77cab98467dca63232e722bcf04aad9c0a6a6dae",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection}))}};l.style={default:a};export{l as kol_table_stateless};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as i,h as t}from"./index-
|
4
|
+
import{r as i,h as t}from"./index-a49af574.js";import{n as e}from"./component-names-aa3cbc3c.js";const n=class{constructor(t){i(this,t),this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0}render(){return t(e,{key:"e1d18c9786ce4d7501e6652b3cfef427c5e7471c",_allowMultiSort:this._allowMultiSort,_data:this._data,_dataFoot:this._dataFoot,_headers:this._headers,_label:this._label,_minWidth:this._minWidth,_pagination:this._pagination,_paginationPosition:this._paginationPosition,_selection:this._selection,_on:this._on})}};export{n as kol_table};
|
@@ -1,4 +1,4 @@
|
|
1
1
|
/*!
|
2
2
|
* KoliBri - The accessible HTML-Standard
|
3
3
|
*/
|
4
|
-
import{r as t,h as n,H as e,g as i}from"./index-10e4924f.js";import{t as o}from"./i18n-5fe08f1c.js";import{c as s}from"./component-names-d278f819.js";import{w as a,j as l,f as r,s as d,k as h,g as c,h as b,v as u}from"./prop.validators-c5e6ad2d.js";import{a as f}from"./align-e29ed804.js";import{v as p}from"./label-d70e7c34.js";import{L as m}from"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";const g=["select-automatic","select-manual"],v=(t,e)=>{a(t,"_behavior",(t=>"string"==typeof t&&g.includes(t)),new Set([`KoliBriTabBehavior {${g.join(", ")}`]),e)};var y;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(y||(y={}));const w="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n .tabs-content {\n overflow: auto;\n }\n .tabs-button-group {\n display: flex;\n flex-wrap: wrap;\n }\n .tabs-button-group button {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n display: block;\n }\n div.grid,\n div[role=tabpanel] {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n flex-direction: column;\n order: 2;\n }\n :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n width: 100%;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n flex-direction: column;\n order: 0;\n }\n :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n width: 100%;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n margin: 0 1em;\n }\n :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top .tabs-button-group > div > div {\n margin: 0 1em;\n }\n :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n}",k=w,x=class{constructor(e){t(this,e),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case y.ArrowRight:this.goToNextTab(t);break;case y.ArrowLeft:this.goToPreviousTab(t);break;case y.Space:case y.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);l("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(s,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&n(s,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n(e,{key:"0d535b55a612656edc499daa7ded4edfde600fe5",class:"kol-tabs"},n("div",{key:"1233a6c4d1d90a1fb4944e01bcd6032d69c36346",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),n("div",{key:"f1b9332c5245e5bf01297be11139ef5cbe7a9782",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){f(this,t)}validateBehavior(t){v(this,t)}validateLabel(t){p(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){r("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:m.debug("[KolTabs] The label text for New in {\n onCreate: {\n label: string (!),\n callback: Function\n }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:m.debug("[KolTabs] The onCreate callback function for New in {\n onCreate: {\n label: string,\n callback: Function (!)\n }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),d(this,"_on",e)}}validateSelected(t){h(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),b("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}focusTabById(t){if(this.tabPanelsElement){const e=u(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.focusTabById(e)}get host(){return i(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};x.style={default:k};export{x as kol_tabs};
|
4
|
+
import{r as t,h as n,H as e,g as i}from"./index-a49af574.js";import{t as o}from"./i18n-5fe08f1c.js";import{a as s}from"./component-names-aa3cbc3c.js";import{w as a,j as l,f as r,s as d,k as h,g as c,h as b,v as u}from"./prop.validators-c5e6ad2d.js";import{v as f}from"./align-3f029493.js";import{v as p}from"./label-d70e7c34.js";import{L as m}from"./dev.utils-fab45cbc.js";import"./i18n-7ea9f137.js";import"./reuse-32931294.js";import"./index-541b643a.js";const g=["select-automatic","select-manual"],v=(t,e)=>{a(t,"_behavior",(t=>"string"==typeof t&&g.includes(t)),new Set([`KoliBriTabBehavior {${g.join(", ")}`]),e)};var y;!function(t){t.ArrowDown="ArrowDown",t.ArrowLeft="ArrowLeft",t.ArrowRight="ArrowRight",t.ArrowUp="ArrowUp",t.Enter="Enter",t.Space=" "}(y||(y={}));const w="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n :host {\n /*\n * Minimum size of interactive elements.\n */\n --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n /*\n * No element should be used without a background and font color whose contrast ratio has\n * not been checked. By initially setting the background color to white and the font color\n * to black, the contrast ratio is ensured and explicit adjustment is forced.\n */\n background-color: white;\n color: black;\n /*\n * Verdana is an accessible font that can be used without requiring additional loading time.\n */\n font-family: Verdana;\n }\n * {\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n hyphens: auto;\n /*\n * Letter spacing is required for all texts.\n */\n letter-spacing: inherit;\n /*\n * This rule enables the word dividing for all texts. That is important for high zoom levels.\n */\n word-break: break-word;\n /*\n * Word spacing is required for all texts.\n */\n word-spacing: inherit;\n }\n /*\n * All interactive elements should have a minimum size of rem(44).\n */\n /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n /* option, */\n /* select, */\n /* textarea, */\n [role=button],\n button:not([role=link]),\n .kol-input .input {\n min-height: var(--a11y-min-size);\n min-width: var(--a11y-min-size);\n }\n /*\n * Some interactive elements should not inherit the font-family and font-size.\n */\n a,\n button,\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n input,\n option,\n select,\n textarea {\n /*\n * All elements should inherit the font family from his parent element.\n */\n font-family: inherit;\n /*\n * All elements should inherit the font size from his parent element.\n */\n font-size: inherit;\n }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: calc(1rem / var(--kolibri-root-font-size, 16));\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n /*\n * Dieses CSS stellt sicher, dass der Standard-Style\n * von A und Button resettet werden.\n */\n :is(a, button) {\n background-color: transparent;\n border: none;\n margin: 0;\n padding: 0;\n width: 100%; /* 100% needed for custom width from outside */\n }\n /*\n * Ensure elements with hidden attribute to be actually not visible\n * @see https://meowni.ca/hidden.is.a.lie.html\n */\n [hidden] {\n display: none !important;\n }\n}\n@layer kol-global {\n :host {\n /*\n * The max-width is needed to prevent the table from overflowing the\n * parent node, if the table is wider than the parent node.\n */\n max-width: 100%;\n }\n * {\n /*\n * We prefer to box-sizing: border-box for all elements.\n */\n box-sizing: border-box;\n }\n /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n .kol-span-wc {\n display: grid;\n place-items: center;\n }\n /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n .kol-span-wc > span {\n display: flex;\n place-items: center;\n }\n a,\n button {\n cursor: pointer;\n }\n /* This is the text label. */\n .hide-label > .kol-span-wc > span > span {\n display: none;\n }\n /* Reset browser agent style. */\n button:disabled {\n color: unset;\n }\n .disabled label,\n .disabled:focus-within label,\n [aria-disabled=true],\n [aria-disabled=true]:focus,\n [disabled],\n [disabled]:focus {\n cursor: not-allowed;\n opacity: 0.5;\n outline: none;\n }\n [aria-disabled=true]:focus .kol-span-wc,\n [disabled]:focus .kol-span-wc {\n outline: none !important;\n }\n}\n@layer kol-component {\n :host {\n display: block;\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n .kol-tooltip-wc {\n display: contents;\n }\n .kol-tooltip-wc .tooltip-floating {\n animation-duration: 0.5s;\n animation-iteration-count: 1;\n animation-name: fadeInOpacity;\n animation-timing-function: ease-in;\n box-sizing: border-box;\n display: none;\n position: fixed;\n visibility: hidden;\n /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n top: 0;\n left: 0;\n max-width: 90vw;\n max-height: 90vh;\n /* Can be used to specify the tooltip-width from the outside. Unset by default. */\n width: var(--kol-tooltip-width);\n }\n /* Shared between content and arrow */\n .kol-tooltip-wc .tooltip-area {\n background-color: #fff;\n color: #000;\n }\n .kol-tooltip-wc .tooltip-arrow {\n height: calc(10rem / var(--kolibri-root-font-size, 16));\n position: absolute;\n transform: rotate(45deg);\n width: calc(10rem / var(--kolibri-root-font-size, 16));\n z-index: 999;\n }\n .kol-tooltip-wc .tooltip-content {\n position: relative;\n z-index: 1000;\n }\n @keyframes fadeInOpacity {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n }\n}\n@layer kol-component {\n :host {\n font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n }\n :host > div {\n display: grid;\n }\n .tabs-content {\n overflow: auto;\n }\n .tabs-button-group {\n display: flex;\n flex-wrap: wrap;\n }\n .tabs-button-group button {\n border-bottom-color: transparent;\n border-bottom-style: solid;\n display: block;\n }\n div.grid,\n div[role=tabpanel] {\n height: 100%;\n }\n :host > .tabs-align-right {\n display: grid;\n grid-template-columns: 1fr auto;\n }\n :host > .tabs-align-right .tabs-button-group {\n flex-direction: column;\n order: 2;\n }\n :host > .tabs-align-right .tabs-button-group .kol-button-wc {\n width: 100%;\n }\n :host > .tabs-align-left {\n display: grid;\n grid-template-columns: auto 1fr;\n }\n :host > .tabs-align-left .tabs-button-group {\n flex-direction: column;\n order: 0;\n }\n :host > .tabs-align-left .tabs-button-group .kol-button-wc {\n width: 100%;\n }\n :host > .tabs-align-bottom {\n display: grid;\n grid-template-rows: 1fr auto;\n }\n :host > .tabs-align-bottom .tabs-button-group {\n order: 2;\n }\n :host > .tabs-align-bottom .tabs-button-group > div {\n display: flex;\n margin: 0 1em;\n }\n :host > .tabs-align-bottom .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n :host > .tabs-align-top {\n display: grid;\n grid-template-rows: auto 1fr;\n }\n :host > .tabs-align-top .tabs-button-group {\n order: 0;\n }\n :host > .tabs-align-top .tabs-button-group > div {\n display: flex;\n }\n :host > .tabs-align-top .tabs-button-group > div > div {\n margin: 0 1em;\n }\n :host > .tabs-align-top .tabs-button-group > div > div:first-child {\n margin: 0 1em 0 0;\n }\n}",k=w,x=class{constructor(e){t(this,e),this.onCreateLabel=`${o("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case y.ArrowRight:this.goToNextTab(t);break;case y.ArrowLeft:this.goToPreviousTab(t);break;case y.Space:case y.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault(),t.stopPropagation()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);l("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.handleTabPanels=()=>{var t,e,n;if(this.tabPanelHost instanceof HTMLDivElement)for(let o=this.tabPanelHost.children.length;o<this.state._tabs.length;o++){const a=document.createElement("div");a.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),a.setAttribute("id",`tabpanel-${o}`),a.setAttribute("role","tabpanel"),a.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),a.appendChild(i),this.tabPanelHost.appendChild(a),(null===(t=this.host)||void 0===t?void 0:t.children)instanceof HTMLCollection&&(null===(e=this.host)||void 0===e?void 0:e.children[o])&&(null===(n=this.host)||void 0===n||n.children[o].setAttribute("slot",`tabpanel-slot-${o}`))}},this.onCreate=t=>{var e,n;t.preventDefault(),t.stopPropagation(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(t))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return n("div",{"aria-label":this.state._label,class:"tabs-button-group kol-button-group-wc",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map(((t,e)=>n(s,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_variant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e}))),this.showCreateTab&&n(s,{class:"create-button",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return n(e,{key:"ecb9f400c0b86ce70c0ec56b1d15905d26f81709",class:"kol-tabs"},n("div",{key:"b2adbad841fb0df54d995982c51541473bd5a7f9",ref:t=>{this.tabPanelsElement=t},class:{[`tabs-align-${this.state._align}`]:!0}},this.renderButtonGroup(),n("div",{key:"c4c00309ad5acf433265bc68b92859eeab52fbb9",class:"tabs-content",ref:this.catchTabPanelHost})))}validateAlign(t){f(this,t)}validateBehavior(t){v(this,t)}validateLabel(t){p(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){r("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const e={};"function"!=typeof t.onCreate&&"object"!=typeof t.onCreate||("object"==typeof t.onCreate?("string"==typeof t.onCreate.label&&t.onCreate.label.length>0?this.onCreateLabel=t.onCreate.label:m.debug("[KolTabs] The label text for New in {\n onCreate: {\n label: string (!),\n callback: Function\n }\n} is not set correctly."),"function"==typeof t.onCreate.callback?e.onCreate=t.onCreate.callback:m.debug("[KolTabs] The onCreate callback function for New in {\n onCreate: {\n label: string,\n callback: Function (!)\n }\n} is not set correctly.")):e.onCreate=t.onCreate,this.showCreateTab="function"==typeof e.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),d(this,"_on",e)}}validateSelected(t){h(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){c(this,"_tabs",(t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0),t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs}}),b("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior)}componentDidRender(){if(this.handleTabPanels(),this.tabPanelHost instanceof HTMLDivElement)for(let t=0;t<this.tabPanelHost.children.length;t++)t!==this.state._selected?this.tabPanelHost.children[t].setAttribute("hidden",""):this.tabPanelHost.children[t].removeAttribute("hidden")}focusTabById(t){if(this.tabPanelsElement){const e=u(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.focusTabById(e)}get host(){return i(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};x.style={default:k};export{x as kol_tabs};
|