@ptsecurity/mosaic 14.7.2 → 15.0.0

package/checkbox/checkbox.scss

@@ -0,0 +1,144 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/common/layout';
+@use '../core/styles/variables';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+// Applied to elements that appear to make up the outer box of the checkmark, such as the frame
+// that contains the border and the actual background element that contains the marks.
+%mc-checkbox-outer-box {
+    @include layout.mc-fill;
+
+    border-radius: var(--mc-checkbox-size-border-radius, map.get($tokens, checkbox-size-border-radius));
+    box-sizing: border-box;
+    pointer-events: none;
+}
+
+.mc-checkbox-checkmark,
+.mc-checkbox-mixedmark {
+    display: none;
+
+    position: absolute;
+
+    top: -1px;
+    left: -1px;
+    right: 0;
+    bottom: 0;
+}
+
+.mc-checkbox-frame {
+    @extend %mc-checkbox-outer-box;
+
+    background-color: transparent;
+    border: {
+        width: var(--mc-checkbox-size-border-width, map.get($tokens, checkbox-size-border-width));
+        style: solid;
+    }
+    box-shadow: var(--mc-checkbox-size-toggle-box-shadow, map.get($tokens, checkbox-size-toggle-box-shadow));
+}
+
+.mc-checkbox {
+    display: inline-block;
+
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+
+    &.mc-checked {
+        .mc-checkbox-checkmark {
+            display: block;
+        }
+
+        .mc-checkbox-mixedmark {
+            display: none;
+        }
+    }
+
+    &.mc-indeterminate {
+        .mc-checkbox-checkmark {
+            display: none;
+        }
+
+        .mc-checkbox-mixedmark {
+            display: block;
+        }
+    }
+
+    &.mc-disabled {
+        cursor: default;
+
+        .mc-checkbox-frame {
+            box-shadow: none;
+        }
+    }
+}
+
+.mc-checkbox-layout {
+    position: relative;
+
+    display: inline-flex;
+
+    // `cursor: inherit` ensures that the wrapper element gets the same cursor as the mc-checkbox
+    // (e.g. pointer by default, regular when disabled), instead of the browser default.
+    cursor: inherit;
+
+    padding-left: calc(
+        var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width)) +
+        var(--mc-checkbox-size-label-margin, map.get($tokens, checkbox-size-label-margin))
+    );
+
+    vertical-align: top;
+}
+
+.mc-checkbox-inner-container {
+    display: inline-block;
+
+    position: absolute;
+    top: 2px;
+    left: 0;
+
+    height: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
+    width: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
+}
+
+.mc-checkbox-overlay {
+    @include layout.mc-fill;
+
+    border-radius: var(--mc-checkbox-size-border-radius, map.get($tokens, checkbox-size-border-radius));
+    background: transparent;
+}
+
+.mc-checkbox__text-container {
+    display: flex;
+    flex-direction: column;
+
+    & .mc-hint {
+        margin-top: 2px;
+    }
+}
+
+.mc-checkbox-inner-container-no-side-margin {
+    margin: {
+        left: 0;
+        right: 0;
+    }
+}
+
+.mc-checkbox-label-before {
+    .mc-checkbox-layout {
+        padding-left: 0;
+        padding-right: calc(
+            var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width)) +
+            var(--mc-checkbox-size-label-margin, map.get($tokens, checkbox-size-label-margin))
+        );
+    }
+
+    .mc-checkbox-inner-container {
+        right: 0;
+        left: unset;
+    }
+}

package/code-block/_code-block-theme.scss

