@ptsecurity/mosaic 11.6.0 → 12.2.1

package/core/pop-up/pop-up.d.ts

@@ -0,0 +1,35 @@
+import { AnimationEvent } from '@angular/animations';
+import { ChangeDetectorRef, EventEmitter, OnDestroy, TemplateRef } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
+import { PopUpVisibility } from './constants';
+import * as i0 from "@angular/core";
+export declare abstract class McPopUp implements OnDestroy {
+    private changeDetectorRef;
+    header: string | TemplateRef<any>;
+    content: string | TemplateRef<any>;
+    classMap: {};
+    warning: boolean;
+    visibility: PopUpVisibility;
+    visibleChange: EventEmitter<boolean>;
+    protected prefix: string;
+    /** Subject for notifying that the tooltip has been hidden from the view */
+    protected readonly onHideSubject: Subject<any>;
+    protected closeOnInteraction: boolean;
+    private showTimeoutId;
+    private hideTimeoutId;
+    protected constructor(changeDetectorRef: ChangeDetectorRef);
+    ngOnDestroy(): void;
+    isTemplateRef(value: any): boolean;
+    show(delay: number): void;
+    hide(delay: number): void;
+    isVisible(): boolean;
+    updateClassMap(placement: string, customClass: string, classMap?: any): void;
+    /** Returns an observable that notifies when the tooltip has been hidden from view. */
+    afterHidden(): Observable<void>;
+    markForCheck(): void;
+    animationStart(): void;
+    animationDone({ toState }: AnimationEvent): void;
+    handleBodyInteraction(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McPopUp, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopUp, never, never, {}, {}, never>;
+}

package/core/ptsecurity-mosaic-core.d.ts

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ptsecurity/mosaic/core" />
 export * from './index';
-export { mcSanityChecksFactory as ɵa } from './common-behaviors/common-module';

package/core/public-api.d.ts

@@ -13,3 +13,4 @@ export * from './selection/index';
 export * from './services/measure-scrollbar.service';
 export * from './option/index';
 export * from './forms/index';
+export * from './pop-up/index';

package/core/selection/pseudo-checkbox/pseudo-checkbox.d.ts

@@ -1,3 +1,4 @@
+import * as i0 from "@angular/core";
 export declare type McPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
 /**
  * Component that shows a simplified checkbox without including any kind of "real" checkbox.
@@ -15,4 +16,6 @@ export declare type McPseudoCheckboxState = 'unchecked' | 'checked' | 'indetermi
 export declare class McPseudoCheckbox {
     state: McPseudoCheckboxState;
     disabled: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McPseudoCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McPseudoCheckbox, "mc-pseudo-checkbox", never, { "state": "state"; "disabled": "disabled"; }, {}, never, never>;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.module.d.ts

@@ -1,2 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./pseudo-checkbox";
+import * as i2 from "@angular/common";
 export declare class McPseudoCheckboxModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McPseudoCheckboxModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McPseudoCheckboxModule, [typeof i1.McPseudoCheckbox], [typeof i2.CommonModule], [typeof i1.McPseudoCheckbox]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McPseudoCheckboxModule>;
 }

package/core/services/measure-scrollbar.service.d.ts

@@ -1,3 +1,4 @@
+import * as i0 from "@angular/core";
 export declare class McMeasureScrollbarService {
     private document;
     get scrollBarWidth(): number;
@@ -5,4 +6,6 @@ export declare class McMeasureScrollbarService {
     private scrollbarMeasure;
     constructor(document: any);
     initScrollBarWidth(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMeasureScrollbarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<McMeasureScrollbarService>;
 }

package/datepicker/calendar-body.component.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, EventEmitter, NgZone, OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
 /**
  * Extra CSS classes that can be associated with a calendar cell.
  */
@@ -14,12 +15,8 @@ export declare class McCalendarCell {
     displayValue: string;
     ariaLabel: string;
     enabled: boolean;
-    cssClasses?: string | Set<string> | {
-        [key: string]: any;
-    } | string[] | undefined;
-    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: string | Set<string> | {
-        [key: string]: any;
-    } | string[] | undefined);
+    cssClasses?: McCalendarCellCssClasses | undefined;
+    constructor(value: number, displayValue: string, ariaLabel: string, enabled: boolean, cssClasses?: McCalendarCellCssClasses | undefined);
 }
 /**
  * An internal component used to display calendar data in a table.
@@ -61,4 +58,6 @@ export declare class McCalendarBody implements OnChanges {
     isActiveCell(rowIndex: number, colIndex: number): boolean;
     /** Focuses the active cell after the microtask queue is empty. */
     focusActiveCell(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McCalendarBody, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendarBody, "[mc-calendar-body]", ["mcCalendarBody"], { "label": "label"; "rows": "rows"; "todayValue": "todayValue"; "selectedValue": "selectedValue"; "labelMinRequiredCells": "labelMinRequiredCells"; "numCols": "numCols"; "activeCell": "activeCell"; "cellAspectRatio": "cellAspectRatio"; }, { "selectedValueChange": "selectedValueChange"; }, never, never>;
 }

