@siemens/element-ng 47.5.0 → 47.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"siemens-element-ng-breadcrumb.mjs","sources":["../../../../projects/element-ng/breadcrumb/si-breadcrumb-item-template.directive.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.html","../../../../projects/element-ng/breadcrumb/si-breadcrumb.module.ts","../../../../projects/element-ng/breadcrumb/index.ts","../../../../projects/element-ng/breadcrumb/siemens-element-ng-breadcrumb.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\n\nimport { EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\n\n@Directive({ selector: '[siBreadcrumbItemTemplate]' })\nexport class SiBreadcrumbItemTemplateDirective {\n  static ngTemplateContextGuard(\n    directive: SiBreadcrumbItemTemplateDirective,\n    context: unknown\n  ): context is { item: EnumeratedBreadcrumbItem; title?: string } {\n    return true;\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport {\n  addIcons,\n  elementBreadcrumbRoot,\n  elementRight2,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';\nimport { SiTranslateModule, SiTranslateService } from '@siemens/element-translate-ng/translate';\nimport { merge, of, Subscription } from 'rxjs';\nimport { switchMap } from 'rxjs/operators';\n\nimport { BreadcrumbItem, EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\nimport { SiBreadcrumbItemTemplateDirective } from './si-breadcrumb-item-template.directive';\n\n/**\n * Defines how many items should be displayed at the end of the breadcrumb if possible.\n */\nconst NUMBER_OF_SHOWN_ITEMS_AT_END = 2;\n\n/**\n * Defines how long a display item can be without it being shortened.\n * Cannot be lower than 4.\n * If this is 0, titles will not be shortened\n */\nconst ITEM_MAX_LENGTH = 30;\n\n/**\n * Defines how many characters of an item are always displayed in the beginning.\n * Must be at least 2 less than ITEM_MAX_LENGTH\n */\nconst ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING = 10;\n\n/**\n * Defines the width of the root icon in pixels.\n */\nconst ROOT_ICON_WIDTH = 24;\n\nlet controlIdCounter = 1;\n\n@Component({\n  selector: 'si-breadcrumb',\n  templateUrl: './si-breadcrumb.component.html',\n  styleUrl: './si-breadcrumb.component.scss',\n  imports: [\n    NgTemplateOutlet,\n    SiIconNextComponent,\n    SiLinkDirective,\n    SiResizeObserverDirective,\n    SiTranslateModule,\n    SiBreadcrumbItemTemplateDirective\n  ]\n})\nexport class SiBreadcrumbComponent implements OnChanges, OnDestroy {\n  /** Array of breadcrumb items. */\n  readonly items = input.required<BreadcrumbItem[]>();\n  /**\n   * Shows the \"root\" route as the provided title string instead of an icon.\n   *\n   * @defaultValue false\n   */\n  readonly showRootAsText = input(false, { transform: booleanAttribute });\n  /**\n   * Aria label for the main breadcrumb navigation. Needed for a11y.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_BREADCRUMB:Breadcrumbs`\n   * ```\n   */\n  readonly ariaLabel = input($localize`:@@SI_BREADCRUMB:Breadcrumbs`);\n\n  private translationSubscription?: Subscription;\n  private itemsProcessed = false;\n  private numberOfItems = 0;\n\n  protected itemsShown: EnumeratedBreadcrumbItem[] = [];\n  protected itemsHidden: EnumeratedBreadcrumbItem[] = [];\n  protected breadcrumbShortened = false;\n  protected ellipsesLevel = 0;\n  // Record to allow for -1 (root).\n  protected breadcrumbDropdownOpen: number | undefined = undefined;\n  protected addExpandDropdown = false;\n  protected controlId = `__si-breadcrumb-${controlIdCounter++}-`;\n  protected readonly icons = addIcons({ elementBreadcrumbRoot, elementRight2 });\n\n  private readonly breadcrumbElement = viewChild.required<ElementRef>('breadcrumb');\n  private readonly breadcrumbElements = viewChildren<ElementRef>('breadcrumbItem');\n\n  private changeDetector = inject(ChangeDetectorRef);\n  private translate = inject(SiTranslateService);\n\n  ngOnChanges(): void {\n    // Reprocess items on every change and on init\n    this.processItems();\n  }\n\n  ngOnDestroy(): void {\n    this.translationSubscription?.unsubscribe();\n  }\n\n  private processItems(): void {\n    this.numberOfItems = this.items().length;\n\n    this.translationSubscription?.unsubscribe();\n    if (this.numberOfItems) {\n      this.translationSubscription = merge(this.translate.translationChange, of(undefined))\n        .pipe(switchMap(() => this.translate.translateAsync(this.items().map(item => item.title))))\n        .subscribe(translatedTitles => {\n          // Add the level to the items and check if they need to be shortened.\n          // If they need to be shortened, shorten them at a convenient place.\n          // Set the lastItem tag to true for the last item\n          let counter = -1;\n          const enumeratedItems = this.items().map(item => {\n            counter++;\n            const title = translatedTitles[item.title];\n            let shortened = false;\n            let shortenedTitle = title;\n            // If this is not the last item and the title too long, shorten the title\n            if (counter !== this.numberOfItems - 1 && title && title.length > ITEM_MAX_LENGTH) {\n              shortened = true;\n              // This regex gets the last space, dash or underscore.\n              const regexMatch = title\n                .slice(ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING, ITEM_MAX_LENGTH - 2)\n                .match(/^.*[- _](?=.*?$)/);\n              if (regexMatch) {\n                shortenedTitle = title.slice(\n                  0,\n                  ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING + regexMatch[0].length - 1\n                );\n              } else {\n                shortenedTitle = title.slice(0, ITEM_MAX_LENGTH - 3);\n              }\n            }\n\n            // If the root element should be displayed as text, set level not to 0.\n            // This is used to distinguish in the template between icon and text.\n            const level = counter === 0 && this.showRootAsText() ? -1 : counter;\n\n            return {\n              ...item,\n              title,\n              level,\n              hide: false,\n              shortened,\n              shortenedTitle,\n              lastItem: counter === this.numberOfItems - 1\n            };\n          });\n          this.itemsShown = enumeratedItems;\n          this.itemsHidden = [];\n          this.breadcrumbShortened = false;\n          this.breadcrumbDropdownOpen = undefined;\n          this.itemsProcessed = true;\n          this.resetBreadcrumb();\n        });\n    } else {\n      this.itemsShown = [];\n      this.itemsHidden = [];\n      this.breadcrumbShortened = false;\n      this.breadcrumbDropdownOpen = undefined;\n      this.itemsProcessed = true;\n      this.resetBreadcrumb();\n    }\n  }\n\n  /*\n   * Toggle dropdown (on click of ellipses), either for\n   * the general dropdown list if itemLevel is at ellipsesLevel\n   * or otherwise the name expansion at the specified item level.\n   * Close any open dropdown before opening a new one.\n   */\n  protected toggleBreadcrumbDropdown(itemLevel: number): void {\n    this.breadcrumbDropdownOpen = this.breadcrumbDropdownOpen === itemLevel ? undefined : itemLevel;\n  }\n\n  // Close dropdown on click anywhere else\n  @HostListener('document:click', ['$event.target'])\n  protected documentClick(targetElement: any): void {\n    if (this.breadcrumbDropdownOpen) {\n      if (!this.breadcrumbElement().nativeElement.contains(targetElement)) {\n        // Close all dropdowns.\n        this.breadcrumbDropdownOpen = undefined;\n      }\n    }\n  }\n\n  protected resetBreadcrumb(): void {\n    if (this.itemsProcessed) {\n      this.numberOfItems = this.items().length;\n      // Add an additional the ellipses item to the end of the shownItems (breadcrumb items).\n      // Disable addExpandDropdown for now, to make every item a proper SiBreadcrumbItemComponent.\n      const ellipsesItem = { title: '...', level: this.numberOfItems, shortenedTitle: '' };\n      this.itemsShown.push(ellipsesItem);\n      if (this.breadcrumbShortened) {\n        // If the breadcrumb was shortened before, remove the ellipses and add back itemsHidden (breadcrumb dropdown items).\n        this.breadcrumbShortened = false;\n        this.itemsShown.splice(this.ellipsesLevel, 1, ...this.itemsHidden);\n        this.itemsHidden = [];\n      }\n      this.addExpandDropdown = false;\n      // Wait for the next change detection cycle to measure the updated item length.\n      this.changeDetector.detectChanges();\n      this.calculateBreadcrumb();\n    }\n  }\n\n  private calculateBreadcrumb(): void {\n    this.addExpandDropdown = true;\n    const maxWidth = this.breadcrumbElement().nativeElement.clientWidth;\n    const breadcrumbElementsList = this.breadcrumbElements().map(item => item);\n    // Measure the length of the last additional ellipses item, then remove it from itemsShown (breadcrumb items).\n    const ellipsesWidth = breadcrumbElementsList[this.numberOfItems].nativeElement.offsetWidth;\n    this.itemsShown.splice(this.numberOfItems, 1);\n    let currentWidth = this.showRootAsText() ? 0 : ROOT_ICON_WIDTH;\n    const numberOfItemsKeptAtEnd = Math.min(NUMBER_OF_SHOWN_ITEMS_AT_END, this.numberOfItems - 1);\n    let reverseCounter = this.numberOfItems;\n    // Test for numberOfItemsKeptAtEnd items from the end if they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList\n      .slice(this.numberOfItems - numberOfItemsKeptAtEnd, this.numberOfItems)\n      .reverse()\n      .map(item => {\n        if (!this.breadcrumbShortened) {\n          const currentItemWidth = item.nativeElement.offsetWidth;\n          if (currentWidth + currentItemWidth > maxWidth) {\n            this.breadcrumbShortened = true;\n            // Test if the ellipses item still fits, if not remove last (actually next in original order) item as well.\n            if (currentWidth + ellipsesWidth > maxWidth) {\n              reverseCounter++;\n            }\n          } else {\n            currentWidth += currentItemWidth;\n            reverseCounter--;\n          }\n        }\n      });\n\n    const start = this.showRootAsText() ? 0 : 1;\n    let counter = start;\n    // If breadcrumbShortened is not true yet, test for the rest of the items from the start\n    // Whether they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList.slice(start, this.numberOfItems - numberOfItemsKeptAtEnd).map(item => {\n      if (!this.breadcrumbShortened) {\n        const currentItemWidth = item.nativeElement.offsetWidth;\n        if (currentWidth + currentItemWidth > maxWidth) {\n          this.breadcrumbShortened = true;\n          // Test if the ellipses item still fits, if not remove last item as well.\n          // If the counter is still on 1, instead remove last (actually next in original order) from\n          // the previous reverse calculation\n          if (currentWidth + ellipsesWidth > maxWidth) {\n            if (counter > 1) {\n              counter--;\n            } else {\n              reverseCounter++;\n            }\n          }\n        } else {\n          currentWidth += currentItemWidth;\n          counter++;\n        }\n      }\n    });\n    // If breadcrumbShortened is true, move the items that do not fit to itemsHidden (breadcrumb dropdown items) and add ellipses item.\n    if (this.breadcrumbShortened) {\n      this.ellipsesLevel = counter;\n      this.itemsHidden = this.itemsShown.slice(this.ellipsesLevel, reverseCounter);\n      const ellipsesItem = { title: '...', level: this.ellipsesLevel, shortenedTitle: '' };\n      this.itemsShown.splice(this.ellipsesLevel, reverseCounter - this.ellipsesLevel, ellipsesItem);\n    }\n    // Manually detect changes to prevent them from not being detected on language change\n    this.changeDetector.detectChanges();\n  }\n}\n","<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon-next class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        }\n        @if (!item.shortened) {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon-next class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon-next class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    }\n    @if (item.level !== 0) {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiBreadcrumbComponent } from './si-breadcrumb.component';\n\n@NgModule({\n  imports: [SiBreadcrumbComponent],\n  exports: [SiBreadcrumbComponent]\n})\nexport class SiBreadcrumbModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './breadcrumb-item.model';\nexport * from './si-breadcrumb.component';\nexport * from './si-breadcrumb.module';\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-breadcrumb.mjs","sources":["../../../../projects/element-ng/breadcrumb/si-breadcrumb-item-template.directive.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.ts","../../../../projects/element-ng/breadcrumb/si-breadcrumb.component.html","../../../../projects/element-ng/breadcrumb/si-breadcrumb.module.ts","../../../../projects/element-ng/breadcrumb/index.ts","../../../../projects/element-ng/breadcrumb/siemens-element-ng-breadcrumb.ts"],"sourcesContent":["/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { Directive } from '@angular/core';\n\nimport { EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\n\n@Directive({ selector: '[siBreadcrumbItemTemplate]' })\nexport class SiBreadcrumbItemTemplateDirective {\n  static ngTemplateContextGuard(\n    directive: SiBreadcrumbItemTemplateDirective,\n    context: unknown\n  ): context is { item: EnumeratedBreadcrumbItem; title?: string } {\n    return true;\n  }\n}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  booleanAttribute,\n  ChangeDetectorRef,\n  Component,\n  ElementRef,\n  HostListener,\n  inject,\n  input,\n  OnChanges,\n  OnDestroy,\n  viewChild,\n  viewChildren\n} from '@angular/core';\nimport {\n  addIcons,\n  elementBreadcrumbRoot,\n  elementRight2,\n  SiIconNextComponent\n} from '@siemens/element-ng/icon';\nimport { SiLinkDirective } from '@siemens/element-ng/link';\nimport { SiResizeObserverDirective } from '@siemens/element-ng/resize-observer';\nimport { SiTranslateModule, SiTranslateService } from '@siemens/element-translate-ng/translate';\nimport { merge, of, Subscription } from 'rxjs';\nimport { switchMap } from 'rxjs/operators';\n\nimport { BreadcrumbItem, EnumeratedBreadcrumbItem } from './breadcrumb-item.model';\nimport { SiBreadcrumbItemTemplateDirective } from './si-breadcrumb-item-template.directive';\n\n/**\n * Defines how many items should be displayed at the end of the breadcrumb if possible.\n */\nconst NUMBER_OF_SHOWN_ITEMS_AT_END = 2;\n\n/**\n * Defines how long a display item can be without it being shortened.\n * Cannot be lower than 4.\n * If this is 0, titles will not be shortened\n */\nconst ITEM_MAX_LENGTH = 30;\n\n/**\n * Defines how many characters of an item are always displayed in the beginning.\n * Must be at least 2 less than ITEM_MAX_LENGTH\n */\nconst ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING = 10;\n\n/**\n * Defines the width of the root icon in pixels.\n */\nconst ROOT_ICON_WIDTH = 24;\n\nlet controlIdCounter = 1;\n\n@Component({\n  selector: 'si-breadcrumb',\n  templateUrl: './si-breadcrumb.component.html',\n  styleUrl: './si-breadcrumb.component.scss',\n  imports: [\n    NgTemplateOutlet,\n    SiIconNextComponent,\n    SiLinkDirective,\n    SiResizeObserverDirective,\n    SiTranslateModule,\n    SiBreadcrumbItemTemplateDirective\n  ]\n})\nexport class SiBreadcrumbComponent implements OnChanges, OnDestroy {\n  /** Array of breadcrumb items. */\n  readonly items = input.required<BreadcrumbItem[]>();\n  /**\n   * Shows the \"root\" route as the provided title string instead of an icon.\n   *\n   * @defaultValue false\n   */\n  readonly showRootAsText = input(false, { transform: booleanAttribute });\n  /**\n   * Aria label for the main breadcrumb navigation. Needed for a11y.\n   *\n   * @defaultValue\n   * ```\n   * $localize`:@@SI_BREADCRUMB:Breadcrumbs`\n   * ```\n   */\n  readonly ariaLabel = input($localize`:@@SI_BREADCRUMB:Breadcrumbs`);\n\n  private translationSubscription?: Subscription;\n  private itemsProcessed = false;\n  private numberOfItems = 0;\n\n  protected itemsShown: EnumeratedBreadcrumbItem[] = [];\n  protected itemsHidden: EnumeratedBreadcrumbItem[] = [];\n  protected breadcrumbShortened = false;\n  protected ellipsesLevel = 0;\n  // Record to allow for -1 (root).\n  protected breadcrumbDropdownOpen: number | undefined = undefined;\n  protected addExpandDropdown = false;\n  protected controlId = `__si-breadcrumb-${controlIdCounter++}-`;\n  protected readonly icons = addIcons({ elementBreadcrumbRoot, elementRight2 });\n\n  private readonly breadcrumbElement = viewChild.required<ElementRef>('breadcrumb');\n  private readonly breadcrumbElements = viewChildren<ElementRef>('breadcrumbItem');\n\n  private changeDetector = inject(ChangeDetectorRef);\n  private translate = inject(SiTranslateService);\n\n  ngOnChanges(): void {\n    // Reprocess items on every change and on init\n    this.processItems();\n  }\n\n  ngOnDestroy(): void {\n    this.translationSubscription?.unsubscribe();\n  }\n\n  private processItems(): void {\n    this.numberOfItems = this.items().length;\n\n    this.translationSubscription?.unsubscribe();\n    if (this.numberOfItems) {\n      this.translationSubscription = merge(this.translate.translationChange, of(undefined))\n        .pipe(switchMap(() => this.translate.translateAsync(this.items().map(item => item.title))))\n        .subscribe(translatedTitles => {\n          // Add the level to the items and check if they need to be shortened.\n          // If they need to be shortened, shorten them at a convenient place.\n          // Set the lastItem tag to true for the last item\n          let counter = -1;\n          const enumeratedItems = this.items().map(item => {\n            counter++;\n            const title = translatedTitles[item.title];\n            let shortened = false;\n            let shortenedTitle = title;\n            // If this is not the last item and the title too long, shorten the title\n            if (counter !== this.numberOfItems - 1 && title && title.length > ITEM_MAX_LENGTH) {\n              shortened = true;\n              // This regex gets the last space, dash or underscore.\n              const regexMatch = title\n                .slice(ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING, ITEM_MAX_LENGTH - 2)\n                .match(/^.*[- _](?=.*?$)/);\n              if (regexMatch) {\n                shortenedTitle = title.slice(\n                  0,\n                  ITEM_CHARACTERS_ALWAYS_DISPLAYED_IN_BEGINNING + regexMatch[0].length - 1\n                );\n              } else {\n                shortenedTitle = title.slice(0, ITEM_MAX_LENGTH - 3);\n              }\n            }\n\n            // If the root element should be displayed as text, set level not to 0.\n            // This is used to distinguish in the template between icon and text.\n            const level = counter === 0 && this.showRootAsText() ? -1 : counter;\n\n            return {\n              ...item,\n              title,\n              level,\n              hide: false,\n              shortened,\n              shortenedTitle,\n              lastItem: counter === this.numberOfItems - 1\n            };\n          });\n          this.itemsShown = enumeratedItems;\n          this.itemsHidden = [];\n          this.breadcrumbShortened = false;\n          this.breadcrumbDropdownOpen = undefined;\n          this.itemsProcessed = true;\n          this.resetBreadcrumb();\n        });\n    } else {\n      this.itemsShown = [];\n      this.itemsHidden = [];\n      this.breadcrumbShortened = false;\n      this.breadcrumbDropdownOpen = undefined;\n      this.itemsProcessed = true;\n      this.resetBreadcrumb();\n    }\n  }\n\n  /*\n   * Toggle dropdown (on click of ellipses), either for\n   * the general dropdown list if itemLevel is at ellipsesLevel\n   * or otherwise the name expansion at the specified item level.\n   * Close any open dropdown before opening a new one.\n   */\n  protected toggleBreadcrumbDropdown(itemLevel: number): void {\n    this.breadcrumbDropdownOpen = this.breadcrumbDropdownOpen === itemLevel ? undefined : itemLevel;\n  }\n\n  // Close dropdown on click anywhere else\n  @HostListener('document:click', ['$event.target'])\n  protected documentClick(targetElement: any): void {\n    if (this.breadcrumbDropdownOpen) {\n      if (!this.breadcrumbElement().nativeElement.contains(targetElement)) {\n        // Close all dropdowns.\n        this.breadcrumbDropdownOpen = undefined;\n      }\n    }\n  }\n\n  protected resetBreadcrumb(): void {\n    if (this.itemsProcessed) {\n      this.numberOfItems = this.items().length;\n      // Add an additional the ellipses item to the end of the shownItems (breadcrumb items).\n      // Disable addExpandDropdown for now, to make every item a proper SiBreadcrumbItemComponent.\n      const ellipsesItem = { title: '...', level: this.numberOfItems, shortenedTitle: '' };\n      this.itemsShown.push(ellipsesItem);\n      if (this.breadcrumbShortened) {\n        // If the breadcrumb was shortened before, remove the ellipses and add back itemsHidden (breadcrumb dropdown items).\n        this.breadcrumbShortened = false;\n        this.itemsShown.splice(this.ellipsesLevel, 1, ...this.itemsHidden);\n        this.itemsHidden = [];\n      }\n      this.addExpandDropdown = false;\n      // Wait for the next change detection cycle to measure the updated item length.\n      this.changeDetector.detectChanges();\n      this.calculateBreadcrumb();\n    }\n  }\n\n  private calculateBreadcrumb(): void {\n    this.addExpandDropdown = true;\n    const maxWidth = this.breadcrumbElement().nativeElement.clientWidth;\n    const breadcrumbElementsList = this.breadcrumbElements().map(item => item);\n    // Measure the length of the last additional ellipses item, then remove it from itemsShown (breadcrumb items).\n    const ellipsesWidth = breadcrumbElementsList[this.numberOfItems].nativeElement.offsetWidth;\n    this.itemsShown.splice(this.numberOfItems, 1);\n    let currentWidth = this.showRootAsText() ? 0 : ROOT_ICON_WIDTH;\n    const numberOfItemsKeptAtEnd = Math.min(NUMBER_OF_SHOWN_ITEMS_AT_END, this.numberOfItems - 1);\n    let reverseCounter = this.numberOfItems;\n    // Test for numberOfItemsKeptAtEnd items from the end if they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList\n      .slice(this.numberOfItems - numberOfItemsKeptAtEnd, this.numberOfItems)\n      .reverse()\n      .map(item => {\n        if (!this.breadcrumbShortened) {\n          const currentItemWidth = item.nativeElement.offsetWidth;\n          if (currentWidth + currentItemWidth > maxWidth) {\n            this.breadcrumbShortened = true;\n            // Test if the ellipses item still fits, if not remove last (actually next in original order) item as well.\n            if (currentWidth + ellipsesWidth > maxWidth) {\n              reverseCounter++;\n            }\n          } else {\n            currentWidth += currentItemWidth;\n            reverseCounter--;\n          }\n        }\n      });\n\n    const start = this.showRootAsText() ? 0 : 1;\n    let counter = start;\n    // If breadcrumbShortened is not true yet, test for the rest of the items from the start\n    // Whether they still fit, if not, set breadcrumbShortened to true.\n    breadcrumbElementsList.slice(start, this.numberOfItems - numberOfItemsKeptAtEnd).map(item => {\n      if (!this.breadcrumbShortened) {\n        const currentItemWidth = item.nativeElement.offsetWidth;\n        if (currentWidth + currentItemWidth > maxWidth) {\n          this.breadcrumbShortened = true;\n          // Test if the ellipses item still fits, if not remove last item as well.\n          // If the counter is still on 1, instead remove last (actually next in original order) from\n          // the previous reverse calculation\n          if (currentWidth + ellipsesWidth > maxWidth) {\n            if (counter > 1) {\n              counter--;\n            } else {\n              reverseCounter++;\n            }\n          }\n        } else {\n          currentWidth += currentItemWidth;\n          counter++;\n        }\n      }\n    });\n    // If breadcrumbShortened is true, move the items that do not fit to itemsHidden (breadcrumb dropdown items) and add ellipses item.\n    if (this.breadcrumbShortened) {\n      this.ellipsesLevel = counter;\n      this.itemsHidden = this.itemsShown.slice(this.ellipsesLevel, reverseCounter);\n      const ellipsesItem = { title: '...', level: this.ellipsesLevel, shortenedTitle: '' };\n      this.itemsShown.splice(this.ellipsesLevel, reverseCounter - this.ellipsesLevel, ellipsesItem);\n    }\n    // Manually detect changes to prevent them from not being detected on language change\n    this.changeDetector.detectChanges();\n  }\n}\n","<nav role=\"navigation\" [attr.aria-label]=\"ariaLabel() | translate\">\n  <ol #breadcrumb class=\"breadcrumb\" (siResizeObserver)=\"resetBreadcrumb()\">\n    @for (item of itemsShown; track $index; let isFirst = $first) {\n      @if (!breadcrumbShortened || item.level !== ellipsesLevel) {\n        @if (item.shortened) {\n          <li #breadcrumbItem class=\"item text-nowrap shortened\">\n            @if (!isFirst) {\n              <si-icon-next class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <div class=\"breadcrumb-dropdown-wrapper\">\n              <ng-container\n                *ngTemplateOutlet=\"\n                  toggleTemplate;\n                  context: { item: item, title: item.shortenedTitle }\n                \"\n              />\n              @if (addExpandDropdown) {\n                <div\n                  class=\"dropdown-menu\"\n                  role=\"menu\"\n                  [id]=\"controlId + item.level\"\n                  [class.show]=\"breadcrumbDropdownOpen === item.level\"\n                >\n                  <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n                </div>\n              }\n            </div>\n          </li>\n        }\n        @if (!item.shortened) {\n          <li #breadcrumbItem class=\"item\">\n            @if (!isFirst) {\n              <si-icon-next class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n            }\n            <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\" />\n          </li>\n        }\n      }\n      @if (breadcrumbShortened && item.level === ellipsesLevel) {\n        <li class=\"item breadcrumb-ellipses-item\">\n          @if (!isFirst) {\n            <si-icon-next class=\"separator flip-rtl\" [icon]=\"icons.elementRight2\" />\n          }\n          <div class=\"breadcrumb-dropdown-wrapper\">\n            <ng-container *ngTemplateOutlet=\"toggleTemplate; context: { item: item, title: '' }\" />\n            <div\n              class=\"dropdown-menu\"\n              role=\"menu\"\n              [id]=\"controlId + item.level\"\n              [class.show]=\"breadcrumbDropdownOpen === item.level\"\n            >\n              @for (item of itemsHidden; track $index) {\n                <ng-container *ngTemplateOutlet=\"dropdownTemplate; context: { item: item }\" />\n              }\n            </div>\n          </div>\n        </li>\n      }\n    }\n  </ol>\n</nav>\n\n<ng-template #itemTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"breadcrumb-link text-nowrap\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [class.text-secondary]=\"item.lastItem\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-label]=\"item.title\"\n    [attr.aria-disabled]=\"!item.link && !item.href && !item.action\"\n  >\n    @if (item.level === 0) {\n      <si-icon-next class=\"icon flip-rtl\" [icon]=\"icons.elementBreadcrumbRoot\" />\n    }\n    @if (item.level !== 0) {\n      <span>{{ item.title }}</span>\n    }\n  </a>\n</ng-template>\n\n<ng-template #toggleTemplate let-item=\"item\" let-title=\"title\" siBreadcrumbItemTemplate>\n  <div\n    class=\"breadcrumb-dropdown-toggle link\"\n    role=\"button\"\n    aria-haspopup=\"true\"\n    tabindex=\"0\"\n    [attr.aria-controls]=\"controlId + item.level\"\n    [attr.aria-expanded]=\"breadcrumbDropdownOpen === item.level\"\n    (keydown.enter)=\"toggleBreadcrumbDropdown(item.level)\"\n    (click)=\"toggleBreadcrumbDropdown(item.level)\"\n    >{{ title }}...</div\n  >\n</ng-template>\n\n<ng-template #dropdownTemplate let-item=\"item\" siBreadcrumbItemTemplate>\n  <a\n    class=\"dropdown-item breadcrumb-link focus-inside\"\n    activeClass=\"active\"\n    ariaCurrent=\"page\"\n    role=\"menuitem\"\n    [class.disable-router-link]=\"!item.link && !item.action && !item.href\"\n    [siLink]=\"item\"\n    [exactMatch]=\"true\"\n    [attr.aria-disabled]=\"!item.link && !item.action && !item.href\"\n    >{{ item.title }}</a\n  >\n</ng-template>\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiBreadcrumbComponent } from './si-breadcrumb.component';\n\n@NgModule({\n  imports: [SiBreadcrumbComponent],\n  exports: [SiBreadcrumbComponent]\n})\nexport class SiBreadcrumbModule {}\n","/**\n * Copyright Siemens 2016 - 2025.\n * SPDX-License-Identifier: MIT\n */\nexport * from './breadcrumb-item.model';\nexport * from './si-breadcrumb.component';\nexport * from './si-breadcrumb.module';\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

@@ -1,12 +1,18 @@
+import { CdkTrapFocus } from '@angular/cdk/a11y';
+import { MediaMatcher } from '@angular/cdk/layout';
 import { CdkOption, CdkListbox } from '@angular/cdk/listbox';
-import { DatePipe, NgTemplateOutlet } from '@angular/common';
+import * as i2 from '@angular/cdk/overlay';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { DatePipe, NgTemplateOutlet, NgClass } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, input, booleanAttribute, output, signal, computed, ChangeDetectionStrategy, Component, Pipe, inject, model, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { SiCalendarButtonComponent, SiDatepickerComponent, SiDatepickerDirective } from '@siemens/element-ng/datepicker';
+import { addIcons, elementDown2, SiIconNextComponent } from '@siemens/element-ng/icon';
+import { BOOTSTRAP_BREAKPOINTS } from '@siemens/element-ng/resize-observer';
 import { SiSearchBarComponent } from '@siemens/element-ng/search-bar';
-import * as i2 from '@siemens/element-translate-ng/translate';
+import * as i3 from '@siemens/element-translate-ng/translate';
 import { SiTranslateModule } from '@siemens/element-translate-ng/translate';
 import { SiNumberInputComponent } from '@siemens/element-ng/number-input';
 import { SiSelectComponent, SiSelectSingleValueDirective, SiSelectSimpleOptionsDirective } from '@siemens/element-ng/select';
@@ -204,6 +210,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
         }] });
 class SiDateRangeFilterComponent {
     service = inject(SiDateRangeCalculationService);
+    mediaMatcher = inject(MediaMatcher);
+    smallScreen = this.mediaMatcher.matchMedia(`(max-width: ${BOOTSTRAP_BREAKPOINTS.mdMinimum}px)`).matches;
     /** The filter range object */
     range = model.required();
     /** List of preset time ranges. When not present or empty, the preset section won't show */
@@ -411,6 +419,7 @@ class SiDateRangeFilterComponent {
     applyClicked = output();
     /** Base configuration on how the dates should be displayed, parts of it may be overwritten internally. */
     datepickerConfig = input();
+    icons = addIcons({ elementDown2 });
     advancedMode = false;
     dateRange = { start: undefined, end: undefined };
     point1Now = true;
@@ -441,6 +450,7 @@ class SiDateRangeFilterComponent {
         return (this.presetList() ?? []).filter(timeFilter);
     });
     presetFilter = signal('');
+    presetOpen = signal(false);
     inputMode = computed(() => this.basicMode() === 'input' || this.enableTimeSelection());
     ngOnChanges(changes) {
         if (changes.enableTimeSelection ||
@@ -586,7 +596,7 @@ class SiDateRangeFilterComponent {
             }));
         }
     }
