@yuuvis/material 2.16.0 → 2.18.0

package/fesm2022/yuuvis-material-panes.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/fullscreen.directive.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-aside',\n  imports: [CommonModule],\n  templateUrl: './pane-aside.component.html',\n  styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-body',\n  imports: [CommonModule],\n  templateUrl: './pane-body.component.html',\n  styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Component for the pane header. It can be used to display a title,\n * subtitle and actions in the pane header.\n *\n * The title and subtitle can be set via the `title` and `subtitle` inputs\n * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <!-- Using inputs -->\n * <ymt-pane-header [title]=\"'Pane Title'\" [subtitle]=\"'Pane Subtitle'\"></ymt-pane-header>\n * <!-- Using template refs -->\n * <ymt-pane-header>\n * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>\n * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule, MatIconModule],\n  templateUrl: './pane-header.component.html',\n  styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n  /**\n   * Title of the pane\n   */\n  title = input<string>();\n  /**\n   * Icon of the pane\n   */\n  icon = input<string>();\n  /**\n   * Subtitle of the pane\n   */\n  subtitle = input<string>();\n  /**\n   * TemplateRef for actions area in the pane header.\n   */\n  actions = input<TemplateRef<any>>();\n\n  titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n  subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n","import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Renderer2,\n  signal\n} from '@angular/core';\n\n/**\n * Directive that enables any host element to toggle into a fullscreen overlay\n * covering the entire viewport. Background content is made inert and body scroll\n * is locked while fullscreen is active.\n *\n * @example\n * ```html\n * <div yuvFullscreen #fs=\"yuvFullscreen\">\n *   <button (click)=\"fs.toggle()\">Toggle</button>\n *   <p>Content</p>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[yuvFullscreen]',\n  exportAs: 'yuvFullscreen',\n  host: {\n    '[class.yuv-fullscreen-active]': 'active()',\n    '(document:keydown.escape)': 'onEscape()'\n  }\n})\nexport class FullscreenDirective implements OnDestroy {\n  #elRef = inject(ElementRef);\n  #renderer = inject(Renderer2);\n\n  /** Whether the fullscreen toggle is disabled. */\n  disabled = input<boolean>(false);\n\n  /** Emitted when fullscreen mode is entered. */\n  fullscreenEnter = output<void>();\n  /** Emitted when fullscreen mode is exited. */\n  fullscreenExit = output<void>();\n\n  #isActive = signal(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  active = computed(() => this.#isActive());\n\n  #originalStyles: Record<string, string> = {};\n  #inertElements: HTMLElement[] = [];\n  #originalBodyOverflow = '';\n\n  /** Toggle fullscreen on/off. */\n  toggle(): void {\n    if (this.disabled()) return;\n    if (this.#isActive()) {\n      this.exit();\n    } else {\n      this.enter();\n    }\n  }\n\n  /** Enter fullscreen mode. No-op if already active or disabled. */\n  enter(): void {\n    if (this.#isActive() || this.disabled()) return;\n    this.#saveOriginalStyles();\n    this.#applyFullscreenStyles();\n    this.#makeBackgroundInert();\n    this.#lockBodyScroll();\n    this.#isActive.set(true);\n    this.fullscreenEnter.emit();\n  }\n\n  /** Exit fullscreen mode. No-op if not active. */\n  exit(): void {\n    if (!this.#isActive()) return;\n    this.#restoreOriginalStyles();\n    this.#restoreBackground();\n    this.#unlockBodyScroll();\n    this.#isActive.set(false);\n    this.fullscreenExit.emit();\n  }\n\n  /** @internal */\n  onEscape(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n\n  #saveOriginalStyles(): void {\n    const style = this.#elRef.nativeElement.style;\n    this.#originalStyles = {\n      position: style.position,\n      inset: style.inset,\n      zIndex: style.zIndex,\n      width: style.width,\n      height: style.height,\n      overflow: style.overflow,\n      backgroundColor: style.backgroundColor\n    };\n  }\n\n  #applyFullscreenStyles(): void {\n    const el = this.#elRef.nativeElement;\n    this.#renderer.setStyle(el, 'position', 'fixed');\n    this.#renderer.setStyle(el, 'inset', '0');\n    this.#renderer.setStyle(el, 'z-index', '1000');\n    this.#renderer.setStyle(el, 'width', '100vw');\n    this.#renderer.setStyle(el, 'height', '100vh');\n    this.#renderer.setStyle(el, 'overflow', 'auto');\n    this.#renderer.setStyle(el, 'background-color', 'var(--ymt-surface, #fff)');\n  }\n\n  #restoreOriginalStyles(): void {\n    const el = this.#elRef.nativeElement;\n    for (const [prop, value] of Object.entries(this.#originalStyles)) {\n      if (value) {\n        this.#renderer.setStyle(el, prop, value);\n      } else {\n        this.#renderer.removeStyle(el, prop);\n      }\n    }\n    this.#originalStyles = {};\n  }\n\n  #makeBackgroundInert(): void {\n    this.#inertElements = [];\n    let current: HTMLElement = this.#elRef.nativeElement;\n\n    while (current.parentElement) {\n      const parent = current.parentElement;\n      for (let i = 0; i < parent.children.length; i++) {\n        const sibling = parent.children[i] as HTMLElement;\n        if (sibling !== current && !sibling.hasAttribute('inert')) {\n          this.#renderer.setAttribute(sibling, 'inert', '');\n          this.#inertElements.push(sibling);\n        }\n      }\n      if (parent === document.body) break;\n      current = parent;\n    }\n  }\n\n  #restoreBackground(): void {\n    for (const el of this.#inertElements) {\n      this.#renderer.removeAttribute(el, 'inert');\n    }\n    this.#inertElements = [];\n  }\n\n  #lockBodyScroll(): void {\n    this.#originalBodyOverflow = document.body.style.overflow;\n    this.#renderer.setStyle(document.body, 'overflow', 'hidden');\n  }\n\n  #unlockBodyScroll(): void {\n    if (this.#originalBodyOverflow) {\n      this.#renderer.setStyle(document.body, 'overflow', this.#originalBodyOverflow);\n    } else {\n      this.#renderer.removeStyle(document.body, 'overflow');\n    }\n    this.#originalBodyOverflow = '';\n  }\n\n  ngOnDestroy(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n}\n","import { Component, input, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n}\n","@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { Component, inject, input, TemplateRef } from '@angular/core';\nimport { FullscreenDirective } from './fullscreen.directive';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * Pane component.\n *\n * A pane has a header and a main area. You may choose to not show a header at all:\n *\n * ```html\n * <ymt-pane>\n *  Pane content goes here.\n * </ymt-pane>\n * ```\n *\n * There are other components to be used within a pane:\n * - `ymt-pane-header`: Renders a pre-styled header area for the pane.\n * - `ymt-pane-body`: The main content area of the pane.\n * - `ymt-pane-footer`: A footer component to be used as footer area of the pane.\n *\n * You can change the appearance of the header area via CSS variables:\n * ```css\n * ymt-pane {\n *   --header-area-background: var(--ymt-surface-container-low);\n *   --header-area-border-color: var(--ymt-outline-variant);\n * }\n * ```\n *\n * The main area has a padding by default. You can customize or remove the padding via\n * CSS variables:\n * ```css\n * ymt-pane {\n *   --main-area-padding: 0;\n * }\n * ```\n *\n * Add actions to a pane:\n * ```html\n * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\">\n *   <ng-template #yuvPaneActions>\n *     <button ymt-icon-button><mat-icon>settings</mat-icon></button>\n *     <button ymt-icon-button><mat-icon>more</mat-icon></button>\n *   </ng-template>\n * </ymt-pane>\n * ```\n *\n * Toggle fullscreen mode:\n * ```html\n * <ymt-pane #pane>\n *   <ymt-pane-body>\n *     <button (click)=\"pane.toggleFullscreen()\">Fullscreen</button>\n *   </ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  hostDirectives: [\n    {\n      directive: FullscreenDirective,\n      outputs: ['fullscreenEnter', 'fullscreenExit']\n    }\n  ],\n  host: {\n    '[class.plain]': 'plain()'\n  }\n})\nexport class YmtPaneComponent {\n  #fullscreen = inject(FullscreenDirective);\n\n  /**\n   * TemplateRef for actions area in the top bar. These actions will be placed at the end of\n   * the top bar.\n   *\n   * ```html\n   * <ymt-pane title=\"My Pane\" subTitle=\"Pane Subtitle\" [topBarActions]=\"topBarActions\"></ymt-pane>\n   * <ng-template #topBarActions>\n   *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n   * </ng-template>\n   * ```\n   * Make sure to set the `icon-button-size=\"small\"` for proper alignment in the top bar.\n   */\n  topBarActions = input<TemplateRef<unknown>>();\n\n  /**\n   * Setting this to true will remove the default styles for the pane. So it will\n   * render without border-radius, border and background color, but keep the inner\n   * structure. This is useful when you want to use the pane inside another container\n   * and want to apply custom styles to the pane.\n   */\n  plain = input<boolean>(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  fullscreenActive = this.#fullscreen.active;\n\n  /** Toggle fullscreen mode on/off. */\n  toggleFullscreen(): void {\n    this.#fullscreen.toggle();\n  }\n\n  /** Enter fullscreen mode. */\n  enterFullscreen(): void {\n    this.#fullscreen.enter();\n  }\n\n  /** Exit fullscreen mode. */\n  exitFullscreen(): void {\n    this.#fullscreen.exit();\n  }\n}\n","@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-footer',\n  imports: [CommonModule],\n  templateUrl: './pane-footer.component.html',\n  styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.FullscreenDirective"],"mappings":"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"}
+{"version":3,"file":"yuuvis-material-panes.mjs","sources":["../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-aside/pane-aside.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-body/pane-body.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-header/pane-header.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/fullscreen.directive.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-top-bar/pane-top-bar.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.component.html","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane-footer/pane-footer.component.html","../../../../../libs/yuuvis/material/panes/src/lib/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-aside',\n  imports: [CommonModule],\n  templateUrl: './pane-aside.component.html',\n  styleUrl: './pane-aside.component.scss'\n})\nexport class YmtPaneAsideComponent {}\n","<p>pane-aside works!</p>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-body',\n  imports: [CommonModule],\n  templateUrl: './pane-body.component.html',\n  styleUrl: './pane-body.component.scss'\n})\nexport class YmtPaneBodyComponent {}\n","<ng-content></ng-content>\n","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\n\n/**\n * Component for the pane header. It can be used to display a title,\n * subtitle and actions in the pane header.\n *\n * The title and subtitle can be set via the `title` and `subtitle` inputs\n * or via the `yuvPaneHeaderTitle` and `yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <!-- Using inputs -->\n * <ymt-pane-header [title]=\"'Pane Title'\" [subtitle]=\"'Pane Subtitle'\"></ymt-pane-header>\n * <!-- Using template refs -->\n * <ymt-pane-header>\n * <ng-template #yuvPaneHeaderTitle><h2>🦁Custom pane title</h2></ng-template>\n * <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n */\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule, MatIconModule],\n  templateUrl: './pane-header.component.html',\n  styleUrl: './pane-header.component.scss'\n})\nexport class YmtPaneHeaderComponent {\n  /**\n   * Title of the pane\n   */\n  title = input<string>();\n  /**\n   * Icon of the pane\n   */\n  icon = input<string>();\n  /**\n   * Subtitle of the pane\n   */\n  subtitle = input<string>();\n  /**\n   * TemplateRef for actions area in the pane header.\n   */\n  actions = input<TemplateRef<any>>();\n\n  titleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderTitle');\n  subtitleSlot = contentChild<TemplateRef<any>>('yuvPaneHeaderSubtitle');\n}\n","<header>\n  @if (icon()) {\n    <div class=\"icon\">\n      <mat-icon class=\"pane-icon\">{{ icon() }}</mat-icon>\n    </div>\n  }\n  <h2>\n    @let ts = titleSlot();\n    @if (ts) {\n      <ng-container *ngTemplateOutlet=\"ts\"></ng-container>\n    } @else {\n      {{ title() }}\n    }\n  </h2>\n  <small>\n    @let ss = subtitleSlot();\n    @if (ss) {\n      <ng-container *ngTemplateOutlet=\"ss\"></ng-container>\n    } @else {\n      {{ subtitle() }}\n    }\n  </small>\n  @let a = actions();\n  @if (a) {\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n    </div>\n  }\n</header>\n","import {\n  computed,\n  Directive,\n  ElementRef,\n  inject,\n  input,\n  OnDestroy,\n  output,\n  Renderer2,\n  signal\n} from '@angular/core';\n\n/**\n * Directive that enables any host element to toggle into a fullscreen overlay\n * covering the entire viewport. Background content is made inert and body scroll\n * is locked while fullscreen is active.\n *\n * @example\n * ```html\n * <div yuvFullscreen #fs=\"yuvFullscreen\">\n *   <button (click)=\"fs.toggle()\">Toggle</button>\n *   <p>Content</p>\n * </div>\n * ```\n */\n@Directive({\n  selector: '[yuvFullscreen]',\n  exportAs: 'yuvFullscreen',\n  host: {\n    '[class.yuv-fullscreen-active]': 'active()',\n    '(document:keydown.escape)': 'onEscape()'\n  }\n})\nexport class FullscreenDirective implements OnDestroy {\n  #elRef = inject(ElementRef);\n  #renderer = inject(Renderer2);\n\n  /** Whether the fullscreen toggle is disabled. */\n  disabled = input<boolean>(false);\n\n  /** Emitted when fullscreen mode is entered. */\n  fullscreenEnter = output<void>();\n  /** Emitted when fullscreen mode is exited. */\n  fullscreenExit = output<void>();\n\n  #isActive = signal(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  active = computed(() => this.#isActive());\n\n  #originalStyles: Record<string, string> = {};\n  #inertElements: HTMLElement[] = [];\n  #originalBodyOverflow = '';\n\n  /** Toggle fullscreen on/off. */\n  toggle(): void {\n    if (this.disabled()) return;\n    if (this.#isActive()) {\n      this.exit();\n    } else {\n      this.enter();\n    }\n  }\n\n  /** Enter fullscreen mode. No-op if already active or disabled. */\n  enter(): void {\n    if (this.#isActive() || this.disabled()) return;\n    this.#saveOriginalStyles();\n    this.#applyFullscreenStyles();\n    this.#makeBackgroundInert();\n    this.#lockBodyScroll();\n    this.#isActive.set(true);\n    this.fullscreenEnter.emit();\n  }\n\n  /** Exit fullscreen mode. No-op if not active. */\n  exit(): void {\n    if (!this.#isActive()) return;\n    this.#restoreOriginalStyles();\n    this.#restoreBackground();\n    this.#unlockBodyScroll();\n    this.#isActive.set(false);\n    this.fullscreenExit.emit();\n  }\n\n  /** @internal */\n  onEscape(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n\n  #saveOriginalStyles(): void {\n    const style = this.#elRef.nativeElement.style;\n    this.#originalStyles = {\n      position: style.position,\n      inset: style.inset,\n      zIndex: style.zIndex,\n      width: style.width,\n      height: style.height,\n      overflow: style.overflow,\n      backgroundColor: style.backgroundColor\n    };\n  }\n\n  #applyFullscreenStyles(): void {\n    const el = this.#elRef.nativeElement;\n    this.#renderer.setStyle(el, 'position', 'fixed');\n    this.#renderer.setStyle(el, 'inset', '0');\n    this.#renderer.setStyle(el, 'z-index', '1000');\n    this.#renderer.setStyle(el, 'width', '100vw');\n    this.#renderer.setStyle(el, 'height', '100vh');\n    this.#renderer.setStyle(el, 'overflow', 'auto');\n    this.#renderer.setStyle(el, 'background-color', 'var(--ymt-surface, #fff)');\n  }\n\n  #restoreOriginalStyles(): void {\n    const el = this.#elRef.nativeElement;\n    for (const [prop, value] of Object.entries(this.#originalStyles)) {\n      if (value) {\n        this.#renderer.setStyle(el, prop, value);\n      } else {\n        this.#renderer.removeStyle(el, prop);\n      }\n    }\n    this.#originalStyles = {};\n  }\n\n  #makeBackgroundInert(): void {\n    this.#inertElements = [];\n    let current: HTMLElement = this.#elRef.nativeElement;\n\n    while (current.parentElement) {\n      const parent = current.parentElement;\n      for (let i = 0; i < parent.children.length; i++) {\n        const sibling = parent.children[i] as HTMLElement;\n        if (sibling !== current && !sibling.hasAttribute('inert')) {\n          this.#renderer.setAttribute(sibling, 'inert', '');\n          this.#inertElements.push(sibling);\n        }\n      }\n      if (parent === document.body) break;\n      current = parent;\n    }\n  }\n\n  #restoreBackground(): void {\n    for (const el of this.#inertElements) {\n      this.#renderer.removeAttribute(el, 'inert');\n    }\n    this.#inertElements = [];\n  }\n\n  #lockBodyScroll(): void {\n    this.#originalBodyOverflow = document.body.style.overflow;\n    this.#renderer.setStyle(document.body, 'overflow', 'hidden');\n  }\n\n  #unlockBodyScroll(): void {\n    if (this.#originalBodyOverflow) {\n      this.#renderer.setStyle(document.body, 'overflow', this.#originalBodyOverflow);\n    } else {\n      this.#renderer.removeStyle(document.body, 'overflow');\n    }\n    this.#originalBodyOverflow = '';\n  }\n\n  ngOnDestroy(): void {\n    if (this.#isActive()) {\n      this.exit();\n    }\n  }\n}\n","import { Component, input, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n}\n","@let ta = actions();\n@if (ta) {\n  <div class=\"top-bar\">\n    <div class=\"actions\">\n      <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n    </div>\n  </div>\n}\n","import { CommonModule } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, inject, input, TemplateRef } from '@angular/core';\nimport { FullscreenDirective } from './fullscreen.directive';\nimport { YmtPaneTopBarComponent } from './pane-top-bar/pane-top-bar.component';\n\n/**\n * A pane is a container component that unifies the appearance and behavior of\n * content areas in an app. It renders as a bordered, rounded card with a grid\n * layout for its sub-components.\n *\n * ## Structure\n *\n * A pane uses a vertical grid layout with four areas. All sub-components are optional:\n *\n * | Area     | Component          | Description                                        |\n * |----------|--------------------|----------------------------------------------------|\n * | top-bar  | *(internal)*       | Rendered automatically when `topBarActions` is set. |\n * | header   | `ymt-pane-header`  | Title, subtitle, icon, and custom header actions.   |\n * | main     | `ymt-pane-body`    | Scrollable main content area.                      |\n * | footer   | `ymt-pane-footer`  | Right-aligned action bar with a top border.         |\n *\n * ```html\n * <ymt-pane>\n *   <ymt-pane-header title=\"Users\" subtitle=\"3 selected\" [actions]=\"headerActions\" />\n *   <ymt-pane-body>Main content</ymt-pane-body>\n *   <ymt-pane-footer>\n *     <button ymt-button>Save</button>\n *   </ymt-pane-footer>\n * </ymt-pane>\n * ```\n *\n * ### `ymt-pane-header`\n *\n * Accepts `title`, `subtitle`, and `icon` as string inputs. For richer content,\n * use the `#yuvPaneHeaderTitle` and `#yuvPaneHeaderSubtitle` template refs:\n *\n * ```html\n * <ymt-pane-header>\n *   <ng-template #yuvPaneHeaderTitle><h2>Custom title</h2></ng-template>\n *   <ng-template #yuvPaneHeaderSubtitle><ymt-badge severity=\"warning\">locked</ymt-badge></ng-template>\n * </ymt-pane-header>\n * ```\n *\n * Header actions can be projected via the `[actions]` input (TemplateRef).\n *\n * ### Top bar actions\n *\n * Pass a `TemplateRef` to the `[topBarActions]` input to render icon buttons\n * in a slim top bar above the header:\n *\n * ```html\n * <ymt-pane [topBarActions]=\"actions\">\n *   <ymt-pane-body>Content</ymt-pane-body>\n * </ymt-pane>\n *\n * <ng-template #actions>\n *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n * </ng-template>\n * ```\n *\n * ## Fullscreen\n *\n * Every pane supports fullscreen mode. The pane expands to fill the viewport,\n * background content becomes inert, and pressing <kbd>Escape</kbd> exits.\n *\n * ```html\n * <ymt-pane #pane>\n *   <ymt-pane-body>\n *     <button (click)=\"pane.toggleFullscreen()\">Toggle fullscreen</button>\n *   </ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n * Programmatic API: `enterFullscreen()`, `exitFullscreen()`, `toggleFullscreen()`.\n * Read the current state via the `fullscreenActive` signal.\n * Listen to transitions via the `(fullscreenEnter)` and `(fullscreenExit)` outputs.\n *\n * ## Busy state\n *\n * Set `[busy]=\"true\"` to replace the static border with a rotating\n * conic-gradient border that signals a loading state:\n *\n * ```html\n * <ymt-pane [busy]=\"isLoading()\">\n *   <ymt-pane-body>Content</ymt-pane-body>\n * </ymt-pane>\n * ```\n *\n * ## Enter animation\n *\n * Panes fade in on creation (0.15 s ease-out by default). Customize or delay\n * the animation via CSS variables, or disable it entirely with the\n * `[noAnimation]` input:\n *\n * ```css\n * ymt-pane {\n *   --enter-animation-duration: 0.3s;\n *   --enter-animation-delay: 0.1s;\n * }\n * ```\n *\n * ```html\n * <ymt-pane [noAnimation]=\"true\"> ... </ymt-pane>\n * ```\n *\n * ## Plain mode\n *\n * Set `[plain]=\"true\"` to strip the border, border-radius, and background\n * while keeping the inner grid structure. Useful when embedding a pane inside\n * another styled container.\n *\n * ## CSS custom properties\n *\n * | Property                      | Default                       | Description                          |\n * |-------------------------------|-------------------------------|--------------------------------------|\n * | `--header-area-padding`       | `var(--ymt-spacing-xl)`       | Padding of the header area.          |\n * | `--header-area-background`    | `transparent`                 | Background of the header area.       |\n * | `--header-area-border-color`  | `transparent`                 | Bottom border of the header area.    |\n * | `--main-area-padding`         | `0`                           | Padding of the body area.            |\n * | `--pane-background-color`     | `var(--ymt-surface)`          | Background of the pane.              |\n * | `--busy-border-width`         | `2px`                         | Width of the busy indicator border.  |\n * | `--busy-border-color`         | `var(--ymt-primary)`          | Color of the busy indicator border.  |\n * | `--enter-animation-duration`  | `0.15s`                       | Duration of the fade-in animation.   |\n * | `--enter-animation-delay`     | `0s`                          | Delay before the fade-in starts.     |\n */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  hostDirectives: [\n    {\n      directive: FullscreenDirective,\n      outputs: ['fullscreenEnter', 'fullscreenExit']\n    }\n  ],\n  host: {\n    '[class.plain]': 'plain()',\n    '[class.busy]': 'busy()',\n    '[class.no-animation]': 'noAnimation()'\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class YmtPaneComponent {\n  /**\n   * This static block runs once when the class is first loaded (not per instance).\n   * It registers a custom CSS property (--busy-angle) with the browser's CSS engine via\n   * CSS.registerProperty().\n   * Why it's needed: Normally, CSS custom properties (e.g. --busy-angle) are just\n   * strings — the browser can't interpolate them in animations. By registering the\n   * property with syntax: '<angle>', the browser knows it's an angle value and can\n   * smoothly animate it from 0deg to 360deg in the keyframe.\n   * Why it's in JS instead of CSS: The standard CSS way is @property --busy-angle { ... }\n   * (which was in the original SCSS). But Angular's emulated view encapsulation doesn't\n   * pass @property at-rules through to the document correctly, so the property never got\n   * registered and the animation was static. CSS.registerProperty() is the JavaScript\n   * equivalent and works globally regardless of Angular's style scoping.\n   * The try/catch: CSS.registerProperty() throws if the same property name is registered\n   * twice. Since this component could be bundled in multiple chunks or the module re-evaluated,\n   * the catch silently ignores the duplicate registration error.\n   */\n  static {\n    try {\n      CSS.registerProperty({\n        name: '--busy-angle',\n        syntax: '<angle>',\n        initialValue: '0deg',\n        inherits: false\n      });\n    } catch {\n      // Already registered or unsupported\n    }\n  }\n\n  #fullscreen = inject(FullscreenDirective);\n\n  /**\n   * Template for action buttons rendered in the top bar area of the pane.\n   * Use `icon-button-size=\"small\"` or `icon-button-size=\"extra-small\"` on icon\n   * buttons for proper alignment.\n   *\n   * ```html\n   * <ymt-pane [topBarActions]=\"actions\">\n   *   <ymt-pane-body>Content</ymt-pane-body>\n   * </ymt-pane>\n   *\n   * <ng-template #actions>\n   *   <button ymt-icon-button icon-button-size=\"small\"><mat-icon>settings</mat-icon></button>\n   * </ng-template>\n   * ```\n   */\n  topBarActions = input<TemplateRef<unknown>>();\n\n  /**\n   * When set to true, the pane border will be replaced with an animated\n   * conic-gradient border to indicate a busy/loading state.\n   */\n  busy = input<boolean>(false);\n\n  /**\n   * Disable the default fade-in enter animation.\n   */\n  noAnimation = input<boolean>(false);\n\n  /**\n   * Setting this to true will remove the default styles for the pane. So it will\n   * render without border-radius, border and background color, but keep the inner\n   * structure. This is useful when you want to use the pane inside another container\n   * and want to apply custom styles to the pane.\n   */\n  plain = input<boolean>(false);\n\n  /** Read-only signal indicating whether fullscreen is currently active. */\n  fullscreenActive = this.#fullscreen.active;\n\n  /** Toggle fullscreen mode on/off. */\n  toggleFullscreen(): void {\n    this.#fullscreen.toggle();\n  }\n\n  /** Enter fullscreen mode. */\n  enterFullscreen(): void {\n    this.#fullscreen.enter();\n  }\n\n  /** Exit fullscreen mode. */\n  exitFullscreen(): void {\n    this.#fullscreen.exit();\n  }\n}\n","@if (topBarActions()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\"></ymt-pane-top-bar>\n}\n<ng-content></ng-content>\n","import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\n@Component({\n  selector: 'ymt-pane-footer',\n  imports: [CommonModule],\n  templateUrl: './pane-footer.component.html',\n  styleUrl: './pane-footer.component.scss'\n})\nexport class YmtPaneFooterComponent {}\n","<footer><ng-content></ng-content></footer>\n","import { NgModule } from '@angular/core';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneFooterComponent } from './pane/pane-footer/pane-footer.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneBodyComponent, YmtPaneFooterComponent, YmtPaneAsideComponent];\n\n@NgModule({\n  imports: cmp,\n  exports: cmp\n})\nexport class YmtPanesModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1.FullscreenDirective"],"mappings":"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"}

