npm - @yuuvis/material - Versions diffs - 2.17.0 → 2.19.0 - Mend

@yuuvis/material 2.17.0 → 2.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (22) hide show

package/badge/badge.component.d.ts +38 -5
package/badge/index.d.ts +0 -1
package/badge/model/badge.model.d.ts +1 -0
package/fesm2022/yuuvis-material-badge.mjs +47 -13
package/fesm2022/yuuvis-material-badge.mjs.map +1 -1
package/fesm2022/yuuvis-material-layout.mjs +3 -3
package/fesm2022/yuuvis-material-layout.mjs.map +1 -1
package/fesm2022/yuuvis-material-panes.mjs +210 -65
package/fesm2022/yuuvis-material-panes.mjs.map +1 -1
package/fesm2022/yuuvis-material.mjs +179 -48
package/fesm2022/yuuvis-material.mjs.map +1 -1
package/layout/lib/components/master-details-layout/master-details-layout.component.d.ts +2 -2
package/lib/assets/i18n/ar.json +22 -0
package/lib/directives/button/ymt-button.directive.d.ts +3 -2
package/lib/providers/material.providers.d.ts +3 -1
package/lib/services/device.service.d.ts +112 -25
package/package.json +1 -1
package/panes/lib/pane/pane-header/pane-header.component.d.ts +59 -26
package/panes/lib/pane/pane.component.d.ts +114 -34
package/scss/material-components/_button.scss +31 -10
package/scss/material-components/_expansion-panel.scss +17 -0
package/scss/material-components/index.scss +1 -0

package/fesm2022/yuuvis-material.mjs CHANGED Viewed

@@ -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,7 +561,12 @@ const provideYmtMaterial = (customTheme) => {
             }
         }
     ];
-    return makeEnvironmentProviders(providers);
+    return makeEnvironmentProviders([
+        ...providers,
+        provideEnvironmentInitializer(() => {
+            inject(DeviceService).init(options?.supportsSmallScreens);
+        })
+    ]);
 };
 var YMT_ICON_BUTTON_SIZE;
@@ -521,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 });
@@ -542,7 +664,7 @@ class YmtButtonDirective {
     #iconPrefix = [];
     #noneIconNodes = [];
     #iconSuffix = [];
-    #matButtonAttribute = MatButtonAttributeEnum;
+    #matButtonAttribute = MatButtonAttributeMap;
     constructor() {
         effect(() => {
             const disabled = this.disabled();
@@ -583,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])'));
@@ -592,7 +717,9 @@ class YmtButtonDirective {
     }
     #getNoneIconNodes() {
         const iter = document.createNodeIterator(this.#hostElement, NodeFilter.SHOW_ALL, (node) => {
-            return node.nodeName.toLowerCase() !== 'mat-icon' && node.parentElement === this.#hostElement ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+            return node.nodeName.toLowerCase() !== 'mat-icon' && node.parentElement === this.#hostElement
+                ? NodeFilter.FILTER_ACCEPT
+                : NodeFilter.FILTER_REJECT;
         });
         let currentNode;
         const filteredNodes = [];
@@ -602,8 +729,12 @@ class YmtButtonDirective {
         return filteredNodes;
     }
     #applySizeClass() {
-        this.size() === YMT_BUTTON_SIZE.small ? this.#hostElement.classList.add(`ymt-button--size-s`) : this.#hostElement.classList.remove(`ymt-button--size-s`);
-        this.size() === YMT_BUTTON_SIZE.medium ? this.#hostElement.classList.add(`ymt-button--size-m`) : this.#hostElement.classList.remove(`ymt-button--size-m`);
+        this.size() === YMT_BUTTON_SIZE.small
+            ? this.#hostElement.classList.add(`ymt-button--size-s`)
+            : this.#hostElement.classList.remove(`ymt-button--size-s`);
+        this.size() === YMT_BUTTON_SIZE.medium
+            ? this.#hostElement.classList.add(`ymt-button--size-m`)
+            : this.#hostElement.classList.remove(`ymt-button--size-m`);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: YmtButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.20", type: YmtButtonDirective, isStandalone: true, selector: "button[ymtButton], a[ymtButton]", inputs: { ymtButton: { classPropertyName: "ymtButton", publicName: "ymtButton", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaDisabled: { classPropertyName: "ariaDisabled", publicName: "aria-disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "button-size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });