@corto-ai/gds-angular 2.1.3-dev.1 → 2.1.3-test.2

package/README.md

@@ -30,11 +30,11 @@ If you plan to only use the stylesheet/fonts for this library, we recommend impl
 
 ## CDN Assets
 
-- All brands combined: <https://cdn.dev.cortoaws.com/style/gds/2.1.3-dev.1/all.css>
-- Acctivity: <https://cdn.dev.cortoaws.com/style/gds/2.1.3-dev.1/acctivity.css>
-- CORTO: <https://cdn.dev.cortoaws.com/style/gds/2.1.3-dev.1/corto.css>
-- LawY: <https://cdn.dev.cortoaws.com/style/gds/2.1.3-dev.1/lawy.css>
-- LEAP: <https://cdn.dev.cortoaws.com/style/gds/2.1.3-dev.1/leap.css>
+- All brands combined: <https://cdn.test.cortoaws.com/style/gds/2.1.3-test.2/all.css>
+- Acctivity: <https://cdn.test.cortoaws.com/style/gds/2.1.3-test.2/acctivity.css>
+- CORTO: <https://cdn.test.cortoaws.com/style/gds/2.1.3-test.2/corto.css>
+- LawY: <https://cdn.test.cortoaws.com/style/gds/2.1.3-test.2/lawy.css>
+- LEAP: <https://cdn.test.cortoaws.com/style/gds/2.1.3-test.2/leap.css>
 
 ## Library `@layer`s
 

package/fesm2022/corto-ai-gds-angular.mjs

@@ -1,25 +1,23 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, InjectionToken, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
+import { Injectable, inject, signal, Injector, input, viewChild, effect, afterNextRender, ChangeDetectionStrategy, Component, model, booleanAttribute, computed, ElementRef, output, Directive, contentChild, DestroyRef, Renderer2, InjectionToken, Input, ChangeDetectorRef, EventEmitter, NgZone, Output, DOCUMENT, HostBinding, EnvironmentInjector, ApplicationRef, createComponent, Pipe, contentChildren, ViewEncapsulation, untracked, ViewContainerRef, runInInjectionContext, TemplateRef, numberAttribute, HostListener, provideAppInitializer, NgModule } from '@angular/core';
 import { injectRegisterIcons, SvgIconRegistry, SvgIconComponent, provideSvgIconsConfig } from '@ngneat/svg-icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@ngneat/helipopper';
 import { TippyDirective } from '@ngneat/helipopper';
 import { NgClass, NgTemplateOutlet, TitleCasePipe, DOCUMENT as DOCUMENT$1, CommonModule } from '@angular/common';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { Subject, tap, debounceTime, fromEvent, take } from 'rxjs';
-import { DEBOUNCE_DURATION, CDK_MENU_CONNECTED_POSITIONS } from '@corto/utils/constants';
-import { BrandEnum, GdsContextMenuItemVariantEnum } from '@corto/utils/types';
+import { Subject, tap, debounceTime, fromEvent, take, map } from 'rxjs';
+import { format, intervalToDuration } from 'date-fns';
 import * as i1$2 from '@angular/cdk/a11y';
 import { FocusKeyManager, CdkTrapFocus, A11yModule } from '@angular/cdk/a11y';
 import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenuItem, CdkMenuTrigger, CdkMenuItemCheckbox, MENU_TRIGGER, CdkMenu, CdkTargetMenuAim } from '@angular/cdk/menu';
 import { FormField } from '@angular/forms/signals';
 import { v4 } from 'uuid';
-import { format, intervalToDuration } from 'date-fns';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i1$3 from '@ngx-translate/core';
 import { TranslatePipe, TranslateModule } from '@ngx-translate/core';
-import { DeviceDetectorSignalService } from '@corto/utils/services';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
 import * as i1$4 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
@@ -27,8 +25,7 @@ import * as i1$5 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i2 from '@ng-select/ng-select';
 import { NgSelectComponent, NgLabelTemplateDirective, NgMultiLabelTemplateDirective, NgFooterTemplateDirective, NgClearButtonTemplateDirective, NgOptionTemplateDirective, NgPlaceholderTemplateDirective, NgSelectModule } from '@ng-select/ng-select';
