@kms-ngx-ui/presentational 18.0.1 → 18.0.3

package/src/lib/ui/back-to-top/back-to-top.component.scss

@@ -10,16 +10,21 @@
     transition: all 0.2s ease-in-out;
     text-align: center;
     cursor: pointer;
-    align-items: center;
     z-index: 999999;
     border-radius: 50%;
     width: $size;
     height: $size;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 
     &-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       border-radius: 50%;
-      background-color: var(--kms-primary-100);
-      border: 2px solid white;
+      background-color: var(--kms-primary);
+      border: 2px solid var(--kms-white);
       width: calc(#{$size} - 4px);
       height: calc(#{$size} - 4px);
     }

package/src/lib/ui/card/card.component.scss

@@ -2,8 +2,8 @@
   .card {
     --card-shadow-color: var(--kms-tertiary-500);
     --card-shadow: 0px 3px 4px 0px var(--card-shadow-color);
-    --card-background-color: var(--kms-white)
-    --card-hover-border-color: var(--kms-black);
+    --card-background-color: var(--kms-white);
+    --card-hover-border-color: var(--kms-secondary);
     --card-image-height: 180px;
 
     overflow: hidden;
@@ -18,12 +18,12 @@
 
     &.hoverEffect {
       &:hover {
-        outline: 1px solid var(--kms-black);
+        outline: 1px solid var(--card-hover-border-color);
       }
     }
 
     &-image {
-      background-color: var(--card-hover-border-color);
+      background-color: var(--kms-white);
       height: var(--card-image-height);
       background-size: cover;
       justify-content: center;

package/src/lib/ui/icon/icon.component.scss

@@ -1,110 +1,48 @@
 @import '../../../styles/mixins.scss';
 
 @mixin icon-theme() {
-  .icon {
-    display: inline-block;
-    height: inherit;
-    outline-color: transparent;
-    transition: transform 0.2s ease-in-out;
-    position: relative;
-    @include iconSize(100%);
-
-    &.size {
-      &-full {
-        @include iconSize(100%);
-      }
-      &-16 {
-        @include iconSize(16px);
-      }
-      &-20 {
-        @include iconSize(20px);
-      }
-      &-32 {
-        @include iconSize(32px);
-      }
-      &-64 {
-        @include iconSize(64px);
-      }
-      &-128 {
-        @include iconSize(64px);
-      }
-      &-256 {
-        @include iconSize(256px);
-      }
-    }
-
-    svg,
-    use {
-      fill: black;
+  kms-icon {
+    display: inline-flex;
+    vertical-align: sub;
+
+    .icon {
+      display: flex;
+      height: inherit;
+      outline-color: transparent;
+      transition: transform 0.2s ease-in-out;
       position: relative;
-      transform: translate(0, 0) !important;
-    }
-
-    &_active {
-      cursor: pointer;
-      fill: var(--kms-primary-100) !important;
 
-      &:hover,
-      &:focus {
-        fill: var(--kms-primary-200) !important;
-      }
-    }
-
-    &.color {
-      &-primary {
-        color: var(--kms-primary-100);
-        svg use {
-          fill: var(--kms-primary-100);
+      &.color {
+        &-primary {
+          color: var(--kms-primary-100);
         }
-      }
-      &-accent {
-        color: var(--kms-tertiary-100);
-        svg use {
-          fill: var(--kms-tertiary-100);
+        &-accent {
+          color: var(--kms-tertiary-100);
         }
-      }
-      &-disabled {
-        color: var(--kms-disabled);
-        svg use {
-          fill: var(--kms-disabled);
+        &-disabled {
+          color: var(--kms-disabled);
         }
-      }
-      &-white {
-        color: var(--kms-white);
-        svg use {
-          fill: var(--kms-white);
+        &-white {
+          color: var(--kms-white);
         }
-      }
-
-      &-warn {
-        color: var(--kms-error);
-        svg use {
-          fill: var(--kms-error);
+        &-warn {
+          color: var(--kms-error);
         }
-      }
-      &-success {
-        color: var(--kms-success);
-        svg use {
-          fill: var(--kms-success);
+        &-success {
+          color: var(--kms-success);
         }
-      }
-      &-info {
-        color: var(--kms-alert);
-        svg use {
-          fill: var(--kms-alert);
+        &-info {
+          color: var(--kms-alert);
         }
-      }
-      &-grey {
-        color: var(--kms-tertiary);
-        svg use {
-          fill: var(--kms-tertiary);
+        &-grey {
+          color: var(--kms-tertiary);
         }
       }
-    }
 
-    // IE 11 with win7 fix that caused an application freeze.
-    svg use {
-      pointer-events: none;
+      // IE 11 with win7 fix that caused an application freeze.
+      svg use {
+        pointer-events: none;
+      }
     }
   }
 }

package/src/lib/ui/kms-accordion-item/kms-accordion-item.component.scss

@@ -1,85 +1,53 @@
 @mixin kms-accordion-item-theme() {
-  .accordion-item {
-    &.showFlat {
+  .kms-accordion {
+    --mat-expansion-container-background-color: var(--kms-white);
+    &--flat {
       background-color: transparent;
       box-shadow: none !important;
       border-radius: unset !important;
-      border-top: solid rgba(189, 188, 187, 0.5);
+      border-top: solid var(--kms-tertiary-600);
     }
-    &.isSmall {
-      .accordion-item-header {
+    &.kms-accordion--small {
+      .kms-accordion__header {
         height: 42px;
         padding-top: 0;
         padding-bottom: 0;
+      }
 
-        .accordion-item-title {
-          font-size: 16px !important;
-          font-weight: 300;
-        }
-
-        .accordion-item-header-icon-wrapper {
-          kms-icon {
-            svg {
-              height: 16px;
-              width: 16px;
-            }
-          }
-        }
+      .kms-accordion__title {
+        font-size: 16px !important;
+        font-weight: 300;
       }
     }
 
-    .accordion-item-header {
+    .kms-accordion__header {
       height: auto;
       padding-top: $base-spacing-hoz;
       padding-bottom: $base-spacing-hoz;
+    }
 
-      .accordion-item-title {
-        text-align: left;
-        font: 600 22px/38px var(--fontName-text);
-        letter-spacing: 0.53px;
-        color: var(--gray09);
-        margin: 0px;
+    &__title {
+      text-align: left;
+      letter-spacing: 0.53px;
+      color: var(--kms-black);
+      margin: 0px;
 
-        @media (max-width: $responsive-breakpoint) {
-          font: 15 18px/23px var(--fontName-text);
-          letter-spacing: 0.29px;
-          color: var(--gray10);
-          //height: 3em;
-        }
+      span {
+        display: inline;
 
-        span {
-          display: inline;
-
-          @media (max-width: $responsive-breakpoint) {
-            display: block;
-          }
+        @media (max-width: $responsive-breakpoint) {
+          display: block;
         }
       }
+    }
 
-      .accordion-item-header-icon-wrapper {
-        align-self: center;
-
-        kms-icon {
-          svg {
-            height: 22px;
-            width: 22px;
-            use {
-              fill: var(--kms-primary-100);
-            }
-          }
-        }
-
-        &-desktop {
-          display: block;
-          @media (max-width: $responsive-breakpoint) {
-            display: none;
-          }
-        }
+    &__header-icon-wrapper {
+      align-self: center;
 
-        &-mobile {
-          display: none;
-          @media (max-width: $responsive-breakpoint) {
-            display: block;
+      kms-icon {
+        svg {
+          use {
+            fill: var(--kms-primary);
           }
         }
       }

package/src/lib/ui/password/password.component.scss

@@ -13,13 +13,6 @@
       display: flex;
       align-items: center;
       gap: 8px;
-
-      kms-icon {
-        display: flex;
-        .icon {
-          display: flex;
-        }
-      }
     }
   }
 }

package/src/lib/ui/slide-toggle/slide-toggle.component.scss

@@ -11,7 +11,6 @@
         font-weight: bold;
       }
     }
-
     .mdc-switch {
       --mdc-switch-selected-focus-track-color: var(--kms-tertiary-500);
       --mdc-switch-selected-hover-track-color: var(--kms-tertiary-500);
@@ -25,6 +24,7 @@
       --mat-switch-unselected-handle-horizontal-margin: 0
       --mat-switch-selected-handle-size: 16px;
       --mat-switch-selected-handle-size: 16px;
+      --mat-switch-unselected-handle-size: 16px !important;
       --mdc-switch-track-height: 16px;
       width: 40px;
 

package/src/lib/ui/tooltip-icon/tooltip-icon.component.scss

@@ -1,5 +1,9 @@
 @mixin tooltip-icon-theme() {
-  .kms-tooltip-icon {
+  kms-tooltip-icon {
     display: flex;
+    align-items: center;
+    .kms-tooltip-icon {
+      display: flex;
+    }
   }
 }

package/esm2022/lib/models/iconSize.enum.mjs

@@ -1,17 +0,0 @@
-/**
- * @copyright KMS GmbH
- */
-export var IconSize;
-(function (IconSize) {
-    IconSize["FULLSIZE"] = "size-full";
-    IconSize["TINY"] = "size-16";
-    IconSize["SMALLER"] = "size-20";
-    IconSize["SMALL"] = "size-32";
-    IconSize["MEDIUM"] = "size-64";
-    IconSize["LARGE"] = "size-128";
-    IconSize["XL"] = "size-256";
-    IconSize["XXL"] = "size-512";
-    IconSize["XXXL"] = "size-1024";
-    IconSize["NONE"] = "NONE";
-})(IconSize || (IconSize = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvblNpemUuZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2ttcy1uZ3gtdWktcHJlc2VudGF0aW9uYWwvc3JjL2xpYi9tb2RlbHMvaWNvblNpemUuZW51bS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILE1BQU0sQ0FBTixJQUFZLFFBV1g7QUFYRCxXQUFZLFFBQVE7SUFDbEIsa0NBQXNCLENBQUE7SUFDdEIsNEJBQWdCLENBQUE7SUFDaEIsK0JBQW1CLENBQUE7SUFDbkIsNkJBQWlCLENBQUE7SUFDakIsOEJBQWtCLENBQUE7SUFDbEIsOEJBQWtCLENBQUE7SUFDbEIsMkJBQWUsQ0FBQTtJQUNmLDRCQUFnQixDQUFBO0lBQ2hCLDhCQUFrQixDQUFBO0lBQ2xCLHlCQUFhLENBQUE7QUFDZixDQUFDLEVBWFcsUUFBUSxLQUFSLFFBQVEsUUFXbkIiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEBjb3B5cmlnaHQgS01TIEdtYkhcbiAqL1xuXG5leHBvcnQgZW51bSBJY29uU2l6ZSB7XG4gIEZVTExTSVpFID0gJ3NpemUtZnVsbCcsXG4gIFRJTlkgPSAnc2l6ZS0xNicsXG4gIFNNQUxMRVIgPSAnc2l6ZS0yMCcsXG4gIFNNQUxMID0gJ3NpemUtMzInLFxuICBNRURJVU0gPSAnc2l6ZS02NCcsXG4gIExBUkdFID0gJ3NpemUtMTI4JyxcbiAgWEwgPSAnc2l6ZS0yNTYnLFxuICBYWEwgPSAnc2l6ZS01MTInLFxuICBYWFhMID0gJ3NpemUtMTAyNCcsXG4gIE5PTkUgPSAnTk9ORScsXG59XG4iXX0=

package/esm2022/lib/ui/icon/iconSize.enum.mjs

@@ -1,29 +0,0 @@
-/**
- * @copyright KMS GmbH
- */
-export var IconSize;
-(function (IconSize) {
-    IconSize["FULLSIZE"] = "size-full";
-    IconSize["TINY"] = "size-16";
-    IconSize["SMALLER"] = "size-20";
-    IconSize["SMALL"] = "size-32";
-    IconSize["MEDIUM"] = "size-64";
-    IconSize["LARGE"] = "size-128";
-    IconSize["XL"] = "size-256";
-    IconSize["XXL"] = "size-512";
-    IconSize["XXXL"] = "size-1024";
-    IconSize["NONE"] = "NONE";
-})(IconSize || (IconSize = {}));
-export var IconSizePx;
-(function (IconSizePx) {
-    IconSizePx[IconSizePx["TINY"] = 16] = "TINY";
-    IconSizePx[IconSizePx["SMALLER"] = 20] = "SMALLER";
-    IconSizePx[IconSizePx["SMALL"] = 32] = "SMALL";
-    IconSizePx[IconSizePx["MEDIUM"] = 64] = "MEDIUM";
-    IconSizePx[IconSizePx["LARGE"] = 128] = "LARGE";
-    IconSizePx[IconSizePx["XL"] = 256] = "XL";
-    IconSizePx[IconSizePx["XXL"] = 512] = "XXL";
-    IconSizePx[IconSizePx["XXXL"] = 1024] = "XXXL";
-})(IconSizePx || (IconSizePx = {}));
-export const IconSizesArr = [16, 20, 32, 64, 128, 256, 512, 1024];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvblNpemUuZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2ttcy1uZ3gtdWktcHJlc2VudGF0aW9uYWwvc3JjL2xpYi91aS9pY29uL2ljb25TaXplLmVudW0udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxNQUFNLENBQU4sSUFBWSxRQVdYO0FBWEQsV0FBWSxRQUFRO0lBQ2xCLGtDQUFzQixDQUFBO0lBQ3RCLDRCQUFnQixDQUFBO0lBQ2hCLCtCQUFtQixDQUFBO0lBQ25CLDZCQUFpQixDQUFBO0lBQ2pCLDhCQUFrQixDQUFBO0lBQ2xCLDhCQUFrQixDQUFBO0lBQ2xCLDJCQUFlLENBQUE7SUFDZiw0QkFBZ0IsQ0FBQTtJQUNoQiw4QkFBa0IsQ0FBQTtJQUNsQix5QkFBYSxDQUFBO0FBQ2YsQ0FBQyxFQVhXLFFBQVEsS0FBUixRQUFRLFFBV25CO0FBRUQsTUFBTSxDQUFOLElBQVksVUFTWDtBQVRELFdBQVksVUFBVTtJQUNwQiw0Q0FBUyxDQUFBO0lBQ1Qsa0RBQVksQ0FBQTtJQUNaLDhDQUFVLENBQUE7SUFDVixnREFBVyxDQUFBO0lBQ1gsK0NBQVcsQ0FBQTtJQUNYLHlDQUFRLENBQUE7SUFDUiwyQ0FBUyxDQUFBO0lBQ1QsOENBQVcsQ0FBQTtBQUNiLENBQUMsRUFUVyxVQUFVLEtBQVYsVUFBVSxRQVNyQjtBQUVELE1BQU0sQ0FBQyxNQUFNLFlBQVksR0FBRyxDQUFDLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsR0FBRyxFQUFFLEdBQUcsRUFBRSxJQUFJLENBQUMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogQGNvcHlyaWdodCBLTVMgR21iSFxuICovXG5cbmV4cG9ydCBlbnVtIEljb25TaXplIHtcbiAgRlVMTFNJWkUgPSAnc2l6ZS1mdWxsJyxcbiAgVElOWSA9ICdzaXplLTE2JyxcbiAgU01BTExFUiA9ICdzaXplLTIwJyxcbiAgU01BTEwgPSAnc2l6ZS0zMicsXG4gIE1FRElVTSA9ICdzaXplLTY0JyxcbiAgTEFSR0UgPSAnc2l6ZS0xMjgnLFxuICBYTCA9ICdzaXplLTI1NicsXG4gIFhYTCA9ICdzaXplLTUxMicsXG4gIFhYWEwgPSAnc2l6ZS0xMDI0JyxcbiAgTk9ORSA9ICdOT05FJyxcbn1cblxuZXhwb3J0IGVudW0gSWNvblNpemVQeCB7XG4gIFRJTlkgPSAxNixcbiAgU01BTExFUiA9IDIwLFxuICBTTUFMTCA9IDMyLFxuICBNRURJVU0gPSA2NCxcbiAgTEFSR0UgPSAxMjgsXG4gIFhMID0gMjU2LFxuICBYWEwgPSA1MTIsXG4gIFhYWEwgPSAxMDI0LFxufVxuXG5leHBvcnQgY29uc3QgSWNvblNpemVzQXJyID0gWzE2LCAyMCwgMzIsIDY0LCAxMjgsIDI1NiwgNTEyLCAxMDI0XTtcbiJdfQ==

package/lib/models/iconSize.enum.d.ts

@@ -1,15 +0,0 @@
-/**
- * @copyright KMS GmbH
- */
-export declare enum IconSize {
-    FULLSIZE = "size-full",
-    TINY = "size-16",
-    SMALLER = "size-20",
-    SMALL = "size-32",
-    MEDIUM = "size-64",
-    LARGE = "size-128",
-    XL = "size-256",
-    XXL = "size-512",
-    XXXL = "size-1024",
-    NONE = "NONE"
-}

package/lib/ui/icon/iconSize.enum.d.ts

@@ -1,26 +0,0 @@
-/**
- * @copyright KMS GmbH
- */
-export declare enum IconSize {
-    FULLSIZE = "size-full",
-    TINY = "size-16",
-    SMALLER = "size-20",
-    SMALL = "size-32",
-    MEDIUM = "size-64",
-    LARGE = "size-128",
-    XL = "size-256",
-    XXL = "size-512",
-    XXXL = "size-1024",
-    NONE = "NONE"
-}
-export declare enum IconSizePx {
-    TINY = 16,
-    SMALLER = 20,
-    SMALL = 32,
-    MEDIUM = 64,
-    LARGE = 128,
-    XL = 256,
-    XXL = 512,
-    XXXL = 1024
-}
-export declare const IconSizesArr: number[];