@koobiq/components 18.34.0 → 18.35.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 (139) hide show
  1. package/button/_button-theme.scss +1 -0
  2. package/core/form-field/field-sizing-content.d.ts +21 -0
  3. package/core/form-field/index.d.ts +1 -0
  4. package/core/locales/en-US.d.ts +6 -0
  5. package/core/locales/es-LA.d.ts +6 -0
  6. package/core/locales/fa-IR.d.ts +6 -0
  7. package/core/locales/locale-service.d.ts +42 -0
  8. package/core/locales/pt-BR.d.ts +6 -0
  9. package/core/locales/ru-RU.d.ts +6 -0
  10. package/core/locales/tk-TM.d.ts +6 -0
  11. package/core/locales/zh-CN.d.ts +6 -0
  12. package/core/navbar/index.d.ts +1 -0
  13. package/core/navbar/rectangle-item.d.ts +14 -0
  14. package/core/option/option.d.ts +3 -1
  15. package/core/pop-up/pop-up-trigger.d.ts +2 -0
  16. package/core/public-api.d.ts +1 -0
  17. package/core/utils/dom.d.ts +9 -0
  18. package/core/utils/index.d.ts +1 -0
  19. package/core/utils/utils.d.ts +4 -0
  20. package/datepicker/datepicker-input.directive.d.ts +18 -7
  21. package/dropdown/dropdown-item.scss +1 -0
  22. package/dropdown/dropdown-trigger.directive.d.ts +7 -1
  23. package/esm2022/breadcrumbs/breadcrumbs.mjs +2 -2
  24. package/esm2022/button/button.component.mjs +2 -2
  25. package/esm2022/core/form-field/field-sizing-content.mjs +114 -0
  26. package/esm2022/core/form-field/index.mjs +2 -1
  27. package/esm2022/core/locales/en-US.mjs +7 -1
  28. package/esm2022/core/locales/es-LA.mjs +7 -1
  29. package/esm2022/core/locales/fa-IR.mjs +7 -1
  30. package/esm2022/core/locales/pt-BR.mjs +7 -1
  31. package/esm2022/core/locales/ru-RU.mjs +7 -1
  32. package/esm2022/core/locales/tk-TM.mjs +7 -1
  33. package/esm2022/core/locales/zh-CN.mjs +7 -1
  34. package/esm2022/core/navbar/index.mjs +2 -0
  35. package/esm2022/core/navbar/rectangle-item.mjs +39 -0
  36. package/esm2022/core/option/option.mjs +8 -4
  37. package/esm2022/core/pop-up/pop-up-trigger.mjs +5 -1
  38. package/esm2022/core/public-api.mjs +2 -1
  39. package/esm2022/core/utils/dom.mjs +14 -0
  40. package/esm2022/core/utils/index.mjs +2 -1
  41. package/esm2022/core/utils/utils.mjs +9 -1
  42. package/esm2022/core/version.mjs +2 -2
  43. package/esm2022/datepicker/calendar-header.component.mjs +1 -1
  44. package/esm2022/datepicker/datepicker-input.directive.mjs +24 -21
  45. package/esm2022/dropdown/dropdown-item.component.mjs +2 -2
  46. package/esm2022/dropdown/dropdown-trigger.directive.mjs +30 -10
  47. package/esm2022/file-upload/file-upload.mjs +6 -1
  48. package/esm2022/file-upload/multiple-file-upload.component.mjs +12 -7
  49. package/esm2022/file-upload/single-file-upload.component.mjs +14 -7
  50. package/esm2022/filter-bar/filter-bar.mjs +3 -3
  51. package/esm2022/filter-bar/filters.mjs +16 -4
  52. package/esm2022/filter-bar/pipe-add.mjs +2 -2
  53. package/esm2022/filter-bar/pipes/pipe-date.mjs +2 -2
  54. package/esm2022/filter-bar/pipes/pipe-datetime.mjs +2 -2
  55. package/esm2022/filter-bar/pipes/pipe-multi-select.mjs +9 -9
  56. package/esm2022/filter-bar/pipes/pipe-select.mjs +2 -2
  57. package/esm2022/filter-bar/pipes/pipe-text.mjs +2 -2
  58. package/esm2022/form-field/fieldset.mjs +2 -2
  59. package/esm2022/form-field/form-field.mjs +2 -2
  60. package/esm2022/navbar-ic/index.mjs +2 -0
  61. package/esm2022/navbar-ic/koobiq-components-navbar-ic.mjs +5 -0
  62. package/esm2022/navbar-ic/navbar-ic-header.mjs +58 -0
  63. package/esm2022/navbar-ic/navbar-ic-item.mjs +399 -0
  64. package/esm2022/navbar-ic/navbar-ic.animation.mjs +9 -0
  65. package/esm2022/navbar-ic/navbar-ic.mjs +281 -0
  66. package/esm2022/navbar-ic/navbar-ic.module.mjs +74 -0
  67. package/esm2022/navbar-ic/public-api.mjs +5 -0
  68. package/esm2022/popover/popover-confirm.component.mjs +3 -3
  69. package/esm2022/popover/popover.component.mjs +10 -5
  70. package/esm2022/select/select.component.mjs +2 -2
  71. package/esm2022/tags/tag-list.component.mjs +24 -5
  72. package/esm2022/tags/tag.component.mjs +231 -22
  73. package/esm2022/tags/tag.module.mjs +16 -6
  74. package/esm2022/tooltip/tooltip.component.mjs +3 -3
  75. package/esm2022/tree-select/tree-select.component.mjs +2 -2
  76. package/fesm2022/koobiq-components-breadcrumbs.mjs +1 -1
  77. package/fesm2022/koobiq-components-breadcrumbs.mjs.map +1 -1
  78. package/fesm2022/koobiq-components-button.mjs +2 -2
  79. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  80. package/fesm2022/koobiq-components-core.mjs +243 -31
  81. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  82. package/fesm2022/koobiq-components-datepicker.mjs +24 -22
  83. package/fesm2022/koobiq-components-datepicker.mjs.map +1 -1
  84. package/fesm2022/koobiq-components-dropdown.mjs +31 -11
  85. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  86. package/fesm2022/koobiq-components-file-upload.mjs +26 -9
  87. package/fesm2022/koobiq-components-file-upload.mjs.map +1 -1
  88. package/fesm2022/koobiq-components-filter-bar.mjs +29 -17
  89. package/fesm2022/koobiq-components-filter-bar.mjs.map +1 -1
  90. package/fesm2022/koobiq-components-form-field.mjs +4 -4
  91. package/fesm2022/koobiq-components-form-field.mjs.map +1 -1
  92. package/fesm2022/koobiq-components-navbar-ic.mjs +800 -0
  93. package/fesm2022/koobiq-components-navbar-ic.mjs.map +1 -0
  94. package/fesm2022/koobiq-components-popover.mjs +11 -6
  95. package/fesm2022/koobiq-components-popover.mjs.map +1 -1
  96. package/fesm2022/koobiq-components-select.mjs +1 -1
  97. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  98. package/fesm2022/koobiq-components-tags.mjs +271 -34
  99. package/fesm2022/koobiq-components-tags.mjs.map +1 -1
  100. package/fesm2022/koobiq-components-tooltip.mjs +2 -2
  101. package/fesm2022/koobiq-components-tooltip.mjs.map +1 -1
  102. package/fesm2022/koobiq-components-tree-select.mjs +1 -1
  103. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  104. package/file-upload/file-upload.d.ts +5 -2
  105. package/file-upload/multiple-file-upload.component.d.ts +3 -1
  106. package/file-upload/single-file-upload.component.d.ts +3 -1
  107. package/filter-bar/_filter-bar-theme.scss +2 -2
  108. package/filter-bar/filters.d.ts +1 -0
  109. package/form-field/form-field.scss +7 -1
  110. package/navbar-ic/_navbar-ic-theme.scss +81 -0
  111. package/navbar-ic/index.d.ts +1 -0
  112. package/navbar-ic/navbar-ic-divider.scss +7 -0
  113. package/navbar-ic/navbar-ic-header.d.ts +18 -0
  114. package/navbar-ic/navbar-ic-header.scss +53 -0
  115. package/navbar-ic/navbar-ic-item.d.ts +125 -0
  116. package/navbar-ic/navbar-ic-item.scss +96 -0
  117. package/navbar-ic/navbar-ic-tokens.scss +22 -0
  118. package/navbar-ic/navbar-ic.animation.d.ts +2 -0
  119. package/navbar-ic/navbar-ic.d.ts +103 -0
  120. package/navbar-ic/navbar-ic.module.d.ts +14 -0
  121. package/navbar-ic/navbar-ic.scss +32 -0
  122. package/navbar-ic/public-api.d.ts +4 -0
  123. package/package.json +10 -4
  124. package/popover/_popover-theme.scss +6 -2
  125. package/popover/popover-tokens.scss +2 -0
  126. package/popover/popover.component.d.ts +4 -1
  127. package/prebuilt-themes/dark-theme.css +1 -1
  128. package/prebuilt-themes/light-theme.css +1 -1
  129. package/prebuilt-themes/theme.css +1 -1
  130. package/schematics/ng-add/index.js +3 -3
  131. package/tags/_tag-theme.scss +10 -1
  132. package/tags/tag-list.component.d.ts +10 -2
  133. package/tags/tag-list.scss +5 -0
  134. package/tags/tag.component.d.ts +78 -8
  135. package/tags/tag.module.d.ts +1 -1
  136. package/tags/tag.scss +18 -0
  137. package/textarea/textarea-tokens.scss +1 -1
  138. package/tooltip/_tooltip-theme.scss +9 -2
  139. package/tooltip/tooltip-tokens.scss +2 -0
