@koobiq/components 16.0.0-beta.7 → 16.0.0-beta.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (125) hide show
  1. package/button-toggle/_button-toggle-theme.scss +26 -45
  2. package/button-toggle/button-toggle.scss +40 -87
  3. package/card/_card-theme.scss +1 -1
  4. package/core/option/_optgroup-theme.scss +1 -1
  5. package/core/option/_option-theme.scss +2 -2
  6. package/core/option/option.scss +4 -4
  7. package/core/styles/_koobiq-theme.scss +6 -0
  8. package/core/styles/common/_animation.scss +10 -6
  9. package/core/styles/common/_overlay.scss +1 -1
  10. package/core/styles/common/_select.scss +55 -41
  11. package/core/styles/theming/_components-theming.scss +174 -18
  12. package/core/styles/theming/_theming.scss +2 -2
  13. package/datepicker/_datepicker-theme.scss +43 -57
  14. package/datepicker/calendar-body.scss +11 -26
  15. package/datepicker/calendar-header.scss +7 -31
  16. package/datepicker/calendar.scss +20 -25
  17. package/datepicker/datepicker-content.scss +17 -10
  18. package/datepicker/datepicker-input.scss +1 -1
  19. package/dropdown/_dropdown-theme.scss +2 -2
  20. package/dropdown/dropdown-item.scss +1 -1
  21. package/esm2022/autocomplete/autocomplete-trigger.directive.mjs +6 -6
  22. package/esm2022/button/button.component.mjs +3 -2
  23. package/esm2022/button-toggle/button-toggle.component.mjs +11 -11
  24. package/esm2022/code-block/actionbar.component.mjs +1 -1
  25. package/esm2022/core/option/option.mjs +2 -2
  26. package/esm2022/core/version.mjs +2 -2
  27. package/esm2022/datepicker/calendar-body.component.mjs +6 -4
  28. package/esm2022/datepicker/calendar-header.component.mjs +3 -3
  29. package/esm2022/datepicker/calendar.component.mjs +2 -2
  30. package/esm2022/datepicker/datepicker-toggle.component.mjs +2 -2
  31. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  32. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  33. package/esm2022/dropdown/dropdown-trigger.directive.mjs +3 -2
  34. package/esm2022/file-upload/multiple-file-upload.component.mjs +5 -5
  35. package/esm2022/file-upload/single-file-upload.component.mjs +8 -9
  36. package/esm2022/form-field/form-field.mjs +2 -2
  37. package/esm2022/list/list-selection.component.mjs +2 -2
  38. package/esm2022/list/list.component.mjs +2 -2
  39. package/esm2022/modal/modal.component.mjs +2 -2
  40. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  41. package/esm2022/popover/popover.component.mjs +4 -4
  42. package/esm2022/select/select-option.directive.mjs +15 -3
  43. package/esm2022/select/select.component.mjs +8 -7
  44. package/esm2022/sidepanel/sidepanel-container.component.mjs +3 -3
  45. package/esm2022/tabs/tab-group.component.mjs +1 -1
  46. package/esm2022/timezone/timezone-option.component.mjs +2 -2
  47. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  48. package/esm2022/toggle/toggle.component.mjs +3 -3
  49. package/esm2022/tooltip/tooltip.component.mjs +4 -3
  50. package/esm2022/tree/control/base-tree-control.mjs +1 -1
  51. package/esm2022/tree/control/flat-tree-control.mjs +4 -4
  52. package/esm2022/tree/control/tree-control.mjs +1 -1
  53. package/esm2022/tree/padding.directive.mjs +2 -2
  54. package/esm2022/tree/toggle.mjs +2 -4
  55. package/esm2022/tree/tree-option.component.mjs +2 -2
  56. package/esm2022/tree-select/tree-select.component.mjs +4 -5
  57. package/fesm2022/koobiq-components-autocomplete.mjs +5 -5
  58. package/fesm2022/koobiq-components-autocomplete.mjs.map +1 -1
  59. package/fesm2022/koobiq-components-button-toggle.mjs +10 -10
  60. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  61. package/fesm2022/koobiq-components-button.mjs +2 -1
  62. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  63. package/fesm2022/koobiq-components-code-block.mjs +1 -1
  64. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  65. package/fesm2022/koobiq-components-core.mjs +3 -3
  66. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  67. package/fesm2022/koobiq-components-datepicker.mjs +13 -11
  68. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  69. package/fesm2022/koobiq-components-dropdown.mjs +4 -3
  70. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  71. package/fesm2022/koobiq-components-file-upload.mjs +7 -8
  72. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  73. package/fesm2022/koobiq-components-form-field.mjs +2 -2
  74. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  75. package/fesm2022/koobiq-components-list.mjs +4 -4
  76. package/fesm2022/koobiq-components-list.mjs.map +1 -1
  77. package/fesm2022/koobiq-components-modal.mjs +2 -2
  78. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  79. package/fesm2022/koobiq-components-popover.mjs +5 -5
  80. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  81. package/fesm2022/koobiq-components-select.mjs +21 -8
  82. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  83. package/fesm2022/koobiq-components-sidepanel.mjs +2 -2
  84. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  85. package/fesm2022/koobiq-components-tabs.mjs +1 -1
  86. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  87. package/fesm2022/koobiq-components-timezone.mjs +4 -4
  88. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  89. package/fesm2022/koobiq-components-toggle.mjs +2 -2
  90. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  91. package/fesm2022/koobiq-components-tooltip.mjs +3 -2
  92. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  93. package/fesm2022/koobiq-components-tree-select.mjs +3 -4
  94. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  95. package/fesm2022/koobiq-components-tree.mjs +8 -9
  96. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  97. package/file-upload/_file-upload-theme.scss +54 -40
  98. package/file-upload/file-upload.scss +2 -9
  99. package/file-upload/multiple-file-upload.component.scss +170 -59
  100. package/file-upload/single-file-upload.component.scss +42 -22
  101. package/icon/_icon-theme.scss +10 -21
  102. package/link/_link-theme.scss +2 -2
  103. package/list/_list-theme.scss +2 -2
  104. package/list/list.scss +1 -5
  105. package/markdown/_markdown-theme.scss +2 -2
  106. package/modal/_modal-theme.scss +10 -18
  107. package/modal/modal.scss +0 -1
  108. package/navbar/_navbar-theme.scss +1 -1
  109. package/package.json +29 -29
  110. package/popover/_popover-theme.scss +20 -83
  111. package/popover/popover.scss +60 -50
  112. package/prebuilt-themes/dark-theme.css +1 -1
  113. package/prebuilt-themes/light-theme.css +1 -1
  114. package/radio/_radio-theme.scss +2 -2
  115. package/select/_select-theme.scss +1 -1
  116. package/select/select-option.directive.d.ts +2 -0
  117. package/sidepanel/_sidepanel-theme.scss +5 -0
  118. package/table/_table-theme.scss +1 -1
  119. package/toggle/_toggle-theme.scss +9 -1
  120. package/toggle/toggle.scss +5 -2
  121. package/tooltip/tooltip.component.d.ts +1 -1
  122. package/tree/_tree-theme.scss +2 -2
  123. package/tree/control/base-tree-control.d.ts +1 -1
  124. package/tree/control/tree-control.d.ts +1 -1
  125. package/tree-select/_tree-select-theme.scss +1 -1
