@koobiq/components 17.0.0-rc.4 → 17.0.0-rc.5

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 (33) hide show
  1. package/alert/alert.component.scss +6 -0
  2. package/core/option/_option-action-theme.scss +6 -8
  3. package/core/styles/theming/_components-theming.scss +7 -0
  4. package/core/styles/theming/_theming.scss +1 -4
  5. package/esm2022/alert/alert.component.mjs +2 -2
  6. package/esm2022/core/version.mjs +2 -2
  7. package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
  8. package/esm2022/select/select.component.mjs +33 -6
  9. package/esm2022/table/table.component.mjs +29 -6
  10. package/esm2022/table/table.module.mjs +14 -6
  11. package/fesm2022/koobiq-components-alert.mjs +2 -2
  12. package/fesm2022/koobiq-components-alert.mjs.map +1 -1
  13. package/fesm2022/koobiq-components-core.mjs +1 -1
  14. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  15. package/fesm2022/koobiq-components-navbar.mjs +2 -2
  16. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  17. package/fesm2022/koobiq-components-select.mjs +33 -6
  18. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  19. package/fesm2022/koobiq-components-table.mjs +41 -10
  20. package/fesm2022/koobiq-components-table.mjs.map +1 -1
  21. package/icon/_icon-item-theme.scss +6 -0
  22. package/icon/_icon-theme.scss +5 -0
  23. package/input/_input-theme.scss +4 -0
  24. package/navbar/vertical-navbar.scss +1 -0
  25. package/package.json +7 -7
  26. package/prebuilt-themes/dark-theme.css +1 -1
  27. package/prebuilt-themes/light-theme.css +1 -1
  28. package/schematics/ng-add/index.js +5 -5
  29. package/select/select.component.d.ts +5 -1
  30. package/table/_table-theme.scss +10 -10
  31. package/table/table.component.d.ts +8 -1
  32. package/table/table.module.d.ts +1 -1
  33. package/table/table.scss +39 -40
@@ -43,6 +43,9 @@ $tokens: meta.module-variables(tokens) !default;
43
43
  &.kbq-alert__icon_title .kbq-icon {
44
44
  margin-top: cssVar(alert-size-normal-icon-margin-addon-title);
45
45
  }
46
+
47
+ display: inline-flex;
48
+ align-self: flex-start;
46
49
  }
47
50
 
48
51
  & .kbq-alert__content {
@@ -86,6 +89,9 @@ $tokens: meta.module-variables(tokens) !default;
86
89
  &.kbq-alert__icon_title .kbq-icon {
87
90
  margin-top: cssVar(alert-size-compact-icon-margin-addon-title);
88
91
  }
92
+
93
+ display: inline-flex;
94
+ align-self: flex-start;
89
95
  }
90
96
 
91
97
  & .kbq-alert__content {
@@ -8,9 +8,7 @@
8
8
  $foreground: map.get($theme, foreground);
9
9
  $background: map.get($theme, background);
10
10
 
11
- $secondary: map.get($theme, secondary);
12
-
13
- $is-dark: map.get($theme, is-dark);
11
+ $states: map.get($theme, states);
14
12
 
15
13
  .kbq-option-action {
16
14
  &.cdk-keyboard-focused {
@@ -20,22 +18,22 @@
20
18
  &:active,
21
19
  &.kbq-pressed {
22
20
  & .kbq-icon {
23
- color: kbq-color($secondary, if($is-dark, 70, 30));
21
+ color: map.get(map.get($states, icon), contrast-fade);
24
22
  }
25
23
 
26
- background-color: kbq-color($secondary, A16);
24
+ background-color: map.get($background, transparent);
27
25
  }
28
26
 
29
27
  &:hover .kbq-icon {
30
- color: kbq-color($secondary, if($is-dark, 70, 30));
28
+ color: map.get(map.get($states, icon), contrast-fade-hover);
31
29
  }
32
30
 
33
31
  &.kbq-disabled {
34
32
  & .kbq-icon {
35
- color: kbq-color($secondary, if($is-dark, 30, 70));
33
+ color: map.get(map.get($states, icon), disabled);
36
34
  }
37
35
 
38
- background-color: transparent;
36
+ background-color: map.get($background, transparent);
39
37
  }
40
38
  }
41
39
  }
@@ -855,6 +855,9 @@
855
855
  error: (
856
856
  color: map-get($tokens, 'icon-#{$scheme}-error-color')
857
857
  ),
858
+ warning: (
859
+ color: map-get($tokens, 'icon-#{$scheme}-warning-color')
860
+ ),
858
861
  success: (
859
862
  color: map-get($tokens, 'icon-#{$scheme}-success-color')
860
863
  )
@@ -877,6 +880,10 @@
877
880
  color: map-get($tokens, 'icon-item-#{$scheme}-error-color'),
878
881
  background: map-get($tokens, 'icon-item-#{$scheme}-error-background')
879
882
  ),
