@koobiq/components 18.33.0 → 18.34.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.
Files changed (235) hide show
  1. package/actions-panel/actions-panel-config.d.ts +4 -3
  2. package/actions-panel/actions-panel-container.scss +0 -6
  3. package/actions-panel/actions-panel-ref.d.ts +13 -0
  4. package/actions-panel/actions-panel.d.ts +1 -7
  5. package/clamped-text/clamped-text.d.ts +61 -0
  6. package/clamped-text/clamped-text.scss +17 -0
  7. package/clamped-text/constants.d.ts +14 -0
  8. package/clamped-text/index.d.ts +3 -0
  9. package/clamped-text/module.d.ts +7 -0
  10. package/content-panel/content-panel-aside.scss +9 -0
  11. package/content-panel/content-panel-body.scss +9 -0
  12. package/content-panel/content-panel-container.scss +32 -0
  13. package/content-panel/content-panel-footer.scss +5 -0
  14. package/content-panel/content-panel-header.scss +30 -0
  15. package/content-panel/content-panel-tokens.scss +9 -0
  16. package/content-panel/content-panel.d.ts +149 -0
  17. package/content-panel/content-panel.scss +25 -0
  18. package/content-panel/index.d.ts +3 -0
  19. package/content-panel/module.d.ts +7 -0
  20. package/content-panel/resizable.d.ts +70 -0
  21. package/core/locales/en-US.d.ts +4 -0
  22. package/core/locales/es-LA.d.ts +4 -0
  23. package/core/locales/fa-IR.d.ts +4 -0
  24. package/core/locales/locale-service.d.ts +28 -0
  25. package/core/locales/pt-BR.d.ts +4 -0
  26. package/core/locales/ru-RU.d.ts +4 -0
  27. package/core/locales/tk-TM.d.ts +4 -0
  28. package/core/locales/types.d.ts +5 -0
  29. package/core/locales/zh-CN.d.ts +4 -0
  30. package/core/styles/common/_select.scss +6 -3
  31. package/datepicker/calendar.component.d.ts +1 -1
  32. package/datepicker/datepicker-input.directive.d.ts +1 -1
  33. package/datepicker/datepicker-toggle.component.d.ts +1 -1
  34. package/datepicker/datepicker.component.d.ts +2 -2
  35. package/dynamic-translation/dynamic-translation.d.ts +72 -0
  36. package/dynamic-translation/index.d.ts +2 -0
  37. package/dynamic-translation/module.d.ts +7 -0
  38. package/esm2022/actions-panel/actions-panel-config.mjs +1 -1
  39. package/esm2022/actions-panel/actions-panel-container.mjs +7 -7
  40. package/esm2022/actions-panel/actions-panel-ref.mjs +17 -1
  41. package/esm2022/actions-panel/actions-panel.mjs +34 -24
  42. package/esm2022/button-toggle/button-toggle.component.mjs +9 -9
  43. package/esm2022/clamped-text/clamped-text.mjs +202 -0
  44. package/esm2022/clamped-text/constants.mjs +20 -0
  45. package/esm2022/clamped-text/index.mjs +4 -0
  46. package/esm2022/clamped-text/koobiq-components-clamped-text.mjs +5 -0
  47. package/esm2022/clamped-text/module.mjs +19 -0
  48. package/esm2022/content-panel/content-panel.mjs +432 -0
  49. package/esm2022/content-panel/index.mjs +4 -0
  50. package/esm2022/content-panel/koobiq-components-content-panel.mjs +5 -0
  51. package/esm2022/content-panel/module.mjs +42 -0
  52. package/esm2022/content-panel/resizable.mjs +138 -0
  53. package/esm2022/core/locales/en-US.mjs +5 -1
  54. package/esm2022/core/locales/es-LA.mjs +5 -1
  55. package/esm2022/core/locales/fa-IR.mjs +5 -1
  56. package/esm2022/core/locales/pt-BR.mjs +5 -1
  57. package/esm2022/core/locales/ru-RU.mjs +5 -1
  58. package/esm2022/core/locales/tk-TM.mjs +5 -1
  59. package/esm2022/core/locales/types.mjs +1 -1
  60. package/esm2022/core/locales/zh-CN.mjs +5 -1
  61. package/esm2022/core/version.mjs +2 -2
  62. package/esm2022/datepicker/calendar-header.component.mjs +5 -2
  63. package/esm2022/datepicker/calendar.component.mjs +9 -9
  64. package/esm2022/datepicker/datepicker-input.directive.mjs +1 -1
  65. package/esm2022/datepicker/datepicker-toggle.component.mjs +8 -8
  66. package/esm2022/datepicker/datepicker.component.mjs +3 -3
  67. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  68. package/esm2022/dynamic-translation/dynamic-translation.mjs +175 -0
  69. package/esm2022/dynamic-translation/index.mjs +3 -0
  70. package/esm2022/dynamic-translation/koobiq-components-dynamic-translation.mjs +5 -0
  71. package/esm2022/dynamic-translation/module.mjs +25 -0
  72. package/esm2022/file-upload/file-drop.mjs +1 -1
  73. package/esm2022/file-upload/multiple-file-upload.component.mjs +11 -11
  74. package/esm2022/file-upload/single-file-upload.component.mjs +11 -11
  75. package/esm2022/filter-bar/filter-refresher.mjs +5 -5
  76. package/esm2022/filter-bar/filter-reset.mjs +3 -3
  77. package/esm2022/filter-bar/filter-search.mjs +11 -11
  78. package/esm2022/filter-bar/filters.mjs +3 -3
  79. package/esm2022/filter-bar/pipe-add.mjs +5 -5
  80. package/esm2022/filter-bar/pipes/base-pipe.mjs +2 -2
  81. package/esm2022/filter-bar/pipes/pipe-button.mjs +7 -7
  82. package/esm2022/filter-bar/pipes/pipe-date.mjs +9 -1
  83. package/esm2022/filter-bar/pipes/pipe-datetime.mjs +9 -1
  84. package/esm2022/filter-bar/pipes/pipe-multi-select.mjs +4 -10
  85. package/esm2022/filter-bar/pipes/pipe-multi-tree-select.mjs +10 -9
  86. package/esm2022/filter-bar/pipes/pipe-readonly.mjs +7 -7
  87. package/esm2022/filter-bar/pipes/pipe-select.mjs +3 -4
  88. package/esm2022/filter-bar/pipes/pipe-text.mjs +8 -2
  89. package/esm2022/filter-bar/pipes/pipe-tree-select.mjs +9 -3
  90. package/esm2022/form-field/cleaner.mjs +16 -11
  91. package/esm2022/form-field/fieldset.mjs +2 -2
  92. package/esm2022/form-field/form-field.mjs +5 -5
  93. package/esm2022/form-field/password-hint.mjs +14 -3
  94. package/esm2022/form-field/password-toggle.mjs +45 -10
  95. package/esm2022/form-field/reactive-password-hint.mjs +18 -17
  96. package/esm2022/form-field/stepper.mjs +9 -9
  97. package/esm2022/icon/icon-button.component.mjs +2 -2
  98. package/esm2022/input/input-number.mjs +15 -10
  99. package/esm2022/markdown/markdown.component.mjs +3 -3
  100. package/esm2022/modal/modal.component.mjs +14 -14
  101. package/esm2022/modal/modal.directive.mjs +7 -5
  102. package/esm2022/navbar/navbar-item.component.mjs +3 -3
  103. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  104. package/esm2022/popover/popover.component.mjs +3 -3
  105. package/esm2022/scrollbar/scrollbar.component.mjs +5 -5
  106. package/esm2022/select/select.component.mjs +24 -11
  107. package/esm2022/sidebar/sidebar.component.mjs +46 -27
  108. package/esm2022/sidepanel/sidepanel-container.component.mjs +15 -4
  109. package/esm2022/sidepanel/sidepanel-directives.mjs +5 -5
  110. package/esm2022/sidepanel/sidepanel-ref.mjs +8 -6
  111. package/esm2022/splitter/splitter.component.mjs +1 -1
  112. package/esm2022/tabs/tab-body.component.mjs +3 -3
  113. package/esm2022/tabs/tab-group.component.mjs +27 -27
  114. package/esm2022/tabs/tab.component.mjs +4 -4
  115. package/esm2022/tags/tag-input.mjs +2 -2
  116. package/esm2022/tags/tag-list.component.mjs +13 -13
  117. package/esm2022/textarea/textarea.component.mjs +6 -4
  118. package/esm2022/timepicker/timepicker.directive.mjs +1 -1
  119. package/esm2022/timezone/timezone-select.component.mjs +3 -3
  120. package/esm2022/tooltip/tooltip.component.mjs +3 -3
  121. package/esm2022/tree/tree-selection.component.mjs +4 -4
  122. package/esm2022/tree-select/tree-select.component.mjs +11 -9
  123. package/esm2022/username/constants.mjs +25 -0
  124. package/esm2022/username/index.mjs +6 -0
  125. package/esm2022/username/koobiq-components-username.mjs +5 -0
  126. package/esm2022/username/module.mjs +35 -0
  127. package/esm2022/username/types.mjs +32 -0
  128. package/esm2022/username/username.mjs +129 -0
  129. package/esm2022/username/username.pipe.mjs +92 -0
  130. package/fesm2022/koobiq-components-actions-panel.mjs +56 -31
  131. package/fesm2022/koobiq-components-actions-panel.mjs.map +1 -1
  132. package/fesm2022/koobiq-components-button-toggle.mjs +8 -8
  133. package/fesm2022/koobiq-components-button-toggle.mjs.map +1 -1
  134. package/fesm2022/koobiq-components-clamped-text.mjs +242 -0
  135. package/fesm2022/koobiq-components-clamped-text.mjs.map +1 -0
  136. package/fesm2022/koobiq-components-content-panel.mjs +612 -0
  137. package/fesm2022/koobiq-components-content-panel.mjs.map +1 -0
  138. package/fesm2022/koobiq-components-core.mjs +29 -1
  139. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  140. package/fesm2022/koobiq-components-datepicker.mjs +21 -18
  141. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  142. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  143. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  144. package/fesm2022/koobiq-components-dynamic-translation.mjs +204 -0
  145. package/fesm2022/koobiq-components-dynamic-translation.mjs.map +1 -0
  146. package/fesm2022/koobiq-components-file-upload.mjs +20 -20
  147. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  148. package/fesm2022/koobiq-components-filter-bar.mjs +75 -58
  149. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  150. package/fesm2022/koobiq-components-form-field.mjs +100 -49
  151. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  152. package/fesm2022/koobiq-components-icon.mjs +2 -2
  153. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  154. package/fesm2022/koobiq-components-input.mjs +14 -9
  155. package/fesm2022/koobiq-components-input.mjs.map +1 -1
  156. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  157. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  158. package/fesm2022/koobiq-components-modal.mjs +19 -17
  159. package/fesm2022/koobiq-components-modal.mjs.map +1 -1
  160. package/fesm2022/koobiq-components-navbar.mjs +2 -2
  161. package/fesm2022/koobiq-components-navbar.mjs.map +1 -1
  162. package/fesm2022/koobiq-components-popover.mjs +4 -4
  163. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  164. package/fesm2022/koobiq-components-scrollbar.mjs +4 -4
  165. package/fesm2022/koobiq-components-scrollbar.mjs.map +1 -1
  166. package/fesm2022/koobiq-components-select.mjs +23 -10
  167. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  168. package/fesm2022/koobiq-components-sidebar.mjs +45 -26
  169. package/fesm2022/koobiq-components-sidebar.mjs.map +1 -1
  170. package/fesm2022/koobiq-components-sidepanel.mjs +24 -12
  171. package/fesm2022/koobiq-components-sidepanel.mjs.map +1 -1
  172. package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
  173. package/fesm2022/koobiq-components-tabs.mjs +31 -31
  174. package/fesm2022/koobiq-components-tabs.mjs.map +1 -1
  175. package/fesm2022/koobiq-components-tags.mjs +13 -13
  176. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  177. package/fesm2022/koobiq-components-textarea.mjs +5 -3
  178. package/fesm2022/koobiq-components-textarea.mjs.map +1 -1
  179. package/fesm2022/koobiq-components-timepicker.mjs.map +1 -1
  180. package/fesm2022/koobiq-components-timezone.mjs +2 -2
  181. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  182. package/fesm2022/koobiq-components-tooltip.mjs +2 -2
  183. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  184. package/fesm2022/koobiq-components-tree-select.mjs +10 -8
  185. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  186. package/fesm2022/koobiq-components-tree.mjs +3 -3
  187. package/fesm2022/koobiq-components-tree.mjs.map +1 -1
  188. package/fesm2022/koobiq-components-username.mjs +308 -0
  189. package/fesm2022/koobiq-components-username.mjs.map +1 -0
  190. package/file-upload/_file-upload-theme.scss +1 -1
  191. package/file-upload/file-drop.d.ts +1 -1
  192. package/file-upload/multiple-file-upload.component.d.ts +1 -1
  193. package/file-upload/single-file-upload.component.d.ts +2 -2
  194. package/filter-bar/pipes/pipe-date.d.ts +3 -1
  195. package/filter-bar/pipes/pipe-datetime.d.ts +3 -1
  196. package/filter-bar/pipes/pipe-multi-select.d.ts +0 -1
  197. package/filter-bar/pipes/pipe-multi-tree-select.d.ts +3 -2
  198. package/filter-bar/pipes/pipe-select.d.ts +0 -1
  199. package/filter-bar/pipes/pipe-tree-select.d.ts +3 -2
  200. package/form-field/_form-field-theme.scss +27 -18
  201. package/form-field/cleaner.d.ts +4 -2
  202. package/form-field/cleaner.scss +6 -2
  203. package/form-field/form-field.scss +5 -1
  204. package/form-field/password-hint.d.ts +7 -0
  205. package/form-field/password-toggle.d.ts +23 -3
  206. package/form-field/password-toggle.scss +4 -8
  207. package/form-field/reactive-password-hint.d.ts +1 -0
  208. package/icon/_icon-button-theme.scss +8 -2
  209. package/modal/modal.component.d.ts +6 -6
  210. package/package.json +28 -4
  211. package/popover/popover-confirm.component.d.ts +1 -1
  212. package/popover/popover.component.d.ts +2 -2
  213. package/schematics/ng-add/index.js +3 -3
  214. package/scrollbar/scrollbar.component.d.ts +4 -4
  215. package/select/select.component.d.ts +14 -2
  216. package/sidebar/sidebar.component.d.ts +31 -5
  217. package/sidepanel/sidepanel-container.component.d.ts +9 -0
  218. package/sidepanel/sidepanel-ref.d.ts +3 -3
  219. package/splitter/splitter.component.d.ts +2 -2
  220. package/tabs/tab-group.component.d.ts +1 -1
  221. package/tabs/tab.component.d.ts +1 -1
  222. package/tags/tag-input.d.ts +1 -1
  223. package/tags/tag-list.component.d.ts +1 -1
  224. package/timepicker/timepicker.directive.d.ts +1 -1
  225. package/tooltip/tooltip.component.d.ts +2 -2
  226. package/tree/tree-selection.component.d.ts +1 -1
  227. package/tree-select/tree-select.component.d.ts +1 -1
  228. package/username/constants.d.ts +15 -0
  229. package/username/index.d.ts +5 -0
  230. package/username/module.d.ts +8 -0
  231. package/username/types.d.ts +62 -0
  232. package/username/username-tokens.scss +6 -0
  233. package/username/username.d.ts +68 -0
  234. package/username/username.pipe.d.ts +23 -0
  235. package/username/username.scss +107 -0