-import { getScreenSizeSignal, getOperatingSystem, getBrowser } from '@corto/utils/functions';
-import { computedPrevious } from '@corto/utils/signals';
+import { BreakpointObserver } from '@angular/cdk/layout';
 import * as i1$6 from 'ngx-toastr';
 import { ToastNoAnimation, provideToastr } from 'ngx-toastr';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -3877,6 +3874,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<div\n  class=\"\n    gds-display-flex\n    gds-flex-column\n    gds-gap-xs\n  \"\n  [ngClass]=\"{ 'gds-gap-xs': state() === 'expanded' }\"\n>\n  <div class=\"\n    gds-align-items-center\n    gds-display-flex\n    gds-gap-2xs\n  \">\n    <gds-icon\n      [key]=\"iconKey()\"\n      class=\"\n        gds-icon-size-xs\n        gds-text-primary-primary\n      \"\n    />\n    <span class=\"\n      gds-text-body-strong\n      gds-text-primary-primary\n      label\n    \"> {{ label() }} </span>\n    @if (btnLabel()) {\n      <button\n        gds-button\n        variant=\"primary\"\n        (clicked)=\"actionBtnClick.emit()\"\n      >\n        {{ btnLabel() }}\n      </button>\n    }\n    <button\n      gds-icon-button\n      size=\"small\"\n      class=\"gds-background-none\"\n      aria-label=\"Close\"\n      (clicked)=\"state.set('hidden')\"\n    >\n      <gds-icon\n        class=\"\n          gds-icon-size-3xs\n          icon\n        \"\n        key=\"line-dismiss\"\n      />\n    </button>\n  </div>\n  @if (contentExpanded()) {\n    <div\n      class=\"content\"\n      animate.enter=\"gds-expand-vertical\"\n    >\n      <ng-content />\n    </div>\n  }\n</div>\n", styles: ["@layer design-system{:host{--banner-radius: var(--gds-borderRadius-sm)}:host[expanded]{--banner-radius: var(--gds-borderRadius-md)}:host{padding:var(--gds-spacing-2xs);width:100%;background:var(--gds-palette-background-chat);border-radius:var(--banner-radius);display:block}:host[hidden]{display:none}:host .label{margin-right:auto}:host .content{overflow:hidden}}\n"] }]
         }], propDecorators: { iconKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconKey", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], btnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnLabel", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }, { type: i0.Output, args: ["stateChange"] }], actionBtnClick: [{ type: i0.Output, args: ["actionBtnClick"] }] } });
 
+const DEBOUNCE_DURATION = {
+    instant: 0, // prevent duplicate events that arrive at the exact same time
+    userInput: 300, // user interactions (keyboard input, clicking, etc.)
+    userInputLong: 1000, // longer duration for user interactions that may take more time
+    browserEvent: 300, // browser dispatched events (ResizeObserver, OnScroll, etc.)
+    loadingTimeout: 1000, // invoke an action if loading takes longer than this duration
+    pubsubEvent: 300,
+    pubsubEventLong: 1000
+};
+
 class GdsBreadcrumbsComponent {
     ellipsisTmpl = contentChild('ellipsisTmpl', ...(ngDevMode ? [{ debugName: "ellipsisTmpl" }] : /* istanbul ignore next */ []));
     path = viewChild('path', ...(ngDevMode ? [{ debugName: "path" }] : /* istanbul ignore next */ []));
@@ -3957,6 +3964,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
             args: [{ selector: 'gds-breadcrumbs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #ellipsis\n  class=\"gds-breadcrumbs_ellipsis-container\"\n>\n  <ng-container *ngTemplateOutlet=\"ellipsisTmpl() ?? defaultEllipsisTmpl\" />\n</div>\n<div\n  #path\n  class=\"gds-breadcrumbs_container\"\n>\n  <ng-content />\n</div>\n\n<ng-template #defaultEllipsisTmpl> ... </ng-template>\n", styles: ["@layer design-system{:host{width:100%;display:flex}:host .gds-breadcrumbs_container{display:flex;align-items:center;flex:1;min-width:0}:host .gds-breadcrumbs_ellipsis-container{display:flex;align-items:center;max-width:fit-content;max-height:fit-content}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { ellipsisTmpl: [{ type: i0.ContentChild, args: ['ellipsisTmpl', { isSignal: true }] }], path: [{ type: i0.ViewChild, args: ['path', { isSignal: true }] }], ellipsis: [{ type: i0.ViewChild, args: ['ellipsis', { isSignal: true }] }] } });
 
+const gdsButtonVariants = ['default', 'primary', 'invisible'];
+const gdsButtonSizes = ['small', 'default', 'medium', 'large'];
+
+const ngSelectDropdownPositions = ['auto', 'bottom', 'top', 'left', 'right'];
+
+const gdsDropdownPositionsX = ['auto', 'left', 'right'];
+const gdsDropdownPositionsY = ['auto', 'top', 'bottom'];
+
+const CDN_URL = new InjectionToken('CDN_URL', {
+    factory: () => 'https://cdn.cortoaws.com'
+});
+
+const gdsUserPromptSecondaryTextVariants = ['default', 'error'];
+
+// NOTE: Duplicated from libs/utils/src/types/brand.ts — keep in sync.
+const GDS_BRANDS = {
+    Corto: 'corto',
+    CortoDark: 'corto dark',
+    LawY: 'lawy',
+    Acctivity: 'acctivity',
+    Leap: 'leap',
+    StandardIntegration: 'standardIntegration'
+};
+// Back-compat alias: keeps `import { BrandEnum } from '@corto/gds'` working (see GettingStarted.mdx)
+// without it being a second nominal `enum`. Exported in both the value and type namespace so both
+// `BrandEnum.Leap` (value) and `brand: BrandEnum` (type) keep working.
+const BrandEnum = GDS_BRANDS;
+
+var GdsContextMenuItemVariantEnum;
+(function (GdsContextMenuItemVariantEnum) {
+    GdsContextMenuItemVariantEnum["Default"] = "default";
+    GdsContextMenuItemVariantEnum["Radio"] = "radio";
+    GdsContextMenuItemVariantEnum["Check"] = "check";
+    GdsContextMenuItemVariantEnum["Indent"] = "indent";
+    GdsContextMenuItemVariantEnum["DoubleIndent"] = "double-indent";
+    GdsContextMenuItemVariantEnum["Heading"] = "heading";
+    GdsContextMenuItemVariantEnum["Switch"] = "switch";
+})(GdsContextMenuItemVariantEnum || (GdsContextMenuItemVariantEnum = {}));
+
 const chipTypes = [
     'current',
     'in progress',
@@ -4046,20 +4092,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Input
             }] } });
 
