@ptsecurity/mosaic 14.7.1 → 15.0.0

package/core/option/option.scss

@@ -0,0 +1,62 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-option {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    box-sizing: border-box;
+
+    position: relative;
+
+    max-width: 100%;
+
+    height: var(--mc-option-size-height, map.get($tokens, option-size-height));
+
+    border: var(--mc-option-size-border-width, map.get($tokens, option-size-border-width)) solid transparent;
+
+    cursor: pointer;
+
+    outline: none;
+
+    padding-left: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+    padding-right: var(--mc-option-size-horizontal-padding, map.get($tokens, option-size-horizontal-padding));
+
+    -webkit-tap-highlight-color: transparent;
+
+    &.mc-disabled {
+        cursor: default;
+    }
+
+    & .mc-pseudo-checkbox {
+        margin-right: 8px;
+    }
+
+    & .mc-option-overlay {
+        position: absolute;
+
+        top: calc(-1 * var(--mc-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
+        left: calc(-1 * var(--mc-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
+        right: calc(-1 * var(--mc-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
+        bottom: calc(-1 * var(--mc-option-size-border-width, #{map.get($tokens, option-size-border-width)}));
+
+        pointer-events: none;
+        border-radius: inherit;
+    }
+}
+
+.mc-option-text {
+    display: inline-block;
+    flex-grow: 1;
+
+    overflow: hidden;
+
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

package/core/pop-up/_pop-up.scss

@@ -0,0 +1,129 @@
+@mixin popup-margins($name, $value) {
+    &.#{$name}_placement-top,
+    &.#{$name}_placement-top-left,
+    &.#{$name}_placement-top-right {
+        margin-bottom: $value;
+    }
+
+    &.#{$name}_placement-right,
+    &.#{$name}_placement-right-top,
+    &.#{$name}_placement-right-bottom {
+        margin-left: $value;
+    }
+
+    &.#{$name}_placement-bottom,
+    &.#{$name}_placement-bottom-left,
+    &.#{$name}_placement-bottom-right {
+        margin-top: $value;
+    }
+
+    &.#{$name}_placement-left,
+    &.#{$name}_placement-left-top,
+    &.#{$name}_placement-left-bottom {
+        margin-right: $value;
+    }
+}
+
+@mixin popup-arrow-positions($name, $arrow-offset, $arrow-padding) {
+    .#{$name}_placement-top .#{$name}__arrow {
+        bottom: $arrow-offset;
+        left: 50%;
+        margin-left: $arrow-offset;
+    }
+
+    .#{$name}_placement-top-left .#{$name}__arrow {
+        bottom: $arrow-offset;
+        left: $arrow-padding;
+    }
+
+    .#{$name}_placement-top-right .#{$name}__arrow {
+        bottom: $arrow-offset;
+        right: $arrow-padding;
+    }
+
+    .#{$name}_placement-right .#{$name}__arrow {
+        left: $arrow-offset;
+        top: 50%;
+        margin-top: $arrow-offset;
+    }
+
+    .#{$name}_placement-right-top .#{$name}__arrow {
+        left: $arrow-offset;
+        top: $arrow-padding;
+    }
+
+    .#{$name}_placement-right-bottom .#{$name}__arrow {
+        left: $arrow-offset;
+        bottom: $arrow-padding;
+    }
+
+    .#{$name}_placement-left .#{$name}__arrow {
+        right: $arrow-offset;
+        top: 50%;
+        margin-top: $arrow-offset;
+    }
+
+    .#{$name}_placement-left-top .#{$name}__arrow {
+        right: $arrow-offset;
+        top: $arrow-padding;
+    }
+
+    .#{$name}_placement-left-bottom .#{$name}__arrow {
+        right: $arrow-offset;
+        bottom: $arrow-padding;
+    }
+
+    .#{$name}_placement-bottom .#{$name}__arrow {
+        top: $arrow-offset;
+        left: 50%;
+        margin-left: $arrow-offset;
+    }
+
+    .#{$name}_placement-bottom-left .#{$name}__arrow {
+        top: $arrow-offset;
+        left: $arrow-padding;
+    }
+
+    .#{$name}_placement-bottom-right .#{$name}__arrow {
+        top: $arrow-offset;
+        right: $arrow-padding;
+    }
+
+}
+
+@mixin popup-arrow-borders-color($name, $value) {
+    &.#{$name}_placement-top,
+    &.#{$name}_placement-top-left,
+    &.#{$name}_placement-top-right {
+        & .mc-tooltip__arrow {
+            border-bottom-color: $value;
+            border-right-color: $value;
+        }
+    }
+    &.#{$name}_placement-right,
+    &.#{$name}_placement-right-top,
+    &.#{$name}_placement-right-bottom {
+        & .mc-tooltip__arrow {
+            border-left-color: $value;
+            border-bottom-color: $value;
+        }
+    }
+
+    &.#{$name}_placement-left,
+    &.#{$name}_placement-left-top,
+    &.#{$name}_placement-left-bottom {
+        & .mc-tooltip__arrow {
+            border-right-color: $value;
+            border-top-color: $value;
+        }
+    }
+
+    &.#{$name}_placement-bottom,
+    &.#{$name}_placement-bottom-left,
+    &.#{$name}_placement-bottom-right {
+        & .mc-tooltip__arrow {
+            border-top-color: $value;
+            border-left-color: $value;
+        }
+    }
+}

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

