npm - mis-crystal-design-system - Versions diffs - 2.5.0 → 2.5.1 - Mend

mis-crystal-design-system 2.5.0 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (277) hide show

package/bundles/mis-crystal-design-system-async-search-dropdown.umd.js CHANGED Viewed

@@ -9,7 +9,7 @@
             var _this = this;
             this.overlay = overlay;
             this.viewContainerRef = viewContainerRef;
-            this.placeholder = 'Select'; // placeholder for input
+            this.placeholder = "Select"; // placeholder for input
             this.debounceTime = 400; // wait time till which API call is paused
             this.minInputLength = 2; // min length after which API call is made
             this.multi = false; // maintain a list or emit value
@@ -31,7 +31,7 @@
             var _this = this;
             var _a, _b;
             if (this.multi && !this.uniqueKey) {
-                throw new Error('[uniqueKey] required in multi mode.');
+                throw new Error("[uniqueKey] required in multi mode.");
             }
             if (this.disabled) {
                 this.searchInput.disable();
@@ -70,16 +70,16 @@
                 .position()
                 .flexibleConnectedTo(origin)
                 .withPositions([
-                new overlay.ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
-                new overlay.ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "bottom" }, { overlayX: "start", overlayY: "top" }),
+                new overlay.ConnectionPositionPair({ originX: "start", originY: "top" }, { overlayX: "start", overlayY: "bottom" })
             ])
                 .withPush(true);
             var configs = new overlay.OverlayConfig({
                 hasBackdrop: true,
-                backdropClass: 'cdk-overlay-transparent-backdrop',
+                backdropClass: "cdk-overlay-transparent-backdrop",
                 scrollStrategy: this.overlay.scrollStrategies.reposition(),
                 positionStrategy: positionStrategy,
-                width: origin.clientWidth,
+                width: origin.clientWidth
             });
             this.overlayRef = this.overlay.create(configs);
             this.overlayRef.attach(new portal.TemplatePortal(template, this.viewContainerRef));
@@ -123,7 +123,7 @@
                         _this.input.nativeElement.scrollIntoView();
                     }, 10);
                 }
-                this.searchInput.patchValue('');
+                this.searchInput.patchValue("");
                 this.data = [];
             }
             this.closeDropdown();
@@ -136,7 +136,7 @@
             this.selections.delete(item[this.uniqueKey]);
             this.setControlValue(this.selectedItems);
             // tslint:disable-next-line
-            this.input['nativeElement'].focus();
+            this.input["nativeElement"].focus();
         };
         AsyncDropdownComponent.prototype.setControlValue = function (value) {
             var _a;
@@ -157,8 +157,8 @@
     }());
     AsyncDropdownComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'mis-async-search-dropdown',
-                    template: "<div\n  class=\"dd-wrapper\"\n  [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\"\n  #ddBtn\n>\n  <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n    <span *ngFor=\"let item of selectedItems\" (click)=\"removeItem(item)\">{{item[displayKey]}} <span class=\"ic-navigation-cancel-24\"></span> </span>\n  </div>\n  <div class=\"search-input\">\n    <span class=\"ic-action-search-24\"></span>\n    <input\n      tabindex=\"0\"\n      type=\"text\"\n      class=\"black-text\"\n      #input\n      [placeholder]=\"placeholder\"\n      [formControl]=\"searchInput\"\n    />\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" *ngIf=\"data.length\">\n    <ng-container *ngFor=\"let item of data\">\n      <div (click)=\"selectData(item, false)\">\n      <ng-container *ngIf=\"customItem; else standardItem\" [ngTemplateOutlet]=\"customItem\" [ngTemplateOutletContext]=\"{$implicit:item}\"></ng-container>\n      <ng-template #standardItem>\n        <div class=\"item\">\n          <div class=\"value\">\n            <div class=\"primary\">\n              {{ item[displayKey] }}\n            </div>\n            <div class=\"secondary\">\n              {{item[secondaryDisplayKey]}}\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n",
+                    selector: "mis-async-search-dropdown",
+                    template: "<div class=\"dd-wrapper\" [ngClass]=\"{ opened: opened, disabled: disabled, readonly: readonly }\" #ddBtn>\n  <div class=\"selected-list\" *ngIf=\"multi && selections.size > 0\">\n    <span *ngFor=\"let item of selectedItems\" (click)=\"removeItem(item)\">{{ item[displayKey] }} <span class=\"ic-navigation-cancel-24\"></span> </span>\n  </div>\n  <div class=\"search-input\">\n    <span class=\"ic-action-search-24\"></span>\n    <input tabindex=\"0\" type=\"text\" class=\"black-text\" #input [placeholder]=\"placeholder\" [formControl]=\"searchInput\" />\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class=\"dd-list\" *ngIf=\"data.length\">\n    <ng-container *ngFor=\"let item of data\">\n      <div (click)=\"selectData(item, false)\">\n        <ng-container\n          *ngIf=\"customItem; else standardItem\"\n          [ngTemplateOutlet]=\"customItem\"\n          [ngTemplateOutletContext]=\"{ $implicit: item }\"\n        ></ng-container>\n        <ng-template #standardItem>\n          <div class=\"item\">\n            <div class=\"value\">\n              <div class=\"primary\">\n                {{ item[displayKey] }}\n              </div>\n              <div class=\"secondary\">\n                {{ item[secondaryDisplayKey] }}\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n",
                     styles: [".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;width:24;line-height:24px;height:24px;left:10px}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}"]
                 },] }
     ];
@@ -178,10 +178,10 @@
         control: [{ type: core.Input }],
         disabled: [{ type: core.Input }],
         readonly: [{ type: core.Input }],
-        origin: [{ type: core.ViewChild, args: ['ddBtn', { static: false },] }],
-        input: [{ type: core.ViewChild, args: ['input', { static: false },] }],
-        dd: [{ type: core.ViewChild, args: ['dd', { static: false },] }],
-        customItem: [{ type: core.ContentChild, args: ['misCustomItem', { static: false },] }],
+        origin: [{ type: core.ViewChild, args: ["ddBtn", { static: false },] }],
+        input: [{ type: core.ViewChild, args: ["input", { static: false },] }],
+        dd: [{ type: core.ViewChild, args: ["dd", { static: false },] }],
+        customItem: [{ type: core.ContentChild, args: ["misCustomItem", { static: false },] }],
         onSelect: [{ type: core.Output }]
     };
@@ -194,7 +194,7 @@
         { type: core.NgModule, args: [{
                     declarations: [AsyncDropdownComponent],
                     imports: [common.CommonModule, overlay.OverlayModule, forms.ReactiveFormsModule, forms.FormsModule],
-                    exports: [AsyncDropdownComponent],
+                    exports: [AsyncDropdownComponent]
                 },] }
     ];

