@edugouvfr/ngx-dsfr
Version:
NgxDsfr est un portage Angular des éléments d'interface du Système de Design de l'État Français (DSFR).
89 lines • 13.1 kB
JavaScript
import { computed, Directive, effect, inject, Input, Renderer2, ViewContainerRef, } from '@angular/core';
import { SortButtonHeaderComponent } from '../component/sort-button.component';
import { DsfrColumnDirective } from './column.directive';
import * as i0 from "@angular/core";
/**
* Directive ajout du tri sur l'en-tête de colonne (icône et logique)
*/
export class DsfrSortColumnDirective extends DsfrColumnDirective {
constructor() {
super();
/**
* Calcul de la valeur de aria-sort sur la colonne selon le tri courant activeSort()
* @returns null / ascending / descending
*/
this.ariaSort = computed(() => {
const activeSort = this.table.dataTableService.activeSort();
if (activeSort && activeSort.field === this.col.field) {
return activeSort.order === 'ascending' ? 'ascending' : 'descending';
}
return null;
});
this.viewContainer = inject(ViewContainerRef);
this.renderer = inject(Renderer2);
effect(() => {
if (this.componentRef && this.componentRef.instance) {
// a la modification de aria-sort sur le th, appliquer également sur le bouton de tri
this.componentRef.setInput('ariaSort', this.ariaSort());
}
});
}
ngOnInit() {
if (this.col && this.col.sortable) {
this.componentRef = this.viewContainer.createComponent(SortButtonHeaderComponent);
this.componentRef.instance.field = this.col.field;
this.componentRef.instance.label = this.col.label;
this.subscription = this.componentRef.instance.sortChanged.subscribe((field) => {
this.applySort(field);
});
this.addWrappingElement(this.element.nativeElement, this.componentRef.location.nativeElement);
}
}
ngOnDestroy() {
this.subscription?.unsubscribe();
}
/**
* Appliquer le tri selon la colonne concernées et mise a jour de activeSort()
**/
applySort(colId) {
const currentSort = this.table.dataTableService.activeSort();
const activeSort = {
field: colId,
order: currentSort?.field === colId && currentSort?.order === 'ascending' ? 'descending' : 'ascending',
};
this.table.dataTableService.sortTable(activeSort);
this.table.onSortChange();
}
/**
* Ajouter une div wrapper fr-cell--sort autour des éléments pour style DSFR
* @param nativeElement composant <th>
* @param componentElement composant sort-buton
*/
addWrappingElement(nativeElement, componentElement) {
const wrapperDiv = this.renderer.createElement('div');
this.renderer.addClass(wrapperDiv, 'fr-cell--sort');
// Déplacer tous les enfants actuels du th dans le <div>
while (nativeElement.firstChild) {
this.renderer.appendChild(wrapperDiv, nativeElement.firstChild);
}
// Ajouter le <div> au <th>
this.renderer.appendChild(nativeElement, wrapperDiv);
// Ajouter le composant au <th>
this.renderer.appendChild(wrapperDiv, componentElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrSortColumnDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: DsfrSortColumnDirective, isStandalone: true, selector: "[dsfrColumn]", inputs: { col: ["dsfrColumn", "col"] }, host: { properties: { "attr.aria-sort": "ariaSort()" } }, usesInheritance: true, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DsfrSortColumnDirective, decorators: [{
type: Directive,
args: [{
selector: '[dsfrColumn]',
standalone: true,
// eslint-disable-next-line @angular-eslint/no-host-metadata-property
host: { '[attr.aria-sort]': 'ariaSort()' },
}]
}], ctorParameters: () => [], propDecorators: { col: [{
type: Input,
args: ['dsfrColumn']
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic29ydC1jb2x1bW4uZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbmd4LWRzZnItY29tcG9uZW50cy9zcmMvbGliL2NvbXBvbmVudHMvdGFibGUvZGlyZWN0aXZlL3NvcnQtY29sdW1uLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBRUwsUUFBUSxFQUNSLFNBQVMsRUFDVCxNQUFNLEVBQ04sTUFBTSxFQUNOLEtBQUssRUFHTCxTQUFTLEVBRVQsZ0JBQWdCLEdBQ2pCLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBRS9FLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLG9CQUFvQixDQUFDOztBQUV6RDs7R0FFRztBQU9ILE1BQU0sT0FBTyx1QkFBd0IsU0FBUSxtQkFBbUI7SUF1QjlEO1FBQ0UsS0FBSyxFQUFFLENBQUM7UUFyQlY7OztXQUdHO1FBQ0gsYUFBUSxHQUEwQixRQUFRLENBQUMsR0FBRyxFQUFFO1lBQzlDLE1BQU0sVUFBVSxHQUEwQixJQUFJLENBQUMsS0FBSyxDQUFDLGdCQUFnQixDQUFDLFVBQVUsRUFBRSxDQUFDO1lBRW5GLElBQUksVUFBVSxJQUFJLFVBQVUsQ0FBQyxLQUFLLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEVBQUUsQ0FBQztnQkFDdEQsT0FBTyxVQUFVLENBQUMsS0FBSyxLQUFLLFdBQVcsQ0FBQyxDQUFDLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxZQUFZLENBQUM7WUFDdkUsQ0FBQztZQUVELE9BQU8sSUFBSSxDQUFDO1FBQ2QsQ0FBQyxDQUFDLENBQUM7UUFLYyxrQkFBYSxHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ3pDLGFBQVEsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7UUFJNUMsTUFBTSxD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QUk7b0JBQ2hCLHFFQUFxRTtvQkFDckUsSUFBSSxFQUFFLEVBQUUsa0JBQWtCLEVBQUUsWUFBWSxFQUFFO2lCQUMzQzt3REFFc0IsR0FBRztzQkFBdkIsS0FBSzt1QkFBQyxZQUFZIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50UmVmLFxuICBjb21wdXRlZCxcbiAgRGlyZWN0aXZlLFxuICBlZmZlY3QsXG4gIGluamVjdCxcbiAgSW5wdXQsXG4gIE9uRGVzdHJveSxcbiAgT25Jbml0LFxuICBSZW5kZXJlcjIsXG4gIFNpZ25hbCxcbiAgVmlld0NvbnRhaW5lclJlZixcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IFNvcnRCdXR0b25IZWFkZXJDb21wb25lbnQgfSBmcm9tICcuLi9jb21wb25lbnQvc29ydC1idXR0b24uY29tcG9uZW50JztcbmltcG9ydCB7IERzZnJDb2x1bW4sIERzZnJTb3J0Q29sdW1uIH0gZnJvbSAnLi4vdGFibGUubW9kZWwnO1xuaW1wb3J0IHsgRHNmckNvbHVtbkRpcmVjdGl2ZSB9IGZyb20gJy4vY29sdW1uLmRpcmVjdGl2ZSc7XG5cbi8qKlxuICogRGlyZWN0aXZlIGFqb3V0IGR1IHRyaSBzdXIgbCdlbi10w6p0ZSBkZSBjb2xvbm5lIChpY8O0bmUgZXQgbG9naXF1ZSlcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2RzZnJDb2x1bW5dJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9uby1ob3N0LW1ldGFkYXRhLXByb3BlcnR5XG4gIGhvc3Q6IHsgJ1thdHRyLmFyaWEtc29ydF0nOiAnYXJpYVNvcnQoKScgfSxcbn0pXG5leHBvcnQgY2xhc3MgRHNmclNvcnRDb2x1bW5EaXJlY3RpdmUgZXh0ZW5kcyBEc2ZyQ29sdW1uRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoJ2RzZnJDb2x1bW4nKSBjb2w6IERzZnJDb2x1bW47XG5cbiAgLyoqXG4gICAqIENhbGN1bCBkZSBsYSB2YWxldXIgZGUgYXJpYS1zb3J0IHN1ciBsYSBjb2xvbm5lIHNlbG9uIGxlIHRyaSBjb3VyYW50IGFjdGl2ZVNvcnQoKVxuICAgKiBAcmV0dXJucyBudWxsIC8gYXNjZW5kaW5nIC8gZGVzY2VuZGluZ1xuICAgKi9cbiAgYXJpYVNvcnQ6IFNpZ25hbDxzdHJpbmcgfCBudWxsPiA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICBjb25zdCBhY3RpdmVTb3J0OiBEc2ZyU29ydENvbHVtbiB8IG51bGwgPSB0aGlzLnRhYmxlLmRhdGFUYWJsZVNlcnZpY2UuYWN0aXZlU29ydCgpO1xuXG4gICAgaWYgKGFjdGl2ZVNvcnQgJiYgYWN0aXZlU29ydC5maWVsZCA9PT0gdGhpcy5jb2wuZmllbGQpIHtcbiAgICAgIHJldHVybiBhY3RpdmVTb3J0Lm9yZGVyID09PSAnYXNjZW5kaW5nJyA/ICdhc2NlbmRpbmcnIDogJ2Rlc2NlbmRpbmcnO1xuICAgIH1cblxuICAgIHJldHVybiBudWxsO1xuICB9KTtcblxuICBwcml2YXRlIGNvbXBvbmVudFJlZjogQ29tcG9uZW50UmVmPFNvcnRCdXR0b25IZWFkZXJDb21wb25lbnQ+O1xuICBwcml2YXRlIHN1YnNjcmlwdGlvbjogU3Vic2NyaXB0aW9uO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgdmlld0NvbnRhaW5lciA9IGluamVjdChWaWV3Q29udGFpbmVyUmVmKTtcbiAgcHJpdmF0ZSByZWFkb25seSByZW5kZXJlciA9IGluamVjdChSZW5kZXJlcjIpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHN1cGVyKCk7XG4gICAgZWZmZWN0KCgpID0+IHtcbiAgICAgIGlmICh0aGlzLmNvbXBvbmVudFJlZiAmJiB0aGlzLmNvbXBvbmVudFJlZi5pbnN0YW5jZSkge1xuICAgICAgICAvLyBhIGxhIG1vZGlmaWNhdGlvbiBkZSBhcmlhLXNvcnQgc3VyIGxlIHRoLCBhcHBsaXF1ZXIgw6lnYWxlbWVudCBzdXIgbGUgYm91dG9uIGRlIHRyaVxuICAgICAgICB0aGlzLmNvbXBvbmVudFJlZi5zZXRJbnB1dCgnYXJpYVNvcnQnLCB0aGlzLmFyaWFTb3J0KCkpO1xuICAgICAgfVxuICAgIH0pO1xuICB9XG5cbiAgcHVibGljIG5nT25Jbml0KCkge1xuICAgIGlmICh0aGlzLmNvbCAmJiB0aGlzLmNvbC5zb3J0YWJsZSkge1xuICAgICAgdGhpcy5jb21wb25lbnRSZWYgPSB0aGlzLnZpZXdDb250YWluZXIuY3JlYXRlQ29tcG9uZW50PFNvcnRCdXR0b25IZWFkZXJDb21wb25lbnQ+KFNvcnRCdXR0b25IZWFkZXJDb21wb25lbnQpO1xuICAgICAgdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2UuZmllbGQgPSB0aGlzLmNvbC5maWVsZDtcbiAgICAgIHRoaXMuY29tcG9uZW50UmVmLmluc3RhbmNlLmxhYmVsID0gdGhpcy5jb2wubGFiZWw7XG5cbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gdGhpcy5jb21wb25lbnRSZWYuaW5zdGFuY2Uuc29ydENoYW5nZWQuc3Vic2NyaWJlKChmaWVsZDogc3RyaW5nKSA9PiB7XG4gICAgICAgIHRoaXMuYXBwbHlTb3J0KGZpZWxkKTtcbiAgICAgIH0pO1xuXG4gICAgICB0aGlzLmFkZFdyYXBwaW5nRWxlbWVudCh0aGlzLmVsZW1lbnQubmF0aXZlRWxlbWVudCwgdGhpcy5jb21wb25lbnRSZWYubG9jYXRpb24ubmF0aXZlRWxlbWVudCk7XG4gICAgfVxuICB9XG5cbiAgcHVibGljIG5nT25EZXN0cm95KCkge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEFwcGxpcXVlciBsZSB0cmkgc2Vsb24gbGEgY29sb25uZSBjb25jZXJuw6llcyBldCBtaXNlIGEgam91ciBkZSBhY3RpdmVTb3J0KClcbiAgICoqL1xuICBwcml2YXRlIGFwcGx5U29ydChjb2xJZDogc3RyaW5nKSB7XG4gICAgY29uc3QgY3VycmVudFNvcnQgPSB0aGlzLnRhYmxlLmRhdGFUYWJsZVNlcnZpY2UuYWN0aXZlU29ydCgpO1xuICAgIGNvbnN0IGFjdGl2ZVNvcnQ6IERzZnJTb3J0Q29sdW1uID0ge1xuICAgICAgZmllbGQ6IGNvbElkLFxuICAgICAgb3JkZXI6IGN1cnJlbnRTb3J0Py5maWVsZCA9PT0gY29sSWQgJiYgY3VycmVudFNvcnQ/Lm9yZGVyID09PSAnYXNjZW5kaW5nJyA/ICdkZXNjZW5kaW5nJyA6ICdhc2NlbmRpbmcnLFxuICAgIH07XG5cbiAgICB0aGlzLnRhYmxlLmRhdGFUYWJsZVNlcnZpY2Uuc29ydFRhYmxlKGFjdGl2ZVNvcnQpO1xuICAgIHRoaXMudGFibGUub25Tb3J0Q2hhbmdlKCk7XG4gIH1cblxuICAvKipcbiAgICogQWpvdXRlciB1bmUgZGl2IHdyYXBwZXIgZnItY2VsbC0tc29ydCBhdXRvdXIgZGVzIMOpbMOpbWVudHMgcG91ciBzdHlsZSBEU0ZSXG4gICAqIEBwYXJhbSBuYXRpdmVFbGVtZW50IGNvbXBvc2FudCA8dGg+XG4gICAqIEBwYXJhbSBjb21wb25lbnRFbGVtZW50IGNvbXBvc2FudCBzb3J0LWJ1dG9uXG4gICAqL1xuICBwcml2YXRlIGFkZFdyYXBwaW5nRWxlbWVudChuYXRpdmVFbGVtZW50OiBIVE1MRWxlbWVudCwgY29tcG9uZW50RWxlbWVudDogSFRNTEVsZW1lbnQpIHtcbiAgICBjb25zdCB3cmFwcGVyRGl2ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdkaXYnKTtcbiAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHdyYXBwZXJEaXYsICdmci1jZWxsLS1zb3J0Jyk7XG5cbiAgICAvLyBEw6lwbGFjZXIgdG91cyBsZXMgZW5mYW50cyBhY3R1ZWxzIGR1IHRoIGRhbnMgbGUgPGRpdj5cbiAgICB3aGlsZSAobmF0aXZlRWxlbWVudC5maXJzdENoaWxkKSB7XG4gICAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHdyYXBwZXJEaXYsIG5hdGl2ZUVsZW1lbnQuZmlyc3RDaGlsZCk7XG4gICAgfVxuXG4gICAgLy8gQWpvdXRlciBsZSA8ZGl2PiBhdSA8dGg+XG4gICAgdGhpcy5yZW5kZXJlci5hcHBlbmRDaGlsZChuYXRpdmVFbGVtZW50LCB3cmFwcGVyRGl2KTtcblxuICAgIC8vIEFqb3V0ZXIgbGUgY29tcG9zYW50IGF1IDx0aD5cbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHdyYXBwZXJEaXYsIGNvbXBvbmVudEVsZW1lbnQpO1xuICB9XG59XG4iXX0=