desy-angular 5.0.0 → 5.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/desy-angular.umd.js +144 -142
- package/bundles/desy-angular.umd.js.map +1 -1
- package/bundles/desy-angular.umd.min.js +1 -1
- package/bundles/desy-angular.umd.min.js.map +1 -1
- package/desy-angular.metadata.json +1 -1
- package/esm2015/lib/desy-buttons/components/dropdown/dropdown.component.js +70 -70
- package/esm2015/lib/desy-buttons/components/listbox/listbox-label/listbox-label.component.js +6 -15
- package/esm2015/lib/desy-buttons/components/listbox/listbox.component.js +67 -55
- package/esm2015/lib/desy-nav/components/menu-vertical/menu-vertical.component.js +2 -2
- package/esm2015/lib/desy-nav/components/menubar/menubar.component.js +1 -1
- package/fesm2015/desy-angular.js +140 -138
- package/fesm2015/desy-angular.js.map +1 -1
- package/lib/desy-buttons/components/dropdown/dropdown.component.d.ts +4 -7
- package/lib/desy-buttons/components/listbox/listbox-label/listbox-label.component.d.ts +2 -6
- package/lib/desy-buttons/components/listbox/listbox.component.d.ts +1 -2
- package/package.json +1 -1
|
@@ -66,7 +66,7 @@ export class MenuVerticalComponent extends AccessibilityComponent {
|
|
|
66
66
|
MenuVerticalComponent.decorators = [
|
|
67
67
|
{ type: Component, args: [{
|
|
68
68
|
selector: 'desy-menu-vertical',
|
|
69
|
-
template: "<!--\r\n Template para ser utilizado tanto por los items como por los subitems:\r\n - item: Item que representa\r\n - index: indice del item en la lista\r\n - id: identificador del item\r\n - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n <ng-container *ngIf=\"item\">\r\n <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n <ng-template #hasRouterLink>\r\n <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n <a [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"
|
|
69
|
+
template: "<!--\r\n Template para ser utilizado tanto por los items como por los subitems:\r\n - item: Item que representa\r\n - index: indice del item en la lista\r\n - id: identificador del item\r\n - isRoot: si pertenece al nivel raiz\r\n-->\r\n<ng-template #itemTemplate let-item=\"item\" let-index=\"index\" let-id=\"id\" let-sub=\"sub\" let-isRoot=\"isRoot\">\r\n <ng-container *ngIf=\"item\">\r\n <li class=\"m-base\" [ngClass]=\"{'origin-top-left text-sm': !isRoot}\">\r\n <ng-container *ngIf=\"item.href || item.routerLink; else notHref\">\r\n <a *ngIf=\"item.href; else hasRouterLink\" [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n <ng-template #hasRouterLink>\r\n <!-- Todos los enlaces que admiten o href o routerLink estar\u00EDa bien unificarlos (en todos los componentes).\r\n Para ello, ser\u00EDa necesario crear una directiva para a\u00F1adir o quitar la directiva routerLink si no tiene href.\r\n Sin embargo, esto no es posible actualmente, ya que Angular todav\u00EDa no permite a\u00F1adir directivas din\u00E1micamente:\r\n https://angular.io/guide/roadmap#support-adding-directives-to-host-elements -->\r\n <a [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [routerLink]=\"item.routerLink\" [fragment]=\"item.fragment ? item.fragment : null\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n [class]=\"['block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{\r\n 'underline': hasUnderline,\r\n 'hover:text-primary-base hover:underline': !item.disabled,\r\n 'no-underline pointer-events-none': item.disabled,\r\n 'font-bold': item.active\r\n }\"\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </a>\r\n </ng-template>\r\n </ng-container>\r\n <ng-template #notHref>\r\n <span [attr.id]=\"id\"\r\n (desyContentEmpty)=\"handleItemContentEmpty(index, isRoot)\"\r\n [class]=\"['block px-xs', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'font-bold': item.active}\"\r\n\r\n [attr.title]=\"item.title\"\r\n [attr.tabindex]=\"item.disabled ? -1 : null\"\r\n [attr.aria-current]=\"item.active ? 'page' : null\"\r\n [attr.aria-disabled]=\"item.disabled\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage\"\r\n [attr.aria-label]=\"item.ariaLabel\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"item.ariaHidden\"\r\n [attr.aria-controls]=\"item.ariaControls\"\r\n [attr.aria-live]=\"item.ariaLive\"\r\n [attr.aria-expanded]=\"item.ariaExpanded\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup\"\r\n [attr.disabled]=\"item.disabled\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: getItemHtml(item), text: item.text }\"></ng-container>\r\n </span>\r\n </ng-template>\r\n <ng-container *ngIf=\"isRoot && sub\">\r\n <ul *ngIf=\"getSubItems(sub)\" [ngClass]=\"sub.classes\"\r\n [attr.aria-describedby]=\"sub.ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"sub.ariaErrorMessage\"\r\n [attr.aria-label]=\"sub.ariaLabel\"\r\n [attr.aria-labelledby]=\"sub.ariaLabelledBy\"\r\n [attr.aria-hidden]=\"sub.ariaHidden\"\r\n [attr.aria-disabled]=\"sub.ariaDisabled\"\r\n [attr.aria-controls]=\"sub.ariaControls\"\r\n [attr.aria-current]=\"sub.ariaCurrent\"\r\n [attr.aria-live]=\"sub.ariaLive\"\r\n [attr.aria-expanded]=\"sub.ariaExpanded\"\r\n [attr.aria-haspopup]=\"sub.ariaHasPopup\"\r\n [attr.tabindex]=\"sub.tabindex\">\r\n <ng-container *ngFor=\"let subItem of getSubItems(sub); index as subIndex\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: subItem,\r\n id: getSubItemId(item, index, subIndex),\r\n index: subIndex,\r\n isRoot: false\r\n }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n <div *ngIf=\"!getSubItems(sub)\"\r\n [class]=\"['mb-base px-xs origin-top-left text-sm text-neutral-dark', sub.classes] | makeHtmlList\"\r\n [id]=\"'sub-' + id\">\r\n <ng-container *desyCustomInnerContent=\"{ component: sub, html: sub.html }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </li>\r\n <li *ngIf=\"item.divider\" class=\"my-sm border-b border-neutral-base\" aria-hidden=\"true\">\r\n <div class=\"sr-only\">Separador</div>\r\n </li>\r\n </ng-container>\r\n</ng-template>\r\n\r\n<nav [ngClass]=\"classes\"\r\n [attr.role]=\"(role ? role : null)\"\r\n [attr.aria-describedby]=\"ariaDescribedBy\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy\"\r\n [attr.aria-hidden]=\"ariaHidden\"\r\n [attr.aria-disabled]=\"ariaDisabled\"\r\n [attr.aria-controls]=\"ariaControls\"\r\n [attr.aria-current]=\"ariaCurrent\"\r\n [attr.aria-live]=\"ariaLive\"\r\n [attr.aria-expanded]=\"ariaExpanded\"\r\n [attr.aria-haspopup]=\"ariaHasPopup\"\r\n [attr.tabindex]=\"tabindex\">\r\n <ul class=\"text-base\">\r\n <ng-container *ngFor=\"let item of getItems(); index as index\">\r\n <ng-container [ngTemplateOutlet]=\"itemTemplate\"\r\n [ngTemplateOutletContext]=\"{ item: item, id: getId(item, index), index: index, sub: getItemSub(item), isRoot: true }\">\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n</nav>\r\n",
|
|
70
70
|
animations: [
|
|
71
71
|
trigger('displayMenuVertical', [
|
|
72
72
|
state('void', style({
|
|
@@ -92,4 +92,4 @@ MenuVerticalComponent.propDecorators = {
|
|
|
92
92
|
classes: [{ type: Input }],
|
|
93
93
|
itemComponents: [{ type: ContentChildren, args: [MenuVerticalItemComponent,] }]
|
|
94
94
|
};
|
|
95
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
95
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWVudS12ZXJ0aWNhbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9kZXN5LWFuZ3VsYXIvc3JjL2xpYi9kZXN5LW5hdi9jb21wb25lbnRzL21lbnUtdmVydGljYWwvbWVudS12ZXJ0aWNhbC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUUsZUFBZSxFQUFZLE1BQU0sZUFBZSxDQUFDO0FBQzNFLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBRXBFLE9BQU8sRUFBRSxPQUFPLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxVQUFVLEVBQUUsT0FBTyxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFDakYsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ2pFLE9BQU8sRUFBQyx5QkFBeUIsRUFBQyxNQUFNLG1EQUFtRCxDQUFDO0FBQzVGLE9BQU8sRUFBQyw0QkFBNEIsRUFBQyxNQUFNLDJEQUEyRCxDQUFDO0FBcUJ2RyxNQUFNLE9BQU8scUJBQXNCLFNBQVEsc0JBQXNCO0lBVS9ELHNCQUFzQixDQUFDLEtBQWEsRUFBRSxNQUFlO1FBQ25ELE1BQU0sSUFBSSxLQUFLLENBQUMsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsU0FBUyxrREFBa0QsS0FBSyxFQUFFLENBQUMsQ0FBQztJQUMzRyxDQUFDO0lBRUQsV0FBVyxDQUFDLElBQTJCO1FBQ3JDLElBQUksUUFBZ0IsQ0FBQztRQUNyQixJQUFJLElBQUksQ0FBQyxNQUFNLEVBQUU7WUFDZixRQUFRLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLENBQUMsV0FBWSxJQUFJLENBQUMsSUFBSyxXQUFXLENBQUMsQ0FBQyxDQUFDLFdBQVksV0FBVyxDQUFDLFVBQVUsQ0FB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QUNkLFNBQVMsRUFBRSxhQUFhO3lCQUN6QixDQUFDLENBQUM7d0JBQ0gsS0FBSyxDQUFDLEdBQUcsRUFBRSxLQUFLLENBQUM7NEJBQ2YsT0FBTyxFQUFFLEtBQUs7NEJBQ2QsU0FBUyxFQUFFLFlBQVk7eUJBQ3hCLENBQUMsQ0FBQzt3QkFDSCxVQUFVLENBQUMsUUFBUSxFQUFFOzRCQUNuQixPQUFPLENBQUMsZ0JBQWdCLENBQUM7eUJBQzFCLENBQUM7cUJBQ0gsQ0FBQztpQkFDSDthQUNGOzs7aUJBR0UsS0FBSzt1QkFDTCxLQUFLO29CQUNMLEtBQUs7MkJBQ0wsS0FBSztzQkFDTCxLQUFLOzZCQUVMLGVBQWUsU0FBQyx5QkFBeUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge0NvbXBvbmVudCwgSW5wdXQsIENvbnRlbnRDaGlsZHJlbiwgUXVlcnlMaXN0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQWNjZXNzaWJpbGl0eUNvbXBvbmVudCB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC9jb21wb25lbnRzJztcclxuaW1wb3J0IHtNZW51VmVydGljYWxJdGVtc0RhdGEsIE1lbnVWZXJ0aWNhbFN1YkRhdGEsIE1lbnVWZXJ0aWNhbFN1Ykl0ZW1zRGF0YX0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcyc7XHJcbmltcG9ydCB7IGFuaW1hdGUsIHN0YXRlLCBzdHlsZSwgdHJhbnNpdGlvbiwgdHJpZ2dlciB9IGZyb20gJ0Bhbmd1bGFyL2FuaW1hdGlvbnMnO1xyXG5pbXBvcnQgeyBTdHJpbmdVdGlscyB9IGZyb20gJy4uLy4uLy4uL3NoYXJlZC91dGlscy9zdHJpbmctdXRpbHMnO1xyXG5pbXBvcnQge01lbnVWZXJ0aWNhbEl0ZW1Db21wb25lbnR9IGZyb20gJy4vbWVudS12ZXJ0aWNhbC1pdGVtL21lbnUtdmVydGljYWwtaXRlbS5jb21wb25lbnQnO1xyXG5pbXBvcnQge01lbnVWZXJ0aWNhbEl0ZW1TdWJDb21wb25lbnR9IGZyb20gJy4vbWVudS12ZXJ0aWNhbC1pdGVtLXN1Yi9tZW51LXZlcnRpY2FsLWl0ZW0tc3ViLmNvbXBvbmVudCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2Rlc3ktbWVudS12ZXJ0aWNhbCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL21lbnUtdmVydGljYWwuY29tcG9uZW50Lmh0bWwnLFxyXG4gIGFuaW1hdGlvbnM6IFtcclxuICAgIHRyaWdnZXIoJ2Rpc3BsYXlNZW51VmVydGljYWwnLCBbXHJcbiAgICAgIHN0YXRlKCd2b2lkJywgc3R5bGUoe1xyXG4gICAgICAgIG9wYWNpdHk6ICcwLjAnLFxyXG4gICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDAuOTUpJ1xyXG4gICAgICB9KSksXHJcbiAgICAgIHN0YXRlKCcqJywgc3R5bGUoe1xyXG4gICAgICAgIG9wYWNpdHk6ICcxLjAnLFxyXG4gICAgICAgIHRyYW5zZm9ybTogJ3NjYWxlKDEuMCknXHJcbiAgICAgIH0pKSxcclxuICAgICAgdHJhbnNpdGlvbignOmVudGVyJywgW1xyXG4gICAgICAgIGFuaW1hdGUoJzEwMG1zIGVhc2Utb3V0JylcclxuICAgICAgXSlcclxuICAgIF0pXHJcbiAgXVxyXG59KVxyXG5leHBvcnQgY2xhc3MgTWVudVZlcnRpY2FsQ29tcG9uZW50IGV4dGVuZHMgQWNjZXNzaWJpbGl0eUNvbXBvbmVudCB7XHJcblxyXG4gIEBJbnB1dCgpIGlkOiBzdHJpbmc7XHJcbiAgQElucHV0KCkgaWRQcmVmaXg6IHN0cmluZztcclxuICBASW5wdXQoKSBpdGVtczogTWVudVZlcnRpY2FsSXRlbXNEYXRhW107XHJcbiAgQElucHV0KCkgaGFzVW5kZXJsaW5lOiBib29sZWFuO1xyXG4gIEBJbnB1dCgpIGNsYXNzZXM6IHN0cmluZztcclxuXHJcbiAgQENvbnRlbnRDaGlsZHJlbihNZW51VmVydGljYWxJdGVtQ29tcG9uZW50KSBpdGVtQ29tcG9uZW50czogUXVlcnlMaXN0PE1lbnVWZXJ0aWNhbEl0ZW1Db21wb25lbnQ+O1xyXG5cclxuICBoYW5kbGVJdGVtQ29udGVudEVtcHR5KGluZGV4OiBudW1iZXIsIGlzUm9vdDogYm9vbGVhbik6IHZvaWQge1xyXG4gICAgdGhyb3cgbmV3IEVycm9yKGAke2lzUm9vdCA/ICdJdGVtJyA6ICdTdWJpdGVtJ30gY29udGVudCwgaHRtbCBvciB0ZXh0IGFyIHJlcXVpcmVkIGF0IHBvc2l0aW9uICR7aW5kZXh9YCk7XHJcbiAgfVxyXG5cclxuICBnZXRJdGVtSHRtbChpdGVtOiBNZW51VmVydGljYWxJdGVtc0RhdGEpOiBzdHJpbmcge1xyXG4gICAgbGV0IGl0ZW1IdG1sOiBzdHJpbmc7XHJcbiAgICBpZiAoaXRlbS5hY3RpdmUpIHtcclxuICAgICAgaXRlbUh0bWwgPSBpdGVtLmh0bWwgPyBgPHN0cm9uZz4keyBpdGVtLmh0bWwgfTwvc3Ryb25nPmAgOiBgPHN0cm9uZz4keyBTdHJpbmdVdGlscy5lc2NhcGVIdG1sKGl0ZW0udGV4dCkgfTwvc3Ryb25nPmA7XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICBpdGVtSHRtbCA9IGl0ZW0uaHRtbDtcclxuICAgIH1cclxuXHJcbiAgICByZXR1cm4gaXRlbUh0bWw7XHJcbiAgfVxyXG5cclxuICBnZXRJZChpdGVtOiBNZW51VmVydGljYWxJdGVtc0RhdGEsIGk6IG51bWJlcik6IHN0cmluZyB7XHJcbiAgICBpZiAoaXRlbS5pZCkge1xyXG4gICAgICByZXR1cm4gaXRlbS5pZDtcclxuICAgIH0gZWxzZSB7XHJcbiAgICAgIGNvbnN0IGlkUHJlZml4ID0gdGhpcy5pZFByZWZpeCA/IHRoaXMuaWRQcmVmaXggOiAnbmF2LWl0ZW0nO1xyXG4gICAgICBpZiAoaSA9PT0gMCkge1xyXG4gICAgICAgIHJldHVybiBpZFByZWZpeDtcclxuICAgICAgfSBlbHNlIHtcclxuICAgICAgICByZXR1cm4gaWRQcmVmaXggKyAnLScgKyBpO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICBnZXRTdWJJdGVtSWQoaXRlbTogTWVudVZlcnRpY2FsSXRlbXNEYXRhLCBpdGVtSW5kZXg6IG51bWJlciwgc3ViSXRlbUluZGV4OiBudW1iZXIpOiBzdHJpbmd7XHJcbiAgICBsZXQgc3ViSXRlbUlkOiBzdHJpbmc7XHJcbiAgICBjb25zdCBzdWIgPSB0aGlzLmdldEl0ZW1TdWIoaXRlbSk7XHJcbiAgICBjb25zdCBzdWJJdGVtcyA9IHRoaXMuZ2V0U3ViSXRlbXMoc3ViKTtcclxuICAgIGNvbnN0IHN1Ykl0ZW0gPSBzdWJJdGVtc1tzdWJJdGVtSW5kZXhdO1xyXG4gICAgaWYgKHN1Ykl0ZW0pIHtcclxuICAgICAgaWYgKHN1Ykl0ZW0uaWQpIHtcclxuICAgICAgICBzdWJJdGVtSWQgPSBzdWJJdGVtLmlkO1xyXG4gICAgICB9IGVsc2Uge1xyXG4gICAgICAgIGNvbnN0IGl0ZW1JZCA9IHRoaXMuZ2V0SWQoaXRlbSwgaXRlbUluZGV4KTtcclxuICAgICAgICBzdWJJdGVtSWQgPSBzdWJJdGVtSW5kZXggPT09IDAgPyBgc3ViLSR7aXRlbUlkfWAgOiBgc3ViLSR7aXRlbUlkfS0ke3N1Ykl0ZW1JbmRleH1gO1xyXG4gICAgICB9XHJcbiAgICB9XHJcblxyXG4gICAgcmV0dXJuIHN1Ykl0ZW1JZDtcclxuICB9XHJcblxyXG4gIGdldEl0ZW1zKCk6IE1lbnVWZXJ0aWNhbEl0ZW1zRGF0YVtdIHtcclxuICAgIGNvbnN0IGl0ZW1MaXN0ID0gdGhpcy5pdGVtQ29tcG9uZW50cyAmJiB0aGlzLml0ZW1Db21wb25lbnRzLmxlbmd0aCA+IDAgPyB0aGlzLml0ZW1Db21wb25lbnRzLnRvQXJyYXkoKSA6IHRoaXMuaXRlbXM7XHJcbiAgICBpZiAoIWl0ZW1MaXN0IHx8IGl0ZW1MaXN0Lmxlbmd0aCA9PT0gMCkge1xyXG4gICAgICAgIHRocm93IG5ldyBFcnJvcihgaXRlbXMgYXJlIHJlcXVpcmVkYCk7XHJcbiAgICB9XHJcbiAgICByZXR1cm4gaXRlbUxpc3Q7XHJcbiAgfVxyXG5cclxuICBnZXRJdGVtU3ViKGl0ZW06IE1lbnVWZXJ0aWNhbEl0ZW1zRGF0YSk6IE1lbnVWZXJ0aWNhbFN1YkRhdGEge1xyXG4gICAgcmV0dXJuIGl0ZW0gaW5zdGFuY2VvZiBNZW51VmVydGljYWxJdGVtQ29tcG9uZW50ID8gaXRlbS5zdWJDb21wb25lbnQgOiBpdGVtLnN1YjtcclxuICB9XHJcblxyXG4gIGdldFN1Ykl0ZW1zKHN1YjogTWVudVZlcnRpY2FsU3ViRGF0YSk6IE1lbnVWZXJ0aWNhbFN1Ykl0ZW1zRGF0YVtdIHtcclxuICAgIGNvbnN0IHN1Ykl0ZW1zID0gc3ViIGluc3RhbmNlb2YgTWVudVZlcnRpY2FsSXRlbVN1YkNvbXBvbmVudCA/IHN1Yi5pdGVtQ29tcG9uZW50cy50b0FycmF5KCkgOiBzdWIuaXRlbXM7XHJcbiAgICByZXR1cm4gc3ViSXRlbXMgJiYgc3ViSXRlbXMubGVuZ3RoID4gMCA/IHN1Ykl0ZW1zIDogbnVsbDtcclxuICB9XHJcbn1cclxuIl19
|
|
@@ -628,7 +628,7 @@ export class MenubarComponent extends AccessibilityComponent {
|
|
|
628
628
|
MenubarComponent.decorators = [
|
|
629
629
|
{ type: Component, args: [{
|
|
630
630
|
selector: 'desy-menubar',
|
|
631
|
-
template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <ng-container *ngIf=\"getLabelRef()\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n (focusin)=\"handleMenuFocusIn()\"\r\n (focusout)=\"handleMenuFocusOut($event)\"\r\n [ngClass]=\"{ 'focus': isFocused }\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n <a *ngIf=\"item.sub\" #link\r\n role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </span>\r\n <svg class=\"inline-block -mr-2 align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n </a>\r\n <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : ''\"\r\n [fragment]=\"item.fragment\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n\r\n <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n <ng-container [ngSwitch]=\"subItem.role\">\r\n <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n <ng-container *ngIf=\"subsubitem\">\r\n <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-checked]=\"!!subItem.checked\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"my-sm border-b border-neutral-base\">\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n</div>\r\n"
|
|
631
|
+
template: "<div [attr.id]=\"id\" [class]=\"['c-menubar', classes] | makeHtmlList\"\r\n [attr.role]=\"role ? role : null\"\r\n [attr.aria-describedby]=\"ariaDescribedBy ? ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"ariaLabelledBy ? ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"ariaHidden ? ariaHidden : null\"\r\n [attr.aria-disabled]=\"ariaDisabled ? ariaDisabled : null\"\r\n [attr.aria-controls]=\"ariaControls ? ariaControls : null\"\r\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : null\"\r\n [attr.aria-live]=\"ariaLive ? ariaLive : null\"\r\n [attr.aria-expanded]=\"ariaExpanded ? ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"ariaErrorMessage ? ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"ariaHasPopup ? ariaHasPopup : null\"\r\n [attr.aria-modal]=\"ariaModal ? ariaModal : null\"\r\n [attr.tabindex]=\"tabindex ? tabindex : null\">\r\n <ng-container *ngIf=\"getLabelRef()\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelComponent ? labelComponent.classes : (labelData ? labelData.classes : null)] | makeHtmlList\">\r\n <ng-container *ngTemplateOutlet=\"getLabelRef()\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"!getLabelRef() && (labelData || labelText)\">\r\n <div [id]=\"id + '-label'\" [class]=\"['mb-sm', labelData ? labelData.classes : null] | makeHtmlList\">\r\n <ng-container *desyCustomInnerContent=\"{ html: getLabelContent() }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n <ul #menubar [id]=\"id + '-menubar'\" class=\"lg:flex lg:flex-wrap\" role=\"menubar\"\r\n (focusin)=\"handleMenuFocusIn()\"\r\n (focusout)=\"handleMenuFocusOut($event)\"\r\n [ngClass]=\"{ 'focus': isFocused }\"\r\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\"\r\n [attr.aria-describedby]=\"getLabelRef() || labelData || labelText ? id + '-label' : null\">\r\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\r\n <li class=\"relative\" role=\"none\" desyMenubaritem (contentChanged)=\"checkChanges()\">\r\n <a *ngIf=\"item.sub\" #link\r\n role=\"menuitem\" aria-haspopup=\"true\" aria-expanded=\"false\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\">\r\n <span class=\"inline-flex self-center max-w-xs align-middle truncate\" #itemContentWrapper\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </span>\r\n <svg class=\"inline-block -mr-2 align-middle -my-px\" viewBox=\"0 0 96 96\" aria-hidden=\"true\" fill=\"currentColor\" focusable=\"false\" width=\"1.5em\" height=\"1.5em\"><g><path d=\"M46.71 58.037a1.823 1.823 0 002.581 0L62.048 45.28a1.823 1.823 0 00-1.29-3.113H35.243a1.823 1.823 0 00-1.291 3.113z\"/></g></svg>\r\n </a>\r\n <a *ngIf=\"item.routerLink && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [routerLink]=\"item.routerLink\"\r\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\r\n [fragment]=\"item.fragment\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n <a *ngIf=\"!item.routerLink && item.href && !item.sub\" #link #itemContentWrapper\r\n role=\"menuitem\"\r\n (click)=\"handleMenuItemClick($event, itemIndex)\"\r\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\r\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\r\n (desyContentEmpty)=\"handleEmptyItem('item content, html or text is required at position ' + itemIndex)\"\r\n (desyAttributeChange)=\"checkChanges()\" [attributesToCheck]=\"'disabled'\"\r\n [id]=\"getItemId(item, itemIndex)\"\r\n [href]=\"item.href | externalHref\"\r\n [class]=\"['c-menubar__button', item.classes] | makeHtmlList\"\r\n [ngClass]=\"{'c-menubar__button--disabled': item.disabled, 'c-menubar__button--primary': item.active}\"\r\n [attr.title]=\"item.title ? item.title : null\"\r\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\r\n [attr.aria-disabled]=\"item.disabled ? item.disabled : (item.ariaDisabled ? item.ariaDisabled : null)\"\r\n [attr.tabindex]=\"item.disabled ? -1 : (itemIndex === currentFocusItemIndex ? 0 : -1)\"\r\n [attr.target]=\"item.target ? item.target : null\"\r\n [attr.aria-describedby]=\"item.ariaDescribedBy ? item.ariaDescribedBy : null\"\r\n [attr.aria-labelledBy]=\"item.ariaLabelledBy ? item.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.ariaHidden ? item.ariaHidden : null\"\r\n [attr.aria-controls]=\"item.ariaControls ? item.ariaControls : null\"\r\n [attr.aria-current]=\"item.ariaCurrent ? item.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.ariaLive ? item.ariaLive : null\"\r\n [attr.aria-expanded]=\"item.ariaExpanded ? item.ariaExpanded : null\"\r\n [attr.aria-errormessage]=\"item.ariaErrorMessage ? item.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.ariaHasPopup ? item.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.ariaModal ? item.ariaModal : null\">\r\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text}\"></ng-container>\r\n </a>\r\n\r\n <ul *ngIf=\"item.sub && getItemSubitems(item)\" #popupMenu role=\"menu\" tabindex=\"-1\"\r\n [ngStyle]=\"getPopupStyle(itemIndex)\"\r\n [class]=\"['c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm', item.sub.classes] | makeHtmlList\"\r\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : (item.sub.ariaLabel ? item.sub.ariaLabel : null)\"\r\n [attr.aria-describedby]=\"item.sub.ariaDescribedBy ? item.sub.ariaDescribedBy : null\"\r\n [attr.aria-labelledby]=\"item.sub.ariaLabelledBy ? item.sub.ariaLabelledBy : null\"\r\n [attr.aria-hidden]=\"item.sub.ariaHidden ? item.sub.ariaHidden : null\"\r\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\r\n [attr.aria-controls]=\"item.sub.ariaControls ? item.sub.ariaControls : null\"\r\n [attr.aria-current]=\"item.sub.ariaCurrent ? item.sub.ariaCurrent : null\"\r\n [attr.aria-live]=\"item.sub.ariaLive ? item.sub.ariaLive : null\"\r\n [attr.aria-expanded]=\"!!(menuData && menuData[itemIndex].open)\"\r\n [attr.aria-errormessage]=\"item.sub.ariaErrorMessage ? item.sub.ariaErrorMessage : null\"\r\n [attr.aria-haspopup]=\"item.sub.ariaHasPopup ? item.sub.ariaHasPopup : null\"\r\n [attr.aria-modal]=\"item.sub.ariaModal ? item.sub.ariaModal : null\">\r\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\r\n <ng-container [ngSwitch]=\"subItem.role\">\r\n <li #popupMenuItem *ngSwitchCase=\"'none'\" role=\"none\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li *ngSwitchCase=\"'group'\" role=\"none\">\r\n <ul role=\"group\" [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-label]=\"subItem.ariaLabel ? subItem.ariaLabel : null\">\r\n <ng-container *ngFor=\"let subsubitem of getSubItemSubitems(subItem); index as subsubIndex\">\r\n <ng-container *ngIf=\"subsubitem\">\r\n <li #popupMenuItem [attr.role]=\"subsubitem.role ? subsubitem.role : null\" tabindex=\"-1\"\r\n [id]=\"getSubItemId(subsubitem, subsubIndex, getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex)))\"\r\n (desyContentEmpty)=\"handleEmptyItem('subsubitem content, html or text is required at position ' + subsubIndex + ' of subItem ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex, subsubIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subsubIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex, subsubIndex)\"\r\n [attr.aria-checked]=\"getSubSubItemAriaChecked(subsubitem)\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subsubitem, html: subsubitem.html, text: subsubitem.text}\"></ng-container>\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitem'\" role=\"menuitem\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white focus:bg-primary-base focus:text-white focus:outline-none\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'menuitemcheckbox'\" role=\"menuitemcheckbox\" tabindex=\"-1\"\r\n (desyContentEmpty)=\"handleEmptyItem('subitem content, html or text is required at position ' + subItemIndex + ' of item ' + itemIndex)\"\r\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\r\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\r\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n [attr.aria-checked]=\"!!subItem.checked\"\r\n class=\"flex items-center pr-base pl-lg py-sm cursor-pointer hover:bg-primary-base hover:text-white\">\r\n <ng-container *desyCustomInnerContent=\"{ component: subItem, html: subItem.html, text: subItem.text}\"></ng-container>\r\n </li>\r\n <li #popupMenuItem *ngSwitchCase=\"'separator'\" role=\"separator\"\r\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\r\n class=\"my-sm border-b border-neutral-base\">\r\n </li>\r\n </ng-container>\r\n </ng-container>\r\n </ul>\r\n </li>\r\n </ng-container>\r\n </ul>\r\n</div>\r\n"
|
|
632
632
|
},] }
|
|
633
633
|
];
|
|
634
634
|
MenubarComponent.ctorParameters = () => [
|