package/bundles/mis-crystal-design-system-async-search-dropdown.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-async-search-dropdown.umd.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import {\n ConnectionPositionPair,\n Overlay,\n OverlayConfig,\n OverlayRef,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { AbstractControl, FormControl } from '@angular/forms';\nimport { Observable, Subscription } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: 'mis-async-search-dropdown',\n templateUrl: './async-dropdown.component.html',\n styleUrls: ['./async-dropdown.component.scss'],\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(\n private overlay: Overlay,\n private viewContainerRef: ViewContainerRef\n ) {}\n\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = 'Select'; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl \| null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild('ddBtn', { static: false }) origin: ElementRef;\n @ViewChild('input', { static: false }) input: ElementRef;\n @ViewChild('dd', { static: false }) dd: TemplateRef<Element>;\n @ContentChild('misCustomItem', { static: false })\n customItem: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData \| IListData[]> = new EventEmitter(\n true\n ); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription \| undefined;\n\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error('[uniqueKey] required in multi mode.');\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n filter((val) => val && val.length >= this.minInputLength),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe((res) => {\n this.httpStream(res).subscribe((list) => {\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n });\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(\n this.handleControlChanges\n );\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach((el) => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(\n template: TemplateRef<Element>,\n origin: HTMLElement\n ): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair(\n { originX: 'start', originY: 'bottom' },\n { overlayX: 'start', overlayY: 'top' }\n ),\n new ConnectionPositionPair(\n { originX: 'start', originY: 'top' },\n { overlayX: 'start', overlayY: 'bottom' }\n ),\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth,\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe((res) => {\n this.closeDropdown();\n });\n }\n\n /*\n closes the dropdown\n /\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /\n \n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n /\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue('');\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /\n \n * @param item remove item from selected list\n /\n removeItem(item: IListData): void {\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input['nativeElement'].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /\n @returns list of selected items\n /\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { AsyncDropdownComponent } from './async-dropdown.component';\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n exports: [AsyncDropdownComponent],\n})\nexport class AsyncDropdownModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["EventEmitter","FormControl","filter","debounceTime","distinctUntilChanged","ConnectionPositionPair","OverlayConfig","TemplatePortal","Component","Overlay","ViewContainerRef","Input","ViewChild","ContentChild","Output","NgModule","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule"],"mappings":"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"}
1	+ {"version":3,"file":"mis-crystal-design-system-async-search-dropdown.umd.js","sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts","../../../projects/mis-components/async-search-dropdown/mis-crystal-design-system-async-search-dropdown.ts"],"sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: \"mis-async-search-dropdown\",\n templateUrl: \"./async-dropdown.component.html\",\n styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = \"Select\"; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl \| null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n @ViewChild(\"input\", { static: false }) input: ElementRef;\n @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n @ContentChild(\"misCustomItem\", { static: false })\n customItem: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData \| IListData[]> = new EventEmitter(true); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription \| undefined;\n\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error(\"[uniqueKey] required in multi mode.\");\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n filter(val => val && val.length >= this.minInputLength),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe(res => {\n this.httpStream(res).subscribe(list => {\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n });\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach(el => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.closeDropdown();\n });\n }\n\n /*\n closes the dropdown\n /\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /\n \n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n /\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue(\"\");\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /\n \n * @param item remove item from selected list\n /\n removeItem(item: IListData): void {\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input[\"nativeElement\"].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /\n @returns list of selected items\n /\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["EventEmitter","FormControl","filter","debounceTime","distinctUntilChanged","ConnectionPositionPair","OverlayConfig","TemplatePortal","Component","Overlay","ViewContainerRef","Input","ViewChild","ContentChild","Output","NgModule","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule"],"mappings":"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"}

package/bundles/mis-crystal-design-system-async-search-dropdown.umd.min.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("@angular/forms"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/async-search-dropdown",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","@angular/forms","rxjs/operators","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["async-search-dropdown"]={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.ng.forms,e.rxjs.operators,e.ng.common)}(this,(function(e,t,n,i,o,r,s){"use strict";var a=function(){function e(e,t){var n=this;this.overlay=e,this.viewContainerRef=t,this.placeholder="Select",this.debounceTime=400,this.minInputLength=2,this.multi=!1,this.onSelect=new i.EventEmitter(!0),this.searchInput=new o.FormControl,this.data=[],this.opened=!1,this.selections=new Map,this.handleControlChanges=function(e){e.forEach((function(e){n.selectData(e,!0)}))}}return e.prototype.ngOnInit=function(){var e,t,n=this;if(this.multi&&!this.uniqueKey)throw new Error("[uniqueKey] required in multi mode.");this.disabled&&this.searchInput.disable(),this.searchSubscription=this.searchInput.valueChanges.pipe(r.filter((function(e){return e&&e.length>=n.minInputLength})),r.debounceTime(this.debounceTime),r.distinctUntilChanged()).subscribe((function(e){n.httpStream(e).subscribe((function(e){var t;n.data=e,!(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())&&e.length>0&&n.openDropdown(n.dd,n.origin.nativeElement)}))})),(null===(e=this.control)||void 0===e?void 0:e.value)&&this.handleControlChanges(this.control.value),this.controlSubscription=null===(t=this.control)||void 0===t?void 0:t.valueChanges.subscribe(this.handleControlChanges)},e.prototype.ngOnChanges=function(e){e&&e.disabled&&(this.searchInput.enable(),this.disabled&&this.searchInput.disable())},e.prototype.ngOnDestroy=function(){var e;null===(e=this.searchSubscription)||void 0===e||e.unsubscribe()},e.prototype.openDropdown=function(e,i){var o=this,r=this.overlay.position().flexibleConnectedTo(i).withPositions([new t.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new t.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"})]).withPush(!0),s=new t.OverlayConfig({hasBackdrop:!0,backdropClass:"cdk-overlay-transparent-backdrop",scrollStrategy:this.overlay.scrollStrategies.reposition(),positionStrategy:r,width:i.clientWidth});this.overlayRef=this.overlay.create(s),this.overlayRef.attach(new n.TemplatePortal(e,this.viewContainerRef)),this.overlayRef.backdropClick().subscribe((function(e){o.closeDropdown()}))},e.prototype.closeDropdown=function(){var e;this.opened=!1,null===(e=this.overlayRef)||void 0===e||e.detach(),this.data=[]},e.prototype.selectData=function(e,t){var n=this;void 0===t&&(t=!0),e.disabled||(this.multi?(this.selections.has(e[this.uniqueKey])||this.selections.set(e[this.uniqueKey],e),this.setControlValue(this.selectedItems),t||setTimeout((function(){n.input.nativeElement.focus(),n.input.nativeElement.scrollIntoView()}),10),this.searchInput.patchValue(""),this.data=[]):(this.searchInput.patchValue(e[this.displayKey],{emitEvent:!1}),this.setControlValue(e)),this.closeDropdown())},e.prototype.removeItem=function(e){this.selections.delete(e[this.uniqueKey]),this.setControlValue(this.selectedItems),this.input.nativeElement.focus()},e.prototype.setControlValue=function(e){var t;this.onSelect.emit(e),null===(t=this.control)||void 0===t||t.patchValue(e,{emitEvent:!1})},Object.defineProperty(e.prototype,"selectedItems",{get:function(){return Array.from(this.selections.values())},enumerable:!1,configurable:!0}),e}();a.decorators=[{type:i.Component,args:[{selector:"mis-async-search-dropdown",template:'<div\n  class="dd-wrapper"\n  [ngClass]="{ opened: opened, disabled: disabled, readonly: readonly }"\n  #ddBtn\n>\n  <div class="selected-list" *ngIf="multi && selections.size > 0">\n    <span *ngFor="let item of selectedItems" (click)="removeItem(item)">{{item[displayKey]}} <span class="ic-navigation-cancel-24"></span> </span>\n  </div>\n  <div class="search-input">\n    <span class="ic-action-search-24"></span>\n    <input\n      tabindex="0"\n      type="text"\n      class="black-text"\n      #input\n      [placeholder]="placeholder"\n      [formControl]="searchInput"\n    />\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class="dd-list" *ngIf="data.length">\n    <ng-container *ngFor="let item of data">\n      <div (click)="selectData(item, false)">\n      <ng-container *ngIf="customItem; else standardItem" [ngTemplateOutlet]="customItem" [ngTemplateOutletContext]="{$implicit:item}"></ng-container>\n      <ng-template #standardItem>\n        <div class="item">\n          <div class="value">\n            <div class="primary">\n              {{ item[displayKey] }}\n            </div>\n            <div class="secondary">\n              {{item[secondaryDisplayKey]}}\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n',styles:[".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;width:24;line-height:24px;height:24px;left:10px}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}"]}]}],a.ctorParameters=function(){return[{type:t.Overlay},{type:i.ViewContainerRef}]},a.propDecorators={httpStream:[{type:i.Input}],displayKey:[{type:i.Input}],secondaryDisplayKey:[{type:i.Input}],placeholder:[{type:i.Input}],debounceTime:[{type:i.Input}],minInputLength:[{type:i.Input}],multi:[{type:i.Input}],uniqueKey:[{type:i.Input}],control:[{type:i.Input}],disabled:[{type:i.Input}],readonly:[{type:i.Input}],origin:[{type:i.ViewChild,args:["ddBtn",{static:!1}]}],input:[{type:i.ViewChild,args:["input",{static:!1}]}],dd:[{type:i.ViewChild,args:["dd",{static:!1}]}],customItem:[{type:i.ContentChild,args:["misCustomItem",{static:!1}]}],onSelect:[{type:i.Output}]};var l=function(){};l.decorators=[{type:i.NgModule,args:[{declarations:[a],imports:[s.CommonModule,t.OverlayModule,o.ReactiveFormsModule,o.FormsModule],exports:[a]}]}],e.AsyncDropdownComponent=a,e.AsyncDropdownModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/cdk/overlay"),require("@angular/cdk/portal"),require("@angular/core"),require("@angular/forms"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/async-search-dropdown",["exports","@angular/cdk/overlay","@angular/cdk/portal","@angular/core","@angular/forms","rxjs/operators","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"]["async-search-dropdown"]={}),e.ng.cdk.overlay,e.ng.cdk.portal,e.ng.core,e.ng.forms,e.rxjs.operators,e.ng.common)}(this,(function(e,t,n,i,o,r,s){"use strict";var a=function(){function e(e,t){var n=this;this.overlay=e,this.viewContainerRef=t,this.placeholder="Select",this.debounceTime=400,this.minInputLength=2,this.multi=!1,this.onSelect=new i.EventEmitter(!0),this.searchInput=new o.FormControl,this.data=[],this.opened=!1,this.selections=new Map,this.handleControlChanges=function(e){e.forEach((function(e){n.selectData(e,!0)}))}}return e.prototype.ngOnInit=function(){var e,t,n=this;if(this.multi&&!this.uniqueKey)throw new Error("[uniqueKey] required in multi mode.");this.disabled&&this.searchInput.disable(),this.searchSubscription=this.searchInput.valueChanges.pipe(r.filter((function(e){return e&&e.length>=n.minInputLength})),r.debounceTime(this.debounceTime),r.distinctUntilChanged()).subscribe((function(e){n.httpStream(e).subscribe((function(e){var t;n.data=e,!(null===(t=n.overlayRef)||void 0===t?void 0:t.hasAttached())&&e.length>0&&n.openDropdown(n.dd,n.origin.nativeElement)}))})),(null===(e=this.control)||void 0===e?void 0:e.value)&&this.handleControlChanges(this.control.value),this.controlSubscription=null===(t=this.control)||void 0===t?void 0:t.valueChanges.subscribe(this.handleControlChanges)},e.prototype.ngOnChanges=function(e){e&&e.disabled&&(this.searchInput.enable(),this.disabled&&this.searchInput.disable())},e.prototype.ngOnDestroy=function(){var e;null===(e=this.searchSubscription)||void 0===e||e.unsubscribe()},e.prototype.openDropdown=function(e,i){var o=this,r=this.overlay.position().flexibleConnectedTo(i).withPositions([new t.ConnectionPositionPair({originX:"start",originY:"bottom"},{overlayX:"start",overlayY:"top"}),new t.ConnectionPositionPair({originX:"start",originY:"top"},{overlayX:"start",overlayY:"bottom"})]).withPush(!0),s=new t.OverlayConfig({hasBackdrop:!0,backdropClass:"cdk-overlay-transparent-backdrop",scrollStrategy:this.overlay.scrollStrategies.reposition(),positionStrategy:r,width:i.clientWidth});this.overlayRef=this.overlay.create(s),this.overlayRef.attach(new n.TemplatePortal(e,this.viewContainerRef)),this.overlayRef.backdropClick().subscribe((function(e){o.closeDropdown()}))},e.prototype.closeDropdown=function(){var e;this.opened=!1,null===(e=this.overlayRef)||void 0===e||e.detach(),this.data=[]},e.prototype.selectData=function(e,t){var n=this;void 0===t&&(t=!0),e.disabled||(this.multi?(this.selections.has(e[this.uniqueKey])||this.selections.set(e[this.uniqueKey],e),this.setControlValue(this.selectedItems),t||setTimeout((function(){n.input.nativeElement.focus(),n.input.nativeElement.scrollIntoView()}),10),this.searchInput.patchValue(""),this.data=[]):(this.searchInput.patchValue(e[this.displayKey],{emitEvent:!1}),this.setControlValue(e)),this.closeDropdown())},e.prototype.removeItem=function(e){this.selections.delete(e[this.uniqueKey]),this.setControlValue(this.selectedItems),this.input.nativeElement.focus()},e.prototype.setControlValue=function(e){var t;this.onSelect.emit(e),null===(t=this.control)||void 0===t||t.patchValue(e,{emitEvent:!1})},Object.defineProperty(e.prototype,"selectedItems",{get:function(){return Array.from(this.selections.values())},enumerable:!1,configurable:!0}),e}();a.decorators=[{type:i.Component,args:[{selector:"mis-async-search-dropdown",template:'<div class="dd-wrapper" [ngClass]="{ opened: opened, disabled: disabled, readonly: readonly }" #ddBtn>\n  <div class="selected-list" *ngIf="multi && selections.size > 0">\n    <span *ngFor="let item of selectedItems" (click)="removeItem(item)">{{ item[displayKey] }} <span class="ic-navigation-cancel-24"></span> </span>\n  </div>\n  <div class="search-input">\n    <span class="ic-action-search-24"></span>\n    <input tabindex="0" type="text" class="black-text" #input [placeholder]="placeholder" [formControl]="searchInput" />\n  </div>\n</div>\n\n<ng-template #dd>\n  <div class="dd-list" *ngIf="data.length">\n    <ng-container *ngFor="let item of data">\n      <div (click)="selectData(item, false)">\n        <ng-container\n          *ngIf="customItem; else standardItem"\n          [ngTemplateOutlet]="customItem"\n          [ngTemplateOutletContext]="{ $implicit: item }"\n        ></ng-container>\n        <ng-template #standardItem>\n          <div class="item">\n            <div class="value">\n              <div class="primary">\n                {{ item[displayKey] }}\n              </div>\n              <div class="secondary">\n                {{ item[secondaryDisplayKey] }}\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n</ng-template>\n',styles:[".dd-wrapper{background:#fff;border:1px solid #e0e0e0;box-sizing:border-box;border-radius:4px;display:block;cursor:pointer;outline:none}.dd-wrapper.opened,.dd-wrapper:hover{background:#f5f5f5}.dd-wrapper .selected-list{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:4px;padding:8px 16px}.dd-wrapper .selected-list>span{display:inline-block;background:#e0e0e0;border-radius:16px;padding:6px 12px;cursor:pointer;vertical-align:middle}.dd-wrapper:focus-within{border-color:#0937b2;background:#f5f5f5}.dd-wrapper.disabled,.dd-wrapper.readonly{pointer-events:none}.search-input{position:relative;border-radius:8px}.search-input input{outline:none;padding:10px 12px 10px 48px;background-color:transparent;font-size:15px;line-height:20px;color:#181f33;border-radius:inherit;border:1px solid transparent;width:100%}.search-input span{position:absolute;top:50%;transform:translateY(-50%);font-size:24px;width:24;line-height:24px;height:24px;left:10px}.dd-list{padding:8px 0;max-height:200px;background:#fff;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);border-radius:8px;min-width:100%;overflow-y:auto}.dd-list::-webkit-scrollbar{width:8px;border-radius:4px}.dd-list::-webkit-scrollbar-track{background:#fff;border-radius:4px}.dd-list::-webkit-scrollbar-thumb{background:#929dab;border-radius:4px}.dd-list::-webkit-scrollbar-thumb:hover{background:#929dab}.dd-list .item{padding:8px 16px;cursor:pointer}.dd-list .item .disabled{color:#6a737d!important;pointer-events:none}.dd-list .item .value{display:flex;justify-content:space-between;align-items:center}.dd-list .item .value .primary,.dd-list .item .value .secondary{font-style:normal;font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#181f33}.dd-list .item .reason{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.2px;color:#6a737d}.dd-list .item:hover:not(.disabled){background:#f5f7fc}"]}]}],a.ctorParameters=function(){return[{type:t.Overlay},{type:i.ViewContainerRef}]},a.propDecorators={httpStream:[{type:i.Input}],displayKey:[{type:i.Input}],secondaryDisplayKey:[{type:i.Input}],placeholder:[{type:i.Input}],debounceTime:[{type:i.Input}],minInputLength:[{type:i.Input}],multi:[{type:i.Input}],uniqueKey:[{type:i.Input}],control:[{type:i.Input}],disabled:[{type:i.Input}],readonly:[{type:i.Input}],origin:[{type:i.ViewChild,args:["ddBtn",{static:!1}]}],input:[{type:i.ViewChild,args:["input",{static:!1}]}],dd:[{type:i.ViewChild,args:["dd",{static:!1}]}],customItem:[{type:i.ContentChild,args:["misCustomItem",{static:!1}]}],onSelect:[{type:i.Output}]};var l=function(){};l.decorators=[{type:i.NgModule,args:[{declarations:[a],imports:[s.CommonModule,t.OverlayModule,o.ReactiveFormsModule,o.FormsModule],exports:[a]}]}],e.AsyncDropdownComponent=a,e.AsyncDropdownModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-async-search-dropdown.umd.min.js.map

package/bundles/mis-crystal-design-system-async-search-dropdown.umd.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts"],"names":["AsyncDropdownComponent","overlay","viewContainerRef","_this","this","placeholder","debounceTime","minInputLength","multi","onSelect","EventEmitter","searchInput","FormControl","data","opened","selections","Map","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","filter","val","length","distinctUntilChanged","subscribe","res","httpStream","list","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","control","value","controlSubscription","_b","ngOnChanges","changes","enable","ngOnDestroy","unsubscribe","template","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","width","clientWidth","create","attach","TemplatePortal","backdropClick","closeDropdown","detach","item","effectedFromOutside","has","set","setControlValue","selectedItems","setTimeout","input","focus","scrollIntoView","patchValue","displayKey","emitEvent","removeItem","delete","emit","Object","defineProperty","Array","from","Component","args","selector","Overlay","ViewContainerRef","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","exports"],"mappings":"2xBAmCE,SAAAA,EACUC,EACAC,GAFV,IAAAC,EAAAC,KACUA,KAAAH,QAAAA,EACAG,KAAAF,iBAAAA,EAMDE,KAAAC,YAAc,SACdD,KAAAE,aAAe,IACfF,KAAAG,eAAiB,EACjBH,KAAAI,OAAQ,EAWPJ,KAAAK,SAAkD,IAAIC,EAAAA,cAC9D,GAEFN,KAAAO,YAA2B,IAAIC,EAAAA,YAC/BR,KAAAS,KAAoB,GACpBT,KAAAU,QAAS,EAETV,KAAAW,WAA+B,IAAIC,IA+C3BZ,KAAAa,qBAAuB,SAACC,GAC9BA,EAAOC,SAAQ,SAACC,GACdjB,EAAKkB,WAAWD,GAAI,cA5CxBpB,EAAAsB,UAAAC,SAAA,WAAA,QAAApB,EAAAC,KACE,GAAIA,KAAKI,QAAUJ,KAAKoB,UACtB,MAAM,IAAIC,MAAM,uCAEdrB,KAAKsB,UACPtB,KAAKO,YAAYgB,UAEnBvB,KAAKwB,mBAAqBxB,KAAKO,YAAYkB,aACxCC,KACCC,EAAAA,QAAO,SAACC,GAAQ,OAAAA,GAAOA,EAAIC,QAAU9B,EAAKI,kBAC1CD,EAAAA,aAAaF,KAAKE,cAClB4B,EAAAA,wBAEDC,WAAU,SAACC,GACVjC,EAAKkC,WAAWD,GAAKD,WAAU,SAACG,SAC9BnC,EAAKU,KAAOyB,IACQ,QAAhBC,EAACpC,EAAKqC,kBAAU,IAAAD,OAAA,EAAAA,EAAEE,gBAAiBH,EAAKL,OAAS,GACnD9B,EAAKuC,aAAavC,EAAKwC,GAAIxC,EAAKyC,OAAOC,sBAI/B,QAAhBN,EAAInC,KAAK0C,eAAO,IAAAP,OAAA,EAAAA,EAAEQ,QAChB3C,KAAKa,qBAAqBb,KAAK0C,QAAQC,OAEzC3C,KAAK4C,oBAAkC,QAAfC,EAAG7C,KAAK0C,eAAO,IAAAG,OAAA,EAAAA,EAAEpB,aAAaM,UACpD/B,KAAKa,uBAITjB,EAAAsB,UAAA4B,YAAA,SAAYC,GACNA,GAAWA,EAAQzB,WACrBtB,KAAKO,YAAYyC,SACbhD,KAAKsB,UACPtB,KAAKO,YAAYgB,YAKvB3B,EAAAsB,UAAA+B,YAAA,iBACyB,QAAvBd,EAAAnC,KAAKwB,0BAAkB,IAAAW,GAAAA,EAAEe,eAUnBtD,EAAAsB,UAAAoB,aAAA,SACNa,EACAX,GAFM,IAAAzC,EAAAC,KAIAoD,EAAmBpD,KAAKH,QAC3BwD,WACAC,oBAAoBd,GACpBe,cAAc,CACb,IAAIC,EAAAA,uBACF,CAAEC,QAAS,QAASC,QAAS,UAC7B,CAAEC,SAAU,QAASC,SAAU,QAEjC,IAAIJ,EAAAA,uBACF,CAAEC,QAAS,QAASC,QAAS,OAC7B,CAAEC,SAAU,QAASC,SAAU,aAGlCC,UAAS,GAENC,EAAU,IAAIC,EAAAA,cAAc,CAChCC,aAAa,EACbC,cAAe,mCACfC,eAAgBlE,KAAKH,QAAQsE,iBAAiBC,aAC9ChB,iBAAgBA,EAChBiB,MAAO7B,EAAO8B,cAEhBtE,KAAKoC,WAAapC,KAAKH,QAAQ0E,OAAOT,GACtC9D,KAAKoC,WAAWoC,OAAO,IAAIC,EAAAA,eAAetB,EAAUnD,KAAKF,mBACzDE,KAAKoC,WAAWsC,gBAAgB3C,WAAU,SAACC,GACzCjC,EAAK4E,oBAOT/E,EAAAsB,UAAAyD,cAAA,iBACE3E,KAAKU,QAAS,EACC,QAAfyB,EAAAnC,KAAKoC,kBAAU,IAAAD,GAAAA,EAAEyC,SACjB5E,KAAKS,KAAO,IASdb,EAAAsB,UAAAD,WAAA,SAAW4D,EAAiBC,GAA5B,IAAA/E,EAAAC,UAA4B,IAAA8E,IAAAA,GAAA,GACtBD,EAAKvD,WAGJtB,KAAKI,OAIHJ,KAAKW,WAAWoE,IAAIF,EAAK7E,KAAKoB,aACjCpB,KAAKW,WAAWqE,IAAIH,EAAK7E,KAAKoB,WAAYyD,GAE5C7E,KAAKiF,gBAAgBjF,KAAKkF,eACrBJ,GACHK,YAAW,WACTpF,EAAKqF,MAAM3C,cAAc4C,QACzBtF,EAAKqF,MAAM3C,cAAc6C,mBACxB,IAELtF,KAAKO,YAAYgF,WAAW,IAC5BvF,KAAKS,KAAO,KAdZT,KAAKO,YAAYgF,WAAWV,EAAK7E,KAAKwF,YAAa,CAAEC,WAAW,IAChEzF,KAAKiF,gBAAgBJ,IAevB7E,KAAK2E,kBAOP/E,EAAAsB,UAAAwE,WAAA,SAAWb,GACT7E,KAAKW,WAAWgF,OAAOd,EAAK7E,KAAKoB,YACjCpB,KAAKiF,gBAAgBjF,KAAKkF,eAE1BlF,KAAKoF,MAAqB,cAAEC,SAGtBzF,EAAAsB,UAAA+D,gBAAA,SAAgBtC,SACtB3C,KAAKK,SAASuF,KAAKjD,GACP,QAAZR,EAAAnC,KAAK0C,eAAO,IAAAP,GAAAA,EAAEoD,WAAW5C,EAAO,CAAE8C,WAAW,KAM/CI,OAAAC,eAAIlG,EAAAsB,UAAA,gBAAa,KAAjB,WACE,OAAO6E,MAAMC,KAAKhG,KAAKW,WAAWG,oEArLrCmF,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,4BACVhD,SAAA,mtGA7BAiD,EAAAA,eAkBAC,EAAAA,wDAoBCC,EAAAA,0BACAA,EAAAA,mCACAA,EAAAA,2BACAA,EAAAA,4BACAA,EAAAA,8BACAA,EAAAA,qBACAA,EAAAA,yBACAA,EAAAA,uBACAA,EAAAA,wBACAA,EAAAA,wBACAA,EAAAA,sBACAC,EAAAA,UAASL,KAAA,CAAC,QAAS,CAAEM,QAAQ,mBAC7BD,EAAAA,UAASL,KAAA,CAAC,QAAS,CAAEM,QAAQ,gBAC7BD,EAAAA,UAASL,KAAA,CAAC,KAAM,CAAEM,QAAQ,wBAC1BC,EAAAA,aAAYP,KAAA,CAAC,gBAAiB,CAAEM,QAAQ,sBAGxCE,EAAAA,gBC9CH,iCALCC,EAAAA,SAAQT,KAAA,CAAC,CACRU,aAAc,CAAChH,GACfiH,QAAS,CAACC,EAAAA,aAAcC,EAAAA,cAAeC,EAAAA,oBAAqBC,EAAAA,aAC5DC,QAAS,CAACtH","sourcesContent":["import {\n ConnectionPositionPair,\n Overlay,\n OverlayConfig,\n OverlayRef,\n} from '@angular/cdk/overlay';\nimport { TemplatePortal } from '@angular/cdk/portal';\nimport {\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n} from '@angular/core';\nimport { AbstractControl, FormControl } from '@angular/forms';\nimport { Observable, Subscription } from 'rxjs';\nimport { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: 'mis-async-search-dropdown',\n templateUrl: './async-dropdown.component.html',\n styleUrls: ['./async-dropdown.component.scss'],\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(\n private overlay: Overlay,\n private viewContainerRef: ViewContainerRef\n ) {}\n\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = 'Select'; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl \| null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild('ddBtn', { static: false }) origin: ElementRef;\n @ViewChild('input', { static: false }) input: ElementRef;\n @ViewChild('dd', { static: false }) dd: TemplateRef<Element>;\n @ContentChild('misCustomItem', { static: false })\n customItem: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData \| IListData[]> = new EventEmitter(\n true\n ); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription \| undefined;\n\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error('[uniqueKey] required in multi mode.');\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n filter((val) => val && val.length >= this.minInputLength),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe((res) => {\n this.httpStream(res).subscribe((list) => {\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n });\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(\n this.handleControlChanges\n );\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach((el) => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(\n template: TemplateRef<Element>,\n origin: HTMLElement\n ): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair(\n { originX: 'start', originY: 'bottom' },\n { overlayX: 'start', overlayY: 'top' }\n ),\n new ConnectionPositionPair(\n { originX: 'start', originY: 'top' },\n { overlayX: 'start', overlayY: 'bottom' }\n ),\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: 'cdk-overlay-transparent-backdrop',\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth,\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe((res) => {\n this.closeDropdown();\n });\n }\n\n /*\n closes the dropdown\n /\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /\n \n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n /\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue('');\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /\n \n * @param item remove item from selected list\n /\n removeItem(item: IListData): void {\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input['nativeElement'].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /\n @returns list of selected items\n */\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n}\n","import { OverlayModule } from '@angular/cdk/overlay';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { AsyncDropdownComponent } from './async-dropdown.component';\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n exports: [AsyncDropdownComponent],\n})\nexport class AsyncDropdownModule {}\n"]}
1	+ {"version":3,"sources":["../../../projects/mis-components/async-search-dropdown/async-dropdown.component.ts","../../../projects/mis-components/async-search-dropdown/async-dropdown.module.ts"],"names":["AsyncDropdownComponent","overlay","viewContainerRef","_this","this","placeholder","debounceTime","minInputLength","multi","onSelect","EventEmitter","searchInput","FormControl","data","opened","selections","Map","handleControlChanges","values","forEach","el","selectData","prototype","ngOnInit","uniqueKey","Error","disabled","disable","searchSubscription","valueChanges","pipe","filter","val","length","distinctUntilChanged","subscribe","res","httpStream","list","_a","overlayRef","hasAttached","openDropdown","dd","origin","nativeElement","control","value","controlSubscription","_b","ngOnChanges","changes","enable","ngOnDestroy","unsubscribe","template","positionStrategy","position","flexibleConnectedTo","withPositions","ConnectionPositionPair","originX","originY","overlayX","overlayY","withPush","configs","OverlayConfig","hasBackdrop","backdropClass","scrollStrategy","scrollStrategies","reposition","width","clientWidth","create","attach","TemplatePortal","backdropClick","closeDropdown","detach","item","effectedFromOutside","has","set","setControlValue","selectedItems","setTimeout","input","focus","scrollIntoView","patchValue","displayKey","emitEvent","removeItem","delete","emit","Object","defineProperty","Array","from","Component","args","selector","Overlay","ViewContainerRef","Input","ViewChild","static","ContentChild","Output","NgModule","declarations","imports","CommonModule","OverlayModule","ReactiveFormsModule","FormsModule","exports"],"mappings":"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","sourcesContent":["import { ConnectionPositionPair, Overlay, OverlayConfig, OverlayRef } from \"@angular/cdk/overlay\";\nimport { TemplatePortal } from \"@angular/cdk/portal\";\nimport {\n Component,\n ContentChild,\n ElementRef,\n EventEmitter,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Output,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef\n} from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\nimport { Observable, Subscription } from \"rxjs\";\nimport { debounceTime, distinctUntilChanged, filter } from \"rxjs/operators\";\n\n// tslint:disable-next-line\ntype IListData = any;\n\n@Component({\n selector: \"mis-async-search-dropdown\",\n templateUrl: \"./async-dropdown.component.html\",\n styleUrls: [\"./async-dropdown.component.scss\"]\n})\nexport class AsyncDropdownComponent implements OnInit, OnChanges, OnDestroy {\n constructor(private overlay: Overlay, private viewContainerRef: ViewContainerRef) {}\n\n @Input() httpStream!: (searchKey: string) => Observable<IListData>; // function that returns an httpobservable\n @Input() displayKey!: string; // string to show value in list\n @Input() secondaryDisplayKey!: string; // string to display secondary value\n @Input() placeholder = \"Select\"; // placeholder for input\n @Input() debounceTime = 400; // wait time till which API call is paused\n @Input() minInputLength = 2; // min length after which API call is made\n @Input() multi = false; // maintain a list or emit value\n @Input() uniqueKey: string; // for identifying unique values\n @Input() control: AbstractControl \| null; // form control for reactive forms\n @Input() disabled: boolean; // disable actions on component\n @Input() readonly: boolean; // make component readonly\n @ViewChild(\"ddBtn\", { static: false }) origin: ElementRef;\n @ViewChild(\"input\", { static: false }) input: ElementRef;\n @ViewChild(\"dd\", { static: false }) dd: TemplateRef<Element>;\n @ContentChild(\"misCustomItem\", { static: false })\n customItem: TemplateRef<Element>;\n // tslint:disable-next-line\n @Output() onSelect: EventEmitter<IListData \| IListData[]> = new EventEmitter(true); // emit selected values\n searchInput: FormControl = new FormControl();\n data: IListData[] = [];\n opened = false;\n // tslint:disable-next-line\n selections: Map<string, any> = new Map();\n private searchSubscription: Subscription;\n private overlayRef: OverlayRef;\n controlSubscription: Subscription \| undefined;\n\n ngOnInit(): void {\n if (this.multi && !this.uniqueKey) {\n throw new Error(\"[uniqueKey] required in multi mode.\");\n }\n if (this.disabled) {\n this.searchInput.disable();\n }\n this.searchSubscription = this.searchInput.valueChanges\n .pipe(\n filter(val => val && val.length >= this.minInputLength),\n debounceTime(this.debounceTime),\n distinctUntilChanged()\n )\n .subscribe(res => {\n this.httpStream(res).subscribe(list => {\n this.data = list;\n if (!this.overlayRef?.hasAttached() && list.length > 0) {\n this.openDropdown(this.dd, this.origin.nativeElement);\n }\n });\n });\n if (this.control?.value) {\n this.handleControlChanges(this.control.value);\n }\n this.controlSubscription = this.control?.valueChanges.subscribe(this.handleControlChanges);\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes && changes.disabled) {\n this.searchInput.enable();\n if (this.disabled) {\n this.searchInput.disable();\n }\n }\n }\n\n ngOnDestroy(): void {\n this.searchSubscription?.unsubscribe();\n }\n\n private handleControlChanges = (values: IListData[]) => {\n values.forEach(el => {\n this.selectData(el, true);\n });\n // tslint:disable-next-line\n };\n\n private openDropdown(template: TemplateRef<Element>, origin: HTMLElement): void {\n const positionStrategy = this.overlay\n .position()\n .flexibleConnectedTo(origin)\n .withPositions([\n new ConnectionPositionPair({ originX: \"start\", originY: \"bottom\" }, { overlayX: \"start\", overlayY: \"top\" }),\n new ConnectionPositionPair({ originX: \"start\", originY: \"top\" }, { overlayX: \"start\", overlayY: \"bottom\" })\n ])\n .withPush(true);\n\n const configs = new OverlayConfig({\n hasBackdrop: true,\n backdropClass: \"cdk-overlay-transparent-backdrop\",\n scrollStrategy: this.overlay.scrollStrategies.reposition(),\n positionStrategy,\n width: origin.clientWidth\n });\n this.overlayRef = this.overlay.create(configs);\n this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));\n this.overlayRef.backdropClick().subscribe(res => {\n this.closeDropdown();\n });\n }\n\n /*\n closes the dropdown\n /\n closeDropdown(): void {\n this.opened = false;\n this.overlayRef?.detach();\n this.data = [];\n }\n\n /\n \n * @param item item to select\n * if item property disabled is set to true, selection will be disabled\n * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input\n /\n selectData(item: IListData, effectedFromOutside = true): void {\n if (item.disabled) {\n return;\n }\n if (!this.multi) {\n this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });\n this.setControlValue(item);\n } else {\n if (!this.selections.has(item[this.uniqueKey])) {\n this.selections.set(item[this.uniqueKey], item);\n }\n this.setControlValue(this.selectedItems);\n if (!effectedFromOutside) {\n setTimeout(() => {\n this.input.nativeElement.focus();\n this.input.nativeElement.scrollIntoView();\n }, 10);\n }\n this.searchInput.patchValue(\"\");\n this.data = [];\n }\n this.closeDropdown();\n }\n\n /\n \n * @param item remove item from selected list\n /\n removeItem(item: IListData): void {\n this.selections.delete(item[this.uniqueKey]);\n this.setControlValue(this.selectedItems);\n // tslint:disable-next-line\n this.input[\"nativeElement\"].focus();\n }\n\n private setControlValue(value: IListData): void {\n this.onSelect.emit(value);\n this.control?.patchValue(value, { emitEvent: false });\n }\n\n /\n @returns list of selected items\n */\n get selectedItems(): Array<IListData> {\n return Array.from(this.selections.values());\n }\n}\n","import { OverlayModule } from \"@angular/cdk/overlay\";\nimport { CommonModule } from \"@angular/common\";\nimport { NgModule } from \"@angular/core\";\nimport { FormsModule, ReactiveFormsModule } from \"@angular/forms\";\nimport { AsyncDropdownComponent } from \"./async-dropdown.component\";\n\n@NgModule({\n declarations: [AsyncDropdownComponent],\n imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],\n exports: [AsyncDropdownComponent]\n})\nexport class AsyncDropdownModule {}\n"]}

