import { Component, EventEmitter, Input, Output, ViewChildren, ViewEncapsulation } from "@angular/core";
import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { BREADCRUMB_DROPDOWN_ICON } from "../../common/qms-icon.const";
import { ItemIconType } from "../related/common/item-icon-type.enum";
import { QMSBreadcrumbItemDirective } from "./breadcrumb-item.directive";
import { BreadcrumbType } from "./enum/breadcrumb-type";
import { DropdownBreadCrumbNodeWidth } from "./enum/dropdown-node-width.enum";
import { BreadcrumbNode } from "./model/breadcrumb-node.model";
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/icon";
import * as i2 from "@angular/platform-browser";
import * as i3 from "../../services/translation-registry.service";
import * as i4 from "@angular/common";
import * as i5 from "../../directives/dropdown-menu/dropdown-item.directive";
import * as i6 from "../../directives/tooltip/tooltip-renderer.directive";
import * as i7 from "@angular/material/list";
import * as i8 from "../list/list";
import * as i9 from "../button/button";
import * as i10 from "@angular/material/menu";
import * as i11 from "@angular/material/sidenav";
import * as i12 from "./breadcrumb-item.directive";
import * as i13 from "./breadcrumb-direction-icon.directive";
export class QMSBreadcrumb {
    constructor(ele, iconRegistry, cdRef, sanitizer, trans) {
        this.ele = ele;
        this.iconRegistry = iconRegistry;
        this.cdRef = cdRef;
        this.sanitizer = sanitizer;
        this.trans = trans;
        this.type = BreadcrumbType.normal;
        this.numDisplayItem = 0;
        this.onlyItem = false;
        this.disabledLastItem = true;
        this.onItemClick = new EventEmitter();
        this.isOverflow = false;
        this.dropdownNodes = [];
        this.homeNode = new BreadcrumbNode();
        this.previousNode = new BreadcrumbNode();
        this.sideNavNodes = [];
        this.itemSpace = DropdownBreadCrumbNodeWidth.NORMAL; // width of dropdown node in normal view
        this.isMobileType = false;
        this.ngUnsubscribe = new Subject();
        iconRegistry.addSvgIconLiteral('breadcrumb_dropdown', sanitizer.bypassSecurityTrustHtml(BREADCRUMB_DROPDOWN_ICON));
    }
    ngOnChanges(changes) {
        if (changes.nodes && this.breadCrumbNodes && JSON.stringify(changes.nodes.currentValue) !== JSON.stringify(changes.nodes.previousValue)) {
            this.nodes = [...changes.nodes.currentValue];
            this.initBreadCrumb();
            this.buildBreadcrumb();
        }
    }
    ngOnInit() {
        this.trans.getLanguageSubject$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((res) => {
            if (res) {
                this.LANG = this.trans.getObjectLang(res);
            }
        });
        this.isMobileType = (this.type == BreadcrumbType.mobile);
        this.itemIconType = ItemIconType;
        this.initBreadCrumb();
    }
    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
    ngAfterViewInit() {
        this.buildBreadcrumb();
        this.cdRef.detectChanges();
    }
    checkOverflow(width) {
        const nodeWidths = this.breadCrumbNodes.map(x => x.ele.nativeElement.offsetWidth);
        let currentWidth = 0;
        nodeWidths.forEach(width => {
            currentWidth += width;
        });
        this.isOverflow = width < currentWidth && (this.itemNodes.length >= this.numDisplayItem);
        this.cdRef.detectChanges();
        if (this.isOverflow) {
            let screenWidth = width;
            if (this.type !== 'table') {
                this.dropdownNodes.push(this.homeNode);
                currentWidth -= nodeWidths[0];
                currentWidth += this.itemSpace;
                screenWidth -= this.itemSpace;
            }
            else {
                currentWidth += this.itemSpace;
                screenWidth -= nodeWidths[0];
                screenWidth -= this.itemSpace;
            }
            nodeWidths.shift();
            nodeWidths.forEach((eleWidth, index) => {
                if (currentWidth > screenWidth) {
                    this.itemNodes[index].isShow = index == nodeWidths.length - 1 ? true : false;
                    this.itemNodes[index].isOverflow = index == nodeWidths.length - 1 ? false : this.itemNodes[index].isOverflow;
                    this.dropdownNodes.push(this.itemNodes[index]);
                    currentWidth -= (eleWidth);
                }
            });
            this.dropdownNodes = this.dropdownNodes.reverse();
        }
    }
    initBreadCrumb() {
        if (this.nodes && this.nodes.length > 0) {
            this.nodes.forEach(ele => {
                ele.isOverflow = ele.isOverflow ? ele.isOverflow : false;
                ele.isShow = true;
                ele.displayType = this.getItemIconType(ele);
            });
            if (this.type !== 'mobile') {
                this.homeNode = this.nodes[0];
                this.itemNodes = this.nodes.slice(1);
            }
            else {
                this.previousNode = this.nodes[this.nodes.length >= 2 ? this.nodes.length - 2 : 0];
                this.sideNavNodes = [];
                this.sideNavNodes = this.nodes.length >= 2 ? [...this.nodes] : [];
            }
        }
        if (this.type === 'table') {
            this.ele.nativeElement.classList.add('qms-breadcrumb-table');
            this.itemSpace = DropdownBreadCrumbNodeWidth.TABLE; // width of dropdown node in table view
        }
        if (this.maxLine && this.maxLine > 1) {
            this.ele.nativeElement.classList.add('qms-breadcrumb__multi-line');
        }
    }
    buildBreadcrumb() {
        if (!this.isMobileType && this.ele.nativeElement.offsetWidth) {
            this.dropdownNodes = [];
            if (!this.maxLine || this.maxLine < 2) {
                this.checkOverflow(this.ele.nativeElement.offsetWidth);
            }
            else {
                this.checkOverflow(this.ele.nativeElement.offsetWidth * 1.7);
            }
        }
        //show number Items after 3 dot icon
        if (+this.numDisplayItem && +this.numDisplayItem >= 2 && this.itemNodes?.length >= 2) {
            this.dropdownNodes = [];
            this.dropdownNodes = this.itemNodes.slice(0, -this.numDisplayItem).reverse();
            this.itemNodes = [...[], ...this.itemNodes.slice(-this.numDisplayItem)];
            if (this.dropdownNodes.length) {
                this.isOverflow = true;
            }
            this.cdRef.detectChanges();
        }
        //just show 1 item for mobile
        if (this.onlyItem) {
            this.isOverflow = true;
            this.dropdownNodes = [];
            let itemNodes = [...this.itemNodes];
            let lastItem = itemNodes.pop();
            this.dropdownNodes = [...itemNodes].reverse();
            this.dropdownNodes.push(this.homeNode);
            this.itemNodes = [];
            this.itemNodes = [lastItem];
            this.cdRef.detectChanges();
        }
    }
    getItemIconType(treeConfig) {
        if (treeConfig.itemIcon)
            return ItemIconType.name;
        if (treeConfig.itemIconPath)
            return ItemIconType.path;
        if (treeConfig.itemIconBase64)
            return ItemIconType.base64;
        if (treeConfig.itemIconSvg)
            return ItemIconType.svg;
        return ItemIconType.none;
    }
    getImagePath(node) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(node.itemIconBase64);
    }
    onKeyPressed(event) {
        [...event.target.children].forEach(x => x.click());
    }
    onItemSelect(item, isLastItem) {
        if (isLastItem && this.disabledLastItem)
            return;
        if (this.onItemClick) {
            this.onItemClick.emit(item);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSBreadcrumb, deps: [{ token: i0.ElementRef }, { token: i1.MatIconRegistry }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i3.TranslateLibraryService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: QMSBreadcrumb, selector: "qms-breadcrumb", inputs: { nodes: "nodes", type: "type", maxLine: "maxLine", numDisplayItem: "numDisplayItem", onlyItem: "onlyItem", disabledLastItem: "disabledLastItem" }, outputs: { onItemClick: "onItemClick" }, viewQueries: [{ propertyName: "breadCrumbNodes", predicate: QMSBreadcrumbItemDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div>\n  <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\n    <!-- Home -->\n    <div qms-breadcrumb-item *ngIf=\"!isOverflow || type=='table'\" [(showTooltip)]=\"homeNode['isOverflow']\">\n      <mat-icon *ngIf=\"homeNode?.displayType === itemIconType.name\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n        {{ homeNode?.itemIcon }}\n      </mat-icon>\n      <mat-icon *ngIf=\"homeNode?.displayType === itemIconType.svg\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\" [svgIcon]=\"homeNode.itemIconSvg\">\n      </mat-icon>\n      <img *ngIf=\"homeNode?.displayType === itemIconType.path\" class=\"mat-icon item-icon\"\n        [src]=\"homeNode.itemIconPath\" />\n      <img *ngIf=\"homeNode?.displayType === itemIconType.base64\" class=\"mat-icon image-base64 item-icon\"\n        [src]=\"getImagePath(homeNode)\" />\n      <div class=\"qms-breadcrumb-item-text\" [qms-tool-tip]=\"homeNode['name']\" [showToolTip]=\"homeNode['isOverflow']\"\n        #breadcrumbItemText mode=\"dark\" (click)=\"$event.stopPropagation();onItemSelect(homeNode)\">\n        {{homeNode?.name}}\n      </div>\n      <mat-icon *ngIf=\"!isOverflow && type !=='table'\">keyboard_arrow_right</mat-icon>\n      <span *ngIf=\"itemNodes.length && type=='table'\" qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n\n    <!-- Dropdown not table -->\n    <div qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\n      <button qms-btn-icon color=\"light\" class=\"breadcrumb__dropdown-btn\" [matMenuTriggerFor]=\"bodyMediumMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\n      </button>\n      <mat-menu #bodyMediumMenu=\"matMenu\" yPosition=\"below\" class=\"qms-breadcrumb-menu\">\n        <div>\n          <div qms-menu-item mat-menu-item disableRipple *ngFor=\"let item of dropdownNodes\"\n            (keydown.enter)=\"onKeyPressed($event)\" (click)=\"onItemSelect(item)\">\n            <div #menuItemContent qms-expansion-header>\n              <div qms-list-header>\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-menu>\n\n      <span qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n\n    <!-- Dropdown table -->\n    <div qms-breadcrumb-item *ngIf=\"isOverflow && type=='table' && dropdownNodes.length\">\n      <button qms-btn-icon color=\"light\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"bodyMediumMenu\">\n        <mat-icon>more_horiz</mat-icon>\n      </button>\n      <mat-menu #bodyMediumMenu=\"matMenu\" yPosition=\"below\" class=\"qms-breadcrumb-menu\">\n        <div>\n          <div qms-menu-item mat-menu-item disableRipple *ngFor=\"let item of dropdownNodes\"\n            (keydown.enter)=\"onKeyPressed($event)\" (click)=\"onItemSelect(item)\">\n            <div #menuItemContent qms-expansion-header>\n              <div qms-list-header>\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-menu>\n\n      <span qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n    <!-- Item list -->\n    <div qms-breadcrumb-item *ngFor=\"let item of itemNodes;let i=index\" [isLastItem]=\"i === itemNodes.length - 1\"\n      [(showTooltip)]=\"item.isOverflow\">\n      <mat-icon *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n        {{ item.itemIcon }}\n      </mat-icon>\n      <mat-icon *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\" [svgIcon]=\"item.itemIconSvg\">\n      </mat-icon>\n      <img *ngIf=\"item.displayType === itemIconType.path && item.isShow\" class=\"mat-icon item-icon\"\n        [src]=\"item.itemIconPath\" />\n      <img *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\" class=\"mat-icon image-base64 item-icon\"\n        [src]=\"getImagePath(item)\" />\n      <div class=\"qms-breadcrumb-item-text\" [qms-tool-tip]=\"item.name\" [showToolTip]=\"item.isOverflow\"\n        #breadcrumbItemText mode=\"dark\" *ngIf=\"item.isShow\"\n        (click)=\"$event.stopPropagation();onItemSelect(item, i == itemNodes.length - 1);\">\n        {{item.name}}\n      </div>\n      <span qms-breadcrumb-direction-icon *ngIf=\"item.isShow && i !== itemNodes.length - 1\">\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n  </div>\n\n  <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\n    <mat-sidenav-container>\n      <mat-sidenav #sidenav mode=\"'over'\" class=\"breadcrumb-sidenav\" [fixedInViewport]=\"true\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <p>{{LANG.BREADCRUMB}}</p>\n            <div class=\"sub\">{{LANG.NAVIGATE_TO}}</div>\n          </div>\n          <div class=\"header-right\">\n            <button qms-btn-text (click)=\"sidenav.close()\">\n              {{LANG.QMSCKEDITOR.CLOSE}}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"content\">\n          <mat-selection-list #shoes [multiple]=\"false\">\n            <mat-list-option class=\"qms-list-option\"\n              *ngFor=\"let item of sideNavNodes; let first = first; let last = last;\"\n              (click)=\"$event.stopPropagation();onItemSelect(item)\">\n              <mat-icon *ngIf=\"!first\" mat-list-icon class=\"subdirectory_arrow_right\">subdirectory_arrow_right\n              </mat-icon>\n              <div class=\"content-text-name\">\n                <div class=\"content-text-name-heading\">\n                  <mat-icon *ngIf=\"item.displayType === itemIconType.name\"\n                    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n                    {{ item.itemIcon }}\n                  </mat-icon>\n                  <img *ngIf=\"item.displayType === itemIconType.path\" class=\"mat-icon item-icon\"\n                    [src]=\"item.itemIconPath\" />\n                  <img *ngIf=\"item.displayType === itemIconType.base64\" class=\"mat-icon image-base64 item-icon\"\n                    [src]=\"getImagePath(item)\" />\n                  <span class=\"\">{{item.name}}</span>\n                </div>\n                <mat-icon class=\"color-gray\" *ngIf=\"last\">done</mat-icon>\n              </div>\n            </mat-list-option>\n          </mat-selection-list>\n        </div>\n      </mat-sidenav>\n\n      <mat-sidenav-content>\n        <button qms-btn-icon class=\"more_horiz-btn\" color=\"light\" *ngIf=\"sideNavNodes.length\"\n          (click)=\"sidenav.toggle()\">\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n      </mat-sidenav-content>\n    </mat-sidenav-container>\n    <div qms-breadcrumb-item [(showTooltip)]=\"previousNode['isOverflow']\">\n      <!-- Home -->\n      <span qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </span>\n      <mat-icon *ngIf=\"previousNode?.displayType === itemIconType.name\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n        {{ previousNode.itemIcon }}\n      </mat-icon>\n      <mat-icon *ngIf=\"previousNode?.displayType === itemIconType.svg\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\" [svgIcon]=\"previousNode.itemIconSvg\">\n      </mat-icon>\n      <img *ngIf=\"previousNode?.displayType === itemIconType.path\" class=\"mat-icon item-icon\"\n        [src]=\"previousNode.itemIconPath\" />\n      <img *ngIf=\"previousNode?.displayType === itemIconType.base64\" class=\"mat-icon image-base64 item-icon\"\n        [src]=\"getImagePath(previousNode)\" />\n      <div class=\"qms-breadcrumb-item-text\" [qms-tool-tip]=\"previousNode['name']\"\n        [showToolTip]=\"previousNode['isOverflow']\" #breadcrumbItemText mode=\"dark\"\n        (click)=\"$event.stopPropagation();onItemSelect(previousNode)\">\n        {{previousNode.name}}\n      </div>\n    </div>\n  </div>\n</div>", styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-item,.breadcrumb-container .qms-breadcrumb-direction-icon{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.25rem;margin-right:.25rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit;margin:8px 0}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:#0009;font-weight:400;cursor:not-allowed}.breadcrumb-container .mat-drawer-container{z-index:3;background-color:transparent}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:#0009}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{font-size:12px;font-weight:400;color:#0009}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}.breadcrumb-sidenav{display:flex;align-items:center;justify-content:center;width:100%;background:#fff;z-index:3}.breadcrumb-sidenav .header{font-family:Open Sans;font-style:normal;background-color:var(--background-area);height:71px;display:flex;justify-content:space-between;padding:16px}.breadcrumb-sidenav .header p{font-weight:600;font-size:18px;line-height:25px;color:var(--default-color);margin-bottom:0}.breadcrumb-sidenav .header .sub{font-weight:400;font-size:14px;line-height:22px;color:#5a5a5a}.breadcrumb-sidenav .content{padding:0 16px 16px;height:calc(100vh - 71px);overflow:auto}.breadcrumb-sidenav .content .qms-list-option{height:unset!important}.breadcrumb-sidenav .content .qms-list-option .mat-list-text{padding-right:0!important;padding-left:0!important}.breadcrumb-sidenav .content .qms-list-option .mat-list-item-content{border-bottom:1px solid #e0e0e0;padding:8px}.breadcrumb-sidenav .content-text-name{display:flex;align-items:center;justify-content:space-between}.breadcrumb-sidenav .content-text-name .content-text-name-heading{display:flex;align-items:center;color:var(--default-color)}.breadcrumb-sidenav .content-text-name .content-text-name-heading .item-icon{margin-right:10px;color:var(--tab-border)}.breadcrumb-sidenav .content-text-name .color-gray{color:var(--tab-border)}.more_horiz-btn.qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem;margin:8px 0 8px 8px}.subdirectory_arrow_right{color:#0163b2}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i5.QMSDropdownMenuItem, selector: "[qms-menu-item]", inputs: ["selected"] }, { kind: "directive", type: i6.QMSToolTipRendererDirective, selector: "[qms-tool-tip]", inputs: ["showToolTip", "mode", "qms-tool-tip", "contentTemplate", "position"] }, { kind: "component", type: i7.MatSelectionList, selector: "mat-selection-list", inputs: ["color", "compareWith", "multiple", "hideSingleSelectionIndicator", "disabled"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { kind: "component", type: i7.MatListOption, selector: "mat-list-option", inputs: ["togglePosition", "checkboxPosition", "color", "value", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { kind: "directive", type: i8.QMSListLine, selector: "[qms-line]", inputs: ["size", "type", "color"] }, { kind: "directive", type: i8.QMSListHeader, selector: "[qms-list-header]" }, { kind: "directive", type: i8.QMSListExpansionHeader, selector: "[qms-expansion-header]" }, { kind: "component", type: i9.QMSButton, selector: "button[qms-btn], button[qms-btn-lg], button[qms-btn-outlined],\n               button[qms-btn-outlined-lg], button[qms-btn-text], button[qms-btn-text-lg],\n               button[qms-btn-fab],button[qms-btn-fab-sm],button[qms-btn-fab-ext],\n               button[qms-btn-fab-outlined],button[qms-btn-fab-outlined-sm],button[qms-btn-fab-outlined-ext]", inputs: ["disabled", "color"], exportAs: ["qmsButton"] }, { kind: "component", type: i9.QMSButtonIcon, selector: "button[qms-btn-icon]", inputs: ["disabled", "color", "active"], exportAs: ["qmsButtonIcon"] }, { kind: "component", type: i10.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i10.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i10.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i11.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i11.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i11.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: i12.QMSBreadcrumbItemDirective, selector: "[qms-breadcrumb-item]", inputs: ["isLastItem", "showTooltip"], outputs: ["showTooltipChange"] }, { kind: "directive", type: i13.QMSBreadcrumbDirectionIconDirective, selector: "[qms-breadcrumb-direction-icon]" }], encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: QMSBreadcrumb, decorators: [{
            type: Component,
            args: [{ selector: 'qms-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<div>\n  <div class=\"breadcrumb-container\" *ngIf=\"!isMobileType\">\n    <!-- Home -->\n    <div qms-breadcrumb-item *ngIf=\"!isOverflow || type=='table'\" [(showTooltip)]=\"homeNode['isOverflow']\">\n      <mat-icon *ngIf=\"homeNode?.displayType === itemIconType.name\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n        {{ homeNode?.itemIcon }}\n      </mat-icon>\n      <mat-icon *ngIf=\"homeNode?.displayType === itemIconType.svg\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\" [svgIcon]=\"homeNode.itemIconSvg\">\n      </mat-icon>\n      <img *ngIf=\"homeNode?.displayType === itemIconType.path\" class=\"mat-icon item-icon\"\n        [src]=\"homeNode.itemIconPath\" />\n      <img *ngIf=\"homeNode?.displayType === itemIconType.base64\" class=\"mat-icon image-base64 item-icon\"\n        [src]=\"getImagePath(homeNode)\" />\n      <div class=\"qms-breadcrumb-item-text\" [qms-tool-tip]=\"homeNode['name']\" [showToolTip]=\"homeNode['isOverflow']\"\n        #breadcrumbItemText mode=\"dark\" (click)=\"$event.stopPropagation();onItemSelect(homeNode)\">\n        {{homeNode?.name}}\n      </div>\n      <mat-icon *ngIf=\"!isOverflow && type !=='table'\">keyboard_arrow_right</mat-icon>\n      <span *ngIf=\"itemNodes.length && type=='table'\" qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n\n    <!-- Dropdown not table -->\n    <div qms-breadcrumb-item *ngIf=\"isOverflow && type!='table'\">\n      <button qms-btn-icon color=\"light\" class=\"breadcrumb__dropdown-btn\" [matMenuTriggerFor]=\"bodyMediumMenu\"\n        (click)=\"$event.stopPropagation()\">\n        <mat-icon svgIcon=\"breadcrumb_dropdown\"></mat-icon>\n      </button>\n      <mat-menu #bodyMediumMenu=\"matMenu\" yPosition=\"below\" class=\"qms-breadcrumb-menu\">\n        <div>\n          <div qms-menu-item mat-menu-item disableRipple *ngFor=\"let item of dropdownNodes\"\n            (keydown.enter)=\"onKeyPressed($event)\" (click)=\"onItemSelect(item)\">\n            <div #menuItemContent qms-expansion-header>\n              <div qms-list-header>\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-menu>\n\n      <span qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n\n    <!-- Dropdown table -->\n    <div qms-breadcrumb-item *ngIf=\"isOverflow && type=='table' && dropdownNodes.length\">\n      <button qms-btn-icon color=\"light\" (click)=\"$event.stopPropagation()\" [matMenuTriggerFor]=\"bodyMediumMenu\">\n        <mat-icon>more_horiz</mat-icon>\n      </button>\n      <mat-menu #bodyMediumMenu=\"matMenu\" yPosition=\"below\" class=\"qms-breadcrumb-menu\">\n        <div>\n          <div qms-menu-item mat-menu-item disableRipple *ngFor=\"let item of dropdownNodes\"\n            (keydown.enter)=\"onKeyPressed($event)\" (click)=\"onItemSelect(item)\">\n            <div #menuItemContent qms-expansion-header>\n              <div qms-list-header>\n                <div qms-line color=\"default-subtitle\">{{item.name}}</div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </mat-menu>\n\n      <span qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n    <!-- Item list -->\n    <div qms-breadcrumb-item *ngFor=\"let item of itemNodes;let i=index\" [isLastItem]=\"i === itemNodes.length - 1\"\n      [(showTooltip)]=\"item.isOverflow\">\n      <mat-icon *ngIf=\"item.displayType === itemIconType.name && item.isShow\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n        {{ item.itemIcon }}\n      </mat-icon>\n      <mat-icon *ngIf=\"item.displayType === itemIconType.svg && item.isShow\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\" [svgIcon]=\"item.itemIconSvg\">\n      </mat-icon>\n      <img *ngIf=\"item.displayType === itemIconType.path && item.isShow\" class=\"mat-icon item-icon\"\n        [src]=\"item.itemIconPath\" />\n      <img *ngIf=\"item.displayType === itemIconType.base64 && item.isShow\" class=\"mat-icon image-base64 item-icon\"\n        [src]=\"getImagePath(item)\" />\n      <div class=\"qms-breadcrumb-item-text\" [qms-tool-tip]=\"item.name\" [showToolTip]=\"item.isOverflow\"\n        #breadcrumbItemText mode=\"dark\" *ngIf=\"item.isShow\"\n        (click)=\"$event.stopPropagation();onItemSelect(item, i == itemNodes.length - 1);\">\n        {{item.name}}\n      </div>\n      <span qms-breadcrumb-direction-icon *ngIf=\"item.isShow && i !== itemNodes.length - 1\">\n        <mat-icon>keyboard_arrow_right</mat-icon>\n      </span>\n    </div>\n  </div>\n\n  <div class=\"breadcrumb-container\" *ngIf=\"isMobileType\">\n    <mat-sidenav-container>\n      <mat-sidenav #sidenav mode=\"'over'\" class=\"breadcrumb-sidenav\" [fixedInViewport]=\"true\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <p>{{LANG.BREADCRUMB}}</p>\n            <div class=\"sub\">{{LANG.NAVIGATE_TO}}</div>\n          </div>\n          <div class=\"header-right\">\n            <button qms-btn-text (click)=\"sidenav.close()\">\n              {{LANG.QMSCKEDITOR.CLOSE}}\n            </button>\n          </div>\n        </div>\n\n        <div class=\"content\">\n          <mat-selection-list #shoes [multiple]=\"false\">\n            <mat-list-option class=\"qms-list-option\"\n              *ngFor=\"let item of sideNavNodes; let first = first; let last = last;\"\n              (click)=\"$event.stopPropagation();onItemSelect(item)\">\n              <mat-icon *ngIf=\"!first\" mat-list-icon class=\"subdirectory_arrow_right\">subdirectory_arrow_right\n              </mat-icon>\n              <div class=\"content-text-name\">\n                <div class=\"content-text-name-heading\">\n                  <mat-icon *ngIf=\"item.displayType === itemIconType.name\"\n                    class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n                    {{ item.itemIcon }}\n                  </mat-icon>\n                  <img *ngIf=\"item.displayType === itemIconType.path\" class=\"mat-icon item-icon\"\n                    [src]=\"item.itemIconPath\" />\n                  <img *ngIf=\"item.displayType === itemIconType.base64\" class=\"mat-icon image-base64 item-icon\"\n                    [src]=\"getImagePath(item)\" />\n                  <span class=\"\">{{item.name}}</span>\n                </div>\n                <mat-icon class=\"color-gray\" *ngIf=\"last\">done</mat-icon>\n              </div>\n            </mat-list-option>\n          </mat-selection-list>\n        </div>\n      </mat-sidenav>\n\n      <mat-sidenav-content>\n        <button qms-btn-icon class=\"more_horiz-btn\" color=\"light\" *ngIf=\"sideNavNodes.length\"\n          (click)=\"sidenav.toggle()\">\n          <mat-icon>more_horiz</mat-icon>\n        </button>\n      </mat-sidenav-content>\n    </mat-sidenav-container>\n    <div qms-breadcrumb-item [(showTooltip)]=\"previousNode['isOverflow']\">\n      <!-- Home -->\n      <span qms-breadcrumb-direction-icon>\n        <mat-icon>keyboard_arrow_left</mat-icon>\n      </span>\n      <mat-icon *ngIf=\"previousNode?.displayType === itemIconType.name\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\">\n        {{ previousNode.itemIcon }}\n      </mat-icon>\n      <mat-icon *ngIf=\"previousNode?.displayType === itemIconType.svg\"\n        class=\"mat-icon-rtl-mirror material-icons-outlined item-icon\" [svgIcon]=\"previousNode.itemIconSvg\">\n      </mat-icon>\n      <img *ngIf=\"previousNode?.displayType === itemIconType.path\" class=\"mat-icon item-icon\"\n        [src]=\"previousNode.itemIconPath\" />\n      <img *ngIf=\"previousNode?.displayType === itemIconType.base64\" class=\"mat-icon image-base64 item-icon\"\n        [src]=\"getImagePath(previousNode)\" />\n      <div class=\"qms-breadcrumb-item-text\" [qms-tool-tip]=\"previousNode['name']\"\n        [showToolTip]=\"previousNode['isOverflow']\" #breadcrumbItemText mode=\"dark\"\n        (click)=\"$event.stopPropagation();onItemSelect(previousNode)\">\n        {{previousNode.name}}\n      </div>\n    </div>\n  </div>\n</div>", styles: [".breadcrumb-container{display:flex;font-family:Open Sans;font-size:14px;font-weight:600;color:#323232}.breadcrumb-container .qms-breadcrumb-item,.breadcrumb-container .qms-breadcrumb-direction-icon{display:flex;align-items:center;padding:3px 0 2px}.breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:18px;height:18px;font-size:18px;margin-left:.25rem;margin-right:.25rem}.breadcrumb-container .item-icon{margin-right:2px}.breadcrumb-container .qms-breadcrumb-item{cursor:inherit;margin:8px 0}.breadcrumb-container .qms-breadcrumb-item .qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem}.breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn{width:2rem;height:2rem}.breadcrumb-container .qms-breadcrumb-item .breadcrumb__dropdown-btn svg{display:block}.breadcrumb-container .qms-breadcrumb-last-item{color:#0009;font-weight:400;cursor:not-allowed}.breadcrumb-container .mat-drawer-container{z-index:3;background-color:transparent}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-direction-icon .mat-icon{width:12px;height:12px;font-size:12px;margin-left:.25rem;margin-right:.25rem;color:#0009}.qms-breadcrumb-table .breadcrumb-container .item-icon{margin-right:1px}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-text{font-size:12px;font-weight:400;color:#0009}.qms-breadcrumb-table .breadcrumb-container .qms-breadcrumb-item .qms-breadcrumb-item-overflow{max-width:240px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.qms-breadcrumb__multi-line .breadcrumb-container{flex-wrap:wrap}.qms-breadcrumb-menu .qms-dropdown-menu-item{border:none}.breadcrumb-sidenav{display:flex;align-items:center;justify-content:center;width:100%;background:#fff;z-index:3}.breadcrumb-sidenav .header{font-family:Open Sans;font-style:normal;background-color:var(--background-area);height:71px;display:flex;justify-content:space-between;padding:16px}.breadcrumb-sidenav .header p{font-weight:600;font-size:18px;line-height:25px;color:var(--default-color);margin-bottom:0}.breadcrumb-sidenav .header .sub{font-weight:400;font-size:14px;line-height:22px;color:#5a5a5a}.breadcrumb-sidenav .content{padding:0 16px 16px;height:calc(100vh - 71px);overflow:auto}.breadcrumb-sidenav .content .qms-list-option{height:unset!important}.breadcrumb-sidenav .content .qms-list-option .mat-list-text{padding-right:0!important;padding-left:0!important}.breadcrumb-sidenav .content .qms-list-option .mat-list-item-content{border-bottom:1px solid #e0e0e0;padding:8px}.breadcrumb-sidenav .content-text-name{display:flex;align-items:center;justify-content:space-between}.breadcrumb-sidenav .content-text-name .content-text-name-heading{display:flex;align-items:center;color:var(--default-color)}.breadcrumb-sidenav .content-text-name .content-text-name-heading .item-icon{margin-right:10px;color:var(--tab-border)}.breadcrumb-sidenav .content-text-name .color-gray{color:var(--tab-border)}.more_horiz-btn.qms-btn-icon{width:1.5rem;height:1.5rem;line-height:2rem;margin:8px 0 8px 8px}.subdirectory_arrow_right{color:#0163b2}\n"] }]
        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.MatIconRegistry }, { type: i0.ChangeDetectorRef }, { type: i2.DomSanitizer }, { type: i3.TranslateLibraryService }], propDecorators: { nodes: [{
                type: Input
            }], type: [{
                type: Input
            }], maxLine: [{
                type: Input
            }], numDisplayItem: [{
                type: Input
            }], onlyItem: [{
                type: Input
            }], disabledLastItem: [{
                type: Input
            }], onItemClick: [{
                type: Output
            }], breadCrumbNodes: [{
                type: ViewChildren,
                args: [QMSBreadcrumbItemDirective, {}]
            }] } });
//# sourceMappingURL=data:application/json;base64, 