@ptsecurity/mosaic 14.7.1 → 15.0.0

package/sidebar/sidebar.component.d.ts

@@ -16,12 +16,12 @@ export declare class McSidebarOpened {
     width: string;
     maxWidth: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidebarOpened, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidebarOpened, "[mc-sidebar-opened]", ["mcSidebarOpened"], { "minWidth": "minWidth"; "width": "width"; "maxWidth": "maxWidth"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidebarOpened, "[mc-sidebar-opened]", ["mcSidebarOpened"], { "minWidth": "minWidth"; "width": "width"; "maxWidth": "maxWidth"; }, {}, never, never, false, never>;
 }
 export declare class McSidebarClosed {
     width: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidebarClosed, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidebarClosed, "[mc-sidebar-closed]", ["mcSidebarClosed"], { "width": "width"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidebarClosed, "[mc-sidebar-closed]", ["mcSidebarClosed"], { "width": "width"; }, {}, never, never, false, never>;
 }
 export declare class McSidebar implements OnDestroy, OnInit, AfterContentInit {
     private ngZone;
@@ -48,6 +48,6 @@ export declare class McSidebar implements OnDestroy, OnInit, AfterContentInit {
     private unRegisterKeydownListener;
     private saveWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidebar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McSidebar, "mc-sidebar", ["mcSidebar"], { "opened": "opened"; "position": "position"; }, { "stateChanged": "stateChanged"; }, ["openedContent", "closedContent"], ["[mc-sidebar-opened]", "[mc-sidebar-closed]"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McSidebar, "mc-sidebar", ["mcSidebar"], { "opened": "opened"; "position": "position"; }, { "stateChanged": "stateChanged"; }, ["openedContent", "closedContent"], ["[mc-sidebar-opened]", "[mc-sidebar-closed]"], false, never>;
 }
 export {};

package/sidebar/sidebar.scss

@@ -0,0 +1,12 @@
+.mc-sidebar {
+    display: inline-block;
+
+    height: 100%;
+
+    overflow: hidden;
+}
+
+.mc-sidebar-opened,
+.mc-sidebar-closed {
+    height: 100%;
+}

package/sidepanel/_sidepanel-theme.scss

@@ -0,0 +1,69 @@
+@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-sidepanel-theme($theme) {
+    $background: map.get($theme, background);
+
+    $sidepanel: map.get(map.get($theme, components), sidepanel);
+    $popup: map.get(map.get($theme, components), popup);
+
+    .mc-sidepanel-content {
+        background-color: map.get($background, background);
+    }
+
+    .mc-sidepanel-container_shadowed {
+        &.mc-sidepanel-container_right {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), -6px 0 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+
+        &.mc-sidepanel-container_left {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), 6px 0 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+
+        &.mc-sidepanel-container_bottom {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 -6px 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+
+        &.mc-sidepanel-container_top {
+            .mc-sidepanel-content {
+                box-shadow: 0 0 0 1px map.get($sidepanel, border), 0 6px 12px 0 rgba(0, 0, 0, 0.24);
+            }
+        }
+    }
+
+    .mc-sidepanel-header {
+        border-bottom: 1px solid map.get($sidepanel, header-border);
+    }
+
+    .mc-sidepanel-footer {
+        border-top: 1px solid map.get($sidepanel, footer-border);
+        background-color: map.get($popup, footer-background);
+    }
+}
+
+@mixin mc-sidepanel-typography($config) {
+    .mc-sidepanel-title {
+        @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-header-font-default));
+    }
+
+    .mc-sidepanel-container {
+        @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-font-default));
+    }
+
+    .mc-sidepanel-footer {
+        @include mc-typography-level-to-styles($config, map.get($tokens, sidepanel-footer-font-default));
+    }
+}

package/sidepanel/sidepanel-container.component.d.ts

@@ -41,5 +41,5 @@ export declare class McSidepanelContainerComponent extends BasePortalOutlet impl
     private setPanelClass;
     private validatePortalAttached;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidepanelContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McSidepanelContainerComponent, "mc-sidepanel-container", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McSidepanelContainerComponent, "mc-sidepanel-container", never, {}, {}, never, never, false, never>;
 }

package/sidepanel/sidepanel-directives.d.ts

