trm-tmpl 4.0.1 → 5.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trm-tmpl",
-  "version": "4.0.1",
+  "version": "5.0.0",
   "peerDependencies": {
     "@angular/common": ">= 16.0.0",
     "@angular/core": ">= 16.0.0",

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);
+}