@kms-ngx-ui/presentational 16.2.0 → 16.3.1

package/src/lib/ui/image-slider/image-slider.component.scss

@@ -1,227 +1,220 @@
 @mixin image-slider-theme() {
-  // TODO
-  $responsive-breakpoint1: 996px;
-  $responsive-breakpoint-1024: 1024px;
-  $responsive-breakpoint2: 1200px;
-  $responsive-breakpoint3: 1400px;
-  $color-secondary: var(--primaryColor);
-  $color-disabled: var(--gray04);
-  $color-image-background: white;
-  $img-size: 796px;
-
-  .all-wrapper {
-    position: relative;
-
-    .default-image {
-      visibility: hidden;
-    }
-  }
-
-  .swiper-bigImage {
-    @include backgroundContains();
-    background-color: $color-image-background;
+    // TODO
+    $responsive-breakpoint1: 996px;
+    $responsive-breakpoint-1024: 1024px;
+    $responsive-breakpoint2: 1200px;
+    $responsive-breakpoint3: 1400px;
+    $color-secondary:        var(--primaryColor);
+    $color-disabled:         var(--gray04);
+    $color-image-background: white;
+    $img-size: 796px; 
+
+    .all-wrapper{
+        position: relative;
 
-    width: $img-size;
-    height: auto;
-    padding-top: 75%; /* 4:3 Aspect Ratio */
-    position: relative;
+        .default-image {
 
-    @media (max-width: $responsive-breakpoint3) {
-      width: 100%;
+            visibility: hidden;
+        }
     }
-  }
 
-  .swiper-holder {
-    margin: 18px 0;
-    width: 796px;
-    @media (max-width: $responsive-breakpoint3) {
-      width: 100%;
-    }
+    .swiper-bigImage{
+        @include backgroundContains();
+        background-color: $color-image-background;
 
-    .swiper-button {
-      &-next,
-      &-prev,
-      &-next2,
-      &-prev2 {
-        position: absolute;
-        width: 10px;
-        height: 20px;
-        top: calc((100% - 140px) / 2);
-        transform: translate(0, 50%);
-        color: $color-secondary;
-        &.swiper-button-disabled {
-          display: none;
-        }
-        &:after {
-          font-size: 20px;
-        }
-      }
-
-      &-next,
-      &-prev {
-        color: $color-secondary !important;
-        background: transparent;
-        border: none;
-      }
-
-      &-next,
-      &-next2 {
-        right: 20px;
-      }
-      &-prev,
-      &-prev2 {
-        left: 20px;
-      }
-
-      &-next,
-      &-prev {
-        top: auto;
-        bottom: calc((140px) / 2);
-      }
-
-      @media (max-width: $responsive-breakpoint2) {
-        &-next {
-          right: 20px;
-        }
-        &-prev {
-          left: 20px;
-        }
-      }
-      @media (max-width: $responsive-breakpoint-1024) {
-        &-next {
-          right: 0;
-        }
-        &-prev {
-          left: 0;
-        }
-      }
-      @media (max-width: $responsive-breakpoint1) {
-        &-next {
-          right: 10vw;
-        }
-        &-prev {
-          left: 10vw;
+        width: $img-size;
+        height: auto;
+        padding-top: 75%; /* 4:3 Aspect Ratio */
+        position: relative;
+        
+        @media (max-width: $responsive-breakpoint3) {
+            width: 100%;
         }
-      }
-    }
-  }
-
-  swiper {
-    width: 560px;
-    margin: 0 auto;
-    position: relative;
-    @media (max-width: $responsive-breakpoint-1024) {
-      width: 400px;
-    }
-    @media (max-width: $responsive-breakpoint1) {
-      width: 60vw;
     }
 
-    .swiper-wrapper {
-      display: flex;
+    .swiper-holder{
+        margin: 18px 0;
+        width: 796px;
+        @media (max-width: $responsive-breakpoint3) {
+            width: 100%;
+        }
 
-      .swiper-slide {
-        flex-basis: 0;
-        position: relative;
+        .swiper-button{
+            &-next, &-prev,
+            &-next2, &-prev2{
+                position: absolute;
+                width: 10px;
+                height: 20px;
+                top: calc((100% - 140px) / 2);
+                transform: translate(0, 50%);
+                color: $color-secondary;
+                &.swiper-button-disabled{
+                    display: none;
+                }
+                &:after{
+                    font-size: 20px;
+                }
+            }
+        
+            &-next,
+            &-next2{
+                right: 20px;
+            }
+            &-prev,
+            &-prev2{
+                left: 20px;
+            }
 
-        .img {
-          background-repeat: no-repeat;
-          background-size: contain;
-          background-position: center center;
-
-          width: 158px;
-          height: auto;
-          padding-top: 75%; /* 4:3 Aspect Ratio */
-
-          cursor: pointer;
-          border: 1px solid #dbdbda;
-          border-radius: var(--defaultBorderRadius);
-          @media (max-width: $responsive-breakpoint-1024) {
-            width: 100px;
-          }
-          @media (max-width: $responsive-breakpoint1) {
-            width: 20vw;
-          }
-          &.active {
-            border: 1px solid var(--grey08);
-            background-color: var(--gray06);
-          }
-        }
+            &-next, &-prev{
+                top: auto;
+                bottom: calc((140px)/ 2);
+            }
 
-        button {
-          position: absolute;
-          width: 15px;
-          height: 15px;
-          right: 5px;
-          top: 5px;
-          background: none;
-
-          .icon {
-            width: 15px !important;
-            height: 15px !important;
-
-            svg {
-              width: 15px !important;
-              height: 15px !important;
+            @media (max-width: $responsive-breakpoint2) {
+                &-next{
+                    right: 20px;
+                }
+                &-prev{
+                    left: 20px;
+                }
+            }
+            @media (max-width: $responsive-breakpoint-1024) {
+
+                &-next{
+                    right: 0;
+                }
+                &-prev{
+                    left: 0;
+                }
+            }
+            @media (max-width: $responsive-breakpoint1) {
+                &-next{
+                    right: 10vw;
+                }
+                &-prev{
+                    left: 10vw;
+                }
             }
-          }
-        }
-      }
-      .cdk-drag-preview {
-        box-sizing: border-box;
-        border-radius: var(--defaultBorderRadius);
-        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-          0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-      }
-
-      .cdk-drag-placeholder {
-        opacity: 0.3;
-        border: 1px solid var(--grey07);
-        background-color: var(--gray05);
-      }
-
-      .cdk-drag-animating {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-      }
-
-      .swiper-slide:first-child:not(.cdk-drag-disabled) {
-        .img {
-          border: solid var(--primaryColor);
-          border-radius: 8px;
         }
+    }
 
-        .default-image {
-          visibility: visible !important;
-          text-align: center;
-          font: normal normal normal 14px/25px var(--fontName-text03);
-          letter-spacing: 0.22px;
-          color: var(--gray04);
-          opacity: 1;
-        }
-      }
+        swiper{
+            width: 560px;
+            margin: 0 auto;
+            position: relative;
+            @media (max-width: $responsive-breakpoint-1024) {
+                width: 400px;
+            }
+            @media (max-width: $responsive-breakpoint1) {
+                width: 60vw;
+            }
 
-      .swiper-wrapper.cdk-drop-list-dragging
-        .swiper-slide:not(.cdk-drag-placeholder) {
-        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-      }
-    }
+            .swiper-wrapper {
+                display: flex;
+
+                .swiper-slide {
+                    flex-basis: 0;
+                    position: relative;
+
+                    .img {
+                        background-repeat: no-repeat;
+                        background-size: contain;
+                        background-position: center center;
+
+                        width: 158px;
+                        height: auto;
+                        padding-top: 75%; /* 4:3 Aspect Ratio */
+                        
+                        cursor: pointer;
+                        border: 1px solid #dbdbda;
+                        border-radius: var(--defaultBorderRadius);
+                        @media (max-width: $responsive-breakpoint-1024) {
+                            width: 100px;
+                        }
+                        @media (max-width: $responsive-breakpoint1) {
+                            width: 20vw;
+                        }
+                        &.active{
+                            border: 1px solid var(--grey08);
+                            background-color: var(--gray06);
+                        }
+                    }
+
+                    button {
+                        position: absolute;
+                        width: 15px;
+                        height: 15px;
+                        right: 5px;
+                        top: 5px;
+                        background: none;
+
+                        .icon{
+                            width: 15px !important;
+                            height: 15px !important;
+                            
+                            svg {
+                                width: 15px !important;
+                                height: 15px !important;
+                            }
+                        }
+                    }
+                }
+                .cdk-drag-preview {
+                    box-sizing: border-box;
+                    border-radius: var(--defaultBorderRadius);
+                    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+                                0 8px 10px 1px rgba(0, 0, 0, 0.14),
+                                0 3px 14px 2px rgba(0, 0, 0, 0.12);
+                }
+        
+                .cdk-drag-placeholder {
+                    opacity: 0.3;
+                    border: 1px solid var(--grey07);
+                    background-color: var(--gray05);
+                }
+        
+                .cdk-drag-animating {
+                    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+                }
+        
+                .swiper-slide:first-child:not(.cdk-drag-disabled)
+                {
+                    .img {
+                        border: solid var(--primaryColor);
+                        border-radius: 8px;
+                    }
+
+                    .default-image {
+                        visibility: visible !important;
+                        text-align: center;
+                        font: normal normal normal 14px/25px var(--fontName-text03);
+                        letter-spacing: 0.22px;
+                        color: var(--gray04);;
+                        opacity: 1;
+                    }
+                }
+        
+                .swiper-wrapper.cdk-drop-list-dragging .swiper-slide:not(.cdk-drag-placeholder) {
+                    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+                }
+            }
 
-    .swiper-container {
-      width: 100%;
-      overflow-y: hidden;
-      overflow-x: hidden;
-    }
-  }
-
-  .cdk-drag-preview,
-  .cdk-drag-dragging {
-    &.swiper-slide {
-      .default-image {
-        visibility: hidden;
-      }
-      button {
-        visibility: hidden;
-      }
+            .swiper-container {
+                width: 100%;
+                overflow-y: hidden;
+                overflow-x: hidden;
+            }
+        }
+
+    .cdk-drag-preview,
+    .cdk-drag-dragging {
+        &.swiper-slide {
+            .default-image{
+                visibility: hidden;
+            }
+            button {
+                visibility: hidden;
+            }
+        }
     }
-  }
-}
+}

package/src/lib/ui/yes-no-radiogroup/yes-no-radiogroup.component.scss

@@ -0,0 +1,17 @@
+@mixin kms-radiogroup() {
+  .mat-mdc-radio-group {
+    display: flex;
+    .mat-mdc-radio-button {
+      padding-right: 16px;
+      color: var(--primaryColor01);
+
+      &.disabled {
+        color: var(--primaryColor04);
+      }
+    }
+    .mat-radio-button-vertical {
+      display: flex;
+      padding-bottom: 16px;
+    }
+  }
+}

package/src/styles/styles.scss

@@ -1,5 +1,4 @@
 @import 'mixins.scss';
-@import 'animations.scss';
 
 @import '../lib/ui/back-to-top/back-to-top.component';
 @import '../lib/ui/button-with-confirm-dialog/button-with-confirm-dialog.component';
@@ -10,6 +9,7 @@
 @import '../lib/ui/icon/icon.component';
 @import '../lib/ui/image-slider/image-slider.component';
 @import '../lib/ui/kms-accordion-item/kms-accordion-item.component';
+@import '../lib/ui/yes-no-radiogroup/yes-no-radiogroup.component';
 @import '../lib/ui/loader/loader.component';
 @import '../lib/ui/map/map.component';
 @import '../lib/ui/radiobutton/radiobutton.component';
@@ -26,7 +26,8 @@
 @include icon-theme();
 @include image-slider-theme();
 @include kms-accordion-item-theme();
+@include kms-radiogroup();
 @include radiobutton-theme();
 @include time-input-theme();
 @include tooltip-icon-theme();
-@include tooltip-theme();
+@include tooltip-theme();

package/esm2022/lib/directives/size.directive.mjs

@@ -1,21 +0,0 @@
-import { Directive, Input } from '@angular/core';
-import * as i0 from "@angular/core";
-export class SizeDirective {
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.size = '';
-    }
-    ngOnInit() {
-        this.elementRef.nativeElement.style.width = this.size + 'px';
-        this.elementRef.nativeElement.style.height = this.size + 'px';
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.5", type: SizeDirective, selector: "[size]", inputs: { size: "size" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.5", ngImport: i0, type: SizeDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[size]' }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { size: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2l6ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbXMtbmd4LXVpLXByZXNlbnRhdGlvbmFsL3NyYy9saWIvZGlyZWN0aXZlcy9zaXplLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFjLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFHN0QsTUFBTSxPQUFPLGFBQWE7SUFHdEIsWUFBb0IsVUFBc0I7UUFBdEIsZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQUZqQyxTQUFJLEdBQVcsRUFBRSxDQUFDO0lBRW1CLENBQUM7SUFFL0MsUUFBUTtRQUNKLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUM7UUFDN0QsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLE1BQU0sR0FBRyxJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQztJQUNsRSxDQUFDOzhHQVJRLGFBQWE7a0dBQWIsYUFBYTs7MkZBQWIsYUFBYTtrQkFEekIsU0FBUzttQkFBQyxFQUFFLFFBQVEsRUFBRSxRQUFRLEVBQUU7aUdBRXBCLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQERpcmVjdGl2ZSh7IHNlbGVjdG9yOiAnW3NpemVdJyB9KVxuZXhwb3J0IGNsYXNzIFNpemVEaXJlY3RpdmUge1xuICAgIEBJbnB1dCgpIHNpemU6IHN0cmluZyA9ICcnO1xuXG4gICAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7IH1cblxuICAgIG5nT25Jbml0KCkge1xuICAgICAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5zdHlsZS53aWR0aCA9IHRoaXMuc2l6ZSArICdweCc7XG4gICAgICAgIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnN0eWxlLmhlaWdodCA9IHRoaXMuc2l6ZSArICdweCc7XG4gICAgfVxufVxuIl19

package/lib/directives/size.directive.d.ts

@@ -1,10 +0,0 @@
-import { ElementRef } from '@angular/core';
-import * as i0 from "@angular/core";
-export declare class SizeDirective {
-    private elementRef;
-    size: string;
-    constructor(elementRef: ElementRef);
-    ngOnInit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SizeDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SizeDirective, "[size]", never, { "size": { "alias": "size"; "required": false; }; }, {}, never, never, false, never>;
-}

package/src/styles/animations.scss

@@ -1,47 +0,0 @@
-// Animations for element
-@keyframes spinanimation {
-    from {
-        transform: rotate(0deg);
-    }
-
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-.is-rotating{
-    &45 {
-        animation-name: spinanimation;
-        animation-duration: 3000ms;
-        transform: rotate(45deg);
-    }
-
-    &90 {
-        animation-name: spinanimation;
-        animation-duration: 3000ms;
-        transform: rotate(90deg);
-    }
-
-    &180 {
-        animation-name: spinanimation180;
-        animation-duration: 3000ms;
-    }
-
-    &45Anti {
-        animation-name: spinanimation;
-        animation-duration: 3000ms;
-        transform: rotate(-45deg);
-    }
-
-    &90Anti {
-        animation-name: spinanimation;
-        animation-duration: 3000ms;
-        transform: rotate(-90deg);
-    }
-
-    &180Anti {
-        animation-name: spinanimation;
-        animation-duration: 3000ms;
-        transform: rotate(-180deg);
-    }
-}