trm-tmpl 3.4.0 → 4.0.1

package/lib/app/pages/components/constructor-form/components/constructor-field-text/constructor-field-text.component.d.ts

@@ -3,7 +3,7 @@ import { PaymentField } from '../../models';
 import { AbstractControl, ControlValueAccessor } from '@angular/forms';
 import { MatDatepicker } from '@angular/material/datepicker';
 import momentjs from 'moment-timezone';
-import { IConfig, NgxMaskDirective } from 'ngx-mask';
+import { NgxMaskConfig, NgxMaskDirective } from 'ngx-mask';
 import { I18N_KEY } from './../../../../../i18n';
 import * as i0 from "@angular/core";
 export declare class ConstructorFieldTextComponent implements ControlValueAccessor, OnInit, OnDestroy, AfterViewInit {
@@ -25,7 +25,7 @@ export declare class ConstructorFieldTextComponent implements ControlValueAccess
     maskedValueChange: EventEmitter<string>;
     control: AbstractControl;
     dir: NgxMaskDirective;
-    maskPatterns: IConfig['patterns'];
+    maskPatterns: NgxMaskConfig['patterns'];
     specialCharacters: string[];
     onChange: (_value: any) => void;
     onTouch: () => void;

package/lib/app/pages/components/constructor-form/models/payment-field.d.ts

@@ -1,6 +1,6 @@
 import { PaymentFieldOptions } from './payment-field-options';
 import { PaymentFieldTypeEnum } from './payment-field-type.enum';
-import { IConfig } from 'ngx-mask/lib/ngx-mask.config';
+import { NgxMaskConfig } from 'ngx-mask/lib/ngx-mask.config';
 import { FormGroup, ValidatorFn } from '@angular/forms';
 export interface PaymentField {
     type: PaymentFieldTypeEnum;
@@ -14,7 +14,7 @@ export interface PaymentField {
     mask?: string;
     specialCharacters?: string[];
     maskValidation?: boolean;
-    maskPatterns?: IConfig['patterns'];
+    maskPatterns?: NgxMaskConfig['patterns'];
     dropSpecialCharacters?: boolean;
     placeholder?: string;
     uppercase?: boolean;

package/lib/app/shared/components/terminal-layout-tpl/terminal-layout-tpl.component.d.ts

@@ -2,7 +2,6 @@ import { OnDestroy } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TerminalLayoutTplComponent implements OnDestroy {
     private versionSrv;
-    private document;
     private translateSrv;
     private cd;
     private translateStorageSrv;

package/lib/app/shared/components/trm-select/scrollbar-select-height.directive.d.ts

@@ -5,7 +5,8 @@ export declare class ScrollbarSelectHeightDirective implements AfterViewInit, On
     private renderer;
     private layoutScrollbar;
     private scrollbar;
-    private unsub;
+    private afterInitSub?;
+    private afterUpdateSub?;
     readonly DEFAULT_MAX_HEIGHT = 250;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "trm-tmpl",
-  "version": "3.4.0",
+  "version": "4.0.1",
   "peerDependencies": {
     "@angular/common": ">= 16.0.0",
     "@angular/core": ">= 16.0.0",
-    "@gmmoney/gm-ui-kit": "^3.0.0",
+    "@gmmoney/gm-ui-kit": "^4.0.0",
     "ngx-scrollbar": ">=15.1.3"
   },
   "dependencies": {
@@ -19,8 +19,6 @@
     },
     ".": {
       "types": "./index.d.ts",
-      "esm2022": "./esm2022/trm-tmpl.mjs",
-      "esm": "./esm2022/trm-tmpl.mjs",
       "default": "./fesm2022/trm-tmpl.mjs"
     }
   }

package/scss/base.scss

@@ -1,12 +1,12 @@
-.trm {
-    background: #F5F5F5;
-    * {
-        box-sizing: border-box;
-    }
-
-    a:not(.gm-button) {
-        color: var(--color-primary-500);
-        font-weight: 500;
-        text-decoration: none;
-    }
-}
+.trm {
+    background: #F5F5F5;
+    * {
+        box-sizing: border-box;
+    }
+
+    a:not(.gm-button) {
+        color: var(--color-primary-500);
+        font-weight: 500;
+        text-decoration: none;
+    }
+}

package/scss/btn.scss

@@ -1,50 +1,50 @@
-@use './mixins' as mix;
-
-.trm {
-    .trm-button {
-        @include mix.flexRow(10px, center);
-        @include mix.font(14px, 20px, 500);
-        border-radius: 10px;
-        height: 42px;
-        outline: 0;
-        width: 100%;
-        border: none;
-        cursor: pointer;
-
-        @include mix.tablet {
-            height: 48px;
-            @include mix.font(15px, 22px, 500);
-        }
-
-        &--primary {
-            background: var(--color-primary-500);
-            color: white;
-            font-weight: 600;
-
-            &:hover, &:focus {
-                background: var(--color-primary-600);
-            }
-
-            &:active {
-                outline: 0;
-                background: var(--color-primary-650);
-            }
-
-            &:disabled {
-                background: var(--color-base-250);
-            }
-        }
-
-        &--secondary {
-            background: var(--color-base-50);
-
-            &:hover, &:focus {
-                background: var(--color-base-100);
-            }
-
-            &:active {
-                background: var(--color-base-150);
-            }
-        }
-    }
-}
+@use './mixins' as mix;
+
+.trm {
+    .trm-button {
+        @include mix.flexRow(10px, center);
+        @include mix.font(14px, 20px, 500);
+        border-radius: 10px;
+        height: 42px;
+        outline: 0;
+        width: 100%;
+        border: none;
+        cursor: pointer;
+
+        @include mix.tablet {
+            height: 48px;
+            @include mix.font(15px, 22px, 500);
+        }
+
+        &--primary {
+            background: var(--color-primary-500);
+            color: white;
+            font-weight: 600;
+
+            &:hover, &:focus {
+                background: var(--color-primary-600);
+            }
+
+            &:active {
+                outline: 0;
+                background: var(--color-primary-650);
+            }
+
+            &:disabled {
+                background: var(--color-base-250);
+            }
+        }
+
+        &--secondary {
+            background: var(--color-base-50);
+
+            &:hover, &:focus {
+                background: var(--color-base-100);
+            }
+
+            &:active {
+                background: var(--color-base-150);
+            }
+        }
+    }
+}

package/scss/currency.scss

@@ -1,31 +1,31 @@
-.trm {
-    --currency-color: var(--color-base-350);
-    --currency-amount-color: black;
-    &-currency {
-        color: var(--currency-color);
-        word-break: keep-all;
-        text-transform: none;
-    }
-
-    &-amount {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        word-break: break-word;
-        white-space: nowrap;
-        font-weight: 500;
-
-        &__value {
-            margin-right: 2px;
-            white-space: nowrap;
-            color: var(--currency-amount-color);
-        }
-
-        &__int {
-            color: var(--currency-amount-int-color, var(--currency-amount-color));
-        }
-
-        &__fract {
-            color: var(--currency-amount-fract-color, var(--currency-amount-color));
-        }
-    }
-}
+.trm {
+    --currency-color: var(--color-base-350);
+    --currency-amount-color: black;
+    &-currency {
+        color: var(--currency-color);
+        word-break: keep-all;
+        text-transform: none;
+    }
+
+    &-amount {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        word-break: break-word;
+        white-space: nowrap;
+        font-weight: 500;
+
+        &__value {
+            margin-right: 2px;
+            white-space: nowrap;
+            color: var(--currency-amount-color);
+        }
+
+        &__int {
+            color: var(--currency-amount-int-color, var(--currency-amount-color));
+        }
+
+        &__fract {
+            color: var(--currency-amount-fract-color, var(--currency-amount-color));
+        }
+    }
+}

package/scss/datepicker.scss

@@ -1,19 +1,19 @@
-.trm {
-    .mat-datepicker-toggle {
-        .mdc-icon-button.mat-mdc-icon-button [matdatepickertoggleicon] {
-            height: 24px;
-            width: 24px;
-            background-color: var(--color-base-300);
-        }
-
-        &.mat-datepicker-toggle-active {
-            .mdc-icon-button.mat-mdc-icon-button [matdatepickertoggleicon] {
-                background-color: var(--color-base-350) !important;
-            }
-        }
-    }
-
-    .mat-calendar-body-cell-content.mat-focus-indicator.mat-calendar-body-selected {
-        color: white;
-    }
-}
+.trm {
+    .mat-datepicker-toggle {
+        .mdc-icon-button.mat-mdc-icon-button [matdatepickertoggleicon] {
+            height: 24px;
+            width: 24px;
+            background-color: var(--color-base-300);
+        }
+
+        &.mat-datepicker-toggle-active {
+            .mdc-icon-button.mat-mdc-icon-button [matdatepickertoggleicon] {
+                background-color: var(--color-base-350) !important;
+            }
+        }
+    }
+
+    .mat-calendar-body-cell-content.mat-focus-indicator.mat-calendar-body-selected {
+        color: white;
+    }
+}

package/scss/fonts.scss

@@ -1,18 +1,18 @@
-@use './mixins' as mix;
-.trm {
-    * {
-        -webkit-font-smoothing: antialiased;
-        -webkit-tap-highlight-color: transparent;
-        -moz-osx-font-smoothing: auto;
-        font-family: 'Inter', sans-serif;
-    }
-
-    h5 {
-        @include mix.font(18px, 28px, 500);
-        margin: 0;
-    }
-
-    .text--warn {
-        color: var(--color-orange-500) !important;
-    }
-}
+@use './mixins' as mix;
+.trm {
+    * {
+        -webkit-font-smoothing: antialiased;
+        -webkit-tap-highlight-color: transparent;
+        -moz-osx-font-smoothing: auto;
+        font-family: 'Inter', sans-serif;
+    }
+
+    h5 {
+        @include mix.font(18px, 28px, 500);
+        margin: 0;
+    }
+
+    .text--warn {
+        color: var(--color-orange-500) !important;
+    }
+}

package/scss/icons.scss

@@ -1,9 +1,9 @@
-@use 'mixins';
-
-@use 'flag-icons/sass/flag-icons';
-@include mixins.load_PS_icons();
-@include mixins.load_currency_icons();
-
-@include mixins.additional-flag-icon(ab);
-@include mixins.additional-flag-icon(os);
-@include mixins.additional-flag-icon(other);
+@use 'mixins';
+
+@use 'flag-icons/sass/flag-icons';
+@include mixins.load_PS_icons();
+@include mixins.load_currency_icons();
+
+@include mixins.additional-flag-icon(ab);
+@include mixins.additional-flag-icon(os);
+@include mixins.additional-flag-icon(other);

package/scss/images.scss

@@ -1,43 +1,43 @@
-@use './variables' as vars;
-@use './mixins' as mix;
-
-.template-footer__logo {
-  @include mix.setBgImage(url(#{vars.$trm-tmpl-assets-base-url}/svg/pci-dss.svg), 113px, 42px);
-}
-
-.c-status {
-  &--progress {
-    .c-status__img {
-      background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/status-wait.svg);
-    }
-  }
-
-  &--failed {
-    .c-status__img {
-      background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/status-error.svg);
-    }
-  }
-
-  &__img {
-
-    @include mix.setBgImage(url(#{vars.$trm-tmpl-assets-base-url}/svg/status-success.svg), 56px, 56px);
-
-  }
-}
-
-.date {
-  &__toggle {
-    &Icon {
-      mask-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/datepicker.svg);
-    }
-  }
-}
-
-
-.trm-select {
-  &-value {
-    &__arrow {
-      mask-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/arrow_down.svg);
-    }
-  }
-}
+@use './variables' as vars;
+@use './mixins' as mix;
+
+.template-footer__logo {
+  @include mix.setBgImage(url(#{vars.$trm-tmpl-assets-base-url}/svg/pci-dss.svg), 113px, 42px);
+}
+
+.c-status {
+  &--progress {
+    .c-status__img {
+      background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/status-wait.svg);
+    }
+  }
+
+  &--failed {
+    .c-status__img {
+      background-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/status-error.svg);
+    }
+  }
+
+  &__img {
+
+    @include mix.setBgImage(url(#{vars.$trm-tmpl-assets-base-url}/svg/status-success.svg), 56px, 56px);
+
+  }
+}
+
+.date {
+  &__toggle {
+    &Icon {
+      mask-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/datepicker.svg);
+    }
+  }
+}
+
+
+.trm-select {
+  &-value {
+    &__arrow {
+      mask-image: url(#{vars.$trm-tmpl-assets-base-url}/svg/arrow_down.svg);
+    }
+  }
+}

package/scss/index.scss

@@ -1,12 +1,12 @@
-@use 'theme';
-@use 'fonts';
-@use 'base';
-@use 'currency';
-@use 'spinner';
-@use 'utils';
-@use 'btn';
-@use 'input';
-@use 'icons';
-@use 'skeleton';
-@use 'validation';
-@use 'datepicker';
+@use 'theme';
+@use 'fonts';
+@use 'base';
+@use 'currency';
+@use 'spinner';
+@use 'utils';
+@use 'btn';
+@use 'input';
+@use 'icons';
+@use 'skeleton';
+@use 'validation';
+@use 'datepicker';

package/scss/input.scss

@@ -1,60 +1,60 @@
-@use './mixins' as mix;
-
-.trm {
-    --trm-input-border-color: var(--color-base-200);
-    --trm-input-border-color--hover: var(--color-base-250);
-    --trm-input-border-color--focus: var(--color-primary-500);
-
-
-    --trm-input-border-color--disabled: var(--color-base-200);
-    --trm-input-bg-color--disabled: var(--color-base-50);
-}
-
-.trm-input {
-    background: #FFFFFF;
-    border-radius: 10px;
-    &.trm-form-field {
-        -webkit-appearance: none;
-        border: 1px solid var(--trm-input-border-color);
-        border-radius: 10px;
-        width: 100%;
-        box-sizing: border-box;
-
-        min-height: 46px;
-        padding: 12px 20px;
-        @include mix.font(14px, 20px, 500);
-        @include mix.tablet {
-            min-height: 50px;
-            padding: 13px 20px;
-            @include mix.font(15px, 22px, 500);
-        }
-        &:hover {
-            border-color: var(--trm-input-border-color--hover);
-        }
-
-        &:focus, &:active {
-            box-shadow: 0 0 0 2px var(--trm-input-border-color--focus);
-            outline: none;
-        }
-
-        &.ng-invalid.ng-touched.ng-dirty {
-            --trm-input-border-color: var(--color-red-500);
-            --trm-input-border-color--hover: var(--color-red-500);
-            --trm-input-border-color--focus: transparent;
-        }
-    }
-}
-
-.trm-label {
-    @include mix.font(15px, 18px, 500);
-    margin-bottom: 10px;
-    display: block;
-}
-
-::-webkit-input-placeholder {
-    color: var(--color-base-350);
-}
-
-::placeholder {
-    color: var(--color-base-350);
-}
+@use './mixins' as mix;
+
+.trm {
+    --trm-input-border-color: var(--color-base-200);
+    --trm-input-border-color--hover: var(--color-base-250);
+    --trm-input-border-color--focus: var(--color-primary-500);
+
+
+    --trm-input-border-color--disabled: var(--color-base-200);
+    --trm-input-bg-color--disabled: var(--color-base-50);
+}
+
+.trm-input {
+    background: #FFFFFF;
+    border-radius: 10px;
+    &.trm-form-field {
+        -webkit-appearance: none;
+        border: 1px solid var(--trm-input-border-color);
+        border-radius: 10px;
+        width: 100%;
+        box-sizing: border-box;
+
+        min-height: 46px;
+        padding: 12px 20px;
+        @include mix.font(14px, 20px, 500);
+        @include mix.tablet {
+            min-height: 50px;
+            padding: 13px 20px;
+            @include mix.font(15px, 22px, 500);
+        }
+        &:hover {
+            border-color: var(--trm-input-border-color--hover);
+        }
+
+        &:focus, &:active {
+            box-shadow: 0 0 0 2px var(--trm-input-border-color--focus);
+            outline: none;
+        }
+
+        &.ng-invalid.ng-touched.ng-dirty {
+            --trm-input-border-color: var(--color-red-500);
+            --trm-input-border-color--hover: var(--color-red-500);
+            --trm-input-border-color--focus: transparent;
+        }
+    }
+}
+
+.trm-label {
+    @include mix.font(15px, 18px, 500);
+    margin-bottom: 10px;
+    display: block;
+}
+
+::-webkit-input-placeholder {
+    color: var(--color-base-350);
+}
+
+::placeholder {
+    color: var(--color-base-350);
+}