@@ -0,0 +1,329 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+@mixin mc-code-block-theme($theme) {
+    $code-block: map.get(map.get($theme, components), code-block);
+
+    .mc-code-block {
+        background-color: map.get($code-block, main-background);
+        border-color: map.get($code-block, border);
+
+        .hljs {
+            $hljs: map.get($code-block, hljs);
+
+            display: block;
+            overflow-x: auto;
+
+            &-addition {
+                background-color: map.get($hljs, addition-background);
+                color: map.get($hljs, addition-color);
+            }
+
+            &-attr {
+                background-color: map.get($hljs, attr-background);
+                color: map.get($hljs, attr-color);
+            }
+
+            &-attribute {
+                background-color: map.get($hljs, attribute-background);
+                color: map.get($hljs, attribute-color);
+            }
+
+            &-built_in {
+                background-color: map.get($hljs, built_in-background);
+                color: map.get($hljs, built_in-color);
+            }
+
+            &-bullet {
+                background-color: map.get($hljs, bullet-background);
+                color: map.get($hljs, bullet-color);
+            }
+
+            &-char-escape {
+                background-color: map.get($hljs, char-escape-background);
+                color: map.get($hljs, char-escape-color);
+            }
+
+            &-class {
+                background-color: map.get($hljs, class-background);
+                color: map.get($hljs, class-color);
+            }
+
+            &-code {
+                background-color: map.get($hljs, code-background);
+                color: map.get($hljs, code-color);
+            }
+
+            &-comment {
+                background-color: map.get($hljs, comment-background);
+                color: map.get($hljs, comment-color);
+            }
+
+            &-deletion {
+                background-color: map.get($hljs, deletion-background);
+                color: map.get($hljs, deletion-color);
+            }
+
+            &-doctag {
+                background-color: map.get($hljs, doctag-background);
+                color: map.get($hljs, doctag-color);
+            }
+
+            &-emphasis {
+                background-color: map.get($hljs, emphasis-background);
+                color: map.get($hljs, emphasis-color);
+            }
+
+            &-formula {
+                background-color: map.get($hljs, formula-background);
+                color: map.get($hljs, formula-color);
+            }
+
+            &-function {
+                background-color: map.get($hljs, function-background);
+                color: map.get($hljs, function-color);
+            }
+
+            &-keyword {
+                background-color: map.get($hljs, keyword-background);
+                color: map.get($hljs, keyword-color);
+            }
+
+            &-link {
+                background-color: map.get($hljs, link-background);
+                color: map.get($hljs, link-color);
+            }
+
+            &-literal {
+                background-color: map.get($hljs, literal-background);
+                color: map.get($hljs, literal-color);
+            }
+
+            &-meta {
+                background-color: map.get($hljs, meta-background);
+                color: map.get($hljs, meta-color);
+            }
+
+            &-meta-keyword {
+                background-color: map.get($hljs, meta-keyword-background);
+                color: map.get($hljs, meta-keyword-color);
+            }
+
+            &-meta-string {
+                background-color: map.get($hljs, meta-string-background);
+                color: map.get($hljs, meta-string-color);
+            }
+
+            &-meta-prompt {
+                background-color: map.get($hljs, meta-prompt-background);
+                color: map.get($hljs, meta-prompt-color);
+            }
+
+            &-name {
+                background-color: map.get($hljs, name-background);
+                color: map.get($hljs, name-color);
+            }
+
+            &-number {
+                background-color: map.get($hljs, number-background);
+                color: map.get($hljs, number-color);
+            }
+
+            &-operator {
+                background-color: map.get($hljs, operator-background);
+                color: map.get($hljs, operator-color);
+            }
+
+            &-params {
+                background-color: map.get($hljs, params-background);
+                color: map.get($hljs, params-color);
+            }
+
+            &-property {
+                background-color: map.get($hljs, property-background);
+                color: map.get($hljs, property-color);
+            }
+
+            &-punctuation {
+                background-color: map.get($hljs, punctuation-background);
+                color: map.get($hljs, punctuation-color);
+            }
+
+            &-quote {
+                background-color: map.get($hljs, quote-background);
+                color: map.get($hljs, quote-color);
+            }
+
+            &-regexp {
+                background-color: map.get($hljs, regexp-background);
+                color: map.get($hljs, regexp-color);
+            }
+
+            &-section {
+                background-color: map.get($hljs, section-background);
+                color: map.get($hljs, section-color);
+            }
+
+            &-selector-attr {
+                background-color: map.get($hljs, selector-attr-background);
+                color: map.get($hljs, selector-attr-color);
+            }
+
+            &-selector-class {
+                background-color: map.get($hljs, selector-class-background);
+                color: map.get($hljs, selector-class-color);
+            }
+
+            &-selector-id {
+                background-color: map.get($hljs, selector-id-background);
+                color: map.get($hljs, selector-id-color);
+            }
+
+            &-selector-pseudo {
+                background-color: map.get($hljs, selector-pseudo-background);
+                color: map.get($hljs, selector-pseudo-color);
+            }
+
+            &-selector-tag {
+                background-color: map.get($hljs, selector-tag-background);
+                color: map.get($hljs, selector-tag-color);
+            }
+
+            &-string {
+                background-color: map.get($hljs, string-background);
+                color: map.get($hljs, string-color);
+            }
+
+            &-strong {
+                background-color: map.get($hljs, strong-background);
+                color: map.get($hljs, strong-color);
+            }
+
+            &-subst {
+                background-color: map.get($hljs, subst-background);
+                color: map.get($hljs, subst-color);
+            }
+
+            &-symbol {
+                background-color: map.get($hljs, symbol-background);
+                color: map.get($hljs, symbol-color);
+            }
+
+            &-tag {
+                background-color: map.get($hljs, tag-background);
+                color: map.get($hljs, tag-color);
+            }
+
+            &-template-tag {
+                background-color: map.get($hljs, template-tag-background);
+                color: map.get($hljs, template-tag-color);
+            }
+
+            &-template-variable {
+                background-color: map.get($hljs, template-variable-background);
+                color: map.get($hljs, template-variable-color);
+            }
+
+            &-title {
+                background-color: map.get($hljs, title-background);
+                color: map.get($hljs, title-color);
+            }
+
+            &-title-class {
+                background-color: map.get($hljs, title-class-background);
+                color: map.get($hljs, title-class-color);
+            }
+
+            &-title-class-inherited {
+                background-color: map.get($hljs, title-class-inherited-background);
+                color: map.get($hljs, title-class-inherited-color);
+            }
+
+            &-title-function {
+                background-color: map.get($hljs, title-function-background);
+                color: map.get($hljs, title-function-color);
+            }
+
+            &-title-function-invoke {
+                background-color: map.get($hljs, title-function-invoke-background);
+                color: map.get($hljs, title-function-invoke-color);
+            }
+
+            &-type {
+                background-color: map.get($hljs, type-background);
+                color: map.get($hljs, type-color);
+            }
+
+            &-variable {
+                background-color: map.get($hljs, variable-background);
+                color: map.get($hljs, variable-color);
+            }
+
+            &-variable-constant {
+                background-color: map.get($hljs, variable-constant-background);
+                color: map.get($hljs, variable-constant-color);
+            }
+
+            &-variable-language {
+                background-color: map.get($hljs, variable-language-background);
+                color: map.get($hljs, variable-language-color);
+            }
+
+            &-ln-n {
+                color: map.get($code-block, line-numbers-color);
+            }
+
+            &-line-numbers {
+                color: map.get($code-block, main-code-color);
+            }
+        }
+
+        &.mc-code-block_less-contrast {
+            background-color: map.get($code-block, main-background-less-contrast);
+        }
+
+        .mc-tab-group:after {
+            background: map.get($code-block, border);
+        }
+
+        .mc-tab-header {
+            & .mc-tab-label.mc-tab-label_horizontal,
+            & .mc-tab-header__pagination {
+                border-bottom-color: transparent;
+            }
+        }
+
+        .mc-code-block__show-more {
+            border-top-color: map.get($code-block, border) !important;
+        }
+    }
+
+    .mc-code-block-actionbar {
+        .mc-code-block-actionbar_less-contrast {
+            background-color: map-get($code-block, actionbar, bg-less-contrast);
+        }
+
+        &.mc-actionbar-block_floating {
+            background-color: map-get($code-block, actionbar, bg);
+        }
+    }
+}
+
+@mixin mc-code-block-typography($config) {
+    .mc-code-block {
+        @include mc-typography-level-to-styles($config, map.get($tokens, code-block-font-default));
+
+        .hljs-ln-numbers {
+            @include mc-typography-level-to-styles($config, caption-mono);
+        }
+    }
+}

