@ts-core/angular 15.0.1 → 15.0.2

package/htdocs/common.js

@@ -15,10 +15,10 @@ function cookieGet(name) {
 //
 //--------------------------------------------------------------------------
 
-function setTheme(cookieName) {
-    var theme = cookieGet(cookieName);
+function themeSet(themeCookieName) {
+    var theme = cookieGet(themeCookieName);
     if (theme) {
-        document.body.className = theme;
+        document.body.className = `${theme}-theme mat-app-background`;
     }
 }
 

package/manager/ResizeManager.d.ts

@@ -8,7 +8,7 @@ export declare class ResizeManager implements IDestroyable {
     protected subject: BehaviorSubject<ISize>;
     protected element: HTMLElement;
     constructor(element: IViewElement);
-    protected handler: (item: ISize) => void;
+    protected handlerItem: (item: ISize) => void;
     protected handler2: (items: Array<ResizeObserverEntry>) => void;
     get changed(): Observable<ISize>;
     get value(): ISize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ts-core/angular",
-  "version": "15.0.1",
+  "version": "15.0.2",
   "description": "Modules for frontend based on angular",
   "main": "public-api.js",
   "author": {
@@ -26,7 +26,6 @@
     "@ts-core/frontend": "^3.0.9",
     "@types/numeral": "^2.0.2",
     "bootstrap": "^5.2.3",
-    "css-element-queries": "^1.2.3",
     "csshake": "^1.7.0",
     "interactjs": "1.10.11",
     "moment": "^2.29.4",

package/style/_filter.scss

@@ -0,0 +1,14 @@
+@mixin grayscale($value) {
+    filter: none;
+    -o-filter: grayscale($value);
+    -ms-filter: grayscale($value);
+    -moz-filter: grayscale($value);
+    -webkit-filter: grayscale($value);
+}
+@mixin invert($value) {
+    filter: none;
+    -o-filter: invert($value);
+    -ms-filter: invert($value);
+    -moz-filter: invert($value);
+    -webkit-filter: invert($value);
+}

package/style/_mouse.scss

@@ -0,0 +1,27 @@
+@mixin active() {
+	@include cursor-mixin(pointer);
+}
+@mixin inactive() {
+	@include cursor-mixin(default);
+}
+@mixin move(){
+	@include cursor-mixin(move);
+}
+@mixin help(){
+	@include cursor-mixin(help);
+}
+@mixin wait(){
+	@include cursor-mixin(wait);
+}
+@mixin enabled() {
+	@include pointer-events-mixin(auto);
+}
+@mixin disabled() {
+	@include pointer-events-mixin(none);
+}
+@mixin cursor-mixin($value) {
+	cursor: $value !important;
+}
+@mixin pointer-events-mixin($value) {
+	pointer-events: $value !important;
+}

package/style/_scroll.scss

@@ -0,0 +1,20 @@
+@mixin no() {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+@mixin auto() {
+    overflow-y: auto;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}
+@mixin vertical() {
+    overflow-y: auto;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+}
+@mixin horizontal() {
+    overflow-y: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+}

package/style/_text.scss

@@ -0,0 +1,12 @@
+@mixin word-wrap-break-word() {
+    word-wrap: break-word;
+}
+@mixin word-break-break-all() {
+    word-break: break-all;
+}
+@mixin one-line() {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}

package/style/mat/_core.scss

@@ -0,0 +1,317 @@
+@use 'sass:map';
+@use 'variables' as var;
+@use '@angular/material' as mat;
+
+@use '../text' as text;
+@use '../mouse' as mouse;
+@use '../scroll' as scroll;
+@use 'bootstrap' as bootstrap;
+
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/breakpoints';
+
+@mixin core() {
+    @include mat.core();    
+    @include bootstrap.core();    
+
+    // Common
+    p,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    body {
+        padding: 0;
+        margin: 0;
+    }
+
+    a:focus,
+    div:focus,
+    button:focus {
+        outline: 0;
+    }
+    textarea {
+        &.cdk-textarea-autosize {
+            overflow-y: hidden !important;
+        }
+    }
+
+    // Material
+
+    mat-chip:focus,
+    mat-tab-group {
+        outline: 0;
+    }
+    mat-dialog-container {
+        &:hover:not(.minimized) {
+            vi-window-resize-element {
+                display: block !important;
+            }
+        }
+        vi-window-resize-element {
+            width: 32px;
+            right: -16px;
+            bottom: -16px;
+            display: none !important;
+            pointer-events: none;
+        }
+    }
+    mat-bottom-sheet-container {
+        padding: 0 !important;
+        overflow: visible !important;
+        & > :first-child {
+            height: 100%;
+            border-radius: var.$border-radius;
+            @include scroll.vertical();
+        }
+    }
+    mat-form-field {
+        &.no-underline {
+            .mdc-text-field {
+                border-bottom-left-radius: var.$border-radius;
+                border-bottom-right-radius: var.$border-radius;
+                .mdc-line-ripple {
+                    display: none;
+                }
+            }
+        }
+    }
+    mat-dialog-container,
+    mat-bottom-sheet-container {
+        vi-window-close-element,
+        vi-window-expand-element,
+        vi-window-minimize-element {
+            top: -16px;
+            width: 32px;
+            height: 32px;
+        }
+        vi-window-close-element {
+            right: -16px;
+        }
+        vi-window-expand-element,
+        vi-window-minimize-element {
+            right: 24px;
+        }
+        @include media-breakpoint-down(lg) {
+            vi-window-close-element {
+                right: 16px;
+            }
+            vi-window-expand-element,
+            vi-window-minimize-element {
+                right: 56px;
+            }
+        }
+    }
+    mat-cell {
+        color: inherit !important;
+    }
+    mat-header-cell {
+        &:not(:hover),
+        &.mat-sort-header-disabled {
+            color: inherit !important;
+        }
+    }
+ 
+    mat-expansion-panel {
+        border-radius: 0 !important;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        &:last-child {
+            border-bottom: none !important;
+        }
+        &:not([class*='mat-elevation-z']) {
+            box-shadow: none !important;
+        }
+        &.mat-expansion-panel-spacing {
+            margin: 0 !important;
+        }
+        mat-expansion-panel-header {
+            height: auto !important;
+            padding: 1rem !important;
+            &.mat-expanded {
+                height: auto !important;
+            }
+        }
+        .mat-expansion-panel-body {
+            padding: 0 !important;
+        }
+    }
+
+    mat-progress-bar {
+        &.border {
+            height: 1px;
+            border: none !important;
+            .mdc-linear-progress__buffer {
+                .mdc-linear-progress__buffer-dots {
+                    display: none;
+                }
+            }
+        }
+        &.transparent {
+            .mdc-linear-progress__buffer {
+                .mdc-linear-progress__buffer-dots {
+                    display: none;
+                }
+            }
+        }
+    }
+    mat-table {
+        background: none !important;
+    }
+    mat-paginator {
+        background: none !important;
+    }
+    .mat-icon {
+        width: unset !important;
+        height: unset !important;
+    }
+    .cdk-global-scrollblock {
+        overflow-y: auto;
+    }
+    .cdk-overlay-pane {
+        &.vi-window,
+        &.vi-notification {
+            position: absolute !important;
+        }
+        &.vi-draggable,
+        &.vi-resizeable {
+            border-radius: var.$border-radius;
+        }
+        &.vi-window {
+            border: 2px solid transparent;
+        }
+        &.minimized {
+            height: auto !important;
+            min-height: 40px !important;
+        }
+        &.vi-blink {
+            border-width: 2px;
+            border-style: solid;
+            animation: blink 1s;
+            animation-iteration-count: 3;
+            // @keyframes blink { 50% { border-color:#fff ; }  }
+        }
+        .mat-mdc-select-panel {
+            padding: 0 !important;
+            border-style: solid;
+            border-width: 1px;
+            border-radius: var.$border-radius;
+        }
+        .mat-mdc-menu-content {
+            padding: 0 !important;
+        }
+        .mat-mdc-menu-panel {
+            max-width: none !important;
+            max-height: none !important;
+            min-height: 0px !important;
+        }
+    }
+    .mdc-tooltip__surface {
+        max-height: inherit !important;
+    }
+    .mat-mdc-paginator-range-label {
+        margin-left: 1rem;
+        margin-right: 1rem;
+    }
+
+    // Text
+    .mat-h1,
+    .mat-h2,
+    .mat-h3,
+    .mat-h4,
+    .mat-h5,
+    .mat-h6,
+    .mat-body,
+    .mat-body-1,
+    .mat-body-2,
+    .mat-body-strong,
+    .mat-small,
+    .mat-caption,
+    .mat-subtitle-1,
+    .mat-subtitle-2,
+    .mat-headline-1,
+    .mat-headline-2,
+    .mat-headline-3,
+    .mat-headline-4,
+    .mat-headline-5,
+    .mat-headline-6 {
+        margin: 0;
+    }
+
+    .text-underline {
+        text-decoration: underline !important;
+    }
+    .text-one-line {
+        @include text.one-line();
+    }
+    .text-multi-line {
+        @include text.word-wrap-break-word();
+        @include text.word-break-break-all();
+    }
+    .text-word-wrap-break-word {
+        @include text.word-wrap-break-word();
+    }
+    .text-word-break-break-all {
+        @include text.word-break-break-all();
+    }
+    .scroll-no {
+        @include scroll.no();
+    }
+    .scroll-auto {
+        @include scroll.auto();
+    }
+    .scroll-vertical {
+        @include scroll.vertical();
+    }
+    .scroll-horizontal {
+        @include scroll.horizontal();
+    }
+    .mouse-help {
+        @include mouse.help();
+    }
+    .mouse-wait {
+        @include mouse.wait();
+    }
+    .mouse-active {
+        @include mouse.active();
+    }
+    .mouse-enabled {
+        @include mouse.enabled();
+    }
+    .mouse-disabled {
+        @include mouse.disabled();
+    }
+    .mouse-inactive {
+        @include mouse.inactive();
+    }
+    .mouse-disabled {
+        @include mouse.disabled();
+    }
+
+    ::-webkit-scrollbar {
+        width: 14px;
+        height: 14px;
+    }
+    ::-webkit-scrollbar-thumb {
+        height: 6px;
+        min-height: 16px;
+        border: 4px solid;
+        background-clip: padding-box;
+        -webkit-border-radius: 7px;
+    }
+    ::-webkit-scrollbar-thumb {
+        border-color: transparent;
+        -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
+    }
+    ::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+    ::-webkit-scrollbar-button {
+        width: 0;
+        height: 0;
+        display: none;
+    }
+}

package/style/mat/_index.scss

@@ -0,0 +1,169 @@
+@forward '../filter' as filter-*;
+@forward '../scroll' as scroll-*;
+@forward '../mouse' as mouse-*;
+@forward '../text' as text-*;
+
+@forward 'helper/typography' as typography-*;
+@forward 'helper/theme' as theme-*;
+@forward 'core' show core;
+
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@use 'variables' as var;
+@use 'bootstrap' as bootstrap;
+@use 'helper/typography' as typography;
+
+@mixin color($theme) {
+    @include bootstrap.color($theme);
+
+    $primary: map.get($theme, 'primary');
+    $foreground: map.get($theme, 'foreground');
+    $background: map.get($theme, 'background');
+    $border-color: map.get($foreground, 'divider');
+
+    $text-primary: mat.get-color-from-palette($primary);
+
+    body {
+        color: map.get($foreground, 'text');
+        background-color: map.get($background, 'body');
+    }
+    mat-form-field {
+        .mdc-text-field {
+            .mdc-line-ripple::before {
+                border-bottom-color: $border-color !important;
+            }
+        }
+        .mdc-text-field--outlined {
+            &:not(.mdc-text-field--disabled) {
+                .mdc-notched-outline__notch,
+                .mdc-notched-outline__leading,
+                .mdc-notched-outline__trailing {
+                    border-color: $border-color !important;
+                }
+                &:hover {
+                    .mdc-notched-outline__notch,
+                    .mdc-notched-outline__leading,
+                    .mdc-notched-outline__trailing {
+                        border-color: mat.get-color-from-palette($foreground, 'base') !important;
+                    }
+                }
+                &.mdc-text-field--focused {
+                    .mdc-notched-outline__notch,
+                    .mdc-notched-outline__leading,
+                    .mdc-notched-outline__trailing {
+                        border-color: mat.get-color-from-palette($primary) !important;
+                    }
+                }
+            }
+        }
+    }
+    mat-expansion-panel {
+        border-bottom-color: $border-color;
+    }
+    mat-progress-bar {
+        &.border {
+            &:not(.transparent) {
+                .mdc-linear-progress__buffer {
+                    .mdc-linear-progress__buffer-bar {
+                        background-color: $border-color !important;
+                    }
+                }
+            }
+        }
+        &.transparent {
+            .mdc-linear-progress__buffer {
+                .mdc-linear-progress__buffer-bar {
+                    background-color: transparent !important;
+                }
+            }
+        }
+    }
+    mat-cell {
+        border-bottom-color: $border-color !important;
+        &:last-child {
+            border-bottom-color: transparent;
+        }
+        &.active {
+            background-color: map.get($background, 'hover') !important;
+        }
+    }
+    .cdk-overlay-pane {
+        &.vi-blink {
+            border-color: $text-primary;
+        }
+        .mat-mdc-select-panel {
+            border-color: $border-color;
+        }
+    }
+    .cdk-overlay-dark-backdrop {
+        background: rgba(0, 0, 0, 0.32);
+    }
+
+    $thumb-color: rgba(0, 0, 0, 0.15);
+    @if map.get($theme, 'is-dark') {
+        $thumb-color: rgba(255, 255, 255, 0.1);
+        .mat-drawer-backdrop {
+            &.mat-drawer-shown {
+                background-color: rgba(0, 0, 0, 0.8);
+            }
+        }
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: $thumb-color;
+    }
+}
+
+@mixin typography($typography) {
+    @include bootstrap.typography($typography);
+
+    body {
+        @include typography.level($typography, 'body-1', false);
+    }
+    .mat-headline-1 {
+        @include typography.level($typography, 'headline-1');
+    }
+    .mat-headline-2 {
+        @include typography.level($typography, 'headline-2');
+    }
+    .mat-headline-3 {
+        @include typography.level($typography, 'headline-3');
+    }
+    .mat-headline-4 {
+        @include typography.level($typography, 'headline-4');
+    }
+    .mat-headline-5 {
+        @include typography.level($typography, 'headline-5');
+    }
+    .mat-headline-6 {
+        @include typography.level($typography, 'headline-6');
+    }
+    .mat-subtitle-2 {
+        @include typography.level($typography, 'subtitle-2');
+    }
+    .mat-subtitle-1 {
+        @include typography.level($typography, 'subtitle-1');
+    }
+    .mat-body-2 {
+        @include typography.level($typography, 'body-2');
+    }
+    .mat-body-1 {
+        @include typography.level($typography, 'body-1');
+    }
+    .mat-caption {
+        @include typography.level($typography, 'caption');
+    }
+    .mat-button {
+        @include typography.level($typography, 'button');
+    }
+}
+@mixin theme($theme, $typography) {
+    $color: mat.get-color-config($theme);
+    @if $color != null {
+        @include color($theme);
+    }
+    @if $typography != null {
+        @include typography($typography);
+    }
+}
+

package/style/mat/_variables.scss

@@ -0,0 +1 @@
+$border-radius: 4px !default;

package/style/mat/bootstrap/_background.scss

@@ -1,10 +1,28 @@
-@mixin vi-mat-theme-bootstrap-background($theme, $text-primary-default, $text-accent-default) {
-    $background: map-get($theme, background);
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+@mixin color($theme) {
+    $color: mat.get-color-config($theme);
+    $primary: map.get($color, 'primary');
+    $foreground: map.get($color, 'foreground');
+    $background: map.get($color, 'background');
 
     .background {
-        background-color: map-get($background, background) !important;
+        background-color: map.get($background, 'background') !important;
     }
     .background-body {
-        background-color: map-get($background, body) !important;
+        background-color: map.get($background, 'body') !important;
+    }
+}
+
+@mixin typography($typography) {
+}
+@mixin theme($theme, $typography) {
+    $color: mat.get-color-config($theme);
+    @if $color != null {
+        @include color($theme);
+    }
+    @if $typography != null {
+        @include typography($typography);
     }
 }