package/fesm2022/yuuvis-material.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Inject, Injectable, inject, signal, makeEnvironmentProviders, input, booleanAttribute, ElementRef, EnvironmentInjector, ApplicationRef, effect, createComponent, Directive, DestroyRef, viewChild, untracked, Input, HostBinding, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Inject, Injectable, inject, signal, makeEnvironmentProviders, provideEnvironmentInitializer, input, booleanAttribute, ElementRef, EnvironmentInjector, ApplicationRef, effect, createComponent, Directive, DestroyRef, viewChild, untracked, Input, HostBinding, HostListener, ChangeDetectionStrategy, Component } from '@angular/core';
 import { MAT_NATIVE_DATE_FORMATS, DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter, MAT_DATE_LOCALE, MAT_RIPPLE_GLOBAL_OPTIONS, NativeDateModule } from '@angular/material/core';
+import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
 import { MatIconRegistry } from '@angular/material/icon';
-import { MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { MAT_TABS_CONFIG } from '@angular/material/tabs';
 import { MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
@@ -15,7 +15,7 @@ import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { MatDatepickerIntl, MatDatepicker, MatDatepickerInput, MatDateRangeInput, MatDateRangePicker, MatEndDate, MatStartDate } from '@angular/material/datepicker';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { fromEvent, debounceTime, ReplaySubject, Subject } from 'rxjs';
+import { fromEvent, debounceTime, ReplaySubject, BehaviorSubject, Subject } from 'rxjs';
 import { MatIconButton, MatButton } from '@angular/material/button';
 import { MatInput } from '@angular/material/input';
 import * as i1$1 from '@angular/forms';
@@ -174,35 +174,54 @@ var DeviceScreenOrientation;
 })(DeviceScreenOrientation || (DeviceScreenOrientation = {}));
 
 /**
- * This service is used to adapt styles and designs of the client to
- * different devices and screen sizes.
- *
- * Using `screenChange$` observable you are able to monitor changes to
- * the screen size and act upon it.
- *
- * This service will also adds attributes to the body tag that reflect the
- * current screen/device state. This way you can apply secific styles in your
- * css files for different screen resolutions and orientations.
+ * Service that adapts the application layout and behavior to different devices,
+ * screen sizes, orientations, and browser zoom levels.
  *
- * Attributes applied to the body tag are:
+ * This service operates globally as a singleton, listening to window resize events
+ * and maintaining reactive state about the current screen and zoom conditions.
+ * It also writes attributes to the `<body>` element so that CSS rules can respond
+ * to screen state without requiring Angular bindings.
  *
- * - `data-screen` - [s, m, l, xl] - for different screen sizes
- * (s: for mobile phone like screen sizes, m: for tablet like screen
- * sizes, 'l': for desktop like screen sizes, 'xl': for screen sizes exceeding
- * the desktop screen size).
+ * **Key Features:**
+ * - Screen size classification (s / m / l / xl) based on viewport dimensions
+ * - Orientation detection (portrait / landscape), with native API fallback on mobile
+ * - Small-screen layout signal for toggling compact UI modes
+ * - Browser zoom level tracking via `pageZoomPercentage$`
+ * - Automatic `<body>` attribute management for CSS-driven responsive styles
  *
- * - `data-orientation` - [portrait, landscape] - for the current screen orientation
+ * **Usage:**
+ * 1. `DeviceService` is initialized automatically by `provideYmtMaterial()` in `app.config.ts`
+ * 2. Pass `{ supportsSmallScreens: true }` to `provideYmtMaterial()` if the app has a dedicated compact layout
+ * 3. Inject `DeviceService` wherever needed — it is already initialized
+ * 4. Subscribe to `screenChange$` or `pageZoomPercentage$` to react to changes
  *
- * - `data-touch-enabled` - [true] - if the device has touch capabilities (won't be added if the device doesn't have touch capabilities)
+ * **Body attributes written by this service:**
+ * - `data-screen-size` — current size bucket: `s` | `m` | `l` | `xl`
+ * - `data-screen-orientation` — `portrait` | `landscape`
+ * - `data-touch-enabled` — present only when the device supports touch input
  *
  * ```html
- * <body data-screen-size="s" data-screen-orientation="portrait" data-touch-enabled="true">
- * ...
+ * <body data-screen-size="l" data-screen-orientation="landscape">
+ *   ...
  * </body>
  * ```
+ *
+ * **Screen size boundaries:**
+ *
+ * | Size | Range                      | Device                            |
+ * |------|----------------------------|-----------------------------------|
+ * | `s`  | < 600px                    | mobile phone                      |
+ * | `m`  | 600px – 900/1200px         | tablet (upper bound by orientation) |
+ * | `l`  | 900/1200px – 1800px        | desktop                           |
+ * | `xl` | ≥ 1800px                   | wide / large desktop              |
+ *
+ * @see {@link DeviceScreen} for the screen state shape emitted by `screenChange$`
  */
 class DeviceService {
+    //#region Dependencies
     #deviceDetectorService = inject(DeviceDetectorService);
+    //#endregion
+    //#region Properties
     #upperScreenBoundary = {
         small: 600,
         mediumPortrait: 900,
@@ -212,36 +231,126 @@ class DeviceService {
     #resize$ = fromEvent(window, 'resize').pipe(debounceTime(this.#getDebounceTime()));
     #screen;
     #screenSource = new ReplaySubject(1);
+    /**
+     * Emits the current {@link DeviceScreen} state whenever the window is resized.
+     *
+     * The emitted value includes the size bucket (`s` | `m` | `l` | `xl`), orientation,
+     * and the raw viewport dimensions in pixels. Use this stream to reactively adapt
+     * layout or behavior whenever the screen state changes.
+     *
+     * Replay buffer of 1 — late subscribers always receive the most recent value
+     * without waiting for the next resize event.
+     *
+     * @example
+     * ```ts
+     * deviceService.screenChange$.subscribe(screen => {
+     *   console.log(screen.size);        // 'l'
+     *   console.log(screen.orientation); // 'landscape'
+     *   console.log(screen.width);       // 1440
+     * });
+     * ```
+     */
     screenChange$ = this.#screenSource.asObservable();
     /**
-     * Signal to indicate if the screen size is small (e.g. mobile phone).
-     * This will only be triggered if `supportsSmallScreens` is set to true.
-     * Major components will use this metric to adapt to 'small screen behavior' and so can you
+     * Signal that indicates whether the app should render in a compact small-screen layout.
+     *
+     * This is `true` only when all three conditions are met:
+     * 1. `supportsSmallScreens` was passed as `true` to {@link init}
+     * 2. The current screen size bucket is `s` (< 600px viewport width)
+     * 3. The current orientation is `portrait`
+     *
+     * Components that have a dedicated compact mode should read this signal
+     * and switch their layout accordingly.
+     *
+     * @default false
      */
     smallScreenLayout = signal(false);
     #supportsSmallScreens = signal(false);
     /**
-     * if the device is a mobile device (android / iPhone / windows-phone etc)
+     * `true` if the current device is a mobile phone (Android, iPhone, Windows Phone, etc.).
+     * Populated once at service creation from `ngx-device-detector`.
      */
     isMobile = this.#deviceDetectorService.isMobile();
     /**
-     *  if the device us a tablet (iPad etc)
+     * `true` if the current device is a tablet (e.g. iPad).
+     * Populated once at service creation from `ngx-device-detector`.
      */
     isTablet = this.#deviceDetectorService.isTablet();
     /**
-     * if the app is running on a Desktop browser
+     * `true` if the app is running in a desktop browser.
+     * Populated once at service creation from `ngx-device-detector`.
      */
     isDesktop = this.#deviceDetectorService.isDesktop();
+    /**
+     * Detailed device and browser information provided by `ngx-device-detector`.
+     * Includes OS, browser name and version, device type, and user agent.
+     */
     info = this.#deviceDetectorService.getDeviceInfo();
+    /**
+     * `true` if the device supports touch input.
+     * Detected via `ontouchstart` presence or `navigator.maxTouchPoints > 0`.
+     */
     isTouchEnabled = this.#isTouchEnabled();
-    constructor() {
-        this.#resize$.subscribe((e) => {
-            this.#setScreen();
-        });
-    }
+    #pageZoom$ = new BehaviorSubject(0);
+    /**
+     * Emits the current browser zoom level as a percentage whenever it changes.
+     *
+     * The value is derived from `window.outerWidth / window.innerWidth * 100`.
+     * At 100% zoom the value is `100`, at 150% it is `150`, and so on.
+     *
+     * Emits only when the value actually changes (no duplicate emissions).
+     * Updates are driven by the window `resize` event, which all major browsers
+     * fire when the user changes the zoom level via Ctrl+/- or Ctrl+scroll.
+     * On desktop there is a 500ms debounce; on mobile, no debounce is applied.
+     *
+     * @example
+     * ```ts
+     * deviceService.pageZoomPercentage$.subscribe(zoom => {
+     *   console.log(`Current zoom: ${zoom}%`); // e.g. "Current zoom: 150%"
+     * });
+     * ```
+     */
+    pageZoomPercentage$ = this.#pageZoom$.asObservable();
+    //#endregion
+    //#region Public APIs
+    /**
+     * Initializes the service and performs the first screen state evaluation.
+     *
+     * Called automatically by `provideYmtMaterial()` during application startup.
+     *
+     * Immediately evaluates the current viewport dimensions, classifies the screen size
+     * and orientation, writes the result to the `<body>` attributes, and emits the initial
+     * value on `screenChange$`. Subsequent updates are handled automatically via the
+     * internal resize listener.
+     *
+     * @param supportsSmallScreens - Set to `true` if the application has a dedicated compact
+     * layout for small portrait screens. When `true`, the {@link smallScreenLayout} signal
+     * will be set to `true` whenever the screen bucket is `s` and orientation is `portrait`.
+     * Defaults to `false`.
+     */
     init(supportsSmallScreens = false) {
         this.#supportsSmallScreens.set(supportsSmallScreens);
         this.#setScreen();
+        this.#setPageZoom();
+        this.#handleScreenResize();
+    }
+    //#endregion
+    //#region Utilities
+    #getPageZoom() {
+        // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+        return (window.outerWidth / window.innerWidth) * 100;
+    }
+    #setPageZoom() {
+        const zoom = this.#getPageZoom();
+        if (zoom !== this.#pageZoom$.value) {
+            this.#pageZoom$.next(zoom);
+        }
+    }
+    #handleScreenResize() {
+        this.#resize$.subscribe(() => {
+            this.#setScreen();
+            this.#setPageZoom();
+        });
     }
     #isTouchEnabled() {
         return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
