@ptsecurity/mosaic 14.7.1 → 15.0.0

package/tabs/tab-label-wrapper.directive.d.ts

@@ -27,5 +27,5 @@ export declare class McTabLabelWrapper extends McTabLabelWrapperMixinBase implem
     getInnerText(): any;
     private addClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabLabelWrapper, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabLabelWrapper, "[mcTabLabelWrapper]", never, { "disabled": "disabled"; "tab": "tab"; }, {}, ["labelContent"], never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabLabelWrapper, "[mcTabLabelWrapper]", never, { "disabled": "disabled"; "tab": "tab"; }, {}, ["labelContent"], never, false, never>;
 }

package/tabs/tab-label.directive.d.ts

@@ -5,5 +5,5 @@ export declare const MC_TAB_LABEL: InjectionToken<McTabLabel>;
 /** Used to flag tab labels for use with the portal directive */
 export declare class McTabLabel extends CdkPortal {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabLabel, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabLabel, "[mc-tab-label], [mcTabLabel]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTabLabel, "[mc-tab-label], [mcTabLabel]", never, {}, {}, never, never, false, never>;
 }

package/tabs/tab-nav-bar/tab-nav-bar.d.ts

@@ -25,7 +25,7 @@ export declare class McTabLink extends McTabLinkMixinBase implements OnDestroy,
     ngOnDestroy(): void;
     private addClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabLink, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTabLink, "a[mc-tab-link], a[mcTabLink]", ["mcTabLink"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "active": "active"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTabLink, "a[mc-tab-link], a[mcTabLink]", ["mcTabLink"], { "disabled": "disabled"; "tabIndex": "tabIndex"; "active": "active"; }, {}, never, ["*"], false, never>;
 }
 /**
  * Navigation component matching the styles of the tab group header.
@@ -36,5 +36,5 @@ export declare class McTabNav implements AfterContentInit {
     constructor(vertical: string);
     ngAfterContentInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTabNav, [{ attribute: "vertical"; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTabNav, "[mc-tab-nav-bar]", ["mcTabNavBar", "mcTabNav"], {}, {}, ["links"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTabNav, "[mc-tab-nav-bar]", ["mcTabNavBar", "mcTabNav"], {}, {}, ["links"], ["*"], false, never>;
 }

package/tabs/tab-nav-bar/tab-nav-bar.scss

@@ -0,0 +1,54 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../tabs-common';
+
+@use '../../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-tab-link {
+    vertical-align: top;
+    text-decoration: none;
+    -webkit-tap-highlight-color: transparent;
+
+    @include tabs-common.tab-label;
+
+    & .mc-tab-group_stretch-labels & {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+
+    & > .mc-icon {
+        &.mc-icon_left {
+            margin-right: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+
+        &.mc-icon_right {
+            margin-left: var(--mc-tabs-size-label-icon-margin, map.get($tokens, tabs-size-label-icon-margin));
+        }
+    }
+}
+
+.mc-tab-nav-bar {
+    display: flex;
+    flex-grow: 1;
+
+    position: relative;
+
+    padding: 1px 1px 0 1px;
+
+    & .mc-tab-group_align-labels-center {
+        justify-content: center;
+    }
+
+    & .mc-tab-group_align-labels-end {
+        justify-content: flex-end;
+    }
+}
+
+.mc-tab-nav-bar.mc-tab-group_vertical {
+    flex-direction: column;
+    flex-grow: 0;
+}

package/tabs/tab.component.d.ts

@@ -64,5 +64,5 @@ export declare class McTab extends McTabMixinBase implements OnInit, CanDisable,
      */
     protected setTemplateLabelInput(value: McTabLabel): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTab, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTab, "mc-tab", ["mcTab"], { "disabled": "disabled"; "tooltipTitle": "tooltipTitle"; "tooltipPlacement": "tooltipPlacement"; "textLabel": "label"; "empty": "empty"; "tabId": "tabId"; }, {}, ["templateLabel", "explicitContent"], ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTab, "mc-tab", ["mcTab"], { "disabled": "disabled"; "tooltipTitle": "tooltipTitle"; "tooltipPlacement": "tooltipPlacement"; "textLabel": "label"; "empty": "empty"; "tabId": "tabId"; }, {}, ["templateLabel", "explicitContent"], ["*"], false, never>;
 }

package/tags/_tag-theme.scss

