circletone/esm2022/lib/components/atoms/menu-item/menu-item.component.mjs

import { ChangeDetectionStrategy, Component, ContentChildren, Input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { IconComponent } from '../icon/icon.component';
import { ButtonComponent } from '../button/button.component';
import { OverlayDirective } from '../../../directives/overlay.directive';
import { MenuComponent } from '../../molecules/menu/menu.component';
import { BehaviorSubject } from 'rxjs';
import { AsyncPipe, NgClass } from '@angular/common';
import * as i0 from "@angular/core";
export class MenuItemComponent {
    constructor() {
        this.text = '';
        this.link = '';
        this.type = 'internal';
        this.size = 'base';
        this.icon = '';
        this.iconSize = 'base';
        this.iconAlone = false;
        this.iconDirection = 'horizontal';
        this.hasSubmenu = false;
        this.submenuPosition = 'horizontal';
        this.isActive = false;
        this.isOpen = new BehaviorSubject(false);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.5", type: MenuItemComponent, isStandalone: true, selector: "ct-menu-item", inputs: { text: "text", link: "link", type: "type", size: "size", icon: "icon", iconSize: "iconSize", iconAlone: "iconAlone", iconDirection: "iconDirection", hasSubmenu: "hasSubmenu", submenuPosition: "submenuPosition", isActive: "isActive" }, queries: [{ propertyName: "menus", predicate: MenuComponent }], ngImport: i0, template: "@if (menus.length > 0) {\n  <a\n    [ctOverlay]=\"dropDown\"\n    [ctOverlayPosition]=\"submenuPosition\"\n    (closed)=\"isOpen.next(false)\"\n    (opened)=\"isOpen.next(true)\"\n    [ngClass]=\"{\n      'bg-surface-variant dark:bg-surface-variant-dark': isOpen | async\n    }\"\n    class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark hover:dark:bg-surface-variant-dark\">\n    <span\n      class=\"flex items-center gap-3\"\n      [class.flex-row]=\"iconDirection === 'horizontal'\"\n      [class.flex-col]=\"iconDirection === 'vertical'\">\n      @if (icon) {\n        <ct-icon [icon]=\"icon\" [size]=\"iconSize\" />\n      }\n      @if (text && !iconAlone) {\n        <span\n          [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n          [class.text-base]=\"size === 'base' || size === 'lg'\"\n          [class.text-xl]=\"size === 'xl'\"\n          >{{ text }}</span\n        >\n      }\n      @if (!iconAlone) {\n        @if (isOpen | async) {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-up' : 'chevron-left'\" variant=\"blank\" />\n        } @else {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-down' : 'chevron-right'\" variant=\"blank\" />\n        }\n      }\n    </span>\n  </a>\n  <ng-template #dropDown><ng-content></ng-content></ng-template>\n} @else {\n  <a\n    class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark dark:hover:bg-surface-variant-dark\"\n    [routerLink]=\"link\"\n    [ngClass]=\"{\n      'bg-surface-variant dark:bg-surface-variant-dark': isActive\n    }\">\n    <span\n      class=\"flex items-center gap-3\"\n      [class.flex-row]=\"iconDirection === 'horizontal'\"\n      [class.flex-col]=\"iconDirection === 'vertical'\">\n      @if (icon) {\n        <ct-icon [icon]=\"icon\" variant=\"solid\" [size]=\"iconSize\" />\n      }\n      @if (text && !iconAlone) {\n        <span\n          [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n          [class.text-base]=\"size === 'base' || size === 'lg'\"\n          [class.text-xl]=\"size === 'xl'\"\n          >{{ text }}</span\n        >\n      }\n    </span>\n  </a>\n}\n", dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "fill", "strokeWidth", "strokeColor", "size", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[ctOverlay]", inputs: ["ctOverlay", "ctOverlayPosition"], outputs: ["opened", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.5", ngImport: i0, type: MenuItemComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-menu-item', standalone: true, imports: [RouterLink, NgClass, AsyncPipe, IconComponent, ButtonComponent, OverlayDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (menus.length > 0) {\n  <a\n    [ctOverlay]=\"dropDown\"\n    [ctOverlayPosition]=\"submenuPosition\"\n    (closed)=\"isOpen.next(false)\"\n    (opened)=\"isOpen.next(true)\"\n    [ngClass]=\"{\n      'bg-surface-variant dark:bg-surface-variant-dark': isOpen | async\n    }\"\n    class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark hover:dark:bg-surface-variant-dark\">\n    <span\n      class=\"flex items-center gap-3\"\n      [class.flex-row]=\"iconDirection === 'horizontal'\"\n      [class.flex-col]=\"iconDirection === 'vertical'\">\n      @if (icon) {\n        <ct-icon [icon]=\"icon\" [size]=\"iconSize\" />\n      }\n      @if (text && !iconAlone) {\n        <span\n          [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n          [class.text-base]=\"size === 'base' || size === 'lg'\"\n          [class.text-xl]=\"size === 'xl'\"\n          >{{ text }}</span\n        >\n      }\n      @if (!iconAlone) {\n        @if (isOpen | async) {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-up' : 'chevron-left'\" variant=\"blank\" />\n        } @else {\n          <ct-icon [icon]=\"submenuPosition === 'vertical' ? 'chevron-down' : 'chevron-right'\" variant=\"blank\" />\n        }\n      }\n    </span>\n  </a>\n  <ng-template #dropDown><ng-content></ng-content></ng-template>\n} @else {\n  <a\n    class=\"block cursor-pointer rounded-md px-4 py-2 font-medium text-on-surface hover:bg-surface-variant dark:text-on-surface-dark dark:hover:bg-surface-variant-dark\"\n    [routerLink]=\"link\"\n    [ngClass]=\"{\n      'bg-surface-variant dark:bg-surface-variant-dark': isActive\n    }\">\n    <span\n      class=\"flex items-center gap-3\"\n      [class.flex-row]=\"iconDirection === 'horizontal'\"\n      [class.flex-col]=\"iconDirection === 'vertical'\">\n      @if (icon) {\n        <ct-icon [icon]=\"icon\" variant=\"solid\" [size]=\"iconSize\" />\n      }\n      @if (text && !iconAlone) {\n        <span\n          [class.text-sm]=\"size === 'xs' || size === 'sm'\"\n          [class.text-base]=\"size === 'base' || size === 'lg'\"\n          [class.text-xl]=\"size === 'xl'\"\n          >{{ text }}</span\n        >\n      }\n    </span>\n  </a>\n}\n" }]
        }], propDecorators: { text: [{
                type: Input
            }], link: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input,
                args: [{ required: true }]
            }], size: [{
                type: Input
            }], icon: [{
                type: Input
            }], iconSize: [{
                type: Input
            }], iconAlone: [{
                type: Input
            }], iconDirection: [{
                type: Input
            }], hasSubmenu: [{
                type: Input
            }], submenuPosition: [{
                type: Input
            }], isActive: [{
                type: Input
            }], menus: [{
                type: ContentChildren,
                args: [MenuComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NpcmNsZXRvbmUvc3JjL2xpYi9jb21wb25lbnRzL2F0b21zL21lbnUtaXRlbS9tZW51LWl0ZW0uY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY2lyY2xldG9uZS9zcmMvbGliL2NvbXBvbmVudHMvYXRvbXMvbWVudS1pdGVtL21lbnUtaXRlbS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLGVBQWUsRUFBRSxLQUFLLEVBQWEsTUFBTSxlQUFlLENBQUM7QUFDdEcsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBRTdDLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx3QkFBd0IsQ0FBQztBQUN2RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDN0QsT0FBTyxFQUFFLGdCQUFnQixFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFFekUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLHFDQUFxQyxDQUFDO0FBQ3BFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdkMsT0FBTyxFQUFFLFNBQVMsRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQzs7QUFTckQsTUFBTSxPQUFPLGlCQUFpQjtJQVA5QjtRQVFXLFNBQUksR0FBRyxFQUFFLENBQUM7UUFDUSxTQUFJLEdBQUcsRUFBRSxDQUFDO1FBQ1YsU0FBSSxHQUFxQyxVQUFVLENBQUM7UUFDdEUsU0FBSSxHQUFrQixNQUFNLENBQUM7UUFDN0IsU0FBSSxHQUFHLEVBQUUsQ0FBQztRQUNWLGFBQVEsR0FBa0IsTUFBTSxDQUFDO1FBQ2pDLGNBQVMsR0FBRyxLQUFLLENBQUM7UUFDbEIsa0JBQWEsR0FBeUIsWUFBWSxDQUFDO1FBQ25ELGVBQVUsR0FBRyxLQUFLLENBQUM7UUFDbkIsb0JBQWUsR0FBeUIsWUFBWSxDQUFDO1FBQ3JELGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUIsV0FBTSxHQUFHLElBQUksZUFBZSxDQUFVLEtBQUssQ0FBQyxDQUFDO0tBRzlDOzhHQWZZLGlCQUFpQjtrR0FBakIsaUJBQWlCLGtWQWNYLGFBQWEsNkJDaENoQyxxdUVBNERBLDRDRDlDWSxVQUFVLG9PQUFFLE9BQU8sK0VBQUUsU0FBUyw4Q0FBRSxhQUFhLCtIQUFtQixnQkFBZ0I7OzJGQUkvRSxpQkFBaUI7a0JBUDdCLFNBQVM7K0JBQ0UsY0FBYyxjQUNaLElBQUksV0FDUCxDQUFDLFVBQVUsRUFBRSxPQUFPLEVBQUUsU0FBUyxFQUFFLGFBQWEsRUFBRSxlQUFlLEVBQUUsZ0JBQWdCLENBQUMsbUJBRTFFLHVCQUF1QixDQUFDLE1BQU07OEJBR3RDLElBQUk7c0JBQVosS0FBSztnQkFDcUIsSUFBSTtzQkFBOUIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsSUFBSTtzQkFBOUIsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ2hCLElBQUk7c0JBQVosS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSztnQkFDRyxTQUFTO3NCQUFqQixLQUFLO2dCQUNHLGFBQWE7c0JBQXJCLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxlQUFlO3NCQUF2QixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBRzBCLEtBQUs7c0JBQXBDLGVBQWU7dUJBQUMsYUFBYSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIENvbnRlbnRDaGlsZHJlbiwgSW5wdXQsIFF1ZXJ5TGlzdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgUm91dGVyTGluayB9IGZyb20gJ0Bhbmd1bGFyL3JvdXRlcic7XG5pbXBvcnQgeyBDb21wb25lbnRTaXplIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWwvY29tcG9uZW50cy9jb21wb25lbnQtc2l6ZS50eXBlJztcbmltcG9ydCB7IEljb25Db21wb25lbnQgfSBmcm9tICcuLi9pY29uL2ljb24uY29tcG9uZW50JztcbmltcG9ydCB7IEJ1dHRvbkNvbXBvbmVudCB9IGZyb20gJy4uL2J1dHRvbi9idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IE92ZXJsYXlEaXJlY3RpdmUgfSBmcm9tICcuLi8uLi8uLi9kaXJlY3RpdmVzL292ZXJsYXkuZGlyZWN0aXZlJztcbmltcG9ydCB7IENvbXBvbmVudERpc3Bvc2l0aW9uIH0gZnJvbSAnLi4vLi4vLi4vbW9kZWwvY29tcG9uZW50cy9jb21wb25lbnQtZGlzcG9zaXRpb24uZW51bSc7XG5pbXBvcnQgeyBNZW51Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbW9sZWN1bGVzL21lbnUvbWVudS5jb21wb25lbnQnO1xuaW1wb3J0IHsgQmVoYXZpb3JTdWJqZWN0IH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBBc3luY1BpcGUsIE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdjdC1tZW51LWl0ZW0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbUm91dGVyTGluaywgTmdDbGFzcywgQXN5bmNQaXBlLCBJY29uQ29tcG9uZW50LCBCdXR0b25Db21wb25lbnQsIE92ZXJsYXlEaXJlY3RpdmVdLFxuICB0ZW1wbGF0ZVVybDogJy4vbWVudS1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIE1lbnVJdGVtQ29tcG9uZW50IHtcbiAgQElucHV0KCkgdGV4dCA9ICcnO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBsaW5rID0gJyc7XG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHR5cGU6IHN0cmluZyB8ICdpbnRlcm5hbCcgfCAnZXh0ZXJuYWwnID0gJ2ludGVybmFsJztcbiAgQElucHV0KCkgc2l6ZTogQ29tcG9uZW50U2l6ZSA9ICdiYXNlJztcbiAgQElucHV0KCkgaWNvbiA9ICcnO1xuICBASW5wdXQoKSBpY29uU2l6ZTogQ29tcG9uZW50U2l6ZSA9ICdiYXNlJztcbiAgQElucHV0KCkgaWNvbkFsb25lID0gZmFsc2U7XG4gIEBJbnB1dCgpIGljb25EaXJlY3Rpb246IENvbXBvbmVudERpc3Bvc2l0aW9uID0gJ2hvcml6b250YWwnO1xuICBASW5wdXQoKSBoYXNTdWJtZW51ID0gZmFsc2U7XG4gIEBJbnB1dCgpIHN1Ym1lbnVQb3NpdGlvbjogQ29tcG9uZW50RGlzcG9zaXRpb24gPSAnaG9yaXpvbnRhbCc7XG4gIEBJbnB1dCgpIGlzQWN0aXZlID0gZmFsc2U7XG4gIGlzT3BlbiA9IG5ldyBCZWhhdmlvclN1YmplY3Q8Ym9vbGVhbj4oZmFsc2UpO1xuXG4gIEBDb250ZW50Q2hpbGRyZW4oTWVudUNvbXBvbmVudCkgbWVudXMhOiBRdWVyeUxpc3Q8TWVudUNvbXBvbmVudD47XG59XG4iLCJAaWYgKG1lbnVzLmxlbmd0aCA+IDApIHtcbiAgPGFcbiAgICBbY3RPdmVybGF5XT1cImRyb3BEb3duXCJcbiAgICBbY3RPdmVybGF5UG9zaXRpb25dPVwic3VibWVudVBvc2l0aW9uXCJcbiAgICAoY2xvc2VkKT1cImlzT3Blbi5uZXh0KGZhbHNlKVwiXG4gICAgKG9wZW5lZCk9XCJpc09wZW4ubmV4dCh0cnVlKVwiXG4gICAgW25nQ2xhc3NdPVwie1xuICAgICAgJ2JnLXN1cmZhY2UtdmFyaWFudCBkYXJrOmJnLXN1cmZhY2UtdmFyaWFudC1kYXJrJzogaXNPcGVuIHwgYXN5bmNcbiAgICB9XCJcbiAgICBjbGFzcz1cImJsb2NrIGN1cnNvci1wb2ludGVyIHJvdW5kZWQtbWQgcHgtNCBweS0yIGZvbnQtbWVkaXVtIHRleHQtb24tc3VyZmFjZSBob3ZlcjpiZy1zdXJmYWNlLXZhcmlhbnQgZGFyazp0ZXh0LW9uLXN1cmZhY2UtZGFyayBob3ZlcjpkYXJrOmJnLXN1cmZhY2UtdmFyaWFudC1kYXJrXCI+XG4gICAgPHNwYW5cbiAgICAgIGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTNcIlxuICAgICAgW2NsYXNzLmZsZXgtcm93XT1cImljb25EaXJlY3Rpb24gPT09ICdob3Jpem9udGFsJ1wiXG4gICAgICBbY2xhc3MuZmxleC1jb2xdPVwiaWNvbkRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJ1wiPlxuICAgICAgQGlmIChpY29uKSB7XG4gICAgICAgIDxjdC1pY29uIFtpY29uXT1cImljb25cIiBbc2l6ZV09XCJpY29uU2l6ZVwiIC8+XG4gICAgICB9XG4gICAgICBAaWYgKHRleHQgJiYgIWljb25BbG9uZSkge1xuICAgICAgICA8c3BhblxuICAgICAgICAgIFtjbGFzcy50ZXh0LXNtXT1cInNpemUgPT09ICd4cycgfHwgc2l6ZSA9PT0gJ3NtJ1wiXG4gICAgICAgICAgW2NsYXNzLnRleHQtYmFzZV09XCJzaXplID09PSAnYmFzZScgfHwgc2l6ZSA9PT0gJ2xnJ1wiXG4gICAgICAgICAgW2NsYXNzLnRleHQteGxdPVwic2l6ZSA9PT0gJ3hsJ1wiXG4gICAgICAgICAgPnt7IHRleHQgfX08L3NwYW5cbiAgICAgICAgPlxuICAgICAgfVxuICAgICAgQGlmICghaWNvbkFsb25lKSB7XG4gICAgICAgIEBpZiAoaXNPcGVuIHwgYXN5bmMpIHtcbiAgICAgICAgICA8Y3QtaWNvbiBbaWNvbl09XCJzdWJtZW51UG9zaXRpb24gPT09ICd2ZXJ0aWNhbCcgPyAnY2hldnJvbi11cCcgOiAnY2hldnJvbi1sZWZ0J1wiIHZhcmlhbnQ9XCJibGFua1wiIC8+XG4gICAgICAgIH0gQGVsc2Uge1xuICAgICAgICAgIDxjdC1pY29uIFtpY29uXT1cInN1Ym1lbnVQb3NpdGlvbiA9PT0gJ3ZlcnRpY2FsJyA/ICdjaGV2cm9uLWRvd24nIDogJ2NoZXZyb24tcmlnaHQnXCIgdmFyaWFudD1cImJsYW5rXCIgLz5cbiAgICAgICAgfVxuICAgICAgfVxuICAgIDwvc3Bhbj5cbiAgPC9hPlxuICA8bmctdGVtcGxhdGUgI2Ryb3BEb3duPjxuZy1jb250ZW50PjwvbmctY29udGVudD48L25nLXRlbXBsYXRlPlxufSBAZWxzZSB7XG4gIDxhXG4gICAgY2xhc3M9XCJibG9jayBjdXJzb3ItcG9pbnRlciByb3VuZGVkLW1kIHB4LTQgcHktMiBmb250LW1lZGl1bSB0ZXh0LW9uLXN1cmZhY2UgaG92ZXI6Ymctc3VyZmFjZS12YXJpYW50IGRhcms6dGV4dC1vbi1zdXJmYWNlLWRhcmsgZGFyazpob3ZlcjpiZy1zdXJmYWNlLXZhcmlhbnQtZGFya1wiXG4gICAgW3JvdXRlckxpbmtdPVwibGlua1wiXG4gICAgW25nQ2xhc3NdPVwie1xuICAgICAgJ2JnLXN1cmZhY2UtdmFyaWFudCBkYXJrOmJnLXN1cmZhY2UtdmFyaWFudC1kYXJrJzogaXNBY3RpdmVcbiAgICB9XCI+XG4gICAgPHNwYW5cbiAgICAgIGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgZ2FwLTNcIlxuICAgICAgW2NsYXNzLmZsZXgtcm93XT1cImljb25EaXJlY3Rpb24gPT09ICdob3Jpem9udGFsJ1wiXG4gICAgICBbY2xhc3MuZmxleC1jb2xdPVwiaWNvbkRpcmVjdGlvbiA9PT0gJ3ZlcnRpY2FsJ1wiPlxuICAgICAgQGlmIChpY29uKSB7XG4gICAgICAgIDxjdC1pY29uIFtpY29uXT1cImljb25cIiB2YXJpYW50PVwic29saWRcIiBbc2l6ZV09XCJpY29uU2l6ZVwiIC8+XG4gICAgICB9XG4gICAgICBAaWYgKHRleHQgJiYgIWljb25BbG9uZSkge1xuICAgICAgICA8c3BhblxuICAgICAgICAgIFtjbGFzcy50ZXh0LXNtXT1cInNpemUgPT09ICd4cycgfHwgc2l6ZSA9PT0gJ3NtJ1wiXG4gICAgICAgICAgW2NsYXNzLnRleHQtYmFzZV09XCJzaXplID09PSAnYmFzZScgfHwgc2l6ZSA9PT0gJ2xnJ1wiXG4gICAgICAgICAgW2NsYXNzLnRleHQteGxdPVwic2l6ZSA9PT0gJ3hsJ1wiXG4gICAgICAgICAgPnt7IHRleHQgfX08L3NwYW5cbiAgICAgICAgPlxuICAgICAgfVxuICAgIDwvc3Bhbj5cbiAgPC9hPlxufVxuIl19