@@ -3,7 +3,7 @@ import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, In
3
3
  import * as i1 from '@angular/common';
4
4
  import { DOCUMENT, NgClass, TitleCasePipe } from '@angular/common';
5
5
  import * as i1$1 from '@koobiq/components/core';
6
- import { defaultOffsetY, ErrorStateMatcher, validationTooltipShowDelay, validationTooltipHideDelay, KbqErrorStateTracker, KBQ_DATE_FORMATS, KBQ_LOCALE_SERVICE } from '@koobiq/components/core';
6
+ import { defaultOffsetY, ruRULocaleData, ErrorStateMatcher, validationTooltipShowDelay, validationTooltipHideDelay, KBQ_LOCALE_SERVICE, KbqErrorStateTracker, KBQ_DATE_FORMATS } from '@koobiq/components/core';
7
7
  import * as i2 from '@koobiq/components/button';
8
8
  import { KbqButtonModule } from '@koobiq/components/button';
9
9
  import * as i3 from '@koobiq/components/select';
@@ -13,6 +13,7 @@ import { KbqIconModule } from '@koobiq/components/icon';
13
13
  import { Subject, Subscription, merge, of } from 'rxjs';
14
14
  import { trigger, state, style, transition, animate } from '@angular/animations';
15
15
  import { coerceBooleanProperty } from '@angular/cdk/coercion';
