@ptsecurity/mosaic 13.9.1 → 13.9.2

package/fesm2020/ptsecurity-mosaic-list.mjs

@@ -1,229 +1,22 @@
 import { A11yModule } from '@angular/cdk/a11y';
-import * as i2 from '@angular/common';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, Optional, ContentChild, ViewChild, Input, EventEmitter, Attribute, ContentChildren, Output, NgModule } from '@angular/core';
-import * as i1 from '@ptsecurity/mosaic/core';
-import { toBoolean, MC_OPTION_ACTION_PARENT, McOptionActionComponent, mixinTabIndex, mixinDisabled, MultipleMode, McLineSetter, McLine, McPseudoCheckboxModule, McLineModule, McOptionModule } from '@ptsecurity/mosaic/core';
-import * as i3 from '@angular/cdk/clipboard';
+import { forwardRef, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, Attribute, Optional, ContentChildren, Output, Input, Inject, ContentChild, ViewChild, NgModule } from '@angular/core';
+import * as i2 from '@ptsecurity/mosaic/core';
+import { mixinTabIndex, mixinDisabled, MultipleMode, toBoolean, MC_OPTION_ACTION_PARENT, McOptionActionComponent, McLineSetter, McLine, McPseudoCheckboxModule, McLineModule, McOptionModule } from '@ptsecurity/mosaic/core';
+import * as i1 from '@angular/cdk/clipboard';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { SelectionModel } from '@angular/cdk/collections';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { FocusKeyManager } from '@ptsecurity/cdk/a11y';
-import { hasModifierKey, TAB, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN } from '@ptsecurity/cdk/keycodes';
+import { SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, isVerticalMovement, isSelectAll, isCopy, TAB, DOWN_ARROW, UP_ARROW, HOME, END, PAGE_UP, PAGE_DOWN, hasModifierKey } from '@ptsecurity/cdk/keycodes';
 import { McDropdownTrigger } from '@ptsecurity/mosaic/dropdown';
 import { McTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
 import { Subject, merge } from 'rxjs';
-import { take, takeUntil, startWith } from 'rxjs/operators';
+import { takeUntil, startWith, take } from 'rxjs/operators';
 
 /* tslint:disable:no-empty */
-/**
- * Component for list-options of selection-list. Each list-option can automatically
- * generate a checkbox and can put current item into the selectionModel of selection-list
- * if the current item is selected.
- */
-class McListOption {
-    constructor(elementRef, changeDetector, ngZone, listSelection, group) {
-        this.elementRef = elementRef;
-        this.changeDetector = changeDetector;
-        this.ngZone = ngZone;
-        this.listSelection = listSelection;
-        this.group = group;
-        this.hasFocus = false;
-        this.onFocus = new Subject();
-        this.onBlur = new Subject();
-        /**
-         * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
-         * in the first cycle.
-         */
-        this.inputsInitialized = false;
-        this._disabled = false;
-        this._selected = false;
-    }
-    get value() { return this._value; }
-    set value(newValue) {
-        if (this.selected && newValue !== this.value && this.inputsInitialized) {
-            this.selected = false;
-        }
-        this._value = newValue;
-    }
-    get disabled() {
-        const listSelectionDisabled = this.listSelection && this.listSelection.disabled;
-        const groupDisabled = this.group && this.group.disabled;
-        return listSelectionDisabled || groupDisabled || this._disabled;
-    }
-    set disabled(value) {
-        const newValue = toBoolean(value);
-        if (newValue !== this._disabled) {
-            this._disabled = newValue;
-            this.changeDetector.markForCheck();
-        }
-    }
-    get showCheckbox() {
-        return this._showCheckbox !== undefined ? this._showCheckbox : this.listSelection.showCheckbox;
-    }
-    set showCheckbox(value) {
-        this._showCheckbox = coerceBooleanProperty(value);
-    }
-    get selected() {
-        return this.listSelection.selectionModel?.isSelected(this) || false;
-    }
-    set selected(value) {
-        const isSelected = toBoolean(value);
-        if (isSelected !== this._selected) {
-            this.setSelected(isSelected);
-        }
-    }
-    get tabIndex() {
-        return this.disabled ? null : -1;
-    }
-    ngOnInit() {
-        const list = this.listSelection;
-        if (list._value && list._value.some((value) => list.compareWith(value, this._value))) {
-            this.setSelected(true);
-        }
-        const wasSelected = this._selected;
-        // List options that are selected at initialization can't be reported properly to the form
-        // control. This is because it takes some time until the selection-list knows about all
-        // available options. Also it can happen that the ControlValueAccessor has an initial value
-        // that should be used instead. Deferring the value change report to the next tick ensures
-        // that the form control value is not being overwritten.
-        Promise.resolve().then(() => {
-            if (this._selected || wasSelected) {
-                this.selected = true;
-                this.changeDetector.markForCheck();
-            }
-        });
-        this.inputsInitialized = true;
-    }
-    ngOnDestroy() {
-        if (this.selected) {
-            // We have to delay this until the next tick in order
-            // to avoid changed after checked errors.
-            Promise.resolve().then(() => this.selected = false);
-        }
-        this.listSelection.removeOptionFromList(this);
-    }
-    toggle() {
-        this.selected = !this.selected;
-    }
-    getLabel() {
-        return this.text ? this.text.nativeElement.textContent : '';
-    }
-    setSelected(selected) {
-        if (this._selected === selected || !this.listSelection.selectionModel) {
-            return;
-        }
-        this._selected = selected;
-        if (selected) {
-            this.listSelection.selectionModel.select(this);
-        }
-        else {
-            this.listSelection.selectionModel.deselect(this);
-        }
-        this.changeDetector.markForCheck();
-    }
-    getHeight() {
-        const clientRects = this.elementRef.nativeElement.getClientRects();
-        return clientRects.length ? clientRects[0].height : 0;
-    }
-    handleClick($event) {
-        if (this.disabled) {
-            return;
-        }
-        this.listSelection.setSelectedOptionsByClick(this, hasModifierKey($event, 'shiftKey'), hasModifierKey($event, 'ctrlKey'));
-    }
-    onKeydown($event) {
-        if (!this.actionButton) {
-            return;
-        }
-        if ($event.keyCode === TAB && !$event.shiftKey && !this.actionButton.hasFocus) {
-            this.actionButton.focus();
-            $event.preventDefault();
-        }
-    }
-    focus() {
-        if (this.disabled || this.hasFocus || this.actionButton?.hasFocus) {
-            return;
-        }
-        this.elementRef.nativeElement.focus();
-        this.onFocus.next({ option: this });
-        Promise.resolve().then(() => {
-            this.hasFocus = true;
-            this.changeDetector.markForCheck();
-        });
-    }
-    blur() {
-        // When animations are enabled, Angular may end up removing the option from the DOM a little
-        // earlier than usual, causing it to be blurred and throwing off the logic in the list
-        // that moves focus not the next item. To work around the issue, we defer marking the option
-        // as not focused until the next time the zone stabilizes.
-        this.ngZone.onStable
-            .asObservable()
-            .pipe(take(1))
-            .subscribe(() => {
-            this.ngZone.run(() => {
-                this.hasFocus = false;
-                if (this.actionButton?.hasFocus) {
-                    return;
-                }
-                this.onBlur.next({ option: this });
-            });
-        });
-    }
-    getHostElement() {
-        return this.elementRef.nativeElement;
-    }
-}
-/** @nocollapse */ /** @nocollapse */ McListOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McListOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: forwardRef(() => McListSelection) }, { token: i1.McOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McListOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McListOption, selector: "mc-list-option", inputs: { checkboxPosition: "checkboxPosition", value: "value", disabled: "disabled", showCheckbox: "showCheckbox", selected: "selected" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.mc-selected": "selected", "class.mc-disabled": "disabled", "class.mc-focused": "hasFocus", "class.mc-action-button-focused": "actionButton?.active", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-list-option" }, providers: [
-        { provide: MC_OPTION_ACTION_PARENT, useExisting: McListOption }
-    ], queries: [{ propertyName: "actionButton", first: true, predicate: McOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: McTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: McDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true }], exportAs: ["mcListOption"], ngImport: i0, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<div class=\"mc-list-text\" #text>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n", components: [{ type: i1.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McListOption, decorators: [{
-            type: Component,
-            args: [{ exportAs: 'mcListOption', selector: 'mc-list-option', host: {
-                        class: 'mc-list-option',
-                        '[class.mc-selected]': 'selected',
-                        '[class.mc-disabled]': 'disabled',
-                        '[class.mc-focused]': 'hasFocus',
-                        '[class.mc-action-button-focused]': 'actionButton?.active',
-                        '[attr.tabindex]': 'tabIndex',
-                        '[attr.disabled]': 'disabled || null',
-                        '(focusin)': 'focus()',
-                        '(blur)': 'blur()',
-                        '(click)': 'handleClick($event)',
-                        '(keydown)': 'onKeydown($event)'
-                    }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
-                        { provide: MC_OPTION_ACTION_PARENT, useExisting: McListOption }
-                    ], template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<div class=\"mc-list-text\" #text>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: McListSelection, decorators: [{
-                    type: Inject,
-                    args: [forwardRef(() => McListSelection)]
-                }] }, { type: i1.McOptgroup, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { actionButton: [{
-                type: ContentChild,
-                args: [McOptionActionComponent]
-            }], tooltipTrigger: [{
-                type: ContentChild,
-                args: [McTooltipTrigger]
-            }], dropdownTrigger: [{
-                type: ContentChild,
-                args: [McDropdownTrigger]
-            }], text: [{
-                type: ViewChild,
-                args: ['text', { static: false }]
-            }], checkboxPosition: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], showCheckbox: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }] } });
 const MC_SELECTION_LIST_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => McListSelection),