883
+ warning: (
884
+ color: map-get($tokens, 'icon-item-#{$scheme}-warning-color'),
885
+ background: map-get($tokens, 'icon-item-#{$scheme}-warning-background')
886
+ ),
880
887
  success: (
881
888
  color: map-get($tokens, 'icon-item-#{$scheme}-success-color'),
882
889
  background: map-get($tokens, 'icon-item-#{$scheme}-success-background')
@@ -94,8 +94,6 @@
94
94
  error-less: map.get($tokens, '#{$scheme}-background-error-less'),
95
95
  success: map.get($tokens, '#{$scheme}-background-success'),
96
96
  success-fade: map.get($tokens, '#{$scheme}-background-success-fade'),
97
- // surfacce — удалить после удаления из компонентов
98
- surface: map.get($tokens, '#{$scheme}-background-surface'),
99
97
  theme: map.get($tokens, '#{$scheme}-background-theme'),
100
98
  theme-fade: map.get($tokens, '#{$scheme}-background-theme-fade'),
101
99
  warning: map.get($tokens, '#{$scheme}-background-warning'),
@@ -122,6 +120,7 @@
122
120
  theme: map.get($tokens, '#{$scheme}-icon-theme'),
123
121
  contrast: map.get($tokens, '#{$scheme}-icon-contrast'),
124
122
  contrast-fade: map.get($tokens, '#{$scheme}-icon-contrast-fade'),
123
+ contrast-fade-hover: map.get($tokens, '#{$scheme}-icon-contrast-fade-hover'),
125
124
  success: map.get($tokens, '#{$scheme}-icon-success'),
126
125
  warning: map.get($tokens, '#{$scheme}-icon-warning'),
127
126
  error: map.get($tokens, '#{$scheme}-icon-error'),
@@ -271,7 +270,6 @@
271
270
  purple: _theme_palette($tokens, $scheme, purple),
272
271
 
273
272
  // будет удалено, после удаления из компонентов ↓
274
- secondary: _theme_palette($tokens, $scheme, secondary),
275
273
  info: _theme_palette($tokens, $scheme, info),
276
274
  // будет удалено, после удаления из компонентов ↑
277
275
 
@@ -304,7 +302,6 @@
304
302
  purple: _theme_palette($tokens, $scheme, purple),
305
303
 
306
304
  // будет удалено, после удаления из компонентов ↓
307
- secondary: _theme_palette($tokens, $scheme, secondary),
308
305
  info: _theme_palette($tokens, $scheme, info),
309
306
  // будет удалено, после удаления из компонентов ↑
310
307
 
@@ -76,7 +76,7 @@ export class KbqAlert {
76
76
  }
77
77
  }