package/bundles/mis-crystal-design-system-button.umd.js CHANGED Viewed

@@ -6,13 +6,13 @@
     var ButtonComponent = /** @class */ (function () {
         function ButtonComponent() {
-            this.name = 'Enabled';
-            this.type = 'Solid';
-            this.size = 'Medium';
-            this.width = '';
+            this.name = "Enabled";
+            this.type = "Solid";
+            this.size = "Medium";
+            this.width = "";
             this.showIcon = false;
-            this.iconUrl = '';
-            this.iconPosition = 'Left';
+            this.iconUrl = "";
+            this.iconPosition = "Left";
             this.disabled = false;
             this.disableLeftBorderRadius = false;
             this.disableRightBorderRadius = false;
@@ -27,8 +27,8 @@
     }());
     ButtonComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'mis-button',
-                    template: "<button\n  (click)=\"onClick($event);\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    'solid': type === 'Solid',\n    'outline': type === 'Outline',\n    'text': type === 'Text',\n    'large': size === 'Large',\n    'medium': size === 'Medium',\n    'small': size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px': '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px': '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px': '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px': '',\n    'width': width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\">\n  </span>\n  {{name}}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\">\n  </span>\n</button>\n",
+                    selector: "mis-button",
+                    template: "<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  {{ name }}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n",
                     styles: ["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]
                 },] }
     ];
