@mozaic-ds/angular 2.0.60 → 2.0.62
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, EventEmitter, effect, Output, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, DestroyRef, untracked, afterRenderEffect } from '@angular/core';
|
|
2
|
+
import { input, computed, ChangeDetectionStrategy, Component, contentChild, ViewEncapsulation, signal, forwardRef, output, ContentChild, viewChild, inject, model, InjectionToken, HostListener, Injector, Injectable, TemplateRef, afterNextRender, Directive, linkedSignal, EnvironmentInjector, createComponent, ChangeDetectorRef, NgZone, viewChildren, EventEmitter, effect, Output, ContentChildren, ApplicationRef, Renderer2, ElementRef, Input, booleanAttribute, contentChildren, DestroyRef, ViewContainerRef, untracked, afterRenderEffect } from '@angular/core';
|
|
3
3
|
import { RouterLink, RouterLinkActive, RouterLinkWithHref } from '@angular/router';
|
|
4
4
|
import { NgTemplateOutlet, NgClass, NgComponentOutlet, JsonPipe, DOCUMENT } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
@@ -3797,11 +3797,11 @@ class MozStepperStackedComponent {
|
|
|
3797
3797
|
return step.id ?? `${this.componentId()}-step-${i}`;
|
|
3798
3798
|
}
|
|
3799
3799
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozStepperStackedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3800
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozStepperStackedComponent, isStandalone: true, selector: "moz-stepper-stacked", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav class=\"mc-stepper-stacked\" aria-label=\"Stepper\">\n <ol class=\"mc-stepper-stacked__container\">\n @for (step of steps(); let i = $index; track i) {\n <li\n class=\"mc-stepper-stacked__item\"\n [id]=\"stepId(step, i)\"\n [class.is-current]=\"stepStates()[i].current\"\n [class.has-additional]=\"!!step.additionalInfo\"\n >\n <div class=\"mc-stepper-stacked__indicator\">\n @if (stepStates()[i].completed) {\n <Check24\n class=\"mc-stepper-stacked__icon mc-stepper-stacked__icon--check\"\n aria-hidden=\"true\"\n />\n } @else {\n <span class=\"mc-stepper-stacked__circle\"
|
|
3800
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozStepperStackedComponent, isStandalone: true, selector: "moz-stepper-stacked", inputs: { componentId: { classPropertyName: "componentId", publicName: "componentId", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<nav [id]=\"componentId()\" class=\"mc-stepper-stacked\" aria-label=\"Stepper\">\n <ol [id]=\"componentId() + '-list'\" class=\"mc-stepper-stacked__container\">\n @for (step of steps(); let i = $index; track i) {\n <li\n class=\"mc-stepper-stacked__item\"\n [id]=\"stepId(step, i)\"\n [class.is-current]=\"stepStates()[i].current\"\n [class.has-additional]=\"!!step.additionalInfo\"\n >\n <div [id]=\"componentId() + '-step-' + i + '-indicator'\" class=\"mc-stepper-stacked__indicator\">\n @if (stepStates()[i].completed) {\n <Check24\n class=\"mc-stepper-stacked__icon mc-stepper-stacked__icon--check\"\n aria-hidden=\"true\"\n />\n } @else {\n <span\n [id]=\"componentId() + '-step-' + i + '-circle'\"\n class=\"mc-stepper-stacked__circle\"\n [class.is-current]=\"stepStates()[i].current\"\n >\n {{ i + 1 }}\n </span>\n }\n </div>\n <div [id]=\"componentId() + '-step-' + i + '-content'\" class=\"mc-stepper-stacked__content\">\n <span\n [id]=\"componentId() + '-step-' + i + '-label'\"\n class=\"mc-stepper-stacked__label\"\n [class.is-current]=\"stepStates()[i].current\"\n >\n {{ step.label }}\n </span>\n @if (step.additionalInfo) {\n <span\n [id]=\"componentId() + '-step-' + i + '-additional'\"\n class=\"mc-stepper-stacked__additional\"\n >\n {{ step.additionalInfo }}\n </span>\n }\n </div>\n </li>\n }\n </ol>\n</nav>\n", styles: [".mc-stepper-stacked__container{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}.mc-stepper-stacked__indicator{display:flex;flex-direction:column;align-items:center;margin-right:.5rem;position:relative;min-height:100%;padding-bottom:2rem}.mc-stepper-stacked__indicator:after{content:\"\";position:absolute;top:1.5rem;bottom:0;width:.125rem;background-color:var(--stepper-color-progress-bar-background, #c9d0de);left:50%;transform:translate(-50%)}.mc-stepper-stacked__circle{box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:.125rem solid var(--stepper-color-step-item-default-border, #333333);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-bold, 700);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);z-index:1;flex-shrink:0;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.mc-stepper-stacked__circle.is-current{background-color:var(--stepper-color-step-item-active-background, #117f03);border-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards}.mc-stepper-stacked__icon--check{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--stepper-color-step-item-default-icon, #666666);fill:currentcolor;border:.125rem solid var(--stepper-color-step-item-default-border, #333333);border-radius:50%;box-sizing:border-box;background-color:var(--stepper-color-step-item-default-background, #ffffff);z-index:1}.mc-stepper-stacked__content{display:flex;flex-direction:column;padding-top:.25rem}.mc-stepper-stacked__label{font-size:var(--font-size-100, .875rem);color:var(--stepper-color-step-label-default, #666666);line-height:var(--line-height-s, 1.3);transition:color .2s ease}.mc-stepper-stacked__label.is-current{font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000)}.mc-stepper-stacked__additional{font-size:var(--font-size-50, .75rem);color:var(--stepper-color-information, #666666);margin-top:.25rem}.mc-stepper-stacked__item{display:flex;position:relative}.mc-stepper-stacked__item.has-additional .mc-stepper-stacked__indicator,.mc-stepper-stacked__item.has-additional .mc-stepper-stacked__content{padding-bottom:1rem}.mc-stepper-stacked__item:last-child .mc-stepper-stacked__indicator,.mc-stepper-stacked__item:last-child .mc-stepper-stacked__content{padding-bottom:0}.mc-stepper-stacked__item:last-child .mc-stepper-stacked__indicator:after{display:none}@keyframes pop-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"], dependencies: [{ kind: "component", type: Check24, selector: "Check24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3801
3801
|
}
|
|
3802
3802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozStepperStackedComponent, decorators: [{
|
|
3803
3803
|
type: Component,
|
|
3804
|
-
args: [{ selector: 'moz-stepper-stacked', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Check24], template: "<nav class=\"mc-stepper-stacked\" aria-label=\"Stepper\">\n <ol class=\"mc-stepper-stacked__container\">\n @for (step of steps(); let i = $index; track i) {\n <li\n class=\"mc-stepper-stacked__item\"\n [id]=\"stepId(step, i)\"\n [class.is-current]=\"stepStates()[i].current\"\n [class.has-additional]=\"!!step.additionalInfo\"\n >\n <div class=\"mc-stepper-stacked__indicator\">\n @if (stepStates()[i].completed) {\n <Check24\n class=\"mc-stepper-stacked__icon mc-stepper-stacked__icon--check\"\n aria-hidden=\"true\"\n />\n } @else {\n <span class=\"mc-stepper-stacked__circle\"
|
|
3804
|
+
args: [{ selector: 'moz-stepper-stacked', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Check24], template: "<nav [id]=\"componentId()\" class=\"mc-stepper-stacked\" aria-label=\"Stepper\">\n <ol [id]=\"componentId() + '-list'\" class=\"mc-stepper-stacked__container\">\n @for (step of steps(); let i = $index; track i) {\n <li\n class=\"mc-stepper-stacked__item\"\n [id]=\"stepId(step, i)\"\n [class.is-current]=\"stepStates()[i].current\"\n [class.has-additional]=\"!!step.additionalInfo\"\n >\n <div [id]=\"componentId() + '-step-' + i + '-indicator'\" class=\"mc-stepper-stacked__indicator\">\n @if (stepStates()[i].completed) {\n <Check24\n class=\"mc-stepper-stacked__icon mc-stepper-stacked__icon--check\"\n aria-hidden=\"true\"\n />\n } @else {\n <span\n [id]=\"componentId() + '-step-' + i + '-circle'\"\n class=\"mc-stepper-stacked__circle\"\n [class.is-current]=\"stepStates()[i].current\"\n >\n {{ i + 1 }}\n </span>\n }\n </div>\n <div [id]=\"componentId() + '-step-' + i + '-content'\" class=\"mc-stepper-stacked__content\">\n <span\n [id]=\"componentId() + '-step-' + i + '-label'\"\n class=\"mc-stepper-stacked__label\"\n [class.is-current]=\"stepStates()[i].current\"\n >\n {{ step.label }}\n </span>\n @if (step.additionalInfo) {\n <span\n [id]=\"componentId() + '-step-' + i + '-additional'\"\n class=\"mc-stepper-stacked__additional\"\n >\n {{ step.additionalInfo }}\n </span>\n }\n </div>\n </li>\n }\n </ol>\n</nav>\n", styles: [".mc-stepper-stacked__container{display:flex;flex-direction:column;list-style:none;padding:0;margin:0}.mc-stepper-stacked__indicator{display:flex;flex-direction:column;align-items:center;margin-right:.5rem;position:relative;min-height:100%;padding-bottom:2rem}.mc-stepper-stacked__indicator:after{content:\"\";position:absolute;top:1.5rem;bottom:0;width:.125rem;background-color:var(--stepper-color-progress-bar-background, #c9d0de);left:50%;transform:translate(-50%)}.mc-stepper-stacked__circle{box-sizing:border-box;width:1.5rem;height:1.5rem;border-radius:50%;border:.125rem solid var(--stepper-color-step-item-default-border, #333333);display:flex;align-items:center;justify-content:center;font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-bold, 700);color:var(--stepper-color-information, #666666);background-color:var(--stepper-color-step-item-default-background, #ffffff);z-index:1;flex-shrink:0;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.mc-stepper-stacked__circle.is-current{background-color:var(--stepper-color-step-item-active-background, #117f03);border-color:var(--stepper-color-step-item-active-background, #117f03);color:var(--stepper-color-step-item-active-text, #ffffff);animation:pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards}.mc-stepper-stacked__icon--check{width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;color:var(--stepper-color-step-item-default-icon, #666666);fill:currentcolor;border:.125rem solid var(--stepper-color-step-item-default-border, #333333);border-radius:50%;box-sizing:border-box;background-color:var(--stepper-color-step-item-default-background, #ffffff);z-index:1}.mc-stepper-stacked__content{display:flex;flex-direction:column;padding-top:.25rem}.mc-stepper-stacked__label{font-size:var(--font-size-100, .875rem);color:var(--stepper-color-step-label-default, #666666);line-height:var(--line-height-s, 1.3);transition:color .2s ease}.mc-stepper-stacked__label.is-current{font-weight:var(--font-weight-medium, 600);color:var(--stepper-color-step-label-active, #000000)}.mc-stepper-stacked__additional{font-size:var(--font-size-50, .75rem);color:var(--stepper-color-information, #666666);margin-top:.25rem}.mc-stepper-stacked__item{display:flex;position:relative}.mc-stepper-stacked__item.has-additional .mc-stepper-stacked__indicator,.mc-stepper-stacked__item.has-additional .mc-stepper-stacked__content{padding-bottom:1rem}.mc-stepper-stacked__item:last-child .mc-stepper-stacked__indicator,.mc-stepper-stacked__item:last-child .mc-stepper-stacked__content{padding-bottom:0}.mc-stepper-stacked__item:last-child .mc-stepper-stacked__indicator:after{display:none}@keyframes pop-in{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}\n"] }]
|
|
3805
3805
|
}], propDecorators: { componentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentId", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }] } });
|
|
3806
3806
|
|
|
3807
3807
|
/**
|
|
@@ -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
|
}] } });
|
|
@@ -4891,6 +4902,8 @@ class GridStateManager {
|
|
|
4891
4902
|
totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
|
|
4892
4903
|
// --- Mode ---
|
|
4893
4904
|
mode = signal('client', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
4905
|
+
// --- Filter Mode (independent of mode — allows server pagination + client filtering) ---
|
|
4906
|
+
filterMode = signal('client', ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
|
|
4894
4907
|
// --- Loading Strategy ---
|
|
4895
4908
|
loadingStrategy = signal('pagination', ...(ngDevMode ? [{ debugName: "loadingStrategy" }] : /* istanbul ignore next */ []));
|
|
4896
4909
|
// --- Columns ---
|
|
@@ -5243,6 +5256,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
5243
5256
|
* Evaluation is left-associative (no operator precedence). Grouped / parenthesised
|
|
5244
5257
|
* conditions (`(a AND b) OR c`) are out of scope for the MVP; see docs.
|
|
5245
5258
|
*/
|
|
5259
|
+
/**
|
|
5260
|
+
* Base class for custom filter components. Extend this class and declare:
|
|
5261
|
+
* readonly condition = input.required<FilterCondition>();
|
|
5262
|
+
* readonly conditionChange = output<FilterValue>();
|
|
5263
|
+
*
|
|
5264
|
+
* The filter builder instantiates the component via ViewContainerRef and wires
|
|
5265
|
+
* the inputs/outputs automatically — the component has no dependency on the grid.
|
|
5266
|
+
*/
|
|
5267
|
+
class MozGridCustomFilter {
|
|
5268
|
+
}
|
|
5246
5269
|
/**
|
|
5247
5270
|
* Default operator sets per data type. Consumers can restrict the set via
|
|
5248
5271
|
* `ColumnDef.filterOperators`.
|
|
@@ -5262,6 +5285,7 @@ const DEFAULT_OPERATORS = {
|
|
|
5262
5285
|
date: ['equals', 'notEquals', 'gt', 'gte', 'lt', 'lte', 'between', 'blank', 'notBlank'],
|
|
5263
5286
|
set: ['in', 'notIn', 'blank', 'notBlank'],
|
|
5264
5287
|
boolean: ['equals', 'blank', 'notBlank'],
|
|
5288
|
+
custom: [],
|
|
5265
5289
|
};
|
|
5266
5290
|
const DEFAULT_OPERATOR_PER_TYPE = {
|
|
5267
5291
|
text: 'contains',
|
|
@@ -5269,6 +5293,7 @@ const DEFAULT_OPERATOR_PER_TYPE = {
|
|
|
5269
5293
|
date: 'equals',
|
|
5270
5294
|
set: 'in',
|
|
5271
5295
|
boolean: 'equals',
|
|
5296
|
+
custom: 'equals',
|
|
5272
5297
|
};
|
|
5273
5298
|
/** Human-readable operator labels (used by `toLabel`). */
|
|
5274
5299
|
const OPERATOR_LABELS = {
|
|
@@ -5396,31 +5421,46 @@ class FilterEngine {
|
|
|
5396
5421
|
// Evaluation
|
|
5397
5422
|
// ------------------------------------------------------------------
|
|
5398
5423
|
/**
|
|
5399
|
-
* Evaluates the current model against the provided data.
|
|
5400
|
-
* the grid delegates filtering to the consumer
|
|
5424
|
+
* Evaluates the current model against the provided data.
|
|
5425
|
+
* In `server` filterMode the grid delegates filtering to the consumer — returns input as-is.
|
|
5401
5426
|
*/
|
|
5402
5427
|
filterData(data) {
|
|
5403
|
-
if (this.state.
|
|
5428
|
+
if (this.state.filterMode() === 'server')
|
|
5404
5429
|
return data;
|
|
5405
|
-
const
|
|
5430
|
+
const defMap = this.state.columnDefMap();
|
|
5431
|
+
const conditions = this.state.filterModel().conditions.filter((c) => this.isComplete(c, defMap.get(c.field)));
|
|
5406
5432
|
if (conditions.length === 0)
|
|
5407
5433
|
return data;
|
|
5408
|
-
const defMap = this.state.columnDefMap();
|
|
5409
5434
|
const prepared = conditions.map((c) => ({
|
|
5410
5435
|
cond: c,
|
|
5411
5436
|
col: defMap.get(c.field),
|
|
5412
5437
|
type: resolveFilterType(defMap.get(c.field)),
|
|
5413
5438
|
}));
|
|
5414
5439
|
return data.filter((row) => {
|
|
5415
|
-
let pass =
|
|
5440
|
+
let pass = this.matchRow(row, prepared[0]);
|
|
5416
5441
|
for (let i = 1; i < prepared.length; i++) {
|
|
5417
|
-
const
|
|
5418
|
-
|
|
5419
|
-
pass = step.cond.combinator === 'and' ? pass && result : pass || result;
|
|
5442
|
+
const result = this.matchRow(row, prepared[i]);
|
|
5443
|
+
pass = prepared[i].cond.combinator === 'and' ? pass && result : pass || result;
|
|
5420
5444
|
}
|
|
5421
5445
|
return pass;
|
|
5422
5446
|
});
|
|
5423
5447
|
}
|
|
5448
|
+
isComplete(condition, col) {
|
|
5449
|
+
if (resolveFilterType(col) === 'custom') {
|
|
5450
|
+
const fn = col?.filterIsComplete;
|
|
5451
|
+
return fn
|
|
5452
|
+
? fn(condition.value)
|
|
5453
|
+
: condition.value.value != null && condition.value.value !== '';
|
|
5454
|
+
}
|
|
5455
|
+
return isConditionComplete(condition);
|
|
5456
|
+
}
|
|
5457
|
+
matchRow(row, item) {
|
|
5458
|
+
if (item.type === 'custom') {
|
|
5459
|
+
const fn = item.col?.filterPredicate;
|
|
5460
|
+
return fn ? fn(row, item.cond.value) : true;
|
|
5461
|
+
}
|
|
5462
|
+
return matchOne(row, item.cond, item.col, item.type);
|
|
5463
|
+
}
|
|
5424
5464
|
// ------------------------------------------------------------------
|
|
5425
5465
|
// Helpers
|
|
5426
5466
|
// ------------------------------------------------------------------
|
|
@@ -5457,6 +5497,17 @@ class FilterEngine {
|
|
|
5457
5497
|
return defs.filter((d) => d.filterable).map((d) => this.describeColumn(d));
|
|
5458
5498
|
}
|
|
5459
5499
|
describeColumn(def) {
|
|
5500
|
+
if (def.filterComponent) {
|
|
5501
|
+
return {
|
|
5502
|
+
field: def.field,
|
|
5503
|
+
headerName: def.headerName ?? def.field,
|
|
5504
|
+
filterType: 'custom',
|
|
5505
|
+
operators: [],
|
|
5506
|
+
defaultOperator: 'equals',
|
|
5507
|
+
filterComponent: def.filterComponent,
|
|
5508
|
+
filterIsComplete: def.filterIsComplete,
|
|
5509
|
+
};
|
|
5510
|
+
}
|
|
5460
5511
|
const type = resolveFilterType(def);
|
|
5461
5512
|
const operators = def.filterOperators && def.filterOperators.length > 0
|
|
5462
5513
|
? def.filterOperators
|
|
@@ -5674,6 +5725,8 @@ const PREDICATES = {
|
|
|
5674
5725
|
blank,
|
|
5675
5726
|
notBlank,
|
|
5676
5727
|
},
|
|
5728
|
+
// custom filters are evaluated via ColumnDef.filterPredicate — no predicates here.
|
|
5729
|
+
custom: {},
|
|
5677
5730
|
};
|
|
5678
5731
|
|
|
5679
5732
|
class GroupEngine {
|
|
@@ -11362,6 +11415,13 @@ class MozGridColumnDef {
|
|
|
11362
11415
|
reorderable = input(true, ...(ngDevMode ? [{ debugName: "reorderable" }] : /* istanbul ignore next */ []));
|
|
11363
11416
|
groupable = input(false, ...(ngDevMode ? [{ debugName: "groupable" }] : /* istanbul ignore next */ []));
|
|
11364
11417
|
filterable = input(false, ...(ngDevMode ? [{ debugName: "filterable" }] : /* istanbul ignore next */ []));
|
|
11418
|
+
filterType = input(undefined, ...(ngDevMode ? [{ debugName: "filterType" }] : /* istanbul ignore next */ []));
|
|
11419
|
+
filterOperators = input(undefined, ...(ngDevMode ? [{ debugName: "filterOperators" }] : /* istanbul ignore next */ []));
|
|
11420
|
+
defaultFilterOperator = input(undefined, ...(ngDevMode ? [{ debugName: "defaultFilterOperator" }] : /* istanbul ignore next */ []));
|
|
11421
|
+
filterOptions = input(undefined, ...(ngDevMode ? [{ debugName: "filterOptions" }] : /* istanbul ignore next */ []));
|
|
11422
|
+
filterComponent = input(undefined, ...(ngDevMode ? [{ debugName: "filterComponent" }] : /* istanbul ignore next */ []));
|
|
11423
|
+
filterIsComplete = input(undefined, ...(ngDevMode ? [{ debugName: "filterIsComplete" }] : /* istanbul ignore next */ []));
|
|
11424
|
+
filterPredicate = input(undefined, ...(ngDevMode ? [{ debugName: "filterPredicate" }] : /* istanbul ignore next */ []));
|
|
11365
11425
|
editable = input(false, ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
|
|
11366
11426
|
visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
11367
11427
|
hideable = input(true, ...(ngDevMode ? [{ debugName: "hideable" }] : /* istanbul ignore next */ []));
|
|
@@ -11408,19 +11468,26 @@ class MozGridColumnDef {
|
|
|
11408
11468
|
cellTemplate: this.cellTemplateInput() ?? this.cellTemplateContent(),
|
|
11409
11469
|
editTemplate: this.editTemplateInput() ?? this.editTemplateContent(),
|
|
11410
11470
|
filterTemplate: this.filterTemplateInput() ?? this.filterTemplateContent(),
|
|
11471
|
+
filterType: this.filterType(),
|
|
11472
|
+
filterOperators: this.filterOperators(),
|
|
11473
|
+
defaultFilterOperator: this.defaultFilterOperator(),
|
|
11474
|
+
filterOptions: this.filterOptions(),
|
|
11475
|
+
filterComponent: this.filterComponent(),
|
|
11476
|
+
filterIsComplete: this.filterIsComplete(),
|
|
11477
|
+
filterPredicate: this.filterPredicate(),
|
|
11411
11478
|
cellValidator: this.cellValidator(),
|
|
11412
11479
|
allowFormula: this.allowFormula(),
|
|
11413
11480
|
};
|
|
11414
11481
|
}
|
|
11415
11482
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridColumnDef, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11416
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.13", type: MozGridColumnDef, isStandalone: true, selector: "moz-grid-column-def", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, headerName: { classPropertyName: "headerName", publicName: "headerName", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, flex: { classPropertyName: "flex", publicName: "flex", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, hideable: { classPropertyName: "hideable", publicName: "hideable", isSignal: true, isRequired: false, transformFunction: null }, freezable: { classPropertyName: "freezable", publicName: "freezable", isSignal: true, isRequired: false, transformFunction: null }, headerMenuDisabled: { classPropertyName: "headerMenuDisabled", publicName: "headerMenuDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowFormula: { classPropertyName: "allowFormula", publicName: "allowFormula", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, cellEditor: { classPropertyName: "cellEditor", publicName: "cellEditor", isSignal: true, isRequired: false, transformFunction: null }, cellEditorOptions: { classPropertyName: "cellEditorOptions", publicName: "cellEditorOptions", isSignal: true, isRequired: false, transformFunction: null }, cellValidator: { classPropertyName: "cellValidator", publicName: "cellValidator", isSignal: true, isRequired: false, transformFunction: null }, cellTemplateInput: { classPropertyName: "cellTemplateInput", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, editTemplateInput: { classPropertyName: "editTemplateInput", publicName: "editTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterTemplateInput: { classPropertyName: "filterTemplateInput", publicName: "filterTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cellTemplateContent", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "editTemplateContent", first: true, predicate: ["edit"], descendants: true, isSignal: true }, { propertyName: "filterTemplateContent", first: true, predicate: ["filter"], descendants: true, isSignal: true }], ngImport: i0 });
|
|
11483
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "21.2.13", type: MozGridColumnDef, isStandalone: true, selector: "moz-grid-column-def", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, headerName: { classPropertyName: "headerName", publicName: "headerName", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, flex: { classPropertyName: "flex", publicName: "flex", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, reorderable: { classPropertyName: "reorderable", publicName: "reorderable", isSignal: true, isRequired: false, transformFunction: null }, groupable: { classPropertyName: "groupable", publicName: "groupable", isSignal: true, isRequired: false, transformFunction: null }, filterable: { classPropertyName: "filterable", publicName: "filterable", isSignal: true, isRequired: false, transformFunction: null }, filterType: { classPropertyName: "filterType", publicName: "filterType", isSignal: true, isRequired: false, transformFunction: null }, filterOperators: { classPropertyName: "filterOperators", publicName: "filterOperators", isSignal: true, isRequired: false, transformFunction: null }, defaultFilterOperator: { classPropertyName: "defaultFilterOperator", publicName: "defaultFilterOperator", isSignal: true, isRequired: false, transformFunction: null }, filterOptions: { classPropertyName: "filterOptions", publicName: "filterOptions", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, filterIsComplete: { classPropertyName: "filterIsComplete", publicName: "filterIsComplete", isSignal: true, isRequired: false, transformFunction: null }, filterPredicate: { classPropertyName: "filterPredicate", publicName: "filterPredicate", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, hideable: { classPropertyName: "hideable", publicName: "hideable", isSignal: true, isRequired: false, transformFunction: null }, freezable: { classPropertyName: "freezable", publicName: "freezable", isSignal: true, isRequired: false, transformFunction: null }, headerMenuDisabled: { classPropertyName: "headerMenuDisabled", publicName: "headerMenuDisabled", isSignal: true, isRequired: false, transformFunction: null }, allowFormula: { classPropertyName: "allowFormula", publicName: "allowFormula", isSignal: true, isRequired: false, transformFunction: null }, pinned: { classPropertyName: "pinned", publicName: "pinned", isSignal: true, isRequired: false, transformFunction: null }, cellEditor: { classPropertyName: "cellEditor", publicName: "cellEditor", isSignal: true, isRequired: false, transformFunction: null }, cellEditorOptions: { classPropertyName: "cellEditorOptions", publicName: "cellEditorOptions", isSignal: true, isRequired: false, transformFunction: null }, cellValidator: { classPropertyName: "cellValidator", publicName: "cellValidator", isSignal: true, isRequired: false, transformFunction: null }, cellTemplateInput: { classPropertyName: "cellTemplateInput", publicName: "cellTemplate", isSignal: true, isRequired: false, transformFunction: null }, editTemplateInput: { classPropertyName: "editTemplateInput", publicName: "editTemplate", isSignal: true, isRequired: false, transformFunction: null }, filterTemplateInput: { classPropertyName: "filterTemplateInput", publicName: "filterTemplate", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "cellTemplateContent", first: true, predicate: ["cell"], descendants: true, isSignal: true }, { propertyName: "editTemplateContent", first: true, predicate: ["edit"], descendants: true, isSignal: true }, { propertyName: "filterTemplateContent", first: true, predicate: ["filter"], descendants: true, isSignal: true }], ngImport: i0 });
|
|
11417
11484
|
}
|
|
11418
11485
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridColumnDef, decorators: [{
|
|
11419
11486
|
type: Directive,
|
|
11420
11487
|
args: [{
|
|
11421
11488
|
selector: 'moz-grid-column-def',
|
|
11422
11489
|
}]
|
|
11423
|
-
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], headerName: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerName", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], flex: [{ type: i0.Input, args: [{ isSignal: true, alias: "flex", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], hideable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideable", required: false }] }], freezable: [{ type: i0.Input, args: [{ isSignal: true, alias: "freezable", required: false }] }], headerMenuDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMenuDisabled", required: false }] }], allowFormula: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFormula", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], cellEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellEditor", required: false }] }], cellEditorOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellEditorOptions", required: false }] }], cellValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellValidator", required: false }] }], cellTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], editTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplate", required: false }] }], filterTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTemplate", required: false }] }], cellTemplateContent: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], editTemplateContent: [{ type: i0.ContentChild, args: ['edit', { isSignal: true }] }], filterTemplateContent: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }] } });
|
|
11490
|
+
}], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], headerName: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerName", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], flex: [{ type: i0.Input, args: [{ isSignal: true, alias: "flex", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], reorderable: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderable", required: false }] }], groupable: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupable", required: false }] }], filterable: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterable", required: false }] }], filterType: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterType", required: false }] }], filterOperators: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOperators", required: false }] }], defaultFilterOperator: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultFilterOperator", required: false }] }], filterOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterOptions", required: false }] }], filterComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterComponent", required: false }] }], filterIsComplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterIsComplete", required: false }] }], filterPredicate: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPredicate", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], hideable: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideable", required: false }] }], freezable: [{ type: i0.Input, args: [{ isSignal: true, alias: "freezable", required: false }] }], headerMenuDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerMenuDisabled", required: false }] }], allowFormula: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowFormula", required: false }] }], pinned: [{ type: i0.Input, args: [{ isSignal: true, alias: "pinned", required: false }] }], cellEditor: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellEditor", required: false }] }], cellEditorOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellEditorOptions", required: false }] }], cellValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellValidator", required: false }] }], cellTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "cellTemplate", required: false }] }], editTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "editTemplate", required: false }] }], filterTemplateInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterTemplate", required: false }] }], cellTemplateContent: [{ type: i0.ContentChild, args: ['cell', { isSignal: true }] }], editTemplateContent: [{ type: i0.ContentChild, args: ['edit', { isSignal: true }] }], filterTemplateContent: [{ type: i0.ContentChild, args: ['filter', { isSignal: true }] }] } });
|
|
11424
11491
|
|
|
11425
11492
|
class MozGridToolbarDef {
|
|
11426
11493
|
slot = input('end', { ...(ngDevMode ? { debugName: "slot" } : /* istanbul ignore next */ {}), alias: 'mozGridToolbarDef' });
|
|
@@ -11506,6 +11573,50 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
11506
11573
|
args: [{ selector: 'moz-grid-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [Folder48, Search48, MozButtonComponent], template: "<div\n class=\"grid-empty-state\"\n [class.grid-empty-state--no-results]=\"kind() === 'no-results'\"\n role=\"status\"\n aria-live=\"polite\"\n>\n <div class=\"grid-empty-state__icon\" aria-hidden=\"true\">\n @if (kind() === 'no-results') {\n <Search48 />\n } @else {\n <Folder48 />\n }\n </div>\n\n <p class=\"grid-empty-state__title\">{{ resolvedTitle() }}</p>\n\n @if (resolvedDescription()) {\n <p class=\"grid-empty-state__description\">{{ resolvedDescription() }}</p>\n } @if (actionLabel()) {\n <button moz-button [outlined]=\"true\" size=\"s\" (click)=\"action.emit()\">\n {{ actionLabel() }}\n </button>\n }\n</div>\n", styles: [".grid-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:32px 24px;width:100%;height:100%;min-height:240px;color:var(--Text-Secondary, #555)}.grid-empty-state__icon{color:var(--Neutral-Grey-400, #97a1a8);margin-bottom:4px;display:inline-flex}.grid-empty-state__title{margin:0;font-size:16px;font-weight:600;color:var(--Text-Primary, #222)}.grid-empty-state__description{margin:0;max-width:360px;font-size:14px;line-height:1.4}.grid-empty-state--no-results .grid-empty-state__icon{color:var(--Status-Standalone-element-Primary, #0071ce)}\n"] }]
|
|
11507
11574
|
}], propDecorators: { kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], actionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionLabel", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
|
|
11508
11575
|
|
|
11576
|
+
/**
|
|
11577
|
+
* Structural host for custom filter components inside the filter builder.
|
|
11578
|
+
*
|
|
11579
|
+
* Usage in template:
|
|
11580
|
+
* <ng-container mozCustomFilterHost
|
|
11581
|
+
* [componentType]="descriptor.filterComponent"
|
|
11582
|
+
* [condition]="condition"
|
|
11583
|
+
* (conditionChange)="onValueChange(condition.id, $event)"
|
|
11584
|
+
* />
|
|
11585
|
+
*/
|
|
11586
|
+
class MozCustomFilterHostDirective {
|
|
11587
|
+
componentType = input.required(...(ngDevMode ? [{ debugName: "componentType" }] : /* istanbul ignore next */ []));
|
|
11588
|
+
condition = input.required(...(ngDevMode ? [{ debugName: "condition" }] : /* istanbul ignore next */ []));
|
|
11589
|
+
conditionChange = output();
|
|
11590
|
+
vcr = inject(ViewContainerRef);
|
|
11591
|
+
ref;
|
|
11592
|
+
sub;
|
|
11593
|
+
ngOnChanges(changes) {
|
|
11594
|
+
if (changes['componentType']) {
|
|
11595
|
+
this.teardown();
|
|
11596
|
+
this.ref = this.vcr.createComponent(this.componentType());
|
|
11597
|
+
this.sub = this.ref.instance.conditionChange.subscribe((v) => this.conditionChange.emit(v));
|
|
11598
|
+
}
|
|
11599
|
+
if (this.ref) {
|
|
11600
|
+
this.ref.setInput('condition', this.condition());
|
|
11601
|
+
}
|
|
11602
|
+
}
|
|
11603
|
+
ngOnDestroy() {
|
|
11604
|
+
this.teardown();
|
|
11605
|
+
}
|
|
11606
|
+
teardown() {
|
|
11607
|
+
this.sub?.unsubscribe();
|
|
11608
|
+
this.ref?.destroy();
|
|
11609
|
+
this.ref = undefined;
|
|
11610
|
+
this.sub = undefined;
|
|
11611
|
+
}
|
|
11612
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozCustomFilterHostDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
11613
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.13", type: MozCustomFilterHostDirective, isStandalone: true, selector: "[mozCustomFilterHost]", inputs: { componentType: { classPropertyName: "componentType", publicName: "componentType", isSignal: true, isRequired: true, transformFunction: null }, condition: { classPropertyName: "condition", publicName: "condition", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { conditionChange: "conditionChange" }, usesOnChanges: true, ngImport: i0 });
|
|
11614
|
+
}
|
|
11615
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozCustomFilterHostDirective, decorators: [{
|
|
11616
|
+
type: Directive,
|
|
11617
|
+
args: [{ selector: '[mozCustomFilterHost]', standalone: true }]
|
|
11618
|
+
}], propDecorators: { componentType: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentType", required: true }] }], condition: [{ type: i0.Input, args: [{ isSignal: true, alias: "condition", required: true }] }], conditionChange: [{ type: i0.Output, args: ["conditionChange"] }] } });
|
|
11619
|
+
|
|
11509
11620
|
class MozGridFilterBuilderComponent {
|
|
11510
11621
|
model = input.required(...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
|
|
11511
11622
|
availableColumns = input.required(...(ngDevMode ? [{ debugName: "availableColumns" }] : /* istanbul ignore next */ []));
|
|
@@ -11573,7 +11684,7 @@ class MozGridFilterBuilderComponent {
|
|
|
11573
11684
|
this.commit();
|
|
11574
11685
|
}
|
|
11575
11686
|
onOperatorChange(id, operator) {
|
|
11576
|
-
this.draft.update((list) => list.map((c) =>
|
|
11687
|
+
this.draft.update((list) => list.map((c) => c.id === id ? { ...c, operator, value: resetValueFor(operator, c.value) } : c));
|
|
11577
11688
|
this.commit();
|
|
11578
11689
|
}
|
|
11579
11690
|
onValueChange(id, patch) {
|
|
@@ -11629,10 +11740,12 @@ class MozGridFilterBuilderComponent {
|
|
|
11629
11740
|
// Internals
|
|
11630
11741
|
// ------------------------------------------------------------------
|
|
11631
11742
|
commit() {
|
|
11632
|
-
this.modelChange.emit({
|
|
11743
|
+
this.modelChange.emit({
|
|
11744
|
+
conditions: this.draft().map((c) => ({ ...c, value: { ...c.value } })),
|
|
11745
|
+
});
|
|
11633
11746
|
}
|
|
11634
11747
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridFilterBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11635
|
-
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 -->\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 columnsById().get(cond.field)?.operators ?? []; track op) {\n <option [value]=\"op\">{{ operatorLabels[op] }}</option>\n }\n </select>\n\n <!-- Value -->\n <div class=\"filter-builder__value\">\n @if (needsValue(cond.operator)) { @let col = columnsById().get(cond.field); @if\n (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: "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 });
|
|
11748
|
+
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 });
|
|
11636
11749
|
}
|
|
11637
11750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridFilterBuilderComponent, decorators: [{
|
|
11638
11751
|
type: Component,
|
|
@@ -11642,10 +11755,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
11642
11755
|
CdkDrag,
|
|
11643
11756
|
CdkDragHandle,
|
|
11644
11757
|
MozButtonComponent,
|
|
11758
|
+
MozCustomFilterHostDirective,
|
|
11645
11759
|
Drag20,
|
|
11646
11760
|
Cross20,
|
|
11647
11761
|
ListAdd20,
|
|
11648
|
-
], 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 -->\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
|
|
11762
|
+
], 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"] }]
|
|
11649
11763
|
}], 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"] }] } });
|
|
11650
11764
|
function resetValueFor(op, previous) {
|
|
11651
11765
|
if (VALUELESS_OPERATORS.has(op))
|
|
@@ -13254,6 +13368,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
13254
13368
|
args: [{ selector: 'moz-grid-detail-row', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, JsonPipe], template: "<div class=\"grid-detail-row\">\n @if (detailTemplate()) {\n <ng-container\n [ngTemplateOutlet]=\"detailTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: data(), index: rowIndex() }\"\n />\n } @else {\n <pre class=\"grid-detail-row__default\">{{ data() | json }}</pre>\n }\n</div>\n", styles: [":host{display:block;position:sticky;left:0;overflow:hidden;box-sizing:border-box}.grid-detail-row{padding:var(--spacing-m, 16px);background:var(--color-background-secondary, #f8f9fa);border-bottom:1px solid var(--color-border-primary);border-top:1px solid var(--color-border-primary)}.grid-detail-row__default{margin:0;font-size:var(--font-size-xs, 12px);color:var(--color-text-secondary);white-space:pre-wrap;word-break:break-all}\n"] }]
|
|
13255
13369
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], rowIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowIndex", required: true }] }], detailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailTemplate", required: false }] }] } });
|
|
13256
13370
|
|
|
13371
|
+
class MozGridSkeletonRowComponent {
|
|
13372
|
+
state = inject(GridStateManager);
|
|
13373
|
+
showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : /* istanbul ignore next */ []));
|
|
13374
|
+
showExpand = input(false, ...(ngDevMode ? [{ debugName: "showExpand" }] : /* istanbul ignore next */ []));
|
|
13375
|
+
utilityLeftWidth = computed(() => {
|
|
13376
|
+
let w = 0;
|
|
13377
|
+
if (this.showExpand())
|
|
13378
|
+
w += 36;
|
|
13379
|
+
if (this.showCheckbox())
|
|
13380
|
+
w += 48;
|
|
13381
|
+
return w;
|
|
13382
|
+
}, ...(ngDevMode ? [{ debugName: "utilityLeftWidth" }] : /* istanbul ignore next */ []));
|
|
13383
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridSkeletonRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13384
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridSkeletonRowComponent, isStandalone: true, selector: "moz-grid-skeleton-row", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
13385
|
+
<div class="grid-skeleton-row" [style.height.px]="state.rowHeight()">
|
|
13386
|
+
@if (showExpand()) {
|
|
13387
|
+
<div class="grid-skeleton-row__utility" [style.width.px]="36" [style.left.px]="0"></div>
|
|
13388
|
+
} @if (showCheckbox()) {
|
|
13389
|
+
<div
|
|
13390
|
+
class="grid-skeleton-row__utility"
|
|
13391
|
+
[style.width.px]="48"
|
|
13392
|
+
[style.left.px]="showExpand() ? 36 : 0"
|
|
13393
|
+
></div>
|
|
13394
|
+
}
|
|
13395
|
+
|
|
13396
|
+
@for (col of state.pinnedLeftColumns(); track col.field; let i = $index) {
|
|
13397
|
+
<div
|
|
13398
|
+
class="grid-skeleton-row__cell grid-skeleton-row__cell--sticky-left"
|
|
13399
|
+
[style.width.px]="col.currentWidth"
|
|
13400
|
+
[style.min-width.px]="col.currentWidth"
|
|
13401
|
+
[style.left.px]="utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]"
|
|
13402
|
+
>
|
|
13403
|
+
<div class="grid-skeleton-row__shimmer"></div>
|
|
13404
|
+
</div>
|
|
13405
|
+
} @if (state.leadingColumnSpacer() > 0) {
|
|
13406
|
+
<div
|
|
13407
|
+
class="grid-skeleton-row__spacer"
|
|
13408
|
+
[style.width.px]="state.leadingColumnSpacer()"
|
|
13409
|
+
></div>
|
|
13410
|
+
} @for (col of state.renderedUnpinnedColumns(); track col.field) {
|
|
13411
|
+
<div
|
|
13412
|
+
class="grid-skeleton-row__cell"
|
|
13413
|
+
[style.width.px]="col.currentWidth"
|
|
13414
|
+
[style.min-width.px]="col.currentWidth"
|
|
13415
|
+
>
|
|
13416
|
+
<div class="grid-skeleton-row__shimmer"></div>
|
|
13417
|
+
</div>
|
|
13418
|
+
} @if (state.trailingColumnSpacer() > 0) {
|
|
13419
|
+
<div
|
|
13420
|
+
class="grid-skeleton-row__spacer"
|
|
13421
|
+
[style.width.px]="state.trailingColumnSpacer()"
|
|
13422
|
+
></div>
|
|
13423
|
+
} @for (col of state.pinnedRightColumns(); track col.field; let i = $index) {
|
|
13424
|
+
<div
|
|
13425
|
+
class="grid-skeleton-row__cell grid-skeleton-row__cell--sticky-right"
|
|
13426
|
+
[style.width.px]="col.currentWidth"
|
|
13427
|
+
[style.min-width.px]="col.currentWidth"
|
|
13428
|
+
[style.right.px]="state.pinnedRightCumulativeOffsets()[i]"
|
|
13429
|
+
>
|
|
13430
|
+
<div class="grid-skeleton-row__shimmer"></div>
|
|
13431
|
+
</div>
|
|
13432
|
+
}
|
|
13433
|
+
</div>
|
|
13434
|
+
`, isInline: true, styles: [":host{display:block;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-skeleton-row{display:flex;width:max-content;min-width:100%;box-sizing:border-box;background:inherit}.grid-skeleton-row__utility{flex:0 0 auto;height:100%;position:sticky;z-index:2;background:inherit}.grid-skeleton-row__cell{flex:0 0 auto;height:100%;display:flex;align-items:center;padding:0 12px;box-sizing:border-box;background:inherit}.grid-skeleton-row__cell--sticky-left,.grid-skeleton-row__cell--sticky-right{position:sticky;z-index:1}.grid-skeleton-row__spacer{flex:0 0 auto;height:100%;background:inherit}.grid-skeleton-row__shimmer{width:60%;height:12px;border-radius:var(--border-radius-s, 4px);background:linear-gradient(90deg,var(--color-border-primary, #e0e6ea) 25%,var(--color-background-tertiary, #f0f4f6) 50%,var(--color-border-primary, #e0e6ea) 75%);background-size:200% 100%;animation:moz-grid-shimmer 1.5s ease-in-out infinite}@keyframes moz-grid-shimmer{0%{background-position:200% center}to{background-position:-200% center}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13435
|
+
}
|
|
13436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridSkeletonRowComponent, decorators: [{
|
|
13437
|
+
type: Component,
|
|
13438
|
+
args: [{ selector: 'moz-grid-skeleton-row', changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
13439
|
+
<div class="grid-skeleton-row" [style.height.px]="state.rowHeight()">
|
|
13440
|
+
@if (showExpand()) {
|
|
13441
|
+
<div class="grid-skeleton-row__utility" [style.width.px]="36" [style.left.px]="0"></div>
|
|
13442
|
+
} @if (showCheckbox()) {
|
|
13443
|
+
<div
|
|
13444
|
+
class="grid-skeleton-row__utility"
|
|
13445
|
+
[style.width.px]="48"
|
|
13446
|
+
[style.left.px]="showExpand() ? 36 : 0"
|
|
13447
|
+
></div>
|
|
13448
|
+
}
|
|
13449
|
+
|
|
13450
|
+
@for (col of state.pinnedLeftColumns(); track col.field; let i = $index) {
|
|
13451
|
+
<div
|
|
13452
|
+
class="grid-skeleton-row__cell grid-skeleton-row__cell--sticky-left"
|
|
13453
|
+
[style.width.px]="col.currentWidth"
|
|
13454
|
+
[style.min-width.px]="col.currentWidth"
|
|
13455
|
+
[style.left.px]="utilityLeftWidth() + state.pinnedLeftCumulativeOffsets()[i]"
|
|
13456
|
+
>
|
|
13457
|
+
<div class="grid-skeleton-row__shimmer"></div>
|
|
13458
|
+
</div>
|
|
13459
|
+
} @if (state.leadingColumnSpacer() > 0) {
|
|
13460
|
+
<div
|
|
13461
|
+
class="grid-skeleton-row__spacer"
|
|
13462
|
+
[style.width.px]="state.leadingColumnSpacer()"
|
|
13463
|
+
></div>
|
|
13464
|
+
} @for (col of state.renderedUnpinnedColumns(); track col.field) {
|
|
13465
|
+
<div
|
|
13466
|
+
class="grid-skeleton-row__cell"
|
|
13467
|
+
[style.width.px]="col.currentWidth"
|
|
13468
|
+
[style.min-width.px]="col.currentWidth"
|
|
13469
|
+
>
|
|
13470
|
+
<div class="grid-skeleton-row__shimmer"></div>
|
|
13471
|
+
</div>
|
|
13472
|
+
} @if (state.trailingColumnSpacer() > 0) {
|
|
13473
|
+
<div
|
|
13474
|
+
class="grid-skeleton-row__spacer"
|
|
13475
|
+
[style.width.px]="state.trailingColumnSpacer()"
|
|
13476
|
+
></div>
|
|
13477
|
+
} @for (col of state.pinnedRightColumns(); track col.field; let i = $index) {
|
|
13478
|
+
<div
|
|
13479
|
+
class="grid-skeleton-row__cell grid-skeleton-row__cell--sticky-right"
|
|
13480
|
+
[style.width.px]="col.currentWidth"
|
|
13481
|
+
[style.min-width.px]="col.currentWidth"
|
|
13482
|
+
[style.right.px]="state.pinnedRightCumulativeOffsets()[i]"
|
|
13483
|
+
>
|
|
13484
|
+
<div class="grid-skeleton-row__shimmer"></div>
|
|
13485
|
+
</div>
|
|
13486
|
+
}
|
|
13487
|
+
</div>
|
|
13488
|
+
`, styles: [":host{display:block;background:var(--color-background-primary);border-bottom:1px solid var(--color-border-primary)}.grid-skeleton-row{display:flex;width:max-content;min-width:100%;box-sizing:border-box;background:inherit}.grid-skeleton-row__utility{flex:0 0 auto;height:100%;position:sticky;z-index:2;background:inherit}.grid-skeleton-row__cell{flex:0 0 auto;height:100%;display:flex;align-items:center;padding:0 12px;box-sizing:border-box;background:inherit}.grid-skeleton-row__cell--sticky-left,.grid-skeleton-row__cell--sticky-right{position:sticky;z-index:1}.grid-skeleton-row__spacer{flex:0 0 auto;height:100%;background:inherit}.grid-skeleton-row__shimmer{width:60%;height:12px;border-radius:var(--border-radius-s, 4px);background:linear-gradient(90deg,var(--color-border-primary, #e0e6ea) 25%,var(--color-background-tertiary, #f0f4f6) 50%,var(--color-border-primary, #e0e6ea) 75%);background-size:200% 100%;animation:moz-grid-shimmer 1.5s ease-in-out infinite}@keyframes moz-grid-shimmer{0%{background-position:200% center}to{background-position:-200% center}}\n"] }]
|
|
13489
|
+
}], propDecorators: { showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }] } });
|
|
13490
|
+
|
|
13257
13491
|
class MozGridBodyComponent {
|
|
13258
13492
|
state = inject(GridStateManager);
|
|
13259
13493
|
engine = inject(GridEngine);
|
|
@@ -13279,6 +13513,11 @@ class MozGridBodyComponent {
|
|
|
13279
13513
|
w += 48;
|
|
13280
13514
|
return w;
|
|
13281
13515
|
}, ...(ngDevMode ? [{ debugName: "utilityLeftWidth" }] : /* istanbul ignore next */ []));
|
|
13516
|
+
/** Number of skeleton rows shown while loading — match page size, max 20. */
|
|
13517
|
+
skeletonRows = computed(() => {
|
|
13518
|
+
const count = Math.min(this.state.pageSize(), 20);
|
|
13519
|
+
return new Array(count).fill(0).map((_, i) => i);
|
|
13520
|
+
}, ...(ngDevMode ? [{ debugName: "skeletonRows" }] : /* istanbul ignore next */ []));
|
|
13282
13521
|
/** Concrete display-row indices to render this frame. */
|
|
13283
13522
|
visibleIndices = computed(() => {
|
|
13284
13523
|
const { start, end } = this.state.visibleRowRange();
|
|
@@ -13316,11 +13555,11 @@ class MozGridBodyComponent {
|
|
|
13316
13555
|
});
|
|
13317
13556
|
}
|
|
13318
13557
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
13319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridBodyComponent, isStandalone: true, selector: "moz-grid-body", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, detailTemplate: { classPropertyName: "detailTemplate", publicName: "detailTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", cellEditCancel: "cellEditCancel", rowSelectionToggle: "rowSelectionToggle", groupToggle: "groupToggle" }, viewQueries: [{ propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, isSignal: true }, { propertyName: "rowEls", predicate: ["rowEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n class=\"grid-body__container\"\n #bodyContainer\n [style.min-width.px]=\"state.totalContentWidth() + utilityLeftWidth()\"\n>\n <!-- Top spacer (replaces translateY): forces visible rows to render at the\n correct vertical position. Pure block flow, no transform \u2192 keeps the\n sticky containing block on the scroll container. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.topSpacerHeight()\"\n ></div>\n\n @for (idx of visibleIndices(); track idx) {\n @let displayRow = engine.displayRows()[idx];\n @if (displayRow.type === 'data') {\n <moz-grid-row\n [row]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [showCheckbox]=\"showCheckbox()\"\n [showExpand]=\"showExpand()\"\n [attr.data-row-index]=\"idx\"\n #rowEl\n (cellEdit)=\"cellEdit.emit($event)\"\n (cellEditCancel)=\"cellEditCancel.emit($event)\"\n (rowSelectionToggle)=\"rowSelectionToggle.emit()\"\n />\n @if (isRowExpanded(displayRow.data)) {\n <moz-grid-detail-row\n [data]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [detailTemplate]=\"detailTemplate()\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n />\n } } @else if (displayRow.type === 'group') {\n <moz-grid-group-row\n [groupRow]=\"displayRow.group\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n (toggleExpand)=\"groupToggle.emit($event)\"\n />\n } }\n\n <!-- Bottom spacer: makes the scroll container tall enough to expose the\n full virtual range. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.bottomSpacerHeight()\"\n ></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:1 1 auto;min-height:0}.grid-body__container{display:flex;flex-direction:column}.grid-body__spacer{flex:0 0 auto;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MozGridRowComponent, selector: "moz-grid-row", inputs: ["row", "rowIndex", "showCheckbox", "showExpand"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle"] }, { kind: "component", type: MozGridGroupRowComponent, selector: "moz-grid-group-row", inputs: ["groupRow"], outputs: ["toggleExpand"] }, { kind: "component", type: MozGridDetailRowComponent, selector: "moz-grid-detail-row", inputs: ["data", "rowIndex", "detailTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13558
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.13", type: MozGridBodyComponent, isStandalone: true, selector: "moz-grid-body", inputs: { showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, showExpand: { classPropertyName: "showExpand", publicName: "showExpand", isSignal: true, isRequired: false, transformFunction: null }, detailTemplate: { classPropertyName: "detailTemplate", publicName: "detailTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellEdit: "cellEdit", cellEditCancel: "cellEditCancel", rowSelectionToggle: "rowSelectionToggle", groupToggle: "groupToggle" }, viewQueries: [{ propertyName: "bodyContainer", first: true, predicate: ["bodyContainer"], descendants: true, isSignal: true }, { propertyName: "rowEls", predicate: ["rowEl"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div\n class=\"grid-body__container\"\n #bodyContainer\n [style.min-width.px]=\"state.totalContentWidth() + utilityLeftWidth()\"\n>\n <!-- Top spacer (replaces translateY): forces visible rows to render at the\n correct vertical position. Pure block flow, no transform \u2192 keeps the\n sticky containing block on the scroll container. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.topSpacerHeight()\"\n ></div>\n\n @if (state.isLoading()) {\n @for (i of skeletonRows(); track i) {\n <moz-grid-skeleton-row [showCheckbox]=\"showCheckbox()\" [showExpand]=\"showExpand()\" />\n } } @else {\n @for (idx of visibleIndices(); track idx) {\n @let displayRow = engine.displayRows()[idx];\n @if (displayRow.type === 'data') {\n <moz-grid-row\n [row]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [showCheckbox]=\"showCheckbox()\"\n [showExpand]=\"showExpand()\"\n [attr.data-row-index]=\"idx\"\n #rowEl\n (cellEdit)=\"cellEdit.emit($event)\"\n (cellEditCancel)=\"cellEditCancel.emit($event)\"\n (rowSelectionToggle)=\"rowSelectionToggle.emit()\"\n />\n @if (isRowExpanded(displayRow.data)) {\n <moz-grid-detail-row\n [data]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [detailTemplate]=\"detailTemplate()\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n />\n } } @else if (displayRow.type === 'group') {\n <moz-grid-group-row\n [groupRow]=\"displayRow.group\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n (toggleExpand)=\"groupToggle.emit($event)\"\n />\n } }\n }\n\n <!-- Bottom spacer: makes the scroll container tall enough to expose the\n full virtual range. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.bottomSpacerHeight()\"\n ></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:1 1 auto;min-height:0}.grid-body__container{display:flex;flex-direction:column}.grid-body__spacer{flex:0 0 auto;pointer-events:none}\n"], dependencies: [{ kind: "component", type: MozGridRowComponent, selector: "moz-grid-row", inputs: ["row", "rowIndex", "showCheckbox", "showExpand"], outputs: ["cellEdit", "cellEditCancel", "rowSelectionToggle"] }, { kind: "component", type: MozGridGroupRowComponent, selector: "moz-grid-group-row", inputs: ["groupRow"], outputs: ["toggleExpand"] }, { kind: "component", type: MozGridDetailRowComponent, selector: "moz-grid-detail-row", inputs: ["data", "rowIndex", "detailTemplate"] }, { kind: "component", type: MozGridSkeletonRowComponent, selector: "moz-grid-skeleton-row", inputs: ["showCheckbox", "showExpand"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13320
13559
|
}
|
|
13321
13560
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridBodyComponent, decorators: [{
|
|
13322
13561
|
type: Component,
|
|
13323
|
-
args: [{ selector: 'moz-grid-body', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridRowComponent, MozGridGroupRowComponent, MozGridDetailRowComponent], template: "<div\n class=\"grid-body__container\"\n #bodyContainer\n [style.min-width.px]=\"state.totalContentWidth() + utilityLeftWidth()\"\n>\n <!-- Top spacer (replaces translateY): forces visible rows to render at the\n correct vertical position. Pure block flow, no transform \u2192 keeps the\n sticky containing block on the scroll container. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.topSpacerHeight()\"\n ></div>\n\n @for (idx of visibleIndices(); track idx) {\n @let displayRow = engine.displayRows()[idx];\n @if (displayRow.type === 'data') {\n <moz-grid-row\n [row]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [showCheckbox]=\"showCheckbox()\"\n [showExpand]=\"showExpand()\"\n [attr.data-row-index]=\"idx\"\n #rowEl\n (cellEdit)=\"cellEdit.emit($event)\"\n (cellEditCancel)=\"cellEditCancel.emit($event)\"\n (rowSelectionToggle)=\"rowSelectionToggle.emit()\"\n />\n @if (isRowExpanded(displayRow.data)) {\n <moz-grid-detail-row\n [data]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [detailTemplate]=\"detailTemplate()\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n />\n } } @else if (displayRow.type === 'group') {\n <moz-grid-group-row\n [groupRow]=\"displayRow.group\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n (toggleExpand)=\"groupToggle.emit($event)\"\n />\n } }\n\n <!-- Bottom spacer: makes the scroll container tall enough to expose the\n full virtual range. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.bottomSpacerHeight()\"\n ></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:1 1 auto;min-height:0}.grid-body__container{display:flex;flex-direction:column}.grid-body__spacer{flex:0 0 auto;pointer-events:none}\n"] }]
|
|
13562
|
+
args: [{ selector: 'moz-grid-body', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MozGridRowComponent, MozGridGroupRowComponent, MozGridDetailRowComponent, MozGridSkeletonRowComponent], template: "<div\n class=\"grid-body__container\"\n #bodyContainer\n [style.min-width.px]=\"state.totalContentWidth() + utilityLeftWidth()\"\n>\n <!-- Top spacer (replaces translateY): forces visible rows to render at the\n correct vertical position. Pure block flow, no transform \u2192 keeps the\n sticky containing block on the scroll container. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.topSpacerHeight()\"\n ></div>\n\n @if (state.isLoading()) {\n @for (i of skeletonRows(); track i) {\n <moz-grid-skeleton-row [showCheckbox]=\"showCheckbox()\" [showExpand]=\"showExpand()\" />\n } } @else {\n @for (idx of visibleIndices(); track idx) {\n @let displayRow = engine.displayRows()[idx];\n @if (displayRow.type === 'data') {\n <moz-grid-row\n [row]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [showCheckbox]=\"showCheckbox()\"\n [showExpand]=\"showExpand()\"\n [attr.data-row-index]=\"idx\"\n #rowEl\n (cellEdit)=\"cellEdit.emit($event)\"\n (cellEditCancel)=\"cellEditCancel.emit($event)\"\n (rowSelectionToggle)=\"rowSelectionToggle.emit()\"\n />\n @if (isRowExpanded(displayRow.data)) {\n <moz-grid-detail-row\n [data]=\"displayRow.data\"\n [rowIndex]=\"displayRow.index\"\n [detailTemplate]=\"detailTemplate()\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n />\n } } @else if (displayRow.type === 'group') {\n <moz-grid-group-row\n [groupRow]=\"displayRow.group\"\n [style.width.px]=\"state.scrollViewportWidth()\"\n (toggleExpand)=\"groupToggle.emit($event)\"\n />\n } }\n }\n\n <!-- Bottom spacer: makes the scroll container tall enough to expose the\n full virtual range. -->\n <div\n class=\"grid-body__spacer\"\n aria-hidden=\"true\"\n [style.height.px]=\"state.bottomSpacerHeight()\"\n ></div>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;flex:1 1 auto;min-height:0}.grid-body__container{display:flex;flex-direction:column}.grid-body__spacer{flex:0 0 auto;pointer-events:none}\n"] }]
|
|
13324
13563
|
}], ctorParameters: () => [], propDecorators: { bodyContainer: [{ type: i0.ViewChild, args: ['bodyContainer', { isSignal: true }] }], rowEls: [{ type: i0.ViewChildren, args: ['rowEl', { ...{ read: ElementRef }, isSignal: true }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], showExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpand", required: false }] }], detailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "detailTemplate", required: false }] }], cellEdit: [{ type: i0.Output, args: ["cellEdit"] }], cellEditCancel: [{ type: i0.Output, args: ["cellEditCancel"] }], rowSelectionToggle: [{ type: i0.Output, args: ["rowSelectionToggle"] }], groupToggle: [{ type: i0.Output, args: ["groupToggle"] }] } });
|
|
13325
13564
|
|
|
13326
13565
|
class MozGridFooterComponent {
|
|
@@ -13859,6 +14098,7 @@ class MozGridComponent {
|
|
|
13859
14098
|
// --- Inputs ---
|
|
13860
14099
|
data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
|
|
13861
14100
|
mode = input('client', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
14101
|
+
filterMode = input('client', ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
|
|
13862
14102
|
totalItems = input(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : /* istanbul ignore next */ []));
|
|
13863
14103
|
pagination = input(true, ...(ngDevMode ? [{ debugName: "pagination" }] : /* istanbul ignore next */ []));
|
|
13864
14104
|
pageSize = input(20, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
|
|
@@ -14204,6 +14444,10 @@ class MozGridComponent {
|
|
|
14204
14444
|
effect(() => {
|
|
14205
14445
|
this.state.mode.set(this.mode());
|
|
14206
14446
|
}, { allowSignalWrites: true });
|
|
14447
|
+
// Sync filterMode input → state
|
|
14448
|
+
effect(() => {
|
|
14449
|
+
this.state.filterMode.set(this.filterMode());
|
|
14450
|
+
}, { allowSignalWrites: true });
|
|
14207
14451
|
// Sync horizontal virtual scroll flag → state
|
|
14208
14452
|
effect(() => {
|
|
14209
14453
|
this.state.horizontalVirtualScrollEnabled.set(this.horizontalVirtualScroll());
|
|
@@ -15550,7 +15794,7 @@ class MozGridComponent {
|
|
|
15550
15794
|
return value;
|
|
15551
15795
|
}
|
|
15552
15796
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15553
|
-
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 }, 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: [
|
|
15797
|
+
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: [
|
|
15554
15798
|
GridStateManager,
|
|
15555
15799
|
GridEngine,
|
|
15556
15800
|
SortEngine,
|
|
@@ -15805,7 +16049,6 @@ class MozGridComponent {
|
|
|
15805
16049
|
overlays don't move when the user scrolls the data. -->
|
|
15806
16050
|
<div
|
|
15807
16051
|
class="moz-grid"
|
|
15808
|
-
[class.moz-grid--loading]="state.isLoading()"
|
|
15809
16052
|
(keydown)="onKeydown($event)"
|
|
15810
16053
|
(mouseup)="onMouseUp()"
|
|
15811
16054
|
>
|
|
@@ -15871,7 +16114,7 @@ class MozGridComponent {
|
|
|
15871
16114
|
/>
|
|
15872
16115
|
</div>
|
|
15873
16116
|
</div>
|
|
15874
|
-
`, 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-
|
|
16117
|
+
`, 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-btn{display:inline-flex;align-items:center;gap:4px}.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{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--Status-Standalone-element-Primary, #0071ce);color:#fff;font-size:11px;font-weight:600;line-height:1}.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: 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 });
|
|
15875
16118
|
}
|
|
15876
16119
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozGridComponent, decorators: [{
|
|
15877
16120
|
type: Component,
|
|
@@ -16152,7 +16395,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
16152
16395
|
overlays don't move when the user scrolls the data. -->
|
|
16153
16396
|
<div
|
|
16154
16397
|
class="moz-grid"
|
|
16155
|
-
[class.moz-grid--loading]="state.isLoading()"
|
|
16156
16398
|
(keydown)="onKeydown($event)"
|
|
16157
16399
|
(mouseup)="onMouseUp()"
|
|
16158
16400
|
>
|
|
@@ -16218,8 +16460,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
16218
16460
|
/>
|
|
16219
16461
|
</div>
|
|
16220
16462
|
</div>
|
|
16221
|
-
`, 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-
|
|
16222
|
-
}], 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 }] }], 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 }] }] } });
|
|
16463
|
+
`, 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-btn{display:inline-flex;align-items:center;gap:4px}.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{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 6px;border-radius:9px;background:var(--Status-Standalone-element-Primary, #0071ce);color:#fff;font-size:11px;font-weight:600;line-height:1}.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"] }]
|
|
16464
|
+
}], 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 }] }] } });
|
|
16223
16465
|
/**
|
|
16224
16466
|
* Coerce a raw formula-bar draft (always a string) back to the column's
|
|
16225
16467
|
* natural type. Empty → `''`, numeric literal → `number` (when the old
|
|
@@ -17056,7 +17298,7 @@ class MozComboboxComponent {
|
|
|
17056
17298
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
17057
17299
|
multi: true,
|
|
17058
17300
|
},
|
|
17059
|
-
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n }\n\n <!-- Chevron -->\n <button\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div class=\"mc-option-listbox__actions\">\n <button\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled\n ? toggleSection(item.title)\n : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { 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: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17301
|
+
], viewQueries: [{ propertyName: "triggerEl", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "viewportEl", first: true, predicate: ["viewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n [id]=\"comboboxId + '-trigger'\"\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n [id]=\"comboboxId + '-clear'\"\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader\n [id]=\"comboboxId + '-trigger-loader'\"\n size=\"s\"\n [appearance]=\"'accent'\"\n class=\"mc-combobox__loader\"\n />\n }\n\n <!-- Chevron -->\n <button\n [id]=\"comboboxId + '-chevron'\"\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n [id]=\"comboboxId + '-panel'\"\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n [id]=\"comboboxId + '-search-input'\"\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n <button\n [id]=\"comboboxId + '-select-all'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n [id]=\"comboboxId + '-clear-selection'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div [id]=\"comboboxId + '-loading'\" class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div\n [id]=\"comboboxId + '-empty'\"\n class=\"mc-option-listbox__empty\"\n role=\"presentation\"\n aria-live=\"polite\"\n >\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [id]=\"comboboxId + '-viewport'\"\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n [id]=\"comboboxId + '-section-' + i\"\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: MozLoaderComponent, selector: "moz-loader", inputs: ["appearance", "size", "text"] }, { kind: "component", type: MozButtonComponent, selector: "button[moz-button]", inputs: ["appearance", "size", "disabled", "ghost", "outlined", "iconPosition", "type", "isLoading"] }, { kind: "component", type: CrossCircleFilled24, selector: "CrossCircleFilled24", inputs: ["hostClass"] }, { kind: "component", type: ChevronDown24, selector: "ChevronDown24", inputs: ["hostClass"] }, { kind: "component", type: Search24, selector: "Search24", inputs: ["hostClass"] }, { kind: "component", type: MozTextInput, selector: "input[moz-text-input]", inputs: ["isInvalid", "disabled", "readonly", "size", "clearable", "clearLabel", "prefix", "suffix"] }, { 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: "component", type: CheckCircle24, selector: "CheckCircle24", inputs: ["hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17060
17302
|
}
|
|
17061
17303
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImport: i0, type: MozComboboxComponent, decorators: [{
|
|
17062
17304
|
type: Component,
|
|
@@ -17079,7 +17321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
17079
17321
|
useExisting: forwardRef(() => MozComboboxComponent),
|
|
17080
17322
|
multi: true,
|
|
17081
17323
|
},
|
|
17082
|
-
], template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader size=\"s\" [appearance]=\"'accent'\" class=\"mc-combobox__loader\" />\n }\n\n <!-- Chevron -->\n <button\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div class=\"mc-option-listbox__actions\">\n <button\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button moz-button type=\"button\" [size]=\"'s'\" [ghost]=\"true\" (click)=\"clearSelection()\">\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div class=\"mc-option-listbox__empty\" role=\"presentation\" aria-live=\"polite\">\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled\n ? toggleSection(item.title)\n : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
|
|
17324
|
+
], template: "<!-- ====================================================================== -->\n<!-- TRIGGER -->\n<!-- ====================================================================== -->\n<div [class]=\"wrapperClasses()\">\n <div class=\"mc-combobox__input\">\n <button\n #triggerBtn\n [id]=\"comboboxId + '-trigger'\"\n type=\"button\"\n class=\"mc-combobox__control\"\n role=\"combobox\"\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [disabled]=\"isEffectivelyDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"listboxId\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n >\n @if (displayValue()) {\n <span class=\"mc-combobox__value\">{{ displayValue() }}</span>\n } @else {\n <span class=\"mc-combobox__placeholder\">{{ placeholder() }}</span>\n }\n </button>\n\n <!-- Counter (compact + multiple) -->\n @if (multiple() && compact() && selectedCount() > 0) {\n <span [id]=\"comboboxId + '-counter'\" class=\"mc-combobox__counter\" aria-live=\"polite\">\n {{ selectedCount() }} {{ selectedSuffix() }}\n </span>\n }\n\n <!-- Clear button -->\n @if (showClear()) {\n <button\n [id]=\"comboboxId + '-clear'\"\n type=\"button\"\n class=\"mc-combobox__clear\"\n [attr.aria-label]=\"clearAriaLabel()\"\n (click)=\"onClear($event)\"\n >\n <CrossCircleFilled24 />\n </button>\n }\n\n <!-- Trigger loader -->\n @if (loading()) {\n <moz-loader\n [id]=\"comboboxId + '-trigger-loader'\"\n size=\"s\"\n [appearance]=\"'accent'\"\n class=\"mc-combobox__loader\"\n />\n }\n\n <!-- Chevron -->\n <button\n [id]=\"comboboxId + '-chevron'\"\n type=\"button\"\n class=\"mc-combobox__icon\"\n tabindex=\"-1\"\n aria-hidden=\"true\"\n (click)=\"toggle()\"\n >\n <ChevronDown24 />\n </button>\n </div>\n</div>\n\n<!-- ====================================================================== -->\n<!-- OVERLAY / DROPDOWN -->\n<!-- ====================================================================== -->\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayWidth]=\"triggerWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayHasBackdrop]=\"true\"\n cdkConnectedOverlayBackdropClass=\"mc-combobox-backdrop\"\n (backdropClick)=\"onOverlayOutsideClick()\"\n (attach)=\"onOverlayAttached()\"\n>\n <div\n [id]=\"comboboxId + '-panel'\"\n class=\"mc-option-listbox mc-listbox__content mc-combobox__listbox\"\n (keydown)=\"onPanelKeydown($event)\"\n >\n <!-- Search -->\n @if (searchable()) {\n <div [id]=\"comboboxId + '-search'\" class=\"mc-option-listbox__search\">\n <Search24 icon />\n <input\n #searchInput\n [id]=\"comboboxId + '-search-input'\"\n moz-text-input\n type=\"text\"\n [placeholder]=\"searchPlaceholder()\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n [attr.aria-controls]=\"listboxId\"\n [value]=\"searchQuery()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"onSearchKeydown($event)\"\n [size]=\"'s'\"\n />\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Actions (multiple only) -->\n @if (showActions() && multiple()) {\n <div [id]=\"comboboxId + '-actions'\" class=\"mc-option-listbox__actions\">\n <button\n [id]=\"comboboxId + '-select-all'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n [appearance]=\"'accent'\"\n (click)=\"selectAll()\"\n >\n {{ selectAllText() }}\n </button>\n <button\n [id]=\"comboboxId + '-clear-selection'\"\n moz-button\n type=\"button\"\n [size]=\"'s'\"\n [ghost]=\"true\"\n (click)=\"clearSelection()\"\n >\n {{ clearText() }}\n </button>\n </div>\n <hr class=\"mc-option-listbox__separator\" />\n }\n\n <!-- Listbox with virtual scroll -->\n <div\n #listbox\n role=\"listbox\"\n [id]=\"listboxId\"\n class=\"mc-option-listbox__list mc-combobox__virtual-host\"\n [attr.aria-multiselectable]=\"multiple() || null\"\n [attr.aria-label]=\"ariaLabel() ?? 'Options'\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? comboboxId + '-opt-' + focusedIndex() : null\n \"\n tabindex=\"-1\"\n >\n @if (loading()) {\n <div [id]=\"comboboxId + '-loading'\" class=\"mc-combobox__loading\" role=\"status\">\n <moz-loader size=\"s\" [appearance]=\"'accent'\" [text]=\"loadingText()\" />\n </div>\n } @else if (filteredItems().length === 0 && showNoResultText() && searchQuery().length > 0) {\n <div\n [id]=\"comboboxId + '-empty'\"\n class=\"mc-option-listbox__empty\"\n role=\"presentation\"\n aria-live=\"polite\"\n >\n {{ noResultsText() }}\n </div>\n } @else {\n <cdk-virtual-scroll-viewport\n #viewport\n [id]=\"comboboxId + '-viewport'\"\n [itemSize]=\"itemSizePx\"\n [style.height.px]=\"viewportHeight()\"\n class=\"mc-combobox__viewport\"\n >\n <ng-container\n *cdkVirtualFor=\"let item of filteredItems(); let i = index; trackBy: trackByFlatItem\"\n >\n <!-- Section header -->\n @if (isFlatSection(item)) {\n <div\n [id]=\"comboboxId + '-section-' + i\"\n class=\"mc-option-listbox__item mc-option-listbox__item--section\"\n [class.mc-option-listbox__item--selectable]=\"\n item.checkable && multiple() && !item.disabled\n \"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"\n item.checkable &&\n multiple() &&\n (isSectionFullySelected(item.title) || isSectionPartiallySelected(item.title))\n \"\n role=\"presentation\"\n (click)=\"\n item.checkable && multiple() && !item.disabled ? toggleSection(item.title) : null\n \"\n >\n <div class=\"mc-option-listbox__label\">\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__section-title\">{{ item.title }}</span>\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n @if (item.checkable && multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-section-cb-' + i\"\n [ngModel]=\"isSectionFullySelected(item.title)\"\n [indeterminate]=\"isSectionPartiallySelected(item.title)\"\n [disabled]=\"!!item.disabled\"\n />\n }\n </div>\n </div>\n }\n\n <!-- Option -->\n @if (isFlatOption(item)) {\n <div\n role=\"option\"\n [id]=\"comboboxId + '-opt-' + i\"\n [attr.aria-selected]=\"isOptionSelected($any(item.value))\"\n [attr.aria-disabled]=\"item.disabled || null\"\n class=\"mc-option-listbox__item\"\n [class.mc-option-listbox__item--selectable]=\"!item.disabled\"\n [class.mc-option-listbox__item--disabled]=\"item.disabled\"\n [class.mc-option-listbox__item--selected]=\"isOptionSelected($any(item.value))\"\n [class.mc-option-listbox__item--active]=\"focusedIndex() === i\"\n (click)=\"!item.disabled && selectOption($any(item.value))\"\n (mouseenter)=\"focusedIndex.set(i)\"\n >\n <div class=\"mc-option-listbox__label\">\n @if (item.icon) {\n <div class=\"mc-option-listbox__prepend\">\n <span class=\"mc-option-listbox__icon\">{{ item.icon }}</span>\n </div>\n }\n <div class=\"mc-option-listbox__content\">\n <span class=\"mc-option-listbox__text\">{{ item.label }}</span>\n @if (item.content) {\n <span class=\"mc-option-listbox__additional\">{{ item.content }}</span>\n }\n </div>\n <div class=\"mc-option-listbox__spacer\"></div>\n\n <!-- Selection indicator -->\n @if (multiple()) {\n <moz-checkbox\n class=\"mc-option-listbox__checkbox\"\n [id]=\"comboboxId + '-cb-' + i\"\n [ngModel]=\"isOptionSelected($any(item.value))\"\n [disabled]=\"!!item.disabled\"\n />\n } @else {\n <CheckCircle24 class=\"mc-option-listbox__selection-icon\" />\n }\n </div>\n </div>\n }\n </ng-container>\n </cdk-virtual-scroll-viewport>\n }\n </div>\n </div>\n</ng-template>\n", styles: [".mc-combobox{position:relative;width:18.75rem}.mc-combobox__input{transition:box-shadow .2s ease;background-color:var(--forms-color-background-default, #ffffff);border:var(--border-width-s, .0625rem) solid var(--forms-color-border-default, #666666);border-radius:var(--forms-border-radius, .25rem);transition:all ease .2s;color:var(--forms-color-text-default, #000000);display:block;width:100%;display:flex;align-items:center;gap:.5rem;box-sizing:border-box}.mc-combobox__input:focus-within{box-shadow:0 0 0 .125rem var(--focus-color-mid, var(--focus-color-outline-mid, #ffffff)),0 0 0 .25rem var(--focus-color-outer, var(--focus-color-outline-outer, #000000));outline:.125rem solid transparent;outline-offset:.125rem}.mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-hover, #4d4d4d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-hover, #4d4d4d)}.mc-combobox__input:has(.mc-combobox__control:disabled){background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox__input .mc-combobox__control{text-align:left;font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);color:var(--forms-color-text-default, #000000);background-color:transparent;border:none;padding-left:.75rem;padding-right:0;flex-grow:1;height:3rem;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-combobox__input .mc-combobox__control:focus-within{outline:none}.mc-combobox__icon{border:none;display:flex;align-items:center;cursor:pointer;padding-right:.75rem;background:none;color:var(--forms-color-icon-interactive, #000000);fill:currentcolor}.mc-combobox__clear{padding:0;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--forms-color-icon-clear, #666666);fill:currentcolor}.mc-combobox__counter{height:1.5rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0 .5rem;border-radius:var(--border-radius-l, 1rem);background-color:var(--forms-color-selection-counter-background, #464e63);font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);line-height:var(--line-height-s, 1.3);color:var(--forms-color-selection-counter-text, #ffffff)}.mc-combobox__listbox{position:absolute;left:0;top:calc(100% + .25rem);visibility:hidden;opacity:0;box-shadow:var(--shadow-bottom-s-x, 0px) var(--shadow-bottom-s-y, 5px) var(--shadow-bottom-s-blur, 10px) var(--shadow-bottom-s-spread, -2px) rgba(0,0,0,var(--shadow-bottom-s-opacity, 20%));border:var(--border-width-s, .0625rem) solid var(--color-border-primary, #cccccc);border-radius:var(--border-radius-m, .5rem);width:100%;z-index:10;background-color:var(--color-background-primary, #ffffff);pointer-events:all}.mc-combobox--open .mc-combobox__listbox{visibility:visible;opacity:1}.mc-combobox--s .mc-combobox__control{height:2rem;font-size:var(--font-size-100, .875rem);padding-left:.5rem}.mc-combobox--s .mc-combobox__icon{padding-right:.5rem}.mc-combobox--s .mc-combobox__clear{width:1.25rem;height:1.25rem}.mc-combobox--invalid .mc-combobox__input{border-color:var(--forms-color-border-invalid, #ea302d);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid, #ea302d)}.mc-combobox--invalid .mc-combobox__input:hover:not(:focus-within){border-color:var(--forms-color-border-invalid-hover, #c61112);box-shadow:0 0 0 var(--border-width-s, .0625rem) var(--forms-color-border-invalid-hover, #c61112)}.mc-combobox--disabled .mc-combobox__input{background-color:var(--forms-color-background-disabled, #d9d9d9);cursor:not-allowed;border-color:transparent;box-shadow:none;color:var(--forms-color-text-disabled, #737373);pointer-events:none}.mc-combobox--disabled .mc-combobox__control{color:var(--forms-color-text-disabled, #737373)}.mc-combobox--disabled .mc-combobox__icon{color:var(--forms-color-icon-disabled, #737373)}.mc-combobox--readonly .mc-combobox__input{border-color:var(--forms-color-border-read-only, #cccccc);pointer-events:none}.mc-option-listbox__list{overflow:auto;display:flex;flex-direction:column;gap:.125rem;margin:0;padding:.5rem;max-height:18.75rem}.mc-option-listbox__item{display:block;border-radius:var(--border-radius-s, .25rem)}.mc-option-listbox__item--disabled{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__label{pointer-events:none;color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__additional{color:var(--option-listbox-color-text-disabled, #b3b3b3)}.mc-option-listbox__item--disabled .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-disabled, #d9d9d9)}.mc-option-listbox__item--readonly .mc-option-listbox__label{pointer-events:none}.mc-option-listbox__item--selected:not(.mc-option-listbox__item--section){background-color:var(--option-listbox-color-background-checked, #ebf5de)}.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{opacity:1;color:var(--option-listbox-color-selection-indicator-default, #117f03);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:none;background-color:var(--forms-color-background-checked, #117f03);color:var(--forms-color-icon-inverse, #ffffff);fill:currentcolor}.mc-option-listbox__item--selected .mc-option-listbox__checkbox svg{display:block}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected{background-color:var(--option-listbox-color-background-checked-read-only, #eff1f6)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__selection-icon{color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--readonly.mc-option-listbox__item--selected .mc-option-listbox__checkbox{border:2px solid var(--forms-color-border-read-only, #cccccc);background-color:var(--forms-color-background-default, #ffffff);color:var(--option-listbox-color-selection-indicator-read-only, #000000)}.mc-option-listbox__item--selectable{cursor:pointer}.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled):hover,.mc-option-listbox__item--selectable:not(.mc-option-listbox__item--disabled).mc-option-listbox__item--active{background-color:var(--option-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-option-listbox__content{display:flex;flex-direction:column;gap:.125rem}.mc-option-listbox__additional{font-weight:var(--font-weight-regular, 400);font-size:var(--font-size-50, .75rem);color:var(--option-listbox-color-text-information, #666666)}.mc-option-listbox__label{display:flex;align-items:center;gap:.5rem;height:3rem;padding:.5rem;border-radius:var(--border-radius-s, .25rem);line-height:var(--line-height-s, 1.3);box-sizing:border-box}.mc-option-listbox__checkbox{display:flex;align-items:center;justify-content:center;height:1.25rem;width:1.25rem;border:.125rem solid var(--forms-color-border-default, #666666);border-radius:.25rem;box-sizing:border-box}.mc-option-listbox__checkbox svg{display:none}.mc-option-listbox__spacer{flex-grow:1}.mc-option-listbox__selection-icon{opacity:0}.mc-option-listbox__section-title{font-size:var(--font-size-100, .875rem);font-weight:var(--font-weight-semi-bold, 600);margin:0;color:var(--option-listbox-color-text-section-title, #666666)}.mc-option-listbox__search{margin:.5rem;width:unset}.mc-option-listbox__separator{display:block;height:1px;border:0;border-top:1px solid var(--color-border-primary, #cccccc);margin:0;padding:0}.mc-option-listbox__actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem}.mc-combobox__virtual-host{overflow:hidden;max-height:none;padding:0}.mc-combobox__viewport,.mc-combobox__viewport .cdk-virtual-scroll-content-wrapper{width:100%}.mc-combobox__loader{display:flex;align-items:center;padding-inline:4px}.mc-combobox__loading,.mc-option-listbox__empty{display:flex;align-items:center;justify-content:center;padding:24px 16px}\n"] }]
|
|
17083
17325
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], multiSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSearch", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], canSelectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "canSelectAll", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledBy", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], noResultsText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noResultsText", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], clearText: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearText", required: false }] }], selectedSuffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSuffix", required: false }] }], clearAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearAriaLabel", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], showNoResultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNoResultText", required: false }] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }], searched: [{ type: i0.Output, args: ["searched"] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], viewportEl: [{ type: i0.ViewChild, args: ['viewport', { isSignal: true }] }] } });
|
|
17084
17326
|
|
|
17085
17327
|
/**
|
|
@@ -17958,5 +18200,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.13", ngImpo
|
|
|
17958
18200
|
* Generated bundle index. Do not edit.
|
|
17959
18201
|
*/
|
|
17960
18202
|
|
|
17961
|
-
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, CellSelectionEngine, CellValidationEngine, ColumnReorderEngine, ColumnResizeEngine, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_FORMULA_FUNCTIONS, DEFAULT_GRID_OPTIONS, DEFAULT_MODAL_CONFIG, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, ExpandableRowEngine, ExportEngine, FilterEngine, FormulaEngine, FormulaValues, GridEngine, GridGroupDrawerComponent, GridSettingsDrawerComponent, GridStateManager, GroupEngine, HorizontalVirtualScrollEngine, InfiniteScrollEngine, InlineEditEngine, KeyboardEngine, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozComboboxComponent, MozComboboxHarness, MozComboboxOptionHarness, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozGridBodyComponent, MozGridCellComponent, MozGridColumnDef, MozGridColumnVisibilityPanelComponent, MozGridComponent, MozGridDetailRowComponent, MozGridEmptyDef, MozGridFooterComponent, MozGridGroupRowComponent, MozGridHeaderCellComponent, MozGridHeaderComponent, MozGridHeaderMenuComponent, MozGridLoadingIndicatorComponent, MozGridRowComponent, MozGridToolbarDef, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, MozTreeComponent, MozTreeNodeComponent, MozTreeNodeTemplateDirective, POPOVER_CONFIG, POPOVER_DATA, PaginationEngine, PopoverContainerComponent, PopoverRef, PopoverService, RowSelectionEngine, SortEngine, StatePersistenceEngine, TOASTER_CONFIG, TreeEngine, TreeKeyboardService, TreeSelectionService, TreeStateService, addressToA1, firstError, isSection, toBoolean, toNumber, toStringValue, trackByField, trackDisplayRow };
|
|
18203
|
+
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, CellSelectionEngine, CellValidationEngine, ColumnReorderEngine, ColumnResizeEngine, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_FORMULA_FUNCTIONS, DEFAULT_GRID_OPTIONS, DEFAULT_MODAL_CONFIG, DEFAULT_OPERATORS, DEFAULT_OPERATOR_PER_TYPE, DEFAULT_TOASTER_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, ExpandableRowEngine, ExportEngine, FilterEngine, FormulaEngine, FormulaValues, GridEngine, GridGroupDrawerComponent, GridSettingsDrawerComponent, GridStateManager, GroupEngine, HorizontalVirtualScrollEngine, InfiniteScrollEngine, InlineEditEngine, KeyboardEngine, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozComboboxComponent, MozComboboxHarness, MozComboboxOptionHarness, MozCustomFilterHostDirective, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, MozGridBodyComponent, MozGridCellComponent, MozGridColumnDef, MozGridColumnVisibilityPanelComponent, MozGridComponent, MozGridCustomFilter, MozGridDetailRowComponent, MozGridEmptyDef, MozGridFooterComponent, MozGridGroupRowComponent, MozGridHeaderCellComponent, MozGridHeaderComponent, MozGridHeaderMenuComponent, MozGridLoadingIndicatorComponent, MozGridRowComponent, MozGridToolbarDef, MozIconButtonComponent, MozKpiComponent, MozLinearProgressBarBufferComponent, MozLinearProgressBarPercentageComponent, MozLinkComponent, MozLoaderComponent, MozLoadingOverlayComponent, MozModalComponent, MozModalFooterDirective, MozModalRef, MozModalService, MozNavigationIndicatorComponent, MozNumberBadgeComponent, MozOverlayComponent, MozPageHeaderComponent, MozPaginationComponent, MozPasswordInputDirective, MozPhoneNumberComponent, MozPincodeInputComponent, MozPopoverComponent, MozPopoverFooterDirective, MozPopoverTriggerDirective, MozQuantitySelectorComponent, MozRadioComponent, MozRadioGroupComponent, MozSegmentedControlComponent, MozSelectComponent, MozSidebarComponent, MozStarRatingComponent, MozStatusBadgeComponent, MozStatusDotComponent, MozStatusMessageComponent, MozStatusNotificationComponent, MozStepperBottomBarComponent, MozStepperCompactComponent, MozStepperInlineComponent, MozStepperStackedComponent, MozTabComponent, MozTabsComponent, MozTagComponent, MozTextInput, MozTextarea, MozTileComponent, MozTileExpandableComponent, MozTileSelectableComponent, MozToasterComponent, MozToasterRef, MozToasterService, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, MozTreeComponent, MozTreeNodeComponent, MozTreeNodeTemplateDirective, OPERATOR_LABELS, POPOVER_CONFIG, POPOVER_DATA, PaginationEngine, PopoverContainerComponent, PopoverRef, PopoverService, RANGE_OPERATORS, RowSelectionEngine, SortEngine, StatePersistenceEngine, TOASTER_CONFIG, TreeEngine, TreeKeyboardService, TreeSelectionService, TreeStateService, VALUELESS_OPERATORS, addressToA1, firstError, generateConditionId, isConditionComplete, isSection, toBoolean, toNumber, toStringValue, trackByField, trackDisplayRow };
|
|
17962
18204
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|