@mozaic-ds/angular 2.0.0-beta.3 → 2.0.0-beta.5
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.
|
@@ -415,19 +415,42 @@ class MozDrawerContainerComponent {
|
|
|
415
415
|
drawerElement = viewChild('drawerElement', ...(ngDevMode ? [{ debugName: "drawerElement" }] : []));
|
|
416
416
|
pendingClose = undefined;
|
|
417
417
|
isClosing = false;
|
|
418
|
+
transitionEndHandler;
|
|
419
|
+
closeTimeoutId;
|
|
418
420
|
constructor() {
|
|
419
421
|
afterNextRender(() => {
|
|
420
422
|
const element = this.drawerElement()?.nativeElement;
|
|
421
423
|
if (element) {
|
|
422
|
-
|
|
424
|
+
this.transitionEndHandler = this.onTransitionEnd.bind(this);
|
|
425
|
+
element.addEventListener('transitionend', this.transitionEndHandler);
|
|
423
426
|
}
|
|
424
427
|
setTimeout(() => this.isOpen.set(true), 0);
|
|
425
428
|
});
|
|
426
429
|
}
|
|
430
|
+
ngOnDestroy() {
|
|
431
|
+
const element = this.drawerElement()?.nativeElement;
|
|
432
|
+
if (element && this.transitionEndHandler) {
|
|
433
|
+
element.removeEventListener('transitionend', this.transitionEndHandler);
|
|
434
|
+
}
|
|
435
|
+
if (this.closeTimeoutId) {
|
|
436
|
+
clearTimeout(this.closeTimeoutId);
|
|
437
|
+
}
|
|
438
|
+
}
|
|
427
439
|
onTransitionEnd(event) {
|
|
428
440
|
if (this.isClosing && event.propertyName === 'opacity') {
|
|
429
|
-
this.
|
|
441
|
+
this.cleanupAndClose();
|
|
442
|
+
}
|
|
443
|
+
}
|
|
444
|
+
cleanupAndClose() {
|
|
445
|
+
if (this.closeTimeoutId) {
|
|
446
|
+
clearTimeout(this.closeTimeoutId);
|
|
447
|
+
this.closeTimeoutId = undefined;
|
|
430
448
|
}
|
|
449
|
+
const element = this.drawerElement()?.nativeElement;
|
|
450
|
+
if (element && this.transitionEndHandler) {
|
|
451
|
+
element.removeEventListener('transitionend', this.transitionEndHandler);
|
|
452
|
+
}
|
|
453
|
+
this.dialogRef.close(this.pendingClose);
|
|
431
454
|
}
|
|
432
455
|
isTemplate(content) {
|
|
433
456
|
return content instanceof TemplateRef;
|
|
@@ -457,9 +480,18 @@ class MozDrawerContainerComponent {
|
|
|
457
480
|
}
|
|
458
481
|
}
|
|
459
482
|
close(result) {
|
|
483
|
+
if (this.isClosing) {
|
|
484
|
+
return;
|
|
485
|
+
}
|
|
460
486
|
this.isClosing = true;
|
|
461
487
|
this.pendingClose = result;
|
|
462
488
|
this.isOpen.set(false);
|
|
489
|
+
// Safety timeout: close after 500ms even if transitionend doesn't fire
|
|
490
|
+
this.closeTimeoutId = setTimeout(() => {
|
|
491
|
+
if (this.isClosing) {
|
|
492
|
+
this.cleanupAndClose();
|
|
493
|
+
}
|
|
494
|
+
}, 500);
|
|
463
495
|
}
|
|
464
496
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MozDrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
465
497
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MozDrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", viewQueries: [{ propertyName: "drawerElement", first: true, predicate: ["drawerElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
@@ -925,18 +957,41 @@ class MozModalContainerComponent {
|
|
|
925
957
|
modalElement = viewChild('modalElement', ...(ngDevMode ? [{ debugName: "modalElement" }] : []));
|
|
926
958
|
pendingClose = undefined;
|
|
927
959
|
isClosing = false;
|
|
960
|
+
transitionEndHandler;
|
|
961
|
+
closeTimeoutId;
|
|
928
962
|
constructor() {
|
|
929
963
|
afterNextRender(() => {
|
|
930
964
|
const element = this.modalElement()?.nativeElement;
|
|
931
965
|
if (element) {
|
|
932
|
-
|
|
966
|
+
this.transitionEndHandler = this.onTransitionEnd.bind(this);
|
|
967
|
+
element.addEventListener('transitionend', this.transitionEndHandler);
|
|
933
968
|
}
|
|
934
969
|
});
|
|
935
970
|
}
|
|
971
|
+
ngOnDestroy() {
|
|
972
|
+
const element = this.modalElement()?.nativeElement;
|
|
973
|
+
if (element && this.transitionEndHandler) {
|
|
974
|
+
element.removeEventListener('transitionend', this.transitionEndHandler);
|
|
975
|
+
}
|
|
976
|
+
if (this.closeTimeoutId) {
|
|
977
|
+
clearTimeout(this.closeTimeoutId);
|
|
978
|
+
}
|
|
979
|
+
}
|
|
936
980
|
onTransitionEnd(event) {
|
|
937
981
|
if (this.isClosing && event.propertyName === 'opacity') {
|
|
938
|
-
this.
|
|
982
|
+
this.cleanupAndClose();
|
|
983
|
+
}
|
|
984
|
+
}
|
|
985
|
+
cleanupAndClose() {
|
|
986
|
+
if (this.closeTimeoutId) {
|
|
987
|
+
clearTimeout(this.closeTimeoutId);
|
|
988
|
+
this.closeTimeoutId = undefined;
|
|
989
|
+
}
|
|
990
|
+
const element = this.modalElement()?.nativeElement;
|
|
991
|
+
if (element && this.transitionEndHandler) {
|
|
992
|
+
element.removeEventListener('transitionend', this.transitionEndHandler);
|
|
939
993
|
}
|
|
994
|
+
this.dialogRef.close(this.pendingClose);
|
|
940
995
|
}
|
|
941
996
|
isTemplate(content) {
|
|
942
997
|
return content instanceof TemplateRef;
|
|
@@ -956,9 +1011,18 @@ class MozModalContainerComponent {
|
|
|
956
1011
|
}
|
|
957
1012
|
}
|
|
958
1013
|
close(result) {
|
|
1014
|
+
if (this.isClosing) {
|
|
1015
|
+
return;
|
|
1016
|
+
}
|
|
959
1017
|
this.isClosing = true;
|
|
960
1018
|
this.pendingClose = result;
|
|
961
1019
|
this.isOpen.set(false);
|
|
1020
|
+
// Safety timeout: close after 500ms even if transitionend doesn't fire
|
|
1021
|
+
this.closeTimeoutId = setTimeout(() => {
|
|
1022
|
+
if (this.isClosing) {
|
|
1023
|
+
this.cleanupAndClose();
|
|
1024
|
+
}
|
|
1025
|
+
}, 500);
|
|
962
1026
|
}
|
|
963
1027
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MozModalContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
964
1028
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MozModalContainerComponent, isStandalone: true, selector: "moz-modal-container", viewQueries: [{ propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
@@ -1220,11 +1284,18 @@ class MozPaginationComponent {
|
|
|
1220
1284
|
this.updateValue.emit(+value);
|
|
1221
1285
|
}
|
|
1222
1286
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MozPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1223
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"mc-pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <
|
|
1287
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MozPaginationComponent, isStandalone: true, selector: "moz-pagination", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, selectLabel: { classPropertyName: "selectLabel", publicName: "selectLabel", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateValue: "updateValue" }, ngImport: i0, template: "<nav class=\"mc-pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Previous page\" [disabled]=\"isFirstPage()\" (click)=\"previous()\">\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"mc-pagination__field\">\n <moz-select\n class=\"mc-pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"mc-pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Next page\" [disabled]=\"isLastPage()\" (click)=\"next()\">\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: ChevronLeft24, selector: "ChevronLeft24", inputs: ["color", "hostClass"] }, { kind: "component", type: ChevronRight24, selector: "ChevronRight24", inputs: ["color", "hostClass"] }, { kind: "ngmodule", type: FormsModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1224
1288
|
}
|
|
1225
1289
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MozPaginationComponent, decorators: [{
|
|
1226
1290
|
type: Component,
|
|
1227
|
-
args: [{ selector: 'moz-pagination', imports: [
|
|
1291
|
+
args: [{ selector: 'moz-pagination', imports: [
|
|
1292
|
+
MozIconButtonComponent,
|
|
1293
|
+
MozSelectComponent,
|
|
1294
|
+
MozButtonComponent,
|
|
1295
|
+
ChevronLeft24,
|
|
1296
|
+
ChevronRight24,
|
|
1297
|
+
FormsModule,
|
|
1298
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mc-pagination\" role=\"navigation\">\n @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Previous page\"\n [disabled]=\"isFirstPage()\"\n (click)=\"previous()\"\n >\n <ChevronLeft24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Previous page\" [disabled]=\"isFirstPage()\" (click)=\"previous()\">\n <ChevronLeft24 icon />\n </moz-icon-button>\n } @if (!compact()) {\n <div class=\"mc-pagination__field\">\n <moz-select\n class=\"mc-pagination__select\"\n [id]=\"id()\"\n [name]=\"id()\"\n [options]=\"options()\"\n [ngModel]=\"_currentValue()\"\n (ngModelChange)=\"onSelectChange($event)\"\n [ariaLabel]=\"selectLabel()\"\n />\n </div>\n } @else {\n <span class=\"mc-pagination__label\" aria-current=\"page\">\n {{ currentPageText() }}\n </span>\n } @if (!compact()) {\n <button\n moz-button\n iconPosition=\"only\"\n aria-label=\"Next page\"\n [disabled]=\"isLastPage()\"\n (click)=\"next()\"\n >\n <ChevronRight24 icon />\n </button>\n } @else {\n <moz-icon-button aria-label=\"Next page\" [disabled]=\"isLastPage()\" (click)=\"next()\">\n <ChevronRight24 icon />\n </moz-icon-button>\n }\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:.5rem}.mc-pagination__label{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;padding:0;width:1px}\n"] }]
|
|
1228
1299
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], selectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectLabel", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], updateValue: [{ type: i0.Output, args: ["updateValue"] }] } });
|
|
1229
1300
|
|
|
1230
1301
|
/**
|