@@ -51,39 +51,39 @@
         function ButtonDirective(el, renderer) {
             this.el = el;
             this.renderer = renderer;
-            this.type = 'none';
-            this.size = 'md';
-            this.elementClass = 'mis-btn';
+            this.type = "none";
+            this.size = "md";
+            this.elementClass = "mis-btn";
         }
         ButtonDirective.prototype.ngAfterViewInit = function () {
             this.bindTypeClass();
             this.bindSizeClass();
         };
         ButtonDirective.prototype.bindTypeClass = function () {
-            var className = '';
+            var className = "";
             switch (this.type) {
-                case 'primary':
-                    className = 'mis-primary';
+                case "primary":
+                    className = "mis-primary";
                     break;
-                case 'outline':
-                    className = 'mis-outline';
+                case "outline":
+                    className = "mis-outline";
                     break;
                 default:
-                    className = 'mis-none';
+                    className = "mis-none";
             }
             this.renderer.addClass(this.el.nativeElement, className);
         };
         ButtonDirective.prototype.bindSizeClass = function () {
-            var className = '';
+            var className = "";
             switch (this.size) {
-                case 'lg':
-                    className = 'mis-btn-lg';
+                case "lg":
+                    className = "mis-btn-lg";
                     break;
-                case 'sm':
-                    className = 'mis-btn-sm';
+                case "sm":
+                    className = "mis-btn-sm";
                     break;
                 default:
-                    className = 'mis-btn-md';
+                    className = "mis-btn-md";
             }
             this.renderer.addClass(this.el.nativeElement, className);
         };
