@koobiq/components 19.2.0 → 19.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/autocomplete/autocomplete-trigger.directive.d.ts +5 -0
- package/core/animation/animation.d.ts +3 -1
- package/core/highlight/highlight.pipe.d.ts +2 -0
- package/core/option/action.d.ts +5 -6
- package/core/utils/utils.d.ts +4 -0
- package/datepicker/datepicker-input.directive.d.ts +6 -1
- package/fesm2022/koobiq-components-accordion.mjs +34 -34
- package/fesm2022/koobiq-components-actions-panel.mjs +10 -10
- package/fesm2022/koobiq-components-alert.mjs +16 -16
- package/fesm2022/koobiq-components-app-switcher.mjs +19 -19
- package/fesm2022/koobiq-components-autocomplete.mjs +21 -14
- package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
- package/fesm2022/koobiq-components-badge.mjs +13 -13
- package/fesm2022/koobiq-components-breadcrumbs.mjs +25 -25
- package/fesm2022/koobiq-components-button-toggle.mjs +10 -10
- package/fesm2022/koobiq-components-button.mjs +13 -13
- package/fesm2022/koobiq-components-checkbox.mjs +10 -10
- package/fesm2022/koobiq-components-clamped-text.mjs +7 -7
- package/fesm2022/koobiq-components-code-block.mjs +10 -10
- package/fesm2022/koobiq-components-content-panel.mjs +28 -28
- package/fesm2022/koobiq-components-core.mjs +268 -243
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-datepicker.mjs +49 -42
- package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
- package/fesm2022/koobiq-components-divider.mjs +7 -7
- package/fesm2022/koobiq-components-dl.mjs +13 -13
- package/fesm2022/koobiq-components-dropdown.mjs +21 -20
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-dynamic-translation.mjs +13 -13
- package/fesm2022/koobiq-components-ellipsis-center.mjs +7 -7
- package/fesm2022/koobiq-components-empty-state.mjs +19 -19
- package/fesm2022/koobiq-components-file-upload.mjs +495 -60
- package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
- package/fesm2022/koobiq-components-filter-bar.mjs +69 -69
- package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
- package/fesm2022/koobiq-components-form-field.mjs +62 -62
- package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +14 -14
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-inline-edit.mjs +19 -28
- package/fesm2022/koobiq-components-inline-edit.mjs.map +1 -1
- package/fesm2022/koobiq-components-input.mjs +22 -22
- package/fesm2022/koobiq-components-link.mjs +7 -7
- package/fesm2022/koobiq-components-list.mjs +30 -20
- package/fesm2022/koobiq-components-list.mjs.map +1 -1
- package/fesm2022/koobiq-components-loader-overlay.mjs +16 -16
- package/fesm2022/koobiq-components-markdown.mjs +10 -10
- package/fesm2022/koobiq-components-modal.mjs +28 -28
- package/fesm2022/koobiq-components-navbar-ic.mjs +34 -34
- package/fesm2022/koobiq-components-navbar.mjs +43 -43
- package/fesm2022/koobiq-components-notification-center.mjs +16 -16
- package/fesm2022/koobiq-components-overflow-items.mjs +16 -16
- package/fesm2022/koobiq-components-popover.mjs +18 -18
- package/fesm2022/koobiq-components-popover.mjs.map +1 -1
- package/fesm2022/koobiq-components-progress-bar.mjs +13 -13
- package/fesm2022/koobiq-components-progress-spinner.mjs +13 -13
- package/fesm2022/koobiq-components-radio.mjs +10 -10
- package/fesm2022/koobiq-components-resizer.mjs +10 -10
- package/fesm2022/koobiq-components-risk-level.mjs +7 -7
- package/fesm2022/koobiq-components-scrollbar.mjs +10 -10
- package/fesm2022/koobiq-components-search-expandable.mjs +55 -28
- package/fesm2022/koobiq-components-search-expandable.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +16 -14
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-sidebar.mjs +13 -13
- package/fesm2022/koobiq-components-sidepanel.mjs +166 -61
- package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
- package/fesm2022/koobiq-components-skeleton.mjs +37 -0
- package/fesm2022/koobiq-components-skeleton.mjs.map +1 -0
- package/fesm2022/koobiq-components-split-button.mjs +7 -7
- package/fesm2022/koobiq-components-splitter.mjs +16 -16
- package/fesm2022/koobiq-components-table.mjs +10 -10
- package/fesm2022/koobiq-components-tabs.mjs +52 -52
- package/fesm2022/koobiq-components-tags.mjs +50 -35
- package/fesm2022/koobiq-components-tags.mjs.map +1 -1
- package/fesm2022/koobiq-components-textarea.mjs +7 -7
- package/fesm2022/koobiq-components-time-range.mjs +22 -22
- package/fesm2022/koobiq-components-timepicker.mjs +10 -10
- package/fesm2022/koobiq-components-timezone.mjs +22 -22
- package/fesm2022/koobiq-components-title.mjs +7 -7
- package/fesm2022/koobiq-components-toast.mjs +16 -16
- package/fesm2022/koobiq-components-toggle.mjs +7 -7
- package/fesm2022/koobiq-components-tooltip.mjs +24 -16
- package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
- package/fesm2022/koobiq-components-top-bar.mjs +13 -13
- package/fesm2022/koobiq-components-tree-select.mjs +11 -26
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree.mjs +53 -43
- package/fesm2022/koobiq-components-tree.mjs.map +1 -1
- package/fesm2022/koobiq-components-username.mjs +27 -27
- package/file-upload/dropzone.d.ts +147 -0
- package/file-upload/dropzone.scss +57 -0
- package/file-upload/file-upload.d.ts +3 -0
- package/file-upload/multiple-file-upload.component.d.ts +11 -1
- package/file-upload/multiple-file-upload.component.scss +1 -1
- package/file-upload/primitives/file-drop.d.ts +23 -4
- package/file-upload/public-api.d.ts +1 -0
- package/file-upload/single-file-upload.component.d.ts +11 -1
- package/form-field/_form-field-theme.scss +2 -2
- package/form-field/form-field-control.d.ts +2 -0
- package/form-field/form-field.scss +0 -1
- package/icon/icon-button.scss +5 -4
- package/inline-edit/inline-edit-tokens.scss +1 -1
- package/inline-edit/inline-edit.d.ts +2 -2
- package/inline-edit/inline-edit.scss +1 -1
- package/list/list-selection.component.d.ts +1 -0
- package/package.json +9 -4
- package/popover/_popover-theme.scss +1 -1
- package/schematics/ng-add/index.js +2 -2
- package/search-expandable/search-expandable.d.ts +19 -4
- package/select/select.component.d.ts +2 -1
- package/sidepanel/_sidepanel-theme.scss +10 -0
- package/sidepanel/sidepanel-animations.d.ts +7 -1
- package/sidepanel/sidepanel-container.component.d.ts +12 -2
- package/sidepanel/sidepanel-directives.d.ts +8 -0
- package/sidepanel/sidepanel-ref.d.ts +12 -0
- package/sidepanel/sidepanel-tokens.scss +5 -3
- package/sidepanel/sidepanel.scss +78 -18
- package/sidepanel/sidepanel.service.d.ts +2 -0
- package/skeleton/index.d.ts +2 -0
- package/skeleton/module.d.ts +7 -0
- package/skeleton/skeleton.d.ts +8 -0
- package/skeleton/skeleton.scss +41 -0
- package/tags/tag-list.component.d.ts +7 -1
- package/tags/tag.component.d.ts +2 -0
- package/tooltip/tooltip.component.d.ts +8 -0
- package/tree/tree-selection.component.d.ts +2 -1
- package/tree-select/tree-select.component.d.ts +2 -1
|
@@ -37,10 +37,10 @@ class KbqIcon extends KbqColorDirective {
|
|
|
37
37
|
}
|
|
38
38
|
this.updateMaxHeight();
|
|
39
39
|
}
|
|
40
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
41
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
40
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIcon, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
41
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KbqIcon, isStandalone: true, selector: "[kbq-icon]", inputs: { small: "small", autoColor: "autoColor", iconName: ["kbq-icon", "iconName"] }, host: { properties: { "class": "iconName", "class.kbq-error": "color === \"error\" || hasError" }, classAttribute: "kbq kbq-icon" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-rotate_90{transform:rotate(90deg)}.kbq-icon-rotate_180{transform:rotate(180deg)}.kbq-icon-rotate_270{transform:rotate(270deg)}.kbq-icon-flip-h{transform:scaleY(-1)}.kbq-icon-flip-v{transform:scaleX(-1)}.kbq-icon-flip-vh{transform:scale(-1)}.kbq-icon{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-theme{color:var(--kbq-icon-theme-color)}.kbq-icon.kbq-contrast{color:var(--kbq-icon-contrast-color)}.kbq-icon.kbq-contrast-fade{color:var(--kbq-icon-fade-contrast-color)}.kbq-icon.kbq-error{color:var(--kbq-icon-error-color)}.kbq-icon.kbq-warning{color:var(--kbq-icon-warning-color)}.kbq-icon.kbq-success{color:var(--kbq-icon-success-color)}\n", ".kbq-icon{--kbq-icon-theme-color: var(--kbq-icon-theme);--kbq-icon-contrast-color: var(--kbq-icon-contrast);--kbq-icon-fade-contrast-color: var(--kbq-icon-contrast-fade);--kbq-icon-error-color: var(--kbq-icon-error);--kbq-icon-success-color: var(--kbq-icon-success);--kbq-icon-warning-color: var(--kbq-icon-warning)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
42
42
|
}
|
|
43
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIcon, decorators: [{
|
|
44
44
|
type: Component,
|
|
45
45
|
args: [{ selector: '[kbq-icon]', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
46
46
|
class: 'kbq kbq-icon',
|
|
@@ -92,10 +92,10 @@ class KbqIconButton extends KbqIcon {
|
|
|
92
92
|
stopFocusMonitor() {
|
|
93
93
|
this.focusMonitor.stopMonitoring(this.getHostElement());
|
|
94
94
|
}
|
|
95
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
96
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.
|
|
95
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconButton, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
96
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.18", type: KbqIconButton, isStandalone: true, selector: "[kbq-icon-button]", inputs: { small: "small", iconName: ["kbq-icon-button", "iconName"], tabindex: "tabindex", disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "attr.tabindex": "tabindex", "attr.disabled": "disabled", "class.kbq-disabled": "disabled", "class.kbq-icon-button_small": "small" }, classAttribute: "kbq kbq-icon-button" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconButton, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
100
|
args: [{ selector: `[kbq-icon-button]`, template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
101
101
|
class: 'kbq kbq-icon-button',
|
|
@@ -103,7 +103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
103
103
|
'[attr.disabled]': 'disabled',
|
|
104
104
|
'[class.kbq-disabled]': 'disabled',
|
|
105
105
|
'[class.kbq-icon-button_small]': 'small'
|
|
106
|
-
}, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button
|
|
106
|
+
}, styles: [".kbq-icon-button:not(.kbq-disabled){cursor:pointer}.kbq-icon-button{padding:var(--kbq-icon-button-size-normal-vertical-padding) var(--kbq-icon-button-size-normal-horizontal-padding)}.kbq-icon-button.kbq-icon-button_small{padding:var(--kbq-icon-button-size-small-vertical-padding) var(--kbq-icon-button-size-small-horizontal-padding)}button.kbq-icon-button{border:none;background-color:unset}.kbq-icon-button:focus{outline:none}.kbq-icon-button.kbq-theme{color:var(--kbq-icon-button-theme-default)}.kbq-icon-button.kbq-theme:hover,.kbq-icon-button.kbq-theme.kbq-hovered{color:var(--kbq-icon-button-theme-states-hover)}.kbq-icon-button.kbq-theme:active,.kbq-icon-button.kbq-theme.kbq-active{color:var(--kbq-icon-button-theme-states-active)}.kbq-icon-button.kbq-theme.kbq-disabled{color:var(--kbq-icon-button-theme-states-disabled)}.kbq-icon-button.kbq-contrast{color:var(--kbq-icon-button-contrast-default)}.kbq-icon-button.kbq-contrast:hover,.kbq-icon-button.kbq-contrast.kbq-hovered{color:var(--kbq-icon-button-contrast-states-hover)}.kbq-icon-button.kbq-contrast:active,.kbq-icon-button.kbq-contrast.kbq-active{color:var(--kbq-icon-button-contrast-states-active)}.kbq-icon-button.kbq-contrast.kbq-disabled{color:var(--kbq-icon-button-contrast-states-disabled)}.kbq-icon-button.kbq-contrast-fade{color:var(--kbq-icon-button-fade-contrast-default)}.kbq-icon-button.kbq-contrast-fade:hover,.kbq-icon-button.kbq-contrast-fade.kbq-hovered{color:var(--kbq-icon-button-fade-contrast-states-hover)}.kbq-icon-button.kbq-contrast-fade:active,.kbq-icon-button.kbq-contrast-fade.kbq-active{color:var(--kbq-icon-button-fade-contrast-states-active)}.kbq-icon-button.kbq-contrast-fade.kbq-disabled{color:var(--kbq-icon-button-fade-contrast-states-disabled)}.kbq-icon-button.kbq-error{color:var(--kbq-icon-button-error-default)}.kbq-icon-button.kbq-error:hover,.kbq-icon-button.kbq-error.kbq-hovered{color:var(--kbq-icon-button-error-states-hover)}.kbq-icon-button.kbq-error:active,.kbq-icon-button.kbq-error.kbq-active{color:var(--kbq-icon-button-error-states-active)}.kbq-icon-button.kbq-error.kbq-disabled{color:var(--kbq-icon-button-error-states-disabled)}.kbq-icon-button.kbq-success{color:var(--kbq-icon-button-success-default)}.kbq-icon-button.kbq-success:hover,.kbq-icon-button.kbq-success.kbq-hovered{color:var(--kbq-icon-button-success-states-hover)}.kbq-icon-button.kbq-success:active,.kbq-icon-button.kbq-success.kbq-active{color:var(--kbq-icon-button-success-states-active)}.kbq-icon-button.kbq-success.kbq-disabled{color:var(--kbq-icon-button-success-states-disabled)}.kbq-icon-button.kbq-warning{color:var(--kbq-icon-button-warning-default)}.kbq-icon-button.kbq-warning:hover,.kbq-icon-button.kbq-warning.kbq-hovered{color:var(--kbq-icon-button-warning-states-hover)}.kbq-icon-button.kbq-warning:active,.kbq-icon-button.kbq-warning.kbq-active{color:var(--kbq-icon-button-warning-states-active)}.kbq-icon-button.kbq-warning.kbq-disabled{color:var(--kbq-icon-button-warning-states-disabled)}.kbq-icon-button.cdk-keyboard-focused{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-theme),0 0 0 1px var(--kbq-states-line-focus-theme)}.kbq-icon-button.cdk-keyboard-focused.kbq-error{box-shadow:inset 0 0 0 1px var(--kbq-states-line-focus-error),0 0 0 1px var(--kbq-states-line-focus-error)}\n", ".kbq-icon-button{--kbq-icon-button-size-horizontal-padding: var(--kbq-size-s);--kbq-icon-button-size-left-icon-padding: var(--kbq-size-xs);--kbq-icon-button-size-normal-horizontal-padding: 0;--kbq-icon-button-size-normal-vertical-padding: 0;--kbq-icon-button-size-small-horizontal-padding: var(--kbq-size-xxs);--kbq-icon-button-size-small-vertical-padding: var(--kbq-size-xxs);--kbq-icon-button-theme-default: var(--kbq-icon-theme);--kbq-icon-button-theme-states-hover: var(--kbq-states-icon-theme-hover);--kbq-icon-button-theme-states-active: var(--kbq-states-icon-theme-active);--kbq-icon-button-theme-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-contrast-default: var(--kbq-icon-contrast);--kbq-icon-button-contrast-states-hover: var(--kbq-states-icon-contrast-hover);--kbq-icon-button-contrast-states-active: var(--kbq-states-icon-contrast-active);--kbq-icon-button-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-fade-contrast-default: var(--kbq-icon-contrast-fade);--kbq-icon-button-fade-contrast-states-hover: var(--kbq-states-icon-contrast-fade-hover);--kbq-icon-button-fade-contrast-states-active: var(--kbq-states-icon-contrast-fade-active);--kbq-icon-button-fade-contrast-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-error-default: var(--kbq-icon-error);--kbq-icon-button-error-states-hover: var(--kbq-states-icon-error-hover);--kbq-icon-button-error-states-active: var(--kbq-states-icon-error-active);--kbq-icon-button-error-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-success-default: var(--kbq-icon-success);--kbq-icon-button-success-states-hover: var(--kbq-states-icon-success-hover);--kbq-icon-button-success-states-active: var(--kbq-states-icon-success-active);--kbq-icon-button-success-states-disabled: var(--kbq-states-icon-disabled);--kbq-icon-button-warning-default: var(--kbq-icon-warning);--kbq-icon-button-warning-states-hover: var(--kbq-states-icon-warning-hover);--kbq-icon-button-warning-states-active: var(--kbq-states-icon-warning-active);--kbq-icon-button-warning-states-disabled: var(--kbq-states-icon-disabled)}\n"] }]
|
|
107
107
|
}], propDecorators: { small: [{
|
|
108
108
|
type: Input
|
|
109
109
|
}], iconName: [{
|
|
@@ -123,10 +123,10 @@ class KbqIconItem extends KbqIcon {
|
|
|
123
123
|
this.fade = false;
|
|
124
124
|
this.big = false;
|
|
125
125
|
}
|
|
126
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
127
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.
|
|
126
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconItem, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
127
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.18", type: KbqIconItem, isStandalone: true, selector: "[kbq-icon-item]", inputs: { iconName: ["kbq-icon-item", "iconName"], fade: "fade", big: "big" }, host: { properties: { "class.kbq-icon-item_normal": "!big", "class.kbq-icon-item_big": "big", "class.kbq-icon-item_fade-off": "!fade", "class.kbq-icon-item_fade-on": "fade" }, classAttribute: "kbq kbq-icon-item kbq-icon-item_filled" }, usesInheritance: true, ngImport: i0, template: '<ng-content />', isInline: true, styles: [".kbq-icon-item{box-sizing:border-box;border-radius:50%}.kbq-icon-item.kbq-icon-item_normal{padding:var(--kbq-icon-item-size-normal-vertical-padding) var(--kbq-icon-item-size-normal-horizontal-padding)}.kbq-icon-item.kbq-icon-item_big{padding:var(--kbq-icon-item-size-big-vertical-padding) var(--kbq-icon-item-size-big-horizontal-padding)}.kbq-icon-item.kbq-icon-item_filled{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-theme{color:var(--kbq-icon-item-filled-fade-off-theme-color);background:var(--kbq-icon-item-filled-fade-off-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-contrast{color:var(--kbq-icon-item-filled-fade-off-contrast-color);background:var(--kbq-icon-item-filled-fade-off-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-error{color:var(--kbq-icon-item-filled-fade-off-error-color);background:var(--kbq-icon-item-filled-fade-off-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-warning{color:var(--kbq-icon-item-filled-fade-off-warning-color);background:var(--kbq-icon-item-filled-fade-off-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-off.kbq-success{color:var(--kbq-icon-item-filled-fade-off-success-color);background:var(--kbq-icon-item-filled-fade-off-success-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-theme{color:var(--kbq-icon-item-filled-fade-on-theme-color);background:var(--kbq-icon-item-filled-fade-on-theme-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-contrast{color:var(--kbq-icon-item-filled-fade-on-contrast-color);background:var(--kbq-icon-item-filled-fade-on-contrast-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-error{color:var(--kbq-icon-item-filled-fade-on-error-color);background:var(--kbq-icon-item-filled-fade-on-error-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-warning{color:var(--kbq-icon-item-filled-fade-on-warning-color);background:var(--kbq-icon-item-filled-fade-on-warning-background)}.kbq-icon-item.kbq-icon-item_filled.kbq-icon-item_fade-on.kbq-success{color:var(--kbq-icon-item-filled-fade-on-success-color);background:var(--kbq-icon-item-filled-fade-on-success-background)}\n", ".kbq-icon-item{--kbq-icon-item-size-normal-horizontal-padding: var(--kbq-size-s);--kbq-icon-item-size-normal-vertical-padding: var(--kbq-size-s);--kbq-icon-item-size-big-horizontal-padding: var(--kbq-size-l);--kbq-icon-item-size-big-vertical-padding: var(--kbq-size-l);--kbq-icon-item-filled-fade-off-theme-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-theme-background: var(--kbq-background-theme);--kbq-icon-item-filled-fade-off-contrast-color: var(--kbq-icon-on-contrast);--kbq-icon-item-filled-fade-off-contrast-background: var(--kbq-background-contrast);--kbq-icon-item-filled-fade-off-error-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-error-background: var(--kbq-background-error);--kbq-icon-item-filled-fade-off-warning-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-warning-background: var(--kbq-background-warning);--kbq-icon-item-filled-fade-off-success-color: var(--kbq-icon-white);--kbq-icon-item-filled-fade-off-success-background: var(--kbq-background-success);--kbq-icon-item-filled-fade-on-theme-color: var(--kbq-icon-theme);--kbq-icon-item-filled-fade-on-theme-background: var(--kbq-background-theme-fade);--kbq-icon-item-filled-fade-on-contrast-color: var(--kbq-icon-contrast);--kbq-icon-item-filled-fade-on-contrast-background: var(--kbq-background-contrast-fade);--kbq-icon-item-filled-fade-on-error-color: var(--kbq-icon-error);--kbq-icon-item-filled-fade-on-error-background: var(--kbq-background-error-fade);--kbq-icon-item-filled-fade-on-warning-color: var(--kbq-icon-warning);--kbq-icon-item-filled-fade-on-warning-background: var(--kbq-background-warning-fade);--kbq-icon-item-filled-fade-on-success-color: var(--kbq-icon-success);--kbq-icon-item-filled-fade-on-success-background: var(--kbq-background-success-fade)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
128
128
|
}
|
|
129
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconItem, decorators: [{
|
|
130
130
|
type: Component,
|
|
131
131
|
args: [{ selector: `[kbq-icon-item]`, template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
132
132
|
class: 'kbq kbq-icon-item kbq-icon-item_filled',
|
|
@@ -150,15 +150,15 @@ const COMPONENTS = [
|
|
|
150
150
|
KbqIconItem
|
|
151
151
|
];
|
|
152
152
|
class KbqIconModule {
|
|
153
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
154
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
153
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
154
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqIconModule, imports: [KbqIcon,
|
|
155
155
|
KbqIconButton,
|
|
156
156
|
KbqIconItem], exports: [KbqIcon,
|
|
157
157
|
KbqIconButton,
|
|
158
158
|
KbqIconItem] }); }
|
|
159
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
159
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconModule }); }
|
|
160
160
|
}
|
|
161
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqIconModule, decorators: [{
|
|
162
162
|
type: NgModule,
|
|
163
163
|
args: [{
|
|
164
164
|
imports: COMPONENTS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koobiq-components-icon.mjs","sources":["../../../packages/components/icon/icon.component.ts","../../../packages/components/icon/icon-button.component.ts","../../../packages/components/icon/icon-item.component.ts","../../../packages/components/icon/icon.module.ts","../../../packages/components/icon/koobiq-components-icon.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n inject,\n Input,\n ViewEncapsulation\n} from '@angular/core';\nimport { KBQ_FORM_FIELD_REF, KbqColorDirective } from '@koobiq/components/core';\n\n@Component({\n selector: '[kbq-icon]',\n template: '<ng-content />',\n styleUrls: ['icon.scss', 'icon-tokens.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'kbq kbq-icon',\n '[class]': 'iconName',\n '[class.kbq-error]': 'color === \"error\" || hasError'\n }\n})\nexport class KbqIcon extends KbqColorDirective implements AfterContentInit {\n readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n protected readonly formField = inject(KBQ_FORM_FIELD_REF, { optional: true });\n protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n @Input() small = false;\n @Input() autoColor = false;\n\n hasError: boolean = false;\n\n /** Name of an icon within a @koobiq/icons. */\n @Input({ alias: 'kbq-icon' }) iconName: string;\n\n protected name = 'KbqIcon';\n\n getHostElement() {\n return this.elementRef.nativeElement;\n }\n\n updateMaxHeight() {\n if (this.name !== 'KbqIcon') {\n return;\n }\n\n const size = parseInt(this.iconName?.split('_')[1]);\n\n if (size) {\n this.getHostElement().style.maxHeight = `${size}px`;\n }\n }\n\n ngAfterContentInit(): void {\n if (this.autoColor) {\n this.formField?.control?.stateChanges.subscribe(this.updateState);\n\n this.updateState();\n }\n\n this.updateMaxHeight();\n }\n\n private updateState = () => {\n this.hasError = this.formField?.control?.errorState;\n\n this.changeDetectorRef.markForCheck();\n };\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n Input,\n OnDestroy,\n ViewEncapsulation\n} from '@angular/core';\nimport { KbqIcon } from './icon.component';\n\n@Component({\n selector: `[kbq-icon-button]`,\n template: '<ng-content />',\n styleUrls: ['icon-button.scss', 'icon-button-tokens.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'kbq kbq-icon-button',\n\n '[attr.tabindex]': 'tabindex',\n '[attr.disabled]': 'disabled',\n\n '[class.kbq-disabled]': 'disabled',\n '[class.kbq-icon-button_small]': 'small'\n }\n})\nexport class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy {\n protected readonly focusMonitor = inject(FocusMonitor);\n\n @Input() small = false;\n\n /** Name of an icon within a @koobiq/icons. */\n @Input({ alias: 'kbq-icon-button' }) iconName: string;\n\n @Input()\n get tabindex() {\n return this.disabled ? null : this._tabindex;\n }\n\n set tabindex(value: any) {\n this._tabindex = value;\n }\n\n private _tabindex = 0;\n\n /** Whether the button is disabled. */\n @Input({ transform: booleanAttribute })\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(value: boolean) {\n if (this._disabled !== value) {\n this._disabled = value;\n\n this._disabled ? this.stopFocusMonitor() : this.runFocusMonitor();\n }\n }\n\n private _disabled: boolean;\n\n override name = 'KbqIconButton';\n\n ngAfterViewInit(): void {\n this.runFocusMonitor();\n }\n\n ngOnDestroy() {\n this.stopFocusMonitor();\n }\n\n private runFocusMonitor() {\n this.focusMonitor.monitor(this.getHostElement(), true);\n }\n\n private stopFocusMonitor() {\n this.focusMonitor.stopMonitoring(this.getHostElement());\n }\n}\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { KbqIcon } from './icon.component';\n\n@Component({\n selector: `[kbq-icon-item]`,\n template: '<ng-content />',\n styleUrls: ['icon-item.scss', 'icon-item-tokens.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'kbq kbq-icon-item kbq-icon-item_filled',\n '[class.kbq-icon-item_normal]': '!big',\n '[class.kbq-icon-item_big]': 'big',\n '[class.kbq-icon-item_fade-off]': '!fade',\n '[class.kbq-icon-item_fade-on]': 'fade'\n }\n})\nexport class KbqIconItem extends KbqIcon {\n override name = 'KbqIconItem';\n\n /** Name of an icon within a @koobiq/icons. */\n @Input({ alias: 'kbq-icon-item' }) iconName: string;\n\n @Input() fade: boolean = false;\n @Input() big: boolean = false;\n}\n","import { NgModule } from '@angular/core';\nimport { KbqIconButton } from './icon-button.component';\nimport { KbqIconItem } from './icon-item.component';\nimport { KbqIcon } from './icon.component';\n\nconst COMPONENTS = [\n KbqIcon,\n KbqIconButton,\n KbqIconItem\n];\n\n@NgModule({\n imports: COMPONENTS,\n exports: COMPONENTS\n})\nexport class KbqIconModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"koobiq-components-icon.mjs","sources":["../../../packages/components/icon/icon.component.ts","../../../packages/components/icon/icon-button.component.ts","../../../packages/components/icon/icon-item.component.ts","../../../packages/components/icon/icon.module.ts","../../../packages/components/icon/koobiq-components-icon.ts"],"sourcesContent":["import {\n AfterContentInit,\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n inject,\n Input,\n ViewEncapsulation\n} from '@angular/core';\nimport { KBQ_FORM_FIELD_REF, KbqColorDirective } from '@koobiq/components/core';\n\n@Component({\n selector: '[kbq-icon]',\n template: '<ng-content />',\n styleUrls: ['icon.scss', 'icon-tokens.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'kbq kbq-icon',\n '[class]': 'iconName',\n '[class.kbq-error]': 'color === \"error\" || hasError'\n }\n})\nexport class KbqIcon extends KbqColorDirective implements AfterContentInit {\n readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n protected readonly formField = inject(KBQ_FORM_FIELD_REF, { optional: true });\n protected readonly changeDetectorRef = inject(ChangeDetectorRef);\n\n @Input() small = false;\n @Input() autoColor = false;\n\n hasError: boolean = false;\n\n /** Name of an icon within a @koobiq/icons. */\n @Input({ alias: 'kbq-icon' }) iconName: string;\n\n protected name = 'KbqIcon';\n\n getHostElement() {\n return this.elementRef.nativeElement;\n }\n\n updateMaxHeight() {\n if (this.name !== 'KbqIcon') {\n return;\n }\n\n const size = parseInt(this.iconName?.split('_')[1]);\n\n if (size) {\n this.getHostElement().style.maxHeight = `${size}px`;\n }\n }\n\n ngAfterContentInit(): void {\n if (this.autoColor) {\n this.formField?.control?.stateChanges.subscribe(this.updateState);\n\n this.updateState();\n }\n\n this.updateMaxHeight();\n }\n\n private updateState = () => {\n this.hasError = this.formField?.control?.errorState;\n\n this.changeDetectorRef.markForCheck();\n };\n}\n","import { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n AfterViewInit,\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n inject,\n Input,\n OnDestroy,\n ViewEncapsulation\n} from '@angular/core';\nimport { KbqIcon } from './icon.component';\n\n@Component({\n selector: `[kbq-icon-button]`,\n template: '<ng-content />',\n styleUrls: ['icon-button.scss', 'icon-button-tokens.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'kbq kbq-icon-button',\n\n '[attr.tabindex]': 'tabindex',\n '[attr.disabled]': 'disabled',\n\n '[class.kbq-disabled]': 'disabled',\n '[class.kbq-icon-button_small]': 'small'\n }\n})\nexport class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy {\n protected readonly focusMonitor = inject(FocusMonitor);\n\n @Input() small = false;\n\n /** Name of an icon within a @koobiq/icons. */\n @Input({ alias: 'kbq-icon-button' }) iconName: string;\n\n @Input()\n get tabindex() {\n return this.disabled ? null : this._tabindex;\n }\n\n set tabindex(value: any) {\n this._tabindex = value;\n }\n\n private _tabindex = 0;\n\n /** Whether the button is disabled. */\n @Input({ transform: booleanAttribute })\n get disabled(): boolean {\n return this._disabled;\n }\n\n set disabled(value: boolean) {\n if (this._disabled !== value) {\n this._disabled = value;\n\n this._disabled ? this.stopFocusMonitor() : this.runFocusMonitor();\n }\n }\n\n private _disabled: boolean;\n\n override name = 'KbqIconButton';\n\n ngAfterViewInit(): void {\n this.runFocusMonitor();\n }\n\n ngOnDestroy() {\n this.stopFocusMonitor();\n }\n\n private runFocusMonitor() {\n this.focusMonitor.monitor(this.getHostElement(), true);\n }\n\n private stopFocusMonitor() {\n this.focusMonitor.stopMonitoring(this.getHostElement());\n }\n}\n","import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';\nimport { KbqIcon } from './icon.component';\n\n@Component({\n selector: `[kbq-icon-item]`,\n template: '<ng-content />',\n styleUrls: ['icon-item.scss', 'icon-item-tokens.scss'],\n encapsulation: ViewEncapsulation.None,\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'kbq kbq-icon-item kbq-icon-item_filled',\n '[class.kbq-icon-item_normal]': '!big',\n '[class.kbq-icon-item_big]': 'big',\n '[class.kbq-icon-item_fade-off]': '!fade',\n '[class.kbq-icon-item_fade-on]': 'fade'\n }\n})\nexport class KbqIconItem extends KbqIcon {\n override name = 'KbqIconItem';\n\n /** Name of an icon within a @koobiq/icons. */\n @Input({ alias: 'kbq-icon-item' }) iconName: string;\n\n @Input() fade: boolean = false;\n @Input() big: boolean = false;\n}\n","import { NgModule } from '@angular/core';\nimport { KbqIconButton } from './icon-button.component';\nimport { KbqIconItem } from './icon-item.component';\nimport { KbqIcon } from './icon.component';\n\nconst COMPONENTS = [\n KbqIcon,\n KbqIconButton,\n KbqIconItem\n];\n\n@NgModule({\n imports: COMPONENTS,\n exports: COMPONENTS\n})\nexport class KbqIconModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -7,16 +7,13 @@ import * as i0 from '@angular/core';
|
|
|
7
7
|
import { output, Directive, inject, ElementRef, input, booleanAttribute, numberAttribute, contentChild, viewChild, viewChildren, signal, computed, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
8
8
|
import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
9
|
import { AbstractControl, NgControl } from '@angular/forms';
|
|
10
|
-
import { KbqAutocompleteTrigger } from '@koobiq/components/autocomplete';
|
|
11
10
|
import * as i1 from '@koobiq/components/button';
|
|
12
11
|
import { KbqButtonModule } from '@koobiq/components/button';
|
|
13
12
|
import { KbqAnimationDurations, KbqAnimationCurves, PopUpPlacements, KbqComponentColors } from '@koobiq/components/core';
|
|
14
13
|
import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
|
|
15
14
|
import { KbqLabel, KbqFormField } from '@koobiq/components/form-field';
|
|
16
15
|
import { KbqIcon } from '@koobiq/components/icon';
|
|
17
|
-
import { KbqSelect } from '@koobiq/components/select';
|
|
18
16
|
import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
|
|
19
|
-
import { KbqTreeSelect } from '@koobiq/components/tree-select';
|
|
20
17
|
import { skip } from 'rxjs';
|
|
21
18
|
import { takeUntil } from 'rxjs/operators';
|
|
22
19
|
|
|
@@ -39,10 +36,10 @@ class KbqFocusRegionItem {
|
|
|
39
36
|
}
|
|
40
37
|
this.isFocused = !this.isFocused;
|
|
41
38
|
}
|
|
42
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
43
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
39
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqFocusRegionItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
40
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqFocusRegionItem, isStandalone: true, selector: "[kbqFocusRegionItem]", outputs: { tabOut: "tabOut" }, host: { listeners: { "focusin": "isFocused = true", "keydown.tab": "onTabOut($event)", "keydown.shift.tab": "onTabOut($event)" } }, exportAs: ["kbqFocusRegionItem"], ngImport: i0 }); }
|
|
44
41
|
}
|
|
45
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
42
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqFocusRegionItem, decorators: [{
|
|
46
43
|
type: Directive,
|
|
47
44
|
args: [{
|
|
48
45
|
selector: '[kbqFocusRegionItem]',
|
|
@@ -56,10 +53,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
56
53
|
}] });
|
|
57
54
|
/** Directive for easy using styles of inline edit placeholder publicly. */
|
|
58
55
|
class KbqInlineEditPlaceholder {
|
|
59
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
60
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
56
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditPlaceholder, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
57
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqInlineEditPlaceholder, isStandalone: true, selector: "[kbqInlineEditPlaceholder]", host: { classAttribute: "kbq-inline-edit__placeholder" }, exportAs: ["kbqInlineEditPlaceholder"], ngImport: i0 }); }
|
|
61
58
|
}
|
|
62
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
59
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditPlaceholder, decorators: [{
|
|
63
60
|
type: Directive,
|
|
64
61
|
args: [{
|
|
65
62
|
selector: '[kbqInlineEditPlaceholder]',
|
|
@@ -79,10 +76,10 @@ class KbqInlineEditMenu {
|
|
|
79
76
|
/** @docs-private */
|
|
80
77
|
this.dropdownTrigger = inject(KbqDropdownTrigger, { optional: true });
|
|
81
78
|
}
|
|
82
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
83
|
-
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.
|
|
79
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditMenu, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
80
|
+
/** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.18", type: KbqInlineEditMenu, isStandalone: true, selector: "[kbqInlineEditMenu]", host: { attributes: { "role": "button" }, listeners: { "click": "$event.stopPropagation()", "keydown.enter": "$event.stopPropagation()", "keydown.space": "$event.stopPropagation()" }, properties: { "class.kbq-active": "dropdownTrigger?.opened" }, classAttribute: "kbq-inline-edit__menu" }, exportAs: ["kbqInlineEditMenu"], ngImport: i0 }); }
|
|
84
81
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
82
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditMenu, decorators: [{
|
|
86
83
|
type: Directive,
|
|
87
84
|
args: [{
|
|
88
85
|
selector: '[kbqInlineEditMenu]',
|
|
@@ -179,7 +176,7 @@ class KbqInlineEdit {
|
|
|
179
176
|
.pipe(skip(1), takeUntilDestroyed())
|
|
180
177
|
.subscribe((currentMode) => this.modeChange.emit(currentMode));
|
|
181
178
|
}
|
|
182
|
-
/**
|
|
179
|
+
/** Manually switch mode */
|
|
183
180
|
toggleMode() {
|
|
184
181
|
this.mode.update((mode) => (mode === 'view' ? 'edit' : 'view'));
|
|
185
182
|
}
|
|
@@ -338,23 +335,17 @@ class KbqInlineEdit {
|
|
|
338
335
|
: this.elementRef;
|
|
339
336
|
this.overlayWidth.set(elementRef?.nativeElement.offsetWidth ?? '');
|
|
340
337
|
}
|
|
341
|
-
// @TODO refactor this (#DS-4181)
|
|
342
338
|
openPanel(formFieldRef) {
|
|
343
339
|
const control = formFieldRef.control;
|
|
344
|
-
|
|
345
|
-
control.open();
|
|
346
|
-
}
|
|
347
|
-
else if (control instanceof KbqAutocompleteTrigger) {
|
|
348
|
-
control.openPanel();
|
|
349
|
-
}
|
|
340
|
+
control?.open?.();
|
|
350
341
|
}
|
|
351
342
|
getInputNativeElement() {
|
|
352
343
|
return this.overlayDir()?.overlayRef.overlayElement.querySelector('input:not([type="file"]),textarea') ?? null;
|
|
353
344
|
}
|
|
354
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
355
|
-
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KbqInlineEdit, isStandalone: true, selector: "kbq-inline-edit", inputs: { showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showTooltipOnError: { classPropertyName: "showTooltipOnError", publicName: "showTooltipOnError", isSignal: true, isRequired: false, transformFunction: null }, validationTooltip: { classPropertyName: "validationTooltip", publicName: "validationTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editModeWidth: { classPropertyName: "editModeWidth", publicName: "editModeWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, getValueHandler: { classPropertyName: "getValueHandler", publicName: "getValueHandler", isSignal: true, isRequired: false, transformFunction: null }, setValueHandler: { classPropertyName: "setValueHandler", publicName: "setValueHandler", isSignal: true, isRequired: false, transformFunction: null }, canSaveOnEnter: { classPropertyName: "canSaveOnEnter", publicName: "canSaveOnEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", canceled: "canceled", modeChange: "modeChange" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class": "className()", "class.kbq-inline-edit_with-label": "!!label()", "class.kbq-inline-edit_with-menu": "!!menu()", "class.kbq-inline-edit_disabled": "disabled()" }, classAttribute: "kbq-inline-edit" }, queries: [{ propertyName: "menu", first: true, predicate: KbqInlineEditMenu, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: KbqLabel, descendants: true, isSignal: true }, { propertyName: "formFieldRef", first: true, predicate: KbqFormField, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "regionItems", predicate: KbqFocusRegionItem, descendants: true, isSignal: true }], exportAs: ["kbqInlineEdit"], ngImport: i0, template: "@if (label()) {\n <div class=\"kbq-inline-edit__label\">\n <ng-content select=\"kbq-label\" />\n </div>\n}\n\n<div class=\"kbq-inline-edit__view-container\">\n <ng-content select=\"[kbqInlineEditViewMode]\" />\n\n <div\n #overlayOrigin\n class=\"kbq-inline-edit__focus_container kbq-inline-edit__overlay-origin\"\n cdkMonitorElementFocus\n cdkOverlayOrigin\n [tabIndex]=\"tabIndex()\"\n (keydown.enter)=\"onClick($event)\"\n ></div>\n\n @if (menu() && mode() === 'view') {\n <div class=\"kbq-inline-edit__menu-mask kbq-mask\">\n <div class=\"kbq-inline-edit__menu-mask-fade kbq-mask__fade\"></div>\n <div class=\"kbq-inline-edit__menu-mask-container kbq-mask__container\">\n <ng-content select=\"[kbqInlineEditMenu]\" />\n </div>\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayOpen]=\"isEditMode()\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOffsetY]=\"-overlayOrigin.offsetHeight\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"onAttach()\"\n (overlayOutsideClick)=\"save($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n >\n <div class=\"kbq-inline-edit__panel\" cdkTrapFocus cdkTrapFocusAutoCapture>\n <div\n class=\"kbq-inline-edit__control-container\"\n kbqFocusRegionItem\n [kbqTooltipColor]=\"colors.Error\"\n [kbqTooltip]=\"validationTooltip() ?? ''\"\n [kbqTooltipArrow]=\"false\"\n [kbqTrigger]=\"'manual'\"\n [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n >\n <ng-content select=\"[kbqInlineEditEditMode]\" />\n </div>\n\n @if (showActions()) {\n <div class=\"kbq-inline-edit__action-buttons\" role=\"group\" [@panelAnimation]>\n <button kbq-button [color]=\"'contrast'\" (click)=\"save($event)\">\n <i kbq-icon=\"kbq-check_16\"></i>\n </button>\n <button\n kbqFocusRegionItem\n kbq-button\n [color]=\"'contrast-fade'\"\n (click)=\"cancel()\"\n (keydown.enter)=\"cancel()\"\n >\n <i kbq-icon=\"kbq-xmark_16\"></i>\n </button>\n </div>\n }\n </div>\n </ng-template>\n</div>\n", styles: [".kbq-inline-edit{display:flex;flex-direction:column;justify-content:center;border-radius:var(--kbq-size-border-radius);padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);box-sizing:border-box}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit .kbq-inline-edit__focus_container{background:var(--kbq-inline-edit-background);border-color:var(--kbq-inline-edit-background)}.kbq-inline-edit .kbq-inline-edit__focus_container:focus-visible{outline:none}.kbq-inline-edit .kbq-inline-edit__focus_container.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: calc(var(--kbq-size-m) - var(--kbq-size-border-width))}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container{text-overflow:ellipsis}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit{position:relative}.kbq-inline-edit .kbq-mask{display:flex;position:absolute;top:0;right:0}.kbq-inline-edit .kbq-mask .kbq-mask__fade{background:var(--kbq-mask-background, transparent);mask-image:linear-gradient(90deg,transparent,var(--kbq-black-default))}.kbq-inline-edit .kbq-mask .kbq-mask__container{background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask{opacity:0;height:100%;justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit .kbq-inline-edit__focus_container{position:absolute;top:0;left:0;width:calc(100% - 2 * var(--kbq-size-border-width));height:calc(100% - 2 * var(--kbq-size-border-width));border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius);z-index:1}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__control-container{border-radius:var(--kbq-size-border-radius)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-buttons>.kbq-button-icon{box-shadow:var(--kbq-shadow-popup)}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: var(--kbq-size-3xl);--kbq-inline-edit-padding-horizontal: var(--kbq-size-s);--kbq-inline-edit-padding-vertical: 5px;--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqFocusRegionItem, selector: "[kbqFocusRegionItem]", outputs: ["tabOut"], exportAs: ["kbqFocusRegionItem"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
345
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEdit, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
346
|
+
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.18", type: KbqInlineEdit, isStandalone: true, selector: "kbq-inline-edit", inputs: { showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showTooltipOnError: { classPropertyName: "showTooltipOnError", publicName: "showTooltipOnError", isSignal: true, isRequired: false, transformFunction: null }, validationTooltip: { classPropertyName: "validationTooltip", publicName: "validationTooltip", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, editModeWidth: { classPropertyName: "editModeWidth", publicName: "editModeWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltipPlacement: { classPropertyName: "tooltipPlacement", publicName: "tooltipPlacement", isSignal: true, isRequired: false, transformFunction: null }, getValueHandler: { classPropertyName: "getValueHandler", publicName: "getValueHandler", isSignal: true, isRequired: false, transformFunction: null }, setValueHandler: { classPropertyName: "setValueHandler", publicName: "setValueHandler", isSignal: true, isRequired: false, transformFunction: null }, canSaveOnEnter: { classPropertyName: "canSaveOnEnter", publicName: "canSaveOnEnter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", canceled: "canceled", modeChange: "modeChange" }, host: { listeners: { "click": "onClick($event)", "keydown.enter": "onClick($event)", "keydown.space": "onClick($event)" }, properties: { "class": "className()", "class.kbq-inline-edit_with-label": "!!label()", "class.kbq-inline-edit_with-menu": "!!menu()", "class.kbq-inline-edit_disabled": "disabled()" }, classAttribute: "kbq-inline-edit" }, queries: [{ propertyName: "menu", first: true, predicate: KbqInlineEditMenu, descendants: true, isSignal: true }, { propertyName: "label", first: true, predicate: KbqLabel, descendants: true, isSignal: true }, { propertyName: "formFieldRef", first: true, predicate: KbqFormField, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true, isSignal: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "regionItems", predicate: KbqFocusRegionItem, descendants: true, isSignal: true }], exportAs: ["kbqInlineEdit"], ngImport: i0, template: "@if (label()) {\n <div class=\"kbq-inline-edit__label\">\n <ng-content select=\"kbq-label\" />\n </div>\n}\n\n<div class=\"kbq-inline-edit__view-container\">\n <ng-content select=\"[kbqInlineEditViewMode]\" />\n\n <div\n #overlayOrigin\n class=\"kbq-inline-edit__focus_container kbq-inline-edit__overlay-origin\"\n cdkMonitorElementFocus\n cdkOverlayOrigin\n [tabIndex]=\"tabIndex()\"\n (keydown.enter)=\"onClick($event)\"\n ></div>\n\n @if (menu() && mode() === 'view') {\n <div class=\"kbq-inline-edit__menu-mask kbq-mask\">\n <div class=\"kbq-inline-edit__menu-mask-fade kbq-mask__fade\"></div>\n <div class=\"kbq-inline-edit__menu-mask-container kbq-mask__container\">\n <ng-content select=\"[kbqInlineEditMenu]\" />\n </div>\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayOpen]=\"isEditMode()\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOffsetY]=\"-overlayOrigin.offsetHeight\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"onAttach()\"\n (overlayOutsideClick)=\"save($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n >\n <div class=\"kbq-inline-edit__panel\" cdkTrapFocus cdkTrapFocusAutoCapture>\n <div\n class=\"kbq-inline-edit__control-container\"\n kbqFocusRegionItem\n [kbqTooltipColor]=\"colors.Error\"\n [kbqTooltip]=\"validationTooltip() ?? ''\"\n [kbqTooltipArrow]=\"false\"\n [kbqTrigger]=\"'manual'\"\n [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n >\n <ng-content select=\"[kbqInlineEditEditMode]\" />\n </div>\n\n @if (showActions()) {\n <div class=\"kbq-inline-edit__action-buttons\" role=\"group\" [@panelAnimation]>\n <button kbq-button [color]=\"'contrast'\" (click)=\"save($event)\">\n <i kbq-icon=\"kbq-check_16\"></i>\n </button>\n <button\n kbqFocusRegionItem\n kbq-button\n [color]=\"'contrast-fade'\"\n (click)=\"cancel()\"\n (keydown.enter)=\"cancel()\"\n >\n <i kbq-icon=\"kbq-xmark_16\"></i>\n </button>\n </div>\n }\n </div>\n </ng-template>\n</div>\n", styles: [".kbq-inline-edit{display:flex;flex-direction:column;justify-content:center;border-radius:var(--kbq-size-border-radius);padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);box-sizing:border-box}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit .kbq-inline-edit__focus_container{background:var(--kbq-inline-edit-background);border-color:var(--kbq-inline-edit-background)}.kbq-inline-edit .kbq-inline-edit__focus_container:focus-visible{outline:none}.kbq-inline-edit .kbq-inline-edit__focus_container.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: var(--kbq-size-m)}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container{text-overflow:ellipsis}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit{position:relative}.kbq-inline-edit .kbq-mask{display:flex;position:absolute;top:0;right:0}.kbq-inline-edit .kbq-mask .kbq-mask__fade{background:var(--kbq-mask-background, transparent);mask-image:linear-gradient(90deg,transparent,var(--kbq-black-default))}.kbq-inline-edit .kbq-mask .kbq-mask__container{background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask{opacity:0;height:100%;justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit .kbq-inline-edit__focus_container{position:absolute;top:0;left:0;width:calc(100% - 2 * var(--kbq-size-border-width));height:calc(100% - 2 * var(--kbq-size-border-width));border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius);z-index:1}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__control-container{border-radius:var(--kbq-size-border-radius)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-buttons>.kbq-button-icon{box-shadow:var(--kbq-shadow-popup)}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: var(--kbq-size-3xl);--kbq-inline-edit-padding-horizontal: var(--kbq-size-s);--kbq-inline-edit-padding-vertical: var(--kbq-size-xs);--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary)}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i1.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i1.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "directive", type: KbqTooltipTrigger, selector: "[kbqTooltip]", inputs: ["hideWithTimeout", "kbqVisible", "kbqPlacement", "kbqRelativeToPointer", "kbqPlacementPriority", "kbqTooltip", "kbqTooltipDisabled", "kbqEnterDelay", "kbqLeaveDelay", "kbqTrigger", "kbqTooltipClass", "kbqTooltipContext", "kbqTooltipColor", "kbqTooltipArrow", "kbqTooltipOffset"], outputs: ["kbqPlacementChange", "kbqVisibleChange"], exportAs: ["kbqTooltip"] }, { kind: "directive", type: KbqFocusRegionItem, selector: "[kbqFocusRegionItem]", outputs: ["tabOut"], exportAs: ["kbqFocusRegionItem"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }], animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
356
347
|
}
|
|
357
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
348
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEdit, decorators: [{
|
|
358
349
|
type: Component,
|
|
359
350
|
args: [{ selector: 'kbq-inline-edit', imports: [
|
|
360
351
|
CdkConnectedOverlay,
|
|
@@ -374,7 +365,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
|
|
|
374
365
|
'(click)': 'onClick($event)',
|
|
375
366
|
'(keydown.enter)': 'onClick($event)',
|
|
376
367
|
'(keydown.space)': 'onClick($event)'
|
|
377
|
-
}, animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION], template: "@if (label()) {\n <div class=\"kbq-inline-edit__label\">\n <ng-content select=\"kbq-label\" />\n </div>\n}\n\n<div class=\"kbq-inline-edit__view-container\">\n <ng-content select=\"[kbqInlineEditViewMode]\" />\n\n <div\n #overlayOrigin\n class=\"kbq-inline-edit__focus_container kbq-inline-edit__overlay-origin\"\n cdkMonitorElementFocus\n cdkOverlayOrigin\n [tabIndex]=\"tabIndex()\"\n (keydown.enter)=\"onClick($event)\"\n ></div>\n\n @if (menu() && mode() === 'view') {\n <div class=\"kbq-inline-edit__menu-mask kbq-mask\">\n <div class=\"kbq-inline-edit__menu-mask-fade kbq-mask__fade\"></div>\n <div class=\"kbq-inline-edit__menu-mask-container kbq-mask__container\">\n <ng-content select=\"[kbqInlineEditMenu]\" />\n </div>\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayOpen]=\"isEditMode()\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOffsetY]=\"-overlayOrigin.offsetHeight\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"onAttach()\"\n (overlayOutsideClick)=\"save($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n >\n <div class=\"kbq-inline-edit__panel\" cdkTrapFocus cdkTrapFocusAutoCapture>\n <div\n class=\"kbq-inline-edit__control-container\"\n kbqFocusRegionItem\n [kbqTooltipColor]=\"colors.Error\"\n [kbqTooltip]=\"validationTooltip() ?? ''\"\n [kbqTooltipArrow]=\"false\"\n [kbqTrigger]=\"'manual'\"\n [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n >\n <ng-content select=\"[kbqInlineEditEditMode]\" />\n </div>\n\n @if (showActions()) {\n <div class=\"kbq-inline-edit__action-buttons\" role=\"group\" [@panelAnimation]>\n <button kbq-button [color]=\"'contrast'\" (click)=\"save($event)\">\n <i kbq-icon=\"kbq-check_16\"></i>\n </button>\n <button\n kbqFocusRegionItem\n kbq-button\n [color]=\"'contrast-fade'\"\n (click)=\"cancel()\"\n (keydown.enter)=\"cancel()\"\n >\n <i kbq-icon=\"kbq-xmark_16\"></i>\n </button>\n </div>\n }\n </div>\n </ng-template>\n</div>\n", styles: [".kbq-inline-edit{display:flex;flex-direction:column;justify-content:center;border-radius:var(--kbq-size-border-radius);padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);box-sizing:border-box}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit .kbq-inline-edit__focus_container{background:var(--kbq-inline-edit-background);border-color:var(--kbq-inline-edit-background)}.kbq-inline-edit .kbq-inline-edit__focus_container:focus-visible{outline:none}.kbq-inline-edit .kbq-inline-edit__focus_container.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal:
|
|
368
|
+
}, animations: [KBQ_INLINE_EDIT_ACTION_BUTTONS_ANIMATION], template: "@if (label()) {\n <div class=\"kbq-inline-edit__label\">\n <ng-content select=\"kbq-label\" />\n </div>\n}\n\n<div class=\"kbq-inline-edit__view-container\">\n <ng-content select=\"[kbqInlineEditViewMode]\" />\n\n <div\n #overlayOrigin\n class=\"kbq-inline-edit__focus_container kbq-inline-edit__overlay-origin\"\n cdkMonitorElementFocus\n cdkOverlayOrigin\n [tabIndex]=\"tabIndex()\"\n (keydown.enter)=\"onClick($event)\"\n ></div>\n\n @if (menu() && mode() === 'view') {\n <div class=\"kbq-inline-edit__menu-mask kbq-mask\">\n <div class=\"kbq-inline-edit__menu-mask-fade kbq-mask__fade\"></div>\n <div class=\"kbq-inline-edit__menu-mask-container kbq-mask__container\">\n <ng-content select=\"[kbqInlineEditMenu]\" />\n </div>\n </div>\n }\n\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayOpen]=\"isEditMode()\"\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOffsetY]=\"-overlayOrigin.offsetHeight\"\n [cdkConnectedOverlayWidth]=\"overlayWidth()\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"onAttach()\"\n (overlayOutsideClick)=\"save($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n >\n <div class=\"kbq-inline-edit__panel\" cdkTrapFocus cdkTrapFocusAutoCapture>\n <div\n class=\"kbq-inline-edit__control-container\"\n kbqFocusRegionItem\n [kbqTooltipColor]=\"colors.Error\"\n [kbqTooltip]=\"validationTooltip() ?? ''\"\n [kbqTooltipArrow]=\"false\"\n [kbqTrigger]=\"'manual'\"\n [kbqPlacement]=\"tooltipPlacement() ?? placements.TopLeft\"\n >\n <ng-content select=\"[kbqInlineEditEditMode]\" />\n </div>\n\n @if (showActions()) {\n <div class=\"kbq-inline-edit__action-buttons\" role=\"group\" [@panelAnimation]>\n <button kbq-button [color]=\"'contrast'\" (click)=\"save($event)\">\n <i kbq-icon=\"kbq-check_16\"></i>\n </button>\n <button\n kbqFocusRegionItem\n kbq-button\n [color]=\"'contrast-fade'\"\n (click)=\"cancel()\"\n (keydown.enter)=\"cancel()\"\n >\n <i kbq-icon=\"kbq-xmark_16\"></i>\n </button>\n </div>\n }\n </div>\n </ng-template>\n</div>\n", styles: [".kbq-inline-edit{display:flex;flex-direction:column;justify-content:center;border-radius:var(--kbq-size-border-radius);padding:var(--kbq-inline-edit-padding-vertical) var(--kbq-inline-edit-padding-horizontal);min-height:var(--kbq-inline-edit-height);box-sizing:border-box}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):hover{--kbq-inline-edit-background: var(--kbq-states-background-transparent-hover);--kbq-mask-background: var(--kbq-states-background-contrast-less-hover);cursor:pointer}.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):active,.kbq-inline-edit.kbq-inline-edit_view:not(.kbq-inline-edit_disabled):has(.kbq-inline-edit__menu.kbq-active){--kbq-inline-edit-background: var(--kbq-states-background-transparent-active);--kbq-mask-background: var(--kbq-states-background-contrast-less-active)}.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:hover,.kbq-inline-edit.kbq-inline-edit_view.kbq-inline-edit_disabled:has(.kbq-inline-edit__menu.kbq-active){--kbq-mask-background: var(--kbq-background-bg)}.kbq-inline-edit .kbq-label{color:var(--kbq-inline-edit-label-color)}.kbq-inline-edit .kbq-inline-edit__focus_container{background:var(--kbq-inline-edit-background);border-color:var(--kbq-inline-edit-background)}.kbq-inline-edit .kbq-inline-edit__focus_container:focus-visible{outline:none}.kbq-inline-edit .kbq-inline-edit__focus_container.cdk-keyboard-focused{outline:1px solid var(--kbq-states-line-focus-theme);border-color:var(--kbq-states-line-focus-theme)}.kbq-inline-edit{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-inline-edit:not(.kbq-inline-edit_with-label){--kbq-inline-edit-padding-horizontal: var(--kbq-size-m)}.kbq-inline-edit.kbq-inline-edit_with-label{padding-top:var(--kbq-inline-edit-padding-vertical);padding-bottom:var(--kbq-inline-edit-padding-vertical)}.kbq-inline-edit.kbq-inline-edit_with-label.kbq-inline-edit_edit .kbq-inline-edit__view-container{position:relative}.kbq-inline-edit.kbq-inline-edit_with-label .kbq-inline-edit__label{margin-bottom:var(--kbq-size-3xs)}.kbq-inline-edit.kbq-inline-edit_view .kbq-inline-edit__view-container{text-overflow:ellipsis}.kbq-inline-edit:hover .kbq-inline-edit__menu-mask,.kbq-inline-edit.cdk-keyboard-focused .kbq-inline-edit__menu-mask{opacity:1}.kbq-inline-edit .kbq-inline-edit__placeholder{color:var(--kbq-foreground-contrast-secondary)}.kbq-inline-edit{position:relative}.kbq-inline-edit .kbq-mask{display:flex;position:absolute;top:0;right:0}.kbq-inline-edit .kbq-mask .kbq-mask__fade{background:var(--kbq-mask-background, transparent);mask-image:linear-gradient(90deg,transparent,var(--kbq-black-default))}.kbq-inline-edit .kbq-mask .kbq-mask__container{background:var(--kbq-mask-background, transparent)}.kbq-inline-edit .kbq-inline-edit__menu-mask{opacity:0;height:100%;justify-content:flex-end;border-top-right-radius:var(--kbq-size-border-radius);border-bottom-right-radius:var(--kbq-size-border-radius)}.kbq-inline-edit .kbq-inline-edit__menu-mask:has(.kbq-inline-edit__menu.kbq-pressed,.kbq-inline-edit__menu.cdk-keyboard-focused){opacity:1}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-fade{width:32px}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu-mask-container{display:flex;justify-content:flex-end;min-width:40px;border-radius:inherit}.kbq-inline-edit .kbq-inline-edit__menu-mask .kbq-inline-edit__menu{display:inline-flex;align-self:flex-start;padding:var(--kbq-size-s);z-index:2}.kbq-inline-edit .kbq-inline-edit__focus_container{position:absolute;top:0;left:0;width:calc(100% - 2 * var(--kbq-size-border-width));height:calc(100% - 2 * var(--kbq-size-border-width));border:var(--kbq-size-border-width) solid transparent;border-radius:var(--kbq-size-border-radius);z-index:1}.kbq-inline-edit__panel{width:100%}.kbq-inline-edit__panel .kbq-inline-edit__control-container{border-radius:var(--kbq-size-border-radius)}.kbq-inline-edit__panel .kbq-inline-edit__action-buttons{position:absolute;left:calc(-1 * var(--kbq-inline-edit-padding-horizontal));display:inline-flex;flex-direction:row;gap:var(--kbq-size-xxs);padding:var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-s)}.kbq-inline-edit__panel .kbq-inline-edit__control-container,.kbq-inline-edit__panel .kbq-inline-edit__action-buttons>.kbq-button-icon{box-shadow:var(--kbq-shadow-popup)}\n", ":where(.kbq-inline-edit,.kbq-inline-edit__panel){--kbq-inline-edit-background: transparent;--kbq-inline-edit-height: var(--kbq-size-3xl);--kbq-inline-edit-padding-horizontal: var(--kbq-size-s);--kbq-inline-edit-padding-vertical: var(--kbq-size-xs);--kbq-inline-edit-panel-shadow: var(--kbq-shadow-popup);--kbq-inline-edit-label-color: var(--kbq-foreground-contrast-secondary)}\n"] }]
|
|
378
369
|
}], ctorParameters: () => [] });
|
|
379
370
|
|
|
380
371
|
const COMPONENTS = [
|
|
@@ -383,15 +374,15 @@ const COMPONENTS = [
|
|
|
383
374
|
KbqInlineEditMenu
|
|
384
375
|
];
|
|
385
376
|
class KbqInlineEditModule {
|
|
386
|
-
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.
|
|
387
|
-
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.
|
|
377
|
+
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
378
|
+
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditModule, imports: [KbqInlineEdit,
|
|
388
379
|
KbqInlineEditPlaceholder,
|
|
389
380
|
KbqInlineEditMenu], exports: [KbqInlineEdit,
|
|
390
381
|
KbqInlineEditPlaceholder,
|
|
391
382
|
KbqInlineEditMenu] }); }
|
|
392
|
-
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.
|
|
383
|
+
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditModule, imports: [KbqInlineEdit] }); }
|
|
393
384
|
}
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.
|
|
385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.18", ngImport: i0, type: KbqInlineEditModule, decorators: [{
|
|
395
386
|
type: NgModule,
|
|
396
387
|
args: [{
|
|
397
388
|
imports: COMPONENTS,
|