package/datepicker/calendar.component.d.ts

@@ -7,6 +7,7 @@ import { McDatepickerIntl } from './datepicker-intl';
 import { McMonthView } from './month-view.component';
 import { McMultiYearView } from './multi-year-view.component';
 import { McYearView } from './year-view.component';
+import * as i0 from "@angular/core";
 /**
  * Possible views for the calendar.
  * @docs-private
@@ -42,6 +43,8 @@ export declare class McCalendarHeader<D> {
     nextEnabled(): boolean;
     /** Whether the two dates represent the same view in the current view mode (month or year). */
     private isSameView;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McCalendarHeader<any>, [null, null, { optional: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendarHeader<any>, "mc-calendar-header", ["mcCalendarHeader"], {}, {}, never, never>;
 }
 /**
  * A calendar that is used as part of the datepicker.
@@ -143,4 +146,6 @@ export declare class McCalendar<D> implements AfterContentInit, AfterViewChecked
     private getValidDateOrNull;
     /** Returns the component instance that corresponds to the current calendar view. */
     private getCurrentViewComponent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McCalendar<any>, [null, { optional: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCalendar<any>, "mc-calendar", ["mcCalendar"], { "startAt": "startAt"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "headerComponent": "headerComponent"; "startView": "startView"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never>;
 }

package/datepicker/datepicker-input.directive.d.ts

@@ -2,9 +2,11 @@ import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
-import { McTooltip } from '@ptsecurity/mosaic/tooltip';
+import { McWarningTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
 import { Subject } from 'rxjs';
 import { McDatepicker } from './datepicker.component';
+import * as i0 from "@angular/core";
+export declare const MAX_YEAR = 9999;
 /** @docs-private */
 export declare const MC_DATEPICKER_VALUE_ACCESSOR: any;
 /** @docs-private */
@@ -70,7 +72,7 @@ export declare class McDatepickerInput<D> implements McFormFieldControl<D>, Cont
     get id(): string;
     set id(value: string);
     private _id;
-    set mcValidationTooltip(tooltip: McTooltip);
+    set mcValidationTooltip(tooltip: McWarningTooltipTrigger);
     incorrectInput: EventEmitter<void>;
     /** Emits when a `change` event is fired on this `<input>`. */
     readonly dateChange: EventEmitter<McDatepickerInputEvent<D>>;
@@ -165,4 +167,6 @@ export declare class McDatepickerInput<D> implements McFormFieldControl<D>, Cont
     private getDigitPositions;
     private createDate;
     private correctCursorPosition;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerInput<any>, "input[mcDatepicker]", ["mcDatepickerInput"], { "placeholder": "placeholder"; "required": "required"; "mcDatepicker": "mcDatepicker"; "mcDatepickerFilter": "mcDatepickerFilter"; "value": "value"; "min": "min"; "max": "max"; "disabled": "disabled"; "id": "id"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never>;
 }

package/datepicker/datepicker-intl.d.ts

@@ -1,4 +1,5 @@
 import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
 /** Datepicker data that requires internationalization. */
 export declare class McDatepickerIntl {
     /**
@@ -26,4 +27,6 @@ export declare class McDatepickerIntl {
     switchToMonthViewLabel: string;
     /** A label for the 'switch to year view' button (used by screen readers). */
     switchToMultiYearViewLabel: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<McDatepickerIntl>;
 }

package/datepicker/datepicker-module.d.ts

@@ -1,2 +1,20 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./calendar.component";
+import * as i2 from "./calendar-body.component";
+import * as i3 from "./datepicker.component";
+import * as i4 from "./datepicker-input.directive";
+import * as i5 from "./datepicker-toggle.component";
+import * as i6 from "./month-view.component";
+import * as i7 from "./year-view.component";
+import * as i8 from "./multi-year-view.component";
+import * as i9 from "@angular/common";
+import * as i10 from "@ptsecurity/mosaic/button";
+import * as i11 from "@angular/cdk/overlay";
+import * as i12 from "@angular/cdk/a11y";
+import * as i13 from "@angular/cdk/portal";
+import * as i14 from "@ptsecurity/mosaic/icon";
 export declare class McDatepickerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<McDatepickerModule, [typeof i1.McCalendar, typeof i2.McCalendarBody, typeof i3.McDatepicker, typeof i3.McDatepickerContent, typeof i4.McDatepickerInput, typeof i5.McDatepickerToggle, typeof i5.McDatepickerToggleIcon, typeof i6.McMonthView, typeof i7.McYearView, typeof i8.McMultiYearView, typeof i1.McCalendarHeader], [typeof i9.CommonModule, typeof i10.McButtonModule, typeof i11.OverlayModule, typeof i12.A11yModule, typeof i13.PortalModule, typeof i14.McIconModule], [typeof i1.McCalendar, typeof i2.McCalendarBody, typeof i3.McDatepicker, typeof i3.McDatepickerContent, typeof i4.McDatepickerInput, typeof i5.McDatepickerToggle, typeof i5.McDatepickerToggleIcon, typeof i6.McMonthView, typeof i7.McYearView, typeof i8.McMultiYearView, typeof i1.McCalendarHeader, typeof i10.McButtonModule]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<McDatepickerModule>;
 }

package/datepicker/datepicker-toggle.component.d.ts

@@ -2,8 +2,11 @@ import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChange
 import { McButton } from '@ptsecurity/mosaic/button';
 import { McDatepickerIntl } from './datepicker-intl';
 import { McDatepicker } from './datepicker.component';
+import * as i0 from "@angular/core";
 /** Can be used to override the icon of a `mcDatepickerToggle`. */
 export declare class McDatepickerToggleIcon {
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerToggleIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McDatepickerToggleIcon, "[mcDatepickerToggleIcon]", never, {}, {}, never>;
 }
 export declare class McDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDestroy {
     intl: McDatepickerIntl;
@@ -27,4 +30,6 @@ export declare class McDatepickerToggle<D> implements AfterContentInit, OnChange
     ngAfterContentInit(): void;
     open(event: Event): void;
     private watchStateChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerToggle<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerToggle<any>, "mc-datepicker-toggle", ["mcDatepickerToggle"], { "disabled": "disabled"; "datepicker": "for"; "tabIndex": "tabIndex"; }, {}, ["customIcon"], ["[mcDatepickerToggleIcon]"]>;
 }

package/datepicker/datepicker.component.d.ts

@@ -7,6 +7,7 @@ import { Subject } from 'rxjs';
 import { McCalendarCellCssClasses } from './calendar-body.component';
 import { McCalendar, McCalendarView } from './calendar.component';
 import { McDatepickerInput } from './datepicker-input.directive';
+import * as i0 from "@angular/core";
 /** Injection token that determines the scroll handling while the calendar is open. */
 export declare const MC_DATEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
@@ -39,6 +40,8 @@ export declare class McDatepickerContent<D> implements OnDestroy {
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     startExitAnimation(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepickerContent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepickerContent<any>, "mc-datepicker__content", ["mcDatepickerContent"], {}, {}, never, never>;
 }
 /** Component responsible for managing the datepicker popup/dialog. */
 export declare class McDatepicker<D> implements OnDestroy {
@@ -150,4 +153,6 @@ export declare class McDatepicker<D> implements OnDestroy {
      * @returns The given object if it is both a date instance and valid, otherwise null.
      */
     private getValidDateOrNull;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McDatepicker<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McDatepicker<any>, "mc-datepicker", ["mcDatepicker"], { "hasBackdrop": "hasBackdrop"; "startAt": "startAt"; "disabled": "disabled"; "opened": "opened"; "calendarHeaderComponent": "calendarHeaderComponent"; "startView": "startView"; "panelClass": "panelClass"; "dateClass": "dateClass"; "backdropClass": "backdropClass"; }, { "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "openedStream": "opened"; "closedStream": "closed"; }, never, never>;
 }

package/datepicker/month-view.component.d.ts

@@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
 import { McCalendarBody, McCalendarCell, McCalendarCellCssClasses } from './calendar-body.component';
+import * as i0 from "@angular/core";
 /**
  * An internal component used to display a single month in the datepicker.
  * @docs-private
@@ -87,4 +88,6 @@ export declare class McMonthView<D> implements AfterContentInit {
     private getValidDateOrNull;
     /** Determines whether the user has the RTL layout direction. */
     private isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMonthView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMonthView<any>, "mc-month-view", ["mcMonthView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; "dateClass": "dateClass"; }, { "selectedChange": "selectedChange"; "userSelection": "userSelection"; "activeDateChange": "activeDateChange"; }, never, never>;
 }

package/datepicker/multi-year-view.component.d.ts

@@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { DateAdapter } from '@ptsecurity/cdk/datetime';
 import { McCalendarBody, McCalendarCell } from './calendar-body.component';
+import * as i0 from "@angular/core";
 export declare const yearsPerPage = 24;
 export declare const yearsPerRow = 4;
 /**
@@ -66,4 +67,6 @@ export declare class McMultiYearView<D> implements AfterContentInit {
     private getValidDateOrNull;
     /** Determines whether the user has the RTL layout direction. */
     private isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McMultiYearView<any>, [null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McMultiYearView<any>, "mc-multi-year-view", ["mcMultiYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
 }

package/datepicker/package.json

@@ -5,7 +5,6 @@
   "esm2015": "../esm2015/datepicker/ptsecurity-mosaic-datepicker.js",
   "fesm2015": "../fesm2015/ptsecurity-mosaic-datepicker.js",
   "typings": "ptsecurity-mosaic-datepicker.d.ts",
-  "metadata": "ptsecurity-mosaic-datepicker.metadata.json",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/datepicker"
 }

package/datepicker/ptsecurity-mosaic-datepicker.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ptsecurity/mosaic/datepicker" />
 export * from './index';

package/datepicker/year-view.component.d.ts

@@ -2,6 +2,7 @@ import { Directionality } from '@angular/cdk/bidi';
 import { AfterContentInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { DateAdapter, McDateFormats } from '@ptsecurity/cdk/datetime';
 import { McCalendarBody, McCalendarCell } from './calendar-body.component';
+import * as i0 from "@angular/core";
 /**
  * An internal component used to display a single year in the datepicker.
  * @docs-private
@@ -84,4 +85,6 @@ export declare class McYearView<D> implements AfterContentInit {
     private getValidDateOrNull;
     /** Determines whether the user has the RTL layout direction. */
     private isRtl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McYearView<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McYearView<any>, "mc-year-view", ["mcYearView"], { "activeDate": "activeDate"; "selected": "selected"; "minDate": "minDate"; "maxDate": "maxDate"; "dateFilter": "dateFilter"; }, { "selectedChange": "selectedChange"; "monthSelected": "monthSelected"; "activeDateChange": "activeDateChange"; }, never, never>;
 }

package/design-tokens/package.json

@@ -5,7 +5,6 @@
   "esm2015": "../esm2015/design-tokens/ptsecurity-mosaic-design-tokens.js",
   "fesm2015": "../fesm2015/ptsecurity-mosaic-design-tokens.js",
   "typings": "ptsecurity-mosaic-design-tokens.d.ts",
-  "metadata": "ptsecurity-mosaic-design-tokens.metadata.json",
   "sideEffects": false,
   "name": "@ptsecurity/mosaic/design-tokens"
 }

package/design-tokens/ptsecurity-mosaic-design-tokens.d.ts

@@ -1,4 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
+/// <amd-module name="@ptsecurity/mosaic/design-tokens" />
 export * from './index';

package/design-tokens/tokens/components/list.json5

@@ -6,10 +6,6 @@
 
             'item-height': { value: '{size.option-height}' },
 
-            'two-line-height': { value: '72px' },
-            'three-line-height': { value: '88px' },
-            'multi-line-padding': { value: '16px' },
-
             'icon-width': { value: '24px' }
         },
         font: {

package/design-tokens/tokens/components/popover.json5

@@ -1,16 +1,24 @@
 {
     popover: {
         'light-color-scheme': {
+            background: { value: 'white' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            shadow: { value: '{popup.light-color-scheme.shadow.value}' },
             border: { value: '{light-color-scheme.foreground.border.value}' }
         },
         'dark-color-scheme': {
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            shadow: { value: '{popup.dark-color-scheme.shadow.value}' },
             border: { value: '{dark-color-scheme.second.palette.value.700.value}' }
         },
         size: {
+            'max-height': { value: '480px' },
             padding: { value: '16px' },
-            'border-width': { value: '1px' },
-            'border-radius': { value: '4px' },
-            'arrow-width': { value: '4px' },
+            'border-radius': { value: '3px' },
+
+            'arrow-size': { value: '12px' },
+            'trigger-margin': { value: '9px' },
 
             'small-width': { value: '200px' },
             'normal-width': { value: '400px' },
@@ -21,7 +29,18 @@
         }
     },
     'popover-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.100.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            background: { value: 'white' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{popup.dark-color-scheme.footer-background.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            background: { value: '{dark-color-scheme.second.palette.value.700.value}' }
+        },
         size: {
+            height: { value: '10px 16px' },
             padding: { value: '10px 16px' }
         },
         font: {
@@ -29,9 +48,18 @@
         }
     },
     'popover-footer': {
+        'light-color-scheme': {
+            border: { value: '{popup.light-color-scheme.footer-background.value}' },
+            background: { value: '{popup.light-color-scheme.footer-background.value}' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{popup.dark-color-scheme.footer-background.value}' },
+            background: { value: '{popup.dark-color-scheme.footer-background.value}' }
+        },
         size: {
+            'margin-top': { value: '8px' },
             padding: { value: '12px {padding.headerFooter-horizontal}' },
-            'margin-top': { value: '8px' }
+            'height': { value: '56px' }
         },
         font: {
             default: { value: 'body' }

package/design-tokens/tokens/components/tooltip.json5

@@ -3,6 +3,7 @@
         'light-color-scheme': {
             background: { value: '{light-color-scheme.second.palette.value.700.value}' },
             text: { value: '{light-color-scheme.second.palette.value.contrast.700.value}' },
+            border: { value: 'transparent' },
             shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' },
 
             'warning': {
@@ -14,6 +15,7 @@
         'dark-color-scheme': {
             background: { value: '{dark-color-scheme.second.palette.value.40.value}' },
             text: { value: '{dark-color-scheme.second.palette.value.contrast.40.value}' },
+            border: { value: 'transparent' },
             shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' },
 
             'warning': {
@@ -23,15 +25,59 @@
             }
         },
         size: {
-            'max-width': { value: '240px' },
+            'max-width': { value: '300px' },
+            'border-width': { value: '1px' },
             'border-radius': { value: '3px' },
+            padding: { value: '8px 16px' },
             'arrow-size': { value: '12px' },
-            'arrow-width': { value: '5px' },
+            'trigger-margin': { value: '9px' }
+        },
+        font: {
+            default: { value: 'caption' }
+        }
+    },
+    'extended-tooltip': {
+        'light-color-scheme': {
+            background: { value: '{popup.light-color-scheme.background.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            border: { value: '{popup.light-color-scheme.border.value}' },
+            shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' }
+        },
+        'dark-color-scheme': {
+            background: { value: '{popup.dark-color-scheme.background.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            border: { value: '{popup.dark-color-scheme.border.value}' },
+            shadow: { value: '0 2px 4px 0 rgba(0, 0, 0, 0.2)' }
+        },
+        size: {
+            'border-radius': { value: '3px' },
+            'arrow-size': { value: '12px' },
+            'trigger-margin': { value: '9px' },
             padding: { value: '8px 16px' },
-            distance: { value: '9px' }
+            'max-height': { value: '480px' }
         },
         font: {
             default: { value: 'caption' }
         }
+    },
+    'extended-tooltip-header': {
+        'light-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.100.value}' },
+            text: { value: '{light-color-scheme.foreground.text.value}' },
+            background: { value: 'white' }
+        },
+        'dark-color-scheme': {
+            border: { value: '{light-color-scheme.second.palette.value.60.value}' },
+            text: { value: '{dark-color-scheme.foreground.text.value}' },
+            background: { value: '{light-color-scheme.second.palette.value.700.value}' }
+        },
+        size: {
+            height: { value: '40px' },
+            padding: { value: '10px 16px' }
+        },
+        font: {
+            default: { value: 'subheading' }
+        }
     }
+
 }

package/design-tokens/tokens/components/tree.json5

@@ -1,9 +1,9 @@
 {
     tree: {
         size: {
-            'padding-right': { value: '{padding.option-horizontal}' },
-            'border-width': { value: '2px' },
-            'node-height': { value: '{size.option-height}' }
+            'node-height': { value: '32px' },
+            'padding-left': { value: '8px' },
+            'padding-right': { value: '16px' },
         },
         font: {
             node: { value: 'body' }

package/design-tokens/tokens/properties/globals.json5

@@ -1,6 +1,6 @@
 {
     size: {
-        'option-height': '28px',
+        'option-height': '32px',
         'panel-height': '48px',
         // у radio и checkbox в макетах 20px, у тоггла есть две модификации на 16px и 14px
         'control_S-height': '16px',

package/design-tokens/tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 21 Oct 2021 09:01:01 GMT
+ * Generated on Thu, 28 Oct 2021 12:33:10 GMT
  */
 export declare const LightColorSchemePrimaryDefault = "#338FCC";
 export declare const LightColorSchemePrimaryPalette: {
@@ -7348,10 +7348,7 @@ export declare const LinkAnimationStateHoverTransition = "color 0ms";
 export declare const LinkFontDefault = "body";
 export declare const ListSizeHorizontalPadding = "16px";
 export declare const ListSizeIconPadding = "4px";
-export declare const ListSizeItemHeight = "28px";
-export declare const ListSizeTwoLineHeight = "72px";
-export declare const ListSizeThreeLineHeight = "88px";
-export declare const ListSizeMultiLinePadding = "16px";
+export declare const ListSizeItemHeight = "32px";
 export declare const ListSizeIconWidth = "24px";
 export declare const ListFontItem = "body";
 export declare const ModalLightColorSchemeShadow = "(0 0 0 1px #B3B3B3, 0 6px 12px 0 rgba(0, 0, 0, 0.5))";
@@ -7408,20 +7405,39 @@ export declare const OptionSizeHorizontalPadding = "16px";
 export declare const OptionSizeHeight = "32px";
 export declare const OptionSizeBorderWidth = "2px";
 export declare const OptionFontDefault = "body";
+export declare const PopoverLightColorSchemeBackground = "white";
+export declare const PopoverLightColorSchemeText = "#4D4D4D";
+export declare const PopoverLightColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopoverLightColorSchemeBorder = "#B3B3B3";
+export declare const PopoverDarkColorSchemeBackground = "#4D4D4D";
+export declare const PopoverDarkColorSchemeText = "#F0F0F0";
+export declare const PopoverDarkColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopoverDarkColorSchemeBorder = "#4D4D4D";
+export declare const PopoverSizeMaxHeight = "480px";
 export declare const PopoverSizePadding = "16px";
-export declare const PopoverSizeBorderWidth = "1px";
-export declare const PopoverSizeBorderRadius = "4px";
-export declare const PopoverSizeArrowWidth = "4px";
+export declare const PopoverSizeBorderRadius = "3px";
+export declare const PopoverSizeArrowSize = "12px";
+export declare const PopoverSizeTriggerMargin = "9px";
 export declare const PopoverSizeSmallWidth = "200px";
 export declare const PopoverSizeNormalWidth = "400px";
 export declare const PopoverSizeLargeWidth = "640px";
 export declare const PopoverFontDefault = "body";
+export declare const PopoverHeaderLightColorSchemeBorder = "#E6E6E6";
+export declare const PopoverHeaderLightColorSchemeText = "#4D4D4D";
+export declare const PopoverHeaderLightColorSchemeBackground = "white";
+export declare const PopoverHeaderDarkColorSchemeBorder = "transparent";
+export declare const PopoverHeaderDarkColorSchemeText = "#F0F0F0";
+export declare const PopoverHeaderDarkColorSchemeBackground = "#4D4D4D";
+export declare const PopoverHeaderSizeHeight = "10px 16px";
 export declare const PopoverHeaderSizePadding = "10px 16px";
 export declare const PopoverHeaderFontDefault = "subheading";
-export declare const PopoverFooterSizePadding = "12px 16px";
+export declare const PopoverFooterLightColorSchemeBorder = "#F0F0F0";
+export declare const PopoverFooterLightColorSchemeBackground = "#F0F0F0";
+export declare const PopoverFooterDarkColorSchemeBorder = "transparent";
+export declare const PopoverFooterDarkColorSchemeBackground = "transparent";
 export declare const PopoverFooterSizeMarginTop = "8px";
+export declare const PopoverFooterSizePadding = "12px 16px";
+export declare const PopoverFooterSizeHeight = "56px";
 export declare const PopoverFooterFontDefault = "body";
 export declare const PopupLightColorSchemeShadow = "0 3px 3px 0 rgba(0, 0, 0, 0.2)";
 export declare const PopupLightColorSchemeBorder = "#B3B3B3";
@@ -7573,24 +7589,49 @@ export declare const ToggleSmallSizeBorderRadius = "8px";
 export declare const ToggleSmallFontDefault = "caption";
 export declare const TooltipLightColorSchemeBackground = "#4D4D4D";
 export declare const TooltipLightColorSchemeText = "white";
+export declare const TooltipLightColorSchemeBorder = "transparent";
 export declare const TooltipLightColorSchemeShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.2)";
 export declare const TooltipLightColorSchemeWarningBackground = "#FCF5E8";
 export declare const TooltipLightColorSchemeWarningText = "#4D4D4D";
 export declare const TooltipLightColorSchemeWarningBorder = "#F0D49B";
 export declare const TooltipDarkColorSchemeBackground = "#F5F5F5";
 export declare const TooltipDarkColorSchemeText = "#4D4D4D";
+export declare const TooltipDarkColorSchemeBorder = "transparent";
 export declare const TooltipDarkColorSchemeShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.2)";
 export declare const TooltipDarkColorSchemeWarningBackground = "#FCF5E8";
 export declare const TooltipDarkColorSchemeWarningText = "#4D4D4D";
 export declare const TooltipDarkColorSchemeWarningBorder = "#F0D49B";
-export declare const TooltipSizeMaxWidth = "240px";
+export declare const TooltipSizeMaxWidth = "300px";
+export declare const TooltipSizeBorderWidth = "1px";
 export declare const TooltipSizeBorderRadius = "3px";
-export declare const TooltipSizeArrowSize = "12px";
-export declare const TooltipSizeArrowWidth = "5px";
 export declare const TooltipSizePadding = "8px 16px";
-export declare const TooltipSizeDistance = "9px";
+export declare const TooltipSizeArrowSize = "12px";
+export declare const TooltipSizeTriggerMargin = "9px";
 export declare const TooltipFontDefault = "caption";
+export declare const ExtendedTooltipLightColorSchemeBackground = "white";
+export declare const ExtendedTooltipLightColorSchemeText = "#4D4D4D";
+export declare const ExtendedTooltipLightColorSchemeBorder = "#B3B3B3";
+export declare const ExtendedTooltipLightColorSchemeShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.2)";
+export declare const ExtendedTooltipDarkColorSchemeBackground = "#4D4D4D";
+export declare const ExtendedTooltipDarkColorSchemeText = "#F0F0F0";
+export declare const ExtendedTooltipDarkColorSchemeBorder = "#999999";
+export declare const ExtendedTooltipDarkColorSchemeShadow = "0 2px 4px 0 rgba(0, 0, 0, 0.2)";
+export declare const ExtendedTooltipSizeBorderRadius = "3px";
+export declare const ExtendedTooltipSizeArrowSize = "12px";
+export declare const ExtendedTooltipSizeTriggerMargin = "9px";
+export declare const ExtendedTooltipSizePadding = "8px 16px";
+export declare const ExtendedTooltipSizeMaxHeight = "480px";
+export declare const ExtendedTooltipFontDefault = "caption";
+export declare const ExtendedTooltipHeaderLightColorSchemeBorder = "#E6E6E6";
+export declare const ExtendedTooltipHeaderLightColorSchemeText = "#4D4D4D";
+export declare const ExtendedTooltipHeaderLightColorSchemeBackground = "white";
+export declare const ExtendedTooltipHeaderDarkColorSchemeBorder = "#F0F0F0";
+export declare const ExtendedTooltipHeaderDarkColorSchemeText = "#F0F0F0";
+export declare const ExtendedTooltipHeaderDarkColorSchemeBackground = "#4D4D4D";
+export declare const ExtendedTooltipHeaderSizeHeight = "40px";
+export declare const ExtendedTooltipHeaderSizePadding = "10px 16px";
+export declare const ExtendedTooltipHeaderFontDefault = "subheading";
+export declare const TreeSizeNodeHeight = "32px";
+export declare const TreeSizePaddingLeft = "8px";
 export declare const TreeSizePaddingRight = "16px";
-export declare const TreeSizeBorderWidth = "2px";
-export declare const TreeSizeNodeHeight = "28px";
 export declare const TreeFontNode = "body";