@@ -37,9 +37,7 @@ export declare class KbqActionsPanelConfig<D = unknown> {
37
37
  */
38
38
  closeOnNavigation?: boolean;
39
39
  /**
40
- * Overlay container element in which the actions panel are rendered.
41
- *
42
- * @default `document.body`
40
+ * Element in which the actions panel overlay will be connected to.
43
41
  */
44
42
  overlayContainer?: ElementRef<HTMLElement>;
45
43
  /**
@@ -58,6 +56,9 @@ export declare class KbqActionsPanelConfig<D = unknown> {
58
56
  /**
59
57
  * Max-width of the actions panel.
60
58
  * If a number is provided, assumes pixel units.
59
+ *
60
+ * NOTE: this property is ignored if the `overlayContainer` property is provided, and will be calculated based on
61
+ * the width of the `overlayContainer`.
61
62
  */
62
63
  maxWidth?: number | string;
63
64
  /**
@@ -28,9 +28,3 @@
28
28
  .kbq-actions-panel-overlay {
29
29
  margin: var(--kbq-actions-panel-margin);
30
30
  }
31
-
32
- .kbq-actions-panel-overlay-container {
33
- // Required for positioning the overlay inside the custom container
34
- // See: KbqActionsPanelConfig.overlayContainer
35
- position: relative;
36
- }
@@ -1,4 +1,5 @@
1
1
  import { DialogRef } from '@angular/cdk/dialog';
2
+ import { OverlayRef } from '@angular/cdk/overlay';
2
3
  import { Observable } from 'rxjs';
3
4
  import { KbqActionsPanelContainer } from './actions-panel-container';
4
5
  /**
@@ -18,6 +19,18 @@ export declare class KbqActionsPanelRef<I = unknown, R = unknown> {
18
19
  get keydownEvents(): Observable<KeyboardEvent>;
19
20
  /** Gets an observable that is notified when the actions panel has opened and appeared. */
20
21
  get afterOpened(): Observable<void>;
22
+ /**
23
+ * Gets the overlay reference for the actions panel.
24
+ *
25
+ * @docs-private
26
+ */
27
+ get overlayRef(): OverlayRef;
28
+ /**
29
+ * Gets the ID of the actions panel.
30
+ *
31
+ * @docs-private
32
+ */
33
+ get id(): string;
21
34
  private readonly _afterOpened;
22
35
  /** Result to be passed down to the `afterClosed` stream. */
23
36
  private result;
@@ -48,21 +48,15 @@ export type KbqActionsPanelTemplateContext<T = unknown, D = unknown, R = unknown
48
48
  * @docs-private
49
49
  */
50
50
  export declare const KBQ_ACTIONS_PANEL_OVERLAY_SELECTOR = "kbq-actions-panel-overlay";
51
- /**
52
- * Selector for custom actions panel overlay container.
53
- *
54
- * @docs-private
55
- */
56
- export declare const KBQ_ACTIONS_PANEL_OVERLAY_CONTAINER_SELECTOR = "kbq-actions-panel-overlay-container";
57
51
  /**
58
52
  * Service for opening actions panel.
59
53
  */
60
54
  export declare class KbqActionsPanel implements OnDestroy {
61
55
  private readonly injector;
62
56
  private readonly overlay;
63
- private readonly overlayContainer;
64
57
  private readonly dialog;
65
58
  private readonly defaultConfig;
59
+ private readonly resizeObserver;
66
60
  /** The reference to the currently opened actions panel. */
67
61
  private openedActionsPanelRef;
68
62
  ngOnDestroy(): void;
@@ -0,0 +1,61 @@
1
+ import { AfterViewInit, ElementRef } from '@angular/core';
2
+ import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
3
+ import * as i0 from "@angular/core";
4
+ export declare class KbqClampedText implements AfterViewInit {
5
+ /**
6
+ * Max rows before text is clamped.
7
+ * @default kbqClampedTextDefaultMaxRows
8
+ */
9
+ readonly rows: import("@angular/core").InputSignal<number>;
10
+ /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = auto. */
11
+ readonly isCollapsed: import("@angular/core").InputSignal<boolean | undefined>;
12
+ /**
13
+ * Debounce time on resize observer when recalculating toggle and text visibility.
14
+ * @default 0
15
+ */
16
+ readonly debounceTime: import("@angular/core").InputSignalWithTransform<number, unknown>;
17
+ /** Emits when collapsed state changes. Used for two-way binding with `isCollapsed`. */
18
+ readonly isCollapsedChange: import("@angular/core").OutputEmitterRef<boolean>;
19
+ /** @docs-private */
20
+ readonly text: import("@angular/core").Signal<ElementRef<HTMLSpanElement>>;
21
+ /** @docs-private */
22
+ readonly textContainer: import("@angular/core").Signal<ElementRef<HTMLDivElement>>;
23
+ /**
24
+ * This flag controls event emission, aria/css-class calculation
25
+ * @docs-private
26
+ */
27
+ protected readonly collapsedState: import("@angular/core").WritableSignal<boolean | undefined>;
28
+ /** @docs-private */
29
+ protected readonly isToggleCollapsed: import("@angular/core").WritableSignal<boolean | undefined>;
30
+ /** @docs-private */
31
+ protected readonly hasToggle: import("@angular/core").WritableSignal<boolean>;
32
+ /** @docs-private */
33
+ protected readonly lineClamp: import("@angular/core").WritableSignal<number | null>;
34
+ private readonly destroyRef;
35
+ private readonly elementRef;
36
+ private readonly resizeObserver;
37
+ private readonly localeService;
38
+ /**
39
+ * Clamped text locale configuration.
40
+ * @docs-private
41
+ */
42
+ protected readonly localeConfiguration: import("@angular/core").Signal<KbqClampedTextLocaleConfig | undefined>;
43
+ /**
44
+ * This flag is used to prevent trigger resize observer on toggle click.
45
+ */
46
+ private isEventFromToggle;
47
+ constructor();
48
+ ngAfterViewInit(): void;
49
+ /** @docs-private */
50
+ toggleIsCollapsed(event: Event): void;
51
+ private updateToggleVisibilityState;
52
+ private updateCollapsedState;
53
+ /**
54
+ * Calculates next collapsed state according to previous one.
55
+ * `undefined` is treated as collapsed and not touched stated.
56
+ */
57
+ private toggleCollapseState;
58
+ private getRowsCount;
59
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqClampedText, never>;
60
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqClampedText, "kbq-clamped-text", ["kbqClampedText"], { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; }, { "isCollapsedChange": "isCollapsedChange"; }, never, ["*"], true, never>;
61
+ }
@@ -0,0 +1,17 @@
1
+ .kbq-clamped-text {
2
+ display: inline-flex;
3
+ flex-direction: column;
4
+ }
5
+
6
+ .kbq-clamped-text__content {
7
+ &.kbq-clamped-text__content_collapsed {
8
+ display: -webkit-box;
9
+ overflow-y: hidden;
10
+ -webkit-box-orient: vertical;
11
+ }
12
+ }
13
+
14
+ .kbq-clamped-text__toggle {
15
+ margin-top: var(--kbq-size-xxs);
16
+ align-self: flex-start;
17
+ }
@@ -0,0 +1,14 @@
1
+ import { InjectionToken, Provider } from '@angular/core';
2
+ import { KbqClampedTextLocaleConfig } from '@koobiq/components/core';
3
+ /**
4
+ * Default maximum number of visible rows for the clamped text component
5
+ * before truncation and the "collapse/expand" toggle is shown.
6
+ */
7
+ export declare const kbqClampedTextDefaultMaxRows = 5;
8
+ /** Localization configuration provider. */
9
+ export declare const KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION: InjectionToken<KbqClampedTextLocaleConfig>;
10
+ /**
11
+ * Utility provider.
12
+ * @see KBQ_CLAMPED_TEXT_LOCALE_CONFIGURATION
13
+ */
14
+ export declare const kbqClampedTextLocaleConfigurationProvider: (configuration: KbqClampedTextLocaleConfig) => Provider;
@@ -0,0 +1,3 @@
1
+ export * from './clamped-text';
2
+ export * from './constants';
3
+ export * from './module';
@@ -0,0 +1,7 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./clamped-text";
3
+ export declare class KbqClampedTextModule {
4
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqClampedTextModule, never>;
5
+ static ɵmod: i0.ɵɵNgModuleDeclaration<KbqClampedTextModule, never, [typeof i1.KbqClampedText], [typeof i1.KbqClampedText]>;
6
+ static ɵinj: i0.ɵɵInjectorDeclaration<KbqClampedTextModule>;
7
+ }
@@ -0,0 +1,9 @@
1
+ .kbq-content-panel-aside {
2
+ display: flex;
3
+ flex-direction: column;
4
+ gap: var(--kbq-size-s);
5
+ padding: var(--kbq-size-l) var(--kbq-size-m);
6
+ border-top-left-radius: inherit;
7
+ border-bottom-left-radius: inherit;
8
+ border-right: inherit;
9
+ }
@@ -0,0 +1,9 @@
1
+ .kbq-content-panel-body {
2
+ overflow: hidden;
3
+ flex-grow: 1;
4
+
5
+ .kbq-content-panel-body__content {
6
+ padding: 0 var(--kbq-content-panel-vertical-padding);
7
+ height: 100%;
8
+ }
9
+ }
@@ -0,0 +1,32 @@
1
+ .kbq-content-panel-container {
2
+ display: flex;
3
+ gap: var(--kbq-size-l);
4
+ overflow: hidden;
5
+ position: relative;
6
+ box-sizing: border-box;
7
+ height: 100%;
8
+
9
+ .kbq-content-panel-container__content {
10
+ flex-grow: 1;
11
+ height: 100%;
12
+ }
13
+
14
+ .kbq-content-panel-container__panel {
15
+ position: absolute;
16
+ right: 0;
17
+ top: 0;
18
+ padding: 0 var(--kbq-size-s) var(--kbq-size-s) 0;
19
+ display: flex;
20
+ height: 100%;
21
+ box-sizing: border-box;
22
+ }
23
+
24
+ .kbq-content-panel-container__panel-resizer {
25
+ position: absolute;
26
+ top: 0;
27
+ left: calc(var(--kbq-content-panel-resizer-width) / -2);
28
+ width: var(--kbq-content-panel-resizer-width);
29
+ height: 100%;
30
+ z-index: 2;
31
+ }
32
+ }
@@ -0,0 +1,5 @@
1
+ .kbq-content-panel-footer {
2
+ display: flex;
3
+ gap: var(--kbq-size-l);
4
+ padding: var(--kbq-size-l) var(--kbq-content-panel-vertical-padding);
5
+ }
@@ -0,0 +1,30 @@
1
+ @use '../core/styles/common/tokens';
2
+
3
+ .kbq-content-panel-header {
4
+ display: flex;
5
+ flex-direction: column;
6
+ padding: var(--kbq-size-l) var(--kbq-content-panel-vertical-padding);
7
+
8
+ .kbq-content-panel-header__wrapper {
9
+ display: flex;
10
+ justify-content: space-between;
11
+ }
12
+
13
+ .kbq-content-panel-header__actions {
14
+ display: flex;
15
+ justify-content: flex-end;
16
+ }
17
+
18
+ .kbq-content-panel-header__close-button {
19
+ margin-left: var(--kbq-size-m);
20
+ }
21
+
22
+ .kbq-content-panel-header-title {
23
+ @include tokens.kbq-typography-level-to-styles-css-variables(typography, title);
24
+ }
25
+
26
+ .kbq-content-panel-header-actions {
27
+ display: flex;
28
+ gap: var(--kbq-size-s);
29
+ }
30
+ }
@@ -0,0 +1,9 @@
1
+ .kbq-content-panel-container {
2
+ --kbq-content-panel-resizer-width: var(--kbq-size-l);
3
+ --kbq-content-panel-border-radius: var(--kbq-size-l);
4
+ --kbq-content-panel-background-color: var(--kbq-background-card);
5
+ --kbq-content-panel-border: var(--kbq-size-border-width) solid var(--kbq-line-contrast-less);
6
+ --kbq-content-panel-header-overflow-box-shadow: var(--kbq-shadow-overflow-normal-bottom);
7
+ --kbq-content-panel-footer-overflow-box-shadow: var(--kbq-shadow-overflow-normal-top);
8
+ --kbq-content-panel-vertical-padding: var(--kbq-size-xxl);
9
+ }
@@ -0,0 +1,149 @@
1
+ import { KbqButtonStyles } from '@koobiq/components/button';
2
+ import { KbqComponentColors } from '@koobiq/components/core';
3
+ import { KbqScrollbar } from '@koobiq/components/scrollbar';
4
+ import { KbqResizerSizeChangeEvent } from './resizable';
5
+ import * as i0 from "@angular/core";
6
+ export declare class KbqContentPanelAside {
7
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelAside, never>;
8
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelAside, "kbq-content-panel-aside", ["kbqContentPanelAside"], {}, {}, never, ["*"], true, never>;
9
+ }
10
+ export declare class KbqContentPanelHeaderTitle {
11
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeaderTitle, never>;
12
+ static ɵdir: i0.ɵɵDirectiveDeclaration<KbqContentPanelHeaderTitle, "[kbqContentPanelHeaderTitle]", ["kbqContentPanelHeaderTitle"], {}, {}, never, never, true, never>;
13
+ }
14
+ export declare class KbqContentPanelHeaderActions {
15
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeaderActions, never>;
16
+ static ɵdir: i0.ɵɵDirectiveDeclaration<KbqContentPanelHeaderActions, "[kbqContentPanelHeaderActions]", ["kbqContentPanelHeaderActions"], {}, {}, never, never, true, never>;
17
+ }
18
+ export declare class KbqContentPanelHeader {
19
+ /**
20
+ * @docs-private
21
+ */
22
+ protected readonly contentPanelContainer: KbqContentPanelContainer;
23
+ /**
24
+ * @docs-private
25
+ */
26
+ protected readonly buttonStyles: typeof KbqButtonStyles;
27
+ /**
28
+ * @docs-private
29
+ */
30
+ protected readonly componentColors: typeof KbqComponentColors;
31
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelHeader, never>;
32
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelHeader, "kbq-content-panel-header", never, {}, {}, never, ["[kbqContentPanelHeaderTitle]", "[kbqContentPanelHeaderActions]", "*"], true, never>;
33
+ }
34
+ export declare class KbqContentPanelBody {
35
+ /**
36
+ * @docs-private
37
+ */
38
+ readonly scrollbar: import("@angular/core").Signal<KbqScrollbar>;
39
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelBody, never>;
40
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelBody, "kbq-content-panel-body", ["kbqContentPanelBody"], {}, {}, never, ["*"], true, never>;
41
+ }
42
+ export declare class KbqContentPanelFooter {
43
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelFooter, never>;
44
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelFooter, "kbq-content-panel-footer", never, {}, {}, never, ["*"], true, never>;
45
+ }
46
+ export declare class KbqContentPanel {
47
+ private readonly destroyRef;
48
+ private readonly renderer;
49
+ private readonly elementRef;
50
+ private readonly contentPanelBody;
51
+ constructor();
52
+ private handleContentBodyScroll;
53
+ private setupContentHeaderShadow;
54
+ private setupContentFooterShadow;
55
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanel, never>;
56
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanel, "kbq-content-panel", never, {}, {}, ["contentPanelBody"], ["kbq-content-panel-aside", "kbq-content-panel-header", "kbq-content-panel-body", "kbq-content-panel-footer"], true, never>;
57
+ }
58
+ export declare class KbqContentPanelContainer {
59
+ /**
60
+ * Whether the content panel is opened.
61
+ *
62
+ * @default false
63
+ */
64
+ readonly opened: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
65
+ /**
66
+ * Emits event when the content panel opened state is changed.
67
+ */
68
+ readonly openedChange: import("@angular/core").OutputEmitterRef<boolean>;
69
+ /**
70
+ * Whether the content panel can not be closed by clicking on the close button or pressing the ESCAPE key.
71
+ *
72
+ * @default false
73
+ */
74
+ readonly disableClose: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
75
+ /**
76
+ * Whether the content panel can not be closed by pressing the ESCAPE key.
77
+ */
78
+ readonly disableCloseByEscape: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
79
+ /**
80
+ * Whether the content panel resizer is disabled.
81
+ */
82
+ readonly disableResizer: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
83
+ /**
84
+ * Minimum width of the `KbqContentPanel`.
85
+ *
86
+ * @default 480
87
+ */
88
+ readonly minWidth: import("@angular/core").InputSignalWithTransform<number, unknown>;
89
+ /**
90
+ * Width of the `KbqContentPanel`.
91
+ *
92
+ * @default 640
93
+ */
94
+ readonly width: import("@angular/core").InputSignalWithTransform<number, unknown>;
95
+ /**
96
+ * Max width of the `KbqContentPanel`.
97
+ *
98
+ * @default 800
99
+ */
100
+ readonly maxWidth: import("@angular/core").InputSignalWithTransform<number, unknown>;
101
+ /**
102
+ * @docs-private
103
+ */
104
+ protected readonly openedState: import("@angular/core").WritableSignal<boolean>;
105
+ /**
106
+ * @docs-private
107
+ */
108
+ protected readonly widthState: import("@angular/core").WritableSignal<number>;
109
+ /**
110
+ * Whether the content panel is opened.
111
+ */
112
+ readonly isOpened: import("@angular/core").Signal<boolean>;
113
+ /**
114
+ * @docs-private
115
+ */
116
+ protected readonly contentAnimationState: import("@angular/core").Signal<{
117
+ value: boolean;
118
+ params: {
119
+ marginRight: number;
120
+ };
121
+ }>;
122
+ constructor();
123
+ /**
124
+ * Toggles the content panel opened state.
125
+ */
126
+ toggle(): void;
127
+ /**
128
+ * Opens the content panel.
129
+ */
130
+ open(): void;
131
+ /**
132
+ * Closes the content panel.
133
+ */
134
+ close(): void;
135
+ /**
136
+ * @docs-private
137
+ */
138
+ protected handleResizerDBLClick(event: MouseEvent): void;
139
+ /**
140
+ * @docs-private
141
+ */
142
+ protected handleResizerSizeChange({ width }: KbqResizerSizeChangeEvent): void;
143
+ /**
144
+ * @docs-private
145
+ */
146
+ protected handleEscapeKeydown(event: KeyboardEvent): void;
147
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelContainer, never>;
148
+ static ɵcmp: i0.ɵɵComponentDeclaration<KbqContentPanelContainer, "kbq-content-panel-container", ["kbqContentPanelContainer"], { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "disableClose": { "alias": "disableClose"; "required": false; "isSignal": true; }; "disableCloseByEscape": { "alias": "disableCloseByEscape"; "required": false; "isSignal": true; }; "disableResizer": { "alias": "disableResizer"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, { "openedChange": "openedChange"; }, never, ["*", "kbq-content-panel"], true, never>;
149
+ }
@@ -0,0 +1,25 @@
1
+ .kbq-content-panel {
2
+ display: flex;
3
+ border-radius: var(--kbq-content-panel-border-radius);
4
+ background-color: var(--kbq-content-panel-background-color);
5
+ border: var(--kbq-content-panel-border);
6
+ height: 100%;
7
+ box-sizing: border-box;
8
+ position: relative;
9
+
10
+ &.kbq-content-panel_header-with-shadow .kbq-content-panel-header {
11
+ box-shadow: var(--kbq-content-panel-header-overflow-box-shadow);
12
+ }
13
+
14
+ &.kbq-content-panel_footer-with-shadow .kbq-content-panel-footer {
15
+ box-shadow: var(--kbq-content-panel-footer-overflow-box-shadow);
16
+ }
17
+
18
+ .kbq-content-panel__content {
19
+ display: flex;
20
+ flex: 1;
21
+ flex-direction: column;
22
+ border-top-right-radius: inherit;
23
+ border-bottom-right-radius: inherit;
24
+ }
25
+ }
@@ -0,0 +1,3 @@
1
+ export * from './content-panel';
2
+ export * from './module';
3
+ export * from './resizable';
@@ -0,0 +1,7 @@
1
+ import * as i0 from "@angular/core";
2
+ import * as i1 from "./content-panel";
3
+ export declare class KbqContentPanelModule {
4
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqContentPanelModule, never>;
5
+ static ɵmod: i0.ɵɵNgModuleDeclaration<KbqContentPanelModule, never, [typeof i1.KbqContentPanelContainer, typeof i1.KbqContentPanel, typeof i1.KbqContentPanelAside, typeof i1.KbqContentPanelHeader, typeof i1.KbqContentPanelHeaderTitle, typeof i1.KbqContentPanelHeaderActions, typeof i1.KbqContentPanelBody, typeof i1.KbqContentPanelFooter], [typeof i1.KbqContentPanelContainer, typeof i1.KbqContentPanel, typeof i1.KbqContentPanelAside, typeof i1.KbqContentPanelHeader, typeof i1.KbqContentPanelHeaderTitle, typeof i1.KbqContentPanelHeaderActions, typeof i1.KbqContentPanelBody, typeof i1.KbqContentPanelFooter]>;
6
+ static ɵinj: i0.ɵɵInjectorDeclaration<KbqContentPanelModule>;
7
+ }
@@ -0,0 +1,70 @@
1
+ import { ElementRef } from '@angular/core';
2
+ import * as i0 from "@angular/core";
3
+ /**
4
+ * @docs-private
5
+ *
6
+ * Array of two numbers [x, y], where:
7
+ * - x: horizontal direction (left: -1, unchanged: 0, right: 1)
8
+ * - y: vertical direction (up: -1, unchanged: 0, down: 1)
9
+ */
10
+ export type KbqResizerDirection = [x: -1 | 0 | 1, y: -1 | 0 | 1];
11
+ export type KbqResizerSizeChangeEvent = {
12
+ width: number;
13
+ height: number;
14
+ };
15
+ /**
16
+ * @docs-private
17
+ *
18
+ * Directive (container) sets whether the element is resizable.
19
+ *
20
+ * @example
21
+ *
22
+ * ```html
23
+ * <div kbqResizable>
24
+ * <div [kbqResizer]="[1, 0]"></div>
25
+ * </div>
26
+ * ```
27
+ */
28
+ export declare class KbqResizable {
29
+ /**
30
+ * @docs-private
31
+ */
32
+ readonly elementRef: ElementRef<HTMLElement>;
33
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqResizable, never>;
34
+ static ɵdir: i0.ɵɵDirectiveDeclaration<KbqResizable, "[kbqResizable]", ["kbqResizable"], {}, {}, never, never, true, never>;
35
+ }
36
+ /**
37
+ * @docs-private
38
+ *
39
+ * Directive which defines element resizing direction.
40
+ */
41
+ export declare class KbqResizer {
42
+ private readonly elementRef;
43
+ private readonly resizable;
44
+ private readonly zone;
45
+ private readonly document;
46
+ private readonly destroyRef;
47
+ private x;
48
+ private y;
49
+ private width;
50
+ private height;
51
+ /**
52
+ * Direction of element resizing.
53
+ */
54
+ readonly direction: import("@angular/core").InputSignal<KbqResizerDirection>;
55
+ /**
56
+ * Emits the new size of the element after resizing.
57
+ */
58
+ readonly sizeChange: import("@angular/core").OutputEmitterRef<KbqResizerSizeChangeEvent>;
59
+ /**
60
+ * @docs-private
61
+ */
62
+ protected readonly cursor: import("@angular/core").Signal<"ns-resize" | "ew-resize" | "nwse-resize" | "nesw-resize">;
63
+ constructor();
64
+ private handleElementPointerDown;
65
+ private handleDocumentPointerMove;
66
+ private handleDocumentPointerUp;
67
+ private updateSize;
68
+ static ɵfac: i0.ɵɵFactoryDeclaration<KbqResizer, never>;
69
+ static ɵdir: i0.ɵɵDirectiveDeclaration<KbqResizer, "[kbqResizer]", ["kbqResizer"], { "direction": { "alias": "kbqResizer"; "required": true; "isSignal": true; }; }, { "sizeChange": "sizeChange"; }, never, never, true, never>;
70
+ }
@@ -88,4 +88,8 @@ export declare const enUSLocaleData: {
88
88
  backToPeriodSelection: string;
89
89
  };
90
90
  };
91
+ clampedText: {
92
+ openText: string;
93
+ closeText: string;
94
+ };
91
95
  };
@@ -87,4 +87,8 @@ export declare const esLALocaleData: {
87
87
  backToPeriodSelection: string;
88
88
  };
89
89
  };
90
+ clampedText: {
91
+ openText: string;
92
+ closeText: string;
93
+ };
90
94
  };