@@ -67,5 +67,5 @@ export declare abstract class McPopUpTrigger<T> {
     private removeEventListener;
     private subscribeOnClosingActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopUpTrigger<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopUpTrigger<any>, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopUpTrigger<any>, never, never, {}, {}, never, never, false, never>;
 }

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

@@ -32,5 +32,5 @@ export declare abstract class McPopUp implements OnDestroy {
     animationDone({ toState }: AnimationEvent): void;
     handleBodyInteraction(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopUp, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopUp, never, never, {}, {}, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopUp, never, never, {}, {}, never, never, false, never>;
 }

package/core/public-api.d.ts

@@ -1,17 +1,18 @@
-export * from './version';
-export * from './utils/index';
+export * from './animation/index';
 export * from './common-behaviors/index';
-export * from './line/line';
+export * from './datetime/index';
 export * from './error/error-options';
 export * from './formatters/index';
-export * from './validation/index';
+export * from './forms/index';
 export * from './highlight/index';
-export * from './select/index';
-export * from './overlay/overlay-position-map';
-export * from './animation/index';
 export * from './label/label-options';
-export * from './selection/index';
-export * from './services/measure-scrollbar.service';
+export * from './line/line';
 export * from './option/index';
-export * from './forms/index';
+export * from './overlay/overlay-position-map';
 export * from './pop-up/index';
+export * from './select/index';
+export * from './selection/index';
+export * from './services/measure-scrollbar.service';
+export * from './utils/index';
+export * from './validation/index';
+export * from './version';

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+
+
+@mixin mc-pseudo-checkbox-color($states) {
+    border-color: map.get($states, border);
+
+    & .mc-checkbox-checkmark,
+    & .mc-checkbox-mixedmark {
+        color: map.get($states, color);
+    }
+
+    &.mc-checked,
+    &.mc-indeterminate {
+        border-color: map.get($states, checked, border);
+
+        background: map.get($states, checked, background);
+    }
+}
+
+@mixin mc-pseudo-checkbox-theme($theme) {
+    $foreground: map.get($theme, foreground);
+    $background: map.get($theme, background);
+
+    $checkbox: map.get(map.get($theme, components), checkbox);
+
+    .mc-pseudo-checkbox {
+        &.mc-primary {
+            @include mc-pseudo-checkbox-color(map.get($checkbox, default));
+        }
+
+        &.mc-error {
+            @include mc-pseudo-checkbox-color(map.get($checkbox, error));
+        }
+
+        &.mc-disabled,
+        &.mc-primary.mc-disabled,
+        &.mc-error.mc-disabled {
+            border-color: map.get($foreground, border);
+
+            background-color: map.get($background, background-disabled);
+
+            & .mc-checkbox-checkmark,
+            & .mc-checkbox-mixedmark {
+                color: map.get($foreground, text-disabled);
+            }
+        }
+    }
+}

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

@@ -27,5 +27,5 @@ export declare class McPseudoCheckbox extends McPseudoCheckboxMixinBase implemen
     disabled: boolean;
     constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<McPseudoCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McPseudoCheckbox, "mc-pseudo-checkbox", never, { "color": "color"; "state": "state"; "disabled": "disabled"; }, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McPseudoCheckbox, "mc-pseudo-checkbox", never, { "color": "color"; "state": "state"; "disabled": "disabled"; }, {}, never, never, false, never>;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.scss

@@ -0,0 +1,57 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../../styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-pseudo-checkbox {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+
+    width: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
+    height: var(--mc-checkbox-size-width, map.get($tokens, checkbox-size-width));
+
+    border: {
+        radius: 3px;
+        width: var(--mc-checkbox-size-border-width, map.get($tokens, checkbox-size-border-width));
+        style: solid;
+    }
+
+    cursor: pointer;
+
+    vertical-align: middle;
+    flex-shrink: 0;
+
+    & .mc-checkbox-checkmark,
+    & .mc-checkbox-mixedmark {
+        display: none;
+
+        position: absolute;
+        top: calc(-1 * var(--mc-checkbox-size-border-width, #{map.get($tokens, checkbox-size-border-width)}));
+        left: calc(-1 * var(--mc-checkbox-size-border-width, #{map.get($tokens, checkbox-size-border-width)}));
+    }
+
+    &.mc-pseudo-checkbox-checked,
+    &.mc-pseudo-checkbox-indeterminate {
+        border-color: transparent;
+    }
+
+    &.mc-checked {
+        .mc-checkbox-checkmark {
+            display: inline-block;
+        }
+    }
+
+    &.mc-indeterminate {
+        .mc-checkbox-mixedmark {
+            display: inline-block;
+        }
+    }
+
+    &.mc-disabled {
+        cursor: default;
+    }
+}

package/core/styles/_core.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+
+@use 'common/overlay' as *;
+@use 'common/visually-hidden' as *;
+
+
+// Mixin that renders all of the core styles that are not theme-dependent.
+@mixin mc-core() {
+    @include a11y-visually-hidden();
+    @include overlay();
+}

package/core/styles/_mosaic-theme.scss

@@ -0,0 +1,147 @@
+@use 'theming/theming' as *;
+@use 'typography/typography' as *;
+
+@use 'theming/badges' as *;
+@use 'theming/alerts' as *;
+@use 'theming/scrollbars' as *;
+
+@use '../selection/pseudo-checkbox/pseudo-checkbox-theme' as *;
+@use '../../autocomplete/autocomplete-theme' as *;
+@use '../../button/button-theme' as *;
+@use '../../card/card-theme' as *;
+@use '../../checkbox/checkbox-theme' as *;
+@use '../../code-block/code-block-theme' as *;
+@use '../../datepicker/datepicker-theme' as *;
+@use '../../divider/divider-theme' as *;
+@use '../../dropdown/dropdown-theme' as *;
+@use '../../form-field/form-field-theme' as *;
+@use '../../icon/icon-theme' as *;
+@use '../../input/input-theme' as *;
+@use '../../link/link-theme' as *;
+@use '../../list/list-theme' as *;
+@use '../../loader-overlay/loader-overlay-theme' as *;
+@use '../../modal/modal-theme' as *;
+@use '../../markdown/markdown-theme' as *;
+@use '../../navbar/navbar-theme' as *;
+@use '../../popover/popover-theme' as *;
+@use '../../progress-bar/progress-bar-theme' as *;
+@use '../../progress-spinner/progress-spinner-theme' as *;
+@use '../../radio/radio-theme' as *;
+@use '../../select/select-theme' as *;
+@use '../../sidepanel/sidepanel-theme' as *;
+@use '../../splitter/splitter-theme' as *;
+@use '../../tabs/tabs-theme' as *;
+@use '../../tags/tag-theme' as *;
+@use '../../textarea/textarea-theme' as *;
+@use '../../timezone/timezone-option-theme' as *;
+@use '../../toast/toast-theme' as *;
+@use '../../toggle/toggle-theme' as *;
+@use '../../tooltip/tooltip-theme' as *;
+@use '../../tree-select/tree-select-theme' as *;
+@use '../../tree/tree-theme' as *;
+@use '../../table/table-theme' as *;
+@use '../forms/forms-theme' as *;
+@use '../option/option-theme' as *;
+@use '../option/optgroup-theme' as *;
+@use '../option/option-action-theme' as *;
+@use '../highlight/highlight-theme' as *;
+@use '../../dl/dl-theme' as *;
+
+
+@mixin mosaic-theme($theme) {
+    @include mc-core-theme($theme);
+
+    @include mc-alert-theme($theme);
+    @include mc-autocomplete-theme($theme);
+    @include mc-badge-theme($theme);
+    @include mc-button-theme($theme);
+    @include mc-card-theme($theme);
+    @include mc-checkbox-theme($theme);
+    @include mc-code-block-theme($theme);
+    @include mc-datepicker-theme($theme);
+    @include mc-dl-theme($theme);
+    @include mc-divider-theme($theme);
+    @include mc-dropdown-theme($theme);
+    @include mc-form-field-theme($theme);
+    @include mc-forms-theme($theme);
+    @include mc-highlight-theme($theme);
+    @include mc-icon-theme($theme);
+    @include mc-input-theme($theme);
+    @include mc-link-theme($theme);
+    @include mc-list-theme($theme);
+    @include mc-loader-overlay-theme($theme);
+    @include mc-modal-theme($theme);
+    @include mc-markdown-theme($theme);
+    @include mc-navbar-theme($theme);
+    @include mc-option-theme($theme);
+    @include mc-optgroup-theme($theme);
+    @include mc-option-action-theme($theme);
+    @include mc-popover-theme($theme);
+    @include mc-progress-bar-theme($theme);
+    @include mc-progress-spinner-theme($theme);
+    @include mc-pseudo-checkbox-theme($theme);
+    @include mc-radio-theme($theme);
+    @include mc-scrollbar-theme($theme);
+    @include mc-select-theme($theme);
+    @include mc-sidepanel-theme($theme);
+    @include mc-splitter-theme($theme);
+    @include mc-tabs-theme($theme);
+    @include mc-tag-theme($theme);
+    @include mc-textarea-theme($theme);
+    @include mc-timezone-option-theme($theme);
+    @include mc-toast-theme($theme);
+    @include mc-toggle-theme($theme);
+    @include mc-tooltip-theme($theme);
+    @include mc-tree-select-theme($theme);
+    @include mc-tree-theme($theme);
+    @include mc-table-theme($theme);
+}
+
+
+@mixin mosaic-typography($config: null, $md-config: null) {
+    @if $config == null {
+        $config: mc-typography-config();
+    }
+
+    @if $md-config == null {
+        $md-config: mc-markdown-typography-config();
+    }
+
+    @include mc-base-typography($config);
+    @include mc-markdown-base-typography($md-config);
+
+    @include alert-theme($config);
+    @include mc-badge-typography($config);
+    @include mc-button-typography($config);
+    @include mc-checkbox-typography($config);
+    @include mc-code-block-typography($config);
+    @include mc-datepicker-typography($config);
+    @include mc-dropdown-typography($config);
+    @include mc-dl-typography($config);
+    @include mc-form-field-typography($config);
+    @include mc-forms-typography($config);
+    @include mc-input-typography($config);
+    @include mc-link-typography($config);
+    @include mc-list-typography($config);
+    @include mc-loader-overlay-typography($config);
+    @include mc-modal-typography($config);
+    @include mc-navbar-typography($config);
+    @include mc-option-typography($config);
+    @include mc-optgroup-typography($config);
+    @include mc-popover-typography($config);
+    @include mc-radio-typography($config);
+    @include mc-select-typography($config);
+    @include mc-sidepanel-typography($config);
+    @include mc-tabs-typography($config);
+    @include mc-tag-typography($config);
+    @include mc-textarea-typography($config);
+    @include mc-timezone-option-typography($config);
+    @include mc-toast-typography($config);
+    @include mc-toggle-typography($config);
+    @include mc-tooltip-typography($config);
+    @include mc-tree-select-typography($config);
+    @include mc-tree-typography($config);
+    @include mc-table-typography($config);
+
+    @include mc-markdown-typography($md-config);
+}

package/core/styles/_tokens.scss

@@ -0,0 +1,6 @@
+@use 'sass:color' as *;
+
+@forward '@mosaic-design/tokens-fe-2022/web/variables';
+@forward '@mosaic-design/tokens-fe-2022/web/palette';
+@forward '@mosaic-design/tokens-fe-2022/web/typography';
+@forward '@mosaic-design/tokens-fe-2022/web/md-typography';

package/core/styles/_variables.scss

@@ -0,0 +1,9 @@
+$z-index-modal-mask: 1000;
+$z-index-modal: 1000;
+$z-index-notification: 1010;
+$z-index-message: 1010;
+$z-index-popover: 1030;
+$z-index-picker: 1050;
+$z-index-dropdown: 1050;
+$z-index-tooltip: 1060;
+$z-index-toast: 1070;

package/core/styles/common/_animation.scss

@@ -0,0 +1,35 @@
+@keyframes mc-progress {
+    from {
+        background-position: 0 0;
+    }
+
+    to {
+        background-position: 29px 0;
+    }
+}
+
+.mc-progress {
+    position: relative;
+
+    &:after {
+        content: '';
+        position: absolute;
+        border-radius: inherit;
+
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+
+        $lighter: transparent;
+        $darker: rgba(0, 0, 0, 0.05);
+        background: linear-gradient(
+            135deg,
+            $darker 10px, $lighter 10px,
+            $lighter 20px, $darker 20px,
+            $darker 30px, $lighter 30px
+        ) repeat;
+        background-size: 29px 29px;
+        animation: mc-progress 1s linear infinite;
+    }
+}

package/core/styles/common/_button.scss

@@ -0,0 +1,10 @@
+@use 'vendor-prefixes';
+
+
+@mixin mc-button-reset {
+    @include vendor-prefixes.user-select(none);
+    cursor: pointer;
+    outline: none;
+    border: none;
+}
+

package/core/styles/common/_clearfix.scss

@@ -0,0 +1,13 @@
+@mixin clearfix {
+    zoom: 1;
+
+    &:before,
+    &:after {
+        content: "";
+        display: table;
+    }
+
+    &:after {
+        clear: both;
+    }
+}