16
+ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
16
17
  import { NG_VALUE_ACCESSOR, NG_VALIDATORS, Validators, FormGroupDirective, NgForm } from '@angular/forms';
17
18
  import { TAB, SPACE, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW, HOME, PAGE_UP, END, PAGE_DOWN, ESCAPE, isLetterKey, hasModifierKey, isVerticalMovement, isHorizontalMovement, DELETE, BACKSPACE } from '@koobiq/cdk/keycodes';
18
19
  import { KbqFormFieldControl } from '@koobiq/components/form-field';
@@ -24,7 +25,6 @@ import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
24
25
  import { ComponentPortal, PortalModule } from '@angular/cdk/portal';
25
26
  import { take } from 'rxjs/operators';
26
27
  import { A11yModule } from '@angular/cdk/a11y';
27
- import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
28
28
 
29
29
  /**
30
30
  * An internal class that represents the data corresponding to a single calendar cell.
@@ -244,7 +244,7 @@ class KbqCalendarHeader {
244
244
  }
245
245
  }
246
246
  /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqCalendarHeader, deps: [{ token: i1$1.DateAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
247
- /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n <kbq-select\n #monthSelect=\"kbqSelect\"\n class=\"kbq-calendar-header__select\"\n [panelClass]=\"'kbq-calendar-select-panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selectedMonth\"\n (selectionChange)=\"onMonthSelected($event.value)\"\n >\n <button\n kbq-button\n kbq-select-matcher\n class=\"layout-padding-right-xs\"\n [class.kbq-active]=\"monthSelect.panelOpen\"\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n >\n {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n </button>\n\n @for (month of monthNames; track month.nameShort) {\n <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n {{ month.name }}\n </kbq-option>\n }\n </kbq-select>\n\n <kbq-select\n #yearSelect=\"kbqSelect\"\n [panelClass]=\"'kbq-calendar-select-panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selectedYear\"\n (selectionChange)=\"onYearSelected($event.value)\"\n >\n <button\n kbq-button\n kbq-select-matcher\n class=\"layout-padding-right-xs\"\n [class.kbq-active]=\"yearSelect.panelOpen\"\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n >\n {{ selectedYear }}\n\n <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n </button>\n\n @for (year of years; track year) {\n <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n {{ year }}\n </kbq-option>\n }\n </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n <button\n kbq-button\n class=\"kbq-calendar-header__previous-button\"\n [color]=\"'contrast'\"\n [disabled]=\"previousDisabled\"\n [kbqStyle]=\"'transparent'\"\n [tabindex]=\"-1\"\n (click)=\"selectPreviousMonth()\"\n >\n <i kbq-icon=\"kbq-chevron-left_16\"></i>\n </button>\n\n <button\n kbq-button\n [color]=\"'contrast'\"\n [disabled]=\"currentDisabled\"\n [kbqStyle]=\"'transparent'\"\n [tabindex]=\"-1\"\n (click)=\"selectCurrentDate()\"\n >\n <i kbq-icon=\"kbq-circle-xs_16\"></i>\n </button>\n\n <button\n kbq-button\n class=\"kbq-calendar-header__next-button\"\n [color]=\"'contrast'\"\n [disabled]=\"nextDisabled\"\n [kbqStyle]=\"'transparent'\"\n [tabindex]=\"-1\"\n (click)=\"selectNextMonth()\"\n >\n <i kbq-icon=\"kbq-chevron-right_16\"></i>\n </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i1$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "component", type: i1$2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
247
+ /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: KbqCalendarHeader, selector: "kbq-calendar-header", inputs: { activeDate: "activeDate", maxDate: "maxDate", minDate: "minDate" }, outputs: { activeDateChange: "activeDateChange", monthSelected: "monthSelected", yearSelected: "yearSelected" }, host: { classAttribute: "kbq-calendar-header" }, exportAs: ["kbqCalendarHeader"], ngImport: i0, template: "<div class=\"kbq-calendar-header__select-group\">\n <kbq-select\n #monthSelect=\"kbqSelect\"\n class=\"kbq-calendar-header__select\"\n [panelClass]=\"'kbq-calendar-select-panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selectedMonth\"\n (selectionChange)=\"onMonthSelected($event.value)\"\n >\n <button\n kbq-button\n kbq-select-matcher\n class=\"layout-padding-right-xs\"\n [class.kbq-active]=\"monthSelect.panelOpen\"\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n >\n {{ monthNames[selectedMonth].nameShort | titlecase }}\n\n <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\" [color]=\"'contrast'\"></i>\n </button>\n\n @for (month of monthNames; track month.nameShort) {\n <kbq-option [disabled]=\"month.disabled\" [kbqTooltipDisabled]=\"true\" [value]=\"month.value\">\n {{ month.name }}\n </kbq-option>\n }\n </kbq-select>\n\n <kbq-select\n #yearSelect=\"kbqSelect\"\n [panelClass]=\"'kbq-calendar-select-panel'\"\n [tabIndex]=\"-1\"\n [value]=\"selectedYear\"\n (selectionChange)=\"onYearSelected($event.value)\"\n >\n <button\n kbq-button\n kbq-select-matcher\n class=\"layout-padding-right-xs\"\n [class.kbq-active]=\"yearSelect.panelOpen\"\n [color]=\"'contrast'\"\n [kbqStyle]=\"'transparent'\"\n >\n {{ selectedYear }}\n\n <i kbq-icon=\"kbq-chevron-down-s_16\" class=\"layout-padding-left-3xs\"></i>\n </button>\n\n @for (year of years; track year) {\n <kbq-option [kbqTooltipDisabled]=\"true\" [value]=\"year\">\n {{ year }}\n </kbq-option>\n }\n </kbq-select>\n</div>\n\n<div class=\"kbq-calendar-header__button-group\">\n <button\n kbq-button\n class=\"kbq-calendar-header__previous-button\"\n [color]=\"'contrast'\"\n [disabled]=\"previousDisabled\"\n [kbqStyle]=\"'transparent'\"\n [tabindex]=\"-1\"\n (click)=\"selectPreviousMonth()\"\n >\n <i kbq-icon=\"kbq-chevron-left_16\"></i>\n </button>\n\n <button\n kbq-button\n [color]=\"'contrast'\"\n [disabled]=\"currentDisabled\"\n [kbqStyle]=\"'transparent'\"\n [tabindex]=\"-1\"\n (click)=\"selectCurrentDate()\"\n >\n <i kbq-icon=\"kbq-circle-xs_16\"></i>\n </button>\n\n <button\n kbq-button\n class=\"kbq-calendar-header__next-button\"\n [color]=\"'contrast'\"\n [disabled]=\"nextDisabled\"\n [kbqStyle]=\"'transparent'\"\n [tabindex]=\"-1\"\n (click)=\"selectNextMonth()\"\n >\n <i kbq-icon=\"kbq-chevron-right_16\"></i>\n </button>\n</div>\n", styles: [".kbq-calendar-header{display:flex;flex-direction:row;justify-content:space-between;padding-right:var(--kbq-datepicker-size-header-padding-horizontal);padding-left:var(--kbq-datepicker-size-header-padding-horizontal);margin-bottom:var(--kbq-datepicker-size-header-margin-bottom)}.kbq-calendar-header__select{width:auto!important}.kbq-calendar-header__button-group,.kbq-calendar-header__select-group{display:flex;flex-direction:row}.kbq-calendar-select-panel{margin-top:2px;min-width:98%!important}.kbq-calendar-select-panel .kbq-select__content{max-height:384px;overflow-x:hidden;scrollbar-gutter:auto}.kbq-calendar-select-panel .kbq-select__content .kbq-option{min-width:65px}\n"], dependencies: [{ kind: "component", type: i2.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i2.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "component", type: i3.KbqSelect, selector: "kbq-select", inputs: ["hiddenItemsText", "panelClass", "backdropClass", "errorStateMatcher", "sortComparator", "multiline", "hasBackdrop", "placeholder", "required", "multiple", "compareWith", "selectAllHandler", "panelWidth", "panelMinWidth", "value", "id", "tabIndex", "disabled", "hiddenItemsTextFormatter"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["kbqSelect"] }, { kind: "directive", type: i3.KbqOptionTooltip, selector: "kbq-option" }, { kind: "component", type: i1$1.KbqOption, selector: "kbq-option", inputs: ["value", "selectable", "userSelect", "showCheckbox", "viewValue", "disabled"], outputs: ["onSelectionChange"], exportAs: ["kbqOption"] }, { kind: "directive", type: i1$1.KbqSelectMatcher, selector: "kbq-select-matcher, [kbq-select-matcher]" }, { kind: "component", type: i1$2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "pipe", type: i1.TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
248
248
  }
249
249
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqCalendarHeader, decorators: [{
250
250
  type: Component,
@@ -1114,6 +1114,12 @@ const KBQ_DATEPICKER_VALIDATORS = {
1114
1114
  useExisting: forwardRef(() => KbqDatepickerInput),
1115
1115
  multi: true
1116
1116
  };
1117
+ /** default configuration of datepicker */
1118
+ /** @docs-private */
1119
+ const KBQ_DATEPICKER_DEFAULT_CONFIGURATION = ruRULocaleData.datepicker;
1120
+ /** Injection Token for providing configuration of datepicker */
1121
+ /** @docs-private */
1122
+ const KBQ_DATEPICKER_CONFIGURATION = new InjectionToken('KbqDatepickerConfiguration');
1117
1123
  /**
1118
1124
  * @TODO: Remove after kbq-form-field and kbq-form-field-experimental will be merged. (#DS-3463)
1119
1125
  * Used to sync control's errorState and icon's errorState, since now datepicker-input is validating on initial.
@@ -1164,11 +1170,10 @@ class KbqDatepickerInput {
1164
1170
  this.errorStateTracker.errorStateMatcher = value;
1165
1171
  }
1166
1172
  get placeholder() {
1167
- return this._placeholder;
1173
+ return this._placeholder || this.configuration.placeholder;
1168
1174
  }
1169
1175
  set placeholder(value) {
1170
1176
  this._placeholder = value;
1171
- this.usePlaceholderFromInput = true;
1172
1177
  }
1173
1178
  get required() {
1174
1179
  return this._required;
@@ -1312,12 +1317,14 @@ class KbqDatepickerInput {
1312
1317
  set selectionEnd(value) {
1313
1318
  this.elementRef.nativeElement.selectionEnd = value;
1314
1319
  }
1315
- constructor(elementRef, renderer, adapter, dateFormats, localeService) {
1320
+ constructor(elementRef, renderer, adapter, dateFormats) {
1316
1321
  this.elementRef = elementRef;
1317
1322
  this.renderer = renderer;
1318
1323
  this.adapter = adapter;
1319
1324
  this.dateFormats = dateFormats;
1320
- this.localeService = localeService;
1325
+ /** @docs-private */
1326
+ this.localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
1327
+ this.externalConfiguration = inject(KBQ_DATEPICKER_CONFIGURATION, { optional: true });
1321
1328
  this.stateChanges = new Subject();