@@ -634,16 +427,22 @@ class McListSelection extends McListSelectionMixinBase {
         this.onSelectAll.emit(new McListSelectAllEvent(this, optionsToSelect));
     }
     copyActiveOption() {
+        if (!this.keyManager.activeItem) {
+            return;
+        }
+        const option = this.keyManager.activeItem;
+        option.preventBlur = true;
         if (this.onCopy.observers.length) {
-            this.onCopy.emit(new McListCopyEvent(this, this.keyManager.activeItem));
+            this.onCopy.emit(new McListCopyEvent(this, option));
         }
         else {
             this.onCopyDefaultHandler();
         }
+        option.preventBlur = false;
     }
 }
-/** @nocollapse */ /** @nocollapse */ McListSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McListSelection, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i3.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ McListSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McListSelection, selector: "mc-list-selection", inputs: { disabled: "disabled", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", horizontal: "horizontal", tabIndex: "tabIndex", compareWith: "compareWith" }, outputs: { onSelectAll: "onSelectAll", onCopy: "onCopy", selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "mc-list-selection" }, providers: [MC_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "options", predicate: McListOption, descendants: true }], exportAs: ["mcListSelection"], usesInheritance: true, ngImport: i0, template: `
+/** @nocollapse */ /** @nocollapse */ McListSelection.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McListSelection, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: 'multiple', attribute: true }, { token: i1.Clipboard, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McListSelection.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McListSelection, selector: "mc-list-selection", inputs: { disabled: "disabled", autoSelect: "autoSelect", noUnselectLast: "noUnselectLast", horizontal: "horizontal", tabIndex: "tabIndex", compareWith: "compareWith" }, outputs: { onSelectAll: "onSelectAll", onCopy: "onCopy", selectionChange: "selectionChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "window:resize": "updateScrollSize()" }, properties: { "attr.tabindex": "-1", "attr.disabled": "disabled || null" }, classAttribute: "mc-list-selection" }, providers: [MC_SELECTION_LIST_VALUE_ACCESSOR], queries: [{ propertyName: "options", predicate: i0.forwardRef(function () { return McListOption; }), descendants: true }], exportAs: ["mcListSelection"], usesInheritance: true, ngImport: i0, template: `
         <div [attr.tabindex]="tabIndex"
              (focus)="focus()"
              (blur)="blur()">
@@ -663,14 +462,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         '(keydown)': 'onKeyDown($event)',
                         '(window:resize)': 'updateScrollSize()'
                     }, providers: [MC_SELECTION_LIST_VALUE_ACCESSOR], preserveWhitespaces: false, styles: [".mc-divider{display:block;margin:0}.mc-divider.mc-divider_horizontal{border-top-width:var(--mc-divider-size-width, 1px);border-top-style:solid}.mc-divider.mc-divider_vertical{height:100%;border-right-width:var(--mc-divider-size-width, 1px);border-right-style:solid}.mc-divider.mc-divider_inset{margin-left:var(--mc-divider-size-inset-margin, 80px)}[dir=rtl] .mc-divider.mc-divider_inset{margin-left:auto;margin-right:var(--mc-divider-size-inset-margin, 80px)}.mc-no-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.mc-list,.mc-list-selection{display:block;outline:none}.mc-list-item,.mc-list-option{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;position:relative;display:flex;align-items:center;box-sizing:border-box;height:var(--mc-list-size-item-height, 32px);border:2px solid transparent;padding-left:var(--mc-list-size-horizontal-padding, 12px)}.mc-list-item .mc-list-text,.mc-list-option .mc-list-text{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;padding-right:var(--mc-list-size-horizontal-padding, 12px)}.mc-list-item .mc-list-text>*,.mc-list-option .mc-list-text>*{margin:0;padding:0;font-weight:400;font-size:inherit}.mc-list-item .mc-list-text:empty,.mc-list-option .mc-list-text:empty{display:none}.mc-list-item .mc-divider,.mc-list-option .mc-divider{position:absolute;bottom:0;left:0;width:100%;margin:0}[dir=rtl] .mc-list-item .mc-divider,[dir=rtl] .mc-list-option .mc-divider{margin-left:auto;margin-right:0}.mc-list-item .mc-divider.mc-divider_inset,.mc-list-option .mc-divider.mc-divider_inset{position:absolute}.mc-list-item.mc-progress:after,.mc-list-option.mc-progress:after{top:-2px;right:-2px;bottom:-2px;left:-2px}.mc-list-item .mc-pseudo-checkbox,.mc-list-item .mc-icon,.mc-list-option .mc-pseudo-checkbox,.mc-list-option .mc-icon{margin-right:var(--mc-list-size-icon-right-margin, 8px)}.mc-list-item .mc-option-action,.mc-list-option .mc-option-action{display:none}.mc-list-item:not([disabled]):hover .mc-option-action,.mc-list-item:not([disabled]).mc-focused .mc-option-action,.mc-list-item:not([disabled]).mc-action-button-focused .mc-option-action,.mc-list-option:not([disabled]):hover .mc-option-action,.mc-list-option:not([disabled]).mc-focused .mc-option-action,.mc-list-option:not([disabled]).mc-action-button-focused .mc-option-action{display:flex}.mc-list-option:not([disabled]):not(.mc-disabled){cursor:pointer}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.MultipleMode, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.MultipleMode, decorators: [{
                     type: Attribute,
                     args: ['multiple']
-                }] }, { type: i3.Clipboard, decorators: [{
+                }] }, { type: i1.Clipboard, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { options: [{
                 type: ContentChildren,
-                args: [McListOption, { descendants: true }]
+                args: [forwardRef(() => McListOption), { descendants: true }]
             }], onSelectAll: [{
                 type: Output
             }], onCopy: [{
@@ -688,6 +487,217 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], compareWith: [{
                 type: Input
             }] } });
