@ptsecurity/mosaic 14.7.2 → 15.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@ptsecurity/mosaic",
-    "version": "14.7.2",
+    "version": "15.0.0",
     "description": "Mosaic",
     "repository": {
         "type": "git",
@@ -17,34 +17,31 @@
     },
     "homepage": "https://github.com/positive-js/mosaic#readme",
     "peerDependencies": {
-        "@angular/animations": "^14.2.12",
-        "@angular/cdk": "^14.0.4",
-        "@angular/core": "^14.2.12",
-        "@angular/common": "^14.2.12",
-        "@angular/forms": "^14.2.12",
-        "@ptsecurity/cdk": "^14.7.2",
-        "@ptsecurity/mosaic-moment-adapter": "^14.7.2",
-        "@ptsecurity/mosaic-luxon-adapter": "^14.7.2",
-        "@ptsecurity/mosaic-icons": "^5.0.0"
+        "@angular/animations": "^15.2.0",
+        "@angular/cdk": "^15.2.0",
+        "@angular/core": "^15.2.0",
+        "@angular/common": "^15.2.0",
+        "@angular/forms": "^15.2.0",
+        "@ptsecurity/cdk": "^15.0.0",
+        "@ptsecurity/mosaic-moment-adapter": "^1.1.0",
+        "@ptsecurity/mosaic-luxon-adapter": "^1.1.0",
+        "@mosaic-design/date-formatter": "^1.1.0",
+        "@ptsecurity/mosaic-icons": "^6.6.2",
+        "@mosaic-design/tokens-builder": "^1.3.0",
+        "@mosaic-design/tokens-fe-2022": "^1.3.0",
+        "@mosaic-design/tokens-legacy-2017": "^1.3.0"
     },
     "dependencies": {
-        "tslib": "^2.0.1"
+        "tslib": "^2.4.0"
     },
-    "schematics": "./schematics/collection.json",
     "ng-update": {
-        "migrations": "./schematics/migration.json",
         "packageGroup": [
             "@ptsecurity/mosaic"
         ]
     },
     "exports": {
-        "./design-tokens/style-dictionary/*": {
-            "default": "./design-tokens/style-dictionary/*.js"
-        },
-        "./package.json": {
-            "default": "./package.json"
-        },
         ".": {
+            "sass": "./_index.scss",
             "types": "./index.d.ts",
             "esm2020": "./esm2020/ptsecurity-mosaic.mjs",
             "es2020": "./fesm2020/ptsecurity-mosaic.mjs",
@@ -52,6 +49,18 @@
             "node": "./fesm2015/ptsecurity-mosaic.mjs",
             "default": "./fesm2020/ptsecurity-mosaic.mjs"
         },
+        "./prebuilt-themes/default-theme.css": {
+            "style": "./prebuilt-themes/default-theme.css"
+        },
+        "./prebuilt-themes/dark-theme.css": {
+            "style": "./prebuilt-themes/dark-theme.css"
+        },
+        "./prebuilt-themes/default-visual.css": {
+            "style": "./prebuilt-themes/default-visual.css"
+        },
+        "./package.json": {
+            "default": "./package.json"
+        },
         "./autocomplete": {
             "types": "./autocomplete/index.d.ts",
             "esm2020": "./esm2020/autocomplete/ptsecurity-mosaic-autocomplete.mjs",
@@ -116,14 +125,6 @@
             "node": "./fesm2015/ptsecurity-mosaic-datepicker.mjs",
             "default": "./fesm2020/ptsecurity-mosaic-datepicker.mjs"
         },
-        "./design-tokens": {
-            "types": "./design-tokens/index.d.ts",
-            "esm2020": "./esm2020/design-tokens/ptsecurity-mosaic-design-tokens.mjs",
-            "es2020": "./fesm2020/ptsecurity-mosaic-design-tokens.mjs",
-            "es2015": "./fesm2015/ptsecurity-mosaic-design-tokens.mjs",
-            "node": "./fesm2015/ptsecurity-mosaic-design-tokens.mjs",
-            "default": "./fesm2020/ptsecurity-mosaic-design-tokens.mjs"
-        },
         "./divider": {
             "types": "./divider/index.d.ts",
             "esm2020": "./esm2020/divider/ptsecurity-mosaic-divider.mjs",

package/popover/_popover-theme.scss

@@ -0,0 +1,113 @@
+@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-popover-theme($theme) {
+    $foreground: map.get($theme, foreground);
+
+    $popover: map.get(map.get($theme, components), popover);
+
+    $header: map.get($popover, header);
+    $footer: map.get($popover, footer);
+
+    .mc-popover {
+        border-color: map.get($popover, border);
+        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    }
+
+    .mc-popover__header {
+        color: map.get($header, text);
+        background: map.get($header, background);
+        border-bottom-color: map.get($header, border);
+    }
+
+    .mc-popover__container,
+    .mc-popover__content {
+        color: map.get($popover, text);
+        background-color: map.get($popover, background);
+    }
+
+    .mc-popover__footer {
+        border-top-color: map.get($footer, border);
+        background-color: map.get($footer, background);
+    }
+
+    .mc-popover .mc-popover__arrow {
+        border-color: map.get($popover, border);
+    }
+
+    .mc-popover_placement-top .mc-popover__arrow,
+    .mc-popover_placement-top-left .mc-popover__arrow,
+    .mc-popover_placement-top-right .mc-popover__arrow {
+        background-color: map.get($popover, background);
+        border-top-color: map.get($popover, border);
+        border-left-color: map.get($popover, border);
+    }
+
+    .mc-popover_placement-top .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-top-left .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-top-right .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-top-color: map.get($footer, border);
+        border-left-color: map.get($footer, border);
+    }
+
+    .mc-popover_placement-right .mc-popover__arrow,
+    .mc-popover_placement-right-top .mc-popover__arrow,
+    .mc-popover_placement-right-bottom .mc-popover__arrow {
+        background-color: map.get($popover, background);
+        border-top-color: map.get($popover, background);
+        border-right-color: map.get($popover, background);
+    }
+
+    .mc-popover_placement-right-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-top-color: map.get($footer, border);
+        border-right-color: map.get($footer, border);
+    }
+
+    .mc-popover_placement-left .mc-popover__arrow,
+    .mc-popover_placement-left-top .mc-popover__arrow,
+    .mc-popover_placement-left-bottom .mc-popover__arrow {
+        background-color: map.get($popover, background);
+        border-bottom-color: map.get($popover, background);
+        border-left-color: map.get($popover, background);
+    }
+
+    .mc-popover_placement-left-bottom .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($footer, background);
+        border-bottom-color: map.get($footer, border);
+        border-left-color: map.get($footer, border);
+    }
+
+    .mc-popover_placement-bottom .mc-popover__arrow,
+    .mc-popover_placement-bottom-left .mc-popover__arrow,
+    .mc-popover_placement-bottom-right .mc-popover__arrow,
+    .mc-popover_placement-bottom .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-bottom-left .mc-popover__arrow.mc-popover__arrow_with-footer,
+    .mc-popover_placement-bottom-right .mc-popover__arrow.mc-popover__arrow_with-footer {
+        background-color: map.get($popover, background);
+        border-right-color: map.get($popover, background);
+        border-bottom-color: map.get($popover, background);
+    }
+}
+
+@mixin mc-popover-typography($config) {
+    .mc-popover__header {
+        @include mc-typography-level-to-styles($config, map.get($tokens, popover-header-font-default));
+    }
+
+    .mc-popover__content {
+        @include mc-typography-level-to-styles($config, map.get($tokens, popover-font-default));
+    }
+
+    .mc-popover__footer {
+        @include mc-typography-level-to-styles($config, map.get($tokens, popover-footer-font-default));
+    }
+}

