@seniorsistemas/angular-components 19.7.3 → 19.7.4-fix-sds-577-afa523ed

package/fesm2022/seniorsistemas-angular-components-thumbnails.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"seniorsistemas-angular-components-thumbnails.mjs","sources":["../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-video/thumbnail-item-video.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-video/thumbnail-item-video.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-image/thumbnail-item-image.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-image/thumbnail-item-image.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/thumbnail-item.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/thumbnail-item.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/thumbnails.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/thumbnails.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/thumbnails.module.ts","../../projects/angular-components/thumbnails/src/seniorsistemas-angular-components-thumbnails.ts"],"sourcesContent":["import { Component, Input, ElementRef, ViewChild, HostListener } from \"@angular/core\";\n\n@Component({\n    selector: \"s-thumbnail-item-video\",\n    templateUrl: \"./thumbnail-item-video.component.html\",\n    styleUrls: [\"./thumbnail-item-video.component.scss\"],\n})\nexport class ThumbnailItemVideoComponent {\n    @Input({ required: true })\n    public imageUrl!: string;\n\n    @Input({ required: true })\n    public videoUrl!: string;\n\n    @ViewChild(\"videoPlayer\") videoPlayer!: ElementRef;\n\n    @HostListener(\"mouseenter\") onMouseEnter(): void {\n        if (this.videoPlayer?.nativeElement) {\n            this.videoPlayer.nativeElement.play();\n        }\n    }\n\n    @HostListener(\"mouseleave\") onMouseLeave(): void {\n        if (this.videoPlayer?.nativeElement) {\n            this.videoPlayer.nativeElement.pause();\n            this.videoPlayer.nativeElement.currentTime = 0;\n        }\n    }\n}\n","<div class=\"thumbnail-item-video\" [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\">\n    <div\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{'backgroundImage': 'url(' + imageUrl + ')'}\">\n    </div>\n    <div class=\"play-overlay\">\n        <i class=\"icon fas fa-play\"></i>\n        <span class=\"label\">{{ \"platform.angular_components.watch\" | translate }}</span>\n    </div>\n    <video\n        *ngIf=\"videoUrl\"\n        #videoPlayer\n        class=\"thumbnail-video-preview\"\n        [src]=\"videoUrl\"\n        [loop]=\"true\"\n        [muted]=\"true\"\n        preload=\"none\">\n    </video>\n</div>\n","import { Component, Input } from \"@angular/core\";\n\n@Component({\n    selector: \"s-thumbnail-item-image\",\n    templateUrl: \"./thumbnail-item-image.component.html\",\n    styleUrls: [\"./thumbnail-item-image.component.scss\"],\n})\nexport class ThumbnailItemImageComponent {\n    @Input({ required: true })\n    public imageUrl = '';\n}\n","<div class=\"thumbnail-item-image\">\n    <div\n        *ngIf=\"imageUrl; else noImage\"\n        class=\"thumbnail-image\"\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\">\n    </div>\n\n    <ng-template #noImage>\n        <div class=\"content\">\n            <i class=\"icon fas fa-image\"></i>\n            <span class=\"label\">{{ \"platform.angular_components.view\" | translate }}</span>\n        </div>\n    </ng-template>\n</div>\n","import { Component, EventEmitter, Input, OnInit, Output } from \"@angular/core\";\nimport { FormControl, FormGroup } from \"@angular/forms\";\n\nimport { ThumbnailsItem } from \"../../models/thumbnails-item\";\nimport { CheckboxListState } from \"@seniorsistemas/angular-components/checkbox-list\";\nimport { isNullOrUndefined } from \"@seniorsistemas/angular-components/utils\";\n\n@Component({\n    selector: \"s-thumbnail-item\",\n    templateUrl: \"./thumbnail-item.component.html\",\n    styleUrls: [\"./thumbnail-item.component.scss\"],\n})\nexport class ThumbnailItemComponent implements OnInit {\n    @Input()\n    public itemData!: ThumbnailsItem;\n\n    @Input()\n    public isCheckable = true;\n\n    @Input()\n    public isChecked = false;\n\n    @Input() combineCheckboxEvent = true;\n\n    @Output()\n    public checked = new EventEmitter<{ item: ThumbnailsItem, selected: boolean }>();\n\n    @Output()\n    public opened = new EventEmitter<ThumbnailsItem>();\n\n    public checkboxFormGroup: FormGroup = new FormGroup({});\n\n    public ngOnInit(): void {\n        this._validateItemData();\n        this._createFormGroup();\n    }\n\n    public onClick() {\n        this.opened.emit(this.itemData);\n    }\n\n    public checkboxClick(event: Event): void {\n        if (this.combineCheckboxEvent) {\n            return;\n        }\n\n        event.stopPropagation();\n    }\n\n    private _createFormGroup(): void {\n        this.checkboxFormGroup = new FormGroup({\n            checkbox: new FormControl({ checked: this.isChecked }),\n        });\n\n        this.checkboxFormGroup.get(\"checkbox\")?.valueChanges.subscribe((value: CheckboxListState) => {\n            this.checked.emit({ item: this.itemData, selected: value.checked });\n        });\n    }\n\n    private _validateItemData(): void {\n        if (isNullOrUndefined(this.itemData)) {\n            throw new Error(\"itemData is required\");\n        }\n    }\n}\n","<button\n    *ngIf=\"itemData\"\n    class=\"thumbnail-item\"\n    (click)=\"onClick()\"\n>\n    <div class=\"thumbnail-item-content\">\n        <div class=\"content\">\n            <ng-container *ngIf=\"itemData.type === 'video'\">\n                <s-thumbnail-item-video\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                    [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\n                >\n                </s-thumbnail-item-video>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'image'\">\n                <s-thumbnail-item-image\n                    [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\n                ></s-thumbnail-item-image>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'audio'\">\n                <i class=\"icon fas fa-volume-down\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\n            </ng-container>\n            <ng-container *ngIf=\"itemData.type === 'file'\">\n                <i class=\"icon fas fa-file-alt\"></i>\n                <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\n            </ng-container>\n        </div>\n        <form\n            *ngIf=\"isCheckable\"\n            [formGroup]=\"checkboxFormGroup\"\n            class=\"checkbox\"\n        >\n            <s-checkbox-list\n                [data]=\"{ label: '' }\"\n                formControlName=\"checkbox\"\n                (click)=\"checkboxClick($event)\"\n            ></s-checkbox-list>\n        </form>\n    </div>\n    <span class=\"file-name-label\">{{ itemData.fileName }}</span>\n</button>\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\n\nimport { ThumbnailsItem } from './models/thumbnails-item';\n\n/**\n * @description Componente de galeria de miniaturas com suporte a seleção múltipla\n * e abertura de itens. Gerencia o estado de seleção internamente e emite eventos\n * para o componente pai.\n *\n * @example\n * ```html\n * <s-thumbnails\n *   [items]=\"miniaturas\"\n *   [selectable]=\"true\"\n *   [(selection)]=\"itensSelecionados\"\n *   (itemOpened)=\"onItemAberto($event)\" />\n * ```\n *\n * @category Data\n */\n@Component({\n    selector: 's-thumbnails',\n    templateUrl: './thumbnails.component.html',\n    styleUrls: ['./thumbnails.component.scss'],\n})\nexport class ThumbnailsComponent {\n    /** @description Lista de itens exibidos na galeria. @default [] */\n    @Input()\n    public items: ThumbnailsItem[] = [];\n\n    /** @description Habilita a seleção de itens. @default true */\n    @Input()\n    public selectable = true;\n\n    /** @description Quando `true`, combina o evento de checkbox com o de seleção. @default true */\n    @Input() combineCheckboxEvent = true;\n\n    /**\n     * @description Lista de itens atualmente selecionados. Suporta two-way binding.\n     * @default []\n     */\n    @Input()\n    public set selection(items: ThumbnailsItem[]) {\n        this._selection = [...items];\n    }\n\n    /** @description Emitido quando a seleção de itens muda. */\n    @Output()\n    public selectionChange = new EventEmitter<ThumbnailsItem[]>();\n\n    /** @description Emitido quando o usuário abre um item (clique duplo ou ação de abrir). */\n    @Output()\n    public itemOpened = new EventEmitter<ThumbnailsItem>();\n\n    private _selection: ThumbnailsItem[] = [];\n\n    public onItemOpened(item: ThumbnailsItem): void {\n        this.itemOpened.emit(item);\n    }\n\n    public onItemSelected(items: { item: ThumbnailsItem; selected: boolean }): void {\n        if (items.selected) {\n            this._selection.push(items.item);\n        } else {\n            this._selection.splice(\n                this._selection.findIndex((item) => item === items.item),\n                1,\n            );\n        }\n\n        this.selectionChange.emit(this._selection);\n    }\n\n    public isSelected(item: ThumbnailsItem) {\n        return this._selection.some((i: ThumbnailsItem) => i.id === item.id);\n    }\n}\n\n","<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n","import { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\n\nimport { TranslateModule } from \"@ngx-translate/core\";\n\nimport { CheckboxListModule } from \"@seniorsistemas/angular-components/checkbox-list\";\nimport { ThumbnailItemImageComponent } from \"./components/thumbnail-item/components/thumbnail-item-image/thumbnail-item-image.component\";\nimport { ThumbnailItemVideoComponent } from \"./components/thumbnail-item/components/thumbnail-item-video/thumbnail-item-video.component\";\nimport { ThumbnailItemComponent } from \"./components/thumbnail-item/thumbnail-item.component\";\nimport { ThumbnailsComponent } from \"./thumbnails.component\";\n\n@NgModule({\n    imports: [CommonModule, ReactiveFormsModule, TranslateModule, CheckboxListModule],\n    declarations: [ThumbnailsComponent, ThumbnailItemComponent, ThumbnailItemVideoComponent, ThumbnailItemImageComponent],\n    exports: [ThumbnailsComponent],\n})\nexport class ThumbnailsModule { }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i2","i4.ThumbnailItemVideoComponent","i5.ThumbnailItemImageComponent","i6","i1.ThumbnailItemComponent"],"mappings":";;;;;;;;;;;;MAOa,2BAA2B,CAAA;AAE7B,IAAA,QAAQ,CAAU;AAGlB,IAAA,QAAQ,CAAU;AAEC,IAAA,WAAW,CAAc;IAEvB,YAAY,GAAA;AACpC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE;AACjC,YAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SACzC;KACJ;IAE2B,YAAY,GAAA;AACpC,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE;AACjC,YAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;YACvC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,WAAW,GAAG,CAAC,CAAC;SAClD;KACJ;wGApBQ,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,2BAA2B,2TCPxC,ooBAmBA,EAAA,MAAA,EAAA,CAAA,46BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDZa,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBALvC,SAAS;+BACI,wBAAwB,EAAA,QAAA,EAAA,ooBAAA,EAAA,MAAA,EAAA,CAAA,46BAAA,CAAA,EAAA,CAAA;8BAM3B,QAAQ,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAIlB,QAAQ,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAGC,WAAW,EAAA,CAAA;sBAApC,SAAS;uBAAC,aAAa,CAAA;gBAEI,YAAY,EAAA,CAAA;sBAAvC,YAAY;uBAAC,YAAY,CAAA;gBAME,YAAY,EAAA,CAAA;sBAAvC,YAAY;uBAAC,YAAY,CAAA;;;MEfjB,2BAA2B,CAAA;IAE7B,QAAQ,GAAG,EAAE,CAAC;wGAFZ,2BAA2B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA3B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,2BAA2B,gGCPxC,6cAcA,EAAA,MAAA,EAAA,CAAA,siBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAA,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDPa,2BAA2B,EAAA,UAAA,EAAA,CAAA;kBALvC,SAAS;+BACI,wBAAwB,EAAA,QAAA,EAAA,6cAAA,EAAA,MAAA,EAAA,CAAA,siBAAA,CAAA,EAAA,CAAA;8BAM3B,QAAQ,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;MEIhB,sBAAsB,CAAA;AAExB,IAAA,QAAQ,CAAkB;IAG1B,WAAW,GAAG,IAAI,CAAC;IAGnB,SAAS,GAAG,KAAK,CAAC;IAEhB,oBAAoB,GAAG,IAAI,CAAC;AAG9B,IAAA,OAAO,GAAG,IAAI,YAAY,EAA+C,CAAC;AAG1E,IAAA,MAAM,GAAG,IAAI,YAAY,EAAkB,CAAC;AAE5C,IAAA,iBAAiB,GAAc,IAAI,SAAS,CAAC,EAAE,CAAC,CAAC;IAEjD,QAAQ,GAAA;QACX,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAEM,OAAO,GAAA;QACV,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACnC;AAEM,IAAA,aAAa,CAAC,KAAY,EAAA;AAC7B,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC3B,OAAO;SACV;QAED,KAAK,CAAC,eAAe,EAAE,CAAC;KAC3B;IAEO,gBAAgB,GAAA;AACpB,QAAA,IAAI,CAAC,iBAAiB,GAAG,IAAI,SAAS,CAAC;YACnC,QAAQ,EAAE,IAAI,WAAW,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;AACzD,SAAA,CAAC,CAAC;AAEH,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAC,KAAwB,KAAI;AACxF,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,CAAC,OAAO,EAAE,CAAC,CAAC;AACxE,SAAC,CAAC,CAAC;KACN;IAEO,iBAAiB,GAAA;AACrB,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;AAClC,YAAA,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;SAC3C;KACJ;wGAnDQ,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,+OCZnC,qtDA0CA,EAAA,MAAA,EAAA,CAAA,inCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,aAAA,EAAA,QAAA,EAAA,8CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,oBAAA,EAAA,QAAA,EAAA,0FAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,kBAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAA,IAAA,CAAA,eAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,CAAA,iBAAA,EAAA,UAAA,EAAA,SAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,qBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,MAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,2BAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,2BAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,aAAA,EAAA,IAAA,EAAA,WAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FD9Ba,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBALlC,SAAS;+BACI,kBAAkB,EAAA,QAAA,EAAA,qtDAAA,EAAA,MAAA,EAAA,CAAA,inCAAA,CAAA,EAAA,CAAA;8BAMrB,QAAQ,EAAA,CAAA;sBADd,KAAK;gBAIC,WAAW,EAAA,CAAA;sBADjB,KAAK;gBAIC,SAAS,EAAA,CAAA;sBADf,KAAK;gBAGG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBAGC,OAAO,EAAA,CAAA;sBADb,MAAM;gBAIA,MAAM,EAAA,CAAA;sBADZ,MAAM;;;AEvBX;;;;;;;;;;;;;;;AAeG;MAMU,mBAAmB,CAAA;;IAGrB,KAAK,GAAqB,EAAE,CAAC;;IAI7B,UAAU,GAAG,IAAI,CAAC;;IAGhB,oBAAoB,GAAG,IAAI,CAAC;AAErC;;;AAGG;IACH,IACW,SAAS,CAAC,KAAuB,EAAA;AACxC,QAAA,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,KAAK,CAAC,CAAC;KAChC;;AAIM,IAAA,eAAe,GAAG,IAAI,YAAY,EAAoB,CAAC;;AAIvD,IAAA,UAAU,GAAG,IAAI,YAAY,EAAkB,CAAC;IAE/C,UAAU,GAAqB,EAAE,CAAC;AAEnC,IAAA,YAAY,CAAC,IAAoB,EAAA;AACpC,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;AAEM,IAAA,cAAc,CAAC,KAAkD,EAAA;AACpE,QAAA,IAAI,KAAK,CAAC,QAAQ,EAAE;YAChB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;SACpC;aAAM;YACH,IAAI,CAAC,UAAU,CAAC,MAAM,CAClB,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,KAAK,CAAC,IAAI,CAAC,EACxD,CAAC,CACJ,CAAC;SACL;QAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;KAC9C;AAEM,IAAA,UAAU,CAAC,IAAoB,EAAA;AAClC,QAAA,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAiB,KAAK,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;KACxE;wGAlDQ,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,mBAAmB,2PCzBhC,saAYA,EAAA,MAAA,EAAA,CAAA,qDAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,sBAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,aAAA,EAAA,WAAA,EAAA,sBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,SAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;4FDaa,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAL/B,SAAS;+BACI,cAAc,EAAA,QAAA,EAAA,saAAA,EAAA,MAAA,EAAA,CAAA,qDAAA,CAAA,EAAA,CAAA;8BAOjB,KAAK,EAAA,CAAA;sBADX,KAAK;gBAKC,UAAU,EAAA,CAAA;sBADhB,KAAK;gBAIG,oBAAoB,EAAA,CAAA;sBAA5B,KAAK;gBAOK,SAAS,EAAA,CAAA;sBADnB,KAAK;gBAOC,eAAe,EAAA,CAAA;sBADrB,MAAM;gBAKA,UAAU,EAAA,CAAA;sBADhB,MAAM;;;MElCE,gBAAgB,CAAA;wGAAhB,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;AAAhB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,iBAHV,mBAAmB,EAAE,sBAAsB,EAAE,2BAA2B,EAAE,2BAA2B,CAD1G,EAAA,OAAA,EAAA,CAAA,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,kBAAkB,aAEtE,mBAAmB,CAAA,EAAA,CAAA,CAAA;AAEpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,gBAAgB,YAJf,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,kBAAkB,CAAA,EAAA,CAAA,CAAA;;4FAIvE,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAL5B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,OAAO,EAAE,CAAC,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,kBAAkB,CAAC;oBACjF,YAAY,EAAE,CAAC,mBAAmB,EAAE,sBAAsB,EAAE,2BAA2B,EAAE,2BAA2B,CAAC;oBACrH,OAAO,EAAE,CAAC,mBAAmB,CAAC;AACjC,iBAAA,CAAA;;;AChBD;;AAEG;;;;"}
+{"version":3,"file":"seniorsistemas-angular-components-thumbnails.mjs","sources":["../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-image/thumbnail-item-image.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-image/thumbnail-item-image.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-video/thumbnail-item-video.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/components/thumbnail-item-video/thumbnail-item-video.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/thumbnail-item.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/components/thumbnail-item/thumbnail-item.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/thumbnails.component.ts","../../projects/angular-components/thumbnails/src/lib/thumbnails/thumbnails.component.html","../../projects/angular-components/thumbnails/src/lib/thumbnails/thumbnails.module.ts","../../projects/angular-components/thumbnails/src/seniorsistemas-angular-components-thumbnails.ts"],"sourcesContent":["import { NgStyle } from '@angular/common';\r\nimport { Component, Input } from '@angular/core';\r\n\r\nimport { TranslatePipe } from '@ngx-translate/core';\r\n\r\n@Component({\r\n    selector: 's-thumbnail-item-image',\r\n    templateUrl: './thumbnail-item-image.component.html',\r\n    styleUrls: ['./thumbnail-item-image.component.scss'],\r\n    standalone: true,\r\n    imports: [NgStyle, TranslatePipe],\r\n})\r\nexport class ThumbnailItemImageComponent {\r\n    @Input({ required: true })\r\n    public imageUrl = '';\r\n}\r\n","<div class=\"thumbnail-item-image\">\r\n    @if (imageUrl) {\r\n        <div\r\n            class=\"thumbnail-image\"\r\n            [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\"\r\n        ></div>\r\n    } @else {\r\n        <div class=\"content\">\r\n            <i class=\"icon fas fa-image\"></i>\r\n            <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\r\n        </div>\r\n    }\r\n</div>\r\n","import { NgClass, NgStyle } from '@angular/common';\r\nimport { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';\r\n\r\nimport { TranslatePipe } from '@ngx-translate/core';\r\n\r\n@Component({\r\n    selector: 's-thumbnail-item-video',\r\n    templateUrl: './thumbnail-item-video.component.html',\r\n    styleUrls: ['./thumbnail-item-video.component.scss'],\r\n    standalone: true,\r\n    imports: [NgClass, NgStyle, TranslatePipe],\r\n})\r\nexport class ThumbnailItemVideoComponent {\r\n    @Input({ required: true })\r\n    public imageUrl!: string;\r\n\r\n    @Input({ required: true })\r\n    public videoUrl!: string;\r\n\r\n    @ViewChild('videoPlayer') videoPlayer!: ElementRef;\r\n\r\n    @HostListener('mouseenter') onMouseEnter(): void {\r\n        if (this.videoPlayer?.nativeElement) {\r\n            this.videoPlayer.nativeElement.play();\r\n        }\r\n    }\r\n\r\n    @HostListener('mouseleave') onMouseLeave(): void {\r\n        if (this.videoPlayer?.nativeElement) {\r\n            this.videoPlayer.nativeElement.pause();\r\n            this.videoPlayer.nativeElement.currentTime = 0;\r\n        }\r\n    }\r\n}\r\n","<div\r\n    class=\"thumbnail-item-video\"\r\n    [ngClass]=\"{ 'thumbnail-item-video--playable': videoUrl }\"\r\n>\r\n    <div\r\n        class=\"thumbnail-image\"\r\n        [ngStyle]=\"{ backgroundImage: 'url(' + imageUrl + ')' }\"\r\n    ></div>\r\n    <div class=\"play-overlay\">\r\n        <i class=\"icon fas fa-play\"></i>\r\n        <span class=\"label\">{{ 'platform.angular_components.watch' | translate }}</span>\r\n    </div>\r\n    @if (videoUrl) {\r\n        <video\r\n            #videoPlayer\r\n            class=\"thumbnail-video-preview\"\r\n            [src]=\"videoUrl\"\r\n            [loop]=\"true\"\r\n            [muted]=\"true\"\r\n            preload=\"none\"\r\n        ></video>\r\n    }\r\n</div>\r\n","import { Component, DestroyRef, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n\r\nimport { TranslatePipe } from '@ngx-translate/core';\r\nimport { CheckboxListComponent, CheckboxListState } from '@seniorsistemas/angular-components/checkbox-list';\r\nimport { isNullOrUndefined } from '@seniorsistemas/angular-components/utils';\r\n\r\nimport { ThumbnailsItem } from '../../models/thumbnails-item';\r\nimport { ThumbnailItemImageComponent } from './components/thumbnail-item-image/thumbnail-item-image.component';\r\nimport { ThumbnailItemVideoComponent } from './components/thumbnail-item-video/thumbnail-item-video.component';\r\n\r\n@Component({\r\n    selector: 's-thumbnail-item',\r\n    templateUrl: './thumbnail-item.component.html',\r\n    styleUrls: ['./thumbnail-item.component.scss'],\r\n    standalone: true,\r\n    imports: [\r\n        ThumbnailItemVideoComponent,\r\n        ThumbnailItemImageComponent,\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        CheckboxListComponent,\r\n        TranslatePipe,\r\n    ],\r\n})\r\nexport class ThumbnailItemComponent implements OnInit {\r\n    private readonly _destroyRef = inject(DestroyRef);\r\n\r\n    @Input()\r\n    public itemData!: ThumbnailsItem;\r\n\r\n    @Input()\r\n    public isCheckable = true;\r\n\r\n    @Input()\r\n    public isChecked = false;\r\n\r\n    @Input() combineCheckboxEvent = true;\r\n\r\n    @Output()\r\n    public checked = new EventEmitter<{ item: ThumbnailsItem; selected: boolean }>();\r\n\r\n    @Output()\r\n    public opened = new EventEmitter<ThumbnailsItem>();\r\n\r\n    public checkboxFormGroup: FormGroup = new FormGroup({});\r\n\r\n    public ngOnInit(): void {\r\n        this._validateItemData();\r\n        this._createFormGroup();\r\n    }\r\n\r\n    public onClick() {\r\n        this.opened.emit(this.itemData);\r\n    }\r\n\r\n    public checkboxClick(event: Event): void {\r\n        if (this.combineCheckboxEvent) {\r\n            return;\r\n        }\r\n\r\n        event.stopPropagation();\r\n    }\r\n\r\n    private _createFormGroup(): void {\r\n        this.checkboxFormGroup = new FormGroup({\r\n            checkbox: new FormControl({ checked: this.isChecked }),\r\n        });\r\n\r\n        this.checkboxFormGroup\r\n            .get('checkbox')\r\n            ?.valueChanges.pipe(takeUntilDestroyed(this._destroyRef))\r\n            .subscribe((value: CheckboxListState) => {\r\n                this.checked.emit({ item: this.itemData, selected: value.checked });\r\n            });\r\n    }\r\n\r\n    private _validateItemData(): void {\r\n        if (isNullOrUndefined(this.itemData)) {\r\n            throw new Error('itemData is required');\r\n        }\r\n    }\r\n}\r\n","@if (itemData) {\r\n    <button\r\n        class=\"thumbnail-item\"\r\n        (click)=\"onClick()\"\r\n    >\r\n        <div class=\"thumbnail-item-content\">\r\n            <div class=\"content\">\r\n                @if (itemData.type === 'video') {\r\n                    <s-thumbnail-item-video\r\n                        [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\r\n                        [videoUrl]=\"itemData.videoUrl ? itemData.videoUrl : ''\"\r\n                    >\r\n                    </s-thumbnail-item-video>\r\n                }\r\n                @if (itemData.type === 'image') {\r\n                    <s-thumbnail-item-image\r\n                        [imageUrl]=\"itemData.imageUrl ? itemData.imageUrl : ''\"\r\n                    ></s-thumbnail-item-image>\r\n                }\r\n                @if (itemData.type === 'audio') {\r\n                    <i class=\"icon fas fa-volume-down\"></i>\r\n                    <span class=\"label\">{{ 'platform.angular_components.listen' | translate }}</span>\r\n                }\r\n                @if (itemData.type === 'file') {\r\n                    <i class=\"icon fas fa-file-alt\"></i>\r\n                    <span class=\"label\">{{ 'platform.angular_components.view' | translate }}</span>\r\n                }\r\n            </div>\r\n            @if (isCheckable) {\r\n                <form\r\n                    [formGroup]=\"checkboxFormGroup\"\r\n                    class=\"checkbox\"\r\n                >\r\n                    <s-checkbox-list\r\n                        [data]=\"{ label: '' }\"\r\n                        formControlName=\"checkbox\"\r\n                        (click)=\"checkboxClick($event)\"\r\n                    ></s-checkbox-list>\r\n                </form>\r\n            }\r\n        </div>\r\n        <span class=\"file-name-label\">{{ itemData.fileName }}</span>\r\n    </button>\r\n}\r\n","import { Component, EventEmitter, Input, Output } from '@angular/core';\r\n\r\nimport { ThumbnailItemComponent } from './components/thumbnail-item/thumbnail-item.component';\r\nimport { ThumbnailsItem } from './models/thumbnails-item';\r\n\r\n/**\r\n * @description Componente de galeria de miniaturas com suporte a seleção múltipla\r\n * e abertura de itens. Gerencia o estado de seleção internamente e emite eventos\r\n * para o componente pai.\r\n *\r\n * @example\r\n * ```html\r\n * <s-thumbnails\r\n *   [items]=\"miniaturas\"\r\n *   [selectable]=\"true\"\r\n *   [(selection)]=\"itensSelecionados\"\r\n *   (itemOpened)=\"onItemAberto($event)\" />\r\n * ```\r\n *\r\n * @category Data\r\n */\r\n@Component({\r\n    selector: 's-thumbnails',\r\n    templateUrl: './thumbnails.component.html',\r\n    styleUrls: ['./thumbnails.component.scss'],\r\n    standalone: true,\r\n    imports: [ThumbnailItemComponent],\r\n})\r\nexport class ThumbnailsComponent {\r\n    /** @description Lista de itens exibidos na galeria. @default [] */\r\n    @Input()\r\n    public items: ThumbnailsItem[] = [];\r\n\r\n    /** @description Habilita a seleção de itens. @default true */\r\n    @Input()\r\n    public selectable = true;\r\n\r\n    /** @description Quando `true`, combina o evento de checkbox com o de seleção. @default true */\r\n    @Input() combineCheckboxEvent = true;\r\n\r\n    /**\r\n     * @description Lista de itens atualmente selecionados. Suporta two-way binding.\r\n     * @default []\r\n     */\r\n    @Input()\r\n    public set selection(items: ThumbnailsItem[]) {\r\n        this._selection = [...items];\r\n    }\r\n\r\n    /** @description Emitido quando a seleção de itens muda. */\r\n    @Output()\r\n    public selectionChange = new EventEmitter<ThumbnailsItem[]>();\r\n\r\n    /** @description Emitido quando o usuário abre um item (clique duplo ou ação de abrir). */\r\n    @Output()\r\n    public itemOpened = new EventEmitter<ThumbnailsItem>();\r\n\r\n    private _selection: ThumbnailsItem[] = [];\r\n\r\n    public onItemOpened(item: ThumbnailsItem): void {\r\n        this.itemOpened.emit(item);\r\n    }\r\n\r\n    public onItemSelected(items: { item: ThumbnailsItem; selected: boolean }): void {\r\n        if (items.selected) {\r\n            this._selection.push(items.item);\r\n        } else {\r\n            this._selection.splice(\r\n                this._selection.findIndex((item) => item === items.item),\r\n                1,\r\n            );\r\n        }\r\n\r\n        this.selectionChange.emit(this._selection);\r\n    }\r\n\r\n    public isSelected(item: ThumbnailsItem) {\r\n        return this._selection.some((i: ThumbnailsItem) => i.id === item.id);\r\n    }\r\n}\r\n","<div class=\"thumbnails\">\n    @for(item of items; track $index) {\n        <s-thumbnail-item\n            [combineCheckboxEvent]=\"combineCheckboxEvent\"\n            [itemData]=\"item\"\n            [isCheckable]=\"selectable\"\n            [isChecked]=\"isSelected(item)\"\n            (checked)=\"onItemSelected($event)\"\n            (opened)=\"onItemOpened($event)\">\n        </s-thumbnail-item>\n    }\n</div>\n","import { NgModule } from '@angular/core';\r\n\r\nimport { ThumbnailsComponent } from './thumbnails.component';\r\n\r\n@NgModule({\r\n    imports: [ThumbnailsComponent],\r\n    exports: [ThumbnailsComponent],\r\n})\r\nexport class ThumbnailsModule {}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/seniorsistemas-angular-components-tiered-menu.mjs

@@ -3,8 +3,7 @@ import { Injectable, EventEmitter, inject, Component, Input, HostListener, Appli
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { disableScroll, enableScroll } from '@seniorsistemas/angular-components/utils';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 
 class TieredMenuService {
     currentItem = null;
@@ -118,11 +117,11 @@ class TieredMenuItemComponent {
         window.clearTimeout(this._showTimeout);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuItemComponent, isStandalone: true, selector: "s-tiered-menu-item", inputs: { item: "item", focused: "focused", highlight: "highlight", triggerEvent: "triggerEvent", closeOnClick: "closeOnClick" }, host: { listeners: { "click": "onClick()", "touchend": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu-item', template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"] }]
+            args: [{ selector: 's-tiered-menu-item', standalone: true, imports: [NgClass], template: "<div\n    [id]=\"item.id\"\n    class=\"tiered-menu-item\"\n    role=\"menuitem\"\n    [tabindex]=\"focused && !item.disabled ? 0 : -1\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-haspopup]=\"item.submenu ? 'menu' : null\"\n    [attr.aria-expanded]=\"item.submenu ? item.isOpen : null\"\n    [attr.data-key]=\"item.dataKey\"\n    [ngClass]=\"{\n        'tiered-menu-item--open': item.isOpen,\n        'tiered-menu-item--focused': focused,\n        'tiered-menu-item--disabled': item.disabled,\n    }\"\n>\n    <div class=\"tiered-menu-item-content\">\n        <span\n            class=\"icon\"\n            [ngClass]=\"item.iconClass\"\n        ></span>\n        <span class=\"label\">{{ item.label }}</span>\n    </div>\n    @if (item.submenu) {\n        <span\n            class=\"submenu-icon fas\"\n            [class.fa-chevron-left]=\"item.isOpen\"\n            [class.fa-chevron-right]=\"!item.isOpen\"\n        >\n        </span>\n    }\n</div>\n", styles: [".tiered-menu-item{align-items:center;display:flex;justify-content:space-between;padding:8px 16px;-webkit-user-select:none;user-select:none;cursor:pointer}.tiered-menu-item .tiered-menu-item-content .label{margin:0 12px}.tiered-menu-item:hover{background-color:#e9e6e6}.tiered-menu-item--focused{background-color:#ccc!important}.tiered-menu-item--open{background-color:#e4e2e2}.tiered-menu-item--disabled{opacity:50%;cursor:default}\n"] }]
         }], propDecorators: { item: [{
                 type: Input,
                 args: [{ required: true }]
@@ -150,11 +149,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class TieredMenuDividerComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDividerComponent, isStandalone: true, selector: "s-tiered-menu-divider", ngImport: i0, template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDividerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu-divider', template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] }]
+            args: [{ selector: 's-tiered-menu-divider', standalone: true, template: "<div class=\"divider\"></div>\n", styles: [".divider{margin:2px 0;height:1px;background-color:#ccc}\n"] }]
         }] });
 
 class TieredMenuNestedComponent {
@@ -306,11 +305,11 @@ class TieredMenuNestedComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuNestedComponent, selector: "ng-component", host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuNestedComponent, isStandalone: true, selector: "ng-component", host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuNestedComponent, decorators: [{
             type: Component,
-            args: [{ template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"] }]
+            args: [{ standalone: true, imports: [NgStyle, NgTemplateOutlet, TieredMenuItemComponent, TieredMenuDividerComponent], template: "<div\n    class=\"menu menu--nested\"\n    [ngStyle]=\"{\n        top: top + 'px',\n        left: left + 'px',\n    }\"\n>\n    <ng-container\n        *ngTemplateOutlet=\"itemsTemplate; context: { $implicit: items }\"\n    ></ng-container>\n</div>\n\n<ng-template\n    #itemsTemplate\n    let-items\n>\n    @for (item of items; track item.id) {\n        <div>\n            @if (item.visible && !item.divider) {\n                <s-tiered-menu-item\n                    [item]=\"item\"\n                    [focused]=\"item === tieredMenuService.currentItem\"\n                    [closeOnClick]=\"true\"\n                >\n                </s-tiered-menu-item>\n            }\n            @if (item.divider) {\n                <s-tiered-menu-divider></s-tiered-menu-divider>\n            }\n            @if (item.submenu && item.isOpen) {\n                <div>\n                    <div class=\"submenu\">\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                itemsTemplate;\n                                context: { $implicit: item.submenu }\n                            \"\n                        ></ng-container>\n                    </div>\n                </div>\n            }\n        </div>\n    }\n</ng-template>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;min-width:176px;padding:4px 0;position:absolute;z-index:9999;overflow:auto;width:calc(100vw - 8px)}.menu .submenu{margin-left:24px}\n"] }]
         }], propDecorators: { onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -616,11 +615,11 @@ class TieredMenuComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, selector: "s-tiered-menu", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ngStyle]=\"{\n        left: left + 'px',\n        top: top + 'px',\n    }\"\n>\n    <!-- <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"item.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            fieldUtils.triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for (item of items; track $index) {\n        @if (item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider />\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TieredMenuComponent, isStandalone: true, selector: "s-tiered-menu", inputs: { ariaLabel: "ariaLabel" }, outputs: { destroyRequest: "destroyRequest" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onDocumentClick($event)", "document:keydown": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div\r\n    class=\"menu\"\r\n    role=\"application\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"{\r\n        left: left + 'px',\r\n        top: top + 'px',\r\n    }\"\r\n>\r\n    @for (item of items; track $index) {\r\n        @if (item.visible && !item.divider) {\r\n            <s-tiered-menu-item\r\n                [item]=\"item\"\r\n                [focused]=\"item === tieredMenuService.currentItem\"\r\n                [highlight]=\"item.isOpen\"\r\n                fieldUtils.triggerEvent=\"hover\"\r\n                [closeOnClick]=\"false\"\r\n            />\r\n        }\r\n        @if (item.divider) {\r\n            <s-tiered-menu-divider />\r\n        }\r\n    }\r\n</div>\r\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TieredMenuItemComponent, selector: "s-tiered-menu-item", inputs: ["item", "focused", "highlight", "triggerEvent", "closeOnClick"] }, { kind: "component", type: TieredMenuDividerComponent, selector: "s-tiered-menu-divider" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 's-tiered-menu', template: "<div\n    class=\"menu\"\n    role=\"application\"\n    [attr.aria-label]=\"ariaLabel\"\n    [ngStyle]=\"{\n        left: left + 'px',\n        top: top + 'px',\n    }\"\n>\n    <!-- <div *ngFor=\"let item of items\">\n        <s-tiered-menu-item\n            *ngIf=\"item.visible && !item.divider\"\n            [item]=\"item\"\n            [focused]=\"item === tieredMenuService.currentItem\"\n            [highlight]=\"item.isOpen\"\n            fieldUtils.triggerEvent=\"hover\"\n            [closeOnClick]=\"false\"\n        >\n        </s-tiered-menu-item>\n        <s-tiered-menu-divider *ngIf=\"item.divider\"></s-tiered-menu-divider>\n    </div> -->\n    @for (item of items; track $index) {\n        @if (item.visible && !item.divider) {\n            <s-tiered-menu-item\n                [item]=\"item\"\n                [focused]=\"item === tieredMenuService.currentItem\"\n                [highlight]=\"item.isOpen\"\n                fieldUtils.triggerEvent=\"hover\"\n                [closeOnClick]=\"false\"\n            />\n        }\n        @if (item.divider) {\n            <s-tiered-menu-divider />\n        }\n    }\n</div>\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"] }]
+            args: [{ selector: 's-tiered-menu', standalone: true, imports: [NgStyle, TieredMenuItemComponent, TieredMenuDividerComponent], template: "<div\r\n    class=\"menu\"\r\n    role=\"application\"\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [ngStyle]=\"{\r\n        left: left + 'px',\r\n        top: top + 'px',\r\n    }\"\r\n>\r\n    @for (item of items; track $index) {\r\n        @if (item.visible && !item.divider) {\r\n            <s-tiered-menu-item\r\n                [item]=\"item\"\r\n                [focused]=\"item === tieredMenuService.currentItem\"\r\n                [highlight]=\"item.isOpen\"\r\n                fieldUtils.triggerEvent=\"hover\"\r\n                [closeOnClick]=\"false\"\r\n            />\r\n        }\r\n        @if (item.divider) {\r\n            <s-tiered-menu-divider />\r\n        }\r\n    }\r\n</div>\r\n", styles: [".menu{background-color:#fff;border:1px solid #ccc;border-radius:6px;box-shadow:0 2px 12px #0000001a;display:inline-flex;flex-direction:column;max-height:100vh;min-width:176px;padding:4px 0;overflow-y:auto;position:absolute;z-index:9999}\n"] }]
         }], propDecorators: { ariaLabel: [{
                 type: Input
             }], destroyRequest: [{
@@ -864,13 +863,14 @@ class TieredMenuDirective {
                 this._tieredMenuService.items[0];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent", ariaLabel: "ariaLabel" }, outputs: { tieredMenuOpened: "tieredMenuOpened", tieredMenuClosed: "tieredMenuClosed" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TieredMenuDirective, isStandalone: true, selector: "[sTieredMenu]", inputs: { items: "items", focusedItem: "focusedItem", triggerEvent: "triggerEvent", ariaLabel: "ariaLabel" }, outputs: { tieredMenuOpened: "tieredMenuOpened", tieredMenuClosed: "tieredMenuClosed" }, host: { listeners: { "click": "onClick($event)" } }, providers: [TieredMenuEventService, TieredMenuService], usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[sTieredMenu]',
                     providers: [TieredMenuEventService, TieredMenuService],
+                    standalone: true,
                 }]
         }], propDecorators: { items: [{
                 type: Input
@@ -891,24 +891,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
 class TieredMenuModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, declarations: [TieredMenuDirective,
-            TieredMenuComponent,
-            TieredMenuNestedComponent,
-            TieredMenuItemComponent,
-            TieredMenuDividerComponent], imports: [CommonModule], exports: [TieredMenuDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, providers: [TieredMenuGlobalService], imports: [CommonModule] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, imports: [TieredMenuDirective], exports: [TieredMenuDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, providers: [TieredMenuGlobalService] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TieredMenuModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [
-                        TieredMenuDirective,
-                        TieredMenuComponent,
-                        TieredMenuNestedComponent,
-                        TieredMenuItemComponent,
-                        TieredMenuDividerComponent,
-                    ],
+                    imports: [TieredMenuDirective],
                     exports: [TieredMenuDirective],
                     providers: [TieredMenuGlobalService],
                 }]