@koobiq/components 18.5.3 → 18.7.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/accordion/_accordion-theme.scss +3 -3
- package/alert/_alert-theme.scss +3 -3
- package/badge/_badge-theme.scss +8 -4
- package/badge/badge-tokens.scss +8 -0
- package/badge/badge.component.d.ts +1 -0
- package/button/_button-theme.scss +2 -2
- package/button-toggle/_button-toggle-theme.scss +1 -1
- package/checkbox/_checkbox-theme.scss +4 -4
- package/checkbox/checkbox-tokens.scss +4 -4
- package/code-block/_code-block-theme.scss +4 -4
- package/core/forms/_forms-theme.scss +1 -1
- package/core/option/_optgroup-theme.scss +2 -2
- package/core/option/_option-action-theme.scss +1 -1
- package/core/option/_option-theme.scss +2 -2
- package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +4 -4
- package/core/styles/theming/_theming.scss +2 -42
- package/core/styles/typography/_typography.scss +120 -159
- package/core/styles/visual/_layout.scss +1 -1
- package/datepicker/_datepicker-theme.scss +2 -2
- package/dl/_dl-theme.scss +2 -2
- package/dl/dl-tokens.scss +2 -2
- package/dropdown/_dropdown-theme.scss +8 -4
- package/empty-state/_empty-state-theme.scss +4 -4
- package/esm2022/badge/badge.component.mjs +4 -3
- package/esm2022/button/button.component.mjs +2 -2
- package/esm2022/checkbox/checkbox.mjs +2 -2
- package/esm2022/code-block/code-block.component.mjs +2 -2
- package/esm2022/core/option/action.mjs +2 -2
- package/esm2022/core/option/optgroup.mjs +2 -2
- package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
- package/esm2022/core/version.mjs +2 -2
- package/esm2022/dl/dl.component.mjs +2 -2
- package/esm2022/dropdown/dropdown.component.mjs +3 -3
- package/esm2022/icon/icon-button.component.mjs +2 -2
- package/esm2022/markdown/markdown.component.mjs +2 -2
- package/esm2022/select/select.component.mjs +3 -3
- package/esm2022/splitter/splitter.component.mjs +3 -3
- package/esm2022/timezone/timezone-select.component.mjs +2 -2
- package/esm2022/toggle/toggle.component.mjs +3 -3
- package/esm2022/tree-select/tree-select.component.mjs +3 -3
- package/fesm2022/koobiq-components-badge.mjs +3 -2
- package/fesm2022/koobiq-components-badge.mjs.map +1 -1
- package/fesm2022/koobiq-components-button.mjs +2 -2
- package/fesm2022/koobiq-components-button.mjs.map +1 -1
- package/fesm2022/koobiq-components-checkbox.mjs +2 -2
- package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
- package/fesm2022/koobiq-components-code-block.mjs +2 -2
- package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
- package/fesm2022/koobiq-components-core.mjs +7 -7
- package/fesm2022/koobiq-components-core.mjs.map +1 -1
- package/fesm2022/koobiq-components-dl.mjs +2 -2
- package/fesm2022/koobiq-components-dropdown.mjs +2 -2
- package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-icon.mjs +2 -2
- package/fesm2022/koobiq-components-icon.mjs.map +1 -1
- package/fesm2022/koobiq-components-markdown.mjs +2 -2
- package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
- package/fesm2022/koobiq-components-select.mjs +2 -2
- package/fesm2022/koobiq-components-select.mjs.map +1 -1
- package/fesm2022/koobiq-components-splitter.mjs +2 -2
- package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
- package/fesm2022/koobiq-components-timezone.mjs +2 -2
- package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
- package/fesm2022/koobiq-components-toggle.mjs +2 -2
- package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
- package/fesm2022/koobiq-components-tree-select.mjs +2 -2
- package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
- package/file-upload/_file-upload-theme.scss +7 -7
- package/form-field/_form-field-theme.scss +2 -2
- package/form-field/_hint-theme.scss +2 -2
- package/icon/_icon-button-theme.scss +2 -2
- package/input/_input-theme.scss +2 -2
- package/link/_link-theme.scss +3 -3
- package/list/_list-theme.scss +2 -2
- package/loader-overlay/_loader-overlay-theme.scss +4 -4
- package/markdown/_markdown-theme.scss +9 -9
- package/markdown/markdown-tokens.scss +23 -23
- package/modal/_modal-theme.scss +2 -2
- package/navbar/_navbar-theme.scss +2 -2
- package/package.json +6 -6
- package/popover/_popover-theme.scss +2 -2
- package/prebuilt-themes/dark-theme.css +1 -1
- package/prebuilt-themes/light-theme.css +1 -1
- package/prebuilt-themes/theme.css +1 -1
- package/progress-bar/_progress-bar-theme.scss +2 -2
- package/progress-spinner/_progress-spinner-theme.scss +2 -2
- package/radio/_radio-theme.scss +4 -4
- package/risk-level/_risk-level-theme.scss +1 -1
- package/schematics/collection.json +12 -2
- package/schematics/migrations/css-selectors/data.js +65 -0
- package/schematics/migrations/css-selectors/index.js +103 -0
- package/schematics/migrations/css-selectors/schema.json +25 -0
- package/schematics/migrations/deprecated-icons/data.js +1580 -0
- package/schematics/migrations/deprecated-icons/index.js +96 -0
- package/schematics/{new-icons-pack → migrations/new-icons-pack}/index.js +13 -29
- package/schematics/migrations/new-icons-pack/schema.json +25 -0
- package/schematics/ng-add/index.js +5 -5
- package/schematics/utils/package-config.js +6 -60
- package/select/_select-theme.scss +5 -5
- package/sidepanel/_sidepanel-theme.scss +2 -2
- package/splitter/_splitter-theme.scss +1 -1
- package/table/_table-theme.scss +2 -2
- package/tabs/_tabs-theme.scss +1 -1
- package/tags/_tag-theme.scss +2 -2
- package/textarea/_textarea-theme.scss +1 -1
- package/timezone/_timezone-option-theme.scss +4 -4
- package/toast/_toast-theme.scss +2 -2
- package/toggle/_toggle-theme.scss +5 -5
- package/tooltip/_tooltip-theme.scss +2 -2
- package/tree/_tree-theme.scss +2 -2
- package/tree-select/_tree-select-theme.scss +3 -3
- /package/schematics/{new-icons-pack → migrations/deprecated-icons}/schema.json +0 -0
- /package/schematics/{new-icons-pack → migrations/new-icons-pack}/data.js +0 -0
|
@@ -108,7 +108,7 @@ class KbqToggleComponent extends KbqToggleMixinBase {
|
|
|
108
108
|
useExisting: forwardRef((() => KbqToggleComponent)),
|
|
109
109
|
multi: true
|
|
110
110
|
}
|
|
111
|
-
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["kbqToggle"], usesInheritance: true, ngImport: i0, template: "<label\n class=\"kbq-toggle-layout\"\n [attr.for]=\"inputId\"\n [class.left]=\"labelPosition === 'left'\"\n>\n <input\n #input\n role=\"switch\"\n type=\"checkbox\"\n class=\"kbq-toggle-input cdk-visually-hidden\"\n [attr.aria-checked]=\"getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [id]=\"inputId\"\n [tabIndex]=\"tabIndex\"\n (change)=\"onChangeEvent($event)\"\n (click)=\"onInputClick($event)\"\n />\n <div class=\"kbq-toggle-bar-container\">\n <div class=\"kbq-toggle-bar\">\n <div\n class=\"kbq-toggle__circle\"\n [@switch]=\"checked\"\n ></div>\n </div>\n </div>\n\n <div\n class=\"kbq-toggle__content\"\n [class.left]=\"labelPosition === 'left'\"\n [class.right]=\"labelPosition === 'right'\"\n >\n <span\n class=\"kbq-toggle-label\"\n (cdkObserveContent)=\"onLabelTextChange()\"\n >\n <ng-content />\n </span>\n\n <ng-content select=\"kbq-hint\" />\n </div>\n</label>\n", styles: [".kbq-toggle{display:inline-block}.kbq-toggle .kbq-toggle__circle{position:absolute;border-radius:50%;transform:translate(-1px);height:10px;width:10px}.kbq-toggle .kbq-toggle-layout{display:flex;flex-direction:row;align-items:flex-start;cursor:inherit}.kbq-toggle .kbq-toggle-layout.left{flex-direction:row-reverse}.kbq-toggle .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-toggle-size-normal-height)) / 2)}.kbq-toggle .kbq-toggle-bar-container{display:flex;align-items:center}.kbq-toggle .kbq-toggle-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-style:solid;border-radius:8px;height:var(--kbq-toggle-size-normal-height);width:var(--kbq-toggle-size-normal-width)}.kbq-toggle .kbq-hint{margin-top:var(--kbq-toggle-size-normal-vertical-content-padding)}.kbq-toggle__content{display:flex;flex-direction:column;flex:1}.kbq-toggle__content.left{margin-right:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle__content.right{margin-left:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-bar{height:var(--kbq-toggle-size-big-height);width:var(--kbq-toggle-size-big-width)}.kbq-toggle.kbq-toggle_big .kbq-hint{margin-top:var(--kbq-toggle-size-big-vertical-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-toggle-font-big-label-line-height) - var(--kbq-toggle-size-big-height)) / 2)}.kbq-toggle:not(.kbq-disabled){cursor:pointer}.kbq-toggle .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-default-border);background:var(--kbq-toggle-theme-default-background)}.kbq-toggle .kbq-toggle__circle{background:var(--kbq-toggle-theme-default-circle-background)}.kbq-toggle:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-hover-border);background:var(--kbq-toggle-theme-states-hover-background)}.kbq-toggle:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-hover-circle-background)}.kbq-toggle.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-border);background:var(--kbq-toggle-theme-states-checked-background)}.kbq-toggle.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-circle-background)}.kbq-toggle.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-hover-border);background:var(--kbq-toggle-theme-states-checked-hover-background)}.kbq-toggle.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-hover-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-border);background:var(--kbq-toggle-theme-states-focused-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-focused-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-focused-focus-outline)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-border);background:var(--kbq-toggle-theme-states-checked-focused-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-focused-circle-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-checked-focused-focus-outline)}.kbq-toggle.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-disabled-border);background:var(--kbq-toggle-theme-states-disabled-background)}.kbq-toggle.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-disabled-circle-background)}.kbq-toggle.kbq-error .kbq-toggle-bar{border-color:var(--kbq-toggle-error-default-border);background:var(--kbq-toggle-error-default-background)}.kbq-toggle.kbq-error .kbq-toggle__circle{background:var(--kbq-toggle-error-default-circle-background)}.kbq-toggle.kbq-error:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-hover-border);background:var(--kbq-toggle-error-states-hover-background)}.kbq-toggle.kbq-error:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-hover-circle-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-border);background:var(--kbq-toggle-error-states-checked-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-circle-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-hover-border);background:var(--kbq-toggle-error-states-checked-hover-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-hover-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-border);background:var(--kbq-toggle-error-states-focused-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-focused-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-border);background:var(--kbq-toggle-error-states-checked-focused-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-focused-circle-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-checked-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-disabled-border);background:var(--kbq-toggle-error-states-disabled-background)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-error-states-disabled-circle-background)}.kbq-toggle.kbq-disabled{color:var(--kbq-foreground-text-disabled)}.kbq-toggle:not(.kbq-toggle_big){font-size:var(--kbq-typography-text-normal-font-size);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-toggle:not(.kbq-toggle_big) .kbq-hint{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-toggle:not(.kbq-toggle_big) .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-compact-line-height)}.kbq-toggle.kbq-toggle_big{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-toggle.kbq-toggle_big .kbq-hint{font-size:var(--kbq-typography-text-normal-font-size);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-toggle.kbq-toggle_big .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-big-line-height)}\n", ".kbq-toggle{--kbq-toggle-size-normal-height: var(--kbq-size-l);--kbq-toggle-size-normal-width: 28px;--kbq-toggle-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-normal-vertical-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-height: var(--kbq-size-l);--kbq-toggle-size-big-width: 28px;--kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}\n"], animations: [
|
|
111
|
+
], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], exportAs: ["kbqToggle"], usesInheritance: true, ngImport: i0, template: "<label\n class=\"kbq-toggle-layout\"\n [attr.for]=\"inputId\"\n [class.left]=\"labelPosition === 'left'\"\n>\n <input\n #input\n role=\"switch\"\n type=\"checkbox\"\n class=\"kbq-toggle-input cdk-visually-hidden\"\n [attr.aria-checked]=\"getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [id]=\"inputId\"\n [tabIndex]=\"tabIndex\"\n (change)=\"onChangeEvent($event)\"\n (click)=\"onInputClick($event)\"\n />\n <div class=\"kbq-toggle-bar-container\">\n <div class=\"kbq-toggle-bar\">\n <div\n class=\"kbq-toggle__circle\"\n [@switch]=\"checked\"\n ></div>\n </div>\n </div>\n\n <div\n class=\"kbq-toggle__content\"\n [class.left]=\"labelPosition === 'left'\"\n [class.right]=\"labelPosition === 'right'\"\n >\n <span\n class=\"kbq-toggle-label\"\n (cdkObserveContent)=\"onLabelTextChange()\"\n >\n <ng-content />\n </span>\n\n <ng-content select=\"kbq-hint\" />\n </div>\n</label>\n", styles: [".kbq-toggle{display:inline-block}.kbq-toggle .kbq-toggle__circle{position:absolute;border-radius:50%;transform:translate(-1px);height:10px;width:10px}.kbq-toggle .kbq-toggle-layout{display:flex;flex-direction:row;align-items:flex-start;cursor:inherit}.kbq-toggle .kbq-toggle-layout.left{flex-direction:row-reverse}.kbq-toggle .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-toggle-size-normal-height)) / 2)}.kbq-toggle .kbq-toggle-bar-container{display:flex;align-items:center}.kbq-toggle .kbq-toggle-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-style:solid;border-radius:8px;height:var(--kbq-toggle-size-normal-height);width:var(--kbq-toggle-size-normal-width)}.kbq-toggle .kbq-hint{margin-top:var(--kbq-toggle-size-normal-vertical-content-padding)}.kbq-toggle__content{display:flex;flex-direction:column;flex:1}.kbq-toggle__content.left{margin-right:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle__content.right{margin-left:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-bar{height:var(--kbq-toggle-size-big-height);width:var(--kbq-toggle-size-big-width)}.kbq-toggle.kbq-toggle_big .kbq-hint{margin-top:var(--kbq-toggle-size-big-vertical-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-toggle-font-big-label-line-height) - var(--kbq-toggle-size-big-height)) / 2)}.kbq-toggle:not(.kbq-disabled){cursor:pointer}.kbq-toggle .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-default-border);background:var(--kbq-toggle-theme-default-background)}.kbq-toggle .kbq-toggle__circle{background:var(--kbq-toggle-theme-default-circle-background)}.kbq-toggle:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-hover-border);background:var(--kbq-toggle-theme-states-hover-background)}.kbq-toggle:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-hover-circle-background)}.kbq-toggle.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-border);background:var(--kbq-toggle-theme-states-checked-background)}.kbq-toggle.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-circle-background)}.kbq-toggle.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-hover-border);background:var(--kbq-toggle-theme-states-checked-hover-background)}.kbq-toggle.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-hover-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-border);background:var(--kbq-toggle-theme-states-focused-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-focused-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-focused-focus-outline)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-border);background:var(--kbq-toggle-theme-states-checked-focused-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-focused-circle-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-checked-focused-focus-outline)}.kbq-toggle.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-disabled-border);background:var(--kbq-toggle-theme-states-disabled-background)}.kbq-toggle.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-disabled-circle-background)}.kbq-toggle.kbq-error .kbq-toggle-bar{border-color:var(--kbq-toggle-error-default-border);background:var(--kbq-toggle-error-default-background)}.kbq-toggle.kbq-error .kbq-toggle__circle{background:var(--kbq-toggle-error-default-circle-background)}.kbq-toggle.kbq-error:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-hover-border);background:var(--kbq-toggle-error-states-hover-background)}.kbq-toggle.kbq-error:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-hover-circle-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-border);background:var(--kbq-toggle-error-states-checked-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-circle-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-hover-border);background:var(--kbq-toggle-error-states-checked-hover-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-hover-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-border);background:var(--kbq-toggle-error-states-focused-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-focused-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-border);background:var(--kbq-toggle-error-states-checked-focused-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-focused-circle-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-checked-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-disabled-border);background:var(--kbq-toggle-error-states-disabled-background)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-error-states-disabled-circle-background)}.kbq-toggle.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-toggle:not(.kbq-toggle_big){font-size:var(--kbq-typography-text-normal-font-size);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-toggle:not(.kbq-toggle_big) .kbq-hint{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-toggle:not(.kbq-toggle_big) .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-compact-line-height)}.kbq-toggle.kbq-toggle_big{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-toggle.kbq-toggle_big .kbq-hint{font-size:var(--kbq-typography-text-normal-font-size);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-toggle.kbq-toggle_big .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-big-line-height)}\n", ".kbq-toggle{--kbq-toggle-size-normal-height: var(--kbq-size-l);--kbq-toggle-size-normal-width: 28px;--kbq-toggle-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-normal-vertical-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-height: var(--kbq-size-l);--kbq-toggle-size-big-width: 28px;--kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}\n"], animations: [
|
|
112
112
|
trigger('switch', [
|
|
113
113
|
state('true', style({ left: 'calc(100% - 11px)' })),
|
|
114
114
|
state('false', style({ left: '3px' })),
|
|
@@ -137,7 +137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
137
137
|
useExisting: forwardRef((() => KbqToggleComponent)),
|
|
138
138
|
multi: true
|
|
139
139
|
}
|
|
140
|
-
], template: "<label\n class=\"kbq-toggle-layout\"\n [attr.for]=\"inputId\"\n [class.left]=\"labelPosition === 'left'\"\n>\n <input\n #input\n role=\"switch\"\n type=\"checkbox\"\n class=\"kbq-toggle-input cdk-visually-hidden\"\n [attr.aria-checked]=\"getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [id]=\"inputId\"\n [tabIndex]=\"tabIndex\"\n (change)=\"onChangeEvent($event)\"\n (click)=\"onInputClick($event)\"\n />\n <div class=\"kbq-toggle-bar-container\">\n <div class=\"kbq-toggle-bar\">\n <div\n class=\"kbq-toggle__circle\"\n [@switch]=\"checked\"\n ></div>\n </div>\n </div>\n\n <div\n class=\"kbq-toggle__content\"\n [class.left]=\"labelPosition === 'left'\"\n [class.right]=\"labelPosition === 'right'\"\n >\n <span\n class=\"kbq-toggle-label\"\n (cdkObserveContent)=\"onLabelTextChange()\"\n >\n <ng-content />\n </span>\n\n <ng-content select=\"kbq-hint\" />\n </div>\n</label>\n", styles: [".kbq-toggle{display:inline-block}.kbq-toggle .kbq-toggle__circle{position:absolute;border-radius:50%;transform:translate(-1px);height:10px;width:10px}.kbq-toggle .kbq-toggle-layout{display:flex;flex-direction:row;align-items:flex-start;cursor:inherit}.kbq-toggle .kbq-toggle-layout.left{flex-direction:row-reverse}.kbq-toggle .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-toggle-size-normal-height)) / 2)}.kbq-toggle .kbq-toggle-bar-container{display:flex;align-items:center}.kbq-toggle .kbq-toggle-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-style:solid;border-radius:8px;height:var(--kbq-toggle-size-normal-height);width:var(--kbq-toggle-size-normal-width)}.kbq-toggle .kbq-hint{margin-top:var(--kbq-toggle-size-normal-vertical-content-padding)}.kbq-toggle__content{display:flex;flex-direction:column;flex:1}.kbq-toggle__content.left{margin-right:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle__content.right{margin-left:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-bar{height:var(--kbq-toggle-size-big-height);width:var(--kbq-toggle-size-big-width)}.kbq-toggle.kbq-toggle_big .kbq-hint{margin-top:var(--kbq-toggle-size-big-vertical-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-toggle-font-big-label-line-height) - var(--kbq-toggle-size-big-height)) / 2)}.kbq-toggle:not(.kbq-disabled){cursor:pointer}.kbq-toggle .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-default-border);background:var(--kbq-toggle-theme-default-background)}.kbq-toggle .kbq-toggle__circle{background:var(--kbq-toggle-theme-default-circle-background)}.kbq-toggle:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-hover-border);background:var(--kbq-toggle-theme-states-hover-background)}.kbq-toggle:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-hover-circle-background)}.kbq-toggle.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-border);background:var(--kbq-toggle-theme-states-checked-background)}.kbq-toggle.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-circle-background)}.kbq-toggle.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-hover-border);background:var(--kbq-toggle-theme-states-checked-hover-background)}.kbq-toggle.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-hover-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-border);background:var(--kbq-toggle-theme-states-focused-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-focused-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-focused-focus-outline)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-border);background:var(--kbq-toggle-theme-states-checked-focused-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-focused-circle-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-checked-focused-focus-outline)}.kbq-toggle.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-disabled-border);background:var(--kbq-toggle-theme-states-disabled-background)}.kbq-toggle.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-disabled-circle-background)}.kbq-toggle.kbq-error .kbq-toggle-bar{border-color:var(--kbq-toggle-error-default-border);background:var(--kbq-toggle-error-default-background)}.kbq-toggle.kbq-error .kbq-toggle__circle{background:var(--kbq-toggle-error-default-circle-background)}.kbq-toggle.kbq-error:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-hover-border);background:var(--kbq-toggle-error-states-hover-background)}.kbq-toggle.kbq-error:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-hover-circle-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-border);background:var(--kbq-toggle-error-states-checked-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-circle-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-hover-border);background:var(--kbq-toggle-error-states-checked-hover-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-hover-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-border);background:var(--kbq-toggle-error-states-focused-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-focused-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-border);background:var(--kbq-toggle-error-states-checked-focused-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-focused-circle-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-checked-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-disabled-border);background:var(--kbq-toggle-error-states-disabled-background)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-error-states-disabled-circle-background)}.kbq-toggle.kbq-disabled{color:var(--kbq-foreground-text-disabled)}.kbq-toggle:not(.kbq-toggle_big){font-size:var(--kbq-typography-text-normal-font-size);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-toggle:not(.kbq-toggle_big) .kbq-hint{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-toggle:not(.kbq-toggle_big) .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-compact-line-height)}.kbq-toggle.kbq-toggle_big{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-toggle.kbq-toggle_big .kbq-hint{font-size:var(--kbq-typography-text-normal-font-size);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-toggle.kbq-toggle_big .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-big-line-height)}\n", ".kbq-toggle{--kbq-toggle-size-normal-height: var(--kbq-size-l);--kbq-toggle-size-normal-width: 28px;--kbq-toggle-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-normal-vertical-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-height: var(--kbq-size-l);--kbq-toggle-size-big-width: 28px;--kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}\n"] }]
|
|
140
|
+
], template: "<label\n class=\"kbq-toggle-layout\"\n [attr.for]=\"inputId\"\n [class.left]=\"labelPosition === 'left'\"\n>\n <input\n #input\n role=\"switch\"\n type=\"checkbox\"\n class=\"kbq-toggle-input cdk-visually-hidden\"\n [attr.aria-checked]=\"getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [id]=\"inputId\"\n [tabIndex]=\"tabIndex\"\n (change)=\"onChangeEvent($event)\"\n (click)=\"onInputClick($event)\"\n />\n <div class=\"kbq-toggle-bar-container\">\n <div class=\"kbq-toggle-bar\">\n <div\n class=\"kbq-toggle__circle\"\n [@switch]=\"checked\"\n ></div>\n </div>\n </div>\n\n <div\n class=\"kbq-toggle__content\"\n [class.left]=\"labelPosition === 'left'\"\n [class.right]=\"labelPosition === 'right'\"\n >\n <span\n class=\"kbq-toggle-label\"\n (cdkObserveContent)=\"onLabelTextChange()\"\n >\n <ng-content />\n </span>\n\n <ng-content select=\"kbq-hint\" />\n </div>\n</label>\n", styles: [".kbq-toggle{display:inline-block}.kbq-toggle .kbq-toggle__circle{position:absolute;border-radius:50%;transform:translate(-1px);height:10px;width:10px}.kbq-toggle .kbq-toggle-layout{display:flex;flex-direction:row;align-items:flex-start;cursor:inherit}.kbq-toggle .kbq-toggle-layout.left{flex-direction:row-reverse}.kbq-toggle .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-typography-text-normal-line-height) - var(--kbq-toggle-size-normal-height)) / 2)}.kbq-toggle .kbq-toggle-bar-container{display:flex;align-items:center}.kbq-toggle .kbq-toggle-bar{position:relative;box-sizing:border-box;display:flex;align-items:center;border-width:1px;border-style:solid;border-radius:8px;height:var(--kbq-toggle-size-normal-height);width:var(--kbq-toggle-size-normal-width)}.kbq-toggle .kbq-hint{margin-top:var(--kbq-toggle-size-normal-vertical-content-padding)}.kbq-toggle__content{display:flex;flex-direction:column;flex:1}.kbq-toggle__content.left{margin-right:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle__content.right{margin-left:var(--kbq-toggle-size-normal-horizontal-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-bar{height:var(--kbq-toggle-size-big-height);width:var(--kbq-toggle-size-big-width)}.kbq-toggle.kbq-toggle_big .kbq-hint{margin-top:var(--kbq-toggle-size-big-vertical-content-padding)}.kbq-toggle.kbq-toggle_big .kbq-toggle-layout .kbq-toggle-bar-container:has(+.kbq-toggle__content){padding-top:calc((var(--kbq-toggle-font-big-label-line-height) - var(--kbq-toggle-size-big-height)) / 2)}.kbq-toggle:not(.kbq-disabled){cursor:pointer}.kbq-toggle .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-default-border);background:var(--kbq-toggle-theme-default-background)}.kbq-toggle .kbq-toggle__circle{background:var(--kbq-toggle-theme-default-circle-background)}.kbq-toggle:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-hover-border);background:var(--kbq-toggle-theme-states-hover-background)}.kbq-toggle:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-hover-circle-background)}.kbq-toggle.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-border);background:var(--kbq-toggle-theme-states-checked-background)}.kbq-toggle.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-circle-background)}.kbq-toggle.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-hover-border);background:var(--kbq-toggle-theme-states-checked-hover-background)}.kbq-toggle.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-hover-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-border);background:var(--kbq-toggle-theme-states-focused-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-focused-circle-background)}.kbq-toggle.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-focused-focus-outline)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-border);background:var(--kbq-toggle-theme-states-checked-focused-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-checked-focused-circle-background)}.kbq-toggle.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-theme-states-checked-focused-focus-outline)}.kbq-toggle.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-theme-states-disabled-border);background:var(--kbq-toggle-theme-states-disabled-background)}.kbq-toggle.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-theme-states-disabled-circle-background)}.kbq-toggle.kbq-error .kbq-toggle-bar{border-color:var(--kbq-toggle-error-default-border);background:var(--kbq-toggle-error-default-background)}.kbq-toggle.kbq-error .kbq-toggle__circle{background:var(--kbq-toggle-error-default-circle-background)}.kbq-toggle.kbq-error:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-hover-border);background:var(--kbq-toggle-error-states-hover-background)}.kbq-toggle.kbq-error:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-hover-circle-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-border);background:var(--kbq-toggle-error-states-checked-background)}.kbq-toggle.kbq-error.kbq-active .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-circle-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-hover-border);background:var(--kbq-toggle-error-states-checked-hover-background)}.kbq-toggle.kbq-error.kbq-active:hover .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-hover-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-border);background:var(--kbq-toggle-error-states-focused-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-focused-circle-background)}.kbq-toggle.kbq-error.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-border);background:var(--kbq-toggle-error-states-checked-focused-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle__circle{background:var(--kbq-toggle-error-states-checked-focused-circle-background)}.kbq-toggle.kbq-error.kbq-active.cdk-keyboard-focused .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-checked-focused-focus-outline);box-shadow:0 0 .1px 1px var(--kbq-toggle-error-states-checked-focused-focus-outline)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle-bar,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle-bar{border-color:var(--kbq-toggle-error-states-disabled-border);background:var(--kbq-toggle-error-states-disabled-background)}.kbq-toggle.kbq-error.kbq-disabled .kbq-toggle__circle,.kbq-toggle.kbq-error.kbq-active.kbq-disabled .kbq-toggle__circle{background:var(--kbq-toggle-error-states-disabled-circle-background)}.kbq-toggle.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-toggle:not(.kbq-toggle_big){font-size:var(--kbq-typography-text-normal-font-size);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-toggle:not(.kbq-toggle_big) .kbq-hint{font-size:var(--kbq-typography-text-compact-font-size);font-weight:var(--kbq-typography-text-compact-font-weight);line-height:var(--kbq-typography-text-compact-line-height);font-family:var(--kbq-typography-text-compact-font-family);text-transform:var(--kbq-typography-text-compact-text-transform);font-feature-settings:var(--kbq-typography-text-compact-font-feature-settings);letter-spacing:var(--kbq-typography-text-compact-letter-spacing)}.kbq-toggle:not(.kbq-toggle_big) .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-compact-line-height)}.kbq-toggle.kbq-toggle_big{font-size:var(--kbq-typography-text-big-font-size);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-toggle.kbq-toggle_big .kbq-hint{font-size:var(--kbq-typography-text-normal-font-size);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-toggle.kbq-toggle_big .kbq-toggle-bar-container{line-height:var(--kbq-typography-text-big-line-height)}\n", ".kbq-toggle{--kbq-toggle-size-normal-height: var(--kbq-size-l);--kbq-toggle-size-normal-width: 28px;--kbq-toggle-size-normal-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-normal-vertical-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-height: var(--kbq-size-l);--kbq-toggle-size-big-width: 28px;--kbq-toggle-size-big-horizontal-content-padding: var(--kbq-size-s);--kbq-toggle-size-big-vertical-content-padding: var(--kbq-size-s)}:where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-toggle-theme-default-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-default-background: var(--kbq-background-bg);--kbq-toggle-theme-default-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-hover-border: var(--kbq-line-contrast-fade);--kbq-toggle-theme-states-hover-background: var(--kbq-states-background-transparent-hover);--kbq-toggle-theme-states-hover-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-checked-border: transparent;--kbq-toggle-theme-states-checked-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-hover-border: transparent;--kbq-toggle-theme-states-checked-hover-background: var(--kbq-states-background-theme-hover);--kbq-toggle-theme-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-focused-background: var(--kbq-background-bg);--kbq-toggle-theme-states-focused-circle-background: var(--kbq-icon-contrast);--kbq-toggle-theme-states-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-border: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-checked-focused-background: var(--kbq-background-theme);--kbq-toggle-theme-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-theme-states-checked-focused-focus-outline: var(--kbq-states-line-focus-theme);--kbq-toggle-theme-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-theme-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-theme-states-disabled-circle-background: var(--kbq-states-icon-disabled);--kbq-toggle-error-default-border: var(--kbq-line-error);--kbq-toggle-error-default-background: var(--kbq-background-error-less);--kbq-toggle-error-default-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-hover-background: var(--kbq-states-background-error-fade-hover);--kbq-toggle-error-states-hover-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-checked-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-hover-border: var(--kbq-line-error);--kbq-toggle-error-states-checked-hover-background: var(--kbq-states-background-error-hover);--kbq-toggle-error-states-checked-hover-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-focused-background: var(--kbq-states-background-error-less);--kbq-toggle-error-states-focused-circle-background: var(--kbq-icon-error);--kbq-toggle-error-states-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-border: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-checked-focused-background: var(--kbq-background-error);--kbq-toggle-error-states-checked-focused-circle-background: var(--kbq-icon-white);--kbq-toggle-error-states-checked-focused-focus-outline: var(--kbq-states-line-focus-error);--kbq-toggle-error-states-disabled-border: var(--kbq-states-line-disabled);--kbq-toggle-error-states-disabled-background: var(--kbq-states-background-disabled);--kbq-toggle-error-states-disabled-circle-background: var(--kbq-states-icon-disabled)}\n"] }]
|
|
141
141
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FocusMonitor }, { type: i0.ChangeDetectorRef }], propDecorators: { big: [{
|
|
142
142
|
type: Input
|
|
143
143
|
}], inputElement: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"koobiq-components-toggle.mjs","sources":["../../../packages/components/toggle/toggle.component.ts","../../../packages/components/toggle/toggle.component.html","../../../packages/components/toggle/toggle.module.ts","../../../packages/components/toggle/koobiq-components-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n ViewChild,\n ViewEncapsulation,\n forwardRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n CanColor,\n CanColorCtor,\n CanDisable,\n CanDisableCtor,\n HasTabIndex,\n HasTabIndexCtor,\n KbqComponentColors,\n mixinColor,\n mixinDisabled,\n mixinTabIndex\n} from '@koobiq/components/core';\n\nlet nextUniqueId = 0;\n\ntype ToggleLabelPositionType = 'left' | 'right';\n\n/** @docs-private */\nexport class KbqToggleBase {\n constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqToggleMixinBase: HasTabIndexCtor & CanDisableCtor & CanColorCtor & typeof KbqToggleBase = mixinTabIndex(\n mixinColor(mixinDisabled(KbqToggleBase), KbqComponentColors.Theme)\n);\n\nexport class KbqToggleChange {\n source: KbqToggleComponent;\n checked: boolean;\n}\n\n@Component({\n selector: 'kbq-toggle',\n exportAs: 'kbqToggle',\n templateUrl: './toggle.component.html',\n styleUrls: ['./toggle.scss', './toggle-tokens.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n inputs: ['color', 'tabIndex'],\n host: {\n class: 'kbq-toggle',\n '[class.kbq-toggle_big]': 'big',\n '[id]': 'id',\n '[attr.id]': 'id',\n '[class.kbq-disabled]': 'disabled',\n '[class.kbq-active]': 'checked'\n },\n animations: [\n trigger('switch', [\n state('true', style({ left: 'calc(100% - 11px)' })),\n state('false', style({ left: '3px' })),\n transition('true <=> false', animate('150ms'))])\n\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => KbqToggleComponent),\n multi: true\n }\n ]\n})\nexport class KbqToggleComponent\n extends KbqToggleMixinBase\n implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy\n{\n @Input() big: boolean = false;\n\n @ViewChild('input', { static: false }) inputElement: ElementRef;\n\n @Input() labelPosition: ToggleLabelPositionType = 'right';\n\n @Input('aria-label') ariaLabel: string = '';\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n\n @Input() id: string;\n\n get inputId(): string {\n return `${this.id || this.uniqueId}-input`;\n }\n\n @Input() name: string | null = null;\n\n @Input() value: string;\n\n @Input()\n get disabled() {\n return this._disabled;\n }\n\n set disabled(value: any) {\n if (value !== this._disabled) {\n this._disabled = value;\n this._changeDetectorRef.markForCheck();\n }\n }\n\n private _disabled: boolean = false;\n\n get checked() {\n return this._checked;\n }\n\n @Input()\n set checked(value: boolean) {\n if (value !== this._checked) {\n this._checked = value;\n this._changeDetectorRef.markForCheck();\n }\n }\n\n private _checked: boolean = false;\n\n @Output() readonly change: EventEmitter<KbqToggleChange> = new EventEmitter<KbqToggleChange>();\n\n private uniqueId: string = `kbq-toggle-${++nextUniqueId}`;\n\n constructor(\n public elementRef: ElementRef,\n private _focusMonitor: FocusMonitor,\n private _changeDetectorRef: ChangeDetectorRef\n ) {\n super(elementRef);\n\n this.id = this.uniqueId;\n\n this._focusMonitor.monitor(this.elementRef.nativeElement, true);\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n }\n\n focus(): void {\n this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');\n }\n\n getAriaChecked(): boolean {\n return this.checked;\n }\n\n onChangeEvent(event: Event) {\n event.stopPropagation();\n\n this.updateModelValue();\n this.emitChangeEvent();\n }\n\n onLabelTextChange() {\n this._changeDetectorRef.markForCheck();\n }\n\n onInputClick(event: MouseEvent) {\n event.stopPropagation();\n }\n\n writeValue(value: any) {\n this.checked = !!value;\n }\n\n registerOnChange(fn: any) {\n this.onChangeCallback = fn;\n }\n\n registerOnTouched(fn: any) {\n this.onTouchedCallback = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n private onTouchedCallback = () => {};\n\n private onChangeCallback = (_: any) => {};\n\n private updateModelValue() {\n this._checked = !this.checked;\n this.onTouchedCallback();\n }\n\n private emitChangeEvent() {\n const event = new KbqToggleChange();\n event.source = this;\n event.checked = this.checked;\n\n this.onChangeCallback(this.checked);\n this.change.emit(event);\n }\n}\n","<label\n class=\"kbq-toggle-layout\"\n [attr.for]=\"inputId\"\n [class.left]=\"labelPosition === 'left'\"\n>\n <input\n #input\n role=\"switch\"\n type=\"checkbox\"\n class=\"kbq-toggle-input cdk-visually-hidden\"\n [attr.aria-checked]=\"getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [id]=\"inputId\"\n [tabIndex]=\"tabIndex\"\n (change)=\"onChangeEvent($event)\"\n (click)=\"onInputClick($event)\"\n />\n <div class=\"kbq-toggle-bar-container\">\n <div class=\"kbq-toggle-bar\">\n <div\n class=\"kbq-toggle__circle\"\n [@switch]=\"checked\"\n ></div>\n </div>\n </div>\n\n <div\n class=\"kbq-toggle__content\"\n [class.left]=\"labelPosition === 'left'\"\n [class.right]=\"labelPosition === 'right'\"\n >\n <span\n class=\"kbq-toggle-label\"\n (cdkObserveContent)=\"onLabelTextChange()\"\n >\n <ng-content />\n </span>\n\n <ng-content select=\"kbq-hint\" />\n </div>\n</label>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { NgModule } from '@angular/core';\nimport { KbqCommonModule } from '@koobiq/components/core';\nimport { KbqToggleComponent } from './toggle.component';\n\n@NgModule({\n imports: [A11yModule, KbqCommonModule],\n exports: [KbqToggleComponent],\n declarations: [KbqToggleComponent]\n})\nexport class KbqToggleModule {}\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-toggle.mjs","sources":["../../../packages/components/toggle/toggle.component.ts","../../../packages/components/toggle/toggle.component.html","../../../packages/components/toggle/toggle.module.ts","../../../packages/components/toggle/koobiq-components-toggle.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ElementRef,\n EventEmitter,\n Input,\n OnDestroy,\n Output,\n ViewChild,\n ViewEncapsulation,\n forwardRef\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport {\n CanColor,\n CanColorCtor,\n CanDisable,\n CanDisableCtor,\n HasTabIndex,\n HasTabIndexCtor,\n KbqComponentColors,\n mixinColor,\n mixinDisabled,\n mixinTabIndex\n} from '@koobiq/components/core';\n\nlet nextUniqueId = 0;\n\ntype ToggleLabelPositionType = 'left' | 'right';\n\n/** @docs-private */\nexport class KbqToggleBase {\n constructor(public elementRef: ElementRef) {}\n}\n\n/** @docs-private */\nexport const KbqToggleMixinBase: HasTabIndexCtor & CanDisableCtor & CanColorCtor & typeof KbqToggleBase = mixinTabIndex(\n mixinColor(mixinDisabled(KbqToggleBase), KbqComponentColors.Theme)\n);\n\nexport class KbqToggleChange {\n source: KbqToggleComponent;\n checked: boolean;\n}\n\n@Component({\n selector: 'kbq-toggle',\n exportAs: 'kbqToggle',\n templateUrl: './toggle.component.html',\n styleUrls: ['./toggle.scss', './toggle-tokens.scss'],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n inputs: ['color', 'tabIndex'],\n host: {\n class: 'kbq-toggle',\n '[class.kbq-toggle_big]': 'big',\n '[id]': 'id',\n '[attr.id]': 'id',\n '[class.kbq-disabled]': 'disabled',\n '[class.kbq-active]': 'checked'\n },\n animations: [\n trigger('switch', [\n state('true', style({ left: 'calc(100% - 11px)' })),\n state('false', style({ left: '3px' })),\n transition('true <=> false', animate('150ms'))])\n\n ],\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => KbqToggleComponent),\n multi: true\n }\n ]\n})\nexport class KbqToggleComponent\n extends KbqToggleMixinBase\n implements ControlValueAccessor, CanColor, CanDisable, HasTabIndex, OnDestroy\n{\n @Input() big: boolean = false;\n\n @ViewChild('input', { static: false }) inputElement: ElementRef;\n\n @Input() labelPosition: ToggleLabelPositionType = 'right';\n\n @Input('aria-label') ariaLabel: string = '';\n @Input('aria-labelledby') ariaLabelledby: string | null = null;\n\n @Input() id: string;\n\n get inputId(): string {\n return `${this.id || this.uniqueId}-input`;\n }\n\n @Input() name: string | null = null;\n\n @Input() value: string;\n\n @Input()\n get disabled() {\n return this._disabled;\n }\n\n set disabled(value: any) {\n if (value !== this._disabled) {\n this._disabled = value;\n this._changeDetectorRef.markForCheck();\n }\n }\n\n private _disabled: boolean = false;\n\n get checked() {\n return this._checked;\n }\n\n @Input()\n set checked(value: boolean) {\n if (value !== this._checked) {\n this._checked = value;\n this._changeDetectorRef.markForCheck();\n }\n }\n\n private _checked: boolean = false;\n\n @Output() readonly change: EventEmitter<KbqToggleChange> = new EventEmitter<KbqToggleChange>();\n\n private uniqueId: string = `kbq-toggle-${++nextUniqueId}`;\n\n constructor(\n public elementRef: ElementRef,\n private _focusMonitor: FocusMonitor,\n private _changeDetectorRef: ChangeDetectorRef\n ) {\n super(elementRef);\n\n this.id = this.uniqueId;\n\n this._focusMonitor.monitor(this.elementRef.nativeElement, true);\n }\n\n ngOnDestroy() {\n this._focusMonitor.stopMonitoring(this.elementRef.nativeElement);\n }\n\n focus(): void {\n this._focusMonitor.focusVia(this.inputElement.nativeElement, 'keyboard');\n }\n\n getAriaChecked(): boolean {\n return this.checked;\n }\n\n onChangeEvent(event: Event) {\n event.stopPropagation();\n\n this.updateModelValue();\n this.emitChangeEvent();\n }\n\n onLabelTextChange() {\n this._changeDetectorRef.markForCheck();\n }\n\n onInputClick(event: MouseEvent) {\n event.stopPropagation();\n }\n\n writeValue(value: any) {\n this.checked = !!value;\n }\n\n registerOnChange(fn: any) {\n this.onChangeCallback = fn;\n }\n\n registerOnTouched(fn: any) {\n this.onTouchedCallback = fn;\n }\n\n setDisabledState(isDisabled: boolean) {\n this.disabled = isDisabled;\n }\n\n private onTouchedCallback = () => {};\n\n private onChangeCallback = (_: any) => {};\n\n private updateModelValue() {\n this._checked = !this.checked;\n this.onTouchedCallback();\n }\n\n private emitChangeEvent() {\n const event = new KbqToggleChange();\n event.source = this;\n event.checked = this.checked;\n\n this.onChangeCallback(this.checked);\n this.change.emit(event);\n }\n}\n","<label\n class=\"kbq-toggle-layout\"\n [attr.for]=\"inputId\"\n [class.left]=\"labelPosition === 'left'\"\n>\n <input\n #input\n role=\"switch\"\n type=\"checkbox\"\n class=\"kbq-toggle-input cdk-visually-hidden\"\n [attr.aria-checked]=\"getAriaChecked()\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"ariaLabelledby\"\n [attr.name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n [id]=\"inputId\"\n [tabIndex]=\"tabIndex\"\n (change)=\"onChangeEvent($event)\"\n (click)=\"onInputClick($event)\"\n />\n <div class=\"kbq-toggle-bar-container\">\n <div class=\"kbq-toggle-bar\">\n <div\n class=\"kbq-toggle__circle\"\n [@switch]=\"checked\"\n ></div>\n </div>\n </div>\n\n <div\n class=\"kbq-toggle__content\"\n [class.left]=\"labelPosition === 'left'\"\n [class.right]=\"labelPosition === 'right'\"\n >\n <span\n class=\"kbq-toggle-label\"\n (cdkObserveContent)=\"onLabelTextChange()\"\n >\n <ng-content />\n </span>\n\n <ng-content select=\"kbq-hint\" />\n </div>\n</label>\n","import { A11yModule } from '@angular/cdk/a11y';\nimport { NgModule } from '@angular/core';\nimport { KbqCommonModule } from '@koobiq/components/core';\nimport { KbqToggleComponent } from './toggle.component';\n\n@NgModule({\n imports: [A11yModule, KbqCommonModule],\n exports: [KbqToggleComponent],\n declarations: [KbqToggleComponent]\n})\nexport class KbqToggleModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -812,7 +812,7 @@ class KbqTreeSelect extends KbqTreeSelectMixinBase {
|
|
|
812
812
|
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.6", type: KbqTreeSelect, selector: "kbq-tree-select", inputs: { disabled: "disabled", tabIndex: "tabIndex", hiddenItemsText: "hiddenItemsText", panelClass: "panelClass", backdropClass: "backdropClass", errorStateMatcher: "errorStateMatcher", sortComparator: "sortComparator", placeholder: "placeholder", required: "required", multiple: "multiple", autoSelect: "autoSelect", compareWith: "compareWith", id: "id", hasBackdrop: "hasBackdrop", hiddenItemsTextFormatter: "hiddenItemsTextFormatter" }, outputs: { openedChange: "openedChange", openedStream: "opened", closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { listeners: { "click": "toggle()", "keydown": "handleKeydown($event)", "focus": "onFocus()", "blur": "onBlur()", "window:resize": "calculateHiddenItems()" }, properties: { "class.kbq-disabled": "disabled", "class.kbq-invalid": "errorState", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "kbq-tree-select" }, providers: [
|
|
813
813
|
{ provide: KbqFormFieldControl, useExisting: KbqTreeSelect },
|
|
814
814
|
{ provide: KbqTree, useExisting: KbqTreeSelect }
|
|
815
|
-
], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTreeSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n #origin=\"cdkOverlayOrigin\"\n #trigger\n cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_empty]=\"empty\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n>\n <select\n class=\"cdk-visually-hidden\"\n [id]=\"id\"\n ></select>\n\n @if (!!customMatcher) {\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n } @else {\n <div class=\"kbq-select__matcher\">\n @if (empty) {\n <span class=\"kbq-select__placeholder\">\n {{ placeholder || '\\u00A0' }}\n </span>\n }\n @if (!empty) {\n <span>\n @if (!!customTrigger) {\n <ng-content select=\"kbq-select-trigger\" />\n } @else {\n <div class=\"kbq-select__match-container\">\n @if (multiple) {\n <div class=\"kbq-select__match-list\">\n @if (!customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <kbq-tag\n [class.kbq-error]=\"errorState\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n >\n {{ option.viewValue }}\n @if (!option.disabled && !disabled) {\n <i\n kbq-icon=\"kbq-xmark-s_16\"\n kbqTagRemove\n (click)=\"onRemoveSelectedOption(option, $event)\"\n ></i>\n }\n </kbq-tag>\n }\n }\n @if (customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <ng-container\n [ngTemplateOutlet]=\"customTagTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n />\n }\n }\n </div>\n } @else {\n <span class=\"kbq-select__matcher-text\">\n {{ triggerValue }}\n </span>\n }\n <div\n class=\"kbq-select__match-hidden-text\"\n [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n >\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n }\n </span>\n }\n\n @if (canShowCleaner) {\n <div\n class=\"kbq-select__cleaner\"\n (click)=\"clearValue($event)\"\n >\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i\n kbq-icon=\"kbq-chevron-down-s_16\"\n class=\"kbq-select__arrow\"\n [color]=\"'contrast-fade'\"\n ></i>\n </div>\n </div>\n }\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (attach)=\"onAttached()\"\n (backdropClick)=\"close()\"\n>\n <div\n #panel\n class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.font-size.px]=\"triggerFontSize\"\n [style.transformOrigin]=\"transformOrigin\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (search) {\n <div class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\" />\n </div>\n }\n\n <div\n #optionsContainer\n class=\"kbq-tree-select__content kbq-scrollbar\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n [@fadeInContent]=\"'showing'\"\n >\n @if (isEmptySearchResult) {\n <div class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\" />\n </div>\n }\n\n <ng-content select=\"kbq-tree-selection\" />\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-foreground-text-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-foreground-text-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color)}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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)}\n", ":where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i7.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["color", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: i7.KbqTagRemove, selector: "[kbqTagRemove]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
815
|
+
], queries: [{ propertyName: "cleaner", first: true, predicate: ["kbqSelectCleaner"], descendants: true, static: true }, { propertyName: "customTrigger", first: true, predicate: KbqSelectTrigger, descendants: true }, { propertyName: "customMatcher", first: true, predicate: KbqSelectMatcher, descendants: true }, { propertyName: "customTagTemplateRef", first: true, predicate: ["kbqSelectTagContent"], descendants: true, read: TemplateRef }, { propertyName: "tree", first: true, predicate: KbqTreeSelection, descendants: true }, { propertyName: "search", first: true, predicate: KbqSelectSearch, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }, { propertyName: "tags", predicate: KbqTag, descendants: true }], exportAs: ["kbqTreeSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div\n #origin=\"cdkOverlayOrigin\"\n #trigger\n cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_empty]=\"empty\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n>\n <select\n class=\"cdk-visually-hidden\"\n [id]=\"id\"\n ></select>\n\n @if (!!customMatcher) {\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n } @else {\n <div class=\"kbq-select__matcher\">\n @if (empty) {\n <span class=\"kbq-select__placeholder\">\n {{ placeholder || '\\u00A0' }}\n </span>\n }\n @if (!empty) {\n <span>\n @if (!!customTrigger) {\n <ng-content select=\"kbq-select-trigger\" />\n } @else {\n <div class=\"kbq-select__match-container\">\n @if (multiple) {\n <div class=\"kbq-select__match-list\">\n @if (!customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <kbq-tag\n [class.kbq-error]=\"errorState\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n >\n {{ option.viewValue }}\n @if (!option.disabled && !disabled) {\n <i\n kbq-icon=\"kbq-xmark-s_16\"\n kbqTagRemove\n (click)=\"onRemoveSelectedOption(option, $event)\"\n ></i>\n }\n </kbq-tag>\n }\n }\n @if (customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <ng-container\n [ngTemplateOutlet]=\"customTagTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n />\n }\n }\n </div>\n } @else {\n <span class=\"kbq-select__matcher-text\">\n {{ triggerValue }}\n </span>\n }\n <div\n class=\"kbq-select__match-hidden-text\"\n [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n >\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n }\n </span>\n }\n\n @if (canShowCleaner) {\n <div\n class=\"kbq-select__cleaner\"\n (click)=\"clearValue($event)\"\n >\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i\n kbq-icon=\"kbq-chevron-down-s_16\"\n class=\"kbq-select__arrow\"\n [color]=\"'contrast-fade'\"\n ></i>\n </div>\n </div>\n }\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (attach)=\"onAttached()\"\n (backdropClick)=\"close()\"\n>\n <div\n #panel\n class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.font-size.px]=\"triggerFontSize\"\n [style.transformOrigin]=\"transformOrigin\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (search) {\n <div class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\" />\n </div>\n }\n\n <div\n #optionsContainer\n class=\"kbq-tree-select__content kbq-scrollbar\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n [@fadeInContent]=\"'showing'\"\n >\n @if (isEmptySearchResult) {\n <div class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\" />\n </div>\n }\n\n <ng-content select=\"kbq-tree-selection\" />\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-states-foreground-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color)}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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)}\n", ":where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: i6.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }, { kind: "component", type: i7.KbqTag, selector: "kbq-tag, [kbq-tag], kbq-basic-tag, [kbq-basic-tag]", inputs: ["color", "selected", "value", "selectable", "removable", "tabindex", "disabled"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["kbqTag"] }, { kind: "directive", type: i7.KbqTagRemove, selector: "[kbqTagRemove]" }, { kind: "directive", type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [
|
|
816
816
|
kbqSelectAnimations.transformPanel,
|
|
817
817
|
kbqSelectAnimations.fadeInContent
|
|
818
818
|
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
@@ -836,7 +836,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.6", ngImpor
|
|
|
836
836
|
], providers: [
|
|
837
837
|
{ provide: KbqFormFieldControl, useExisting: KbqTreeSelect },
|
|
838
838
|
{ provide: KbqTree, useExisting: KbqTreeSelect }
|
|
839
|
-
], template: "<div\n #origin=\"cdkOverlayOrigin\"\n #trigger\n cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_empty]=\"empty\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n>\n <select\n class=\"cdk-visually-hidden\"\n [id]=\"id\"\n ></select>\n\n @if (!!customMatcher) {\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n } @else {\n <div class=\"kbq-select__matcher\">\n @if (empty) {\n <span class=\"kbq-select__placeholder\">\n {{ placeholder || '\\u00A0' }}\n </span>\n }\n @if (!empty) {\n <span>\n @if (!!customTrigger) {\n <ng-content select=\"kbq-select-trigger\" />\n } @else {\n <div class=\"kbq-select__match-container\">\n @if (multiple) {\n <div class=\"kbq-select__match-list\">\n @if (!customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <kbq-tag\n [class.kbq-error]=\"errorState\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n >\n {{ option.viewValue }}\n @if (!option.disabled && !disabled) {\n <i\n kbq-icon=\"kbq-xmark-s_16\"\n kbqTagRemove\n (click)=\"onRemoveSelectedOption(option, $event)\"\n ></i>\n }\n </kbq-tag>\n }\n }\n @if (customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <ng-container\n [ngTemplateOutlet]=\"customTagTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n />\n }\n }\n </div>\n } @else {\n <span class=\"kbq-select__matcher-text\">\n {{ triggerValue }}\n </span>\n }\n <div\n class=\"kbq-select__match-hidden-text\"\n [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n >\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n }\n </span>\n }\n\n @if (canShowCleaner) {\n <div\n class=\"kbq-select__cleaner\"\n (click)=\"clearValue($event)\"\n >\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i\n kbq-icon=\"kbq-chevron-down-s_16\"\n class=\"kbq-select__arrow\"\n [color]=\"'contrast-fade'\"\n ></i>\n </div>\n </div>\n }\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (attach)=\"onAttached()\"\n (backdropClick)=\"close()\"\n>\n <div\n #panel\n class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.font-size.px]=\"triggerFontSize\"\n [style.transformOrigin]=\"transformOrigin\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (search) {\n <div class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\" />\n </div>\n }\n\n <div\n #optionsContainer\n class=\"kbq-tree-select__content kbq-scrollbar\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n [@fadeInContent]=\"'showing'\"\n >\n @if (isEmptySearchResult) {\n <div class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\" />\n </div>\n }\n\n <ng-content select=\"kbq-tree-selection\" />\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-foreground-text-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-foreground-text-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color)}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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)}\n", ":where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
|
|
839
|
+
], template: "<div\n #origin=\"cdkOverlayOrigin\"\n #trigger\n cdk-overlay-origin\n class=\"kbq-select__trigger\"\n [class.kbq-select__trigger_empty]=\"empty\"\n [class.kbq-select__trigger_multiple]=\"multiple\"\n [class.kbq-select__trigger_single]=\"!multiple\"\n>\n <select\n class=\"cdk-visually-hidden\"\n [id]=\"id\"\n ></select>\n\n @if (!!customMatcher) {\n <ng-content select=\"kbq-select-matcher, [kbq-select-matcher]\" />\n } @else {\n <div class=\"kbq-select__matcher\">\n @if (empty) {\n <span class=\"kbq-select__placeholder\">\n {{ placeholder || '\\u00A0' }}\n </span>\n }\n @if (!empty) {\n <span>\n @if (!!customTrigger) {\n <ng-content select=\"kbq-select-trigger\" />\n } @else {\n <div class=\"kbq-select__match-container\">\n @if (multiple) {\n <div class=\"kbq-select__match-list\">\n @if (!customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <kbq-tag\n [class.kbq-error]=\"errorState\"\n [disabled]=\"option.disabled || disabled\"\n [selectable]=\"false\"\n >\n {{ option.viewValue }}\n @if (!option.disabled && !disabled) {\n <i\n kbq-icon=\"kbq-xmark-s_16\"\n kbqTagRemove\n (click)=\"onRemoveSelectedOption(option, $event)\"\n ></i>\n }\n </kbq-tag>\n }\n }\n @if (customTagTemplateRef) {\n @for (option of triggerValues; track option) {\n <ng-container\n [ngTemplateOutlet]=\"customTagTemplateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: option, select: this }\"\n />\n }\n }\n </div>\n } @else {\n <span class=\"kbq-select__matcher-text\">\n {{ triggerValue }}\n </span>\n }\n <div\n class=\"kbq-select__match-hidden-text\"\n [style.display]=\"hiddenItems > 0 ? 'block' : 'none'\"\n >\n {{ hiddenItemsTextFormatter(hiddenItemsText, hiddenItems) }}\n </div>\n </div>\n }\n </span>\n }\n\n @if (canShowCleaner) {\n <div\n class=\"kbq-select__cleaner\"\n (click)=\"clearValue($event)\"\n >\n <ng-content select=\"kbq-cleaner\" />\n </div>\n }\n\n <div class=\"kbq-select__arrow-wrapper\">\n <i\n kbq-icon=\"kbq-chevron-down-s_16\"\n class=\"kbq-select__arrow\"\n [color]=\"'contrast-fade'\"\n ></i>\n </div>\n </div>\n }\n</div>\n\n<ng-template\n cdk-connected-overlay\n cdkConnectedOverlayLockPosition\n [cdkConnectedOverlayBackdropClass]=\"backdropClass\"\n [cdkConnectedOverlayHasBackdrop]=\"hasBackdrop\"\n [cdkConnectedOverlayMinWidth]=\"triggerRect?.width!\"\n [cdkConnectedOverlayOffsetY]=\"offsetY\"\n [cdkConnectedOverlayOpen]=\"panelOpen\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayPanelClass]=\"'kbq-select-overlay'\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n (attach)=\"onAttached()\"\n (backdropClick)=\"close()\"\n>\n <div\n #panel\n class=\"kbq-tree-select__panel {{ getPanelTheme() }}\"\n [ngClass]=\"panelClass\"\n [style.font-size.px]=\"triggerFontSize\"\n [style.transformOrigin]=\"transformOrigin\"\n (keydown)=\"handleKeydown($event)\"\n >\n @if (search) {\n <div class=\"kbq-select__search-container\">\n <ng-content select=\"[kbqSelectSearch]\" />\n </div>\n }\n\n <div\n #optionsContainer\n class=\"kbq-tree-select__content kbq-scrollbar\"\n (@fadeInContent.done)=\"panelDoneAnimatingStream.next($event.toState)\"\n [@fadeInContent]=\"'showing'\"\n >\n @if (isEmptySearchResult) {\n <div class=\"kbq-select__no-options-message\">\n <ng-content select=\"[kbq-select-search-empty-result]\" />\n </div>\n }\n\n <ng-content select=\"kbq-tree-selection\" />\n </div>\n\n <ng-content select=\"kbq-select-footer,[kbq-tree-select-footer]\" />\n </div>\n</ng-template>\n", styles: [".kbq-tree-select{box-sizing:border-box;display:inline-block;width:100%;outline:none}.kbq-tree-select .kbq-select__matcher{display:flex;align-items:center;width:100%;overflow:hidden;white-space:nowrap}.kbq-tree-select .kbq-select__matcher>span{flex:1;overflow:hidden}.kbq-tree-select .kbq-select__trigger{display:flex;box-sizing:border-box;position:relative;cursor:pointer;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-size-border-width) * 2)}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_single .kbq-select__matcher,.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple.kbq-select__trigger_empty .kbq-select__matcher{padding:calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-vertical, var(--kbq-size-xs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-single-padding-left, var(--kbq-size-m)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher{padding:calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-right, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) - var(--kbq-size-border-width)) calc(var(--kbq-select-size-multiple-padding-left, var(--kbq-size-xxs)) - var(--kbq-size-border-width))}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-container{display:flex}.kbq-tree-select .kbq-select__trigger.kbq-select__trigger_multiple:not(.kbq-select__trigger_empty) .kbq-select__matcher .kbq-select__match-list{display:flex;flex-wrap:wrap;overflow:hidden;height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);max-height:calc(var(--kbq-form-field-size-height, var(--kbq-size-3xl)) - var(--kbq-select-size-multiple-padding-vertical, var(--kbq-size-xxs)) * 2);gap:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));margin-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs))}.kbq-tree-select .kbq-select__match-container{width:100%;text-overflow:ellipsis;overflow:hidden}.kbq-tree-select .kbq-select__match-container .kbq-select__match-hidden-text{flex:0 0 70px;align-self:center;padding-left:4px;padding-right:var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));text-align:right}.kbq-tree-select .kbq-select__arrow-wrapper{display:flex;align-self:center;padding:4px}.kbq-form-field-appearance-fill .kbq-tree-select .kbq-select__arrow-wrapper,.kbq-form-field-appearance-standard .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-50%)}.kbq-form-field-appearance-outline .kbq-tree-select .kbq-select__arrow-wrapper{transform:translateY(-25%)}.kbq-disabled.kbq-tree-select .kbq-select__trigger{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.kbq-tree-select__panel{min-width:100%;overflow:hidden;border-radius:var(--kbq-select-panel-size-border-radius, var(--kbq-size-border-radius))}.kbq-tree-select__panel .kbq-optgroup-label,.kbq-tree-select__panel .kbq-option{font-size:inherit}.kbq-tree-select__panel .kbq-select__no-options-message{display:flex;flex-direction:row;align-items:center;box-sizing:border-box;position:relative;max-width:100%;height:var(--kbq-option-size-height, var(--kbq-size-3xl));cursor:default;outline:none;padding-left:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));padding-right:var(--kbq-option-size-horizontal-padding, var(--kbq-size-m));border:var(--kbq-option-size-border-width, var(--kbq-size-3xs)) solid transparent}.kbq-tree-select__panel .kbq-select__search-container{border-bottom-width:1px;border-bottom-style:solid}.kbq-tree-select__content{max-height:var(--kbq-select-panel-size-max-height, 256px);padding:4px 0;overflow:hidden auto}.kbq-tree-select__panel .kbq-select__footer{display:flex;align-items:center;box-sizing:border-box;min-height:40px;border-top-width:1px;border-top-style:solid;padding:var(--kbq-size-xxs) var(--kbq-size-m)}.kbq-tree-select__content .kbq-tree-selection{height:100%}.kbq-form-field-type-select:not(.kbq-disabled) .kbq-form-field-flex{cursor:pointer}.kbq-tree-select{color:var(--kbq-foreground-contrast)}.kbq-tree-select.ng-invalid{color:var(--kbq-error-default)}.kbq-tree-select.kbq-disabled{color:var(--kbq-states-foreground-disabled)}.kbq-select__placeholder{text-overflow:ellipsis;color:var(--kbq-states-foreground-disabled)}.kbq-tree-select__panel{box-shadow:var(--kbq-select-panel-dropdown-shadow);background:var(--kbq-select-panel-dropdown-background)}.kbq-tree-select__panel .kbq-select__footer{border-color:var(--kbq-divider-color)}.kbq-tree-select,.kbq-tree-select__panel{font-size:var(--kbq-typography-text-normal-font-size);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)}\n", ":where(.kbq-light,.theme-light,.kbq-theme-light){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}:where(.kbq-dark,.theme-dark,.kbq-theme-dark){--kbq-select-panel-dropdown-background: var(--kbq-background-card);--kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup)}\n"] }]
|
|
840
840
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ViewportRuler }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i2.ErrorStateMatcher }, { type: undefined, decorators: [{
|
|
841
841
|
type: Inject,
|
|
842
842
|
args: [KBQ_SELECT_SCROLL_STRATEGY]
|