@@ -87,4 +87,8 @@ export declare const faIRLocaleData: {
87
87
  backToPeriodSelection: string;
88
88
  };
89
89
  };
90
+ clampedText: {
91
+ openText: string;
92
+ closeText: string;
93
+ };
90
94
  };
@@ -132,6 +132,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
132
132
  backToPeriodSelection: string;
133
133
  };
134
134
  };
135
+ clampedText: {
136
+ openText: string;
137
+ closeText: string;
138
+ };
135
139
  };
136
140
  'zh-CN': {
137
141
  formatters: {
@@ -255,6 +259,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
255
259
  backToPeriodSelection: string;
256
260
  };
257
261
  };
262
+ clampedText: {
263
+ openText: string;
264
+ closeText: string;
265
+ };
258
266
  };
259
267
  'es-LA': {
260
268
  formatters: {
@@ -383,6 +391,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
383
391
  backToPeriodSelection: string;
384
392
  };
385
393
  };
394
+ clampedText: {
395
+ openText: string;
396
+ closeText: string;
397
+ };
386
398
  };
387
399
  'pt-BR': {
388
400
  formatters: {
@@ -507,6 +519,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
507
519
  backToPeriodSelection: string;
508
520
  };
509
521
  };
522
+ clampedText: {
523
+ openText: string;
524
+ closeText: string;
525
+ };
510
526
  };
511
527
  'ru-RU': {
512
528
  formatters: {
@@ -637,6 +653,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
637
653
  backToPeriodSelection: string;
638
654
  };
639
655
  };
656
+ clampedText: {
657
+ openText: string;
658
+ closeText: string;
659
+ };
640
660
  };
641
661
  'fa-IR': {
642
662
  formatters: {
@@ -762,6 +782,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
762
782
  backToPeriodSelection: string;
763
783
  };
764
784
  };
785
+ clampedText: {
786
+ openText: string;
787
+ closeText: string;
788
+ };
765
789
  };
766
790
  'tk-TM': {
767
791
  formatters: {
@@ -887,6 +911,10 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
887
911
  backToPeriodSelection: string;
888
912
  };
889
913
  };
914
+ clampedText: {
915
+ openText: string;
916
+ closeText: string;
917
+ };
890
918
  };
891
919
  };
892
920
  export declare const KBQ_LOCALE_DATA: InjectionToken<any>;
@@ -87,4 +87,8 @@ export declare const ptBRLocaleData: {
87
87
  backToPeriodSelection: string;
88
88
  };
89
89
  };
90
+ clampedText: {
91
+ openText: string;
92
+ closeText: string;
93
+ };
90
94
  };