1322
1329
  this.controlType = 'datepicker';
1323
1330
  this.focused = false;
@@ -1325,7 +1332,6 @@ class KbqDatepickerInput {
1325
1332
  this.valueChange = new EventEmitter();
1326
1333
  /** Emits when the disabled state has changed */
1327
1334
  this.disabledChange = new EventEmitter();
1328
- this._placeholder = '';
1329
1335
  this._disabled = false;
1330
1336
  this.incorrectInput = new EventEmitter();
1331
1337
  /** Emits when a `change` event is fired on this `<input>`. */
@@ -1334,13 +1340,11 @@ class KbqDatepickerInput {
1334
1340
  this.dateInput = new EventEmitter();
1335
1341
  this.uid = `kbq-datepicker-${uniqueComponentIdSuffix++}`;
1336
1342
  this.datepickerSubscription = Subscription.EMPTY;
1337
- this.localeSubscription = Subscription.EMPTY;
1338
1343
  /** Whether the last value set on the input was valid. */
1339
1344
  this.lastValueValid = false;
1340
1345
  this.firstDigit = null;
1341
1346
  this.secondDigit = null;
1342
1347
  this.thirdDigit = null;
1343
- this.usePlaceholderFromInput = false;
1344
1348
  this.onTouched = () => { };
1345
1349
  this.onInput = () => {
1346
1350
  this.correctCursorPosition();
@@ -1405,9 +1409,7 @@ class KbqDatepickerInput {
1405
1409
  };
1406
1410
  this.updateLocaleParams = () => {
1407
1411
  this.setFormat(this.dateInputFormat);
1408
- if (!this.usePlaceholderFromInput) {
1409
- this._placeholder = this.localeService.getParams('datepicker').placeholder;
1410
- }
1412
+ this.configuration = this.externalConfiguration || this.localeService?.getParams('datepicker');
1411
1413
  this.value = this.value;
1412
1414
  };
1413
1415
  this.cvaOnChange = () => { };
@@ -1452,7 +1454,10 @@ class KbqDatepickerInput {
1452
1454
  // update ngControl later, so it will be initialized
1453
1455
  null, inject(FormGroupDirective, { optional: true }), inject(NgForm, { optional: true }), this.stateChanges);
1454
1456
  this.setFormat(this.dateInputFormat);
1455
- this.localeSubscription = adapter.localeChanges.subscribe(this.updateLocaleParams);
1457
+ this.localeService?.changes.pipe(takeUntilDestroyed()).subscribe(this.updateLocaleParams);
1458
+ if (!this.localeService) {
1459
+ this.initDefaultParams();
1460
+ }
1456
1461
  }
1457
1462
  ngDoCheck() {
1458
1463
  if (this.ngControl) {
@@ -1480,7 +1485,6 @@ class KbqDatepickerInput {
1480
1485
  }
1481
1486
  ngOnDestroy() {
1482
1487
  this.datepickerSubscription.unsubscribe();
1483
- this.localeSubscription.unsubscribe();
1484
1488
  this.valueChange.complete();
1485
1489
  this.disabledChange.complete();
1486
1490
  }
@@ -1619,6 +1623,9 @@ class KbqDatepickerInput {
1619
1623
  const milliseconds = this.adapter.getMilliseconds(this.value);
1620
1624
  return this.adapter.createDateTime(years, month, day, hours, minutes, seconds, milliseconds);
1621
1625
  }
1626
+ initDefaultParams() {
1627
+ this.configuration = this.externalConfiguration || KBQ_DATEPICKER_DEFAULT_CONFIGURATION;
1628
+ }
1622
1629
  setFormat(format) {
1623
1630
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1624
1631
  // @ts-ignore
@@ -2047,7 +2054,7 @@ class KbqDatepickerInput {
2047
2054
  this.selectionStart = this.selectionStart - 1;
2048
2055
  }
2049
2056
  }
2050
- /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }, { token: KBQ_LOCALE_SERVICE, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
2057
+ /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: KbqDatepickerInput, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.DateAdapter, optional: true }, { token: KBQ_DATE_FORMATS, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
2051
2058
  /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: KbqDatepickerInput, selector: "input[kbqDatepicker], input[kbqCalendar]", inputs: { errorStateMatcher: "errorStateMatcher", placeholder: "placeholder", required: "required", kbqDatepicker: "kbqDatepicker", kbqCalendar: "kbqCalendar", kbqDatepickerFilter: "kbqDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled", id: "id", kbqValidationTooltip: "kbqValidationTooltip" }, outputs: { incorrectInput: "incorrectInput", dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "paste": "onPaste($event)", "change": "onChange()", "focus": "focusChanged(true)", "blur": "onBlur()", "keydown": "onKeyDown($event)" }, properties: { "attr.placeholder": "placeholder", "attr.required": "required", "attr.disabled": "disabled || null", "attr.min": "min ? toISO8601(min) : null", "attr.max": "max ? toISO8601(max) : null", "attr.autocomplete": "\"off\"" }, classAttribute: "kbq-input kbq-datepicker" }, providers: [
2052
2059
  KBQ_DATEPICKER_VALUE_ACCESSOR,
2053
2060
  KBQ_DATEPICKER_VALIDATORS,
@@ -2088,11 +2095,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2088
2095
  }, {
2089
2096
  type: Inject,
2090
2097
  args: [KBQ_DATE_FORMATS]
2091
- }] }, { type: i1$1.KbqLocaleService, decorators: [{
2092
- type: Optional
2093
- }, {
2094
- type: Inject,
2095
- args: [KBQ_LOCALE_SERVICE]
2096
2098
  }] }], propDecorators: { errorStateMatcher: [{
2097
2099
  type: Input
2098
2100
  }], placeholder: [{
@@ -2370,5 +2372,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
2370
2372
  * Generated bundle index. Do not edit.
2371
2373
  */
2372
2374
 
2373
- export { KBQ_DATEPICKER_SCROLL_STRATEGY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_DATEPICKER_VALIDATORS, KBQ_DATEPICKER_VALUE_ACCESSOR, KbqCalendar, KbqCalendarBody, KbqCalendarCell, KbqCalendarHeader, KbqDatepicker, KbqDatepickerContent, KbqDatepickerInput, KbqDatepickerInputEvent, KbqDatepickerIntl, KbqDatepickerModule, KbqDatepickerToggle, KbqDatepickerToggleIcon, KbqDatepickerToggleIconComponent, KbqMonthView, MAX_YEAR, kbqDatepickerAnimations };
2375
+ export { KBQ_DATEPICKER_CONFIGURATION, KBQ_DATEPICKER_DEFAULT_CONFIGURATION, KBQ_DATEPICKER_SCROLL_STRATEGY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY, KBQ_DATEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_DATEPICKER_VALIDATORS, KBQ_DATEPICKER_VALUE_ACCESSOR, KbqCalendar, KbqCalendarBody, KbqCalendarCell, KbqCalendarHeader, KbqDatepicker, KbqDatepickerContent, KbqDatepickerInput, KbqDatepickerInputEvent, KbqDatepickerIntl, KbqDatepickerModule, KbqDatepickerToggle, KbqDatepickerToggleIcon, KbqDatepickerToggleIconComponent, KbqMonthView, MAX_YEAR, kbqDatepickerAnimations };
2374
2376
  //# sourceMappingURL=koobiq-components-datepicker.mjs.map