@@ -11,8 +11,8 @@ import * as i1$1 from 'rxjs/internal/scheduler/AsyncScheduler';
11
11
  import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
12
12
  import * as i3 from '@angular/cdk/bidi';
13
13
  import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
14
- import { TreeSizeIndentLevel } from '@koobiq/design-tokens/web/index.js';
15
- import { takeUntil, map, take, delay } from 'rxjs/operators';
14
+ import { TreeSizeIndentLevel } from '@koobiq/design-tokens/web';
15
+ import { takeUntil, take, delay, map } from 'rxjs/operators';
16
16
  import { TAB, hasModifierKey, SPACE, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, DOWN_ARROW, UP_ARROW, ENTER, HOME, END, PAGE_UP, PAGE_DOWN } from '@koobiq/cdk/keycodes';
17
17
  import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
18
18
  import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
@@ -357,8 +357,7 @@ class KbqTreeNodeToggleBaseDirective extends KbqTreeNodeToggleMixinBase {
357
357
  this.treeNode = treeNode;
358
358
  this._recursive = false;
359
359
  this.tree.treeControl.filterValue
360
- .pipe(map((value) => value?.length > 0))
361
- .subscribe((state) => this.disabled = state);
360
+ .subscribe((value) => this.disabled = !!value);
362
361
  }
