@koobiq/components 18.29.0 → 18.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/code-block/_code-block-theme.scss +4 -12
  2. package/code-block/code-block-tokens.scss +3 -2
  3. package/code-block/code-block.scss +41 -10
  4. package/core/common-behaviors/error-state.d.ts +18 -0
  5. package/core/common-behaviors/index.d.ts +1 -1
  6. package/core/formatters/filesize/size.d.ts +19 -3
  7. package/core/forms/validators.d.ts +13 -0
  8. package/core/option/_option-theme.scss +24 -2
  9. package/core/pop-up/pop-up-trigger.d.ts +3 -4
  10. package/core/pop-up/pop-up.d.ts +2 -1
  11. package/core/select/common.d.ts +3 -3
  12. package/core/selection/pseudo-checkbox/pseudo-checkbox.d.ts +1 -1
  13. package/datepicker/datepicker-input.directive.d.ts +14 -5
  14. package/datepicker/datepicker-module.d.ts +1 -1
  15. package/datepicker/datepicker-toggle.component.d.ts +22 -0
  16. package/datepicker/datepicker-toggle.scss +6 -0
  17. package/ellipsis-center/ellipsis-center.directive.d.ts +8 -2
  18. package/esm2022/actions-panel/actions-panel-container.mjs +2 -2
  19. package/esm2022/code-block/code-block.mjs +6 -3
  20. package/esm2022/core/common-behaviors/error-state.mjs +28 -1
  21. package/esm2022/core/common-behaviors/index.mjs +2 -2
  22. package/esm2022/core/formatters/filesize/formatter.mjs +6 -9
  23. package/esm2022/core/formatters/filesize/size.mjs +15 -17
  24. package/esm2022/core/forms/validators.mjs +22 -1
  25. package/esm2022/core/option/option.mjs +2 -2
  26. package/esm2022/core/pop-up/pop-up-trigger.mjs +19 -10
  27. package/esm2022/core/pop-up/pop-up.mjs +6 -2
  28. package/esm2022/core/select/common.mjs +6 -4
  29. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +3 -3
  30. package/esm2022/core/version.mjs +2 -2
  31. package/esm2022/datepicker/calendar-header.component.mjs +1 -1
  32. package/esm2022/datepicker/datepicker-input.directive.mjs +66 -6
  33. package/esm2022/datepicker/datepicker-module.mjs +8 -3
  34. package/esm2022/datepicker/datepicker-toggle.component.mjs +94 -10
  35. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  36. package/esm2022/ellipsis-center/ellipsis-center.directive.mjs +14 -4
  37. package/esm2022/file-upload/file-upload.mjs +2 -1
  38. package/esm2022/file-upload/multiple-file-upload.component.mjs +21 -7
  39. package/esm2022/file-upload/single-file-upload.component.mjs +16 -7
  40. package/esm2022/filter-bar/filter-bar.mjs +11 -3
  41. package/esm2022/filter-bar/filter-bar.types.mjs +1 -1
  42. package/esm2022/filter-bar/filter-search.mjs +2 -2
  43. package/esm2022/filter-bar/filters.mjs +2 -2
  44. package/esm2022/filter-bar/pipe-add.mjs +2 -2
  45. package/esm2022/filter-bar/pipes/pipe-button.mjs +1 -1
  46. package/esm2022/filter-bar/pipes/pipe-date.mjs +2 -2
  47. package/esm2022/filter-bar/pipes/pipe-datetime.mjs +2 -2
  48. package/esm2022/filter-bar/pipes/pipe-multi-select.mjs +29 -9
  49. package/esm2022/filter-bar/pipes/pipe-multi-tree-select.mjs +30 -10
  50. package/esm2022/filter-bar/pipes/pipe-select.mjs +2 -2
  51. package/esm2022/filter-bar/pipes/pipe-text.mjs +2 -2
  52. package/esm2022/filter-bar/pipes/pipe-tree-select.mjs +2 -2
  53. package/esm2022/form-field/form-field.mjs +8 -8
  54. package/esm2022/form-field/stepper.mjs +20 -4
  55. package/esm2022/icon/icon-button.component.mjs +2 -2
  56. package/esm2022/list/list-selection.component.mjs +5 -4
  57. package/esm2022/list/list.component.mjs +2 -2
  58. package/esm2022/overflow-items/overflow-items.mjs +43 -70
  59. package/esm2022/popover/popover.component.mjs +10 -4
  60. package/esm2022/select/select.component.mjs +34 -17
  61. package/esm2022/tabs/tab-group.component.mjs +1 -1
  62. package/esm2022/timezone/timezone-option.component.mjs +2 -2
  63. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  64. package/esm2022/tooltip/tooltip.component.mjs +12 -3
  65. package/esm2022/top-bar/top-bar.mjs +2 -2
  66. package/esm2022/tree/toggle.mjs +2 -2
  67. package/esm2022/tree/tree-option.component.mjs +5 -4
  68. package/esm2022/tree/tree-selection.component.mjs +2 -2
  69. package/esm2022/tree/tree.mjs +2 -2
  70. package/esm2022/tree-select/tree-select.component.mjs +32 -13
  71. package/fesm2022/koobiq-components-actions-panel.mjs +1 -1
  72. package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
  73. package/fesm2022/koobiq-components-code-block.mjs +5 -2
  74. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  75. package/fesm2022/koobiq-components-core.mjs +99 -41
  76. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-datepicker.mjs +159 -11
  78. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  79. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  80. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  81. package/fesm2022/koobiq-components-ellipsis-center.mjs +13 -3
  82. package/fesm2022/koobiq-components-ellipsis-center.mjs.map +1 -1
  83. package/fesm2022/koobiq-components-file-upload.mjs +32 -10
  84. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  85. package/fesm2022/koobiq-components-filter-bar.mjs +75 -27
  86. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  87. package/fesm2022/koobiq-components-form-field.mjs +25 -10
  88. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-icon.mjs +2 -2
  90. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  91. package/fesm2022/koobiq-components-list.mjs +6 -5
  92. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  93. package/fesm2022/koobiq-components-overflow-items.mjs +42 -69
  94. package/fesm2022/koobiq-components-overflow-items.mjs.map +1 -1
  95. package/fesm2022/koobiq-components-popover.mjs +9 -3
  96. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  97. package/fesm2022/koobiq-components-select.mjs +33 -16
  98. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  99. package/fesm2022/koobiq-components-tabs.mjs +1 -1
  100. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  101. package/fesm2022/koobiq-components-timezone.mjs +4 -4
  102. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  103. package/fesm2022/koobiq-components-tooltip.mjs +11 -2
  104. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  105. package/fesm2022/koobiq-components-top-bar.mjs +2 -2
  106. package/fesm2022/koobiq-components-top-bar.mjs.map +1 -1
  107. package/fesm2022/koobiq-components-tree-select.mjs +31 -12
  108. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  109. package/fesm2022/koobiq-components-tree.mjs +10 -9
  110. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  111. package/file-upload/_file-upload-theme.scss +38 -22
  112. package/file-upload/file-upload-tokens.scss +37 -14
  113. package/file-upload/file-upload.d.ts +1 -0
  114. package/file-upload/multiple-file-upload.component.d.ts +12 -5
  115. package/file-upload/multiple-file-upload.component.scss +66 -69
  116. package/file-upload/single-file-upload.component.d.ts +7 -1
  117. package/file-upload/single-file-upload.component.scss +8 -0
  118. package/filter-bar/filter-bar.d.ts +7 -1
  119. package/filter-bar/filter-bar.types.d.ts +5 -0
  120. package/filter-bar/pipes/pipe-multi-select.d.ts +5 -1
  121. package/filter-bar/pipes/pipe-multi-tree-select.d.ts +5 -1
  122. package/form-field/form-field.d.ts +3 -1
  123. package/form-field/stepper.d.ts +15 -1
  124. package/icon/_icon-button-theme.scss +67 -85
  125. package/list/_list-theme.scss +24 -2
  126. package/list/list-tokens.scss +5 -0
  127. package/overflow-items/overflow-items.d.ts +16 -25
  128. package/package.json +6 -6
  129. package/popover/popover.component.d.ts +4 -2
  130. package/schematics/ng-add/index.js +5 -5
  131. package/select/select.component.d.ts +8 -1
  132. package/tooltip/tooltip.component.d.ts +8 -1
  133. package/top-bar/top-bar.scss +1 -0
  134. package/tree/_tree-theme.scss +30 -7
  135. package/tree/tree-option.scss +5 -2
  136. package/tree/tree-tokens.scss +5 -0
  137. package/tree-select/tree-select.component.d.ts +8 -1