@@ -91,7 +91,7 @@
     }());
     ButtonDirective.decorators = [
         { type: core.Directive, args: [{
-                    selector: '[mis-button]',
+                    selector: "[mis-button]"
                 },] }
     ];
     ButtonDirective.ctorParameters = function () { return [
@@ -101,7 +101,7 @@
     ButtonDirective.propDecorators = {
         type: [{ type: core.Input }],
         size: [{ type: core.Input }],
-        elementClass: [{ type: core.HostBinding, args: ['class',] }]
+        elementClass: [{ type: core.HostBinding, args: ["class",] }]
     };
     var ButtonModule = /** @class */ (function () {

package/bundles/mis-crystal-design-system-button.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-button.umd.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef} from '@angular/core';\n\n@Component({\n selector: 'mis-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss']\n})\nexport class ButtonComponent implements OnInit{\n\n @Input() name: string = 'Enabled'\n @Input() type: 'Solid' \| 'Outline' \| 'Text' = 'Solid'\n @Input() size: 'Small' \| 'Medium' \| 'Large' \| 'Small-M' \| 'Large-M' = 'Medium'\n @Input() width: string = ''\n\n @Input() showIcon: boolean = false\n @Input() iconUrl: string = ''\n @Input() iconPosition: 'Left' \| 'Right' = 'Left'\n\n @Input() disabled: boolean = false\n @Input() disableLeftBorderRadius: boolean = false\n @Input() disableRightBorderRadius: boolean = false\n\n /** Emits event when button is clicked /\n @Output() click = new EventEmitter<any>()\n\n constructor(){}\n\n ngOnInit(){}\n\n onClick(event){\n this.click.emit(event)\n }\n}\n","import {\n AfterViewInit~~,\n~~ Directive~~,\n~~ ElementRef~~,\n~~ HostBinding~~,\n~~ Input~~,\n~~ Renderer2~~,\n~~} from '@angular/core';\n\n@Directive({\n selector: '[mis-button]~~',\~~n})\nexport class ButtonDirective implements AfterViewInit {\n @Input() type: 'primary' \| 'outline' \| 'none' = 'none';\n @Input() size: 'sm' \| 'md' \| 'lg' = 'md';\n @HostBinding('class') elementClass = 'mis-btn';\n\n constructor(private el: ElementRef, private renderer: Renderer2) { }\n\n ngAfterViewInit(): void {\n this.bindTypeClass();\n this.bindSizeClass();\n }\n\n private bindTypeClass(): void {\n let className = '';\n switch (this.type) {\n case 'primary':\n className = 'mis-primary';\n break;\n case 'outline':\n className = 'mis-outline';\n break;\n default:\n className = 'mis-none';\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n\n private bindSizeClass(): void {\n let className = '';\n switch (this.size) {\n case 'lg':\n className = 'mis-btn-lg';\n break;\n case 'sm':\n className = 'mis-btn-sm';\n break;\n default:\n className = 'mis-btn-md';\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonDirective } from './button.directive';\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n declarations: [ButtonComponent, ButtonDirective],\n imports: [CommonModule],\n exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n static forRoot(): ModuleWithProviders<ButtonModule> {\n return { ngModule: ButtonModule, providers: [] };\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n\nexport {ButtonDirective as ɵa} from './button.directive';"],"names":["EventEmitter","Component","Input","Output","Directive","ElementRef","Renderer2","HostBinding","NgModule","CommonModule"],"mappings":";;;;;;;~~QAyBE~~;YAhBS,SAAI,GAAW,SAAS,~~CAAA~~;~~YACxB~~,SAAI,GAAiC,OAAO,~~CAAA~~;~~YAC5C~~,SAAI,GAAyD,QAAQ,~~CAAA~~;~~YACrE~~,UAAK,GAAW,EAAE,~~CAAA~~;~~YAElB~~,aAAQ,GAAY,KAAK,~~CAAA~~;~~YACzB~~,YAAO,GAAW,EAAE,~~CAAA~~;~~YACpB~~,iBAAY,GAAqB,MAAM,~~CAAA~~;~~YAEvC~~,aAAQ,GAAY,KAAK,~~CAAA~~;~~YACzB~~,4BAAuB,GAAY,KAAK,~~CAAA~~;~~YACxC~~,6BAAwB,GAAY,KAAK,~~CAAA~~;;~~YAGxC~~,UAAK,GAAG,IAAIA,iBAAY,EAAO,~~CAAA~~;SAE1B;~~QAEf~~,kCAAQ,GAAR,~~eAAY~~;~~QAEZ~~,iCAAO,GAAP,UAAQ,KAAK;YACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,~~CAAA~~;~~SACvB~~;;;;~~gBA7BFC~~,cAAS,SAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,~~m9BAAsC~~;;iBAEvC;;;;~~uBAGEC~~,UAAK;uBACLA,UAAK;uBACLA,UAAK;wBACLA,UAAK;2BAELA,UAAK;0BACLA,UAAK;+BACLA,UAAK;2BAELA,UAAK;0CACLA,UAAK;2CACLA,UAAK;wBAGLC,WAAM;;;;~~QCNP~~,yBAAoB,EAAc,EAAU,QAAmB;YAA3C,OAAE,GAAF,EAAE,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;YAJtD,SAAI,GAAmC,MAAM,CAAC;YAC9C,SAAI,GAAuB,IAAI,CAAC;YACnB,iBAAY,GAAG,SAAS,CAAC;~~SAEqB~~;~~QAEpE~~,yCAAe,GAAf;YACE,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR;oBACE,SAAS,GAAG,UAAU,CAAC;aAC1B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR;oBACE,SAAS,GAAG,YAAY,CAAC;aAC5B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;;;;gBA3CFC,cAAS,SAAC;oBACT,QAAQ,EAAE,cAAc;iBACzB;;;~~gBARCC~~,eAAU;~~gBAGVC~~,cAAS;;;~~uBAORJ~~,UAAK;uBACLA,UAAK;+BACLK,gBAAW,SAAC,OAAO;;;;~~QCLtB~~;;QACS,oBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAClD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;oBAChD,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;iBAC5C;;;ICTD;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"mis-crystal-design-system-button.umd.js","sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts","../../../projects/mis-components/button/mis-crystal-design-system-button.ts"],"sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-button\",\n templateUrl: \"./button.component.html\",\n styleUrls: [\"./button.component.scss\"]\n})\nexport class ButtonComponent implements OnInit {\n @Input() name: string = \"Enabled\";\n @Input() type: \"Solid\" \| \"Outline\" \| \"Text\" = \"Solid\";\n @Input() size: \"Small\" \| \"Medium\" \| \"Large\" \| \"Small-M\" \| \"Large-M\" = \"Medium\";\n @Input() width: string = \"\";\n\n @Input() showIcon: boolean = false;\n @Input() iconUrl: string = \"\";\n @Input() iconPosition: \"Left\" \| \"Right\" = \"Left\";\n\n @Input() disabled: boolean = false;\n @Input() disableLeftBorderRadius: boolean = false;\n @Input() disableRightBorderRadius: boolean = false;\n\n /** Emits event when button is clicked /\n @Output() click = new EventEmitter<any>();\n\n constructor() {}\n\n ngOnInit() {}\n\n onClick(event) {\n this.click.emit(event);\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostBinding, Input, Renderer2 } from \"@angular/core\";\n\n@Directive({\n selector: \"[mis-button]\"\n})\nexport class ButtonDirective implements AfterViewInit {\n @Input() type: \"primary\" \| \"outline\" \| \"none\" = \"none\";\n @Input() size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n @HostBinding(\"class\") elementClass = \"mis-btn\";\n\n constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n ngAfterViewInit(): void {\n this.bindTypeClass();\n this.bindSizeClass();\n }\n\n private bindTypeClass(): void {\n let className = \"\";\n switch (this.type) {\n case \"primary\":\n className = \"mis-primary\";\n break;\n case \"outline\":\n className = \"mis-outline\";\n break;\n default:\n className = \"mis-none\";\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n\n private bindSizeClass(): void {\n let className = \"\";\n switch (this.size) {\n case \"lg\":\n className = \"mis-btn-lg\";\n break;\n case \"sm\":\n className = \"mis-btn-sm\";\n break;\n default:\n className = \"mis-btn-md\";\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ButtonDirective } from \"./button.directive\";\nimport { ButtonComponent } from \"./button.component\";\n\n@NgModule({\n declarations: [ButtonComponent, ButtonDirective],\n imports: [CommonModule],\n exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n static forRoot(): ModuleWithProviders<ButtonModule> {\n return { ngModule: ButtonModule, providers: [] };\n }\n}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n\nexport {ButtonDirective as ɵa} from './button.directive';"],"names":["EventEmitter","Component","Input","Output","Directive","ElementRef","Renderer2","HostBinding","NgModule","CommonModule"],"mappings":";;;;;;;QAwBE;YAhBS,SAAI,GAAW,SAAS,CAAC;YACzB,SAAI,GAAiC,OAAO,CAAC;YAC7C,SAAI,GAAyD,QAAQ,CAAC;YACtE,UAAK,GAAW,EAAE,CAAC;YAEnB,aAAQ,GAAY,KAAK,CAAC;YAC1B,YAAO,GAAW,EAAE,CAAC;YACrB,iBAAY,GAAqB,MAAM,CAAC;YAExC,aAAQ,GAAY,KAAK,CAAC;YAC1B,4BAAuB,GAAY,KAAK,CAAC;YACzC,6BAAwB,GAAY,KAAK,CAAC;;YAGzC,UAAK,GAAG,IAAIA,iBAAY,EAAO,CAAC;SAE1B;QAEhB,kCAAQ,GAAR,eAAa;QAEb,iCAAO,GAAP,UAAQ,KAAK;YACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACxB;;;;gBA5BFC,cAAS,SAAC;oBACT,QAAQ,EAAE,YAAY;oBACtB,88BAAsC;;iBAEvC;;;;uBAEEC,UAAK;uBACLA,UAAK;uBACLA,UAAK;wBACLA,UAAK;2BAELA,UAAK;0BACLA,UAAK;+BACLA,UAAK;2BAELA,UAAK;0CACLA,UAAK;2CACLA,UAAK;wBAGLC,WAAM;;;;QCZP,yBAAoB,EAAc,EAAU,QAAmB;YAA3C,OAAE,GAAF,EAAE,CAAY;YAAU,aAAQ,GAAR,QAAQ,CAAW;YAJtD,SAAI,GAAmC,MAAM,CAAC;YAC9C,SAAI,GAAuB,IAAI,CAAC;YACnB,iBAAY,GAAG,SAAS,CAAC;SAEoB;QAEnE,yCAAe,GAAf;YACE,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;SACtB;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR,KAAK,SAAS;oBACZ,SAAS,GAAG,aAAa,CAAC;oBAC1B,MAAM;gBACR;oBACE,SAAS,GAAG,UAAU,CAAC;aAC1B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;QAEO,uCAAa,GAAb;YACN,IAAI,SAAS,GAAG,EAAE,CAAC;YACnB,QAAQ,IAAI,CAAC,IAAI;gBACf,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR,KAAK,IAAI;oBACP,SAAS,GAAG,YAAY,CAAC;oBACzB,MAAM;gBACR;oBACE,SAAS,GAAG,YAAY,CAAC;aAC5B;YACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;SAC1D;;;;gBA3CFC,cAAS,SAAC;oBACT,QAAQ,EAAE,cAAc;iBACzB;;;gBAJkCC,eAAU;gBAAsBC,cAAS;;;uBAMzEJ,UAAK;uBACLA,UAAK;+BACLK,gBAAW,SAAC,OAAO;;;;QCEtB;;QACS,oBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SAClD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;oBAChD,OAAO,EAAE,CAACC,mBAAY,CAAC;oBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;iBAC5C;;;ICTD;;;;;;;;;;;;;;"}

package/bundles/mis-crystal-design-system-button.umd.min.js CHANGED Viewed

@@ -1,2 +1,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/button",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].button={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var i=function(){function e(){this.name="Enabled",this.type="Solid",this.size="Medium",this.width="",this.showIcon=!1,this.iconUrl="",this.iconPosition="Left",this.disabled=!1,this.disableLeftBorderRadius=!1,this.disableRightBorderRadius=!1,this.click=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.onClick=function(e){this.click.emit(e)},e}();i.decorators=[{type:t.Component,args:[{selector:"mis-button",template:"<button\n  (click)=\"onClick($event);\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    'solid': type === 'Solid',\n    'outline': type === 'Outline',\n    'text': type === 'Text',\n    'large': size === 'Large',\n    'medium': size === 'Medium',\n    'small': size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px': '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px': '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px': '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px': '',\n    'width': width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\">\n  </span>\n  {{name}}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\">\n  </span>\n</button>\n",styles:["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={name:[{type:t.Input}],type:[{type:t.Input}],size:[{type:t.Input}],width:[{type:t.Input}],showIcon:[{type:t.Input}],iconUrl:[{type:t.Input}],iconPosition:[{type:t.Input}],disabled:[{type:t.Input}],disableLeftBorderRadius:[{type:t.Input}],disableRightBorderRadius:[{type:t.Input}],click:[{type:t.Output}]};var o=function(){function e(e,t){this.el=e,this.renderer=t,this.type="none",this.size="md",this.elementClass="mis-btn"}return e.prototype.ngAfterViewInit=function(){this.bindTypeClass(),this.bindSizeClass()},e.prototype.bindTypeClass=function(){var e="";switch(this.type){case"primary":e="mis-primary";break;case"outline":e="mis-outline";break;default:e="mis-none"}this.renderer.addClass(this.el.nativeElement,e)},e.prototype.bindSizeClass=function(){var e="";switch(this.size){case"lg":e="mis-btn-lg";break;case"sm":e="mis-btn-sm";break;default:e="mis-btn-md"}this.renderer.addClass(this.el.nativeElement,e)},e}();o.decorators=[{type:t.Directive,args:[{selector:"[mis-button]"}]}],o.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},o.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],elementClass:[{type:t.HostBinding,args:["class"]}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:t.NgModule,args:[{declarations:[i,o],imports:[n.CommonModule],exports:[i,o]}]}],e.ButtonComponent=i,e.ButtonModule=r,e.ɵa=o,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("mis-crystal-design-system/button",["exports","@angular/core","@angular/common"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self)["mis-crystal-design-system"]=e["mis-crystal-design-system"]||{},e["mis-crystal-design-system"].button={}),e.ng.core,e.ng.common)}(this,(function(e,t,n){"use strict";var i=function(){function e(){this.name="Enabled",this.type="Solid",this.size="Medium",this.width="",this.showIcon=!1,this.iconUrl="",this.iconPosition="Left",this.disabled=!1,this.disableLeftBorderRadius=!1,this.disableRightBorderRadius=!1,this.click=new t.EventEmitter}return e.prototype.ngOnInit=function(){},e.prototype.onClick=function(e){this.click.emit(e)},e}();i.decorators=[{type:t.Component,args:[{selector:"mis-button",template:"<button\n  (click)=\"onClick($event)\"\n  [disabled]=\"disabled\"\n  [ngClass]=\"{\n    solid: type === 'Solid',\n    outline: type === 'Outline',\n    text: type === 'Text',\n    large: size === 'Large',\n    medium: size === 'Medium',\n    small: size === 'Small',\n    'large-mobile': size === 'Large-M',\n    'small-mobile': size === 'Small-M'\n  }\"\n  [ngStyle]=\"{\n    'border-top-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-bottom-left-radius': disableLeftBorderRadius ? '0px' : '',\n    'border-top-right-radius': disableRightBorderRadius ? '0px' : '',\n    'border-bottom-right-radius': disableRightBorderRadius ? '0px' : '',\n    width: width\n  }\"\n>\n  <span id=\"left-icon\" *ngIf=\"showIcon && iconPosition === 'Left'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n  {{ name }}\n  <span id=\"right-icon\" *ngIf=\"showIcon && iconPosition === 'Right'\">\n    <img [src]=\"iconUrl\" alt=\"\" />\n  </span>\n</button>\n",styles:["button{font-family:Lato,sans-serif!important;border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#181f33;background-color:#fff}.solid{color:#fff;background:#0937b2}.solid:hover:enabled{background:#062a99}.solid:active:enabled{background:#041f80}.solid:disabled{color:#929dab;background:#f5f5f5}.outline{border:1px solid #0937b2;color:#0937b2;background:#fff}.outline:hover:enabled{background:#f0f3fa}.outline:active:enabled{background:#dae1f3}.outline:disabled{color:#929dab;border:1px solid #929dab}.text{color:#181f33;background:#fff}.text:hover:enabled{background:#f0f3fa}.text:active:enabled{background:#dae1f3}.text:disabled{color:#929dab}.large{height:56px;padding:16px;border-radius:10px;font-weight:700;letter-spacing:.5px}.large,.medium{font-style:normal;font-size:16px;line-height:24px}.medium{height:44px;padding:10px 16px;border-radius:8px;font-weight:400;letter-spacing:.2px}.small{height:32px;padding:6px 16px;border-radius:6px;font-weight:400;letter-spacing:.25px}.large-mobile,.small{font-style:normal;font-size:14px;line-height:20px}.large-mobile{height:44px;padding:12px}.large-mobile,.small-mobile{border-radius:8px;font-weight:700;letter-spacing:.1px}.small-mobile{height:32px;padding:6px 12px;font-style:normal;font-size:14px;line-height:20px}span{display:flex;justify-content:center;align-items:center}#left-icon{margin-right:8px}#right-icon{margin-left:8px}"]}]}],i.ctorParameters=function(){return[]},i.propDecorators={name:[{type:t.Input}],type:[{type:t.Input}],size:[{type:t.Input}],width:[{type:t.Input}],showIcon:[{type:t.Input}],iconUrl:[{type:t.Input}],iconPosition:[{type:t.Input}],disabled:[{type:t.Input}],disableLeftBorderRadius:[{type:t.Input}],disableRightBorderRadius:[{type:t.Input}],click:[{type:t.Output}]};var o=function(){function e(e,t){this.el=e,this.renderer=t,this.type="none",this.size="md",this.elementClass="mis-btn"}return e.prototype.ngAfterViewInit=function(){this.bindTypeClass(),this.bindSizeClass()},e.prototype.bindTypeClass=function(){var e="";switch(this.type){case"primary":e="mis-primary";break;case"outline":e="mis-outline";break;default:e="mis-none"}this.renderer.addClass(this.el.nativeElement,e)},e.prototype.bindSizeClass=function(){var e="";switch(this.size){case"lg":e="mis-btn-lg";break;case"sm":e="mis-btn-sm";break;default:e="mis-btn-md"}this.renderer.addClass(this.el.nativeElement,e)},e}();o.decorators=[{type:t.Directive,args:[{selector:"[mis-button]"}]}],o.ctorParameters=function(){return[{type:t.ElementRef},{type:t.Renderer2}]},o.propDecorators={type:[{type:t.Input}],size:[{type:t.Input}],elementClass:[{type:t.HostBinding,args:["class"]}]};var r=function(){function e(){}return e.forRoot=function(){return{ngModule:e,providers:[]}},e}();r.decorators=[{type:t.NgModule,args:[{declarations:[i,o],imports:[n.CommonModule],exports:[i,o]}]}],e.ButtonComponent=i,e.ButtonModule=r,e.ɵa=o,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=mis-crystal-design-system-button.umd.min.js.map

package/bundles/mis-crystal-design-system-button.umd.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts"],"names":["ButtonComponent","this","name","type","size","width","showIcon","iconUrl","iconPosition","disabled","disableLeftBorderRadius","disableRightBorderRadius","click","EventEmitter","prototype","ngOnInit","onClick","event","emit","Component","args","selector","template","Input","Output","ButtonDirective","el","renderer","elementClass","ngAfterViewInit","bindTypeClass","bindSizeClass","className","addClass","nativeElement","Directive","ElementRef","Renderer2","HostBinding","ButtonModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","exports"],"mappings":"~~mfAyBE~~,SAAAA,IAhBSC,KAAAC,KAAe,UACfD,KAAAE,KAAqC,QACrCF,KAAAG,KAA6D,SAC7DH,KAAAI,MAAgB,GAEhBJ,KAAAK,UAAoB,EACpBL,KAAAM,QAAkB,GAClBN,KAAAO,aAAiC,OAEjCP,KAAAQ,UAAoB,EACpBR,KAAAS,yBAAmC,EACnCT,KAAAU,0BAAoC,EAGnCV,KAAAW,MAAQ,IAAIC,EAAAA,oBAItBb,EAAAc,UAAAC,SAAA,aAEAf,EAAAc,UAAAE,QAAA,SAAQC,GACNhB,KAAKW,MAAMM,KAAKD,~~6BA5BnBE~~,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,aACVC,SAAA,~~y7EAKCC~~,EAAAA,oBACAA,EAAAA,oBACAA,EAAAA,qBACAA,EAAAA,wBAEAA,EAAAA,uBACAA,EAAAA,4BACAA,EAAAA,wBAEAA,EAAAA,uCACAA,EAAAA,wCACAA,EAAAA,qBAGAC,EAAAA,~~2BCND~~,SAAAC,EAAoBC,EAAwBC,GAAxB1B,KAAAyB,GAAAA,EAAwBzB,KAAA0B,SAAAA,EAJnC1B,KAAAE,KAAuC,OACvCF,KAAAG,KAA2B,KACdH,KAAA2B,aAAe,iBAIrCH,EAAAX,UAAAe,gBAAA,WACE5B,KAAK6B,gBACL7B,KAAK8B,iBAGCN,EAAAX,UAAAgB,cAAA,WACN,IAAIE,EAAY,GAChB,OAAQ/B,KAAKE,MACX,IAAK,UACH6B,EAAY,cACZ,MACF,IAAK,UACHA,EAAY,cACZ,MACF,QACEA,EAAY,WAEhB/B,KAAK0B,SAASM,SAAShC,KAAKyB,GAAGQ,cAAeF,IAGxCP,EAAAX,UAAAiB,cAAA,WACN,IAAIC,EAAY,GAChB,OAAQ/B,KAAKG,MACX,IAAK,KACH4B,EAAY,aACZ,MACF,IAAK,KACHA,EAAY,aACZ,MACF,QACEA,EAAY,aAEhB/B,KAAK0B,SAASM,SAAShC,KAAKyB,GAAGQ,cAAeF,6BA1CjDG,EAAAA,UAASf,KAAA,CAAC,CACTC,SAAU,~~4DAPVe~~,EAAAA,~~kBAGAC~~,EAAAA,~~2CAOCd~~,EAAAA,oBACAA,EAAAA,4BACAe,EAAAA,YAAWlB,KAAA,CAAC,~~6BCLf~~,SAAAmB,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAcG,UAAW,8BAP/CC,EAAAA,SAAQvB,KAAA,CAAC,CACRwB,aAAc,CAAC5C,EAAiByB,GAChCoB,QAAS,CAACC,EAAAA,cACVC,QAAS,CAAC/C,EAAiByB","sourcesContent":["import {Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef} from '@angular/core';\n\n@Component({\n selector: 'mis-button',\n templateUrl: './button.component.html',\n styleUrls: ['./button.component.scss']\n})\nexport class ButtonComponent implements OnInit{\n\n @Input() name: string = 'Enabled'\n @Input() type: 'Solid' \| 'Outline' \| 'Text' = 'Solid'\n @Input() size: 'Small' \| 'Medium' \| 'Large' \| 'Small-M' \| 'Large-M' = 'Medium'\n @Input() width: string = ''\n\n @Input() showIcon: boolean = false\n @Input() iconUrl: string = ''\n @Input() iconPosition: 'Left' \| 'Right' = 'Left'\n\n @Input() disabled: boolean = false\n @Input() disableLeftBorderRadius: boolean = false\n @Input() disableRightBorderRadius: boolean = false\n\n /** Emits event when button is clicked */\n @Output() click = new EventEmitter<any>()\n\n constructor(){}\n\n ngOnInit(){}\n\n onClick(event){\n this.click.emit(event)\n }\n}\n","import {\n AfterViewInit~~,\n~~ Directive~~,\n~~ ElementRef~~,\n~~ HostBinding~~,\n~~ Input~~,\n~~ Renderer2~~,\n~~} from '@angular/core';\n\n@Directive({\n selector: '[mis-button]~~',\~~n})\nexport class ButtonDirective implements AfterViewInit {\n @Input() type: 'primary' \| 'outline' \| 'none' = 'none';\n @Input() size: 'sm' \| 'md' \| 'lg' = 'md';\n @HostBinding('class') elementClass = 'mis-btn';\n\n constructor(private el: ElementRef, private renderer: Renderer2) { }\n\n ngAfterViewInit(): void {\n this.bindTypeClass();\n this.bindSizeClass();\n }\n\n private bindTypeClass(): void {\n let className = '';\n switch (this.type) {\n case 'primary':\n className = 'mis-primary';\n break;\n case 'outline':\n className = 'mis-outline';\n break;\n default:\n className = 'mis-none';\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n\n private bindSizeClass(): void {\n let className = '';\n switch (this.size) {\n case 'lg':\n className = 'mis-btn-lg';\n break;\n case 'sm':\n className = 'mis-btn-sm';\n break;\n default:\n className = 'mis-btn-md';\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { ButtonDirective } from './button.directive';\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n declarations: [ButtonComponent, ButtonDirective],\n imports: [CommonModule],\n exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n static forRoot(): ModuleWithProviders<ButtonModule> {\n return { ngModule: ButtonModule, providers: [] };\n }\n}\n"]}
1	+ {"version":3,"sources":["../../../projects/mis-components/button/button.component.ts","../../../projects/mis-components/button/button.directive.ts","../../../projects/mis-components/button/button.module.ts"],"names":["ButtonComponent","this","name","type","size","width","showIcon","iconUrl","iconPosition","disabled","disableLeftBorderRadius","disableRightBorderRadius","click","EventEmitter","prototype","ngOnInit","onClick","event","emit","Component","args","selector","template","Input","Output","ButtonDirective","el","renderer","elementClass","ngAfterViewInit","bindTypeClass","bindSizeClass","className","addClass","nativeElement","Directive","ElementRef","Renderer2","HostBinding","ButtonModule","forRoot","ngModule","providers","NgModule","declarations","imports","CommonModule","exports"],"mappings":"mfAwBE,SAAAA,IAhBSC,KAAAC,KAAe,UACfD,KAAAE,KAAqC,QACrCF,KAAAG,KAA6D,SAC7DH,KAAAI,MAAgB,GAEhBJ,KAAAK,UAAoB,EACpBL,KAAAM,QAAkB,GAClBN,KAAAO,aAAiC,OAEjCP,KAAAQ,UAAoB,EACpBR,KAAAS,yBAAmC,EACnCT,KAAAU,0BAAoC,EAGnCV,KAAAW,MAAQ,IAAIC,EAAAA,oBAItBb,EAAAc,UAAAC,SAAA,aAEAf,EAAAc,UAAAE,QAAA,SAAQC,GACNhB,KAAKW,MAAMM,KAAKD,6BA3BnBE,EAAAA,UAASC,KAAA,CAAC,CACTC,SAAU,aACVC,SAAA,o7EAICC,EAAAA,oBACAA,EAAAA,oBACAA,EAAAA,qBACAA,EAAAA,wBAEAA,EAAAA,uBACAA,EAAAA,4BACAA,EAAAA,wBAEAA,EAAAA,uCACAA,EAAAA,wCACAA,EAAAA,qBAGAC,EAAAA,2BCZD,SAAAC,EAAoBC,EAAwBC,GAAxB1B,KAAAyB,GAAAA,EAAwBzB,KAAA0B,SAAAA,EAJnC1B,KAAAE,KAAuC,OACvCF,KAAAG,KAA2B,KACdH,KAAA2B,aAAe,iBAIrCH,EAAAX,UAAAe,gBAAA,WACE5B,KAAK6B,gBACL7B,KAAK8B,iBAGCN,EAAAX,UAAAgB,cAAA,WACN,IAAIE,EAAY,GAChB,OAAQ/B,KAAKE,MACX,IAAK,UACH6B,EAAY,cACZ,MACF,IAAK,UACHA,EAAY,cACZ,MACF,QACEA,EAAY,WAEhB/B,KAAK0B,SAASM,SAAShC,KAAKyB,GAAGQ,cAAeF,IAGxCP,EAAAX,UAAAiB,cAAA,WACN,IAAIC,EAAY,GAChB,OAAQ/B,KAAKG,MACX,IAAK,KACH4B,EAAY,aACZ,MACF,IAAK,KACHA,EAAY,aACZ,MACF,QACEA,EAAY,aAEhB/B,KAAK0B,SAASM,SAAShC,KAAKyB,GAAGQ,cAAeF,6BA1CjDG,EAAAA,UAASf,KAAA,CAAC,CACTC,SAAU,4DAHuBe,EAAAA,kBAAgCC,EAAAA,2CAMhEd,EAAAA,oBACAA,EAAAA,4BACAe,EAAAA,YAAWlB,KAAA,CAAC,6BCEf,SAAAmB,YACSA,EAAAC,QAAP,WACE,MAAO,CAAEC,SAAUF,EAAcG,UAAW,8BAP/CC,EAAAA,SAAQvB,KAAA,CAAC,CACRwB,aAAc,CAAC5C,EAAiByB,GAChCoB,QAAS,CAACC,EAAAA,cACVC,QAAS,CAAC/C,EAAiByB","sourcesContent":["import { Component, Input, OnInit, Output, EventEmitter, ContentChild, TemplateRef } from \"@angular/core\";\n\n@Component({\n selector: \"mis-button\",\n templateUrl: \"./button.component.html\",\n styleUrls: [\"./button.component.scss\"]\n})\nexport class ButtonComponent implements OnInit {\n @Input() name: string = \"Enabled\";\n @Input() type: \"Solid\" \| \"Outline\" \| \"Text\" = \"Solid\";\n @Input() size: \"Small\" \| \"Medium\" \| \"Large\" \| \"Small-M\" \| \"Large-M\" = \"Medium\";\n @Input() width: string = \"\";\n\n @Input() showIcon: boolean = false;\n @Input() iconUrl: string = \"\";\n @Input() iconPosition: \"Left\" \| \"Right\" = \"Left\";\n\n @Input() disabled: boolean = false;\n @Input() disableLeftBorderRadius: boolean = false;\n @Input() disableRightBorderRadius: boolean = false;\n\n /** Emits event when button is clicked */\n @Output() click = new EventEmitter<any>();\n\n constructor() {}\n\n ngOnInit() {}\n\n onClick(event) {\n this.click.emit(event);\n }\n}\n","import { AfterViewInit, Directive, ElementRef, HostBinding, Input, Renderer2 } from \"@angular/core\";\n\n@Directive({\n selector: \"[mis-button]\"\n})\nexport class ButtonDirective implements AfterViewInit {\n @Input() type: \"primary\" \| \"outline\" \| \"none\" = \"none\";\n @Input() size: \"sm\" \| \"md\" \| \"lg\" = \"md\";\n @HostBinding(\"class\") elementClass = \"mis-btn\";\n\n constructor(private el: ElementRef, private renderer: Renderer2) {}\n\n ngAfterViewInit(): void {\n this.bindTypeClass();\n this.bindSizeClass();\n }\n\n private bindTypeClass(): void {\n let className = \"\";\n switch (this.type) {\n case \"primary\":\n className = \"mis-primary\";\n break;\n case \"outline\":\n className = \"mis-outline\";\n break;\n default:\n className = \"mis-none\";\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n\n private bindSizeClass(): void {\n let className = \"\";\n switch (this.size) {\n case \"lg\":\n className = \"mis-btn-lg\";\n break;\n case \"sm\":\n className = \"mis-btn-sm\";\n break;\n default:\n className = \"mis-btn-md\";\n }\n this.renderer.addClass(this.el.nativeElement, className);\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { CommonModule } from \"@angular/common\";\nimport { ButtonDirective } from \"./button.directive\";\nimport { ButtonComponent } from \"./button.component\";\n\n@NgModule({\n declarations: [ButtonComponent, ButtonDirective],\n imports: [CommonModule],\n exports: [ButtonComponent, ButtonDirective]\n})\nexport class ButtonModule {\n static forRoot(): ModuleWithProviders<ButtonModule> {\n return { ngModule: ButtonModule, providers: [] };\n }\n}\n"]}

package/bundles/mis-crystal-design-system-checkbox.umd.js CHANGED Viewed

@@ -8,13 +8,13 @@
         function CheckboxComponent() {
             this.isError = false;
             this.isIndeterminate = false;
-            this.name = '';
+            this.name = "";
             this.formControl = new forms.FormControl();
             this.valueChange = new core.EventEmitter();
         }
         Object.defineProperty(CheckboxComponent.prototype, "type", {
             set: function (value) {
-                this.isError = value === 'Error';
+                this.isError = value === "Error";
             },
             enumerable: false,
             configurable: true
@@ -60,8 +60,7 @@
             enumerable: false,
             configurable: true
         });
-        CheckboxComponent.prototype.ngOnInit = function () {
-        };
+        CheckboxComponent.prototype.ngOnInit = function () { };
         CheckboxComponent.prototype.toggleState = function () {
             if (this.isIndeterminate) {
                 this.isIndeterminate = false;
@@ -82,14 +81,14 @@
     }());
     CheckboxComponent.decorators = [
         { type: core.Component, args: [{
-                    selector: 'mis-checkbox',
+                    selector: "mis-checkbox",
                     template: "<div\n  class=\"checkbox-container\"\n  [ngStyle]=\"{ cursor: formControl.disabled ? 'not-allowed' : 'pointer' }\"\n  (click)=\"!formControl.disabled && toggleState()\"\n>\n  <input hidden type=\"checkbox\" [formControl]=\"formControl\" (click)=\"$event.stopPropagation()\" />\n  <span\n    class=\"checkmark\"\n    tabindex=\"0\"\n    *ngIf=\"!isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n  <span\n    class=\"checkmark indeterminate\"\n    tabindex=\"0\"\n    *ngIf=\"isIndeterminate\"\n    [ngClass]=\"{\n      'disabled-checkbox': formControl.disabled,\n      error: isError && !formControl.disabled\n    }\"\n  ></span>\n</div>\n",
                     styles: [".checkbox-container{height:20px;width:20px;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:sub}.checkbox-container input{opacity:0;cursor:pointer}.checkbox-container input,.checkmark{position:absolute;height:20px;width:20px}.checkmark{display:flex;justify-content:center;align-items:center;top:0;left:0;border-radius:4px;background-color:#fff;border:2px solid #6a737d;box-sizing:border-box}.checkmark:hover{border-color:#929dab}.checkmark:focus,.checkmark:focus-within{box-shadow:0 0 0 .09em #fff,0 0 .01em .2em #0937b2;outline:none}.checkbox-container input:checked~.checkmark{background-color:#0937b2;border-color:#0937b2}.checkbox-container input:checked~.checkmark.disabled-checkbox{background-color:#c8cdd3;border-color:#c8cdd3}.checkmark:after{content:\"\";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .checkmark.indeterminate:after{top:2px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.disabled-checkbox{pointer-events:none;border-color:#c8cdd3}.error{border-color:#b00020}.checkbox-container input:checked~.error.checkmark{border:#b00020!important;background:#b00020!important}.checkbox-container .error.checkmark:after{top:3px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox-container .error.checkmark.indeterminate:after{top:4px;width:2px;height:0;border:solid #fff;border-width:0 0 12px;border-radius:14px;transform:rotate(90deg);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg)}.error:focus,.error:focus-within{box-shadow:none!important;outline:none}"]
                 },] }
     ];
     CheckboxComponent.ctorParameters = function () { return []; };
     CheckboxComponent.propDecorators = {
-        inputBox: [{ type: core.ViewChild, args: ['input',] }],
+        inputBox: [{ type: core.ViewChild, args: ["input",] }],
         type: [{ type: core.Input }],
         indeterminate: [{ type: core.Input }],
         checked: [{ type: core.Input }],

package/bundles/mis-crystal-design-system-checkbox.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mis-crystal-design-system-checkbox.umd.js","sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts","../../../projects/mis-components/checkbox/mis-crystal-design-system-checkbox.ts"],"sourcesContent":["import {Component, OnInit, EventEmitter, Input, Output, ViewChild, ElementRef, Renderer2} from '@angular/core';\nimport {AbstractControl, FormControl} from '@angular/forms';\n\n@Component({\n selector: 'mis-checkbox',\n templateUrl: './checkbox.component.html',\n styleUrls: ['./checkbox.component.scss']\n})\nexport class CheckboxComponent implements OnInit {\n\n public isError: boolean = false\n public isIndeterminate: boolean = false\n\n @ViewChild('input') inputBox: ElementRef\n @Input() set type(value: 'Default' \| 'Error') {\n this.isError = value === 'Error';\n }\n @Input() set indeterminate(value: boolean){\n if(value) {\n this.formControl.setValue(true)\n this.valueChange.emit({\n name: this.name,\n value: true\n })\n }\n else{\n this.formControl.setValue(false)\n this.valueChange.emit({\n name: this.name,\n value: false\n })\n }\n this.isIndeterminate = value\n }\n @Input() set checked(value: boolean){\n if(value)this.formControl.setValue(true)\n else this.formControl.setValue(false)\n }\n @Input() set disabled(value: boolean){\n if(value) this.formControl.disable()\n else this.formControl.enable()\n }\n @Input() name: string = ''\n @Input() formControl: AbstractControl = new FormControl()\n @Output() valueChange = new EventEmitter<{name: string, value: boolean}>()\n\n constructor() {}\n ngOnInit() {\n }\n\n toggleState() {\n if(this.isIndeterminate) {\n this.isIndeterminate = false;\n this.formControl.setValue(true)\n } else {\n if(this.formControl.value) this.formControl.setValue(false)\n else this.formControl.setValue(true)\n }\n this.valueChange.emit({\n name: this.name,\n value: this.formControl.value\n });\n }\n\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport {ReactiveFormsModule} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\nimport { CheckboxComponent } from './checkbox.component';\n\n\n@NgModule({\n declarations: [CheckboxComponent],\n imports: [CommonModule, ReactiveFormsModule],\n exports: [CheckboxComponent]\n})\nexport class CheckboxModule {\n static forRoot(): ModuleWithProviders<CheckboxModule> {\n return { ngModule: CheckboxModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["FormControl","EventEmitter","Component","ViewChild","Input","Output","NgModule","CommonModule","ReactiveFormsModule"],"mappings":";;;;;;;~~QA8CE~~;~~YApCO~~,YAAO,GAAY,KAAK,~~CAAA~~;~~YACxB~~,oBAAe,GAAY,KAAK,~~CAAA~~;~~YA+B9B~~,SAAI,GAAW,EAAE,~~CAAA~~;~~YACjB~~,gBAAW,GAAoB,IAAIA,iBAAW,EAAE,~~CAAA~~;~~YAC/C~~,gBAAW,GAAG,IAAIC,iBAAY,~~EAAkC~~,~~CAAA~~;~~SAE1D~~;~~QAhChB~~,sBAAa,mCAAI;iBAAjB,UAAkB,KAA0B;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC;aAClC;;;WAAA;QACD,sBAAa,4CAAa;iBAA1B,UAA2B,KAAc;gBACvC,~~IAAG~~,KAAK,EAAE;~~oBACR~~,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,~~CAAA~~;~~oBAC/B~~,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;wBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,KAAK,EAAE,IAAI;qBACZ,CAAC,~~CAAA~~;~~iBACH~~;~~qBACG~~;~~oBACF~~,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,~~CAAA~~;~~oBAChC~~,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;wBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,KAAK,EAAE,KAAK;qBACb,CAAC,~~CAAA~~;~~iBACH~~;gBACD,IAAI,CAAC,eAAe,GAAG,KAAK,~~CAAA~~;~~aAC7B~~;;;WAAA;QACD,sBAAa,sCAAO;iBAApB,UAAqB,KAAc;gBACjC,~~IAAG~~,KAAK;~~oBAAC~~,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,~~CAAA~~;;~~oBACnC~~,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,~~CAAA~~;~~aACtC~~;;;WAAA;QACD,sBAAa,uCAAQ;iBAArB,UAAsB,KAAc;gBAClC,~~IAAG~~,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,~~CAAA~~;;~~oBAC/B~~,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,~~CAAA~~;~~aAC/B~~;;;WAAA;QAMD,oCAAQ,GAAR;~~SACC;QAED~~,uCAAW,GAAX;YACE,~~IAAG~~,IAAI,CAAC,eAAe,EAAE;~~gBACvB~~,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;gBAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,~~CAAA~~;~~aAChC~~;iBAAM;gBACL,~~IAAG~~,IAAI,CAAC,WAAW,CAAC,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,~~CAAA~~;;~~oBACtD~~,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,~~CAAA~~;~~aACrC~~;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;aAC9B,CAAC,CAAC;SACJ;;;;~~gBA3DFC~~,cAAS,SAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,qvBAAwC;;iBAEzC;;;;~~2BAMEC~~,cAAS,SAAC,OAAO;uBACjBC,UAAK;gCAGLA,UAAK;~~0BAiBLA~~,UAAK;2BAILA,UAAK;uBAILA,UAAK;8BACLA,UAAK;8BACLC,WAAM;;;;~~QChCT~~;;QACS,sBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SACpD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAACC,mBAAY,EAAEC,yBAAmB,CAAC;oBAC5C,OAAO,EAAE,CAAC,iBAAiB,CAAC;iBAC7B;;;~~ICXD~~;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"mis-crystal-design-system-checkbox.umd.js","sources":["../../../projects/mis-components/checkbox/checkbox.component.ts","../../../projects/mis-components/checkbox/checkbox.module.ts","../../../projects/mis-components/checkbox/mis-crystal-design-system-checkbox.ts"],"sourcesContent":["import { Component, OnInit, EventEmitter, Input, Output, ViewChild, ElementRef, Renderer2 } from \"@angular/core\";\nimport { AbstractControl, FormControl } from \"@angular/forms\";\n\n@Component({\n selector: \"mis-checkbox\",\n templateUrl: \"./checkbox.component.html\",\n styleUrls: [\"./checkbox.component.scss\"]\n})\nexport class CheckboxComponent implements OnInit {\n public isError: boolean = false;\n public isIndeterminate: boolean = false;\n\n @ViewChild(\"input\") inputBox: ElementRef;\n @Input() set type(value: \"Default\" \| \"Error\") {\n this.isError = value === \"Error\";\n }\n @Input() set indeterminate(value: boolean) {\n if (value) {\n this.formControl.setValue(true);\n this.valueChange.emit({\n name: this.name,\n value: true\n });\n } else {\n this.formControl.setValue(false);\n this.valueChange.emit({\n name: this.name,\n value: false\n });\n }\n this.isIndeterminate = value;\n }\n @Input() set checked(value: boolean) {\n if (value) this.formControl.setValue(true);\n else this.formControl.setValue(false);\n }\n @Input() set disabled(value: boolean) {\n if (value) this.formControl.disable();\n else this.formControl.enable();\n }\n @Input() name: string = \"\";\n @Input() formControl: AbstractControl = new FormControl();\n @Output() valueChange = new EventEmitter<{ name: string; value: boolean }>();\n\n constructor() {}\n ngOnInit() {}\n\n toggleState() {\n if (this.isIndeterminate) {\n this.isIndeterminate = false;\n this.formControl.setValue(true);\n } else {\n if (this.formControl.value) this.formControl.setValue(false);\n else this.formControl.setValue(true);\n }\n this.valueChange.emit({\n name: this.name,\n value: this.formControl.value\n });\n }\n}\n","import { NgModule, ModuleWithProviders } from \"@angular/core\";\nimport { ReactiveFormsModule } from \"@angular/forms\";\nimport { CommonModule } from \"@angular/common\";\n\nimport { CheckboxComponent } from \"./checkbox.component\";\n\n@NgModule({\n declarations: [CheckboxComponent],\n imports: [CommonModule, ReactiveFormsModule],\n exports: [CheckboxComponent]\n})\nexport class CheckboxModule {\n static forRoot(): ModuleWithProviders<CheckboxModule> {\n return { ngModule: CheckboxModule, providers: [] };\n }\n}\n","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":["FormControl","EventEmitter","Component","ViewChild","Input","Output","NgModule","CommonModule","ReactiveFormsModule"],"mappings":";;;;;;;QA4CE;YAnCO,YAAO,GAAY,KAAK,CAAC;YACzB,oBAAe,GAAY,KAAK,CAAC;YA8B/B,SAAI,GAAW,EAAE,CAAC;YAClB,gBAAW,GAAoB,IAAIA,iBAAW,EAAE,CAAC;YAChD,gBAAW,GAAG,IAAIC,iBAAY,EAAoC,CAAC;SAE7D;QA/BhB,sBAAa,mCAAI;iBAAjB,UAAkB,KAA0B;gBAC1C,IAAI,CAAC,OAAO,GAAG,KAAK,KAAK,OAAO,CAAC;aAClC;;;WAAA;QACD,sBAAa,4CAAa;iBAA1B,UAA2B,KAAc;gBACvC,IAAI,KAAK,EAAE;oBACT,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;oBAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;wBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,KAAK,EAAE,IAAI;qBACZ,CAAC,CAAC;iBACJ;qBAAM;oBACL,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;oBACjC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;wBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;wBACf,KAAK,EAAE,KAAK;qBACb,CAAC,CAAC;iBACJ;gBACD,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;aAC9B;;;WAAA;QACD,sBAAa,sCAAO;iBAApB,UAAqB,KAAc;gBACjC,IAAI,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;;oBACtC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;aACvC;;;WAAA;QACD,sBAAa,uCAAQ;iBAArB,UAAsB,KAAc;gBAClC,IAAI,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;;oBACjC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;aAChC;;;WAAA;QAMD,oCAAQ,GAAR,eAAa;QAEb,uCAAW,GAAX;YACE,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;gBAC7B,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aACjC;iBAAM;gBACL,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK;oBAAE,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;;oBACxD,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;aACtC;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,KAAK;aAC9B,CAAC,CAAC;SACJ;;;;gBAxDFC,cAAS,SAAC;oBACT,QAAQ,EAAE,cAAc;oBACxB,qvBAAwC;;iBAEzC;;;;2BAKEC,cAAS,SAAC,OAAO;uBACjBC,UAAK;gCAGLA,UAAK;0BAgBLA,UAAK;2BAILA,UAAK;uBAILA,UAAK;8BACLA,UAAK;8BACLC,WAAM;;;;QC/BT;;QACS,sBAAO,GAAd;YACE,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;SACpD;;;;gBARFC,aAAQ,SAAC;oBACR,YAAY,EAAE,CAAC,iBAAiB,CAAC;oBACjC,OAAO,EAAE,CAACC,mBAAY,EAAEC,yBAAmB,CAAC;oBAC5C,OAAO,EAAE,CAAC,iBAAiB,CAAC;iBAC7B;;;ICVD;;;;;;;;;;;;;"}