desy-angular 17.0.0 → 17.1.0
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 +308 -72
- package/fesm2022/desy-angular.mjs.map +1 -1
- package/lib/desy-forms/components/search-bar/search-bar.component.d.ts +2 -1
- package/lib/desy-forms/components/tree/interfaces/item-generator.d.ts +4 -0
- package/lib/desy-forms/components/tree/interfaces/itree-item.d.ts +2 -0
- package/lib/desy-forms/components/tree/tree-item/tree-item.component.d.ts +5 -5
- package/lib/desy-forms/components/tree/tree-items-generator/tree-items-generator.component.d.ts +2 -1
- package/lib/desy-forms/components/tree/tree-sub/tree-sub.component.d.ts +10 -2
- package/lib/desy-forms/components/tree/tree.component.d.ts +11 -2
- package/lib/desy-tables/components/treegrid/treegrid.component.d.ts +5 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, ViewChild, HostBinding, Directive, Pipe, EventEmitter, Output, QueryList, ElementRef, HostListener, ContentChildren, ViewChildren, forwardRef, Optional,
|
|
2
|
+
import { Input, Component, ViewChild, HostBinding, Directive, Pipe, EventEmitter, Output, QueryList, ElementRef, HostListener, ContentChildren, ViewChildren, forwardRef, Optional, Injector, ViewContainerRef, ChangeDetectionStrategy, ContentChild, Type as Type$2, TemplateRef, ComponentRef, Injectable, SecurityContext, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/router';
|
|
@@ -5180,13 +5180,13 @@ class SearchBarComponent extends FormFieldComponent {
|
|
|
5180
5180
|
this.onChange(this.value);
|
|
5181
5181
|
}
|
|
5182
5182
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5183
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5183
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.15", type: SearchBarComponent, isStandalone: false, selector: "desy-search-bar", inputs: { describedBy: "describedBy", classes: "classes", buttonClasses: "buttonClasses", searchResultsNumber: "searchResultsNumber" }, outputs: { clickEvent: "clickEvent" }, providers: [
|
|
5184
5184
|
{
|
|
5185
5185
|
provide: NG_VALUE_ACCESSOR,
|
|
5186
5186
|
useExisting: forwardRef(() => SearchBarComponent),
|
|
5187
5187
|
multi: true,
|
|
5188
5188
|
},
|
|
5189
|
-
], queries: [{ propertyName: "button", predicate: ButtonComponent }], usesInheritance: true, ngImport: i0, template: "<!-- searchbar -->\n<ng-content select=\"desy-label\"></ng-content>\n<ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n<desy-label\n *ngIf=\"!labelRef && labelData\"\n [text]=\"labelData.text\"\n [html]=\"labelData.html\"\n [classes]=\"['sr-only', labelData.classes] | makeHtmlList\"\n [isPageHeading]=\"labelData.isPageHeading\"\n [for]=\"id\"\n [role]=\"labelData.role\"\n [ariaLabel]=\"labelData.ariaLabel\"\n [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n [ariaHidden]=\"labelData.ariaHidden\"\n [ariaDisabled]=\"labelData.ariaDisabled\"\n [ariaControls]=\"labelData.ariaControls\"\n [ariaCurrent]=\"labelData.ariaCurrent\"\n [ariaLive]=\"labelData.ariaLive\"\n [ariaExpanded]=\"labelData.ariaExpanded\"\n [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n [ariaHasPopup]=\"labelData.ariaHasPopup\"\n [tabindex]=\"labelData.tabindex\"></desy-label>\n<desy-label\n *ngIf=\"!labelRef && !labelData && labelText\"\n [text]=\"labelText\"\n classes=\"sr-only\"\n [for]=\"id\"></desy-label>\n\n<div\n class=\"relative\"\n [ngClass]=\"{ 'flex flex-wrap items-end gap-sm': hasButton() }\">\n <input\n type=\"search\"\n [class]=\"\n [\n 'c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\n classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(), 'pr-12 w-full': !hasButton() }\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (change)=\"change.emit($event)\"\n [attr.id]=\"id ? id : null\"\n [attr.name]=\"id ? id : null\"\n [attr.aria-describedby]=\"[describedBy] | makeHtmlList: null\"\n [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [desyAppAccessibility]=\"this\" />\n <ng-container *ngIf=\"hasButton(); else defaultButton\">\n <ng-content select=\"desy-button\"></ng-content>\n </ng-container>\n <ng-template #defaultButton>\n <button\n type=\"submit\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n (click)=\"onClick($event)\"\n [class]=\"\n [\n 'absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus',\n buttonClasses,\n ] | makeHtmlList\n \">\n <span class=\"sr-only\">Buscar</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"1.375em\"\n height=\"1.375em\"\n aria-hidden=\"true\">\n <path\n d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-template>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n <desy-error-message\n *ngIf=\"!errorMessageRef && errorMessageData\"\n [id]=\"getErrorId()\"\n [text]=\"errorMessageData.text\"\n [html]=\"errorMessageData.html\"\n [classes]=\"errorMessageData.classes\"\n [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n [role]=\"errorMessageData.role\"\n [ariaLabel]=\"errorMessageData.ariaLabel\"\n [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n [ariaHidden]=\"errorMessageData.ariaHidden\"\n [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n [ariaControls]=\"errorMessageData.ariaControls\"\n [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n [ariaLive]=\"errorMessageData.ariaLive\"\n [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n <desy-error-message\n *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n [text]=\"errorMessageText\"\n [id]=\"getErrorId()\"></desy-error-message>\n</div>\n<!-- /searchbar -->\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "component", type: LabelComponent, selector: "desy-label", inputs: ["id", "classes", "html", "text", "isPageHeading", "headingLevel"] }, { kind: "component", type: ErrorMessageComponent, selector: "desy-error-message", inputs: ["id", "classes", "html", "text", "visuallyHiddenText"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
5189
|
+
], queries: [{ propertyName: "button", predicate: ButtonComponent }], usesInheritance: true, ngImport: i0, template: "<!-- searchbar -->\n<ng-content select=\"desy-label\"></ng-content>\n<ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n<desy-label\n *ngIf=\"!labelRef && labelData\"\n [text]=\"labelData.text\"\n [html]=\"labelData.html\"\n [classes]=\"['sr-only', labelData.classes] | makeHtmlList\"\n [isPageHeading]=\"labelData.isPageHeading\"\n [for]=\"id\"\n [role]=\"labelData.role\"\n [ariaLabel]=\"labelData.ariaLabel\"\n [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n [ariaHidden]=\"labelData.ariaHidden\"\n [ariaDisabled]=\"labelData.ariaDisabled\"\n [ariaControls]=\"labelData.ariaControls\"\n [ariaCurrent]=\"labelData.ariaCurrent\"\n [ariaLive]=\"labelData.ariaLive\"\n [ariaExpanded]=\"labelData.ariaExpanded\"\n [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n [ariaHasPopup]=\"labelData.ariaHasPopup\"\n [tabindex]=\"labelData.tabindex\"></desy-label>\n<desy-label\n *ngIf=\"!labelRef && !labelData && labelText\"\n [text]=\"labelText\"\n classes=\"sr-only\"\n [for]=\"id\"></desy-label>\n\n<div\n *ngIf=\"value && searchResultsNumber !== undefined\"\n role=\"alert\"\n aria-live=\"assertive\">\n <p class=\"sr-only\">\n @if (searchResultsNumber > 0) {\n <span>Se han encontrado {{ searchResultsNumber }} resultados</span>\n } @else {\n <span>No se han encontrado resultados</span>\n }\n </p>\n</div>\n\n<div\n class=\"relative\"\n [ngClass]=\"{ 'flex flex-wrap items-end gap-sm': hasButton() }\">\n <input\n type=\"search\"\n [class]=\"\n [\n 'c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\n classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(), 'pr-12 w-full': !hasButton() }\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (change)=\"change.emit($event)\"\n [attr.id]=\"id ? id : null\"\n [attr.name]=\"id ? id : null\"\n [attr.aria-describedby]=\"[describedBy] | makeHtmlList: null\"\n [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [desyAppAccessibility]=\"this\" />\n <ng-container *ngIf=\"hasButton(); else defaultButton\">\n <ng-content select=\"desy-button\"></ng-content>\n </ng-container>\n <ng-template #defaultButton>\n <button\n type=\"submit\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n (click)=\"onClick($event)\"\n [class]=\"\n [\n 'absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus',\n buttonClasses,\n ] | makeHtmlList\n \">\n <span class=\"sr-only\">Buscar</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"1.375em\"\n height=\"1.375em\"\n aria-hidden=\"true\">\n <path\n d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-template>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n <desy-error-message\n *ngIf=\"!errorMessageRef && errorMessageData\"\n [id]=\"getErrorId()\"\n [text]=\"errorMessageData.text\"\n [html]=\"errorMessageData.html\"\n [classes]=\"errorMessageData.classes\"\n [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n [role]=\"errorMessageData.role\"\n [ariaLabel]=\"errorMessageData.ariaLabel\"\n [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n [ariaHidden]=\"errorMessageData.ariaHidden\"\n [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n [ariaControls]=\"errorMessageData.ariaControls\"\n [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n [ariaLive]=\"errorMessageData.ariaLive\"\n [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n <desy-error-message\n *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n [text]=\"errorMessageText\"\n [id]=\"getErrorId()\"></desy-error-message>\n</div>\n<!-- /searchbar -->\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "component", type: LabelComponent, selector: "desy-label", inputs: ["id", "classes", "html", "text", "isPageHeading", "headingLevel"] }, { kind: "component", type: ErrorMessageComponent, selector: "desy-error-message", inputs: ["id", "classes", "html", "text", "visuallyHiddenText"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
5190
5190
|
}
|
|
5191
5191
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
5192
5192
|
type: Component,
|
|
@@ -5196,7 +5196,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5196
5196
|
useExisting: forwardRef(() => SearchBarComponent),
|
|
5197
5197
|
multi: true,
|
|
5198
5198
|
},
|
|
5199
|
-
], standalone: false, template: "<!-- searchbar -->\n<ng-content select=\"desy-label\"></ng-content>\n<ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n<desy-label\n *ngIf=\"!labelRef && labelData\"\n [text]=\"labelData.text\"\n [html]=\"labelData.html\"\n [classes]=\"['sr-only', labelData.classes] | makeHtmlList\"\n [isPageHeading]=\"labelData.isPageHeading\"\n [for]=\"id\"\n [role]=\"labelData.role\"\n [ariaLabel]=\"labelData.ariaLabel\"\n [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n [ariaHidden]=\"labelData.ariaHidden\"\n [ariaDisabled]=\"labelData.ariaDisabled\"\n [ariaControls]=\"labelData.ariaControls\"\n [ariaCurrent]=\"labelData.ariaCurrent\"\n [ariaLive]=\"labelData.ariaLive\"\n [ariaExpanded]=\"labelData.ariaExpanded\"\n [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n [ariaHasPopup]=\"labelData.ariaHasPopup\"\n [tabindex]=\"labelData.tabindex\"></desy-label>\n<desy-label\n *ngIf=\"!labelRef && !labelData && labelText\"\n [text]=\"labelText\"\n classes=\"sr-only\"\n [for]=\"id\"></desy-label>\n\n<div\n class=\"relative\"\n [ngClass]=\"{ 'flex flex-wrap items-end gap-sm': hasButton() }\">\n <input\n type=\"search\"\n [class]=\"\n [\n 'c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\n classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(), 'pr-12 w-full': !hasButton() }\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (change)=\"change.emit($event)\"\n [attr.id]=\"id ? id : null\"\n [attr.name]=\"id ? id : null\"\n [attr.aria-describedby]=\"[describedBy] | makeHtmlList: null\"\n [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [desyAppAccessibility]=\"this\" />\n <ng-container *ngIf=\"hasButton(); else defaultButton\">\n <ng-content select=\"desy-button\"></ng-content>\n </ng-container>\n <ng-template #defaultButton>\n <button\n type=\"submit\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n (click)=\"onClick($event)\"\n [class]=\"\n [\n 'absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus',\n buttonClasses,\n ] | makeHtmlList\n \">\n <span class=\"sr-only\">Buscar</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"1.375em\"\n height=\"1.375em\"\n aria-hidden=\"true\">\n <path\n d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-template>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n <desy-error-message\n *ngIf=\"!errorMessageRef && errorMessageData\"\n [id]=\"getErrorId()\"\n [text]=\"errorMessageData.text\"\n [html]=\"errorMessageData.html\"\n [classes]=\"errorMessageData.classes\"\n [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n [role]=\"errorMessageData.role\"\n [ariaLabel]=\"errorMessageData.ariaLabel\"\n [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n [ariaHidden]=\"errorMessageData.ariaHidden\"\n [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n [ariaControls]=\"errorMessageData.ariaControls\"\n [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n [ariaLive]=\"errorMessageData.ariaLive\"\n [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n <desy-error-message\n *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n [text]=\"errorMessageText\"\n [id]=\"getErrorId()\"></desy-error-message>\n</div>\n<!-- /searchbar -->\n" }]
|
|
5199
|
+
], standalone: false, template: "<!-- searchbar -->\n<ng-content select=\"desy-label\"></ng-content>\n<ng-container *ngTemplateOutlet=\"labelRef\"></ng-container>\n<desy-label\n *ngIf=\"!labelRef && labelData\"\n [text]=\"labelData.text\"\n [html]=\"labelData.html\"\n [classes]=\"['sr-only', labelData.classes] | makeHtmlList\"\n [isPageHeading]=\"labelData.isPageHeading\"\n [for]=\"id\"\n [role]=\"labelData.role\"\n [ariaLabel]=\"labelData.ariaLabel\"\n [ariaDescribedBy]=\"labelData.ariaDescribedBy\"\n [ariaLabelledBy]=\"labelData.ariaLabelledBy\"\n [ariaHidden]=\"labelData.ariaHidden\"\n [ariaDisabled]=\"labelData.ariaDisabled\"\n [ariaControls]=\"labelData.ariaControls\"\n [ariaCurrent]=\"labelData.ariaCurrent\"\n [ariaLive]=\"labelData.ariaLive\"\n [ariaExpanded]=\"labelData.ariaExpanded\"\n [ariaErrorMessage]=\"labelData.ariaErrorMessage\"\n [ariaHasPopup]=\"labelData.ariaHasPopup\"\n [tabindex]=\"labelData.tabindex\"></desy-label>\n<desy-label\n *ngIf=\"!labelRef && !labelData && labelText\"\n [text]=\"labelText\"\n classes=\"sr-only\"\n [for]=\"id\"></desy-label>\n\n<div\n *ngIf=\"value && searchResultsNumber !== undefined\"\n role=\"alert\"\n aria-live=\"assertive\">\n <p class=\"sr-only\">\n @if (searchResultsNumber > 0) {\n <span>Se han encontrado {{ searchResultsNumber }} resultados</span>\n } @else {\n <span>No se han encontrado resultados</span>\n }\n </p>\n</div>\n\n<div\n class=\"relative\"\n [ngClass]=\"{ 'flex flex-wrap items-end gap-sm': hasButton() }\">\n <input\n type=\"search\"\n [class]=\"\n [\n 'c-input block border-black rounded font-semibold placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base',\n classes,\n ] | makeHtmlList\n \"\n [ngClass]=\"{ 'border-alert-base ring-2 ring-alert-base': hasErrorsMessage(), 'pr-12 w-full': !hasButton() }\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (focus)=\"focus.emit($event)\"\n (blur)=\"blur.emit($event)\"\n (change)=\"change.emit($event)\"\n [attr.id]=\"id ? id : null\"\n [attr.name]=\"id ? id : null\"\n [attr.aria-describedby]=\"[describedBy] | makeHtmlList: null\"\n [attr.aria-errormessage]=\"hasErrorsMessage() ? getErrorId() : null\"\n [attr.aria-invalid]=\"hasErrorsMessage() ? true : null\"\n [attr.disabled]=\"disabled ? true : null\"\n [desyAppAccessibility]=\"this\" />\n <ng-container *ngIf=\"hasButton(); else defaultButton\">\n <ng-content select=\"desy-button\"></ng-content>\n </ng-container>\n <ng-template #defaultButton>\n <button\n type=\"submit\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n (click)=\"onClick($event)\"\n [class]=\"\n [\n 'absolute top-0 right-0 m-sm p-0.5 text-primary-base hover:text-primary-dark focus:bg-warning-base focus:outline-none focus:shadow-outline-focus',\n buttonClasses,\n ] | makeHtmlList\n \">\n <span class=\"sr-only\">Buscar</span>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n width=\"1.375em\"\n height=\"1.375em\"\n aria-hidden=\"true\">\n <path\n d=\"M23.498 23.487a1.713 1.713 0 000-2.421l-4.572-4.575a.43.43 0 01-.062-.539 10.283 10.283 0 10-2.911 2.911.43.43 0 01.539.055l4.574 4.574a1.712 1.712 0 002.433-.005zM3.451 10.289a6.85 6.85 0 116.85 6.85 6.85 6.85 0 01-6.85-6.85z\"\n fill=\"currentColor\" />\n </svg>\n </button>\n </ng-template>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-container *ngTemplateOutlet=\"errorMessageRef\"></ng-container>\n <desy-error-message\n *ngIf=\"!errorMessageRef && errorMessageData\"\n [id]=\"getErrorId()\"\n [text]=\"errorMessageData.text\"\n [html]=\"errorMessageData.html\"\n [classes]=\"errorMessageData.classes\"\n [visuallyHiddenText]=\"errorMessageData.visuallyHiddenText\"\n [role]=\"errorMessageData.role\"\n [ariaLabel]=\"errorMessageData.ariaLabel\"\n [ariaDescribedBy]=\"errorMessageData.ariaDescribedBy\"\n [ariaLabelledBy]=\"errorMessageData.ariaLabelledBy\"\n [ariaHidden]=\"errorMessageData.ariaHidden\"\n [ariaDisabled]=\"errorMessageData.ariaDisabled\"\n [ariaControls]=\"errorMessageData.ariaControls\"\n [ariaCurrent]=\"errorMessageData.ariaCurrent\"\n [ariaLive]=\"errorMessageData.ariaLive\"\n [ariaExpanded]=\"errorMessageData.ariaExpanded\"\n [ariaErrorMessage]=\"errorMessageData.ariaErrorMessage\"\n [ariaHasPopup]=\"errorMessageData.ariaHasPopup\"\n [tabindex]=\"errorMessageData.tabindex\"></desy-error-message>\n <desy-error-message\n *ngIf=\"!errorMessageRef && !errorMessageData && errorMessageText\"\n [text]=\"errorMessageText\"\n [id]=\"getErrorId()\"></desy-error-message>\n</div>\n<!-- /searchbar -->\n" }]
|
|
5200
5200
|
}], propDecorators: { button: [{
|
|
5201
5201
|
type: ContentChildren,
|
|
5202
5202
|
args: [ButtonComponent]
|
|
@@ -5206,6 +5206,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5206
5206
|
type: Input
|
|
5207
5207
|
}], buttonClasses: [{
|
|
5208
5208
|
type: Input
|
|
5209
|
+
}], searchResultsNumber: [{
|
|
5210
|
+
type: Input
|
|
5209
5211
|
}], clickEvent: [{
|
|
5210
5212
|
type: Output
|
|
5211
5213
|
}] } });
|
|
@@ -5402,7 +5404,7 @@ class TreeCheckboxComponent extends AccessibilityComponent {
|
|
|
5402
5404
|
}
|
|
5403
5405
|
}
|
|
5404
5406
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5405
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeCheckboxComponent, isStandalone: false, selector: "desy-tree-checkbox", inputs: { id: "id", name: "name", type: "type", classes: "classes", value: "value", checked: "checked", isIndeterminate: "isIndeterminate", indeterminateChecked: "indeterminateChecked", disabled: "disabled", hasDividers: "hasDividers", describedBy: "describedBy", hasError: "hasError", labelComponent: "labelComponent", hintComponent: "hintComponent", active: "active", href: "href", routerlink: "routerlink", fragment: "fragment", routerLinkActiveClasses: "routerLinkActiveClasses", hasUnderline: "hasUnderline", target: "target" }, outputs: { checkedChange: "checkedChange", indeterminateCheckedChange: "indeterminateCheckedChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "navigationItem", first: true, predicate: ["navigationItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [class]=\"classes\"\n [ngClass]=\"{ 'border-t border-b border-neutral-base -mb-px': hasDividers }\">\n <div class=\"relative flex items-start py-xs\">\n <div\n *ngIf=\"type !== 'navigation'; else navigation\"\n class=\"flex items-center mx-sm\">\n <input\n #input\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-base disabled:border-neutral-base text-primary-base\"\n [id]=\"id + '-input'\"\n [name]=\"name\"\n [type]=\"type === 'checkbox' ? 'checkbox' : 'radio'\"\n [value]=\"value\"\n [checked]=\"checked\"\n (change)=\"hasChanged()\"\n [disabled]=\"disabled ? disabled : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\n [attr.role]=\"role ? role : '
|
|
5407
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeCheckboxComponent, isStandalone: false, selector: "desy-tree-checkbox", inputs: { id: "id", name: "name", type: "type", classes: "classes", value: "value", checked: "checked", isIndeterminate: "isIndeterminate", indeterminateChecked: "indeterminateChecked", disabled: "disabled", hasDividers: "hasDividers", describedBy: "describedBy", hasError: "hasError", labelComponent: "labelComponent", hintComponent: "hintComponent", active: "active", href: "href", routerlink: "routerlink", fragment: "fragment", routerLinkActiveClasses: "routerLinkActiveClasses", hasUnderline: "hasUnderline", target: "target" }, outputs: { checkedChange: "checkedChange", indeterminateCheckedChange: "indeterminateCheckedChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "contentWrapper", first: true, predicate: ["contentWrapper"], descendants: true }, { propertyName: "navigationItem", first: true, predicate: ["navigationItem"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [class]=\"classes\"\n [ngClass]=\"{ 'border-t border-b border-neutral-base -mb-px': hasDividers }\">\n <div class=\"relative flex items-start py-xs\">\n <div\n *ngIf=\"type !== 'navigation'; else navigation\"\n class=\"flex items-center mx-sm\">\n <input\n #input\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-base disabled:border-neutral-base text-primary-base\"\n [id]=\"id + '-input'\"\n [name]=\"name\"\n [type]=\"type === 'checkbox' ? 'checkbox' : 'radio'\"\n [value]=\"value\"\n [checked]=\"checked\"\n (change)=\"hasChanged()\"\n [disabled]=\"disabled ? disabled : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\n [attr.role]=\"role ? role : type === 'checkbox' ? 'checkbox' : 'radio'\"\n [desyAppAccessibility]=\"this\"\n [attr.aria-describedby]=\"itemDescribedBy\"\n (keydown.home)=\"preventDefault($event)\"\n (keydown.end)=\"preventDefault($event)\"\n (keydown.arrowup)=\"preventDefault($event)\"\n (keydown.arrowdown)=\"preventDefault($event)\"\n (keydown.arrowright)=\"preventDefault($event)\"\n (keydown.arrowleft)=\"preventDefault($event)\" />\n </div>\n\n <ng-template #navigation>\n <a\n *ngIf=\"href && !routerlink\"\n [attr.id]=\"id + '-link'\"\n [attr.role]=\"role ? role : 'treeitem'\"\n [attr.aria-roledescription]=\"'enlace'\"\n [href]=\"href\"\n class=\"block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n [ngClass]=\"{\n underline: hasUnderline,\n 'hover:text-primary-base hover:underline': !disabled,\n 'no-underline pointer-events-none': disabled,\n }\"\n [attr.title]=\"title\"\n [attr.aria-current]=\"active ? 'page' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.tabindex]=\"disabled ? '-1' : null\"\n [attr.target]=\"target\"\n #navigationItem>\n <strong\n *ngIf=\"active\"\n class=\"font-bold\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </strong>\n <ng-container *ngIf=\"!active\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </ng-container>\n </a>\n <a\n *ngIf=\"!href && routerlink\"\n [attr.id]=\"id + '-link'\"\n [attr.role]=\"role ? role : 'treeitem'\"\n [attr.aria-roledescription]=\"'enlace'\"\n [routerLink]=\"routerlink\"\n [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n [fragment]=\"fragment\"\n class=\"block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n [ngClass]=\"{\n underline: hasUnderline,\n 'hover:text-primary-base hover:underline': !disabled,\n 'no-underline pointer-events-none': disabled,\n }\"\n [attr.title]=\"title\"\n [attr.aria-current]=\"active ? 'page' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.tabindex]=\"disabled ? '-1' : null\"\n [attr.target]=\"target\"\n #navigationItem>\n <strong\n *ngIf=\"active\"\n class=\"font-bold\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </strong>\n <ng-container *ngIf=\"!active\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </ng-container>\n </a>\n <span\n *ngIf=\"!href && !routerlink\"\n [attr.id]=\"id + '-link'\"\n class=\"block px-xs focus:outline-none\"\n [attr.title]=\"title\"\n [attr.role]=\"role ? role : 'treeitem'\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n #navigationItem>\n <strong\n *ngIf=\"active\"\n class=\"font-bold\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </strong>\n <ng-container *ngIf=\"!active\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </ng-container>\n </span>\n </ng-template>\n <div\n #contentWrapper\n *ngIf=\"type !== 'navigation'\"\n class=\"flex-1 pt-0.5 leading-5\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #c>\n <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }] }); }
|
|
5406
5408
|
}
|
|
5407
5409
|
__decorate([
|
|
5408
5410
|
DesyOnInputChange('onIdChange'),
|
|
@@ -5430,7 +5432,7 @@ __decorate([
|
|
|
5430
5432
|
], TreeCheckboxComponent.prototype, "hintComponent", void 0);
|
|
5431
5433
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeCheckboxComponent, decorators: [{
|
|
5432
5434
|
type: Component,
|
|
5433
|
-
args: [{ selector: 'desy-tree-checkbox', standalone: false, template: "<div\n [class]=\"classes\"\n [ngClass]=\"{ 'border-t border-b border-neutral-base -mb-px': hasDividers }\">\n <div class=\"relative flex items-start py-xs\">\n <div\n *ngIf=\"type !== 'navigation'; else navigation\"\n class=\"flex items-center mx-sm\">\n <input\n #input\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-base disabled:border-neutral-base text-primary-base\"\n [id]=\"id + '-input'\"\n [name]=\"name\"\n [type]=\"type === 'checkbox' ? 'checkbox' : 'radio'\"\n [value]=\"value\"\n [checked]=\"checked\"\n (change)=\"hasChanged()\"\n [disabled]=\"disabled ? disabled : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\n [attr.role]=\"role ? role : '
|
|
5435
|
+
args: [{ selector: 'desy-tree-checkbox', standalone: false, template: "<div\n [class]=\"classes\"\n [ngClass]=\"{ 'border-t border-b border-neutral-base -mb-px': hasDividers }\">\n <div class=\"relative flex items-start py-xs\">\n <div\n *ngIf=\"type !== 'navigation'; else navigation\"\n class=\"flex items-center mx-sm\">\n <input\n #input\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-base disabled:border-neutral-base text-primary-base\"\n [id]=\"id + '-input'\"\n [name]=\"name\"\n [type]=\"type === 'checkbox' ? 'checkbox' : 'radio'\"\n [value]=\"value\"\n [checked]=\"checked\"\n (change)=\"hasChanged()\"\n [disabled]=\"disabled ? disabled : null\"\n [attr.aria-invalid]=\"hasError ? 'true' : null\"\n [attr.role]=\"role ? role : type === 'checkbox' ? 'checkbox' : 'radio'\"\n [desyAppAccessibility]=\"this\"\n [attr.aria-describedby]=\"itemDescribedBy\"\n (keydown.home)=\"preventDefault($event)\"\n (keydown.end)=\"preventDefault($event)\"\n (keydown.arrowup)=\"preventDefault($event)\"\n (keydown.arrowdown)=\"preventDefault($event)\"\n (keydown.arrowright)=\"preventDefault($event)\"\n (keydown.arrowleft)=\"preventDefault($event)\" />\n </div>\n\n <ng-template #navigation>\n <a\n *ngIf=\"href && !routerlink\"\n [attr.id]=\"id + '-link'\"\n [attr.role]=\"role ? role : 'treeitem'\"\n [attr.aria-roledescription]=\"'enlace'\"\n [href]=\"href\"\n class=\"block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n [ngClass]=\"{\n underline: hasUnderline,\n 'hover:text-primary-base hover:underline': !disabled,\n 'no-underline pointer-events-none': disabled,\n }\"\n [attr.title]=\"title\"\n [attr.aria-current]=\"active ? 'page' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.tabindex]=\"disabled ? '-1' : null\"\n [attr.target]=\"target\"\n #navigationItem>\n <strong\n *ngIf=\"active\"\n class=\"font-bold\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </strong>\n <ng-container *ngIf=\"!active\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </ng-container>\n </a>\n <a\n *ngIf=\"!href && routerlink\"\n [attr.id]=\"id + '-link'\"\n [attr.role]=\"role ? role : 'treeitem'\"\n [attr.aria-roledescription]=\"'enlace'\"\n [routerLink]=\"routerlink\"\n [routerLinkActive]=\"routerLinkActiveClasses ? routerLinkActiveClasses : []\"\n [fragment]=\"fragment\"\n class=\"block px-xs focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black\"\n [ngClass]=\"{\n underline: hasUnderline,\n 'hover:text-primary-base hover:underline': !disabled,\n 'no-underline pointer-events-none': disabled,\n }\"\n [attr.title]=\"title\"\n [attr.aria-current]=\"active ? 'page' : null\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.tabindex]=\"disabled ? '-1' : null\"\n [attr.target]=\"target\"\n #navigationItem>\n <strong\n *ngIf=\"active\"\n class=\"font-bold\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </strong>\n <ng-container *ngIf=\"!active\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </ng-container>\n </a>\n <span\n *ngIf=\"!href && !routerlink\"\n [attr.id]=\"id + '-link'\"\n class=\"block px-xs focus:outline-none\"\n [attr.title]=\"title\"\n [attr.role]=\"role ? role : 'treeitem'\"\n [attr.tabindex]=\"disabled ? '-1' : '0'\"\n #navigationItem>\n <strong\n *ngIf=\"active\"\n class=\"font-bold\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </strong>\n <ng-container *ngIf=\"!active\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </ng-container>\n </span>\n </ng-template>\n <div\n #contentWrapper\n *ngIf=\"type !== 'navigation'\"\n class=\"flex-1 pt-0.5 leading-5\">\n <ng-container *ngTemplateOutlet=\"c\"></ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #c>\n <ng-content></ng-content>\n</ng-template>\n" }]
|
|
5434
5436
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputElement: [{
|
|
5435
5437
|
type: ViewChild,
|
|
5436
5438
|
args: ['input', { static: false }]
|
|
@@ -5489,14 +5491,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5489
5491
|
}] } });
|
|
5490
5492
|
|
|
5491
5493
|
class TreeSubComponent extends ContentBaseComponent {
|
|
5494
|
+
constructor() {
|
|
5495
|
+
super(...arguments);
|
|
5496
|
+
this.lazyRendering = false;
|
|
5497
|
+
this.rendered = false;
|
|
5498
|
+
}
|
|
5499
|
+
// Llamada desde el padre al expandir
|
|
5500
|
+
async renderChildrenIfNeeded() {
|
|
5501
|
+
const shouldRender = this.lazyRendering && !this.rendered && this.lazyItems?.length && this.itemTemplate;
|
|
5502
|
+
if (shouldRender) {
|
|
5503
|
+
const customInjector = Injector.create({
|
|
5504
|
+
providers: [{ provide: TreeSubComponent, useValue: this }],
|
|
5505
|
+
parent: this.hostVcr.injector,
|
|
5506
|
+
});
|
|
5507
|
+
this.hostVcr.createEmbeddedView(this.childrenTpl, {
|
|
5508
|
+
items: this.lazyItems,
|
|
5509
|
+
itemTemplate: this.itemTemplate,
|
|
5510
|
+
injector: customInjector,
|
|
5511
|
+
});
|
|
5512
|
+
this.rendered = true;
|
|
5513
|
+
await new Promise((resolve) => {
|
|
5514
|
+
setTimeout(() => resolve(), 1);
|
|
5515
|
+
});
|
|
5516
|
+
}
|
|
5517
|
+
}
|
|
5492
5518
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeSubComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeSubComponent, isStandalone: false, selector: "desy-tree-sub", inputs: { classes: "classes" }, usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n <ul\n [class]=\"['c-tree__itemgroup', classes] | makeHtmlList\"\n [attr.role]=\"role ? role : 'group'\"\n [desyAppAccessibility]=\"this\">\n <ng-content></ng-content>\n </ul>\n</ng-template>\n", dependencies: [{ kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
5519
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeSubComponent, isStandalone: false, selector: "desy-tree-sub", inputs: { classes: "classes", lazyItems: "lazyItems", itemTemplate: "itemTemplate", lazyRendering: "lazyRendering" }, viewQueries: [{ propertyName: "hostVcr", first: true, predicate: ["host"], descendants: true, read: ViewContainerRef }, { propertyName: "childrenTpl", first: true, predicate: ["childrenTpl"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template #contentTemplate>\n <ul\n [class]=\"['c-tree__itemgroup', classes] | makeHtmlList\"\n [attr.role]=\"role ? role : 'group'\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngIf=\"!lazyRendering\">\n <ng-content></ng-content>\n </ng-container>\n\n <ng-template #host></ng-template>\n\n <!-- Plantilla de hijos para lazyRendering -->\n <ng-template\n #childrenTpl\n let-items=\"items\"\n let-itemTemplate=\"itemTemplate\"\n let-injector=\"injector\">\n <ng-container *ngFor=\"let subItem of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: subItem }; injector: injector\"></ng-container>\n </ng-container>\n </ng-template>\n </ul>\n</ng-template>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
5494
5520
|
}
|
|
5495
5521
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeSubComponent, decorators: [{
|
|
5496
5522
|
type: Component,
|
|
5497
|
-
args: [{ selector: 'desy-tree-sub', standalone: false, template: "<ng-template #contentTemplate>\n <ul\n [class]=\"['c-tree__itemgroup', classes] | makeHtmlList\"\n [attr.role]=\"role ? role : 'group'\"\n [desyAppAccessibility]=\"this\">\n <ng-content></ng-content>\n </ul>\n</ng-template>\n" }]
|
|
5523
|
+
args: [{ selector: 'desy-tree-sub', standalone: false, template: "<ng-template #contentTemplate>\n <ul\n [class]=\"['c-tree__itemgroup', classes] | makeHtmlList\"\n [attr.role]=\"role ? role : 'group'\"\n [desyAppAccessibility]=\"this\">\n <ng-container *ngIf=\"!lazyRendering\">\n <ng-content></ng-content>\n </ng-container>\n\n <ng-template #host></ng-template>\n\n <!-- Plantilla de hijos para lazyRendering -->\n <ng-template\n #childrenTpl\n let-items=\"items\"\n let-itemTemplate=\"itemTemplate\"\n let-injector=\"injector\">\n <ng-container *ngFor=\"let subItem of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: subItem }; injector: injector\"></ng-container>\n </ng-container>\n </ng-template>\n </ul>\n</ng-template>\n" }]
|
|
5498
5524
|
}], propDecorators: { classes: [{
|
|
5499
5525
|
type: Input
|
|
5526
|
+
}], lazyItems: [{
|
|
5527
|
+
type: Input
|
|
5528
|
+
}], itemTemplate: [{
|
|
5529
|
+
type: Input
|
|
5530
|
+
}], lazyRendering: [{
|
|
5531
|
+
type: Input
|
|
5532
|
+
}], hostVcr: [{
|
|
5533
|
+
type: ViewChild,
|
|
5534
|
+
args: ['host', { read: ViewContainerRef }]
|
|
5535
|
+
}], childrenTpl: [{
|
|
5536
|
+
type: ViewChild,
|
|
5537
|
+
args: ['childrenTpl']
|
|
5500
5538
|
}] } });
|
|
5501
5539
|
|
|
5502
5540
|
class TreeItemComponent extends AccessibilityComponent {
|
|
@@ -5505,6 +5543,7 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5505
5543
|
super();
|
|
5506
5544
|
this.changeDetector = changeDetector;
|
|
5507
5545
|
this.element = element;
|
|
5546
|
+
this.lazyRendering = false;
|
|
5508
5547
|
this.checkedChange = new EventEmitter();
|
|
5509
5548
|
this.checkedChangeForTree = new EventEmitter();
|
|
5510
5549
|
this.expandedChange = new EventEmitter();
|
|
@@ -5524,7 +5563,7 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5524
5563
|
this.quitFocus = new EventEmitter();
|
|
5525
5564
|
this.isFocus = false;
|
|
5526
5565
|
this.isHover = false;
|
|
5527
|
-
this.
|
|
5566
|
+
this.matchesValidText = false; // True si el contenido del item encaja con los criterios de búsqueda y se está filtrando
|
|
5528
5567
|
}
|
|
5529
5568
|
ngOnChanges(changes) {
|
|
5530
5569
|
if (this.sub && this.sub.itemList) {
|
|
@@ -5555,7 +5594,8 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5555
5594
|
this.handleItemFocus(true);
|
|
5556
5595
|
}
|
|
5557
5596
|
setCheckedAutomaticallyDependingOnChildren() {
|
|
5558
|
-
if (this.sub
|
|
5597
|
+
if (this.sub &&
|
|
5598
|
+
(!this.lazyRendering || (this.lazyRendering && this.sub.itemList && this.sub.itemList.length > 0))) {
|
|
5559
5599
|
this.sub.itemList.forEach((item) => item.setCheckedAutomaticallyDependingOnChildren());
|
|
5560
5600
|
if (this.areAllChildrenChecked()) {
|
|
5561
5601
|
if (this.indeterminateChecked) {
|
|
@@ -5592,8 +5632,11 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5592
5632
|
detectChanges() {
|
|
5593
5633
|
this.changeDetector.detectChanges();
|
|
5594
5634
|
}
|
|
5595
|
-
expandSub(value) {
|
|
5635
|
+
async expandSub(value) {
|
|
5596
5636
|
this.expanded = value;
|
|
5637
|
+
if (value && this.lazyRendering) {
|
|
5638
|
+
await this.sub?.renderChildrenIfNeeded();
|
|
5639
|
+
}
|
|
5597
5640
|
if (this.sub) {
|
|
5598
5641
|
this.sub.itemList.forEach((item) => item.refreshAllParentsExpandedRecursive(this.allParentsExpanded && value));
|
|
5599
5642
|
}
|
|
@@ -5602,11 +5645,11 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5602
5645
|
/*
|
|
5603
5646
|
* Gestion de eventos
|
|
5604
5647
|
*/
|
|
5605
|
-
handleCheckboxChange(checked) {
|
|
5606
|
-
this.setChecked(checked, false);
|
|
5648
|
+
async handleCheckboxChange(checked) {
|
|
5607
5649
|
if (this.inheritedExpandedFirstLevel && checked && !this.expanded) {
|
|
5608
|
-
this.expandSub(true);
|
|
5650
|
+
await this.expandSub(true);
|
|
5609
5651
|
}
|
|
5652
|
+
this.setChecked(checked, false);
|
|
5610
5653
|
}
|
|
5611
5654
|
handleIndeterminateCheckedChange(indeterminate) {
|
|
5612
5655
|
this.indeterminateCheckedChange.emit(indeterminate);
|
|
@@ -5658,7 +5701,7 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5658
5701
|
}
|
|
5659
5702
|
}
|
|
5660
5703
|
handleArrowRight(event, condition = true) {
|
|
5661
|
-
if (condition && this.sub && this.sub.itemList?.length > 0) {
|
|
5704
|
+
if (condition && this.sub && (this.lazyRendering || this.sub.itemList?.length > 0)) {
|
|
5662
5705
|
event.preventDefault();
|
|
5663
5706
|
if (this.expanded) {
|
|
5664
5707
|
this.quitFocus.emit({
|
|
@@ -5708,6 +5751,15 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5708
5751
|
item.setChecked(checked, true);
|
|
5709
5752
|
});
|
|
5710
5753
|
}
|
|
5754
|
+
if (this.lazyRendering &&
|
|
5755
|
+
this.sub &&
|
|
5756
|
+
this.sub.itemList &&
|
|
5757
|
+
this.sub.itemList.length === 0 &&
|
|
5758
|
+
!this.indeterminateChecked) {
|
|
5759
|
+
this.sub.lazyItems.forEach((item) => {
|
|
5760
|
+
item.checked = checked;
|
|
5761
|
+
});
|
|
5762
|
+
}
|
|
5711
5763
|
if (emitEvent) {
|
|
5712
5764
|
this.checkedChange.emit(checked);
|
|
5713
5765
|
}
|
|
@@ -5769,18 +5821,12 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5769
5821
|
matchesText(value, clean = false) {
|
|
5770
5822
|
if (!clean) {
|
|
5771
5823
|
let matches;
|
|
5772
|
-
|
|
5773
|
-
|
|
5774
|
-
}
|
|
5775
|
-
else {
|
|
5776
|
-
const itemText = this.hiddenWrapper.nativeElement.textContent;
|
|
5777
|
-
matches = SearchUtils.containsAnyWordFrom(itemText, value);
|
|
5778
|
-
}
|
|
5779
|
-
this._matchesValidText = value ? matches : false;
|
|
5824
|
+
matches = this.checkbox?.matchesText(value);
|
|
5825
|
+
this.matchesValidText = value ? matches : false;
|
|
5780
5826
|
return matches;
|
|
5781
5827
|
}
|
|
5782
5828
|
else {
|
|
5783
|
-
this.
|
|
5829
|
+
this.matchesValidText = false;
|
|
5784
5830
|
return false;
|
|
5785
5831
|
}
|
|
5786
5832
|
}
|
|
@@ -5808,7 +5854,7 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5808
5854
|
return parentKey;
|
|
5809
5855
|
}
|
|
5810
5856
|
isActive() {
|
|
5811
|
-
return this.active || this.
|
|
5857
|
+
return this.active || this.matchesValidText;
|
|
5812
5858
|
}
|
|
5813
5859
|
/*
|
|
5814
5860
|
* Métodos privados
|
|
@@ -5823,12 +5869,12 @@ class TreeItemComponent extends AccessibilityComponent {
|
|
|
5823
5869
|
return key;
|
|
5824
5870
|
}
|
|
5825
5871
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeItemComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5826
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeItemComponent, isStandalone: false, selector: "desy-tree-item", inputs: { id: "id", name: "name", value: "value", classes: "classes", active: "active", disabled: "disabled", titleModal: "titleModal", hasDividers: "hasDividers", isIndeterminate: "isIndeterminate", href: "href", routerlink: "routerlink", fragment: "fragment", routerLinkActiveClasses: "routerLinkActiveClasses", hasUnderline: "hasUnderline", target: "target", checked: "checked", expanded: "expanded", indeterminateChecked: "indeterminateChecked" }, outputs: { checkedChange: "checkedChange", expandedChange: "expandedChange", indeterminateCheckedChange: "indeterminateCheckedChange" }, host: { properties: { "attr.desy-tree-item-key": "this.treeItemKey" } }, providers: [
|
|
5872
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeItemComponent, isStandalone: false, selector: "desy-tree-item", inputs: { id: "id", name: "name", value: "value", classes: "classes", active: "active", disabled: "disabled", titleModal: "titleModal", hasDividers: "hasDividers", isIndeterminate: "isIndeterminate", href: "href", routerlink: "routerlink", fragment: "fragment", routerLinkActiveClasses: "routerLinkActiveClasses", hasUnderline: "hasUnderline", target: "target", lazyRendering: "lazyRendering", checked: "checked", expanded: "expanded", indeterminateChecked: "indeterminateChecked" }, outputs: { checkedChange: "checkedChange", expandedChange: "expandedChange", indeterminateCheckedChange: "indeterminateCheckedChange" }, host: { properties: { "attr.desy-tree-item-key": "this.treeItemKey" } }, providers: [
|
|
5827
5873
|
{
|
|
5828
5874
|
provide: ITreeItem,
|
|
5829
5875
|
useExisting: forwardRef(() => TreeItemComponent),
|
|
5830
5876
|
},
|
|
5831
|
-
], queries: [{ propertyName: "sub", predicate: TreeSubComponent }, { propertyName: "hint", predicate: HintComponent }, { propertyName: "label", predicate: LabelComponent }], viewQueries: [{ propertyName: "
|
|
5877
|
+
], queries: [{ propertyName: "sub", predicate: TreeSubComponent }, { propertyName: "hint", predicate: HintComponent }, { propertyName: "label", predicate: LabelComponent }], viewQueries: [{ propertyName: "checkbox", first: true, predicate: TreeCheckboxComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<li\n [hidden]=\"!(allParentsExpanded && !isHidden())\"\n [id]=\"id\"\n [class]=\"'c-tree__item focus:outline-none'\"\n [ngClass]=\"{\n 'ml-4': subLevel === 0,\n 'ml-8': subLevel !== 0 && this.type !== 'navigation',\n 'c-tree__item--focus': isFocus && !sub,\n 'c-tree__item--hover': isHover && !sub,\n 'my-sm': type === 'navigation',\n 'ml-5': subLevel !== 0 && this.type === 'navigation',\n }\"\n (focusin)=\"handleItemFocus(true, !sub)\"\n (focusout)=\"handleItemFocus(false, !sub)\"\n (mouseover)=\"handleItemHover(true, !sub)\"\n (mouseout)=\"handleItemHover(false, !sub)\"\n (keydown.home)=\"handleHome($event, !sub)\"\n (keydown.end)=\"handleEnd($event, !sub)\"\n (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\n (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\n (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\n (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\">\n <div\n *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\n [class]=\"['block', classes] | makeHtmlList\"\n [ngClass]=\"{ 'font-bold': isActive() }\"\n [desyAppAccessibility]=\"this\"\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : isActive() ? 'page' : null\"\n [attr.tabindex]=\"tabindex ? tabindex : disabled || treeDisabled ? '-1' : null\">\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n </div>\n</li>\n\n<ng-template #childrenTree>\n <div\n *ngIf=\"sub; else checkbox\"\n class=\"w-full h-full\"\n [ngClass]=\"{ 'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub }\"\n (focusin)=\"handleItemFocus(true)\"\n (focusout)=\"handleItemFocus(false)\"\n (mouseover)=\"handleItemHover(true)\"\n (mouseout)=\"handleItemHover(false)\"\n (keydown.home)=\"handleHome($event)\"\n (keydown.end)=\"handleEnd($event)\"\n (keydown.arrowup)=\"handleArrowUp($event)\"\n (keydown.arrowdown)=\"handleArrowDown($event)\"\n (keydown.arrowright)=\"handleArrowRight($event)\"\n (keydown.arrowLeft)=\"handleArrowLeft($event)\"\n (click)=\"type === 'navigation' ? handleItemClick() : null\">\n <div\n [class]=\"\n [\n 'w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left',\n classes,\n ] | makeHtmlList\n \"\n [desyAppAccessibility]=\"this\">\n <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\n <svg\n (click)=\"type !== 'navigation' ? expandSub(false) : null\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n width=\"10\"\n height=\"10\"\n aria-hidden=\"true\"\n class=\"c-tree__minus\">\n <path\n fill=\"currentColor\"\n d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\" />\n </svg>\n <svg\n (click)=\"type !== 'navigation' ? expandSub(true) : null\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n width=\"10\"\n height=\"10\"\n aria-hidden=\"true\"\n class=\"c-tree__plus\">\n <path\n fill=\"currentColor\"\n d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\" />\n </svg>\n </span>\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n </div>\n </div>\n\n <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\n</ng-template>\n\n<ng-template #checkbox>\n <!--\n El *ngIf=\"name || parentName\" se realiza para no crear el checkbox hasta que se ha ejecutado el configureAllItems.\n Esto puede dar problemas porque, hasta que no se ejecuta esto, el desy-tree-checkbox no cuenta con el type actualizado (por defecto radio).\n Un ejemplo en el que esto puede ser problem\u00E1tico es al ser typo checkbox y darle un valor checked=true a varios los items, ya\n que el type todav\u00EDa no se ha transmitido aqu\u00ED. Como por defecto el type es radio, s\u00F3lo marcar\u00E1 el \u00FAltimo. Posteriormente,\n ya detectar\u00E1 el tipo y permitir\u00E1 seleccionar varios items, pero hasta entonces existe este problema.\n -->\n <desy-tree-checkbox\n *ngIf=\"name || parentName\"\n [name]=\"name ? name : parentName\"\n [id]=\"getId()\"\n [value]=\"value\"\n [classes]=\"classes\"\n [type]=\"type\"\n [(checked)]=\"checked\"\n (checkedChange)=\"handleCheckboxChange($event)\"\n [hasError]=\"inheritedHasError\"\n [disabled]=\"disabled || treeDisabled\"\n [hasDividers]=\"hasDividers\"\n [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\n [isIndeterminate]=\"isIndeterminate\"\n [(indeterminateChecked)]=\"indeterminateChecked\"\n (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\n [active]=\"active\"\n [href]=\"href\"\n [routerlink]=\"routerlink\"\n [routerLinkActiveClasses]=\"routerLinkActiveClasses\"\n [fragment]=\"fragment\"\n [hasUnderline]=\"hasUnderline\"\n [target]=\"target\"\n [labelComponent]=\"label\"\n [hintComponent]=\"hint\"\n [role]=\"role\"\n [ariaLabel]=\"ariaLabel\"\n [ariaDescribedBy]=\"ariaDescribedBy\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n [ariaHidden]=\"ariaHidden\"\n [ariaDisabled]=\"ariaDisabled\"\n [ariaControls]=\"ariaControls\"\n [ariaCurrent]=\"ariaCurrent\"\n [ariaLive]=\"ariaLive\"\n [ariaExpanded]=\"ariaExpanded\"\n [ariaErrorMessage]=\"ariaErrorMessage\"\n [ariaHasPopup]=\"ariaHasPopup\"\n [ariaModal]=\"ariaModal\"\n [tabindex]=\"tabindex\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </desy-tree-checkbox>\n</ng-template>\n\n<ng-template #content>\n <div\n class=\"font-bold\"\n *ngIf=\"isActive(); else contentLabel\">\n <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\n </div>\n <ng-content select=\"desy-hint\"></ng-content>\n</ng-template>\n\n<ng-template #contentLabel>\n <ng-content select=\"desy-label\"></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "component", type: TreeCheckboxComponent, selector: "desy-tree-checkbox", inputs: ["id", "name", "type", "classes", "value", "checked", "isIndeterminate", "indeterminateChecked", "disabled", "hasDividers", "describedBy", "hasError", "labelComponent", "hintComponent", "active", "href", "routerlink", "fragment", "routerLinkActiveClasses", "hasUnderline", "target"], outputs: ["checkedChange", "indeterminateCheckedChange"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
5832
5878
|
}
|
|
5833
5879
|
__decorate([
|
|
5834
5880
|
DesyOnInputChange('setDefaultIdRecursive'),
|
|
@@ -5853,11 +5899,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5853
5899
|
provide: ITreeItem,
|
|
5854
5900
|
useExisting: forwardRef(() => TreeItemComponent),
|
|
5855
5901
|
},
|
|
5856
|
-
], standalone: false, template: "<li\n
|
|
5857
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: {
|
|
5858
|
-
type: ViewChild,
|
|
5859
|
-
args: ['hiddenWrapper']
|
|
5860
|
-
}], id: [{
|
|
5902
|
+
], standalone: false, template: "<li\n [hidden]=\"!(allParentsExpanded && !isHidden())\"\n [id]=\"id\"\n [class]=\"'c-tree__item focus:outline-none'\"\n [ngClass]=\"{\n 'ml-4': subLevel === 0,\n 'ml-8': subLevel !== 0 && this.type !== 'navigation',\n 'c-tree__item--focus': isFocus && !sub,\n 'c-tree__item--hover': isHover && !sub,\n 'my-sm': type === 'navigation',\n 'ml-5': subLevel !== 0 && this.type === 'navigation',\n }\"\n (focusin)=\"handleItemFocus(true, !sub)\"\n (focusout)=\"handleItemFocus(false, !sub)\"\n (mouseover)=\"handleItemHover(true, !sub)\"\n (mouseout)=\"handleItemHover(false, !sub)\"\n (keydown.home)=\"handleHome($event, !sub)\"\n (keydown.end)=\"handleEnd($event, !sub)\"\n (keydown.arrowup)=\"handleArrowUp($event, !sub)\"\n (keydown.arrowdown)=\"handleArrowDown($event, !sub)\"\n (keydown.arrowright)=\"handleArrowRight($event, !sub)\"\n (keydown.arrowleft)=\"handleArrowLeft($event, !sub)\"\n role=\"treeitem\"\n [attr.aria-expanded]=\"sub ? (expanded ? 'true' : 'false') : null\">\n <div\n *ngIf=\"!sub && subLevel !== 0; else childrenTree\"\n [class]=\"['block', classes] | makeHtmlList\"\n [ngClass]=\"{ 'font-bold': isActive() }\"\n [desyAppAccessibility]=\"this\"\n [attr.aria-current]=\"ariaCurrent ? ariaCurrent : isActive() ? 'page' : null\"\n [attr.tabindex]=\"tabindex ? tabindex : disabled || treeDisabled ? '-1' : null\">\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n </div>\n</li>\n\n<ng-template #childrenTree>\n <div\n *ngIf=\"sub; else checkbox\"\n class=\"w-full h-full\"\n [ngClass]=\"{ 'c-tree__item--focus': isFocus && sub, 'c-tree__item--hover': isHover && sub }\"\n (focusin)=\"handleItemFocus(true)\"\n (focusout)=\"handleItemFocus(false)\"\n (mouseover)=\"handleItemHover(true)\"\n (mouseout)=\"handleItemHover(false)\"\n (keydown.home)=\"handleHome($event)\"\n (keydown.end)=\"handleEnd($event)\"\n (keydown.arrowup)=\"handleArrowUp($event)\"\n (keydown.arrowdown)=\"handleArrowDown($event)\"\n (keydown.arrowright)=\"handleArrowRight($event)\"\n (keydown.arrowLeft)=\"handleArrowLeft($event)\"\n (click)=\"type === 'navigation' ? handleItemClick() : null\">\n <div\n [class]=\"\n [\n 'w-full flex items-center relative focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black text-left',\n classes,\n ] | makeHtmlList\n \"\n [desyAppAccessibility]=\"this\">\n <span class=\"absolute top-3 -left-4 flex items-center w-4 h-2.5 text-primary-base font-bold\">\n <svg\n (click)=\"type !== 'navigation' ? expandSub(false) : null\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n width=\"10\"\n height=\"10\"\n aria-hidden=\"true\"\n class=\"c-tree__minus\">\n <path\n fill=\"currentColor\"\n d=\"M9.286 5.714H.714a.714.714 0 010-1.428h8.572a.714.714 0 010 1.428z\" />\n </svg>\n <svg\n (click)=\"type !== 'navigation' ? expandSub(true) : null\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 10 10\"\n width=\"10\"\n height=\"10\"\n aria-hidden=\"true\"\n class=\"c-tree__plus\">\n <path\n fill=\"currentColor\"\n d=\"M9.286 4.286H5.893a.179.179 0 01-.179-.179V.714a.714.714 0 00-1.428 0v3.393a.179.179 0 01-.179.179H.714a.714.714 0 000 1.428h3.393a.179.179 0 01.179.179v3.393a.714.714 0 001.428 0V5.893a.179.179 0 01.179-.179h3.393a.714.714 0 000-1.428z\" />\n </svg>\n </span>\n <ng-container *ngTemplateOutlet=\"checkbox\"></ng-container>\n </div>\n </div>\n\n <ng-container *desyCustomInnerContent=\"{ component: sub }\"></ng-container>\n</ng-template>\n\n<ng-template #checkbox>\n <!--\n El *ngIf=\"name || parentName\" se realiza para no crear el checkbox hasta que se ha ejecutado el configureAllItems.\n Esto puede dar problemas porque, hasta que no se ejecuta esto, el desy-tree-checkbox no cuenta con el type actualizado (por defecto radio).\n Un ejemplo en el que esto puede ser problem\u00E1tico es al ser typo checkbox y darle un valor checked=true a varios los items, ya\n que el type todav\u00EDa no se ha transmitido aqu\u00ED. Como por defecto el type es radio, s\u00F3lo marcar\u00E1 el \u00FAltimo. Posteriormente,\n ya detectar\u00E1 el tipo y permitir\u00E1 seleccionar varios items, pero hasta entonces existe este problema.\n -->\n <desy-tree-checkbox\n *ngIf=\"name || parentName\"\n [name]=\"name ? name : parentName\"\n [id]=\"getId()\"\n [value]=\"value\"\n [classes]=\"classes\"\n [type]=\"type\"\n [(checked)]=\"checked\"\n (checkedChange)=\"handleCheckboxChange($event)\"\n [hasError]=\"inheritedHasError\"\n [disabled]=\"disabled || treeDisabled\"\n [hasDividers]=\"hasDividers\"\n [describedBy]=\"[inheritedDescribedBy, hint?.id] | makeHtmlList\"\n [isIndeterminate]=\"isIndeterminate\"\n [(indeterminateChecked)]=\"indeterminateChecked\"\n (indeterminateCheckedChange)=\"handleIndeterminateCheckedChange($event)\"\n [active]=\"active\"\n [href]=\"href\"\n [routerlink]=\"routerlink\"\n [routerLinkActiveClasses]=\"routerLinkActiveClasses\"\n [fragment]=\"fragment\"\n [hasUnderline]=\"hasUnderline\"\n [target]=\"target\"\n [labelComponent]=\"label\"\n [hintComponent]=\"hint\"\n [role]=\"role\"\n [ariaLabel]=\"ariaLabel\"\n [ariaDescribedBy]=\"ariaDescribedBy\"\n [ariaLabelledBy]=\"ariaLabelledBy\"\n [ariaHidden]=\"ariaHidden\"\n [ariaDisabled]=\"ariaDisabled\"\n [ariaControls]=\"ariaControls\"\n [ariaCurrent]=\"ariaCurrent\"\n [ariaLive]=\"ariaLive\"\n [ariaExpanded]=\"ariaExpanded\"\n [ariaErrorMessage]=\"ariaErrorMessage\"\n [ariaHasPopup]=\"ariaHasPopup\"\n [ariaModal]=\"ariaModal\"\n [tabindex]=\"tabindex\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </desy-tree-checkbox>\n</ng-template>\n\n<ng-template #content>\n <div\n class=\"font-bold\"\n *ngIf=\"isActive(); else contentLabel\">\n <ng-container *ngTemplateOutlet=\"contentLabel\"></ng-container>\n </div>\n <ng-content select=\"desy-hint\"></ng-content>\n</ng-template>\n\n<ng-template #contentLabel>\n <ng-content select=\"desy-label\"></ng-content>\n</ng-template>\n" }]
|
|
5903
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { id: [{
|
|
5861
5904
|
type: Input
|
|
5862
5905
|
}], name: [{
|
|
5863
5906
|
type: Input
|
|
@@ -5887,6 +5930,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5887
5930
|
type: Input
|
|
5888
5931
|
}], target: [{
|
|
5889
5932
|
type: Input
|
|
5933
|
+
}], lazyRendering: [{
|
|
5934
|
+
type: Input
|
|
5890
5935
|
}], checked: [{
|
|
5891
5936
|
type: Input
|
|
5892
5937
|
}], checkedChange: [{
|
|
@@ -5916,6 +5961,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
5916
5961
|
args: ['attr.desy-tree-item-key']
|
|
5917
5962
|
}] } });
|
|
5918
5963
|
|
|
5964
|
+
class TreeItemsGeneratorComponent {
|
|
5965
|
+
constructor(viewContainerRef) {
|
|
5966
|
+
this.viewContainerRef = viewContainerRef;
|
|
5967
|
+
}
|
|
5968
|
+
ngOnInit() {
|
|
5969
|
+
this.viewContainerRef.createEmbeddedView(this.content);
|
|
5970
|
+
}
|
|
5971
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeItemsGeneratorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5972
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeItemsGeneratorComponent, isStandalone: false, selector: "desy-tree-items-generator", inputs: { items: "items", itemTemplate: "itemTemplate" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content>\n <ng-container *ngIf=\"items && itemTemplate\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5973
|
+
}
|
|
5974
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeItemsGeneratorComponent, decorators: [{
|
|
5975
|
+
type: Component,
|
|
5976
|
+
args: [{ selector: 'desy-tree-items-generator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #content>\n <ng-container *ngIf=\"items && itemTemplate\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n" }]
|
|
5977
|
+
}], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { content: [{
|
|
5978
|
+
type: ViewChild,
|
|
5979
|
+
args: ['content', { static: true }]
|
|
5980
|
+
}], items: [{
|
|
5981
|
+
type: Input
|
|
5982
|
+
}], itemTemplate: [{
|
|
5983
|
+
type: Input
|
|
5984
|
+
}] } });
|
|
5985
|
+
|
|
5919
5986
|
class TreeComponent extends FormFieldComponent {
|
|
5920
5987
|
constructor(changeDetector) {
|
|
5921
5988
|
super();
|
|
@@ -5923,16 +5990,17 @@ class TreeComponent extends FormFieldComponent {
|
|
|
5923
5990
|
this.expandedFirstLevel = true;
|
|
5924
5991
|
this.decoupleChildFromParent = false;
|
|
5925
5992
|
this.disableDefaultSearch = false;
|
|
5993
|
+
this.lazyRendering = false;
|
|
5926
5994
|
this.searchMatchValuesChange = new EventEmitter();
|
|
5927
5995
|
this.rootItems = [];
|
|
5928
5996
|
this._itemListCheckedSubscriptions = [];
|
|
5929
5997
|
this._itemListQuitFocusSubscriptions = [];
|
|
5930
5998
|
this._alreadyConfiguringItems = false;
|
|
5999
|
+
this.hasInitializedLazyCheck = false;
|
|
5931
6000
|
}
|
|
5932
6001
|
ngOnDestroy() {
|
|
5933
6002
|
this.clearSubscriptions(this._itemListCheckedSubscriptions);
|
|
5934
6003
|
this.clearSubscriptions(this._itemListQuitFocusSubscriptions);
|
|
5935
|
-
this._itemListSubscription?.unsubscribe();
|
|
5936
6004
|
this._allItemListSubscription?.unsubscribe();
|
|
5937
6005
|
}
|
|
5938
6006
|
ngOnChanges(changes) {
|
|
@@ -5974,15 +6042,96 @@ class TreeComponent extends FormFieldComponent {
|
|
|
5974
6042
|
else if (!this.decoupleChildFromParent) {
|
|
5975
6043
|
this.rootItems.forEach((item) => item.setCheckedAutomaticallyDependingOnChildren());
|
|
5976
6044
|
}
|
|
5977
|
-
this.value = [];
|
|
5978
6045
|
const items = this.getAllItemsInOrder();
|
|
6046
|
+
this.value = [];
|
|
5979
6047
|
items.forEach((item) => {
|
|
5980
6048
|
if (item.checked) {
|
|
5981
6049
|
this.value.push(item.value);
|
|
6050
|
+
if (this.lazyRendering) {
|
|
6051
|
+
this.checkAllLazyItems(item, items);
|
|
6052
|
+
}
|
|
6053
|
+
}
|
|
6054
|
+
else if (item.indeterminateChecked && this.lazyRendering) {
|
|
6055
|
+
this.checkAllLazyItemsIndeterminated(item, items);
|
|
5982
6056
|
}
|
|
5983
6057
|
});
|
|
5984
6058
|
this.onChange(this.value);
|
|
5985
6059
|
}
|
|
6060
|
+
checkAllLazyItemsBeforeResetValue(item, items, insideLazy = false) {
|
|
6061
|
+
if (insideLazy) {
|
|
6062
|
+
item.sub.lazyItems = item.sub;
|
|
6063
|
+
}
|
|
6064
|
+
if (!(this.lazyRendering && item.sub?.lazyItems))
|
|
6065
|
+
return false;
|
|
6066
|
+
let selectedAll = 0;
|
|
6067
|
+
let selectedPartial = 0;
|
|
6068
|
+
item.sub.lazyItems.forEach((lazyItem) => {
|
|
6069
|
+
lazyItem.checked = this.value.includes(lazyItem.value);
|
|
6070
|
+
const hasNestedSelection = lazyItem.sub?.length
|
|
6071
|
+
? this.checkAllLazyItemsBeforeResetValue(lazyItem, items, true)
|
|
6072
|
+
: false;
|
|
6073
|
+
if (lazyItem.checked) {
|
|
6074
|
+
selectedAll++;
|
|
6075
|
+
}
|
|
6076
|
+
else if (lazyItem.indeterminateChecked || hasNestedSelection) {
|
|
6077
|
+
selectedPartial++;
|
|
6078
|
+
}
|
|
6079
|
+
});
|
|
6080
|
+
if (selectedAll === 0 && selectedPartial === 0) {
|
|
6081
|
+
item.checked = false;
|
|
6082
|
+
item.indeterminateChecked = false;
|
|
6083
|
+
}
|
|
6084
|
+
else if (selectedAll === item.sub.lazyItems.length) {
|
|
6085
|
+
item.checked = true;
|
|
6086
|
+
item.indeterminateChecked = false;
|
|
6087
|
+
}
|
|
6088
|
+
else {
|
|
6089
|
+
item.checked = false;
|
|
6090
|
+
item.indeterminateChecked = true;
|
|
6091
|
+
}
|
|
6092
|
+
return item.checked || item.indeterminateChecked;
|
|
6093
|
+
}
|
|
6094
|
+
checkAllLazyItemsIndeterminated(item, items, insideLazy = false) {
|
|
6095
|
+
if (insideLazy) {
|
|
6096
|
+
item.sub.lazyItems = item.sub;
|
|
6097
|
+
}
|
|
6098
|
+
const children = item.sub?.lazyItems;
|
|
6099
|
+
if (this.lazyRendering && children) {
|
|
6100
|
+
children.forEach((lazyItem) => {
|
|
6101
|
+
if (!this.value.includes(lazyItem.value)) {
|
|
6102
|
+
if (!items.some((i) => i.value === lazyItem.value)) {
|
|
6103
|
+
if (lazyItem.checked) {
|
|
6104
|
+
this.value.push(lazyItem.value);
|
|
6105
|
+
if (lazyItem.sub?.length) {
|
|
6106
|
+
this.checkAllLazyItems(lazyItem, items, true);
|
|
6107
|
+
}
|
|
6108
|
+
}
|
|
6109
|
+
else if (lazyItem.sub?.length && lazyItem.indeterminateChecked) {
|
|
6110
|
+
this.checkAllLazyItemsIndeterminated(lazyItem, items, true);
|
|
6111
|
+
}
|
|
6112
|
+
}
|
|
6113
|
+
}
|
|
6114
|
+
});
|
|
6115
|
+
}
|
|
6116
|
+
}
|
|
6117
|
+
checkAllLazyItems(item, items, insideLazy = false) {
|
|
6118
|
+
if (insideLazy) {
|
|
6119
|
+
item.sub.lazyItems = item.sub;
|
|
6120
|
+
}
|
|
6121
|
+
const children = item.sub?.lazyItems;
|
|
6122
|
+
if (this.lazyRendering && children) {
|
|
6123
|
+
children.forEach((lazyItem) => {
|
|
6124
|
+
if (!this.value.includes(lazyItem.value)) {
|
|
6125
|
+
if (!items.some((i) => i.value === lazyItem.value)) {
|
|
6126
|
+
this.value.push(lazyItem.value);
|
|
6127
|
+
}
|
|
6128
|
+
if (lazyItem.sub?.length) {
|
|
6129
|
+
this.checkAllLazyItems(lazyItem, items, true);
|
|
6130
|
+
}
|
|
6131
|
+
}
|
|
6132
|
+
});
|
|
6133
|
+
}
|
|
6134
|
+
}
|
|
5986
6135
|
/**
|
|
5987
6136
|
* Gestiona cuando el foco abandona un ítem desde un evento de teclado controlado
|
|
5988
6137
|
* @param options
|
|
@@ -6037,19 +6186,69 @@ class TreeComponent extends FormFieldComponent {
|
|
|
6037
6186
|
*/
|
|
6038
6187
|
onSearch(value) {
|
|
6039
6188
|
if (!this.disableDefaultSearch) {
|
|
6040
|
-
if (
|
|
6041
|
-
this.
|
|
6189
|
+
if (this.lazyRendering) {
|
|
6190
|
+
if (this.generator && this.generator.items) {
|
|
6191
|
+
if (value && value.length > 0) {
|
|
6192
|
+
this.searchInData(this.generator.items, value);
|
|
6193
|
+
const flatItems = this.flattenData(this.generator.items);
|
|
6194
|
+
this.searchMatchValues = flatItems.filter((item) => item.inheritedMatchesSearch).map((item) => item.value);
|
|
6195
|
+
this.searchBoldValues = flatItems.filter((item) => item.matchesValidText).map((item) => item.value);
|
|
6196
|
+
}
|
|
6197
|
+
else {
|
|
6198
|
+
this.searchMatchValues = null;
|
|
6199
|
+
this.searchBoldValues = null;
|
|
6200
|
+
}
|
|
6201
|
+
}
|
|
6042
6202
|
}
|
|
6043
6203
|
else {
|
|
6044
|
-
|
|
6045
|
-
|
|
6204
|
+
if (value && value.length > 0) {
|
|
6205
|
+
this.searchMatchValues = this.allItems.filter((item) => item.matchesText(value)).map((item) => item.value);
|
|
6206
|
+
}
|
|
6207
|
+
else {
|
|
6208
|
+
this.allItems.forEach((item) => item.matchesText('', true));
|
|
6209
|
+
this.searchMatchValues = null;
|
|
6210
|
+
}
|
|
6046
6211
|
}
|
|
6212
|
+
this.searchBarComponent.searchResultsNumber = this.searchMatchValues?.length ?? 0;
|
|
6047
6213
|
this.searchMatchValuesChange.emit(this.searchMatchValues);
|
|
6048
6214
|
}
|
|
6049
6215
|
}
|
|
6216
|
+
searchInData(items, value) {
|
|
6217
|
+
let found = false;
|
|
6218
|
+
for (const item of items) {
|
|
6219
|
+
const selfMatch = SearchUtils.containsAnyWordFrom((item.value ?? '') + ' ' + (item.text ?? ''), value);
|
|
6220
|
+
const childMatch = item.sub ? this.searchInData(item.sub, value) : false;
|
|
6221
|
+
item.inheritedMatchesSearch = selfMatch || childMatch;
|
|
6222
|
+
item.matchesValidText = selfMatch;
|
|
6223
|
+
if (item.inheritedMatchesSearch) {
|
|
6224
|
+
found = true;
|
|
6225
|
+
}
|
|
6226
|
+
}
|
|
6227
|
+
return found;
|
|
6228
|
+
}
|
|
6229
|
+
flattenData(items) {
|
|
6230
|
+
return items.reduce((acc, item) => {
|
|
6231
|
+
acc.push(item);
|
|
6232
|
+
if (item.sub)
|
|
6233
|
+
acc.push(...this.flattenData(item.sub));
|
|
6234
|
+
return acc;
|
|
6235
|
+
}, []);
|
|
6236
|
+
}
|
|
6050
6237
|
/*
|
|
6051
6238
|
* Eventos al cambiar propiedades
|
|
6052
6239
|
*/
|
|
6240
|
+
hasDescendantValue(item, valueList) {
|
|
6241
|
+
const children = Array.isArray(item.sub?.lazyItems) ? item.sub.lazyItems : Array.isArray(item.sub) ? item.sub : [];
|
|
6242
|
+
for (const child of children) {
|
|
6243
|
+
if (valueList.includes(child.value)) {
|
|
6244
|
+
return true;
|
|
6245
|
+
}
|
|
6246
|
+
if (this.hasDescendantValue(child, valueList)) {
|
|
6247
|
+
return true;
|
|
6248
|
+
}
|
|
6249
|
+
}
|
|
6250
|
+
return false;
|
|
6251
|
+
}
|
|
6053
6252
|
/**
|
|
6054
6253
|
* Configura los items del árbol
|
|
6055
6254
|
*/
|
|
@@ -6062,6 +6261,7 @@ class TreeComponent extends FormFieldComponent {
|
|
|
6062
6261
|
this.clearSubscriptions(this._itemListCheckedSubscriptions);
|
|
6063
6262
|
this.clearSubscriptions(this._itemListQuitFocusSubscriptions);
|
|
6064
6263
|
this.allItems.forEach((item) => {
|
|
6264
|
+
item.lazyRendering = this.lazyRendering;
|
|
6065
6265
|
item.parentName = this.name;
|
|
6066
6266
|
item.type = this.type;
|
|
6067
6267
|
item.inheritedDescribedBy = this.getDescribedByForItems();
|
|
@@ -6070,7 +6270,15 @@ class TreeComponent extends FormFieldComponent {
|
|
|
6070
6270
|
item.treeDisabled = this.disabled;
|
|
6071
6271
|
if ((this.value && this.value.length > 0) || isValueChange) {
|
|
6072
6272
|
const valueList = this.value ? this.value : [];
|
|
6073
|
-
|
|
6273
|
+
const isChecked = valueList.includes(item.value);
|
|
6274
|
+
// Solo para lazyRendering y solo si hay hijos/nietos seleccionados
|
|
6275
|
+
if (this.lazyRendering && !isChecked && this.hasDescendantValue(item, valueList)) {
|
|
6276
|
+
item.setIndeterminateChecked(true);
|
|
6277
|
+
}
|
|
6278
|
+
else {
|
|
6279
|
+
item.setIndeterminateChecked(false);
|
|
6280
|
+
}
|
|
6281
|
+
item.setChecked(isChecked, true);
|
|
6074
6282
|
}
|
|
6075
6283
|
item.detectChanges();
|
|
6076
6284
|
const checkedSubscription = item.checkedChangeForTree.subscribe(() => this.updateValueFromItems(item));
|
|
@@ -6092,6 +6300,14 @@ class TreeComponent extends FormFieldComponent {
|
|
|
6092
6300
|
}
|
|
6093
6301
|
this.changeDetector.detectChanges();
|
|
6094
6302
|
this._alreadyConfiguringItems = false;
|
|
6303
|
+
// Its important to set the checked or interminated on lazyItems before reseting the value. Its only for use when first load the tree with saved values.
|
|
6304
|
+
if (this.lazyRendering && this.value?.length > 0 && !this.hasInitializedLazyCheck) {
|
|
6305
|
+
const items = this.getAllItemsInOrder();
|
|
6306
|
+
items.forEach((item) => {
|
|
6307
|
+
this.checkAllLazyItemsBeforeResetValue(item, items);
|
|
6308
|
+
});
|
|
6309
|
+
this.hasInitializedLazyCheck = true;
|
|
6310
|
+
}
|
|
6095
6311
|
});
|
|
6096
6312
|
}
|
|
6097
6313
|
}
|
|
@@ -6102,13 +6318,28 @@ class TreeComponent extends FormFieldComponent {
|
|
|
6102
6318
|
if (this.allItems) {
|
|
6103
6319
|
this.allItems.forEach((item) => {
|
|
6104
6320
|
item.inheritedMatchesSearch = true;
|
|
6321
|
+
if (this.lazyRendering) {
|
|
6322
|
+
item.matchesValidText = false;
|
|
6323
|
+
}
|
|
6105
6324
|
});
|
|
6106
|
-
if (this.
|
|
6107
|
-
this.
|
|
6108
|
-
|
|
6109
|
-
|
|
6110
|
-
|
|
6111
|
-
|
|
6325
|
+
if (this.lazyRendering) {
|
|
6326
|
+
if (this.searchMatchValues) {
|
|
6327
|
+
this.allItems.forEach((item) => {
|
|
6328
|
+
const isVisible = this.searchMatchValues.includes(item.value);
|
|
6329
|
+
const isBold = this.searchBoldValues?.includes(item.value) ?? false;
|
|
6330
|
+
item.inheritedMatchesSearch = isVisible;
|
|
6331
|
+
item.matchesValidText = isBold;
|
|
6332
|
+
});
|
|
6333
|
+
}
|
|
6334
|
+
}
|
|
6335
|
+
else {
|
|
6336
|
+
if (this.searchMatchValues !== null && this.searchMatchValues !== undefined) {
|
|
6337
|
+
this.allItems.forEach((item) => {
|
|
6338
|
+
if (!this.searchMatchValues.includes(item.value)) {
|
|
6339
|
+
item.inheritedMatchesSearch = false;
|
|
6340
|
+
}
|
|
6341
|
+
});
|
|
6342
|
+
}
|
|
6112
6343
|
}
|
|
6113
6344
|
}
|
|
6114
6345
|
}
|
|
@@ -6276,13 +6507,13 @@ class TreeComponent extends FormFieldComponent {
|
|
|
6276
6507
|
return list;
|
|
6277
6508
|
}
|
|
6278
6509
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeComponent, isStandalone: false, selector: "desy-tree", inputs: { idPrefix: "idPrefix", classes: "classes", name: "name", type: "type", describedBy: "describedBy", formGroupClasses: "formGroupClasses", expandedFirstLevel: "expandedFirstLevel", decoupleChildFromParent: "decoupleChildFromParent", disableDefaultSearch: "disableDefaultSearch", searchMatchValues: "searchMatchValues" }, outputs: { searchMatchValuesChange: "searchMatchValuesChange" }, providers: [
|
|
6510
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeComponent, isStandalone: false, selector: "desy-tree", inputs: { idPrefix: "idPrefix", classes: "classes", name: "name", type: "type", describedBy: "describedBy", formGroupClasses: "formGroupClasses", expandedFirstLevel: "expandedFirstLevel", decoupleChildFromParent: "decoupleChildFromParent", disableDefaultSearch: "disableDefaultSearch", lazyRendering: "lazyRendering", searchMatchValues: "searchMatchValues" }, outputs: { searchMatchValuesChange: "searchMatchValuesChange" }, providers: [
|
|
6280
6511
|
{
|
|
6281
6512
|
provide: NG_VALUE_ACCESSOR,
|
|
6282
6513
|
useExisting: forwardRef(() => TreeComponent),
|
|
6283
6514
|
multi: true,
|
|
6284
6515
|
},
|
|
6285
|
-
], queries: [{ propertyName: "allItems", predicate: TreeItemComponent, descendants: true }, { propertyName: "fieldsetComponent", predicate: FieldsetComponent }, { propertyName: "searchBarComponent", predicate: SearchBarComponent }], viewQueries: [{ propertyName: "innerHtml", first: true, predicate: ["innerHtml"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #innerHtml>\n <ng-content select=\"desy-hint\"></ng-content>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-content select=\"desy-search-bar\"></ng-content>\n <ul\n [attr.id]=\"id ? id : idPrefix ? idPrefix : null\"\n [
|
|
6516
|
+
], queries: [{ propertyName: "generator", first: true, predicate: TreeItemsGeneratorComponent, descendants: true }, { propertyName: "allItems", predicate: TreeItemComponent, descendants: true }, { propertyName: "fieldsetComponent", predicate: FieldsetComponent }, { propertyName: "searchBarComponent", predicate: SearchBarComponent }], viewQueries: [{ propertyName: "innerHtml", first: true, predicate: ["innerHtml"], descendants: true, static: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<ng-template #innerHtml>\n <ng-content select=\"desy-hint\"></ng-content>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-content select=\"desy-search-bar\"></ng-content>\n <ul\n [attr.id]=\"id ? id : idPrefix ? idPrefix : null\"\n [desyAppAccessibility]=\"this\">\n <ng-content></ng-content>\n </ul>\n</ng-template>\n\n<!-- tree -->\n<div\n [attr.role]=\"role ? role : 'tree'\"\n [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\n [ngClass]=\"{ 'c-form-group--error': hasErrorsMessage() || formGroupClasses === 'c-form-group--error' }\">\n <nav\n *ngIf=\"type === 'navigation'; else notNavigation\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : '\u00C1rbol de navegaci\u00F3n'\">\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n </nav>\n <ng-template #notNavigation>\n <ng-container *ngIf=\"hasFieldsetComponent(); else innerHtml\">\n <ng-content select=\"desy-fieldset\"></ng-content>\n </ng-container>\n </ng-template>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
6286
6517
|
}
|
|
6287
6518
|
__decorate([
|
|
6288
6519
|
DesyOnInputChange('onSearchMatchValuesChange'),
|
|
@@ -6308,7 +6539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6308
6539
|
useExisting: forwardRef(() => TreeComponent),
|
|
6309
6540
|
multi: true,
|
|
6310
6541
|
},
|
|
6311
|
-
], standalone: false, template: "<ng-template #innerHtml>\n <ng-content select=\"desy-hint\"></ng-content>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-content select=\"desy-search-bar\"></ng-content>\n <ul\n [attr.id]=\"id ? id : idPrefix ? idPrefix : null\"\n [
|
|
6542
|
+
], standalone: false, template: "<ng-template #innerHtml>\n <ng-content select=\"desy-hint\"></ng-content>\n <ng-content select=\"desy-error-message\"></ng-content>\n <ng-content select=\"desy-search-bar\"></ng-content>\n <ul\n [attr.id]=\"id ? id : idPrefix ? idPrefix : null\"\n [desyAppAccessibility]=\"this\">\n <ng-content></ng-content>\n </ul>\n</ng-template>\n\n<!-- tree -->\n<div\n [attr.role]=\"role ? role : 'tree'\"\n [class]=\"['c-form-group', formGroupClasses] | makeHtmlList\"\n [ngClass]=\"{ 'c-form-group--error': hasErrorsMessage() || formGroupClasses === 'c-form-group--error' }\">\n <nav\n *ngIf=\"type === 'navigation'; else notNavigation\"\n [attr.aria-label]=\"ariaLabel ? ariaLabel : '\u00C1rbol de navegaci\u00F3n'\">\n <ng-container *ngTemplateOutlet=\"innerHtml\"></ng-container>\n </nav>\n <ng-template #notNavigation>\n <ng-container *ngIf=\"hasFieldsetComponent(); else innerHtml\">\n <ng-content select=\"desy-fieldset\"></ng-content>\n </ng-container>\n </ng-template>\n</div>\n" }]
|
|
6312
6543
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { idPrefix: [{
|
|
6313
6544
|
type: Input
|
|
6314
6545
|
}], classes: [{
|
|
@@ -6327,6 +6558,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6327
6558
|
type: Input
|
|
6328
6559
|
}], disableDefaultSearch: [{
|
|
6329
6560
|
type: Input
|
|
6561
|
+
}], lazyRendering: [{
|
|
6562
|
+
type: Input
|
|
6330
6563
|
}], searchMatchValues: [{
|
|
6331
6564
|
type: Input
|
|
6332
6565
|
}], searchMatchValuesChange: [{
|
|
@@ -6343,6 +6576,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6343
6576
|
}], innerHtml: [{
|
|
6344
6577
|
type: ViewChild,
|
|
6345
6578
|
args: ['innerHtml', { static: true }]
|
|
6579
|
+
}], generator: [{
|
|
6580
|
+
type: ContentChild,
|
|
6581
|
+
args: [TreeItemsGeneratorComponent]
|
|
6346
6582
|
}] } });
|
|
6347
6583
|
|
|
6348
6584
|
class ConditionDirective {
|
|
@@ -6378,28 +6614,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
6378
6614
|
type: Input
|
|
6379
6615
|
}] } });
|
|
6380
6616
|
|
|
6381
|
-
class TreeItemsGeneratorComponent {
|
|
6382
|
-
constructor(viewContainerRef) {
|
|
6383
|
-
this.viewContainerRef = viewContainerRef;
|
|
6384
|
-
}
|
|
6385
|
-
ngOnInit() {
|
|
6386
|
-
this.viewContainerRef.createEmbeddedView(this.content);
|
|
6387
|
-
}
|
|
6388
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeItemsGeneratorComponent, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6389
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreeItemsGeneratorComponent, isStandalone: false, selector: "desy-tree-items-generator", inputs: { items: "items", itemTemplate: "itemTemplate" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #content>\n <ng-container *ngIf=\"items && itemTemplate\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6390
|
-
}
|
|
6391
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreeItemsGeneratorComponent, decorators: [{
|
|
6392
|
-
type: Component,
|
|
6393
|
-
args: [{ selector: 'desy-tree-items-generator', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-template #content>\n <ng-container *ngIf=\"items && itemTemplate\">\n <ng-container *ngFor=\"let item of items\">\n <ng-container *ngTemplateOutlet=\"itemTemplate; context: { item: item }\"></ng-container>\n </ng-container>\n </ng-container>\n</ng-template>\n" }]
|
|
6394
|
-
}], ctorParameters: () => [{ type: i0.ViewContainerRef }], propDecorators: { content: [{
|
|
6395
|
-
type: ViewChild,
|
|
6396
|
-
args: ['content', { static: true }]
|
|
6397
|
-
}], items: [{
|
|
6398
|
-
type: Input
|
|
6399
|
-
}], itemTemplate: [{
|
|
6400
|
-
type: Input
|
|
6401
|
-
}] } });
|
|
6402
|
-
|
|
6403
6617
|
class ClickOutsideDirective {
|
|
6404
6618
|
constructor(hostElementRef) {
|
|
6405
6619
|
this.hostElementRef = hostElementRef;
|
|
@@ -11905,7 +12119,7 @@ class TableAdvancedComponent extends AccessibilityComponent {
|
|
|
11905
12119
|
}
|
|
11906
12120
|
}
|
|
11907
12121
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TableAdvancedComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11908
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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)=\"\n usePagination && !allowFilterAndOrder ? handleButtonSearch(item) : handleInputSearch(item, true)\n \"\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", "desyAccessibilityExclude"] }, { 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", "focus", "blur", "input", "change"] }, { 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" }] }); }
|
|
12122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", 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)=\"\n usePagination && !allowFilterAndOrder ? handleButtonSearch(item) : handleInputSearch(item, true)\n \"\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", "desyAccessibilityExclude"] }, { 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", "focus", "blur", "input", "change"] }, { kind: "component", type: SearchBarComponent, selector: "desy-search-bar", inputs: ["describedBy", "classes", "buttonClasses", "searchResultsNumber"], 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" }] }); }
|
|
11909
12123
|
}
|
|
11910
12124
|
__decorate([
|
|
11911
12125
|
DesyContentChild(),
|
|
@@ -12307,11 +12521,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
12307
12521
|
}] } });
|
|
12308
12522
|
|
|
12309
12523
|
class TreegridComponent extends AccessibilityComponent {
|
|
12524
|
+
set expandAllRows(value) {
|
|
12525
|
+
this._expandAllRows = value;
|
|
12526
|
+
this.setExpandedAllRows(value);
|
|
12527
|
+
}
|
|
12528
|
+
get expandAllRows() {
|
|
12529
|
+
return this._expandAllRows;
|
|
12530
|
+
}
|
|
12531
|
+
setExpandedAllRows(expanded) {
|
|
12532
|
+
const expandRecursive = (rows) => {
|
|
12533
|
+
rows.forEach((row) => {
|
|
12534
|
+
if (row.children.length > 0) {
|
|
12535
|
+
row.expanded = expanded;
|
|
12536
|
+
expandRecursive(row.children.toArray());
|
|
12537
|
+
}
|
|
12538
|
+
});
|
|
12539
|
+
};
|
|
12540
|
+
expandRecursive(this.rowComponentList?.toArray() ?? []);
|
|
12541
|
+
this.updateVisibility();
|
|
12542
|
+
}
|
|
12310
12543
|
constructor(cdr) {
|
|
12311
12544
|
super();
|
|
12312
12545
|
this.cdr = cdr;
|
|
12313
12546
|
this.doAllowRowFocus = true;
|
|
12314
12547
|
this.doStartRowFocus = true;
|
|
12548
|
+
this._expandAllRows = false;
|
|
12315
12549
|
this.rowsFlat = [];
|
|
12316
12550
|
}
|
|
12317
12551
|
ngAfterContentInit() {
|
|
@@ -12618,7 +12852,7 @@ class TreegridComponent extends AccessibilityComponent {
|
|
|
12618
12852
|
}
|
|
12619
12853
|
}
|
|
12620
12854
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: TreegridComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12621
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreegridComponent, isStandalone: false, selector: "desy-treegrid", inputs: { firstCellIsHeader: "firstCellIsHeader", classes: "classes", id: "id", wrapper: "wrapper", doAllowRowFocus: "doAllowRowFocus", doStartRowFocus: "doStartRowFocus" }, queries: [{ propertyName: "captionComponent", predicate: TreegridCaptionComponent }, { propertyName: "headerComponent", predicate: TreegridHeaderComponent }, { propertyName: "footerComponent", predicate: TreegridFooterComponent }, { propertyName: "rowComponentList", predicate: TreegridRowComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #tableContent>\n <table\n [class]=\"['c-treegrid', classes] | makeHtmlList\"\n [attr.id]=\"id ? id : null\"\n (keydown)=\"onKeyDown($event)\"\n [desyAppAccessibility]=\"this\"\n role=\"treegrid\">\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 <ng-container *ngIf=\"head || headerComponent\">\n <colgroup>\n <ng-container *ngFor=\"let headerCell of getHeaderCells(); index as headerIndex\">\n <col class=\"treegrid-col-{{ headerIndex }}\" />\n </ng-container>\n </colgroup>\n <thead>\n <tr class=\"border-t border-b border-neutral-base\">\n <ng-container *ngFor=\"let headerCell of getHeaderCells()\">\n <th\n scope=\"col\"\n [class]=\"\n ['align-top px-base py-sm text-left font-normal text-sm text-neutral-dark', headerCell.classes]\n | makeHtmlList\n \"\n [attr.id]=\"headerCell.id ? headerCell.id : null\"\n [desyAppAccessibility]=\"headerCell\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: headerCell,\n html: headerCell.html,\n text: headerCell.text,\n parentComponent: this,\n }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n </ng-container>\n <tbody>\n <tr\n *ngFor=\"let row of getRows(); index as rowIndex\"\n [desyTreegridBind]=\"row\"\n (focusin)=\"onFocusInRow(row)\"\n (focusout)=\"row.isFocused = false\"\n role=\"row\"\n class=\"mb-0 text-left border-t border-b border-neutral-base\"\n (dblclick)=\"toggleRow(row)\"\n [class.hidden]=\"!row.isVisible\"\n [attr.aria-level]=\"row.ariaLevel\"\n [style.--level]=\"row.ariaLevel\"\n [attr.aria-posinset]=\"row.ariaPosinset\"\n [attr.aria-setsize]=\"row.ariaSetsize\"\n [attr.aria-expanded]=\"doAllowRowFocus ? row.ariaExpanded : null\"\n [attr.tabindex]=\"doAllowRowFocus ? (row === lastFocusedRow || row.isFocused ? 0 : -1) : null\"\n [desyAccessibilityExclude]=\"!doAllowRowFocus ? ['ariaExpanded'] : []\"\n [desyAppAccessibility]=\"row\">\n <ng-container *ngFor=\"let cell of getRowCells(row); first as isFirst; index as cellIndex\">\n <ng-template #expandIcon>\n <span\n class=\"c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4\"\n (click)=\"toggleRow(row)\"\n role=\"presentation\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n focusable=\"false\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <rect\n width=\"24\"\n height=\"24\"\n fill=\"none\" />\n <path\n d=\"M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n </ng-template>\n <th\n *ngIf=\"firstCellIsHeader && isFirst; else elseTd\"\n [desyTreegridBind]=\"cell\"\n (focusin)=\"onFocusInCell(cell)\"\n (focusout)=\"cell.isFocused = false\"\n [attr.tabindex]=\"\n cell.isFocused || (!doAllowRowFocus && cell === lastFocusedCell) ? 0 : doAllowRowFocus ? null : -1\n \"\n [attr.aria-expanded]=\"!doAllowRowFocus && cellIndex === 0 ? row.ariaExpanded : null\"\n scope=\"row\"\n [class]=\"\n [\n 'align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark',\n cell.classes,\n row.expanded !== undefined && isFirst ? 'flex items-start' : '',\n ] | makeHtmlList\n \"\n [attr.id]=\"cell.id ? cell.id : null\"\n [attr.data-label]=\"cell.header\"\n [desyAppAccessibility]=\"cell\">\n <ng-container *ngIf=\"row.children?.length > 0 && isFirst\">\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </ng-container>\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n role=\"gridcell\"\n [desyTreegridBind]=\"cell\"\n (focusin)=\"onFocusInCell(cell)\"\n (focusout)=\"cell.isFocused = false\"\n [attr.tabindex]=\"\n cell.isFocused || (!doAllowRowFocus && cell === lastFocusedCell) ? 0 : doAllowRowFocus ? null : -1\n \"\n [attr.aria-expanded]=\"!doAllowRowFocus && cellIndex === 0 ? row.ariaExpanded : null\"\n [class]=\"\n [\n 'text-left px-base py-sm',\n cell.classes,\n row.ariaExpanded !== undefined && isFirst ? 'flex items-start' : '',\n ] | makeHtmlList\n \"\n [attr.id]=\"cell.id ? cell.id : null\"\n [attr.data-label]=\"cell.header\"\n [desyAppAccessibility]=\"cell\">\n <ng-container *ngIf=\"row.children?.length > 0 && isFirst\">\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </ng-container>\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 <tfoot *ngIf=\"foot || footerComponent\">\n <tr class=\"border-t-2 border-b border-neutral-base\">\n <ng-container *ngFor=\"let footCell of getFooterCells()\">\n <td\n [class]=\"['text-left px-base py-sm', footCell.classes] | makeHtmlList\"\n [attr.id]=\"footCell.id ? footCell.id : null\"\n [attr.data-label]=\"footCell.header\"\n [desyAppAccessibility]=\"footCell\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: footCell,\n html: footCell.html,\n text: footCell.text,\n }\"></ng-container>\n </td>\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 [desyAppAccessibility]=\"wrapper\">\n <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "directive", type: TreegridBindDirective, selector: "[desyTreegridBind]", inputs: ["desyTreegridBind"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
12855
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: TreegridComponent, isStandalone: false, selector: "desy-treegrid", inputs: { firstCellIsHeader: "firstCellIsHeader", classes: "classes", id: "id", wrapper: "wrapper", doAllowRowFocus: "doAllowRowFocus", doStartRowFocus: "doStartRowFocus", expandAllRows: "expandAllRows" }, queries: [{ propertyName: "captionComponent", predicate: TreegridCaptionComponent }, { propertyName: "headerComponent", predicate: TreegridHeaderComponent }, { propertyName: "footerComponent", predicate: TreegridFooterComponent }, { propertyName: "rowComponentList", predicate: TreegridRowComponent }], usesInheritance: true, ngImport: i0, template: "<ng-template #tableContent>\n <table\n [class]=\"['c-treegrid', classes] | makeHtmlList\"\n [attr.id]=\"id ? id : null\"\n (keydown)=\"onKeyDown($event)\"\n [desyAppAccessibility]=\"this\"\n role=\"treegrid\">\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 <ng-container *ngIf=\"head || headerComponent\">\n <colgroup>\n <ng-container *ngFor=\"let headerCell of getHeaderCells(); index as headerIndex\">\n <col class=\"treegrid-col-{{ headerIndex }}\" />\n </ng-container>\n </colgroup>\n <thead>\n <tr class=\"border-t border-b border-neutral-base\">\n <ng-container *ngFor=\"let headerCell of getHeaderCells()\">\n <th\n scope=\"col\"\n [class]=\"\n ['align-top px-base py-sm text-left font-normal text-sm text-neutral-dark', headerCell.classes]\n | makeHtmlList\n \"\n [attr.id]=\"headerCell.id ? headerCell.id : null\"\n [desyAppAccessibility]=\"headerCell\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: headerCell,\n html: headerCell.html,\n text: headerCell.text,\n parentComponent: this,\n }\"></ng-container>\n </th>\n </ng-container>\n </tr>\n </thead>\n </ng-container>\n <tbody>\n <tr\n *ngFor=\"let row of getRows(); index as rowIndex\"\n [desyTreegridBind]=\"row\"\n (focusin)=\"onFocusInRow(row)\"\n (focusout)=\"row.isFocused = false\"\n role=\"row\"\n class=\"mb-0 text-left border-t border-b border-neutral-base\"\n (dblclick)=\"toggleRow(row)\"\n [class.hidden]=\"!row.isVisible\"\n [attr.aria-level]=\"row.ariaLevel\"\n [style.--level]=\"row.ariaLevel\"\n [attr.aria-posinset]=\"row.ariaPosinset\"\n [attr.aria-setsize]=\"row.ariaSetsize\"\n [attr.aria-expanded]=\"doAllowRowFocus ? row.ariaExpanded : null\"\n [attr.tabindex]=\"doAllowRowFocus ? (row === lastFocusedRow || row.isFocused ? 0 : -1) : null\"\n [desyAccessibilityExclude]=\"!doAllowRowFocus ? ['ariaExpanded'] : []\"\n [desyAppAccessibility]=\"row\">\n <ng-container *ngFor=\"let cell of getRowCells(row); first as isFirst; index as cellIndex\">\n <ng-template #expandIcon>\n <span\n class=\"c-treegrid__icon inline-block relative after:content-[''] after:absolute after:-top-1 after:-left-2 after:p-4\"\n (click)=\"toggleRow(row)\"\n role=\"presentation\">\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n aria-hidden=\"true\"\n focusable=\"false\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <rect\n width=\"24\"\n height=\"24\"\n fill=\"none\" />\n <path\n d=\"M15.0111 12.387C15.0621 12.3362 15.1025 12.2759 15.13 12.2094C15.1576 12.143 15.1718 12.0718 15.1718 11.9998C15.1718 11.9279 15.1576 11.8567 15.13 11.7903C15.1025 11.7238 15.0621 11.6635 15.0111 11.6127L11.1839 7.78547C11.1074 7.70887 11.0099 7.65669 10.9038 7.63554C10.7976 7.61439 10.6875 7.62522 10.5875 7.66666C10.4875 7.70811 10.4021 7.77829 10.342 7.86834C10.2819 7.95838 10.2499 8.06423 10.25 8.17248L10.25 15.8272C10.2498 15.9355 10.2818 16.0414 10.3419 16.1315C10.4019 16.2216 10.4874 16.2918 10.5874 16.3333C10.6874 16.3748 10.7975 16.3856 10.9037 16.3645C11.0099 16.3433 11.1074 16.2911 11.1839 16.2145L15.0111 12.387Z\"\n fill=\"currentColor\" />\n </svg>\n </span>\n </ng-template>\n <th\n *ngIf=\"firstCellIsHeader && isFirst; else elseTd\"\n [desyTreegridBind]=\"cell\"\n (focusin)=\"onFocusInCell(cell)\"\n (focusout)=\"cell.isFocused = false\"\n [attr.tabindex]=\"\n cell.isFocused || (!doAllowRowFocus && cell === lastFocusedCell) ? 0 : doAllowRowFocus ? null : -1\n \"\n [attr.aria-expanded]=\"!doAllowRowFocus && cellIndex === 0 ? row.ariaExpanded : null\"\n scope=\"row\"\n [class]=\"\n [\n 'align-top px-base py-sm text-left font-normal text-sm leading-relaxed text-neutral-dark',\n cell.classes,\n row.expanded !== undefined && isFirst ? 'flex items-start' : '',\n ] | makeHtmlList\n \"\n [attr.id]=\"cell.id ? cell.id : null\"\n [attr.data-label]=\"cell.header\"\n [desyAppAccessibility]=\"cell\">\n <ng-container *ngIf=\"row.children?.length > 0 && isFirst\">\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </ng-container>\n <ng-container\n *desyCustomInnerContent=\"{ component: cell, html: cell.html, text: cell.text }\"></ng-container>\n </th>\n <ng-template #elseTd>\n <td\n role=\"gridcell\"\n [desyTreegridBind]=\"cell\"\n (focusin)=\"onFocusInCell(cell)\"\n (focusout)=\"cell.isFocused = false\"\n [attr.tabindex]=\"\n cell.isFocused || (!doAllowRowFocus && cell === lastFocusedCell) ? 0 : doAllowRowFocus ? null : -1\n \"\n [attr.aria-expanded]=\"!doAllowRowFocus && cellIndex === 0 ? row.ariaExpanded : null\"\n [class]=\"\n [\n 'text-left px-base py-sm',\n cell.classes,\n row.ariaExpanded !== undefined && isFirst ? 'flex items-start' : '',\n ] | makeHtmlList\n \"\n [attr.id]=\"cell.id ? cell.id : null\"\n [attr.data-label]=\"cell.header\"\n [desyAppAccessibility]=\"cell\">\n <ng-container *ngIf=\"row.children?.length > 0 && isFirst\">\n <ng-container *ngTemplateOutlet=\"expandIcon\"></ng-container>\n </ng-container>\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 <tfoot *ngIf=\"foot || footerComponent\">\n <tr class=\"border-t-2 border-b border-neutral-base\">\n <ng-container *ngFor=\"let footCell of getFooterCells()\">\n <td\n [class]=\"['text-left px-base py-sm', footCell.classes] | makeHtmlList\"\n [attr.id]=\"footCell.id ? footCell.id : null\"\n [attr.data-label]=\"footCell.header\"\n [desyAppAccessibility]=\"footCell\">\n <ng-container\n *desyCustomInnerContent=\"{\n component: footCell,\n html: footCell.html,\n text: footCell.text,\n }\"></ng-container>\n </td>\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 [desyAppAccessibility]=\"wrapper\">\n <ng-container *ngTemplateOutlet=\"tableContent\"></ng-container>\n</div>\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CustomInnerContentDirective, selector: "[desyCustomInnerContent]", inputs: ["desyCustomInnerContent"] }, { kind: "directive", type: AccessibilityDirective, selector: "[desyAppAccessibility]", inputs: ["desyAppAccessibility", "desyAccessibilityExclude"] }, { kind: "directive", type: TreegridBindDirective, selector: "[desyTreegridBind]", inputs: ["desyTreegridBind"] }, { kind: "pipe", type: MakeHtmlListPipe, name: "makeHtmlList" }] }); }
|
|
12622
12856
|
}
|
|
12623
12857
|
__decorate([
|
|
12624
12858
|
DesyContentChild(),
|
|
@@ -12647,6 +12881,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
|
|
|
12647
12881
|
type: Input
|
|
12648
12882
|
}], doStartRowFocus: [{
|
|
12649
12883
|
type: Input
|
|
12884
|
+
}], expandAllRows: [{
|
|
12885
|
+
type: Input
|
|
12650
12886
|
}], captionComponent: [{
|
|
12651
12887
|
type: ContentChildren,
|
|
12652
12888
|
args: [TreegridCaptionComponent]
|