package/fesm2022/koobiq-components-tabs.mjs CHANGED
@@ -1296,7 +1296,7 @@ class KbqTabGroup {
1296
1296
  return this.tabs?.toArray().indexOf(currentSelectedTab);
1297
1297
  }
1298
1298
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTabGroup, deps: [{ token: i0.ChangeDetectorRef }, { token: KBQ_TABS_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
1299
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_filled": "!transparent", "class.kbq-tab-group_transparent": "transparent", "class.kbq-tab-group_on-background": "!onSurface", "class.kbq-tab-group_on-surface": "onSurface", "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], ngImport: i0, template: "<kbq-tab-header\n #tabHeader\n [selectedIndex]=\"selectedIndex\"\n [underlined]=\"underlined\"\n [vertical]=\"vertical\"\n (indexFocused)=\"focusChanged($event)\"\n (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n @for (tab of tabs; track tab; let i = $index) {\n <div\n cdkMonitorElementFocus\n kbqTabLabelWrapper\n class=\"kbq-tab-label\"\n [attr.tabindex]=\"getTabIndex(tab, i)\"\n [class.kbq-selected]=\"selectedIndex === i\"\n [class.kbq-tab-label_empty]=\"tab.empty\"\n [class.kbq-tab-label_horizontal]=\"!vertical\"\n [class.kbq-tab-label_underlined]=\"underlined\"\n [class.kbq-tab-label_vertical]=\"vertical\"\n [disabled]=\"tab.disabled\"\n [id]=\"getTabLabelId(i)\"\n [kbqPlacement]=\"tab.tooltipPlacement\"\n [kbqTooltip]=\"tab.tooltipTitle\"\n [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n [kbqTrigger]=\"'hover, focus'\"\n [tab]=\"tab\"\n (click)=\"handleClick(tab, tabHeader, i)\"\n >\n <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n <!-- If there is a label template, use it. -->\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n }\n <!-- If there is not a label template, fall back to the text label. -->\n @if (!tab.templateLabel) {\n {{ tab.textLabel }}\n }\n </div>\n </div>\n }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n @for (tab of tabs; track tab; let i = $index) {\n <kbq-tab-body\n [animationDuration]=\"animationDuration\"\n [class.kbq-tab-body__active]=\"selectedIndex === i\"\n [content]=\"tab.content!\"\n [id]=\"getTabContentId(i)\"\n [origin]=\"tab.origin!\"\n [position]=\"tab.position!\"\n (onCentered)=\"removeTabBodyWrapperHeight()\"\n (onCentering)=\"setTabBodyWrapperHeight($event)\"\n />\n }\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i3.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["tab", "disabled"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1299
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqTabGroup, selector: "kbq-tab-group", inputs: { transparent: ["transparent", "transparent", booleanAttribute], onSurface: ["onSurface", "onSurface", booleanAttribute], underlined: ["underlined", "underlined", booleanAttribute], vertical: ["vertical", "vertical", booleanAttribute], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], activeTab: "activeTab", headerPosition: "headerPosition", animationDuration: "animationDuration", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", activeTabChange: "activeTabChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { listeners: { "window:resize": "resizeStream.next($event)" }, properties: { "class.kbq-tab-group_filled": "!transparent", "class.kbq-tab-group_transparent": "transparent", "class.kbq-tab-group_on-background": "!onSurface", "class.kbq-tab-group_on-surface": "onSurface", "class.kbq-tab-group_dynamic-height": "dynamicHeight", "class.kbq-tab-group_inverted-header": "headerPosition === \"below\"" }, classAttribute: "kbq-tab-group" }, providers: [{ provide: KBQ_PARENT_ANIMATION_COMPONENT, useExisting: forwardRef((() => this)) }], queries: [{ propertyName: "tabs", predicate: KbqTab }], viewQueries: [{ propertyName: "tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "tabHeader", first: true, predicate: ["tabHeader"], descendants: true }], exportAs: ["kbqTabGroup"], ngImport: i0, template: "<kbq-tab-header\n #tabHeader\n [selectedIndex]=\"selectedIndex\"\n [underlined]=\"underlined\"\n [vertical]=\"vertical\"\n (indexFocused)=\"focusChanged($event)\"\n (selectFocusedIndex)=\"onSelectFocusedIndex($event)\"\n>\n @for (tab of tabs; track tab; let i = $index) {\n <div\n cdkMonitorElementFocus\n kbqTabLabelWrapper\n class=\"kbq-tab-label\"\n [attr.tabindex]=\"getTabIndex(tab, i)\"\n [class.kbq-selected]=\"selectedIndex === i\"\n [class.kbq-tab-label_empty]=\"tab.empty\"\n [class.kbq-tab-label_horizontal]=\"!vertical\"\n [class.kbq-tab-label_underlined]=\"underlined\"\n [class.kbq-tab-label_vertical]=\"vertical\"\n [disabled]=\"tab.disabled\"\n [id]=\"getTabLabelId(i)\"\n [kbqPlacement]=\"tab.tooltipPlacement\"\n [kbqTooltip]=\"tab.tooltipTitle\"\n [kbqTooltipDisabled]=\"!tab.empty && !tab.isOverflown\"\n [kbqTrigger]=\"'hover, focus'\"\n [tab]=\"tab\"\n (click)=\"handleClick(tab, tabHeader, i)\"\n >\n <div #labelContent class=\"kbq-tab-label__content\" [class.kbq-tab-label__template]=\"tab.templateLabel\">\n <!-- If there is a label template, use it. -->\n @if (tab.templateLabel) {\n <ng-template [cdkPortalOutlet]=\"tab.templateLabel\" />\n }\n <!-- If there is not a label template, fall back to the text label. -->\n @if (!tab.templateLabel) {\n {{ tab.textLabel }}\n }\n </div>\n </div>\n }\n</kbq-tab-header>\n\n<div #tabBodyWrapper class=\"kbq-tab-body__wrapper\">\n @for (tab of tabs; track tab; let i = $index) {\n <kbq-tab-body\n [animationDuration]=\"animationDuration\"\n [class.kbq-tab-body__active]=\"selectedIndex === i\"\n [content]=\"tab.content!\"\n [id]=\"getTabContentId(i)\"\n [origin]=\"tab.origin!\"\n [position]=\"tab.position!\"\n (onCentered)=\"removeTabBodyWrapperHeight()\"\n (onCentering)=\"setTabBodyWrapperHeight($event)\"\n />\n }\n</div>\n", styles: [".kbq-tab-group{display:flex;flex-direction:column;box-sizing:border-box;text-align:left}.kbq-tab-group.kbq-tab-group_inverted-header{flex-direction:column-reverse}.kbq-tab-group.kbq-tab-group_vertical{flex-direction:row}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-list__content{gap:var(--kbq-tabs-size-tab-stack-vertical-content-gap-vertical) 0}.kbq-tab-group.kbq-tab-group_vertical .kbq-tab-header__container{overflow-y:auto}.kbq-tab-group .kbq-tab-body__wrapper{display:flex;overflow:hidden;position:relative}.kbq-tab-group .kbq-tab-body{inset:0;position:absolute;display:block;overflow:hidden}.kbq-tab-group .kbq-tab-body.kbq-tab-body__active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.kbq-tab-group.kbq-tab-group_dynamic-height .kbq-tab-group .kbq-tab-body.kbq-tab-body__active{overflow-y:hidden}\n", ".kbq-tab-group,.kbq-tab-nav-bar{--kbq-tabs-size-tab-item-padding-horizontal: var(--kbq-size-m);--kbq-tabs-size-tab-item-padding-vertical: var(--kbq-size-xs);--kbq-tabs-size-tab-item-content-gap-horizontal: var(--kbq-size-xxs);--kbq-tabs-size-tab-item-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-item-focus-outline-width: var(--kbq-size-3xs);--kbq-tabs-size-tab-stack-horizontal-border-radius: var(--kbq-size-s);--kbq-tabs-size-tab-stack-vertical-content-gap-vertical: var(--kbq-size-s);--kbq-tabs-tab-item-filled-on-background-default-background: transparent;--kbq-tabs-tab-item-filled-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-background-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-background-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-default-background: transparent;--kbq-tabs-tab-item-filled-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-filled-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-filled-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-filled-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-filled-on-surface-states-selected-background: var(--kbq-states-background-transparent-active);--kbq-tabs-tab-item-filled-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-filled-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-filled-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-default-background: transparent;--kbq-tabs-tab-item-transparent-on-background-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-background-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-background-states-hover-background: var( --kbq-states-background-transparent-hover );--kbq-tabs-tab-item-transparent-on-background-states-focused-focus-outline-color: var( --kbq-states-line-focus-theme );--kbq-tabs-tab-item-transparent-on-background-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-background-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-background-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-background-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-default-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-default-text-color: var(--kbq-foreground-contrast);--kbq-tabs-tab-item-transparent-on-surface-default-icon-color: var(--kbq-icon-contrast);--kbq-tabs-tab-item-transparent-on-surface-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-tabs-tab-item-transparent-on-surface-states-focused-focus-outline-color: var(--kbq-states-line-focus-theme);--kbq-tabs-tab-item-transparent-on-surface-states-selected-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-hover-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-background: var( --kbq-states-background-transparent-active );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-text-color: var( --kbq-states-foreground-disabled );--kbq-tabs-tab-item-transparent-on-surface-states-selected-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-background: transparent;--kbq-tabs-tab-item-transparent-on-surface-states-disabled-text-color: var(--kbq-states-foreground-disabled);--kbq-tabs-tab-item-transparent-on-surface-states-disabled-icon-color: var(--kbq-states-icon-disabled);--kbq-tabs-tab-stack-filled-on-background-background: var(--kbq-background-bg);--kbq-tabs-tab-stack-filled-on-surface-background: var(--kbq-background-contrast-fade);--kbq-tabs-tab-stack-transparent-on-background-background: transparent;--kbq-tabs-tab-stack-transparent-on-surface-background: transparent}\n"], dependencies: [{ kind: "directive", type: i1$2.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "directive", type: i2$2.CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: i3.KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqTabLabelWrapper, selector: "[kbqTabLabelWrapper]", inputs: ["tab", "disabled"] }, { kind: "component", type: KbqTabBody, selector: "kbq-tab-body", inputs: ["position", "content", "origin", "animationDuration"], outputs: ["onCentering", "beforeCentering", "afterLeavingCenter", "onCentered"] }, { kind: "component", type: KbqTabHeader, selector: "kbq-tab-header", inputs: ["underlined"], outputs: ["selectFocusedIndex", "indexFocused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1300
1300
  }
1301
1301
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqTabGroup, decorators: [{
1302
1302
  type: Component,