@@ -252,10 +361,12 @@ class DeviceService {
             height: window.innerHeight
         };
         let orientation = bounds.width >= bounds.height ? DeviceScreenOrientation.LANDSCAPE : DeviceScreenOrientation.PORTRAIT;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         if (this.isMobile && window.screen['orientation']) {
             const screenOrientation = window.screen['orientation'].type;
             if (screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary') {
                 orientation = DeviceScreenOrientation.LANDSCAPE;
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             }
             else if (screenOrientation === 'portrait-primary' || screenOrientation === 'portrait-secondary') {
                 orientation = DeviceScreenOrientation.PORTRAIT;
@@ -288,7 +399,9 @@ class DeviceService {
         if (this.#isBelow(this.#upperScreenBoundary.small, bounds)) {
             return 's';
         }
-        else if (this.#isBelow(orientation === 'landscape' ? this.#upperScreenBoundary.mediumLandscape : this.#upperScreenBoundary.mediumPortrait, bounds)) {
+        else if (this.#isBelow(orientation === 'landscape'
+            ? this.#upperScreenBoundary.mediumLandscape
+            : this.#upperScreenBoundary.mediumPortrait, bounds)) {
             return 'm';
         }
         else if (this.#isBelow(this.#upperScreenBoundary.large, bounds)) {
@@ -304,7 +417,7 @@ class DeviceService {
     }
     #getDebounceTime() {
         // on mobile devices resize only happens when rotating the device or when
-        // keyboard appears, so we dont't need to debounce
+        // keyboard appears, so we don't need to debounce
         return this.isMobile ? 0 : 500;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -315,7 +428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [] });
+        }] });
 
 /* Draft */
 class YmtMatPaginatorIntlService extends MatPaginatorIntl {
@@ -357,12 +470,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
             type: Injectable
         }] });
 