363
362
  toggle(event) {
364
363
  if (this.disabled) {
@@ -641,7 +640,7 @@ class KbqTreeOption extends KbqTreeNode {
641
640
  { provide: KbqTreeNode, useExisting: KbqTreeOption },
642
641
  { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
643
642
  { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
644
- ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: KbqTreeNodeToggleDirective, descendants: true }, { propertyName: "toggleElementComponent", first: true, predicate: KbqTreeNodeToggleComponent, descendants: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true }, { propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["kbqTitleContainer"], descendants: true }], exportAs: ["kbqTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n <ng-content *ngSwitchCase=\"true\" select=\"kbq-pseudo-checkbox\"></ng-content>\n\n <ng-container *ngSwitchCase=\"false\">\n <kbq-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"checkboxState\"\n [disabled]=\"disabled\">\n </kbq-pseudo-checkbox>\n </ng-container>\n</ng-container>\n\n<ng-content select=\"kbq-checkbox\"></ng-content>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<ng-content select=\"kbq-progress-spinner\"></ng-content>\n\n<span class=\"kbq-option-text\" #kbqTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not([disabled]){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not([disabled]):hover .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
643
+ ], queries: [{ propertyName: "toggleElementDirective", first: true, predicate: KbqTreeNodeToggleDirective, descendants: true }, { propertyName: "toggleElementComponent", first: true, predicate: KbqTreeNodeToggleComponent, descendants: true }, { propertyName: "pseudoCheckbox", first: true, predicate: KbqPseudoCheckbox, descendants: true }, { propertyName: "actionButton", first: true, predicate: KbqOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: KbqTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: KbqDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "parentTextElement", first: true, predicate: ["kbqTitleContainer"], descendants: true }], exportAs: ["kbqTreeOption"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n <ng-content *ngSwitchCase=\"true\" select=\"kbq-pseudo-checkbox\"></ng-content>\n\n <ng-container *ngSwitchCase=\"false\">\n <kbq-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"checkboxState\"\n [disabled]=\"disabled\">\n </kbq-pseudo-checkbox>\n </ng-container>\n</ng-container>\n\n<ng-content select=\"kbq-checkbox\"></ng-content>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<ng-content select=\"kbq-progress-spinner\"></ng-content>\n\n<span class=\"kbq-option-text\" #kbqTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.04) 10px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 20px,rgba(0,0,0,.04) 20px,rgba(0,0,0,.04) 30px,rgba(255,255,255,.04) 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not([disabled]){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not([disabled]):hover .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i2$1.KbqPseudoCheckbox, selector: "kbq-pseudo-checkbox", inputs: ["color", "big", "state", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
645
644
  }
646
645
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqTreeOption, decorators: [{
647
646
  type: Component,
@@ -661,7 +660,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
661
660
  { provide: KbqTreeNode, useExisting: KbqTreeOption },
662
661
  { provide: KBQ_TITLE_TEXT_REF, useExisting: KbqTreeOption },
663
662
  { provide: KBQ_OPTION_ACTION_PARENT, useExisting: KbqTreeOption }
664
- ], template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n <ng-content *ngSwitchCase=\"true\" select=\"kbq-pseudo-checkbox\"></ng-content>\n\n <ng-container *ngSwitchCase=\"false\">\n <kbq-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"checkboxState\"\n [disabled]=\"disabled\">\n </kbq-pseudo-checkbox>\n </ng-container>\n</ng-container>\n\n<ng-content select=\"kbq-checkbox\"></ng-content>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<ng-content select=\"kbq-progress-spinner\"></ng-content>\n\n<span class=\"kbq-option-text\" #kbqTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05) 10px,transparent 10px,transparent 20px,rgba(0,0,0,.05) 20px,rgba(0,0,0,.05) 30px,transparent 30px) repeat;background-size:29px 29px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not([disabled]){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not([disabled]):hover .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}\n"] }]
663
+ ], template: "<ng-content select=\"kbq-tree-node-toggle, [kbq-tree-node-toggle], [kbqTreeNodeToggle]\"></ng-content>\n\n<ng-container [ngSwitch]=\"externalPseudoCheckbox\">\n <ng-content *ngSwitchCase=\"true\" select=\"kbq-pseudo-checkbox\"></ng-content>\n\n <ng-container *ngSwitchCase=\"false\">\n <kbq-pseudo-checkbox\n *ngIf=\"showCheckbox\"\n [state]=\"checkboxState\"\n [disabled]=\"disabled\">\n </kbq-pseudo-checkbox>\n </ng-container>\n</ng-container>\n\n<ng-content select=\"kbq-checkbox\"></ng-content>\n\n<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<ng-content select=\"kbq-progress-spinner\"></ng-content>\n\n<span class=\"kbq-option-text\" #kbqTitleContainer><ng-content></ng-content></span>\n\n<ng-content select=\"kbq-option-action\"></ng-content>\n", styles: ["@keyframes kbq-progress{0%{background-position:0 0}to{background-position:29px 0}}.kbq-progress{position:relative}.kbq-progress:after{content:\"\";position:absolute;border-radius:inherit;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.04) 10px,rgba(255,255,255,.04) 10px,rgba(255,255,255,.04) 20px,rgba(0,0,0,.04) 20px,rgba(0,0,0,.04) 30px,rgba(255,255,255,.04) 31px) repeat;background-size:32px 32px;animation:kbq-progress 1s linear infinite}.kbq-group{display:flex;flex-direction:row}.kbq-group .kbq-group_justified>.kbq-group-item{width:100%}.kbq-group .kbq-group-item+.kbq-group-item{margin-left:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-top-right-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-bottom-left-radius:0;border-top-left-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group{display:flex;flex-direction:column}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:first-child:not(:last-child)>.kbq-form-field__container{border-bottom-right-radius:0;border-bottom-left-radius:0}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child){border-top-right-radius:0;border-top-left-radius:0;border-bottom-left-radius:var(--kbq-button-size-border-radius, 8px)}.kbq-vertical-group>.kbq-group-item:last-child:not(:first-child)>.kbq-form-field__container{border-top-right-radius:0;border-top-left-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child){border-radius:0}.kbq-vertical-group>.kbq-group-item:not(:first-child):not(:last-child)>.kbq-form-field__container{border-radius:0}.kbq-vertical-group .kbq-group-item+.kbq-group-item{margin-top:calc(-1 * var(--kbq-button-size-border-width, 2px))}.kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.kbq-tree-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;box-sizing:border-box;display:flex;align-items:center;min-height:32px;word-wrap:break-word;border-width:var(--kbq-tree-size-container-focus-outline-width, 2px);border-style:solid;border-color:transparent;padding-top:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-right:calc(var(--kbq-tree-size-container-padding-right, 8px) - var(--kbq-tree-size-container-focus-outline-width, 2px));padding-bottom:calc(var(--kbq-tree-size-container-padding-vertical, 4px) - var(--kbq-tree-size-container-focus-outline-width, 2px));gap:var(--kbq-tree-size-container-content-gap-horizontal, 8px)}.kbq-tree-option .kbq-option-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:var(--kbq-list-size-text-padding-vertical, 4px);padding-bottom:var(--kbq-list-size-text-padding-vertical, 4px)}.kbq-tree-option .kbq-option-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.kbq-tree-option .kbq-option-text:empty{display:none}.kbq-tree-option:focus{outline:none}.kbq-tree-option:not([disabled]){cursor:pointer}.kbq-tree-option .kbq-option-action{display:none}.kbq-tree-option:not([disabled]):hover .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-focused .kbq-option-action,.kbq-tree-option:not([disabled]).kbq-action-button-focused .kbq-option-action{display:flex}\n"] }]
665
664
  }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
666
665
  type: Inject,
667
666
  args: [KBQ_TREE_OPTION_PARENT_COMPONENT]
@@ -964,7 +963,7 @@ class FlatTreeControl extends BaseTreeControl {
964
963
  });
965
964
  this.filterModel.select(...Array.from(filteredNodesWithTheirParents));
966
965
  this.updateFilterValue(value);
967
- this.restoreExpansionState();
966
+ Promise.resolve().then(() => this.restoreExpansionState());
968
967
  }
969
968
  updateFilterValue(value) {
970
969
  Promise.resolve().then(() => this.filterValue.next(value));
@@ -975,12 +974,12 @@ class FlatTreeControl extends BaseTreeControl {
975
974
  }
976
975
  }
977
976
  saveExpansionState() {
978
- if (this.filterValue.value === '') {
977
+ if (!this.filterValue.value) {
979
978
  this.expandedItemsBeforeFiltration = this.expansionModel.selected;
980
979
  }
981
980
  }
982
981
  restoreExpansionState() {
983
- if (this.filterValue.value === '') {
982
+ if (!this.filterValue.value) {
984
983
  this.expansionModel.clear();
985
984
  this.expansionModel.select(...this.expandedItemsBeforeFiltration);
986
985
  }