+/**
+ * Component for list-options of selection-list. Each list-option can automatically
+ * generate a checkbox and can put current item into the selectionModel of selection-list
+ * if the current item is selected.
+ */
+class McListOption {
+    constructor(elementRef, changeDetector, ngZone, listSelection, group) {
+        this.elementRef = elementRef;
+        this.changeDetector = changeDetector;
+        this.ngZone = ngZone;
+        this.listSelection = listSelection;
+        this.group = group;
+        this.hasFocus = false;
+        this.preventBlur = false;
+        this.onFocus = new Subject();
+        this.onBlur = new Subject();
+        /**
+         * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
+         * in the first cycle.
+         */
+        this.inputsInitialized = false;
+        this._disabled = false;
+        this._selected = false;
+    }
+    get value() { return this._value; }
+    set value(newValue) {
+        if (this.selected && newValue !== this.value && this.inputsInitialized) {
+            this.selected = false;
+        }
+        this._value = newValue;
+    }
+    get disabled() {
+        const listSelectionDisabled = this.listSelection && this.listSelection.disabled;
+        const groupDisabled = this.group && this.group.disabled;
+        return listSelectionDisabled || groupDisabled || this._disabled;
+    }
+    set disabled(value) {
+        const newValue = toBoolean(value);
+        if (newValue !== this._disabled) {
+            this._disabled = newValue;
+            this.changeDetector.markForCheck();
+        }
+    }
+    get showCheckbox() {
+        return this._showCheckbox !== undefined ? this._showCheckbox : this.listSelection.showCheckbox;
+    }
+    set showCheckbox(value) {
+        this._showCheckbox = coerceBooleanProperty(value);
+    }
+    get selected() {
+        return this.listSelection.selectionModel?.isSelected(this) || false;
+    }
+    set selected(value) {
+        const isSelected = toBoolean(value);
+        if (isSelected !== this._selected) {
+            this.setSelected(isSelected);
+        }
+    }
+    get tabIndex() {
+        return this.disabled ? null : -1;
+    }
+    ngOnInit() {
+        const list = this.listSelection;
+        if (list._value && list._value.some((value) => list.compareWith(value, this._value))) {
+            this.setSelected(true);
+        }
+        const wasSelected = this._selected;
+        // List options that are selected at initialization can't be reported properly to the form
+        // control. This is because it takes some time until the selection-list knows about all
+        // available options. Also it can happen that the ControlValueAccessor has an initial value
+        // that should be used instead. Deferring the value change report to the next tick ensures
+        // that the form control value is not being overwritten.
+        Promise.resolve().then(() => {
+            if (this._selected || wasSelected) {
+                this.selected = true;
+                this.changeDetector.markForCheck();
+            }
+        });
+        this.inputsInitialized = true;
+    }
+    ngOnDestroy() {
+        if (this.selected) {
+            // We have to delay this until the next tick in order
+            // to avoid changed after checked errors.
+            Promise.resolve().then(() => this.selected = false);
+        }
+        this.listSelection.removeOptionFromList(this);
+    }
+    toggle() {
+        this.selected = !this.selected;
+    }
+    getLabel() {
+        return this.text ? this.text.nativeElement.textContent : '';
+    }
+    setSelected(selected) {
+        if (this._selected === selected || !this.listSelection.selectionModel) {
+            return;
+        }
+        this._selected = selected;
+        if (selected) {
+            this.listSelection.selectionModel.select(this);
+        }
+        else {
+            this.listSelection.selectionModel.deselect(this);
+        }
+        this.changeDetector.markForCheck();
+    }
+    getHeight() {
+        const clientRects = this.elementRef.nativeElement.getClientRects();
+        return clientRects.length ? clientRects[0].height : 0;
+    }
+    handleClick($event) {
+        if (this.disabled) {
+            return;
+        }
+        this.listSelection.setSelectedOptionsByClick(this, hasModifierKey($event, 'shiftKey'), hasModifierKey($event, 'ctrlKey'));
+    }
+    onKeydown($event) {
+        if (!this.actionButton) {
+            return;
+        }
+        if ($event.keyCode === TAB && !$event.shiftKey && !this.actionButton.hasFocus) {
+            this.actionButton.focus();
+            $event.preventDefault();
+        }
+    }
+    focus() {
+        if (this.disabled || this.hasFocus || this.actionButton?.hasFocus) {
+            return;
+        }
+        this.elementRef.nativeElement.focus();
+        this.onFocus.next({ option: this });
+        Promise.resolve().then(() => {
+            this.hasFocus = true;
+            this.changeDetector.markForCheck();
+        });
+    }
+    blur() {
+        if (this.preventBlur) {
+            return;
+        }
+        // When animations are enabled, Angular may end up removing the option from the DOM a little
+        // earlier than usual, causing it to be blurred and throwing off the logic in the list
+        // that moves focus not the next item. To work around the issue, we defer marking the option
+        // as not focused until the next time the zone stabilizes.
+        this.ngZone.onStable
+            .asObservable()
+            .pipe(take(1))
+            .subscribe(() => {
+            this.ngZone.run(() => {
+                this.hasFocus = false;
+                if (this.actionButton?.hasFocus) {
+                    return;
+                }
+                this.onBlur.next({ option: this });
+            });
+        });
+    }
+    getHostElement() {
+        return this.elementRef.nativeElement;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ McListOption.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McListOption, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: forwardRef(() => McListSelection) }, { token: i2.McOptgroup, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ McListOption.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: McListOption, selector: "mc-list-option", inputs: { checkboxPosition: "checkboxPosition", value: "value", disabled: "disabled", showCheckbox: "showCheckbox", selected: "selected" }, host: { listeners: { "focusin": "focus()", "blur": "blur()", "click": "handleClick($event)", "keydown": "onKeydown($event)" }, properties: { "class.mc-selected": "selected", "class.mc-disabled": "disabled", "class.mc-focused": "hasFocus", "class.mc-action-button-focused": "actionButton?.active", "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null" }, classAttribute: "mc-list-option" }, providers: [
+        { provide: MC_OPTION_ACTION_PARENT, useExisting: McListOption }
+    ], queries: [{ propertyName: "actionButton", first: true, predicate: McOptionActionComponent, descendants: true }, { propertyName: "tooltipTrigger", first: true, predicate: McTooltipTrigger, descendants: true }, { propertyName: "dropdownTrigger", first: true, predicate: McDropdownTrigger, descendants: true }], viewQueries: [{ propertyName: "text", first: true, predicate: ["text"], descendants: true }], exportAs: ["mcListOption"], ngImport: i0, template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<div class=\"mc-list-text\" #text>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n", components: [{ type: i2.McPseudoCheckbox, selector: "mc-pseudo-checkbox", inputs: ["color", "state", "disabled"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: McListOption, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'mcListOption', selector: 'mc-list-option', host: {
+                        class: 'mc-list-option',
+                        '[class.mc-selected]': 'selected',
+                        '[class.mc-disabled]': 'disabled',
+                        '[class.mc-focused]': 'hasFocus',
+                        '[class.mc-action-button-focused]': 'actionButton?.active',
+                        '[attr.tabindex]': 'tabIndex',
+                        '[attr.disabled]': 'disabled || null',
+                        '(focusin)': 'focus()',
+                        '(blur)': 'blur()',
+                        '(click)': 'handleClick($event)',
+                        '(keydown)': 'onKeydown($event)'
+                    }, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: MC_OPTION_ACTION_PARENT, useExisting: McListOption }
+                    ], template: "<mc-pseudo-checkbox\n    *ngIf=\"showCheckbox\"\n    [state]=\"selected ? 'checked' : 'unchecked'\"\n    [disabled]=\"disabled\">\n</mc-pseudo-checkbox>\n\n<ng-content select=\"[mc-icon]\"></ng-content>\n\n<div class=\"mc-list-text\" #text>\n    <ng-content></ng-content>\n</div>\n\n<ng-content select=\"mc-option-action\"></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: McListSelection, decorators: [{
+                    type: Inject,
+                    args: [forwardRef(() => McListSelection)]
+                }] }, { type: i2.McOptgroup, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { actionButton: [{
+                type: ContentChild,
+                args: [McOptionActionComponent]
+            }], tooltipTrigger: [{
+                type: ContentChild,
+                args: [McTooltipTrigger]
+            }], dropdownTrigger: [{
+                type: ContentChild,
+                args: [McDropdownTrigger]
+            }], text: [{
+                type: ViewChild,
+                args: ['text', { static: false }]
+            }], checkboxPosition: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], showCheckbox: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }] } });
 
 // todo пока не делаем, перенесено из материала, но у нас в доках таких простых списков нет.
 class McList {