@koobiq/components 17.0.0-rc.10 → 17.0.0-rc.12
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/alert/public-api.d.ts +1 -1
- package/autocomplete/public-api.d.ts +2 -2
- package/badge/public-api.d.ts +1 -1
- package/button/button.component.d.ts +2 -2
- package/button/public-api.d.ts +1 -1
- package/button-toggle/public-api.d.ts +1 -1
- package/card/card.component.d.ts +1 -1
- package/card/public-api.d.ts +1 -1
- package/code-block/code-block.component.d.ts +2 -2
- package/code-block/public-api.d.ts +1 -1
- package/core/animation/index.d.ts +1 -1
- package/core/common-behaviors/index.d.ts +3 -3
- package/core/datetime/index.d.ts +1 -1
- package/core/formatters/index.d.ts +1 -1
- package/core/forms/index.d.ts +1 -1
- package/core/locales/index.d.ts +1 -1
- package/core/option/index.d.ts +2 -2
- package/core/option/optgroup.scss +2 -2
- package/core/pop-up/pop-up-trigger.d.ts +1 -1
- package/core/public-api.d.ts +3 -3
- package/core/select/constants.d.ts +1 -1
- package/core/select/index.d.ts +3 -3
- package/core/styles/common/_animation.scss +8 -8
- package/core/styles/common/_list.scss +23 -62
- package/core/styles/theming/_components-theming.scss +331 -331
- package/core/styles/theming/_theming.scss +3 -3
- package/core/styles/typography/_typography-utils.scss +8 -1
- package/core/styles/typography/_typography.scss +7 -7
- package/core/styles/visual/_layout.scss +1 -1
- package/core/utils/data-size/index.d.ts +1 -1
- package/core/utils/public-api.d.ts +1 -1
- package/datepicker/datepicker-input.directive.d.ts +1 -0
- package/datepicker/public-api.d.ts +4 -4
- package/dl/public-api.d.ts +1 -1
- package/dropdown/_dropdown-theme.scss +4 -1
- package/dropdown/dropdown-content.directive.d.ts +1 -1
- package/dropdown/dropdown-item.component.d.ts +1 -1
- package/dropdown/dropdown-item.scss +9 -6
- package/dropdown/dropdown.component.d.ts +1 -1
- package/dropdown/public-api.d.ts +5 -5
- package/ellipsis-center/ellipsis-center.directive.d.ts +1 -1
- package/empty-state/public-api.d.ts +1 -1
- package/esm2022/alert/alert.component.mjs +3 -3
- package/esm2022/alert/alert.module.mjs +1 -1
- package/esm2022/alert/public-api.mjs +2 -2
- package/esm2022/autocomplete/autocomplete-origin.directive.mjs +1 -1
- package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +23 -31
- package/esm2022/autocomplete/autocomplete.component.mjs +14 -9
- package/esm2022/autocomplete/autocomplete.module.mjs +3 -3
- package/esm2022/autocomplete/public-api.mjs +3 -3
- package/esm2022/badge/badge.component.mjs +6 -4
- package/esm2022/badge/badge.module.mjs +1 -1
- package/esm2022/badge/public-api.mjs +2 -2
- package/esm2022/button/button.component.mjs +12 -9
- package/esm2022/button/button.module.mjs +1 -1
- package/esm2022/button/public-api.mjs +2 -2
- package/esm2022/button-toggle/button-toggle.component.mjs +24 -16
- package/esm2022/button-toggle/button-toggle.module.mjs +1 -1
- package/esm2022/button-toggle/public-api.mjs +2 -2
- package/esm2022/card/card.component.mjs +2 -2
- package/esm2022/card/card.module.mjs +1 -1
- package/esm2022/card/public-api.mjs +2 -2
- package/esm2022/checkbox/checkbox-config.mjs +1 -1
- package/esm2022/checkbox/checkbox-module.mjs +1 -1
- package/esm2022/checkbox/checkbox-required-validator.mjs +1 -1
- package/esm2022/checkbox/checkbox.mjs +6 -6
- package/esm2022/checkbox/public-api.mjs +1 -1
- package/esm2022/code-block/actionbar.component.mjs +4 -6
- package/esm2022/code-block/code-block.component.mjs +16 -13
- package/esm2022/code-block/code-block.module.mjs +9 -5
- package/esm2022/code-block/public-api.mjs +2 -2
- package/esm2022/core/animation/fade-animations.mjs +1 -1
- package/esm2022/core/animation/index.mjs +2 -2
- package/esm2022/core/animation/select-animations.mjs +2 -2
- package/esm2022/core/common-behaviors/color.mjs +4 -2
- package/esm2022/core/common-behaviors/common-module.mjs +2 -2
- package/esm2022/core/common-behaviors/constructor.mjs +1 -1
- package/esm2022/core/common-behaviors/disabled.mjs +1 -1
- package/esm2022/core/common-behaviors/error-state.mjs +1 -1
- package/esm2022/core/common-behaviors/index.mjs +4 -4
- package/esm2022/core/common-behaviors/tabindex.mjs +1 -1
- package/esm2022/core/datetime/date-adapter.mjs +1 -1
- package/esm2022/core/datetime/date-formats.mjs +1 -1
- package/esm2022/core/datetime/index.mjs +2 -2
- package/esm2022/core/error/error-options.mjs +1 -1
- package/esm2022/core/form-field/form-field-ref.mjs +1 -1
- package/esm2022/core/formatters/date/formatter.mjs +1 -1
- package/esm2022/core/formatters/date/formatter.pipe.mjs +1 -1
- package/esm2022/core/formatters/index.mjs +2 -2
- package/esm2022/core/formatters/number/formatter.mjs +19 -20
- package/esm2022/core/forms/forms-module.mjs +1 -1
- package/esm2022/core/forms/forms.directive.mjs +1 -1
- package/esm2022/core/forms/index.mjs +2 -2
- package/esm2022/core/highlight/highlight.pipe.mjs +1 -1
- package/esm2022/core/highlight/index.mjs +1 -1
- package/esm2022/core/label/label-options.mjs +1 -1
- package/esm2022/core/line/line.mjs +2 -2
- package/esm2022/core/locales/en-US.mjs +1 -1
- package/esm2022/core/locales/es-LA.mjs +1 -1
- package/esm2022/core/locales/fa-IR.mjs +1 -1
- package/esm2022/core/locales/index.mjs +2 -2
- package/esm2022/core/locales/locale-service.mjs +8 -5
- package/esm2022/core/locales/locale-service.module.mjs +1 -1
- package/esm2022/core/locales/pt-BR.mjs +1 -1
- package/esm2022/core/locales/ru-RU.mjs +3 -3
- package/esm2022/core/locales/zh-CN.mjs +1 -1
- package/esm2022/core/option/action.mjs +20 -12
- package/esm2022/core/option/index.mjs +3 -3
- package/esm2022/core/option/optgroup.mjs +4 -4
- package/esm2022/core/option/option-module.mjs +1 -1
- package/esm2022/core/option/option.mjs +13 -7
- package/esm2022/core/overlay/overlay-position-map.mjs +1 -1
- package/esm2022/core/pop-up/pop-up-trigger.mjs +15 -23
- package/esm2022/core/pop-up/pop-up.mjs +1 -1
- package/esm2022/core/public-api.mjs +4 -4
- package/esm2022/core/select/common.mjs +2 -2
- package/esm2022/core/select/constants.mjs +1 -1
- package/esm2022/core/select/index.mjs +4 -4
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.module.mjs +1 -1
- package/esm2022/core/services/measure-scrollbar.service.mjs +1 -1
- package/esm2022/core/services/theme.service.mjs +2 -4
- package/esm2022/core/title/title-text-ref.mjs +1 -1
- package/esm2022/core/utils/data-size/config.mjs +1 -1
- package/esm2022/core/utils/data-size/data-size.pipe.mjs +2 -3
- package/esm2022/core/utils/data-size/index.mjs +2 -2
- package/esm2022/core/utils/data-size/size.mjs +3 -6
- package/esm2022/core/utils/public-api.mjs +2 -2
- package/esm2022/core/utils/utils.mjs +4 -2
- package/esm2022/core/validation/validation.mjs +4 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/datepicker/calendar-body.component.mjs +3 -3
- package/esm2022/datepicker/calendar-header.component.mjs +8 -7
- package/esm2022/datepicker/calendar.component.mjs +6 -6
- package/esm2022/datepicker/datepicker-animations.mjs +1 -1
- package/esm2022/datepicker/datepicker-errors.mjs +1 -1
- package/esm2022/datepicker/datepicker-input.directive.mjs +42 -34
- package/esm2022/datepicker/datepicker-intl.mjs +1 -1
- package/esm2022/datepicker/datepicker-module.mjs +2 -2
- package/esm2022/datepicker/datepicker-toggle.component.mjs +11 -10
- package/esm2022/datepicker/datepicker.component.mjs +15 -15
- package/esm2022/datepicker/month-view.component.mjs +14 -13
- package/esm2022/datepicker/public-api.mjs +5 -5
- package/esm2022/divider/divider.component.mjs +1 -1
- package/esm2022/divider/divider.module.mjs +1 -1
- package/esm2022/dl/dl.component.mjs +1 -1
- package/esm2022/dl/dl.module.mjs +2 -2
- package/esm2022/dl/public-api.mjs +2 -2
- package/esm2022/dropdown/dropdown-animations.mjs +2 -2
- package/esm2022/dropdown/dropdown-content.directive.mjs +3 -3
- package/esm2022/dropdown/dropdown-item.component.mjs +5 -5
- package/esm2022/dropdown/dropdown-trigger.directive.mjs +22 -28
- package/esm2022/dropdown/dropdown.component.mjs +10 -18
- package/esm2022/dropdown/dropdown.module.mjs +1 -1
- package/esm2022/dropdown/dropdown.types.mjs +1 -1
- package/esm2022/dropdown/public-api.mjs +6 -6
- package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +3 -3
- package/esm2022/empty-state/empty-state.component.mjs +1 -1
- package/esm2022/empty-state/empty-state.module.mjs +2 -2
- package/esm2022/empty-state/public-api.mjs +2 -2
- package/esm2022/file-upload/file-drop.mjs +2 -2
- package/esm2022/file-upload/file-upload.mjs +1 -1
- package/esm2022/file-upload/file-upload.module.mjs +2 -2
- package/esm2022/file-upload/index.mjs +1 -1
- package/esm2022/file-upload/multiple-file-upload.component.mjs +16 -12
- package/esm2022/file-upload/public-api.mjs +2 -2
- package/esm2022/file-upload/single-file-upload.component.mjs +14 -10
- package/esm2022/form-field/cleaner.mjs +13 -3
- package/esm2022/form-field/form-field-control.mjs +1 -1
- package/esm2022/form-field/form-field-errors.mjs +1 -1
- package/esm2022/form-field/form-field.mjs +8 -13
- package/esm2022/form-field/form-field.module.mjs +1 -1
- package/esm2022/form-field/hint.mjs +2 -2
- package/esm2022/form-field/password-hint.mjs +13 -13
- package/esm2022/form-field/password-toggle.mjs +4 -7
- package/esm2022/form-field/prefix.mjs +1 -1
- package/esm2022/form-field/public-api.mjs +4 -4
- package/esm2022/form-field/stepper.mjs +33 -29
- package/esm2022/form-field/suffix.mjs +1 -1
- package/esm2022/form-field/validate.directive.mjs +6 -5
- package/esm2022/icon/icon-button.component.mjs +2 -2
- package/esm2022/icon/icon-item.component.mjs +1 -1
- package/esm2022/icon/icon.component.mjs +3 -4
- package/esm2022/icon/icon.module.mjs +1 -1
- package/esm2022/icon/public-api.mjs +3 -3
- package/esm2022/input/input-number-validators.mjs +1 -1
- package/esm2022/input/input-number.mjs +34 -35
- package/esm2022/input/input-password.mjs +13 -7
- package/esm2022/input/input-value-accessor.mjs +1 -1
- package/esm2022/input/input.mjs +13 -7
- package/esm2022/input/input.module.mjs +1 -1
- package/esm2022/input/public-api.mjs +3 -3
- package/esm2022/link/link.component.mjs +2 -2
- package/esm2022/link/link.module.mjs +1 -1
- package/esm2022/link/public-api.mjs +2 -2
- package/esm2022/list/list-selection.component.mjs +34 -36
- package/esm2022/list/list.component.mjs +3 -3
- package/esm2022/list/list.module.mjs +2 -2
- package/esm2022/list/public-api.mjs +3 -3
- package/esm2022/loader-overlay/loader-overlay.component.mjs +3 -3
- package/esm2022/loader-overlay/loader-overlay.module.mjs +1 -1
- package/esm2022/loader-overlay/public-api.mjs +2 -2
- package/esm2022/markdown/markdown.component.mjs +20 -6
- package/esm2022/markdown/markdown.module.mjs +1 -1
- package/esm2022/markdown/markdown.service.mjs +1 -1
- package/esm2022/modal/css-unit.pipe.mjs +1 -1
- package/esm2022/modal/modal-control.service.mjs +3 -2
- package/esm2022/modal/modal-ref.class.mjs +1 -1
- package/esm2022/modal/modal-util.mjs +1 -1
- package/esm2022/modal/modal.component.mjs +50 -27
- package/esm2022/modal/modal.directive.mjs +27 -11
- package/esm2022/modal/modal.module.mjs +2 -2
- package/esm2022/modal/modal.service.mjs +3 -2
- package/esm2022/modal/modal.type.mjs +1 -1
- package/esm2022/modal/public-api.mjs +3 -3
- package/esm2022/navbar/index.mjs +1 -1
- package/esm2022/navbar/navbar-item.component.mjs +37 -28
- package/esm2022/navbar/navbar.component.mjs +19 -28
- package/esm2022/navbar/navbar.module.mjs +2 -2
- package/esm2022/navbar/public-api.mjs +3 -3
- package/esm2022/navbar/vertical-navbar.component.mjs +17 -18
- package/esm2022/popover/popover-animations.mjs +1 -1
- package/esm2022/popover/popover-confirm.component.mjs +3 -3
- package/esm2022/popover/popover.component.mjs +5 -5
- package/esm2022/popover/popover.module.mjs +1 -1
- package/esm2022/popover/public-api.mjs +3 -3
- package/esm2022/progress-bar/progress-bar.component.mjs +4 -4
- package/esm2022/progress-bar/progress-bar.module.mjs +2 -2
- package/esm2022/progress-bar/public-api.mjs +2 -2
- package/esm2022/progress-spinner/progress-spinner.component.mjs +4 -4
- package/esm2022/progress-spinner/progress-spinner.module.mjs +1 -1
- package/esm2022/progress-spinner/public-api.mjs +2 -2
- package/esm2022/radio/public-api.mjs +2 -2
- package/esm2022/radio/radio.component.mjs +9 -10
- package/esm2022/radio/radio.module.mjs +1 -1
- package/esm2022/risk-level/public-api.mjs +2 -2
- package/esm2022/risk-level/risk-level.component.mjs +1 -1
- package/esm2022/risk-level/risk-level.module.mjs +1 -1
- package/esm2022/scrollbar/public-api.mjs +2 -2
- package/esm2022/scrollbar/scrollbar.component.mjs +13 -11
- package/esm2022/scrollbar/scrollbar.directive.mjs +3 -3
- package/esm2022/scrollbar/scrollbar.module.mjs +2 -2
- package/esm2022/scrollbar/scrollbar.types.mjs +3 -2
- package/esm2022/select/public-api.mjs +3 -3
- package/esm2022/select/select-option.directive.mjs +8 -5
- package/esm2022/select/select.component.mjs +41 -64
- package/esm2022/select/select.module.mjs +1 -1
- package/esm2022/sidebar/public-api.mjs +2 -2
- package/esm2022/sidebar/sidebar-animations.mjs +1 -1
- package/esm2022/sidebar/sidebar.component.mjs +3 -3
- package/esm2022/sidebar/sidebar.module.mjs +1 -1
- package/esm2022/sidepanel/public-api.mjs +4 -4
- package/esm2022/sidepanel/sidepanel-animations.mjs +7 -3
- package/esm2022/sidepanel/sidepanel-config.mjs +1 -1
- package/esm2022/sidepanel/sidepanel-container.component.mjs +4 -4
- package/esm2022/sidepanel/sidepanel-directives.mjs +30 -16
- package/esm2022/sidepanel/sidepanel-ref.mjs +10 -4
- package/esm2022/sidepanel/sidepanel.module.mjs +1 -1
- package/esm2022/sidepanel/sidepanel.service.mjs +11 -14
- package/esm2022/splitter/public-api.mjs +2 -2
- package/esm2022/splitter/splitter.component.mjs +13 -23
- package/esm2022/splitter/splitter.module.mjs +1 -1
- package/esm2022/table/public-api.mjs +2 -2
- package/esm2022/table/table.component.mjs +1 -1
- package/esm2022/table/table.module.mjs +1 -1
- package/esm2022/tabs/paginated-tab-header.mjs +8 -11
- package/esm2022/tabs/public-api.mjs +6 -6
- package/esm2022/tabs/tab-body.component.mjs +9 -9
- package/esm2022/tabs/tab-content.directive.mjs +1 -1
- package/esm2022/tabs/tab-group.component.mjs +11 -13
- package/esm2022/tabs/tab-header.component.mjs +4 -4
- package/esm2022/tabs/tab-label-wrapper.directive.mjs +1 -1
- package/esm2022/tabs/tab-label.directive.mjs +1 -1
- package/esm2022/tabs/tab-nav-bar/index.mjs +1 -1
- package/esm2022/tabs/tab-nav-bar/tab-nav-bar.mjs +2 -2
- package/esm2022/tabs/tab.component.mjs +4 -6
- package/esm2022/tabs/tabs-animations.mjs +1 -1
- package/esm2022/tabs/tabs.module.mjs +2 -2
- package/esm2022/tags/public-api.mjs +5 -5
- package/esm2022/tags/tag-default-options.mjs +1 -1
- package/esm2022/tags/tag-input.mjs +12 -14
- package/esm2022/tags/tag-list.component.mjs +14 -20
- package/esm2022/tags/tag-text-control.mjs +1 -1
- package/esm2022/tags/tag.component.mjs +5 -7
- package/esm2022/tags/tag.module.mjs +9 -5
- package/esm2022/textarea/index.mjs +1 -1
- package/esm2022/textarea/textarea.component.mjs +4 -6
- package/esm2022/textarea/textarea.module.mjs +1 -1
- package/esm2022/timepicker/public-api.mjs +2 -2
- package/esm2022/timepicker/timepicker.constants.mjs +6 -1
- package/esm2022/timepicker/timepicker.directive.mjs +62 -26
- package/esm2022/timepicker/timepicker.module.mjs +1 -1
- package/esm2022/timezone/cities-by-filter.pipe.mjs +1 -1
- package/esm2022/timezone/timezone-option.component.mjs +12 -11
- package/esm2022/timezone/timezone-option.directive.mjs +3 -3
- package/esm2022/timezone/timezone-select.component.mjs +5 -5
- package/esm2022/timezone/timezone.module.mjs +1 -1
- package/esm2022/timezone/timezone.utils.mjs +5 -9
- package/esm2022/timezone/utc-offset.pipe.mjs +1 -1
- package/esm2022/title/public-api.mjs +2 -2
- package/esm2022/title/title.directive.mjs +9 -5
- package/esm2022/title/title.module.mjs +1 -1
- package/esm2022/toast/public-api.mjs +4 -4
- package/esm2022/toast/toast-animations.mjs +2 -2
- package/esm2022/toast/toast-container.component.mjs +3 -4
- package/esm2022/toast/toast.component.mjs +5 -5
- package/esm2022/toast/toast.module.mjs +1 -1
- package/esm2022/toast/toast.service.mjs +14 -30
- package/esm2022/toast/toast.type.mjs +1 -1
- package/esm2022/toggle/public-api.mjs +2 -2
- package/esm2022/toggle/toggle.component.mjs +17 -9
- package/esm2022/toggle/toggle.module.mjs +1 -1
- package/esm2022/tooltip/public-api.mjs +2 -2
- package/esm2022/tooltip/tooltip.animations.mjs +1 -1
- package/esm2022/tooltip/tooltip.component.mjs +7 -5
- package/esm2022/tooltip/tooltip.module.mjs +2 -2
- package/esm2022/tree/control/base-tree-control.mjs +1 -1
- package/esm2022/tree/control/flat-tree-control.filters.mjs +4 -7
- package/esm2022/tree/control/flat-tree-control.mjs +4 -7
- package/esm2022/tree/control/nested-tree-control.mjs +1 -1
- package/esm2022/tree/control/tree-control.mjs +1 -1
- package/esm2022/tree/data-source/flat-data-source.mjs +3 -8
- package/esm2022/tree/data-source/nested-data-source.mjs +2 -3
- package/esm2022/tree/node.mjs +1 -1
- package/esm2022/tree/outlet.mjs +1 -1
- package/esm2022/tree/padding.directive.mjs +4 -5
- package/esm2022/tree/public-api.mjs +11 -11
- package/esm2022/tree/toggle.mjs +8 -5
- package/esm2022/tree/tree-base.mjs +3 -3
- package/esm2022/tree/tree-errors.mjs +1 -1
- package/esm2022/tree/tree-option.component.mjs +9 -13
- package/esm2022/tree/tree-selection.component.mjs +17 -36
- package/esm2022/tree/tree.mjs +7 -3
- package/esm2022/tree/tree.module.mjs +4 -4
- package/esm2022/tree-select/public-api.mjs +2 -2
- package/esm2022/tree-select/tree-select.component.mjs +54 -64
- package/esm2022/tree-select/tree-select.module.mjs +1 -1
- package/fesm2022/koobiq-components-alert.mjs +6 -6
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-autocomplete.mjs +58 -61
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +8 -6
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-button-toggle.mjs +28 -20
- package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +14 -11
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-card.mjs +2 -2
- package/fesm2022/koobiq-components-card.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +3 -3
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +33 -28
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +323 -315
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +100 -89
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-divider.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +3 -3
- package/fesm2022/koobiq-components-dl.mjs.map +1 -1
- package/fesm2022/koobiq-components-dropdown.mjs +124 -138
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
- package/fesm2022/koobiq-components-empty-state.mjs +3 -3
- package/fesm2022/koobiq-components-empty-state.mjs.map +1 -1
- package/fesm2022/koobiq-components-file-upload.mjs +45 -37
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +69 -62
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +3 -4
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-input.mjs +61 -50
- package/fesm2022/koobiq-components-input.mjs.map +1 -1
- package/fesm2022/koobiq-components-link.mjs +1 -1
- package/fesm2022/koobiq-components-link.mjs.map +1 -1
- package/fesm2022/koobiq-components-list.mjs +39 -41
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +6 -6
- package/fesm2022/koobiq-components-loader-overlay.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +18 -4
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-modal.mjs +84 -44
- package/fesm2022/koobiq-components-modal.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +74 -75
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-popover.mjs +12 -12
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +5 -5
- package/fesm2022/koobiq-components-progress-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-spinner.mjs +5 -5
- package/fesm2022/koobiq-components-progress-spinner.mjs.map +1 -1
- package/fesm2022/koobiq-components-radio.mjs +11 -12
- package/fesm2022/koobiq-components-radio.mjs.map +1 -1
- package/fesm2022/koobiq-components-risk-level.mjs +2 -2
- package/fesm2022/koobiq-components-risk-level.mjs.map +1 -1
- package/fesm2022/koobiq-components-scrollbar.mjs +15 -12
- package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +52 -72
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidebar.mjs +3 -3
- package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidepanel.mjs +108 -87
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-splitter.mjs +15 -25
- package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
- package/fesm2022/koobiq-components-table.mjs +3 -3
- package/fesm2022/koobiq-components-table.mjs.map +1 -1
- package/fesm2022/koobiq-components-tabs.mjs +36 -43
- package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
- package/fesm2022/koobiq-components-tags.mjs +38 -44
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-textarea.mjs +2 -4
- package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
- package/fesm2022/koobiq-components-timepicker.mjs +69 -28
- package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +16 -19
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-title.mjs +11 -7
- package/fesm2022/koobiq-components-title.mjs.map +1 -1
- package/fesm2022/koobiq-components-toast.mjs +69 -86
- package/fesm2022/koobiq-components-toast.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +17 -9
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tooltip.mjs +10 -8
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +63 -73
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +506 -535
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/file-upload/multiple-file-upload.component.d.ts +2 -2
- package/file-upload/public-api.d.ts +1 -1
- package/file-upload/single-file-upload.component.d.ts +2 -2
- package/form-field/public-api.d.ts +3 -3
- package/icon/public-api.d.ts +2 -2
- package/input/public-api.d.ts +2 -2
- package/link/_link-theme.scss +1 -1
- package/link/link.component.d.ts +1 -1
- package/link/public-api.d.ts +1 -1
- package/list/list-selection.component.d.ts +2 -2
- package/list/list.scss +1 -1
- package/list/public-api.d.ts +2 -2
- package/loader-overlay/public-api.d.ts +1 -1
- package/modal/README.md +1 -1
- package/modal/modal.directive.d.ts +3 -3
- package/modal/modal.type.d.ts +2 -2
- package/modal/public-api.d.ts +2 -2
- package/navbar/_navbar-item_horizontal.scss +31 -23
- package/navbar/_navbar-item_vertical.scss +0 -2
- package/navbar/navbar-item.scss +7 -0
- package/navbar/public-api.d.ts +2 -2
- package/package.json +6 -6
- package/popover/popover.component.d.ts +1 -1
- package/popover/public-api.d.ts +2 -2
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/progress-bar/public-api.d.ts +1 -1
- package/progress-spinner/public-api.d.ts +1 -1
- package/radio/_radio-theme.scss +1 -0
- package/radio/public-api.d.ts +1 -1
- package/radio/radio.scss +12 -2
- package/risk-level/public-api.d.ts +1 -1
- package/schematics/ng-add/index.js +4 -4
- package/scrollbar/public-api.d.ts +1 -1
- package/scrollbar/scrollbar.directive.d.ts +1 -1
- package/scrollbar/scrollbar.types.d.ts +1 -1
- package/select/public-api.d.ts +2 -2
- package/select/select.component.d.ts +1 -1
- package/sidebar/public-api.d.ts +1 -1
- package/sidepanel/public-api.d.ts +3 -3
- package/sidepanel/sidepanel.scss +1 -1
- package/splitter/public-api.d.ts +1 -1
- package/table/public-api.d.ts +1 -1
- package/tabs/paginated-tab-header.d.ts +1 -1
- package/tabs/public-api.d.ts +5 -5
- package/tabs/tab-body.component.d.ts +3 -3
- package/tabs/tab-group.component.d.ts +1 -1
- package/tags/public-api.d.ts +4 -4
- package/tags/tag-input.d.ts +1 -1
- package/textarea/textarea.component.d.ts +1 -1
- package/timepicker/public-api.d.ts +1 -1
- package/timepicker/timepicker.constants.d.ts +2 -0
- package/timepicker/timepicker.directive.d.ts +10 -3
- package/timezone/timezone-option.directive.d.ts +1 -1
- package/timezone/timezone.utils.d.ts +1 -1
- package/title/public-api.d.ts +1 -1
- package/toast/public-api.d.ts +3 -3
- package/toast/toast.component.scss +4 -1
- package/toast/toast.service.d.ts +2 -2
- package/toast/toast.type.d.ts +1 -1
- package/toggle/public-api.d.ts +1 -1
- package/tooltip/public-api.d.ts +1 -1
- package/tooltip/tooltip.component.d.ts +2 -2
- package/tree/public-api.d.ts +10 -10
- package/tree/tree-base.d.ts +1 -1
- package/tree/tree-option.component.d.ts +1 -1
- package/tree/tree-selection.component.d.ts +1 -1
- package/tree-select/public-api.d.ts +1 -1
- package/tree-select/tree-select.component.d.ts +6 -4
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import * as i1 from '@angular/cdk/a11y';
|
|
2
2
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
3
|
-
import
|
|
3
|
+
import * as i4 from '@angular/cdk/bidi';
|
|
4
|
+
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
5
|
+
import * as i3 from '@angular/cdk/overlay';
|
|
4
6
|
import * as i6 from '@angular/common';
|
|
5
7
|
import { DOCUMENT, CommonModule } from '@angular/common';
|
|
6
8
|
import * as i0 from '@angular/core';
|
|
7
9
|
import { Directive, ContentChildren, forwardRef, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, ContentChild, Optional, Inject, NgModule } from '@angular/core';
|
|
8
|
-
import * as i7 from '@koobiq/components/icon';
|
|
9
|
-
import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
|
|
10
|
-
import { KbqTooltipTrigger, KBQ_TOOLTIP_SCROLL_STRATEGY, TooltipModifier, KbqToolTipModule } from '@koobiq/components/tooltip';
|
|
11
|
-
import * as i4 from '@angular/cdk/bidi';
|
|
12
|
-
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
13
|
-
import * as i3 from '@angular/cdk/overlay';
|
|
14
10
|
import { isVerticalMovement, isHorizontalMovement, TAB, RIGHT_ARROW, LEFT_ARROW, DOWN_ARROW, UP_ARROW, NUMPAD_DIVIDE, SLASH, SPACE, ENTER } from '@koobiq/cdk/keycodes';
|
|
15
11
|
import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
|
|
16
12
|
import { toBoolean, PopUpTriggers, PopUpPlacements } from '@koobiq/components/core';
|
|
17
13
|
import * as i5 from '@koobiq/components/dropdown';
|
|
18
14
|
import { KbqFormField } from '@koobiq/components/form-field';
|
|
15
|
+
import * as i7 from '@koobiq/components/icon';
|
|
16
|
+
import { KbqIcon, KbqIconModule } from '@koobiq/components/icon';
|
|
17
|
+
import { KbqTooltipTrigger, KBQ_TOOLTIP_SCROLL_STRATEGY, TooltipModifier, KbqToolTipModule } from '@koobiq/components/tooltip';
|
|
19
18
|
import { merge, Subject, EMPTY } from 'rxjs';
|
|
20
19
|
import { takeUntil, startWith, debounceTime, take } from 'rxjs/operators';
|
|
21
20
|
import { FocusKeyManager } from '@koobiq/cdk/a11y';
|
|
21
|
+
import { PlatformModule } from '@angular/cdk/platform';
|
|
22
22
|
|
|
23
23
|
class KbqFocusableComponent {
|
|
24
24
|
get tabIndex() {
|
|
@@ -43,20 +43,15 @@ class KbqFocusableComponent {
|
|
|
43
43
|
});
|
|
44
44
|
}
|
|
45
45
|
ngAfterContentInit() {
|
|
46
|
-
this.keyManager = new FocusKeyManager(this.focusableItems)
|
|
47
|
-
|
|
48
|
-
this.keyManager.tabOut
|
|
49
|
-
.pipe(takeUntil(this.destroyed))
|
|
50
|
-
.subscribe(() => {
|
|
46
|
+
this.keyManager = new FocusKeyManager(this.focusableItems).withTypeAhead();
|
|
47
|
+
this.keyManager.tabOut.pipe(takeUntil(this.destroyed)).subscribe(() => {
|
|
51
48
|
this.tabIndex = -1;
|
|
52
49
|
setTimeout(() => {
|
|
53
50
|
this.tabIndex = 0;
|
|
54
51
|
this.changeDetectorRef.markForCheck();
|
|
55
52
|
});
|
|
56
53
|
});
|
|
57
|
-
this.focusableItems.changes
|
|
58
|
-
.pipe(startWith(null), takeUntil(this.destroyed))
|
|
59
|
-
.subscribe(() => {
|
|
54
|
+
this.focusableItems.changes.pipe(startWith(null), takeUntil(this.destroyed)).subscribe(() => {
|
|
60
55
|
this.resetOptions();
|
|
61
56
|
// Check to see if we need to update our tab index
|
|
62
57
|
this.updateTabIndex();
|
|
@@ -97,15 +92,13 @@ class KbqFocusableComponent {
|
|
|
97
92
|
}
|
|
98
93
|
}
|
|
99
94
|
listenToOptionsFocus() {
|
|
100
|
-
this.optionFocusSubscription = this.optionFocusChanges
|
|
101
|
-
.subscribe((event) => {
|
|
95
|
+
this.optionFocusSubscription = this.optionFocusChanges.subscribe((event) => {
|
|
102
96
|
const index = this.focusableItems.toArray().indexOf(event.item);
|
|
103
97
|
if (this.isValidIndex(index)) {
|
|
104
98
|
this.keyManager.updateActiveItem(index);
|
|
105
99
|
}
|
|
106
100
|
});
|
|
107
|
-
this.optionBlurSubscription = this.optionBlurChanges
|
|
108
|
-
.subscribe(() => this.blur());
|
|
101
|
+
this.optionBlurSubscription = this.optionBlurChanges.subscribe(() => this.blur());
|
|
109
102
|
}
|
|
110
103
|
updateTabIndex() {
|
|
111
104
|
this.tabIndex = this.focusableItems.length === 0 ? -1 : 0;
|
|
@@ -145,8 +138,7 @@ class KbqNavbar extends KbqFocusableComponent {
|
|
|
145
138
|
return this.elementRef.nativeElement.getBoundingClientRect().width;
|
|
146
139
|
}
|
|
147
140
|
get totalItemsWidth() {
|
|
148
|
-
return this.rectangleElements
|
|
149
|
-
.reduce((acc, item) => acc + item.getOuterElementWidth(), 0);
|
|
141
|
+
return this.rectangleElements.reduce((acc, item) => acc + item.getOuterElementWidth(), 0);
|
|
150
142
|
}
|
|
151
143
|
get collapsableItems() {
|
|
152
144
|
return this.navbarItems
|
|
@@ -170,8 +162,7 @@ class KbqNavbar extends KbqFocusableComponent {
|
|
|
170
162
|
}
|
|
171
163
|
};
|
|
172
164
|
this.setItemsState = () => {
|
|
173
|
-
Promise.resolve()
|
|
174
|
-
.then(() => this.rectangleElements?.forEach((item) => item.horizontal = true));
|
|
165
|
+
Promise.resolve().then(() => this.rectangleElements?.forEach((item) => (item.horizontal = true)));
|
|
175
166
|
};
|
|
176
167
|
this.resizeSubscription = this.resizeStream
|
|
177
168
|
.pipe(debounceTime(this.resizeDebounceInterval))
|
|
@@ -179,12 +170,9 @@ class KbqNavbar extends KbqFocusableComponent {
|
|
|
179
170
|
}
|
|
180
171
|
ngAfterContentInit() {
|
|
181
172
|
this.setItemsState();
|
|
182
|
-
this.rectangleElements.changes
|
|
183
|
-
.subscribe(this.setItemsState);
|
|
173
|
+
this.rectangleElements.changes.subscribe(this.setItemsState);
|
|
184
174
|
super.ngAfterContentInit();
|
|
185
|
-
this.keyManager
|
|
186
|
-
.withVerticalOrientation(false)
|
|
187
|
-
.withHorizontalOrientation('ltr');
|
|
175
|
+
this.keyManager.withVerticalOrientation(false).withHorizontalOrientation('ltr');
|
|
188
176
|
}
|
|
189
177
|
ngAfterViewInit() {
|
|
190
178
|
// Note: this wait is required for loading and rendering fonts for icons;
|
|
@@ -228,8 +216,7 @@ class KbqNavbar extends KbqFocusableComponent {
|
|
|
228
216
|
}
|
|
229
217
|
collapseItems(collapseDelta) {
|
|
230
218
|
let delta = collapseDelta;
|
|
231
|
-
const unCollapsedItems = this.collapsableItems
|
|
232
|
-
.filter((item) => !item.collapsed);
|
|
219
|
+
const unCollapsedItems = this.collapsableItems.filter((item) => !item.collapsed);
|
|
233
220
|
for (const item of unCollapsedItems) {
|
|
234
221
|
item.collapsed = true;
|
|
235
222
|
delta -= item.getTitleWidth();
|
|
@@ -250,18 +237,22 @@ class KbqNavbar extends KbqFocusableComponent {
|
|
|
250
237
|
});
|
|
251
238
|
}
|
|
252
239
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
253
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbar, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], usesInheritance: true, ngImport: i0, template:
|
|
240
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbar, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
241
|
+
<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
|
|
242
|
+
`, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:var(--kbq-size-xxl, 24px)}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:var(--kbq-size-5xl, 48px);align-items:center;padding-right:var(--kbq-size-xl, 20px);padding-left:var(--kbq-size-xl, 20px);gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);z-index:1;padding:var(--kbq-size-s, 8px);height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);padding:var(--kbq-size-l, 16px);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:var(--kbq-size-xs, 6px);right:var(--kbq-size-xs, 6px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl, 32px);min-width:var(--kbq-size-3xl, 32px);margin:var(--kbq-size-s, 8px);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s, 8px));left:calc(-1 * var(--kbq-size-s, 8px));right:calc(-1 * var(--kbq-size-s, 8px));bottom:calc(-1 * var(--kbq-size-s, 8px))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs, 4px);padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m, 12px);padding-left:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs, 4px))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m, 12px));right:calc(-1 * var(--kbq-size-m, 12px))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l, 16px);min-height:var(--kbq-size-l, 16px)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs, 6px);padding-right:var(--kbq-size-xs, 6px);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s, 8px)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s, 8px) var(--kbq-size-xs, 6px) var(--kbq-size-s, 8px) var(--kbq-size-xxs, 4px);align-items:center;gap:var(--kbq-size-s, 8px)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m, 12px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:var(--kbq-size-xxs, 4px);padding-bottom:var(--kbq-size-xxs, 4px);height:var(--kbq-size-3xl, 32px);padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:var(--kbq-size-4xl, 40px);width:var(--kbq-size-4xl, 40px);margin:var(--kbq-size-l, 16px) var(--kbq-size-l, 16px) var(--kbq-size-4xl, 40px);flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:var(--kbq-size-4xl, 40px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:var(--kbq-size-xxs, 4px);top:var(--kbq-size-4xl, 40px);max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-xxs, 4px)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-s, 8px) var(--kbq-size-l, 16px)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
254
243
|
}
|
|
255
244
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbar, decorators: [{
|
|
256
245
|
type: Component,
|
|
257
|
-
args: [{ selector: 'kbq-navbar', template:
|
|
246
|
+
args: [{ selector: 'kbq-navbar', template: `
|
|
247
|
+
<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
|
|
248
|
+
`, host: {
|
|
258
249
|
class: 'kbq-navbar',
|
|
259
250
|
'[attr.tabindex]': 'tabIndex',
|
|
260
251
|
'(focus)': 'focus()',
|
|
261
252
|
'(blur)': 'blur()',
|
|
262
253
|
'(keydown)': 'onKeyDown($event)',
|
|
263
254
|
'(window:resize)': 'resizeStream.next($event)'
|
|
264
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:var(--kbq-size-xxl, 24px)}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical
|
|
255
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:var(--kbq-size-xxl, 24px)}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:var(--kbq-size-5xl, 48px);align-items:center;padding-right:var(--kbq-size-xl, 20px);padding-left:var(--kbq-size-xl, 20px);gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);z-index:1;padding:var(--kbq-size-s, 8px);height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);padding:var(--kbq-size-l, 16px);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:var(--kbq-size-xs, 6px);right:var(--kbq-size-xs, 6px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl, 32px);min-width:var(--kbq-size-3xl, 32px);margin:var(--kbq-size-s, 8px);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s, 8px));left:calc(-1 * var(--kbq-size-s, 8px));right:calc(-1 * var(--kbq-size-s, 8px));bottom:calc(-1 * var(--kbq-size-s, 8px))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs, 4px);padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m, 12px);padding-left:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs, 4px))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m, 12px));right:calc(-1 * var(--kbq-size-m, 12px))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l, 16px);min-height:var(--kbq-size-l, 16px)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs, 6px);padding-right:var(--kbq-size-xs, 6px);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s, 8px)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s, 8px) var(--kbq-size-xs, 6px) var(--kbq-size-s, 8px) var(--kbq-size-xxs, 4px);align-items:center;gap:var(--kbq-size-s, 8px)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m, 12px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:var(--kbq-size-xxs, 4px);padding-bottom:var(--kbq-size-xxs, 4px);height:var(--kbq-size-3xl, 32px);padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:var(--kbq-size-4xl, 40px);width:var(--kbq-size-4xl, 40px);margin:var(--kbq-size-l, 16px) var(--kbq-size-l, 16px) var(--kbq-size-4xl, 40px);flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:var(--kbq-size-4xl, 40px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:var(--kbq-size-xxs, 4px);top:var(--kbq-size-4xl, 40px);max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-xxs, 4px)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-s, 8px) var(--kbq-size-l, 16px)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}\n"] }]
|
|
265
256
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { rectangleElements: [{
|
|
266
257
|
type: ContentChildren,
|
|
267
258
|
args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]
|
|
@@ -293,18 +284,15 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
|
|
|
293
284
|
this.items.forEach((item) => item.updateTooltip());
|
|
294
285
|
};
|
|
295
286
|
this.setItemsState = () => {
|
|
296
|
-
Promise.resolve()
|
|
297
|
-
.then(() => this.rectangleElements?.forEach((item) => item.vertical = true));
|
|
287
|
+
Promise.resolve().then(() => this.rectangleElements?.forEach((item) => (item.vertical = true)));
|
|
298
288
|
};
|
|
299
|
-
this.animationDone
|
|
300
|
-
.subscribe(this.updateTooltipForItems);
|
|
289
|
+
this.animationDone.subscribe(this.updateTooltipForItems);
|
|
301
290
|
}
|
|
302
291
|
ngAfterContentInit() {
|
|
303
292
|
this.setItemsState();
|
|
304
293
|
this.updateExpandedStateForItems();
|
|
305
294
|
this.updateTooltipForItems();
|
|
306
|
-
this.rectangleElements.changes
|
|
307
|
-
.subscribe(this.setItemsState);
|
|
295
|
+
this.rectangleElements.changes.subscribe(this.setItemsState);
|
|
308
296
|
super.ngAfterContentInit();
|
|
309
297
|
this.keyManager.withVerticalOrientation(true);
|
|
310
298
|
}
|
|
@@ -335,22 +323,24 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
|
|
|
335
323
|
}
|
|
336
324
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqVerticalNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
337
325
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqVerticalNavbar, selector: "kbq-vertical-navbar", inputs: { expanded: "expanded" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-vertical-navbar" }, queries: [{ propertyName: "bento", first: true, predicate: i0.forwardRef(() => KbqNavbarBento), descendants: true }, { propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true }, { propertyName: "items", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], exportAs: ["KbqVerticalNavbar"], usesInheritance: true, ngImport: i0, template: `
|
|
338
|
-
<div
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
326
|
+
<div
|
|
327
|
+
class="kbq-vertical-navbar__container"
|
|
328
|
+
[class.kbq-collapsed]="!expanded"
|
|
329
|
+
[class.kbq-expanded]="expanded"
|
|
330
|
+
>
|
|
342
331
|
<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
|
|
343
332
|
<ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle"></ng-content>
|
|
344
333
|
</div>
|
|
345
|
-
`, isInline: true, styles: [".kbq-vertical-navbar{position:relative;min-width:48px;height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl, 24px)}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-5xl, 48px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical
|
|
334
|
+
`, isInline: true, styles: [".kbq-vertical-navbar{position:relative;min-width:48px;height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl, 24px)}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-5xl, 48px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:var(--kbq-size-5xl, 48px);align-items:center;padding-right:var(--kbq-size-xl, 20px);padding-left:var(--kbq-size-xl, 20px);gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);z-index:1;padding:var(--kbq-size-s, 8px);height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);padding:var(--kbq-size-l, 16px);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:var(--kbq-size-xs, 6px);right:var(--kbq-size-xs, 6px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl, 32px);min-width:var(--kbq-size-3xl, 32px);margin:var(--kbq-size-s, 8px);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s, 8px));left:calc(-1 * var(--kbq-size-s, 8px));right:calc(-1 * var(--kbq-size-s, 8px));bottom:calc(-1 * var(--kbq-size-s, 8px))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs, 4px);padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m, 12px);padding-left:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs, 4px))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m, 12px));right:calc(-1 * var(--kbq-size-m, 12px))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l, 16px);min-height:var(--kbq-size-l, 16px)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs, 6px);padding-right:var(--kbq-size-xs, 6px);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s, 8px)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s, 8px) var(--kbq-size-xs, 6px) var(--kbq-size-s, 8px) var(--kbq-size-xxs, 4px);align-items:center;gap:var(--kbq-size-s, 8px)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m, 12px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:var(--kbq-size-xxs, 4px);padding-bottom:var(--kbq-size-xxs, 4px);height:var(--kbq-size-3xl, 32px);padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:var(--kbq-size-4xl, 40px);width:var(--kbq-size-4xl, 40px);margin:var(--kbq-size-l, 16px) var(--kbq-size-l, 16px) var(--kbq-size-4xl, 40px);flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:var(--kbq-size-4xl, 40px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:var(--kbq-size-xxs, 4px);top:var(--kbq-size-4xl, 40px);max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-xxs, 4px)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-s, 8px) var(--kbq-size-l, 16px)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
346
335
|
}
|
|
347
336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
|
|
348
337
|
type: Component,
|
|
349
338
|
args: [{ selector: 'kbq-vertical-navbar', exportAs: 'KbqVerticalNavbar', template: `
|
|
350
|
-
<div
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
339
|
+
<div
|
|
340
|
+
class="kbq-vertical-navbar__container"
|
|
341
|
+
[class.kbq-collapsed]="!expanded"
|
|
342
|
+
[class.kbq-expanded]="expanded"
|
|
343
|
+
>
|
|
354
344
|
<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
|
|
355
345
|
<ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle"></ng-content>
|
|
356
346
|
</div>
|
|
@@ -360,7 +350,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
|
|
|
360
350
|
'(focus)': 'focus()',
|
|
361
351
|
'(blur)': 'blur()',
|
|
362
352
|
'(keydown)': 'onKeyDown($event)'
|
|
363
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-vertical-navbar{position:relative;min-width:48px;height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl, 24px)}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-5xl, 48px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical
|
|
353
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-vertical-navbar{position:relative;min-width:48px;height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:var(--kbq-size-xxl, 24px)}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-size-5xl, 48px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:var(--kbq-size-5xl, 48px);align-items:center;padding-right:var(--kbq-size-xl, 20px);padding-left:var(--kbq-size-xl, 20px);gap:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);z-index:1;padding:var(--kbq-size-s, 8px);height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);padding:var(--kbq-size-l, 16px);justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-s, 8px);right:var(--kbq-size-s, 8px);bottom:var(--kbq-size-s, 8px);left:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:var(--kbq-size-xs, 6px);right:var(--kbq-size-xs, 6px)}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:var(--kbq-size-3xl, 32px);min-width:var(--kbq-size-3xl, 32px);margin:var(--kbq-size-s, 8px);justify-content:center}.kbq-navbar-item.kbq-horizontal:before{top:calc(-1 * var(--kbq-size-s, 8px));left:calc(-1 * var(--kbq-size-s, 8px));right:calc(-1 * var(--kbq-size-s, 8px));bottom:calc(-1 * var(--kbq-size-s, 8px))}.kbq-navbar-item.kbq-horizontal:after{inset:0}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:var(--kbq-size-xxs, 4px);padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){margin-left:0;margin-right:0;padding-right:var(--kbq-size-m, 12px);padding-left:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):before{left:0;right:0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{align-self:center;padding-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{justify-content:center;margin-right:var(--kbq-size-xxs, 4px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:before{right:calc(-1 * var(--kbq-size-xxs, 4px))}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:var(--kbq-size-s, 8px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:-2px;right:-2px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested:before{left:calc(-1 * var(--kbq-size-m, 12px));right:calc(-1 * var(--kbq-size-m, 12px))}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:var(--kbq-size-l, 16px);min-height:var(--kbq-size-l, 16px)}.kbq-navbar-item .kbq-button-icon{position:absolute;padding-left:var(--kbq-size-xs, 6px);padding-right:var(--kbq-size-xs, 6px);top:50%;transform:translateY(-50%)}.kbq-navbar-item:before{position:absolute;content:\"\"}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:var(--kbq-size-s, 8px)}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:var(--kbq-size-s, 8px) var(--kbq-size-xs, 6px) var(--kbq-size-s, 8px) var(--kbq-size-xxs, 4px);align-items:center;gap:var(--kbq-size-s, 8px)}.kbq-navbar-brand.kbq-horizontal:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:var(--kbq-size-m, 12px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:var(--kbq-size-xxs, 4px);padding-bottom:var(--kbq-size-xxs, 4px);height:var(--kbq-size-3xl, 32px);padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:var(--kbq-size-4xl, 40px);width:var(--kbq-size-4xl, 40px);margin:var(--kbq-size-l, 16px) var(--kbq-size-l, 16px) var(--kbq-size-4xl, 40px);flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:var(--kbq-size-4xl, 40px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:var(--kbq-size-xxs, 4px);top:var(--kbq-size-4xl, 40px);max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:var(--kbq-size-5xl, 48px);width:var(--kbq-size-5xl, 48px);justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{top:var(--kbq-size-xxs, 4px);right:var(--kbq-size-xxs, 4px);bottom:var(--kbq-size-xxs, 4px);left:var(--kbq-size-xxs, 4px)}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:var(--kbq-size-s, 8px) var(--kbq-size-l, 16px)}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:var(--kbq-size-m, 12px);margin-right:var(--kbq-size-m, 12px)}\n"] }]
|
|
364
354
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { rectangleElements: [{
|
|
365
355
|
type: ContentChildren,
|
|
366
356
|
args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]
|
|
@@ -455,23 +445,26 @@ class KbqNavbarBrand {
|
|
|
455
445
|
ngAfterContentInit() {
|
|
456
446
|
merge(this.logo ? this.logo.hovered : EMPTY, this.title ? this.title.hovered : EMPTY)
|
|
457
447
|
.pipe(takeUntil(this.destroyed))
|
|
458
|
-
.subscribe((value) => this.hovered = !!value);
|
|
459
|
-
this.navbar?.animationDone
|
|
460
|
-
.subscribe(() => this.title?.checkTextOverflown());
|
|
448
|
+
.subscribe((value) => (this.hovered = !!value));
|
|
449
|
+
this.navbar?.animationDone.subscribe(() => this.title?.checkTextOverflown());
|
|
461
450
|
}
|
|
462
451
|
ngOnDestroy() {
|
|
463
452
|
this.destroyed.next();
|
|
464
453
|
this.destroyed.complete();
|
|
465
454
|
}
|
|
466
455
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarBrand, deps: [{ token: KbqVerticalNavbar, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
467
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template:
|
|
456
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template: `
|
|
457
|
+
<ng-content></ng-content>
|
|
458
|
+
`, isInline: true }); }
|
|
468
459
|
}
|
|
469
460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarBrand, decorators: [{
|
|
470
461
|
type: Component,
|
|
471
462
|
args: [{
|
|
472
463
|
selector: 'kbq-navbar-brand, [kbq-navbar-brand]',
|
|
473
464
|
exportAs: 'kbqNavbarBrand',
|
|
474
|
-
template:
|
|
465
|
+
template: `
|
|
466
|
+
<ng-content></ng-content>
|
|
467
|
+
`,
|
|
475
468
|
host: {
|
|
476
469
|
class: 'kbq-navbar-brand',
|
|
477
470
|
'[class.kbq-hovered]': 'hovered'
|
|
@@ -719,7 +712,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
|
|
|
719
712
|
return this.hasDropDownTrigger && this.rectangleElement.horizontal && !this.isCollapsed;
|
|
720
713
|
}
|
|
721
714
|
get hasCroppedText() {
|
|
722
|
-
return !!
|
|
715
|
+
return !!this.title?.isOverflown;
|
|
723
716
|
}
|
|
724
717
|
constructor(rectangleElement, navbarFocusableItem, changeDetectorRef, overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, focusMonitor, direction, dropdownTrigger, bento) {
|
|
725
718
|
super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, focusMonitor);
|
|
@@ -733,8 +726,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
|
|
|
733
726
|
if (this.hasDropDownTrigger) {
|
|
734
727
|
this.dropdownTrigger.openByArrowDown = false;
|
|
735
728
|
}
|
|
736
|
-
this.rectangleElement.state
|
|
737
|
-
.subscribe(() => {
|
|
729
|
+
this.rectangleElement.state.subscribe(() => {
|
|
738
730
|
this.collapsed = this.rectangleElement.collapsed;
|
|
739
731
|
this.changeDetectorRef.detectChanges();
|
|
740
732
|
});
|
|
@@ -763,8 +755,8 @@ class KbqNavbarItem extends KbqTooltipTrigger {
|
|
|
763
755
|
if (!this.hasDropDownTrigger) {
|
|
764
756
|
return;
|
|
765
757
|
}
|
|
766
|
-
if (this.rectangleElement.horizontal && $event.keyCode === DOWN_ARROW ||
|
|
767
|
-
this.rectangleElement.vertical && $event.keyCode === RIGHT_ARROW) {
|
|
758
|
+
if ((this.rectangleElement.horizontal && $event.keyCode === DOWN_ARROW) ||
|
|
759
|
+
(this.rectangleElement.vertical && $event.keyCode === RIGHT_ARROW)) {
|
|
768
760
|
this.dropdownTrigger.openedBy = 'keyboard';
|
|
769
761
|
this.dropdownTrigger.open();
|
|
770
762
|
$event.stopPropagation();
|
|
@@ -772,14 +764,13 @@ class KbqNavbarItem extends KbqTooltipTrigger {
|
|
|
772
764
|
}
|
|
773
765
|
}
|
|
774
766
|
updateCollapsedState() {
|
|
775
|
-
Promise.resolve()
|
|
776
|
-
.then(() => {
|
|
767
|
+
Promise.resolve().then(() => {
|
|
777
768
|
this.isCollapsed = this._collapsed;
|
|
778
769
|
this.changeDetectorRef.markForCheck();
|
|
779
770
|
});
|
|
780
771
|
}
|
|
781
772
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i1.FocusMonitor }, { token: i4.Directionality, optional: true }, { token: i5.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
782
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarItem, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed", "class.kbq-navbar-item_with-title": "!!title" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div
|
|
773
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarItem, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed", "class.kbq-navbar-item_with-title": "!!title" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div\n *ngIf=\"title\"\n class=\"kbq-navbar-item__container\"\n>\n <div class=\"kbq-navbar-item__title\">\n <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n </div>\n\n <i\n *ngIf=\"showVerticalDropDownAngle\"\n kbq-icon=\"mc-angle-right-M_16\"\n class=\"kbq-navbar-item__arrow-icon\"\n ></i>\n <i\n *ngIf=\"showHorizontalDropDownAngle\"\n kbq-icon=\"mc-angle-down-S_16\"\n class=\"kbq-navbar-item__arrow-icon\"\n ></i>\n</div>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
783
774
|
}
|
|
784
775
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarItem, decorators: [{
|
|
785
776
|
type: Component,
|
|
@@ -788,7 +779,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
|
|
|
788
779
|
'[class.kbq-navbar-item_collapsed]': 'isCollapsed',
|
|
789
780
|
'[class.kbq-navbar-item_with-title]': '!!title',
|
|
790
781
|
'(keydown)': 'onKeyDown($event)'
|
|
791
|
-
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div
|
|
782
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div\n *ngIf=\"title\"\n class=\"kbq-navbar-item__container\"\n>\n <div class=\"kbq-navbar-item__title\">\n <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n </div>\n\n <i\n *ngIf=\"showVerticalDropDownAngle\"\n kbq-icon=\"mc-angle-right-M_16\"\n class=\"kbq-navbar-item__arrow-icon\"\n ></i>\n <i\n *ngIf=\"showHorizontalDropDownAngle\"\n kbq-icon=\"mc-angle-down-S_16\"\n class=\"kbq-navbar-item__arrow-icon\"\n ></i>\n</div>\n\n<ng-content></ng-content>\n" }]
|
|
792
783
|
}], ctorParameters: () => [{ type: KbqNavbarRectangleElement }, { type: KbqNavbarFocusableItem }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
|
|
793
784
|
type: Inject,
|
|
794
785
|
args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
|
|
@@ -866,15 +857,19 @@ class KbqNavbarToggle extends KbqTooltipTrigger {
|
|
|
866
857
|
}
|
|
867
858
|
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarToggle, deps: [{ token: KbqVerticalNavbar }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i1.FocusMonitor }, { token: i4.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
868
859
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarToggle, selector: "kbq-navbar-toggle", inputs: { content: ["kbqCollapsedTooltip", "content"] }, host: { listeners: { "keydown": "onKeydown($event)", "click": "toggle()", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen", "class.kbq-collapsed": "!navbar.expanded", "class.kbq-expanded": "navbar.expanded" }, classAttribute: "kbq-navbar-item kbq-navbar-toggle kbq-vertical" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqIcon, descendants: true }], usesInheritance: true, ngImport: i0, template: `
|
|
869
|
-
<i
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
860
|
+
<i
|
|
861
|
+
*ngIf="!customIcon"
|
|
862
|
+
[class.mc-angle-left-M_16]="navbar.expanded"
|
|
863
|
+
[class.mc-angle-right-M_16]="!navbar.expanded"
|
|
864
|
+
kbq-icon
|
|
865
|
+
></i>
|
|
874
866
|
|
|
875
867
|
<ng-content select="[kbq-icon]"></ng-content>
|
|
876
868
|
|
|
877
|
-
<div
|
|
869
|
+
<div
|
|
870
|
+
class="kbq-navbar-item__title"
|
|
871
|
+
*ngIf="navbar.expanded"
|
|
872
|
+
>
|
|
878
873
|
<ng-content select="kbq-navbar-title"></ng-content>
|
|
879
874
|
</div>
|
|
880
875
|
`, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:var(--kbq-size-xxl, 24px)}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -882,15 +877,19 @@ class KbqNavbarToggle extends KbqTooltipTrigger {
|
|
|
882
877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarToggle, decorators: [{
|
|
883
878
|
type: Component,
|
|
884
879
|
args: [{ selector: 'kbq-navbar-toggle', template: `
|
|
885
|
-
<i
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
880
|
+
<i
|
|
881
|
+
*ngIf="!customIcon"
|
|
882
|
+
[class.mc-angle-left-M_16]="navbar.expanded"
|
|
883
|
+
[class.mc-angle-right-M_16]="!navbar.expanded"
|
|
884
|
+
kbq-icon
|
|
885
|
+
></i>
|
|
890
886
|
|
|
891
887
|
<ng-content select="[kbq-icon]"></ng-content>
|
|
892
888
|
|
|
893
|
-
<div
|
|
889
|
+
<div
|
|
890
|
+
class="kbq-navbar-item__title"
|
|
891
|
+
*ngIf="navbar.expanded"
|
|
892
|
+
>
|
|
894
893
|
<ng-content select="kbq-navbar-title"></ng-content>
|
|
895
894
|
</div>
|
|
896
895
|
`, host: {
|