@@ -16,7 +16,7 @@ export declare class McSidepanelClose implements OnInit, OnChanges {
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidepanelClose, [{ optional: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelClose, "button[mc-sidepanel-close], button[mcSidepanelClose]", never, { "sidepanelResult": "mc-sidepanel-close"; "mcSidepanelClose": "mcSidepanelClose"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelClose, "button[mc-sidepanel-close], button[mcSidepanelClose]", never, { "sidepanelResult": "mc-sidepanel-close"; "mcSidepanelClose": "mcSidepanelClose"; }, {}, never, never, false, never>;
 }
 /**
  * Header of a sidepanel.
@@ -25,26 +25,26 @@ export declare class McSidepanelHeader {
     themePalette: typeof ThemePalette;
     closeable: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidepanelHeader, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McSidepanelHeader, "mc-sidepanel-header", never, { "closeable": "closeable"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McSidepanelHeader, "mc-sidepanel-header", never, { "closeable": "closeable"; }, {}, never, ["*"], false, never>;
 }
 /**
  * Scrollable content container of a sidepanel.
  */
 export declare class McSidepanelBody {
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidepanelBody, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelBody, "mc-sidepanel-body, [mc-sidepanel-body], mcSidepanelBody", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelBody, "mc-sidepanel-body, [mc-sidepanel-body], mcSidepanelBody", never, {}, {}, never, never, false, never>;
 }
 /**
  * Footer of a sidepanel.
  */
 export declare class McSidepanelFooter {
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidepanelFooter, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelFooter, "mc-sidepanel-footer, [mc-sidepanel-footer], mcSidepanelFooter", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelFooter, "mc-sidepanel-footer, [mc-sidepanel-footer], mcSidepanelFooter", never, {}, {}, never, never, false, never>;
 }
 /**
  * Actions block of a sidepanel footer.
  */
 export declare class McSidepanelActions {
     static ɵfac: i0.ɵɵFactoryDeclaration<McSidepanelActions, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelActions, "mc-sidepanel-actions, [mc-sidepanel-actions], mcSidepanelActions", never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSidepanelActions, "mc-sidepanel-actions, [mc-sidepanel-actions], mcSidepanelActions", never, {}, {}, never, never, false, never>;
 }

package/sidepanel/sidepanel.scss

@@ -0,0 +1,190 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-sidepanel-container {
+    outline: none;
+    display: flex;
+    flex: 1;
+    position: fixed;
+    min-height: 0;
+
+    .flex {
+        min-height: 0;
+    }
+}
+
+.mc-sidepanel-container_left,
+.mc-sidepanel-container_right {
+    width: 33%;
+    min-width: 400px;
+    height: 100%;
+    top: 0;
+
+    .mc-sidepanel-indent {
+        width: 16px;
+        height: 100%;
+    }
+}
+
+.mc-sidepanel-container_right {
+    right: 0;
+    transform: translateX(100%);
+
+    .mc-sidepanel-wrapper {
+        flex-direction: row;
+    }
+}
+
+.mc-sidepanel-container_left {
+    left: 0;
+    transform: translateX(-100%);
+
+    .mc-sidepanel-wrapper {
+        flex-direction: row-reverse;
+    }
+}
+
+.mc-sidepanel-container_top,
+.mc-sidepanel-container_bottom {
+    flex-direction: column;
+    height: 33%;
+    min-height: 400px;
+    width: 100%;
+    left: 0;
+
+    .mc-sidepanel-indent {
+        height: 16px;
+        width: 100%;
+    }
+}
+
+.mc-sidepanel-container_top {
+    top: 0;
+    transform: translateY(-100%);
+
+    .mc-sidepanel-wrapper {
+        flex-direction: column-reverse;
+    }
+}
+
+.mc-sidepanel-container_bottom {
+    bottom: 0;
+    transform: translateY(100%);
+
+    .mc-sidepanel-wrapper {
+        flex-direction: column;
+    }
+}
+
+/* stylelint-disable */
+.mc-sidepanel-wrapper {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+}
+
+.mc-sidepanel-indent {
+    display: flex;
+    flex: 0 0 auto;
+
+    .mc-sidepanel-close {
+        width: 100%;
+        height: 100%;
+
+        @include common.mc-button-reset();
+        background: transparent;
+        padding: 0;
+    }
+}
+/* stylelint-enable */
+
+.mc-sidepanel-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    min-width: 0;
+    width: 100%;
+}
+
+.mc-sidepanel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    flex-flow: row nowrap;
+    flex: 0 0 auto;
+
+    height: var(--mc-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height));
+
+    .mc-sidepanel-close {
+        @include common.mc-button-reset();
+
+        margin-right: 2px;
+
+        height: calc(
+            var(--mc-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
+            (var(--mc-size-border-width, map.get($tokens, size-border-width) * 2))
+        );
+        width: calc(
+            var(--mc-sidepanel-header-size-height, map.get($tokens, sidepanel-header-size-height)) -
+            (var(--mc-size-border-width, map.get($tokens, size-border-width) * 2))
+        );
+    }
+}
+
+.mc-sidepanel-title {
+    flex: 1;
+
+    @include common.mc-truncate-line();
+
+    padding: var(--mc-sidepanel-header-size-padding, map.get($tokens, sidepanel-header-size-padding));
+}
+
+.mc-sidepanel-body {
+    overflow-y: auto;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.mc-sidepanel-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    flex-flow: row nowrap;
+    flex: 0 0 auto;
+
+    height: var(--mc-sidepanel-footer-size-height, map.get($tokens, sidepanel-footer-size-height));
+
+    padding: var(--mc-sidepanel-footer-size-padding, map.get($tokens, sidepanel-footer-size-padding));
+
+    .mc-sidepanel-actions {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+        flex: 1;
+
+        &[align="left"] {
+            justify-content: start;
+        }
+
+        &[align="right"] {
+            justify-content: flex-end;
+        }
+    }
+
+    button + button {
+        margin-left: 16px;
+    }
+}

package/splitter/_splitter-theme.scss

@@ -0,0 +1,31 @@
+@use 'sass:map';
+
+@use '../core/styles/theming/theming' as *;
+
+
+@mixin mc-splitter-theme($theme) {
+    $background: map.get($theme, background);
+
+    .mc-gutter {
+        cursor: col-resize;
+
+        &:hover,
+        &.mc-gutter_dragged {
+            background-color: map.get($background, background-disabled);
+        }
+
+        &.mc-gutter_vertical {
+            cursor: row-resize;
+        }
+
+        &[disabled] {
+            background-color: mc-color($background, overlay-disabled);
+
+            cursor: default;
+        }
+    }
+
+    .mc-gutter-ghost {
+        background: mc-color($background, overlay-disabled);
+    }
+}

package/splitter/splitter.component.d.ts

@@ -33,7 +33,7 @@ export declare class McGutterDirective implements OnInit {
     getPosition(): IPoint;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<McGutterDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McGutterDirective, "mc-gutter", never, { "direction": "direction"; "order": "order"; "size": "size"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McGutterDirective, "mc-gutter", never, { "direction": "direction"; "order": "order"; "size": "size"; }, {}, never, never, false, never>;
 }
 export declare class McGutterGhostDirective {
     private elementRef;
@@ -56,7 +56,7 @@ export declare class McGutterGhostDirective {
     private updateDimensions;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<McGutterGhostDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McGutterGhostDirective, "mc-gutter-ghost", never, { "visible": "visible"; "x": "x"; "y": "y"; "direction": "direction"; "size": "size"; }, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McGutterGhostDirective, "mc-gutter-ghost", never, { "visible": "visible"; "x": "x"; "y": "y"; "direction": "direction"; "size": "size"; }, {}, never, never, false, never>;
 }
 export declare class McSplitterComponent implements OnInit {
     elementRef: ElementRef;
@@ -100,7 +100,7 @@ export declare class McSplitterComponent implements OnInit {
     private onMouseUp;
     private setStyle;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSplitterComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McSplitterComponent, "mc-splitter", ["mcSplitter"], { "hideGutters": "hideGutters"; "direction": "direction"; "disabled": "disabled"; "useGhost": "useGhost"; "gutterSize": "gutterSize"; }, { "gutterPositionChange": "gutterPositionChange"; }, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McSplitterComponent, "mc-splitter", ["mcSplitter"], { "hideGutters": "hideGutters"; "direction": "direction"; "disabled": "disabled"; "useGhost": "useGhost"; "gutterSize": "gutterSize"; }, { "gutterPositionChange": "gutterPositionChange"; }, never, ["*"], false, never>;
 }
 export declare class McSplitterAreaDirective implements OnInit, OnDestroy {
     private elementRef;
@@ -125,6 +125,6 @@ export declare class McSplitterAreaDirective implements OnInit, OnDestroy {
     private removeStyle;
     private emitSizeChange;
     static ɵfac: i0.ɵɵFactoryDeclaration<McSplitterAreaDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McSplitterAreaDirective, "[mc-splitter-area]", never, {}, { "sizeChange": "sizeChange"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McSplitterAreaDirective, "[mc-splitter-area]", never, {}, { "sizeChange": "sizeChange"; }, never, never, false, never>;
 }
 export {};

package/splitter/splitter.scss

@@ -0,0 +1,48 @@
+.mc-splitter {
+    display: flex;
+    position: relative;
+    flex-wrap: nowrap;
+    align-items: stretch;
+
+    overflow: hidden;
+
+    .mc-splitter-area {
+        overflow: hidden;
+
+        &_resizing {
+            pointer-events: none;
+        }
+    }
+
+}
+
+.mc-gutter {
+    display: flex;
+
+    flex-grow: 0;
+    flex-shrink: 0;
+
+    justify-content: center;
+    align-items: center;
+
+    overflow: hidden;
+
+    &.mc-gutter_vertical > .mc-icon {
+        transform: rotate(90deg);
+    }
+}
+
+.mc-gutter-ghost {
+    position: absolute;
+    z-index: 999;
+    display: none;
+    overflow: hidden;
+
+    &.mc-gutter-ghost_vertical > .mc-icon {
+        transform: rotate(90deg);
+    }
+
+    &.mc-gutter-ghost_visible {
+        display: block;
+    }
+}

package/table/_table-theme.scss

@@ -0,0 +1,67 @@
+@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-table-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    .mc-table {
+        & > thead {
+            color: map.get($foreground, text-less-contrast);
+
+            & > tr > th {
+                border-color: map.get($foreground, divider);
+            }
+        }
+
+        & > tbody {
+            & > tr {
+                &:hover {
+                    background-color: map.get($background, overlay-hover);
+                }
+
+                & > th,
+                & > td {
+                    color: map.get($foreground, text);
+                }
+            }
+        }
+
+        &.mc-table_bordered {
+            & > tbody > tr {
+                & th,
+                & td {
+                    border-bottom-color: map.get($foreground, divider);
+                }
+            }
+        }
+    }
+}
+
+@mixin mc-table-typography($config) {
+    .mc-table {
+        & > thead {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include mc-typography-level-to-styles($config, map.get($tokens, table-font-header));
+        }
+
+        & > tbody {
+            & > tr > th {
+                font-weight: normal;
+            }
+
+            @include mc-typography-level-to-styles($config, map.get($tokens, table-font-body));
+        }
+    }
+}
+

package/table/table.component.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
 export declare class McTable {
     static ɵfac: i0.ɵɵFactoryDeclaration<McTable, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McTable, "table[mc-table]", ["mcTable"], {}, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McTable, "table[mc-table]", ["mcTable"], {}, {}, never, ["*"], false, never>;
 }

package/table/table.scss

@@ -0,0 +1,76 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-table {
+    border-spacing: 0;
+
+    & > thead,
+    & > tbody,
+    & > tfoot {
+        & > tr {
+            & > th,
+            & > td {
+                padding: {
+                    top: var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical));
+                    right: calc((var(
+                        --mc-table-size-row-padding-horizontal,
+                        map.get($tokens, table-size-row-padding-horizontal)
+                    ) / 2));
+                    bottom: calc(
+                        var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical)) -
+                        var(--mc-table-size-border-width, map.get($tokens, table-size-border-width))
+                    );
+                    left: calc((var(
+                        --mc-table-size-row-padding-horizontal,
+                        map.get($tokens, table-size-row-padding-horizontal)
+                    ) / 2))
+                };
+
+                vertical-align: baseline;
+                text-align: left;
+            }
+
+            & > th:first-child,
+            & > td:first-child {
+                padding-left:
+                    var(--mc-table-size-row-padding-horizontal, map.get($tokens, table-size-row-padding-horizontal));
+            }
+
+            & > th:last-child,
+            & > td:last-child {
+                padding-right:
+                    var(--mc-table-size-row-padding-horizontal, map.get($tokens, table-size-row-padding-horizontal));
+            }
+        }
+    }
+
+    /* stylelint-disable no-descending-specificity */
+    & > thead {
+        & > tr > th {
+            padding: {
+                top: var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical));
+                bottom: (
+                    calc(var(--mc-table-size-row-padding-vertical, map.get($tokens, table-size-row-padding-vertical)) -
+                    var(--mc-table-size-border-width, map.get($tokens, table-size-border-width)))
+                );
+            }
+
+            border-bottom:
+                var(--mc-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+        }
+    }
+
+    & > tbody > tr {
+        & th,
+        & td {
+            border-bottom:
+                var(--mc-table-size-border-width, map.get($tokens, table-size-border-width)) solid transparent;
+        }
+    }
+    /* stylelint-enable no-descending-specificity */
+}