@siemens/element-ng 49.8.0 → 49.10.0

package/fesm2022/siemens-element-ng-datatable.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { isSignal, inject, input, booleanAttribute, ElementRef, HostListener, HostBinding, Directive, NgModule } from '@angular/core';
+import { isSignal, inject, input, booleanAttribute, ElementRef, Directive, NgModule } from '@angular/core';
 import { DatatableComponent } from '@siemens/ngx-datatable';
 
 /**
@@ -21,7 +21,6 @@ class SiDatatableInteractionDirective {
      * @defaultValue false
      */
     datatableInteractionAutoSelect = input(false, { ...(ngDevMode ? { debugName: "datatableInteractionAutoSelect" } : {}), transform: booleanAttribute });
-    tabIndex = '0';
     element = inject(ElementRef).nativeElement;
     tableBody;
     autoSelectTimeout;
@@ -100,30 +99,22 @@ class SiDatatableInteractionDirective {
         clearTimeout(this.autoSelectTimeout);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatatableInteractionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiDatatableInteractionDirective, isStandalone: true, selector: "ngx-datatable[siDatatableInteraction]", inputs: { datatableInteractionAutoSelect: { classPropertyName: "datatableInteractionAutoSelect", publicName: "datatableInteractionAutoSelect", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown": "onKeydown($event)", "mousedown": "onMousedown($event)", "mouseup": "onMouseup($event)", "focusin": "onFocusin($event)" }, properties: { "attr.tabindex": "this.tabIndex" } }, exportAs: ["si-datatable-interaction"], ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: SiDatatableInteractionDirective, isStandalone: true, selector: "ngx-datatable[siDatatableInteraction]", inputs: { datatableInteractionAutoSelect: { classPropertyName: "datatableInteractionAutoSelect", publicName: "datatableInteractionAutoSelect", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "tabindex": "0" }, listeners: { "keydown": "onKeydown($event)", "mousedown": "onMousedown($event)", "mouseup": "onMouseup($event)", "focusin": "onFocusin($event)" } }, exportAs: ["si-datatable-interaction"], ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDatatableInteractionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ngx-datatable[siDatatableInteraction]',
+                    host: {
+                        tabindex: '0',
+                        '(keydown)': 'onKeydown($event)',
+                        '(mousedown)': 'onMousedown($event)',
+                        '(mouseup)': 'onMouseup($event)',
+                        '(focusin)': 'onFocusin($event)'
+                    },
                     exportAs: 'si-datatable-interaction'
                 }]
-        }], propDecorators: { datatableInteractionAutoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "datatableInteractionAutoSelect", required: false }] }], tabIndex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], onKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }], onMousedown: [{
-                type: HostListener,
-                args: ['mousedown', ['$event']]
-            }], onMouseup: [{
-                type: HostListener,
-                args: ['mouseup', ['$event']]
-            }], onFocusin: [{
-                type: HostListener,
-                args: ['focusin', ['$event']]
-            }] } });
+        }], propDecorators: { datatableInteractionAutoSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "datatableInteractionAutoSelect", required: false }] }] } });
 
 /**
  * Copyright (c) Siemens 2016 - 2026

package/fesm2022/siemens-element-ng-datatable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-datatable.mjs","sources":["../../../../projects/element-ng/datatable/si-datatable-interaction.directive.ts","../../../../projects/element-ng/datatable/si-datatable.module.ts","../../../../projects/element-ng/datatable/si-datatable-providers.ts","../../../../projects/element-ng/datatable/index.ts","../../../../projects/element-ng/datatable/siemens-element-ng-datatable.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Directive,\n  ElementRef,\n  HostBinding,\n  HostListener,\n  inject,\n  input,\n  isSignal,\n  OnDestroy,\n  OnInit,\n  Signal\n} from '@angular/core';\nimport { DatatableComponent } from '@siemens/ngx-datatable';\n\nconst unwrapSignalOrValue = <T>(valueOrSignal: T | Signal<T>): T => {\n  if (isSignal(valueOrSignal)) {\n    return valueOrSignal();\n  }\n  return valueOrSignal;\n};\n\n@Directive({\n  selector: 'ngx-datatable[siDatatableInteraction]',\n  exportAs: 'si-datatable-interaction'\n})\nexport class SiDatatableInteractionDirective implements OnDestroy, OnInit {\n  private table = inject(DatatableComponent, { self: true });\n  /**\n   * Automatically select every row or cell that is navigated trough.\n   * Is ignored unless `selectionType` is `single` or `cell`.\n   *\n   * @defaultValue false\n   */\n  readonly datatableInteractionAutoSelect = input(false, { transform: booleanAttribute });\n\n  @HostBinding('attr.tabindex') protected tabIndex = '0';\n\n  private element: HTMLElement = inject(ElementRef).nativeElement;\n  private tableBody?: HTMLElement;\n\n  private autoSelectTimeout: any;\n\n  private isMousedown = false;\n\n  @HostListener('keydown', ['$event'])\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown') {\n      const first =\n        unwrapSignalOrValue(this.table.selectionType) === 'cell'\n          ? this.element.querySelector(\n              '.datatable-row-wrapper > .datatable-body-row .datatable-body-cell'\n            )\n          : this.element.querySelector('.datatable-row-wrapper > .datatable-body-row');\n      if (first) {\n        (first as HTMLElement).focus();\n        event.preventDefault();\n      }\n    } else if (event.key === 'ArrowUp') {\n      const last =\n        unwrapSignalOrValue(this.table.selectionType) === 'cell'\n          ? this.element.querySelector(\n              '.datatable-row-wrapper:last-child > .datatable-body-row .datatable-body-cell'\n            )\n          : this.element.querySelector('.datatable-row-wrapper:last-child > .datatable-body-row');\n      if (last) {\n        (last as HTMLElement).focus();\n        event.preventDefault();\n      }\n    }\n  }\n\n  @HostListener('mousedown', ['$event'])\n  protected onMousedown(event: MouseEvent): void {\n    this.isMousedown = true;\n  }\n\n  @HostListener('mouseup', ['$event'])\n  protected onMouseup(event: MouseEvent): void {\n    this.isMousedown = false;\n  }\n\n  @HostListener('focusin', ['$event'])\n  protected onFocusin(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    if (!target) {\n      return;\n    }\n\n    clearTimeout(this.autoSelectTimeout);\n    // Re-select on every element\n\n    const selectionType = unwrapSignalOrValue(this.table.selectionType);\n    if (\n      !this.isMousedown &&\n      this.datatableInteractionAutoSelect() &&\n      (selectionType === 'single' || selectionType === 'cell')\n    ) {\n      const rowOrCell = target.closest(\n        selectionType === 'cell' ? 'datatable-body-cell' : 'datatable-body-row'\n      );\n      if (!rowOrCell) {\n        return;\n      }\n      this.autoSelectTimeout = setTimeout(() => {\n        rowOrCell.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13 }));\n      }, 100);\n    }\n    if (unwrapSignalOrValue(this.table.virtualization)) {\n      if (this.tableBody) {\n        const lastList =\n          selectionType === 'cell'\n            ? this.tableBody.querySelectorAll(\n                '.datatable-row-wrapper:last-child > .datatable-body-row .datatable-body-cell'\n              )\n            : this.tableBody.querySelectorAll(\n                '.datatable-row-wrapper:last-child > .datatable-body-row'\n              );\n        if (Array.from(lastList).includes(target)) {\n          this.tableBody.scrollTop = this.tableBody.scrollTop + lastList[0].clientHeight;\n        } else {\n          const firstList =\n            selectionType === 'cell'\n              ? this.tableBody.querySelectorAll(\n                  '.datatable-row-wrapper:first-child > .datatable-body-row .datatable-body-cell'\n                )\n              : this.tableBody.querySelectorAll(\n                  '.datatable-row-wrapper:first-child > .datatable-body-row'\n                );\n          if (Array.from(firstList).includes(target)) {\n            this.tableBody.scrollTop = this.tableBody.scrollTop - firstList[0].clientHeight;\n          }\n        }\n      }\n    }\n  }\n\n  ngOnInit(): void {\n    this.tableBody = this.element.querySelector('datatable-body') as HTMLElement;\n    if (this.tableBody) {\n      this.tableBody.tabIndex = -1;\n    }\n  }\n\n  ngOnDestroy(): void {\n    clearTimeout(this.autoSelectTimeout);\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiDatatableInteractionDirective } from './si-datatable-interaction.directive';\n\n@NgModule({\n  imports: [SiDatatableInteractionDirective],\n  exports: [SiDatatableInteractionDirective]\n})\nexport class SiDatatableModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Provider } from '@angular/core';\n\n// Copy of NgxDatatableConfig from @siemens/ngx-datatable to maintain compatibility\n// with v22 and earlier where `NgxDatatableConfig` is not defined.\n// See https://github.com/siemens/ngx-datatable/blob/main/projects/ngx-datatable/src/lib/ngx-datatable.config.ts#L50.\n/** Interface for messages to override default table texts. */\ninterface NgxDatatableMessages {\n  /** Message to show when the array is present but empty */\n  emptyMessage: string;\n  /** Footer total message */\n  totalMessage: string;\n  /** Footer selected message */\n  selectedMessage: string;\n  /** Pager screen reader message for the first page button */\n  ariaFirstPageMessage: string;\n  /**\n   * Pager screen reader message for the n-th page button.\n   * It will be rendered as: `{{ariaPageNMessage}} {{n}}`.\n   */\n  ariaPageNMessage: string;\n  /** Pager screen reader message for the previous page button */\n  ariaPreviousPageMessage: string;\n  /** Pager screen reader message for the next page button */\n  ariaNextPageMessage: string;\n  /** Pager screen reader message for the last page button */\n  ariaLastPageMessage: string;\n  /** Row checkbox aria label */\n  ariaRowCheckboxMessage: string;\n  /** Header checkbox aria label */\n  ariaHeaderCheckboxMessage: string;\n  /** Group header checkbox aria label */\n  ariaGroupHeaderCheckboxMessage: string;\n}\n/** CSS classes for icons that override the default table icons. */\ninterface NgxDatatableCssClasses {\n  sortAscending: string;\n  sortDescending: string;\n  sortUnset: string;\n  pagerLeftArrow: string;\n  pagerRightArrow: string;\n  pagerPrevious: string;\n  pagerNext: string;\n  treeStatusLoading: string;\n  treeStatusExpanded: string;\n  treeStatusCollapsed: string;\n}\n/**\n * Interface definition for ngx-datatable global configuration\n */\nexport interface NgxDatatableConfig {\n  messages?: NgxDatatableMessages;\n  cssClasses?: NgxDatatableCssClasses;\n  headerHeight?: number;\n  footerHeight?: number;\n  rowHeight?: number;\n  defaultColumnWidth?: number;\n}\n\n/**\n * @deprecated Use NgxDatatableConfig from \\@siemens/ngx-datatable instead from v23 onward.\n *\n * Configuration interface for the upstream \\@siemens/ngx-datatable project.\n * See https://github.com/siemens/ngx-datatable/blob/main/projects/ngx-datatable/src/lib/ngx-datatable.config.ts#L50.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface INgxDatatableConfig extends NgxDatatableConfig {}\n\n/**\n * Extends the original NgxDatatableConfig with additional properties and makes all fields required to maintain compatibility.\n */\ninterface SiDatatableConfig extends NgxDatatableConfig {\n  cssClasses: Exclude<NgxDatatableConfig['cssClasses'], undefined>;\n  headerHeight: number;\n  footerHeight: number;\n  rowHeight: number;\n  rowHeightSmall: number;\n  rowHeightExtraSmall: number;\n  rowHeightTiny: number;\n  summaryHeight: number;\n}\n\nexport const SI_DATATABLE_CONFIG: SiDatatableConfig = {\n  cssClasses: {\n    sortAscending: 'icon element-sort-up text-primary',\n    sortDescending: 'icon element-sort-down text-primary',\n    pagerLeftArrow: 'icon element-left-2 flip-rtl',\n    pagerRightArrow: 'icon element-right-2 flip-rtl',\n    pagerPrevious: 'icon element-double-left flip-rtl',\n    pagerNext: 'icon element-double-right flip-rtl',\n    sortUnset: '',\n    treeStatusLoading: '',\n    treeStatusExpanded: 'icon element-down-2 flip-rtl',\n    treeStatusCollapsed: 'icon element-right-2 flip-rtl'\n  },\n  headerHeight: 44, // 40px actual-height + 4px border-bottom\n  footerHeight: 40,\n  rowHeight: 64,\n  rowHeightSmall: 48,\n  rowHeightExtraSmall: 32,\n  rowHeightTiny: 24,\n  summaryHeight: 32\n};\n\n/**\n * Provides element configuration for the \\@siemens/ngx-datatable.\n *\n *  @param configOverrides - overrides that will be merged with the element configuration.\n */\nexport const provideSiDatatableConfig = (configOverrides?: NgxDatatableConfig): Provider => ({\n  provide: 'configuration',\n  useValue: { ...SI_DATATABLE_CONFIG, ...configOverrides }\n});\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-datatable-interaction.directive';\nexport * from './si-datatable.module';\nexport * from './si-datatable-providers';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"siemens-element-ng-datatable.mjs","sources":["../../../../projects/element-ng/datatable/si-datatable-interaction.directive.ts","../../../../projects/element-ng/datatable/si-datatable.module.ts","../../../../projects/element-ng/datatable/si-datatable-providers.ts","../../../../projects/element-ng/datatable/index.ts","../../../../projects/element-ng/datatable/siemens-element-ng-datatable.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n  booleanAttribute,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  isSignal,\n  OnDestroy,\n  OnInit,\n  Signal\n} from '@angular/core';\nimport { DatatableComponent } from '@siemens/ngx-datatable';\n\nconst unwrapSignalOrValue = <T>(valueOrSignal: T | Signal<T>): T => {\n  if (isSignal(valueOrSignal)) {\n    return valueOrSignal();\n  }\n  return valueOrSignal;\n};\n\n@Directive({\n  selector: 'ngx-datatable[siDatatableInteraction]',\n  host: {\n    tabindex: '0',\n    '(keydown)': 'onKeydown($event)',\n    '(mousedown)': 'onMousedown($event)',\n    '(mouseup)': 'onMouseup($event)',\n    '(focusin)': 'onFocusin($event)'\n  },\n  exportAs: 'si-datatable-interaction'\n})\nexport class SiDatatableInteractionDirective implements OnDestroy, OnInit {\n  private table = inject(DatatableComponent, { self: true });\n  /**\n   * Automatically select every row or cell that is navigated trough.\n   * Is ignored unless `selectionType` is `single` or `cell`.\n   *\n   * @defaultValue false\n   */\n  readonly datatableInteractionAutoSelect = input(false, { transform: booleanAttribute });\n\n  private element: HTMLElement = inject(ElementRef).nativeElement;\n  private tableBody?: HTMLElement;\n\n  private autoSelectTimeout: any;\n\n  private isMousedown = false;\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowDown') {\n      const first =\n        unwrapSignalOrValue(this.table.selectionType) === 'cell'\n          ? this.element.querySelector(\n              '.datatable-row-wrapper > .datatable-body-row .datatable-body-cell'\n            )\n          : this.element.querySelector('.datatable-row-wrapper > .datatable-body-row');\n      if (first) {\n        (first as HTMLElement).focus();\n        event.preventDefault();\n      }\n    } else if (event.key === 'ArrowUp') {\n      const last =\n        unwrapSignalOrValue(this.table.selectionType) === 'cell'\n          ? this.element.querySelector(\n              '.datatable-row-wrapper:last-child > .datatable-body-row .datatable-body-cell'\n            )\n          : this.element.querySelector('.datatable-row-wrapper:last-child > .datatable-body-row');\n      if (last) {\n        (last as HTMLElement).focus();\n        event.preventDefault();\n      }\n    }\n  }\n\n  protected onMousedown(event: MouseEvent): void {\n    this.isMousedown = true;\n  }\n\n  protected onMouseup(event: MouseEvent): void {\n    this.isMousedown = false;\n  }\n\n  protected onFocusin(event: FocusEvent): void {\n    const target = event.target as HTMLElement;\n    if (!target) {\n      return;\n    }\n\n    clearTimeout(this.autoSelectTimeout);\n    // Re-select on every element\n\n    const selectionType = unwrapSignalOrValue(this.table.selectionType);\n    if (\n      !this.isMousedown &&\n      this.datatableInteractionAutoSelect() &&\n      (selectionType === 'single' || selectionType === 'cell')\n    ) {\n      const rowOrCell = target.closest(\n        selectionType === 'cell' ? 'datatable-body-cell' : 'datatable-body-row'\n      );\n      if (!rowOrCell) {\n        return;\n      }\n      this.autoSelectTimeout = setTimeout(() => {\n        rowOrCell.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', keyCode: 13 }));\n      }, 100);\n    }\n    if (unwrapSignalOrValue(this.table.virtualization)) {\n      if (this.tableBody) {\n        const lastList =\n          selectionType === 'cell'\n            ? this.tableBody.querySelectorAll(\n                '.datatable-row-wrapper:last-child > .datatable-body-row .datatable-body-cell'\n              )\n            : this.tableBody.querySelectorAll(\n                '.datatable-row-wrapper:last-child > .datatable-body-row'\n              );\n        if (Array.from(lastList).includes(target)) {\n          this.tableBody.scrollTop = this.tableBody.scrollTop + lastList[0].clientHeight;\n        } else {\n          const firstList =\n            selectionType === 'cell'\n              ? this.tableBody.querySelectorAll(\n                  '.datatable-row-wrapper:first-child > .datatable-body-row .datatable-body-cell'\n                )\n              : this.tableBody.querySelectorAll(\n                  '.datatable-row-wrapper:first-child > .datatable-body-row'\n                );\n          if (Array.from(firstList).includes(target)) {\n            this.tableBody.scrollTop = this.tableBody.scrollTop - firstList[0].clientHeight;\n          }\n        }\n      }\n    }\n  }\n\n  ngOnInit(): void {\n    this.tableBody = this.element.querySelector('datatable-body') as HTMLElement;\n    if (this.tableBody) {\n      this.tableBody.tabIndex = -1;\n    }\n  }\n\n  ngOnDestroy(): void {\n    clearTimeout(this.autoSelectTimeout);\n  }\n}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiDatatableInteractionDirective } from './si-datatable-interaction.directive';\n\n@NgModule({\n  imports: [SiDatatableInteractionDirective],\n  exports: [SiDatatableInteractionDirective]\n})\nexport class SiDatatableModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { Provider } from '@angular/core';\n\n// Copy of NgxDatatableConfig from @siemens/ngx-datatable to maintain compatibility\n// with v22 and earlier where `NgxDatatableConfig` is not defined.\n// See https://github.com/siemens/ngx-datatable/blob/main/projects/ngx-datatable/src/lib/ngx-datatable.config.ts#L50.\n/** Interface for messages to override default table texts. */\ninterface NgxDatatableMessages {\n  /** Message to show when the array is present but empty */\n  emptyMessage: string;\n  /** Footer total message */\n  totalMessage: string;\n  /** Footer selected message */\n  selectedMessage: string;\n  /** Pager screen reader message for the first page button */\n  ariaFirstPageMessage: string;\n  /**\n   * Pager screen reader message for the n-th page button.\n   * It will be rendered as: `{{ariaPageNMessage}} {{n}}`.\n   */\n  ariaPageNMessage: string;\n  /** Pager screen reader message for the previous page button */\n  ariaPreviousPageMessage: string;\n  /** Pager screen reader message for the next page button */\n  ariaNextPageMessage: string;\n  /** Pager screen reader message for the last page button */\n  ariaLastPageMessage: string;\n  /** Row checkbox aria label */\n  ariaRowCheckboxMessage: string;\n  /** Header checkbox aria label */\n  ariaHeaderCheckboxMessage: string;\n  /** Group header checkbox aria label */\n  ariaGroupHeaderCheckboxMessage: string;\n}\n/** CSS classes for icons that override the default table icons. */\ninterface NgxDatatableCssClasses {\n  sortAscending: string;\n  sortDescending: string;\n  sortUnset: string;\n  pagerLeftArrow: string;\n  pagerRightArrow: string;\n  pagerPrevious: string;\n  pagerNext: string;\n  treeStatusLoading: string;\n  treeStatusExpanded: string;\n  treeStatusCollapsed: string;\n}\n/**\n * Interface definition for ngx-datatable global configuration\n */\nexport interface NgxDatatableConfig {\n  messages?: NgxDatatableMessages;\n  cssClasses?: NgxDatatableCssClasses;\n  headerHeight?: number;\n  footerHeight?: number;\n  rowHeight?: number;\n  defaultColumnWidth?: number;\n}\n\n/**\n * @deprecated Use NgxDatatableConfig from \\@siemens/ngx-datatable instead from v23 onward.\n *\n * Configuration interface for the upstream \\@siemens/ngx-datatable project.\n * See https://github.com/siemens/ngx-datatable/blob/main/projects/ngx-datatable/src/lib/ngx-datatable.config.ts#L50.\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nexport interface INgxDatatableConfig extends NgxDatatableConfig {}\n\n/**\n * Extends the original NgxDatatableConfig with additional properties and makes all fields required to maintain compatibility.\n */\ninterface SiDatatableConfig extends NgxDatatableConfig {\n  cssClasses: Exclude<NgxDatatableConfig['cssClasses'], undefined>;\n  headerHeight: number;\n  footerHeight: number;\n  rowHeight: number;\n  rowHeightSmall: number;\n  rowHeightExtraSmall: number;\n  rowHeightTiny: number;\n  summaryHeight: number;\n}\n\nexport const SI_DATATABLE_CONFIG: SiDatatableConfig = {\n  cssClasses: {\n    sortAscending: 'icon element-sort-up text-primary',\n    sortDescending: 'icon element-sort-down text-primary',\n    pagerLeftArrow: 'icon element-left-2 flip-rtl',\n    pagerRightArrow: 'icon element-right-2 flip-rtl',\n    pagerPrevious: 'icon element-double-left flip-rtl',\n    pagerNext: 'icon element-double-right flip-rtl',\n    sortUnset: '',\n    treeStatusLoading: '',\n    treeStatusExpanded: 'icon element-down-2 flip-rtl',\n    treeStatusCollapsed: 'icon element-right-2 flip-rtl'\n  },\n  headerHeight: 44, // 40px actual-height + 4px border-bottom\n  footerHeight: 40,\n  rowHeight: 64,\n  rowHeightSmall: 48,\n  rowHeightExtraSmall: 32,\n  rowHeightTiny: 24,\n  summaryHeight: 32\n};\n\n/**\n * Provides element configuration for the \\@siemens/ngx-datatable.\n *\n *  @param configOverrides - overrides that will be merged with the element configuration.\n */\nexport const provideSiDatatableConfig = (configOverrides?: NgxDatatableConfig): Provider => ({\n  provide: 'configuration',\n  useValue: { ...SI_DATATABLE_CONFIG, ...configOverrides }\n});\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './si-datatable-interaction.directive';\nexport * from './si-datatable.module';\nexport * from './si-datatable-providers';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/siemens-element-ng-date-range-filter.mjs

@@ -617,7 +617,7 @@ class SiDateRangeFilterComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDateRangeFilterComponent, isStandalone: true, selector: "si-date-range-filter", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: true, transformFunction: null }, presetList: { classPropertyName: "presetList", publicName: "presetList", isSignal: true, isRequired: false, transformFunction: null }, presetSearch: { classPropertyName: "presetSearch", publicName: "presetSearch", isSignal: true, isRequired: false, transformFunction: null }, enableTimeSelection: { classPropertyName: "enableTimeSelection", publicName: "enableTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, basicMode: { classPropertyName: "basicMode", publicName: "basicMode", isSignal: true, isRequired: false, transformFunction: null }, reverseInputFields: { classPropertyName: "reverseInputFields", publicName: "reverseInputFields", isSignal: true, isRequired: false, transformFunction: null }, showApplyButton: { classPropertyName: "showApplyButton", publicName: "showApplyButton", isSignal: true, isRequired: false, transformFunction: null }, hideAdvancedMode: { classPropertyName: "hideAdvancedMode", publicName: "hideAdvancedMode", isSignal: true, isRequired: false, transformFunction: null }, refLabel: { classPropertyName: "refLabel", publicName: "refLabel", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeLabel: { classPropertyName: "rangeLabel", publicName: "rangeLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, nowLabel: { classPropertyName: "nowLabel", publicName: "nowLabel", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null }, datePlaceholder: { classPropertyName: "datePlaceholder", publicName: "datePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, beforeLabel: { classPropertyName: "beforeLabel", publicName: "beforeLabel", isSignal: true, isRequired: false, transformFunction: null }, afterLabel: { classPropertyName: "afterLabel", publicName: "afterLabel", isSignal: true, isRequired: false, transformFunction: null }, withinLabel: { classPropertyName: "withinLabel", publicName: "withinLabel", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, unitLabel: { classPropertyName: "unitLabel", publicName: "unitLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, advancedLabel: { classPropertyName: "advancedLabel", publicName: "advancedLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeEndDateMissingLabel: { classPropertyName: "rangeEndDateMissingLabel", publicName: "rangeEndDateMissingLabel", isSignal: true, isRequired: false, transformFunction: null }, datepickerConfig: { classPropertyName: "datepickerConfig", publicName: "datepickerConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applyClicked: "applyClicked" }, host: { properties: { "class.mobile": "smallScreen" } }, usesOnChanges: true, ngImport: i0, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile elevation-2 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          ?\n        }\n      } @else {\n        @let range = dateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          {{ rangeEndDateMissingLabel() | translate }}\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul class=\"overflow-auto\" cdkListbox [attr.aria-label]=\"presetLabel() | translate\">\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li\n          class=\"preset-item focus-inside px-8 py-5\"\n          [cdkOption]=\"item.label\"\n          (click)=\"selectPresetItem($event, item)\"\n          (keydown.enter)=\"selectPresetItem($event, item)\"\n        >\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-8\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-4 text-nowrap form-check\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [attr.aria-label]=\"dateLabel() | translate\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--element-base-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--element-ui-4)}.main-form{inline-size:348px;grid-area:main}.advanced-form{block-size:392px}.preset-select{display:flex;inline-size:200px;flex-direction:column;grid-area:preset;background:var(--element-base-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.1428571429}.preset-item:hover{background:var(--element-base-1-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"], dependencies: [{ kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calenderWeekLabel", "calendarWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiRelativeDateComponent, selector: "si-relative-date", inputs: ["value", "enableTimeSelection", "valueLabel", "unitLabel"], outputs: ["valueChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: SiDateRangeFilterComponent, isStandalone: true, selector: "si-date-range-filter", inputs: { range: { classPropertyName: "range", publicName: "range", isSignal: true, isRequired: true, transformFunction: null }, presetList: { classPropertyName: "presetList", publicName: "presetList", isSignal: true, isRequired: false, transformFunction: null }, presetSearch: { classPropertyName: "presetSearch", publicName: "presetSearch", isSignal: true, isRequired: false, transformFunction: null }, enableTimeSelection: { classPropertyName: "enableTimeSelection", publicName: "enableTimeSelection", isSignal: true, isRequired: false, transformFunction: null }, basicMode: { classPropertyName: "basicMode", publicName: "basicMode", isSignal: true, isRequired: false, transformFunction: null }, reverseInputFields: { classPropertyName: "reverseInputFields", publicName: "reverseInputFields", isSignal: true, isRequired: false, transformFunction: null }, showApplyButton: { classPropertyName: "showApplyButton", publicName: "showApplyButton", isSignal: true, isRequired: false, transformFunction: null }, hideAdvancedMode: { classPropertyName: "hideAdvancedMode", publicName: "hideAdvancedMode", isSignal: true, isRequired: false, transformFunction: null }, refLabel: { classPropertyName: "refLabel", publicName: "refLabel", isSignal: true, isRequired: false, transformFunction: null }, fromLabel: { classPropertyName: "fromLabel", publicName: "fromLabel", isSignal: true, isRequired: false, transformFunction: null }, toLabel: { classPropertyName: "toLabel", publicName: "toLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeLabel: { classPropertyName: "rangeLabel", publicName: "rangeLabel", isSignal: true, isRequired: false, transformFunction: null }, todayLabel: { classPropertyName: "todayLabel", publicName: "todayLabel", isSignal: true, isRequired: false, transformFunction: null }, nowLabel: { classPropertyName: "nowLabel", publicName: "nowLabel", isSignal: true, isRequired: false, transformFunction: null }, dateLabel: { classPropertyName: "dateLabel", publicName: "dateLabel", isSignal: true, isRequired: false, transformFunction: null }, previewLabel: { classPropertyName: "previewLabel", publicName: "previewLabel", isSignal: true, isRequired: false, transformFunction: null }, datePlaceholder: { classPropertyName: "datePlaceholder", publicName: "datePlaceholder", isSignal: true, isRequired: false, transformFunction: null }, beforeLabel: { classPropertyName: "beforeLabel", publicName: "beforeLabel", isSignal: true, isRequired: false, transformFunction: null }, afterLabel: { classPropertyName: "afterLabel", publicName: "afterLabel", isSignal: true, isRequired: false, transformFunction: null }, withinLabel: { classPropertyName: "withinLabel", publicName: "withinLabel", isSignal: true, isRequired: false, transformFunction: null }, valueLabel: { classPropertyName: "valueLabel", publicName: "valueLabel", isSignal: true, isRequired: false, transformFunction: null }, unitLabel: { classPropertyName: "unitLabel", publicName: "unitLabel", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, presetLabel: { classPropertyName: "presetLabel", publicName: "presetLabel", isSignal: true, isRequired: false, transformFunction: null }, advancedLabel: { classPropertyName: "advancedLabel", publicName: "advancedLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, rangeEndDateMissingLabel: { classPropertyName: "rangeEndDateMissingLabel", publicName: "rangeEndDateMissingLabel", isSignal: true, isRequired: false, transformFunction: null }, datepickerConfig: { classPropertyName: "datepickerConfig", publicName: "datepickerConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applyClicked: "applyClicked" }, host: { properties: { "class.mobile": "smallScreen" } }, usesOnChanges: true, ngImport: i0, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile elevation-2 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          ?\n        }\n      } @else {\n        @let range = dateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          {{ rangeEndDateMissingLabel() | translate }}\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul class=\"overflow-auto\" cdkListbox [attr.aria-label]=\"presetLabel() | translate\">\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li\n          class=\"preset-item focus-inside px-8 py-5\"\n          [cdkOption]=\"item.label\"\n          (click)=\"selectPresetItem($event, item)\"\n          (keydown.enter)=\"selectPresetItem($event, item)\"\n        >\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-8\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-4 text-nowrap form-check\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [attr.aria-label]=\"dateLabel() | translate\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--element-base-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--element-ui-4)}.main-form{inline-size:calc(16rem + 64px);grid-area:main}.advanced-form{block-size:calc(16rem + 133px)}.preset-select{display:flex;inline-size:calc(9.5rem + 48px);flex-direction:column;grid-area:preset;background:var(--element-base-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.1428571429}.preset-item:hover{background:var(--element-base-1-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"], dependencies: [{ kind: "directive", type: CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "directive", type: CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: SiCalendarButtonComponent, selector: "si-calendar-button", inputs: ["ariaLabel"] }, { kind: "component", type: SiDatepickerComponent, selector: "si-datepicker", inputs: ["focusedDate", "date", "dateRange", "dateRangeRole", "initialFocus", "disabledTime", "config", "previousLabel", "nextLabel", "calenderWeekLabel", "calendarWeekLabel", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiRelativeDateComponent, selector: "si-relative-date", inputs: ["value", "enableTimeSelection", "valueLabel", "unitLabel"], outputs: ["valueChange"] }, { kind: "component", type: SiSearchBarComponent, selector: "si-search-bar", inputs: ["debounceTime", "prohibitedCharacters", "placeholder", "showIcon", "tabbable", "value", "readonly", "colorVariant", "disabled", "maxlength", "clearButtonAriaLabel"], outputs: ["searchChange"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: SiDateRangeFilterComponent, decorators: [{
             type: Component,
@@ -639,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
                         SiTranslatePipe
                     ], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         '[class.mobile]': 'smallScreen'
-                    }, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile elevation-2 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          ?\n        }\n      } @else {\n        @let range = dateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          {{ rangeEndDateMissingLabel() | translate }}\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul class=\"overflow-auto\" cdkListbox [attr.aria-label]=\"presetLabel() | translate\">\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li\n          class=\"preset-item focus-inside px-8 py-5\"\n          [cdkOption]=\"item.label\"\n          (click)=\"selectPresetItem($event, item)\"\n          (keydown.enter)=\"selectPresetItem($event, item)\"\n        >\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-8\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-4 text-nowrap form-check\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [attr.aria-label]=\"dateLabel() | translate\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--element-base-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--element-ui-4)}.main-form{inline-size:348px;grid-area:main}.advanced-form{block-size:392px}.preset-select{display:flex;inline-size:200px;flex-direction:column;grid-area:preset;background:var(--element-base-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.1428571429}.preset-item:hover{background:var(--element-base-1-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
+                    }, template: "@if (presetList()?.length) {\n  @if (this.smallScreen) {\n    <div class=\"presets d-flex\">\n      <button\n        #presetTrigger=\"cdkOverlayOrigin\"\n        type=\"button\"\n        class=\"btn btn-tertiary dropdown-toggle m-5 flex-grow-1\"\n        cdkOverlayOrigin\n        [class.show]=\"presetOpen()\"\n        [attr.aria-expanded]=\"presetOpen()\"\n        (click)=\"presetOpen.set(true)\"\n      >\n        {{ presetLabel() | translate }}\n        <si-icon class=\"dropdown-caret icon\" [icon]=\"icons.elementDown2\" />\n      </button>\n      <ng-template\n        cdkConnectedOverlay\n        cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n        cdkConnectedOverlayHasBackdrop\n        [cdkConnectedOverlayOpen]=\"presetOpen()\"\n        [cdkConnectedOverlayOrigin]=\"presetTrigger\"\n        [cdkConnectedOverlayMinWidth]=\"\n          presetTrigger.elementRef.nativeElement?.getBoundingClientRect().width\n        \"\n        (backdropClick)=\"presetOpen.set(false)\"\n        (detach)=\"presetOpen.set(false)\"\n      >\n        <div\n          cdkTrapFocus\n          class=\"preset-select mobile elevation-2 rounded-2 w-100\"\n          cdkTrapFocusAutoCapture\n        >\n          <ng-container *ngTemplateOutlet=\"presets\" />\n        </div>\n      </ng-template>\n    </div>\n  } @else {\n    <div class=\"preset-select border-end\">\n      <ng-container *ngTemplateOutlet=\"presets\" />\n    </div>\n  }\n}\n<form class=\"main-form d-flex flex-column flex-fill\">\n  @if (advancedMode() || inputMode()) {\n    <div class=\"advanced-form px-6 py-4\">\n      @if (!reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n\n      <div class=\"mb-8\">\n        @if (point2Mode() === 'date') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Date\" />\n        } @else if (point2Mode() === 'duration') {\n          <ng-container *ngTemplateOutlet=\"formPoint2Duration\" />\n        }\n      </div>\n\n      @if (reverseInputFields()) {\n        <ng-container *ngTemplateOutlet=\"formReferencePoint\" />\n      }\n    </div>\n  } @else {\n    <si-datepicker\n      [config]=\"dateRangeConfig()\"\n      [focusedDate]=\"focusedDate()\"\n      [dateRange]=\"dateRange()\"\n      (dateRangeChange)=\"updateFromDateRange($event)\"\n    />\n  }\n\n  @if (advancedMode() || !hideAdvancedMode()) {\n    <label class=\"form-switch form-check ms-6\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"advancedMode\"\n        role=\"switch\"\n        [(ngModel)]=\"advancedMode\"\n        (ngModelChange)=\"updateOnModeChange()\"\n      />\n      <span class=\"form-check-label\">{{ advancedLabel() | translate }}</span>\n    </label>\n  }\n\n  <div class=\"mt-4 mb-6 ms-6\">\n    {{ previewLabel() | translate }}:\n    <span class=\"preview\">\n      @if (advancedMode()) {\n        @let calculated = calculatedRange();\n        @if (calculated.valid) {\n          {{ calculated.start | date: pipeFormat() }} -\n          {{ calculated.end | date: pipeFormat() }}\n        } @else {\n          ?\n        }\n      } @else {\n        @let range = dateRange();\n        {{ range.start | date: pipeFormat() }} -\n        @if (range.end) {\n          {{ range.end | date: pipeFormat() }}\n        } @else {\n          {{ rangeEndDateMissingLabel() | translate }}\n        }\n      }\n    </span>\n  </div>\n</form>\n\n@if (showApplyButton()) {\n  <div class=\"footer border-top px-6 py-5 d-flex\">\n    <button type=\"button\" class=\"btn btn-primary ms-auto\" (click)=\"applyClicked.emit()\">\n      {{ applyLabel() | translate }}\n    </button>\n  </div>\n}\n<ng-template #presets>\n  @if (presetSearch()) {\n    <si-search-bar\n      colorVariant=\"base-0\"\n      class=\"mx-6 mt-5 mb-6\"\n      [placeholder]=\"searchLabel() | translate\"\n      [showIcon]=\"true\"\n      [(ngModel)]=\"presetFilter\"\n    />\n  }\n  <ul class=\"overflow-auto\" cdkListbox [attr.aria-label]=\"presetLabel() | translate\">\n    @for (item of filteredPresetList(); track $index) {\n      @if (item.label | translate | presetMatchFilter: presetFilter()) {\n        <li\n          class=\"preset-item focus-inside px-8 py-5\"\n          [cdkOption]=\"item.label\"\n          (click)=\"selectPresetItem($event, item)\"\n          (keydown.enter)=\"selectPresetItem($event, item)\"\n        >\n          {{ item.label | translate }}\n        </li>\n      }\n    }\n  </ul>\n</ng-template>\n<ng-template #formReferencePoint>\n  <div class=\"mb-8\">\n    <label class=\"d-block\">\n      <span class=\"form-label\">{{\n        (advancedMode() ? refLabel() : reverseInputFields() ? toLabel() : fromLabel()) | translate\n      }}</span>\n      <si-calendar-button class=\"w-100\">\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          name=\"point1\"\n          required\n          siDatepicker\n          [siDatepickerConfig]=\"datepickerConfigInternal()\"\n          [disabled]=\"point1Now()\"\n          [placeholder]=\"datePlaceholder() | translate\"\n          [(ngModel)]=\"point1date\"\n          (ngModelChange)=\"point1Changed()\"\n        />\n      </si-calendar-button>\n    </label>\n    <label class=\"ms-4 mt-4 text-nowrap form-check\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        name=\"point1now\"\n        [(ngModel)]=\"point1Now\"\n        (ngModelChange)=\"point1Changed()\"\n      />\n      <span class=\"form-check-label\">{{\n        (enableTimeSelection() ? nowLabel() : todayLabel()) | translate\n      }}</span>\n    </label>\n  </div>\n</ng-template>\n\n<ng-template #formPoint2Date>\n  <label class=\"d-block mb-4 bp-9\">\n    <span class=\"form-label\">{{\n      (reverseInputFields() ? fromLabel() : toLabel()) | translate\n    }}</span>\n    <si-calendar-button class=\"w-100\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        name=\"point2\"\n        required\n        siDatepicker\n        [siDatepickerConfig]=\"datepickerConfigInternal()\"\n        [attr.aria-label]=\"dateLabel() | translate\"\n        [placeholder]=\"datePlaceholder() | translate\"\n        [(ngModel)]=\"point2date\"\n        (ngModelChange)=\"point2Changed()\"\n      />\n    </si-calendar-button>\n  </label>\n</ng-template>\n\n<ng-template #formPoint2Duration>\n  <div>\n    <span class=\"form-label\">{{ rangeLabel() | translate }}</span>\n    <si-relative-date\n      class=\"d-block mb-4\"\n      [unitLabel]=\"unitLabel() | translate\"\n      [valueLabel]=\"valueLabel() | translate\"\n      [enableTimeSelection]=\"enableTimeSelection()\"\n      [(value)]=\"point2offset\"\n      (valueChange)=\"point2Changed()\"\n    />\n    <div class=\"range-type ms-4\">\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"before\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ beforeLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"after\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ afterLabel() | translate }}\n        </span>\n      </label>\n      <label class=\"form-check form-check-inline\">\n        <input\n          type=\"radio\"\n          class=\"form-check-input\"\n          value=\"within\"\n          name=\"point2range\"\n          [(ngModel)]=\"point2range\"\n          (ngModelChange)=\"point2Changed()\"\n        />\n        <span class=\"form-check-label\">\n          {{ withinLabel() | translate }}\n        </span>\n      </label>\n    </div>\n  </div>\n</ng-template>\n", styles: [":host{display:inline-grid;background:var(--element-base-1);grid-template-areas:\"preset main\" \"footer footer\"}:host.mobile{grid-template-areas:\"preset\" \"main\" \"footer\";justify-items:stretch}:host.mobile .presets{border-block-end:1px solid var(--element-ui-4)}.main-form{inline-size:calc(16rem + 64px);grid-area:main}.advanced-form{block-size:calc(16rem + 133px)}.preset-select{display:flex;inline-size:calc(9.5rem + 48px);flex-direction:column;grid-area:preset;background:var(--element-base-1)}.preset-select.mobile{max-block-size:346px;inline-size:unset}ul{flex:1 1 auto;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.1428571429}.preset-item:hover{background:var(--element-base-1-hover)}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
         }], propDecorators: { range: [{ type: i0.Input, args: [{ isSignal: true, alias: "range", required: true }] }, { type: i0.Output, args: ["rangeChange"] }], presetList: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetList", required: false }] }], presetSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetSearch", required: false }] }], enableTimeSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTimeSelection", required: false }] }], basicMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "basicMode", required: false }] }], reverseInputFields: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseInputFields", required: false }] }], showApplyButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showApplyButton", required: false }] }], hideAdvancedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideAdvancedMode", required: false }] }], refLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "refLabel", required: false }] }], fromLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "fromLabel", required: false }] }], toLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toLabel", required: false }] }], rangeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeLabel", required: false }] }], todayLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "todayLabel", required: false }] }], nowLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nowLabel", required: false }] }], dateLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateLabel", required: false }] }], previewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewLabel", required: false }] }], datePlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "datePlaceholder", required: false }] }], beforeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "beforeLabel", required: false }] }], afterLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "afterLabel", required: false }] }], withinLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "withinLabel", required: false }] }], valueLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueLabel", required: false }] }], unitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "unitLabel", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], presetLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "presetLabel", required: false }] }], advancedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "advancedLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], rangeEndDateMissingLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeEndDateMissingLabel", required: false }] }], applyClicked: [{ type: i0.Output, args: ["applyClicked"] }], datepickerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "datepickerConfig", required: false }] }] } });
 
 /**