@mozaic-ds/angular 2.0.1 → 2.0.3
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.
|
@@ -660,7 +660,7 @@ const DEFAULT_MODAL_CONFIG = {
|
|
|
660
660
|
closeOnEscape: true,
|
|
661
661
|
};
|
|
662
662
|
|
|
663
|
-
class
|
|
663
|
+
class MozModalRef {
|
|
664
664
|
overlayRef;
|
|
665
665
|
afterClosed$ = new Subject();
|
|
666
666
|
afterOpened$ = new Subject();
|
|
@@ -693,7 +693,7 @@ class ModalRef {
|
|
|
693
693
|
}
|
|
694
694
|
|
|
695
695
|
class ModalContainerComponent {
|
|
696
|
-
modalRef = inject(
|
|
696
|
+
modalRef = inject(MozModalRef);
|
|
697
697
|
config = inject(MODAL_CONFIG);
|
|
698
698
|
portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
|
|
699
699
|
footerTpl = null;
|
|
@@ -739,7 +739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
739
739
|
}] } });
|
|
740
740
|
|
|
741
741
|
// service/modal.service.ts
|
|
742
|
-
class
|
|
742
|
+
class MozModalService {
|
|
743
743
|
overlay = inject(Overlay);
|
|
744
744
|
injector = inject(Injector);
|
|
745
745
|
open(component, config) {
|
|
@@ -748,11 +748,11 @@ class ModalService {
|
|
|
748
748
|
...config,
|
|
749
749
|
};
|
|
750
750
|
const overlayRef = this.createOverlay();
|
|
751
|
-
const modalRef = new
|
|
751
|
+
const modalRef = new MozModalRef(overlayRef);
|
|
752
752
|
const injector = Injector.create({
|
|
753
753
|
parent: this.injector,
|
|
754
754
|
providers: [
|
|
755
|
-
{ provide:
|
|
755
|
+
{ provide: MozModalRef, useValue: modalRef },
|
|
756
756
|
{ provide: MODAL_CONFIG, useValue: mergedConfig },
|
|
757
757
|
{ provide: MODAL_DATA, useValue: mergedConfig.data },
|
|
758
758
|
],
|
|
@@ -772,10 +772,10 @@ class ModalService {
|
|
|
772
772
|
});
|
|
773
773
|
return this.overlay.create(config);
|
|
774
774
|
}
|
|
775
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type:
|
|
776
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type:
|
|
775
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
776
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozModalService, providedIn: 'root' });
|
|
777
777
|
}
|
|
778
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type:
|
|
778
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozModalService, decorators: [{
|
|
779
779
|
type: Injectable,
|
|
780
780
|
args: [{ providedIn: 'root' }]
|
|
781
781
|
}] });
|
|
@@ -2900,11 +2900,11 @@ class MozActionListboxComponent {
|
|
|
2900
2900
|
},
|
|
2901
2901
|
})), ...(ngDevMode ? [{ debugName: "itemsWithClasses" }] : []));
|
|
2902
2902
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozActionListboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2903
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MozActionListboxComponent, isStandalone: true, selector: "moz-action-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox,.listbox{display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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, 2)}.mc-listbox.is-visible,.is-visible.listbox{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox,.listbox{opacity:1}@media(width>=680px){.mc-listbox,.listbox{position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{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}@media(width>=680px){.mc-listbox__content,.listbox__content{width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem)}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled,.action-list__element--disabled{cursor:not-allowed}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__button,.action-list__button{background-color:transparent;border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["fill", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2903
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: MozActionListboxComponent, isStandalone: true, selector: "moz-action-listbox", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\" [attr.id]=\"itemWithClasses.item.id\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox,.listbox{display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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, 2)}.mc-listbox.is-visible,.is-visible.listbox{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox,.listbox{opacity:1}@media(width>=680px){.mc-listbox,.listbox{position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{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}@media(width>=680px){.mc-listbox__content,.listbox__content{width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem)}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled,.action-list__element--disabled{cursor:not-allowed}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__button,.action-list__button{background-color:transparent;border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: Cross24, selector: "Cross24", inputs: ["fill", "hostClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2904
2904
|
}
|
|
2905
2905
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozActionListboxComponent, decorators: [{
|
|
2906
2906
|
type: Component,
|
|
2907
|
-
args: [{ selector: 'moz-action-listbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, Cross24], template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox,.listbox{display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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, 2)}.mc-listbox.is-visible,.is-visible.listbox{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox,.listbox{opacity:1}@media(width>=680px){.mc-listbox,.listbox{position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{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}@media(width>=680px){.mc-listbox__content,.listbox__content{width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem)}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled,.action-list__element--disabled{cursor:not-allowed}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__button,.action-list__button{background-color:transparent;border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
2907
|
+
args: [{ selector: 'moz-action-listbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, Cross24], template: "<div class=\"listbox\">\n <div class=\"listbox__content\">\n <div class=\"listbox__header\">\n @if (title()) {\n <h3 class=\"listbox__title\">{{ title() }}</h3>\n }\n <button\n class=\"listbox__close button button--icon-button button--ghost\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <Cross24 icon />\n </button>\n </div>\n <div class=\"listbox__body\">\n <ul class=\"action-list\" role=\"menu\">\n @for (itemWithClasses of itemsWithClasses(); track $index) { @if\n (itemWithClasses.item.divider) {\n <li class=\"divider-horizontal action-list__divider\"></li>\n }\n <li [class]=\"itemWithClasses.classes\" role=\"menuitem\" [attr.id]=\"itemWithClasses.item.id\">\n <button\n type=\"button\"\n class=\"action-list__button\"\n [disabled]=\"itemWithClasses.item.disabled\"\n (click)=\"!itemWithClasses.item.disabled && itemClick.emit(itemWithClasses.item)\"\n >\n @if (itemWithClasses.item.icon) {\n <div class=\"action-list__icon\">\n <ng-container [ngComponentOutlet]=\"itemWithClasses.item.icon\"> </ng-container>\n </div>\n }\n <p class=\"action-list__text\">\n {{ itemWithClasses.item.label }}\n </p>\n </button>\n </li>\n }\n </ul>\n </div>\n </div>\n</div>\n", styles: [".mc-listbox,.listbox{display:flex;align-items:flex-end;justify-content:center;z-index:1;padding:.5rem;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, 2)}.mc-listbox.is-visible,.is-visible.listbox{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}.mc-listbox,.listbox{opacity:1}@media(width>=680px){.mc-listbox,.listbox{position:relative;display:block;padding:0;background-color:transparent}}.mc-listbox__content,.listbox__content{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}@media(width>=680px){.mc-listbox__content,.listbox__content{width:18.75rem}}.mc-listbox__header,.listbox__header{display:flex;align-items:center;justify-content:center;position:relative;height:4rem}@media(width>=680px){.mc-listbox__header,.listbox__header{display:none}}.mc-listbox__title,.listbox__title{line-height:var(--line-height-s, 1.3);font-weight:var(--font-weight-semi-bold, 600);font-size:var(--font-size-100, .875rem);color:var(--color-text-tertiary, #666666);text-align:center;margin:0}.mc-listbox__close,.listbox__close{position:absolute;right:1.25rem;width:1.5rem;height:1.5rem}.mc-listbox__body,.listbox__body{overflow:hidden}.mc-action-list,.action-list{padding:.5rem;margin:0}.mc-action-list__element,.action-list__element{height:2.5rem;cursor:pointer;border-radius:var(--border-radius-s, .25rem)}.mc-action-list__element:hover,.action-list__element:hover{background-color:var(--action-listbox-color-background-hover, rgba(0, 0, 0, .05))}.mc-action-list__element--danger .mc-action-list__text,.action-list__element--danger .mc-action-list__text,.mc-action-list__element--danger .action-list__text,.action-list__element--danger .action-list__text{color:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger .mc-action-list__icon,.action-list__element--danger .mc-action-list__icon,.mc-action-list__element--danger .action-list__icon,.action-list__element--danger .action-list__icon{fill:var(--action-listbox-color-text-danger, #c61112)}.mc-action-list__element--danger:hover,.action-list__element--danger:hover{background-color:var(--action-listbox-color-background-danger-hover, rgba(198, 17, 18, .1))}.mc-action-list__element--disabled,.action-list__element--disabled{cursor:not-allowed}.mc-action-list__element--disabled .mc-action-list__text,.action-list__element--disabled .mc-action-list__text,.mc-action-list__element--disabled .action-list__text,.action-list__element--disabled .action-list__text{color:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled .mc-action-list__icon,.action-list__element--disabled .mc-action-list__icon,.mc-action-list__element--disabled .action-list__icon,.action-list__element--disabled .action-list__icon{fill:var(--action-listbox-color-text-disabled, #b3b3b3)}.mc-action-list__element--disabled:hover,.action-list__element--disabled:hover{background-color:transparent}.mc-action-list__button,.action-list__button{background-color:transparent;border:none;display:flex;align-items:center;gap:.25rem;padding:0;padding:0 .25rem;cursor:pointer;width:100%;height:100%}.mc-action-list__text,.action-list__text{font-size:var(--font-size-150, 1rem);font-weight:var(--font-weight-regular, 400);line-height:var(--line-height-s, 1.3);color:var(--action-listbox-color-text-default, #000000);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}.mc-action-list__icon,.action-list__icon{width:1.25rem;height:1.25rem}.mc-action-list__divider,.action-list__divider{margin:.5rem 0}.mc-divider{position:relative}.mc-divider-horizontal,.divider-horizontal{background:var(--divider-color-primary, #cccccc);height:.0625rem}.mc-divider-horizontal--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-horizontal--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-horizontal--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-horizontal--m{height:.25rem}.mc-divider-horizontal--l{height:.5rem}.mc-divider-vertical{background:var(--divider-color-primary, #cccccc);width:.0625rem}.mc-divider-vertical--secondary{background:var(--divider-color-secondary, #999999)}.mc-divider-vertical--tertiary{background:var(--divider-color-tertiary, #333333)}.mc-divider-vertical--inverse{background:var(--divider-color-inverse, #ffffff)}.mc-divider-vertical--m{height:.25rem}.mc-divider-vertical--l{height:.5rem}.mc-button,.button{color:var(--button-color-filled-standard-font, #ffffff);background-color:var(--button-color-filled-standard-background, #464e63)}.mc-button:hover,.button:hover{background-color:var(--button-color-filled-standard-hover-background, #343b4c)}.mc-button:active,.button:active{background-color:var(--button-color-filled-standard-active-background, #242938)}.mc-button,.button{font-weight:var(--font-weight-semi-bold, 600);padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button .mc-button__label,.button .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button,.button{display:inline-flex;justify-content:center;vertical-align:middle;text-align:center;border:2px solid transparent;border-radius:var(--button-border-radius-s, .25rem);transition:all ease .2s;transition:box-shadow .2s ease;align-items:center;box-sizing:border-box;font-family:inherit;fill:currentcolor;gap:.25rem;cursor:pointer}.mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button__icon{flex-shrink:0;width:1.5rem;height:1.5rem}.mc-button:disabled,.button:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button:focus-visible,.button:focus-visible{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-button--s{padding:0 .625rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__label{font-size:var(--font-size-100, .875rem)}.mc-button--s .mc-button__icon{width:1.25rem;height:1.25rem}.mc-button--s .mc-button__icon:only-child{width:1.25rem;height:1.25rem}.mc-button--m{padding:0 .875rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__label{font-size:var(--font-size-150, 1rem)}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:only-child{width:1.5rem;height:1.5rem}.mc-button--l{padding:0 1.125rem;min-height:4rem;min-width:4rem}.mc-button--l .mc-button__label{font-size:var(--font-size-200, 1.125rem)}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:only-child{width:2rem;height:2rem}.mc-button--icon-only{padding:.25rem}.mc-button--outlined{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost,.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost:hover,.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost:active,.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost:disabled,.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--accent{color:var(--button-color-filled-accent-font, #ffffff);background-color:var(--button-color-filled-accent-background, #117f03)}.mc-button--accent:hover{background-color:var(--button-color-filled-accent-hover-background, #006902)}.mc-button--accent:active{background-color:var(--button-color-filled-accent-active-background, #035010)}.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--danger{color:var(--button-color-filled-danger-font, #ffffff);background-color:var(--button-color-filled-danger-background, #c61112)}.mc-button--danger:hover{background-color:var(--button-color-filled-danger-hover-background, #8c0003)}.mc-button--danger:active{background-color:var(--button-color-filled-danger-active-background, #530000)}.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--inverse{--focus-color-mid: var(--focus-color-outline-outer, #000000);--focus-color-outer: var(--focus-color-outline-mid, #ffffff);color:var(--button-color-filled-inverse-font, #242938);background-color:var(--button-color-filled-inverse-background, #ffffff)}.mc-button--inverse:hover{background-color:var(--button-color-filled-inverse-hover-background, #e6e6e6)}.mc-button--inverse:active{background-color:var(--button-color-filled-inverse-active-background, #cccccc)}.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--icon-button,.button--icon-button{border-radius:var(--border-radius-full, 100%);padding:0}.mc-button--loading{pointer-events:none}.mc-button--loading .mc-button__loader{position:absolute;color:currentcolor}.mc-button--loading .mc-button__label,.mc-button--loading .mc-button__icon{visibility:hidden}.mc-button--outlined.mc-button--standard{color:var(--button-color-outlined-standard-font, #242938);border-color:var(--button-color-outlined-standard-border, #8891aa);background-color:var(--button-color-outlined-standard-background, #ffffff)}.mc-button--outlined.mc-button--standard:hover{background-color:var(--button-color-outlined-standard-hover-background, #eff1f6)}.mc-button--outlined.mc-button--standard:active{background-color:var(--button-color-outlined-standard-active-background, #c9d0de)}.mc-button--outlined.mc-button--standard:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--accent{color:var(--button-color-outlined-accent-font, #117f03);border-color:var(--button-color-outlined-accent-border, #78be20);background-color:var(--button-color-outlined-accent-background, #ffffff)}.mc-button--outlined.mc-button--accent:hover{background-color:var(--button-color-outlined-accent-hover-background, #ebf5de)}.mc-button--outlined.mc-button--accent:active{background-color:var(--button-color-outlined-accent-active-background, #c5e39e)}.mc-button--outlined.mc-button--accent:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--danger{color:var(--button-color-outlined-danger-font, #c61112);border-color:var(--button-color-outlined-danger-border, #ef5f5c);background-color:var(--button-color-outlined-danger-background, #ffffff)}.mc-button--outlined.mc-button--danger:hover{background-color:var(--button-color-outlined-danger-hover-background, #fdeaea)}.mc-button--outlined.mc-button--danger:active{background-color:var(--button-color-outlined-danger-active-background, #f8bcbb)}.mc-button--outlined.mc-button--danger:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--outlined.mc-button--inverse{color:var(--button-color-outlined-inverse-font, #ffffff);border-color:var(--button-color-outlined-inverse-border, #ffffff);background-color:var(--button-color-outlined-inverse-background, rgba(255, 255, 255, .01))}.mc-button--outlined.mc-button--inverse:hover{background-color:var(--button-color-outlined-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--outlined.mc-button--inverse:active{background-color:var(--button-color-outlined-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--outlined.mc-button--inverse:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--standard,.mc-button--standard.button--ghost{color:var(--button-color-ghost-standard-font, #242938);background-color:var(--button-color-ghost-standard-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--standard:hover,.mc-button--standard.button--ghost:hover{background-color:var(--button-color-ghost-standard-hover-background, rgba(70, 78, 99, .1))}.mc-button--ghost.mc-button--standard:active,.mc-button--standard.button--ghost:active{background-color:var(--button-color-ghost-standard-active-background, rgba(70, 78, 99, .2))}.mc-button--ghost.mc-button--standard:disabled,.mc-button--standard.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--accent,.mc-button--accent.button--ghost{color:var(--button-color-ghost-accent-font, #117f03);background-color:var(--button-color-ghost-accent-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--accent:hover,.mc-button--accent.button--ghost:hover{background-color:var(--button-color-ghost-accent-hover-background, rgba(17, 127, 3, .1))}.mc-button--ghost.mc-button--accent:active,.mc-button--accent.button--ghost:active{background-color:var(--button-color-ghost-accent-active-background, rgba(17, 127, 3, .2))}.mc-button--ghost.mc-button--accent:disabled,.mc-button--accent.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--danger,.mc-button--danger.button--ghost{color:var(--button-color-ghost-danger-font, #c61112);background-color:var(--button-color-ghost-danger-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--danger:hover,.mc-button--danger.button--ghost:hover{background-color:var(--button-color-ghost-danger-hover-background, rgba(198, 17, 18, .1))}.mc-button--ghost.mc-button--danger:active,.mc-button--danger.button--ghost:active{background-color:var(--button-color-ghost-danger-active-background, rgba(198, 17, 18, .2))}.mc-button--ghost.mc-button--danger:disabled,.mc-button--danger.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}.mc-button--ghost.mc-button--inverse,.mc-button--inverse.button--ghost{color:var(--button-color-ghost-inverse-font, #ffffff);background-color:var(--button-color-ghost-inverse-background, rgba(255, 255, 255, .01))}.mc-button--ghost.mc-button--inverse:hover,.mc-button--inverse.button--ghost:hover{background-color:var(--button-color-ghost-inverse-hover-background, rgba(255, 255, 255, .1))}.mc-button--ghost.mc-button--inverse:active,.mc-button--inverse.button--ghost:active{background-color:var(--button-color-ghost-inverse-active-background, rgba(255, 255, 255, .2))}.mc-button--ghost.mc-button--inverse:disabled,.mc-button--inverse.button--ghost:disabled{background-color:var(--button-state-disabled-background, #d9d9d9);border-color:transparent;color:var(--button-state-disabled-color, #737373);cursor:not-allowed}\n"] }]
|
|
2908
2908
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
2909
2909
|
|
|
2910
2910
|
class ActionListboxRef {
|
|
@@ -3884,7 +3884,7 @@ const DEFAULT_DRAWER_CONFIG = {
|
|
|
3884
3884
|
back: false,
|
|
3885
3885
|
};
|
|
3886
3886
|
|
|
3887
|
-
class
|
|
3887
|
+
class MozDrawerRef {
|
|
3888
3888
|
overlayRef;
|
|
3889
3889
|
afterClosed$ = new Subject();
|
|
3890
3890
|
afterOpened$ = new Subject();
|
|
@@ -3924,7 +3924,7 @@ class DrawerRef {
|
|
|
3924
3924
|
}
|
|
3925
3925
|
|
|
3926
3926
|
class DrawerContainerComponent {
|
|
3927
|
-
drawerRef = inject(
|
|
3927
|
+
drawerRef = inject(MozDrawerRef);
|
|
3928
3928
|
config = inject(DRAWER_CONFIG);
|
|
3929
3929
|
portalOutlet = viewChild(CdkPortalOutlet, ...(ngDevMode ? [{ debugName: "portalOutlet" }] : []));
|
|
3930
3930
|
footerTpl = null;
|
|
@@ -3972,7 +3972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
3972
3972
|
args: ['keydown.escape']
|
|
3973
3973
|
}] } });
|
|
3974
3974
|
|
|
3975
|
-
class
|
|
3975
|
+
class MozDrawerService {
|
|
3976
3976
|
overlay = inject(Overlay);
|
|
3977
3977
|
injector = inject(Injector);
|
|
3978
3978
|
open(component, config) {
|
|
@@ -3981,11 +3981,11 @@ class DrawerService {
|
|
|
3981
3981
|
...config,
|
|
3982
3982
|
};
|
|
3983
3983
|
const overlayRef = this.createOverlay();
|
|
3984
|
-
const drawerRef = new
|
|
3984
|
+
const drawerRef = new MozDrawerRef(overlayRef);
|
|
3985
3985
|
const injector = Injector.create({
|
|
3986
3986
|
parent: this.injector,
|
|
3987
3987
|
providers: [
|
|
3988
|
-
{ provide:
|
|
3988
|
+
{ provide: MozDrawerRef, useValue: drawerRef },
|
|
3989
3989
|
{ provide: DRAWER_CONFIG, useValue: mergedConfig },
|
|
3990
3990
|
{ provide: DRAWER_DATA, useValue: mergedConfig.data ?? null },
|
|
3991
3991
|
],
|
|
@@ -4016,10 +4016,10 @@ class DrawerService {
|
|
|
4016
4016
|
});
|
|
4017
4017
|
return this.overlay.create(config);
|
|
4018
4018
|
}
|
|
4019
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type:
|
|
4020
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type:
|
|
4019
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
4020
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozDrawerService, providedIn: 'root' });
|
|
4021
4021
|
}
|
|
4022
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type:
|
|
4022
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: MozDrawerService, decorators: [{
|
|
4023
4023
|
type: Injectable,
|
|
4024
4024
|
args: [{ providedIn: 'root' }]
|
|
4025
4025
|
}] });
|
|
@@ -4512,5 +4512,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
|
|
|
4512
4512
|
* Generated bundle index. Do not edit.
|
|
4513
4513
|
*/
|
|
4514
4514
|
|
|
4515
|
-
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent,
|
|
4515
|
+
export { ACTION_LISTBOX_CONFIG, ActionListboxContainerComponent, ActionListboxRef, BuiltInMenuComponent, DEFAULT_ACTION_LISTBOX_CONFIG, DEFAULT_MODAL_CONFIG, DRAWER_CONFIG, DRAWER_DATA, DrawerContainerComponent, MODAL_CONFIG, MODAL_DATA, MozAccordionComponent, MozAccordionContentComponent, MozAccordionHeaderComponent, MozAccordionPanelComponent, MozActionBottomBarComponent, MozActionListboxComponent, MozActionListboxTriggerDirective, MozAvatarComponent, MozBreadcrumbComponent, MozButtonComponent, MozCalloutComponent, MozCarouselComponent, MozCheckListMenuComponent, MozCheckboxComponent, MozCheckboxGroupComponent, MozCircularProgressBarComponent, MozDatepickerComponent, MozDividerComponent, MozDrawerComponent, MozDrawerFooterDirective, MozDrawerRef, MozDrawerService, MozFieldComponent, MozFieldGroupComponent, MozFileUploaderComponent, MozFileUploaderItemComponent, MozFlagComponent, 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, MozToggleComponent, MozTooltipComponent, MozTooltipDirective, POPOVER_CONFIG, POPOVER_DATA, PopoverContainerComponent, PopoverRef, PopoverService };
|
|
4516
4516
|
//# sourceMappingURL=mozaic-ds-angular.mjs.map
|