@kms-ngx-ui/presentational 16.3.1 → 16.3.3

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

@@ -1,220 +1,227 @@
 @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;
+  // 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;
+    }
+  }
 
-        .default-image {
+  .swiper-bigImage {
+    @include backgroundContains();
+    background-color: $color-image-background;
 
-            visibility: hidden;
-        }
-    }
+    width: $img-size;
+    height: auto;
+    padding-top: 75%; /* 4:3 Aspect Ratio */
+    position: relative;
 
-    .swiper-bigImage{
-        @include backgroundContains();
-        background-color: $color-image-background;
+    @media (max-width: $responsive-breakpoint3) {
+      width: 100%;
+    }
+  }
 
-        width: $img-size;
-        height: auto;
-        padding-top: 75%; /* 4:3 Aspect Ratio */
-        position: relative;
-        
-        @media (max-width: $responsive-breakpoint3) {
-            width: 100%;
-        }
+  .swiper-holder {
+    margin: 18px 0;
+    width: 796px;
+    @media (max-width: $responsive-breakpoint3) {
+      width: 100%;
     }
 
-    .swiper-holder{
-        margin: 18px 0;
-        width: 796px;
-        @media (max-width: $responsive-breakpoint3) {
-            width: 100%;
+    .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;
         }
-
-        .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;
-            }
-
-            &-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;
-                }
-            }
+        &: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;
+        }
+      }
+    }
+  }
+
+  swiper {
+    width: 560px;
+    margin: 0 auto;
+    position: relative;
+    @media (max-width: $responsive-breakpoint-1024) {
+      width: 400px;
+    }
+    @media (max-width: $responsive-breakpoint1) {
+      width: 60vw;
     }
 
-        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-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-slide {
+        flex-basis: 0;
+        position: relative;
 
-            .swiper-container {
-                width: 100%;
-                overflow-y: hidden;
-                overflow-x: hidden;
-            }
+        .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);
+          }
         }
 
-    .cdk-drag-preview,
-    .cdk-drag-dragging {
-        &.swiper-slide {
-            .default-image{
-                visibility: hidden;
-            }
-            button {
-                visibility: hidden;
+        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;
+      }
     }
-}
+  }
+}

package/src/styles/animations.scss

@@ -0,0 +1,47 @@
+// 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);
+    }
+}

package/src/styles/styles.scss

@@ -1,4 +1,5 @@
 @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';

package/esm2022/lib/ui/tooltip/tooltip.component.mjs

@@ -1,16 +0,0 @@
-import { Component, Input } from '@angular/core';
-import * as i0 from "@angular/core";
-export class TooltipComponent {
-    constructor() {
-        this.tooltipTitle = "";
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipComponent, selector: "kms-tooltip-element", inputs: { tooltipTitle: "tooltipTitle" }, ngImport: i0, template: "<ng-content></ng-content>", styles: ["[kmsTooltip]{position:relative}\n"] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'kms-tooltip-element', template: "<ng-content></ng-content>", styles: ["[kmsTooltip]{position:relative}\n"] }]
-        }], propDecorators: { tooltipTitle: [{
-                type: Input
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9vbHRpcC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbXMtbmd4LXVpLXByZXNlbnRhdGlvbmFsL3NyYy9saWIvdWkvdG9vbHRpcC90b29sdGlwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2ttcy1uZ3gtdWktcHJlc2VudGF0aW9uYWwvc3JjL2xpYi91aS90b29sdGlwL3Rvb2x0aXAuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBT2pELE1BQU0sT0FBTyxnQkFBZ0I7SUFMN0I7UUFNYSxpQkFBWSxHQUFHLEVBQUUsQ0FBQztLQUM5QjsrR0FGWSxnQkFBZ0I7bUdBQWhCLGdCQUFnQixxR0NQN0IsMkJBQXlCOzs0RkRPWixnQkFBZ0I7a0JBTDVCLFNBQVM7K0JBQ0kscUJBQXFCOzhCQUt0QixZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ2ttcy10b29sdGlwLWVsZW1lbnQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi90b29sdGlwLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi90b29sdGlwLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgVG9vbHRpcENvbXBvbmVudCB7XG4gICAgQElucHV0KCkgdG9vbHRpcFRpdGxlID0gXCJcIjtcbn1cbiIsIjxuZy1jb250ZW50PjwvbmctY29udGVudD4iXX0=

package/lib/ui/tooltip/tooltip.component.d.ts

@@ -1,6 +0,0 @@
-import * as i0 from "@angular/core";
-export declare class TooltipComponent {
-    tooltipTitle: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "kms-tooltip-element", never, { "tooltipTitle": { "alias": "tooltipTitle"; "required": false; }; }, {}, never, ["*"], false, never>;
-}

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

@@ -1,27 +0,0 @@
-@mixin tooltip-theme() {
-    .tooltip {
-        position: absolute;
-        max-width: 400px;
-        font-size: 14px;
-        text-align: left;
-        color: #43403E;
-        padding: 10px 10px;
-        border-radius: var(--defaultBorderRadius);
-        z-index: 1000;
-        background-color: var(--gray07);
-        box-shadow: 0px 3px 6px var(--gray12);
-        
-        display: none;
-
-        b,a,div{
-            margin: 10px 0;
-        }
-    }
-    .tooltip-show {
-        display: block;
-    }
-}
-
-[kmsTooltip]{
-    position: relative;
-}