@testgorilla/tgo-ui 3.9.3 → 3.9.5-beta-20.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@testgorilla/tgo-ui",
-  "version": "3.9.3",
+  "version": "3.9.5-beta-20.0.0",
   "license": "proprietary-license",
   "lint-staged": {
     "src/**/*.ts": [
@@ -17,34 +17,35 @@
     "tslib": "~2.4.0"
   },
   "peerDependencies": {
-    "@angular/animations": "~18.2.13",
-    "@angular/cdk": "~18.2.14",
-    "@angular/common": "~18.2.13",
-    "@angular/compiler": "~18.2.13",
-    "@angular/core": "~18.2.13",
-    "@angular/forms": "~18.2.13",
-    "@angular/material": "~18.2.14",
-    "@angular/platform-browser": "~18.2.13",
-    "@angular/platform-browser-dynamic": "~18.2.13",
-    "@angular/router": "~18.2.13",
+    "@angular/animations": "~20.1.4",
+    "@angular/cdk": "~20.1.4",
+    "@angular/common": "~20.1.4",
+    "@angular/compiler": "~20.1.4",
+    "@angular/core": "~20.1.4",
+    "@angular/forms": "~20.1.4",
+    "@angular/material": "~20.1.4",
+    "@angular/platform-browser": "~20.1.4",
+    "@angular/platform-browser-dynamic": "~20.1.4",
+    "@angular/router": "~20.1.4",
     "chart.js": "^4.4.5",
     "chartjs-plugin-datalabels": "^2.2.0",
     "gaussian": "^1.3.0",
     "libphonenumber-js": "^1.10.59",
     "ng2-charts": "^5.0.4",
     "ngx-mask": "^19.0.6",
-    "ngx-mat-select-search": "^7.0.6",
+    "ngx-mat-select-search": "^8.0.2",
     "ngx-skeleton-loader": "^8.1.0",
     "rxjs": "~7.8.0",
     "svg-country-flags": "^1.2.10",
-    "zone.js": "^0.14.5"
+    "zone.js": "^0.15.1"
   },
   "overrides": {
     "@angular-devkit/build-angular": {
       "http-proxy-middleware": "3.0.5",
       "vite": "6.1.6",
       "esbuild": "0.25.0"
-    }
+    },
+    "webpack": "^5.92.1"
   },
   "optionalDependencies": {
     "@lmdb/lmdb-win32-x64": "3.0.13",
@@ -58,8 +59,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/testgorilla-tgo-ui.mjs",
-      "esm": "./esm2022/testgorilla-tgo-ui.mjs",
       "default": "./fesm2022/testgorilla-tgo-ui.mjs"
     }
   },

package/projects/tgo-canopy-ui/assets/icons/Switch-tab.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 17.6673V9.00065H4.00016V4.33398H14.6668V13.0007H12.0002V17.6673H1.3335ZM2.66683 16.334H10.6668V11.6673H2.66683V16.334ZM12.0002 11.6673H13.3335V7.00065H5.3335V9.00065H12.0002V11.6673Z" fill="currentColor"/>
+</svg>

package/projects/tgo-canopy-ui/assets/icons/rebrand/Switch-tab-filled.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 17.6673V9.00065H4.00016V4.33398H14.6668V13.0007H12.0002V17.6673H1.3335ZM2.66683 16.334H10.6668V11.6673H2.66683V16.334ZM12.0002 11.6673H13.3335V7.00065H5.3335V9.00065H12.0002V11.6673Z" fill="currentColor"/>
+</svg>

package/projects/tgo-canopy-ui/assets/icons/rebrand/Switch-tab-in-line.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="22" viewBox="0 0 16 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.3335 17.6673V9.00065H4.00016V4.33398H14.6668V13.0007H12.0002V17.6673H1.3335ZM2.66683 16.334H10.6668V11.6673H2.66683V16.334ZM12.0002 11.6673H13.3335V7.00065H5.3335V9.00065H12.0002V11.6673Z" fill="currentColor"/>
+</svg>

package/projects/tgo-canopy-ui/theme/_input.scss

