desy-angular 16.0.0 → 16.0.2
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/fesm2022/desy-angular.mjs +22 -17
- package/fesm2022/desy-angular.mjs.map +1 -1
- package/lib/desy-nav/components/menu-navigation/components/menu-navigation-item/menu-navigation-item.component.d.ts +2 -1
- package/lib/desy-nav/components/menu-navigation/menu-navigation.component.d.ts +0 -2
- package/lib/desy-tables/components/table-advanced/table-advanced.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -7393,13 +7393,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7393
7393
|
class MenuNavigationItemComponent extends ContentBaseComponent {
|
|
7394
7394
|
constructor() {
|
|
7395
7395
|
super(...arguments);
|
|
7396
|
+
this.headerMode = true;
|
|
7396
7397
|
this.selected = new EventEmitter();
|
|
7397
7398
|
}
|
|
7398
7399
|
getSubItems() {
|
|
7399
7400
|
return this.subItems.toArray();
|
|
7400
7401
|
}
|
|
7401
7402
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuNavigationItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7402
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuNavigationItemComponent, isStandalone: false, selector: "desy-menu-navigation-item", inputs: { href: "href", fragment: "fragment", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", target: "target", text: "text", html: "html", id: "id", expanded: "expanded", divider: "divider", disabled: "disabled", sub: "sub", classes: "classes", titleModal: "titleModal", active: "active" }, outputs: { selected: "selected" }, queries: [{ propertyName: "subItems", predicate: MenuNavigationSubitemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }); }
|
|
7403
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuNavigationItemComponent, isStandalone: false, selector: "desy-menu-navigation-item", inputs: { href: "href", fragment: "fragment", routerLink: "routerLink", routerLinkActiveClasses: "routerLinkActiveClasses", target: "target", text: "text", html: "html", id: "id", expanded: "expanded", divider: "divider", disabled: "disabled", sub: "sub", classes: "classes", titleModal: "titleModal", active: "active", headerMode: "headerMode" }, outputs: { selected: "selected" }, queries: [{ propertyName: "subItems", predicate: MenuNavigationSubitemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n <ng-content></ng-content>\n</ng-template>\n" }); }
|
|
7403
7404
|
}
|
|
7404
7405
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuNavigationItemComponent, decorators: [{
|
|
7405
7406
|
type: Component,
|
|
@@ -7434,6 +7435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
7434
7435
|
type: Input
|
|
7435
7436
|
}], active: [{
|
|
7436
7437
|
type: Input
|
|
7438
|
+
}], headerMode: [{
|
|
7439
|
+
type: Input
|
|
7437
7440
|
}], selected: [{
|
|
7438
7441
|
type: Output
|
|
7439
7442
|
}], subItems: [{
|
|
@@ -7672,9 +7675,6 @@ class MenuNavigationComponent extends AccessibilityComponent {
|
|
|
7672
7675
|
break;
|
|
7673
7676
|
}
|
|
7674
7677
|
}
|
|
7675
|
-
handleMenuItemMouseOver(itemIndex) {
|
|
7676
|
-
this.focusItem(itemIndex, true);
|
|
7677
|
-
}
|
|
7678
7678
|
handlePopupMenuItemClick(itemIndex, subItemIndex, subSubItemIndex) {
|
|
7679
7679
|
this.activatePopupMenuItem(itemIndex, subItemIndex, subSubItemIndex);
|
|
7680
7680
|
this.focusItem(itemIndex);
|
|
@@ -7756,9 +7756,6 @@ class MenuNavigationComponent extends AccessibilityComponent {
|
|
|
7756
7756
|
break;
|
|
7757
7757
|
}
|
|
7758
7758
|
}
|
|
7759
|
-
handlePopupMenuItemMouseOver(itemIndex, subItemIndex, subSubItemIndex) {
|
|
7760
|
-
this.focusSubItem(itemIndex, subItemIndex, subSubItemIndex);
|
|
7761
|
-
}
|
|
7762
7759
|
/*
|
|
7763
7760
|
* Comunes
|
|
7764
7761
|
*/
|
|
@@ -8034,11 +8031,11 @@ class MenuNavigationComponent extends AccessibilityComponent {
|
|
|
8034
8031
|
return id;
|
|
8035
8032
|
}
|
|
8036
8033
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuNavigationComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8037
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuNavigationComponent, isStandalone: false, selector: "desy-menu-navigation", inputs: { idPrefix: "idPrefix", items: "items", classes: "classes", id: "id" }, outputs: { itemsChange: "itemsChange", activeItemChange: "activeItemChange", activeSubItemChange: "activeSubItemChange" }, host: { properties: { "class": "this.classes", "class.c-menu-navigation": "this.cfg", "attr.id": "this.id", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-hidden": "this.ariaHidden", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-controls": "this.ariaControls", "attr.aria-current": "this.ariaCurrent", "attr.aria-live": "this.ariaLive", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-errormessage": "this.ariaErrorMessage", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-modal": "this.ariaModal", "attr.aria-checked": "this.ariaChecked", "attr.aria-pressed": "this.ariaPressed", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-required": "this.ariaRequired", "attr.aria-selected": "this.ariaSelected", "attr.aria-valuemin": "this.ariaValuemin", "attr.aria-valuemax": "this.ariaValuemax", "attr.aria-valuenow": "this.ariaValuenow", "attr.aria-valuetext": "this.ariaValuetext", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-level": "this.ariaLevel", "attr.aria-multiselectable": "this.ariaMultiselectable", "attr.aria-placeholder": "this.ariaPlaceholder", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-sort": "this.ariaSort", "attr.aria-busy": "this.ariaBusy", "attr.aria-activedescendant": "this.ariaActivedescendant", "attr.aria-atomic": "this.ariaAtomic", "attr.aria-autocomplete": "this.ariaAutocomplete", "attr.aria-braillelabel": "this.ariaBraillelabel", "attr.aria-brailleroledescription": "this.ariaBrailleroledescription", "attr.aria-colcount": "this.ariaColcount", "attr.aria-colindex": "this.ariaColindex", "attr.aria-colindextext": "this.ariaColindextext", "attr.aria-colspan": "this.ariaColspan", "attr.aria-description": "this.ariaDescription", "attr.aria-details": "this.ariaDetails", "attr.aria-flowto": "this.ariaFlowto", "attr.aria-invalid": "this.ariaInvalid", "attr.aria-keyshortcuts": "this.ariaKeyshortcuts", "attr.aria-owns": "this.ariaOwns", "attr.aria-relevant": "this.ariaRelevant", "attr.aria-roledescription": "this.ariaRoledescription", "attr.aria-rowcount": "this.ariaRowcount", "attr.aria-rowindex": "this.ariaRowindex", "attr.aria-rowindextext": "this.ariaRowindextext", "attr.aria-rowspan": "this.ariaRowspan", "attr.tabindex": "this.tabindex", "attr.title": "this.title", "attr.alt": "this.alt", "attr.lang": "this.lang", "attr.accesskey": "this.accesskey", "attr.autocomplete": "this.autocomplete", "attr.autofocus": "this.autofocus", "attr.contenteditable": "this.contenteditable", "attr.dir": "this.dir", "attr.draggable": "this.draggable", "attr.enterkeyhint": "this.enterkeyhint", "attr.hidden": "this.hidden", "attr.inputmode": "this.inputmode", "attr.spellcheck": "this.spellcheck", "attr.translate": "this.translate", "attr.aria-multiline": "this.ariaMultiline", "attr.for": "this.for", "attr.form": "this.form", "attr.headers": "this.headers", "attr.placeholder": "this.placeholder", "attr.readonly": "this.readonly", "attr.required": "this.required" } }, queries: [{ propertyName: "itemComponentList", predicate: MenuNavigationItemComponent }], viewQueries: [{ propertyName: "menunavigation", first: true, predicate: ["menunavigation"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: MenubaritemDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul\n #menunavigation\n [id]=\"id + '-menu-navigation'\"\n class=\"flex flex-wrap gap-base\"\n (focusin)=\"handleMenuFocusIn()\"\n (focusout)=\"handleMenuFocusOut($event)\"\n [ngClass]=\"{ focus: isFocused }\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\">\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n <li\n class=\"relative\"\n desyMenubaritem\n (contentChanged)=\"checkChanges()\">\n <a\n *ngIf=\"item.href\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [href]=\"item.href\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.title]=\"item.title ? item.title : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [desyAppAccessibility]=\"item\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <a\n *ngIf=\"!item.href && item.routerLink\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [routerLink]=\"item.routerLink\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [fragment]=\"item.fragment\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <button\n *ngIf=\"!item.href && !item.routerLink\"\n #link\n #itemContentWrapper\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.aria-expanded]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.aria-haspopup]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-controls]=\"item.sub ? (item.ariaControls ? item.ariaControls : id + '-sub-list') : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n *ngIf=\"item.active\"\n class=\"sr-only\">\n Item activo:\n </span>\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n </span>\n <svg\n *ngIf=\"item.sub\"\n class=\"inline-block -mr-2 align-middle -my-px pointer-events-none\"\n viewBox=\"0 0 96 96\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n focusable=\"false\"\n width=\"1.5em\"\n height=\"1.5em\">\n <g>\n <path\n 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\" />\n </g>\n </svg>\n </button>\n\n <div\n *ngIf=\"item.sub && getItemSubitems(item)\"\n class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n <ul\n [id]=\"id + '-sub-list'\"\n [style]=\"menuData && menuData[itemIndex].open ? 'display:block' : 'display:none'\"\n #popupMenu\n role=\"menu\"\n tabindex=\"-1\"\n [class]=\"\n item.sub.classes\n ? item.sub.classes\n : 'c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm'\n \"\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : item.sub.ariaLabel ? item.sub.ariaLabel : null\"\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.sub\">\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n <li\n #popupMenuItem\n tabindex=\"-1\"\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n <a\n *ngIf=\"subItem.href\"\n #itemContentWrapper\n [href]=\"subItem.href\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!subItem.href && subItem.routerLink\"\n #itemContentWrapper\n [routerLink]=\"subItem.routerLink\"\n [routerLinkActive]=\"subItem.routerLinkActiveClasses ? subItem.routerLinkActiveClasses : []\"\n [fragment]=\"subItem.fragment\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"subItem.divider\"\n class=\"my-sm border-b border-neutral-base\"\n role=\"presentation\"\n aria-hidden=\"true\"></li>\n </ng-container>\n </ul>\n </div>\n </li>\n <li\n #popupMenuItem\n *ngIf=\"item.divider\"\n [class]=\"item.divider.classes\"\n role=\"presentation\"\n aria-hidden=\"true\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: item.divider,\n html: item.divider.html,\n text: item.divider.text,\n }\"></ng-container>\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: AttributeChangeDirective, selector: "[desyAttributeChange]", inputs: ["attributesToCheck", "desyAttributeChangeEnabled"], outputs: ["desyAttributeChange", "desyAttributeChangeMutation"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "directive", type: MenubaritemDirective, selector: "[desyMenubaritem]", outputs: ["contentChanged"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
8034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: MenuNavigationComponent, isStandalone: false, selector: "desy-menu-navigation", inputs: { idPrefix: "idPrefix", items: "items", classes: "classes", id: "id" }, outputs: { itemsChange: "itemsChange", activeItemChange: "activeItemChange", activeSubItemChange: "activeSubItemChange" }, host: { properties: { "class": "this.classes", "class.c-menu-navigation": "this.cfg", "attr.id": "this.id", "attr.role": "this.role", "attr.aria-label": "this.ariaLabel", "attr.aria-describedby": "this.ariaDescribedBy", "attr.aria-labelledby": "this.ariaLabelledBy", "attr.aria-hidden": "this.ariaHidden", "attr.aria-disabled": "this.ariaDisabled", "attr.aria-controls": "this.ariaControls", "attr.aria-current": "this.ariaCurrent", "attr.aria-live": "this.ariaLive", "attr.aria-expanded": "this.ariaExpanded", "attr.aria-errormessage": "this.ariaErrorMessage", "attr.aria-haspopup": "this.ariaHasPopup", "attr.aria-modal": "this.ariaModal", "attr.aria-checked": "this.ariaChecked", "attr.aria-pressed": "this.ariaPressed", "attr.aria-readonly": "this.ariaReadonly", "attr.aria-required": "this.ariaRequired", "attr.aria-selected": "this.ariaSelected", "attr.aria-valuemin": "this.ariaValuemin", "attr.aria-valuemax": "this.ariaValuemax", "attr.aria-valuenow": "this.ariaValuenow", "attr.aria-valuetext": "this.ariaValuetext", "attr.aria-orientation": "this.ariaOrientation", "attr.aria-level": "this.ariaLevel", "attr.aria-multiselectable": "this.ariaMultiselectable", "attr.aria-placeholder": "this.ariaPlaceholder", "attr.aria-posinset": "this.ariaPosinset", "attr.aria-setsize": "this.ariaSetsize", "attr.aria-sort": "this.ariaSort", "attr.aria-busy": "this.ariaBusy", "attr.aria-activedescendant": "this.ariaActivedescendant", "attr.aria-atomic": "this.ariaAtomic", "attr.aria-autocomplete": "this.ariaAutocomplete", "attr.aria-braillelabel": "this.ariaBraillelabel", "attr.aria-brailleroledescription": "this.ariaBrailleroledescription", "attr.aria-colcount": "this.ariaColcount", "attr.aria-colindex": "this.ariaColindex", "attr.aria-colindextext": "this.ariaColindextext", "attr.aria-colspan": "this.ariaColspan", "attr.aria-description": "this.ariaDescription", "attr.aria-details": "this.ariaDetails", "attr.aria-flowto": "this.ariaFlowto", "attr.aria-invalid": "this.ariaInvalid", "attr.aria-keyshortcuts": "this.ariaKeyshortcuts", "attr.aria-owns": "this.ariaOwns", "attr.aria-relevant": "this.ariaRelevant", "attr.aria-roledescription": "this.ariaRoledescription", "attr.aria-rowcount": "this.ariaRowcount", "attr.aria-rowindex": "this.ariaRowindex", "attr.aria-rowindextext": "this.ariaRowindextext", "attr.aria-rowspan": "this.ariaRowspan", "attr.tabindex": "this.tabindex", "attr.title": "this.title", "attr.alt": "this.alt", "attr.lang": "this.lang", "attr.accesskey": "this.accesskey", "attr.autocomplete": "this.autocomplete", "attr.autofocus": "this.autofocus", "attr.contenteditable": "this.contenteditable", "attr.dir": "this.dir", "attr.draggable": "this.draggable", "attr.enterkeyhint": "this.enterkeyhint", "attr.hidden": "this.hidden", "attr.inputmode": "this.inputmode", "attr.spellcheck": "this.spellcheck", "attr.translate": "this.translate", "attr.aria-multiline": "this.ariaMultiline", "attr.for": "this.for", "attr.form": "this.form", "attr.headers": "this.headers", "attr.placeholder": "this.placeholder", "attr.readonly": "this.readonly", "attr.required": "this.required" } }, queries: [{ propertyName: "itemComponentList", predicate: MenuNavigationItemComponent }], viewQueries: [{ propertyName: "menunavigation", first: true, predicate: ["menunavigation"], descendants: true, read: ElementRef }, { propertyName: "menuItems", predicate: MenubaritemDirective, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ul\n #menunavigation\n [id]=\"id + '-menu-navigation'\"\n class=\"flex flex-wrap gap-base\"\n (focusin)=\"handleMenuFocusIn()\"\n (focusout)=\"handleMenuFocusOut($event)\"\n [ngClass]=\"{ focus: isFocused }\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\">\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n <li\n class=\"relative\"\n desyMenubaritem\n (contentChanged)=\"checkChanges()\"\n [desyAppAccessibility]=\"item.headerMode ? item : undefined\">\n <a\n *ngIf=\"item.href\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [href]=\"item.href\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.title]=\"item.title ? item.title : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [desyAppAccessibility]=\"item.headerMode ? undefined : item\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <a\n *ngIf=\"!item.href && item.routerLink\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [routerLink]=\"item.routerLink\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [fragment]=\"item.fragment\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.headerMode ? undefined : item\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <button\n *ngIf=\"!item.href && !item.routerLink\"\n #link\n #itemContentWrapper\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.aria-expanded]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.aria-haspopup]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.headerMode ? undefined : item\"\n [attr.aria-controls]=\"item.sub ? (item.ariaControls ? item.ariaControls : id + '-sub-list') : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n *ngIf=\"item.active\"\n class=\"sr-only\">\n Item activo:\n </span>\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n </span>\n <svg\n *ngIf=\"item.sub\"\n class=\"inline-block -mr-2 align-middle -my-px pointer-events-none\"\n viewBox=\"0 0 96 96\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n focusable=\"false\"\n width=\"1.5em\"\n height=\"1.5em\">\n <g>\n <path\n 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\" />\n </g>\n </svg>\n </button>\n\n <div\n *ngIf=\"item.sub && getItemSubitems(item)\"\n class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n <ul\n [id]=\"id + '-sub-list'\"\n [style]=\"menuData && menuData[itemIndex].open ? 'display:block' : 'display:none'\"\n #popupMenu\n role=\"menu\"\n tabindex=\"-1\"\n [class]=\"\n item.sub.classes\n ? item.sub.classes\n : 'c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm'\n \"\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : item.sub.ariaLabel ? item.sub.ariaLabel : null\"\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.sub\">\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n <li\n #popupMenuItem\n tabindex=\"-1\"\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n <a\n *ngIf=\"subItem.href\"\n #itemContentWrapper\n [href]=\"subItem.href\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!subItem.href && subItem.routerLink\"\n #itemContentWrapper\n [routerLink]=\"subItem.routerLink\"\n [routerLinkActive]=\"subItem.routerLinkActiveClasses ? subItem.routerLinkActiveClasses : []\"\n [fragment]=\"subItem.fragment\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"subItem.divider\"\n class=\"my-sm border-b border-neutral-base\"\n role=\"presentation\"\n aria-hidden=\"true\"></li>\n </ng-container>\n </ul>\n </div>\n </li>\n <li\n #popupMenuItem\n *ngIf=\"item.divider\"\n [class]=\"item.divider.classes\"\n role=\"presentation\"\n aria-hidden=\"true\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: item.divider,\n html: item.divider.html,\n text: item.divider.text,\n }\"></ng-container>\n </li>\n </ng-container>\n</ul>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: AttributeChangeDirective, selector: "[desyAttributeChange]", inputs: ["attributesToCheck", "desyAttributeChangeEnabled"], outputs: ["desyAttributeChange", "desyAttributeChangeMutation"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "directive", type: MenubaritemDirective, selector: "[desyMenubaritem]", outputs: ["contentChanged"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
8038
8035
|
}
|
|
8039
8036
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: MenuNavigationComponent, decorators: [{
|
|
8040
8037
|
type: Component,
|
|
8041
|
-
args: [{ selector: 'desy-menu-navigation', standalone: false, template: "<ul\n #menunavigation\n [id]=\"id + '-menu-navigation'\"\n class=\"flex flex-wrap gap-base\"\n (focusin)=\"handleMenuFocusIn()\"\n (focusout)=\"handleMenuFocusOut($event)\"\n [ngClass]=\"{ focus: isFocused }\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\">\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n <li\n class=\"relative\"\n desyMenubaritem\n (contentChanged)=\"checkChanges()\">\n <a\n *ngIf=\"item.href\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [href]=\"item.href\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.title]=\"item.title ? item.title : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [desyAppAccessibility]=\"item\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <a\n *ngIf=\"!item.href && item.routerLink\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [routerLink]=\"item.routerLink\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [fragment]=\"item.fragment\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <button\n *ngIf=\"!item.href && !item.routerLink\"\n #link\n #itemContentWrapper\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (mouseover)=\"handleMenuItemMouseOver(itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.aria-expanded]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.aria-haspopup]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-controls]=\"item.sub ? (item.ariaControls ? item.ariaControls : id + '-sub-list') : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n *ngIf=\"item.active\"\n class=\"sr-only\">\n Item activo:\n </span>\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n </span>\n <svg\n *ngIf=\"item.sub\"\n class=\"inline-block -mr-2 align-middle -my-px pointer-events-none\"\n viewBox=\"0 0 96 96\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n focusable=\"false\"\n width=\"1.5em\"\n height=\"1.5em\">\n <g>\n <path\n 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\" />\n </g>\n </svg>\n </button>\n\n <div\n *ngIf=\"item.sub && getItemSubitems(item)\"\n class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n <ul\n [id]=\"id + '-sub-list'\"\n [style]=\"menuData && menuData[itemIndex].open ? 'display:block' : 'display:none'\"\n #popupMenu\n role=\"menu\"\n tabindex=\"-1\"\n [class]=\"\n item.sub.classes\n ? item.sub.classes\n : 'c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm'\n \"\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : item.sub.ariaLabel ? item.sub.ariaLabel : null\"\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.sub\">\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n <li\n #popupMenuItem\n tabindex=\"-1\"\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n <a\n *ngIf=\"subItem.href\"\n #itemContentWrapper\n [href]=\"subItem.href\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!subItem.href && subItem.routerLink\"\n #itemContentWrapper\n [routerLink]=\"subItem.routerLink\"\n [routerLinkActive]=\"subItem.routerLinkActiveClasses ? subItem.routerLinkActiveClasses : []\"\n [fragment]=\"subItem.fragment\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (mouseover)=\"handlePopupMenuItemMouseOver(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"subItem.divider\"\n class=\"my-sm border-b border-neutral-base\"\n role=\"presentation\"\n aria-hidden=\"true\"></li>\n </ng-container>\n </ul>\n </div>\n </li>\n <li\n #popupMenuItem\n *ngIf=\"item.divider\"\n [class]=\"item.divider.classes\"\n role=\"presentation\"\n aria-hidden=\"true\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: item.divider,\n html: item.divider.html,\n text: item.divider.text,\n }\"></ng-container>\n </li>\n </ng-container>\n</ul>\n" }]
|
|
8038
|
+
args: [{ selector: 'desy-menu-navigation', standalone: false, template: "<ul\n #menunavigation\n [id]=\"id + '-menu-navigation'\"\n class=\"flex flex-wrap gap-base\"\n (focusin)=\"handleMenuFocusIn()\"\n (focusout)=\"handleMenuFocusOut($event)\"\n [ngClass]=\"{ focus: isFocused }\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : null\">\n <ng-container *ngFor=\"let item of getItems(); index as itemIndex\">\n <li\n class=\"relative\"\n desyMenubaritem\n (contentChanged)=\"checkChanges()\"\n [desyAppAccessibility]=\"item.headerMode ? item : undefined\">\n <a\n *ngIf=\"item.href\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [href]=\"item.href\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.title]=\"item.title ? item.title : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [desyAppAccessibility]=\"item.headerMode ? undefined : item\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <a\n *ngIf=\"!item.href && item.routerLink\"\n #link\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [attr.role]=\"item.disabled ? link : null\"\n [id]=\"getItemId(item, itemIndex)\"\n [target]=\"item.target\"\n [routerLink]=\"item.routerLink\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [fragment]=\"item.fragment\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.headerMode ? undefined : item\"\n [attr.aria-current]=\"item.disabled ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </span>\n </a>\n <button\n *ngIf=\"!item.href && !item.routerLink\"\n #link\n #itemContentWrapper\n (click)=\"handleMenuItemClick($event, itemIndex)\"\n (keydown)=\"handleMenuItemKeydown($event, itemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [attributesToCheck]=\"'disabled'\"\n [class]=\"['c-menu-navigation__button', item.classes] | makeHtmlList\"\n [ngClass]=\"{\n 'c-menu-navigation__button--disabled': item.disabled,\n 'c-menu-navigation__button--primary': item.active,\n 'c-menu-navigation__button--has-selection': item.active,\n }\"\n [attr.aria-expanded]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.aria-haspopup]=\"item.sub ? (!!(menuData && menuData[itemIndex].open) ? true : false) : null\"\n [attr.disabled]=\"item.disabled ? item.disabled : null\"\n [attr.aria-disabled]=\"item.disabled ? item.disabled : item.ariaDisabled ? item.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.headerMode ? undefined : item\"\n [attr.aria-controls]=\"item.sub ? (item.ariaControls ? item.ariaControls : id + '-sub-list') : null\"\n [attr.tabindex]=\"item.disabled ? -1 : itemIndex === currentFocusItemIndex ? 0 : -1\">\n <span\n *ngIf=\"item.active\"\n class=\"sr-only\">\n Item activo:\n </span>\n <span\n class=\"inline-flex self-center align-middle pointer-events-none\"\n #itemContentWrapper>\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n </span>\n <svg\n *ngIf=\"item.sub\"\n class=\"inline-block -mr-2 align-middle -my-px pointer-events-none\"\n viewBox=\"0 0 96 96\"\n aria-hidden=\"true\"\n fill=\"currentColor\"\n focusable=\"false\"\n width=\"1.5em\"\n height=\"1.5em\">\n <g>\n <path\n 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\" />\n </g>\n </svg>\n </button>\n\n <div\n *ngIf=\"item.sub && getItemSubitems(item)\"\n class=\"c-menu-navigation__sub absolute bottom-0 left-0\">\n <ul\n [id]=\"id + '-sub-list'\"\n [style]=\"menuData && menuData[itemIndex].open ? 'display:block' : 'display:none'\"\n #popupMenu\n role=\"menu\"\n tabindex=\"-1\"\n [class]=\"\n item.sub.classes\n ? item.sub.classes\n : 'c-menu-navigation__tooltip w-max max-w-64 border border-neutral-base shadow-md bg-white text-sm'\n \"\n [attr.aria-label]=\"item.ariaLabel ? item.ariaLabel : item.sub.ariaLabel ? item.sub.ariaLabel : null\"\n [attr.aria-disabled]=\"item.sub.ariaDisabled ? item.sub.ariaDisabled : null\"\n [desyAppAccessibility]=\"item.sub\">\n <ng-container *ngFor=\"let subItem of getItemSubitems(item); index as subItemIndex\">\n <li\n #popupMenuItem\n tabindex=\"-1\"\n [id]=\"getSubItemId(subItem, subItemIndex, getItemId(item, itemIndex))\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\">\n <a\n *ngIf=\"subItem.href\"\n #itemContentWrapper\n [href]=\"subItem.href\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!subItem.href && subItem.routerLink\"\n #itemContentWrapper\n [routerLink]=\"subItem.routerLink\"\n [routerLinkActive]=\"subItem.routerLinkActiveClasses ? subItem.routerLinkActiveClasses : []\"\n [fragment]=\"subItem.fragment\"\n (click)=\"handlePopupMenuItemClick(itemIndex, subItemIndex)\"\n (keydown)=\"handlePopupMenuItemKeydown($event, itemIndex, subItemIndex)\"\n (desyAttributeChange)=\"checkChanges()\"\n [class]=\"\n [\n 'flex items-center px-base py-sm text-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n subItem.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': subItem.disabled }\"\n [tabindex]=\"subItem.disabled ? -1 : null\"\n [attr.aria-current]=\"subItem.active ? 'page' : null\"\n [target]=\"subItem.target\">\n <strong\n class=\"font-bold\"\n *ngIf=\"subItem.active; else noActive\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </strong>\n <ng-template #noActive>\n <ng-container\n *desyCustomInnerContent=\"{\n component: subItem,\n html: subItem.html,\n text: subItem.text,\n }\"></ng-container>\n </ng-template>\n <svg\n *ngIf=\"subItem.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"subItem.divider\"\n class=\"my-sm border-b border-neutral-base\"\n role=\"presentation\"\n aria-hidden=\"true\"></li>\n </ng-container>\n </ul>\n </div>\n </li>\n <li\n #popupMenuItem\n *ngIf=\"item.divider\"\n [class]=\"item.divider.classes\"\n role=\"presentation\"\n aria-hidden=\"true\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: item.divider,\n html: item.divider.html,\n text: item.divider.text,\n }\"></ng-container>\n </li>\n </ng-container>\n</ul>\n" }]
|
|
8042
8039
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { idPrefix: [{
|
|
8043
8040
|
type: Input
|
|
8044
8041
|
}], items: [{
|
|
@@ -8304,11 +8301,11 @@ class HeaderNavigationComponent extends AccessibilityComponent {
|
|
|
8304
8301
|
return this.itemComponents && this.itemComponents.length > 0 ? this.itemComponents.toArray() : this.items;
|
|
8305
8302
|
}
|
|
8306
8303
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeaderNavigationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
8307
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HeaderNavigationComponent, isStandalone: false, selector: "desy-header-navigation, desy-header-advanced-navigation", inputs: { idPrefix: "idPrefix", classes: "classes", items: "items" }, queries: [{ propertyName: "itemComponents", predicate: HeaderNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<desy-menu-navigation\n [classes]=\"classes ? classes : 'hidden lg:block'\"\n [idPrefix]=\"idPrefix ? idPrefix : 'header-nav-item'\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngFor=\"let item of getItems(); index as i\">\n <!-- routerlink -->\n <desy-menu-navigation-item\n *ngIf=\"item.routerLink || !item.href\"\n [id]=\"getItemId(item, i)\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [
|
|
8304
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: HeaderNavigationComponent, isStandalone: false, selector: "desy-header-navigation, desy-header-advanced-navigation", inputs: { idPrefix: "idPrefix", classes: "classes", items: "items" }, queries: [{ propertyName: "itemComponents", predicate: HeaderNavigationItemComponent }], usesInheritance: true, ngImport: i0, template: "<desy-menu-navigation\n [classes]=\"classes ? classes : 'hidden lg:block'\"\n [idPrefix]=\"idPrefix ? idPrefix : 'header-nav-item'\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngFor=\"let item of getItems(); index as i\">\n <!-- routerlink -->\n <desy-menu-navigation-item\n [headerMode]=\"true\"\n *ngIf=\"item.routerLink || !item.href\"\n [id]=\"getItemId(item, i)\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [routerLinkActiveClasses]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [classes]=\"['c-menu-navigation__button--header -mr-base ', i === 0 ? 'ml-sm' : ''] | makeHtmlList\"\n [role]=\"item.role\"\n [ariaLabel]=\"item.ariaLabel\"\n [ariaDescribedBy]=\"item.ariaDescribedBy\"\n [ariaLabelledBy]=\"item.ariaLabelledBy\"\n [ariaHidden]=\"item.ariaHidden\"\n [ariaDisabled]=\"item.ariaDisabled\"\n [ariaControls]=\"item.ariaControls\"\n [ariaCurrent]=\"item.ariaCurrent\"\n [ariaLive]=\"item.ariaLive\"\n [ariaExpanded]=\"item.ariaExpanded\"\n [ariaErrorMessage]=\"item.ariaErrorMessage\"\n [ariaHasPopup]=\"item.ariaHasPopup\"\n [ariaModal]=\"item.ariaModal\"\n [ariaChecked]=\"item.ariaChecked\"\n [ariaPressed]=\"item.ariaPressed\"\n [ariaReadonly]=\"item.ariaReadonly\"\n [ariaRequired]=\"item.ariaRequired\"\n [ariaSelected]=\"item.ariaSelected\"\n [ariaValuemin]=\"item.ariaValuemin\"\n [ariaValuemax]=\"item.ariaValuemax\"\n [ariaValuenow]=\"item.ariaValuenow\"\n [ariaValuetext]=\"item.ariaValuetext\"\n [ariaOrientation]=\"item.ariaOrientation\"\n [ariaLevel]=\"item.ariaLevel\"\n [ariaMultiselectable]=\"item.ariaMultiselectable\"\n [ariaPlaceholder]=\"item.ariaPlaceholder\"\n [ariaPosinset]=\"item.ariaPosinset\"\n [ariaSetsize]=\"item.ariaSetsize\"\n [ariaSort]=\"item.ariaSort\"\n [ariaBusy]=\"item.ariaBusy\"\n [ariaActivedescendant]=\"item.ariaActivedescendant\"\n [ariaAtomic]=\"item.ariaAtomic\"\n [ariaAutocomplete]=\"item.ariaAutocomplete\"\n [ariaBraillelabel]=\"item.ariaBraillelabel\"\n [ariaBrailleroledescription]=\"item.ariaBrailleroledescription\"\n [ariaColcount]=\"item.ariaColcount\"\n [ariaColindex]=\"item.ariaColindex\"\n [ariaColindextext]=\"item.ariaColindextext\"\n [ariaColspan]=\"item.ariaColspan\"\n [ariaDescription]=\"item.ariaDescription\"\n [ariaDetails]=\"item.ariaDetails\"\n [ariaFlowto]=\"item.ariaFlowto\"\n [ariaInvalid]=\"item.ariaInvalid\"\n [ariaKeyshortcuts]=\"item.ariaKeyshortcuts\"\n [ariaOwns]=\"item.ariaOwns\"\n [ariaRelevant]=\"item.ariaRelevant\"\n [ariaRoledescription]=\"item.ariaRoledescription\"\n [ariaRowcount]=\"item.ariaRowcount\"\n [ariaRowindex]=\"item.ariaRowindex\"\n [ariaRowindextext]=\"item.ariaRowindextext\"\n [ariaRowspan]=\"item.ariaRowspan\"\n [tabindex]=\"item.tabindex\"\n [title]=\"item.title\"\n [alt]=\"item.alt\"\n [lang]=\"item.lang\"\n [accesskey]=\"item.accesskey\"\n [autocomplete]=\"item.autocomplete\"\n [autofocus]=\"item.autofocus\"\n [contenteditable]=\"item.contenteditable\"\n [dir]=\"item.dir\"\n [draggable]=\"item.draggable\"\n [enterkeyhint]=\"item.enterkeyhint\"\n [hidden]=\"item.hidden\"\n [inputmode]=\"item.inputmode\"\n [spellcheck]=\"item.spellcheck\"\n [translate]=\"item.translate\"\n [ariaMultiline]=\"item.ariaMultiline\"\n [for]=\"item.for\"\n [form]=\"item.form\"\n [headers]=\"item.headers\"\n [placeholder]=\"item.placeholder\"\n [readonly]=\"item.readonly\"\n [required]=\"item.required\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </desy-menu-navigation-item>\n <!-- href -->\n <desy-menu-navigation-item\n [headerMode]=\"true\"\n *ngIf=\"!item.routerLink && item.href\"\n [id]=\"getItemId(item, i)\"\n [href]=\"item.href\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [classes]=\"['c-menu-navigation__button--header -mr-base ', i === 0 ? 'ml-sm' : ''] | makeHtmlList\"\n [role]=\"item.role\"\n [ariaLabel]=\"item.ariaLabel\"\n [ariaDescribedBy]=\"item.ariaDescribedBy\"\n [ariaLabelledBy]=\"item.ariaLabelledBy\"\n [ariaHidden]=\"item.ariaHidden\"\n [ariaDisabled]=\"item.ariaDisabled\"\n [ariaControls]=\"item.ariaControls\"\n [ariaCurrent]=\"item.ariaCurrent\"\n [ariaLive]=\"item.ariaLive\"\n [ariaExpanded]=\"item.ariaExpanded\"\n [ariaErrorMessage]=\"item.ariaErrorMessage\"\n [ariaHasPopup]=\"item.ariaHasPopup\"\n [ariaModal]=\"item.ariaModal\"\n [ariaChecked]=\"item.ariaChecked\"\n [ariaPressed]=\"item.ariaPressed\"\n [ariaReadonly]=\"item.ariaReadonly\"\n [ariaRequired]=\"item.ariaRequired\"\n [ariaSelected]=\"item.ariaSelected\"\n [ariaValuemin]=\"item.ariaValuemin\"\n [ariaValuemax]=\"item.ariaValuemax\"\n [ariaValuenow]=\"item.ariaValuenow\"\n [ariaValuetext]=\"item.ariaValuetext\"\n [ariaOrientation]=\"item.ariaOrientation\"\n [ariaLevel]=\"item.ariaLevel\"\n [ariaMultiselectable]=\"item.ariaMultiselectable\"\n [ariaPlaceholder]=\"item.ariaPlaceholder\"\n [ariaPosinset]=\"item.ariaPosinset\"\n [ariaSetsize]=\"item.ariaSetsize\"\n [ariaSort]=\"item.ariaSort\"\n [ariaBusy]=\"item.ariaBusy\"\n [ariaActivedescendant]=\"item.ariaActivedescendant\"\n [ariaAtomic]=\"item.ariaAtomic\"\n [ariaAutocomplete]=\"item.ariaAutocomplete\"\n [ariaBraillelabel]=\"item.ariaBraillelabel\"\n [ariaBrailleroledescription]=\"item.ariaBrailleroledescription\"\n [ariaColcount]=\"item.ariaColcount\"\n [ariaColindex]=\"item.ariaColindex\"\n [ariaColindextext]=\"item.ariaColindextext\"\n [ariaColspan]=\"item.ariaColspan\"\n [ariaDescription]=\"item.ariaDescription\"\n [ariaDetails]=\"item.ariaDetails\"\n [ariaFlowto]=\"item.ariaFlowto\"\n [ariaInvalid]=\"item.ariaInvalid\"\n [ariaKeyshortcuts]=\"item.ariaKeyshortcuts\"\n [ariaOwns]=\"item.ariaOwns\"\n [ariaRelevant]=\"item.ariaRelevant\"\n [ariaRoledescription]=\"item.ariaRoledescription\"\n [ariaRowcount]=\"item.ariaRowcount\"\n [ariaRowindex]=\"item.ariaRowindex\"\n [ariaRowindextext]=\"item.ariaRowindextext\"\n [ariaRowspan]=\"item.ariaRowspan\"\n [tabindex]=\"item.tabindex\"\n [title]=\"item.title\"\n [alt]=\"item.alt\"\n [lang]=\"item.lang\"\n [accesskey]=\"item.accesskey\"\n [autocomplete]=\"item.autocomplete\"\n [autofocus]=\"item.autofocus\"\n [contenteditable]=\"item.contenteditable\"\n [dir]=\"item.dir\"\n [draggable]=\"item.draggable\"\n [enterkeyhint]=\"item.enterkeyhint\"\n [hidden]=\"item.hidden\"\n [inputmode]=\"item.inputmode\"\n [spellcheck]=\"item.spellcheck\"\n [translate]=\"item.translate\"\n [ariaMultiline]=\"item.ariaMultiline\"\n [for]=\"item.for\"\n [form]=\"item.form\"\n [headers]=\"item.headers\"\n [placeholder]=\"item.placeholder\"\n [readonly]=\"item.readonly\"\n [required]=\"item.required\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </desy-menu-navigation-item>\n </ng-container>\n</desy-menu-navigation>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "component", type: MenuNavigationComponent, selector: "desy-menu-navigation", inputs: ["idPrefix", "items", "classes", "id"], outputs: ["itemsChange", "activeItemChange", "activeSubItemChange"] }, { kind: "component", type: MenuNavigationItemComponent, selector: "desy-menu-navigation-item", inputs: ["href", "fragment", "routerLink", "routerLinkActiveClasses", "target", "text", "html", "id", "expanded", "divider", "disabled", "sub", "classes", "titleModal", "active", "headerMode"], outputs: ["selected"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
8308
8305
|
}
|
|
8309
8306
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: HeaderNavigationComponent, decorators: [{
|
|
8310
8307
|
type: Component,
|
|
8311
|
-
args: [{ selector: 'desy-header-navigation, desy-header-advanced-navigation', standalone: false, template: "<desy-menu-navigation\n [classes]=\"classes ? classes : 'hidden lg:block'\"\n [idPrefix]=\"idPrefix ? idPrefix : 'header-nav-item'\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngFor=\"let item of getItems(); index as i\">\n <!-- routerlink -->\n <desy-menu-navigation-item\n *ngIf=\"item.routerLink || !item.href\"\n [id]=\"getItemId(item, i)\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [
|
|
8308
|
+
args: [{ selector: 'desy-header-navigation, desy-header-advanced-navigation', standalone: false, template: "<desy-menu-navigation\n [classes]=\"classes ? classes : 'hidden lg:block'\"\n [idPrefix]=\"idPrefix ? idPrefix : 'header-nav-item'\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngFor=\"let item of getItems(); index as i\">\n <!-- routerlink -->\n <desy-menu-navigation-item\n [headerMode]=\"true\"\n *ngIf=\"item.routerLink || !item.href\"\n [id]=\"getItemId(item, i)\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [routerLinkActiveClasses]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [classes]=\"['c-menu-navigation__button--header -mr-base ', i === 0 ? 'ml-sm' : ''] | makeHtmlList\"\n [role]=\"item.role\"\n [ariaLabel]=\"item.ariaLabel\"\n [ariaDescribedBy]=\"item.ariaDescribedBy\"\n [ariaLabelledBy]=\"item.ariaLabelledBy\"\n [ariaHidden]=\"item.ariaHidden\"\n [ariaDisabled]=\"item.ariaDisabled\"\n [ariaControls]=\"item.ariaControls\"\n [ariaCurrent]=\"item.ariaCurrent\"\n [ariaLive]=\"item.ariaLive\"\n [ariaExpanded]=\"item.ariaExpanded\"\n [ariaErrorMessage]=\"item.ariaErrorMessage\"\n [ariaHasPopup]=\"item.ariaHasPopup\"\n [ariaModal]=\"item.ariaModal\"\n [ariaChecked]=\"item.ariaChecked\"\n [ariaPressed]=\"item.ariaPressed\"\n [ariaReadonly]=\"item.ariaReadonly\"\n [ariaRequired]=\"item.ariaRequired\"\n [ariaSelected]=\"item.ariaSelected\"\n [ariaValuemin]=\"item.ariaValuemin\"\n [ariaValuemax]=\"item.ariaValuemax\"\n [ariaValuenow]=\"item.ariaValuenow\"\n [ariaValuetext]=\"item.ariaValuetext\"\n [ariaOrientation]=\"item.ariaOrientation\"\n [ariaLevel]=\"item.ariaLevel\"\n [ariaMultiselectable]=\"item.ariaMultiselectable\"\n [ariaPlaceholder]=\"item.ariaPlaceholder\"\n [ariaPosinset]=\"item.ariaPosinset\"\n [ariaSetsize]=\"item.ariaSetsize\"\n [ariaSort]=\"item.ariaSort\"\n [ariaBusy]=\"item.ariaBusy\"\n [ariaActivedescendant]=\"item.ariaActivedescendant\"\n [ariaAtomic]=\"item.ariaAtomic\"\n [ariaAutocomplete]=\"item.ariaAutocomplete\"\n [ariaBraillelabel]=\"item.ariaBraillelabel\"\n [ariaBrailleroledescription]=\"item.ariaBrailleroledescription\"\n [ariaColcount]=\"item.ariaColcount\"\n [ariaColindex]=\"item.ariaColindex\"\n [ariaColindextext]=\"item.ariaColindextext\"\n [ariaColspan]=\"item.ariaColspan\"\n [ariaDescription]=\"item.ariaDescription\"\n [ariaDetails]=\"item.ariaDetails\"\n [ariaFlowto]=\"item.ariaFlowto\"\n [ariaInvalid]=\"item.ariaInvalid\"\n [ariaKeyshortcuts]=\"item.ariaKeyshortcuts\"\n [ariaOwns]=\"item.ariaOwns\"\n [ariaRelevant]=\"item.ariaRelevant\"\n [ariaRoledescription]=\"item.ariaRoledescription\"\n [ariaRowcount]=\"item.ariaRowcount\"\n [ariaRowindex]=\"item.ariaRowindex\"\n [ariaRowindextext]=\"item.ariaRowindextext\"\n [ariaRowspan]=\"item.ariaRowspan\"\n [tabindex]=\"item.tabindex\"\n [title]=\"item.title\"\n [alt]=\"item.alt\"\n [lang]=\"item.lang\"\n [accesskey]=\"item.accesskey\"\n [autocomplete]=\"item.autocomplete\"\n [autofocus]=\"item.autofocus\"\n [contenteditable]=\"item.contenteditable\"\n [dir]=\"item.dir\"\n [draggable]=\"item.draggable\"\n [enterkeyhint]=\"item.enterkeyhint\"\n [hidden]=\"item.hidden\"\n [inputmode]=\"item.inputmode\"\n [spellcheck]=\"item.spellcheck\"\n [translate]=\"item.translate\"\n [ariaMultiline]=\"item.ariaMultiline\"\n [for]=\"item.for\"\n [form]=\"item.form\"\n [headers]=\"item.headers\"\n [placeholder]=\"item.placeholder\"\n [readonly]=\"item.readonly\"\n [required]=\"item.required\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </desy-menu-navigation-item>\n <!-- href -->\n <desy-menu-navigation-item\n [headerMode]=\"true\"\n *ngIf=\"!item.routerLink && item.href\"\n [id]=\"getItemId(item, i)\"\n [href]=\"item.href\"\n [target]=\"item.target\"\n [active]=\"item.active\"\n [classes]=\"['c-menu-navigation__button--header -mr-base ', i === 0 ? 'ml-sm' : ''] | makeHtmlList\"\n [role]=\"item.role\"\n [ariaLabel]=\"item.ariaLabel\"\n [ariaDescribedBy]=\"item.ariaDescribedBy\"\n [ariaLabelledBy]=\"item.ariaLabelledBy\"\n [ariaHidden]=\"item.ariaHidden\"\n [ariaDisabled]=\"item.ariaDisabled\"\n [ariaControls]=\"item.ariaControls\"\n [ariaCurrent]=\"item.ariaCurrent\"\n [ariaLive]=\"item.ariaLive\"\n [ariaExpanded]=\"item.ariaExpanded\"\n [ariaErrorMessage]=\"item.ariaErrorMessage\"\n [ariaHasPopup]=\"item.ariaHasPopup\"\n [ariaModal]=\"item.ariaModal\"\n [ariaChecked]=\"item.ariaChecked\"\n [ariaPressed]=\"item.ariaPressed\"\n [ariaReadonly]=\"item.ariaReadonly\"\n [ariaRequired]=\"item.ariaRequired\"\n [ariaSelected]=\"item.ariaSelected\"\n [ariaValuemin]=\"item.ariaValuemin\"\n [ariaValuemax]=\"item.ariaValuemax\"\n [ariaValuenow]=\"item.ariaValuenow\"\n [ariaValuetext]=\"item.ariaValuetext\"\n [ariaOrientation]=\"item.ariaOrientation\"\n [ariaLevel]=\"item.ariaLevel\"\n [ariaMultiselectable]=\"item.ariaMultiselectable\"\n [ariaPlaceholder]=\"item.ariaPlaceholder\"\n [ariaPosinset]=\"item.ariaPosinset\"\n [ariaSetsize]=\"item.ariaSetsize\"\n [ariaSort]=\"item.ariaSort\"\n [ariaBusy]=\"item.ariaBusy\"\n [ariaActivedescendant]=\"item.ariaActivedescendant\"\n [ariaAtomic]=\"item.ariaAtomic\"\n [ariaAutocomplete]=\"item.ariaAutocomplete\"\n [ariaBraillelabel]=\"item.ariaBraillelabel\"\n [ariaBrailleroledescription]=\"item.ariaBrailleroledescription\"\n [ariaColcount]=\"item.ariaColcount\"\n [ariaColindex]=\"item.ariaColindex\"\n [ariaColindextext]=\"item.ariaColindextext\"\n [ariaColspan]=\"item.ariaColspan\"\n [ariaDescription]=\"item.ariaDescription\"\n [ariaDetails]=\"item.ariaDetails\"\n [ariaFlowto]=\"item.ariaFlowto\"\n [ariaInvalid]=\"item.ariaInvalid\"\n [ariaKeyshortcuts]=\"item.ariaKeyshortcuts\"\n [ariaOwns]=\"item.ariaOwns\"\n [ariaRelevant]=\"item.ariaRelevant\"\n [ariaRoledescription]=\"item.ariaRoledescription\"\n [ariaRowcount]=\"item.ariaRowcount\"\n [ariaRowindex]=\"item.ariaRowindex\"\n [ariaRowindextext]=\"item.ariaRowindextext\"\n [ariaRowspan]=\"item.ariaRowspan\"\n [tabindex]=\"item.tabindex\"\n [title]=\"item.title\"\n [alt]=\"item.alt\"\n [lang]=\"item.lang\"\n [accesskey]=\"item.accesskey\"\n [autocomplete]=\"item.autocomplete\"\n [autofocus]=\"item.autofocus\"\n [contenteditable]=\"item.contenteditable\"\n [dir]=\"item.dir\"\n [draggable]=\"item.draggable\"\n [enterkeyhint]=\"item.enterkeyhint\"\n [hidden]=\"item.hidden\"\n [inputmode]=\"item.inputmode\"\n [spellcheck]=\"item.spellcheck\"\n [translate]=\"item.translate\"\n [ariaMultiline]=\"item.ariaMultiline\"\n [for]=\"item.for\"\n [form]=\"item.form\"\n [headers]=\"item.headers\"\n [placeholder]=\"item.placeholder\"\n [readonly]=\"item.readonly\"\n [required]=\"item.required\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </desy-menu-navigation-item>\n </ng-container>\n</desy-menu-navigation>\n" }]
|
|
8312
8309
|
}], propDecorators: { idPrefix: [{
|
|
8313
8310
|
type: Input
|
|
8314
8311
|
}], classes: [{
|
|
@@ -8659,11 +8656,11 @@ class NavComponent extends AccessibilityComponent {
|
|
|
8659
8656
|
return !item.active && !item.disabled;
|
|
8660
8657
|
}
|
|
8661
8658
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
8662
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NavComponent, isStandalone: false, selector: "desy-nav", inputs: { hasNav: "hasNav", id: "id", idPrefix: "idPrefix", items: "items", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, queries: [{ propertyName: "itemComponentList", predicate: NavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #innerHtml>\n <ng-container *ngFor=\"let item of getItemList(); index as i\">\n <ng-template #noStrong>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n <li>\n <a\n *ngIf=\"item.href\"\n [href]=\"item.href | externalHref\"\n [target]=\"item.target\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!item.href\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"item.divider\"\n class=\"my-sm border-b border-neutral-base\"\n aria-hidden=\"true\">\n <div class=\"sr-only\">Separador</div>\n </li>\n </ng-container>\n</ng-template>\n\n<ul\n *ngIf=\"!hasNav; else wrapIntoNav\"\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n <nav\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [id]=\"id\"\n [desyAppAccessibility]=\"this\">\n <ul>\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n </ul>\n </nav>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: ExternalHrefPipe, name: "externalHref" }] }); }
|
|
8659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: NavComponent, isStandalone: false, selector: "desy-nav", inputs: { hasNav: "hasNav", id: "id", idPrefix: "idPrefix", items: "items", classes: "classes" }, outputs: { clickEvent: "clickEvent" }, queries: [{ propertyName: "itemComponentList", predicate: NavItemComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #innerHtml>\n <ng-container *ngFor=\"let item of getItemList(); index as i\">\n <ng-template #noStrong>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n <li>\n <a\n *ngIf=\"item.href\"\n [href]=\"item.href | externalHref\"\n [target]=\"item.target\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!item.href\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"item.divider\"\n class=\"my-sm border-b border-neutral-base\"\n role=\"none\"\n aria-hidden=\"true\">\n <div class=\"sr-only\">Separador</div>\n </li>\n </ng-container>\n</ng-template>\n\n<ul\n *ngIf=\"!hasNav; else wrapIntoNav\"\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n <nav\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [id]=\"id\"\n [desyAppAccessibility]=\"this\">\n <ul>\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n </ul>\n </nav>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }, { kind: "pipe", type: ExternalHrefPipe, name: "externalHref" }] }); }
|
|
8663
8660
|
}
|
|
8664
8661
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NavComponent, decorators: [{
|
|
8665
8662
|
type: Component,
|
|
8666
|
-
args: [{ selector: 'desy-nav', standalone: false, template: "<ng-template #innerHtml>\n <ng-container *ngFor=\"let item of getItemList(); index as i\">\n <ng-template #noStrong>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n <li>\n <a\n *ngIf=\"item.href\"\n [href]=\"item.href | externalHref\"\n [target]=\"item.target\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!item.href\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"item.divider\"\n class=\"my-sm border-b border-neutral-base\"\n aria-hidden=\"true\">\n <div class=\"sr-only\">Separador</div>\n </li>\n </ng-container>\n</ng-template>\n\n<ul\n *ngIf=\"!hasNav; else wrapIntoNav\"\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n <nav\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [id]=\"id\"\n [desyAppAccessibility]=\"this\">\n <ul>\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n </ul>\n </nav>\n</ng-template>\n" }]
|
|
8663
|
+
args: [{ selector: 'desy-nav', standalone: false, template: "<ng-template #innerHtml>\n <ng-container *ngFor=\"let item of getItemList(); index as i\">\n <ng-template #noStrong>\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </ng-template>\n <li>\n <a\n *ngIf=\"item.href\"\n [href]=\"item.href | externalHref\"\n [target]=\"item.target\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n <a\n *ngIf=\"!item.href\"\n [routerLink]=\"item.routerLink\"\n [fragment]=\"item.fragment\"\n [routerLinkActive]=\"item.routerLinkActiveClasses ? item.routerLinkActiveClasses : []\"\n [class]=\"\n [\n 'flex items-center px-base py-sm hover:bg-primary-base hover:text-white focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black',\n item.classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'pointer-events-none': item.disabled }\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n [attr.tabindex]=\"item.disabled ? -1 : item.tabindex\"\n [attr.id]=\"getItemId(item, i)\"\n [desyAppAccessibility]=\"item\"\n [attr.aria-current]=\"item.active ? 'page' : item.ariaCurrent ? item.ariaCurrent : null\"\n (keydown.arrowUp)=\"movePrevious($event, i)\"\n (keydown.arrowDown)=\"moveNext($event, i)\"\n (click)=\"onClick($event, item)\"\n (keydown.space)=\"simulateClick($event, item, i)\"\n (keydown.enter)=\"simulateClick($event, item, i)\">\n <strong\n class=\"font-bold\"\n *ngIf=\"item.active; else noStrong\">\n <ng-container *desyCustomInnerContent=\"{ component: item, html: item.html, text: item.text }\"></ng-container>\n </strong>\n <svg\n *ngIf=\"item.disabled\"\n viewBox=\"0 0 140 140\"\n height=\"1em\"\n width=\"1em\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"inline-block align-middle flex-initial ml-sm text-neutral-base fill-current\"\n aria-hidden=\"true\"\n focusable=\"false\">\n <path\n d=\"M70 0a70 70 0 1070 70A70.08 70.08 0 0070 0zM20 70a50 50 0 0174.8-43.4 2.51 2.51 0 011.23 1.84 2.48 2.48 0 01-.71 2.1L30.54 95.32a2.51 2.51 0 01-3.94-.52A49.63 49.63 0 0120 70zm100 0a50 50 0 01-74.8 43.4 2.51 2.51 0 01-1.23-1.84 2.48 2.48 0 01.71-2.1l64.78-64.78a2.51 2.51 0 013.94.52A49.63 49.63 0 01120 70z\" />\n </svg>\n </a>\n </li>\n <li\n *ngIf=\"item.divider\"\n class=\"my-sm border-b border-neutral-base\"\n role=\"none\"\n aria-hidden=\"true\">\n <div class=\"sr-only\">Separador</div>\n </li>\n </ng-container>\n</ng-template>\n\n<ul\n *ngIf=\"!hasNav; else wrapIntoNav\"\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n</ul>\n<ng-template #wrapIntoNav>\n <nav\n [class]=\"['text-sm', classes] | makeHtmlList\"\n [id]=\"id\"\n [desyAppAccessibility]=\"this\">\n <ul>\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n </ul>\n </nav>\n</ng-template>\n" }]
|
|
8667
8664
|
}], propDecorators: { hasNav: [{
|
|
8668
8665
|
type: Input
|
|
8669
8666
|
}], id: [{
|
|
@@ -11379,6 +11376,12 @@ class TableAdvancedComponent extends AccessibilityComponent {
|
|
|
11379
11376
|
this.selectAllPages = true;
|
|
11380
11377
|
this.totalItems = 0;
|
|
11381
11378
|
this.usePagination = false;
|
|
11379
|
+
/* allowFilterAndOrder -> Se ha añadido a peticion de XFILES por limitaciones del backend
|
|
11380
|
+
y por querer usar la ordenacion que tenemos a nivel interno. Basicamente es usar el filtro
|
|
11381
|
+
y la ordenacion como si el parametro usePagination fuese false. Seguramente se borre en proximas
|
|
11382
|
+
versiones asi que no se recomienda su uso.
|
|
11383
|
+
*/
|
|
11384
|
+
this.allowFilterAndOrder = false;
|
|
11382
11385
|
this.useFullWorld = false;
|
|
11383
11386
|
this.rowsCheckedInside = {};
|
|
11384
11387
|
this.numberOfSelectedRows = 0;
|
|
@@ -11424,7 +11427,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
|
|
|
11424
11427
|
this.visibleRows = this.getRows();
|
|
11425
11428
|
this.changeDetector.detectChanges();
|
|
11426
11429
|
// Se aplica el filtro y la ordenación
|
|
11427
|
-
if (!this.usePagination) {
|
|
11430
|
+
if (!this.usePagination || this.allowFilterAndOrder) {
|
|
11428
11431
|
let rowData = this.filterRows(recalculateParams, this.rowData.toArray());
|
|
11429
11432
|
rowData = this.sortRows(recalculateParams, rowData);
|
|
11430
11433
|
this.visibleRows = rowData.map((r) => r.desyRow);
|
|
@@ -11723,7 +11726,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
|
|
|
11723
11726
|
}
|
|
11724
11727
|
});
|
|
11725
11728
|
}
|
|
11726
|
-
if (this.usePagination) {
|
|
11729
|
+
if (this.usePagination && !this.allowFilterAndOrder) {
|
|
11727
11730
|
this.sortBy.emit({ id: index, order: order });
|
|
11728
11731
|
this.uncheckAll();
|
|
11729
11732
|
}
|
|
@@ -11847,7 +11850,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
|
|
|
11847
11850
|
}
|
|
11848
11851
|
}
|
|
11849
11852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableAdvancedComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableAdvancedComponent, isStandalone: false, selector: "desy-table-advanced", inputs: { rows: "rows", head: "head", foot: "foot", caption: "caption", captionClasses: "captionClasses", firstCellIsHeader: "firstCellIsHeader", hasCheckboxes: "hasCheckboxes", idPrefix: "idPrefix", classes: "classes", checkboxClasses: "checkboxClasses", id: "id", wrapper: "wrapper", selectAllPages: "selectAllPages", totalItems: "totalItems", usePagination: "usePagination" }, outputs: { rowsChange: "rowsChange", rowsChecked: "rowsChecked", allRowsChecked: "allRowsChecked", recalculateTable: "recalculateTable", filterBy: "filterBy", selectedBy: "selectedBy", sortBy: "sortBy", rowsUnChecked: "rowsUnChecked" }, queries: [{ propertyName: "captionComponent", predicate: TableCaptionComponent }, { propertyName: "headerComponent", predicate: TableAdvancedHeaderComponent }, { propertyName: "footerComponent", predicate: TableAdvancedFooterComponent }, { propertyName: "rowComponentList", predicate: TableAdvancedRowComponent }], viewQueries: [{ propertyName: "checkboxComponent", first: true, predicate: ["checkbox"], descendants: true }, { propertyName: "rowData", predicate: RowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #tableContent>\n <div\n *ngIf=\"hasCheckboxes\"\n class=\"lg:flex lg:flex-wrap lg:w-full\"\n aria-labelledby=\"acciones-entradas\">\n <h3\n id=\"acciones-entradas\"\n class=\"sr-only\">\n Selecci\u00F3n m\u00FAltiple y Acciones sobre el listado de entradas\n </h3>\n <div\n id=\"selection-home\"\n class=\"pt-2 pb-0 pl-4 mt-0 lg:flex sm:flex-1 py-base\">\n <div class=\"h-10\">\n <desy-checkboxes name=\"todos-entradas-chbx\">\n <desy-checkbox-item\n #checkbox\n value=\"item-checkbox\"\n name=\"todos-entradas\"\n (checkedChange)=\"checkUncheckAll()\"\n [isIndeterminate]=\"true\"\n classes=\"c-checkboxes--sm\">\n <div class=\"pt-0.5 leading-5\">\n <label class=\"block -mt-1 text-sm ng-star-inserted\">\n {{ selectAllPages ? 'Seleccionar todo' : 'Seleccionar todos los items de esta p\u00E1gina' }}\n </label>\n </div>\n </desy-checkbox-item>\n </desy-checkboxes>\n </div>\n </div>\n <ng-content\n select=\":not(desy-table-advanced-header):not(desy-table-advanced-row):not(desy-table-advanced-footer):not(desy-table-caption)\"></ng-content>\n </div>\n <table\n role=\"grid\"\n [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n [attr.id]=\"id ? id : null\"\n aria-readonly=\"true\"\n [desyAppAccessibility]=\"this\">\n <caption\n *ngIf=\"caption || captionComponent\"\n [class]=\"getCaptionClass()\">\n <ng-container\n *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n </caption>\n <thead *ngIf=\"getHeaderCells()\">\n <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n <th\n *ngIf=\"hasCheckboxes\"\n scope=\"col\"\n [class]=\"['align-top px-base py-xs', 'w-16', checkboxClasses] | makeHtmlList\">\n <span class=\"sr-only\">Seleccionar fila</span>\n </th>\n <th\n scope=\"col\"\n *ngFor=\"let item of getHeaderCells(); index as iHeader\"\n [id]=\"getIdHeader(iHeader)\"\n [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\n [class]=\"\n [\n 'align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \"\n [attr.colspan]=\"item.colspan ? item.colspan : null\"\n [attr.rowspan]=\"item.rowspan ? item.rowspan : null\"\n [desyAppAccessibility]=\"item\">\n <span\n *ngIf=\"item.orderBy\"\n class=\"inline-block relative\"\n (click)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.enter)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.space)=\"handleSortByColumn(iHeader, $event)\"\n desyFocusClickedCell\n [attr.tabindex]=\"item.orderBy ? -1 : null\"\n [attr.role]=\"item.orderBy ? 'button' : null\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n <span\n class=\"c-table-advanced__order\"\n *ngIf=\"item.orderBy\">\n <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n <span\n class=\"c-table-advanced__ascending\"\n *ngIf=\"item.orderBy === orderByType.asc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__descending\"\n *ngIf=\"item.orderBy === orderByType.desc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__none\"\n *ngIf=\"item.orderBy === orderByType.none\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n class=\"text-neutral-dark\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n </span>\n </span>\n\n <span\n *ngIf=\"!item.orderBy\"\n class=\"inline-block relative\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr\n class=\"divide-x divide-neutral-base\"\n *ngIf=\"hasFilters()\">\n <td\n *ngIf=\"hasCheckboxes\"\n [ngClass]=\"checkboxClasses\"></td>\n <td\n tabindex=\"-1\"\n *ngFor=\"let item of getHeaderCells(); index as iHead\"\n desyFocusClickedCell\n [class]=\"\n [\n 'align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \">\n <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n <ng-container\n *ngTemplateOutlet=\"tableSelect; context: { selectable: getSelectForItem(item) }\"></ng-container>\n <ng-template\n #tableSelect\n let-selectable=\"selectable\">\n <desy-select\n [id]=\"getIdHeaderSelect(iHead)\"\n [labelData]=\"{\n text: item.filterText ? item.filterText : 'Filtrar en esta columna',\n classes: 'sr-only',\n }\"\n [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full'\"\n [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : '-mt-sm mb-0'\"\n [name]=\"selectable.name\"\n [items]=\"getItemSelectOptions(selectable)\"\n [disabled]=\"selectable.disabled\"\n [describedBy]=\"getIdHeaderSelect(iHead)\"\n [(ngModel)]=\"item.valueSelect\"\n (ngModelChange)=\"usePagination ? handleButtonSearch(item) : handleInputSearch(item, true)\"\n [role]=\"selectable.role\"\n [ariaLabel]=\"selectable.ariaLabel\"\n [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n [ariaHidden]=\"selectable.ariaHidden\"\n [ariaDisabled]=\"selectable.ariaDisabled\"\n [ariaControls]=\"selectable.ariaControls\"\n [ariaCurrent]=\"selectable.ariaCurrent\"\n [ariaLive]=\"selectable.ariaLive\"\n [ariaExpanded]=\"selectable.ariaExpanded\"\n [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n [ariaHasPopup]=\"selectable.ariaHasPopup\"\n [tabindex]=\"selectable.tabindex\"></desy-select>\n </ng-template>\n </ng-container>\n\n <div\n *ngIf=\"item.hasSelect && item.hasFilter\"\n class=\"pb-sm\"></div>\n\n <desy-search-bar\n *ngIf=\"item.hasFilter\"\n [(ngModel)]=\"item.valueFilter\"\n [ngModelOptions]=\"{ standalone: true }\"\n (clickEvent)=\"usePagination ? handleButtonSearch(item) : null\"\n (ngModelChange)=\"!usePagination ? handleInputSearch(item, false) : null\"\n [labelText]=\"item.filterText ? item.filterText : 'Filtrar en esta columna'\"\n [id]=\"getIdHeaderFilter(iHead)\"\n [placeholder]=\"item.filterText ? item.filterText : 'Filtrar'\"\n [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n buttonClasses=\"m-xs p-0.5 text-xs\"\n [describedBy]=\"getIdHeader(iHead)\"></desy-search-bar>\n </td>\n </tr>\n\n <tr\n *ngFor=\"let row of getVisibleRows(); index as iRow\"\n class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n [desyRow]=\"row\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"row.checked\"\n (ngModelChange)=\"handleCheckboxChange(row)\"\n [id]=\"getIdRowCheckbox(iRow)\"\n [name]=\"getIdRowCheckbox(iRow)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iRow)\">\n Selecciona fila {{ this.hasFilters() ? iRow + 1 : iRow }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tbody>\n\n <tfoot *ngIf=\"getFooterCells()\">\n <tr\n *ngFor=\"let foot of getFooterCells(); index as iFooter\"\n class=\"border-t-2 border-b border-neutral-base hover:bg-neutral-lighter\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"foot.checked\"\n (ngModelChange)=\"handleCheckboxChange(foot)\"\n [id]=\"getIdRowCheckbox(iFooter)\"\n [name]=\"getIdRowCheckbox(iFooter)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iFooter)\">\n Selecciona fila {{ iFooter }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of foot.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tfoot>\n </table>\n</ng-template>\n\n<div\n *ngIf=\"wrapper; else tableContent\"\n [class]=\"wrapper.classes\">\n <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "component", type: SelectComponent, selector: "desy-select", inputs: ["name", "items", "describedBy", "formGroupClasses", "classes"] }, { kind: "component", type: CheckboxesComponent, selector: "desy-checkboxes", inputs: ["fieldsetData", "legendRef", "legendData", "legendText", "idPrefix", "name", "items", "formGroupClasses", "hasDividers", "hasError", "classes", "describedBy"], outputs: ["itemsChange"] }, { kind: "component", type: CheckboxItemComponent, selector: "desy-checkbox-item", inputs: ["id", "value", "name", "conditional", "disabled", "isIndeterminate", "indeterminateChecked", "classes", "checked"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: SearchBarComponent, selector: "desy-search-bar", inputs: ["describedBy", "classes", "buttonClasses"], outputs: ["clickEvent"] }, { kind: "directive", type: FocusClickedCellDirective, selector: "[desyFocusClickedCell]" }, { kind: "directive", type: CellDirective, selector: "[desyCell]", inputs: ["row", "rowIndex", "columnIndex"] }, { kind: "directive", type: RowDirective, selector: "[desyRow]", inputs: ["desyRow"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
11853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: TableAdvancedComponent, isStandalone: false, selector: "desy-table-advanced", inputs: { rows: "rows", head: "head", foot: "foot", caption: "caption", captionClasses: "captionClasses", firstCellIsHeader: "firstCellIsHeader", hasCheckboxes: "hasCheckboxes", idPrefix: "idPrefix", classes: "classes", checkboxClasses: "checkboxClasses", id: "id", wrapper: "wrapper", selectAllPages: "selectAllPages", totalItems: "totalItems", usePagination: "usePagination", allowFilterAndOrder: "allowFilterAndOrder" }, outputs: { rowsChange: "rowsChange", rowsChecked: "rowsChecked", allRowsChecked: "allRowsChecked", recalculateTable: "recalculateTable", filterBy: "filterBy", selectedBy: "selectedBy", sortBy: "sortBy", rowsUnChecked: "rowsUnChecked" }, queries: [{ propertyName: "captionComponent", predicate: TableCaptionComponent }, { propertyName: "headerComponent", predicate: TableAdvancedHeaderComponent }, { propertyName: "footerComponent", predicate: TableAdvancedFooterComponent }, { propertyName: "rowComponentList", predicate: TableAdvancedRowComponent }], viewQueries: [{ propertyName: "checkboxComponent", first: true, predicate: ["checkbox"], descendants: true }, { propertyName: "rowData", predicate: RowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #tableContent>\n <div\n *ngIf=\"hasCheckboxes\"\n class=\"lg:flex lg:flex-wrap lg:w-full\"\n aria-labelledby=\"acciones-entradas\">\n <h3\n id=\"acciones-entradas\"\n class=\"sr-only\">\n Selecci\u00F3n m\u00FAltiple y Acciones sobre el listado de entradas\n </h3>\n <div\n id=\"selection-home\"\n class=\"pt-2 pb-0 pl-4 mt-0 lg:flex sm:flex-1 py-base\">\n <div class=\"h-10\">\n <desy-checkboxes name=\"todos-entradas-chbx\">\n <desy-checkbox-item\n #checkbox\n value=\"item-checkbox\"\n name=\"todos-entradas\"\n (checkedChange)=\"checkUncheckAll()\"\n [isIndeterminate]=\"true\"\n classes=\"c-checkboxes--sm\">\n <div class=\"pt-0.5 leading-5\">\n <label class=\"block -mt-1 text-sm ng-star-inserted\">\n {{ selectAllPages ? 'Seleccionar todo' : 'Seleccionar todos los items de esta p\u00E1gina' }}\n </label>\n </div>\n </desy-checkbox-item>\n </desy-checkboxes>\n </div>\n </div>\n <ng-content\n select=\":not(desy-table-advanced-header):not(desy-table-advanced-row):not(desy-table-advanced-footer):not(desy-table-caption)\"></ng-content>\n </div>\n <table\n role=\"grid\"\n [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n [attr.id]=\"id ? id : null\"\n aria-readonly=\"true\"\n [desyAppAccessibility]=\"this\">\n <caption\n *ngIf=\"caption || captionComponent\"\n [class]=\"getCaptionClass()\">\n <ng-container\n *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n </caption>\n <thead *ngIf=\"getHeaderCells()\">\n <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n <th\n *ngIf=\"hasCheckboxes\"\n scope=\"col\"\n [class]=\"['align-top px-base py-xs', 'w-16', checkboxClasses] | makeHtmlList\">\n <span class=\"sr-only\">Seleccionar fila</span>\n </th>\n <th\n scope=\"col\"\n *ngFor=\"let item of getHeaderCells(); index as iHeader\"\n [id]=\"getIdHeader(iHeader)\"\n [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\n [class]=\"\n [\n 'align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \"\n [attr.colspan]=\"item.colspan ? item.colspan : null\"\n [attr.rowspan]=\"item.rowspan ? item.rowspan : null\"\n [desyAppAccessibility]=\"item\">\n <span\n *ngIf=\"item.orderBy\"\n class=\"inline-block relative\"\n (click)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.enter)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.space)=\"handleSortByColumn(iHeader, $event)\"\n desyFocusClickedCell\n [attr.tabindex]=\"item.orderBy ? -1 : null\"\n [attr.role]=\"item.orderBy ? 'button' : null\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n <span\n class=\"c-table-advanced__order\"\n *ngIf=\"item.orderBy\">\n <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n <span\n class=\"c-table-advanced__ascending\"\n *ngIf=\"item.orderBy === orderByType.asc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__descending\"\n *ngIf=\"item.orderBy === orderByType.desc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__none\"\n *ngIf=\"item.orderBy === orderByType.none\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n class=\"text-neutral-dark\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n </span>\n </span>\n\n <span\n *ngIf=\"!item.orderBy\"\n class=\"inline-block relative\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr\n class=\"divide-x divide-neutral-base\"\n *ngIf=\"hasFilters()\">\n <td\n *ngIf=\"hasCheckboxes\"\n [ngClass]=\"checkboxClasses\"></td>\n <td\n tabindex=\"-1\"\n *ngFor=\"let item of getHeaderCells(); index as iHead\"\n desyFocusClickedCell\n [class]=\"\n [\n 'align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \">\n <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n <ng-container\n *ngTemplateOutlet=\"tableSelect; context: { selectable: getSelectForItem(item) }\"></ng-container>\n <ng-template\n #tableSelect\n let-selectable=\"selectable\">\n <desy-select\n [id]=\"getIdHeaderSelect(iHead)\"\n [labelData]=\"{\n text: item.filterText ? item.filterText : 'Filtrar en esta columna',\n classes: 'sr-only',\n }\"\n [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full'\"\n [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : '-mt-sm mb-0'\"\n [name]=\"selectable.name\"\n [items]=\"getItemSelectOptions(selectable)\"\n [disabled]=\"selectable.disabled\"\n [describedBy]=\"getIdHeaderSelect(iHead)\"\n [(ngModel)]=\"item.valueSelect\"\n (ngModelChange)=\"usePagination ? handleButtonSearch(item) : handleInputSearch(item, true)\"\n [role]=\"selectable.role\"\n [ariaLabel]=\"selectable.ariaLabel\"\n [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n [ariaHidden]=\"selectable.ariaHidden\"\n [ariaDisabled]=\"selectable.ariaDisabled\"\n [ariaControls]=\"selectable.ariaControls\"\n [ariaCurrent]=\"selectable.ariaCurrent\"\n [ariaLive]=\"selectable.ariaLive\"\n [ariaExpanded]=\"selectable.ariaExpanded\"\n [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n [ariaHasPopup]=\"selectable.ariaHasPopup\"\n [tabindex]=\"selectable.tabindex\"></desy-select>\n </ng-template>\n </ng-container>\n\n <div\n *ngIf=\"item.hasSelect && item.hasFilter\"\n class=\"pb-sm\"></div>\n\n <desy-search-bar\n *ngIf=\"item.hasFilter\"\n [(ngModel)]=\"item.valueFilter\"\n [ngModelOptions]=\"{ standalone: true }\"\n (clickEvent)=\"usePagination && !allowFilterAndOrder ? handleButtonSearch(item) : null\"\n (ngModelChange)=\"!usePagination || allowFilterAndOrder ? handleInputSearch(item, false) : null\"\n [labelText]=\"item.filterText ? item.filterText : 'Filtrar en esta columna'\"\n [id]=\"getIdHeaderFilter(iHead)\"\n [placeholder]=\"item.filterText ? item.filterText : 'Filtrar'\"\n [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n buttonClasses=\"m-xs p-0.5 text-xs\"\n [describedBy]=\"getIdHeader(iHead)\"></desy-search-bar>\n </td>\n </tr>\n\n <tr\n *ngFor=\"let row of getVisibleRows(); index as iRow\"\n class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n [desyRow]=\"row\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"row.checked\"\n (ngModelChange)=\"handleCheckboxChange(row)\"\n [id]=\"getIdRowCheckbox(iRow)\"\n [name]=\"getIdRowCheckbox(iRow)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iRow)\">\n Selecciona fila {{ this.hasFilters() ? iRow + 1 : iRow }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tbody>\n\n <tfoot *ngIf=\"getFooterCells()\">\n <tr\n *ngFor=\"let foot of getFooterCells(); index as iFooter\"\n class=\"border-t-2 border-b border-neutral-base hover:bg-neutral-lighter\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"foot.checked\"\n (ngModelChange)=\"handleCheckboxChange(foot)\"\n [id]=\"getIdRowCheckbox(iFooter)\"\n [name]=\"getIdRowCheckbox(iFooter)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iFooter)\">\n Selecciona fila {{ iFooter }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of foot.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tfoot>\n </table>\n</ng-template>\n\n<div\n *ngIf=\"wrapper; else tableContent\"\n [class]=\"wrapper.classes\">\n <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility"] }, { kind: "component", type: SelectComponent, selector: "desy-select", inputs: ["name", "items", "describedBy", "formGroupClasses", "classes"] }, { kind: "component", type: CheckboxesComponent, selector: "desy-checkboxes", inputs: ["fieldsetData", "legendRef", "legendData", "legendText", "idPrefix", "name", "items", "formGroupClasses", "hasDividers", "hasError", "classes", "describedBy"], outputs: ["itemsChange"] }, { kind: "component", type: CheckboxItemComponent, selector: "desy-checkbox-item", inputs: ["id", "value", "name", "conditional", "disabled", "isIndeterminate", "indeterminateChecked", "classes", "checked"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: SearchBarComponent, selector: "desy-search-bar", inputs: ["describedBy", "classes", "buttonClasses"], outputs: ["clickEvent"] }, { kind: "directive", type: FocusClickedCellDirective, selector: "[desyFocusClickedCell]" }, { kind: "directive", type: CellDirective, selector: "[desyCell]", inputs: ["row", "rowIndex", "columnIndex"] }, { kind: "directive", type: RowDirective, selector: "[desyRow]", inputs: ["desyRow"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
11851
11854
|
}
|
|
11852
11855
|
__decorate([
|
|
11853
11856
|
DesyContentChild(),
|
|
@@ -11859,7 +11862,7 @@ __decorate([
|
|
|
11859
11862
|
], TableAdvancedComponent.prototype, "headerComponent", void 0);
|
|
11860
11863
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: TableAdvancedComponent, decorators: [{
|
|
11861
11864
|
type: Component,
|
|
11862
|
-
args: [{ selector: 'desy-table-advanced', standalone: false, template: "<ng-template #tableContent>\n <div\n *ngIf=\"hasCheckboxes\"\n class=\"lg:flex lg:flex-wrap lg:w-full\"\n aria-labelledby=\"acciones-entradas\">\n <h3\n id=\"acciones-entradas\"\n class=\"sr-only\">\n Selecci\u00F3n m\u00FAltiple y Acciones sobre el listado de entradas\n </h3>\n <div\n id=\"selection-home\"\n class=\"pt-2 pb-0 pl-4 mt-0 lg:flex sm:flex-1 py-base\">\n <div class=\"h-10\">\n <desy-checkboxes name=\"todos-entradas-chbx\">\n <desy-checkbox-item\n #checkbox\n value=\"item-checkbox\"\n name=\"todos-entradas\"\n (checkedChange)=\"checkUncheckAll()\"\n [isIndeterminate]=\"true\"\n classes=\"c-checkboxes--sm\">\n <div class=\"pt-0.5 leading-5\">\n <label class=\"block -mt-1 text-sm ng-star-inserted\">\n {{ selectAllPages ? 'Seleccionar todo' : 'Seleccionar todos los items de esta p\u00E1gina' }}\n </label>\n </div>\n </desy-checkbox-item>\n </desy-checkboxes>\n </div>\n </div>\n <ng-content\n select=\":not(desy-table-advanced-header):not(desy-table-advanced-row):not(desy-table-advanced-footer):not(desy-table-caption)\"></ng-content>\n </div>\n <table\n role=\"grid\"\n [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n [attr.id]=\"id ? id : null\"\n aria-readonly=\"true\"\n [desyAppAccessibility]=\"this\">\n <caption\n *ngIf=\"caption || captionComponent\"\n [class]=\"getCaptionClass()\">\n <ng-container\n *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n </caption>\n <thead *ngIf=\"getHeaderCells()\">\n <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n <th\n *ngIf=\"hasCheckboxes\"\n scope=\"col\"\n [class]=\"['align-top px-base py-xs', 'w-16', checkboxClasses] | makeHtmlList\">\n <span class=\"sr-only\">Seleccionar fila</span>\n </th>\n <th\n scope=\"col\"\n *ngFor=\"let item of getHeaderCells(); index as iHeader\"\n [id]=\"getIdHeader(iHeader)\"\n [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\n [class]=\"\n [\n 'align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \"\n [attr.colspan]=\"item.colspan ? item.colspan : null\"\n [attr.rowspan]=\"item.rowspan ? item.rowspan : null\"\n [desyAppAccessibility]=\"item\">\n <span\n *ngIf=\"item.orderBy\"\n class=\"inline-block relative\"\n (click)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.enter)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.space)=\"handleSortByColumn(iHeader, $event)\"\n desyFocusClickedCell\n [attr.tabindex]=\"item.orderBy ? -1 : null\"\n [attr.role]=\"item.orderBy ? 'button' : null\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n <span\n class=\"c-table-advanced__order\"\n *ngIf=\"item.orderBy\">\n <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n <span\n class=\"c-table-advanced__ascending\"\n *ngIf=\"item.orderBy === orderByType.asc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__descending\"\n *ngIf=\"item.orderBy === orderByType.desc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__none\"\n *ngIf=\"item.orderBy === orderByType.none\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n class=\"text-neutral-dark\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n </span>\n </span>\n\n <span\n *ngIf=\"!item.orderBy\"\n class=\"inline-block relative\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr\n class=\"divide-x divide-neutral-base\"\n *ngIf=\"hasFilters()\">\n <td\n *ngIf=\"hasCheckboxes\"\n [ngClass]=\"checkboxClasses\"></td>\n <td\n tabindex=\"-1\"\n *ngFor=\"let item of getHeaderCells(); index as iHead\"\n desyFocusClickedCell\n [class]=\"\n [\n 'align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \">\n <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n <ng-container\n *ngTemplateOutlet=\"tableSelect; context: { selectable: getSelectForItem(item) }\"></ng-container>\n <ng-template\n #tableSelect\n let-selectable=\"selectable\">\n <desy-select\n [id]=\"getIdHeaderSelect(iHead)\"\n [labelData]=\"{\n text: item.filterText ? item.filterText : 'Filtrar en esta columna',\n classes: 'sr-only',\n }\"\n [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full'\"\n [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : '-mt-sm mb-0'\"\n [name]=\"selectable.name\"\n [items]=\"getItemSelectOptions(selectable)\"\n [disabled]=\"selectable.disabled\"\n [describedBy]=\"getIdHeaderSelect(iHead)\"\n [(ngModel)]=\"item.valueSelect\"\n (ngModelChange)=\"usePagination ? handleButtonSearch(item) : handleInputSearch(item, true)\"\n [role]=\"selectable.role\"\n [ariaLabel]=\"selectable.ariaLabel\"\n [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n [ariaHidden]=\"selectable.ariaHidden\"\n [ariaDisabled]=\"selectable.ariaDisabled\"\n [ariaControls]=\"selectable.ariaControls\"\n [ariaCurrent]=\"selectable.ariaCurrent\"\n [ariaLive]=\"selectable.ariaLive\"\n [ariaExpanded]=\"selectable.ariaExpanded\"\n [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n [ariaHasPopup]=\"selectable.ariaHasPopup\"\n [tabindex]=\"selectable.tabindex\"></desy-select>\n </ng-template>\n </ng-container>\n\n <div\n *ngIf=\"item.hasSelect && item.hasFilter\"\n class=\"pb-sm\"></div>\n\n <desy-search-bar\n *ngIf=\"item.hasFilter\"\n [(ngModel)]=\"item.valueFilter\"\n [ngModelOptions]=\"{ standalone: true }\"\n (clickEvent)=\"usePagination ? handleButtonSearch(item) : null\"\n (ngModelChange)=\"!usePagination ? handleInputSearch(item, false) : null\"\n [labelText]=\"item.filterText ? item.filterText : 'Filtrar en esta columna'\"\n [id]=\"getIdHeaderFilter(iHead)\"\n [placeholder]=\"item.filterText ? item.filterText : 'Filtrar'\"\n [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n buttonClasses=\"m-xs p-0.5 text-xs\"\n [describedBy]=\"getIdHeader(iHead)\"></desy-search-bar>\n </td>\n </tr>\n\n <tr\n *ngFor=\"let row of getVisibleRows(); index as iRow\"\n class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n [desyRow]=\"row\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"row.checked\"\n (ngModelChange)=\"handleCheckboxChange(row)\"\n [id]=\"getIdRowCheckbox(iRow)\"\n [name]=\"getIdRowCheckbox(iRow)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iRow)\">\n Selecciona fila {{ this.hasFilters() ? iRow + 1 : iRow }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tbody>\n\n <tfoot *ngIf=\"getFooterCells()\">\n <tr\n *ngFor=\"let foot of getFooterCells(); index as iFooter\"\n class=\"border-t-2 border-b border-neutral-base hover:bg-neutral-lighter\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"foot.checked\"\n (ngModelChange)=\"handleCheckboxChange(foot)\"\n [id]=\"getIdRowCheckbox(iFooter)\"\n [name]=\"getIdRowCheckbox(iFooter)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iFooter)\">\n Selecciona fila {{ iFooter }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of foot.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tfoot>\n </table>\n</ng-template>\n\n<div\n *ngIf=\"wrapper; else tableContent\"\n [class]=\"wrapper.classes\">\n <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n" }]
|
|
11865
|
+
args: [{ selector: 'desy-table-advanced', standalone: false, template: "<ng-template #tableContent>\n <div\n *ngIf=\"hasCheckboxes\"\n class=\"lg:flex lg:flex-wrap lg:w-full\"\n aria-labelledby=\"acciones-entradas\">\n <h3\n id=\"acciones-entradas\"\n class=\"sr-only\">\n Selecci\u00F3n m\u00FAltiple y Acciones sobre el listado de entradas\n </h3>\n <div\n id=\"selection-home\"\n class=\"pt-2 pb-0 pl-4 mt-0 lg:flex sm:flex-1 py-base\">\n <div class=\"h-10\">\n <desy-checkboxes name=\"todos-entradas-chbx\">\n <desy-checkbox-item\n #checkbox\n value=\"item-checkbox\"\n name=\"todos-entradas\"\n (checkedChange)=\"checkUncheckAll()\"\n [isIndeterminate]=\"true\"\n classes=\"c-checkboxes--sm\">\n <div class=\"pt-0.5 leading-5\">\n <label class=\"block -mt-1 text-sm ng-star-inserted\">\n {{ selectAllPages ? 'Seleccionar todo' : 'Seleccionar todos los items de esta p\u00E1gina' }}\n </label>\n </div>\n </desy-checkbox-item>\n </desy-checkboxes>\n </div>\n </div>\n <ng-content\n select=\":not(desy-table-advanced-header):not(desy-table-advanced-row):not(desy-table-advanced-footer):not(desy-table-caption)\"></ng-content>\n </div>\n <table\n role=\"grid\"\n [class]=\"['c-table-advanced border-t-2 border-b-2 border-neutral-base', classes] | makeHtmlList\"\n [attr.id]=\"id ? id : null\"\n aria-readonly=\"true\"\n [desyAppAccessibility]=\"this\">\n <caption\n *ngIf=\"caption || captionComponent\"\n [class]=\"getCaptionClass()\">\n <ng-container\n *desyCustomInnerContent=\"{ component: captionComponent, text: caption ? caption : null }\"></ng-container>\n </caption>\n <thead *ngIf=\"getHeaderCells()\">\n <tr class=\"border-t border-neutral-base divide-x divide-neutral-base\">\n <th\n *ngIf=\"hasCheckboxes\"\n scope=\"col\"\n [class]=\"['align-top px-base py-xs', 'w-16', checkboxClasses] | makeHtmlList\">\n <span class=\"sr-only\">Seleccionar fila</span>\n </th>\n <th\n scope=\"col\"\n *ngFor=\"let item of getHeaderCells(); index as iHeader\"\n [id]=\"getIdHeader(iHeader)\"\n [attr.aria-sort]=\"item.orderBy ? getStringOrderBy(item.orderBy) : null\"\n [class]=\"\n [\n 'align-top px-base py-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \"\n [attr.colspan]=\"item.colspan ? item.colspan : null\"\n [attr.rowspan]=\"item.rowspan ? item.rowspan : null\"\n [desyAppAccessibility]=\"item\">\n <span\n *ngIf=\"item.orderBy\"\n class=\"inline-block relative\"\n (click)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.enter)=\"handleSortByColumn(iHeader, $event)\"\n (keydown.space)=\"handleSortByColumn(iHeader, $event)\"\n desyFocusClickedCell\n [attr.tabindex]=\"item.orderBy ? -1 : null\"\n [attr.role]=\"item.orderBy ? 'button' : null\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n <span\n class=\"c-table-advanced__order\"\n *ngIf=\"item.orderBy\">\n <span class=\"sr-only\">Pulsa para ordenar por esta columna</span>\n <span\n class=\"c-table-advanced__ascending\"\n *ngIf=\"item.orderBy === orderByType.asc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M112.07 37.93l-35-35a10 10 0 00-14.14 0l-35 35a10 10 0 0014.14 14.14l13.66-13.66A2.5 2.5 0 0160 40.18V130a10 10 0 0020 0V40.18a2.5 2.5 0 014.27-1.77l13.66 13.66a10 10 0 0014.14-14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__descending\"\n *ngIf=\"item.orderBy === orderByType.desc\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M27.93 102.07l35 35a10 10 0 0014.14 0l35-35a10 10 0 00-14.14-14.14l-13.66 13.66A2.5 2.5 0 0180 99.82V10a10 10 0 00-20 0v89.82a2.5 2.5 0 01-4.27 1.77L42.07 87.93a10 10 0 00-14.14 14.14z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n <span\n class=\"c-table-advanced__none\"\n *ngIf=\"item.orderBy === orderByType.none\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 140 140\"\n class=\"text-neutral-dark\"\n aria-hidden=\"true\"\n width=\"1em\"\n height=\"1em\">\n <path\n d=\"M94.7 97.2l-17.2 17.19V25.61L94.7 42.8a7.5 7.5 0 0010.6-10.6l-30-30a7.49 7.49 0 00-10.6 0l-30 30a7.5 7.5 0 0010.6 10.6l17.2-17.19v88.78L45.3 97.2a7.5 7.5 0 10-10.6 10.6l30 30a7.48 7.48 0 0010.6 0l30-30a7.5 7.5 0 00-10.6-10.6z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n </span>\n </span>\n\n <span\n *ngIf=\"!item.orderBy\"\n class=\"inline-block relative\">\n <ng-container *ngIf=\"item.text\">{{ item.text }}</ng-container>\n <ng-container *ngIf=\"item.contentComponent\">\n <ng-container *desyCustomInnerContent=\"{ component: item.contentComponent }\"></ng-container>\n </ng-container>\n </span>\n </th>\n </tr>\n </thead>\n\n <tbody>\n <tr\n class=\"divide-x divide-neutral-base\"\n *ngIf=\"hasFilters()\">\n <td\n *ngIf=\"hasCheckboxes\"\n [ngClass]=\"checkboxClasses\"></td>\n <td\n tabindex=\"-1\"\n *ngFor=\"let item of getHeaderCells(); index as iHead\"\n desyFocusClickedCell\n [class]=\"\n [\n 'align-top px-base pb-sm border-neutral-base border-b-0 text-left text-sm font-normal text-neutral-dark',\n item.classes,\n ] | makeHtmlList\n \">\n <ng-container *ngIf=\"item.hasSelect && getSelectForItem(item) !== null\">\n <ng-container\n *ngTemplateOutlet=\"tableSelect; context: { selectable: getSelectForItem(item) }\"></ng-container>\n <ng-template\n #tableSelect\n let-selectable=\"selectable\">\n <desy-select\n [id]=\"getIdHeaderSelect(iHead)\"\n [labelData]=\"{\n text: item.filterText ? item.filterText : 'Filtrar en esta columna',\n classes: 'sr-only',\n }\"\n [classes]=\"selectable.classes ? selectable.classes : 'c-select--sm w-full'\"\n [formGroupClasses]=\"selectable.formGroupClasses ? selectable.formGroupClasses : '-mt-sm mb-0'\"\n [name]=\"selectable.name\"\n [items]=\"getItemSelectOptions(selectable)\"\n [disabled]=\"selectable.disabled\"\n [describedBy]=\"getIdHeaderSelect(iHead)\"\n [(ngModel)]=\"item.valueSelect\"\n (ngModelChange)=\"usePagination ? handleButtonSearch(item) : handleInputSearch(item, true)\"\n [role]=\"selectable.role\"\n [ariaLabel]=\"selectable.ariaLabel\"\n [ariaDescribedBy]=\"selectable.ariaDescribedBy\"\n [ariaLabelledBy]=\"selectable.ariaLabelledBy\"\n [ariaHidden]=\"selectable.ariaHidden\"\n [ariaDisabled]=\"selectable.ariaDisabled\"\n [ariaControls]=\"selectable.ariaControls\"\n [ariaCurrent]=\"selectable.ariaCurrent\"\n [ariaLive]=\"selectable.ariaLive\"\n [ariaExpanded]=\"selectable.ariaExpanded\"\n [ariaErrorMessage]=\"selectable.ariaErrorMessage\"\n [ariaHasPopup]=\"selectable.ariaHasPopup\"\n [tabindex]=\"selectable.tabindex\"></desy-select>\n </ng-template>\n </ng-container>\n\n <div\n *ngIf=\"item.hasSelect && item.hasFilter\"\n class=\"pb-sm\"></div>\n\n <desy-search-bar\n *ngIf=\"item.hasFilter\"\n [(ngModel)]=\"item.valueFilter\"\n [ngModelOptions]=\"{ standalone: true }\"\n (clickEvent)=\"usePagination && !allowFilterAndOrder ? handleButtonSearch(item) : null\"\n (ngModelChange)=\"!usePagination || allowFilterAndOrder ? handleInputSearch(item, false) : null\"\n [labelText]=\"item.filterText ? item.filterText : 'Filtrar en esta columna'\"\n [id]=\"getIdHeaderFilter(iHead)\"\n [placeholder]=\"item.filterText ? item.filterText : 'Filtrar'\"\n [classes]=\"['c-input--sm', item.filterClasses] | makeHtmlList\"\n buttonClasses=\"m-xs p-0.5 text-xs\"\n [describedBy]=\"getIdHeader(iHead)\"></desy-search-bar>\n </td>\n </tr>\n\n <tr\n *ngFor=\"let row of getVisibleRows(); index as iRow\"\n class=\"border-t border-b border-neutral-base hover:bg-neutral-lighter\"\n [desyRow]=\"row\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"row.checked\"\n (ngModelChange)=\"handleCheckboxChange(row)\"\n [id]=\"getIdRowCheckbox(iRow)\"\n [name]=\"getIdRowCheckbox(iRow)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iRow)\">\n Selecciona fila {{ this.hasFilters() ? iRow + 1 : iRow }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of row.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iRow\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tbody>\n\n <tfoot *ngIf=\"getFooterCells()\">\n <tr\n *ngFor=\"let foot of getFooterCells(); index as iFooter\"\n class=\"border-t-2 border-b border-neutral-base hover:bg-neutral-lighter\">\n <td\n *ngIf=\"hasCheckboxes\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', checkboxClasses] | makeHtmlList\"\n tabindex=\"-1\">\n <div class=\"c-checkboxes c-checkboxes--sm\">\n <div>\n <div class=\"relative flex items-start\">\n <div class=\"flex items-center mx-sm\">\n <input\n type=\"checkbox\"\n class=\"w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base text-primary-base\"\n [(ngModel)]=\"foot.checked\"\n (ngModelChange)=\"handleCheckboxChange(foot)\"\n [id]=\"getIdRowCheckbox(iFooter)\"\n [name]=\"getIdRowCheckbox(iFooter)\" />\n </div>\n <div class=\"pt-0.5 leading-5\">\n <label\n class=\"sr-only block text-sm -mt-1\"\n [for]=\"getIdRowCheckbox(iFooter)\">\n Selecciona fila {{ iFooter }}\n </label>\n </div>\n </div>\n </div>\n </div>\n </td>\n <ng-container *ngFor=\"let cell of foot.cellsList; first as isFirstCell; index as columnIndex\">\n <th\n *ngIf=\"firstCellIsHeader && isFirstCell; else elseTd\"\n scope=\"row\"\n [class]=\"\n [\n 'px-base py-xs border-neutral-base border-b-0 border-r text-left font-normal text-sm text-neutral-dark',\n cell.classes,\n ] | makeHtmlList\n \"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n tabindex=\"-1\"\n desyFocusClickedCell\n [class]=\"['px-base py-sm', cell.classes] | makeHtmlList\"\n desyCell\n [row]=\"row\"\n [rowIndex]=\"iFooter\"\n [columnIndex]=\"columnIndex\"\n [attr.colspan]=\"cell.colspan ? cell.colspan : null\"\n [attr.rowspan]=\"cell.rowspan ? cell.rowspan : null\"\n [attr.id]=\"cell.id ? cell.id : null\"\n [desyAppAccessibility]=\"cell\"\n [attr.tabindex]=\"cell.tabindex ? cell.tabindex : -1\">\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </td>\n </ng-template>\n </ng-container>\n </tr>\n </tfoot>\n </table>\n</ng-template>\n\n<div\n *ngIf=\"wrapper; else tableContent\"\n [class]=\"wrapper.classes\">\n <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\n" }]
|
|
11863
11866
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { rows: [{
|
|
11864
11867
|
type: Input
|
|
11865
11868
|
}], head: [{
|
|
@@ -11890,6 +11893,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImpo
|
|
|
11890
11893
|
type: Input
|
|
11891
11894
|
}], usePagination: [{
|
|
11892
11895
|
type: Input
|
|
11896
|
+
}], allowFilterAndOrder: [{
|
|
11897
|
+
type: Input
|
|
11893
11898
|
}], captionComponent: [{
|
|
11894
11899
|
type: ContentChildren,
|
|
11895
11900
|
args: [TableCaptionComponent]
|