@edugouvfr/ngx-dsfr-ext
Version:
NgxDsfrExt est une extension au package @edugouvfr/ngx-dsfr (portage Angular des éléments DSFR)
70 lines • 8.85 kB
JavaScript
import { Directive, EventEmitter, Output } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Directive pour détecter un click en dehors du composant (ex. pour fermer une liste déroulante)
* Nécessite l'ajout d'un attribut data-expanded sur le composant possedant clickOutside
*/
export class EduClickOutsideDirective {
constructor(_elementRef, ngZone, renderer2) {
this._elementRef = _elementRef;
this.ngZone = ngZone;
this.renderer2 = renderer2;
this.clickOutsideEvent = new EventEmitter();
}
ngOnInit() {
this.ngZone.runOutsideAngular(() => {
this.listener = this.renderer2.listen('window', 'mouseup', (e) => {
this.onDocumentClick(e);
});
this.listener = this.renderer2.listen('window', 'resize', (e) => {
this.onDocumentResize(e);
});
});
}
ngOnDestroy() {
if (this.listener)
this.listener();
}
/**
* En cas de redimensionnement ou de zoom de la fenetre
* Si on est en mode appendTo, on force la fermeture de la dropdown pour eviter son mauvais positionnement
* @internal */
onDocumentResize(e) {
if (this._elementRef.nativeElement.hasAttribute('data-expanded') &&
!this._elementRef.nativeElement.querySelector('ul.dsfrx-multiselect__list')) {
this.onNeedToCloseDropdown(e);
}
}
/**
* Emet l'evenement click outside en cas de clic en dehors du composant
* @internal */
onDocumentClick(e) {
const elem = e?.target;
// positionnement d'un attribut data-expanded qui indique l'affiche de la liste sur le composant
if (elem &&
this._elementRef.nativeElement.hasAttribute('data-expanded') &&
!this._elementRef.nativeElement.contains(elem) &&
!elem.closest('.dsfrx-dropdown')) {
this.onNeedToCloseDropdown(e);
}
}
/** Emet l'evenement clickOutsideEvent pour forcer la fermeture de la dropdown */
onNeedToCloseDropdown(e) {
this.ngZone.run(() => {
e.preventDefault();
this.clickOutsideEvent.emit();
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EduClickOutsideDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: EduClickOutsideDirective, isStandalone: true, selector: "[clickOutside]", outputs: { clickOutsideEvent: "clickOutsideEvent" }, ngImport: i0 }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EduClickOutsideDirective, decorators: [{
type: Directive,
args: [{
selector: '[clickOutside]',
standalone: true,
}]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }], propDecorators: { clickOutsideEvent: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2xpY2stb3V0c2lkZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZHNmci1leHQvc3JjL2xpYi9zaGFyZWQvZGlyZWN0aXZlcy9jbGljay1vdXRzaWRlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLFlBQVksRUFBNkIsTUFBTSxFQUFhLE1BQU0sZUFBZSxDQUFDOztBQUVsSDs7O0dBR0c7QUFLSCxNQUFNLE9BQU8sd0JBQXdCO0lBS25DLFlBQ1UsV0FBdUIsRUFDdkIsTUFBYyxFQUNkLFNBQW9CO1FBRnBCLGdCQUFXLEdBQVgsV0FBVyxDQUFZO1FBQ3ZCLFdBQU0sR0FBTixNQUFNLENBQVE7UUFDZCxjQUFTLEdBQVQsU0FBUyxDQUFXO1FBUHBCLHNCQUFpQixHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFRcEQsQ0FBQztJQUVKLFFBQVE7UUFDTixJQUFJLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLEdBQUcsRUFBRTtZQUNqQyxJQUFJLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxTQUFTLEVBQUUsQ0FBQyxDQUFDLEVBQUUsRUFBRTtnQkFDL0QsSUFBSSxDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQztZQUMxQixDQUFDLENBQUMsQ0FBQztZQUNILElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsUUFBUSxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsRUFBRSxFQUFFO2dCQUM5RCxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQyxDQUFDLENBQUM7WUFDM0IsQ0FBQyxDQUFDLENBQUM7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxJQUFJLENBQUMsUUFBUTtZQUFFLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNyQyxDQUFDO0lBRUQ7OztvQkFHZ0I7SUFDUixnQkFBZ0IsQ0FBQyxDQUFRO1FBQy9CLElBQ0UsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsWUFBWSxDQUFDLGVBQWUsQ0FBQztZQUM1RCxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyw0QkFBNEIsQ0FBQyxFQUMzRSxDQUFDO1lBQ0QsSUFBSSxDQUFDLHFCQUFxQixDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ2hDLENBQUM7SUFDSCxDQUFDO0lBRUQ7O29CQUVnQjtJQUNSLGVBQWUsQ0FBQyxDQUFhO1FBQ25DLE1BQU0sSUFBSSxHQUFHLENBQUMsRUFBRSxNQUFxQixDQUFDO1FBRXRDLGdHQUFnRztRQUNoRyxJQUNFLElBQUk7WUFDSixJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxZQUFZLENBQUMsZUFBZSxDQUFDO1lBQzVELENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxhQUFhLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQztZQUM5QyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsaUJBQWlCLENBQUMsRUFDaEMsQ0FBQztZQUNELElBQUksQ0FBQyxxQkFBcUIsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNoQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGlGQUFpRjtJQUN6RSxxQkFBcUIsQ0FBQyxDQUFRO1FBQ3BDLElBQUksQ0FBQyxNQUFNLENBQUMsR0FBRyxDQUFDLEdBQUcsRUFBRTtZQUNuQixDQUFDLENBQUMsY0FBYyxFQUFFLENBQUM7WUFDbkIsSUFBSSxDQUFDLGlCQUFpQixDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2hDLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzsrR0E5RFUsd0JBQXdCO21HQUF4Qix3QkFBd0I7OzRGQUF4Qix3QkFBd0I7a0JBSnBDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGdCQUFnQjtvQkFDMUIsVUFBVSxFQUFFLElBQUk7aUJBQ2pCOzRIQUVXLGlCQUFpQjtzQkFBMUIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgRXZlbnRFbWl0dGVyLCBOZ1pvbmUsIE9uRGVzdHJveSwgT25Jbml0LCBPdXRwdXQsIFJlbmRlcmVyMiB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG4vKipcbiAqIERpcmVjdGl2ZSBwb3VyIGTDqXRlY3RlciB1biBjbGljayBlbiBkZWhvcnMgZHUgY29tcG9zYW50IChleC4gcG91ciBmZXJtZXIgdW5lIGxpc3RlIGTDqXJvdWxhbnRlKVxuICogTsOpY2Vzc2l0ZSBsJ2Fqb3V0IGQndW4gYXR0cmlidXQgZGF0YS1leHBhbmRlZCBzdXIgbGUgY29tcG9zYW50IHBvc3NlZGFudCBjbGlja091dHNpZGVcbiAqL1xuQERpcmVjdGl2ZSh7XG4gIHNlbGVjdG9yOiAnW2NsaWNrT3V0c2lkZV0nLFxuICBzdGFuZGFsb25lOiB0cnVlLFxufSlcbmV4cG9ydCBjbGFzcyBFZHVDbGlja091dHNpZGVEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIEBPdXRwdXQoKSBjbGlja091dHNpZGVFdmVudCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcblxuICBwcml2YXRlIGxpc3RlbmVyOiBGdW5jdGlvbjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmLFxuICAgIHByaXZhdGUgbmdab25lOiBOZ1pvbmUsXG4gICAgcHJpdmF0ZSByZW5kZXJlcjI6IFJlbmRlcmVyMixcbiAgKSB7fVxuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMubmdab25lLnJ1bk91dHNpZGVBbmd1bGFyKCgpID0+IHtcbiAgICAgIHRoaXMubGlzdGVuZXIgPSB0aGlzLnJlbmRlcmVyMi5saXN0ZW4oJ3dpbmRvdycsICdtb3VzZXVwJywgKGUpID0+IHtcbiAgICAgICAgdGhpcy5vbkRvY3VtZW50Q2xpY2soZSk7XG4gICAgICB9KTtcbiAgICAgIHRoaXMubGlzdGVuZXIgPSB0aGlzLnJlbmRlcmVyMi5saXN0ZW4oJ3dpbmRvdycsICdyZXNpemUnLCAoZSkgPT4ge1xuICAgICAgICB0aGlzLm9uRG9jdW1lbnRSZXNpemUoZSk7XG4gICAgICB9KTtcbiAgICB9KTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCkge1xuICAgIGlmICh0aGlzLmxpc3RlbmVyKSB0aGlzLmxpc3RlbmVyKCk7XG4gIH1cblxuICAvKipcbiAgICogRW4gY2FzIGRlIHJlZGltZW5zaW9ubmVtZW50IG91IGRlIHpvb20gZGUgbGEgZmVuZXRyZVxuICAgKiBTaSBvbiBlc3QgZW4gbW9kZSBhcHBlbmRUbywgb24gZm9yY2UgbGEgZmVybWV0dXJlIGRlIGxhIGRyb3Bkb3duIHBvdXIgZXZpdGVyIHNvbiBtYXV2YWlzIHBvc2l0aW9ubmVtZW50XG4gICAqICBAaW50ZXJuYWwgKi9cbiAgcHJpdmF0ZSBvbkRvY3VtZW50UmVzaXplKGU6IEV2ZW50KTogdm9pZCB7XG4gICAgaWYgKFxuICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50Lmhhc0F0dHJpYnV0ZSgnZGF0YS1leHBhbmRlZCcpICYmXG4gICAgICAhdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnF1ZXJ5U2VsZWN0b3IoJ3VsLmRzZnJ4LW11bHRpc2VsZWN0X19saXN0JylcbiAgICApIHtcbiAgICAgIHRoaXMub25OZWVkVG9DbG9zZURyb3Bkb3duKGUpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBFbWV0IGwnZXZlbmVtZW50IGNsaWNrIG91dHNpZGUgZW4gY2FzIGRlIGNsaWMgZW4gZGVob3JzIGR1IGNvbXBvc2FudFxuICAgKiAgQGludGVybmFsICovXG4gIHByaXZhdGUgb25Eb2N1bWVudENsaWNrKGU6IE1vdXNlRXZlbnQpOiB2b2lkIHtcbiAgICBjb25zdCBlbGVtID0gZT8udGFyZ2V0IGFzIEhUTUxFbGVtZW50O1xuXG4gICAgLy8gcG9zaXRpb25uZW1lbnQgZCd1biBhdHRyaWJ1dCBkYXRhLWV4cGFuZGVkIHF1aSBpbmRpcXVlIGwnYWZmaWNoZSBkZSBsYSBsaXN0ZSBzdXIgbGUgY29tcG9zYW50XG4gICAgaWYgKFxuICAgICAgZWxlbSAmJlxuICAgICAgdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50Lmhhc0F0dHJpYnV0ZSgnZGF0YS1leHBhbmRlZCcpICYmXG4gICAgICAhdGhpcy5fZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGVsZW0pICYmXG4gICAgICAhZWxlbS5jbG9zZXN0KCcuZHNmcngtZHJvcGRvd24nKVxuICAgICkge1xuICAgICAgdGhpcy5vbk5lZWRUb0Nsb3NlRHJvcGRvd24oZSk7XG4gICAgfVxuICB9XG5cbiAgLyoqIEVtZXQgbCdldmVuZW1lbnQgY2xpY2tPdXRzaWRlRXZlbnQgcG91ciBmb3JjZXIgbGEgZmVybWV0dXJlIGRlIGxhIGRyb3Bkb3duICovXG4gIHByaXZhdGUgb25OZWVkVG9DbG9zZURyb3Bkb3duKGU6IEV2ZW50KSB7XG4gICAgdGhpcy5uZ1pvbmUucnVuKCgpID0+IHtcbiAgICAgIGUucHJldmVudERlZmF1bHQoKTtcbiAgICAgIHRoaXMuY2xpY2tPdXRzaWRlRXZlbnQuZW1pdCgpO1xuICAgIH0pO1xuICB9XG59XG4iXX0=