@@ -246,7 +246,7 @@ ui-dropdown, ui-autocomplete {
 
   .mat-mdc-form-field, .autocomplete-wrapper .mat-mdc-form-field {
     &.mat-form-field-appearance-outline,  &.mat-text-field-outlined {
-      --mdc-outlined-text-field-caret-color: #{$black};
+      --mat-form-field-outlined-caret-color: #{$black};
 
       .mdc-text-field__input::placeholder {
         color: $grayscale-50;

package/projects/tgo-canopy-ui/theme/_palette.scss

@@ -1,5 +1,6 @@
 @use "@angular/material" as mat;
-@include mat.core();
+@include mat.elevation-classes();
+@include mat.app-background();
 //teal
 $tgo-teal-palette: (
   50: #ECF6F5,

package/projects/tgo-canopy-ui/theme/_tooltip.scss

@@ -4,9 +4,9 @@
   background-color: $black;
   border: 1px solid $tgo-white;
   border-radius: 4px;
-  --mdc-plain-tooltip-container-color: none;
+  --mat-tooltip-container-color: none;
   color: $tgo-white;
-  --mdc-plain-tooltip-supporting-text-color: $tgo-white !important;
+  --mat-tooltip-supporting-text-color: $tgo-white !important;
 }
 
 @mixin rebranded-tooltip-right {
@@ -90,8 +90,8 @@
   overflow: visible;
   max-width: 248px;
   padding: 6px 2px;
-  --mdc-plain-tooltip-container-color: none;
-  --mdc-plain-tooltip-supporting-text-color: $tgo-black;
+  --mat-tooltip-container-color: none;
+  --mat-tooltip-supporting-text-color: $tgo-black;
 }
 
 body {

package/components/accordion/accordion.component.d.ts

@@ -1,100 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { AccordionVariant, ToggleIconPosition } from './accordion.model';
-import { IconName } from '../icon/icon.model';
-import * as i0 from "@angular/core";
-export declare class AccordionComponent {
-    private readonly defaultAppTheme;
-    /**
-     * The label displayed for the accordion.
-     * @type {string}
-     * @required
-     * @memberof AccordionComponent
-     */
-    label: string;
-    /**
-     * Determines whether the accordion is initially open.
-     * @type {boolean}
-     * @default false
-     * @memberof AccordionComponent
-     */
-    open: boolean;
-    /**
-     * Disables the accordion if set to true.
-     * @type {boolean}
-     * @default false
-     * @memberof AccordionComponent
-     */
-    disabled: boolean;
-    /**
-     * Indicates whether to show a premium icon.
-     * @type {boolean}
-     * @default false
-     * @memberof AccordionComponent
-     */
-    showPremiumIcon: boolean;
-    /**
-     * The tooltip text for the premium icon.
-     * @type {string}
-     * @default ''
-     * @memberof AccordionComponent
-     */
-    premiumTooltipText: string;
-    /**
-     *
-     * Defines the application theme where accordion is used
-     *
-     * @type {ApplicationTheme}
-     * @memberof AccordionComponent
-     */
-    applicationTheme: ApplicationTheme;
-    /**
-     *
-     * Changed premium icon on this icon
-     *
-     * @type {IconName}
-     * @memberof AccordionComponent
-     */
-    labelIcon: IconName;
-    /**
-     *
-     * Select accordion variant. Don`t work on Classic theme
-     *
-     * @type {AccordionVariant}
-     * @memberof AccordionComponent
-     */
-    variant: AccordionVariant;
-    /**
-     *
-     * Projects content with attribute 'customHeader'
-     *
-     * @type {boolean}
-     * @memberof AccordionComponent
-     */
-    allowCustomHeader: boolean;
-    /**
-     *
-     * Sets background color of content to none
-     *
-     * @type {boolean}
-     * @memberof AccordionComponent
-     */
-    noBackgroundColor: boolean;
-    /**
-     *
-     * Defines the toggle icon position
-     *
-     * @type {boolean}
-     * @memberof AccordionComponent
-     */
-    toggleIconPosition: ToggleIconPosition;
-    closed: EventEmitter<void>;
-    opened: EventEmitter<void>;
-    constructor(defaultAppTheme: ApplicationTheme);
-    protected toggle(open: boolean): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionComponent, "ui-accordion", never, { "label": { "alias": "label"; "required": true; }; "open": { "alias": "open"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "showPremiumIcon": { "alias": "showPremiumIcon"; "required": false; }; "premiumTooltipText": { "alias": "premiumTooltipText"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "labelIcon": { "alias": "labelIcon"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "allowCustomHeader": { "alias": "allowCustomHeader"; "required": false; }; "noBackgroundColor": { "alias": "noBackgroundColor"; "required": false; }; "toggleIconPosition": { "alias": "toggleIconPosition"; "required": false; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[subHeader]", "[customHeader]", "[actions]", "*"], false, never>;
-    static ngAcceptInputType_open: unknown;
-    static ngAcceptInputType_disabled: unknown;
-    static ngAcceptInputType_showPremiumIcon: unknown;
-}

package/components/accordion/accordion.component.module.d.ts

@@ -1,12 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./accordion.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../icon/icon.component.module";
-import * as i4 from "../button/button.component.module";
-import * as i5 from "@angular/material/tooltip";
-import * as i6 from "@angular/material/expansion";
-export declare class AccordionComponentModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AccordionComponentModule, [typeof i1.AccordionComponent], [typeof i2.CommonModule, typeof i3.IconComponentModule, typeof i4.ButtonComponentModule, typeof i5.MatTooltipModule, typeof i6.MatExpansionModule], [typeof i1.AccordionComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AccordionComponentModule>;
-}

package/components/accordion/accordion.model.d.ts

@@ -1,2 +0,0 @@
-export type AccordionVariant = 'standard' | 'filter' | 'table';
-export type ToggleIconPosition = 'left' | 'right';

package/components/ai-feedback/ai-feedback.component.d.ts

@@ -1,15 +0,0 @@
-import { EventEmitter } from '@angular/core';
-import { AiFeedbackSelection } from './ai-feedback.model';
-import { TooltipPosition } from '@angular/material/tooltip';
-import * as i0 from "@angular/core";
-export declare class AiFeedbackComponent {
-    set selection(selection: AiFeedbackSelection);
-    tooltipPosition: TooltipPosition;
-    selectedValue: EventEmitter<AiFeedbackSelection>;
-    selected: import("@angular/core").WritableSignal<AiFeedbackSelection>;
-    readonly optionYes: AiFeedbackSelection;
-    readonly optionNo: AiFeedbackSelection;
-    onSelectionChange(selection: AiFeedbackSelection): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AiFeedbackComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AiFeedbackComponent, "ui-ai-feedback", never, { "selection": { "alias": "selection"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, { "selectedValue": "selectedValue"; }, never, never, false, never>;
-}

package/components/ai-feedback/ai-feedback.model.d.ts

@@ -1 +0,0 @@
-export type AiFeedbackSelection = 'yes' | 'no' | null;

package/components/ai-feedback/ai-feedback.module.d.ts

@@ -1,10 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./ai-feedback.component";
-import * as i2 from "../button/button.component.module";
-import * as i3 from "../../pipes/ui-translate.pipe";
-import * as i4 from "@angular/common";
-export declare class AiFeedbackModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AiFeedbackModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AiFeedbackModule, [typeof i1.AiFeedbackComponent], [typeof i2.ButtonComponentModule, typeof i3.UiTranslatePipe, typeof i4.AsyncPipe], [typeof i1.AiFeedbackComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AiFeedbackModule>;
-}

package/components/alert-banner/alert-banner.component.d.ts

@@ -1,132 +0,0 @@
-import { OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { IconName } from '../../components/icon/icon.model';
-import { ApplicationTheme } from '../../models/application-theme.model';
-import { AlertBarType, AlertVariant } from '../../utils/alert-bar.model';
-import { LinkTargetType } from './alert-banner.model';
-import * as i0 from "@angular/core";
-export declare class AlertBannerComponent implements OnInit, OnChanges {
-    private readonly defaultAppTheme;
-    private domSanitizer;
-    constructor(defaultAppTheme: ApplicationTheme, domSanitizer: DomSanitizer);
-    /**
-     * Alert Banner type
-     *
-     * @type {AlertBarType}
-     * @default 'success'
-     * @memberof AlertBannerComponent
-     */
-    alertType: AlertBarType;
-    /**
-     * Alert Banner variant
-     *
-     * @type {AlertVariant}
-     * @default 'banner'
-     * @memberof AlertBannerComponent
-     */
-    alertVariant: AlertVariant;
-    /**
-     * Alert banner message
-     *
-     * @memberof AlertBannerComponent
-     */
-    set message(msg: string);
-    /**
-     * Include dismmiss button
-     *
-     * @default true
-     * @memberof AlertBannerComponent
-     */
-    includeDismissButton: boolean;
-    /**
-     * Include shadow or not
-     *
-     * @default false
-     * @memberof AlertBannerComponent
-     */
-    shadow: boolean;
-    /**
-     * Link text that will appended at the end of message
-     *
-     * @default ''
-     * @memberof AlertBannerComponent
-     */
-    linkText?: string | undefined;
-    /**
-     * Link url
-     *
-     * @memberof AlertBannerComponent
-     */
-    linkUrl?: string;
-    /**
-     * Link target
-     *
-     * @type {@type {LinkTargetType}}
-     * @default '_blank'
-     * @memberof AlertBannerComponent
-     */
-    linkTarget?: LinkTargetType;
-    /**
-     *
-     * Defines the application theme
-     *
-     * @type {ApplicationTheme}
-     * @default 'light'
-     * @memberof AlertBannerComponent
-     */
-    applicationTheme: ApplicationTheme;
-    /**
-     * Sets the full width
-     *
-     * @type {boolean}
-     * @memberof AlertBannerComponent
-     */
-    isFullWidth: boolean | undefined;
-    /**
-     * Close button tooltip
-     *
-     * @type {string}
-     * @default ''
-     * @memberof AlertBannerComponent
-     */
-    closeButtonTooltip: string;
-    /**
-     * Shows icon
-     *
-     * @type {boolean}
-     * @default true
-     * @memberof AlertBannerComponent
-     */
-    hasIcon: boolean;
-    /**
-     * Sets the alert banner position
-     *
-     * @type {boolean}
-     * @default false
-     * @memberof AlertBannerComponent
-     */
-    fixed: boolean;
-    /**
-     * A string representing the ARIA requirement for accessibility.
-     * This attribute is used to indicate whether an input field is required for form submission.
-     * @type {string}
-     * @memberof AlertBannerComponent
-     */
-    ariaDescribedby: string;
-    set secondaryAlerts(alerts: string[]);
-    get isDismissed(): boolean;
-    iconName: IconName;
-    visible: boolean;
-    fullWidth: boolean;
-    position: string;
-    cssClass: string;
-    _message: SafeHtml;
-    _secondaryAlerts: SafeHtml[];
-    dismissAlertBanner: boolean;
-    ngOnInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    private updateBanner;
-    dismissClick(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AlertBannerComponent, [{ optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AlertBannerComponent, "ui-alert-banner", never, { "alertType": { "alias": "alertType"; "required": false; }; "alertVariant": { "alias": "alertVariant"; "required": false; }; "message": { "alias": "message"; "required": false; }; "includeDismissButton": { "alias": "includeDismissButton"; "required": false; }; "shadow": { "alias": "shadow"; "required": false; }; "linkText": { "alias": "linkText"; "required": false; }; "linkUrl": { "alias": "linkUrl"; "required": false; }; "linkTarget": { "alias": "linkTarget"; "required": false; }; "applicationTheme": { "alias": "applicationTheme"; "required": false; }; "isFullWidth": { "alias": "isFullWidth"; "required": false; }; "closeButtonTooltip": { "alias": "closeButtonTooltip"; "required": false; }; "hasIcon": { "alias": "hasIcon"; "required": false; }; "fixed": { "alias": "fixed"; "required": false; }; "ariaDescribedby": { "alias": "ariaDescribedby"; "required": false; }; "secondaryAlerts": { "alias": "secondaryAlerts"; "required": false; }; }, {}, never, never, false, never>;
-}

package/components/alert-banner/alert-banner.component.module.d.ts

@@ -1,11 +0,0 @@
-import * as i0 from "@angular/core";
-import * as i1 from "./alert-banner.component";
-import * as i2 from "@angular/common";
-import * as i3 from "../button/button.component.module";
-import * as i4 from "../icon/icon.component.module";
-import * as i5 from "../../pipes/ui-translate.pipe";
-export declare class AlertBannerComponentModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AlertBannerComponentModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AlertBannerComponentModule, [typeof i1.AlertBannerComponent], [typeof i2.CommonModule, typeof i3.ButtonComponentModule, typeof i4.IconComponentModule, typeof i5.UiTranslatePipe], [typeof i1.AlertBannerComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AlertBannerComponentModule>;
-}

package/components/alert-banner/alert-banner.model.d.ts

@@ -1 +0,0 @@
-export type LinkTargetType = '' | '_self' | '_blank' | '_parent' | '_top';