@@ -0,0 +1,122 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-tag-color($params) {
+    background: map.get($params, background);
+    border-color: map.get($params, border);
+
+    & .mc-tag__text {
+        color: map.get($params, text);
+    }
+
+    &.mc-active,
+    &.mc-focused {
+        border-color: map.get($params, focused);
+        box-shadow: 0 0 0 1px map.get($params, focused);
+    }
+
+    &:not(.mc-disabled) .mc-icon {
+        color: map.get($params, icon);
+
+        &.mc-tag-remove:hover {
+            color: map.get($params, icon_hovered);
+        }
+    }
+
+    &.mc-disabled {
+        border-color: map.get($params, border_disabled);
+        background: map.get($params, background_disabled);
+
+        & .mc-icon,
+        & .mc-tag__text {
+            color: map.get($params, disabled);
+        }
+
+        & .mc-tag-overlay {
+            background: transparent;
+        }
+    }
+}
+
+@mixin mc-tag-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $tags: map.get(map.get($theme, components), tags);
+
+    .mc-tag {
+        &.mc-primary {
+            @include mc-tag-color(map.get($tags, primary));
+        }
+
+        &.mc-secondary {
+            @include mc-tag-color(map.get($tags, secondary));
+        }
+
+        &.mc-error {
+            @include mc-tag-color(map.get($tags, error));
+        }
+
+        &:hover,
+        &.mc-hovered {
+            & .mc-tag-overlay {
+                background: map.get($background, overlay-hover);
+            }
+        }
+
+        &.mc-disabled {
+            color: map.get($foreground, text-disabled);
+
+            border-color: transparent;
+
+            background-color: map.get($background, background-disabled);
+
+            & .mc-tag-overlay {
+                background: mc-color($background, overlay-disabled);
+            }
+        }
+    }
+
+    .mc-tag-input {
+        color: map.get($foreground, text);
+
+        &::placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+
+        &::-ms-input-placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+
+        &::-webkit-input-placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin mc-tag-typography($config) {
+    .mc-tag:not(.mc-tag_mono):not(.mc-tag_caps) {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tags-font-default));
+    }
+
+    .mc-tag_mono {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tags-font-mono));
+    }
+
+    .mc-tag_caps {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tags-font-caps));
+    }
+
+    .mc-tag-input {
+        @include mc-typography-level-to-styles($config, map.get($tokens, tag-input-font-default));
+    }
+}
+

package/tags/tag-input.d.ts

