@ptsecurity/mosaic 16.4.11 → 16.5.0

package/toggle/toggle.component.d.ts

@@ -1,7 +1,8 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { ChangeDetectorRef, ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@ptsecurity/mosaic/core';
+import { McCheckboxClickAction, TransitionCheckState } from '@ptsecurity/mosaic/checkbox';
+import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, checkedState } from '@ptsecurity/mosaic/core';
 import * as i0 from "@angular/core";
 type ToggleLabelPositionType = 'left' | 'right';
 /** @docs-private */
@@ -19,7 +20,8 @@ export declare class McToggleComponent extends McToggleMixinBase implements Cont
     elementRef: ElementRef;
     private _focusMonitor;
     private _changeDetectorRef;
-    inputElement: ElementRef;
+    private clickAction;
+    inputElement: ElementRef<HTMLInputElement>;
     labelPosition: ToggleLabelPositionType;
     ariaLabel: string;
     ariaLabelledby: string | null;
@@ -27,18 +29,30 @@ export declare class McToggleComponent extends McToggleMixinBase implements Cont
     get inputId(): string;
     name: string | null;
     value: string;
+    currentCheckState: TransitionCheckState;
     get disabled(): any;
     set disabled(value: any);
     private _disabled;
     get checked(): boolean;
     set checked(value: boolean);
     private _checked;
+    /**
+     * Whether the toggle is indeterminate. This is also known as "mixed" mode and can be used to
+     * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
+     * checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately
+     * set to false.
+     */
+    get indeterminate(): boolean;
+    set indeterminate(value: boolean);
+    private _indeterminate;
     readonly change: EventEmitter<McToggleChange>;
+    /** Event emitted when the toggle's `indeterminate` value changes. */
+    readonly indeterminateChange: EventEmitter<boolean>;
     private uniqueId;
-    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef);
+    constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, clickAction: McCheckboxClickAction);
     ngOnDestroy(): void;
     focus(): void;
-    getAriaChecked(): boolean;
+    getAriaChecked(): checkedState;
     onChangeEvent(event: Event): void;
     onLabelTextChange(): void;
     onInputClick(event: MouseEvent): void;
@@ -46,11 +60,14 @@ export declare class McToggleComponent extends McToggleMixinBase implements Cont
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
+    private setTransitionCheckState;
     private onTouchedCallback;
     private onChangeCallback;
     private updateModelValue;
+    private transitionCheckState;
     private emitChangeEvent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<McToggleComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McToggleComponent, "mc-toggle", ["mcToggle"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "change": "change"; }, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McToggleComponent, [null, null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McToggleComponent, "mc-toggle", ["mcToggle"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false, never>;
+    static ngAcceptInputType_indeterminate: unknown;
 }
 export {};

package/toggle/toggle.scss

@@ -30,6 +30,29 @@ $tokens: meta.module-variables(tokens) !default;
         &.mc-toggle-label-position-left {
             order: 1;
         }
+
+        .mc-toggle__thumb {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            height: 100%;
+
+            &::after {
+                content: '';
+                display: block;
+                height: 2px;
+                width: 10px;
+            }
+        }
+    }
+
+
+    &.mc-indeterminate {
+        .mc-toggle-bar {
+            .mc-toggle__thumb {
+                display: flex;
+            }
+        }
     }
 
     .mc-toggle-bar-outer-container {

package/tooltip/tooltip.component.d.ts

@@ -41,6 +41,11 @@ export declare const MC_TOOLTIP_SCROLL_STRATEGY_FACTORY_PROVIDER: {
 export declare class McTooltipTrigger extends McPopUpTrigger<McTooltipComponent> implements OnDestroy {
     protected focusMonitor: FocusMonitor;
     parentPopup: McParentPopup | null;
+    /**
+     * default offset + arrow position shift
+     * @docs-private
+     */
+    arrowOffset: number;
     get tooltipVisible(): boolean;
     set tooltipVisible(value: boolean);
     get tooltipPlacement(): PopUpPlacements;