package/popover/popover-confirm.component.d.ts

@@ -14,7 +14,7 @@ export declare class McPopoverConfirmComponent extends McPopoverComponent {
     confirmText: string;
     constructor(changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopoverConfirmComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McPopoverConfirmComponent, "mc-popover-confirm-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McPopoverConfirmComponent, "mc-popover-confirm-component", never, {}, {}, never, never, false, never>;
 }
 export declare class McPopoverConfirmTrigger extends McPopoverTrigger {
     confirm: EventEmitter<void>;
@@ -29,5 +29,5 @@ export declare class McPopoverConfirmTrigger extends McPopoverTrigger {
     setupButtonEvents(): void;
     getOverlayHandleComponentType(): typeof McPopoverConfirmComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopoverConfirmTrigger, [null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopoverConfirmTrigger, "[mcPopoverConfirm]", ["mcPopoverConfirm"], { "confirmText": "mcPopoverConfirmText"; "confirmButtonText": "mcPopoverConfirmButtonText"; }, { "confirm": "confirm"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopoverConfirmTrigger, "[mcPopoverConfirm]", ["mcPopoverConfirm"], { "confirmText": "mcPopoverConfirmText"; "confirmButtonText": "mcPopoverConfirmButtonText"; }, { "confirm": "confirm"; }, never, never, false, never>;
 }

package/popover/popover.component.d.ts

@@ -12,7 +12,7 @@ export declare class McPopoverComponent extends McPopUp {
     updateClassMap(placement: string, customClass: string, size: PopUpSizes): void;
     updateTrapFocus(isTrapFocus: boolean): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<McPopoverComponent, "mc-popover-component", never, {}, {}, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<McPopoverComponent, "mc-popover-component", never, {}, {}, never, never, false, never>;
 }
 export declare const MC_POPOVER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
 /** @docs-private */
@@ -71,5 +71,5 @@ export declare class McPopoverTrigger extends McPopUpTrigger<McPopoverComponent>
     closingActionsForClick(): import("rxjs").Observable<MouseEvent>[];
     closingActions(): import("rxjs").Observable<void | import("@angular/cdk/scrolling").CdkScrollable | MouseEvent>;
     static ɵfac: i0.ɵɵFactoryDeclaration<McPopoverTrigger, [null, null, null, null, null, null, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopoverTrigger, "[mcPopover]", ["mcPopover"], { "popoverVisible": "mcPopoverVisible"; "popoverPlacement": "mcPopoverPlacement"; "popoverPlacementPriority": "mcPopoverPlacementPriority"; "hasBackdrop": "hasBackdrop"; "header": "mcPopoverHeader"; "content": "mcPopoverContent"; "footer": "mcPopoverFooter"; "disabled": "mcPopoverDisabled"; "trigger": "mcTrigger"; "size": "mcPopoverSize"; "customClass": "mcPopoverClass"; "closeOnScroll": "closeOnScroll"; "backdropClass": "backdropClass"; }, { "placementChange": "mcPopoverPlacementChange"; "visibleChange": "mcPopoverVisibleChange"; }, never, never, false>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<McPopoverTrigger, "[mcPopover]", ["mcPopover"], { "popoverVisible": "mcPopoverVisible"; "popoverPlacement": "mcPopoverPlacement"; "popoverPlacementPriority": "mcPopoverPlacementPriority"; "hasBackdrop": "hasBackdrop"; "header": "mcPopoverHeader"; "content": "mcPopoverContent"; "footer": "mcPopoverFooter"; "disabled": "mcPopoverDisabled"; "trigger": "mcTrigger"; "size": "mcPopoverSize"; "customClass": "mcPopoverClass"; "closeOnScroll": "closeOnScroll"; "backdropClass": "backdropClass"; }, { "placementChange": "mcPopoverPlacementChange"; "visibleChange": "mcPopoverVisibleChange"; }, never, never, false, never>;
 }

package/popover/popover.scss

@@ -0,0 +1,114 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/variables';
+@use '../core/pop-up/pop-up';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.mc-popover {
+    position: relative;
+
+    border-radius: var(--mc-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
+    border-width: var(--mc-popover-size-border-width, map.get($tokens, popover-size-border-width));
+    border-style: solid;
+
+    box-sizing: border-box;
+
+    z-index: variables.$z-index-popover;
+
+    list-style: none;
+    white-space: pre-line;
+
+    &.mc-popover_small {
+        max-width: var(--mc-popover-size-small-width, map.get($tokens, popover-size-small-width));
+    }
+
+    &.mc-popover_normal {
+        max-width: var(--mc-popover-size-normal-width, map.get($tokens, popover-size-normal-width));
+    }
+
+    &.mc-popover_large {
+        max-width: var(--mc-popover-size-large-width, map.get($tokens, popover-size-large-width));
+    }
+
+    $popover-distance: calc(var(--mc-popover-size-trigger-margin, #{map.get($tokens, popover-size-trigger-margin)}));
+
+    @include pop-up.popup-margins(mc-popover, $popover-distance);
+}
+
+.mc-popover__container {
+    display: flex;
+    flex-direction: column;
+
+    max-height: var(--mc-popover-size-max-height, map.get($tokens, popover-size-max-height));
+    border-radius: var(--mc-popover-size-border-radius, map.get($tokens, popover-size-border-radius));
+    overflow: hidden;
+}
+
+.mc-popover__header {
+    display: flex;
+    align-items: center;
+
+    height: var(--mc-popover-header-size-height, map.get($tokens, popover-header-size-height));
+
+    padding: var(--mc-popover-header-size-padding, map.get($tokens, popover-header-size-padding));
+
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+}
+
+.mc-popover__content {
+    overflow: hidden;
+
+    padding: var(--mc-popover-size-padding, map.get($tokens, popover-size-padding));
+
+    &.mc-popover__content_padding_bottom {
+        padding-bottom: calc(
+            var(--mc-popover-size-padding, map.get($tokens, popover-size-padding)) +
+            var(--mc-popover-footer-size-margin-top, map.get($tokens, popover-footer-size-margin-top))
+        );
+    }
+}
+
+.mc-popover__footer {
+    box-sizing: border-box;
+
+    height: var(--mc-popover-footer-size-height, map.get($tokens, popover-footer-size-height));
+
+    padding: var(--mc-popover-footer-size-padding, map.get($tokens, popover-footer-size-padding));
+
+    border-top-width: 1px;
+    border-top-style: solid;
+}
+
+.mc-popover__arrow {
+    position: absolute;
+
+    z-index: -1;
+
+    width: var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
+    height: var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size)});
+
+    border: solid 1px;
+
+    transform: rotate(45deg);
+}
+
+$arrow-offset: calc((var(--mc-popover-size-arrow-size, #{map.get($tokens, popover-size-arrow-size) - 1}) / -2));
+$arrow-padding: calc(18px - var(--mc-popover-size-trigger-margin, #{map.get($tokens, popover-size-trigger-margin)}));
+
+@include pop-up.popup-arrow-positions(mc-popover, $arrow-offset, $arrow-padding);
+
+.mc-popover-confirm .mc-popover__content {
+    padding: 24px 16px 16px;
+
+    button {
+        margin-top: 16px;
+        display: block;
+        margin-left: auto;
+    }
+}