cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-terminal.mjs

@@ -22,10 +22,10 @@ class TerminalService {
             this.responseSource.next(response);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TerminalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TerminalService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TerminalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TerminalService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TerminalService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TerminalService, decorators: [{
             type: Injectable
         }] });
 
@@ -93,17 +93,17 @@ class Terminal {
             this.command = '';
         }
     }
-    focus(element) {
-        element.focus();
+    focus() {
+        this.el.nativeElement.focus();
     }
     ngOnDestroy() {
         if (this.subscription) {
             this.subscription.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Terminal, deps: [{ token: i0.ElementRef }, { token: TerminalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Terminal, isStandalone: false, selector: "p-terminal", inputs: { welcomeMessage: "welcomeMessage", prompt: "prompt", style: "style", styleClass: "styleClass", response: "response" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: `
-        <div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus(in)">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Terminal, deps: [{ token: i0.ElementRef }, { token: TerminalService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Terminal, isStandalone: false, selector: "p-terminal", inputs: { welcomeMessage: "welcomeMessage", prompt: "prompt", style: "style", styleClass: "styleClass", response: "response" }, host: { classAttribute: "cax-element" }, ngImport: i0, template: `
+        <div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus()">
             <div *ngIf="welcomeMessage">{{ welcomeMessage }}</div>
             <div class="p-terminal-content">
                 <div *ngFor="let command of commands">
@@ -119,10 +119,10 @@ class Terminal {
         </div>
     `, isInline: true, styles: ["@layer cax{.p-terminal{height:18rem;overflow:auto}.p-terminal-prompt-container{display:flex;align-items:center}.p-terminal-input{flex:1 1 auto;border:0 none;background-color:transparent;color:inherit;padding:0;outline:0 none}.p-terminal-input::-ms-clear{display:none}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Terminal, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Terminal, decorators: [{
             type: Component,
             args: [{ selector: 'p-terminal', template: `
-        <div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus(in)">
+        <div [ngClass]="'p-terminal p-component'" [ngStyle]="style" [class]="styleClass" (click)="focus()">
             <div *ngIf="welcomeMessage">{{ welcomeMessage }}</div>
             <div class="p-terminal-content">
                 <div *ngFor="let command of commands">
@@ -151,11 +151,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }] } });
 class TerminalModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TerminalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: TerminalModule, declarations: [Terminal], imports: [CommonModule, FormsModule], exports: [Terminal] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TerminalModule, imports: [CommonModule, FormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TerminalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TerminalModule, declarations: [Terminal], imports: [CommonModule, FormsModule], exports: [Terminal] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TerminalModule, imports: [CommonModule, FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TerminalModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TerminalModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, FormsModule],

package/fesm2022/cax-design-system-terminal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-terminal.mjs","sources":["../../src/app/components/terminal/terminalservice.ts","../../src/app/components/terminal/terminal.ts","../../src/app/components/terminal/cax-design-system-terminal.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable()\nexport class TerminalService {\n    private commandSource = new Subject<string>();\n    private responseSource = new Subject<string>();\n\n    commandHandler = this.commandSource.asObservable();\n    responseHandler = this.responseSource.asObservable();\n\n    sendCommand(command: string) {\n        if (command) {\n            this.commandSource.next(command);\n        }\n    }\n\n    sendResponse(response: string) {\n        if (response) {\n            this.responseSource.next(response);\n        }\n    }\n}\n","import { NgModule, Component, AfterViewInit, AfterViewChecked, OnDestroy, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { TerminalService } from './terminalservice';\nimport { Subscription } from 'rxjs';\n/**\n * Terminal is a text based user interface.\n * @group Components\n */\n@Component({\n    selector: 'p-terminal',\n    template: `\n        <div [ngClass]=\"'p-terminal p-component'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"focus(in)\">\n            <div *ngIf=\"welcomeMessage\">{{ welcomeMessage }}</div>\n            <div class=\"p-terminal-content\">\n                <div *ngFor=\"let command of commands\">\n                    <span class=\"p-terminal-prompt\">{{ prompt }}</span>\n                    <span class=\"p-terminal-command\">{{ command.text }}</span>\n                    <div class=\"p-terminal-response\" [attr.aria-live]=\"'polite'\">{{ command.response }}</div>\n                </div>\n            </div>\n            <div class=\"p-terminal-prompt-container\">\n                <span class=\"p-terminal-content-prompt\">{{ prompt }}</span>\n                <input #in type=\"text\" [(ngModel)]=\"command\" class=\"p-terminal-input\" autocomplete=\"off\" (keydown)=\"handleCommand($event)\" autofocus />\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./terminal.css'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Terminal implements AfterViewInit, AfterViewChecked, OnDestroy {\n    /**\n     * Initial text to display on terminal.\n     * @group Props\n     */\n    @Input() welcomeMessage: string | undefined;\n    /**\n     * Prompt text for each command.\n     * @group Props\n     */\n    @Input() prompt: string | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    commands: any[] = [];\n\n    command!: string;\n\n    container!: Element;\n\n    commandProcessed!: boolean;\n\n    subscription: Subscription;\n\n    constructor(\n        public el: ElementRef,\n        public terminalService: TerminalService,\n        public cd: ChangeDetectorRef\n    ) {\n        this.subscription = terminalService.responseHandler.subscribe((response) => {\n            this.commands[this.commands.length - 1].response = response;\n            this.commandProcessed = true;\n        });\n    }\n\n    ngAfterViewInit() {\n        this.container = DomHandler.find(this.el.nativeElement, '.p-terminal')[0];\n    }\n\n    ngAfterViewChecked() {\n        if (this.commandProcessed) {\n            this.container.scrollTop = this.container.scrollHeight;\n            this.commandProcessed = false;\n        }\n    }\n\n    @Input()\n    set response(value: string) {\n        if (value) {\n            this.commands[this.commands.length - 1].response = value;\n            this.commandProcessed = true;\n        }\n    }\n\n    handleCommand(event: KeyboardEvent) {\n        if (event.keyCode == 13) {\n            this.commands.push({ text: this.command });\n            this.terminalService.sendCommand(this.command);\n            this.command = '';\n        }\n    }\n\n    focus(element: HTMLElement) {\n        element.focus();\n    }\n\n    ngOnDestroy() {\n        if (this.subscription) {\n            this.subscription.unsubscribe();\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, FormsModule],\n    exports: [Terminal],\n    declarations: [Terminal]\n})\nexport class TerminalModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.TerminalService"],"mappings":"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"}
+{"version":3,"file":"cax-design-system-terminal.mjs","sources":["../../src/app/components/terminal/terminalservice.ts","../../src/app/components/terminal/terminal.ts","../../src/app/components/terminal/cax-design-system-terminal.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { Subject } from 'rxjs';\n\n@Injectable()\nexport class TerminalService {\n    private commandSource = new Subject<string>();\n    private responseSource = new Subject<string>();\n\n    commandHandler = this.commandSource.asObservable();\n    responseHandler = this.responseSource.asObservable();\n\n    sendCommand(command: string) {\n        if (command) {\n            this.commandSource.next(command);\n        }\n    }\n\n    sendResponse(response: string) {\n        if (response) {\n            this.responseSource.next(response);\n        }\n    }\n}\n","import { NgModule, Component, AfterViewInit, AfterViewChecked, OnDestroy, Input, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, ChangeDetectorRef } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { DomHandler } from 'cax-design-system/dom';\nimport { TerminalService } from './terminalservice';\nimport { Subscription } from 'rxjs';\n/**\n * Terminal is a text based user interface.\n * @group Components\n */\n@Component({\n    selector: 'p-terminal',\n    template: `\n        <div [ngClass]=\"'p-terminal p-component'\" [ngStyle]=\"style\" [class]=\"styleClass\" (click)=\"focus()\">\n            <div *ngIf=\"welcomeMessage\">{{ welcomeMessage }}</div>\n            <div class=\"p-terminal-content\">\n                <div *ngFor=\"let command of commands\">\n                    <span class=\"p-terminal-prompt\">{{ prompt }}</span>\n                    <span class=\"p-terminal-command\">{{ command.text }}</span>\n                    <div class=\"p-terminal-response\" [attr.aria-live]=\"'polite'\">{{ command.response }}</div>\n                </div>\n            </div>\n            <div class=\"p-terminal-prompt-container\">\n                <span class=\"p-terminal-content-prompt\">{{ prompt }}</span>\n                <input #in type=\"text\" [(ngModel)]=\"command\" class=\"p-terminal-input\" autocomplete=\"off\" (keydown)=\"handleCommand($event)\" autofocus />\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./terminal.css'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Terminal implements AfterViewInit, AfterViewChecked, OnDestroy {\n    /**\n     * Initial text to display on terminal.\n     * @group Props\n     */\n    @Input() welcomeMessage: string | undefined;\n    /**\n     * Prompt text for each command.\n     * @group Props\n     */\n    @Input() prompt: string | undefined;\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n\n    commands: any[] = [];\n\n    command!: string;\n\n    container!: Element;\n\n    commandProcessed!: boolean;\n\n    subscription: Subscription;\n\n    constructor(\n        public el: ElementRef,\n        public terminalService: TerminalService,\n        public cd: ChangeDetectorRef\n    ) {\n        this.subscription = terminalService.responseHandler.subscribe((response) => {\n            this.commands[this.commands.length - 1].response = response;\n            this.commandProcessed = true;\n        });\n    }\n\n    ngAfterViewInit() {\n        this.container = DomHandler.find(this.el.nativeElement, '.p-terminal')[0];\n    }\n\n    ngAfterViewChecked() {\n        if (this.commandProcessed) {\n            this.container.scrollTop = this.container.scrollHeight;\n            this.commandProcessed = false;\n        }\n    }\n\n    @Input()\n    set response(value: string) {\n        if (value) {\n            this.commands[this.commands.length - 1].response = value;\n            this.commandProcessed = true;\n        }\n    }\n\n    handleCommand(event: KeyboardEvent) {\n        if (event.keyCode == 13) {\n            this.commands.push({ text: this.command });\n            this.terminalService.sendCommand(this.command);\n            this.command = '';\n        }\n    }\n\n    focus() {\n        this.el.nativeElement.focus();\n    }\n\n    ngOnDestroy() {\n        if (this.subscription) {\n            this.subscription.unsubscribe();\n        }\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, FormsModule],\n    exports: [Terminal],\n    declarations: [Terminal]\n})\nexport class TerminalModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":["i1.TerminalService"],"mappings":"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"}

package/fesm2022/cax-design-system-tieredmenu.mjs

@@ -136,8 +136,8 @@ class TieredMenuSub {
         this.getItemProp(processedItem, 'command', { originalEvent: event, item: processedItem.item });
         this.itemClick.emit({ originalEvent: event, processedItem, isFocus: true });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenuSub, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: forwardRef(() => TieredMenu) }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.16", type: TieredMenuSub, isStandalone: false, selector: "cax-tieredMenuSub", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoDisplay: { classPropertyName: "autoDisplay", publicName: "autoDisplay", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusedItemId: { classPropertyName: "focusedItemId", publicName: "focusedItemId", isSignal: false, isRequired: false, transformFunction: null }, activeItemPath: { classPropertyName: "activeItemPath", publicName: "activeItemPath", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute } }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true, static: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenuSub, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: forwardRef(() => TieredMenu) }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TieredMenuSub, isStandalone: false, selector: "cax-tieredMenuSub", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoDisplay: { classPropertyName: "autoDisplay", publicName: "autoDisplay", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, autoZIndex: { classPropertyName: "autoZIndex", publicName: "autoZIndex", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, baseZIndex: { classPropertyName: "baseZIndex", publicName: "baseZIndex", isSignal: false, isRequired: false, transformFunction: numberAttribute }, popup: { classPropertyName: "popup", publicName: "popup", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, menuId: { classPropertyName: "menuId", publicName: "menuId", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, level: { classPropertyName: "level", publicName: "level", isSignal: false, isRequired: false, transformFunction: numberAttribute }, focusedItemId: { classPropertyName: "focusedItemId", publicName: "focusedItemId", isSignal: false, isRequired: false, transformFunction: null }, activeItemPath: { classPropertyName: "activeItemPath", publicName: "activeItemPath", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: false, isRequired: false, transformFunction: numberAttribute } }, outputs: { itemClick: "itemClick", itemMouseEnter: "itemMouseEnter", menuFocus: "menuFocus", menuBlur: "menuBlur", menuKeydown: "menuKeydown" }, host: { classAttribute: "cax-element" }, viewQueries: [{ propertyName: "sublistViewChild", first: true, predicate: ["sublist"], descendants: true, static: true }], ngImport: i0, template: `
         <ul
             #sublist
             role="menu"
@@ -283,7 +283,7 @@ class TieredMenuSub {
         </ul>
     `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: i3.Tooltip, selector: "[caxTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "caxTooltip", "tooltipDisabled", "tooltipOptions", "linkUrl", "linkText"] }, { kind: "component", type: i4.AngleRightIcon, selector: "AngleRightIcon" }, { kind: "component", type: TieredMenuSub, selector: "cax-tieredMenuSub", inputs: ["items", "itemTemplate", "root", "autoDisplay", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenuSub, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenuSub, decorators: [{
             type: Component,
             args: [{
                     selector: 'cax-tieredMenuSub',
@@ -582,6 +582,11 @@ class TieredMenu {
      * @group Props
      */
     tabindex = 0;
+    /**
+     * Alignment of the overlay menu.
+     * @group Props
+     */
+    align = 'left';
     /**
      * Callback to invoke when overlay menu is shown.
      * @group Emits
@@ -738,7 +743,7 @@ class TieredMenu {
             this.activeItemPath.set(this.activeItemPath().filter((p) => key !== p.key && key.startsWith(p.key)));
             this.focusedItemInfo.set({ index, level, parentKey, item });
             this.dirty = true;
-            DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+            DomHandler.focus(this.rootmenu?.sublistViewChild?.nativeElement);
         }
         else {
             if (grouped) {
@@ -748,7 +753,7 @@ class TieredMenu {
                 const rootProcessedItem = root ? processedItem : this.activeItemPath().find((p) => p.parentKey === '');
                 this.hide(originalEvent);
                 this.changeFocusedItemIndex(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
-                DomHandler.focus(this.rootmenu.sublistViewChild.nativeElement);
+                DomHandler.focus(this.rootmenu?.sublistViewChild?.nativeElement);
             }
         }
     }
@@ -944,9 +949,9 @@ class TieredMenu {
     }
     alignOverlay() {
         if (this.relativeAlign)
-            DomHandler.relativePosition(this.container, this.target);
+            DomHandler.relativePosition(this.container, this.target, true, this.align);
         else
-            DomHandler.absolutePosition(this.container, this.target);
+            DomHandler.absolutePosition(this.container, this.target, true, this.align);
     }
     onOverlayAnimationEnd(event) {
         switch (event.toState) {
@@ -1152,8 +1157,8 @@ class TieredMenu {
             this.onOverlayHide();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.caxConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.16", type: TieredMenu, isStandalone: false, selector: "cax-tieredMenu", inputs: { model: "model", popup: ["popup", "popup", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], autoDisplay: ["autoDisplay", "autoDisplay", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute] }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenu, deps: [{ token: DOCUMENT }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i5.caxConfig }, { token: i5.OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", type: TieredMenu, isStandalone: false, selector: "cax-tieredMenu", inputs: { model: "model", popup: ["popup", "popup", booleanAttribute], style: "style", styleClass: "styleClass", appendTo: "appendTo", autoZIndex: ["autoZIndex", "autoZIndex", booleanAttribute], baseZIndex: ["baseZIndex", "baseZIndex", numberAttribute], autoDisplay: ["autoDisplay", "autoDisplay", booleanAttribute], showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", id: "id", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", disabled: ["disabled", "disabled", booleanAttribute], tabindex: ["tabindex", "tabindex", numberAttribute], align: "align" }, outputs: { onShow: "onShow", onHide: "onHide" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], viewQueries: [{ propertyName: "rootmenu", first: true, predicate: ["rootmenu"], descendants: true }, { propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: `
         <div
             #container
             [attr.data-pc-section]="'root'"
@@ -1193,7 +1198,7 @@ class TieredMenu {
         </div>
     `, isInline: true, styles: ["@layer cax{.cax-tieredmenu-overlay{position:absolute;top:0;left:0}.cax-tieredmenu ul{margin:0;padding:0;list-style:none}.cax-tieredmenu .cax-submenu-list{position:absolute;min-width:100%;z-index:1;display:none}.cax-tieredmenu .cax-menuitem-link{cursor:pointer;display:flex;align-items:center;text-decoration:none;overflow:hidden;position:relative}.cax-tieredmenu .cax-menuitem-text{line-height:1}.cax-tieredmenu .cax-menuitem{position:relative}.cax-tieredmenu .cax-menuitem-link .cax-submenu-icon:not(svg){margin-left:auto}.cax-tieredmenu .cax-menuitem-link .cax-icon-wrapper{margin-left:auto}.cax-tieredmenu .cax-menuitem-active>cax-tieredmenusub>.cax-submenu-list{display:block;left:100%;top:0}.cax-tieredmenu .cax-menuitem-active>cax-tieredmenusub>.cax-submenu-list.cax-submenu-list-flipped{left:-100%}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuSub, selector: "cax-tieredMenuSub", inputs: ["items", "itemTemplate", "root", "autoDisplay", "autoZIndex", "baseZIndex", "popup", "menuId", "ariaLabel", "ariaLabelledBy", "level", "focusedItemId", "activeItemPath", "tabindex"], outputs: ["itemClick", "itemMouseEnter", "menuFocus", "menuBlur", "menuKeydown"] }], animations: [trigger('overlayAnimation', [transition(':enter', [style({ opacity: 0, transform: 'scaleY(0.8)' }), animate('{{showTransitionParams}}')]), transition(':leave', [animate('{{hideTransitionParams}}', style({ opacity: 0 }))])])], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenu, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenu, decorators: [{
             type: Component,
             args: [{ selector: 'cax-tieredMenu', template: `
         <div
@@ -1278,6 +1283,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }], tabindex: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
+            }], align: [{
+                type: Input
             }], onShow: [{
                 type: Output
             }], onHide: [{
@@ -1294,11 +1301,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class TieredMenuModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenu, TieredMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule], exports: [TieredMenu, RouterModule, TooltipModule, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenu, TieredMenuSub], imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule], exports: [TieredMenu, RouterModule, TooltipModule, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenuModule, imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule, RouterModule, TooltipModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TieredMenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TieredMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RouterModule, RippleModule, TooltipModule, AngleRightIcon, SharedModule],