package/code-block/actionbar.component.d.ts

@@ -18,5 +18,5 @@ export declare class McActionBarComponent implements AfterViewInit {
     ngAfterViewInit(): void;
     onCopy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McActionBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McActionBarComponent, "mc-actionbar-block", never, { "config": "config"; "codeFiles": "codeFiles"; "lessContrast": "lessContrast"; "selectedTabIndex": "selectedTabIndex"; "multiLine": "multiLine"; "softWrap": "softWrap"; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McActionBarComponent, "mc-actionbar-block", never, { "config": "config"; "codeFiles": "codeFiles"; "lessContrast": "lessContrast"; "selectedTabIndex": "selectedTabIndex"; "multiLine": "multiLine"; "softWrap": "softWrap"; }, { "toggleSoftWrap": "toggleSoftWrap"; "downloadCode": "downloadCode"; "copyCode": "copyCode"; "openExternalSystem": "openExternalSystem"; }, never, never, false, never>;
 }

package/code-block/actionbar.component.scss

@@ -0,0 +1,27 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+.mc-code-block-actionbar {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+
+    position: absolute;
+
+    top: 4px;
+    right: 8px;
+
+    gap: map.get($tokens, code-block-size-actionbar-gap);
+
+    border-radius: map.get($tokens, code-block-size-actionbar-border-radius);
+
+    &.mc-actionbar-block_floating {
+        top: map.get($tokens, code-block-size-actionbar-margin-top);
+        right: map.get($tokens, code-block-size-actionbar-margin-right);
+    }
+}

package/code-block/code-block.component.d.ts

@@ -70,5 +70,5 @@ export declare class McCodeBlockComponent implements OnDestroy {
     private updateMultiline;
     private getFullFileName;
     static ɵfac: i0.ɵɵFactoryDeclaration<McCodeBlockComponent, [null, null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McCodeBlockComponent, "mc-code-block", ["mcCodeBlock"], { "lineNumbers": "lineNumbers"; "codeFiles": "codeFiles"; "lessContrast": "lessContrast"; "maxHeight": "maxHeight"; "softWrap": "softWrap"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McCodeBlockComponent, "mc-code-block", ["mcCodeBlock"], { "lineNumbers": "lineNumbers"; "codeFiles": "codeFiles"; "lessContrast": "lessContrast"; "maxHeight": "maxHeight"; "softWrap": "softWrap"; }, {}, never, never, false, never>;
 }

package/code-block/code-block.scss

@@ -0,0 +1,128 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use '../core/styles/tokens';
+
+$tokens: meta.module-variables(tokens) !default;
+
+
+/* stylelint-disable no-descending-specificity */
+.mc-code-block {
+    display: block;
+    position: relative;
+
+    box-sizing: border-box;
+
+    hyphens: none;
+    -ms-hyphens: none;
+    -moz-hyphens: none;
+    -webkit-hyphens: none;
+
+    border-width: 1px;
+    border-style: solid;
+    border-radius: map.get($tokens, code-block-size-border-radius);
+
+    &:not(.mc-code-block_no-header) .mc-tab-group:after {
+        content: "";
+
+        position: absolute;
+        top: 39px;
+        left: 0;
+        right: 0;
+
+        height: 1px;
+    }
+
+    .mc-tab-header {
+        // 4 buttons + margin
+        margin-right: calc(32 * 4) + 24px;
+    }
+
+    &.mc-code-block_hide-line-numbers .hljs-ln-line.hljs-ln-numbers {
+        display: none;
+    }
+
+    &.mc-code-block_single-file {
+        .mc-tab-label {
+            &:before {
+                content: none;
+            }
+
+            &:hover {
+                background: transparent !important;
+            }
+        }
+    }
+
+    &.mc-code-block_no-header {
+        .mc-code-block__code {
+            position: relative;
+        }
+
+        .mc-tab-header {
+            display: none;
+        }
+    }
+
+    pre {
+        margin: 0;
+    }
+
+    .mc-tab-body__wrapper {
+        flex-direction: column;
+        position: unset;
+    }
+
+    .mc-tab-body.mc-tab-body__active {
+        position: unset;
+    }
+}
+
+.mc-code-block__code {
+    overflow-y: hidden;
+
+    &.mc-code-block__code_view-all {
+        max-height: unset;
+        overflow-y: unset;
+    }
+
+    &.mc-code-block__code_soft-wrap {
+        white-space: pre-wrap
+    }
+
+    > code {
+        padding: map.get($tokens, code-block-size-padding) !important;
+    }
+
+    .hljs-ln {
+        border-collapse: unset;
+
+        .hljs {
+            padding: 0;
+        }
+    }
+
+    .hljs-ln-numbers {
+        border-right-width: map.get($tokens, code-block-size-line-numbers-border-width);
+        padding: map.get($tokens, code-block-size-line-numbers-padding);
+
+        vertical-align: baseline;
+        text-align: right;
+    }
+
+    .hljs-ln-n:before {
+        white-space: nowrap;
+    }
+}
+
+.mc-code-block__show-more {
+    overflow: hidden;
+
+    width: 100%;
+
+    border-top-style: solid !important;
+    border-top-width: 1px !important;
+
+    border-top-left-radius: 0 !important;
+    border-top-right-radius: 0 !important;
+}
+/* stylelint-enable no-descending-specificity */

package/core/_index.scss

@@ -0,0 +1 @@
+@forward 'styles/core';

package/core/common-behaviors/color.d.ts

@@ -10,12 +10,12 @@ export interface HasElementRef {
 }
 export declare enum ThemePalette {
     Primary = "primary",
-    Second = "second",
+    Secondary = "secondary",
     Error = "error",
     Info = "info",
     Warning = "warning",
     Success = "success",
-    Default = "second",
+    Default = "secondary",
     Empty = ""
 }
 /** Mixin to augment a directive with a `color` property. */

package/core/datetime/date-adapter.d.ts

@@ -0,0 +1,12 @@
+import { InjectionToken } from '@angular/core';
+import { DateAdapter as BaseDateAdapter } from '@mosaic-design/date-adapter';
+import { Observable, Subject } from 'rxjs';
+/** InjectionToken for datepicker that can be used to override default locale code. */
+export declare const MC_DATE_LOCALE: InjectionToken<string>;
+/** @docs-private */
+export declare function MC_DATE_LOCALE_FACTORY(): string;
+export declare abstract class DateAdapter<D> extends BaseDateAdapter<D> {
+    /** A stream that emits when the locale changes. */
+    abstract get localeChanges(): Observable<any>;
+    protected abstract _localeChanges: Subject<void>;
+}

package/core/datetime/date-formats.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import { DateFormats } from '@mosaic-design/date-adapter';
+export declare const MC_DATE_FORMATS: InjectionToken<DateFormats>;
+export declare type McDateFormats = DateFormats;

package/core/datetime/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-formats';
+export * from './date-adapter';