@ptsecurity/mosaic 17.2.16 → 17.4.0

package/tabs/tab-header.scss

@@ -33,8 +33,8 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
 }
 
-.mc-tab-header .mc-tab-list__content {
-    .mc-tab-group:not(.mc-tab-group_stretch-labels) & {
+.mc-tab-group:not(.mc-tab-group_stretch-labels) {
+    .mc-tab-header:not(.mc-tab-header_vertical) .mc-tab-list__content {
         &:after {
             display: flex;
             content: "";

package/toggle/_toggle-theme.scss

@@ -9,6 +9,7 @@
 @mixin mc-toggle-theme($theme) {
     $foreground: map.get($theme, foreground);
     $background: map.get($theme, background);
+    $secondary: map.get($theme, secondary);
 
     $toggle: map.get($theme, components, toggle);
 
@@ -19,6 +20,10 @@
             border-color: mc-css-variable(toggle-border, map-get($toggle, border));
 
             background: mc-css-variable(toggle-background, map-get($toggle, background));
+
+            .mc-toggle__thumb::after {
+                background: map.get($secondary, 60);
+            }
         }
 
         .mc-toggle__circle {
@@ -39,7 +44,8 @@
             }
         }
 
-        &.mc-active {
+        &.mc-active,
+        &.mc-indeterminate {
             &.mc-primary {
                 .mc-toggle-bar {
                     border-color: mc-css-variable(

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

@@ -28,6 +28,29 @@
         &.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 {