@@ -83,5 +83,5 @@ export declare class McTagInput implements McTagTextControl, OnChanges {
     /** Checks whether a keycode is one of the configured separators. */
     private isSeparatorKey;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTagInput, [null, null, null, { optional: true; self: true; }, { optional: true; self: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": "mcTagInputSeparatorKeyCodes"; "placeholder": "placeholder"; "id": "id"; "tagList": "mcTagInputFor"; "addOnBlur": "mcTagInputAddOnBlur"; "disabled": "disabled"; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagInput, "input[mcTagInputFor]", ["mcTagInput", "mcTagInputFor"], { "separatorKeyCodes": "mcTagInputSeparatorKeyCodes"; "placeholder": "placeholder"; "id": "id"; "tagList": "mcTagInputFor"; "addOnBlur": "mcTagInputAddOnBlur"; "disabled": "disabled"; }, { "tagEnd": "mcTagInputTokenEnd"; }, never, never, false, never>;
 }

package/tags/tag-list.component.d.ts

@@ -242,5 +242,5 @@ export declare class McTagList extends McTagListMixinBase implements McFormField
     /** Revalidate control. */
     private revalidate;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTagList, [null, null, null, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; self: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTagList, "mc-tag-list", ["mcTagList"], { "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "selectable": "selectable"; "tabIndex": "tabIndex"; "errorStateMatcher": "errorStateMatcher"; "orientation": "orientation"; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "mc-cleaner"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTagList, "mc-tag-list", ["mcTagList"], { "multiple": "multiple"; "compareWith": "compareWith"; "value": "value"; "required": "required"; "placeholder": "placeholder"; "disabled": "disabled"; "selectable": "selectable"; "tabIndex": "tabIndex"; "errorStateMatcher": "errorStateMatcher"; "orientation": "orientation"; }, { "valueChange": "valueChange"; "change": "change"; }, ["cleaner", "tags"], ["*", "mc-cleaner"], false, never>;
 }

package/tags/tag-list.scss

@@ -0,0 +1,52 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-tag-list {
+    display: flex;
+    flex-direction: row;
+
+    box-sizing: border-box;
+}
+
+.mc-tag-input {
+    border: none;
+    outline: none;
+    background: transparent;
+}
+
+.mc-tags-list__list-container {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 100%;
+
+    box-sizing: border-box;
+
+    min-width: 0;
+
+    min-height: calc(
+        var(--mc-form-field-size-height, map.get($tokens, form-field-size-height)) -
+        (var(--mc-form-field-size-border-width, map.get($tokens, form-field-size-border-width)) * 2)
+    );
+
+    padding: var(--mc-tag-list-size-padding, map.get($tokens, tag-list-size-padding));
+
+    & .mc-tag-input {
+        max-width: 100%;
+
+        flex: 1 1 auto;
+
+        height: var(--mc-tag-input-size-height, map.get($tokens, tag-input-size-height));
+        margin: var(--mc-tag-input-size-margin, map.get($tokens, tag-input-size-margin));
+    }
+}
+
+.mc-tags-list__cleaner {
+    & .mc-cleaner {
+        height: 30px;
+    }
+}

package/tags/tag.component.d.ts

@@ -20,7 +20,7 @@ export declare class McTagSelectionChange {
  */
 export declare class McTagAvatar {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTagAvatar, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagAvatar, "mc-tag-avatar, [mcTagAvatar]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagAvatar, "mc-tag-avatar, [mcTagAvatar]", never, {}, {}, never, never, false, never>;
 }
 /**
  * Dummy directive to add CSS class to tag trailing icon.
@@ -28,7 +28,7 @@ export declare class McTagAvatar {
  */
 export declare class McTagTrailingIcon {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTagTrailingIcon, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagTrailingIcon, "mc-tag-trailing-icon, [mcTagTrailingIcon]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagTrailingIcon, "mc-tag-trailing-icon, [mcTagTrailingIcon]", never, {}, {}, never, never, false, never>;
 }
 /** @docs-private */
 export declare class McTagBase {
@@ -115,7 +115,7 @@ export declare class McTag extends McTagMixinBase implements IFocusableOption, O
     blur(): void;
     private dispatchSelectionChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTag, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTag, "mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]", ["mcTag"], { "color": "color"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "removable": "removable"; "tabindex": "tabindex"; "disabled": "disabled"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[mc-icon]:not([mcTagRemove])", "*", "[mcTagRemove]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTag, "mc-tag, [mc-tag], mc-basic-tag, [mc-basic-tag]", ["mcTag"], { "color": "color"; "selected": "selected"; "value": "value"; "selectable": "selectable"; "removable": "removable"; "tabindex": "tabindex"; "disabled": "disabled"; }, { "selectionChange": "selectionChange"; "destroyed": "destroyed"; "removed": "removed"; }, ["avatar", "trailingIcon", "removeIcon", "contentChildren"], ["[mc-icon]:not([mcTagRemove])", "*", "[mcTagRemove]"], false, never>;
 }
 /**
  *
@@ -135,5 +135,5 @@ export declare class McTagRemove {
     /** Calls the parent tag's public `remove()` method if applicable. */
     handleClick(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTagRemove, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagRemove, "[mcTagRemove]", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTagRemove, "[mcTagRemove]", never, {}, {}, never, never, false, never>;
 }

package/tags/tag.scss

@@ -0,0 +1,115 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-tag {
+    position: relative;
+
+    display: inline-block;
+
+    max-width: 100%;
+
+    margin: var(--mc-tags-size-margin, map.get($tokens, tags-size-margin));
+
+    height: var(--mc-tags-size-height, map.get($tokens, tags-size-height));
+
+    border: {
+        width: var(--mc-tags-size-border-width, map.get($tokens, tags-size-border-width));
+        style: solid;
+        radius: var(--mc-tags-size-border-radius, map.get($tokens, tags-size-border-radius));
+    }
+
+    cursor: default;
+
+    outline: none;
+
+    box-sizing: border-box;
+
+    & .mc-icon.mc-tag-remove:hover {
+        cursor: pointer;
+    }
+
+    &.mc-disabled .mc-icon.mc-tag-remove:hover {
+        cursor: default;
+    }
+
+    & .mc-tag__text {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
+    &:not(.mc-tag-with-icon) .mc-tag__text {
+        margin-right: calc(
+            var(--mc-tags-size-text-margin, #{map.get($tokens, tags-size-text-margin)}) -
+            var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
+        );
+    }
+}
+
+.mc-tag__wrapper {
+    display: flex;
+    align-items: center;
+
+    height: 100%;
+
+    flex: 1 1 100%;
+
+    /* stylelint-disable no-descending-specificity */
+    .mc-icon.mc-tag-remove {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        flex-shrink: 0;
+
+        height: var(--mc-tags-size-height, map.get($tokens, tags-size-height));
+
+        padding-left: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
+        padding-right: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
+    }
+    /* stylelint-enable no-descending-specificity */
+
+    .mc-icon_left {
+        margin-right: var(--mc-tags-size-icon-padding, map.get($tokens, tags-size-icon-padding));
+    }
+
+    & > .mc-icon:first-child {
+        margin-left: calc(
+            var(--mc-tags-size-icon-padding, #{map.get($tokens, tags-size-icon-padding)}) -
+            var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
+        );
+    }
+
+    & > .mc-tag__text:last-child {
+        margin-right: calc(
+            var(--mc-tags-size-text-margin, #{map.get($tokens, tags-size-text-margin)}) -
+            var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
+        );
+    }
+
+    & > .mc-tag__text:first-child {
+        margin-left: calc(
+            var(--mc-tags-size-text-margin, #{map.get($tokens, tags-size-text-margin)}) -
+            var(--mc-tags-size-border-width, #{map.get($tokens, tags-size-border-width)})
+        );
+    }
+}
+
+.mc-tag-overlay {
+    position: absolute;
+
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+
+    pointer-events: none;
+    border-radius: inherit;
+}
+
+

package/textarea/_textarea-base.scss

@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+%mc-textarea-base {
+    background: transparent;
+    margin: 0;
+    border: none;
+    outline: none;
+
+    resize: none;
+    overflow: auto;
+
+    width: 100%;
+
+    box-sizing: border-box;
+    padding: var(--mc-textarea-size-padding, map.get($tokens, textarea-size-padding));
+}

package/textarea/_textarea-theme.scss

@@ -0,0 +1,40 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-textarea-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    .mc-textarea {
+        color: map.get($foreground, text);
+
+        &::placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+
+        &::-ms-input-placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+
+        &::-webkit-input-placeholder {
+            color: map.get($foreground, text-disabled);
+        }
+    }
+}
+
+@mixin mc-textarea-typography($config) {
+    textarea.mc-textarea {
+        @include mc-typography-level-to-styles($config, map.get($tokens, textarea-font-default));
+    }
+
+    .mc-textarea.mc-textarea_monospace {
+        @include mc-typography-level-to-styles($config, map.get($tokens, textarea-font-mono));
+    }
+}

package/textarea/textarea.component.d.ts

@@ -110,5 +110,5 @@ export declare class McTextarea extends McTextareaMixinBase implements McFormFie
     /** Checks whether the textarea is invalid based on the native validation. */
     protected isBadInput(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTextarea, [null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, null, { optional: true; self: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTextarea, "textarea[mcTextarea]", ["mcTextarea"], { "canGrow": "canGrow"; "errorStateMatcher": "errorStateMatcher"; "disabled": "disabled"; "id": "id"; "placeholder": "placeholder"; "required": "required"; "value": "value"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTextarea, "textarea[mcTextarea]", ["mcTextarea"], { "canGrow": "canGrow"; "errorStateMatcher": "errorStateMatcher"; "disabled": "disabled"; "id": "id"; "placeholder": "placeholder"; "required": "required"; "value": "value"; }, {}, never, never, false, never>;
 }

package/textarea/textarea.scss

@@ -0,0 +1,32 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use 'textarea-base' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-textarea {
+    @extend %mc-textarea-base;
+
+    display: inline-block;
+    -webkit-appearance: none; // Chrome textaria height sizing fix
+    vertical-align: bottom; // Chrome textaria height sizing fix
+
+    &:not(.mc-textarea-resizable) {
+        box-sizing: border-box;
+        overflow-y: hidden;
+    }
+
+    &.mc-textarea-resizable {
+        resize: vertical;
+        min-height: var(--mc-textarea-size-min-height, map.get($tokens, textarea-size-min-height));
+    }
+}
+
+/* remove default red border for HTML5 validation invalid fields in Firefox */
+.mc-textarea:invalid {
+    box-shadow: unset;
+}

package/timepicker/timepicker.directive.d.ts

@@ -1,6 +1,6 @@
 import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
-import { DateAdapter } from '@ptsecurity/cdk/datetime';
+import { DateAdapter } from '@ptsecurity/mosaic/core';
 import { McFormFieldControl } from '@ptsecurity/mosaic/form-field';
 import { McWarningTooltipTrigger } from '@ptsecurity/mosaic/tooltip';
 import { Subject } from 'rxjs';
@@ -137,5 +137,5 @@ export declare class McTimepicker<D> implements McFormFieldControl<D>, ControlVa
     private setControl;
     private validatorOnChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTimepicker<any>, [null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTimepicker<any>, "input[mcTimepicker]", ["mcTimepicker"], { "placeholder": "placeholder"; "disabled": "disabled"; "id": "id"; "required": "required"; "format": "format"; "min": "min"; "max": "max"; "value": "value"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTimepicker<any>, "input[mcTimepicker]", ["mcTimepicker"], { "placeholder": "placeholder"; "disabled": "disabled"; "id": "id"; "required": "required"; "format": "format"; "min": "min"; "max": "max"; "value": "value"; "mcValidationTooltip": "mcValidationTooltip"; }, { "incorrectInput": "incorrectInput"; }, never, never, false, never>;
 }

package/timepicker/timepicker.scss

@@ -0,0 +1,18 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-timepicker {
+    padding-right: calc(
+        var(--mc-timepicker-size-padding-right, #{map.get($tokens, timepicker-size-padding-right)}) -
+        var(--mc-form-field-size-border-width, #{map.get($tokens, form-field-size-border-width)})
+    );
+}
+
+.mc-form-field-type-timepicker {
+    width: auto;
+}

package/timezone/_timezone-option-theme.scss

@@ -0,0 +1,36 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+@mixin mc-timezone-option-theme($theme) {
+    $timezone: map.get(map.get($theme, components), timezone);
+
+    .mc-timezone-option__offset,
+    .mc-timezone-option__city {
+        color: map.get($timezone, text);
+    }
+
+    .mc-timezone-option__cities {
+        color: map.get($timezone, caption);
+    }
+}
+
+@mixin mc-timezone-option-typography($config) {
+    .mc-timezone-option__offset {
+        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-offset-text));
+    }
+
+    .mc-timezone-option__city {
+        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-text));
+    }
+
+    .mc-timezone-option__cities {
+        @include mc-typography-level-to-styles($config, map.get($tokens, timezone-option-font-caption));
+    }
+}

package/timezone/timezone-option.component.d.ts

@@ -11,5 +11,5 @@ export declare class McTimezoneOption extends McOption {
     private _timezone;
     get viewValue(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTimezoneOption, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTimezoneOption, "mc-timezone-option", ["mcTimezoneOption"], { "highlightText": "highlightText"; "timezone": "timezone"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTimezoneOption, "mc-timezone-option", ["mcTimezoneOption"], { "highlightText": "highlightText"; "timezone": "timezone"; }, {}, never, never, false, never>;
 }

package/timezone/timezone-option.component.scss

@@ -0,0 +1,35 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-timezone-option.mc-option {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    padding: var(--mc-timezone-option-size-padding, map.get($tokens, timezone-option-size-padding));
+    column-gap: var(--mc-timezone-option-size-column-gap, map.get($tokens, timezone-option-size-column-gap));
+}
+
+.mc-timezone-option__label {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    flex: 1;
+    min-width: 0;
+}
+
+.mc-timezone-option__cities {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    max-height: var(--mc-timezone-option-size-max-height, map.get($tokens, timezone-option-size-max-height));
+    overflow: hidden;
+}
+
+.mc-select__panel .mc-timezone-option {
+    height: var(--mc-timezone-option-size-height, map.get($tokens, timezone-option-size-height));
+}

package/timezone/timezone-option.directive.d.ts

@@ -16,5 +16,5 @@ export declare class McTimezoneOptionTooltip extends McTooltipTrigger implements
     onMouseLeave(): void;
     private checkTooltipDisabled;
     static ɵfac: i0.ɵɵFactoryDeclaration<McTimezoneOptionTooltip, [null, null, null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McTimezoneOptionTooltip, "mc-timezone-option", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McTimezoneOptionTooltip, "mc-timezone-option", never, {}, {}, never, never, false, never>;
 }