-    selectPresetItem(item) {
+    selectPresetItem(event, item) {
         const newRange = item.type === 'custom'
             ? item.calculate(item, this.range())
             : { point1: 'now', range: 'before', point2: item.offset };
@@ -597,26 +607,37 @@ class SiDateRangeFilterComponent {
         else {
             this.updateSimpleMode(newRange);
         }
+        if (this.smallScreen) {
+            // Prevent re-opening the dropdown when pressing enter on the selected item
+            event.preventDefault();
+            this.presetOpen.set(false);
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 }, datepickerConfig: { classPropertyName: "datepickerConfig", publicName: "datepickerConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { range: "rangeChange", applyClicked: "applyClicked" }, usesOnChanges: true, ngImport: i0, template: "@if (presetList()?.length) {\n  <div class=\"preset-select border-end\">\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(item)\"\n            (keydown.enter)=\"selectPresetItem(item)\"\n          >\n            {{ item.label | translate }}\n          </li>\n        }\n      }\n    </ul>\n  </div>\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        }\n        @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]=\"dateRange.end ?? dateRange.start\"\n      [(dateRange)]=\"dateRange\"\n      (dateRangeChange)=\"updateFromDateRange()\"\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 (calculatedRange().valid) {\n        {{ calculatedRange().start | date: pipeFormat() }} -\n        {{ calculatedRange().end | date: pipeFormat() }}\n      } @else {\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\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\"}.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}ul{flex:1 1 0;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.143}.preset-item:hover{background:var(--element-base-1-hover)}label{display:inline-flex;align-items:center}.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: "pipe", type: DatePipe, name: "date" }, { 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],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]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { 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", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose", "triggeringInput"], exportAs: ["siDatepicker"] }, { 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"], outputs: ["searchChange"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i2.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", 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 }, 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-next 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        }\n        @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]=\"dateRange.end ?? dateRange.start\"\n      [(dateRange)]=\"dateRange\"\n      (dateRangeChange)=\"updateFromDateRange()\"\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 (calculatedRange().valid) {\n        {{ calculatedRange().start | date: pipeFormat() }} -\n        {{ calculatedRange().end | date: pipeFormat() }}\n      } @else {\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.143}.preset-item:hover{background:var(--element-base-1-hover)}label{display:inline-flex;align-items:center}.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: "pipe", type: DatePipe, name: "date" }, { 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],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]),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"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "pipe", type: PresetMatchFilterPipe, name: "presetMatchFilter" }, { 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", "time12h", "rangeType", "minMonth", "maxMonth", "hideTimeToggle", "hideCalendar", "timepickerLabel", "activeHover"], outputs: ["focusedDateChange", "dateChange", "dateRangeChange", "disabledTimeChange", "configChange", "rangeTypeChange", "activeHoverChange"] }, { kind: "directive", type: SiDatepickerDirective, selector: "[siDatepicker]", inputs: ["autoClose", "triggeringInput"], exportAs: ["siDatepicker"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", 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"], outputs: ["searchChange"] }, { kind: "ngmodule", type: SiTranslateModule }, { kind: "pipe", type: i3.SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: SiDateRangeFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'si-date-range-filter', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         CdkOption,
                         CdkListbox,
+                        CdkTrapFocus,
                         DatePipe,
                         FormsModule,
+                        NgClass,
                         NgTemplateOutlet,
+                        OverlayModule,
                         PresetMatchFilterPipe,
                         SiCalendarButtonComponent,
                         SiDatepickerComponent,
                         SiDatepickerDirective,
+                        SiIconNextComponent,
                         SiRelativeDateComponent,
                         SiSearchBarComponent,
                         SiTranslateModule
-                    ], template: "@if (presetList()?.length) {\n  <div class=\"preset-select border-end\">\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(item)\"\n            (keydown.enter)=\"selectPresetItem(item)\"\n          >\n            {{ item.label | translate }}\n          </li>\n        }\n      }\n    </ul>\n  </div>\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        }\n        @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]=\"dateRange.end ?? dateRange.start\"\n      [(dateRange)]=\"dateRange\"\n      (dateRangeChange)=\"updateFromDateRange()\"\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 (calculatedRange().valid) {\n        {{ calculatedRange().start | date: pipeFormat() }} -\n        {{ calculatedRange().end | date: pipeFormat() }}\n      } @else {\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\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\"}.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}ul{flex:1 1 0;padding-inline-start:0;list-style:none}.preset-item{cursor:pointer;line-height:1.143}.preset-item:hover{background:var(--element-base-1-hover)}label{display:inline-flex;align-items:center}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
+                    ], 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-next 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        }\n        @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]=\"dateRange.end ?? dateRange.start\"\n      [(dateRange)]=\"dateRange\"\n      (dateRangeChange)=\"updateFromDateRange()\"\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 (calculatedRange().valid) {\n        {{ calculatedRange().start | date: pipeFormat() }} -\n        {{ calculatedRange().end | date: pipeFormat() }}\n      } @else {\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.143}.preset-item:hover{background:var(--element-base-1-hover)}label{display:inline-flex;align-items:center}.form-check-input{inset-block-start:0}.element-zoom{rotate:45deg}.footer{grid-area:footer}\n"] }]
         }] });
 
 /**