78
78
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
79
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqAlert, selector: "kbq-alert", inputs: { compact: "compact", alertStyle: "alertStyle", alertColor: "alertColor" }, host: { properties: { "class": "alertColor", "class.kbq-alert_normal": "!compact", "class.kbq-alert_compact": "compact", "class.kbq-alert_default": "!isColored", "class.kbq-alert_colored": "isColored", "class.kbq-alert_dismissible": "closeButton" }, classAttribute: "kbq-alert" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }, { propertyName: "title", first: true, predicate: KbqAlertTitle, descendants: true }, { propertyName: "control", first: true, predicate: KbqAlertControl, descendants: true }, { propertyName: "closeButton", first: true, predicate: KbqAlertCloseButton, descendants: true }], ngImport: i0, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n <div class=\"kbq-alert__text\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n <ng-content select=\"[kbq-alert-control]\"></ng-content>\n </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-normal-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 6px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-compact-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 0) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
79
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqAlert, selector: "kbq-alert", inputs: { compact: "compact", alertStyle: "alertStyle", alertColor: "alertColor" }, host: { properties: { "class": "alertColor", "class.kbq-alert_normal": "!compact", "class.kbq-alert_compact": "compact", "class.kbq-alert_default": "!isColored", "class.kbq-alert_colored": "isColored", "class.kbq-alert_dismissible": "closeButton" }, classAttribute: "kbq-alert" }, queries: [{ propertyName: "iconItem", first: true, predicate: KbqIconItem, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }, { propertyName: "title", first: true, predicate: KbqAlertTitle, descendants: true }, { propertyName: "control", first: true, predicate: KbqAlertControl, descendants: true }, { propertyName: "closeButton", first: true, predicate: KbqAlertCloseButton, descendants: true }], ngImport: i0, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n <div class=\"kbq-alert__text\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n <ng-content select=\"[kbq-alert-control]\"></ng-content>\n </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px);display:inline-flex;align-self:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-normal-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 6px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px);display:inline-flex;align-self:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-compact-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 8px) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
80
80
  }
