@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.
- package/alert/alert.component.scss +6 -0
- package/core/option/_option-action-theme.scss +6 -8
- package/core/styles/theming/_components-theming.scss +7 -0
- package/core/styles/theming/_theming.scss +1 -4
- package/esm2022/alert/alert.component.mjs +2 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/navbar/vertical-navbar.component.mjs +2 -2
- package/esm2022/select/select.component.mjs +33 -6
- package/esm2022/table/table.component.mjs +29 -6
- package/esm2022/table/table.module.mjs +14 -6
- package/fesm2022/koobiq-components-alert.mjs +2 -2
- package/fesm2022/koobiq-components-alert.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +1 -1
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-navbar.mjs +2 -2
- package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +33 -6
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-table.mjs +41 -10
- package/fesm2022/koobiq-components-table.mjs.map +1 -1
- package/icon/_icon-item-theme.scss +6 -0
- package/icon/_icon-theme.scss +5 -0
- package/input/_input-theme.scss +4 -0
- package/navbar/vertical-navbar.scss +1 -0
- package/package.json +7 -7
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/schematics/ng-add/index.js +5 -5
- package/select/select.component.d.ts +5 -1
- package/table/_table-theme.scss +10 -10
- package/table/table.component.d.ts +8 -1
- package/table/table.module.d.ts +1 -1
- 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
|
-
$
|
|
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:
|
|
21
|
+
color: map.get(map.get($states, icon), contrast-fade);
|
|
24
22
|
}
|
|
25
23
|
|
|
26
|
-
background-color:
|
|
24
|
+
background-color: map.get($background, transparent);
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
&:hover .kbq-icon {
|
|
30
|
-
color:
|
|
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:
|
|
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,
|
|
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,
|
|
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]
|
package/esm2022/core/version.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { Version } from '@angular/core';
|
|
2
|
-
export const VERSION = new Version('17.0.0-rc.
|
|
3
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
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 }]
|