mis-crystal-design-system 2.9.7-v14 → 2.9.7-v14-1

package/fesm2020/mis-crystal-design-system-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-tooltip.mjs","sources":["../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.html","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts","../../../projects/mis-components/tooltip/mis-crystal-design-system-tooltip.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\n\n@Component({\n  selector: \"mis-tooltip\",\n  templateUrl: \"./tooltip.component.html\",\n  styleUrls: [\"./tooltip.component.scss\"]\n})\nexport class ToolTipComponent implements OnInit, AfterViewInit {\n  public toolTipText: string = \"\";\n  public toolTipPosition: ITooltipPositions = \"bottom\";\n\n  @ViewChild(\"container\") container: ElementRef;\n\n  constructor() {}\n  ngOnInit() {}\n  ngAfterViewInit() {\n    if (!this.container?.nativeElement) return;\n    if (this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\") {\n      const eleWidth = this.container.nativeElement.getBoundingClientRect();\n      this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n      return;\n    }\n    if (this.toolTipPosition === \"left\") {\n      const eleWidth = this.container.nativeElement.getBoundingClientRect();\n      this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n    }\n  }\n}\n","<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\n  <div id=\"tooltip\">\n    <div id=\"tooltip-text\">{{ toolTipText }}</div>\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'left',\n        'arrow-right': toolTipPosition === 'right',\n        'arrow-top': toolTipPosition === 'top',\n        'arrow-bottom': toolTipPosition === 'bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, ViewContainerRef } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n  selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n  public isToolTipDisplayed: boolean = false;\n  public toolTipText: string = \"\";\n  public toolTipPosition: ITooltipPositions = \"bottom\";\n  private overlayRef: OverlayRef;\n\n  @Input() showOnHover: boolean = true;\n  @Input() set showToolTip(value: boolean) {\n    this.isToolTipDisplayed = value;\n    if (value) this.displayToolTip();\n    else this.hideToolTip();\n  }\n  @Input() set text(value: string) {\n    this.toolTipText = value;\n  }\n  @Input() set position(value: ITooltipPositions) {\n    this.toolTipPosition = value;\n  }\n\n  @HostListener(\"mouseenter\") onMouseEnter() {\n    if (this.showOnHover) this.displayToolTip();\n  }\n  @HostListener(\"mouseleave\") onMouseLeave() {\n    if (this.showOnHover) this.hideToolTip();\n  }\n\n  constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n  ngOnInit() {}\n  ngAfterViewInit() {\n    if (this.isToolTipDisplayed) this.displayToolTip();\n    else this.hideToolTip();\n  }\n\n  displayToolTip() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions(\n        genPositionPairs(\n          {\n            positionX: \"center\",\n            positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n            offsetX: this.positionTooltip(\"OFFSET_X\"),\n            offsetY: this.positionTooltip(\"OFFSET_Y\")\n          },\n          false\n        )\n      )\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: false,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition()\n    });\n    this.overlayRef = this.overlay.create(config);\n    const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n    const tooltipRef = this.overlayRef.attach(tempRef);\n    tooltipRef.instance.toolTipText = this.toolTipText;\n    tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(() => {\n        this.hideToolTip();\n      });\n  }\n\n  positionTooltip(type: \"OFFSET_X\" | \"OFFSET_Y\") {\n    if (type === \"OFFSET_X\") {\n      return this.toolTipPosition === \"right\"\n        ? this.element.nativeElement.offsetWidth / 2 + 8\n        : this.toolTipPosition === \"left\"\n        ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n        : this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\"\n        ? 0\n        : 8;\n    }\n    if (type !== \"OFFSET_Y\") return;\n    return this.toolTipPosition === \"right\" || this.toolTipPosition === \"left\"\n      ? -18\n      : this.toolTipPosition === \"top\"\n      ? -44\n      : this.toolTipPosition === \"bottom\"\n      ? this.element.nativeElement.offsetHeight / 2 + 8\n      : 8;\n  }\n\n  hideToolTip() {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\n\n@NgModule({\n    declarations: [ToolTipDirective, ToolTipComponent],\n    imports: [CommonModule, OverlayModule],\n    exports: [ToolTipDirective, ToolTipComponent]\n})\nexport class ToolTipModule {\n  static forRoot(): ModuleWithProviders<ToolTipModule> {\n    return { ngModule: ToolTipModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}
+{"version":3,"file":"mis-crystal-design-system-tooltip.mjs","sources":["../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.ts","../../../projects/mis-components/tooltip/tooltip-container/tooltip.component.html","../../../projects/mis-components/tooltip/tooltip.directive.ts","../../../projects/mis-components/tooltip/tooltip.module.ts","../../../projects/mis-components/tooltip/mis-crystal-design-system-tooltip.ts"],"sourcesContent":["import { AfterViewInit, Component, ElementRef, Inject, OnInit, ViewChild } from \"@angular/core\";\nimport { ITooltipPositions } from \"../models/tooltip.model\";\n\n@Component({\n  selector: \"mis-tooltip\",\n  templateUrl: \"./tooltip.component.html\",\n  styleUrls: [\"./tooltip.component.scss\"]\n})\nexport class ToolTipComponent implements OnInit, AfterViewInit {\n  public toolTipText: string = \"\";\n  public toolTipPosition: ITooltipPositions = \"bottom\";\n\n  @ViewChild(\"container\") container: ElementRef;\n\n  constructor() {}\n  ngOnInit() {}\n  ngAfterViewInit() {\n    if (!this.container?.nativeElement) return;\n    if (this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\") {\n      const eleWidth = this.container.nativeElement.getBoundingClientRect();\n      this.container.nativeElement.style.left = eleWidth.width / -2 + \"px\";\n      return;\n    }\n    if (this.toolTipPosition === \"left\") {\n      const eleWidth = this.container.nativeElement.getBoundingClientRect();\n      this.container.nativeElement.style.left = -eleWidth.width + \"px\";\n    }\n  }\n}\n","<div id=\"tooltip-container\" *ngIf=\"toolTipText.length > 0\" #container>\n  <div id=\"tooltip\">\n    <div id=\"tooltip-text\">{{ toolTipText }}</div>\n    <span\n      id=\"arrow\"\n      [ngClass]=\"{\n        'arrow-left': toolTipPosition === 'left',\n        'arrow-right': toolTipPosition === 'right',\n        'arrow-top': toolTipPosition === 'top',\n        'arrow-bottom': toolTipPosition === 'bottom'\n      }\"\n    ></span>\n  </div>\n</div>\n","import { AfterViewInit, Directive, ElementRef, HostListener, Input, OnInit, ViewContainerRef } from \"@angular/core\";\nimport { Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { take } from \"rxjs/operators\";\nimport { ComponentPortal } from \"@angular/cdk/portal\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\nimport { genPositionPairs } from \"mis-crystal-design-system/utils\";\nimport { ITooltipPositions } from \"./models/tooltip.model\";\n\n@Directive({\n  selector: \"[misToolTip]\"\n})\nexport class ToolTipDirective implements OnInit, AfterViewInit {\n  public isToolTipDisplayed: boolean = false;\n  public toolTipText: string = \"\";\n  public toolTipPosition: ITooltipPositions = \"bottom\";\n  private overlayRef: OverlayRef;\n\n  @Input() showOnHover: boolean = true;\n  @Input() set showToolTip(value: boolean) {\n    this.isToolTipDisplayed = value;\n    if (value) this.displayToolTip();\n    else this.hideToolTip();\n  }\n  @Input() set text(value: string) {\n    this.toolTipText = value;\n  }\n  @Input() set position(value: ITooltipPositions) {\n    this.toolTipPosition = value;\n  }\n\n  @HostListener(\"mouseenter\") onMouseEnter() {\n    if (this.showOnHover) this.displayToolTip();\n  }\n  @HostListener(\"mouseleave\") onMouseLeave() {\n    if (this.showOnHover) this.hideToolTip();\n  }\n\n  constructor(private element: ElementRef, private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n  ngOnInit() {}\n  ngAfterViewInit() {\n    if (this.isToolTipDisplayed) this.displayToolTip();\n    else this.hideToolTip();\n  }\n\n  displayToolTip() {\n    const positionStrategy = this.overlay\n      .position()\n      .flexibleConnectedTo(this.element)\n      .withPositions(\n        genPositionPairs(\n          {\n            positionX: \"center\",\n            positionY: this.toolTipPosition === \"top\" ? \"top\" : \"center\",\n            offsetX: this.positionTooltip(\"OFFSET_X\"),\n            offsetY: this.positionTooltip(\"OFFSET_Y\")\n          },\n          false\n        )\n      )\n      .withPush(true);\n    const config = new OverlayConfig({\n      hasBackdrop: false,\n      positionStrategy,\n      scrollStrategy: this.overlay.scrollStrategies.reposition()\n    });\n    this.overlayRef = this.overlay.create(config);\n    const tempRef = new ComponentPortal(ToolTipComponent, this.viewContainerRef);\n    const tooltipRef = this.overlayRef.attach(tempRef);\n    tooltipRef.instance.toolTipText = this.toolTipText;\n    tooltipRef.instance.toolTipPosition = this.toolTipPosition;\n    this.overlayRef\n      .backdropClick()\n      .pipe(take(1))\n      .subscribe(() => {\n        this.hideToolTip();\n      });\n  }\n\n  positionTooltip(type: \"OFFSET_X\" | \"OFFSET_Y\") {\n    if (type === \"OFFSET_X\") {\n      return this.toolTipPosition === \"right\"\n        ? this.element.nativeElement.offsetWidth / 2 + 8\n        : this.toolTipPosition === \"left\"\n        ? (this.element.nativeElement.offsetWidth / 2 + 8) * -1\n        : this.toolTipPosition === \"top\" || this.toolTipPosition === \"bottom\"\n        ? 0\n        : 8;\n    }\n    if (type !== \"OFFSET_Y\") return;\n    return this.toolTipPosition === \"right\" || this.toolTipPosition === \"left\"\n      ? -18\n      : this.toolTipPosition === \"top\"\n      ? -44\n      : this.toolTipPosition === \"bottom\"\n      ? this.element.nativeElement.offsetHeight / 2 + 8\n      : 8;\n  }\n\n  hideToolTip() {\n    this.overlayRef?.detach();\n    this.overlayRef?.dispose();\n  }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { OverlayModule } from \"@angular/cdk/overlay\";\nimport { ToolTipDirective } from \"./tooltip.directive\";\nimport { ToolTipComponent } from \"./tooltip-container/tooltip.component\";\n\n@NgModule({\n    declarations: [ToolTipDirective, ToolTipComponent],\n    imports: [CommonModule, OverlayModule],\n    exports: [ToolTipDirective, ToolTipComponent]\n})\nexport class ToolTipModule {\n  static forRoot(): ModuleWithProviders<ToolTipModule> {\n    return { ngModule: ToolTipModule, providers: [] };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1"],"mappings":"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"}

package/input/mis-input.component.scss

@@ -1,6 +1,4 @@
 @import "../styles/mis-color-constants.scss";
-@import '../styles/mis-fonts.scss';
-@import '../styles/mis-icons.scss';
 
 .input-container {
   position: relative;
@@ -17,7 +15,7 @@
     flex-direction: row;
     flex-wrap: nowrap;
     transition: all ease-in 60ms;
-    background-color: $text_white;
+    background-color: #ffffff;
     padding: 3px 16px; // DONE CHANGE
     gap: 16px;
     .mis-input {
@@ -38,7 +36,7 @@
       font-weight: normal;
       font-size: 16px;
       height: 24px;
-      color: $text_black;
+      color: #181f33;
       background-color: transparent;
       width: 100%;
       vertical-align: middle;
@@ -56,13 +54,13 @@
       font-weight: normal;
       font-size: 16px;
       line-height: 24px;
-      color: $text_muted;
+      color: #6a737d;
       z-index: -1;
       transition: all ease-in 150ms;
     }
 
     &:focus-within {
-      background-color: $grey_bg;
+      background-color: #f5f5f5;
     }
     &:focus-within {
       border: 1px solid $pmry_500;
@@ -71,7 +69,7 @@
     [mis-input-icon] {
       width: 18px;
       height: 18px;
-      color: $text_muted;
+      color: #6a737d;
       font-size: 24px;
       line-height: 18px;
     }
@@ -103,19 +101,19 @@
     }
     .input-wrapper {
       border-radius: 4px;
-      border: 1px solid $grey_seperators;
+      border: 1px solid #e0e0e0;
       padding: 0;
       // input:not(:disabled) {
       //   &:hover,
       //   &:focus {
-      //     background-color: $grey_bg;
+      //     background-color: #f5f5f5;
       //   }
       // }
       &:hover {
-        background-color: $grey_bg;
+        background-color: #f5f5f5;
       }
       &:focus-within {
-        border: 1px solid $pmry_500;
+        border: 1px solid #0937b2;
       }
       input:not(:placeholder-shown) + .mis-placeholder {
         color: transparent !important;
@@ -127,7 +125,7 @@
     }
     &.has-error {
       .input-wrapper {
-        border: 1px solid $sem_error !important;
+        border: 1px solid #b00020 !important;
       }
     }
   }
@@ -135,9 +133,9 @@
     .input-wrapper {
       padding-top: 24px;
       padding-bottom: 7px; // DONE CHANGE
-      border-bottom: 1px solid $grey_seperators;
+      border-bottom: 1px solid #e0e0e0;
       input:focus + .mis-placeholder {
-        color: $pmry_500 !important;
+        color: #0937b2 !important;
       }
       input:not(:placeholder-shown) + .mis-placeholder,
       input:focus + .mis-placeholder {
@@ -147,9 +145,9 @@
       }
       &:focus-within {
         border: none;
-        border-bottom: 1px solid $pmry_500;
+        border-bottom: 1px solid #0937b2;
         input::placeholder {
-          color: $text_muted;
+          color: #6a737d;
           opacity: 1;
           font-size: 16px;
         }
@@ -157,9 +155,9 @@
     }
     &.has-error {
       .input-wrapper {
-        border-bottom: 1px solid $sem_error !important;
+        border-bottom: 1px solid #b00020 !important;
         .mis-placeholder {
-          color: $sem_error !important;
+          color: #b00020 !important;
         }
       }
     }
@@ -173,10 +171,10 @@
     line-height: 24px;
     height: 24px;
     font-size: 12px;
-    color: $text_muted;
+    color: #6a737d;
     letter-spacing: 0.2px;
   }
   [mis-input-error] {
-    color: $sem_error;
+    color: #b00020;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mis-crystal-design-system",
-  "version": "2.9.7-v14",
+  "version": "2.9.7-v14-1",
   "peerDependencies": {
     "@angular/common": "*",
     "@angular/core": "*",

package/styles/mis-fonts.scss

@@ -1,114 +1,124 @@
-@mixin hFont ($font-size, $line-height) {
-    font-size: $font-size;
-    line-height: $line-height;
-}
-
 .h1 {
-    @include hFont(40px, 48px);
-    font-weight: 400px;
+    font-size: 40px; 
+    font-weight: 400;
     letter-spacing: 0px;
+    line-height: 48px;
 }
 .h2 {
-    @include hFont(32px, 40px);
+    font-size: 32px;
     font-weight: 400;
     letter-spacing: 0px;
+    line-height: 40px;
 }
 .h3 {
-    @include hFont(28px, 36px);
+    font-size: 28px; 
     font-weight: 400;
     letter-spacing: 0px;
+    line-height: 36px;
 }
 .h4 {
-    @include hFont(24px, 32px);
+    font-size: 24px; 
     font-weight: 400;
     letter-spacing: 0px;
+    line-height: 32px;
 }
-
-
 .h5-b {
+    font-size: 20px;
     font-weight: 700;
     letter-spacing: 0.25px;
-    @include hFont(20px, 28px);
+    line-height: 28px;
 }
 .h5 {
+    font-size: 20px;
     font-weight: 400;
     letter-spacing: 0.15px;
-    @include hFont(20px, 28px);
+    line-height: 28px;
 }
 .h6-b{
-    font-weight: 700; 
+    font-size: 16px; 
+    font-weight: 700;
     letter-spacing: 0px;
-    @include hFont(16px, 24px);
+    line-height: 24px;
 }
 .h6{
-    @include hFont(16px, 24);
-    font-weight: 400; 
+    font-size: 16px; 
+    font-weight: 400;
     letter-spacing: 0px;
+    line-height: 24px;
 }
 .p {
-    @include hFont(16px, 180%);
-    font-weight: 400; 
+    font-size: 16px; 
+    font-weight: 400;
     letter-spacing: 0px;
+    line-height: 180%;
 }
 .h7-b {
-    font-weight: 700; 
+    font-size: 14px; 
+    font-weight: 700;
     letter-spacing: 0.25px;
-    @include hFont(14px, 20px);
-
+    line-height: 20px;
 }
-
 .h7 {
+    font-size: 14px; 
     font-weight: 400;
     letter-spacing: 0.2px;
-    @include hFont(14px, 20px);
+    line-height: 20px;
 }
 
 .h8-b {
-    font-weight: 700; 
+    font-size: 12px; 
+    font-weight: 700;
     letter-spacing: 0.25px;
-    @include hFont(12px, 18px);
+    line-height: 18px;
 }
 .h8 {
+    font-size: 12px; 
     font-weight: 400;
     letter-spacing: 0.2px;
-    @include hFont(12px, 18px);
-
+    line-height: 18px;
 }
 .h9 {
-    @include hFont(10px, 15px);
-    font-weight: 400; 
+    font-size: 10px; 
+    font-weight: 400;
     letter-spacing: 0px;
+    line-height: 15px;
 }
 
 //button fonts ------------------------------------------------------------------
 
 .btn-lg-b {
-    @include hFont(16px, 24px);
+    font-size: 16px; 
     font-weight: 700;
     letter-spacing: 0.5px;
+    line-height: 24px;
 }
 .btn-lg {
+    font-size: 16px; 
     font-weight: 400;
     letter-spacing: 0.2px;
-    @include hFont(16px, 24px);
+    line-height: 24px;
 }
 .btn-sm {
+    font-size: 14px; 
     font-weight: 400;
     letter-spacing: 0.25px;
-    @include hFont(14px, 20px);
+    line-height: 20px;
 }
 .btn-link {
     font-size: 16px; 
+    font-weight: 400;
+    letter-spacing: 0px;
     line-height: 24px;
-    @include hFont(16px, 24px);
 }
 .display-1 {
+    font-size: 48px; 
     font-weight: 400;
     letter-spacing: 0px;
-    @include hFont(48px, 56px);
+    line-height: 56px;
 }
 .display-2 {
+    font-size: 14px; 
     font-weight: 400;
     letter-spacing: 0.5px;
-    @include hFont(14px, 20px);
+    line-height: 20px;
 }