81
81
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqAlert, decorators: [{
82
82
  type: Component,
@@ -88,7 +88,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
88
88
  '[class.kbq-alert_default]': '!isColored',
89
89
  '[class.kbq-alert_colored]': 'isColored',
90
90
  '[class.kbq-alert_dismissible]': 'closeButton'
91
- }, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n <div class=\"kbq-alert__text\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n <ng-content select=\"[kbq-alert-control]\"></ng-content>\n </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-normal-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 6px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-compact-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 0) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"] }]
91
+ }, template: "<div class=\"kbq-alert__icon\" [class.kbq-alert__icon_title]=\"title\" *ngIf=\"iconItem || icon\">\n <ng-content select=\"[kbq-icon-item],[kbq-icon]\"></ng-content>\n</div>\n\n<div class=\"kbq-alert__content\" [class.kbq-alert__content_title]=\"title\">\n <ng-content select=\"[kbq-alert-title]\"></ng-content>\n\n <div class=\"kbq-alert__text\">\n <ng-content></ng-content>\n </div>\n\n <div class=\"kbq-alert__button-stack\" *ngIf=\"control\">\n <ng-content select=\"[kbq-alert-control]\"></ng-content>\n </div>\n</div>\n\n<div class=\"kbq-alert__close-button\" [hidden]=\"!closeButton\">\n <ng-content select=\"[kbq-alert-close-button]\"></ng-content>\n</div>\n", styles: [".kbq-alert{display:flex;box-sizing:border-box}.kbq-alert .kbq-alert__content_title{margin-bottom:var(--kbq-size-xxs, 4px)}.kbq-alert__content{display:flex;flex-direction:column;flex:1;justify-content:center}.kbq-alert.kbq-alert_normal{border-radius:var(--kbq-alert-size-normal-container-border-radius, 12px);padding:var(--kbq-alert-size-normal-container-padding-top, 0) var(--kbq-alert-size-normal-container-padding-right, 8px) var(--kbq-alert-size-normal-container-padding-bottom, 0) var(--kbq-alert-size-normal-container-padding-left, 8px)}.kbq-alert.kbq-alert_normal .kbq-alert__icon{margin:var(--kbq-alert-size-normal-icon-margin-top, 16px) var(--kbq-alert-size-normal-icon-margin-right, 0) var(--kbq-alert-size-normal-icon-margin-bottom, 16px) var(--kbq-alert-size-normal-icon-margin-left, 12px);display:inline-flex;align-self:flex-start}.kbq-alert.kbq-alert_normal .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-normal-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__content{padding:var(--kbq-alert-size-normal-content-padding-top, 16px) var(--kbq-alert-size-normal-content-padding-right, 8px) var(--kbq-alert-size-normal-content-padding-bottom, 16px) var(--kbq-alert-size-normal-content-padding-left, 12px)}.kbq-alert.kbq-alert_normal .kbq-alert__title{margin-bottom:var(--kbq-alert-size-normal-title-margin-bottom, 4px)}.kbq-alert.kbq-alert_normal .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-normal-button-stack-padding-top, 6px);padding-bottom:var(--kbq-alert-size-normal-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_normal .kbq-alert__close-button{margin-top:var(--kbq-alert-size-normal-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-normal-close-button-margin-left, 2px)}.kbq-alert.kbq-alert_compact{border-radius:var(--kbq-alert-size-compact-container-border-radius, 12px);padding:var(--kbq-alert-size-compact-container-padding-top, 0) var(--kbq-alert-size-compact-container-padding-right, 8px) var(--kbq-alert-size-compact-container-padding-bottom, 0) var(--kbq-alert-size-compact-container-padding-left, 16px)}.kbq-alert.kbq-alert_compact .kbq-alert__icon{margin-top:var(--kbq-alert-size-compact-icon-margin-top, 12px);margin-right:var(--kbq-alert-size-compact-icon-margin-right, 8px);display:inline-flex;align-self:flex-start}.kbq-alert.kbq-alert_compact .kbq-alert__icon.kbq-alert__icon_title .kbq-icon{margin-top:var(--kbq-alert-size-compact-icon-margin-addon-title, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__content{padding:var(--kbq-alert-size-compact-content-padding-top, 12px) var(--kbq-alert-size-compact-content-padding-right, 8px) var(--kbq-alert-size-compact-content-padding-bottom, 12px) var(--kbq-alert-size-compact-content-padding-left, 0)}.kbq-alert.kbq-alert_compact .kbq-alert__title{margin-bottom:var(--kbq-alert-size-compact-title-margin-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__button-stack{padding-top:var(--kbq-alert-size-compact-button-stack-padding-top, 8px);padding-bottom:var(--kbq-alert-size-compact-button-stack-padding-bottom, 2px)}.kbq-alert.kbq-alert_compact .kbq-alert__close-button{margin-top:var(--kbq-alert-size-compact-close-button-margin-top, 8px);margin-left:var(--kbq-alert-size-compact-close-button-margin-left, 2px)}\n"] }]
92
92
  }], propDecorators: { iconItem: [{
93
93
  type: ContentChild,
94
94
  args: [KbqIconItem]
@@ -1,3 +1,3 @@
1
1
  import { Version } from '@angular/core';
2
- export const VERSION = new Version('17.0.0-rc.4+sha-a85ded4');
3
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvY29yZS92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFeEMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksT0FBTyxDQUFDLHlCQUF5QixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBWZXJzaW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzE3LjAuMC1yYy40K3NoYS1hODVkZWQ0Jyk7XG4iXX0=
2
+ export const VERSION = new Version('17.0.0-rc.5+sha-41e1483');
3
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3BhY2thZ2VzL2NvbXBvbmVudHMvY29yZS92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFFeEMsTUFBTSxDQUFDLE1BQU0sT0FBTyxHQUFHLElBQUksT0FBTyxDQUFDLHlCQUF5QixDQUFDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBWZXJzaW9uIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbmV4cG9ydCBjb25zdCBWRVJTSU9OID0gbmV3IFZlcnNpb24oJzE3LjAuMC1yYy41K3NoYS00MWUxNDgzJyk7XG4iXX0=
@@ -79,7 +79,7 @@ export class KbqVerticalNavbar extends KbqFocusableComponent {
79
79
  <ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
80
80
  <ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle"></ng-content>
81
81
  </div>
82
- `, 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:24px}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width: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{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right: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:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding: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:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 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:16px;min-height:16px}.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: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:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right: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:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 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:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset: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:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
82
+ `, 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: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: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{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right: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:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding: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:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 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:16px;min-height:16px}.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: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:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right: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:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 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:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset: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:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
83
83
  }
84
84
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
85
85
  type: Component,
@@ -97,7 +97,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImpor
97
97
  '(focus)': 'focus()',
98
98
  '(blur)': 'blur()',
99
99
  '(keydown)': 'onKeyDown($event)'
100
- }, 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:24px}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width: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{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right: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:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding: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:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 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:16px;min-height:16px}.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: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:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right: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:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 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:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset: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:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"] }]
100
+ }, 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: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: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{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right: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:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding: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:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 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:16px;min-height:16px}.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: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:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right: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:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 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:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset: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:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"] }]
101
101
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { rectangleElements: [{
102
102
  type: ContentChildren,
103
103
  args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]