+const formatDate = (value, option) => {
+    if (!value) {
+        return undefined;
+    }
+    const isString = typeof value === 'string';
+    if (isString && isNaN(Date.parse(value))) {
+        return undefined;
+    }
+    const dateValue = isString ? new Date(value) : value;
+    return format(dateValue, option);
+};
+const shortDate = (value) => formatDate(value, 'P');
+const shortDateTime = (value) => formatDate(value, 'Pp');
+const transformDateFormat = (value) => {
+    let dateFormat = value;
+    if (value.includes('yyyy')) {
+        dateFormat = dateFormat.replace('yyyy', 'yy');
+    }
+    else if (value.includes('yy')) {
+        dateFormat = dateFormat.replace('yy', 'y');
+    }
+    if (value.includes('MMMM')) {
+        dateFormat = dateFormat.replace('MMMM', 'MM');
+    }
+    else if (value.includes('MMM')) {
+        dateFormat = dateFormat.replace('MMM', 'M');
+    }
+    else if (value.includes('MM')) {
+        dateFormat = dateFormat.replace('MM', 'mm');
+    }
+    else if (value.includes('M')) {
+        dateFormat = dateFormat.replace('M', 'm');
+    }
+    return dateFormat;
+};
+const transformSecondsToDuration = (seconds) => {
+    const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
+    const zeroPad = (val) => String(val).padStart(2, '0');
+    const hours = (duration.days ?? 0) * 24 + (duration.hours ?? 0);
+    const minutes = duration.minutes ?? 0;
+    const secs = duration.seconds ?? 0;
+    return [hours, minutes, secs].map(zeroPad).join(':');
+};
+const transformDurationToSeconds = (duration) => {
+    const [hour, minute, second] = duration.split(':');
+    return +hour * 3600 + +minute * 60 + +second;
+};
+// can't just use Date.toISOString() as that takes into account
+// the time zone, so it was using the incorrect date
+const formatToISO = (date) => {
+    if (!date) {
+        return undefined;
+    }
+    return format(date, "yyyy-MM-dd'T'HH:mm:ss.sss'Z'");
+};
+const parseLocalizedDate = (dateString) => {
+    if (navigator.language === 'en-US') {
+        return new Date(dateString);
+    }
+    // parse dd/MM/yyyy date strings for use with Date
+    const split = dateString.split('/');
+    if (split.length !== 3) {
+        throw new Error(`Invalid date ${dateString}`);
+    }
+    const [day, month, year] = split;
+    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+};
+
+const getIconsByPrefix = (prefix) => Object.values(icons).reduce((acc, curr) => {
+    if (curr.name.startsWith(prefix)) {
+        acc.push(curr.name);
+        return acc;
+    }
+    return acc;
+}, []);
+
+const GDS_BRAND_VALUES = Object.values(GDS_BRANDS);
+const isGdsBrand = (value) => value !== null && value !== undefined && GDS_BRAND_VALUES.includes(value);
+
 class OnBrandChanged {
     #observer;
     #cdr = inject(ChangeDetectorRef);
-    brand = signal(BrandEnum.Corto, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
-    brandIsExternal = computed(() => [BrandEnum.StandardIntegration, BrandEnum.Leap].includes(this.brand()), ...(ngDevMode ? [{ debugName: "brandIsExternal" }] : /* istanbul ignore next */ []));
+    brand = signal(GDS_BRANDS.Corto, ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
+    brandIsExternal = computed(() => [GDS_BRANDS.StandardIntegration, GDS_BRANDS.Leap].includes(this.brand()), ...(ngDevMode ? [{ debugName: "brandIsExternal" }] : /* istanbul ignore next */ []));
     constructor() {
-        this.brand.set(document.body.getAttribute('brand'));
+        this.#setBrandFromDocument();
         this.onBrandChanged?.();
     }
     ngOnInit() {
         this.#observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'attributes' && mutation.attributeName === 'brand') {
-                    this.brand.set(document.body.getAttribute('brand'));
+                    this.#setBrandFromDocument();
                     this.onBrandChanged?.();
                     this.#cdr.markForCheck();
                 }
@@ -4067,6 +4192,10 @@ class OnBrandChanged {
         });
         this.#observer.observe(document.body, { attributes: true, attributeFilter: ['brand'] });
     }
+    #setBrandFromDocument() {
+        const documentBrand = document.body.getAttribute('brand');
+        this.brand.set(isGdsBrand(documentBrand) ? documentBrand : GDS_BRANDS.Corto);
+    }
     ngOnDestroy() {
         if (this.#observer) {
             this.#observer.disconnect();
@@ -4386,7 +4515,7 @@ class GdsTooltipComponent extends OnBrandChanged {
     open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     maxWidth = input('100vw', ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
     appendTo = input(this.#document.body, ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
-    tooltipVariation = computed(() => (this.brand() === BrandEnum.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
+    tooltipVariation = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
     tippyDirective = viewChild.required(TippyDirective);
     span = viewChild.required('span');
     get isOverflowing() {
@@ -4425,8 +4554,8 @@ class GdsChipComponent extends OnBrandChanged {
     color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
     rounded = input(false, { ...(ngDevMode ? { debugName: "rounded" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     dismissed = new EventEmitter();
-    #backgroundKey = computed(() => (this.brand() === BrandEnum.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "#backgroundKey" }] : /* istanbul ignore next */ []));
-    #textKey = computed(() => (this.brand() === BrandEnum.CortoDark ? 'light' : 'dark'), ...(ngDevMode ? [{ debugName: "#textKey" }] : /* istanbul ignore next */ []));
+    #backgroundKey = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "#backgroundKey" }] : /* istanbul ignore next */ []));
+    #textKey = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'light' : 'dark'), ...(ngDevMode ? [{ debugName: "#textKey" }] : /* istanbul ignore next */ []));
     #chipColor = computed(() => this.#getColor(this.color() ?? this.text()), ...(ngDevMode ? [{ debugName: "#chipColor" }] : /* istanbul ignore next */ []));
     background = computed(() => GdsChipColorsMap[this.#chipColor()][this.#backgroundKey()], ...(ngDevMode ? [{ debugName: "background" }] : /* istanbul ignore next */ []));
     textColor = computed(() => GdsChipColorsMap[this.#chipColor()][this.#textKey()], ...(ngDevMode ? [{ debugName: "textColor" }] : /* istanbul ignore next */ []));
@@ -4631,7 +4760,7 @@ class GdsContextMenuBaseDirective extends OnBrandChanged {
     size = input('default', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     selected = signal(false).asReadonly();
     hasChildren = signal(false).asReadonly();
-    tooltipVariation = computed(() => (this.brand() === BrandEnum.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
+    tooltipVariation = computed(() => (this.brand() === GDS_BRANDS.CortoDark ? 'dark' : 'light'), ...(ngDevMode ? [{ debugName: "tooltipVariation" }] : /* istanbul ignore next */ []));
     variantIcon = computed(() => {
         switch (this.variant()) {
             case 'check':
@@ -4908,82 +5037,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
-const formatDate = (value, option) => {
-    if (!value) {
-        return undefined;
-    }
-    const isString = typeof value === 'string';
-    if (isString && isNaN(Date.parse(value))) {
-        return undefined;
-    }
-    const dateValue = isString ? new Date(value) : value;
-    return format(dateValue, option);
-};
-const shortDate = (value) => formatDate(value, 'P');
-const shortDateTime = (value) => formatDate(value, 'Pp');
-const transformDateFormat = (value) => {
-    let dateFormat = value;
-    if (value.includes('yyyy')) {
-        dateFormat = dateFormat.replace('yyyy', 'yy');
-    }
-    else if (value.includes('yy')) {
-        dateFormat = dateFormat.replace('yy', 'y');
-    }
-    if (value.includes('MMMM')) {
-        dateFormat = dateFormat.replace('MMMM', 'MM');
-    }
-    else if (value.includes('MMM')) {
-        dateFormat = dateFormat.replace('MMM', 'M');
-    }
-    else if (value.includes('MM')) {
-        dateFormat = dateFormat.replace('MM', 'mm');
-    }
-    else if (value.includes('M')) {
-        dateFormat = dateFormat.replace('M', 'm');
-    }
-    return dateFormat;
-};
-const transformSecondsToDuration = (seconds) => {
-    const duration = intervalToDuration({ start: 0, end: seconds * 1000 });
-    const zeroPad = (val) => String(val).padStart(2, '0');
-    const hours = (duration.days ?? 0) * 24 + (duration.hours ?? 0);
-    const minutes = duration.minutes ?? 0;
-    const secs = duration.seconds ?? 0;
-    return [hours, minutes, secs].map(zeroPad).join(':');
-};
-const transformDurationToSeconds = (duration) => {
-    const [hour, minute, second] = duration.split(':');
-    return +hour * 3600 + +minute * 60 + +second;
-};
-// can't just use Date.toISOString() as that takes into account
-// the time zone, so it was using the incorrect date
-const formatToISO = (date) => {
-    if (!date) {
-        return undefined;
-    }
-    return format(date, "yyyy-MM-dd'T'HH:mm:ss.sss'Z'");
-};
-const parseLocalizedDate = (dateString) => {
-    if (navigator.language === 'en-US') {
-        return new Date(dateString);
-    }
-    // parse dd/MM/yyyy date strings for use with Date
-    const split = dateString.split('/');
-    if (split.length !== 3) {
-        throw new Error(`Invalid date ${dateString}`);
-    }
-    const [day, month, year] = split;
-    return new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
-};
-
-const getIconsByPrefix = (prefix) => Object.values(icons).reduce((acc, curr) => {
-    if (curr.name.startsWith(prefix)) {
-        acc.push(curr.name);
-        return acc;
-    }
-    return acc;
-}, []);
-
 class GdsDatePipe {
     transform(value, option) {
         if (option === 'short+time') {
@@ -5143,6 +5196,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
+// NOTE: Duplicated from libs/utils/src/services/device-detector-signal-service.ts — keep in sync.
+class DeviceDetectorSignalService extends DeviceDetectorService {
+    resizeObservable$ = fromEvent(window, 'resize');
+    resizeSubscription$;
+    userAgentSignal = signal(navigator.userAgent, ...(ngDevMode ? [{ debugName: "userAgentSignal" }] : /* istanbul ignore next */ []));
+    constructor() {
+        super();
+        this.resizeSubscription$ = this.resizeObservable$
+            .pipe(takeUntilDestroyed())
+            .pipe(debounceTime(DEBOUNCE_DURATION.browserEvent))
+            .subscribe(() => {
+            this.userAgentSignal.set(navigator.userAgent);
+        });
+    }
+    isMobile = computed(() => super.isMobile(this.userAgentSignal()), ...(ngDevMode ? [{ debugName: "isMobile" }] : /* istanbul ignore next */ []));
+    isTablet = computed(() => super.isTablet(this.userAgentSignal()), ...(ngDevMode ? [{ debugName: "isTablet" }] : /* istanbul ignore next */ []));
+    isDesktop = computed(() => super.isDesktop(this.userAgentSignal()), ...(ngDevMode ? [{ debugName: "isDesktop" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceDetectorSignalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceDetectorSignalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DeviceDetectorSignalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
+
 class GdsDropdownComponent {
     #deviceDetectorSvc = inject(DeviceDetectorSignalService);
     #elementRef = inject(ElementRef);
@@ -5238,20 +5316,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, encapsulation: ViewEncapsulation.None, template: "<div class=\"\n  content\n  gds-background-white\n  gds-display-flex\n  gds-gap-2xs\n  gds-padding-block-3xs\n\">\n  <ng-content />\n</div>\n<div\n  class=\"\n    cancel\n    gds-align-items-center\n    gds-background-white\n    gds-height-xl\n    gds-justify-content-center\n    gds-padding-block-3xs\n    gds-padding-inline-sm\n    gds-text-body-strong\n    gds-text-primary\n    gds-width-100-parent\n  \"\n  cdkMenuItem\n>\n  <span>{{ 'Core.Button.Cancel' | translate }}</span>\n</div>\n", styles: ["@layer design-system{gds-dropdown .content{overflow:hidden;border-radius:var(--gds-borderRadius-sm);box-shadow:var(--gds-shadow-default);flex-direction:column}gds-dropdown .content[horizontal]{flex-direction:row}gds-dropdown .content{padding-inline:5px}gds-dropdown .cancel{display:none;border-radius:var(--gds-borderRadius-sm);border-bottom-left-radius:var(--gds-borderRadius-2xl);border-bottom-right-radius:var(--gds-borderRadius-2xl);box-shadow:var(--gds-shadow-default)}gds-dropdown[isMobile]{width:100%;margin-block-end:var(--gds-spacing-md);margin-inline:var(--gds-spacing-2xs);display:flex;flex-direction:column;gap:var(--gds-spacing-3xs)}gds-dropdown[isMobile] .content{width:100%;border-top-left-radius:var(--gds-borderRadius-2xl);border-top-right-radius:var(--gds-borderRadius-2xl)}gds-dropdown[isMobile] .cancel{display:flex}.cdk-overlay-container:has(gds-dropdown[isMobile]){display:grid;pointer-events:none;inset:0}.cdk-overlay-container:has(gds-dropdown[isMobile]):before{background-color:var(--gds-pattern-overlay-background-default);inset:0;content:\"\";position:absolute;pointer-events:auto}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box{grid-area:1/-1}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-connected-position-bounding-box:not(:last-of-type){display:none}.cdk-overlay-container:has(gds-dropdown[isMobile]) .cdk-overlay-pane{position:unset!important;transform:unset!important;align-items:center!important}.cdk-overlay-container:has(gds-dropdown[isMobile]):has(gds-dropdown) .cdk-overlay-connected-position-bounding-box{flex-direction:column-reverse!important}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerElement: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerElement", required: false }] }], horizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontal", required: false }] }], preventMobileStyling: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventMobileStyling", required: false }] }], allowDefaultTabBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowDefaultTabBehavior", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => CdkMenuItem), { ...{ descendants: true }, isSignal: true }] }] } });
 
-const gdsButtonVariants = ['default', 'primary', 'invisible'];
-const gdsButtonSizes = ['small', 'default', 'medium', 'large'];
-
-const ngSelectDropdownPositions = ['auto', 'bottom', 'top', 'left', 'right'];
-
-const gdsDropdownPositionsX = ['auto', 'left', 'right'];
-const gdsDropdownPositionsY = ['auto', 'top', 'bottom'];
-
-const CDN_URL = new InjectionToken('CDN_URL', {
-    factory: () => 'https://cdn.cortoaws.com'
-});
-
-const gdsUserPromptSecondaryTextVariants = ['default', 'error'];
-
 class GdsEmptyStateComponent extends OnBrandChanged {
     #cdnUrl = inject(CDN_URL);
     variant = input('info-circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
@@ -5259,9 +5323,9 @@ class GdsEmptyStateComponent extends OnBrandChanged {
     compact = input(false, { ...(ngDevMode ? { debugName: "compact" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
     #supportedBrand = computed(() => {
         switch (this.brand()) {
-            case BrandEnum.StandardIntegration:
-            case BrandEnum.CortoDark:
-                return BrandEnum.Corto;
+            case GDS_BRANDS.StandardIntegration:
+            case GDS_BRANDS.CortoDark:
+                return GDS_BRANDS.Corto;
             default:
                 return this.brand();
         }
@@ -6205,6 +6269,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<gds-dialog-overlay />\n<dialog\n  gds-dialog\n  class=\"dialog\"\n  type=\"slide-left\"\n>\n  <ng-template #layoutTmpl>\n    <ng-template #container />\n  </ng-template>\n</dialog>\n", styles: ["@layer design-system{:host{position:fixed;inset:0}:host .overlay{opacity:.25}:host .dialog{max-width:unset;width:unset;display:flex;flex-direction:column}}\n"] }]
         }], propDecorators: { container: [{ type: i0.ViewChild, args: ['container', { ...{ read: ViewContainerRef }, isSignal: true }] }] } });
 
+const computedPrevious = (s) => {
+    let current = null;
+    let previous = untracked(() => s()); // initial value is the current value
+    return computed(() => {
+        current = s();
+        const result = previous;
+        previous = current;
+        return result;
+    });
+};
+
+// NOTE: Duplicated from libs/utils/src/types/app.constants.ts (SCREEN_SIZE_BREAKPOINTS only) — keep in sync.
+// sizes from libs/gds/public/assets/scss/_mixins.scss:65-72
+const SCREEN_SIZE_BREAKPOINTS = {
+    XS: 0,
+    SM: 600,
+    MD: 900,
+    LG: 1200,
+    XL: 1440
+};
+
+// NOTE: Duplicated from libs/utils/src/functions/screen-breakpoints.ts — keep in sync.
+const getScreenSize$ = (breakpoint) => inject(BreakpointObserver)
+    .observe(`(max-width: ${SCREEN_SIZE_BREAKPOINTS[breakpoint]}px)`)
+    .pipe(map((result) => result.matches));
+const getScreenSizeSignal = (breakpoint) => toSignal(getScreenSize$(breakpoint), { initialValue: false });
+
 class GdsCollapsibleAsideLayoutComponent {
     #dialogSvc = inject(GdsDialogService);
     collapsed = input(undefined, { ...(ngDevMode ? { debugName: "collapsed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
@@ -6334,6 +6425,105 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                     }, template: "<ul class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-2xs\n  gds-margin-0\n  gds-padding-0\n\">\n  <ng-content />\n</ul>\n<ul class=\"\n  gds-display-flex\n  gds-flex-column\n  gds-gap-2xs\n  gds-margin-0\n  gds-margin-block-start-auto\n  gds-padding-0\n\">\n  <ng-content select=\"[menu-bottom]\" />\n</ul>\n", styles: ["@layer design-system{:host{box-shadow:-3px 0 4px #00000012 inset;border-right:.5px solid var(--gds-palette-border-default)}}\n"] }]
         }] });
 
+const CDK_MENU_CONNECTED_POSITIONS = [
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+const CDK_MENU_CONNECTED_POSITIONS_TOP = [
+    {
+        originX: 'center',
+        originY: 'top',
+        overlayX: 'center',
+        overlayY: 'bottom',
+        offsetY: -4
+    },
+    {
+        originX: 'center',
+        originY: 'bottom',
+        overlayX: 'center',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+/** for use when the context menu is close to the right side of the container
+ *  so that it doesn't go over the edge, per UX
+ */
+const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_RIGHT = [
+    {
+        originX: 'end',
+        originY: 'bottom',
+        overlayX: 'end',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'end',
+        originY: 'top',
+        overlayX: 'end',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+/** for use when the context menu is close to the left side of the container
+ *  so that it doesn't go over the edge, per UX
+ */
+const CDK_MENU_CONNECTED_POSITIONS_CONTAINER_LEFT = [
+    {
+        originX: 'start',
+        originY: 'bottom',
+        overlayX: 'start',
+        overlayY: 'top',
+        offsetY: 4
+    },
+    {
+        originX: 'start',
+        originY: 'top',
+        overlayX: 'start',
+        overlayY: 'bottom',
+        offsetY: -4
+    }
+];
+
 class GdsNestedSelectComponent extends GdsSignalFormContainer {
     #injector = inject(Injector);
     #directive = inject(CdkMenuTrigger);
@@ -7846,9 +8036,61 @@ const provideToaster = (customOptions = {}) => {
     return provideToastr({ ...defaultOptions, ...customOptions });
 };
 
+const OPERATING_SYSTEM = {
+    windows: 'windows',
+    mac: 'mac',
+    other: 'other'
+};
+const BROWSER = {
+    chrome: 'chrome',
+    firefox: 'firefox',
+    safari: 'safari',
+    edge: 'edge',
+    opera: 'opera',
+    // applewebkit is utilized by Mac Word add-ins
+    applewebkit: 'applewebkit',
+    other: 'other'
+};
+
+// NOTE: Duplicated from libs/utils/src/functions/navigator-detection.functions.ts — keep in sync.
+const getOperatingSystem = () => {
+    const userAgent = navigator.userAgent;
+    if (userAgent.includes('Win')) {
+        return OPERATING_SYSTEM.windows;
+    }
+    else if (userAgent.includes('Mac')) {
+        return OPERATING_SYSTEM.mac;
+    }
+    return OPERATING_SYSTEM.other;
+};
+const getBrowser = () => {
+    const userAgent = navigator.userAgent;
+    // The order of these are essential because certain browsers such as Edge use the
+    // chrome browser engine and include both "Chrome" and "Edg/" in the userAgent.
+    if (userAgent.includes('Edg/')) {
+        return BROWSER.edge;
+    }
+    else if (userAgent.includes('Opera') || userAgent.includes('OPR')) {
+        return BROWSER.opera;
+    }
+    else if (userAgent.includes('Chrome')) {
+        return BROWSER.chrome;
+    }
+    else if (userAgent.includes('Firefox')) {
+        return BROWSER.firefox;
+    }
+    else if (userAgent.includes('Safari')) {
+        return BROWSER.safari;
+    }
+    else if (userAgent.includes('AppleWebKit')) {
+        return BROWSER.applewebkit;
+    }
+    return BROWSER.other;
+};
+
 class GdsModule {
     static forRoot({ brand, env }) {
-        document.body.setAttribute('brand', `${brand ?? BrandEnum.Corto}`);
+        document.body.setAttribute('brand', brand ?? GDS_BRANDS.Corto);
         document.body.setAttribute('operating-system', getOperatingSystem());
         document.body.setAttribute('browser', getBrowser());
         let cdnUrl = 'https://cdn.cortoaws.com';
@@ -7952,5 +8194,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CDN_URL, CONTACT_INITIALS_REGEX, GDS_EMPTY_STATE_VARIANTS, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
+export { BrandEnum, CDN_URL, CONTACT_INITIALS_REGEX, GDS_BRANDS, GDS_EMPTY_STATE_VARIANTS, GdsAccountingService, GdsAutoRoundCurrencyDirective, GdsAutofocusDirective, GdsAvatarComponent, GdsBadgeColorType, GdsBadgeComponent, GdsBadgeVariantType, GdsBannerComponent, GdsBreadcrumbsComponent, GdsBuildOptionConfigPipe, GdsButtonComponent, GdsButtonRadioOptionComponent, GdsChatExpandableListComponent, GdsChatPromptComponent, GdsChatSuggestionComponent, GdsCheckboxComponent, GdsChipColorsMap, GdsChipComponent, GdsCollapsibleAsideLayoutComponent, GdsCompositeOptionPrimaryDirective, GdsCompositeOptionSecondaryDirective, GdsContextMenuHeadingComponent, GdsContextMenuItemComponent, GdsContextMenuItemVariantEnum, GdsContextMenuSwitchComponent, GdsDateInputComponent, GdsDatePipe, GdsDialogBaseDirective, GdsDialogComponent, GdsDialogOverlayComponent, GdsDialogService, GdsDoctypeService, GdsDoctypeToIconPipe, GdsDocumentItemComponent, GdsDropdownComponent, GdsEmptyStateComponent, GdsFeatureBlockComponent, GdsFeedbackButtonComponent, GdsFileUploadComponent, GdsFilenameToIconPipe, GdsFilterChipComponent, GdsFocusOnInitDirective, GdsFormControlComponent, GdsHistoryComponent, GdsIconButtonComponent, GdsIconComponent, GdsIconDoctypeComponent, GdsIconService, GdsInputAutocompleteDirective, GdsItemDisplayComponent, GdsKeyboardNavigationHost, GdsKeyboardNavigationItem, GdsListboxCompositeOptionDirective, GdsListboxDirective, GdsListboxOptionDirective, GdsLoadingCarouselComponent, GdsMapArrayToRadioOptionsPipe, GdsMathFloorPipe, GdsMathMaxPipe, GdsMathMinPipe, GdsMessageInputComponent, GdsModule, GdsNativeInputDirective, GdsNativeTextareaDirective, GdsNavAsideComponent, GdsNavAsideItemComponent, GdsNestedSelectComponent, GdsProgressBarComponent, GdsRadioComponent, GdsRadioOptionDirective, GdsReferenceComponent, GdsReferenceLinkComponent, GdsRegexFilterDirective, GdsResizedDirective, GdsResizedEvent, GdsResponseComponent, GdsScrollOutOfViewDirective, GdsScrollOutOfViewScrollStatus, GdsScrollOutOfViewService, GdsScrollToBottomDirective, GdsScrollToFirstInvalidDirective, GdsSearchBarComponent, GdsSelectComponent, GdsSelectOnFocusDirective, GdsSidebarItemBodyComponent, GdsSidebarItemComponent, GdsSkeletonLoadingComponent, GdsSliderComponent, GdsSpinnerComponent, GdsSplitButtonComponent, GdsSvgIconPipe, GdsSwitchComponent, GdsTextInputComponent, GdsTextareaComponent, GdsTimelineItemComponent, GdsToastComponent, GdsTooltipComponent, GdsTreeViewListItemComponent, GdsUserPromptService, GdsVirtualScrollListboxDirective, MapperPipe, OnBrandChanged, RoundMode, TreeViewListItemDirective, chipColor, chipSize, chipTypes, chipWidth, formatToISO, gdsButtonSizes, gdsButtonVariants, gdsDropdownPositionsX, gdsDropdownPositionsY, gdsSelectWidths, gdsServices, gdsUserPromptSecondaryTextVariants, getIconsByPrefix, isGdsBrand, ngSelectDropdownPositions, parseLocalizedDate, provideToaster, shortDate, shortDateTime, transformDateFormat, transformDurationToSeconds, transformSecondsToDuration };
 //# sourceMappingURL=corto-ai-gds-angular.mjs.map