@mozaic-ds/angular 0.27.0-test.0 → 0.27.0-test.2
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/checkbox/checkbox.component.d.ts +4 -3
- package/adeo/components/checkbox-group/checkbox-group.component.d.ts +11 -13
- package/adeo/components/file-uploader/file-uploader.component.d.ts +9 -12
- package/adeo/components/option-buttons/option-button/option-button.component.d.ts +3 -3
- package/adeo/components/option-buttons/option-buttons.component.d.ts +5 -10
- package/adeo/components/radio/radio.component.d.ts +12 -14
- package/adeo/esm2020/components/autocomplete/autocomplete.component.mjs +3 -3
- package/adeo/esm2020/components/checkbox/checkbox.component.mjs +8 -7
- package/adeo/esm2020/components/checkbox-group/checkbox-group.component.mjs +41 -62
- package/adeo/esm2020/components/datatable/moz-datatable.component.mjs +3 -3
- package/adeo/esm2020/components/dropdown/dropdown.component.mjs +3 -3
- package/adeo/esm2020/components/file-uploader/file-uploader.component.mjs +28 -52
- package/adeo/esm2020/components/option-buttons/option-button/option-button.component.mjs +12 -9
- package/adeo/esm2020/components/option-buttons/option-buttons.component.mjs +19 -38
- package/adeo/esm2020/components/radio/radio.component.mjs +32 -37
- package/adeo/esm2020/components/taglist/components/taglist-layer-content/taglist-layer-content.component.mjs +1 -1
- package/adeo/esm2020/components/taglist/taglist.component.mjs +4 -3
- package/adeo/esm2020/components/taglist/taglist.module.mjs +2 -4
- package/adeo/fesm2015/mozaic-ds-angular.mjs +140 -219
- package/adeo/fesm2015/mozaic-ds-angular.mjs.map +1 -1
- package/adeo/fesm2020/mozaic-ds-angular.mjs +135 -203
- package/adeo/fesm2020/mozaic-ds-angular.mjs.map +1 -1
- package/adeo/package.json +1 -1
- package/bricoman/components/checkbox/checkbox.component.d.ts +4 -3
- package/bricoman/components/checkbox-group/checkbox-group.component.d.ts +11 -13
- package/bricoman/components/file-uploader/file-uploader.component.d.ts +9 -12
- package/bricoman/components/option-buttons/option-button/option-button.component.d.ts +3 -3
- package/bricoman/components/option-buttons/option-buttons.component.d.ts +5 -10
- package/bricoman/components/radio/radio.component.d.ts +12 -14
- package/bricoman/esm2020/components/autocomplete/autocomplete.component.mjs +3 -3
- package/bricoman/esm2020/components/checkbox/checkbox.component.mjs +8 -7
- package/bricoman/esm2020/components/checkbox-group/checkbox-group.component.mjs +41 -62
- package/bricoman/esm2020/components/datatable/moz-datatable.component.mjs +3 -3
- package/bricoman/esm2020/components/dropdown/dropdown.component.mjs +3 -3
- package/bricoman/esm2020/components/file-uploader/file-uploader.component.mjs +28 -52
- package/bricoman/esm2020/components/option-buttons/option-button/option-button.component.mjs +12 -9
- package/bricoman/esm2020/components/option-buttons/option-buttons.component.mjs +19 -38
- package/bricoman/esm2020/components/radio/radio.component.mjs +32 -37
- package/bricoman/esm2020/components/taglist/components/taglist-layer-content/taglist-layer-content.component.mjs +1 -1
- package/bricoman/esm2020/components/taglist/taglist.component.mjs +4 -3
- package/bricoman/esm2020/components/taglist/taglist.module.mjs +2 -4
- package/bricoman/fesm2015/mozaic-ds-angular.mjs +140 -219
- package/bricoman/fesm2015/mozaic-ds-angular.mjs.map +1 -1
- package/bricoman/fesm2020/mozaic-ds-angular.mjs +135 -203
- package/bricoman/fesm2020/mozaic-ds-angular.mjs.map +1 -1
- package/bricoman/package.json +1 -1
- package/components/checkbox/checkbox.component.d.ts +4 -3
- package/components/checkbox-group/checkbox-group.component.d.ts +11 -13
- package/components/file-uploader/file-uploader.component.d.ts +9 -12
- package/components/option-buttons/option-button/option-button.component.d.ts +3 -3
- package/components/option-buttons/option-buttons.component.d.ts +5 -10
- package/components/radio/radio.component.d.ts +12 -14
- package/esm2020/components/autocomplete/autocomplete.component.mjs +3 -3
- package/esm2020/components/checkbox/checkbox.component.mjs +8 -7
- package/esm2020/components/checkbox-group/checkbox-group.component.mjs +41 -62
- package/esm2020/components/datatable/moz-datatable.component.mjs +3 -3
- package/esm2020/components/dropdown/dropdown.component.mjs +3 -3
- package/esm2020/components/file-uploader/file-uploader.component.mjs +28 -52
- package/esm2020/components/option-buttons/option-button/option-button.component.mjs +12 -9
- package/esm2020/components/option-buttons/option-buttons.component.mjs +19 -38
- package/esm2020/components/radio/radio.component.mjs +32 -37
- package/esm2020/components/taglist/components/taglist-layer-content/taglist-layer-content.component.mjs +1 -1
- package/esm2020/components/taglist/taglist.component.mjs +4 -3
- package/esm2020/components/taglist/taglist.module.mjs +2 -4
- package/fesm2015/mozaic-ds-angular.mjs +140 -219
- package/fesm2015/mozaic-ds-angular.mjs.map +1 -1
- package/fesm2020/mozaic-ds-angular.mjs +135 -203
- package/fesm2020/mozaic-ds-angular.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as i1 from '@angular/common';
|
|
2
2
|
import { CommonModule, DOCUMENT } from '@angular/common';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Component, ChangeDetectionStrategy, Input, NgModule, ViewEncapsulation, Injectable, Host, HostBinding, EventEmitter, Output, Inject, ElementRef, ViewChild, HostListener, forwardRef, InjectionToken, ViewContainerRef, Optional,
|
|
4
|
+
import { Component, ChangeDetectionStrategy, Input, NgModule, ViewEncapsulation, Injectable, Host, HostBinding, EventEmitter, Output, Inject, ElementRef, ViewChild, HostListener, forwardRef, InjectionToken, ViewContainerRef, Optional, ContentChildren, TemplateRef, ContentChild, Directive, Injector } from '@angular/core';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
|
-
import { FormsModule, NG_VALUE_ACCESSOR, NgControl, FormControlName, FormGroupDirective
|
|
6
|
+
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, NgControl, FormControlName, FormGroupDirective } from '@angular/forms';
|
|
7
7
|
import { of, tap, catchError, throwError, finalize, shareReplay, first, Subject, BehaviorSubject, distinctUntilChanged, filter, takeUntil, fromEvent, map, debounceTime, startWith, pairwise, timer, switchMap, merge, combineLatest, delay as delay$1 } from 'rxjs';
|
|
8
8
|
import * as i1$1 from '@angular/common/http';
|
|
9
9
|
import { trigger, transition, group, query, style, animate } from '@angular/animations';
|
|
@@ -1102,7 +1102,7 @@ AutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
|
|
|
1102
1102
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
1103
1103
|
multi: true,
|
|
1104
1104
|
},
|
|
1105
|
-
], usesOnChanges: true, ngImport: i0, template: "<div\n id=\"js-autocomplete\"\n class=\"mc-autocomplete mc-autocomplete--clearable\"\n [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n [ngStyle]=\"{\n '--autocomplete-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--autocomplete-width': '100%'\n }\"\n>\n <moz-listbox\n #listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-autocomplete__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n type=\"removable\"\n class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <div class=\"mc-left-icon-input\">\n <moz-icon\n class=\"mc-left-icon-input__icon\"\n [iconName]=\"'Navigation_Display_Search_24px'\"\n ></moz-icon>\n <input\n moz-input\n [type]=\"'text'\"\n [invalid]=\"invalid\"\n class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n [valid]=\"valid\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [(ngModel)]=\"searchValue\"\n (ngModelChange)=\"searchEvent()\"\n (focusin)=\"focusinEvent()\"\n (focusout)=\"focusoutEvent($event)\"\n (click)=\"openListbox()\"\n />\n </div>\n\n <div class=\"mc-autocomplete__tools\">\n <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-autocomplete__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon\n ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n {{ errorContentText }}\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:gray;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.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-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: TextInputComponent, selector: "input[moz-input]", inputs: ["size", "invalid", "valid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1105
|
+
], usesOnChanges: true, ngImport: i0, template: "<div\n id=\"js-autocomplete\"\n class=\"mc-autocomplete mc-autocomplete--clearable\"\n [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n [ngStyle]=\"{\n '--autocomplete-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--autocomplete-width': '100%'\n }\"\n>\n <moz-listbox\n #listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-autocomplete__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n [type]=\"disabled ? 'text' : 'removable'\"\n class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <div class=\"mc-left-icon-input\">\n <moz-icon\n class=\"mc-left-icon-input__icon\"\n [iconName]=\"'Navigation_Display_Search_24px'\"\n ></moz-icon>\n <input\n moz-input\n [type]=\"'text'\"\n [invalid]=\"invalid\"\n class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n [valid]=\"valid\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [(ngModel)]=\"searchValue\"\n (ngModelChange)=\"searchEvent()\"\n (focusin)=\"focusinEvent()\"\n (focusout)=\"focusoutEvent($event)\"\n (click)=\"openListbox()\"\n />\n </div>\n\n <div class=\"mc-autocomplete__tools\">\n <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-autocomplete__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon\n ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n {{ errorContentText }}\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:gray;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.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-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: TextInputComponent, selector: "input[moz-input]", inputs: ["size", "invalid", "valid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1106
1106
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1107
1107
|
type: Component,
|
|
1108
1108
|
args: [{ selector: 'moz-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -1111,7 +1111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1111
1111
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
1112
1112
|
multi: true,
|
|
1113
1113
|
},
|
|
1114
|
-
], template: "<div\n id=\"js-autocomplete\"\n class=\"mc-autocomplete mc-autocomplete--clearable\"\n [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n [ngStyle]=\"{\n '--autocomplete-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--autocomplete-width': '100%'\n }\"\n>\n <moz-listbox\n #listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-autocomplete__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n type=\"removable\"\n class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <div class=\"mc-left-icon-input\">\n <moz-icon\n class=\"mc-left-icon-input__icon\"\n [iconName]=\"'Navigation_Display_Search_24px'\"\n ></moz-icon>\n <input\n moz-input\n [type]=\"'text'\"\n [invalid]=\"invalid\"\n class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n [valid]=\"valid\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [(ngModel)]=\"searchValue\"\n (ngModelChange)=\"searchEvent()\"\n (focusin)=\"focusinEvent()\"\n (focusout)=\"focusoutEvent($event)\"\n (click)=\"openListbox()\"\n />\n </div>\n\n <div class=\"mc-autocomplete__tools\">\n <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-autocomplete__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon\n ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n {{ errorContentText }}\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:gray;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.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-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}\n"] }]
|
|
1114
|
+
], template: "<div\n id=\"js-autocomplete\"\n class=\"mc-autocomplete mc-autocomplete--clearable\"\n [ngClass]=\"{ 'mc-autocomplete--multi': multiple }\"\n [ngStyle]=\"{\n '--autocomplete-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--autocomplete-width': '100%'\n }\"\n>\n <moz-listbox\n #listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-autocomplete__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n [type]=\"disabled ? 'text' : 'removable'\"\n class=\"mc-autocomplete__tag mc-tag-removable mc-tag-removable--s\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <div class=\"mc-left-icon-input\">\n <moz-icon\n class=\"mc-left-icon-input__icon\"\n [iconName]=\"'Navigation_Display_Search_24px'\"\n ></moz-icon>\n <input\n moz-input\n [type]=\"'text'\"\n [invalid]=\"invalid\"\n class=\"mc-left-icon-input__input mc-text-input mc-autocomplete__trigger\"\n [valid]=\"valid\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n [(ngModel)]=\"searchValue\"\n (ngModelChange)=\"searchEvent()\"\n (focusin)=\"focusinEvent()\"\n (focusout)=\"focusoutEvent($event)\"\n (click)=\"openListbox()\"\n />\n </div>\n\n <div class=\"mc-autocomplete__tools\">\n <div class=\"mc-autocomplete__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-autocomplete__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-autocomplete__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon\n ><span class=\"mc-autocomplete__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n<div class=\"mc-autocomplete__error\" *ngIf=\"invalid\">\n {{ errorContentText }}\n</div>\n", styles: [".mc-left-icon-input{position:relative}.mc-left-icon-input__icon{position:absolute;z-index:1;top:50%;transform:translateY(-50%);fill:gray;pointer-events:none}.mc-left-icon-input .mc-left-icon-input__icon{left:.75rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input .mc-left-icon-input__input{padding-left:2.9375rem}.mc-left-icon-input--s .mc-left-icon-input__icon{left:.5rem;top:50%;width:1.5rem;height:1.5rem}.mc-left-icon-input--s .mc-left-icon-input__input{padding-left:2.4375rem}.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-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-autocomplete{align-self:start;position:relative;min-width:18rem;max-width:var(--autocomplete-width, auto);width:100%}.mc-autocomplete__main{position:relative}.mc-autocomplete__tag,.mc-autocomplete__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-autocomplete__tag{left:2.75rem}.mc-autocomplete__trigger{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mc-autocomplete__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:.75rem}.is-valid+.mc-autocomplete__tools,.is-invalid+.mc-autocomplete__tools{right:2.5rem}.mc-autocomplete__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-autocomplete__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-autocomplete__clear,.mc-autocomplete__clear-icon{height:1.5rem;width:1.5rem}.mc-autocomplete__clear-icon{fill:#666}.mc-autocomplete__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-autocomplete__error{font-size:.875rem;line-height:1.2857142857;color:#c61112;display:inline-block;margin-top:.25rem}.mc-autocomplete--multi .mc-autocomplete__trigger{padding-left:calc(2.9375rem + var(--autocomplete-tag-width, 0px))}\n"] }]
|
|
1115
1115
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { listboxItems: [{
|
|
1116
1116
|
type: Input
|
|
1117
1117
|
}], multiple: [{
|
|
@@ -1457,10 +1457,10 @@ class TaglistComponent {
|
|
|
1457
1457
|
}
|
|
1458
1458
|
}
|
|
1459
1459
|
TaglistComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistComponent, deps: [{ token: TaglistService }, { token: LayerService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1460
|
-
TaglistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TaglistComponent, selector: "moz-taglist", inputs: { tagItems: "tagItems", tagSize: "tagSize", showAllTitle: "showAllTitle", showAll: "showAll", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", max: "max", tagType: "tagType" }, outputs: { removeTag: "removeTag" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-taglist\">\n <ng-container *ngFor=\"let tagItem of taglistService.getTagItems(); let i = index\">\n <moz-tag\n class=\"tag-selected\"\n *ngIf=\"i < max || showAll\"\n type=\"removable\"\n [size]=\"tagSize\"\n [type]=\"tagType\"\n (clickOnRemove)=\"removeTagEvent(tagItem)\"\n >\n {{ tagItem.label }}\n </moz-tag>\n </ng-container>\n <ng-container *ngIf=\"!showAll && tagItems.length > max\">\n <a\n moz-tag\n [size]=\"tagSize\"\n class=\"tag-selected mc-taglist__showhide\"\n (click)=\"showAllEvent()\"\n >{{ showAllTitle }}</a\n >\n </ng-container>\n</div>\n", styles: [".mc-taglist{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.mc-taglist__showhide{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1460
|
+
TaglistComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TaglistComponent, selector: "moz-taglist", inputs: { tagItems: "tagItems", tagSize: "tagSize", showAllTitle: "showAllTitle", showAll: "showAll", layerTagsTitle: "layerTagsTitle", layerTagsIcon: "layerTagsIcon", max: "max", tagType: "tagType" }, outputs: { removeTag: "removeTag" }, providers: [TaglistService], usesOnChanges: true, ngImport: i0, template: "<div class=\"mc-taglist\">\n <ng-container *ngFor=\"let tagItem of taglistService.getTagItems(); let i = index\">\n <moz-tag\n class=\"tag-selected\"\n *ngIf=\"i < max || showAll\"\n type=\"removable\"\n [size]=\"tagSize\"\n [type]=\"tagType\"\n (clickOnRemove)=\"removeTagEvent(tagItem)\"\n >\n {{ tagItem.label }}\n </moz-tag>\n </ng-container>\n <ng-container *ngIf=\"!showAll && tagItems.length > max\">\n <a\n moz-tag\n [size]=\"tagSize\"\n class=\"tag-selected mc-taglist__showhide\"\n (click)=\"showAllEvent()\"\n >{{ showAllTitle }}</a\n >\n </ng-container>\n</div>\n", styles: [".mc-taglist{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.mc-taglist__showhide{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1461
1461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistComponent, decorators: [{
|
|
1462
1462
|
type: Component,
|
|
1463
|
-
args: [{ selector: 'moz-taglist', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-taglist\">\n <ng-container *ngFor=\"let tagItem of taglistService.getTagItems(); let i = index\">\n <moz-tag\n class=\"tag-selected\"\n *ngIf=\"i < max || showAll\"\n type=\"removable\"\n [size]=\"tagSize\"\n [type]=\"tagType\"\n (clickOnRemove)=\"removeTagEvent(tagItem)\"\n >\n {{ tagItem.label }}\n </moz-tag>\n </ng-container>\n <ng-container *ngIf=\"!showAll && tagItems.length > max\">\n <a\n moz-tag\n [size]=\"tagSize\"\n class=\"tag-selected mc-taglist__showhide\"\n (click)=\"showAllEvent()\"\n >{{ showAllTitle }}</a\n >\n </ng-container>\n</div>\n", styles: [".mc-taglist{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.mc-taglist__showhide{cursor:pointer}\n"] }]
|
|
1463
|
+
args: [{ selector: 'moz-taglist', providers: [TaglistService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-taglist\">\n <ng-container *ngFor=\"let tagItem of taglistService.getTagItems(); let i = index\">\n <moz-tag\n class=\"tag-selected\"\n *ngIf=\"i < max || showAll\"\n type=\"removable\"\n [size]=\"tagSize\"\n [type]=\"tagType\"\n (clickOnRemove)=\"removeTagEvent(tagItem)\"\n >\n {{ tagItem.label }}\n </moz-tag>\n </ng-container>\n <ng-container *ngIf=\"!showAll && tagItems.length > max\">\n <a\n moz-tag\n [size]=\"tagSize\"\n class=\"tag-selected mc-taglist__showhide\"\n (click)=\"showAllEvent()\"\n >{{ showAllTitle }}</a\n >\n </ng-container>\n</div>\n", styles: [".mc-taglist{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.mc-taglist__showhide{cursor:pointer}\n"] }]
|
|
1464
1464
|
}], ctorParameters: function () { return [{ type: TaglistService }, { type: LayerService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tagItems: [{
|
|
1465
1465
|
type: Input
|
|
1466
1466
|
}], tagSize: [{
|
|
@@ -1499,14 +1499,13 @@ class TaglistModule {
|
|
|
1499
1499
|
}
|
|
1500
1500
|
TaglistModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
1501
1501
|
TaglistModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TaglistModule, declarations: [TaglistComponent, TaglistLayerContentComponent], imports: [CommonModule, TagModule, ButtonModule], exports: [TaglistComponent, TaglistLayerContentComponent] });
|
|
1502
|
-
TaglistModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistModule,
|
|
1502
|
+
TaglistModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistModule, imports: [CommonModule, TagModule, ButtonModule] });
|
|
1503
1503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TaglistModule, decorators: [{
|
|
1504
1504
|
type: NgModule,
|
|
1505
1505
|
args: [{
|
|
1506
1506
|
declarations: [TaglistComponent, TaglistLayerContentComponent],
|
|
1507
1507
|
imports: [CommonModule, TagModule, ButtonModule],
|
|
1508
1508
|
exports: [TaglistComponent, TaglistLayerContentComponent],
|
|
1509
|
-
providers: [TaglistService],
|
|
1510
1509
|
}]
|
|
1511
1510
|
}] });
|
|
1512
1511
|
|
|
@@ -1823,11 +1822,9 @@ const CHECKBOX_CONTROL_VALUE_ACCESSOR = {
|
|
|
1823
1822
|
multi: true,
|
|
1824
1823
|
};
|
|
1825
1824
|
class CheckboxComponent {
|
|
1826
|
-
|
|
1827
|
-
return this._checked;
|
|
1828
|
-
}
|
|
1829
|
-
constructor(cd) {
|
|
1825
|
+
constructor(cd, elementRef) {
|
|
1830
1826
|
this.cd = cd;
|
|
1827
|
+
this.elementRef = elementRef;
|
|
1831
1828
|
this.disabled = false;
|
|
1832
1829
|
this.indeterminate = false;
|
|
1833
1830
|
this.invalid = false;
|
|
@@ -1839,6 +1836,9 @@ class CheckboxComponent {
|
|
|
1839
1836
|
this.id = generateId();
|
|
1840
1837
|
}
|
|
1841
1838
|
}
|
|
1839
|
+
get checked() {
|
|
1840
|
+
return this._checked;
|
|
1841
|
+
}
|
|
1842
1842
|
set checked(v) {
|
|
1843
1843
|
this._checked = v;
|
|
1844
1844
|
this.onChange(this._checked);
|
|
@@ -1865,14 +1865,14 @@ class CheckboxComponent {
|
|
|
1865
1865
|
return this.toggleEvent;
|
|
1866
1866
|
}
|
|
1867
1867
|
}
|
|
1868
|
-
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1868
|
+
CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1869
1869
|
CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxComponent, selector: "moz-checkbox", inputs: { disabled: "disabled", indeterminate: "indeterminate", invalid: "invalid", id: "id", checked: "checked" }, host: { properties: { "class.mc-checkbox": "true" } }, providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: "<input\n [id]=\"id\"\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n [checked]=\"checked\"\n (click)=\"toggle()\"\n [ngClass]=\"{ 'is-invalid': invalid }\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n/>\n<label [for]=\"id\" class=\"mc-checkbox__label\">\n <ng-content></ng-content>\n</label>\n", styles: [".mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__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;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #808080;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #808080;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#ff5800;border-color:#ff5800;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#ff5800;border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#ff5800}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1870
1870
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1871
1871
|
type: Component,
|
|
1872
1872
|
args: [{ selector: 'moz-checkbox', providers: [CHECKBOX_CONTROL_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1873
1873
|
'[class.mc-checkbox]': 'true',
|
|
1874
1874
|
}, template: "<input\n [id]=\"id\"\n type=\"checkbox\"\n class=\"mc-checkbox__input\"\n [checked]=\"checked\"\n (click)=\"toggle()\"\n [ngClass]=\"{ 'is-invalid': invalid }\"\n [disabled]=\"disabled\"\n [indeterminate]=\"indeterminate\"\n/>\n<label [for]=\"id\" class=\"mc-checkbox__label\">\n <ng-content></ng-content>\n</label>\n", styles: [".mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__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;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #808080;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #808080;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#ff5800;border-color:#ff5800;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#ff5800;border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#ff5800}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}\n"] }]
|
|
1875
|
-
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
|
|
1875
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { disabled: [{
|
|
1876
1876
|
type: Input
|
|
1877
1877
|
}], indeterminate: [{
|
|
1878
1878
|
type: Input
|
|
@@ -1885,77 +1885,59 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1885
1885
|
}] } });
|
|
1886
1886
|
|
|
1887
1887
|
class CheckboxGroupComponent {
|
|
1888
|
-
|
|
1889
|
-
|
|
1890
|
-
}
|
|
1891
|
-
set checkboxSelectedId(value) {
|
|
1892
|
-
this._checkboxSelectedId = value;
|
|
1893
|
-
if (this.control) {
|
|
1894
|
-
this.control.setValue(value);
|
|
1895
|
-
this.control.markAsDirty();
|
|
1896
|
-
this.control.markAsTouched();
|
|
1897
|
-
}
|
|
1898
|
-
else {
|
|
1899
|
-
this.writeValue(value);
|
|
1900
|
-
}
|
|
1901
|
-
}
|
|
1902
|
-
constructor(injector) {
|
|
1903
|
-
this.injector = injector;
|
|
1888
|
+
constructor(renderer) {
|
|
1889
|
+
this.renderer = renderer;
|
|
1904
1890
|
this.legend = '';
|
|
1905
1891
|
this.requirementText = '';
|
|
1906
1892
|
this.helpId = '';
|
|
1907
1893
|
this.helpText = '';
|
|
1908
1894
|
this.inline = false;
|
|
1909
|
-
this.onCheckboxGroupChange = () => { };
|
|
1910
|
-
this.onCheckboxGroupTouch = () => { };
|
|
1911
1895
|
this._checkboxSelectedId = [];
|
|
1896
|
+
this.onChange = () => { };
|
|
1897
|
+
this.onTouch = () => { };
|
|
1912
1898
|
}
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
if (ngControl instanceof FormControlName) {
|
|
1916
|
-
this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
|
|
1917
|
-
}
|
|
1918
|
-
}
|
|
1919
|
-
ngAfterContentInit() {
|
|
1920
|
-
var _a;
|
|
1921
|
-
(_a = this.checkboxComponents) === null || _a === void 0 ? void 0 : _a.toArray().forEach((checkboxComponent) => {
|
|
1922
|
-
if (checkboxComponent.checked &&
|
|
1923
|
-
!this.checkboxSelectedId.includes(checkboxComponent.id || '')) {
|
|
1924
|
-
this.checkboxSelectedId = [...this.checkboxSelectedId, checkboxComponent.id || ''];
|
|
1925
|
-
}
|
|
1926
|
-
checkboxComponent.getToggleEvent().subscribe((id) => {
|
|
1927
|
-
this.selectedCheckboxGroupEvent(id);
|
|
1928
|
-
});
|
|
1929
|
-
});
|
|
1899
|
+
get checkboxSelectedId() {
|
|
1900
|
+
return this._checkboxSelectedId;
|
|
1930
1901
|
}
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
if (checkboxSelected === null || checkboxSelected === void 0 ? void 0 : checkboxSelected.find((selected) => selected === checkbox.id)) {
|
|
1935
|
-
checkbox.checked = true;
|
|
1936
|
-
}
|
|
1937
|
-
else {
|
|
1938
|
-
checkbox.checked = false;
|
|
1939
|
-
}
|
|
1940
|
-
checkbox.refreshView();
|
|
1941
|
-
});
|
|
1902
|
+
set checkboxSelectedId(value) {
|
|
1903
|
+
this._checkboxSelectedId = value;
|
|
1904
|
+
this.writeValue(value);
|
|
1942
1905
|
}
|
|
1943
1906
|
writeValue(selectedCheckboxGroup) {
|
|
1944
1907
|
if (selectedCheckboxGroup) {
|
|
1945
|
-
this.
|
|
1908
|
+
this.onChange(selectedCheckboxGroup);
|
|
1946
1909
|
this.updateOptionCardChecked(selectedCheckboxGroup);
|
|
1910
|
+
this.onTouch();
|
|
1911
|
+
this._checkboxSelectedId = selectedCheckboxGroup;
|
|
1947
1912
|
}
|
|
1948
1913
|
}
|
|
1949
1914
|
registerOnChange(fn) {
|
|
1950
|
-
this.
|
|
1915
|
+
this.onChange = fn;
|
|
1951
1916
|
}
|
|
1952
1917
|
registerOnTouched(fn) {
|
|
1953
|
-
this.
|
|
1918
|
+
this.onTouch = fn;
|
|
1954
1919
|
}
|
|
1955
|
-
|
|
1956
|
-
if (
|
|
1957
|
-
this.
|
|
1920
|
+
ngAfterContentInit() {
|
|
1921
|
+
if (this.checkboxComponents) {
|
|
1922
|
+
this.checkboxComponents.forEach((checkboxComponent) => {
|
|
1923
|
+
const className = `mc-field__item`;
|
|
1924
|
+
const nativeElement = checkboxComponent.elementRef.nativeElement;
|
|
1925
|
+
this.renderer.addClass(nativeElement, className);
|
|
1926
|
+
checkboxComponent.getToggleEvent().subscribe((id) => {
|
|
1927
|
+
this.selectedCheckboxGroupEvent(id);
|
|
1928
|
+
});
|
|
1929
|
+
});
|
|
1958
1930
|
}
|
|
1931
|
+
}
|
|
1932
|
+
updateOptionCardChecked(checkboxSelected) {
|
|
1933
|
+
var _a;
|
|
1934
|
+
(_a = this.checkboxComponents) === null || _a === void 0 ? void 0 : _a.forEach((checkbox) => {
|
|
1935
|
+
var _a, _b;
|
|
1936
|
+
checkbox.checked = (_b = checkboxSelected === null || checkboxSelected === void 0 ? void 0 : checkboxSelected.includes((_a = checkbox.id) !== null && _a !== void 0 ? _a : '')) !== null && _b !== void 0 ? _b : false;
|
|
1937
|
+
checkbox.refreshView();
|
|
1938
|
+
});
|
|
1939
|
+
}
|
|
1940
|
+
selectedCheckboxGroupEvent(selectedCheckboxId) {
|
|
1959
1941
|
const index = this.checkboxSelectedId.findIndex((value) => value === selectedCheckboxId);
|
|
1960
1942
|
if (index !== -1) {
|
|
1961
1943
|
this.checkboxSelectedId = [
|
|
@@ -1968,14 +1950,14 @@ class CheckboxGroupComponent {
|
|
|
1968
1950
|
}
|
|
1969
1951
|
}
|
|
1970
1952
|
}
|
|
1971
|
-
CheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token:
|
|
1953
|
+
CheckboxGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxGroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
|
|
1972
1954
|
CheckboxGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxGroupComponent, selector: "moz-checkbox-group", inputs: { legend: "legend", requirementText: "requirementText", helpId: "helpId", helpText: "helpText", inline: "inline", checkboxSelectedId: "checkboxSelectedId" }, providers: [
|
|
1973
1955
|
{
|
|
1974
1956
|
provide: NG_VALUE_ACCESSOR,
|
|
1975
1957
|
useExisting: forwardRef(() => CheckboxGroupComponent),
|
|
1976
1958
|
multi: true,
|
|
1977
1959
|
},
|
|
1978
|
-
], queries: [{ propertyName: "checkboxComponents", predicate: CheckboxComponent }], ngImport: i0, template: "<fieldset class=\"mc-field mc-field--group\">\n <legend *ngIf=\"legend\" class=\"mc-field__legend\">\n {{ legend }}\n <span\n *ngIf=\"requirementText\"\n class=\"mc-field__requirement\"\n [attr.aria-hidden]=\"!requirementText\"\n >\n {{ requirementText }}\n </span>\n </legend>\n <span *ngIf=\"helpText && helpId\" id=\"{{ helpId }}\" class=\"mc-field__help\"> {{ helpText }}</span>\n\n <div class=\"mc-field__container\" [ngClass]=\"{ 'mc-field__container--inline': inline }\">\n <ng-content></ng-content>\n </div>\n</fieldset>\n", styles: ["@charset \"UTF-8\";.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__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;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #808080;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #808080;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#ff5800;border-color:#ff5800;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#ff5800;border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#ff5800}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1960
|
+
], queries: [{ propertyName: "checkboxComponents", predicate: CheckboxComponent }], ngImport: i0, template: "<fieldset class=\"mc-field mc-field--group\">\n <legend *ngIf=\"legend\" class=\"mc-field__legend\">\n {{ legend }}\n <span\n *ngIf=\"requirementText\"\n class=\"mc-field__requirement\"\n [attr.aria-hidden]=\"!requirementText\"\n >\n {{ requirementText }}\n </span>\n </legend>\n <span *ngIf=\"helpText && helpId\" id=\"{{ helpId }}\" class=\"mc-field__help\"> {{ helpText }}</span>\n\n <div class=\"mc-field__container\" [ngClass]=\"{ 'mc-field__container--inline': inline }\">\n <ng-content select=\"moz-checkbox\"></ng-content>\n </div>\n</fieldset>\n", styles: ["@charset \"UTF-8\";.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__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;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #808080;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #808080;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#ff5800;border-color:#ff5800;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#ff5800;border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#ff5800}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
1979
1961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxGroupComponent, decorators: [{
|
|
1980
1962
|
type: Component,
|
|
1981
1963
|
args: [{ selector: 'moz-checkbox-group', encapsulation: ViewEncapsulation.None, providers: [
|
|
@@ -1984,13 +1966,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
1984
1966
|
useExisting: forwardRef(() => CheckboxGroupComponent),
|
|
1985
1967
|
multi: true,
|
|
1986
1968
|
},
|
|
1987
|
-
], template: "<fieldset class=\"mc-field mc-field--group\">\n <legend *ngIf=\"legend\" class=\"mc-field__legend\">\n {{ legend }}\n <span\n *ngIf=\"requirementText\"\n class=\"mc-field__requirement\"\n [attr.aria-hidden]=\"!requirementText\"\n >\n {{ requirementText }}\n </span>\n </legend>\n <span *ngIf=\"helpText && helpId\" id=\"{{ helpId }}\" class=\"mc-field__help\"> {{ helpText }}</span>\n\n <div class=\"mc-field__container\" [ngClass]=\"{ 'mc-field__container--inline': inline }\">\n <ng-content></ng-content>\n </div>\n</fieldset>\n", styles: ["@charset \"UTF-8\";.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__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;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #808080;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #808080;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#ff5800;border-color:#ff5800;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#ff5800;border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#ff5800}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.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}\n"] }]
|
|
1988
|
-
}], ctorParameters: function () {
|
|
1989
|
-
return [{ type: i0.Injector, decorators: [{
|
|
1990
|
-
type: Inject,
|
|
1991
|
-
args: [Injector]
|
|
1992
|
-
}] }];
|
|
1993
|
-
}, propDecorators: { legend: [{
|
|
1969
|
+
], template: "<fieldset class=\"mc-field mc-field--group\">\n <legend *ngIf=\"legend\" class=\"mc-field__legend\">\n {{ legend }}\n <span\n *ngIf=\"requirementText\"\n class=\"mc-field__requirement\"\n [attr.aria-hidden]=\"!requirementText\"\n >\n {{ requirementText }}\n </span>\n </legend>\n <span *ngIf=\"helpText && helpId\" id=\"{{ helpId }}\" class=\"mc-field__help\"> {{ helpText }}</span>\n\n <div class=\"mc-field__container\" [ngClass]=\"{ 'mc-field__container--inline': inline }\">\n <ng-content select=\"moz-checkbox\"></ng-content>\n </div>\n</fieldset>\n", styles: ["@charset \"UTF-8\";.mc-checkbox{align-items:center;display:flex}.mc-checkbox__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-checkbox__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;min-width:20px;min-height:20px;width:1.25rem;height:1.25rem;border-radius:4px;border:2px solid #808080;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-checkbox__input[type=number]::-webkit-inner-spin-button,.mc-checkbox__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-checkbox__input[type=number]{-moz-appearance:textfield}.mc-checkbox__input[type=search]::-webkit-search-decoration:hover,.mc-checkbox__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-checkbox__input::-ms-check{background-color:#fff;border:2px solid #808080;border-radius:4px;color:#fff}.mc-checkbox__input:hover{border-color:#191919}.mc-checkbox__input:hover::-ms-check{border-color:#191919}.mc-checkbox__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-checkbox__input:checked,.mc-checkbox__input:indeterminate{background-color:#ff5800;border-color:#ff5800;background-size:1rem 1rem}.mc-checkbox__input:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\");background-position:center center}.mc-checkbox__input:checked::-ms-check{background-color:#ff5800;border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled){border-color:#ff5800}.mc-checkbox__input:checked:hover:not(:disabled)::-ms-check{border-color:#ff5800}.mc-checkbox__input:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-checkbox__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6}.mc-checkbox__input:disabled:checked{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M7.63 11.21a1 1 0 0 1-1.38 0l-2.92-2.6a1 1 0 1 1 1.34-1.48l2.22 2 4.41-4.34a1 1 0 1 1 1.4 1.42z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled:indeterminate{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23999999' viewBox='0 0 16 16'%3E%3Cpath d='M12 9H4a1 1 0 010-2h8a1 1 0 010 2z'/%3E%3C/svg%3E\")}.mc-checkbox__input:disabled+.mc-checkbox__label{color:gray}.mc-checkbox__input.is-invalid{border-color:#c61112}.mc-checkbox__input.is-invalid::-ms-check{border-color:#c61112}.mc-checkbox__input.is-invalid:hover{border-color:#530000}.mc-checkbox__input.is-invalid:hover::-ms-check{border-color:#530000}.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}\n"] }]
|
|
1970
|
+
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { legend: [{
|
|
1994
1971
|
type: Input
|
|
1995
1972
|
}], requirementText: [{
|
|
1996
1973
|
type: Input
|
|
@@ -2000,11 +1977,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
2000
1977
|
type: Input
|
|
2001
1978
|
}], inline: [{
|
|
2002
1979
|
type: Input
|
|
2003
|
-
}], checkboxSelectedId: [{
|
|
2004
|
-
type: Input
|
|
2005
1980
|
}], checkboxComponents: [{
|
|
2006
1981
|
type: ContentChildren,
|
|
2007
1982
|
args: [CheckboxComponent]
|
|
1983
|
+
}], checkboxSelectedId: [{
|
|
1984
|
+
type: Input
|
|
2008
1985
|
}] } });
|
|
2009
1986
|
|
|
2010
1987
|
/**
|
|
@@ -3038,10 +3015,10 @@ class MozDatatableComponent {
|
|
|
3038
3015
|
}
|
|
3039
3016
|
}
|
|
3040
3017
|
MozDatatableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3041
|
-
MozDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableComponent, selector: "moz-datatable", inputs: { footerSettings: "footerSettings", selectionSettings: "selectionSettings", allowAllSelected: "allowAllSelected", datatableSettings: "datatableSettings", tableSummary: "tableSummary" }, outputs: { rowClick: "rowClick", sortColumn: "sortColumn", rowSelected: "rowSelected", rowAllSelected: "rowAllSelected", emptyBodyButtonClicked: "emptyBodyButtonClicked", pageChange: "pageChange", rowPerPageChange: "rowPerPageChange" }, queries: [{ propertyName: "expansionContentComponent", first: true, predicate: MozDatatableRowExpansionContentComponent, descendants: true }, { propertyName: "headerCellComponents", predicate: MozDatatableHeaderCellComponent }, { propertyName: "contentCellComponents", predicate: MozDatatableContentCellComponent }], viewQueries: [{ propertyName: "selectionComponent", first: true, predicate: MozDatatableSelectionComponent, descendants: true }, { propertyName: "thSelectionRef", first: true, predicate: ["thSelection"], descendants: true }, { propertyName: "thSubRowRef", first: true, predicate: ["thSubRow"], descendants: true }], ngImport: i0, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n <div class=\"mc-datatable__header\">\n <ng-content select=\"moz-datatable-caption\"></ng-content>\n <div>\n <moz-datatable-selection\n [selectionSettings]=\"selectionSettings\"\n [allowAllSelected]=\"allowAllSelected\"\n [paginationEnabled]=\"datatableSettings?.activatePagination\"\n [rowData]=\"datatableSettings?.rowData\"\n (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n ></moz-datatable-selection>\n </div>\n </div>\n <div\n class=\"mc-datatable__container\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <div\n class=\"mc-datatable__main\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n <th\n class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n *ngIf=\"\n datatableSettings?.activateSelection &&\n selectionComponent &&\n selectionSettings &&\n ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n \"\n id=\"checkAllPageRows\"\n #thSelection\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionAllPageRows($event);\n selectionRowEvent($event)\n \"\n [indeterminate]=\"selectionComponent.isIndeterminate\"\n [checked]=\"\n (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n (!selectionSettings.allSelected &&\n !selectionComponent.isIndeterminate &&\n (this.selectionSettings.selectedIds || []).length > 0)\n \"\n [disabled]=\"datatableSettings?.isLoading || false\"\n >\n </moz-checkbox>\n </ng-template>\n </th>\n <th\n *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n class=\"mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n #thSubRow\n ></th>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <th\n class=\"moz-datatable__th\"\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"th-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n\n <ng-template #notLoadingHeading>\n <div\n [mozDatatableSort]=\"columnDef\"\n [ngClass]=\"{ header: columnDef.sort }\"\n (sortEmitter)=\"sortEvent($event)\"\n >\n <ng-container\n *ngIf=\"\n getCustomHeader(columnDef.field) as customHeader;\n else defaultHeaderCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customHeader;\n context: {\n $implicit: {\n content: columnDef\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultHeaderCell>\n {{ columnDef.headerName | uppercase }}\n </ng-template>\n </div>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"\n (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n else emptyBody\n \"\n >\n <ng-container *ngFor=\"let row of getFields(); index as i\">\n <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n <td\n class=\"mc-datatable__fix-first-column\"\n *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n \"\n [(ngModel)]=\"row.selected\"\n [checked]=\"row.selected || false\"\n [disabled]=\"row.disableSelection || false\"\n id=\"checkRow-{{ i }}\"\n >\n </moz-checkbox>\n </ng-template>\n </td>\n <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n <td\n *ngIf=\"row['subRow']; else noSubRow\"\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n >\n <button\n class=\"mc-datatable__expand mc-datatable__btn\"\n (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n >\n <span class=\"mc-datatable__btn-icon\">\n <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n </ng-container>\n <ng-template #subrowClosed>\n <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n </ng-template>\n </span>\n </button>\n </td>\n <ng-template #noSubRow\n ><td\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n ></td\n ></ng-template>\n </ng-container>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <td\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"row-{{ i }}-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCells>\n <ng-container\n *ngIf=\"\n getCustomContent(columnDef.field) as customContent;\n else defaultContentCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customContent;\n context: {\n $implicit: {\n row: row,\n index: i,\n columnDefs: datatableSettings?.columnDefs,\n content: row[columnDef.field]\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultContentCell>\n {{ row[columnDef.field] }}\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n <ng-container>\n <tr *ngIf=\"expandedRows[i]\">\n <td [attr.colspan]=\"getColspanForExpansionRow()\">\n <ng-container\n *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n expansionRowContentComponent;\n context: {\n $implicit: {\n subRowContent: row['subRow'],\n index: i,\n }\n }\n \"\n ></ng-container>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #emptyBody>\n <tr>\n <td class=\"mc-datatable__empty--td\" [attr.colspan]=\"getColspanForExpansionRow()\">\n <div class=\"mc-datatable__empty\">\n <p>\n <strong>\n {{\n datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n }}</strong\n ><br />\n {{\n datatableSettings?.labels?.emptyBodyDescription ||\n 'Please try changing your filters.'\n }}\n </p>\n <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n <button\n moz-button\n [theme]=\"'neutral'\"\n [size]=\"'s'\"\n [variation]=\"'bordered'\"\n (click)=\"emptyButtonClickEvent()\"\n >\n <moz-icon\n iconName=\"{{\n datatableSettings?.icons?.emptyBodyButtonIcon ||\n 'Navigation_Display_Filter_24px'\n }}\"\n ></moz-icon>\n {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n </button>\n </div>\n </div>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <moz-datatable-footer\n *ngIf=\"datatableSettings?.activatePagination\"\n [footerSettings]=\"footerSettings\"\n [isLoading]=\"datatableSettings?.isLoading\"\n (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n (pageChangeEmitter)=\"pageChangeEvent($event)\"\n ></moz-datatable-footer>\n </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#e5e7fa}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#4d5bf5}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:#e6e6e6;color:#666;display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__empty--td{padding:0!important}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: CheckboxComponent, selector: "moz-checkbox", inputs: ["disabled", "indeterminate", "invalid", "id", "checked"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "component", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: ["footerSettings", "isLoading"], outputs: ["rowPerPageChangeEmitter", "pageChangeEmitter"] }, { kind: "component", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: ["selectionSettings", "paginationEnabled", "allowAllSelected", "rowData"], outputs: ["updateSelectionAllEmitter"] }, { kind: "directive", type: MozDatatableSortDirective, selector: "[mozDatatableSort]", inputs: ["mozDatatableSort"], outputs: ["sortEmitter"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None });
|
|
3018
|
+
MozDatatableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MozDatatableComponent, selector: "moz-datatable", inputs: { footerSettings: "footerSettings", selectionSettings: "selectionSettings", allowAllSelected: "allowAllSelected", datatableSettings: "datatableSettings", tableSummary: "tableSummary" }, outputs: { rowClick: "rowClick", sortColumn: "sortColumn", rowSelected: "rowSelected", rowAllSelected: "rowAllSelected", emptyBodyButtonClicked: "emptyBodyButtonClicked", pageChange: "pageChange", rowPerPageChange: "rowPerPageChange" }, queries: [{ propertyName: "expansionContentComponent", first: true, predicate: MozDatatableRowExpansionContentComponent, descendants: true }, { propertyName: "headerCellComponents", predicate: MozDatatableHeaderCellComponent }, { propertyName: "contentCellComponents", predicate: MozDatatableContentCellComponent }], viewQueries: [{ propertyName: "selectionComponent", first: true, predicate: MozDatatableSelectionComponent, descendants: true }, { propertyName: "thSelectionRef", first: true, predicate: ["thSelection"], descendants: true }, { propertyName: "thSubRowRef", first: true, predicate: ["thSubRow"], descendants: true }], ngImport: i0, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n <div class=\"mc-datatable__header\">\n <ng-content select=\"moz-datatable-caption\"></ng-content>\n <div>\n <moz-datatable-selection\n [selectionSettings]=\"selectionSettings\"\n [allowAllSelected]=\"allowAllSelected\"\n [paginationEnabled]=\"datatableSettings?.activatePagination\"\n [rowData]=\"datatableSettings?.rowData\"\n (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n ></moz-datatable-selection>\n </div>\n </div>\n <div\n class=\"mc-datatable__container\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <div\n class=\"mc-datatable__main\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n <th\n class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n *ngIf=\"\n datatableSettings?.activateSelection &&\n selectionComponent &&\n selectionSettings &&\n ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n \"\n id=\"checkAllPageRows\"\n #thSelection\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionAllPageRows($event);\n selectionRowEvent($event)\n \"\n [indeterminate]=\"selectionComponent.isIndeterminate\"\n [checked]=\"\n (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n (!selectionSettings.allSelected &&\n !selectionComponent.isIndeterminate &&\n (this.selectionSettings.selectedIds || []).length > 0)\n \"\n [disabled]=\"datatableSettings?.isLoading || false\"\n >\n </moz-checkbox>\n </ng-template>\n </th>\n <th\n *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n class=\"mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n #thSubRow\n ></th>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <th\n class=\"moz-datatable__th\"\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"th-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n\n <ng-template #notLoadingHeading>\n <div\n [mozDatatableSort]=\"columnDef\"\n [ngClass]=\"{ header: columnDef.sort }\"\n (sortEmitter)=\"sortEvent($event)\"\n >\n <ng-container\n *ngIf=\"\n getCustomHeader(columnDef.field) as customHeader;\n else defaultHeaderCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customHeader;\n context: {\n $implicit: {\n content: columnDef\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultHeaderCell>\n {{ columnDef.headerName | uppercase }}\n </ng-template>\n </div>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"\n (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n else emptyBody\n \"\n >\n <ng-container *ngFor=\"let row of getFields(); index as i\">\n <tr\n class=\"mc-datatable__row-parent\"\n (click)=\"rowClickEvent($event, row)\"\n [ngClass]=\"{ selected: row.selected }\"\n >\n <td\n class=\"mc-datatable__fix-first-column\"\n *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n [ngClass]=\"{ selected: row.selected }\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n \"\n [(ngModel)]=\"row.selected\"\n [checked]=\"row.selected || false\"\n [disabled]=\"row.disableSelection || false\"\n id=\"checkRow-{{ i }}\"\n >\n </moz-checkbox>\n </ng-template>\n </td>\n <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n <td\n *ngIf=\"row['subRow']; else noSubRow\"\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n [ngClass]=\"{ selected: row.selected }\"\n >\n <button\n class=\"mc-datatable__expand mc-datatable__btn\"\n (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n >\n <span class=\"mc-datatable__btn-icon\">\n <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n </ng-container>\n <ng-template #subrowClosed>\n <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n </ng-template>\n </span>\n </button>\n </td>\n <ng-template #noSubRow\n ><td\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n [ngClass]=\"{ selected: row.selected }\"\n ></td\n ></ng-template>\n </ng-container>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <td\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"row-{{ i }}-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCells>\n <ng-container\n *ngIf=\"\n getCustomContent(columnDef.field) as customContent;\n else defaultContentCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customContent;\n context: {\n $implicit: {\n row: row,\n index: i,\n columnDefs: datatableSettings?.columnDefs,\n content: row[columnDef.field]\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultContentCell>\n {{ row[columnDef.field] }}\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n <ng-container>\n <tr *ngIf=\"expandedRows[i]\">\n <td [attr.colspan]=\"getColspanForExpansionRow()\">\n <ng-container\n *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n expansionRowContentComponent;\n context: {\n $implicit: {\n subRowContent: row['subRow'],\n index: i,\n }\n }\n \"\n ></ng-container>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #emptyBody>\n <tr>\n <td class=\"mc-datatable__empty--td\" [attr.colspan]=\"getColspanForExpansionRow()\">\n <div class=\"mc-datatable__empty\">\n <p>\n <strong>\n {{\n datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n }}</strong\n ><br />\n {{\n datatableSettings?.labels?.emptyBodyDescription ||\n 'Please try changing your filters.'\n }}\n </p>\n <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n <button\n moz-button\n [theme]=\"'neutral'\"\n [size]=\"'s'\"\n [variation]=\"'bordered'\"\n (click)=\"emptyButtonClickEvent()\"\n >\n <moz-icon\n iconName=\"{{\n datatableSettings?.icons?.emptyBodyButtonIcon ||\n 'Navigation_Display_Filter_24px'\n }}\"\n ></moz-icon>\n {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n </button>\n </div>\n </div>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <moz-datatable-footer\n *ngIf=\"datatableSettings?.activatePagination\"\n [footerSettings]=\"footerSettings\"\n [isLoading]=\"datatableSettings?.isLoading\"\n (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n (pageChangeEmitter)=\"pageChangeEvent($event)\"\n ></moz-datatable-footer>\n </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#e5e7fa}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#4d5bf5}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:#e6e6e6;color:#666;display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__empty--td{padding:0!important}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}td.selected{background-color:#e5e7fa}tr:hover td{background-color:#e6e6e6}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\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: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "button[moz-button]", inputs: ["iconPosition", "onlyIcon", "theme", "variation", "widthBehavior", "size"] }, { kind: "component", type: CheckboxComponent, selector: "moz-checkbox", inputs: ["disabled", "indeterminate", "invalid", "id", "checked"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "component", type: MozDatatableFooterComponent, selector: "moz-datatable-footer", inputs: ["footerSettings", "isLoading"], outputs: ["rowPerPageChangeEmitter", "pageChangeEmitter"] }, { kind: "component", type: MozDatatableSelectionComponent, selector: "moz-datatable-selection", inputs: ["selectionSettings", "paginationEnabled", "allowAllSelected", "rowData"], outputs: ["updateSelectionAllEmitter"] }, { kind: "directive", type: MozDatatableSortDirective, selector: "[mozDatatableSort]", inputs: ["mozDatatableSort"], outputs: ["sortEmitter"] }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }], encapsulation: i0.ViewEncapsulation.None });
|
|
3042
3019
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MozDatatableComponent, decorators: [{
|
|
3043
3020
|
type: Component,
|
|
3044
|
-
args: [{ selector: 'moz-datatable', encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n <div class=\"mc-datatable__header\">\n <ng-content select=\"moz-datatable-caption\"></ng-content>\n <div>\n <moz-datatable-selection\n [selectionSettings]=\"selectionSettings\"\n [allowAllSelected]=\"allowAllSelected\"\n [paginationEnabled]=\"datatableSettings?.activatePagination\"\n [rowData]=\"datatableSettings?.rowData\"\n (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n ></moz-datatable-selection>\n </div>\n </div>\n <div\n class=\"mc-datatable__container\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <div\n class=\"mc-datatable__main\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n <th\n class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n *ngIf=\"\n datatableSettings?.activateSelection &&\n selectionComponent &&\n selectionSettings &&\n ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n \"\n id=\"checkAllPageRows\"\n #thSelection\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionAllPageRows($event);\n selectionRowEvent($event)\n \"\n [indeterminate]=\"selectionComponent.isIndeterminate\"\n [checked]=\"\n (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n (!selectionSettings.allSelected &&\n !selectionComponent.isIndeterminate &&\n (this.selectionSettings.selectedIds || []).length > 0)\n \"\n [disabled]=\"datatableSettings?.isLoading || false\"\n >\n </moz-checkbox>\n </ng-template>\n </th>\n <th\n *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n class=\"mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n #thSubRow\n ></th>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <th\n class=\"moz-datatable__th\"\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"th-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n\n <ng-template #notLoadingHeading>\n <div\n [mozDatatableSort]=\"columnDef\"\n [ngClass]=\"{ header: columnDef.sort }\"\n (sortEmitter)=\"sortEvent($event)\"\n >\n <ng-container\n *ngIf=\"\n getCustomHeader(columnDef.field) as customHeader;\n else defaultHeaderCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customHeader;\n context: {\n $implicit: {\n content: columnDef\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultHeaderCell>\n {{ columnDef.headerName | uppercase }}\n </ng-template>\n </div>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"\n (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n else emptyBody\n \"\n >\n <ng-container *ngFor=\"let row of getFields(); index as i\">\n <tr class=\"mc-datatable__row-parent\" (click)=\"rowClickEvent($event, row)\">\n <td\n class=\"mc-datatable__fix-first-column\"\n *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n \"\n [(ngModel)]=\"row.selected\"\n [checked]=\"row.selected || false\"\n [disabled]=\"row.disableSelection || false\"\n id=\"checkRow-{{ i }}\"\n >\n </moz-checkbox>\n </ng-template>\n </td>\n <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n <td\n *ngIf=\"row['subRow']; else noSubRow\"\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n >\n <button\n class=\"mc-datatable__expand mc-datatable__btn\"\n (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n >\n <span class=\"mc-datatable__btn-icon\">\n <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n </ng-container>\n <ng-template #subrowClosed>\n <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n </ng-template>\n </span>\n </button>\n </td>\n <ng-template #noSubRow\n ><td\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n ></td\n ></ng-template>\n </ng-container>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <td\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"row-{{ i }}-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCells>\n <ng-container\n *ngIf=\"\n getCustomContent(columnDef.field) as customContent;\n else defaultContentCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customContent;\n context: {\n $implicit: {\n row: row,\n index: i,\n columnDefs: datatableSettings?.columnDefs,\n content: row[columnDef.field]\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultContentCell>\n {{ row[columnDef.field] }}\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n <ng-container>\n <tr *ngIf=\"expandedRows[i]\">\n <td [attr.colspan]=\"getColspanForExpansionRow()\">\n <ng-container\n *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n expansionRowContentComponent;\n context: {\n $implicit: {\n subRowContent: row['subRow'],\n index: i,\n }\n }\n \"\n ></ng-container>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #emptyBody>\n <tr>\n <td class=\"mc-datatable__empty--td\" [attr.colspan]=\"getColspanForExpansionRow()\">\n <div class=\"mc-datatable__empty\">\n <p>\n <strong>\n {{\n datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n }}</strong\n ><br />\n {{\n datatableSettings?.labels?.emptyBodyDescription ||\n 'Please try changing your filters.'\n }}\n </p>\n <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n <button\n moz-button\n [theme]=\"'neutral'\"\n [size]=\"'s'\"\n [variation]=\"'bordered'\"\n (click)=\"emptyButtonClickEvent()\"\n >\n <moz-icon\n iconName=\"{{\n datatableSettings?.icons?.emptyBodyButtonIcon ||\n 'Navigation_Display_Filter_24px'\n }}\"\n ></moz-icon>\n {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n </button>\n </div>\n </div>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <moz-datatable-footer\n *ngIf=\"datatableSettings?.activatePagination\"\n [footerSettings]=\"footerSettings\"\n [isLoading]=\"datatableSettings?.isLoading\"\n (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n (pageChangeEmitter)=\"pageChangeEvent($event)\"\n ></moz-datatable-footer>\n </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#e5e7fa}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#4d5bf5}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:#e6e6e6;color:#666;display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__empty--td{padding:0!important}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"] }]
|
|
3021
|
+
args: [{ selector: 'moz-datatable', encapsulation: ViewEncapsulation.None, template: "<div class=\"mc-datatable\" [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\">\n <div class=\"mc-datatable__header\">\n <ng-content select=\"moz-datatable-caption\"></ng-content>\n <div>\n <moz-datatable-selection\n [selectionSettings]=\"selectionSettings\"\n [allowAllSelected]=\"allowAllSelected\"\n [paginationEnabled]=\"datatableSettings?.activatePagination\"\n [rowData]=\"datatableSettings?.rowData\"\n (updateSelectionAllEmitter)=\"selectionAllRowEvent($event)\"\n ></moz-datatable-selection>\n </div>\n </div>\n <div\n class=\"mc-datatable__container\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <div\n class=\"mc-datatable__main\"\n [ngClass]=\"{ ' mc-datatable-height': datatableSettings?.fixHeaderRow }\"\n >\n <table class=\"mc-datatable__table\" summary=\"{{ tableSummary }}\">\n <thead [ngClass]=\"{ 'fix-header-row': datatableSettings?.fixHeaderRow }\">\n <tr *ngIf=\"getColumns() && getColumns().length > 0\">\n <th\n class=\"mc-datatable__cell-checkbox moz-datatable__th mc-datatable__fix-first-column\"\n *ngIf=\"\n datatableSettings?.activateSelection &&\n selectionComponent &&\n selectionSettings &&\n ((datatableSettings?.rowData || []).length > 0 || datatableSettings?.isLoading)\n \"\n id=\"checkAllPageRows\"\n #thSelection\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionAllPageRows($event);\n selectionRowEvent($event)\n \"\n [indeterminate]=\"selectionComponent.isIndeterminate\"\n [checked]=\"\n (selectionSettings.allSelected && !selectionComponent.isIndeterminate) ||\n (!selectionSettings.allSelected &&\n !selectionComponent.isIndeterminate &&\n (this.selectionSettings.selectedIds || []).length > 0)\n \"\n [disabled]=\"datatableSettings?.isLoading || false\"\n >\n </moz-checkbox>\n </ng-template>\n </th>\n <th\n *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\"\n class=\"mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n #thSubRow\n ></th>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <th\n class=\"moz-datatable__th\"\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"th-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingHeading\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n\n <ng-template #notLoadingHeading>\n <div\n [mozDatatableSort]=\"columnDef\"\n [ngClass]=\"{ header: columnDef.sort }\"\n (sortEmitter)=\"sortEvent($event)\"\n >\n <ng-container\n *ngIf=\"\n getCustomHeader(columnDef.field) as customHeader;\n else defaultHeaderCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customHeader;\n context: {\n $implicit: {\n content: columnDef\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultHeaderCell>\n {{ columnDef.headerName | uppercase }}\n </ng-template>\n </div>\n </ng-template>\n </th>\n </ng-container>\n </tr>\n </thead>\n <tbody>\n <ng-container\n *ngIf=\"\n (datatableSettings?.rowData?.length || 0) > 0 || datatableSettings?.isLoading;\n else emptyBody\n \"\n >\n <ng-container *ngFor=\"let row of getFields(); index as i\">\n <tr\n class=\"mc-datatable__row-parent\"\n (click)=\"rowClickEvent($event, row)\"\n [ngClass]=\"{ selected: row.selected }\"\n >\n <td\n class=\"mc-datatable__fix-first-column\"\n *ngIf=\"datatableSettings?.activateSelection && selectionComponent\"\n [ngClass]=\"{ selected: row.selected }\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCheckbox\">\n <div class=\"skeleton-box mu-mb-100 checkbox-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCheckbox>\n <moz-checkbox\n (change)=\"\n selectionComponent.onUdpateSelectionRow(row); selectionRowEvent($event)\n \"\n [(ngModel)]=\"row.selected\"\n [checked]=\"row.selected || false\"\n [disabled]=\"row.disableSelection || false\"\n id=\"checkRow-{{ i }}\"\n >\n </moz-checkbox>\n </ng-template>\n </td>\n <ng-container *ngIf=\"hasSubRow() && !datatableSettings?.isLoading\">\n <td\n *ngIf=\"row['subRow']; else noSubRow\"\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n [ngClass]=\"{ selected: row.selected }\"\n >\n <button\n class=\"mc-datatable__expand mc-datatable__btn\"\n (click)=\"toggleRowExpansion(i); $event.stopPropagation()\"\n >\n <span class=\"mc-datatable__btn-icon\">\n <ng-container *ngIf=\"!expandedRows[i]; else subrowClosed\">\n <moz-icon [iconName]=\"'Navigation_Control_Circle--More_24px'\"></moz-icon>\n </ng-container>\n <ng-template #subrowClosed>\n <moz-icon [iconName]=\"'Navigation_Control_Circle--Less_24px'\"></moz-icon>\n </ng-template>\n </span>\n </button>\n </td>\n <ng-template #noSubRow\n ><td\n class=\"mc-datatable__cell-button mc-datatable__fix-first-column\"\n [style.left.px]=\"getStyleLeftForColumnFixed()\"\n [ngClass]=\"{ selected: row.selected }\"\n ></td\n ></ng-template>\n </ng-container>\n <ng-container *ngFor=\"let columnDef of getColumns()\">\n <td\n *ngIf=\"!columnDef.hide\"\n [ngClass]=\"{\n 'mc-datatable__fix-first-column':\n datatableSettings?.fixFirstColumn &&\n getUnhiddenColumns()[0].field === columnDef.field\n }\"\n [style.left.px]=\"getLeftValueFixFirstColumn()\"\n id=\"row-{{ i }}-{{ columnDef.field }}\"\n >\n <ng-container *ngIf=\"datatableSettings?.isLoading; else notLoadingCells\">\n <div class=\"skeleton-box mu-mb-100 cells-loading\"></div>\n </ng-container>\n <ng-template #notLoadingCells>\n <ng-container\n *ngIf=\"\n getCustomContent(columnDef.field) as customContent;\n else defaultContentCell\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n customContent;\n context: {\n $implicit: {\n row: row,\n index: i,\n columnDefs: datatableSettings?.columnDefs,\n content: row[columnDef.field]\n }\n }\n \"\n ></ng-container>\n </ng-container>\n <ng-template #defaultContentCell>\n {{ row[columnDef.field] }}\n </ng-template>\n </ng-template>\n </td>\n </ng-container>\n </tr>\n <ng-container>\n <tr *ngIf=\"expandedRows[i]\">\n <td [attr.colspan]=\"getColspanForExpansionRow()\">\n <ng-container\n *ngIf=\"getCustomExpansionRowContent() as expansionRowContentComponent\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n expansionRowContentComponent;\n context: {\n $implicit: {\n subRowContent: row['subRow'],\n index: i,\n }\n }\n \"\n ></ng-container>\n </ng-container>\n </td>\n </tr>\n </ng-container>\n </ng-container>\n </ng-container>\n <ng-template #emptyBody>\n <tr>\n <td class=\"mc-datatable__empty--td\" [attr.colspan]=\"getColspanForExpansionRow()\">\n <div class=\"mc-datatable__empty\">\n <p>\n <strong>\n {{\n datatableSettings?.labels?.emptyBodyTitle || 'There is no result.'\n }}</strong\n ><br />\n {{\n datatableSettings?.labels?.emptyBodyDescription ||\n 'Please try changing your filters.'\n }}\n </p>\n <div *ngIf=\"datatableSettings?.activateEmptyBodyButton\">\n <button\n moz-button\n [theme]=\"'neutral'\"\n [size]=\"'s'\"\n [variation]=\"'bordered'\"\n (click)=\"emptyButtonClickEvent()\"\n >\n <moz-icon\n iconName=\"{{\n datatableSettings?.icons?.emptyBodyButtonIcon ||\n 'Navigation_Display_Filter_24px'\n }}\"\n ></moz-icon>\n {{ datatableSettings?.labels?.emptyBodyButtonTitle || 'Change filters' }}\n </button>\n </div>\n </div>\n </td>\n </tr>\n </ng-template>\n </tbody>\n </table>\n </div>\n <moz-datatable-footer\n *ngIf=\"datatableSettings?.activatePagination\"\n [footerSettings]=\"footerSettings\"\n [isLoading]=\"datatableSettings?.isLoading\"\n (rowPerPageChangeEmitter)=\"rowPerPageChangeEvent($event)\"\n (pageChangeEmitter)=\"pageChangeEvent($event)\"\n ></moz-datatable-footer>\n </div>\n</div>\n", styles: [".mc-datatable{font-family:LeroyMerlin,sans-serif;box-sizing:border-box}.mc-datatable *,.mc-datatable :after,.mc-datatable :before{box-sizing:inherit}.mc-datatable__container{border-radius:4px;box-shadow:0 1px 5px #19191933;background-color:#e6e6e6;overflow:hidden}.mc-datatable__main{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;overflow:auto}.mc-datatable__main::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable__main::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable__main::-webkit-scrollbar-thumb{background:#666666}.mc-datatable__table tr,.mc-datatable thead th,.mc-datatable thead td{height:2.9375rem}.mc-datatable__table{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%}.mc-datatable__table>thead,.mc-datatable__table>tbody{background-color:#fff}.mc-datatable__table th,.mc-datatable__table td{border-bottom:1px solid #b3b3b3;text-align:left;vertical-align:middle;padding-right:1rem;padding-left:1rem}.mc-datatable thead th,.mc-datatable thead td{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase}.mc-datatable__head small,.mc-datatable__cell small{font-size:.6815rem;line-height:1.2839325018;color:#4d4d4d;display:block;font-weight:400;text-transform:none}.mc-datatable tbody tr.selected{background-color:#e5e7fa}.mc-datatable tbody th,.mc-datatable tbody td{font-size:.875rem;line-height:1.2857142857;color:#191919}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable{height:0}.mc-datatable__row-parent:not(.mc-datatable__row-parent--expanded)+.mc-datatable__row-expandable .mc-datatable__row-inner{overflow:hidden;max-height:0}.mc-datatable__row-parent.mc-datatable__row-parent--expanded+.mc-datatable__row-expandable .mc-datatable__row-inner{max-height:100%}.mc-datatable__row-expandable>td{padding:0;border-bottom:0}.mc-datatable__row-expandable--offset-1 table th:first-child,.mc-datatable__row-expandable--offset-1 table td:first-child{padding-left:4.25rem}.mc-datatable__row-expandable--offset-2 table th:first-child,.mc-datatable__row-expandable--offset-2 table td:first-child{padding-left:7.75rem}.mc-datatable__cell-checkbox{width:3.25rem}.mc-datatable__cell-button{width:3.5rem}.mc-datatable__cell-field{min-width:9.375rem}td.mc-datatable__cell-number{text-align:right}.mc-datatable--s .mc-datatable__table tr,.mc-datatable--s .mc-datatable thead th,.mc-datatable--s .mc-datatable thead td{height:2.4375rem}.mc-datatable--l .mc-datatable__table tr,.mc-datatable--l .mc-datatable thead th,.mc-datatable--l .mc-datatable thead td{height:3.4375rem}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky-header .mc-datatable__table>thead{box-shadow:0 4px 20px #19191933;top:0;z-index:3}.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky .mc-datatable__table>tbody>tr:last-child td,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child th,.mc-datatable--sticky-header .mc-datatable__table>tbody>tr:last-child td{border-bottom:transparent}.mc-datatable--sticky .mc-datatable__footer,.mc-datatable--sticky-header .mc-datatable__footer{border-top:1px solid #b3b3b3;position:relative;z-index:3}.mc-datatable--sticky .mc-datatable__main{padding-top:2.9375rem;transform:translateZ(0)}.mc-datatable--sticky .mc-datatable__table{scrollbar-color:#666666 #e6e6e6;scrollbar-width:thin;display:block;overflow-y:auto}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar{background-color:#e6e6e6;height:.5rem;width:.5rem}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-track{background:#e6e6e6}.mc-datatable--sticky .mc-datatable__table::-webkit-scrollbar-thumb{background:#666666}.mc-datatable--sticky .mc-datatable__table>thead{position:fixed;width:100%}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr,.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{display:flex}.mc-datatable--sticky .mc-datatable__table>thead,.mc-datatable--sticky .mc-datatable__table>tbody,.mc-datatable--sticky .mc-datatable__table>thead tr,.mc-datatable--sticky .mc-datatable__table>tbody tr{width:100%}.mc-datatable--sticky .mc-datatable__table>tbody{flex-direction:column}.mc-datatable--sticky .mc-datatable__table>thead th,.mc-datatable--sticky .mc-datatable__table>thead td,.mc-datatable--sticky .mc-datatable__table>tbody th,.mc-datatable--sticky .mc-datatable__table>tbody td{align-items:center}.mc-datatable--sticky .mc-datatable__table>thead th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>thead td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody th:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button),.mc-datatable--sticky .mc-datatable__table>tbody td:not(.mc-datatable__cell-checkbox):not(.mc-datatable__cell-button){flex:1}.mc-datatable--sticky .mc-datatable__cell-checkbox,.mc-datatable--sticky .mc-datatable__cell-button,.mc-datatable--sticky .mc-datatable__cell-field,.mc-datatable--sticky .mc-datatable__cell-number{flex-shrink:0}.mc-datatable--sticky .mc-datatable__cell-number{justify-content:flex-end}.mc-datatable--sticky-header .mc-datatable__main{overflow-y:auto}.mc-datatable--sticky-header .mc-datatable__table>thead{position:sticky}.mc-datatable--overflow-visible .mc-datatable__container,.mc-datatable--overflow-visible .mc-datatable__main{overflow:visible}.mc-datatable__btn{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;align-items:center;background-color:transparent;display:flex}.mc-datatable__btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__btn-icon{fill:#4d5bf5}.mc-datatable__btn-icon,.mc-datatable__btn svg{width:1.5rem;height:1.5rem}.mc-datatable__sort{font-weight:600;font-size:.75rem;line-height:1.3333333333;color:#191919;text-transform:uppercase;align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.mc-datatable__sort-arrow{align-items:center;display:flex;flex-direction:column;height:1.5rem;justify-content:space-around;margin-left:.5rem;width:1.5rem}.mc-datatable__sort-arrow:after,.mc-datatable__sort-arrow:before{background-color:#ccc;content:\"\";flex-shrink:0;height:.5rem;width:.75rem}.mc-datatable__sort-arrow:before{clip-path:polygon(50% 0%,0% 100%,100% 100%)}.asc .mc-datatable__sort-arrow:before{background-color:#333}.desc .mc-datatable__sort-arrow:before{display:none}.mc-datatable__sort-arrow:after{clip-path:polygon(0 0,100% 0,50% 100%)}.asc .mc-datatable__sort-arrow:after{display:none}.desc .mc-datatable__sort-arrow:after{background-color:#333}.mc-datatable__options{width:1.5rem;height:1.5rem}.mc-datatable .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-datatable__topbar,.mc-datatable__filters{padding-bottom:1rem}.mc-datatable__topbar{justify-content:space-between}.mc-datatable__topbar,.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{display:flex;gap:1rem}.mc-datatable__topbar-edition,.mc-datatable__topbar-actions{flex-wrap:wrap}.mc-datatable__topbar-edition{flex-shrink:0}.mc-datatable__topbar-actions{align-items:center;justify-content:flex-end;margin-left:auto}.mc-datatable__filters{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}.mc-datatable__filters:not(:only-child){border-top:1px solid #b3b3b3;padding-top:1rem}.mc-datatable__footer{align-items:center;background-color:#fff;display:flex;padding:.75rem 1rem;gap:1rem}@media screen and (max-width: 679px){.mc-datatable__footer{flex-direction:column}}.mc-datatable__select{display:flex;align-items:center;gap:.5rem}.mc-datatable__select-label{font-size:.875rem;line-height:1.2857142857;color:#333;flex-shrink:0}.mc-datatable__count{font-size:.75rem;line-height:1.3333333333;color:#666}.mc-datatable__pagination{margin-left:auto}.mc-datatable__subtable{border-collapse:collapse;border-spacing:0;caption-side:bottom;width:100%;background-color:#e6e6e6}.mc-datatable__subtable th,.mc-datatable__subtable td{border-bottom-color:#b3b3b3}.mc-datatable__subtable thead th,.mc-datatable__subtable thead td{font-size:.75rem;line-height:1.3333333333;color:#000}.mc-datatable__subtable tbody th,.mc-datatable__subtable tbody td{color:#000}.mc-datatable__empty{font-size:1rem;line-height:1.375;align-items:center;background-color:#e6e6e6;color:#666;display:flex;flex-direction:column;gap:1rem;height:18.1875rem;justify-content:center;text-align:center}.mc-datatable__empty p{margin:0 auto}.mc-datatable__empty strong{font-size:1.125rem;line-height:1.3333333333}.mc-datatable__empty--td{padding:0!important}.fix-header-row{position:sticky;top:0;box-shadow:0 1px 5px #22202033;z-index:1}.header{align-items:center;display:flex;height:100%;font-family:inherit;justify-content:space-between;width:100%}.is-sorted-asc:before{background-color:var(--color-datatable-sort-arrow-active, #333333)}.is-sorted-desc:after{background-color:var(--color-datatable-sort-arrow-active, #333333)}.mc-datatable-height{height:100%}.mc-datatable__sort-arrow{cursor:pointer}.mc-datatable__fix-first-column{position:sticky;background-color:#fff;left:0}td.selected{background-color:#e5e7fa}tr:hover td{background-color:#e6e6e6}.skeleton-box{display:inline-block;position:relative;overflow:hidden;background-color:#ccc}.skeleton-box:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 2s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.checkbox-loading{width:25px;height:25px}.cells-loading{width:250px;height:25px}\n"] }]
|
|
3045
3022
|
}], propDecorators: { footerSettings: [{
|
|
3046
3023
|
type: Input
|
|
3047
3024
|
}], selectionSettings: [{
|
|
@@ -3324,7 +3301,7 @@ DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
|
|
|
3324
3301
|
useExisting: forwardRef(() => DropdownComponent),
|
|
3325
3302
|
multi: true,
|
|
3326
3303
|
},
|
|
3327
|
-
], ngImport: i0, template: "<div\n class=\"mc-dropdown mc-dropdown--clearable\"\n [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n [ngStyle]=\"{\n '--dropdown-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--dropdown-width': '100%'\n }\"\n>\n <moz-listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-dropdown__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n type=\"removable\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <button\n type=\"button\"\n id=\"trigger\"\n class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n [ngClass]=\"{\n 'is-open': openState,\n 'is-invalid': invalid,\n 'is-valid': valid,\n }\"\n aria-haspopup=\"listbox\"\n title=\"Dropdown menu options\"\n [disabled]=\"disabled\"\n aria-expanded=\"false\"\n (click)=\"openListbox()\"\n >\n <div class=\"mc-dropdown__selected-items\">\n <moz-icon *ngIf=\"getIcon()\" [size]=\"iconSize.L\" [iconName]=\"getIcon()\"></moz-icon>\n <ng-container *ngIf=\"multiple; else monoSelection\">{{\n getLabelFromMultipleSelection()\n }}</ng-container>\n <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n </div>\n </button>\n\n <div class=\"mc-dropdown__tools\">\n <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-dropdown__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-dropdown__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon>\n <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n", styles: [".mc-select{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.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #808080;border-radius:4px;color:#333;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:gray;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3304
|
+
], ngImport: i0, template: "<div\n class=\"mc-dropdown mc-dropdown--clearable\"\n [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n [ngStyle]=\"{\n '--dropdown-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--dropdown-width': '100%'\n }\"\n>\n <moz-listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-dropdown__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n [type]=\"disabled ? 'text' : 'removable'\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <button\n type=\"button\"\n id=\"trigger\"\n class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n [ngClass]=\"{\n 'is-open': openState,\n 'is-invalid': invalid,\n 'is-valid': valid,\n }\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled\"\n aria-expanded=\"false\"\n (click)=\"openListbox()\"\n >\n <div class=\"mc-dropdown__selected-items\">\n <moz-icon *ngIf=\"getIcon()\" [size]=\"iconSize.L\" [iconName]=\"getIcon()\"></moz-icon>\n <ng-container *ngIf=\"multiple; else monoSelection\">{{\n getLabelFromMultipleSelection()\n }}</ng-container>\n <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n </div>\n </button>\n\n <div class=\"mc-dropdown__tools\">\n <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-dropdown__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-dropdown__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon>\n <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n", styles: [".mc-select{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.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #808080;border-radius:4px;color:#333;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:gray;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ListboxComponent, selector: "moz-listbox", inputs: ["listboxItems", "multiple", "selectedItems", "type", "overlay", "maxWidth", "maxHeight", "width", "disabled", "withoutOverflow", "isOpen"], outputs: ["itemsSelected", "scrollEnd", "isOpenChange"] }, { kind: "component", type: LoaderComponent, selector: "moz-loader", inputs: ["size", "theme", "isOverlay", "text", "hideOverlay"] }, { kind: "component", type: IconComponent, selector: "moz-icon", inputs: ["iconName", "size"] }, { kind: "component", type: TagComponent, selector: "moz-tag, a[moz-tag]", inputs: ["type", "size", "select"], outputs: ["selectChange", "clickOnRemove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
3328
3305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
3329
3306
|
type: Component,
|
|
3330
3307
|
args: [{ selector: 'moz-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -3333,7 +3310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3333
3310
|
useExisting: forwardRef(() => DropdownComponent),
|
|
3334
3311
|
multi: true,
|
|
3335
3312
|
},
|
|
3336
|
-
], template: "<div\n class=\"mc-dropdown mc-dropdown--clearable\"\n [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n [ngStyle]=\"{\n '--dropdown-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--dropdown-width': '100%'\n }\"\n>\n <moz-listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-dropdown__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n type=\"removable\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <button\n type=\"button\"\n id=\"trigger\"\n class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n [ngClass]=\"{\n 'is-open': openState,\n 'is-invalid': invalid,\n 'is-valid': valid,\n }\"\n aria-haspopup=\"listbox\"\n title=\"Dropdown menu options\"\n [disabled]=\"disabled\"\n aria-expanded=\"false\"\n (click)=\"openListbox()\"\n >\n <div class=\"mc-dropdown__selected-items\">\n <moz-icon *ngIf=\"getIcon()\" [size]=\"iconSize.L\" [iconName]=\"getIcon()\"></moz-icon>\n <ng-container *ngIf=\"multiple; else monoSelection\">{{\n getLabelFromMultipleSelection()\n }}</ng-container>\n <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n </div>\n </button>\n\n <div class=\"mc-dropdown__tools\">\n <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-dropdown__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-dropdown__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon>\n <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n", styles: [".mc-select{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.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #808080;border-radius:4px;color:#333;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:gray;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.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}\n"] }]
|
|
3313
|
+
], template: "<div\n class=\"mc-dropdown mc-dropdown--clearable\"\n [ngClass]=\"{ 'mc-dropdown--multi': multiple }\"\n [ngStyle]=\"{\n '--dropdown-tag-width':\n showSelectedTag && multiple && getSelectedListboxItems().length > 0 ? '3.5rem' : '',\n '--dropdown-width': '100%'\n }\"\n>\n <moz-listbox\n [listboxItems]=\"listboxItems\"\n [(isOpen)]=\"openState\"\n [multiple]=\"multiple\"\n [selectedItems]=\"selectedItems\"\n (itemsSelected)=\"itemsSelectedListboxEvent($event)\"\n (scrollEnd)=\"scrollEndEvent($event)\"\n (isOpenChange)=\"openChangeEvent($event)\"\n >\n <div class=\"mc-dropdown__main\" reference>\n <moz-tag\n *ngIf=\"showSelectedTag && multiple && getSelectedListboxItems().length > 0\"\n class=\"mc-dropdown__tag mc-tag-removable mc-tag-removable--s mc-autocomplete__tag\"\n [type]=\"disabled ? 'text' : 'removable'\"\n [size]=\"'s'\"\n (clickOnRemove)=\"clearFieldEvent()\"\n >\n {{ getSelectedListboxItems().length }}</moz-tag\n >\n\n <button\n type=\"button\"\n id=\"trigger\"\n class=\"mc-select mc-dropdown__trigger mc-button--{{ size }}\"\n [ngClass]=\"{\n 'is-open': openState,\n 'is-invalid': invalid,\n 'is-valid': valid,\n }\"\n aria-haspopup=\"listbox\"\n [disabled]=\"disabled\"\n aria-expanded=\"false\"\n (click)=\"openListbox()\"\n >\n <div class=\"mc-dropdown__selected-items\">\n <moz-icon *ngIf=\"getIcon()\" [size]=\"iconSize.L\" [iconName]=\"getIcon()\"></moz-icon>\n <ng-container *ngIf=\"multiple; else monoSelection\">{{\n getLabelFromMultipleSelection()\n }}</ng-container>\n <ng-template #monoSelection>{{ getLabelFromMonoSelection() }}</ng-template>\n </div>\n </button>\n\n <div class=\"mc-dropdown__tools\">\n <div class=\"mc-dropdown__loader mc-loader mc-loader--s\" *ngIf=\"loading\">\n <span class=\"mc-loader__spinner\">\n <moz-loader class=\"mc-loader__icon\" size=\"s\"></moz-loader>\n </span>\n </div>\n <button\n class=\"mc-dropdown__clear\"\n type=\"button\"\n *ngIf=\"canClearField()\"\n (click)=\"clearFieldEvent()\"\n >\n <moz-icon\n class=\"mc-dropdown__clear-icon\"\n [iconName]=\"'Navigation_Control_Tag--Cross_24px'\"\n ></moz-icon>\n <span class=\"mc-dropdown__clear-text\">{{ labelClearButton }}</span>\n </button>\n </div>\n </div>\n </moz-listbox>\n</div>\n", styles: [".mc-select{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.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px);background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\");background-color:#fff;background-repeat:no-repeat;background-size:1rem 1rem,1.5rem 1.5rem;border:1px solid #808080;border-radius:4px;color:#333;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.mc-select[type=number]::-webkit-inner-spin-button,.mc-select[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-select[type=number]{-moz-appearance:textfield}.mc-select[type=search]::-webkit-search-decoration:hover,.mc-select[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-select::-ms-expand{display:none}.mc-select:hover{border-color:#191919}.mc-select:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-select:disabled{background-color:#e6e6e6;border-color:#e6e6e6;color:gray;cursor:not-allowed;opacity:1}.mc-select.is-invalid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNjNjExMTIiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMTAxMCAxMEExMCAxMCAwIDAwMTIgMnptMCAxOGE4IDggMCAxMTgtOCA4IDggMCAwMS04IDh6Ii8+PHBhdGggZD0iTTEyIDdhMSAxIDAgMDAtMSAxdjQuMzhhMSAxIDAgMDAyIDBWOGExIDEgMCAwMC0xLTF6Ii8+PGNpcmNsZSBjeD0iMTIiIGN5PSIxNiIgcj0iMSIvPjwvc3ZnPg==);border-color:#c61112}.mc-select.is-valid{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23333333' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5a1 1 0 01-.71-.29l-5-5a1 1 0 011.42-1.42L8 9.09l4.29-4.3a1 1 0 111.42 1.42l-5 5a1 1 0 01-.71.29z'/%3E%3C/svg%3E\"),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMS41cmVtIiB3aWR0aD0iMS41cmVtIiBmaWxsPSIjNDZhNjEwIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGQ9Ik0xMiA0YTggOCAwIDExLTggOCA4IDggMCAwMTgtOG0wLTJhMTAgMTAgMCAxMDEwIDEwQTEwIDEwIDAgMDAxMiAyeiIvPjxwYXRoIGQ9Ik0xMC43MyAxNS43NWExIDEgMCAwMS0uNjgtLjI2bC0zLTIuNzRhMSAxIDAgMDExLjM2LTEuNDdsMi4yNSAyLjA4IDQuMzYtNC40MmExIDEgMCAxMTEuNDIgMS40MWwtNSA1LjFhMSAxIDAgMDEtLjcxLjN6Ii8+PC9zdmc+);border-color:#46a610}.mc-select--s{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}@media screen and (min-width: 680px){.mc-select--s\\@from-m{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--s\\@from-l{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--s\\@from-xl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--s\\@from-xxl{font-size:.875rem;line-height:1.1428571429;background-position:right .5rem center,right 2rem center;padding:calc(.5rem - 1px) 2rem calc(.5rem - 1px) calc(.5rem - 1px)}}.mc-select--m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}@media screen and (min-width: 680px){.mc-select--m\\@from-m{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1024px){.mc-select--m\\@from-l{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1280px){.mc-select--m\\@from-xl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}@media screen and (min-width: 1920px){.mc-select--m\\@from-xxl{font-size:1rem;line-height:1.125;background-position:right 1rem center,right 2.5rem center;padding:calc(.9375rem - 1px) 3rem calc(.9375rem - 1px) calc(.75rem - 1px)}}.mc-listbox{background-color:#fff;border:1px solid #666666;border-radius:3px;overflow-y:auto;max-width:var(--listbox-maxwidth, none);width:var(--listbox-width, auto)}.mc-listbox::-webkit-scrollbar{background-color:#e6e6e6;width:.25rem}.mc-listbox::-webkit-scrollbar-thumb{background:#666666}.mc-listbox__list{list-style:none;margin:0;padding-left:0}.mc-listbox__tile{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;padding-left:.75rem;padding-right:.75rem;position:relative}.mc-listbox__tile:not(.mc-listbox__tile--empty):not(.is-disabled):hover{background-color:#e6e6e6;box-shadow:inset 9px 0 0 -7px #191919}.mc-listbox__tile--danger,.mc-listbox__tile.is-danger{color:#c61112}.mc-listbox__tile--empty{color:#666;justify-content:center}.mc-listbox__tile--empty .mc-listbox__label{cursor:default}.mc-listbox__tile.is-disabled{box-shadow:none;background-color:#ccc;color:#666;pointer-events:none}.mc-listbox__flag{font-size:1.5rem;line-height:1.3333333333;text-align:center}.mc-listbox__icon{fill:#666}.is-danger .mc-listbox__icon{fill:#c61112}.mc-listbox__label{font-size:1rem;line-height:1.375;color:currentColor;cursor:pointer;white-space:nowrap}button.mc-listbox__label{background:none;border:none;padding:0;font-size:inherit;font-family:inherit}.mc-listbox__label:after{content:\"\";position:absolute;inset:0;z-index:2}.mc-listbox__input{margin-left:auto;order:1}.mc-listbox--left{right:0}.mc-listbox:not(.mc-listbox--multi) .mc-listbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-listbox--options{max-height:13.8125rem;min-width:18rem}.mc-listbox--options .mc-listbox__flag,.mc-listbox--options .mc-listbox__icon,.mc-listbox--options .mc-listbox__logo{height:2rem;width:2rem}.mc-listbox--options .mc-listbox__tile{height:3rem}.mc-listbox--options .mc-listbox__tile:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--options .mc-listbox__tile.is-selected .mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__tile.is-selected.is-disabled .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__input:checked+.mc-listbox__label:before{visibility:visible}.mc-listbox--options .mc-listbox__input:checked:disabled+.mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\")}.mc-listbox--options .mc-listbox__label:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23191919' height='1.5rem' width='1.5rem'%3E%3Cpath d='M10 18.68a1 1 0 01-.7-.29l-5-5A1 1 0 015.73 12L10 16.27 18.31 8a1 1 0 011.42 1.42l-9 9a1 1 0 01-.73.26z'/%3E%3C/svg%3E\");background-position:center;background-repeat:no-repeat;background-size:1.5rem;content:\"\";height:1.5rem;position:absolute;right:.75rem;top:0;transform:translateY(50%);width:1.5rem;visibility:hidden}.mc-listbox--actions{min-width:17.375rem}.mc-listbox--actions.align-top{transform:translateY(calc(-100% - 1.5rem))}.mc-listbox--actions.align-right{transform:translate(calc(-100% + 1.5rem))}.mc-listbox--actions.align-right.align-top{transform:translate(calc(-100% + 1.5rem),calc(-100% - 1.5rem))}.mc-listbox--actions .mc-listbox__list:not(:last-child){border-bottom:1px solid #b3b3b3}.mc-listbox--actions .mc-listbox__list:first-child{padding-top:.4375rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__list:last-child{padding-top:.5rem;padding-bottom:.4375rem}.mc-listbox--actions .mc-listbox__list:not(:first-child):not(:last-child){padding-top:.5rem;padding-bottom:.5rem}.mc-listbox--actions .mc-listbox__tile{height:2.5rem}.mc-listbox--actions .mc-listbox__flag,.mc-listbox--actions .mc-listbox__icon,.mc-listbox--actions .mc-listbox__logo{height:1.5rem;width:1.5rem}.mc-listbox--overlay{position:absolute;z-index:10}.mc-loader{color:#ff5800;align-items:center;display:inline-flex;flex-direction:column}.mc-loader .mc-loader__spinner{height:2rem;width:2rem}.mc-loader .mc-loader__path{stroke-width:4}.mc-loader .mc-loader__path{stroke:currentColor}.mc-loader__spinner:not(:only-child){margin-bottom:1rem}.mc-loader__icon{animation:rotate-loader 2s linear infinite;transform-origin:center}.mc-loader__path{fill:none;stroke-dasharray:1,200;stroke-dashoffset:0;stroke-linecap:round;animation:animate-dash-loader 2s ease-in-out infinite}.mc-loader__text{font-size:1rem;line-height:1.375;color:currentColor}.mc-loader--s .mc-loader__spinner{height:1.5rem;width:1.5rem}.mc-loader--s .mc-loader__path{stroke-width:4}.mc-loader--l .mc-loader__spinner{height:4rem;width:4rem}.mc-loader--l .mc-loader__path{stroke-width:8}.mc-loader--dark{color:#191919}.mc-loader--dark .mc-loader__path{stroke:currentColor}.mc-loader--light{color:#fff}.mc-loader--light .mc-loader__path{stroke:currentColor}@keyframes rotate-loader{0%{transform:rotate(0)}to{transform:rotate(270deg)}}@keyframes animate-dash-loader{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}.mc-dropdown{align-self:start;position:relative;min-width:18rem;max-width:var(--dropdown-width, auto);width:100%}.mc-dropdown__tag,.mc-dropdown__tools{position:absolute;top:50%;transform:translateY(-50%);z-index:2}.mc-dropdown__tag{left:.75rem}.mc-dropdown__trigger{display:block;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.mc-dropdown__trigger.is-open{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1rem' width='1rem' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M2 10.5a1 1 0 01.29-.71l5-5a1 1 0 011.42 0l5 5a1 1 0 01-1.42 1.42L8 6.91l-4.29 4.3a1 1 0 01-1.42 0A1 1 0 012 10.5z'/%3E%3C/svg%3E\")}.mc-dropdown__tools{align-items:center;background-color:#fff;display:flex;gap:.5rem;justify-content:flex-end;right:2.5rem}.is-valid+.mc-dropdown__tools,.is-invalid+.mc-dropdown__tools{right:4.5rem}.mc-dropdown__clear{margin:0;box-shadow:none;text-decoration:none;outline:none;border:none;cursor:pointer;padding:0;box-shadow:0 0 0 0 transparent;transition:box-shadow .15s ease;background:none;border-radius:50%}.mc-dropdown__clear:focus{box-shadow:0 0 0 2px #0b96cc}.mc-dropdown__clear,.mc-dropdown__clear-icon{height:1.5rem;width:1.5rem}.mc-dropdown__clear-icon{fill:#666}.mc-dropdown__clear-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.mc-dropdown--multi .mc-dropdown__trigger{padding-left:calc(.75rem + var(--dropdown-tag-width, 0px))}.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}\n"] }]
|
|
3337
3314
|
}], ctorParameters: function () { return []; }, propDecorators: { listboxItems: [{
|
|
3338
3315
|
type: Input
|
|
3339
3316
|
}], multiple: [{
|
|
@@ -3575,68 +3552,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3575
3552
|
}] } });
|
|
3576
3553
|
|
|
3577
3554
|
class FileUploaderComponent {
|
|
3578
|
-
constructor(
|
|
3579
|
-
this.
|
|
3555
|
+
constructor(cdRef) {
|
|
3556
|
+
this.cdRef = cdRef;
|
|
3580
3557
|
this.allowedTypes = [];
|
|
3581
3558
|
this.multiple = false;
|
|
3582
3559
|
this.disabled = false;
|
|
3583
|
-
this.uuid = Math.random();
|
|
3584
3560
|
this.uploadedFiles = [];
|
|
3585
|
-
this.
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
const ngControl = this.injector.get(NgControl);
|
|
3589
|
-
if (ngControl instanceof FormControlName) {
|
|
3590
|
-
this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
|
|
3591
|
-
}
|
|
3561
|
+
this.uuid = Math.random();
|
|
3562
|
+
this.onChange = () => { };
|
|
3563
|
+
this.onTouch = () => { };
|
|
3592
3564
|
}
|
|
3593
3565
|
writeValue(files) {
|
|
3594
|
-
this.uploadedFiles = files;
|
|
3595
|
-
|
|
3596
|
-
|
|
3597
|
-
|
|
3566
|
+
this.uploadedFiles = [...(files !== null && files !== void 0 ? files : [])];
|
|
3567
|
+
this.onChange(this.uploadedFiles);
|
|
3568
|
+
this.onTouch();
|
|
3569
|
+
this.cdRef.markForCheck();
|
|
3598
3570
|
}
|
|
3599
3571
|
registerOnChange(fn) {
|
|
3600
|
-
this.
|
|
3572
|
+
this.onChange = fn;
|
|
3601
3573
|
}
|
|
3602
3574
|
registerOnTouched(fn) {
|
|
3603
|
-
this.
|
|
3604
|
-
}
|
|
3605
|
-
uploadFile(files) {
|
|
3606
|
-
var _a, _b, _c, _d;
|
|
3607
|
-
const value = this.multiple ? [...((_a = this.uploadedFiles) !== null && _a !== void 0 ? _a : []), ...files] : files;
|
|
3608
|
-
if (this.control) {
|
|
3609
|
-
(_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(value);
|
|
3610
|
-
(_c = this.control) === null || _c === void 0 ? void 0 : _c.markAsDirty();
|
|
3611
|
-
(_d = this.control) === null || _d === void 0 ? void 0 : _d.markAsTouched();
|
|
3612
|
-
}
|
|
3613
|
-
else {
|
|
3614
|
-
this.writeValue(value);
|
|
3615
|
-
}
|
|
3575
|
+
this.onTouch = fn;
|
|
3616
3576
|
}
|
|
3617
3577
|
uploadFileFromInput(event) {
|
|
3618
|
-
var _a, _b;
|
|
3619
3578
|
const target = event.target;
|
|
3620
3579
|
const files = target.files;
|
|
3621
3580
|
if (files === null || files === void 0 ? void 0 : files.length) {
|
|
3622
3581
|
this.uploadFile(Array.from(files));
|
|
3623
3582
|
}
|
|
3624
|
-
|
|
3625
|
-
|
|
3626
|
-
(_b = this.control) === null || _b === void 0 ? void 0 : _b.markAsDirty();
|
|
3627
|
-
}
|
|
3583
|
+
this.writeValue(this.uploadedFiles);
|
|
3584
|
+
target.value = '';
|
|
3628
3585
|
}
|
|
3629
3586
|
deleteFile(file) {
|
|
3630
|
-
var _a
|
|
3587
|
+
var _a;
|
|
3631
3588
|
const filteredFiles = ((_a = this.uploadedFiles) !== null && _a !== void 0 ? _a : []).filter((uploadedFile) => uploadedFile !== file);
|
|
3632
|
-
|
|
3633
|
-
if (this.control) {
|
|
3634
|
-
(_b = this.control) === null || _b === void 0 ? void 0 : _b.setValue(value);
|
|
3635
|
-
(_c = this.control) === null || _c === void 0 ? void 0 : _c.markAsDirty();
|
|
3636
|
-
}
|
|
3637
|
-
else {
|
|
3638
|
-
this.writeValue(value);
|
|
3639
|
-
}
|
|
3589
|
+
this.writeValue(filteredFiles.length > 0 ? filteredFiles : []);
|
|
3640
3590
|
}
|
|
3641
3591
|
getAllowedTypesAsString() {
|
|
3642
3592
|
if (this.allowedTypes && this.allowedTypes.length > 0) {
|
|
@@ -3645,24 +3595,28 @@ class FileUploaderComponent {
|
|
|
3645
3595
|
return '';
|
|
3646
3596
|
}
|
|
3647
3597
|
fileDropped(files) {
|
|
3648
|
-
var _a, _b;
|
|
3649
3598
|
if (files.length) {
|
|
3650
3599
|
this.uploadFile(Array.from(files));
|
|
3651
3600
|
}
|
|
3652
|
-
|
|
3653
|
-
|
|
3654
|
-
|
|
3601
|
+
}
|
|
3602
|
+
uploadFile(files) {
|
|
3603
|
+
var _a;
|
|
3604
|
+
if (this.multiple) {
|
|
3605
|
+
this.writeValue([...((_a = this.uploadedFiles) !== null && _a !== void 0 ? _a : []), ...files]);
|
|
3606
|
+
}
|
|
3607
|
+
else {
|
|
3608
|
+
this.writeValue(files);
|
|
3655
3609
|
}
|
|
3656
3610
|
}
|
|
3657
3611
|
}
|
|
3658
|
-
FileUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileUploaderComponent, deps: [{ token:
|
|
3612
|
+
FileUploaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileUploaderComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3659
3613
|
FileUploaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FileUploaderComponent, selector: "moz-file-uploader", inputs: { allowedTypes: "allowedTypes", multiple: "multiple", disabled: "disabled", btnLabel: "btnLabel", attachmentLabel: "attachmentLabel", mandatoryLabel: "mandatoryLabel", helpText: "helpText", fileTypeErrorText: "fileTypeErrorText", validatorsForFiles: "validatorsForFiles" }, providers: [
|
|
3660
3614
|
{
|
|
3661
3615
|
provide: NG_VALUE_ACCESSOR,
|
|
3662
3616
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
3663
3617
|
multi: true,
|
|
3664
3618
|
},
|
|
3665
|
-
], ngImport: i0, template: "<div class=\"mc-field\" mozDragNDrop (fileDroppedEvent)=\"fileDropped($event)\">\n <label\n class=\"mc-field__label\"\n for=\"fileuploader_{{ uuid }}\"\n *ngIf=\"attachmentLabel || mandatoryLabel || helpText\"\n >\n <label class=\"mc-field__label\" for=\"fileuploader_{{ uuid }}\" *ngIf=\"attachmentLabel\">\n {{ attachmentLabel }}\n </label>\n <span class=\"mc-field__requirement\" *ngIf=\"mandatoryLabel\">\n {{ mandatoryLabel }}\n </span>\n <span class=\"mc-field__help\" *ngIf=\"helpText\"> {{ helpText }} </span>\n </label>\n\n <div class=\"mc-field__element mc-fileuploader\">\n <input\n type=\"file\"\n class=\"mc-fileuploader__input\"\n id=\"fileuploader_{{ uuid }}\"\n accept=\"{{ getAllowedTypesAsString() }}\"\n [disabled]=\"disabled\"\n (change)=\"uploadFileFromInput($event)\"\n [multiple]=\"multiple\"\n />\n <label for=\"fileuploader_{{ uuid }}\" class=\"mc-fileuploader__label\">\n <span class=\"mc-fileuploader__label--center\">\n {{ btnLabel }}\n </span>\n </label>\n <moz-uploaded-files\n [uploadedFiles]=\"uploadedFiles\"\n (deletedFile)=\"deleteFile($event)\"\n [validatorsForFiles]=\"validatorsForFiles\"\n [fileTypeErrorText]=\"fileTypeErrorText\"\n [allowedTypes]=\"allowedTypes\"\n ></moz-uploaded-files>\n </div>\n
|
|
3619
|
+
], ngImport: i0, template: "<div class=\"mc-field\" mozDragNDrop (fileDroppedEvent)=\"fileDropped($event)\">\n <label\n class=\"mc-field__label\"\n for=\"fileuploader_{{ uuid }}\"\n *ngIf=\"attachmentLabel || mandatoryLabel || helpText\"\n >\n <label class=\"mc-field__label\" for=\"fileuploader_{{ uuid }}\" *ngIf=\"attachmentLabel\">\n {{ attachmentLabel }}\n </label>\n <span class=\"mc-field__requirement\" *ngIf=\"mandatoryLabel\">\n {{ mandatoryLabel }}\n </span>\n <span class=\"mc-field__help\" *ngIf=\"helpText\"> {{ helpText }} </span>\n </label>\n\n <div class=\"mc-field__element mc-fileuploader\">\n <input\n type=\"file\"\n class=\"mc-fileuploader__input\"\n id=\"fileuploader_{{ uuid }}\"\n accept=\"{{ getAllowedTypesAsString() }}\"\n [disabled]=\"disabled\"\n (change)=\"uploadFileFromInput($event)\"\n [multiple]=\"multiple\"\n />\n <label for=\"fileuploader_{{ uuid }}\" class=\"mc-fileuploader__label\">\n <span class=\"mc-fileuploader__label--center\">\n {{ btnLabel }}\n </span>\n </label>\n <moz-uploaded-files\n [uploadedFiles]=\"uploadedFiles\"\n (deletedFile)=\"deleteFile($event)\"\n [validatorsForFiles]=\"validatorsForFiles\"\n [fileTypeErrorText]=\"fileTypeErrorText\"\n [allowedTypes]=\"allowedTypes\"\n ></moz-uploaded-files>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.mc-fileuploader{position:relative;display:block}.mc-fileuploader__input{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-fileuploader__label{font-family:LeroyMerlin,sans-serif;font-weight:600;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;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;color:#120949;border-color:#120949;background-color:#fff;margin:0;box-shadow:none;text-decoration:none;outline:none;box-sizing:border-box}.mc-fileuploader__label .mc-button__icon{width:1.5rem;height:1.5rem}.mc-fileuploader__label .mc-button__icon:first-child,.mc-fileuploader__label .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-fileuploader__label .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-fileuploader__label:hover{background-color:#e5e7fa;color:#161cb6}.mc-fileuploader__label:active{background-color:#b8bef4;color:#130f7b}.mc-fileuploader__label:disabled,.mc-fileuploader__label.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-fileuploader__label:before{content:\"\";width:1.5rem;height:1.5rem;display:flex;align-items:center;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23120949' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;margin-right:.5rem;margin-left:-.5rem}:focus+.mc-fileuploader__label{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}:hover+.mc-fileuploader__label{color:#161cb6;background-color:#e5e7fa}:disabled+.mc-fileuploader__label{color:#666;background-color:#ccc;border-color:transparent;cursor:not-allowed}:disabled+.mc-fileuploader__label:before{background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23666666' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat}.mc-fileuploader__files{list-style:none;padding:0;margin:1rem 0 0}.mc-fileuploader__file{font-family:LeroyMerlin,sans-serif;font-weight:400;align-items:center;background:#e6e6e6;box-sizing:content-box;color:#000;display:flex;flex-flow:row wrap}.mc-fileuploader__file:not(:last-child){margin-bottom:.25rem}.mc-fileuploader__file-name{font-size:1rem;line-height:1.375;flex-grow:1;overflow:hidden;padding-left:.75rem;padding-right:.75rem;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 7.5rem)}.mc-fileuploader__file-icon{background-color:transparent;background-position:center right;background-repeat:no-repeat;background-size:1.5rem;display:block;height:1.5rem;margin-left:1rem;margin-right:1rem;width:1.5rem}.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%234d5bf5' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 1-8 8 8 8 0 0 1 8-8m0-2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z'/%3E%3Cpath d='M10.59 16.12a1 1 0 0 1-.68-.26l-3.84-3.55a1 1 0 0 1 1.36-1.47l3.13 2.89L16 8.17a1 1 0 0 1 1.43 1.41l-6.13 6.25a1 1 0 0 1-.71.29z'/%3E%3C/svg%3E\")}.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23c61112' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z'/%3E%3Cpath d='M12 7a1 1 0 0 0-1 1v4.38a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message{font-size:.875rem;line-height:1.2857142857;background:#ffffff;color:#c61112;flex-basis:100%;padding-top:.25rem}.mc-fileuploader__delete{position:relative;appearance:none;background-color:#ccc;border:none;cursor:pointer;padding:.5rem}.mc-fileuploader__delete:before{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;inset:-.125rem}.mc-fileuploader__delete:after{content:\"\";width:1.5rem;height:1.5rem;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23000000' viewBox='0 0 24 24'%3E%3Cpath d='M18.08 8a1 1 0 0 0-1.08.92L16.08 20H7.92L7 8.92a1 1 0 1 0-2 .16l1 12A1 1 0 0 0 7 22h10a1 1 0 0 0 1-.92l1-12A1 1 0 0 0 18.08 8z'/%3E%3Cpath d='M19 5h-3.77l-.65-2.27a1 1 0 0 0-1-.73h-3.2a1 1 0 0 0-1 .73L8.77 5H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2zm-8.62-2h3.24l.57 2H9.81zM12.5 18v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 0 1 0zM14.25 18.5a.5.5 0 0 0 .5-.47l.5-8a.5.5 0 0 0-.47-.53.49.49 0 0 0-.53.47l-.5 8a.5.5 0 0 0 .47.53zM9.75 18.5a.5.5 0 0 0 .47-.53l-.5-8a.49.49 0 0 0-.53-.47.5.5 0 0 0-.47.53l.5 8a.5.5 0 0 0 .53.47z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;display:block}.mc-fileuploader__delete:focus{outline:none}.mc-fileuploader__delete:focus:before{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc;box-shadow:0 0 0 .125rem #0b96cc}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UploadedFilesComponent, selector: "moz-uploaded-files", inputs: ["uploadedFiles", "formControlNameForFiles", "validatorsForFiles", "allowedTypes", "fileTypeErrorText"], outputs: ["deletedFile"] }, { kind: "directive", type: MozDragNDropDirective, selector: "[mozDragNDrop]", outputs: ["fileDroppedEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
3666
3620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FileUploaderComponent, decorators: [{
|
|
3667
3621
|
type: Component,
|
|
3668
3622
|
args: [{ selector: 'moz-file-uploader', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -3671,13 +3625,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
3671
3625
|
useExisting: forwardRef(() => FileUploaderComponent),
|
|
3672
3626
|
multi: true,
|
|
3673
3627
|
},
|
|
3674
|
-
], template: "<div class=\"mc-field\" mozDragNDrop (fileDroppedEvent)=\"fileDropped($event)\">\n <label\n class=\"mc-field__label\"\n for=\"fileuploader_{{ uuid }}\"\n *ngIf=\"attachmentLabel || mandatoryLabel || helpText\"\n >\n <label class=\"mc-field__label\" for=\"fileuploader_{{ uuid }}\" *ngIf=\"attachmentLabel\">\n {{ attachmentLabel }}\n </label>\n <span class=\"mc-field__requirement\" *ngIf=\"mandatoryLabel\">\n {{ mandatoryLabel }}\n </span>\n <span class=\"mc-field__help\" *ngIf=\"helpText\"> {{ helpText }} </span>\n </label>\n\n <div class=\"mc-field__element mc-fileuploader\">\n <input\n type=\"file\"\n class=\"mc-fileuploader__input\"\n id=\"fileuploader_{{ uuid }}\"\n accept=\"{{ getAllowedTypesAsString() }}\"\n [disabled]=\"disabled\"\n (change)=\"uploadFileFromInput($event)\"\n [multiple]=\"multiple\"\n />\n <label for=\"fileuploader_{{ uuid }}\" class=\"mc-fileuploader__label\">\n <span class=\"mc-fileuploader__label--center\">\n {{ btnLabel }}\n </span>\n </label>\n <moz-uploaded-files\n [uploadedFiles]=\"uploadedFiles\"\n (deletedFile)=\"deleteFile($event)\"\n [validatorsForFiles]=\"validatorsForFiles\"\n [fileTypeErrorText]=\"fileTypeErrorText\"\n [allowedTypes]=\"allowedTypes\"\n ></moz-uploaded-files>\n </div>\n
|
|
3675
|
-
}], ctorParameters: function () {
|
|
3676
|
-
return [{ type: i0.Injector, decorators: [{
|
|
3677
|
-
type: Inject,
|
|
3678
|
-
args: [Injector]
|
|
3679
|
-
}] }];
|
|
3680
|
-
}, propDecorators: { allowedTypes: [{
|
|
3628
|
+
], template: "<div class=\"mc-field\" mozDragNDrop (fileDroppedEvent)=\"fileDropped($event)\">\n <label\n class=\"mc-field__label\"\n for=\"fileuploader_{{ uuid }}\"\n *ngIf=\"attachmentLabel || mandatoryLabel || helpText\"\n >\n <label class=\"mc-field__label\" for=\"fileuploader_{{ uuid }}\" *ngIf=\"attachmentLabel\">\n {{ attachmentLabel }}\n </label>\n <span class=\"mc-field__requirement\" *ngIf=\"mandatoryLabel\">\n {{ mandatoryLabel }}\n </span>\n <span class=\"mc-field__help\" *ngIf=\"helpText\"> {{ helpText }} </span>\n </label>\n\n <div class=\"mc-field__element mc-fileuploader\">\n <input\n type=\"file\"\n class=\"mc-fileuploader__input\"\n id=\"fileuploader_{{ uuid }}\"\n accept=\"{{ getAllowedTypesAsString() }}\"\n [disabled]=\"disabled\"\n (change)=\"uploadFileFromInput($event)\"\n [multiple]=\"multiple\"\n />\n <label for=\"fileuploader_{{ uuid }}\" class=\"mc-fileuploader__label\">\n <span class=\"mc-fileuploader__label--center\">\n {{ btnLabel }}\n </span>\n </label>\n <moz-uploaded-files\n [uploadedFiles]=\"uploadedFiles\"\n (deletedFile)=\"deleteFile($event)\"\n [validatorsForFiles]=\"validatorsForFiles\"\n [fileTypeErrorText]=\"fileTypeErrorText\"\n [allowedTypes]=\"allowedTypes\"\n ></moz-uploaded-files>\n </div>\n</div>\n", styles: ["@charset \"UTF-8\";.mc-fileuploader{position:relative;display:block}.mc-fileuploader__input{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-fileuploader__label{font-family:LeroyMerlin,sans-serif;font-weight:600;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;font-size:1rem;line-height:1.375;padding:.6875rem 1.5rem;min-height:3rem;min-width:3rem;color:#120949;border-color:#120949;background-color:#fff;margin:0;box-shadow:none;text-decoration:none;outline:none;box-sizing:border-box}.mc-fileuploader__label .mc-button__icon{width:1.5rem;height:1.5rem}.mc-fileuploader__label .mc-button__icon:first-child,.mc-fileuploader__label .mc-button__icon:last-child{margin-bottom:-1px;margin-top:-1px}.mc-fileuploader__label .mc-button__icon:only-child{margin-bottom:0;margin-top:0;width:2rem;height:2rem}.mc-fileuploader__label:hover{background-color:#e5e7fa;color:#161cb6}.mc-fileuploader__label:active{background-color:#b8bef4;color:#130f7b}.mc-fileuploader__label:disabled,.mc-fileuploader__label.is-disabled{background-color:#ccc;border-color:transparent;color:#666;cursor:not-allowed}.mc-fileuploader__label:before{content:\"\";width:1.5rem;height:1.5rem;display:flex;align-items:center;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23120949' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;margin-right:.5rem;margin-left:-.5rem}:focus+.mc-fileuploader__label{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}:hover+.mc-fileuploader__label{color:#161cb6;background-color:#e5e7fa}:disabled+.mc-fileuploader__label{color:#666;background-color:#ccc;border-color:transparent;cursor:not-allowed}:disabled+.mc-fileuploader__label:before{background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23666666' viewBox='0 0 24 24'%3E%3Ctitle%3EMedia_Upload_24px%3C/title%3E%3Cpath d='M8.71,7.71,11,5.41V16a1,1,0,0,0,2,0V5.41l2.29,2.3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42l-4-4a1,1,0,0,0-1.42,0l-4,4A1,1,0,1,0,8.71,7.71Z'/%3E%3Cpath d='M16.22,12.44a1,1,0,0,0-1.2.77,1,1,0,0,0,.76,1.19C18.55,15,20,16.17,20,17c0,1.22-3.12,3-8,3s-8-1.78-8-3c0-.83,1.45-2,4.22-2.6A1,1,0,0,0,9,13.21a1,1,0,0,0-1.2-.77C4.16,13.25,2,15,2,17c0,2.85,4.3,5,10,5s10-2.15,10-5C22,15,19.84,13.25,16.22,12.44Z'/%3E%3C/svg%3E\") no-repeat}.mc-fileuploader__files{list-style:none;padding:0;margin:1rem 0 0}.mc-fileuploader__file{font-family:LeroyMerlin,sans-serif;font-weight:400;align-items:center;background:#e6e6e6;box-sizing:content-box;color:#000;display:flex;flex-flow:row wrap}.mc-fileuploader__file:not(:last-child){margin-bottom:.25rem}.mc-fileuploader__file-name{font-size:1rem;line-height:1.375;flex-grow:1;overflow:hidden;padding-left:.75rem;padding-right:.75rem;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 7.5rem)}.mc-fileuploader__file-icon{background-color:transparent;background-position:center right;background-repeat:no-repeat;background-size:1.5rem;display:block;height:1.5rem;margin-left:1rem;margin-right:1rem;width:1.5rem}.mc-fileuploader__file--is-valid .mc-fileuploader__file-icon{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%234d5bf5' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 1 1-8 8 8 8 0 0 1 8-8m0-2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z'/%3E%3Cpath d='M10.59 16.12a1 1 0 0 1-.68-.26l-3.84-3.55a1 1 0 0 1 1.36-1.47l3.13 2.89L16 8.17a1 1 0 0 1 1.43 1.41l-6.13 6.25a1 1 0 0 1-.71.29z'/%3E%3C/svg%3E\")}.mc-fileuploader__file--is-invalid .mc-fileuploader__file-icon{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23c61112' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z'/%3E%3Cpath d='M12 7a1 1 0 0 0-1 1v4.38a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z'/%3E%3Ccircle cx='12' cy='16' r='1'/%3E%3C/svg%3E\")}.mc-fileuploader__file--is-invalid .mc-fileuploader__file-message{font-size:.875rem;line-height:1.2857142857;background:#ffffff;color:#c61112;flex-basis:100%;padding-top:.25rem}.mc-fileuploader__delete{position:relative;appearance:none;background-color:#ccc;border:none;cursor:pointer;padding:.5rem}.mc-fileuploader__delete:before{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;inset:-.125rem}.mc-fileuploader__delete:after{content:\"\";width:1.5rem;height:1.5rem;background:transparent url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1.5rem' width='1.5rem' fill='%23000000' viewBox='0 0 24 24'%3E%3Cpath d='M18.08 8a1 1 0 0 0-1.08.92L16.08 20H7.92L7 8.92a1 1 0 1 0-2 .16l1 12A1 1 0 0 0 7 22h10a1 1 0 0 0 1-.92l1-12A1 1 0 0 0 18.08 8z'/%3E%3Cpath d='M19 5h-3.77l-.65-2.27a1 1 0 0 0-1-.73h-3.2a1 1 0 0 0-1 .73L8.77 5H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2zm-8.62-2h3.24l.57 2H9.81zM12.5 18v-8a.5.5 0 0 0-1 0v8a.5.5 0 0 0 1 0zM14.25 18.5a.5.5 0 0 0 .5-.47l.5-8a.5.5 0 0 0-.47-.53.49.49 0 0 0-.53.47l-.5 8a.5.5 0 0 0 .47.53zM9.75 18.5a.5.5 0 0 0 .47-.53l-.5-8a.49.49 0 0 0-.53-.47.5.5 0 0 0-.47.53l.5 8a.5.5 0 0 0 .53.47z'/%3E%3C/svg%3E\") no-repeat;background-size:1.5rem;display:block}.mc-fileuploader__delete:focus{outline:none}.mc-fileuploader__delete:focus:before{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc;box-shadow:0 0 0 .125rem #0b96cc}.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}\n"] }]
|
|
3629
|
+
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { allowedTypes: [{
|
|
3681
3630
|
type: Input
|
|
3682
3631
|
}], multiple: [{
|
|
3683
3632
|
type: Input
|
|
@@ -4636,24 +4585,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4636
4585
|
}] });
|
|
4637
4586
|
|
|
4638
4587
|
class OptionButtonComponent {
|
|
4639
|
-
constructor(
|
|
4640
|
-
this.
|
|
4588
|
+
constructor(cdRef) {
|
|
4589
|
+
this.cdRef = cdRef;
|
|
4641
4590
|
this.clicked = new EventEmitter();
|
|
4642
4591
|
this.checked = false;
|
|
4592
|
+
if (!this.id) {
|
|
4593
|
+
this.id = generateId();
|
|
4594
|
+
}
|
|
4643
4595
|
}
|
|
4644
|
-
buttonClicked(
|
|
4645
|
-
this.clicked.emit(id);
|
|
4596
|
+
buttonClicked() {
|
|
4597
|
+
this.clicked.emit(this.id);
|
|
4646
4598
|
}
|
|
4647
4599
|
refreshView() {
|
|
4648
|
-
this.
|
|
4649
|
-
this.cd.detectChanges();
|
|
4600
|
+
this.cdRef.markForCheck();
|
|
4650
4601
|
}
|
|
4651
4602
|
}
|
|
4652
4603
|
OptionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OptionButtonComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
4653
|
-
OptionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OptionButtonComponent, selector: "moz-option-button", inputs: { name: "name", value: "value", id: "id" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"mc-option-button\">\n <input\n type=\"radio\"\n name=\"{{ name }}\"\n value=\"{{ value }}\"\n id=\"{{ id }}\"\n class=\"mc-option-button__input\"\n [checked]=\"checked\"\n (click)=\"buttonClicked(
|
|
4604
|
+
OptionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OptionButtonComponent, selector: "moz-option-button", inputs: { name: "name", value: "value", id: "id" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"mc-option-button\">\n <input\n type=\"radio\"\n name=\"{{ name }}\"\n value=\"{{ value }}\"\n id=\"{{ id }}\"\n class=\"mc-option-button__input\"\n [checked]=\"checked\"\n (click)=\"buttonClicked()\"\n />\n <label class=\"mc-option-button__label\" for=\"{{ id }}\"><ng-content></ng-content></label>\n</div>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4654
4605
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OptionButtonComponent, decorators: [{
|
|
4655
4606
|
type: Component,
|
|
4656
|
-
args: [{ selector: 'moz-option-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-option-button\">\n <input\n type=\"radio\"\n name=\"{{ name }}\"\n value=\"{{ value }}\"\n id=\"{{ id }}\"\n class=\"mc-option-button__input\"\n [checked]=\"checked\"\n (click)=\"buttonClicked(
|
|
4607
|
+
args: [{ selector: 'moz-option-button', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mc-option-button\">\n <input\n type=\"radio\"\n name=\"{{ name }}\"\n value=\"{{ value }}\"\n id=\"{{ id }}\"\n class=\"mc-option-button__input\"\n [checked]=\"checked\"\n (click)=\"buttonClicked()\"\n />\n <label class=\"mc-option-button__label\" for=\"{{ id }}\"><ng-content></ng-content></label>\n</div>\n" }]
|
|
4657
4608
|
}], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
|
|
4658
4609
|
type: Input
|
|
4659
4610
|
}], value: [{
|
|
@@ -4665,56 +4616,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4665
4616
|
}] } });
|
|
4666
4617
|
|
|
4667
4618
|
class OptionButtonsComponent {
|
|
4668
|
-
constructor(
|
|
4669
|
-
this.
|
|
4670
|
-
this.
|
|
4671
|
-
this.onOptionButtonsTouch = () => { };
|
|
4672
|
-
}
|
|
4673
|
-
ngOnInit() {
|
|
4674
|
-
const ngControl = this.injector.get(NgControl);
|
|
4675
|
-
if (ngControl instanceof FormControlName) {
|
|
4676
|
-
this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
|
|
4677
|
-
}
|
|
4619
|
+
constructor() {
|
|
4620
|
+
this.onChange = () => { };
|
|
4621
|
+
this.onTouch = () => { };
|
|
4678
4622
|
}
|
|
4679
4623
|
ngAfterContentInit() {
|
|
4680
4624
|
var _a;
|
|
4681
4625
|
(_a = this.optionButtonComponents) === null || _a === void 0 ? void 0 : _a.toArray().forEach((optionButton) => {
|
|
4682
4626
|
optionButton.clicked.subscribe((id) => {
|
|
4683
|
-
|
|
4684
|
-
this.control.setValue({ id: id });
|
|
4685
|
-
this.control.markAsDirty();
|
|
4686
|
-
this.control.markAsTouched();
|
|
4687
|
-
}
|
|
4688
|
-
else {
|
|
4689
|
-
this.writeValue({ id: id });
|
|
4690
|
-
}
|
|
4627
|
+
this.writeValue({ id: id });
|
|
4691
4628
|
});
|
|
4692
4629
|
});
|
|
4693
4630
|
}
|
|
4694
4631
|
writeValue(value) {
|
|
4632
|
+
var _a;
|
|
4695
4633
|
if (value) {
|
|
4696
4634
|
this.optionButtonSelected = value;
|
|
4697
|
-
this.
|
|
4698
|
-
this.
|
|
4635
|
+
this.onChange(value);
|
|
4636
|
+
this.onTouch();
|
|
4637
|
+
(_a = this.optionButtonComponents) === null || _a === void 0 ? void 0 : _a.toArray().forEach((optionButton) => {
|
|
4638
|
+
if (optionButton.id === value.id) {
|
|
4639
|
+
optionButton.checked = true;
|
|
4640
|
+
optionButton.refreshView();
|
|
4641
|
+
}
|
|
4642
|
+
});
|
|
4699
4643
|
}
|
|
4700
4644
|
}
|
|
4701
|
-
updateOptionButtonChecked(id) {
|
|
4702
|
-
var _a;
|
|
4703
|
-
(_a = this.optionButtonComponents) === null || _a === void 0 ? void 0 : _a.toArray().forEach((optionButton) => {
|
|
4704
|
-
if (optionButton.id === id) {
|
|
4705
|
-
optionButton.checked = true;
|
|
4706
|
-
optionButton.refreshView();
|
|
4707
|
-
}
|
|
4708
|
-
});
|
|
4709
|
-
}
|
|
4710
4645
|
registerOnChange(fn) {
|
|
4711
|
-
this.
|
|
4646
|
+
this.onChange = fn;
|
|
4712
4647
|
}
|
|
4713
4648
|
registerOnTouched(fn) {
|
|
4714
|
-
this.
|
|
4649
|
+
this.onTouch = fn;
|
|
4715
4650
|
}
|
|
4716
4651
|
}
|
|
4717
|
-
OptionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OptionButtonsComponent, deps: [
|
|
4652
|
+
OptionButtonsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OptionButtonsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4718
4653
|
OptionButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OptionButtonsComponent, selector: "moz-option-buttons", providers: [
|
|
4719
4654
|
{
|
|
4720
4655
|
provide: NG_VALUE_ACCESSOR,
|
|
@@ -4731,12 +4666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
4731
4666
|
multi: true,
|
|
4732
4667
|
},
|
|
4733
4668
|
], template: "<div class=\"mc-option-group\">\n <ng-content></ng-content>\n</div>\n", styles: [".mc-option-button{display:flex;text-align:center}.mc-option-button__input{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-option-button__input:hover+.mc-option-button__label{box-shadow:0 0 0 2px #333}.mc-option-button__input:checked+.mc-option-button__label{border-color:#4d5bf5;box-shadow:0 0 0 .25rem #e5e7fa}.mc-option-button__input:focus+.mc-option-button__label:after{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-option-button__input:disabled+.mc-option-button__label{cursor:not-allowed;background-color:#ccc;color:#666;box-shadow:none}.mc-option-button__label{font-family:LeroyMerlin,sans-serif;font-weight:600;padding:1.5625rem 2rem;border-radius:4px;box-shadow:0 0 0 1px #b3b3b3;border:2px solid transparent;cursor:pointer;position:relative}.mc-option-button__label:after{box-shadow:0 0 0 0 transparent;content:\"\";display:block;pointer-events:none;position:absolute;inset:0;transition:box-shadow .2s ease;border-radius:6px;inset:-.25rem}.mc-option-button--full .mc-option-button__label{width:100%}.mc-option-group{display:flex;gap:32px}\n"] }]
|
|
4734
|
-
}],
|
|
4735
|
-
return [{ type: i0.Injector, decorators: [{
|
|
4736
|
-
type: Inject,
|
|
4737
|
-
args: [Injector]
|
|
4738
|
-
}] }];
|
|
4739
|
-
}, propDecorators: { optionButtonComponents: [{
|
|
4669
|
+
}], propDecorators: { optionButtonComponents: [{
|
|
4740
4670
|
type: ContentChildren,
|
|
4741
4671
|
args: [OptionButtonComponent]
|
|
4742
4672
|
}] } });
|
|
@@ -5310,54 +5240,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
5310
5240
|
}] });
|
|
5311
5241
|
|
|
5312
5242
|
class RadioComponent {
|
|
5313
|
-
constructor(
|
|
5314
|
-
this.injector = injector;
|
|
5315
|
-
this.cd = cd;
|
|
5316
|
-
this.id = '';
|
|
5243
|
+
constructor() {
|
|
5317
5244
|
this.name = '';
|
|
5318
5245
|
this.invalid = false;
|
|
5319
5246
|
this.disabled = false;
|
|
5320
|
-
this.
|
|
5321
|
-
this.
|
|
5322
|
-
this.
|
|
5323
|
-
|
|
5324
|
-
|
|
5325
|
-
|
|
5326
|
-
if (ngControl instanceof FormControlName) {
|
|
5327
|
-
this.control = this.injector.get(FormGroupDirective).getControl(ngControl);
|
|
5247
|
+
this.toggleEvent = new EventEmitter();
|
|
5248
|
+
this._checked = false;
|
|
5249
|
+
this.onChange = () => { };
|
|
5250
|
+
this.onTouch = () => { };
|
|
5251
|
+
if (!this.id) {
|
|
5252
|
+
this.id = generateId();
|
|
5328
5253
|
}
|
|
5329
5254
|
}
|
|
5255
|
+
get checked() {
|
|
5256
|
+
return this._checked;
|
|
5257
|
+
}
|
|
5258
|
+
set checked(v) {
|
|
5259
|
+
this._checked = v;
|
|
5260
|
+
this.onChange(this._checked);
|
|
5261
|
+
this.onTouch();
|
|
5262
|
+
}
|
|
5330
5263
|
writeValue(checked) {
|
|
5331
|
-
this.checked = checked;
|
|
5332
|
-
this.
|
|
5264
|
+
this.checked = !!checked;
|
|
5265
|
+
this.toggleEvent.emit(this.id);
|
|
5333
5266
|
}
|
|
5334
5267
|
registerOnChange(fn) {
|
|
5335
|
-
this.
|
|
5268
|
+
this.onChange = fn;
|
|
5336
5269
|
}
|
|
5337
5270
|
registerOnTouched(fn) {
|
|
5338
|
-
this.
|
|
5271
|
+
this.onTouch = fn;
|
|
5339
5272
|
}
|
|
5340
|
-
|
|
5341
|
-
|
|
5342
|
-
const checked = $event.target.checked;
|
|
5343
|
-
if (this.control) {
|
|
5344
|
-
(_a = this.control) === null || _a === void 0 ? void 0 : _a.setValue(checked);
|
|
5345
|
-
(_b = this.control) === null || _b === void 0 ? void 0 : _b.markAsDirty();
|
|
5346
|
-
(_c = this.control) === null || _c === void 0 ? void 0 : _c.markAsTouched();
|
|
5347
|
-
}
|
|
5348
|
-
else {
|
|
5349
|
-
this.writeValue(checked);
|
|
5350
|
-
}
|
|
5273
|
+
toggle() {
|
|
5274
|
+
this.writeValue(!this.checked);
|
|
5351
5275
|
}
|
|
5352
5276
|
}
|
|
5353
|
-
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioComponent, deps: [
|
|
5354
|
-
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadioComponent, selector: "moz-radio", inputs: { id: "id", name: "name", invalid: "invalid", disabled: "disabled" }, providers: [
|
|
5277
|
+
RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5278
|
+
RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadioComponent, selector: "moz-radio", inputs: { id: "id", name: "name", invalid: "invalid", disabled: "disabled", checked: "checked" }, providers: [
|
|
5355
5279
|
{
|
|
5356
5280
|
provide: NG_VALUE_ACCESSOR,
|
|
5357
5281
|
useExisting: forwardRef(() => RadioComponent),
|
|
5358
5282
|
multi: true,
|
|
5359
5283
|
},
|
|
5360
|
-
], ngImport: i0, template: "<div class=\"mc-radio\">\n <input\n id=\"{{ id }}\"\n type=\"radio\"\n class=\"mc-radio__input\"\n name=\"{{ name }}\"\n (change)=\"
|
|
5284
|
+
], ngImport: i0, template: "<div class=\"mc-radio\">\n <input\n id=\"{{ id }}\"\n type=\"radio\"\n class=\"mc-radio__input\"\n name=\"{{ name }}\"\n (change)=\"toggle()\"\n [ngClass]=\"{ 'is-invalid': invalid }\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n />\n <label for=\"{{ id }}\" class=\"mc-radio__label\"><ng-content select=\"[label]\"></ng-content></label>\n</div>\n", styles: [".mc-radio{align-items:center;display:flex}.mc-radio__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-radio__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;border:2px solid #808080;min-width:20px;width:1.25rem;min-height:20px;height:1.25rem;border-radius:50%;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-radio__input[type=number]::-webkit-inner-spin-button,.mc-radio__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-radio__input[type=number]{-moz-appearance:textfield}.mc-radio__input[type=search]::-webkit-search-decoration:hover,.mc-radio__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-radio__input:before{border-radius:50%;content:\"\";display:block;height:.375rem;left:50%;min-height:6px;min-width:6px;position:absolute;top:50%;transform:translate(-50%,-50%);width:.375rem}.mc-radio__input::-ms-check{background-color:#fff;border:2px solid #808080;color:#fff}.mc-radio__input:hover{border-color:#191919}.mc-radio__input:hover::-ms-check{border-color:#191919}.mc-radio__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-radio__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-radio__input:checked{background-color:#ff5800;border-color:#ff5800}.mc-radio__input:checked::-ms-check{border-color:#ff5800;background-color:#ff5800}.mc-radio__input:checked:before{background-color:#fff}.mc-radio__input:checked:hover{border-color:#ff5800}.mc-radio__input:checked:hover::-ms-check{border-color:#ff5800}.mc-radio__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled+.mc-radio__label{color:gray}.mc-radio__input:disabled:checked:before{background-color:#999}.mc-radio__input.is-invalid{border-color:#c61112}.mc-radio__input.is-invalid::-ms-check{border-color:#c61112}.mc-radio__input.is-invalid:hover{border-color:#530000}.mc-radio__input.is-invalid:hover::-ms-check{border-color:#530000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5361
5285
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioComponent, decorators: [{
|
|
5362
5286
|
type: Component,
|
|
5363
5287
|
args: [{ selector: 'moz-radio', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
@@ -5366,13 +5290,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
5366
5290
|
useExisting: forwardRef(() => RadioComponent),
|
|
5367
5291
|
multi: true,
|
|
5368
5292
|
},
|
|
5369
|
-
], template: "<div class=\"mc-radio\">\n <input\n id=\"{{ id }}\"\n type=\"radio\"\n class=\"mc-radio__input\"\n name=\"{{ name }}\"\n (change)=\"
|
|
5370
|
-
}], ctorParameters: function () {
|
|
5371
|
-
return [{ type: i0.Injector, decorators: [{
|
|
5372
|
-
type: Inject,
|
|
5373
|
-
args: [Injector]
|
|
5374
|
-
}] }, { type: i0.ChangeDetectorRef }];
|
|
5375
|
-
}, propDecorators: { id: [{
|
|
5293
|
+
], template: "<div class=\"mc-radio\">\n <input\n id=\"{{ id }}\"\n type=\"radio\"\n class=\"mc-radio__input\"\n name=\"{{ name }}\"\n (change)=\"toggle()\"\n [ngClass]=\"{ 'is-invalid': invalid }\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n />\n <label for=\"{{ id }}\" class=\"mc-radio__label\"><ng-content select=\"[label]\"></ng-content></label>\n</div>\n", styles: [".mc-radio{align-items:center;display:flex}.mc-radio__label{font-size:1rem;line-height:1.125;cursor:pointer;margin-left:.5rem;color:#000}.mc-radio__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;border:2px solid #808080;min-width:20px;width:1.25rem;min-height:20px;height:1.25rem;border-radius:50%;background-color:#fff;position:relative;transition:all .2s ease;cursor:pointer}.mc-radio__input[type=number]::-webkit-inner-spin-button,.mc-radio__input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.mc-radio__input[type=number]{-moz-appearance:textfield}.mc-radio__input[type=search]::-webkit-search-decoration:hover,.mc-radio__input[type=search]::-webkit-search-cancel-button:hover{cursor:pointer}.mc-radio__input:before{border-radius:50%;content:\"\";display:block;height:.375rem;left:50%;min-height:6px;min-width:6px;position:absolute;top:50%;transform:translate(-50%,-50%);width:.375rem}.mc-radio__input::-ms-check{background-color:#fff;border:2px solid #808080;color:#fff}.mc-radio__input:hover{border-color:#191919}.mc-radio__input:hover::-ms-check{border-color:#191919}.mc-radio__input:focus{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-radio__input:focus::-ms-check{box-shadow:0 0 0 .125rem #fff,0 0 0 .25rem #0b96cc}.mc-radio__input:checked{background-color:#ff5800;border-color:#ff5800}.mc-radio__input:checked::-ms-check{border-color:#ff5800;background-color:#ff5800}.mc-radio__input:checked:before{background-color:#fff}.mc-radio__input:checked:hover{border-color:#ff5800}.mc-radio__input:checked:hover::-ms-check{border-color:#ff5800}.mc-radio__input:disabled{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled::-ms-check{background-color:#e6e6e6;border-color:#e6e6e6;cursor:not-allowed}.mc-radio__input:disabled+.mc-radio__label{color:gray}.mc-radio__input:disabled:checked:before{background-color:#999}.mc-radio__input.is-invalid{border-color:#c61112}.mc-radio__input.is-invalid::-ms-check{border-color:#c61112}.mc-radio__input.is-invalid:hover{border-color:#530000}.mc-radio__input.is-invalid:hover::-ms-check{border-color:#530000}\n"] }]
|
|
5294
|
+
}], ctorParameters: function () { return []; }, propDecorators: { id: [{
|
|
5376
5295
|
type: Input
|
|
5377
5296
|
}], name: [{
|
|
5378
5297
|
type: Input
|
|
@@ -5380,6 +5299,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
5380
5299
|
type: Input
|
|
5381
5300
|
}], disabled: [{
|
|
5382
5301
|
type: Input
|
|
5302
|
+
}], checked: [{
|
|
5303
|
+
type: Input
|
|
5383
5304
|
}] } });
|
|
5384
5305
|
|
|
5385
5306
|
class RadioModule {
|