@mozaic-ds/angular 2.0.61 → 2.0.63
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.
|
@@ -4149,6 +4149,7 @@ class MozDrawerRef {
|
|
|
4149
4149
|
position = signal('right', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
|
|
4150
4150
|
extended = signal(false, ...(ngDevMode ? [{ debugName: "extended" }] : /* istanbul ignore next */ []));
|
|
4151
4151
|
back = signal(false, ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
|
|
4152
|
+
panelClass = signal(undefined, ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
4152
4153
|
animationDuration = 300;
|
|
4153
4154
|
constructor(overlayRef) {
|
|
4154
4155
|
this.overlayRef = overlayRef;
|
|
@@ -4194,6 +4195,10 @@ class DrawerContainerComponent {
|
|
|
4194
4195
|
'mc-drawer--extend': this.drawerRef.extended(),
|
|
4195
4196
|
[`mc-drawer--${this.drawerRef.position()}`]: this.drawerRef.position() !== 'right',
|
|
4196
4197
|
}), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4198
|
+
dialogClasses = computed(() => {
|
|
4199
|
+
const extra = this.drawerRef.panelClass();
|
|
4200
|
+
return extra ? `mc-drawer__dialog ${extra}` : 'mc-drawer__dialog';
|
|
4201
|
+
}, ...(ngDevMode ? [{ debugName: "dialogClasses" }] : /* istanbul ignore next */ []));
|
|
4197
4202
|
ariaModal = computed(() => (this.drawerRef.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
|
|
4198
4203
|
attachComponent(component) {
|
|
4199
4204
|
const portal = new ComponentPortal(component);
|
|
@@ -4221,11 +4226,11 @@ class DrawerContainerComponent {
|
|
|
4221
4226
|
}
|
|
4222
4227
|
}
|
|
4223
4228
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DrawerContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4224
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"
|
|
4229
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: DrawerContainerComponent, isStandalone: true, selector: "moz-drawer-container", host: { listeners: { "keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div [class]=\"dialogClasses()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4225
4230
|
}
|
|
4226
4231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: DrawerContainerComponent, decorators: [{
|
|
4227
4232
|
type: Component,
|
|
4228
|
-
args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div class=\"
|
|
4233
|
+
args: [{ selector: 'moz-drawer-container', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet, CdkPortalOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!drawerRef.isOpen()\"\n>\n <div [class]=\"dialogClasses()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (drawerRef.back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"onBackClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ drawerRef.title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"drawerRef.close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (drawerRef.contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ drawerRef.contentTitle() }}\n </h2>\n }\n\n <ng-template cdkPortalOutlet />\n </div>\n </div>\n\n @if (footerTpl) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </div>\n\n @if (drawerRef.isOpen()) {\n <div class=\"mc-overlay is-visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\"></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4229
4234
|
}], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }], onEscape: [{
|
|
4230
4235
|
type: HostListener,
|
|
4231
4236
|
args: ['keydown.escape']
|
|
@@ -4246,6 +4251,7 @@ class MozDrawerService {
|
|
|
4246
4251
|
drawerRef.position.set(mergedConfig.position ?? 'right');
|
|
4247
4252
|
drawerRef.extended.set(mergedConfig.extended ?? false);
|
|
4248
4253
|
drawerRef.back.set(mergedConfig.back ?? false);
|
|
4254
|
+
drawerRef.panelClass.set(mergedConfig.panelClass);
|
|
4249
4255
|
const injector = Injector.create({
|
|
4250
4256
|
parent: this.injector,
|
|
4251
4257
|
providers: [
|
|
@@ -4314,6 +4320,7 @@ class MozDrawerComponent {
|
|
|
4314
4320
|
back = input(false, ...(ngDevMode ? [{ debugName: "back" }] : /* istanbul ignore next */ []));
|
|
4315
4321
|
title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
4316
4322
|
contentTitle = input(...(ngDevMode ? [undefined, { debugName: "contentTitle" }] : /* istanbul ignore next */ []));
|
|
4323
|
+
panelClass = input(...(ngDevMode ? [undefined, { debugName: "panelClass" }] : /* istanbul ignore next */ []));
|
|
4317
4324
|
updateOpen = output();
|
|
4318
4325
|
backEvent = output();
|
|
4319
4326
|
footerTpl = contentChild('footer', { ...(ngDevMode ? { debugName: "footerTpl" } : /* istanbul ignore next */ {}), descendants: false });
|
|
@@ -4324,6 +4331,10 @@ class MozDrawerComponent {
|
|
|
4324
4331
|
'mc-drawer--extend': this.extended(),
|
|
4325
4332
|
[`mc-drawer--${this.position()}`]: this.position() !== 'right',
|
|
4326
4333
|
}), ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
|
|
4334
|
+
dialogClasses = computed(() => {
|
|
4335
|
+
const extra = this.panelClass();
|
|
4336
|
+
return extra ? `mc-drawer__dialog ${extra}` : 'mc-drawer__dialog';
|
|
4337
|
+
}, ...(ngDevMode ? [{ debugName: "dialogClasses" }] : /* istanbul ignore next */ []));
|
|
4327
4338
|
ariaModal = computed(() => (this.isOpen() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
|
|
4328
4339
|
constructor() {
|
|
4329
4340
|
effect(() => {
|
|
@@ -4347,12 +4358,12 @@ class MozDrawerComponent {
|
|
|
4347
4358
|
this.close();
|
|
4348
4359
|
}
|
|
4349
4360
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4350
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"
|
|
4361
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozDrawerComponent, isStandalone: true, selector: "moz-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, extended: { classPropertyName: "extended", publicName: "extended", isSignal: true, isRequired: false, transformFunction: null }, back: { classPropertyName: "back", publicName: "back", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, contentTitle: { classPropertyName: "contentTitle", publicName: "contentTitle", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { updateOpen: "updateOpen", backEvent: "backEvent" }, host: { listeners: { "keydown.escape": "onEscape()" } }, queries: [{ propertyName: "footerTpl", first: true, predicate: ["footer"], isSignal: true }], ngImport: i0, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div [class]=\"dialogClasses()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"backClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"], dependencies: [{ kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: ArrowBack24, selector: "ArrowBack24", inputs: ["hostClass"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["hostClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4351
4362
|
}
|
|
4352
4363
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozDrawerComponent, decorators: [{
|
|
4353
4364
|
type: Component,
|
|
4354
|
-
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div class=\"
|
|
4355
|
-
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], updateOpen: [{ type: i0.Output, args: ["updateOpen"] }], backEvent: [{ type: i0.Output, args: ["backEvent"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], onEscape: [{
|
|
4365
|
+
args: [{ selector: 'moz-drawer', imports: [MozIconButtonComponent, ArrowBack24, Cross24, NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"noop()\"\n [class]=\"classes()\"\n role=\"dialog\"\n aria-labelledby=\"drawerTitle\"\n [attr.aria-modal]=\"ariaModal()\"\n tabindex=\"-1\"\n [attr.aria-hidden]=\"!isOpen()\"\n>\n <div [class]=\"dialogClasses()\" role=\"document\">\n <div class=\"mc-drawer__header\">\n @if (back()) {\n <moz-icon-button\n class=\"mc-drawer__back\"\n aria-label=\"Back\"\n [ghost]=\"true\"\n (activated)=\"backClick()\"\n [id]=\"'drawer-back-button'\"\n >\n <ArrowBack24 icon />\n </moz-icon-button>\n }\n\n <h2 class=\"mc-drawer__title\" id=\"drawerTitle\">{{ title() }}</h2>\n\n <moz-icon-button\n class=\"mc-drawer__close\"\n aria-label=\"Close\"\n [ghost]=\"true\"\n (activated)=\"close()\"\n [id]=\"'drawer-close-button'\"\n >\n <Cross24 icon />\n </moz-icon-button>\n </div>\n\n <div class=\"mc-drawer__body\">\n <div class=\"mc-drawer__content\" tabindex=\"0\">\n @if (contentTitle()) {\n <h2 class=\"mc-drawer__content__title\">\n {{ contentTitle() }}\n </h2>\n }\n\n <ng-content />\n </div>\n </div>\n\n @if (footerTpl()) {\n <div class=\"mc-drawer__footer\">\n <ng-container *ngTemplateOutlet=\"footerTpl()\" />\n </div>\n }\n </div>\n @if(isOpen()){\n <div\n class=\"mc-overlay is-visible\"\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modalTitle\"\n (click)=\"onBackdropClick($event)\"\n ></div>\n }\n</section>\n", styles: [".mc-drawer{box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;display:flex;overflow:hidden;padding:.5rem;justify-content:flex-end;z-index:var(--drawer-z-index, 5)}@media(width>=680px){.mc-drawer{padding:1rem}}.mc-drawer--left{justify-content:flex-start}.mc-drawer--left .mc-drawer__dialog{transform:translate3d(-100%,0,0)}@media(width>=680px){.mc-drawer--extend .mc-drawer__dialog{max-width:39rem}}.mc-drawer__dialog{background:var(--drawer-color-background, #ffffff);display:flex;flex-direction:column;height:100%;max-width:100%;transform:translate3d(100%,0,0);transition:visibility 0s linear .4s,transform .4s;visibility:hidden;width:100%;z-index:var(--drawer-z-index, 5);border-radius:var(--border-radius-l, 1rem)}@media(width>=680px){.mc-drawer__dialog{max-width:25rem}}.mc-drawer__header{display:flex;align-items:center;justify-content:center;height:4rem}.mc-drawer__icon{height:1.5rem;margin-right:.75rem;width:1.5rem}.mc-drawer__title{font-size:var(--font-body-s, .875rem);font-weight:var(--font-weight-semi-bold, 600);color:var(--drawer-color-title, #666666);margin-bottom:0;margin-top:0;text-align:center;flex-grow:1}.mc-drawer__title:first-child{padding-left:4rem}.mc-drawer__back,.mc-drawer__close{margin:.5rem}.mc-drawer__body{flex:1 1;overflow:hidden}.mc-drawer__body:last-child{margin-bottom:1.5rem;padding-bottom:1.5rem}.mc-drawer__content{max-height:100%;overflow:hidden auto;padding:.5rem 1rem 0;color:var(--drawer-color-paragraph, #000000)}@media(width>=680px){.mc-drawer__content{padding:1.5rem}}.mc-drawer__content__title{font-size:var(--font-title-m, 1.5rem);margin:0 0 .5rem}.mc-drawer__footer{display:flex;flex-direction:column;gap:1rem;padding:1rem 1.5rem;border-top:var(--border-width-s, .0625rem) solid var(--divider-color-primary, #cccccc)}@media(width>=680px){.mc-drawer__footer{justify-content:center;flex-direction:row}}.mc-drawer-open{overflow:hidden}.mc-drawer.is-open .mc-drawer__dialog{pointer-events:all;transform:translateZ(0);transition:visibility 0s linear 0s,transform .4s;visibility:visible}.mc-overlay{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{background-color:var(--overlay-color-background, rgba(0, 0, 0, .5));inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:var(--overlay-z-index, 4)}.mc-overlay-loader.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-overlay-loader{align-items:center;display:flex;justify-content:center}.mc-drawer{z-index:1000}\n"] }]
|
|
4366
|
+
}], ctorParameters: () => [], propDecorators: { open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], extended: [{ type: i0.Input, args: [{ isSignal: true, alias: "extended", required: false }] }], back: [{ type: i0.Input, args: [{ isSignal: true, alias: "back", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], contentTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentTitle", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], updateOpen: [{ type: i0.Output, args: ["updateOpen"] }], backEvent: [{ type: i0.Output, args: ["backEvent"] }], footerTpl: [{ type: i0.ContentChild, args: ['footer', { ...{ descendants: false }, isSignal: true }] }], onEscape: [{
|
|
4356
4367
|
type: HostListener,
|
|
4357
4368
|
args: ['keydown.escape']
|
|
4358
4369
|
}] } });
|
|
@@ -5406,6 +5417,21 @@ class FilterEngine {
|
|
|
5406
5417
|
this.state.pageIndex.set(0);
|
|
5407
5418
|
this.notify('replace', null);
|
|
5408
5419
|
}
|
|
5420
|
+
/**
|
|
5421
|
+
* Drops conditions whose value is not yet complete. Called when a filter
|
|
5422
|
+
* builder is dismissed: a row the user added but never filled in must not
|
|
5423
|
+
* linger in the model as a phantom active filter.
|
|
5424
|
+
*/
|
|
5425
|
+
dropIncompleteConditions() {
|
|
5426
|
+
const defMap = this.state.columnDefMap();
|
|
5427
|
+
const before = this.state.filterModel().conditions;
|
|
5428
|
+
const after = before.filter((c) => this.isComplete(c, defMap.get(c.field)));
|
|
5429
|
+
if (after.length === before.length)
|
|
5430
|
+
return;
|
|
5431
|
+
this.state.filterModel.set({ conditions: after });
|
|
5432
|
+
this.state.pageIndex.set(0);
|
|
5433
|
+
this.notify('replace', null);
|
|
5434
|
+
}
|
|
5409
5435
|
// ------------------------------------------------------------------
|
|
5410
5436
|
// Evaluation
|
|
5411
5437
|
// ------------------------------------------------------------------
|
|
@@ -11612,6 +11638,12 @@ class MozGridFilterBuilderComponent {
|
|
|
11612
11638
|
applyMode = input('auto', ...(ngDevMode ? [{ debugName: "applyMode" }] : /* istanbul ignore next */ []));
|
|
11613
11639
|
/** Hint: when true, renders a "Show rows" sub-title (used inside the overlay). */
|
|
11614
11640
|
showSubtitle = input(true, ...(ngDevMode ? [{ debugName: "showSubtitle" }] : /* istanbul ignore next */ []));
|
|
11641
|
+
/**
|
|
11642
|
+
* Column the builder was opened for (set by the column-menu overlay).
|
|
11643
|
+
* When provided, "Add condition" seeds the new row on this column
|
|
11644
|
+
* instead of defaulting to the first available column.
|
|
11645
|
+
*/
|
|
11646
|
+
defaultField = input(null, ...(ngDevMode ? [{ debugName: "defaultField" }] : /* istanbul ignore next */ []));
|
|
11615
11647
|
modelChange = output();
|
|
11616
11648
|
// Draft (what the user sees). Synced from `model` input on change.
|
|
11617
11649
|
draft = signal([], ...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
@@ -11640,13 +11672,14 @@ class MozGridFilterBuilderComponent {
|
|
|
11640
11672
|
const cols = this.availableColumns();
|
|
11641
11673
|
if (cols.length === 0)
|
|
11642
11674
|
return;
|
|
11643
|
-
|
|
11644
|
-
const
|
|
11675
|
+
// Prefer the column the builder was opened for; fall back to the first.
|
|
11676
|
+
const preferred = this.defaultField();
|
|
11677
|
+
const target = (preferred && cols.find((c) => c.field === preferred)) || cols[0];
|
|
11645
11678
|
const condition = {
|
|
11646
11679
|
id: generateConditionId(),
|
|
11647
|
-
combinator:
|
|
11648
|
-
field:
|
|
11649
|
-
operator:
|
|
11680
|
+
combinator: 'and',
|
|
11681
|
+
field: target.field,
|
|
11682
|
+
operator: target.defaultOperator,
|
|
11650
11683
|
value: {},
|
|
11651
11684
|
};
|
|
11652
11685
|
this.draft.update((list) => [...list, condition]);
|
|
@@ -11661,6 +11694,11 @@ class MozGridFilterBuilderComponent {
|
|
|
11661
11694
|
this.commit();
|
|
11662
11695
|
}
|
|
11663
11696
|
onFieldChange(id, field) {
|
|
11697
|
+
// Selecting the column that is already targeted must not wipe the
|
|
11698
|
+
// condition's value — only a genuine column change resets it.
|
|
11699
|
+
const current = this.draft().find((c) => c.id === id);
|
|
11700
|
+
if (!current || current.field === field)
|
|
11701
|
+
return;
|
|
11664
11702
|
const col = this.columnsById().get(field);
|
|
11665
11703
|
this.draft.update((list) => list.map((c) => c.id === id
|
|
11666
11704
|
? {
|
|
@@ -11673,7 +11711,7 @@ class MozGridFilterBuilderComponent {
|
|
|
11673
11711
|
this.commit();
|
|
11674
11712
|
}
|
|
11675
11713
|
onOperatorChange(id, operator) {
|
|
11676
|
-
this.draft.update((list) => list.map((c) =>
|
|
11714
|
+
this.draft.update((list) => list.map((c) => c.id === id ? { ...c, operator, value: resetValueFor(operator, c.value) } : c));
|
|
11677
11715
|
this.commit();
|
|
11678
11716
|
}
|
|
11679
11717
|
onValueChange(id, patch) {
|
|
@@ -11729,10 +11767,12 @@ class MozGridFilterBuilderComponent {
|
|
|
11729
11767
|
// Internals
|
|
11730
11768
|
// ------------------------------------------------------------------
|
|
11731
11769
|
commit() {
|
|
11732
|
-
this.modelChange.emit({
|
|
11770
|
+
this.modelChange.emit({
|
|
11771
|
+
conditions: this.draft().map((c) => ({ ...c, value: { ...c.value } })),
|
|
11772
|
+
});
|
|
11733
11773
|
}
|
|
11734
11774
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11735
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridFilterBuilderComponent, isStandalone: true, selector: "moz-grid-filter-builder", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: true, isRequired: true, transformFunction: null }, applyMode: { classPropertyName: "applyMode", publicName: "applyMode", isSignal: true, isRequired: false, transformFunction: null }, showSubtitle: { classPropertyName: "showSubtitle", publicName: "showSubtitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"filter-builder\">\n @if (showSubtitle()) {\n <p class=\"filter-builder__subtitle\">Show rows</p>\n }\n\n <div class=\"filter-builder__rows\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n @for (cond of draft(); track cond.id; let idx = $index; let first = $first) {\n <div class=\"filter-builder__row\" cdkDrag>\n <!-- Combinator -->\n <div class=\"filter-builder__combinator\">\n @if (first) {\n <span class=\"filter-builder__combinator-label\">Where</span>\n } @else {\n <select\n class=\"filter-builder__select filter-builder__select--combinator\"\n [value]=\"cond.combinator\"\n [attr.aria-label]=\"'Combinator for condition ' + (idx + 1)\"\n (change)=\"onCombinatorChange(cond.id, $any($event.target).value)\"\n >\n <option value=\"and\">And</option>\n <option value=\"or\">Or</option>\n </select>\n }\n </div>\n\n <!-- Column -->\n <select\n class=\"filter-builder__select filter-builder__select--column\"\n [value]=\"cond.field\"\n [attr.aria-label]=\"'Column for condition ' + (idx + 1)\"\n (change)=\"onFieldChange(cond.id, $any($event.target).value)\"\n >\n @for (col of availableColumns(); track col.field) {\n <option [value]=\"col.field\">{{ col.headerName }}</option>\n }\n </select>\n\n <!-- Operator (hidden for custom filters \u2014 the component owns its own semantics) -->\n @let col = columnsById().get(cond.field);\n @if (col?.filterType !== 'custom') {\n <select\n class=\"filter-builder__select filter-builder__select--operator\"\n [value]=\"cond.operator\"\n [attr.aria-label]=\"'Operator for condition ' + (idx + 1)\"\n (change)=\"onOperatorChange(cond.id, $any($event.target).value)\"\n >\n @for (op of col?.operators ?? []; track op) {\n <option [value]=\"op\">{{ operatorLabels[op] }}</option>\n }\n </select>\n }\n\n <!-- Value -->\n <div class=\"filter-builder__value\">\n @if (col?.filterType === 'custom' && col?.filterComponent) {\n @let filterCmp = col?.filterComponent ?? null;\n @if (filterCmp) {\n <ng-container\n mozCustomFilterHost\n [componentType]=\"filterCmp\"\n [condition]=\"cond\"\n (conditionChange)=\"onValueChange(cond.id, $event)\"\n />\n }\n } @else if (needsValue(cond.operator)) {\n @if (col?.filterType === 'set') {\n <select\n class=\"filter-builder__select filter-builder__select--set\"\n multiple\n size=\"4\"\n [attr.aria-label]=\"'Values for condition ' + (idx + 1)\"\n (change)=\"onSetValueChange(cond.id, $event)\"\n >\n @for (opt of col?.options ?? []; track $any(opt.value)) {\n <option [value]=\"opt.value\" [selected]=\"isSetValueSelected(cond, opt.value)\">\n {{ opt.label }}\n </option>\n }\n </select>\n } @else if (col?.filterType === 'boolean') {\n <select\n class=\"filter-builder__select\"\n [value]=\"cond.value.value === true ? 'true' : 'false'\"\n [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n (change)=\"onValueChange(cond.id, { value: $any($event.target).value === 'true' })\"\n >\n <option value=\"true\">True</option>\n <option value=\"false\">False</option>\n </select>\n } @else {\n <input\n class=\"filter-builder__input\"\n [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n [value]=\"cond.value.value ?? ''\"\n [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n (input)=\"onValueChange(cond.id, { value: $any($event.target).value })\"\n />\n @if (needsRange(cond.operator)) {\n <span class=\"filter-builder__range-sep\">\u2013</span>\n <input\n class=\"filter-builder__input\"\n [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n [value]=\"cond.value.valueTo ?? ''\"\n [attr.aria-label]=\"'Upper bound for condition ' + (idx + 1)\"\n (input)=\"onValueChange(cond.id, { valueTo: $any($event.target).value })\"\n />\n } } }\n </div>\n\n <!-- Delete -->\n <button\n type=\"button\"\n moz-button\n [ghost]=\"true\"\n [size]=\"'s'\"\n [iconPosition]=\"'only'\"\n [attr.aria-label]=\"'Remove condition ' + (idx + 1)\"\n (click)=\"removeCondition(cond.id)\"\n >\n <Cross20 icon />\n </button>\n\n <!-- Drag handle -->\n <span\n class=\"filter-builder__drag\"\n cdkDragHandle\n [attr.aria-label]=\"'Reorder condition ' + (idx + 1)\"\n >\n <Drag20 />\n </span>\n </div>\n }\n </div>\n\n <button\n type=\"button\"\n class=\"filter-builder__add\"\n [disabled]=\"availableColumns().length === 0\"\n (click)=\"addCondition()\"\n >\n <ListAdd20 />\n <span>Add condition</span>\n </button>\n</div>\n", styles: [":host{display:block;background:var(--Background-Primary, #fff);border:1px solid var(--Border-Primary, #cdd4d8);border-radius:6px;box-shadow:0 4px 16px #0000001f}.filter-builder{display:flex;flex-direction:column;gap:12px;padding:16px}.filter-builder__subtitle{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}.filter-builder__rows{display:flex;flex-direction:column;gap:8px}.filter-builder__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--Border-Primary, #e0e0e0);border-radius:6px;background:var(--Background-Primary, #fff)}.filter-builder__row.cdk-drag-preview{box-shadow:0 2px 8px #0000001f}.filter-builder__row.cdk-drag-placeholder{opacity:.3}.filter-builder__combinator{min-width:64px;flex:0 0 64px}.filter-builder__combinator-label{display:inline-block;width:100%;padding:6px 8px;font-weight:600;color:var(--Text-Secondary, #555)}.filter-builder__select,.filter-builder__input{font:inherit;padding:6px 8px;border:1px solid var(--Border-Primary, #ccc);border-radius:4px;background:#fff;min-height:32px;box-sizing:border-box}.filter-builder__select--combinator{width:100%}.filter-builder__select--column,.filter-builder__select--operator{flex:1 1 120px;min-width:0}.filter-builder__select--set{min-width:160px;height:auto}.filter-builder__value{display:flex;align-items:center;gap:4px;flex:1 1 160px;min-width:0}.filter-builder__input{flex:1 1 0;min-width:0}.filter-builder__range-sep{color:var(--Text-Secondary, #777)}.filter-builder__drag{display:inline-flex;cursor:grab;color:var(--Text-Secondary, #777)}.filter-builder__drag:active{cursor:grabbing}.filter-builder__add{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:6px 10px;background:transparent;border:none;color:var(--Status-Standalone-element-Primary, #0071ce);font:inherit;cursor:pointer;border-radius:4px}.filter-builder__add:hover:not([disabled]){background:var(--Background-Secondary, #f4f4f4)}.filter-builder__add[disabled]{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozCustomFilterHostDirective, selector: "[mozCustomFilterHost]", inputs: ["componentType", "condition"], outputs: ["conditionChange"] }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["hostClass"] }, { kind: "component", type: ListAdd20, selector: "ListAdd20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11775
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridFilterBuilderComponent, isStandalone: true, selector: "moz-grid-filter-builder", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null }, availableColumns: { classPropertyName: "availableColumns", publicName: "availableColumns", isSignal: true, isRequired: true, transformFunction: null }, applyMode: { classPropertyName: "applyMode", publicName: "applyMode", isSignal: true, isRequired: false, transformFunction: null }, showSubtitle: { classPropertyName: "showSubtitle", publicName: "showSubtitle", isSignal: true, isRequired: false, transformFunction: null }, defaultField: { classPropertyName: "defaultField", publicName: "defaultField", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { modelChange: "modelChange" }, ngImport: i0, template: "<div class=\"filter-builder\">\n @if (showSubtitle()) {\n <p class=\"filter-builder__subtitle\">Show rows</p>\n }\n\n <div class=\"filter-builder__rows\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n @for (cond of draft(); track cond.id; let idx = $index; let first = $first) {\n <div class=\"filter-builder__row\" cdkDrag>\n <!-- Combinator -->\n <div class=\"filter-builder__combinator\">\n @if (first) {\n <span class=\"filter-builder__combinator-label\">Where</span>\n } @else {\n <select\n class=\"filter-builder__select filter-builder__select--combinator\"\n [value]=\"cond.combinator\"\n [attr.aria-label]=\"'Combinator for condition ' + (idx + 1)\"\n (change)=\"onCombinatorChange(cond.id, $any($event.target).value)\"\n >\n <option value=\"and\">And</option>\n <option value=\"or\">Or</option>\n </select>\n }\n </div>\n\n <!-- Column -->\n <select\n class=\"filter-builder__select filter-builder__select--column\"\n [value]=\"cond.field\"\n [attr.aria-label]=\"'Column for condition ' + (idx + 1)\"\n (change)=\"onFieldChange(cond.id, $any($event.target).value)\"\n >\n @for (col of availableColumns(); track col.field) {\n <option [value]=\"col.field\" [selected]=\"col.field === cond.field\">\n {{ col.headerName }}\n </option>\n }\n </select>\n\n <!-- Operator (hidden for custom filters \u2014 the component owns its own semantics) -->\n @let col = columnsById().get(cond.field);\n @if (col?.filterType !== 'custom') {\n <select\n class=\"filter-builder__select filter-builder__select--operator\"\n [value]=\"cond.operator\"\n [attr.aria-label]=\"'Operator for condition ' + (idx + 1)\"\n (change)=\"onOperatorChange(cond.id, $any($event.target).value)\"\n >\n @for (op of col?.operators ?? []; track op) {\n <option [value]=\"op\" [selected]=\"op === cond.operator\">{{ operatorLabels[op] }}</option>\n }\n </select>\n }\n\n <!-- Value -->\n <div class=\"filter-builder__value\">\n @if (col?.filterType === 'custom' && col?.filterComponent) {\n @let filterCmp = col?.filterComponent ?? null;\n @if (filterCmp) {\n <ng-container\n mozCustomFilterHost\n [componentType]=\"filterCmp\"\n [condition]=\"cond\"\n (conditionChange)=\"onValueChange(cond.id, $event)\"\n />\n }\n } @else if (needsValue(cond.operator)) {\n @if (col?.filterType === 'set') {\n <select\n class=\"filter-builder__select filter-builder__select--set\"\n multiple\n size=\"4\"\n [attr.aria-label]=\"'Values for condition ' + (idx + 1)\"\n (change)=\"onSetValueChange(cond.id, $event)\"\n >\n @for (opt of col?.options ?? []; track $any(opt.value)) {\n <option [value]=\"opt.value\" [selected]=\"isSetValueSelected(cond, opt.value)\">\n {{ opt.label }}\n </option>\n }\n </select>\n } @else if (col?.filterType === 'boolean') {\n <select\n class=\"filter-builder__select\"\n [value]=\"cond.value.value === true ? 'true' : 'false'\"\n [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n (change)=\"onValueChange(cond.id, { value: $any($event.target).value === 'true' })\"\n >\n <option value=\"true\">True</option>\n <option value=\"false\">False</option>\n </select>\n } @else {\n <input\n class=\"filter-builder__input\"\n [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n [value]=\"cond.value.value ?? ''\"\n [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n (input)=\"onValueChange(cond.id, { value: $any($event.target).value })\"\n />\n @if (needsRange(cond.operator)) {\n <span class=\"filter-builder__range-sep\">\u2013</span>\n <input\n class=\"filter-builder__input\"\n [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n [value]=\"cond.value.valueTo ?? ''\"\n [attr.aria-label]=\"'Upper bound for condition ' + (idx + 1)\"\n (input)=\"onValueChange(cond.id, { valueTo: $any($event.target).value })\"\n />\n } } }\n </div>\n\n <!-- Delete -->\n <button\n type=\"button\"\n moz-button\n [ghost]=\"true\"\n [size]=\"'s'\"\n [iconPosition]=\"'only'\"\n [attr.aria-label]=\"'Remove condition ' + (idx + 1)\"\n (click)=\"removeCondition(cond.id)\"\n >\n <Cross20 icon />\n </button>\n\n <!-- Drag handle -->\n <span\n class=\"filter-builder__drag\"\n cdkDragHandle\n [attr.aria-label]=\"'Reorder condition ' + (idx + 1)\"\n >\n <Drag20 />\n </span>\n </div>\n }\n </div>\n\n <button\n moz-button\n type=\"button\"\n class=\"filter-builder__add\"\n [appearance]=\"'accent'\"\n [ghost]=\"true\"\n [size]=\"'s'\"\n [iconPosition]=\"'left'\"\n [disabled]=\"availableColumns().length === 0\"\n (click)=\"addCondition()\"\n >\n <ListAdd20 icon />\n Add condition\n </button>\n</div>\n", styles: [":host{display:block;background:var(--Background-Primary, #fff);border:1px solid var(--Border-Primary, #cdd4d8);border-radius:6px;box-shadow:0 4px 16px #0000001f}.filter-builder{display:flex;flex-direction:column;gap:12px;padding:16px}.filter-builder__subtitle{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}.filter-builder__rows{display:flex;flex-direction:column;gap:8px}.filter-builder__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--Border-Primary, #e0e0e0);border-radius:6px;background:var(--Background-Primary, #fff)}.filter-builder__row.cdk-drag-preview{box-shadow:0 2px 8px #0000001f}.filter-builder__row.cdk-drag-placeholder{opacity:.3}.filter-builder__combinator{min-width:64px;flex:0 0 64px}.filter-builder__combinator-label{display:inline-block;width:100%;padding:6px 8px;font-weight:600;color:var(--Text-Secondary, #555)}.filter-builder__select,.filter-builder__input{font:inherit;padding:6px 8px;border:1px solid var(--Border-Primary, #ccc);border-radius:4px;background:#fff;min-height:32px;box-sizing:border-box}.filter-builder__select--combinator{width:100%}.filter-builder__select--column,.filter-builder__select--operator{flex:1 1 120px;min-width:0}.filter-builder__select--set{min-width:160px;height:auto}.filter-builder__value{display:flex;align-items:center;gap:4px;flex:1 1 160px;min-width:0}.filter-builder__input{flex:1 1 0;min-width:0}.filter-builder__range-sep{color:var(--Text-Secondary, #777)}.filter-builder__drag{display:inline-flex;cursor:grab;color:var(--Text-Secondary, #777)}.filter-builder__drag:active{cursor:grabbing}.filter-builder__add{align-self:flex-start}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozCustomFilterHostDirective, selector: "[mozCustomFilterHost]", inputs: ["componentType", "condition"], outputs: ["conditionChange"] }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }, { kind: "component", type: Cross20, selector: "Cross20", inputs: ["hostClass"] }, { kind: "component", type: ListAdd20, selector: "ListAdd20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
11736
11776
|
}
|
|
11737
11777
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridFilterBuilderComponent, decorators: [{
|
|
11738
11778
|
type: Component,
|
|
@@ -11746,8 +11786,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
11746
11786
|
Drag20,
|
|
11747
11787
|
Cross20,
|
|
11748
11788
|
ListAdd20,
|
|
11749
|
-
], template: "<div class=\"filter-builder\">\n @if (showSubtitle()) {\n <p class=\"filter-builder__subtitle\">Show rows</p>\n }\n\n <div class=\"filter-builder__rows\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n @for (cond of draft(); track cond.id; let idx = $index; let first = $first) {\n <div class=\"filter-builder__row\" cdkDrag>\n <!-- Combinator -->\n <div class=\"filter-builder__combinator\">\n @if (first) {\n <span class=\"filter-builder__combinator-label\">Where</span>\n } @else {\n <select\n class=\"filter-builder__select filter-builder__select--combinator\"\n [value]=\"cond.combinator\"\n [attr.aria-label]=\"'Combinator for condition ' + (idx + 1)\"\n (change)=\"onCombinatorChange(cond.id, $any($event.target).value)\"\n >\n <option value=\"and\">And</option>\n <option value=\"or\">Or</option>\n </select>\n }\n </div>\n\n <!-- Column -->\n <select\n class=\"filter-builder__select filter-builder__select--column\"\n [value]=\"cond.field\"\n [attr.aria-label]=\"'Column for condition ' + (idx + 1)\"\n (change)=\"onFieldChange(cond.id, $any($event.target).value)\"\n >\n @for (col of availableColumns(); track col.field) {\n <option [value]=\"col.field\"
|
|
11750
|
-
}], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], availableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableColumns", required: true }] }], applyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyMode", required: false }] }], showSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubtitle", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
|
|
11789
|
+
], template: "<div class=\"filter-builder\">\n @if (showSubtitle()) {\n <p class=\"filter-builder__subtitle\">Show rows</p>\n }\n\n <div class=\"filter-builder__rows\" cdkDropList (cdkDropListDropped)=\"onDrop($event)\">\n @for (cond of draft(); track cond.id; let idx = $index; let first = $first) {\n <div class=\"filter-builder__row\" cdkDrag>\n <!-- Combinator -->\n <div class=\"filter-builder__combinator\">\n @if (first) {\n <span class=\"filter-builder__combinator-label\">Where</span>\n } @else {\n <select\n class=\"filter-builder__select filter-builder__select--combinator\"\n [value]=\"cond.combinator\"\n [attr.aria-label]=\"'Combinator for condition ' + (idx + 1)\"\n (change)=\"onCombinatorChange(cond.id, $any($event.target).value)\"\n >\n <option value=\"and\">And</option>\n <option value=\"or\">Or</option>\n </select>\n }\n </div>\n\n <!-- Column -->\n <select\n class=\"filter-builder__select filter-builder__select--column\"\n [value]=\"cond.field\"\n [attr.aria-label]=\"'Column for condition ' + (idx + 1)\"\n (change)=\"onFieldChange(cond.id, $any($event.target).value)\"\n >\n @for (col of availableColumns(); track col.field) {\n <option [value]=\"col.field\" [selected]=\"col.field === cond.field\">\n {{ col.headerName }}\n </option>\n }\n </select>\n\n <!-- Operator (hidden for custom filters \u2014 the component owns its own semantics) -->\n @let col = columnsById().get(cond.field);\n @if (col?.filterType !== 'custom') {\n <select\n class=\"filter-builder__select filter-builder__select--operator\"\n [value]=\"cond.operator\"\n [attr.aria-label]=\"'Operator for condition ' + (idx + 1)\"\n (change)=\"onOperatorChange(cond.id, $any($event.target).value)\"\n >\n @for (op of col?.operators ?? []; track op) {\n <option [value]=\"op\" [selected]=\"op === cond.operator\">{{ operatorLabels[op] }}</option>\n }\n </select>\n }\n\n <!-- Value -->\n <div class=\"filter-builder__value\">\n @if (col?.filterType === 'custom' && col?.filterComponent) {\n @let filterCmp = col?.filterComponent ?? null;\n @if (filterCmp) {\n <ng-container\n mozCustomFilterHost\n [componentType]=\"filterCmp\"\n [condition]=\"cond\"\n (conditionChange)=\"onValueChange(cond.id, $event)\"\n />\n }\n } @else if (needsValue(cond.operator)) {\n @if (col?.filterType === 'set') {\n <select\n class=\"filter-builder__select filter-builder__select--set\"\n multiple\n size=\"4\"\n [attr.aria-label]=\"'Values for condition ' + (idx + 1)\"\n (change)=\"onSetValueChange(cond.id, $event)\"\n >\n @for (opt of col?.options ?? []; track $any(opt.value)) {\n <option [value]=\"opt.value\" [selected]=\"isSetValueSelected(cond, opt.value)\">\n {{ opt.label }}\n </option>\n }\n </select>\n } @else if (col?.filterType === 'boolean') {\n <select\n class=\"filter-builder__select\"\n [value]=\"cond.value.value === true ? 'true' : 'false'\"\n [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n (change)=\"onValueChange(cond.id, { value: $any($event.target).value === 'true' })\"\n >\n <option value=\"true\">True</option>\n <option value=\"false\">False</option>\n </select>\n } @else {\n <input\n class=\"filter-builder__input\"\n [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n [value]=\"cond.value.value ?? ''\"\n [attr.aria-label]=\"'Value for condition ' + (idx + 1)\"\n (input)=\"onValueChange(cond.id, { value: $any($event.target).value })\"\n />\n @if (needsRange(cond.operator)) {\n <span class=\"filter-builder__range-sep\">\u2013</span>\n <input\n class=\"filter-builder__input\"\n [type]=\"inputTypeFor(cond.operator, col?.filterType ?? 'text')\"\n [value]=\"cond.value.valueTo ?? ''\"\n [attr.aria-label]=\"'Upper bound for condition ' + (idx + 1)\"\n (input)=\"onValueChange(cond.id, { valueTo: $any($event.target).value })\"\n />\n } } }\n </div>\n\n <!-- Delete -->\n <button\n type=\"button\"\n moz-button\n [ghost]=\"true\"\n [size]=\"'s'\"\n [iconPosition]=\"'only'\"\n [attr.aria-label]=\"'Remove condition ' + (idx + 1)\"\n (click)=\"removeCondition(cond.id)\"\n >\n <Cross20 icon />\n </button>\n\n <!-- Drag handle -->\n <span\n class=\"filter-builder__drag\"\n cdkDragHandle\n [attr.aria-label]=\"'Reorder condition ' + (idx + 1)\"\n >\n <Drag20 />\n </span>\n </div>\n }\n </div>\n\n <button\n moz-button\n type=\"button\"\n class=\"filter-builder__add\"\n [appearance]=\"'accent'\"\n [ghost]=\"true\"\n [size]=\"'s'\"\n [iconPosition]=\"'left'\"\n [disabled]=\"availableColumns().length === 0\"\n (click)=\"addCondition()\"\n >\n <ListAdd20 icon />\n Add condition\n </button>\n</div>\n", styles: [":host{display:block;background:var(--Background-Primary, #fff);border:1px solid var(--Border-Primary, #cdd4d8);border-radius:6px;box-shadow:0 4px 16px #0000001f}.filter-builder{display:flex;flex-direction:column;gap:12px;padding:16px}.filter-builder__subtitle{margin:0;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}.filter-builder__rows{display:flex;flex-direction:column;gap:8px}.filter-builder__row{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--Border-Primary, #e0e0e0);border-radius:6px;background:var(--Background-Primary, #fff)}.filter-builder__row.cdk-drag-preview{box-shadow:0 2px 8px #0000001f}.filter-builder__row.cdk-drag-placeholder{opacity:.3}.filter-builder__combinator{min-width:64px;flex:0 0 64px}.filter-builder__combinator-label{display:inline-block;width:100%;padding:6px 8px;font-weight:600;color:var(--Text-Secondary, #555)}.filter-builder__select,.filter-builder__input{font:inherit;padding:6px 8px;border:1px solid var(--Border-Primary, #ccc);border-radius:4px;background:#fff;min-height:32px;box-sizing:border-box}.filter-builder__select--combinator{width:100%}.filter-builder__select--column,.filter-builder__select--operator{flex:1 1 120px;min-width:0}.filter-builder__select--set{min-width:160px;height:auto}.filter-builder__value{display:flex;align-items:center;gap:4px;flex:1 1 160px;min-width:0}.filter-builder__input{flex:1 1 0;min-width:0}.filter-builder__range-sep{color:var(--Text-Secondary, #777)}.filter-builder__drag{display:inline-flex;cursor:grab;color:var(--Text-Secondary, #777)}.filter-builder__drag:active{cursor:grabbing}.filter-builder__add{align-self:flex-start}\n"] }]
|
|
11790
|
+
}], ctorParameters: () => [], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: true }] }], availableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableColumns", required: true }] }], applyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyMode", required: false }] }], showSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSubtitle", required: false }] }], defaultField: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultField", required: false }] }], modelChange: [{ type: i0.Output, args: ["modelChange"] }] } });
|
|
11751
11791
|
function resetValueFor(op, previous) {
|
|
11752
11792
|
if (VALUELESS_OPERATORS.has(op))
|
|
11753
11793
|
return {};
|
|
@@ -11823,6 +11863,7 @@ class MozGridFilterOverlayDirective {
|
|
|
11823
11863
|
compRef.setInput('availableColumns', options.columns);
|
|
11824
11864
|
compRef.setInput('applyMode', 'auto');
|
|
11825
11865
|
compRef.setInput('showSubtitle', true);
|
|
11866
|
+
compRef.setInput('defaultField', options.seedField ?? null);
|
|
11826
11867
|
compRef.instance.modelChange.subscribe((next) => {
|
|
11827
11868
|
compRef.setInput('model', next);
|
|
11828
11869
|
options.onChange(next);
|
|
@@ -11835,9 +11876,14 @@ class MozGridFilterOverlayDirective {
|
|
|
11835
11876
|
});
|
|
11836
11877
|
}
|
|
11837
11878
|
close() {
|
|
11838
|
-
this.overlayRef
|
|
11879
|
+
if (!this.overlayRef)
|
|
11880
|
+
return;
|
|
11881
|
+
this.overlayRef.dispose();
|
|
11839
11882
|
this.overlayRef = null;
|
|
11840
11883
|
this.componentRef = null;
|
|
11884
|
+
// A condition the user added but never gave a value to must not survive
|
|
11885
|
+
// once the builder is dismissed — drop it so it isn't a phantom filter.
|
|
11886
|
+
this.engine?.dropIncompleteConditions();
|
|
11841
11887
|
}
|
|
11842
11888
|
ngOnDestroy() {
|
|
11843
11889
|
this.close();
|
|
@@ -12101,13 +12147,13 @@ class MozGridHeaderComponent {
|
|
|
12101
12147
|
this.dragEngine.startDrag(event, unpinnedIndex, center.nativeElement);
|
|
12102
12148
|
}
|
|
12103
12149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridHeaderComponent, isStandalone: true, selector: "moz-grid-header", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart", selectAllToggle: "selectAllToggle", columnReorder: "columnReorder" }, host: { properties: { "style.min-width.px": "rowMinWidth()" } }, viewQueries: [{ propertyName: "headerCenter", first: true, predicate: ["headerCenter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"grid-header\"\n [class.grid-header--no-bottom-border]=\"hasFilterRow()\"\n role=\"row\"\n #headerCenter\n>\n <!-- Expand spacer (sticky, leftmost) -->\n @if (showExpand()) {\n <div class=\"grid-header__sticky-utility grid-header__expand-spacer\" [style.left.px]=\"0\"></div>\n }\n\n <!-- Checkbox utility (sticky) -->\n @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__checkbox\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n >\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n }\n\n <!-- Pinned-left columns (sticky) -->\n @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n [pinnedSticky]=\"'left'\"\n [pinnedOffset]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [pinnedEdge]=\"last && state.pinnedLeftColumns().length > 0 ? 'left' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n\n <!-- Leading column spacer -->\n @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n }\n\n <!-- Unpinned (rendered slice) -->\n @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"last && state.trailingColumnSpacer() === 0 && state.pinnedRightColumns().length === 0\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, i + state.effectiveColumnRange().start)\"\n />\n }\n\n <!-- Trailing column spacer -->\n @if (state.trailingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.trailingColumnSpacer()\"\n [style.min-width.px]=\"state.trailingColumnSpacer()\"\n ></div>\n }\n\n <!-- Pinned-right columns (sticky) -->\n @for (col of state.pinnedRightColumns(); track trackByField($index, col); let i = $index, first = $first, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"last\"\n [pinnedSticky]=\"'right'\"\n [pinnedOffset]=\"state.pinnedRightCumulativeOffsets()[i]\"\n [pinnedEdge]=\"first ? 'right' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (showExpand()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"0\"\n [style.width.px]=\"36\"\n [style.min-width.px]=\"36\"\n ></div>\n } @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n [style.width.px]=\"48\"\n [style.min-width.px]=\"48\"\n ></div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell\"\n [class.grid-header__filter-cell--pinned-left-edge]=\"last && state.pinnedLeftColumns().length > 0\"\n [style.left.px]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [style.width.px]=\"col.currentWidth\"\n [style.min-width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n } @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n } @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col)) {\n <div
|
|
12150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridHeaderComponent, isStandalone: true, selector: "moz-grid-header", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortClick: "sortClick", menuAction: "menuAction", resizeStart: "resizeStart", selectAllToggle: "selectAllToggle", columnReorder: "columnReorder" }, host: { properties: { "style.min-width.px": "rowMinWidth()" } }, viewQueries: [{ propertyName: "headerCenter", first: true, predicate: ["headerCenter"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"grid-header\"\n [class.grid-header--no-bottom-border]=\"hasFilterRow()\"\n role=\"row\"\n #headerCenter\n>\n <!-- Expand spacer (sticky, leftmost) -->\n @if (showExpand()) {\n <div class=\"grid-header__sticky-utility grid-header__expand-spacer\" [style.left.px]=\"0\"></div>\n }\n\n <!-- Checkbox utility (sticky) -->\n @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__checkbox\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n >\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n }\n\n <!-- Pinned-left columns (sticky) -->\n @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n [pinnedSticky]=\"'left'\"\n [pinnedOffset]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [pinnedEdge]=\"last && state.pinnedLeftColumns().length > 0 ? 'left' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n\n <!-- Leading column spacer -->\n @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n }\n\n <!-- Unpinned (rendered slice) -->\n @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"last && state.trailingColumnSpacer() === 0 && state.pinnedRightColumns().length === 0\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, i + state.effectiveColumnRange().start)\"\n />\n }\n\n <!-- Trailing column spacer -->\n @if (state.trailingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.trailingColumnSpacer()\"\n [style.min-width.px]=\"state.trailingColumnSpacer()\"\n ></div>\n }\n\n <!-- Pinned-right columns (sticky) -->\n @for (col of state.pinnedRightColumns(); track trackByField($index, col); let i = $index, first = $first, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"last\"\n [pinnedSticky]=\"'right'\"\n [pinnedOffset]=\"state.pinnedRightCumulativeOffsets()[i]\"\n [pinnedEdge]=\"first ? 'right' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (showExpand()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"0\"\n [style.width.px]=\"36\"\n [style.min-width.px]=\"36\"\n ></div>\n } @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n [style.width.px]=\"48\"\n [style.min-width.px]=\"48\"\n ></div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell\"\n [class.grid-header__filter-cell--pinned-left-edge]=\"last && state.pinnedLeftColumns().length > 0\"\n [style.left.px]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [style.width.px]=\"col.currentWidth\"\n [style.min-width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n } @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n } @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col); let last = $last) {\n <div\n class=\"grid-header__filter-cell\"\n [class.grid-header__filter-cell--last]=\"\n last && state.trailingColumnSpacer() === 0 && state.pinnedRightColumns().length === 0\n \"\n [style.width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n } @if (state.trailingColumnSpacer() > 0) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.trailingColumnSpacer()\"\n [style.min-width.px]=\"state.trailingColumnSpacer()\"\n ></div>\n } @for (col of state.pinnedRightColumns(); track trackByField($index, col); let i = $index, first = $first) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--pinned-end\"\n [class.grid-header__filter-cell--pinned-right-edge]=\"first && state.pinnedRightColumns().length > 0\"\n [style.right.px]=\"state.pinnedRightCumulativeOffsets()[i]\"\n [style.width.px]=\"col.currentWidth\"\n [style.min-width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;background:var(--color-background-primary, #fff)}.grid-header{display:flex;width:max-content;min-width:100%;height:48px;border-bottom:1px solid var(--color-border-primary);background:inherit}.grid-header--no-bottom-border{border-bottom:none}.grid-header__sticky-utility{position:sticky;z-index:4;background:var(--color-background-primary, #fff);flex:0 0 auto;box-sizing:border-box}.grid-header__expand-spacer{width:36px;min-width:36px}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;cursor:pointer}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-spacer{flex:0 0 auto;height:100%;background:inherit;pointer-events:none}.grid-header__filter-row{display:flex;width:max-content;min-width:100%;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary);flex:0 0 auto;background:inherit}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none;pointer-events:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-cell--pinned-left-edge{box-shadow:4px 0 8px -2px #0000001a}.grid-header__filter-cell--pinned-right-edge{box-shadow:-4px 0 8px -2px #0000001a}\n"], dependencies: [{ kind: "component", type: MozGridHeaderCellComponent, selector: "moz-grid-header-cell", inputs: ["columnState", "def", "isLast", "pinnedEnd", "reorderable", "pinnedSticky", "pinnedOffset", "pinnedEdge"], outputs: ["sortClick", "menuAction", "resizeStart"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12105
12151
|
}
|
|
12106
12152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridHeaderComponent, decorators: [{
|
|
12107
12153
|
type: Component,
|
|
12108
12154
|
args: [{ selector: 'moz-grid-header', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridHeaderCellComponent, MozCheckboxComponent, FormsModule, NgTemplateOutlet], host: {
|
|
12109
12155
|
'[style.min-width.px]': 'rowMinWidth()',
|
|
12110
|
-
}, template: "<div\n class=\"grid-header\"\n [class.grid-header--no-bottom-border]=\"hasFilterRow()\"\n role=\"row\"\n #headerCenter\n>\n <!-- Expand spacer (sticky, leftmost) -->\n @if (showExpand()) {\n <div class=\"grid-header__sticky-utility grid-header__expand-spacer\" [style.left.px]=\"0\"></div>\n }\n\n <!-- Checkbox utility (sticky) -->\n @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__checkbox\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n >\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n }\n\n <!-- Pinned-left columns (sticky) -->\n @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n [pinnedSticky]=\"'left'\"\n [pinnedOffset]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [pinnedEdge]=\"last && state.pinnedLeftColumns().length > 0 ? 'left' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n\n <!-- Leading column spacer -->\n @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n }\n\n <!-- Unpinned (rendered slice) -->\n @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"last && state.trailingColumnSpacer() === 0 && state.pinnedRightColumns().length === 0\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, i + state.effectiveColumnRange().start)\"\n />\n }\n\n <!-- Trailing column spacer -->\n @if (state.trailingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.trailingColumnSpacer()\"\n [style.min-width.px]=\"state.trailingColumnSpacer()\"\n ></div>\n }\n\n <!-- Pinned-right columns (sticky) -->\n @for (col of state.pinnedRightColumns(); track trackByField($index, col); let i = $index, first = $first, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"last\"\n [pinnedSticky]=\"'right'\"\n [pinnedOffset]=\"state.pinnedRightCumulativeOffsets()[i]\"\n [pinnedEdge]=\"first ? 'right' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (showExpand()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"0\"\n [style.width.px]=\"36\"\n [style.min-width.px]=\"36\"\n ></div>\n } @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n [style.width.px]=\"48\"\n [style.min-width.px]=\"48\"\n ></div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell\"\n [class.grid-header__filter-cell--pinned-left-edge]=\"last && state.pinnedLeftColumns().length > 0\"\n [style.left.px]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [style.width.px]=\"col.currentWidth\"\n [style.min-width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n } @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n } @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col)) {\n <div
|
|
12156
|
+
}, template: "<div\n class=\"grid-header\"\n [class.grid-header--no-bottom-border]=\"hasFilterRow()\"\n role=\"row\"\n #headerCenter\n>\n <!-- Expand spacer (sticky, leftmost) -->\n @if (showExpand()) {\n <div class=\"grid-header__sticky-utility grid-header__expand-spacer\" [style.left.px]=\"0\"></div>\n }\n\n <!-- Checkbox utility (sticky) -->\n @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__checkbox\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n >\n <moz-checkbox\n id=\"grid-select-all\"\n label=\"Select all rows\"\n [indeterminate]=\"rowSelection.isIndeterminate()\"\n [ngModel]=\"rowSelection.isAllSelected()\"\n (change)=\"onSelectAllClick($event)\"\n />\n </div>\n }\n\n <!-- Pinned-left columns (sticky) -->\n @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"false\"\n [pinnedSticky]=\"'left'\"\n [pinnedOffset]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [pinnedEdge]=\"last && state.pinnedLeftColumns().length > 0 ? 'left' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n\n <!-- Leading column spacer -->\n @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n }\n\n <!-- Unpinned (rendered slice) -->\n @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [isLast]=\"last && state.trailingColumnSpacer() === 0 && state.pinnedRightColumns().length === 0\"\n [reorderable]=\"reorderable()\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n (mousedown)=\"onDragStart($event, i + state.effectiveColumnRange().start)\"\n />\n }\n\n <!-- Trailing column spacer -->\n @if (state.trailingColumnSpacer() > 0) {\n <div\n class=\"grid-header__cell-spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.trailingColumnSpacer()\"\n [style.min-width.px]=\"state.trailingColumnSpacer()\"\n ></div>\n }\n\n <!-- Pinned-right columns (sticky) -->\n @for (col of state.pinnedRightColumns(); track trackByField($index, col); let i = $index, first = $first, last = $last) {\n <moz-grid-header-cell\n [columnState]=\"col\"\n [def]=\"state.columnDefMap().get(col.field)!\"\n [pinnedEnd]=\"true\"\n [isLast]=\"last\"\n [pinnedSticky]=\"'right'\"\n [pinnedOffset]=\"state.pinnedRightCumulativeOffsets()[i]\"\n [pinnedEdge]=\"first ? 'right' : null\"\n (sortClick)=\"sortClick.emit($event)\"\n (menuAction)=\"menuAction.emit($event)\"\n (resizeStart)=\"resizeStart.emit({ field: col.field, event: $event })\"\n />\n }\n</div>\n\n@if (hasFilterRow()) {\n<div class=\"grid-header__filter-row\">\n @if (showExpand()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"0\"\n [style.width.px]=\"36\"\n [style.min-width.px]=\"36\"\n ></div>\n } @if (showCheckbox()) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--spacer\"\n [style.left.px]=\"showExpand() ? 36 : 0\"\n [style.width.px]=\"48\"\n [style.min-width.px]=\"48\"\n ></div>\n } @for (col of state.pinnedLeftColumns(); track trackByField($index, col); let i = $index, last = $last) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell\"\n [class.grid-header__filter-cell--pinned-left-edge]=\"last && state.pinnedLeftColumns().length > 0\"\n [style.left.px]=\"utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]\"\n [style.width.px]=\"col.currentWidth\"\n [style.min-width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n } @if (state.leadingColumnSpacer() > 0) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.leadingColumnSpacer()\"\n [style.min-width.px]=\"state.leadingColumnSpacer()\"\n ></div>\n } @for (col of state.renderedUnpinnedColumns(); track trackByField($index, col); let last = $last) {\n <div\n class=\"grid-header__filter-cell\"\n [class.grid-header__filter-cell--last]=\"\n last && state.trailingColumnSpacer() === 0 && state.pinnedRightColumns().length === 0\n \"\n [style.width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n } @if (state.trailingColumnSpacer() > 0) {\n <div\n class=\"grid-header__filter-cell grid-header__filter-cell--spacer\"\n aria-hidden=\"true\"\n [style.width.px]=\"state.trailingColumnSpacer()\"\n [style.min-width.px]=\"state.trailingColumnSpacer()\"\n ></div>\n } @for (col of state.pinnedRightColumns(); track trackByField($index, col); let i = $index, first = $first) {\n <div\n class=\"grid-header__sticky-utility grid-header__filter-cell grid-header__filter-cell--pinned-end\"\n [class.grid-header__filter-cell--pinned-right-edge]=\"first && state.pinnedRightColumns().length > 0\"\n [style.right.px]=\"state.pinnedRightCumulativeOffsets()[i]\"\n [style.width.px]=\"col.currentWidth\"\n [style.min-width.px]=\"col.currentWidth\"\n >\n @if (getFilterTemplate(col.field); as tmpl) {\n <ng-container [ngTemplateOutlet]=\"tmpl\" [ngTemplateOutletContext]=\"{ $implicit: col.field }\" />\n }\n </div>\n }\n</div>\n}\n", styles: [":host{display:block;flex-shrink:0;background:var(--color-background-primary, #fff)}.grid-header{display:flex;width:max-content;min-width:100%;height:48px;border-bottom:1px solid var(--color-border-primary);background:inherit}.grid-header--no-bottom-border{border-bottom:none}.grid-header__sticky-utility{position:sticky;z-index:4;background:var(--color-background-primary, #fff);flex:0 0 auto;box-sizing:border-box}.grid-header__expand-spacer{width:36px;min-width:36px}.grid-header__checkbox{display:flex;align-items:center;justify-content:center;width:48px;min-width:48px;cursor:pointer}.grid-header__checkbox ::ng-deep .checkbox{margin:0}.grid-header__checkbox ::ng-deep .checkbox__label{display:none}.grid-header__cell-spacer{flex:0 0 auto;height:100%;background:inherit;pointer-events:none}.grid-header__filter-row{display:flex;width:max-content;min-width:100%;height:40px;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-header__filter-cell{display:flex;align-items:center;padding:0 var(--spacing-xs, 4px);box-sizing:border-box;overflow:hidden;height:100%;border-right:1px solid var(--color-border-primary);flex:0 0 auto;background:inherit}.grid-header__filter-cell--spacer{flex-shrink:0;border-right:none;pointer-events:none}.grid-header__filter-cell--last{border-right:none}.grid-header__filter-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}.grid-header__filter-cell--pinned-left-edge{box-shadow:4px 0 8px -2px #0000001a}.grid-header__filter-cell--pinned-right-edge{box-shadow:-4px 0 8px -2px #0000001a}\n"] }]
|
|
12111
12157
|
}], ctorParameters: () => [], propDecorators: { headerCenter: [{ type: i0.ViewChild, args: ['headerCenter', { isSignal: true }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], sortClick: [{ type: i0.Output, args: ["sortClick"] }], menuAction: [{ type: i0.Output, args: ["menuAction"] }], resizeStart: [{ type: i0.Output, args: ["resizeStart"] }], selectAllToggle: [{ type: i0.Output, args: ["selectAllToggle"] }], columnReorder: [{ type: i0.Output, args: ["columnReorder"] }] } });
|
|
12112
12158
|
|
|
12113
12159
|
/**
|
|
@@ -13174,7 +13220,7 @@ class MozGridCellComponent {
|
|
|
13174
13220
|
});
|
|
13175
13221
|
}
|
|
13176
13222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null }, pinnedSticky: { classPropertyName: "pinnedSticky", publicName: "pinnedSticky", isSignal: true, isRequired: false, transformFunction: null }, pinnedOffset: { classPropertyName: "pinnedOffset", publicName: "pinnedOffset", isSignal: true, isRequired: false, transformFunction: null }, pinnedEdge: { classPropertyName: "pinnedEdge", publicName: "pinnedEdge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()", "style.position": "pinnedSticky() ? \"sticky\" : null", "style.left.px": "pinnedSticky() === \"left\" ? pinnedOffset() : null", "style.right.px": "pinnedSticky() === \"right\" ? pinnedOffset() : null", "style.zIndex": "pinnedSticky() ? 2 : null", "class.grid-cell--pinned": "pinnedSticky() !== null", "class.grid-cell--pinned-left-edge": "pinnedEdge() === \"left\"", "class.grid-cell--pinned-right-edge": "pinnedEdge() === \"right\"" } }, ngImport: i0, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [class.grid-cell--formula-error]=\"hasFormulaError()\"\n [class.grid-cell--ref-highlight]=\"refHighlightColor()\"\n [style.--moz-grid-ref-color]=\"refHighlightColor()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (isFormulaEditing()) {\n <moz-grid-formula-editor\n [value]=\"$any(editState().draftValue)\"\n (valueChange)=\"updateDraftFn($event)\"\n (commit)=\"commitEditFn()\"\n (cancel)=\"onFormulaCancel()\"\n />\n } @else if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0;background:inherit}:host.grid-cell--pinned{background:inherit}:host.grid-cell--pinned-left-edge{box-shadow:4px 0 8px -2px #0000001a}:host.grid-cell--pinned-right-edge{box-shadow:-4px 0 8px -2px #0000001a}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--ref-highlight{z-index:2}.grid-cell--ref-highlight:after{content:\"\";position:absolute;inset:0;border:2px solid var(--moz-grid-ref-color, transparent);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{outline:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.grid-cell--error:hover:before{background:transparent}.grid-cell--formula-error .grid-cell__value{color:var(--Status-Text-Error, #d0021b);font-style:italic}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2;fill:var(--Status-Standalone-element-Error, #ea302d)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr", "disableCellPick"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridCellComponent, isStandalone: true, selector: "moz-grid-cell", inputs: { row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, rowIndex: { classPropertyName: "rowIndex", publicName: "rowIndex", isSignal: true, isRequired: true, transformFunction: null }, colIndex: { classPropertyName: "colIndex", publicName: "colIndex", isSignal: true, isRequired: true, transformFunction: null }, colState: { classPropertyName: "colState", publicName: "colState", isSignal: true, isRequired: true, transformFunction: null }, def: { classPropertyName: "def", publicName: "def", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null }, pinnedEnd: { classPropertyName: "pinnedEnd", publicName: "pinnedEnd", isSignal: true, isRequired: false, transformFunction: null }, pinnedSticky: { classPropertyName: "pinnedSticky", publicName: "pinnedSticky", isSignal: true, isRequired: false, transformFunction: null }, pinnedOffset: { classPropertyName: "pinnedOffset", publicName: "pinnedOffset", isSignal: true, isRequired: false, transformFunction: null }, pinnedEdge: { classPropertyName: "pinnedEdge", publicName: "pinnedEdge", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { commitEdit: "commitEdit", cancelEdit: "cancelEdit" }, host: { properties: { "style.flex": "isLast() ? \"1 0 auto\" : \"0 0 auto\"", "style.width.px": "isLast() ? undefined : colState().currentWidth", "style.min-width.px": "isLast() ? colState().currentWidth : resolvedMinWidth()", "style.position": "pinnedSticky() ? \"sticky\" : null", "style.left.px": "pinnedSticky() === \"left\" ? pinnedOffset() : null", "style.right.px": "pinnedSticky() === \"right\" ? pinnedOffset() : null", "style.zIndex": "pinnedSticky() ? 2 : null", "class.grid-cell--pinned": "pinnedSticky() !== null", "class.grid-cell--pinned-left-edge": "pinnedEdge() === \"left\"", "class.grid-cell--pinned-right-edge": "pinnedEdge() === \"right\"" } }, ngImport: i0, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [class.grid-cell--formula-error]=\"hasFormulaError()\"\n [class.grid-cell--ref-highlight]=\"refHighlightColor()\"\n [style.--moz-grid-ref-color]=\"refHighlightColor()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (isFormulaEditing()) {\n <moz-grid-formula-editor\n [value]=\"$any(editState().draftValue)\"\n (valueChange)=\"updateDraftFn($event)\"\n (commit)=\"commitEditFn()\"\n (cancel)=\"onFormulaCancel()\"\n />\n } @else if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0;background:inherit}:host.grid-cell--pinned{background:inherit}:host.grid-cell--pinned-left-edge{box-shadow:4px 0 8px -2px #0000001a}:host.grid-cell--pinned-right-edge{box-shadow:-4px 0 8px -2px #0000001a}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep moz-combobox,.grid-cell__editor ::ng-deep .mc-combobox{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--ref-highlight{z-index:2}.grid-cell--ref-highlight:after{content:\"\";position:absolute;inset:0;border:2px solid var(--moz-grid-ref-color, transparent);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{outline:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.grid-cell--error:hover:before{background:transparent}.grid-cell--formula-error .grid-cell__value{color:var(--Status-Text-Error, #d0021b);font-style:italic}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2;fill:var(--Status-Standalone-element-Error, #ea302d)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozCheckboxComponent, selector: "moz-checkbox", inputs: ["id", "name", "label", "indeterminate", "isInvalid", "disabled", "indented"] }, { kind: "component", type: MozDatepickerComponent, selector: "moz-datepicker", inputs: ["id", "disabled", "readonly", "invalid", "error", "clearable", "size", "label"] }, { kind: "directive", type: MozTooltipDirective, selector: "[mozTooltip]", inputs: ["mozTooltip", "tooltipPosition", "tooltipNoPointer"] }, { kind: "component", type: ErrorFilled24, selector: "ErrorFilled24", inputs: ["hostClass"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr", "disableCellPick"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13178
13224
|
}
|
|
13179
13225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridCellComponent, decorators: [{
|
|
13180
13226
|
type: Component,
|
|
@@ -13198,7 +13244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
13198
13244
|
'[class.grid-cell--pinned]': 'pinnedSticky() !== null',
|
|
13199
13245
|
'[class.grid-cell--pinned-left-edge]': 'pinnedEdge() === "left"',
|
|
13200
13246
|
'[class.grid-cell--pinned-right-edge]': 'pinnedEdge() === "right"',
|
|
13201
|
-
}, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [class.grid-cell--formula-error]=\"hasFormulaError()\"\n [class.grid-cell--ref-highlight]=\"refHighlightColor()\"\n [style.--moz-grid-ref-color]=\"refHighlightColor()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (isFormulaEditing()) {\n <moz-grid-formula-editor\n [value]=\"$any(editState().draftValue)\"\n (valueChange)=\"updateDraftFn($event)\"\n (commit)=\"commitEditFn()\"\n (cancel)=\"onFormulaCancel()\"\n />\n } @else if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0;background:inherit}:host.grid-cell--pinned{background:inherit}:host.grid-cell--pinned-left-edge{box-shadow:4px 0 8px -2px #0000001a}:host.grid-cell--pinned-right-edge{box-shadow:-4px 0 8px -2px #0000001a}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--ref-highlight{z-index:2}.grid-cell--ref-highlight:after{content:\"\";position:absolute;inset:0;border:2px solid var(--moz-grid-ref-color, transparent);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{outline:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.grid-cell--error:hover:before{background:transparent}.grid-cell--formula-error .grid-cell__value{color:var(--Status-Text-Error, #d0021b);font-style:italic}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2;fill:var(--Status-Standalone-element-Error, #ea302d)}\n"] }]
|
|
13247
|
+
}, template: "<div\n class=\"grid-cell\"\n [class.grid-cell--focused]=\"isFocused()\"\n [class.grid-cell--in-range]=\"isInRange()\"\n [class.grid-cell--in-fill-range]=\"isInFillRange()\"\n [class.grid-cell--in-fill-reject-range]=\"isInFillRejectRange()\"\n [class.grid-cell--cut]=\"cutEdges().any\"\n [class.grid-cell--last]=\"isLast()\"\n [class.grid-cell--pinned-end]=\"pinnedEnd()\"\n [class.grid-cell--readonly]=\"!def().editable\"\n [class.grid-cell--error]=\"cellError()\"\n [class.grid-cell--formula-error]=\"hasFormulaError()\"\n [class.grid-cell--ref-highlight]=\"refHighlightColor()\"\n [style.--moz-grid-ref-color]=\"refHighlightColor()\"\n [attr.aria-invalid]=\"cellError() ? 'true' : null\"\n (click)=\"onCellClick($event)\"\n (dblclick)=\"onDoubleClick()\"\n (mousedown)=\"onMouseDown($event)\"\n (mouseenter)=\"onMouseEnter()\"\n>\n @if (isEditing()) {\n <div class=\"grid-cell__editor\" (focusout)=\"onEditorBlur($event)\">\n @if (isFormulaEditing()) {\n <moz-grid-formula-editor\n [value]=\"$any(editState().draftValue)\"\n (valueChange)=\"updateDraftFn($event)\"\n (commit)=\"commitEditFn()\"\n (cancel)=\"onFormulaCancel()\"\n />\n } @else if (editTemplate()) {\n <div class=\"grid-cell__editor-custom\">\n <ng-container\n [ngTemplateOutlet]=\"editTemplate()!\"\n [ngTemplateOutletContext]=\"{\n $implicit: value(),\n row: row(),\n field: def().field,\n draft: editState().draftValue,\n updateDraft: updateDraftFn,\n commitEdit: commitEditFn\n }\"\n />\n </div>\n } @else { @switch (editorType()) { @case ('text') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('number') {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"number\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } @case ('select') {\n <moz-select\n name=\"cell-editor\"\n [options]=\"def().cellEditorOptions ?? []\"\n [ngModel]=\"editState().draftValue\"\n (change)=\"onSelectChange($event)\"\n [size]=\"'s'\"\n />\n } @case ('checkbox') {\n <moz-checkbox\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n [ngModel]=\"!!editState().draftValue\"\n (change)=\"onCheckboxChange($event)\"\n />\n } @case ('date') {\n <moz-datepicker\n [id]=\"'grid-cell-editor-' + rowIndex() + '-' + colIndex()\"\n size=\"s\"\n [ngModel]=\"editState().draftValue\"\n (ngModelChange)=\"onDateChange($event)\"\n />\n } @default {\n <input\n class=\"grid-cell__input grid-cell__input--plain\"\n type=\"text\"\n [value]=\"editState().draftValue\"\n (input)=\"onEditorInput($event)\"\n />\n } } }\n </div>\n } @else { @if (cellTemplate()) {\n <div class=\"grid-cell__custom\">\n <ng-container\n [ngTemplateOutlet]=\"cellTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: value(), row: row(), field: def().field }\"\n />\n </div>\n } @else {\n <span class=\"grid-cell__value\">{{ displayValue() }}</span>\n } } @if (cutEdges(); as edges) { @if (edges.top) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--top\"></div>\n } @if (edges.bottom) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--bottom\"></div>\n } @if (edges.left) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--left\"></div>\n } @if (edges.right) {\n <div class=\"grid-cell__cut-mark grid-cell__cut-mark--right\"></div>\n } } @if (isFocused() && !isEditing() && def().editable) {\n <div class=\"grid-cell__fill-handle\" (mousedown)=\"onFillHandleMouseDown($event)\"></div>\n } @if (cellError(); as error) {\n <div\n class=\"grid-cell__error-icon\"\n [mozTooltip]=\"error.message\"\n tooltipPosition=\"top\"\n aria-label=\"Erreur de validation\"\n >\n <ErrorFilled24 />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;height:100%;min-width:0;background:inherit}:host.grid-cell--pinned{background:inherit}:host.grid-cell--pinned-left-edge{box-shadow:4px 0 8px -2px #0000001a}:host.grid-cell--pinned-right-edge{box-shadow:-4px 0 8px -2px #0000001a}.grid-cell{display:flex;align-items:center;position:relative;padding:0 var(--spacing-s, 8px);height:100%;border-right:1px solid var(--color-border-primary);overflow:hidden;box-sizing:border-box;min-width:0;background:inherit;cursor:pointer}.grid-cell--last{border-right:none}.grid-cell--pinned-end{border-right:none;border-left:1px solid var(--color-border-primary)}:host(:first-child) .grid-cell--pinned-end{border-left:none}.grid-cell__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);position:relative;z-index:1}.grid-cell__editor{width:100%;min-width:0;max-width:100%;height:100%;display:flex;align-items:center;overflow:hidden;box-sizing:border-box;position:relative;z-index:1}.grid-cell__editor-custom{width:100%;min-width:0;max-width:100%;overflow:hidden;box-sizing:border-box;display:flex;align-items:center;flex-wrap:wrap;gap:4px}.grid-cell__editor input,.grid-cell__editor moz-select{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep moz-combobox,.grid-cell__editor ::ng-deep .mc-combobox{width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain{border:none;outline:none;background:transparent;font-family:inherit;font-size:var(--font-size-s, 14px);color:var(--color-text-primary);padding:0;height:100%;width:100%;min-width:0;box-sizing:border-box}.grid-cell__input--plain:focus{outline:none}.grid-cell__input--plain[type=number]::-webkit-inner-spin-button,.grid-cell__input--plain[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.grid-cell__input--plain[type=number]{-moz-appearance:textfield}.grid-cell__editor ::ng-deep .text-input{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .select,.grid-cell__editor ::ng-deep .select__trigger{min-width:0;width:100%}.grid-cell__editor ::ng-deep *{max-width:100%}.grid-cell__editor moz-datepicker{width:100%;min-width:0;box-sizing:border-box}.grid-cell__editor ::ng-deep .mc-datepicker,.grid-cell__editor ::ng-deep .mc-text-input{width:100%;min-width:0;box-sizing:border-box;height:28px;font-size:var(--font-size-xs, 12px)}.grid-cell__editor ::ng-deep moz-datepicker label{display:none}.grid-cell>*:not(.grid-cell__fill-handle){position:relative;z-index:1}.grid-cell:before{content:\"\";position:absolute;inset:3px;border-radius:4px;pointer-events:none;z-index:0}.grid-cell:hover:before{background:#f1f3f4}.grid-cell--focused:hover:before,.grid-cell--in-range:hover:before,.grid-cell--in-fill-range:hover:before,.grid-cell--in-fill-reject-range:hover:before{background:transparent}.grid-cell--focused{z-index:2}.grid-cell--focused:after{content:\"\";position:absolute;inset:0;border:2px solid var(--color-background-accent-inverse);border-radius:4px;pointer-events:none}.grid-cell--ref-highlight{z-index:2}.grid-cell--ref-highlight:after{content:\"\";position:absolute;inset:0;border:2px solid var(--moz-grid-ref-color, transparent);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--in-range{background:var(--color-background-accent)}.grid-cell--readonly .grid-cell__value{color:var(--color-text-secondary, #666)}.grid-cell--in-fill-range{background:#34a85314}.grid-cell--in-fill-range:after{content:\"\";position:absolute;inset:0;border:1px dashed var(--color-success, #34a853);border-radius:4px;pointer-events:none}.grid-cell--in-fill-reject-range{background:#ea302d1f;cursor:not-allowed;z-index:2}.grid-cell--in-fill-reject-range:after{content:\"\";position:absolute;inset:0;border:2px dashed var(--Status-Standalone-element-Error, #ea302d);border-radius:4px;pointer-events:none;z-index:3}.grid-cell--cut{background:#1a73e80f}.grid-cell__cut-mark{position:absolute;pointer-events:none;z-index:5;--cut-color: var(--color-background-accent-inverse, #1a73e8)}.grid-cell__cut-mark--top,.grid-cell__cut-mark--bottom{left:0;right:0;height:2px;background-image:linear-gradient(90deg,var(--cut-color) 50%,transparent 50%);background-size:8px 2px;background-repeat:repeat-x;animation:moz-grid-marching-ants-x .5s linear infinite}.grid-cell__cut-mark--top{top:0}.grid-cell__cut-mark--bottom{bottom:0}.grid-cell__cut-mark--left,.grid-cell__cut-mark--right{top:0;bottom:0;width:2px;background-image:linear-gradient(180deg,var(--cut-color) 50%,transparent 50%);background-size:2px 8px;background-repeat:repeat-y;animation:moz-grid-marching-ants-y .5s linear infinite}.grid-cell__cut-mark--left{left:0}.grid-cell__cut-mark--right{right:0}@keyframes moz-grid-marching-ants-x{0%{background-position-x:0}to{background-position-x:8px}}@keyframes moz-grid-marching-ants-y{0%{background-position-y:0}to{background-position-y:8px}}.grid-cell__fill-handle{position:absolute;right:0;bottom:0;width:8px;height:8px;background:var(--color-background-accent-inverse);cursor:crosshair;z-index:4}.grid-cell--error{outline:1px solid var(--Status-Border-Error, #ef5f5c);outline-offset:-2px;z-index:1;border-radius:4px}.grid-cell--error:hover:before{background:transparent}.grid-cell--formula-error .grid-cell__value{color:var(--Status-Text-Error, #d0021b);font-style:italic}.grid-cell__error-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:auto;cursor:help;position:relative;z-index:2;fill:var(--Status-Standalone-element-Error, #ea302d)}\n"] }]
|
|
13202
13248
|
}], ctorParameters: () => [], propDecorators: { row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], colIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "colIndex", required: true }] }], colState: [{ type: i0.Input, args: [{ isSignal: true, alias: "colState", required: true }] }], def: [{ type: i0.Input, args: [{ isSignal: true, alias: "def", required: true }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }], pinnedEnd: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedEnd", required: false }] }], pinnedSticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedSticky", required: false }] }], pinnedOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedOffset", required: false }] }], pinnedEdge: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinnedEdge", required: false }] }], commitEdit: [{ type: i0.Output, args: ["commitEdit"] }], cancelEdit: [{ type: i0.Output, args: ["cancelEdit"] }] } });
|
|
13203
13249
|
// ─── Formula value helpers (module-local so they stay tree-shakable) ────────
|
|
13204
13250
|
/**
|
|
@@ -13785,7 +13831,7 @@ class GridSettingsDrawerComponent {
|
|
|
13785
13831
|
this.searchQuery.set('');
|
|
13786
13832
|
}
|
|
13787
13833
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridSettingsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13788
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridSettingsDrawerComponent, isStandalone: true, selector: "moz-grid-settings-drawer", ngImport: i0, template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Data density</span>\n <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Display columns</span>\n <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n <label class=\"settings-density__label\">Data density</label>\n <moz-select\n name=\"density\"\n [options]=\"densityOptions\"\n [ngModel]=\"draftDensity()\"\n (ngModelChange)=\"draftDensity.set($event)\"\n />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n <input\n class=\"settings-columns__search\"\n type=\"text\"\n placeholder=\"Find a column\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n aria-label=\"Search columns\"\n />\n <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n @for (col of filteredColumns(); track col.field) {\n <div class=\"settings-columns__item\" cdkDrag>\n <div class=\"settings-columns__item-left\">\n <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n <Drag20 />\n </span>\n <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n </div>\n <moz-toggle\n [id]=\"'col-toggle-' + col.field\"\n [ngModel]=\"col.visible\"\n (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n />\n </div>\n }\n </div>\n <div class=\"settings-columns__bulk-actions\">\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">Hide all</button>\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">Show all</button>\n </div>\n</div>\n} }\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"apply()\" [appearance]=\"'accent'\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-size:var(--font-size-s, 14px);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:var(--font-size-m, 16px)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozToggleComponent, selector: "moz-toggle", inputs: ["id", "name", "size", "disabled"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13834
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: GridSettingsDrawerComponent, isStandalone: true, selector: "moz-grid-settings-drawer", ngImport: i0, template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Data density</span>\n <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Display columns</span>\n <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n <label class=\"settings-density__label\">Data density</label>\n <moz-select\n name=\"density\"\n [options]=\"densityOptions\"\n [ngModel]=\"draftDensity()\"\n (ngModelChange)=\"draftDensity.set($event)\"\n />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n <input\n class=\"settings-columns__search\"\n type=\"text\"\n placeholder=\"Find a column\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n aria-label=\"Search columns\"\n />\n <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n @for (col of filteredColumns(); track col.field) {\n <div class=\"settings-columns__item\" cdkDrag>\n <div class=\"settings-columns__item-left\">\n <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n <Drag20 />\n </span>\n <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n </div>\n <moz-toggle\n [id]=\"'col-toggle-' + col.field\"\n [ngModel]=\"col.visible\"\n (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n />\n </div>\n }\n </div>\n <div class=\"settings-columns__bulk-actions\">\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">Hide all</button>\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">Show all</button>\n </div>\n</div>\n} }\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"apply()\" [appearance]=\"'accent'\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px;padding-bottom:48px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-size:var(--font-size-s, 14px);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:var(--font-size-m, 16px)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s ease}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }, { kind: "component", type: MozSelectComponent, selector: "moz-select", inputs: ["id", "name", "options", "placeholder", "isInvalid", "disabled", "readonly", "size"] }, { kind: "component", type: MozToggleComponent, selector: "moz-toggle", inputs: ["id", "name", "size", "disabled"] }, { kind: "component", type: ChevronRight20, selector: "ChevronRight20", inputs: ["hostClass"] }, { kind: "component", type: Drag20, selector: "Drag20", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13789
13835
|
}
|
|
13790
13836
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: GridSettingsDrawerComponent, decorators: [{
|
|
13791
13837
|
type: Component,
|
|
@@ -13800,7 +13846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
13800
13846
|
MozToggleComponent,
|
|
13801
13847
|
ChevronRight20,
|
|
13802
13848
|
Drag20,
|
|
13803
|
-
], template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Data density</span>\n <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Display columns</span>\n <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n <label class=\"settings-density__label\">Data density</label>\n <moz-select\n name=\"density\"\n [options]=\"densityOptions\"\n [ngModel]=\"draftDensity()\"\n (ngModelChange)=\"draftDensity.set($event)\"\n />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n <input\n class=\"settings-columns__search\"\n type=\"text\"\n placeholder=\"Find a column\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n aria-label=\"Search columns\"\n />\n <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n @for (col of filteredColumns(); track col.field) {\n <div class=\"settings-columns__item\" cdkDrag>\n <div class=\"settings-columns__item-left\">\n <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n <Drag20 />\n </span>\n <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n </div>\n <moz-toggle\n [id]=\"'col-toggle-' + col.field\"\n [ngModel]=\"col.visible\"\n (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n />\n </div>\n }\n </div>\n <div class=\"settings-columns__bulk-actions\">\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">Hide all</button>\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">Show all</button>\n </div>\n</div>\n} }\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"apply()\" [appearance]=\"'accent'\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-size:var(--font-size-s, 14px);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:var(--font-size-m, 16px)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s ease}\n"] }]
|
|
13849
|
+
], template: "@switch (screen()) { @case ('main') {\n<div class=\"settings-list\">\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('density')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Data density</span>\n <span class=\"settings-list__item-subtitle\">{{ densityLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n <button type=\"button\" class=\"settings-list__item\" (click)=\"goTo('columns')\">\n <div class=\"settings-list__item-text\">\n <span class=\"settings-list__item-title\">Display columns</span>\n <span class=\"settings-list__item-subtitle\">{{ columnsLabel() }}</span>\n </div>\n <ChevronRight20 />\n </button>\n</div>\n} @case ('density') {\n<div class=\"settings-density\">\n <label class=\"settings-density__label\">Data density</label>\n <moz-select\n name=\"density\"\n [options]=\"densityOptions\"\n [ngModel]=\"draftDensity()\"\n (ngModelChange)=\"draftDensity.set($event)\"\n />\n</div>\n} @case ('columns') {\n<div class=\"settings-columns\">\n <input\n class=\"settings-columns__search\"\n type=\"text\"\n placeholder=\"Find a column\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n aria-label=\"Search columns\"\n />\n <div class=\"settings-columns__list\" cdkDropList (cdkDropListDropped)=\"onColumnDrop($event)\">\n @for (col of filteredColumns(); track col.field) {\n <div class=\"settings-columns__item\" cdkDrag>\n <div class=\"settings-columns__item-left\">\n <span class=\"settings-columns__drag-handle\" cdkDragHandle>\n <Drag20 />\n </span>\n <span class=\"settings-columns__item-label\">{{ col.headerName }}</span>\n </div>\n <moz-toggle\n [id]=\"'col-toggle-' + col.field\"\n [ngModel]=\"col.visible\"\n (ngModelChange)=\"onColumnToggle(col.field, $event)\"\n />\n </div>\n }\n </div>\n <div class=\"settings-columns__bulk-actions\">\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"hideAll()\">Hide all</button>\n <button type=\"button\" class=\"settings-columns__bulk-btn\" (click)=\"showAll()\">Show all</button>\n </div>\n</div>\n} }\n\n<ng-template mozDrawerFooter>\n <button moz-button (click)=\"apply()\" [appearance]=\"'accent'\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"reset()\">Reset</button>\n</ng-template>\n", styles: [".settings-list{display:flex;flex-direction:column;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-m, 8px);overflow:hidden}.settings-list__item{display:flex;align-items:center;justify-content:space-between;padding:16px;background:var(--color-background-primary);border:none;border-bottom:1px solid var(--color-border-primary);cursor:pointer;text-align:left;width:100%}.settings-list__item:last-child{border-bottom:none}.settings-list__item:hover{background:var(--color-background-secondary)}.settings-list__item-text{display:flex;flex-direction:column;gap:2px}.settings-list__item-title{font-weight:600;font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.settings-list__item-subtitle{font-size:var(--font-size-s, 14px);color:var(--color-text-secondary)}.settings-density{display:flex;flex-direction:column;gap:8px}.settings-density__label{font-weight:600;font-size:var(--font-size-s, 14px);color:var(--color-text-primary)}.settings-columns{display:flex;flex-direction:column;gap:12px;padding-bottom:48px}.settings-columns__search{width:100%;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);font-size:var(--font-size-s, 14px);color:var(--color-text-primary);background:var(--color-background-primary, #fff);box-sizing:border-box}.settings-columns__search::placeholder{color:var(--color-text-secondary)}.settings-columns__search:focus{outline:2px solid var(--color-background-accent-inverse);outline-offset:-1px}.settings-columns__list{display:flex;flex-direction:column}.settings-columns__bulk-actions{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--color-border-primary)}.settings-columns__bulk-btn{flex:1;padding:8px 12px;border:1px solid var(--color-border-primary);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-size:var(--font-size-s, 14px);font-weight:500;color:var(--color-text-primary);cursor:pointer}.settings-columns__bulk-btn:hover{background:var(--color-background-secondary, #f5f5f5)}.settings-columns__item{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--color-border-primary);background:var(--color-background-primary, #fff)}.settings-columns__item:last-child{border-bottom:none}.settings-columns__item-left{display:flex;align-items:center;gap:8px}.settings-columns__drag-handle{display:flex;align-items:center;cursor:grab;color:var(--color-text-secondary)}.settings-columns__drag-handle:active{cursor:grabbing}.settings-columns__item-label{font-size:var(--font-size-m, 16px);color:var(--color-text-primary)}.cdk-drag-preview{display:flex;align-items:center;justify-content:space-between;padding:16px 8px;background:var(--color-background-primary, #fff);border:1px solid var(--color-border-primary);border-radius:4px;box-shadow:0 4px 12px #00000026;font-size:var(--font-size-m, 16px)}.cdk-drag-placeholder{opacity:.3}.cdk-drag-animating{transition:transform .2s ease}\n"] }]
|
|
13804
13850
|
}], ctorParameters: () => [] });
|
|
13805
13851
|
|
|
13806
13852
|
class GridGroupDrawerComponent {
|
|
@@ -14045,7 +14091,7 @@ class MozGridFilterDrawerComponent {
|
|
|
14045
14091
|
this.drawerRef.close({ model: this.data.model, applied: false });
|
|
14046
14092
|
}
|
|
14047
14093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridFilterDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14048
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: MozGridFilterDrawerComponent, isStandalone: true, selector: "moz-grid-filter-drawer", ngImport: i0, template: "<div class=\"filter-drawer\">\n <p class=\"filter-drawer__subtitle\">{{ activeCount() }} active filter(s)</p>\n <moz-grid-filter-builder\n [model]=\"draft()\"\n [availableColumns]=\"availableColumns\"\n [applyMode]=\"'manual'\"\n [showSubtitle]=\"false\"\n (modelChange)=\"onDraftChange($event)\"\n />\n</div>\n\n<ng-template mozDrawerFooter>\n <button moz-button [appearance]=\"'accent'\" (click)=\"apply()\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"clearAll()\">Clear all</button>\n</ng-template>\n", styles: [".filter-drawer{padding-bottom:16px}.filter-drawer__subtitle{margin:0 16px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}\n"], dependencies: [{ kind: "component", type: MozGridFilterBuilderComponent, selector: "moz-grid-filter-builder", inputs: ["model", "availableColumns", "applyMode", "showSubtitle"], outputs: ["modelChange"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.13", type: MozGridFilterDrawerComponent, isStandalone: true, selector: "moz-grid-filter-drawer", ngImport: i0, template: "<div class=\"filter-drawer\">\n <p class=\"filter-drawer__subtitle\">{{ activeCount() }} active filter(s)</p>\n <moz-grid-filter-builder\n [model]=\"draft()\"\n [availableColumns]=\"availableColumns\"\n [applyMode]=\"'manual'\"\n [showSubtitle]=\"false\"\n (modelChange)=\"onDraftChange($event)\"\n />\n</div>\n\n<ng-template mozDrawerFooter>\n <button moz-button [appearance]=\"'accent'\" (click)=\"apply()\">Apply</button>\n <button moz-button [outlined]=\"true\" (click)=\"clearAll()\">Clear all</button>\n</ng-template>\n", styles: [".filter-drawer{padding-bottom:16px}.filter-drawer__subtitle{margin:0 16px 8px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--Text-Secondary, #555)}\n"], dependencies: [{ kind: "component", type: MozGridFilterBuilderComponent, selector: "moz-grid-filter-builder", inputs: ["model", "availableColumns", "applyMode", "showSubtitle", "defaultField"], outputs: ["modelChange"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "directive", type: MozDrawerFooterDirective, selector: "[mozDrawerFooter]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14049
14095
|
}
|
|
14050
14096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridFilterDrawerComponent, decorators: [{
|
|
14051
14097
|
type: Component,
|
|
@@ -14117,6 +14163,12 @@ class MozGridComponent {
|
|
|
14117
14163
|
/** CTA label on the "no results" state. Empty disables the button. */
|
|
14118
14164
|
noResultsActionLabel = input('Clear filters', ...(ngDevMode ? [{ debugName: "noResultsActionLabel" }] : /* istanbul ignore next */ []));
|
|
14119
14165
|
exportable = input(false, ...(ngDevMode ? [{ debugName: "exportable" }] : /* istanbul ignore next */ []));
|
|
14166
|
+
/**
|
|
14167
|
+
* `'client'` (default): the grid builds and downloads the CSV itself.
|
|
14168
|
+
* `'server'`: the grid emits `(exportRequest)` instead, leaving the consumer
|
|
14169
|
+
* to perform the export (e.g. a back-end download).
|
|
14170
|
+
*/
|
|
14171
|
+
exportMode = input('client', ...(ngDevMode ? [{ debugName: "exportMode" }] : /* istanbul ignore next */ []));
|
|
14120
14172
|
showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : /* istanbul ignore next */ []));
|
|
14121
14173
|
multiCellSelection = input(true, ...(ngDevMode ? [{ debugName: "multiCellSelection" }] : /* istanbul ignore next */ []));
|
|
14122
14174
|
horizontalVirtualScroll = input(false, ...(ngDevMode ? [{ debugName: "horizontalVirtualScroll" }] : /* istanbul ignore next */ []));
|
|
@@ -14139,6 +14191,8 @@ class MozGridComponent {
|
|
|
14139
14191
|
bulkDelete = output();
|
|
14140
14192
|
fillDown = output();
|
|
14141
14193
|
settingsChange = output();
|
|
14194
|
+
/** Emitted when the toolbar export is triggered while `exportMode === 'server'`. */
|
|
14195
|
+
exportRequest = output();
|
|
14142
14196
|
// --- Internal ---
|
|
14143
14197
|
isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
|
|
14144
14198
|
groupPanelOpen = signal(false, ...(ngDevMode ? [{ debugName: "groupPanelOpen" }] : /* istanbul ignore next */ []));
|
|
@@ -15121,6 +15175,15 @@ class MozGridComponent {
|
|
|
15121
15175
|
this.resizeEngine.startResize(event.field, event.event);
|
|
15122
15176
|
}
|
|
15123
15177
|
onExportCsv() {
|
|
15178
|
+
if (this.exportMode() === 'server') {
|
|
15179
|
+
this.exportRequest.emit({
|
|
15180
|
+
format: 'csv',
|
|
15181
|
+
sorts: this.state.activeSorts(),
|
|
15182
|
+
filterModel: this.state.filterModel(),
|
|
15183
|
+
columns: this.state.visibleColumns().map((c) => c.field),
|
|
15184
|
+
});
|
|
15185
|
+
return;
|
|
15186
|
+
}
|
|
15124
15187
|
this.exportEngine.exportCsv(this.data());
|
|
15125
15188
|
}
|
|
15126
15189
|
// --- Group drawer ---
|
|
@@ -15781,7 +15844,7 @@ class MozGridComponent {
|
|
|
15781
15844
|
return value;
|
|
15782
15845
|
}
|
|
15783
15846
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15784
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridComponent, isStandalone: true, selector: "moz-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowIdField: { classPropertyName: "rowIdField", publicName: "rowIdField", isSignal: true, isRequired: false, transformFunction: null }, formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, detailTemplate: { classPropertyName: "detailTemplate", publicName: "detailTemplate", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, emptyDataTitle: { classPropertyName: "emptyDataTitle", publicName: "emptyDataTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDataDescription: { classPropertyName: "emptyDataDescription", publicName: "emptyDataDescription", isSignal: true, isRequired: false, transformFunction: null }, noResultsTitle: { classPropertyName: "noResultsTitle", publicName: "noResultsTitle", isSignal: true, isRequired: false, transformFunction: null }, noResultsDescription: { classPropertyName: "noResultsDescription", publicName: "noResultsDescription", isSignal: true, isRequired: false, transformFunction: null }, noResultsActionLabel: { classPropertyName: "noResultsActionLabel", publicName: "noResultsActionLabel", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, multiCellSelection: { classPropertyName: "multiCellSelection", publicName: "multiCellSelection", isSignal: true, isRequired: false, transformFunction: null }, horizontalVirtualScroll: { classPropertyName: "horizontalVirtualScroll", publicName: "horizontalVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, loadingStrategy: { classPropertyName: "loadingStrategy", publicName: "loadingStrategy", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, filterApplyMode: { classPropertyName: "filterApplyMode", publicName: "filterApplyMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", loadMore: "loadMore", cellEdit: "cellEdit", cellEditCancel: "cellEditCancel", selectionChange: "selectionChange", cellSelectionChange: "cellSelectionChange", groupChange: "groupChange", filterChange: "filterChange", bulkEdit: "bulkEdit", bulkCopy: "bulkCopy", bulkPaste: "bulkPaste", bulkDelete: "bulkDelete", fillDown: "fillDown", settingsChange: "settingsChange" }, providers: [
|
|
15847
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridComponent, isStandalone: true, selector: "moz-grid", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, filterMode: { classPropertyName: "filterMode", publicName: "filterMode", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pagination: { classPropertyName: "pagination", publicName: "pagination", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, rowSelection: { classPropertyName: "rowSelection", publicName: "rowSelection", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, rowIdField: { classPropertyName: "rowIdField", publicName: "rowIdField", isSignal: true, isRequired: false, transformFunction: null }, formulas: { classPropertyName: "formulas", publicName: "formulas", isSignal: true, isRequired: false, transformFunction: null }, detailTemplate: { classPropertyName: "detailTemplate", publicName: "detailTemplate", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, stateKey: { classPropertyName: "stateKey", publicName: "stateKey", isSignal: true, isRequired: false, transformFunction: null }, emptyDataTitle: { classPropertyName: "emptyDataTitle", publicName: "emptyDataTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDataDescription: { classPropertyName: "emptyDataDescription", publicName: "emptyDataDescription", isSignal: true, isRequired: false, transformFunction: null }, noResultsTitle: { classPropertyName: "noResultsTitle", publicName: "noResultsTitle", isSignal: true, isRequired: false, transformFunction: null }, noResultsDescription: { classPropertyName: "noResultsDescription", publicName: "noResultsDescription", isSignal: true, isRequired: false, transformFunction: null }, noResultsActionLabel: { classPropertyName: "noResultsActionLabel", publicName: "noResultsActionLabel", isSignal: true, isRequired: false, transformFunction: null }, exportable: { classPropertyName: "exportable", publicName: "exportable", isSignal: true, isRequired: false, transformFunction: null }, exportMode: { classPropertyName: "exportMode", publicName: "exportMode", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, multiCellSelection: { classPropertyName: "multiCellSelection", publicName: "multiCellSelection", isSignal: true, isRequired: false, transformFunction: null }, horizontalVirtualScroll: { classPropertyName: "horizontalVirtualScroll", publicName: "horizontalVirtualScroll", isSignal: true, isRequired: false, transformFunction: null }, loadingStrategy: { classPropertyName: "loadingStrategy", publicName: "loadingStrategy", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, plugins: { classPropertyName: "plugins", publicName: "plugins", isSignal: true, isRequired: false, transformFunction: null }, filterApplyMode: { classPropertyName: "filterApplyMode", publicName: "filterApplyMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", pageChange: "pageChange", loadMore: "loadMore", cellEdit: "cellEdit", cellEditCancel: "cellEditCancel", selectionChange: "selectionChange", cellSelectionChange: "cellSelectionChange", groupChange: "groupChange", filterChange: "filterChange", bulkEdit: "bulkEdit", bulkCopy: "bulkCopy", bulkPaste: "bulkPaste", bulkDelete: "bulkDelete", fillDown: "fillDown", settingsChange: "settingsChange", exportRequest: "exportRequest" }, providers: [
|
|
15785
15848
|
GridStateManager,
|
|
15786
15849
|
GridEngine,
|
|
15787
15850
|
SortEngine,
|
|
@@ -15839,24 +15902,25 @@ class MozGridComponent {
|
|
|
15839
15902
|
<Download20 icon />
|
|
15840
15903
|
</moz-icon-button>
|
|
15841
15904
|
}
|
|
15842
|
-
<
|
|
15843
|
-
|
|
15844
|
-
|
|
15845
|
-
|
|
15846
|
-
|
|
15847
|
-
|
|
15848
|
-
|
|
15849
|
-
|
|
15850
|
-
|
|
15851
|
-
|
|
15852
|
-
<Filter20 icon />
|
|
15853
|
-
<span>Filters</span>
|
|
15905
|
+
<div class="moz-grid__toolbar-filter">
|
|
15906
|
+
<moz-icon-button
|
|
15907
|
+
id="grid-filter"
|
|
15908
|
+
size="s"
|
|
15909
|
+
[ghost]="true"
|
|
15910
|
+
ariaLabel="Filters"
|
|
15911
|
+
(activated)="onFiltersClick()"
|
|
15912
|
+
>
|
|
15913
|
+
<Filter20 icon />
|
|
15914
|
+
</moz-icon-button>
|
|
15854
15915
|
@if (activeFilterCount() > 0) {
|
|
15855
|
-
<
|
|
15856
|
-
|
|
15857
|
-
|
|
15916
|
+
<moz-number-badge
|
|
15917
|
+
class="moz-grid__toolbar-filter-badge"
|
|
15918
|
+
[label]="activeFilterCount()"
|
|
15919
|
+
appearance="accent"
|
|
15920
|
+
size="s"
|
|
15921
|
+
/>
|
|
15858
15922
|
}
|
|
15859
|
-
</
|
|
15923
|
+
</div>
|
|
15860
15924
|
<moz-icon-button
|
|
15861
15925
|
id="grid-settings"
|
|
15862
15926
|
size="s"
|
|
@@ -16101,7 +16165,7 @@ class MozGridComponent {
|
|
|
16101
16165
|
/>
|
|
16102
16166
|
</div>
|
|
16103
16167
|
</div>
|
|
16104
|
-
`, isInline: true, styles: [":host{display:block;height:100%;--moz-grid-ref-color-0: #1a73e8;--moz-grid-ref-color-1: #d93025;--moz-grid-ref-color-2: #188038;--moz-grid-ref-color-3: #e37400;--moz-grid-ref-color-4: #8430ce;--moz-grid-ref-color-5: #009e95;--moz-grid-ref-color-6: #c5221f;--moz-grid-ref-color-7: #5f6368}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid__scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:inherit}.moz-grid__scroll:focus{outline:none}.moz-grid__scroll moz-grid-header{position:sticky;top:0;z-index:5;background:var(--color-background-primary, #fff)}.moz-grid__empty-overlay{position:absolute;inset:0;top:var(--moz-grid-header-height, 48px);display:flex;align-items:center;justify-content:center;background:var(--Background-Primary, #fff);z-index:1}.moz-grid:focus{outline:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__toolbar-filter
|
|
16168
|
+
`, isInline: true, styles: [":host{display:block;height:100%;--moz-grid-ref-color-0: #1a73e8;--moz-grid-ref-color-1: #d93025;--moz-grid-ref-color-2: #188038;--moz-grid-ref-color-3: #e37400;--moz-grid-ref-color-4: #8430ce;--moz-grid-ref-color-5: #009e95;--moz-grid-ref-color-6: #c5221f;--moz-grid-ref-color-7: #5f6368}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid__scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:inherit}.moz-grid__scroll:focus{outline:none}.moz-grid__scroll moz-grid-header{position:sticky;top:0;z-index:5;background:var(--color-background-primary, #fff)}.moz-grid__empty-overlay{position:absolute;inset:0;top:var(--moz-grid-header-height, 48px);display:flex;align-items:center;justify-content:center;background:var(--Background-Primary, #fff);z-index:1}.moz-grid:focus{outline:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__toolbar-filter{position:relative;display:inline-flex}.moz-grid__formula-bar{display:flex;align-items:stretch;flex-shrink:0;height:32px;border:1px solid var(--Border-Primary, #cdd4d8);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-family:var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--font-size-s, 13px);overflow:hidden}.moz-grid__formula-bar-addr{display:flex;align-items:center;justify-content:center;min-width:72px;padding:0 8px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-primary);font-weight:600;-webkit-user-select:text;user-select:text}.moz-grid__formula-bar-fx{display:flex;align-items:center;justify-content:center;width:32px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-secondary);font-style:italic;font-weight:500}.moz-grid__formula-bar-content{flex:1;min-width:0;display:flex;align-items:stretch;overflow:hidden}.moz-grid__formula-bar-input{flex:1;min-width:0;padding:0 10px;color:var(--color-text-primary);font:inherit;background:transparent;border:none;outline:none;text-overflow:ellipsis;white-space:nowrap}.moz-grid__formula-bar-input:focus{outline:2px solid var(--color-border-accent, #1a73e8);outline-offset:-2px;border-radius:var(--border-radius-xs, 2px)}.moz-grid__formula-bar-input:disabled{color:var(--color-text-secondary);cursor:not-allowed}.moz-grid__formula-bar-editor{flex:1;min-width:0;display:flex;align-items:stretch}.moz-grid__formula-bar-editor .moz-grid-formula-editor,.moz-grid__formula-bar-editor .moz-grid-formula-editor__input{width:100%;height:100%}.moz-grid__toolbar-filter-badge{position:absolute;top:-2px;right:-2px;pointer-events:none}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{width:100%;font-size:var(--font-size-xs, 12px);text-transform:uppercase;white-space:nowrap;color:var(--text-icon-tertiary);font-size:var(--Typography-Font-size-Body-XS, 12px);font-weight:400}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MozGridHeaderComponent, selector: "moz-grid-header", inputs: ["showCheckbox", "showExpand", "reorderable"], outputs: ["sortClick", "menuAction", "resizeStart", "selectAllToggle", "columnReorder"] }, { kind: "component", type: MozGridBodyComponent, selector: "moz-grid-body", inputs: ["showCheckbox", "showExpand", "detailTemplate"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle", "groupToggle"] }, { kind: "component", type: MozGridFooterComponent, selector: "moz-grid-footer", inputs: ["pageSizeOptions"], outputs: ["pageChange"] }, { kind: "component", type: MozGridLoadingIndicatorComponent, selector: "moz-grid-loading-indicator" }, { kind: "component", type: MozGridSelectionBarComponent, selector: "moz-grid-selection-bar", outputs: ["editClick", "copyClick", "pasteClick", "deleteClick", "exportClick"] }, { kind: "component", type: MozGridEmptyStateComponent, selector: "moz-grid-empty-state", inputs: ["kind", "title", "description", "actionLabel"], outputs: ["action"] }, { kind: "component", type: MozTagComponent, selector: "moz-tag", inputs: ["type", "size", "id", "name", "disabled", "contextualisedNumber", "removableLabel"], outputs: ["removeTag"] }, { kind: "component", type: MozIconButtonComponent, selector: "moz-icon-button", inputs: ["id", "appearance", "size", "disabled", "ghost", "outlined", "type", "ariaLabel"], outputs: ["activated"] }, { kind: "component", type: MozNumberBadgeComponent, selector: "moz-number-badge", inputs: ["label", "appearance", "size"] }, { kind: "component", type: ViewGridX420, selector: "ViewGridX420", inputs: ["hostClass"] }, { kind: "component", type: Filter20, selector: "Filter20", inputs: ["hostClass"] }, { kind: "component", type: Settings20, selector: "Settings20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenEnter20, selector: "FullscreenEnter20", inputs: ["hostClass"] }, { kind: "component", type: FullscreenExit20, selector: "FullscreenExit20", inputs: ["hostClass"] }, { kind: "component", type: Download20, selector: "Download20", inputs: ["hostClass"] }, { kind: "component", type: ChevronUp20, selector: "ChevronUp20", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown20, selector: "ChevronDown20", inputs: ["hostClass"] }, { kind: "component", type: Keyboard20, selector: "Keyboard20", inputs: ["hostClass"] }, { kind: "component", type: Calculator20, selector: "Calculator20", inputs: ["hostClass"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: MozGridFormulaEditorComponent, selector: "moz-grid-formula-editor", inputs: ["value", "locale", "editingAddr", "disableCellPick"], outputs: ["valueChange", "commit", "cancel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16105
16169
|
}
|
|
16106
16170
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridComponent, decorators: [{
|
|
16107
16171
|
type: Component,
|
|
@@ -16142,6 +16206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
16142
16206
|
MozGridEmptyStateComponent,
|
|
16143
16207
|
MozTagComponent,
|
|
16144
16208
|
MozIconButtonComponent,
|
|
16209
|
+
MozNumberBadgeComponent,
|
|
16145
16210
|
ViewGridX420,
|
|
16146
16211
|
Filter20,
|
|
16147
16212
|
Settings20,
|
|
@@ -16185,24 +16250,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
16185
16250
|
<Download20 icon />
|
|
16186
16251
|
</moz-icon-button>
|
|
16187
16252
|
}
|
|
16188
|
-
<
|
|
16189
|
-
|
|
16190
|
-
|
|
16191
|
-
|
|
16192
|
-
|
|
16193
|
-
|
|
16194
|
-
|
|
16195
|
-
|
|
16196
|
-
|
|
16197
|
-
|
|
16198
|
-
<Filter20 icon />
|
|
16199
|
-
<span>Filters</span>
|
|
16253
|
+
<div class="moz-grid__toolbar-filter">
|
|
16254
|
+
<moz-icon-button
|
|
16255
|
+
id="grid-filter"
|
|
16256
|
+
size="s"
|
|
16257
|
+
[ghost]="true"
|
|
16258
|
+
ariaLabel="Filters"
|
|
16259
|
+
(activated)="onFiltersClick()"
|
|
16260
|
+
>
|
|
16261
|
+
<Filter20 icon />
|
|
16262
|
+
</moz-icon-button>
|
|
16200
16263
|
@if (activeFilterCount() > 0) {
|
|
16201
|
-
<
|
|
16202
|
-
|
|
16203
|
-
|
|
16264
|
+
<moz-number-badge
|
|
16265
|
+
class="moz-grid__toolbar-filter-badge"
|
|
16266
|
+
[label]="activeFilterCount()"
|
|
16267
|
+
appearance="accent"
|
|
16268
|
+
size="s"
|
|
16269
|
+
/>
|
|
16204
16270
|
}
|
|
16205
|
-
</
|
|
16271
|
+
</div>
|
|
16206
16272
|
<moz-icon-button
|
|
16207
16273
|
id="grid-settings"
|
|
16208
16274
|
size="s"
|
|
@@ -16447,8 +16513,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
16447
16513
|
/>
|
|
16448
16514
|
</div>
|
|
16449
16515
|
</div>
|
|
16450
|
-
`, styles: [":host{display:block;height:100%;--moz-grid-ref-color-0: #1a73e8;--moz-grid-ref-color-1: #d93025;--moz-grid-ref-color-2: #188038;--moz-grid-ref-color-3: #e37400;--moz-grid-ref-color-4: #8430ce;--moz-grid-ref-color-5: #009e95;--moz-grid-ref-color-6: #c5221f;--moz-grid-ref-color-7: #5f6368}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid__scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:inherit}.moz-grid__scroll:focus{outline:none}.moz-grid__scroll moz-grid-header{position:sticky;top:0;z-index:5;background:var(--color-background-primary, #fff)}.moz-grid__empty-overlay{position:absolute;inset:0;top:var(--moz-grid-header-height, 48px);display:flex;align-items:center;justify-content:center;background:var(--Background-Primary, #fff);z-index:1}.moz-grid:focus{outline:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__toolbar-filter
|
|
16451
|
-
}], ctorParameters: () => [], propDecorators: { gridContainer: [{ type: i0.ViewChild, args: ['gridContainer', { isSignal: true }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridColumnDef), { isSignal: true }] }], toolbarDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridToolbarDef), { isSignal: true }] }], emptyDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridEmptyDef), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdField", required: false }] }], formulas: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulas", required: false }] }], detailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailTemplate", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], emptyDataTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDataTitle", required: false }] }], emptyDataDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDataDescription", required: false }] }], noResultsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTitle", required: false }] }], noResultsDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsDescription", required: false }] }], noResultsActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsActionLabel", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], multiCellSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiCellSelection", required: false }] }], horizontalVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalVirtualScroll", required: false }] }], loadingStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingStrategy", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellEditCancel: [{ type: i0.Output, args: ["cellEditCancel"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellSelectionChange: [{ type: i0.Output, args: ["cellSelectionChange"] }], groupChange: [{ type: i0.Output, args: ["groupChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], bulkEdit: [{ type: i0.Output, args: ["bulkEdit"] }], bulkCopy: [{ type: i0.Output, args: ["bulkCopy"] }], bulkPaste: [{ type: i0.Output, args: ["bulkPaste"] }], bulkDelete: [{ type: i0.Output, args: ["bulkDelete"] }], fillDown: [{ type: i0.Output, args: ["fillDown"] }], settingsChange: [{ type: i0.Output, args: ["settingsChange"] }], filterApplyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterApplyMode", required: false }] }] } });
|
|
16516
|
+
`, styles: [":host{display:block;height:100%;--moz-grid-ref-color-0: #1a73e8;--moz-grid-ref-color-1: #d93025;--moz-grid-ref-color-2: #188038;--moz-grid-ref-color-3: #e37400;--moz-grid-ref-color-4: #8430ce;--moz-grid-ref-color-5: #009e95;--moz-grid-ref-color-6: #c5221f;--moz-grid-ref-color-7: #5f6368}.moz-grid-wrapper{display:flex;flex-direction:column;font-family:var(--font-family-primary);height:100%;min-height:0;gap:16px}.moz-grid-wrapper--fullscreen{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;background:var(--color-background-primary)}.moz-grid{display:flex;flex-direction:column;border-radius:var(--border-radius-l);overflow:hidden;background:var(--color-background-primary);flex:1;min-height:0;position:relative;box-shadow:0 0 6px #cdd4d8}.moz-grid__scroll{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:inherit}.moz-grid__scroll:focus{outline:none}.moz-grid__scroll moz-grid-header{position:sticky;top:0;z-index:5;background:var(--color-background-primary, #fff)}.moz-grid__empty-overlay{position:absolute;inset:0;top:var(--moz-grid-header-height, 48px);display:flex;align-items:center;justify-content:center;background:var(--Background-Primary, #fff);z-index:1}.moz-grid:focus{outline:none}.moz-grid__toolbar{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;min-height:48px;gap:var(--spacing-s, 8px)}.moz-grid__toolbar-left,.moz-grid__toolbar-right{display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.moz-grid__toolbar-filter{position:relative;display:inline-flex}.moz-grid__formula-bar{display:flex;align-items:stretch;flex-shrink:0;height:32px;border:1px solid var(--Border-Primary, #cdd4d8);border-radius:var(--border-radius-s, 4px);background:var(--color-background-primary, #fff);font-family:var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, monospace);font-size:var(--font-size-s, 13px);overflow:hidden}.moz-grid__formula-bar-addr{display:flex;align-items:center;justify-content:center;min-width:72px;padding:0 8px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-primary);font-weight:600;-webkit-user-select:text;user-select:text}.moz-grid__formula-bar-fx{display:flex;align-items:center;justify-content:center;width:32px;border-right:1px solid var(--Border-Primary, #cdd4d8);color:var(--color-text-secondary);font-style:italic;font-weight:500}.moz-grid__formula-bar-content{flex:1;min-width:0;display:flex;align-items:stretch;overflow:hidden}.moz-grid__formula-bar-input{flex:1;min-width:0;padding:0 10px;color:var(--color-text-primary);font:inherit;background:transparent;border:none;outline:none;text-overflow:ellipsis;white-space:nowrap}.moz-grid__formula-bar-input:focus{outline:2px solid var(--color-border-accent, #1a73e8);outline-offset:-2px;border-radius:var(--border-radius-xs, 2px)}.moz-grid__formula-bar-input:disabled{color:var(--color-text-secondary);cursor:not-allowed}.moz-grid__formula-bar-editor{flex:1;min-width:0;display:flex;align-items:stretch}.moz-grid__formula-bar-editor .moz-grid-formula-editor,.moz-grid__formula-bar-editor .moz-grid-formula-editor__input{width:100%;height:100%}.moz-grid__toolbar-filter-badge{position:absolute;top:-2px;right:-2px;pointer-events:none}.moz-grid__selection-banner{display:flex;align-items:center;gap:var(--spacing-s, 8px);flex:1;justify-content:center;border-radius:var(--border-radius-s);border:1px solid var(--Border-Primary, #cdd4d8);background:var(--Neutral-Grey-000, #fff)}.moz-grid__selection-text{font-size:var(--font-size-s, 14px);color:var(--color-text-primary);white-space:nowrap}.moz-grid__selection-link{padding:0;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-s, 14px);font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:underline}.moz-grid__selection-link:hover{color:var(--color-primary-dark, #1557b0)}.moz-grid__tag-bar{display:flex;align-items:center;flex-wrap:wrap;gap:var(--spacing-xs, 4px);padding:var(--spacing-xxs, 2px) var(--spacing-s, 8px);flex-shrink:0}.moz-grid__tag-bar-label{width:100%;font-size:var(--font-size-xs, 12px);text-transform:uppercase;white-space:nowrap;color:var(--text-icon-tertiary);font-size:var(--Typography-Font-size-Body-XS, 12px);font-weight:400}.moz-grid__tag-action-btn{padding:2px 8px;border:none;background:transparent;color:var(--color-background-accent-inverse);font-size:var(--font-size-xs, 12px);font-weight:600;cursor:pointer}.moz-grid__tag-action-btn:hover{text-decoration:underline}.moz-grid__group-tag-btn{display:inline-flex;align-items:center;gap:2px;padding:0;border:none;background:transparent;cursor:pointer;font:inherit;color:inherit;line-height:1}.moz-grid__group-tag-btn ::ng-deep svg{fill:#fff!important;width:16px;height:16px}\n"] }]
|
|
16517
|
+
}], ctorParameters: () => [], propDecorators: { gridContainer: [{ type: i0.ViewChild, args: ['gridContainer', { isSignal: true }] }], columnDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridColumnDef), { isSignal: true }] }], toolbarDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridToolbarDef), { isSignal: true }] }], emptyDefs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MozGridEmptyDef), { isSignal: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], filterMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterMode", required: false }] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], rowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowSelection", required: false }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], rowIdField: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIdField", required: false }] }], formulas: [{ type: i0.Input, args: [{ isSignal: true, alias: "formulas", required: false }] }], detailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailTemplate", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], stateKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateKey", required: false }] }], emptyDataTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDataTitle", required: false }] }], emptyDataDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDataDescription", required: false }] }], noResultsTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsTitle", required: false }] }], noResultsDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsDescription", required: false }] }], noResultsActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsActionLabel", required: false }] }], exportable: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportable", required: false }] }], exportMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "exportMode", required: false }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], multiCellSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiCellSelection", required: false }] }], horizontalVirtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalVirtualScroll", required: false }] }], loadingStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingStrategy", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], plugins: [{ type: i0.Input, args: [{ isSignal: true, alias: "plugins", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellEditCancel: [{ type: i0.Output, args: ["cellEditCancel"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], cellSelectionChange: [{ type: i0.Output, args: ["cellSelectionChange"] }], groupChange: [{ type: i0.Output, args: ["groupChange"] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }], bulkEdit: [{ type: i0.Output, args: ["bulkEdit"] }], bulkCopy: [{ type: i0.Output, args: ["bulkCopy"] }], bulkPaste: [{ type: i0.Output, args: ["bulkPaste"] }], bulkDelete: [{ type: i0.Output, args: ["bulkDelete"] }], fillDown: [{ type: i0.Output, args: ["fillDown"] }], settingsChange: [{ type: i0.Output, args: ["settingsChange"] }], exportRequest: [{ type: i0.Output, args: ["exportRequest"] }], filterApplyMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterApplyMode", required: false }] }] } });
|
|
16452
16518
|
/**
|
|
16453
16519
|
* Coerce a raw formula-bar draft (always a string) back to the column's
|
|
16454
16520
|
* natural type. Empty → `''`, numeric literal → `number` (when the old
|
|
@@ -16932,6 +16998,13 @@ class MozComboboxComponent {
|
|
|
16932
16998
|
opacity: 1;
|
|
16933
16999
|
width: 100%;
|
|
16934
17000
|
}
|
|
17001
|
+
/* A bare <input> keeps an intrinsic, size-attribute-based
|
|
17002
|
+
min-width, so on a narrow panel the search field refuses to
|
|
17003
|
+
shrink and its placeholder overflows the dropdown. Allow it
|
|
17004
|
+
to shrink to the available width. */
|
|
17005
|
+
.cdk-overlay-pane .mc-combobox__listbox .mc-option-listbox__search .text-input__control {
|
|
17006
|
+
min-width: 0;
|
|
17007
|
+
}
|
|
16935
17008
|
.mc-combobox-backdrop {
|
|
16936
17009
|
background: transparent;
|
|
16937
17010
|
}
|