cps-ui-kit 22.0.1 → 22.1.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, isPlatformBrowser, CommonModule, isPlatformServer, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, signal, Injectable, InjectionToken, ElementRef, Renderer2, HostAttributeToken, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, computed, SecurityContext, Directive, Pipe, NgModule, effect, untracked, provideAppInitializer, makeEnvironmentProviders, ViewChild, Inject, ViewEncapsulation, Injector, ChangeDetectorRef, booleanAttribute, ContentChildren, ContentChild, HostBinding, Self, Optional, NgZone, contentChild, numberAttribute, HostListener, output, afterRenderEffect, forwardRef, ViewChildren, TemplateRef, viewChildren, viewChild, Host, model, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
+import { inject, PLATFORM_ID, signal, Injectable, InjectionToken, ElementRef, Renderer2, HostAttributeToken, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, input, computed, NgZone, SecurityContext, Directive, Pipe, NgModule, effect, untracked, provideAppInitializer, makeEnvironmentProviders, ViewChild, Inject, ViewEncapsulation, Injector, ChangeDetectorRef, booleanAttribute, ContentChildren, ContentChild, HostBinding, Self, Optional, contentChild, numberAttribute, HostListener, output, afterRenderEffect, forwardRef, ViewChildren, TemplateRef, viewChildren, viewChild, Host, model, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { Validators, FormsModule, NgControl, NG_VALUE_ACCESSOR, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
@@ -661,6 +661,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                     }, template: "<div\n  aria-hidden=\"true\"\n  class=\"cps-progress-linear\"\n  data-testid=\"cps-progress-linear\"\n  [style.max-width]=\"cvtWidth()\"\n  [style.height]=\"cvtHeight()\"\n  [style.border-radius]=\"cvtRadius()\"\n  [style.background]=\"cssBgColor()\">\n  <div\n    class=\"cps-progress-linear-line inc\"\n    data-testid=\"cps-progress-linear-inc\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n  <div\n    class=\"cps-progress-linear-line dec\"\n    data-testid=\"cps-progress-linear-dec\"\n    [style.background]=\"cssColor()\"\n    [style.opacity]=\"opacity()\"></div>\n</div>\n", styles: [":host{width:100%}:host .cps-progress-linear{position:relative;overflow-x:hidden}:host .cps-progress-linear-line{position:absolute;height:inherit;left:-5%;top:0}:host .cps-progress-linear .inc{animation:increase 2s infinite}:host .cps-progress-linear .dec{animation:decrease 2s .5s infinite}@media(prefers-reduced-motion:reduce){:host .cps-progress-linear .inc{animation-duration:6s!important;animation-iteration-count:infinite!important}:host .cps-progress-linear .dec{animation-duration:6s!important;animation-iteration-count:infinite!important}}@keyframes increase{0%{left:-5%;width:5%}to{left:130%;width:100%}}@keyframes decrease{0%{left:-80%;width:80%}to{left:110%;width:10%}}\n"] }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], bgColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "bgColor", required: false }] }], opacity: [{ type: i0.Input, args: [{ isSignal: true, alias: "opacity", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/**
+ * Service for making accessible live-region announcements without relying on a
+ * specific component's live region. Creates two persistent hidden elements in
+ * document.body (one polite, one assertive) that screen readers monitor for
+ * content changes.
+ */
+class CpsLiveAnnouncerService {
+    constructor() {
+        this._document = inject(DOCUMENT);
+        this._ngZone = inject(NgZone);
+        this._platformId = inject(PLATFORM_ID);
+        this._isBrowser = isPlatformBrowser(this._platformId);
+        this._regions = {
+            polite: {
+                el: this._createElement('polite'),
+                writeTimer: undefined,
+                clearTimer: undefined
+            },
+            assertive: {
+                el: this._createElement('assertive'),
+                writeTimer: undefined,
+                clearTimer: undefined
+            }
+        };
+    }
+    /**
+     * Announces a message through the appropriate live region. Clears any
+     * existing text first so the same message can be re-announced, then writes
+     * the new text after `delayMs` so screen readers observe the content change.
+     * After `durationMs` the region is cleared automatically; pass `0` to keep
+     * the message indefinitely. Defaults to a next-tick write and 5000ms duration.
+     */
+    announce(message, politeness = 'polite', durationMs = 5000, delayMs = 0) {
+        if (!this._isBrowser)
+            return;
+        this.clear(politeness);
+        const region = this._regions[politeness];
+        this._ngZone.runOutsideAngular(() => {
+            region.writeTimer = setTimeout(() => {
+                region.writeTimer = undefined;
+                region.el.textContent = message;
+                if (durationMs > 0) {
+                    region.clearTimer = setTimeout(() => {
+                        region.clearTimer = undefined;
+                        region.el.textContent = '';
+                    }, durationMs);
+                }
+            }, delayMs);
+        });
+    }
+    /**
+     * Clears the live region without making a new announcement.
+     */
+    clear(politeness = 'polite') {
+        if (!this._isBrowser)
+            return;
+        const region = this._regions[politeness];
+        clearTimeout(region.writeTimer);
+        clearTimeout(region.clearTimer);
+        region.writeTimer = undefined;
+        region.clearTimer = undefined;
+        region.el.textContent = '';
+    }
+    ngOnDestroy() {
+        for (const region of Object.values(this._regions)) {
+            clearTimeout(region.writeTimer);
+            clearTimeout(region.clearTimer);
+            region.el.remove();
+        }
+    }
+    _createElement(politeness) {
+        const cls = `cps-${politeness}-live-announcer-element`;
+        if (this._isBrowser) {
+            const existing = this._document.body.querySelector(`.${cls}`);
+            if (existing)
+                return existing;
+        }
+        const el = this._document.createElement('div');
+        if (!this._isBrowser)
+            return el;
+        el.setAttribute('aria-live', politeness);
+        el.setAttribute('aria-atomic', 'true');
+        el.className = `cps-sr-only ${cls}`;
+        this._document.body.appendChild(el);
+        return el;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsLiveAnnouncerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsLiveAnnouncerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+/**
+ * Injection token for the live-announcer service.
+ *
+ * By default it resolves to the singleton {@link CpsLiveAnnouncerService}.
+ * Consumer applications can override it to supply a custom implementation or
+ * provide `null` to disable all live-region announcements.
+ *
+ * @example Disable announcements:
+ * ```typescript
+ * providers: [{ provide: CPS_LIVE_ANNOUNCER_SERVICE, useValue: null }]
+ * ```
+ */
+const CPS_LIVE_ANNOUNCER_SERVICE = new InjectionToken('CpsLiveAnnouncerService', {
+    providedIn: 'root',
+    factory: () => inject(CpsLiveAnnouncerService)
+});
+
 /**
  * CpsTooltipDirective provides advisory information for a target element.
  * @group Components
@@ -745,6 +855,7 @@ class CpsTooltipDirective {
         this._document = inject(DOCUMENT);
         this._platformId = inject(PLATFORM_ID);
         this._domSanitizer = inject(DomSanitizer);
+        this._liveAnnouncer = inject(CPS_LIVE_ANNOUNCER_SERVICE);
         this._onScrollDestroy = () => {
             this._destroyTooltip(true);
         };
@@ -890,7 +1001,7 @@ class CpsTooltipDirective {
             clearTimeout(this._hideTimeout);
             this._createTooltip();
             this._positionAndShow();
-            this._announce(this._popup?.textContent ?? '');
+            this._liveAnnouncer?.announce(this._popup?.textContent ?? '', 'assertive', 1000, 100);
         }
     }
     onDocumentClick(target) {
@@ -1028,20 +1139,6 @@ class CpsTooltipDirective {
     _resolveAriaTarget() {
         return this._document.activeElement ?? undefined;
     }
-    // aria-describedby is not read by SR on click trigger.
-    // Use a self-removing live region. It must exist in DOM
-    // before content is set, hence the 100ms delay.
-    _announce(text) {
-        const el = this._document.createElement('div');
-        el.setAttribute('aria-live', 'assertive');
-        el.setAttribute('aria-atomic', 'true');
-        el.className = 'cps-sr-only';
-        this._document.body.appendChild(el);
-        setTimeout(() => {
-            el.textContent = text;
-            setTimeout(() => el.remove(), 1000);
-        }, 100);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "cpsTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipOpenDelay: { classPropertyName: "tooltipOpenDelay", publicName: "tooltipOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipCloseDelay: { classPropertyName: "tooltipCloseDelay", publicName: "tooltipCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipOpenOn: { classPropertyName: "tooltipOpenOn", publicName: "tooltipOpenOn", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipPersistent: { classPropertyName: "tooltipPersistent", publicName: "tooltipPersistent", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipMaxWidth: { classPropertyName: "tooltipMaxWidth", publicName: "tooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltipContentClass: { classPropertyName: "tooltipContentClass", publicName: "tooltipContentClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipOffset: { classPropertyName: "tooltipOffset", publicName: "tooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocus()", "focusout": "onFocusOut($event)", "keydown.tab": "onTabFromTrigger($event)", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize()" } }, ngImport: i0 }); }
 }
@@ -5682,17 +5779,30 @@ class CpsFocusService {
         el.addEventListener('blur', () => el.classList.remove('suppress-focus-visible'), { once: true });
     }
     /**
-     * Focuses `el`, conditionally suppressing the focus-visible ring.
+     * Focuses `el`, optionally suppressing its focus ring and passing native
+     * focus options through to `HTMLElement.focus`.
      *
-     * When `showFocusRing` is `false`, adds the `suppress-focus-visible` CSS
-     * class to the element before focusing and removes it on the next `blur`
-     * event. This keeps the UI clean for pointer-initiated closes.
+     * @param el - The element to focus.
+     * @param showFocusRing - Whether the focus ring should be shown. When false, adds
+     * the suppress-focus-visible CSS class to the element before focusing and removes
+     * it on the next blur event to keep the UI clean for pointer-initiated closes.
+     * @param options - Native focus options, e.g. `{ preventScroll: true }`.
+     *
+     * @example
+     * ```ts
+     * focusService.focusElement(button, true, { preventScroll: true });
+     * ```
      */
-    focusElement(el, showFocusRing) {
+    focusElement(el, showFocusRing, options) {
         if (!showFocusRing) {
             this.suppressNextFocusRing(el);
         }
-        el.focus();
+        if (!options) {
+            el.focus();
+        }
+        else {
+            el.focus(options);
+        }
     }
     /**
      * Installs a Tab key focus trap on `container`.
@@ -22783,116 +22893,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImpor
                 args: ['dropzoneButton']
             }] } });
 
-/**
- * Service for making accessible live-region announcements without relying on a
- * specific component's live region. Creates two persistent hidden elements in
- * document.body (one polite, one assertive) that screen readers monitor for
- * content changes.
- */
-class CpsLiveAnnouncerService {
-    constructor() {
-        this._document = inject(DOCUMENT);
-        this._ngZone = inject(NgZone);
-        this._platformId = inject(PLATFORM_ID);
-        this._isBrowser = isPlatformBrowser(this._platformId);
-        this._regions = {
-            polite: {
-                el: this._createElement('polite'),
-                writeTimer: undefined,
-                clearTimer: undefined
-            },
-            assertive: {
-                el: this._createElement('assertive'),
-                writeTimer: undefined,
-                clearTimer: undefined
-            }
-        };
-    }
-    /**
-     * Announces a message through the appropriate live region. Clears any
-     * existing text first so the same message can be re-announced, then writes
-     * the new text on the next tick so screen readers observe the content change.
-     * After `duration` ms the region is cleared automatically; pass `0` to keep
-     * the message indefinitely. Defaults to 5000ms.
-     */
-    announce(message, politeness = 'polite', durationMs = 5000) {
-        if (!this._isBrowser)
-            return;
-        this.clear(politeness);
-        const region = this._regions[politeness];
-        this._ngZone.runOutsideAngular(() => {
-            region.writeTimer = setTimeout(() => {
-                region.writeTimer = undefined;
-                region.el.textContent = message;
-                if (durationMs > 0) {
-                    region.clearTimer = setTimeout(() => {
-                        region.clearTimer = undefined;
-                        region.el.textContent = '';
-                    }, durationMs);
-                }
-            });
-        });
-    }
-    /**
-     * Clears the live region without making a new announcement.
-     */
-    clear(politeness = 'polite') {
-        if (!this._isBrowser)
-            return;
-        const region = this._regions[politeness];
-        clearTimeout(region.writeTimer);
-        clearTimeout(region.clearTimer);
-        region.writeTimer = undefined;
-        region.clearTimer = undefined;
-        region.el.textContent = '';
-    }
-    ngOnDestroy() {
-        for (const region of Object.values(this._regions)) {
-            clearTimeout(region.writeTimer);
-            clearTimeout(region.clearTimer);
-            region.el.remove();
-        }
-    }
-    _createElement(politeness) {
-        const cls = `cps-${politeness}-live-announcer-element`;
-        if (this._isBrowser) {
-            const existing = this._document.body.querySelector(`.${cls}`);
-            if (existing)
-                return existing;
-        }
-        const el = this._document.createElement('div');
-        if (!this._isBrowser)
-            return el;
-        el.setAttribute('aria-live', politeness);
-        el.setAttribute('aria-atomic', 'true');
-        el.className = `cps-sr-only ${cls}`;
-        this._document.body.appendChild(el);
-        return el;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsLiveAnnouncerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsLiveAnnouncerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: CpsLiveAnnouncerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-/**
- * Injection token for the live-announcer service.
- *
- * By default it resolves to the singleton {@link CpsLiveAnnouncerService}.
- * Consumer applications can override it to supply a custom implementation or
- * provide `null` to disable all live-region announcements.
- *
- * @example Disable announcements:
- * ```typescript
- * providers: [{ provide: CPS_LIVE_ANNOUNCER_SERVICE, useValue: null }]
- * ```
- */
-const CPS_LIVE_ANNOUNCER_SERVICE = new InjectionToken('CpsLiveAnnouncerService', {
-    providedIn: 'root',
-    factory: () => inject(CpsLiveAnnouncerService)
-});
-
 /**
  * CpsLoaderComponent is a fetch data indicator.
  * @group Components