-const provideYmtMaterial = (customTheme) => {
+const provideYmtMaterial = (customTheme, options) => {
     const providers = [
         /**
          * Material Date Locale Default
          */
-        { provide: MAT_DATE_LOCALE, useFactory: (translate) => translate.defaultLang, deps: [TranslateService] },
+        {
+            provide: MAT_DATE_LOCALE,
+            useFactory: (translate) => translate.defaultLang,
+            deps: [TranslateService]
+        },
         { provide: MAT_DATE_FORMATS, useValue: YMT_DATE_FORMATS },
         /**
          * Material Datepicker Internationalization Service Override
@@ -444,11 +561,17 @@ const provideYmtMaterial = (customTheme) => {
             }
         }
     ];
-    return makeEnvironmentProviders(providers);
+    return makeEnvironmentProviders([
+        ...providers,
+        provideEnvironmentInitializer(() => {
+            inject(DeviceService).init(options?.supportsSmallScreens);
+        })
+    ]);
 };
 
 var YMT_ICON_BUTTON_SIZE;
 (function (YMT_ICON_BUTTON_SIZE) {
+    YMT_ICON_BUTTON_SIZE["extraSmall"] = "extra-small";
     YMT_ICON_BUTTON_SIZE["small"] = "small";
     YMT_ICON_BUTTON_SIZE["medium"] = "medium";
 })(YMT_ICON_BUTTON_SIZE || (YMT_ICON_BUTTON_SIZE = {}));
@@ -479,8 +602,11 @@ class YmtIconButtonDirective {
         this.#setMaterialInputs();
     }
     #applySizeClass() {
-        this.size() === YMT_ICON_BUTTON_SIZE.small ? this.#host.classList.add(`ymt-icon-button--size-s`) : this.#host.classList.remove(`ymt-icon-button--size-s`);
-        this.size() === YMT_ICON_BUTTON_SIZE.medium ? this.#host.classList.add(`ymt-icon-button--size-m`) : this.#host.classList.remove(`ymt-icon-button--size-m`);
+        const size = this.size();
+        const host = this.#host.classList;
+        host.toggle('ymt-icon-button--size-xs', size === YMT_ICON_BUTTON_SIZE.extraSmall);
+        host.toggle('ymt-icon-button--size-s', size === YMT_ICON_BUTTON_SIZE.small);
+        host.toggle('ymt-icon-button--size-m', size === YMT_ICON_BUTTON_SIZE.medium);
     }
     #setMaterialInputs() {
         const inputs = this.#materialIconButtonInputs.map(({ name, signal }) => ({ name, value: signal() }));
@@ -517,12 +643,12 @@ var YMT_BUTTON_SIZE;
     YMT_BUTTON_SIZE["medium"] = "medium";
 })(YMT_BUTTON_SIZE || (YMT_BUTTON_SIZE = {}));
 
-var MatButtonAttributeEnum;
-(function (MatButtonAttributeEnum) {
-    MatButtonAttributeEnum["primary"] = "mat-flat-button";
-    MatButtonAttributeEnum["secondary"] = "mat-stroked-button";
-    MatButtonAttributeEnum["tertiary"] = "mat-button";
-})(MatButtonAttributeEnum || (MatButtonAttributeEnum = {}));
+const MatButtonAttributeMap = {
+    primary: 'mat-flat-button',
+    secondary: 'mat-stroked-button',
+    tertiary: 'mat-button',
+    danger: 'mat-flat-button'
+};
 class YmtButtonDirective {
     ymtButton = input('primary');
     disabled = input(false, { transform: booleanAttribute });
@@ -538,7 +664,7 @@ class YmtButtonDirective {
     #iconPrefix = [];
     #noneIconNodes = [];
     #iconSuffix = [];
-    #matButtonAttribute = MatButtonAttributeEnum;
+    #matButtonAttribute = MatButtonAttributeMap;
     constructor() {
         effect(() => {
             const disabled = this.disabled();
@@ -579,6 +705,9 @@ class YmtButtonDirective {
     }
     #setInitialAttributesToHost() {
         this.#hostElement.setAttribute(this.#matButtonAttribute[this.ymtButton()], '');
+        if (this.ymtButton() === 'danger') {
+            this.#hostElement.classList.add('ymt-button--danger');
+        }
     }
     #getIconPrefixElements() {
         return Array.from(this.#hostElement.querySelectorAll('mat-icon:not([iconPositionEnd])'));