@mozaic-ds/angular 0.26.1 → 0.27.0
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.
- package/adeo/components/dropdown/dropdown.component.d.ts +4 -1
- package/adeo/components/icon/icon.component.d.ts +3 -1
- package/adeo/components/taglist/components/taglist-layer-content/taglist-layer-content.component.d.ts +4 -1
- package/adeo/components/taglist/services/taglist.service.d.ts +11 -0
- package/adeo/components/taglist/taglist.component.d.ts +11 -6
- package/adeo/esm2020/components/action-bar/action-bar.component.mjs +1 -1
- package/adeo/esm2020/components/autocomplete/autocomplete.component.mjs +2 -3
- package/adeo/esm2020/components/built-it-menu/built-it-menu.component.mjs +1 -1
- package/adeo/esm2020/components/datatable/moz-datatable.component.mjs +1 -1
- package/adeo/esm2020/components/datatable-management/components/moz-datatable-management-content/moz-datatable-management-content.component.mjs +1 -1
- package/adeo/esm2020/components/datatable-management/moz-datatable-management.component.mjs +1 -1
- package/adeo/esm2020/components/dropdown/dropdown.component.mjs +10 -4
- package/adeo/esm2020/components/field/field.component.mjs +3 -3
- package/adeo/esm2020/components/header/header.component.mjs +1 -1
- package/adeo/esm2020/components/icon/icon.component.mjs +7 -2
- package/adeo/esm2020/components/kpi/kpi.component.mjs +1 -1
- package/adeo/esm2020/components/layer/layer.component.mjs +2 -2
- package/adeo/esm2020/components/link/link.component.mjs +1 -1
- package/adeo/esm2020/components/listbox/listbox.component.mjs +3 -3
- package/adeo/esm2020/components/modal/modal.component.mjs +2 -2
- package/adeo/esm2020/components/pagination/pagination.component.mjs +1 -1
- package/adeo/esm2020/components/quantity-selector/quantity-selector.component.mjs +1 -1
- package/adeo/esm2020/components/sidebar/moz-sidebar.component.mjs +1 -1
- package/adeo/esm2020/components/stepper/step.component.mjs +1 -1
- package/adeo/esm2020/components/taglist/components/taglist-layer-content/taglist-layer-content.component.mjs +12 -7
- package/adeo/esm2020/components/taglist/services/taglist.service.mjs +21 -0
- package/adeo/esm2020/components/taglist/taglist.component.mjs +33 -21
- package/adeo/esm2020/components/taglist/taglist.module.mjs +4 -2
- package/adeo/esm2020/components/tooltip/directive/tooltip.directive.mjs +5 -3
- package/adeo/fesm2015/mozaic-ds-angular.mjs +98 -51
- package/adeo/fesm2015/mozaic-ds-angular.mjs.map +1 -1
- package/adeo/fesm2020/mozaic-ds-angular.mjs +96 -51
- package/adeo/fesm2020/mozaic-ds-angular.mjs.map +1 -1
- package/adeo/package.json +1 -1
- package/bricoman/components/dropdown/dropdown.component.d.ts +4 -1
- package/bricoman/components/icon/icon.component.d.ts +3 -1
- package/bricoman/components/taglist/components/taglist-layer-content/taglist-layer-content.component.d.ts +4 -1
- package/bricoman/components/taglist/services/taglist.service.d.ts +11 -0
- package/bricoman/components/taglist/taglist.component.d.ts +11 -6
- package/bricoman/esm2020/components/action-bar/action-bar.component.mjs +1 -1
- package/bricoman/esm2020/components/autocomplete/autocomplete.component.mjs +2 -3
- package/bricoman/esm2020/components/built-it-menu/built-it-menu.component.mjs +1 -1
- package/bricoman/esm2020/components/datatable/moz-datatable.component.mjs +1 -1
- package/bricoman/esm2020/components/datatable-management/components/moz-datatable-management-content/moz-datatable-management-content.component.mjs +1 -1
- package/bricoman/esm2020/components/datatable-management/moz-datatable-management.component.mjs +1 -1
- package/bricoman/esm2020/components/dropdown/dropdown.component.mjs +10 -4
- package/bricoman/esm2020/components/field/field.component.mjs +3 -3
- package/bricoman/esm2020/components/header/header.component.mjs +1 -1
- package/bricoman/esm2020/components/icon/icon.component.mjs +7 -2
- package/bricoman/esm2020/components/kpi/kpi.component.mjs +1 -1
- package/bricoman/esm2020/components/layer/layer.component.mjs +2 -2
- package/bricoman/esm2020/components/link/link.component.mjs +1 -1
- package/bricoman/esm2020/components/listbox/listbox.component.mjs +3 -3
- package/bricoman/esm2020/components/modal/modal.component.mjs +2 -2
- package/bricoman/esm2020/components/pagination/pagination.component.mjs +1 -1
- package/bricoman/esm2020/components/quantity-selector/quantity-selector.component.mjs +1 -1
- package/bricoman/esm2020/components/sidebar/moz-sidebar.component.mjs +1 -1
- package/bricoman/esm2020/components/stepper/step.component.mjs +1 -1
- package/bricoman/esm2020/components/taglist/components/taglist-layer-content/taglist-layer-content.component.mjs +12 -7
- package/bricoman/esm2020/components/taglist/services/taglist.service.mjs +21 -0
- package/bricoman/esm2020/components/taglist/taglist.component.mjs +33 -21
- package/bricoman/esm2020/components/taglist/taglist.module.mjs +4 -2
- package/bricoman/esm2020/components/tooltip/directive/tooltip.directive.mjs +5 -3
- package/bricoman/fesm2015/mozaic-ds-angular.mjs +98 -51
- package/bricoman/fesm2015/mozaic-ds-angular.mjs.map +1 -1
- package/bricoman/fesm2020/mozaic-ds-angular.mjs +96 -51
- package/bricoman/fesm2020/mozaic-ds-angular.mjs.map +1 -1
- package/bricoman/package.json +1 -1
- package/components/dropdown/dropdown.component.d.ts +4 -1
- package/components/icon/icon.component.d.ts +3 -1
- package/components/taglist/components/taglist-layer-content/taglist-layer-content.component.d.ts +4 -1
- package/components/taglist/services/taglist.service.d.ts +11 -0
- package/components/taglist/taglist.component.d.ts +11 -6
- package/esm2020/components/action-bar/action-bar.component.mjs +1 -1
- package/esm2020/components/autocomplete/autocomplete.component.mjs +2 -3
- package/esm2020/components/built-it-menu/built-it-menu.component.mjs +1 -1
- package/esm2020/components/datatable/moz-datatable.component.mjs +1 -1
- package/esm2020/components/datatable-management/components/moz-datatable-management-content/moz-datatable-management-content.component.mjs +1 -1
- package/esm2020/components/datatable-management/moz-datatable-management.component.mjs +1 -1
- package/esm2020/components/dropdown/dropdown.component.mjs +10 -4
- package/esm2020/components/field/field.component.mjs +3 -3
- package/esm2020/components/header/header.component.mjs +1 -1
- package/esm2020/components/icon/icon.component.mjs +7 -2
- package/esm2020/components/kpi/kpi.component.mjs +1 -1
- package/esm2020/components/layer/layer.component.mjs +2 -2
- package/esm2020/components/link/link.component.mjs +1 -1
- package/esm2020/components/listbox/listbox.component.mjs +3 -3
- package/esm2020/components/modal/modal.component.mjs +2 -2
- package/esm2020/components/pagination/pagination.component.mjs +1 -1
- package/esm2020/components/quantity-selector/quantity-selector.component.mjs +1 -1
- package/esm2020/components/sidebar/moz-sidebar.component.mjs +1 -1
- package/esm2020/components/stepper/step.component.mjs +1 -1
- package/esm2020/components/taglist/components/taglist-layer-content/taglist-layer-content.component.mjs +12 -7
- package/esm2020/components/taglist/services/taglist.service.mjs +21 -0
- package/esm2020/components/taglist/taglist.component.mjs +33 -21
- package/esm2020/components/taglist/taglist.module.mjs +4 -2
- package/esm2020/components/tooltip/directive/tooltip.directive.mjs +5 -3
- package/fesm2015/mozaic-ds-angular.mjs +98 -51
- package/fesm2015/mozaic-ds-angular.mjs.map +1 -1
- package/fesm2020/mozaic-ds-angular.mjs +96 -51
- package/fesm2020/mozaic-ds-angular.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -50,7 +50,7 @@ export class ModalComponent {
|
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
52
|
ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalComponent, deps: [{ token: MODAL_CONFIG }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
-
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ModalComponent, selector: "moz-modal", inputs: { modalRef: "modalRef", childComponentType: "childComponentType" }, host: { properties: { "@modalAnimation": "true" } }, viewQueries: [{ propertyName: "contentViewRef", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modal_title\"\n class=\"mc-modal\"\n [style.zIndex]=\"modalContainerIndex\"\n>\n <div role=\"document\" class=\"mc-modal__dialog is-open\" [style.minHeight]=\"minHeight\">\n <header class=\"mc-modal__header mc-divider-bottom mc-divider-bottom--light\">\n <span class=\"mc-modal__icon\" *ngIf=\"icon\">\n <moz-icon iconName=\"{{ icon }}\"></moz-icon>\n </span>\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{{ title }}</h2>\n <button class=\"mc-modal__close\" type=\"button\" (click)=\"close()\" *ngIf=\"hasCross\">\n <span class=\"mc-modal__close-text\">Close</span>\n </button>\n </header>\n <main class=\"mc-modal__body\">\n <article class=\"mc-modal__content\">\n <ng-template #content></ng-template>\n </article>\n </main>\n </div>\n</div>\n<div\n tabindex=\"-1\"\n role=\"dialog\"\n (click)=\"closeOnOutsideCLick()\"\n class=\"mc-modal-overlay is-visible\"\n [style.zIndex]=\"layerIndex\"\n></div>\n", styles: [".mc-modal{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:1999999999;align-items:flex-end;display:flex;height:100vh;height:-webkit-fill-available;height:-moz-available;height:stretch;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:1rem 1.125rem;width:100vw}.mc-modal,.mc-modal *{box-sizing:border-box}@media screen and (min-width: 680px){.mc-modal{align-items:center;padding:0}}.mc-modal__dialog{background:#ffffff;display:flex;flex-direction:column;opacity:0;max-height:100%;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-modal__dialog{max-height:50%;max-width:38.5rem}}@media (min-width: 1024px) and (max-width: 1919px){.mc-modal__dialog{max-height:66.6666666667%}}@media screen and (min-width: 1024px){.mc-modal__dialog{max-width:48rem}}@media screen and (min-width: 1280px){.mc-modal__dialog{max-width:50rem}}@media screen and (min-width: 1920px){.mc-modal__dialog{max-width:56.5rem}}.mc-modal__dialog.is-open{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__form{display:contents}.mc-modal__header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem;min-height:3.75rem;padding:.75rem .75rem .75rem 1rem;position:relative}.mc-modal__header:after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}@media screen and (min-width: 680px){.mc-modal__header{padding-top:1rem;padding-right:1rem;padding-left:1.5rem}}.mc-modal__icon{fill:#666;height:1.5rem;width:1.5rem}.mc-modal__title{font-size:.875rem;line-height:1.2857142857;font-weight:400;color:#666;margin-bottom:0;margin-top:0}.mc-modal__close{box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;position:relative;align-self:flex-start;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23808080'%3E%3Cpath d='M17.41 16l8.8-8.79a1 1 0 10-1.42-1.42L16 14.59l-8.79-8.8a1 1 0 00-1.42 1.42l8.8 8.79-8.8 8.79a1 1 0 000 1.42 1 1 0 001.42 0l8.79-8.8 8.79 8.8a1 1 0 001.42 0 1 1 0 000-1.42z'/%3E%3C/svg%3E\") no-repeat;background-size:contain;cursor:pointer;height:2rem;flex-shrink:0;margin:0 0 0 auto;width:2rem}.mc-modal__close:after{border-radius:2px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;transition:box-shadow .2s ease}.mc-modal__close-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:visible;white-space:nowrap}.mc-modal__close:focus:after{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-modal__body{font-size:1rem;line-height:1.375;flex:1 1;color:#191919;display:flex;overflow:hidden;padding-left:.5rem;padding-right:.5rem}@media screen and (min-width: 680px){.mc-modal__body{padding-left:.75rem;padding-right:1rem}}.mc-modal__content{flex-grow:1;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;padding-left:.5rem;padding-right:.5rem}@media screen and (min-width: 680px){.mc-modal__content{padding-left:.75rem;padding-right:.75rem}}.mc-modal__content::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-modal__content::-webkit-scrollbar-thumb{background:#666666}.mc-modal__heading{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000;margin-bottom:0;margin-top:0}.mc-modal__inner{padding-top:1.5rem;padding-bottom:3rem}.mc-modal__footer{align-items:stretch;display:flex;flex-direction:column;justify-content:center;padding:1rem}@media screen and (min-width: 680px){.mc-modal__footer{align-items:center;flex-direction:row;padding:1.5rem}}.mc-modal__footer>:first-child:not(:only-child){margin-bottom:.75rem}@media screen and (min-width: 680px){.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-modal-open{overflow:hidden}.mc-modal-overlay{background-color:#191919b3;filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:1999999998}.mc-modal-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "moz-icon", inputs: ["iconName"] }], animations: [modalAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
53
|
+
ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ModalComponent, selector: "moz-modal", inputs: { modalRef: "modalRef", childComponentType: "childComponentType" }, host: { properties: { "@modalAnimation": "true" } }, viewQueries: [{ propertyName: "contentViewRef", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef, static: true }], ngImport: i0, template: "<div\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modal_title\"\n class=\"mc-modal\"\n [style.zIndex]=\"modalContainerIndex\"\n>\n <div role=\"document\" class=\"mc-modal__dialog is-open\" [style.minHeight]=\"minHeight\">\n <header class=\"mc-modal__header mc-divider-bottom mc-divider-bottom--light\">\n <span class=\"mc-modal__icon\" *ngIf=\"icon\">\n <moz-icon iconName=\"{{ icon }}\"></moz-icon>\n </span>\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{{ title }}</h2>\n <button class=\"mc-modal__close\" type=\"button\" (click)=\"close()\" *ngIf=\"hasCross\">\n <span class=\"mc-modal__close-text\">Close</span>\n </button>\n </header>\n <main class=\"mc-modal__body\">\n <article class=\"mc-modal__content\">\n <ng-template #content></ng-template>\n </article>\n </main>\n </div>\n</div>\n<div\n tabindex=\"-1\"\n role=\"dialog\"\n (click)=\"closeOnOutsideCLick()\"\n class=\"mc-modal-overlay is-visible\"\n [style.zIndex]=\"layerIndex\"\n></div>\n", styles: [".mc-modal{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:1999999999;align-items:flex-end;display:flex;height:100vh;height:-webkit-fill-available;height:-moz-available;height:stretch;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:1rem 1.125rem;width:100vw}.mc-modal,.mc-modal *{box-sizing:border-box}@media screen and (min-width: 680px){.mc-modal{align-items:center;padding:0}}.mc-modal__dialog{background:#ffffff;display:flex;flex-direction:column;opacity:0;max-height:100%;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-modal__dialog{max-height:50%;max-width:38.5rem}}@media (min-width: 1024px) and (max-width: 1919px){.mc-modal__dialog{max-height:66.6666666667%}}@media screen and (min-width: 1024px){.mc-modal__dialog{max-width:48rem}}@media screen and (min-width: 1280px){.mc-modal__dialog{max-width:50rem}}@media screen and (min-width: 1920px){.mc-modal__dialog{max-width:56.5rem}}.mc-modal__dialog.is-open{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__form{display:contents}.mc-modal__header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem;min-height:3.75rem;padding:.75rem .75rem .75rem 1rem;position:relative}.mc-modal__header:after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}@media screen and (min-width: 680px){.mc-modal__header{padding-top:1rem;padding-right:1rem;padding-left:1.5rem}}.mc-modal__icon{fill:#666;height:1.5rem;width:1.5rem}.mc-modal__title{font-size:.875rem;line-height:1.2857142857;font-weight:400;color:#666;margin-bottom:0;margin-top:0}.mc-modal__close{box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;position:relative;align-self:flex-start;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23808080'%3E%3Cpath d='M17.41 16l8.8-8.79a1 1 0 10-1.42-1.42L16 14.59l-8.79-8.8a1 1 0 00-1.42 1.42l8.8 8.79-8.8 8.79a1 1 0 000 1.42 1 1 0 001.42 0l8.79-8.8 8.79 8.8a1 1 0 001.42 0 1 1 0 000-1.42z'/%3E%3C/svg%3E\") no-repeat;background-size:contain;cursor:pointer;height:2rem;flex-shrink:0;margin:0 0 0 auto;width:2rem}.mc-modal__close:after{border-radius:2px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;transition:box-shadow .2s ease}.mc-modal__close-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:visible;white-space:nowrap}.mc-modal__close:focus:after{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-modal__body{font-size:1rem;line-height:1.375;flex:1 1;color:#191919;display:flex;overflow:hidden;padding-left:.5rem;padding-right:.5rem}@media screen and (min-width: 680px){.mc-modal__body{padding-left:.75rem;padding-right:1rem}}.mc-modal__content{flex-grow:1;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;padding-left:.5rem;padding-right:.5rem}@media screen and (min-width: 680px){.mc-modal__content{padding-left:.75rem;padding-right:.75rem}}.mc-modal__content::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-modal__content::-webkit-scrollbar-thumb{background:#666666}.mc-modal__heading{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000;margin-bottom:0;margin-top:0}.mc-modal__inner{padding-top:1.5rem;padding-bottom:3rem}.mc-modal__footer{align-items:stretch;display:flex;flex-direction:column;justify-content:center;padding:1rem}@media screen and (min-width: 680px){.mc-modal__footer{align-items:center;flex-direction:row;padding:1.5rem}}.mc-modal__footer>:first-child:not(:only-child){margin-bottom:.75rem}@media screen and (min-width: 680px){.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-modal-open{overflow:hidden}.mc-modal-overlay{background-color:#191919b3;filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:1999999998}.mc-modal-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }], animations: [modalAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
54
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalComponent, decorators: [{
|
|
55
55
|
type: Component,
|
|
56
56
|
args: [{ selector: 'moz-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, animations: [modalAnimation], host: { '[@modalAnimation]': 'true' }, template: "<div\n tabindex=\"-1\"\n role=\"dialog\"\n aria-labelledby=\"modal_title\"\n class=\"mc-modal\"\n [style.zIndex]=\"modalContainerIndex\"\n>\n <div role=\"document\" class=\"mc-modal__dialog is-open\" [style.minHeight]=\"minHeight\">\n <header class=\"mc-modal__header mc-divider-bottom mc-divider-bottom--light\">\n <span class=\"mc-modal__icon\" *ngIf=\"icon\">\n <moz-icon iconName=\"{{ icon }}\"></moz-icon>\n </span>\n <h2 class=\"mc-modal__title\" id=\"modalTitle\">{{ title }}</h2>\n <button class=\"mc-modal__close\" type=\"button\" (click)=\"close()\" *ngIf=\"hasCross\">\n <span class=\"mc-modal__close-text\">Close</span>\n </button>\n </header>\n <main class=\"mc-modal__body\">\n <article class=\"mc-modal__content\">\n <ng-template #content></ng-template>\n </article>\n </main>\n </div>\n</div>\n<div\n tabindex=\"-1\"\n role=\"dialog\"\n (click)=\"closeOnOutsideCLick()\"\n class=\"mc-modal-overlay is-visible\"\n [style.zIndex]=\"layerIndex\"\n></div>\n", styles: [".mc-modal{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;inset:0;outline:0;pointer-events:none;position:fixed;z-index:1999999999;align-items:flex-end;display:flex;height:100vh;height:-webkit-fill-available;height:-moz-available;height:stretch;justify-content:center;overflow-x:hidden;overflow-y:auto;padding:1rem 1.125rem;width:100vw}.mc-modal,.mc-modal *{box-sizing:border-box}@media screen and (min-width: 680px){.mc-modal{align-items:center;padding:0}}.mc-modal__dialog{background:#ffffff;display:flex;flex-direction:column;opacity:0;max-height:100%;position:relative;transform:translateY(-25%);transition:visibility 0s linear .4s,transform .4s ease,opacity .4s ease;visibility:hidden;width:100%}@media screen and (min-width: 680px){.mc-modal__dialog{max-height:50%;max-width:38.5rem}}@media (min-width: 1024px) and (max-width: 1919px){.mc-modal__dialog{max-height:66.6666666667%}}@media screen and (min-width: 1024px){.mc-modal__dialog{max-width:48rem}}@media screen and (min-width: 1280px){.mc-modal__dialog{max-width:50rem}}@media screen and (min-width: 1920px){.mc-modal__dialog{max-width:56.5rem}}.mc-modal__dialog.is-open{opacity:1;pointer-events:all;transform:translateY(0);transition:visibility 0s linear 0s,transform .4s ease,opacity .4s ease;visibility:visible}.mc-modal__form{display:contents}.mc-modal__header{align-items:center;display:flex;gap:.75rem;margin-bottom:1rem;min-height:3.75rem;padding:.75rem .75rem .75rem 1rem;position:relative}.mc-modal__header:after{background:#b3b3b3;content:\"\";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}@media screen and (min-width: 680px){.mc-modal__header{padding-top:1rem;padding-right:1rem;padding-left:1.5rem}}.mc-modal__icon{fill:#666;height:1.5rem;width:1.5rem}.mc-modal__title{font-size:.875rem;line-height:1.2857142857;font-weight:400;color:#666;margin-bottom:0;margin-top:0}.mc-modal__close{box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;position:relative;align-self:flex-start;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2rem' width='2rem' viewBox='0 0 32 32' fill='%23808080'%3E%3Cpath d='M17.41 16l8.8-8.79a1 1 0 10-1.42-1.42L16 14.59l-8.79-8.8a1 1 0 00-1.42 1.42l8.8 8.79-8.8 8.79a1 1 0 000 1.42 1 1 0 001.42 0l8.79-8.8 8.79 8.8a1 1 0 001.42 0 1 1 0 000-1.42z'/%3E%3C/svg%3E\") no-repeat;background-size:contain;cursor:pointer;height:2rem;flex-shrink:0;margin:0 0 0 auto;width:2rem}.mc-modal__close:after{border-radius:2px;box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;transition:box-shadow .2s ease}.mc-modal__close-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;visibility:visible;white-space:nowrap}.mc-modal__close:focus:after{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-modal__body{font-size:1rem;line-height:1.375;flex:1 1;color:#191919;display:flex;overflow:hidden;padding-left:.5rem;padding-right:.5rem}@media screen and (min-width: 680px){.mc-modal__body{padding-left:.75rem;padding-right:1rem}}.mc-modal__content{flex-grow:1;max-height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;padding-left:.5rem;padding-right:.5rem}@media screen and (min-width: 680px){.mc-modal__content{padding-left:.75rem;padding-right:.75rem}}.mc-modal__content::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-modal__content::-webkit-scrollbar-thumb{background:#666666}.mc-modal__heading{font-size:1.125rem;line-height:1.3333333333;font-weight:600;color:#000;margin-bottom:0;margin-top:0}.mc-modal__inner{padding-top:1.5rem;padding-bottom:3rem}.mc-modal__footer{align-items:stretch;display:flex;flex-direction:column;justify-content:center;padding:1rem}@media screen and (min-width: 680px){.mc-modal__footer{align-items:center;flex-direction:row;padding:1.5rem}}.mc-modal__footer>:first-child:not(:only-child){margin-bottom:.75rem}@media screen and (min-width: 680px){.mc-modal__footer>:first-child:not(:only-child){margin-bottom:0;margin-right:1rem}}.mc-modal-open{overflow:hidden}.mc-modal-overlay{background-color:#191919b3;filter:blur(1px);inset:0;opacity:0;position:fixed;pointer-events:none;transition:opacity .4s ease,visibility 0ms .4s;z-index:1999999998}.mc-modal-overlay.is-visible{opacity:1;pointer-events:all;transition:opacity .4s ease,visibility 0ms;visibility:visible}\n"] }]
|
|
@@ -65,4 +65,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
65
65
|
type: ViewChild,
|
|
66
66
|
args: ['content', { read: ViewContainerRef, static: true }]
|
|
67
67
|
}] } });
|
|
68
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvbW9kYWwvbW9kYWwuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvbW9kYWwvbW9kYWwuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUVMLHVCQUF1QixFQUV2QixTQUFTLEVBRVQsTUFBTSxFQUNOLEtBQUssRUFHTCxTQUFTLEVBQ1QsZ0JBQWdCLEVBQ2hCLGlCQUFpQixHQUNsQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUJBQW1CLENBQUM7QUFFbkQsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDZCQUE2QixDQUFDOzs7O0FBWTNELE1BQU0sT0FBTyxjQUFjO0lBUXpCLFlBQTBDLE1BQW1CLEVBQVUsRUFBcUI7UUFBbEQsV0FBTSxHQUFOLE1BQU0sQ0FBYTtRQUFVLE9BQUUsR0FBRixFQUFFLENBQW1CO0lBQUcsQ0FBQztJQUVoRyxJQUFXLElBQUk7UUFDYixPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSyxDQUFDO0lBQzNCLENBQUM7SUFFRCxJQUFXLEtBQUs7UUFDZCxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBTSxDQUFDO0lBQzVCLENBQUM7SUFFRCxJQUFXLFFBQVE7UUFDakIsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVMsQ0FBQztJQUMvQixDQUFDO0lBRUQsSUFBVyxTQUFTO1FBQ2xCLE9BQU8sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFNBQVMsSUFBSSxDQUFDO0lBQ3RDLENBQUM7SUFFRCxJQUFXLFVBQVU7UUFDbkIsT0FBTyxJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVcsQ0FBQztJQUNqQyxDQUFDO0lBRUQsSUFBVyxtQkFBbUI7UUFDNUIsT0FBTyxJQUFJLENBQUMsVUFBVSxHQUFHLENBQUMsQ0FBQztJQUM3QixDQUFDO0lBRUQsSUFBVyxjQUFjO1FBQ3ZCLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxjQUFlLENBQUM7SUFDckMsQ0FBQztJQUVNLGVBQWU7UUFDcEIsSUFBSSxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxRQUFRLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVNLG1CQUFtQjtRQUN4QixJQUFJLElBQUksQ0FBQyxjQUFjLEVBQUU7WUFDdkIsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1NBQ2Q7SUFDSCxDQUFDO0lBRU0sS0FBSztRQUNWLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVPLGtCQUFrQixDQUFDLGFBQXdCO1FBQ2pELElBQUksQ0FBQyxpQkFBaUIsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGVBQWUsQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUM1RSxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxDQUFDO0lBQzFCLENBQUM7OzRHQTNEVSxjQUFjLGtCQVFMLFlBQVk7Z0dBUnJCLGNBQWMsd1FBR0ssZ0JBQWdCLDJDQy9CaEQsMmhDQStCQSwrbUpETmMsQ0FBQyxjQUFjLENBQUM7NEZBR2pCLGNBQWM7a0JBVDFCLFNBQVM7K0JBQ0UsV0FBVyxtQkFHSix1QkFBdUIsQ0FBQyxNQUFNLGlCQUNoQyxpQkFBaUIsQ0FBQyxJQUFJLGNBQ3pCLENBQUMsY0FBYyxDQUFDLFFBQ3RCLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxFQUFFOzswQkFVeEIsTUFBTTsyQkFBQyxZQUFZOzRFQVBoQixRQUFRO3NCQUF2QixLQUFLO2dCQUNVLGtCQUFrQjtzQkFBakMsS0FBSztnQkFFVyxjQUFjO3NCQUQ5QixTQUFTO3VCQUFDLFNBQVMsRUFBRSxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQWZ0ZXJWaWV3SW5pdCxcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENoYW5nZURldGVjdG9yUmVmLFxuICBDb21wb25lbnQsXG4gIENvbXBvbmVudFJlZixcbiAgSW5qZWN0LFxuICBJbnB1dCxcbiAgT25EZXN0cm95LFxuICBUeXBlLFxuICBWaWV3Q2hpbGQsXG4gIFZpZXdDb250YWluZXJSZWYsXG4gIFZpZXdFbmNhcHN1bGF0aW9uLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IG1vZGFsQW5pbWF0aW9uIH0gZnJvbSAnLi9tb2RhbC1hbmltYXRpb24nO1xuaW1wb3J0IHsgTW9kYWxSZWYgfSBmcm9tICcuL2ludGVyZmFjZXMvbW9kYWwtcmVmJztcbmltcG9ydCB7IE1PREFMX0NPTkZJRyB9IGZyb20gJy4vdG9rZW5zL21vZGFsLWNvbmZpZy50b2tlbic7XG5pbXBvcnQgeyBNb2RhbENvbmZpZyB9IGZyb20gJy4vaW50ZXJmYWNlcy9tb2RhbC1jb25maWcnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtb3otbW9kYWwnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9kYWwuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tb2RhbC5jb21wb25lbnQuc2NzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgYW5pbWF0aW9uczogW21vZGFsQW5pbWF0aW9uXSxcbiAgaG9zdDogeyAnW0Btb2RhbEFuaW1hdGlvbl0nOiAndHJ1ZScgfSxcbn0pXG5leHBvcnQgY2xhc3MgTW9kYWxDb21wb25lbnQgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3kge1xuICBASW5wdXQoKSBwdWJsaWMgbW9kYWxSZWYhOiBNb2RhbFJlZjtcbiAgQElucHV0KCkgcHVibGljIGNoaWxkQ29tcG9uZW50VHlwZSE6IFR5cGU8YW55PjtcbiAgQFZpZXdDaGlsZCgnY29udGVudCcsIHsgcmVhZDogVmlld0NvbnRhaW5lclJlZiwgc3RhdGljOiB0cnVlIH0pXG4gIHByaXZhdGUgcmVhZG9ubHkgY29udGVudFZpZXdSZWYhOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIHB1YmxpYyBjaGlsZENvbXBvbmVudFJlZj86IENvbXBvbmVudFJlZjxhbnk+O1xuXG4gIGNvbnN0cnVjdG9yKEBJbmplY3QoTU9EQUxfQ09ORklHKSBwcml2YXRlIGNvbmZpZzogTW9kYWxDb25maWcsIHByaXZhdGUgY2Q6IENoYW5nZURldGVjdG9yUmVmKSB7fVxuXG4gIHB1YmxpYyBnZXQgaWNvbigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmNvbmZpZy5pY29uITtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgdGl0bGUoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gdGhpcy5jb25maWcudGl0bGUhO1xuICB9XG5cbiAgcHVibGljIGdldCBoYXNDcm9zcygpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jb25maWcuaGFzQ3Jvc3MhO1xuICB9XG5cbiAgcHVibGljIGdldCBtaW5IZWlnaHQoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYCR7dGhpcy5jb25maWcubWluSGVpZ2h0fXB4YDtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgbGF5ZXJJbmRleCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLmNvbmZpZy5sYXllckluZGV4ITtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgbW9kYWxDb250YWluZXJJbmRleCgpOiBudW1iZXIge1xuICAgIHJldHVybiB0aGlzLmxheWVySW5kZXggKyAxO1xuICB9XG5cbiAgcHVibGljIGdldCBjbG9zZU9uT3ZlcmxheSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jb25maWcuY2xvc2VPbk92ZXJsYXkhO1xuICB9XG5cbiAgcHVibGljIG5nQWZ0ZXJWaWV3SW5pdCgpIHtcbiAgICB0aGlzLmluaXRDaGlsZENvbXBvbmVudCh0aGlzLmNoaWxkQ29tcG9uZW50VHlwZSk7XG4gIH1cblxuICBwdWJsaWMgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5tb2RhbFJlZi5kZXN0cm95KCk7XG4gIH1cblxuICBwdWJsaWMgY2xvc2VPbk91dHNpZGVDTGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5jbG9zZU9uT3ZlcmxheSkge1xuICAgICAgdGhpcy5jbG9zZSgpO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBjbG9zZSgpIHtcbiAgICB0aGlzLm1vZGFsUmVmLmNsb3NlKCk7XG4gIH1cblxuICBwcml2YXRlIGluaXRDaGlsZENvbXBvbmVudChjb21wb25lbnRUeXBlOiBUeXBlPGFueT4pOiB2b2lkIHtcbiAgICB0aGlzLmNoaWxkQ29tcG9uZW50UmVmID0gdGhpcy5jb250ZW50Vmlld1JlZi5jcmVhdGVDb21wb25lbnQoY29tcG9uZW50VHlwZSk7XG4gICAgdGhpcy5jZC5kZXRlY3RDaGFuZ2VzKCk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgdGFiaW5kZXg9XCItMVwiXG4gIHJvbGU9XCJkaWFsb2dcIlxuICBhcmlhLWxhYmVsbGVkYnk9XCJtb2RhbF90aXRsZVwiXG4gIGNsYXNzPVwibWMtbW9kYWxcIlxuICBbc3R5bGUuekluZGV4XT1cIm1vZGFsQ29udGFpbmVySW5kZXhcIlxuPlxuICA8ZGl2IHJvbGU9XCJkb2N1bWVudFwiIGNsYXNzPVwibWMtbW9kYWxfX2RpYWxvZyBpcy1vcGVuXCIgW3N0eWxlLm1pbkhlaWdodF09XCJtaW5IZWlnaHRcIj5cbiAgICA8aGVhZGVyIGNsYXNzPVwibWMtbW9kYWxfX2hlYWRlciBtYy1kaXZpZGVyLWJvdHRvbSBtYy1kaXZpZGVyLWJvdHRvbS0tbGlnaHRcIj5cbiAgICAgIDxzcGFuIGNsYXNzPVwibWMtbW9kYWxfX2ljb25cIiAqbmdJZj1cImljb25cIj5cbiAgICAgICAgPG1vei1pY29uIGljb25OYW1lPVwie3sgaWNvbiB9fVwiPjwvbW96LWljb24+XG4gICAgICA8L3NwYW4+XG4gICAgICA8aDIgY2xhc3M9XCJtYy1tb2RhbF9fdGl0bGVcIiBpZD1cIm1vZGFsVGl0bGVcIj57eyB0aXRsZSB9fTwvaDI+XG4gICAgICA8YnV0dG9uIGNsYXNzPVwibWMtbW9kYWxfX2Nsb3NlXCIgdHlwZT1cImJ1dHRvblwiIChjbGljayk9XCJjbG9zZSgpXCIgKm5nSWY9XCJoYXNDcm9zc1wiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cIm1jLW1vZGFsX19jbG9zZS10ZXh0XCI+Q2xvc2U8L3NwYW4+XG4gICAgICA8L2J1dHRvbj5cbiAgICA8L2hlYWRlcj5cbiAgICA8bWFpbiBjbGFzcz1cIm1jLW1vZGFsX19ib2R5XCI+XG4gICAgICA8YXJ0aWNsZSBjbGFzcz1cIm1jLW1vZGFsX19jb250ZW50XCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSAjY29udGVudD48L25nLXRlbXBsYXRlPlxuICAgICAgPC9hcnRpY2xlPlxuICAgIDwvbWFpbj5cbiAgPC9kaXY+XG48L2Rpdj5cbjxkaXZcbiAgdGFiaW5kZXg9XCItMVwiXG4gIHJvbGU9XCJkaWFsb2dcIlxuICAoY2xpY2spPVwiY2xvc2VPbk91dHNpZGVDTGljaygpXCJcbiAgY2xhc3M9XCJtYy1tb2RhbC1vdmVybGF5IGlzLXZpc2libGVcIlxuICBbc3R5bGUuekluZGV4XT1cImxheWVySW5kZXhcIlxuPjwvZGl2PlxuIl19
|
|
@@ -121,7 +121,7 @@ export class PaginationComponent {
|
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, deps: [{ token: i1.GlobalEventsService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
-
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaginationComponent, selector: "moz-pagination", inputs: { numberOfPages: "numberOfPages", disable: "disable", light: "light", pageLabel: "pageLabel", pageOfLabel: "pageOfLabel", pageTitleMask: "pageTitleMask" }, outputs: { pageChangeEvent: "pageChangeEvent" }, providers: [PAGINATION_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<nav class=\"mc-pagination\" role=\"navigation\" aria-label=\"pagination\">\n <button\n moz-button\n theme=\"neutral\"\n class=\"mc-pagination__button\"\n [disabled]=\"isFirstPage || disable\"\n [onlyIcon]=\"true\"\n [size]=\"(selectSize | async)!\"\n (click)=\"previousPage()\"\n *ngIf=\"leftIconName | async; let icon\"\n >\n <moz-icon [iconName]=\"icon\"></moz-icon>\n </button>\n <div *ngIf=\"viewSelect\">\n <select\n moz-select\n [ngModel]=\"currentPage\"\n (change)=\"onChange(currentPage); this.pageChangeEvent.emit(this.currentPage)\"\n (ngModelChange)=\"writeValue($event)\"\n [compareWith]=\"compareWithPages\"\n [size]=\"(selectSize | async)!\"\n [disabled]=\"disabledSelect || disable\"\n >\n <option *ngFor=\"let page of pages\" [ngValue]=\"page.value\">{{ page.title }}</option>\n </select>\n </div>\n\n <button\n moz-button\n theme=\"neutral\"\n class=\"mc-pagination__button\"\n [disabled]=\"isLastPage || disable\"\n (click)=\"nextPage()\"\n [size]=\"(selectSize | async)!\"\n [onlyIcon]=\"true\"\n *ngIf=\"rightIconName | async; let icon\"\n >\n <moz-icon [iconName]=\"icon\"></moz-icon>\n </button>\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:1rem}.mc-pagination__select{font-size:1rem;line-height:1.125;padding:.875rem 3rem .875rem calc(.75rem - 1px)}@media screen and (min-width: 1024px){.mc-pagination__select{font-size:.875rem;line-height:1.1428571429;padding:calc(.5rem - 1px) 2.25rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-pagination{gap:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: i5.SelectComponent, selector: "select[moz-`select`]", inputs: ["size"] }, { kind: "component", type: i6.IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
124
|
+
PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PaginationComponent, selector: "moz-pagination", inputs: { numberOfPages: "numberOfPages", disable: "disable", light: "light", pageLabel: "pageLabel", pageOfLabel: "pageOfLabel", pageTitleMask: "pageTitleMask" }, outputs: { pageChangeEvent: "pageChangeEvent" }, providers: [PAGINATION_CONTROL_VALUE_ACCESSOR], usesOnChanges: true, ngImport: i0, template: "<nav class=\"mc-pagination\" role=\"navigation\" aria-label=\"pagination\">\n <button\n moz-button\n theme=\"neutral\"\n class=\"mc-pagination__button\"\n [disabled]=\"isFirstPage || disable\"\n [onlyIcon]=\"true\"\n [size]=\"(selectSize | async)!\"\n (click)=\"previousPage()\"\n *ngIf=\"leftIconName | async; let icon\"\n >\n <moz-icon [iconName]=\"icon\"></moz-icon>\n </button>\n <div *ngIf=\"viewSelect\">\n <select\n moz-select\n [ngModel]=\"currentPage\"\n (change)=\"onChange(currentPage); this.pageChangeEvent.emit(this.currentPage)\"\n (ngModelChange)=\"writeValue($event)\"\n [compareWith]=\"compareWithPages\"\n [size]=\"(selectSize | async)!\"\n [disabled]=\"disabledSelect || disable\"\n >\n <option *ngFor=\"let page of pages\" [ngValue]=\"page.value\">{{ page.title }}</option>\n </select>\n </div>\n\n <button\n moz-button\n theme=\"neutral\"\n class=\"mc-pagination__button\"\n [disabled]=\"isLastPage || disable\"\n (click)=\"nextPage()\"\n [size]=\"(selectSize | async)!\"\n [onlyIcon]=\"true\"\n *ngIf=\"rightIconName | async; let icon\"\n >\n <moz-icon [iconName]=\"icon\"></moz-icon>\n </button>\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:1rem}.mc-pagination__select{font-size:1rem;line-height:1.125;padding:.875rem 3rem .875rem calc(.75rem - 1px)}@media screen and (min-width: 1024px){.mc-pagination__select{font-size:.875rem;line-height:1.1428571429;padding:calc(.5rem - 1px) 2.25rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-pagination{gap:1rem}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: i5.SelectComponent, selector: "select[moz-`select`]", inputs: ["size"] }, { kind: "component", type: i6.IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
125
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
127
|
args: [{ selector: 'moz-pagination', changeDetection: ChangeDetectionStrategy.OnPush, providers: [PAGINATION_CONTROL_VALUE_ACCESSOR], template: "<nav class=\"mc-pagination\" role=\"navigation\" aria-label=\"pagination\">\n <button\n moz-button\n theme=\"neutral\"\n class=\"mc-pagination__button\"\n [disabled]=\"isFirstPage || disable\"\n [onlyIcon]=\"true\"\n [size]=\"(selectSize | async)!\"\n (click)=\"previousPage()\"\n *ngIf=\"leftIconName | async; let icon\"\n >\n <moz-icon [iconName]=\"icon\"></moz-icon>\n </button>\n <div *ngIf=\"viewSelect\">\n <select\n moz-select\n [ngModel]=\"currentPage\"\n (change)=\"onChange(currentPage); this.pageChangeEvent.emit(this.currentPage)\"\n (ngModelChange)=\"writeValue($event)\"\n [compareWith]=\"compareWithPages\"\n [size]=\"(selectSize | async)!\"\n [disabled]=\"disabledSelect || disable\"\n >\n <option *ngFor=\"let page of pages\" [ngValue]=\"page.value\">{{ page.title }}</option>\n </select>\n </div>\n\n <button\n moz-button\n theme=\"neutral\"\n class=\"mc-pagination__button\"\n [disabled]=\"isLastPage || disable\"\n (click)=\"nextPage()\"\n [size]=\"(selectSize | async)!\"\n [onlyIcon]=\"true\"\n *ngIf=\"rightIconName | async; let icon\"\n >\n <moz-icon [iconName]=\"icon\"></moz-icon>\n </button>\n</nav>\n", styles: [".mc-pagination{align-items:center;display:flex;justify-content:center;gap:1rem}.mc-pagination__select{font-size:1rem;line-height:1.125;padding:.875rem 3rem .875rem calc(.75rem - 1px)}@media screen and (min-width: 1024px){.mc-pagination__select{font-size:.875rem;line-height:1.1428571429;padding:calc(.5rem - 1px) 2.25rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-pagination{gap:1rem}\n"] }]
|
|
@@ -57,7 +57,7 @@ QuantitySelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
|
|
|
57
57
|
useExisting: forwardRef(() => QuantitySelectorComponent),
|
|
58
58
|
multi: true,
|
|
59
59
|
},
|
|
60
|
-
], ngImport: i0, template: "<moz-field [label]=\"label\">\n <div class=\"mc-quantity-selector\">\n <button\n [ngClass]=\"[\n value === valueMin || disabled ? 'is-disabled' : '',\n size ? 'mc-button--' + size : ''\n ]\"\n class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left\"\n [attr.aria-controls]=\"id || 'quantity-selector'\"\n [attr.aria-label]=\"decrementAriaLabel || 'Decrement'\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [disabled]=\"value === valueMin || disabled\"\n type=\"button\"\n (click)=\"decrement()\"\n >\n <moz-icon class=\"mc-button__icon\" iconName=\"Navigation_Control_Less_48px\"></moz-icon>\n </button>\n\n <input\n [ngClass]=\"[size ? 'mc-text-input--' + size : '']\"\n [disabled]=\"disabled\"\n id=\"{{ id || 'quantity-selector' }}\"\n class=\"mc-text-input mc-quantity-selector__input\"\n name=\"quantity-selector-input\"\n [attr.aria-label]=\"inputAriaLabel || 'QuantitySelector'\"\n [attr.aria-valuemin]=\"valueMin\"\n [attr.aria-valuemax]=\"valueMax\"\n [attr.aria-valuenow]=\"value\"\n (change)=\"contentChange($event)\"\n [value]=\"value\"\n placeholder=\"{{ placeholder }}\"\n type=\"number\"\n />\n\n <button\n [ngClass]=\"[\n value === valueMax || disabled ? 'is-disabled' : '',\n size ? 'mc-button--' + size : ''\n ]\"\n class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right\"\n [attr.aria-controls]=\"id || 'quantity-selector'\"\n [attr.aria-label]=\"incrementAriaLabel || 'Increment'\"\n aria-hidden=\"true\"\n [disabled]=\"value === valueMax || disabled\"\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"increment()\"\n >\n <moz-icon class=\"mc-button__icon\" iconName=\"Navigation_Control_More_48px\"></moz-icon>\n </button>\n </div>\n</moz-field>\n", styles: ["@charset \"UTF-8\";.mc-text-input{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem;transition:box-shadow .2s ease;display:block;width:100%;position:relative;border:1px solid #808080;color:#333;background-color:#fff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{margin:0;color:gray;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right .4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input:hover{border-color:#191919}.mc-text-input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:gray;cursor:not-allowed}.mc-text-input--s{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s::placeholder{font-size:.875rem;line-height:1.2857142857}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-m::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-l::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xl::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xxl::placeholder{font-size:.875rem;line-height:1.2857142857}}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-field__label,.mc-field__legend{font-size:.875rem;line-height:1.2857142857;font-weight:400;color:#333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__legend+.mc-field__container,.mc-field__help+.mc-field__container{margin-top:1rem}.mc-field__requirement,.mc-field__help{font-size:.75rem;line-height:1.3333333333;font-weight:400;color:#666}.mc-field__requirement:before{content:\"\\a0-\\a0\"}.mc-field__help{display:block;margin-top:.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:.5rem}@media screen and (min-width: 769px){.mc-field__container--inline,.mc-field__element--inline{display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:.5rem}.mc-button{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;color:#fff;background-color:#120949;font-family:LeroyMerlin,sans-serif;font-weight:600;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;transition:all ease .2s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:stretch;box-sizing:border-box;fill:currentColor}.mc-button:hover{background-color:#161cb6;color:#fff}.mc-button:active{background-color:#161cb6}.mc-button:disabled,.mc-button.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-button--s{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}.mc-button--m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--fit{display:inline-flex;width:auto}@media screen and (min-width: 680px){.mc-button--fit\\@from-m{display:inline-flex;width:auto}}@media screen and (min-width: 1024px){.mc-button--fit\\@from-l{display:inline-flex;width:auto}}@media screen and (min-width: 1280px){.mc-button--fit\\@from-xl{display:inline-flex;width:auto}}@media screen and (min-width: 1920px){.mc-button--fit\\@from-xxl{display:inline-flex;width:auto}}.mc-button--full{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}@media screen and (min-width: 680px){.mc-button--full\\@from-m{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--full\\@from-l{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1280px){.mc-button--full\\@from-xl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--full\\@from-xxl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-button--square{align-items:center;height:0;padding:0}@media screen and (min-width: 1024px){.mc-button--square{padding:0}}.mc-button__icon{flex-shrink:0}.mc-button__icon:last-child{margin-left:.5rem;margin-right:-.25rem}.mc-button__icon:first-child{margin-right:.5rem;margin-left:-.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{align-items:center;display:flex;pointer-events:none}a.mc-button:disabled,a.mc-button.is-disabled{pointer-events:none}.mc-button--solid-primary-02{background-color:#ff5800}.mc-button--solid-primary-02:hover{background-color:#b83f00}.mc-button--solid-primary-02:active{background-color:#421700}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333}.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral:active{background-color:#333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger:hover,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered{color:#120949;border-color:#120949;background-color:#fff}.mc-button--bordered:hover{background-color:#e5e7fa;color:#161cb6}.mc-button--bordered:active{background-color:#b8bef4;color:#130f7b}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#ff5800;border-color:#ff5800;background-color:#fff}.mc-button--bordered-primary-02:hover{background-color:#ffe1d1;color:#ff5800}.mc-button--bordered-primary-02:active{background-color:#ffab80}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333;border-color:#333;background-color:#fff}.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333}.mc-button--bordered-neutral:active{background-color:#ccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#fff}.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-quantity-selector{display:flex;position:relative}.mc-quantity-selector__button-right,.mc-quantity-selector__button-left{z-index:1}.mc-quantity-selector__button-right{border-radius:0 .25rem .25rem 0}.mc-quantity-selector__button-left{border-radius:.25rem 0 0 .25rem}.mc-quantity-selector__input{border-radius:0}.mc-quantity-selector__input,.mc-quantity-selector__input::placeholder{text-align:center}.mc-quantity-selector__input:not(:focus){border-left:none;border-right:none}.mc-quantity-selector__input:focus{z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.FieldComponent, selector: "moz-field", inputs: ["label", "requirementText", "helpText"] }, { kind: "component", type: i3.IconComponent, selector: "moz-icon", inputs: ["iconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
60
|
+
], ngImport: i0, template: "<moz-field [label]=\"label\">\n <div class=\"mc-quantity-selector\">\n <button\n [ngClass]=\"[\n value === valueMin || disabled ? 'is-disabled' : '',\n size ? 'mc-button--' + size : ''\n ]\"\n class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left\"\n [attr.aria-controls]=\"id || 'quantity-selector'\"\n [attr.aria-label]=\"decrementAriaLabel || 'Decrement'\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n [disabled]=\"value === valueMin || disabled\"\n type=\"button\"\n (click)=\"decrement()\"\n >\n <moz-icon class=\"mc-button__icon\" iconName=\"Navigation_Control_Less_48px\"></moz-icon>\n </button>\n\n <input\n [ngClass]=\"[size ? 'mc-text-input--' + size : '']\"\n [disabled]=\"disabled\"\n id=\"{{ id || 'quantity-selector' }}\"\n class=\"mc-text-input mc-quantity-selector__input\"\n name=\"quantity-selector-input\"\n [attr.aria-label]=\"inputAriaLabel || 'QuantitySelector'\"\n [attr.aria-valuemin]=\"valueMin\"\n [attr.aria-valuemax]=\"valueMax\"\n [attr.aria-valuenow]=\"value\"\n (change)=\"contentChange($event)\"\n [value]=\"value\"\n placeholder=\"{{ placeholder }}\"\n type=\"number\"\n />\n\n <button\n [ngClass]=\"[\n value === valueMax || disabled ? 'is-disabled' : '',\n size ? 'mc-button--' + size : ''\n ]\"\n class=\"mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right\"\n [attr.aria-controls]=\"id || 'quantity-selector'\"\n [attr.aria-label]=\"incrementAriaLabel || 'Increment'\"\n aria-hidden=\"true\"\n [disabled]=\"value === valueMax || disabled\"\n tabindex=\"-1\"\n type=\"button\"\n (click)=\"increment()\"\n >\n <moz-icon class=\"mc-button__icon\" iconName=\"Navigation_Control_More_48px\"></moz-icon>\n </button>\n </div>\n</moz-field>\n", styles: ["@charset \"UTF-8\";.mc-text-input{font-family:LeroyMerlin,sans-serif;font-weight:400;box-sizing:border-box;outline:none;appearance:none;padding:0;margin:0;box-shadow:none;border:none;font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem;transition:box-shadow .2s ease;display:block;width:100%;position:relative;border:1px solid #808080;color:#333;background-color:#fff;border-radius:4px}.mc-text-input[type=number]::-webkit-inner-spin-button,.mc-text-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-text-input[type=number]{-moz-appearance:textfield}.mc-text-input[type=search]::-webkit-search-decoration:hover,.mc-text-input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-text-input::placeholder{font-size:1rem;line-height:1.375}.mc-text-input::placeholder{margin:0;color:gray;opacity:1}.mc-text-input.is-valid,.mc-text-input.is-invalid{background-repeat:no-repeat;background-size:1.5rem 1.5rem;background-position:right .4375rem center;padding-right:2.5rem}.mc-text-input.is-valid{border-color:#46a610;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%2346a610' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 11-8 8 8 8 0 018-8m0-2a10 10 0 1010 10A10 10 0 0012 2z'/%3E%3Cpath d='M10.73 15.75a1 1 0 01-.68-.26l-3-2.74a1 1 0 011.36-1.47l2.25 2.08 4.36-4.42a1 1 0 111.42 1.41l-5 5.1a1 1 0 01-.71.3z'/%3E%3C/svg%3E\")}.mc-text-input.is-valid:hover,.mc-text-input.is-valid.is-hover{border-color:#035010}.mc-text-input.is-invalid{border-color:#c61112;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' viewBox='0 0 24 24' fill='%23c61112'%3E%3Cpath d='M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8z'/%3E%3Cpath d='M12 7a1 1 0 00-1 1v4.38a1 1 0 002 0V8a1 1 0 00-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-text-input.is-invalid:hover,.mc-text-input.is-invalid.is-hover{border-color:#530000}.mc-text-input:hover{border-color:#191919}.mc-text-input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-text-input:disabled{background:#e6e6e6;border-color:#e6e6e6;color:gray;cursor:not-allowed}.mc-text-input--s{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s::placeholder{font-size:.875rem;line-height:1.2857142857}@media screen and (min-width: 680px){.mc-text-input--s\\@from-m{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-m::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1024px){.mc-text-input--s\\@from-l{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-l::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1280px){.mc-text-input--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xl::placeholder{font-size:.875rem;line-height:1.2857142857}}@media screen and (min-width: 1920px){.mc-text-input--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;min-height:2rem;padding:.375rem .4375rem}.mc-text-input--s\\@from-xxl::placeholder{font-size:.875rem;line-height:1.2857142857}}.mc-text-input--m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m::placeholder{font-size:1rem;line-height:1.375}@media screen and (min-width: 680px){.mc-text-input--m\\@from-m{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-m::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1024px){.mc-text-input--m\\@from-l{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-l::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1280px){.mc-text-input--m\\@from-xl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xl::placeholder{font-size:1rem;line-height:1.375}}@media screen and (min-width: 1920px){.mc-text-input--m\\@from-xxl{font-size:1rem;line-height:1.375;min-height:3rem;padding:.75rem .6875rem}.mc-text-input--m\\@from-xxl::placeholder{font-size:1rem;line-height:1.375}}.mc-field__label,.mc-field__legend{font-size:.875rem;line-height:1.2857142857;font-weight:400;color:#333}.mc-field__legend{padding-left:0;padding-right:0}.mc-field__legend+.mc-field__container,.mc-field__help+.mc-field__container{margin-top:1rem}.mc-field__requirement,.mc-field__help{font-size:.75rem;line-height:1.3333333333;font-weight:400;color:#666}.mc-field__requirement:before{content:\"\\a0-\\a0\"}.mc-field__help{display:block;margin-top:.125rem}.mc-field .mc-field__input,.mc-field .mc-field__element{margin-top:.5rem}@media screen and (min-width: 769px){.mc-field__container--inline,.mc-field__element--inline{display:flex}}@media screen and (min-width: 769px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-bottom:0;margin-right:1rem}}@media screen and (min-width: 1024px){.mc-field__container--inline .mc-field__item:not(:last-child),.mc-field__element--inline .mc-field__item:not(:last-child){margin-right:2rem}}.mc-field__item:not(:last-child){margin-bottom:1rem}.mc-field__error-message{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-field--group{border:none;margin-left:0;margin-right:0;padding:0}.mc-field--group .mc-field__error-message{margin-top:.5rem}.mc-button{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;padding:0;color:#fff;background-color:#120949;font-family:LeroyMerlin,sans-serif;font-weight:600;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;cursor:pointer;border-radius:4px;text-align:center;border:2px solid transparent;transition:all ease .2s;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;align-items:stretch;box-sizing:border-box;fill:currentColor}.mc-button:hover{background-color:#161cb6;color:#fff}.mc-button:active{background-color:#161cb6}.mc-button:disabled,.mc-button.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button .mc-button__icon:first-child,.mc-button .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-button:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-button--s{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s .mc-button__icon:first-child,.mc-button--s .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}@media screen and (min-width: 680px){.mc-button--s\\@from-m{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-m .mc-button__icon:first-child,.mc-button--s\\@from-m .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1024px){.mc-button--s\\@from-l{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-l .mc-button__icon:first-child,.mc-button--s\\@from-l .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1280px){.mc-button--s\\@from-xl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xl .mc-button__icon:first-child,.mc-button--s\\@from-xl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}@media screen and (min-width: 1920px){.mc-button--s\\@from-xxl{font-size:.875rem;line-height:1.2857142857;padding:.3125rem 1rem;min-height:2rem;min-width:2rem}.mc-button--s\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--s\\@from-xxl .mc-button__icon:first-child,.mc-button--s\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.1875rem;margin-top:-.1875rem}.mc-button--s\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:1.5rem;height:1.5rem}}.mc-button--m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m .mc-button__icon:first-child,.mc-button--m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--m\\@from-m{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-m .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-m .mc-button__icon:first-child,.mc-button--m\\@from-m .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--m\\@from-l{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-l .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-l .mc-button__icon:first-child,.mc-button--m\\@from-l .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--m\\@from-xl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xl .mc-button__icon:first-child,.mc-button--m\\@from-xl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--m\\@from-xxl{font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem}.mc-button--m\\@from-xxl .mc-button__icon{width:1.5rem;height:1.5rem}.mc-button--m\\@from-xxl .mc-button__icon:first-child,.mc-button--m\\@from-xxl .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-button--m\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l .mc-button__icon{width:2rem;height:2rem}.mc-button--l .mc-button__icon:first-child,.mc-button--l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}@media screen and (min-width: 680px){.mc-button--l\\@from-m{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-m .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-m .mc-button__icon:first-child,.mc-button--l\\@from-m .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-m .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1024px){.mc-button--l\\@from-l{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-l .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-l .mc-button__icon:first-child,.mc-button--l\\@from-l .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-l .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1280px){.mc-button--l\\@from-xl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xl .mc-button__icon:first-child,.mc-button--l\\@from-xl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}@media screen and (min-width: 1920px){.mc-button--l\\@from-xxl{font-size:1.125rem;line-height:1.3333333333;padding:.875rem 1.5rem;min-height:3.5rem;min-width:3.5rem}.mc-button--l\\@from-xxl .mc-button__icon{width:2rem;height:2rem}.mc-button--l\\@from-xxl .mc-button__icon:first-child,.mc-button--l\\@from-xxl .mc-button__icon:last-child{margin-bottom:-.25rem;margin-top:-.25rem}.mc-button--l\\@from-xxl .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}}.mc-button--fit{display:inline-flex;width:auto}@media screen and (min-width: 680px){.mc-button--fit\\@from-m{display:inline-flex;width:auto}}@media screen and (min-width: 1024px){.mc-button--fit\\@from-l{display:inline-flex;width:auto}}@media screen and (min-width: 1280px){.mc-button--fit\\@from-xl{display:inline-flex;width:auto}}@media screen and (min-width: 1920px){.mc-button--fit\\@from-xxl{display:inline-flex;width:auto}}.mc-button--full{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full{width:-webkit-fill-available;width:-moz-available;width:stretch}}@media screen and (min-width: 680px){.mc-button--full\\@from-m{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-m{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1024px){.mc-button--full\\@from-l{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-l{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1280px){.mc-button--full\\@from-xl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}@media screen and (min-width: 1920px){.mc-button--full\\@from-xxl{display:flex;width:100%}@supports ((width: -webkit-fill-available) or (width: -moz-available) or (width: stretch)){.mc-button--full\\@from-xxl{width:-webkit-fill-available;width:-moz-available;width:stretch}}}.mc-button--square{align-items:center;height:0;padding:0}@media screen and (min-width: 1024px){.mc-button--square{padding:0}}.mc-button__icon{flex-shrink:0}.mc-button__icon:last-child{margin-left:.5rem;margin-right:-.25rem}.mc-button__icon:first-child{margin-right:.5rem;margin-left:-.25rem}.mc-button__icon:only-child{margin:0}.mc-button__label{align-items:center;display:flex;pointer-events:none}a.mc-button:disabled,a.mc-button.is-disabled{pointer-events:none}.mc-button--solid-primary-02{background-color:#ff5800}.mc-button--solid-primary-02:hover{background-color:#b83f00}.mc-button--solid-primary-02:active{background-color:#421700}.mc-button--solid-primary-02:disabled,.mc-button--solid-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-neutral{background-color:#333}.mc-button--solid-neutral:hover{background-color:#191919}.mc-button--solid-neutral:active{background-color:#333}.mc-button--solid-neutral:disabled,.mc-button--solid-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--solid-danger{background-color:#c61112}.mc-button--solid-danger:hover,.mc-button--solid-danger:active{background-color:#8c0003}.mc-button--solid-danger:disabled,.mc-button--solid-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered{color:#120949;border-color:#120949;background-color:#fff}.mc-button--bordered:hover{background-color:#e5e7fa;color:#161cb6}.mc-button--bordered:active{background-color:#b8bef4;color:#130f7b}.mc-button--bordered:disabled,.mc-button--bordered.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-primary-02{color:#ff5800;border-color:#ff5800;background-color:#fff}.mc-button--bordered-primary-02:hover{background-color:#ffe1d1;color:#ff5800}.mc-button--bordered-primary-02:active{background-color:#ffab80}.mc-button--bordered-primary-02:disabled,.mc-button--bordered-primary-02.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-neutral{color:#333;border-color:#333;background-color:#fff}.mc-button--bordered-neutral:hover{background-color:#e6e6e6;color:#333}.mc-button--bordered-neutral:active{background-color:#ccc}.mc-button--bordered-neutral:disabled,.mc-button--bordered-neutral.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-button--bordered-danger{color:#c61112;border-color:#c61112;background-color:#fff}.mc-button--bordered-danger:hover{background-color:#fdeaea;color:#8c0003}.mc-button--bordered-danger:active{background-color:#f8bcbb;color:#530000}.mc-button--bordered-danger:disabled,.mc-button--bordered-danger.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-quantity-selector{display:flex;position:relative}.mc-quantity-selector__button-right,.mc-quantity-selector__button-left{z-index:1}.mc-quantity-selector__button-right{border-radius:0 .25rem .25rem 0}.mc-quantity-selector__button-left{border-radius:.25rem 0 0 .25rem}.mc-quantity-selector__input{border-radius:0}.mc-quantity-selector__input,.mc-quantity-selector__input::placeholder{text-align:center}.mc-quantity-selector__input:not(:focus){border-left:none;border-right:none}.mc-quantity-selector__input:focus{z-index:2}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i2.FieldComponent, selector: "moz-field", inputs: ["label", "requirementText", "helpText"] }, { kind: "component", type: i3.IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
61
61
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: QuantitySelectorComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{ selector: 'moz-quantity-selector', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -60,7 +60,7 @@ export class MozSidebarComponent {
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
MozSidebarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozSidebarComponent, deps: [{ token: RouterLinkActive, optional: true }, { token: RouterLinkWithHref, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
63
|
-
MozSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozSidebarComponent, selector: "moz-sidebar", inputs: { options: "options" }, outputs: { opened: "opened" }, queries: [{ propertyName: "homeCmp", first: true, predicate: MozSidebarHomeComponent, descendants: true }, { propertyName: "userCmp", first: true, predicate: MozSidebarUserComponent, descendants: true }, { propertyName: "featuresCmp", predicate: i0.forwardRef(function () { return MozSidebarFeatureComponent; }) }, { propertyName: "utilitiesCmp", predicate: MozSidebarUtilityComponent }], ngImport: i0, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n <span class=\"mc-sidebar__trigger__container\">\n <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n </span>\n </button>\n <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n <div class=\"mc-sidebar-section\">\n <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n 'is-visible': !activeSubFeature || !localOpen}\">\n <li *ngFor=\"let item of featuresCmp\">\n <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n </li>\n </ul>\n <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n </div>\n <div class=\"mc-sidebar__utilities\">\n <div *ngFor=\"let utility of utilitiesCmp\">\n <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n <ul>\n <li class=\"mc-sidebar__utilities__item\">\n <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n </li>\n </ul>\n </div>\n </div>\n\n </div>\n <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n <ng-container *ngIf=\"homeCmp\">\n <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <a href=\"#\" [routerLink]=\"homeCmp.link\">\n <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n <span class=\"mc-sidebar-feature-group__icon\">\n <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n </span>\n <ng-container *ngIf=\"localOpen\">\n <span class=\"mc-sidebar-feature-group__label\">\n <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n </span>\n </ng-container>\n </span>\n </a>\n </button >\n </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n </li>\n </ul>\n\n <ng-template #tmplFeatureGroup>\n <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"item.link\">\n <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n <span class=\"mc-sidebar-feature-group__icon\">\n <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n </span>\n <div style=\"display:flex;\" *ngIf=\"localOpen\">\n <span class=\"mc-sidebar-feature-group__label\">\n <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n </span>\n <div *ngIf=\"localOpen && item?.category\">\n <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n </div>\n </div>\n </span>\n </a>\n </button>\n </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"feature.link\">\n <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n <span class=\"mc-sidebar-feature__label\">\n <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n </span>\n </span>\n </a>\n </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n <span class=\"mc-sidebar-sub-feature__container\">\n <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n <span class=\"mc-sidebar-sub-feature__trigger__label\">\n <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n </span>\n </span>\n </button>\n <ul>\n <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"utility.link\">\n <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n <span class=\"mc-sidebar-segment__icon\">\n <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n </span>\n <span class=\"mc-sidebar-segment__label\">\n <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n </span>\n </span>\n </a>\n </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <button class=\"mc-sidebar-user__header\">\n <span class=\"mc-sidebar-user__header__picture\">\n <ng-template #tmplProfilPicture>\n <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n </ng-template>\n <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n </span>\n <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n <p class=\"mc-sidebar-user__header__information\">\n <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n </p>\n <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n </span>\n </div>\n </button>\n\n <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n <li *ngFor=\"let userFeature of userCmp.features\">\n <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n <span class=\"mc-sidebar-feature__container\">\n <span class=\"mc-sidebar-feature__label\">\n <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n </span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #separator>\n <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "moz-icon", inputs: ["iconName"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
63
|
+
MozSidebarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozSidebarComponent, selector: "moz-sidebar", inputs: { options: "options" }, outputs: { opened: "opened" }, queries: [{ propertyName: "homeCmp", first: true, predicate: MozSidebarHomeComponent, descendants: true }, { propertyName: "userCmp", first: true, predicate: MozSidebarUserComponent, descendants: true }, { propertyName: "featuresCmp", predicate: i0.forwardRef(function () { return MozSidebarFeatureComponent; }) }, { propertyName: "utilitiesCmp", predicate: MozSidebarUtilityComponent }], ngImport: i0, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n <span class=\"mc-sidebar__trigger__container\">\n <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n </span>\n </button>\n <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n <div class=\"mc-sidebar-section\">\n <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n 'is-visible': !activeSubFeature || !localOpen}\">\n <li *ngFor=\"let item of featuresCmp\">\n <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n </li>\n </ul>\n <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n </div>\n <div class=\"mc-sidebar__utilities\">\n <div *ngFor=\"let utility of utilitiesCmp\">\n <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n <ul>\n <li class=\"mc-sidebar__utilities__item\">\n <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n </li>\n </ul>\n </div>\n </div>\n\n </div>\n <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n <ng-container *ngIf=\"homeCmp\">\n <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <a href=\"#\" [routerLink]=\"homeCmp.link\">\n <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n <span class=\"mc-sidebar-feature-group__icon\">\n <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n </span>\n <ng-container *ngIf=\"localOpen\">\n <span class=\"mc-sidebar-feature-group__label\">\n <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n </span>\n </ng-container>\n </span>\n </a>\n </button >\n </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n </li>\n </ul>\n\n <ng-template #tmplFeatureGroup>\n <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"item.link\">\n <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n <span class=\"mc-sidebar-feature-group__icon\">\n <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n </span>\n <div style=\"display:flex;\" *ngIf=\"localOpen\">\n <span class=\"mc-sidebar-feature-group__label\">\n <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n </span>\n <div *ngIf=\"localOpen && item?.category\">\n <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n </div>\n </div>\n </span>\n </a>\n </button>\n </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"feature.link\">\n <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n <span class=\"mc-sidebar-feature__label\">\n <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n </span>\n </span>\n </a>\n </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n <span class=\"mc-sidebar-sub-feature__container\">\n <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n <span class=\"mc-sidebar-sub-feature__trigger__label\">\n <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n </span>\n </span>\n </button>\n <ul>\n <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"utility.link\">\n <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n <span class=\"mc-sidebar-segment__icon\">\n <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n </span>\n <span class=\"mc-sidebar-segment__label\">\n <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n </span>\n </span>\n </a>\n </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <button class=\"mc-sidebar-user__header\">\n <span class=\"mc-sidebar-user__header__picture\">\n <ng-template #tmplProfilPicture>\n <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n </ng-template>\n <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n </span>\n <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n <p class=\"mc-sidebar-user__header__information\">\n <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n </p>\n <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n </span>\n </div>\n </button>\n\n <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n <li *ngFor=\"let userFeature of userCmp.features\">\n <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n <span class=\"mc-sidebar-feature__container\">\n <span class=\"mc-sidebar-feature__label\">\n <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n </span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #separator>\n <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
64
64
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozSidebarComponent, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
66
|
args: [{ selector: 'moz-sidebar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"mc-sidebar\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <div class=\"mc-sidebar__container\" [ngClass]=\"{'has-bottom-panel': userCmp}\">\n <button class=\"mc-sidebar__trigger\" type=\"button\" id=\"mc-sidebar__trigger\" (click)=\"toggleSidebar()\">\n <span class=\"mc-sidebar__trigger__container\">\n <moz-icon *ngIf=\"!localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Right_24px'\"></moz-icon>\n <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_DoubleArrow--Left_24px'\"></moz-icon>\n </span>\n </button>\n <ng-container *ngTemplateOutlet=\"sidebarHome\"></ng-container>\n\n <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n\n <div class=\"mc-sidebar-section\">\n <ul [ngClass]=\"{'is-hidden': activeSubFeature && localOpen,\n 'is-visible': !activeSubFeature || !localOpen}\">\n <li *ngFor=\"let item of featuresCmp\">\n <ng-container *ngTemplateOutlet=\"sidebarFeatures; context: {item: item}\"></ng-container>\n </li>\n </ul>\n <ng-container *ngTemplateOutlet=\"tmplSubFeature; context: {feature: activeSubFeature}\"></ng-container>\n </div>\n <div class=\"mc-sidebar__utilities\">\n <div *ngFor=\"let utility of utilitiesCmp\">\n <ng-container *ngTemplateOutlet=\"separator\"></ng-container>\n <ul>\n <li class=\"mc-sidebar__utilities__item\">\n <ng-container *ngTemplateOutlet=\"sidebarUtility; context: {utility: utility}\"></ng-container>\n </li>\n </ul>\n </div>\n </div>\n\n </div>\n <ng-container *ngTemplateOutlet=\"sidebarUser\"></ng-container>\n</nav>\n\n<ng-template #sidebarHome>\n <ng-container *ngIf=\"homeCmp\">\n <button class=\"mc-sidebar-feature-group\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <a href=\"#\" [routerLink]=\"homeCmp.link\">\n <span class=\"mc-sidebar-feature-group__container\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\" (click)=\"select(homeCmp)\">\n <span class=\"mc-sidebar-feature-group__icon\">\n <ng-container *ngTemplateOutlet=\"homeCmp.tmplIcon\"></ng-container>\n </span>\n <ng-container *ngIf=\"localOpen\">\n <span class=\"mc-sidebar-feature-group__label\">\n <ng-container *ngTemplateOutlet=\"homeCmp.tmplText\"></ng-container>\n </span>\n </ng-container>\n </span>\n </a>\n </button >\n </ng-container>\n</ng-template>\n\n<ng-template #sidebarFeatures let-item=\"item\">\n <ng-container *ngTemplateOutlet=\"tmplFeatureGroup\"></ng-container>\n\n <ul *ngIf=\"item?.category\" class=\"mc-sidebar-feature-group__content\" [ngClass]=\"{ 'is-open': localOpen && item.selected, 'is-close': !localOpen || !item.selected }\">\n <li *ngFor=\"let innerItem of item.featuresCmp\" id=\"innerFeature\">\n <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: innerItem}\"></ng-template>\n </li>\n </ul>\n\n <ng-template #tmplFeatureGroup>\n <button class=\"mc-sidebar-feature-group\" (click)=\"select(item)\" [ngClass]=\"{ 'is-selected': item.selected && !item.category, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"item.link\">\n <span class=\"mc-sidebar-feature-group__container\" [routerLink]=\"item.link\">\n <span class=\"mc-sidebar-feature-group__icon\">\n <ng-container *ngTemplateOutlet=\"item.tmplIcon\"></ng-container>\n </span>\n <div style=\"display:flex;\" *ngIf=\"localOpen\">\n <span class=\"mc-sidebar-feature-group__label\">\n <ng-container *ngTemplateOutlet=\"item.tmplText\"></ng-container>\n </span>\n <div *ngIf=\"localOpen && item?.category\">\n <moz-icon *ngIf=\"!item.selected\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n <moz-icon *ngIf=\"item.selected\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n </div>\n </div>\n </span>\n </a>\n </button>\n </ng-template>\n\n</ng-template>\n\n<ng-template #tmplFeature let-feature=\"feature\">\n <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-selected': feature.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"feature.link\">\n <span class=\"mc-sidebar-feature__container\" (click)=\"feature.subCategory ? selectSubFeature(feature) : select(feature)\">\n <span class=\"mc-sidebar-feature__label\">\n <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n </span>\n </span>\n </a>\n </button>\n</ng-template>\n\n<ng-template #tmplSubFeature let-feature=\"feature\">\n <div class=\"mc-sidebar-sub-feature\" *ngIf=\"!!feature\">\n <button class=\"mc-sidebar-sub-feature__trigger\" (click)=\"closeSubFeature()\">\n <span class=\"mc-sidebar-sub-feature__container\">\n <moz-icon *ngIf=\"localOpen\" [iconName]=\"'Navigation_Arrow_Back_24px'\"></moz-icon>\n <span class=\"mc-sidebar-sub-feature__trigger__label\">\n <ng-container *ngTemplateOutlet=\"feature.tmplText\"></ng-container>\n </span>\n </span>\n </button>\n <ul>\n <li *ngFor=\"let item of feature.featuresCmp\" class=\"mc-sidebar-sub-feature__item\" id=\"sub-features\">\n <ng-template *ngTemplateOutlet=\"tmplFeature; context: {feature: item}\"></ng-template>\n </li>\n </ul>\n </div>\n</ng-template>\n\n<ng-template #sidebarUtility let-utility=\"utility\">\n <button class=\"mc-sidebar-segment\" [ngClass]=\"{ 'is-selected': utility.selected, 'is-open': localOpen, 'is-close': !localOpen }\">\n <a href=\"#\" [routerLink]=\"utility.link\">\n <span class=\"mc-sidebar-segment__container\" (click)=\"select(utility)\">\n <span class=\"mc-sidebar-segment__icon\">\n <ng-container *ngTemplateOutlet=\"utility.tmplIcon\"></ng-container>\n </span>\n <span class=\"mc-sidebar-segment__label\">\n <ng-container *ngTemplateOutlet=\"utility.tmplText\"></ng-container>\n </span>\n </span>\n </a>\n </button>\n</ng-template>\n\n<ng-template #sidebarUser>\n <ng-container *ngIf=\"userCmp && userCmp.templateRef\">\n <div class=\"mc-sidebar-user\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n <button class=\"mc-sidebar-user__header\">\n <span class=\"mc-sidebar-user__header__picture\">\n <ng-template #tmplProfilPicture>\n <ng-container *ngTemplateOutlet=\"userCmp.tmplPicture\"></ng-container>\n </ng-template>\n <moz-icon *ngIf=\"!userCmp.tmplPicture; else tmplProfilPicture\" [iconName]=\"'User_Account_Profile--View_24px'\"></moz-icon>\n </span>\n <div style=\"display:flex; width: 100%;\" *ngIf=\"localOpen\">\n <p class=\"mc-sidebar-user__header__information\">\n <ng-container *ngTemplateOutlet=\"userCmp.templateRef\"></ng-container>\n </p>\n <span (click)=\"toggleUser()\" *ngIf=\"userCmp?.features?.length\" class=\"mc-sidebar-user__header__information__icon\">\n <moz-icon *ngIf=\"!userCmp.localOpen\" [iconName]=\"'Navigation_Control_More_16px'\"></moz-icon>\n\n <moz-icon *ngIf=\"userCmp.localOpen\" [iconName]=\"'Navigation_Control_Less_16px'\"></moz-icon>\n </span>\n </div>\n </button>\n\n <ul *ngIf=\"userCmp.features?.length && userCmp.localOpen\" [ngClass]=\"userCmp.localOpen ? 'is-open' : 'is-close'\"\n id=\"user-content\" ref=\"content\" class=\"mc-sidebar-user__content\">\n <li *ngFor=\"let userFeature of userCmp.features\">\n <button class=\"mc-sidebar-feature\" [ngClass]=\"{ 'is-open': localOpen, 'is-close': !localOpen }\">\n <span class=\"mc-sidebar-feature__container\">\n <span class=\"mc-sidebar-feature__label\">\n <ng-container *ngTemplateOutlet=\"userFeature\"></ng-container>\n </span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </ng-container>\n</ng-template>\n\n<ng-template #separator>\n <span role=\"separator\" class=\"mc-sidebar-separator\" [ngClass]=\"localOpen ? 'is-open' : 'is-close'\">\n </span>\n</ng-template>\n", styles: ["a,a:hover,a:visited,a:focus,a:active{text-decoration:none;color:inherit}.mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;font-family:LeroyMerlin,sans-serif;color:#fff;box-sizing:border-box;fill:#fff;width:320px;background:#082435;display:block;height:100vh}.mc-sidebar__container{height:100%;display:flex;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;min-height:92px;width:100%;font-size:inherit;font-family:inherit;position:relative;display:flex}.mc-sidebar__trigger__container{position:relative;margin:28px 20px;height:32px;width:100%}.mc-sidebar__trigger__container>*{position:absolute;top:0;right:0;width:24px;height:24px}.mc-sidebar__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{transition:width .3s ease-in-out}.mc-sidebar.is-close{transition:width .3s ease-in-out;width:64px;padding:0}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}.mc-sidebar-segment{font-size:.875rem;line-height:1.5714285714;background:none;border:none;cursor:pointer;flex:0;font-family:inherit;text-decoration:none;color:#fff;display:flex;overflow:hidden;min-height:40px;padding:0;width:100%}.mc-sidebar-segment__container{display:flex;align-items:center;width:100%;padding:8px 0}.mc-sidebar-segment__icon{flex-shrink:0}.mc-sidebar-segment__label{margin-left:10px}.mc-sidebar-segment.is-selected{background:#007f8c}.mc-sidebar-segment:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-segment:focus-visible .mc-sidebar-segment__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-segment:hover{background:#405d68}.mc-sidebar-segment.is-close .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 20px;width:24px}.mc-sidebar-segment.is-close .mc-sidebar-segment__label{opacity:0}.mc-sidebar-segment.is-open .mc-sidebar-segment__container{transition:margin .3s ease-in-out;margin:0 32px}.mc-sidebar-segment.is-open__label{opacity:1}.mc-sidebar-section{display:flex;flex-direction:row;flex:1;align-items:flex-start;min-height:38px;overflow-x:hidden;overflow-y:auto;overflow-y:overlay;padding:1px 0;scrollbar-color:#009eac #082435;scrollbar-width:thin}.mc-sidebar-section ul,.mc-sidebar-section li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-section ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-section ul li{flex-direction:column;box-sizing:border-box;margin:4px 0}.mc-sidebar-section ul li:first-child{margin-top:0}.mc-sidebar-section ul li:last-child{margin-bottom:0}.mc-sidebar-section ul.is-hidden{transition:margin-left .3s ease-in-out;margin-left:-320px;opacity:0}.mc-sidebar-section ul.is-visible{transition:margin-left .3s ease-in-out;margin-left:0}.mc-sidebar-section::-webkit-scrollbar{width:5px;height:10px;background:#082435}.mc-sidebar-section::-webkit-scrollbar-thumb{background:#009eac}.mc-sidebar-feature-group{background:none;border:none;color:#fff;cursor:pointer;font-size:inherit;font-family:inherit;text-align:initial;margin:0;padding:0;min-height:40px;overflow:hidden;text-decoration:none}.mc-sidebar-feature-group__container{display:flex;align-items:center;margin:5px 0;padding:8px 0;transition:margin .3s ease-in-out}.mc-sidebar-feature-group__label{font-size:.875rem;line-height:1.2857142857;margin:0 8px;width:200px;min-width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature-group__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature-group__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature-group__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature-group__label:hover+.mc-sidebar-feature-group__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature-group__content{overflow:hidden;transition:height .3s ease-in-out}.mc-sidebar-feature-group__content.is-close{height:0}.mc-sidebar-feature-group__content.is-open{height:auto}.mc-sidebar-feature-group__content li#innerFeature{margin:0}.mc-sidebar-feature-group.is-selected{background:#007f8c}.mc-sidebar-feature-group.is-close .mc-sidebar-feature-group__container{margin:0 20px;width:24px}.mc-sidebar-feature-group.is-open .mc-sidebar-feature-group__container{margin:0 32px}.mc-sidebar-feature-group:hover{background:#405d68}.mc-sidebar-feature-group:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature-group:focus-visible .mc-sidebar-feature-group__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-feature-group ul,.mc-sidebar-feature-group li{list-style-type:none;margin:0;padding:0;display:flex;width:100%}.mc-sidebar-feature-group ul{align-items:start;flex-direction:column;justify-content:center}.mc-sidebar-feature-group ul li{flex-direction:column;box-sizing:border-box}.mc-sidebar-feature{font-size:16px;min-width:200px;cursor:pointer;flex:1;display:flex;color:#fff;line-height:22px;overflow:hidden;background:none;border:none;padding:0;text-align:left;font-family:inherit;text-decoration:none}.mc-sidebar-feature__container{display:flex;align-items:center;width:100%;padding-top:8px;padding-bottom:8px}.mc-sidebar-feature__container span{max-width:200px;min-width:200px}.mc-sidebar-feature__label{font-size:.875rem;line-height:1.2857142857;flex:1;margin-right:8px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical}.mc-sidebar-feature__label__tooltip{opacity:0;transition:0s opacity;background-color:#5b737d;border:1px solid white;border-radius:4px;position:absolute;pointer-events:none;left:calc(100% - 16px);padding:8px 16px;width:188px}.mc-sidebar-feature__label__tooltip__pointer{position:absolute;top:50%;left:-8px;top:calc(50% - 6px);width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid white}.mc-sidebar-feature__label__tooltip__pointer div{position:relative;top:-6px;left:2px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid #5b737d}.mc-sidebar-feature__label:hover+.mc-sidebar-feature__label__tooltip{opacity:1;transition-delay:1s}.mc-sidebar-feature__icon{margin-right:8px}.mc-sidebar-feature.is-selected{background:#007f8c}.mc-sidebar-feature.is-close{transition:padding .3s ease-in-out;padding:0}.mc-sidebar-feature.is-close .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:20px;width:24px}.mc-sidebar-feature.is-open{transition:padding .3s ease-in-out;padding:0 32px}.mc-sidebar-feature.is-open .mc-sidebar-feature__container{transition:padding-left .3s ease-in-out;padding-left:32px}.mc-sidebar-feature.is-disabled{color:#92a2a9;fill:#92a2a9}.mc-sidebar-feature:hover{background:#405d68}.mc-sidebar-feature:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-feature:focus-visible .mc-sidebar-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature{width:320px}.mc-sidebar-sub-feature__trigger{background:none;border:none;cursor:pointer;display:flex;margin:0;font-size:inherit;font-family:inherit;width:100%;padding:0 32px}.mc-sidebar-sub-feature__trigger__label{font-size:16px;font-weight:700;margin-left:8px;color:#fff}.mc-sidebar-sub-feature__trigger__item{margin:-8px 0 24px}.mc-sidebar-sub-feature__trigger:focus-visible{box-shadow:none;border:none;outline:none}.mc-sidebar-sub-feature__trigger:focus-visible .mc-sidebar-sub-feature__container{box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar-sub-feature__container{display:flex;align-items:center;width:100%;height:24px;padding:8px 0}.mc-sidebar-sub-feature ul{list-style:none;margin:0;padding:0}.mc-sidebar-sub-feature ul li#sub-features{margin:0}.mc-sidebar-user{left:0;right:0;bottom:0;position:absolute;background:#264653}.mc-sidebar-user__header{display:flex;align-items:center;background:none;border:none;color:#fff;font-size:inherit;font-family:inherit;text-align:initial;margin:0;width:100%;overflow:hidden}.mc-sidebar-user__header:focus-visible{box-shadow:none;border:none;border-radius:12px;outline:1px solid #0b96cc;outline-offset:-5px}.mc-sidebar-user__header:hover{cursor:pointer}.mc-sidebar-user__header:hover .mc-sidebar-user__header__information__icon{background:#082435}.mc-sidebar-user__header__picture{display:flex;align-items:center;justify-content:center;background:#5b737d;border-radius:24px;width:48px;min-width:48px;height:48px;overflow:hidden}.mc-sidebar-user__header__picture img{display:block}.mc-sidebar-user__header__information{justify-content:space-around;display:flex;flex-direction:column;flex:1;margin:0 0 0 8px;height:40px}.mc-sidebar-user__header__information__icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:4px}.mc-sidebar-user__header__information__identity{font-size:16px;font-weight:700}.mc-sidebar-user__header__information__title,.mc-sidebar-user__header__information__identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:176px}.mc-sidebar-user__content#user-content{list-style-type:none;padding:0;overflow:hidden;margin:-8px 0 24px;transition:all .3s ease-in-out}.mc-sidebar-user__content#user-content.is-close{height:0;margin:0}.mc-sidebar-user__content#user-content .is-open{height:auto}.mc-sidebar-user.is-close .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 8px;margin:8px 0}.mc-sidebar-user.is-open .mc-sidebar-user__header{transition:padding .3s ease-in-out;padding:12px 24px 12px 32px;margin:8px 0}.mc-sidebar-separator{border-bottom:1px solid #5b737d;display:flex}.mc-sidebar-separator.is-close{transition:margin .3s ease-in-out;margin:24px 0}.mc-sidebar-separator.is-open{transition:margin .3s ease-in-out;margin:24px 32px}\n"] }]
|
|
@@ -38,7 +38,7 @@ export class StepComponent {
|
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
StepComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
41
|
-
StepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepComponent, selector: "moz-step", inputs: { title: "title" }, host: { properties: { "class": "this.hostCssClasses" } }, ngImport: i0, template: "<span class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n <moz-icon\n *ngIf=\"validated\"\n class=\"mc-stepper__icon\"\n iconName=\"Navigation_Notification_Available_16px\"\n ></moz-icon>\n <ng-container *ngIf=\"isCurrent\">{{ indicator }}</ng-container>\n</span>\n<div class=\"mc-stepper__detail\">\n <span class=\"mc-stepper__title\">{{ title }}</span>\n <span class=\"mc-stepper__label\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [".mc-stepper{width:100%}.mc-stepper__list{display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{align-items:center;display:flex;flex-direction:column}.mc-stepper__item{flex:1;position:relative}.mc-stepper__item:before,.mc-stepper__item:after{background-color:#999;content:\"\";height:.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item:before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item:after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#4d5bf5}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current:before{background-color:#4d5bf5}.mc-stepper__item--current .mc-stepper__indicator{background-color:#4d5bf5;color:#fff}.mc-stepper__item--current .mc-stepper__label{color:#000}.mc-stepper__item--validated:before,.mc-stepper__item--validated:not(.mc-stepper__item--current):after{background-color:#4d5bf5}.mc-stepper__link{cursor:pointer;height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#4d5bf5}.mc-stepper__indicator{font-size:.875rem;line-height:1.1428571429;font-weight:600;align-items:center;border:2px solid #999999;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;height:1.5rem;justify-content:center;margin-bottom:.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#4d5bf5;max-width:100%}.mc-stepper__detail{font-size:.875rem;line-height:1.2857142857;color:#666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#4d5bf5}.mc-stepper:not(.mc-stepper--compact) .mc-stepper__item:first-child:before,.mc-stepper:not(.mc-stepper--compact) .mc-stepper__item:last-child:after{content:none}.mc-stepper--compact .mc-stepper__item{align-items:flex-start;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item:before,.mc-stepper--compact .mc-stepper__item:after{bottom:0;border-radius:6px;height:.25rem;top:auto}.mc-stepper--compact .mc-stepper__item:after{width:100%}.mc-stepper--compact .mc-stepper__item:before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{align-items:flex-start;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item:before,.mc-stepper--shrinked .mc-stepper__item:after{bottom:0;border-radius:6px;height:.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item:after{width:100%}.mc-stepper--shrinked .mc-stepper__item:before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:.25rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "moz-icon", inputs: ["iconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
41
|
+
StepComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StepComponent, selector: "moz-step", inputs: { title: "title" }, host: { properties: { "class": "this.hostCssClasses" } }, ngImport: i0, template: "<span class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n <moz-icon\n *ngIf=\"validated\"\n class=\"mc-stepper__icon\"\n iconName=\"Navigation_Notification_Available_16px\"\n ></moz-icon>\n <ng-container *ngIf=\"isCurrent\">{{ indicator }}</ng-container>\n</span>\n<div class=\"mc-stepper__detail\">\n <span class=\"mc-stepper__title\">{{ title }}</span>\n <span class=\"mc-stepper__label\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [".mc-stepper{width:100%}.mc-stepper__list{display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{align-items:center;display:flex;flex-direction:column}.mc-stepper__item{flex:1;position:relative}.mc-stepper__item:before,.mc-stepper__item:after{background-color:#999;content:\"\";height:.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item:before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item:after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#4d5bf5}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current:before{background-color:#4d5bf5}.mc-stepper__item--current .mc-stepper__indicator{background-color:#4d5bf5;color:#fff}.mc-stepper__item--current .mc-stepper__label{color:#000}.mc-stepper__item--validated:before,.mc-stepper__item--validated:not(.mc-stepper__item--current):after{background-color:#4d5bf5}.mc-stepper__link{cursor:pointer;height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#4d5bf5}.mc-stepper__indicator{font-size:.875rem;line-height:1.1428571429;font-weight:600;align-items:center;border:2px solid #999999;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;height:1.5rem;justify-content:center;margin-bottom:.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#4d5bf5;max-width:100%}.mc-stepper__detail{font-size:.875rem;line-height:1.2857142857;color:#666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#4d5bf5}.mc-stepper:not(.mc-stepper--compact) .mc-stepper__item:first-child:before,.mc-stepper:not(.mc-stepper--compact) .mc-stepper__item:last-child:after{content:none}.mc-stepper--compact .mc-stepper__item{align-items:flex-start;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item:before,.mc-stepper--compact .mc-stepper__item:after{bottom:0;border-radius:6px;height:.25rem;top:auto}.mc-stepper--compact .mc-stepper__item:after{width:100%}.mc-stepper--compact .mc-stepper__item:before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{align-items:flex-start;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item:before,.mc-stepper--shrinked .mc-stepper__item:after{bottom:0;border-radius:6px;height:.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item:after{width:100%}.mc-stepper--shrinked .mc-stepper__item:before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:.25rem}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
42
42
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StepComponent, decorators: [{
|
|
43
43
|
type: Component,
|
|
44
44
|
args: [{ selector: 'moz-step', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span class=\"mc-stepper__indicator\" aria-hidden=\"true\">\n <moz-icon\n *ngIf=\"validated\"\n class=\"mc-stepper__icon\"\n iconName=\"Navigation_Notification_Available_16px\"\n ></moz-icon>\n <ng-container *ngIf=\"isCurrent\">{{ indicator }}</ng-container>\n</span>\n<div class=\"mc-stepper__detail\">\n <span class=\"mc-stepper__title\">{{ title }}</span>\n <span class=\"mc-stepper__label\">\n <ng-content></ng-content>\n </span>\n</div>\n", styles: [".mc-stepper{width:100%}.mc-stepper__list{display:flex;padding-left:0;margin-bottom:0;margin-top:0}.mc-stepper__item,.mc-stepper__link{align-items:center;display:flex;flex-direction:column}.mc-stepper__item{flex:1;position:relative}.mc-stepper__item:before,.mc-stepper__item:after{background-color:#999;content:\"\";height:.125rem;position:absolute;top:11px;width:calc(50% - 1.25rem);z-index:1}.mc-stepper__item:before{border-top-right-radius:1px;border-bottom-right-radius:1px;left:0}.mc-stepper__item:after{border-top-left-radius:1px;border-bottom-left-radius:1px;right:0}.mc-stepper__item--current .mc-stepper__indicator,.mc-stepper__item--validated .mc-stepper__indicator{border-color:#4d5bf5}.mc-stepper__item--current .mc-stepper__detail,.mc-stepper__item--validated .mc-stepper__detail{font-weight:600}.mc-stepper__item--current:before{background-color:#4d5bf5}.mc-stepper__item--current .mc-stepper__indicator{background-color:#4d5bf5;color:#fff}.mc-stepper__item--current .mc-stepper__label{color:#000}.mc-stepper__item--validated:before,.mc-stepper__item--validated:not(.mc-stepper__item--current):after{background-color:#4d5bf5}.mc-stepper__link{cursor:pointer;height:100%;text-decoration:none;width:100%}.mc-stepper__link:hover .mc-stepper__label,.mc-stepper__link:focus .mc-stepper__label{color:#4d5bf5}.mc-stepper__indicator{font-size:.875rem;line-height:1.1428571429;font-weight:600;align-items:center;border:2px solid #999999;border-radius:50%;box-sizing:border-box;display:flex;flex-shrink:0;height:1.5rem;justify-content:center;margin-bottom:.5rem;position:relative;width:1.5rem;z-index:2}.mc-stepper__icon{fill:#4d5bf5;max-width:100%}.mc-stepper__detail{font-size:.875rem;line-height:1.2857142857;color:#666;text-align:center;width:auto}.mc-stepper__title{display:none;color:#4d5bf5}.mc-stepper:not(.mc-stepper--compact) .mc-stepper__item:first-child:before,.mc-stepper:not(.mc-stepper--compact) .mc-stepper__item:last-child:after{content:none}.mc-stepper--compact .mc-stepper__item{align-items:flex-start;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--compact .mc-stepper__item:before,.mc-stepper--compact .mc-stepper__item:after{bottom:0;border-radius:6px;height:.25rem;top:auto}.mc-stepper--compact .mc-stepper__item:after{width:100%}.mc-stepper--compact .mc-stepper__item:before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--compact .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--compact .mc-stepper__indicator{display:none}.mc-stepper--compact .mc-stepper__detail{text-align:left}.mc-stepper--compact .mc-stepper__title{display:block;margin-bottom:.25rem}@media screen and (max-width: 679px){.mc-stepper--shrinked .mc-stepper__item{align-items:flex-start;flex-direction:row;padding-bottom:1.25rem}.mc-stepper--shrinked .mc-stepper__item:before,.mc-stepper--shrinked .mc-stepper__item:after{bottom:0;border-radius:6px;height:.25rem;top:auto}.mc-stepper--shrinked .mc-stepper__item:after{width:100%}.mc-stepper--shrinked .mc-stepper__item:before{z-index:2;width:calc(var(--current) * 100% / var(--steps))}.mc-stepper--shrinked .mc-stepper__item:not(.mc-stepper__item--current){display:none}.mc-stepper--shrinked .mc-stepper__indicator{display:none}.mc-stepper--shrinked .mc-stepper__detail{text-align:left}.mc-stepper--shrinked .mc-stepper__title{display:block;margin-bottom:.25rem}}\n"] }]
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, Inject, ViewEncapsulation } from '@angular/core';
|
|
2
2
|
import { LAYER_DATA, LAYER_REF } from '../../../layer/tokens';
|
|
3
|
+
import { Subject } from 'rxjs';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
import * as i1 from "@angular/common";
|
|
5
6
|
import * as i2 from "../../../tag/tag.component";
|
|
@@ -7,24 +8,28 @@ export class TaglistLayerContentComponent {
|
|
|
7
8
|
constructor(data, layerRef) {
|
|
8
9
|
this.data = data;
|
|
9
10
|
this.layerRef = layerRef;
|
|
11
|
+
this.tagType = 'removable';
|
|
10
12
|
this.tagItems = [];
|
|
11
13
|
this.tagSize = 's';
|
|
12
|
-
this.
|
|
14
|
+
this.destroyed = new Subject();
|
|
15
|
+
this.taglistService = data.taglistService;
|
|
13
16
|
this.tagSize = data.size;
|
|
14
|
-
this.
|
|
15
|
-
this.
|
|
16
|
-
|
|
17
|
+
this.tagType = data.type;
|
|
18
|
+
this._removedTagFromLayer$ = data._removedTagFromLayer$;
|
|
19
|
+
this.taglistService.tagItems$.subscribe((tagItems) => {
|
|
20
|
+
this.tagItems = tagItems;
|
|
17
21
|
});
|
|
18
22
|
}
|
|
19
23
|
removeTagEvent(tagItem) {
|
|
20
24
|
this._removedTagFromLayer$.next(tagItem);
|
|
25
|
+
this.taglistService.setTagItems(this.tagItems.filter((tag) => tag.id !== tagItem.id));
|
|
21
26
|
}
|
|
22
27
|
}
|
|
23
28
|
TaglistLayerContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistLayerContentComponent, deps: [{ token: LAYER_DATA }, { token: LAYER_REF }], target: i0.ɵɵFactoryTarget.Component });
|
|
24
|
-
TaglistLayerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TaglistLayerContentComponent, selector: "moz-taglist-layer-content", host: { properties: { "class.mc-taglist__manage": "true" } }, ngImport: i0, template: "<div class=\"mc-taglist__body\">\n <div class=\"mc-taglist\">\n <moz-tag\n type=\"
|
|
29
|
+
TaglistLayerContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TaglistLayerContentComponent, selector: "moz-taglist-layer-content", host: { properties: { "class.mc-taglist__manage": "true" } }, ngImport: i0, template: "<div class=\"mc-taglist__body\">\n <div class=\"mc-taglist\">\n <moz-tag\n [type]=\"tagType\"\n *ngFor=\"let tagItem of tagItems\"\n [size]=\"tagSize\"\n (clickOnRemove)=\"removeTagEvent(tagItem)\"\n >\n {{ tagItem.label }}\n </moz-tag>\n </div>\n</div>\n", styles: [".mc-taglist__footer{display:flex;justify-content:space-evenly;align-items:center}.mc-taglist__manage{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 0}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
25
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistLayerContentComponent, decorators: [{
|
|
26
31
|
type: Component,
|
|
27
|
-
args: [{ selector: 'moz-taglist-layer-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.mc-taglist__manage]': 'true' }, template: "<div class=\"mc-taglist__body\">\n <div class=\"mc-taglist\">\n <moz-tag\n type=\"
|
|
32
|
+
args: [{ selector: 'moz-taglist-layer-content', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class.mc-taglist__manage]': 'true' }, template: "<div class=\"mc-taglist__body\">\n <div class=\"mc-taglist\">\n <moz-tag\n [type]=\"tagType\"\n *ngFor=\"let tagItem of tagItems\"\n [size]=\"tagSize\"\n (clickOnRemove)=\"removeTagEvent(tagItem)\"\n >\n {{ tagItem.label }}\n </moz-tag>\n </div>\n</div>\n", styles: [".mc-taglist__footer{display:flex;justify-content:space-evenly;align-items:center}.mc-taglist__manage{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 0}\n"] }]
|
|
28
33
|
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
|
|
29
34
|
type: Inject,
|
|
30
35
|
args: [LAYER_DATA]
|
|
@@ -32,4 +37,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
32
37
|
type: Inject,
|
|
33
38
|
args: [LAYER_REF]
|
|
34
39
|
}] }]; } });
|
|
35
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
40
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnbGlzdC1sYXllci1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3RhZ2xpc3QvY29tcG9uZW50cy90YWdsaXN0LWxheWVyLWNvbnRlbnQvdGFnbGlzdC1sYXllci1jb250ZW50LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3RhZ2xpc3QvY29tcG9uZW50cy90YWdsaXN0LWxheWVyLWNvbnRlbnQvdGFnbGlzdC1sYXllci1jb250ZW50LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFFLGlCQUFpQixFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRTlGLE9BQU8sRUFBRSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0sdUJBQXVCLENBQUM7QUFHOUQsT0FBTyxFQUFFLE9BQU8sRUFBYSxNQUFNLE1BQU0sQ0FBQzs7OztBQVUxQyxNQUFNLE9BQU8sNEJBQTRCO0lBUXZDLFlBQ3NDLElBQVMsRUFDVixRQUFrQjtRQURqQixTQUFJLEdBQUosSUFBSSxDQUFLO1FBQ1YsYUFBUSxHQUFSLFFBQVEsQ0FBVTtRQVRoRCxZQUFPLEdBQVksV0FBVyxDQUFDO1FBQy9CLGFBQVEsR0FBYyxFQUFFLENBQUM7UUFDekIsWUFBTyxHQUFjLEdBQUcsQ0FBQztRQUd4QixjQUFTLEdBQUcsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQU1oQyxJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUM7UUFDMUMsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDO1FBQ3pCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQztRQUN6QixJQUFJLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLHFCQUFxQixDQUFDO1FBQ3hELElBQUksQ0FBQyxjQUFjLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFFO1lBQ25ELElBQUksQ0FBQyxRQUFRLEdBQUcsUUFBUSxDQUFDO1FBQzNCLENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVNLGNBQWMsQ0FBQyxPQUFnQjtRQUNwQyxJQUFJLENBQUMscUJBQXFCLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxjQUFjLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUUsQ0FBQyxHQUFHLENBQUMsRUFBRSxLQUFLLE9BQU8sQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO0lBQ3hGLENBQUM7OzBIQXhCVSw0QkFBNEIsa0JBUzdCLFVBQVUsYUFDVixTQUFTOzhHQVZSLDRCQUE0QiwrSENmekMscVNBWUE7NEZER2EsNEJBQTRCO2tCQVJ4QyxTQUFTOytCQUNFLDJCQUEyQixtQkFHcEIsdUJBQXVCLENBQUMsTUFBTSxpQkFDaEMsaUJBQWlCLENBQUMsSUFBSSxRQUMvQixFQUFFLDRCQUE0QixFQUFFLE1BQU0sRUFBRTs7MEJBVzNDLE1BQU07MkJBQUMsVUFBVTs7MEJBQ2pCLE1BQU07MkJBQUMsU0FBUyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIEluamVjdCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFRhZ0l0ZW0sIFRhZ1R5cGUgfSBmcm9tICcuLi8uLi8uLi90YWcvdGFnLXR5cGUnO1xuaW1wb3J0IHsgTEFZRVJfREFUQSwgTEFZRVJfUkVGIH0gZnJvbSAnLi4vLi4vLi4vbGF5ZXIvdG9rZW5zJztcbmltcG9ydCB7IExheWVyUmVmIH0gZnJvbSAnLi4vLi4vLi4vbGF5ZXIvaW50ZXJmYWNlcy9sYXllci1yZWYnO1xuaW1wb3J0IHsgVGFnbGlzdFNlcnZpY2UgfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy90YWdsaXN0LnNlcnZpY2UnO1xuaW1wb3J0IHsgU3ViamVjdCwgdGFrZVVudGlsIH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21vei10YWdsaXN0LWxheWVyLWNvbnRlbnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFnbGlzdC1sYXllci1jb250ZW50LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFnbGlzdC1sYXllci1jb250ZW50LmNvbXBvbmVudC5zY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICBob3N0OiB7ICdbY2xhc3MubWMtdGFnbGlzdF9fbWFuYWdlXSc6ICd0cnVlJyB9LFxufSlcbmV4cG9ydCBjbGFzcyBUYWdsaXN0TGF5ZXJDb250ZW50Q29tcG9uZW50IHtcbiAgcHVibGljIHRhZ1R5cGU6IFRhZ1R5cGUgPSAncmVtb3ZhYmxlJztcbiAgcHVibGljIHRhZ0l0ZW1zOiBUYWdJdGVtW10gPSBbXTtcbiAgcHVibGljIHRhZ1NpemU6ICdzJyB8ICdtJyA9ICdzJztcbiAgcHJpdmF0ZSBfcmVtb3ZlZFRhZ0Zyb21MYXllciQ7XG4gIHByaXZhdGUgdGFnbGlzdFNlcnZpY2U6IFRhZ2xpc3RTZXJ2aWNlO1xuICBwcml2YXRlIGRlc3Ryb3llZCA9IG5ldyBTdWJqZWN0KCk7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgQEluamVjdChMQVlFUl9EQVRBKSBwdWJsaWMgcmVhZG9ubHkgZGF0YTogYW55LFxuICAgIEBJbmplY3QoTEFZRVJfUkVGKSBwdWJsaWMgcmVhZG9ubHkgbGF5ZXJSZWY6IExheWVyUmVmXG4gICkge1xuICAgIHRoaXMudGFnbGlzdFNlcnZpY2UgPSBkYXRhLnRhZ2xpc3RTZXJ2aWNlO1xuICAgIHRoaXMudGFnU2l6ZSA9IGRhdGEuc2l6ZTtcbiAgICB0aGlzLnRhZ1R5cGUgPSBkYXRhLnR5cGU7XG4gICAgdGhpcy5fcmVtb3ZlZFRhZ0Zyb21MYXllciQgPSBkYXRhLl9yZW1vdmVkVGFnRnJvbUxheWVyJDtcbiAgICB0aGlzLnRhZ2xpc3RTZXJ2aWNlLnRhZ0l0ZW1zJC5zdWJzY3JpYmUoKHRhZ0l0ZW1zKSA9PiB7XG4gICAgICB0aGlzLnRhZ0l0ZW1zID0gdGFnSXRlbXM7XG4gICAgfSk7XG4gIH1cblxuICBwdWJsaWMgcmVtb3ZlVGFnRXZlbnQodGFnSXRlbTogVGFnSXRlbSk6IHZvaWQge1xuICAgIHRoaXMuX3JlbW92ZWRUYWdGcm9tTGF5ZXIkLm5leHQodGFnSXRlbSk7XG4gICAgdGhpcy50YWdsaXN0U2VydmljZS5zZXRUYWdJdGVtcyh0aGlzLnRhZ0l0ZW1zLmZpbHRlcigodGFnKSA9PiB0YWcuaWQgIT09IHRhZ0l0ZW0uaWQpKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cIm1jLXRhZ2xpc3RfX2JvZHlcIj5cbiAgPGRpdiBjbGFzcz1cIm1jLXRhZ2xpc3RcIj5cbiAgICA8bW96LXRhZ1xuICAgICAgW3R5cGVdPVwidGFnVHlwZVwiXG4gICAgICAqbmdGb3I9XCJsZXQgdGFnSXRlbSBvZiB0YWdJdGVtc1wiXG4gICAgICBbc2l6ZV09XCJ0YWdTaXplXCJcbiAgICAgIChjbGlja09uUmVtb3ZlKT1cInJlbW92ZVRhZ0V2ZW50KHRhZ0l0ZW0pXCJcbiAgICA+XG4gICAgICB7eyB0YWdJdGVtLmxhYmVsIH19XG4gICAgPC9tb3otdGFnPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { Injectable } from '@angular/core';
|
|
2
|
+
import { BehaviorSubject } from 'rxjs';
|
|
3
|
+
import * as i0 from "@angular/core";
|
|
4
|
+
export class TaglistService {
|
|
5
|
+
constructor() {
|
|
6
|
+
this._tagItems$ = new BehaviorSubject([]);
|
|
7
|
+
this.tagItems$ = this._tagItems$.asObservable();
|
|
8
|
+
}
|
|
9
|
+
setTagItems(tagItems) {
|
|
10
|
+
this._tagItems$.next(tagItems);
|
|
11
|
+
}
|
|
12
|
+
getTagItems() {
|
|
13
|
+
return this._tagItems$.getValue();
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
TaglistService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
17
|
+
TaglistService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistService });
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistService, decorators: [{
|
|
19
|
+
type: Injectable
|
|
20
|
+
}] });
|
|
21
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFnbGlzdC5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvdGFnbGlzdC9zZXJ2aWNlcy90YWdsaXN0LnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMzQyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sTUFBTSxDQUFDOztBQUl2QyxNQUFNLE9BQU8sY0FBYztJQUQzQjtRQUVTLGVBQVUsR0FBRyxJQUFJLGVBQWUsQ0FBWSxFQUFFLENBQUMsQ0FBQztRQUNoRCxjQUFTLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxZQUFZLEVBQUUsQ0FBQztLQVNuRDtJQVBDLFdBQVcsQ0FBQyxRQUFtQjtRQUM3QixJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztJQUNqQyxDQUFDO0lBRUQsV0FBVztRQUNULE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNwQyxDQUFDOzs0R0FWVSxjQUFjO2dIQUFkLGNBQWM7NEZBQWQsY0FBYztrQkFEMUIsVUFBVSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEluamVjdGFibGUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEJlaGF2aW9yU3ViamVjdCB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgVGFnSXRlbSB9IGZyb20gJy4uLy4uL3RhZy90YWctdHlwZSc7XG5cbkBJbmplY3RhYmxlKClcbmV4cG9ydCBjbGFzcyBUYWdsaXN0U2VydmljZSB7XG4gIHB1YmxpYyBfdGFnSXRlbXMkID0gbmV3IEJlaGF2aW9yU3ViamVjdDxUYWdJdGVtW10+KFtdKTtcbiAgcHVibGljIHRhZ0l0ZW1zJCA9IHRoaXMuX3RhZ0l0ZW1zJC5hc09ic2VydmFibGUoKTtcblxuICBzZXRUYWdJdGVtcyh0YWdJdGVtczogVGFnSXRlbVtdKTogdm9pZCB7XG4gICAgdGhpcy5fdGFnSXRlbXMkLm5leHQodGFnSXRlbXMpO1xuICB9XG5cbiAgZ2V0VGFnSXRlbXMoKTogVGFnSXRlbVtdIHtcbiAgICByZXR1cm4gdGhpcy5fdGFnSXRlbXMkLmdldFZhbHVlKCk7XG4gIH1cbn1cbiJdfQ==
|