@yuuvis/material 2.3.16 → 2.3.18

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-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/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-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.component.ts","../../../../../libs/yuuvis/material/panes/src/lib/pane/pane.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/panes.module.ts","../../../../../libs/yuuvis/material/panes/src/yuuvis-material-panes.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { Component, input, TemplateRef } from '@angular/core';\n\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule],\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   * 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"," <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>","import { Component, effect, input, output, signal, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [YmtIconButtonDirective, MatIconModule, CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n  host: {\n    '[class.inverse]': 'paneToggle() === \"end\"',\n    '[class.pane-toggle]': 'paneToggle() !== \"none\"'\n  }\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n  /**\n   * Position of the pane toggle button (default: 'none')\n   * Set to 'none' the pane toggle button in the top bar is hidden.\n   */\n  paneToggle = input<'start' | 'end' | 'none'>('none');\n\n  /**\n   * Event emitted when the pane toggle button is clicked.\n   */\n  paneToggled = output<boolean>();\n\n  paneCollapsed = signal<boolean>(false);\n  #paneCollapsedEffect = effect(() => {\n    this.paneToggled.emit(this.paneCollapsed());\n  });\n\n  togglePane() {\n    this.paneCollapsed.set(!this.paneCollapsed());\n  }\n}\n"," @let ta = actions();\n  <div class=\"top-bar\">\n    @if (paneToggle() != 'none') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>","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 { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, output, signal, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';\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 [header]=\"false\">\n *  Pane content goes here.\n * </ymt-pane>\n * ```\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 */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  host: {\n    '[class.collapsed]': 'collapsed()'\n  }\n})\nexport class YmtPaneComponent {\n\n  // paneHeader = contentChild(YmtPaneHeaderComponent);\n  // paneBody = contentChild(YmtPaneBodyComponent);\n  paneAside = contentChild(YmtPaneAsideComponent);\n\n  /**\n   * TemplateRef for actions area in the top bar.\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<any>>();\n  /**\n   * Whether to show the top bar (default: true)\n   */\n  topBar = input<boolean>(true);\n\n  /**\n   * Position of the pane toggle button (default: 'none')\n   * Set to 'none' the pane toggle button in the top bar is hidden.\n   */\n  paneToggle = input<'start' | 'end' | 'none'>('none');\n\n  /**\n   * Event emitted when the pane toggle button is clicked.\n   */\n  paneToggled = output<boolean>();\n\n  collapsed = signal<boolean>(false);\n\n  togglePane(collapsed: boolean) {\n    this.collapsed.set(collapsed);\n    this.paneToggled.emit(collapsed);\n  }\n}\n","@if (topBar()) {\n  <ymt-pane-top-bar [actions]=\"topBarActions()\" [paneToggle]=\"paneToggle()\" \n  (paneToggled)=\"togglePane($event)\"></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-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 { NgModule } from '@angular/core';\nimport { YmtPaneHeaderComponent } from './pane/pane-header/pane-header.component';\nimport { YmtPaneTopBarComponent } from './pane/pane-top-bar/pane-top-bar.component';\nimport { YmtPaneComponent } from './pane/pane.component';\nimport { YmtPaneBodyComponent } from './pane/pane-body/pane-body.component';\nimport { YmtPaneAsideComponent } from './pane/pane-aside/pane-aside.component';\n\nconst cmp = [YmtPaneComponent, YmtPaneHeaderComponent, YmtPaneTopBarComponent, YmtPaneBodyComponent, 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":["i2"],"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/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, input, TemplateRef } from '@angular/core';\n\n@Component({\n  selector: 'ymt-pane-header',\n  imports: [CommonModule],\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   * 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"," <header>\n    <h2>{{ title() }}</h2>\n    <small>{{ subtitle() }}</small>\n    @let a = actions();\n    @if (a) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"a\"></ng-container>\n      </div>\n    }\n  </header>","import { Component, effect, input, output, signal, TemplateRef } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtIconButtonDirective } from '@yuuvis/material';\n\n@Component({\n  selector: 'ymt-pane-top-bar',\n  imports: [YmtIconButtonDirective, MatIconModule, CommonModule],\n  templateUrl: './pane-top-bar.component.html',\n  styleUrl: './pane-top-bar.component.scss',\n  host: {\n    '[class.inverse]': 'modeAlign() === \"end\"',\n    '[class.has-mode]': 'mode() !== undefined'\n  }\n})\nexport class YmtPaneTopBarComponent {\n  /**\n   * TemplateRef for actions area in the top bar.\n   */\n  actions = input<TemplateRef<any>>();\n  modeAlign = input<'start' | 'end'>('start');\n\n  mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n  /**\n   * Event emitted when the pane toggle button is clicked.\n   */\n  paneToggled = output<boolean>();\n  navigationClicked = output<boolean>();\n\n  paneCollapsed = signal<boolean>(false);\n  #paneCollapsedEffect = effect(() => {\n    this.paneToggled.emit(this.paneCollapsed());\n  });\n\n  togglePane() {\n    this.paneCollapsed.set(!this.paneCollapsed());\n  }\n\n  navClick() {\n    this.navigationClicked.emit(true);\n  }\n}\n"," @let ta = actions();\n  <div class=\"top-bar\">\n    @let m = mode();\n    @if (m === 'toggle') {\n      <button class=\"pane-toggle\" ymt-icon-button icon-button-size=\"small\" (click)=\"togglePane()\">\n        <mat-icon>{{ paneCollapsed() ? 'right_panel_open' : 'right_panel_close' }}</mat-icon>\n      </button>\n    } @else if (m === 'navigation') {\n      <button class=\"pane-nav\" ymt-icon-button icon-button-size=\"small\" (click)=\"navClick()\">\n        <mat-icon>arrow_back</mat-icon>\n      </button>\n    }\n    @if (ta) {\n      <div class=\"actions\">\n        <ng-container *ngTemplateOutlet=\"ta\"></ng-container>\n      </div>\n    }\n  </div>","import { CommonModule } from '@angular/common';\nimport { Component, contentChild, input, output, signal, TemplateRef } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { YmtPaneAsideComponent } from './pane-aside/pane-aside.component';\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 [header]=\"false\">\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 */\n@Component({\n  selector: 'ymt-pane',\n  imports: [CommonModule, YmtPaneTopBarComponent, MatIconModule],\n  templateUrl: './pane.component.html',\n  styleUrl: './pane.component.scss',\n  host: {\n    '[class.collapsed]': 'collapsed()',\n    '[class.plain]': 'plain()'\n  }\n})\nexport class YmtPaneComponent {\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<any>>();\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  /**\n   * A pane may have different modes to control the behavior of the top bar.\n   * - `navigation`: Shows a back button on the left side of the top bar to close the pane or navigate back.\n   * - `toggle`: Shows a toggle button on the left side of the top bar to collapse/expand the pane.\n   */\n  mode = input<'navigation' | 'toggle' | undefined>(undefined);\n\n  modeAlign = input<'start' | 'end'>('start');\n  /**\n   * Event emitted when the pane toggle button is clicked. This toggle button is shown\n   * when mode is set to 'toggle'.\n   */\n  paneToggled = output<boolean>();\n\n  /**\n   * Event emitted when the navigation button is clicked. Navigation button is shown when\n   * mode is set to 'navigation'.\n   */\n  navigationClicked = output<boolean>();\n\n  /**\n   * Collapsed state of the pane. Only relevant when mode is set to 'toggle'.\n   */\n  collapsed = signal<boolean>(false);\n\n  togglePane(collapsed: boolean) {\n    this.collapsed.set(collapsed);\n    this.paneToggled.emit(collapsed);\n  }\n}\n","@let topBarVisible = mode() || topBarActions();\n@if (topBarVisible) {\n  <ymt-pane-top-bar\n    [actions]=\"topBarActions()\"\n    [modeAlign]=\"modeAlign()\"\n    [mode]=\"mode()\"\n    (navigationClicked)=\"navigationClicked.emit(true)\"\n    (paneToggled)=\"togglePane($event)\"\n  ></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":["i2"],"mappings":"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"}

package/fesm2022/yuuvis-material.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Inject, Injectable, inject, makeEnvironmentProviders, input, booleanAttribute, ElementRef, EnvironmentInjector, ApplicationRef, effect, createComponent, Directive, signal, DestroyRef, viewChild, untracked, Input, HostBinding, HostListener, ChangeDetectionStrategy, Component } 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 { MAT_NATIVE_DATE_FORMATS, DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter, MAT_DATE_LOCALE, MAT_RIPPLE_GLOBAL_OPTIONS, NativeDateModule } from '@angular/material/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
 import { MatIconRegistry } from '@angular/material/icon';
@@ -14,11 +14,12 @@ import { DOCUMENT, CommonModule } from '@angular/common';
 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 { MatIconButton, MatButton } from '@angular/material/button';
 import { MatInput } from '@angular/material/input';
 import * as i1$1 from '@angular/forms';
 import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { Subject } from 'rxjs';
 import { MatTimepicker, MatTimepickerInput } from '@angular/material/timepicker';
 
 class YmtMatIconRegistryService extends MatIconRegistry {
@@ -154,6 +155,156 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
+var DeviceScreenOrientation;
+(function (DeviceScreenOrientation) {
+    DeviceScreenOrientation["PORTRAIT"] = "portrait";
+    DeviceScreenOrientation["LANDSCAPE"] = "landscape";
+})(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.
+ *
+ * Attributes applied to the body tag are:
+ *
+ * - `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).
+ *
+ * - `data-orientation` - [portrait, landscape] - for the current screen orientation
+ *
+ * - `data-touch-enabled` - [true] - if the device has touch capabilities (won't be added if the device doesn't have touch capabilities)
+ *
+ * ```html
+ * <body data-screen-size="s" data-screen-orientation="portrait" data-touch-enabled="true">
+ * ...
+ * </body>
+ * ```
+ */
+class DeviceService {
+    #deviceDetectorService = inject(DeviceDetectorService);
+    #upperScreenBoundary = {
+        small: 600,
+        mediumPortrait: 900,
+        mediumLandscape: 1200,
+        large: 1800
+    };
+    #resize$ = fromEvent(window, 'resize').pipe(debounceTime(this.#getDebounceTime()));
+    #screen;
+    #screenSource = new ReplaySubject(1);
+    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
+     */
+    smallScreenLayout = signal(false);
+    #supportsSmallScreens = signal(false);
+    /**
+     * if the device is a mobile device (android / iPhone / windows-phone etc)
+     */
+    isMobile = this.#deviceDetectorService.isMobile();
+    /**
+     *  if the device us a tablet (iPad etc)
+     */
+    isTablet = this.#deviceDetectorService.isTablet();
+    /**
+     * if the app is running on a Desktop browser
+     */
+    isDesktop = this.#deviceDetectorService.isDesktop();
+    info = this.#deviceDetectorService.getDeviceInfo();
+    isTouchEnabled = this.#isTouchEnabled();
+    constructor() {
+        this.#resize$.subscribe((e) => {
+            this.#setScreen();
+        });
+    }
+    init(supportsSmallScreens = false) {
+        this.#supportsSmallScreens.set(supportsSmallScreens);
+        this.#setScreen();
+    }
+    #isTouchEnabled() {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    }
+    #setScreen() {
+        const bounds = {
+            width: window.innerWidth,
+            height: window.innerHeight
+        };
+        let orientation = bounds.width >= bounds.height ? DeviceScreenOrientation.LANDSCAPE : DeviceScreenOrientation.PORTRAIT;
+        if (this.isMobile && window.screen['orientation']) {
+            const screenOrientation = window.screen['orientation'].type;
+            if (screenOrientation === 'landscape-primary' || screenOrientation === 'landscape-secondary') {
+                orientation = DeviceScreenOrientation.LANDSCAPE;
+            }
+            else if (screenOrientation === 'portrait-primary' || screenOrientation === 'portrait-secondary') {
+                orientation = DeviceScreenOrientation.PORTRAIT;
+            }
+        }
+        this.#screen = {
+            size: this.#getScreenSize(bounds, orientation),
+            orientation,
+            width: bounds.width,
+            height: bounds.height
+        };
+        this.#screenSource.next(this.#screen);
+        this.smallScreenLayout.set(this.#supportsSmallScreens() && this.#screen.size === 's' && this.#screen.orientation === 'portrait');
+        this.#setupDOM(this.#screen);
+        // force change detection because resize will not be recognized by Angular in some cases
+        // TODO: check: causes recursive ticks in some cases ...
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        setTimeout(() => { }, 0);
+    }
+    #setupDOM(screen) {
+        const body = document.querySelector('body');
+        body.setAttribute('data-screen-size', screen.size);
+        body.setAttribute('data-screen-orientation', screen.orientation);
+        if (this.isTouchEnabled)
+            body.setAttribute('data-touch-enabled', 'true');
+        else
+            body.removeAttribute('data-touch-enabled');
+    }
+    #getScreenSize(bounds, orientation) {
+        if (this.#isBelow(this.#upperScreenBoundary.small, bounds)) {
+            return 's';
+        }
+        else if (this.#isBelow(orientation === 'landscape' ? this.#upperScreenBoundary.mediumLandscape : this.#upperScreenBoundary.mediumPortrait, bounds)) {
+            return 'm';
+        }
+        else if (this.#isBelow(this.#upperScreenBoundary.large, bounds)) {
+            return 'l';
+        }
+        else {
+            return 'xl';
+        }
+    }
+    #isBelow(size, bounds) {
+        const landscape = bounds.width < this.#upperScreenBoundary.large ? bounds.width >= bounds.height : false;
+        return (landscape && bounds.height < size) || (!landscape && bounds.width < size);
+    }
+    #getDebounceTime() {
+        // on mobile devices resize only happens when rotating the device or when
+        // keyboard appears, so we dont't need to debounce
+        return this.isMobile ? 0 : 500;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: DeviceService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
 /* Draft */
 class YmtMatPaginatorIntlService extends MatPaginatorIntl {
     #translate = inject(TranslateService);
@@ -837,5 +988,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { DatepickerComponent, DatepickerToggleComponent, YMT_BUTTON_SIZE, YMT_DATE_FROMATS, YMT_ICON_BUTTON_SIZE, YmtButtonDirective, YmtDateAdapterService, YmtDatepickerIntlService, YmtIconButtonDirective, YmtMatIconRegistryService, provideYmtDateAdapter, provideYmtMaterial };
+export { DatepickerComponent, DatepickerToggleComponent, DeviceScreenOrientation, DeviceService, YMT_BUTTON_SIZE, YMT_DATE_FROMATS, YMT_ICON_BUTTON_SIZE, YmtButtonDirective, YmtDateAdapterService, YmtDatepickerIntlService, YmtIconButtonDirective, YmtMatIconRegistryService, provideYmtDateAdapter, provideYmtMaterial };
 //# sourceMappingURL=yuuvis-material.mjs.map