mis-crystal-design-system 2.1.3 → 2.2.0

package/esm2015/modal/modal.service.js

@@ -0,0 +1,72 @@
+import { Overlay, OverlayConfig } from "@angular/cdk/overlay";
+import { ComponentPortal, PortalInjector } from "@angular/cdk/portal";
+import { Injectable, Injector } from "@angular/core";
+import { MODAL_DATA_VAR } from "./modal-constants";
+import { ModalRef } from "./modal-ref";
+import { ModuleWrapperComponent } from "./module-wrapper/module-wrapper.component";
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/cdk/overlay";
+export class ModalService {
+    constructor(overlay, injector) {
+        this.overlay = overlay;
+        this.injector = injector;
+    }
+    show(component, data, options) {
+        const positionStrategy = this.calculatePosition(options);
+        const { width, height } = options || {};
+        const config = new OverlayConfig({
+            hasBackdrop: true,
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.noop(),
+            width: width,
+            height,
+            panelClass: "mis-modal",
+            backdropClass: "mis-modal-overlay",
+        });
+        const overlayRef = this.overlay.create(config);
+        const modalRef = new ModalRef(overlayRef);
+        const injector = this.createInjector(modalRef, this.injector, data);
+        const portal = new ComponentPortal(ModuleWrapperComponent, null);
+        this.componentInstance = overlayRef.attach(portal);
+        if (options === null || options === void 0 ? void 0 : options.closeOnBackdropClick) {
+            overlayRef.backdropClick().subscribe(() => modalRef.close());
+        }
+        this.componentInstance.instance.bindComponent(component, injector);
+        return modalRef;
+    }
+    createInjector(ref, inj, data) {
+        const injectorTokens = new WeakMap();
+        injectorTokens.set(ModalRef, ref);
+        injectorTokens.set(MODAL_DATA_VAR, data);
+        return new PortalInjector(inj, injectorTokens);
+    }
+    calculatePosition(options) {
+        const position = this.overlay.position().global().centerHorizontally().centerVertically();
+        if (options && screen.width > 600) {
+            if (options.top) {
+                position.top(options.top);
+            }
+            if (options.left) {
+                position.left(options.left);
+            }
+            if (options.right) {
+                position.right(options.right);
+            }
+            if (options.bottom) {
+                position.bottom(options.bottom);
+            }
+        }
+        return position;
+    }
+}
+ModalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ModalService_Factory() { return new ModalService(i0.ɵɵinject(i1.Overlay), i0.ɵɵinject(i0.INJECTOR)); }, token: ModalService, providedIn: "root" });
+ModalService.decorators = [
+    { type: Injectable, args: [{
+                providedIn: "root",
+            },] }
+];
+ModalService.ctorParameters = () => [
+    { type: Overlay },
+    { type: Injector }
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kYWwuc2VydmljZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL21vZGFsL21vZGFsLnNlcnZpY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDN0UsT0FBTyxFQUFFLGVBQWUsRUFBRSxjQUFjLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUN0RSxPQUFPLEVBQWdCLFVBQVUsRUFBRSxRQUFRLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDbkUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ25ELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxhQUFhLENBQUM7QUFDdkMsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sMkNBQTJDLENBQUM7OztBQWNuRixNQUFNLE9BQU8sWUFBWTtJQUd2QixZQUFvQixPQUFnQixFQUFVLFFBQWtCO1FBQTVDLFlBQU8sR0FBUCxPQUFPLENBQVM7UUFBVSxhQUFRLEdBQVIsUUFBUSxDQUFVO0lBQUcsQ0FBQztJQUVwRSxJQUFJLENBQU8sU0FBMkIsRUFBRSxJQUFRLEVBQUUsT0FBdUI7UUFDdkUsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDekQsTUFBTSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsR0FBRyxPQUFPLElBQUksRUFBRSxDQUFDO1FBQ3hDLE1BQU0sTUFBTSxHQUFHLElBQUksYUFBYSxDQUFDO1lBQy9CLFdBQVcsRUFBRSxJQUFJO1lBQ2pCLGdCQUFnQjtZQUNoQixjQUFjLEVBQUUsSUFBSSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLEVBQUU7WUFDcEQsS0FBSyxFQUFFLEtBQUs7WUFDWixNQUFNO1lBQ04sVUFBVSxFQUFFLFdBQVc7WUFDdkIsYUFBYSxFQUFFLG1CQUFtQjtTQUNuQyxDQUFDLENBQUM7UUFDSCxNQUFNLFVBQVUsR0FBRyxJQUFJLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMvQyxNQUFNLFFBQVEsR0FBRyxJQUFJLFFBQVEsQ0FBQyxVQUFVLENBQUMsQ0FBQztRQUMxQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUSxFQUFFLElBQUksQ0FBQyxDQUFDO1FBQ3BFLE1BQU0sTUFBTSxHQUFHLElBQUksZUFBZSxDQUFDLHNCQUFzQixFQUFFLElBQUksQ0FBQyxDQUFDO1FBQ2pFLElBQUksQ0FBQyxpQkFBaUIsR0FBRyxVQUFVLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ25ELElBQUksT0FBTyxhQUFQLE9BQU8sdUJBQVAsT0FBTyxDQUFFLG9CQUFvQixFQUFFO1lBQ2pDLFVBQVUsQ0FBQyxhQUFhLEVBQUUsQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFLENBQUMsUUFBUSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7U0FDOUQ7UUFDRCxJQUFJLENBQUMsaUJBQWlCLENBQUMsUUFBUSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEVBQUUsUUFBUSxDQUFDLENBQUM7UUFDbkUsT0FBTyxRQUFRLENBQUM7SUFDbEIsQ0FBQztJQUNPLGNBQWMsQ0FBSSxHQUFhLEVBQUUsR0FBYSxFQUFFLElBQVE7UUFDOUQsTUFBTSxjQUFjLEdBQUcsSUFBSSxPQUFPLEVBQUUsQ0FBQztRQUNyQyxjQUFjLENBQUMsR0FBRyxDQUFDLFFBQVEsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUNsQyxjQUFjLENBQUMsR0FBRyxDQUFDLGNBQWMsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUN6QyxPQUFPLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRSxjQUFjLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRU8saUJBQWlCLENBQUMsT0FBc0I7UUFDOUMsTUFBTSxRQUFRLEdBQUcsSUFBSSxDQUFDLE9BQU8sQ0FBQyxRQUFRLEVBQUUsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxrQkFBa0IsRUFBRSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDMUYsSUFBSSxPQUFPLElBQUksTUFBTSxDQUFDLEtBQUssR0FBRyxHQUFHLEVBQUU7WUFDakMsSUFBSSxPQUFPLENBQUMsR0FBRyxFQUFFO2dCQUNmLFFBQVEsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUFDO2FBQzNCO1lBQ0QsSUFBSSxPQUFPLENBQUMsSUFBSSxFQUFFO2dCQUNoQixRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsQ0FBQzthQUM3QjtZQUNELElBQUksT0FBTyxDQUFDLEtBQUssRUFBRTtnQkFDakIsUUFBUSxDQUFDLEtBQUssQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDL0I7WUFDRCxJQUFJLE9BQU8sQ0FBQyxNQUFNLEVBQUU7Z0JBQ2xCLFFBQVEsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxDQUFDO2FBQ2pDO1NBQ0Y7UUFDRCxPQUFPLFFBQVEsQ0FBQztJQUNsQixDQUFDOzs7O1lBdkRGLFVBQVUsU0FBQztnQkFDVixVQUFVLEVBQUUsTUFBTTthQUNuQjs7O1lBbEJ1QixPQUFPO1lBRUksUUFBUSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudFR5cGUsIE92ZXJsYXksIE92ZXJsYXlDb25maWcgfSBmcm9tIFwiQGFuZ3VsYXIvY2RrL292ZXJsYXlcIjtcbmltcG9ydCB7IENvbXBvbmVudFBvcnRhbCwgUG9ydGFsSW5qZWN0b3IgfSBmcm9tIFwiQGFuZ3VsYXIvY2RrL3BvcnRhbFwiO1xuaW1wb3J0IHsgQ29tcG9uZW50UmVmLCBJbmplY3RhYmxlLCBJbmplY3RvciB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XG5pbXBvcnQgeyBNT0RBTF9EQVRBX1ZBUiB9IGZyb20gXCIuL21vZGFsLWNvbnN0YW50c1wiO1xuaW1wb3J0IHsgTW9kYWxSZWYgfSBmcm9tIFwiLi9tb2RhbC1yZWZcIjtcbmltcG9ydCB7IE1vZHVsZVdyYXBwZXJDb21wb25lbnQgfSBmcm9tIFwiLi9tb2R1bGUtd3JhcHBlci9tb2R1bGUtd3JhcHBlci5jb21wb25lbnRcIjtcblxuaW50ZXJmYWNlIElNb2RhbE9wdGlvbnMge1xuICB3aWR0aD86IHN0cmluZztcbiAgaGVpZ2h0Pzogc3RyaW5nO1xuICB0b3A/OiBzdHJpbmc7XG4gIHJpZ2h0Pzogc3RyaW5nO1xuICBib3R0b20/OiBzdHJpbmc7XG4gIGxlZnQ/OiBzdHJpbmc7XG4gIGNsb3NlT25CYWNrZHJvcENsaWNrPzogYm9vbGVhbjtcbn1cbkBJbmplY3RhYmxlKHtcbiAgcHJvdmlkZWRJbjogXCJyb290XCIsXG59KVxuZXhwb3J0IGNsYXNzIE1vZGFsU2VydmljZSB7XG4gIHByaXZhdGUgY29tcG9uZW50SW5zdGFuY2U6IENvbXBvbmVudFJlZjxNb2R1bGVXcmFwcGVyQ29tcG9uZW50PjtcblxuICBjb25zdHJ1Y3Rvcihwcml2YXRlIG92ZXJsYXk6IE92ZXJsYXksIHByaXZhdGUgaW5qZWN0b3I6IEluamVjdG9yKSB7fVxuXG4gIHNob3c8VCwgRD4oY29tcG9uZW50OiBDb21wb25lbnRUeXBlPFQ+LCBkYXRhPzogRCwgb3B0aW9ucz86IElNb2RhbE9wdGlvbnMpOiBNb2RhbFJlZiB7XG4gICAgY29uc3QgcG9zaXRpb25TdHJhdGVneSA9IHRoaXMuY2FsY3VsYXRlUG9zaXRpb24ob3B0aW9ucyk7XG4gICAgY29uc3QgeyB3aWR0aCwgaGVpZ2h0IH0gPSBvcHRpb25zIHx8IHt9O1xuICAgIGNvbnN0IGNvbmZpZyA9IG5ldyBPdmVybGF5Q29uZmlnKHtcbiAgICAgIGhhc0JhY2tkcm9wOiB0cnVlLFxuICAgICAgcG9zaXRpb25TdHJhdGVneSxcbiAgICAgIHNjcm9sbFN0cmF0ZWd5OiB0aGlzLm92ZXJsYXkuc2Nyb2xsU3RyYXRlZ2llcy5ub29wKCksXG4gICAgICB3aWR0aDogd2lkdGgsXG4gICAgICBoZWlnaHQsXG4gICAgICBwYW5lbENsYXNzOiBcIm1pcy1tb2RhbFwiLFxuICAgICAgYmFja2Ryb3BDbGFzczogXCJtaXMtbW9kYWwtb3ZlcmxheVwiLFxuICAgIH0pO1xuICAgIGNvbnN0IG92ZXJsYXlSZWYgPSB0aGlzLm92ZXJsYXkuY3JlYXRlKGNvbmZpZyk7XG4gICAgY29uc3QgbW9kYWxSZWYgPSBuZXcgTW9kYWxSZWYob3ZlcmxheVJlZik7XG4gICAgY29uc3QgaW5qZWN0b3IgPSB0aGlzLmNyZWF0ZUluamVjdG9yKG1vZGFsUmVmLCB0aGlzLmluamVjdG9yLCBkYXRhKTtcbiAgICBjb25zdCBwb3J0YWwgPSBuZXcgQ29tcG9uZW50UG9ydGFsKE1vZHVsZVdyYXBwZXJDb21wb25lbnQsIG51bGwpO1xuICAgIHRoaXMuY29tcG9uZW50SW5zdGFuY2UgPSBvdmVybGF5UmVmLmF0dGFjaChwb3J0YWwpO1xuICAgIGlmIChvcHRpb25zPy5jbG9zZU9uQmFja2Ryb3BDbGljaykge1xuICAgICAgb3ZlcmxheVJlZi5iYWNrZHJvcENsaWNrKCkuc3Vic2NyaWJlKCgpID0+IG1vZGFsUmVmLmNsb3NlKCkpO1xuICAgIH1cbiAgICB0aGlzLmNvbXBvbmVudEluc3RhbmNlLmluc3RhbmNlLmJpbmRDb21wb25lbnQoY29tcG9uZW50LCBpbmplY3Rvcik7XG4gICAgcmV0dXJuIG1vZGFsUmVmO1xuICB9XG4gIHByaXZhdGUgY3JlYXRlSW5qZWN0b3I8RD4ocmVmOiBNb2RhbFJlZiwgaW5qOiBJbmplY3RvciwgZGF0YT86IEQpOiBQb3J0YWxJbmplY3RvciB7XG4gICAgY29uc3QgaW5qZWN0b3JUb2tlbnMgPSBuZXcgV2Vha01hcCgpO1xuICAgIGluamVjdG9yVG9rZW5zLnNldChNb2RhbFJlZiwgcmVmKTtcbiAgICBpbmplY3RvclRva2Vucy5zZXQoTU9EQUxfREFUQV9WQVIsIGRhdGEpO1xuICAgIHJldHVybiBuZXcgUG9ydGFsSW5qZWN0b3IoaW5qLCBpbmplY3RvclRva2Vucyk7XG4gIH1cblxuICBwcml2YXRlIGNhbGN1bGF0ZVBvc2l0aW9uKG9wdGlvbnM6IElNb2RhbE9wdGlvbnMpIHtcbiAgICBjb25zdCBwb3NpdGlvbiA9IHRoaXMub3ZlcmxheS5wb3NpdGlvbigpLmdsb2JhbCgpLmNlbnRlckhvcml6b250YWxseSgpLmNlbnRlclZlcnRpY2FsbHkoKTtcbiAgICBpZiAob3B0aW9ucyAmJiBzY3JlZW4ud2lkdGggPiA2MDApIHtcbiAgICAgIGlmIChvcHRpb25zLnRvcCkge1xuICAgICAgICBwb3NpdGlvbi50b3Aob3B0aW9ucy50b3ApO1xuICAgICAgfVxuICAgICAgaWYgKG9wdGlvbnMubGVmdCkge1xuICAgICAgICBwb3NpdGlvbi5sZWZ0KG9wdGlvbnMubGVmdCk7XG4gICAgICB9XG4gICAgICBpZiAob3B0aW9ucy5yaWdodCkge1xuICAgICAgICBwb3NpdGlvbi5yaWdodChvcHRpb25zLnJpZ2h0KTtcbiAgICAgIH1cbiAgICAgIGlmIChvcHRpb25zLmJvdHRvbSkge1xuICAgICAgICBwb3NpdGlvbi5ib3R0b20ob3B0aW9ucy5ib3R0b20pO1xuICAgICAgfVxuICAgIH1cbiAgICByZXR1cm4gcG9zaXRpb247XG4gIH1cbn1cbiJdfQ==

package/esm2015/modal/module-wrapper/module-wrapper.component.js

@@ -0,0 +1,33 @@
+import { trigger, transition, style, animate } from "@angular/animations";
+import { ComponentPortal } from "@angular/cdk/portal";
+import { Component, ViewChild, ViewContainerRef } from "@angular/core";
+export class ModuleWrapperComponent {
+    constructor() { }
+    bindComponent(type, injector) {
+        this.initComponent(type, injector);
+    }
+    initComponent(type, injector) {
+        this.modalPortal = new ComponentPortal(type, this.place, injector);
+    }
+}
+ModuleWrapperComponent.decorators = [
+    { type: Component, args: [{
+                selector: "mis-module-wrapper",
+                template: "<div class=\"mis-modal-body\" #place @slideInOut>\n  <ng-template [cdkPortalOutlet]=\"modalPortal\"></ng-template>\n</div>\n",
+                animations: [
+                    trigger("slideInOut", [
+                        transition(":enter", [
+                            style({ transform: "translateY(-30%)", opacity: 0 }),
+                            animate("200ms ease-out", style({ transform: "translatey(0%)", opacity: 1 })),
+                        ]),
+                        transition(":leave", [animate("200ms ease-out", style({ transform: "translatey(-30%)", opacity: 0 }))]),
+                    ]),
+                ],
+                styles: [".mis-modal-body{display:block;width:100%;height:100%;background-color:transparent;border-radius:12px;box-shadow:0 12px 24px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.12);overflow:hidden}"]
+            },] }
+];
+ModuleWrapperComponent.ctorParameters = () => [];
+ModuleWrapperComponent.propDecorators = {
+    place: [{ type: ViewChild, args: ["place", { static: false, read: ViewContainerRef },] }]
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9kdWxlLXdyYXBwZXIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWlzLWNvbXBvbmVudHMvbW9kYWwvbW9kdWxlLXdyYXBwZXIvbW9kdWxlLXdyYXBwZXIuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxPQUFPLEVBQUUsVUFBVSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUMxRSxPQUFPLEVBQUUsZUFBZSxFQUFrQixNQUFNLHFCQUFxQixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxTQUFTLEVBQW9CLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQWlCekYsTUFBTSxPQUFPLHNCQUFzQjtJQUVqQyxnQkFBZSxDQUFDO0lBSWhCLGFBQWEsQ0FBQyxJQUFTLEVBQUUsUUFBd0I7UUFDL0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLENBQUM7SUFDckMsQ0FBQztJQUVPLGFBQWEsQ0FBQyxJQUFTLEVBQUUsUUFBd0I7UUFDdkQsSUFBSSxDQUFDLFdBQVcsR0FBRyxJQUFJLGVBQWUsQ0FBQyxJQUFJLEVBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxRQUFRLENBQUMsQ0FBQztJQUNyRSxDQUFDOzs7WUExQkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxvQkFBb0I7Z0JBQzlCLHdJQUE4QztnQkFFOUMsVUFBVSxFQUFFO29CQUNWLE9BQU8sQ0FBQyxZQUFZLEVBQUU7d0JBQ3BCLFVBQVUsQ0FBQyxRQUFRLEVBQUU7NEJBQ25CLEtBQUssQ0FBQyxFQUFFLFNBQVMsRUFBRSxrQkFBa0IsRUFBRSxPQUFPLEVBQUUsQ0FBQyxFQUFFLENBQUM7NEJBQ3BELE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUM7eUJBQzlFLENBQUM7d0JBQ0YsVUFBVSxDQUFDLFFBQVEsRUFBRSxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsRUFBRSxLQUFLLENBQUMsRUFBRSxTQUFTLEVBQUUsa0JBQWtCLEVBQUUsT0FBTyxFQUFFLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDO3FCQUN4RyxDQUFDO2lCQUNIOzthQUNGOzs7O29CQUtFLFNBQVMsU0FBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxnQkFBZ0IsRUFBRSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHRyaWdnZXIsIHRyYW5zaXRpb24sIHN0eWxlLCBhbmltYXRlIH0gZnJvbSBcIkBhbmd1bGFyL2FuaW1hdGlvbnNcIjtcbmltcG9ydCB7IENvbXBvbmVudFBvcnRhbCwgUG9ydGFsSW5qZWN0b3IgfSBmcm9tIFwiQGFuZ3VsYXIvY2RrL3BvcnRhbFwiO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBJbmplY3RvciwgT25Jbml0LCBWaWV3Q2hpbGQsIFZpZXdDb250YWluZXJSZWYgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHsgTW9kYWxSZWYgfSBmcm9tIFwiLi4vbW9kYWwtcmVmXCI7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogXCJtaXMtbW9kdWxlLXdyYXBwZXJcIixcbiAgdGVtcGxhdGVVcmw6IFwiLi9tb2R1bGUtd3JhcHBlci5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vbW9kdWxlLXdyYXBwZXIuY29tcG9uZW50LnNjc3NcIl0sXG4gIGFuaW1hdGlvbnM6IFtcbiAgICB0cmlnZ2VyKFwic2xpZGVJbk91dFwiLCBbXG4gICAgICB0cmFuc2l0aW9uKFwiOmVudGVyXCIsIFtcbiAgICAgICAgc3R5bGUoeyB0cmFuc2Zvcm06IFwidHJhbnNsYXRlWSgtMzAlKVwiLCBvcGFjaXR5OiAwIH0pLFxuICAgICAgICBhbmltYXRlKFwiMjAwbXMgZWFzZS1vdXRcIiwgc3R5bGUoeyB0cmFuc2Zvcm06IFwidHJhbnNsYXRleSgwJSlcIiwgb3BhY2l0eTogMSB9KSksXG4gICAgICBdKSxcbiAgICAgIHRyYW5zaXRpb24oXCI6bGVhdmVcIiwgW2FuaW1hdGUoXCIyMDBtcyBlYXNlLW91dFwiLCBzdHlsZSh7IHRyYW5zZm9ybTogXCJ0cmFuc2xhdGV5KC0zMCUpXCIsIG9wYWNpdHk6IDAgfSkpXSksXG4gICAgXSksXG4gIF0sXG59KVxuZXhwb3J0IGNsYXNzIE1vZHVsZVdyYXBwZXJDb21wb25lbnQge1xuICBtb2RhbFBvcnRhbDogQ29tcG9uZW50UG9ydGFsPGFueT47XG4gIGNvbnN0cnVjdG9yKCkge31cblxuICBAVmlld0NoaWxkKFwicGxhY2VcIiwgeyBzdGF0aWM6IGZhbHNlLCByZWFkOiBWaWV3Q29udGFpbmVyUmVmIH0pIHBsYWNlOiBWaWV3Q29udGFpbmVyUmVmO1xuXG4gIGJpbmRDb21wb25lbnQodHlwZTogYW55LCBpbmplY3RvcjogUG9ydGFsSW5qZWN0b3IpIHtcbiAgICB0aGlzLmluaXRDb21wb25lbnQodHlwZSwgaW5qZWN0b3IpO1xuICB9XG5cbiAgcHJpdmF0ZSBpbml0Q29tcG9uZW50KHR5cGU6IGFueSwgaW5qZWN0b3I6IFBvcnRhbEluamVjdG9yKSB7XG4gICAgdGhpcy5tb2RhbFBvcnRhbCA9IG5ldyBDb21wb25lbnRQb3J0YWwodHlwZSwgdGhpcy5wbGFjZSwgaW5qZWN0b3IpO1xuICB9XG59XG4iXX0=

package/esm2015/modal/public_api.js

@@ -0,0 +1,5 @@
+export * from './modal.service';
+export * from './modal-ref';
+export * from './modal-constants';
+export * from './modal.module';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL21pcy1jb21wb25lbnRzL21vZGFsL3B1YmxpY19hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxpQkFBaUIsQ0FBQztBQUNoQyxjQUFjLGFBQWEsQ0FBQztBQUM1QixjQUFjLG1CQUFtQixDQUFDO0FBQ2xDLGNBQWMsZ0JBQWdCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL21vZGFsLnNlcnZpY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2RhbC1yZWYnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2RhbC1jb25zdGFudHMnO1xuZXhwb3J0ICogZnJvbSAnLi9tb2RhbC5tb2R1bGUnOyJdfQ==

package/fesm2015/mis-crystal-design-system-async-search-dropdown.js

@@ -0,0 +1,194 @@
+import { ConnectionPositionPair, OverlayConfig, Overlay, OverlayModule } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { EventEmitter, Component, ViewContainerRef, Input, ViewChild, ContentChild, Output, NgModule } from '@angular/core';
+import { FormControl, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+
+class AsyncDropdownComponent {
+    constructor(overlay, viewContainerRef) {
+        this.overlay = overlay;
+        this.viewContainerRef = viewContainerRef;
+        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
+        // tslint:disable-next-line
+        this.onSelect = new EventEmitter(true); // emit selected values
+        this.searchInput = new FormControl();
+        this.data = [];
+        this.opened = false;
+        // tslint:disable-next-line
+        this.selections = new Map();
+        this.handleControlChanges = (values) => {
+            values.forEach((el) => {
+                this.selectData(el, true);
+            });
+            // tslint:disable-next-line
+        };
+    }
+    ngOnInit() {
+        var _a, _b;
+        if (this.multi && !this.uniqueKey) {
+            throw new Error('[uniqueKey] required in multi mode.');
+        }
+        if (this.disabled) {
+            this.searchInput.disable();
+        }
+        this.searchSubscription = this.searchInput.valueChanges
+            .pipe(filter((val) => val && val.length >= this.minInputLength), debounceTime(this.debounceTime), distinctUntilChanged())
+            .subscribe((res) => {
+            this.httpStream(res).subscribe((list) => {
+                var _a;
+                this.data = list;
+                if (!((_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.hasAttached()) && list.length > 0) {
+                    this.openDropdown(this.dd, this.origin.nativeElement);
+                }
+            });
+        });
+        if ((_a = this.control) === null || _a === void 0 ? void 0 : _a.value) {
+            this.handleControlChanges(this.control.value);
+        }
+        this.controlSubscription = (_b = this.control) === null || _b === void 0 ? void 0 : _b.valueChanges.subscribe(this.handleControlChanges);
+    }
+    ngOnChanges(changes) {
+        if (changes && changes.disabled) {
+            this.searchInput.enable();
+            if (this.disabled) {
+                this.searchInput.disable();
+            }
+        }
+    }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.searchSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+    openDropdown(template, origin) {
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(origin)
+            .withPositions([
+            new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
+            new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' }),
+        ])
+            .withPush(true);
+        const configs = new OverlayConfig({
+            hasBackdrop: true,
+            backdropClass: 'cdk-overlay-transparent-backdrop',
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            positionStrategy,
+            width: origin.clientWidth,
+        });
+        this.overlayRef = this.overlay.create(configs);
+        this.overlayRef.attach(new TemplatePortal(template, this.viewContainerRef));
+        this.overlayRef.backdropClick().subscribe((res) => {
+            this.closeDropdown();
+        });
+    }
+    /**
+     * closes the dropdown
+     */
+    closeDropdown() {
+        var _a;
+        this.opened = false;
+        (_a = this.overlayRef) === null || _a === void 0 ? void 0 : _a.detach();
+        this.data = [];
+    }
+    /**
+     *
+     * @param item item to select
+     * if item property disabled is set to true, selection will be disabled
+     * @param effectedFromOutside set to true if calling from parent component, if true will focus on search input
+     */
+    selectData(item, effectedFromOutside = true) {
+        if (item.disabled) {
+            return;
+        }
+        if (!this.multi) {
+            this.searchInput.patchValue(item[this.displayKey], { emitEvent: false });
+            this.setControlValue(item);
+        }
+        else {
+            if (!this.selections.has(item[this.uniqueKey])) {
+                this.selections.set(item[this.uniqueKey], item);
+            }
+            this.setControlValue(this.selectedItems);
+            if (!effectedFromOutside) {
+                setTimeout(() => {
+                    this.input.nativeElement.focus();
+                    this.input.nativeElement.scrollIntoView();
+                }, 10);
+            }
+            this.searchInput.patchValue('');
+            this.data = [];
+        }
+        this.closeDropdown();
+    }
+    /**
+     *
+     * @param item remove item from selected list
+     */
+    removeItem(item) {
+        this.selections.delete(item[this.uniqueKey]);
+        this.setControlValue(this.selectedItems);
+        // tslint:disable-next-line
+        this.input['nativeElement'].focus();
+    }
+    setControlValue(value) {
+        var _a;
+        this.onSelect.emit(value);
+        (_a = this.control) === null || _a === void 0 ? void 0 : _a.patchValue(value, { emitEvent: false });
+    }
+    /**
+     * @returns list of selected items
+     */
+    get selectedItems() {
+        return Array.from(this.selections.values());
+    }
+}
+AsyncDropdownComponent.decorators = [
+    { type: 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}"]
+            },] }
+];
+AsyncDropdownComponent.ctorParameters = () => [
+    { type: Overlay },
+    { type: ViewContainerRef }
+];
+AsyncDropdownComponent.propDecorators = {
+    httpStream: [{ type: Input }],
+    displayKey: [{ type: Input }],
+    secondaryDisplayKey: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    debounceTime: [{ type: Input }],
+    minInputLength: [{ type: Input }],
+    multi: [{ type: Input }],
+    uniqueKey: [{ type: Input }],
+    control: [{ type: Input }],
+    disabled: [{ type: Input }],
+    readonly: [{ type: Input }],
+    origin: [{ type: ViewChild, args: ['ddBtn', { static: false },] }],
+    input: [{ type: ViewChild, args: ['input', { static: false },] }],
+    dd: [{ type: ViewChild, args: ['dd', { static: false },] }],
+    customItem: [{ type: ContentChild, args: ['misCustomItem', { static: false },] }],
+    onSelect: [{ type: Output }]
+};
+
+class AsyncDropdownModule {
+}
+AsyncDropdownModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [AsyncDropdownComponent],
+                imports: [CommonModule, OverlayModule, ReactiveFormsModule, FormsModule],
+                exports: [AsyncDropdownComponent],
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AsyncDropdownComponent, AsyncDropdownModule };
+//# sourceMappingURL=mis-crystal-design-system-async-search-dropdown.js.map

package/fesm2015/mis-crystal-design-system-async-search-dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-async-search-dropdown.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":[],"mappings":"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"}

package/fesm2015/mis-crystal-design-system-button.js

@@ -1,4 +1,4 @@
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
+import { EventEmitter, Component, Input, Output, Directive, ElementRef, Renderer2, HostBinding, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 class ButtonComponent {
@@ -43,6 +43,62 @@ ButtonComponent.propDecorators = {
     click: [{ type: Output }]
 };
 
+class ButtonDirective {
+    constructor(el, renderer) {
+        this.el = el;
+        this.renderer = renderer;
+        this.type = 'none';
+        this.size = 'md';
+        this.elementClass = 'mis-btn';
+    }
+    ngAfterViewInit() {
+        this.bindTypeClass();
+        this.bindSizeClass();
+    }
+    bindTypeClass() {
+        let className = '';
+        switch (this.type) {
+            case 'primary':
+                className = 'mis-primary';
+                break;
+            case 'outline':
+                className = 'mis-outline';
+                break;
+            default:
+                className = 'mis-none';
+        }
+        this.renderer.addClass(this.el.nativeElement, className);
+    }
+    bindSizeClass() {
+        let className = '';
+        switch (this.size) {
+            case 'lg':
+                className = 'mis-btn-lg';
+                break;
+            case 'sm':
+                className = 'mis-btn-sm';
+                break;
+            default:
+                className = 'mis-btn-md';
+        }
+        this.renderer.addClass(this.el.nativeElement, className);
+    }
+}
+ButtonDirective.decorators = [
+    { type: Directive, args: [{
+                selector: '[mis-button]',
+            },] }
+];
+ButtonDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: Renderer2 }
+];
+ButtonDirective.propDecorators = {
+    type: [{ type: Input }],
+    size: [{ type: Input }],
+    elementClass: [{ type: HostBinding, args: ['class',] }]
+};
+
 class ButtonModule {
     static forRoot() {
         return { ngModule: ButtonModule, providers: [] };
@@ -50,9 +106,9 @@ class ButtonModule {
 }
 ButtonModule.decorators = [
     { type: NgModule, args: [{
-                declarations: [ButtonComponent],
+                declarations: [ButtonComponent, ButtonDirective],
                 imports: [CommonModule],
-                exports: [ButtonComponent]
+                exports: [ButtonComponent, ButtonDirective]
             },] }
 ];
 
@@ -60,5 +116,5 @@ ButtonModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, ButtonModule };
+export { ButtonComponent, ButtonModule, ButtonDirective as ɵa };
 //# sourceMappingURL=mis-crystal-design-system-button.js.map

package/fesm2015/mis-crystal-design-system-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mis-crystal-design-system-button.js","sources":["../../../projects/mis-components/button/button.component.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 { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport { ButtonComponent } from './button.component';\n\n@NgModule({\n  declarations: [ButtonComponent],\n  imports: [CommonModule],\n  exports: [ButtonComponent]\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"],"names":[],"mappings":";;;MAOa,eAAe;IAkB1B;QAhBS,SAAI,GAAW,SAAS,CAAA;QACxB,SAAI,GAAiC,OAAO,CAAA;QAC5C,SAAI,GAAyD,QAAQ,CAAA;QACrE,UAAK,GAAW,EAAE,CAAA;QAElB,aAAQ,GAAY,KAAK,CAAA;QACzB,YAAO,GAAW,EAAE,CAAA;QACpB,iBAAY,GAAqB,MAAM,CAAA;QAEvC,aAAQ,GAAY,KAAK,CAAA;QACzB,4BAAuB,GAAY,KAAK,CAAA;QACxC,6BAAwB,GAAY,KAAK,CAAA;;QAGxC,UAAK,GAAG,IAAI,YAAY,EAAO,CAAA;KAE1B;IAEf,QAAQ,MAAI;IAEZ,OAAO,CAAC,KAAK;QACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACvB;;;YA7BF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,m9BAAsC;;aAEvC;;;;mBAGE,KAAK;mBACL,KAAK;mBACL,KAAK;oBACL,KAAK;uBAEL,KAAK;sBACL,KAAK;2BACL,KAAK;uBAEL,KAAK;sCACL,KAAK;uCACL,KAAK;oBAGL,MAAM;;;MCbI,YAAY;IACvB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,CAAC;gBAC/B,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,eAAe,CAAC;aAC3B;;;ACTD;;;;;;"}
+{"version":3,"file":"mis-crystal-design-system-button.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":[],"mappings":";;;MAOa,eAAe;IAkB1B;QAhBS,SAAI,GAAW,SAAS,CAAA;QACxB,SAAI,GAAiC,OAAO,CAAA;QAC5C,SAAI,GAAyD,QAAQ,CAAA;QACrE,UAAK,GAAW,EAAE,CAAA;QAElB,aAAQ,GAAY,KAAK,CAAA;QACzB,YAAO,GAAW,EAAE,CAAA;QACpB,iBAAY,GAAqB,MAAM,CAAA;QAEvC,aAAQ,GAAY,KAAK,CAAA;QACzB,4BAAuB,GAAY,KAAK,CAAA;QACxC,6BAAwB,GAAY,KAAK,CAAA;;QAGxC,UAAK,GAAG,IAAI,YAAY,EAAO,CAAA;KAE1B;IAEf,QAAQ,MAAI;IAEZ,OAAO,CAAC,KAAK;QACX,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;KACvB;;;YA7BF,SAAS,SAAC;gBACT,QAAQ,EAAE,YAAY;gBACtB,m9BAAsC;;aAEvC;;;;mBAGE,KAAK;mBACL,KAAK;mBACL,KAAK;oBACL,KAAK;uBAEL,KAAK;sBACL,KAAK;2BACL,KAAK;uBAEL,KAAK;sCACL,KAAK;uCACL,KAAK;oBAGL,MAAM;;;MCXI,eAAe;IAK1B,YAAoB,EAAc,EAAU,QAAmB;QAA3C,OAAE,GAAF,EAAE,CAAY;QAAU,aAAQ,GAAR,QAAQ,CAAW;QAJtD,SAAI,GAAmC,MAAM,CAAC;QAC9C,SAAI,GAAuB,IAAI,CAAC;QACnB,iBAAY,GAAG,SAAS,CAAC;KAEqB;IAEpE,eAAe;QACb,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,aAAa,EAAE,CAAC;KACtB;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,SAAS;gBACZ,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;YACR,KAAK,SAAS;gBACZ,SAAS,GAAG,aAAa,CAAC;gBAC1B,MAAM;YACR;gBACE,SAAS,GAAG,UAAU,CAAC;SAC1B;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;KAC1D;IAEO,aAAa;QACnB,IAAI,SAAS,GAAG,EAAE,CAAC;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR,KAAK,IAAI;gBACP,SAAS,GAAG,YAAY,CAAC;gBACzB,MAAM;YACR;gBACE,SAAS,GAAG,YAAY,CAAC;SAC5B;QACD,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;KAC1D;;;YA3CF,SAAS,SAAC;gBACT,QAAQ,EAAE,cAAc;aACzB;;;YARC,UAAU;YAGV,SAAS;;;mBAOR,KAAK;mBACL,KAAK;2BACL,WAAW,SAAC,OAAO;;;MCLT,YAAY;IACvB,OAAO,OAAO;QACZ,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC;KAClD;;;YARF,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;gBAChD,OAAO,EAAE,CAAC,YAAY,CAAC;gBACvB,OAAO,EAAE,CAAC,eAAe,EAAE,eAAe,CAAC;aAC5C;;;ACTD;;;;;;"}

package/fesm2015/mis-crystal-design-system-input.js

@@ -0,0 +1,94 @@
+import { Directive, ElementRef, Self, Optional, Component, Input, ContentChild, NgModule } from '@angular/core';
+import { NgControl, FormsModule } from '@angular/forms';
+import { ReplaySubject, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { CommonModule } from '@angular/common';
+
+class MisInputDirective {
+    constructor(el, control) {
+        this.el = el;
+        this.control = control;
+        this.validityChange = new ReplaySubject(1);
+        this.validity = this.validityChange.asObservable();
+        this.endObs = new Subject();
+        this.focus = false;
+        this.hasValue = false;
+    }
+    ngOnInit() {
+        var _a, _b;
+        (_b = (_a = this.control) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.statusChanges.pipe(takeUntil(this.endObs)).subscribe(() => {
+            var _a;
+            this.validityChange.next((_a = this.control.control) === null || _a === void 0 ? void 0 : _a.valid);
+        });
+        this.el.nativeElement.placeholder += ' ';
+    }
+    ngOnDestroy() {
+        this.endObs.next();
+        this.endObs.complete();
+    }
+}
+MisInputDirective.decorators = [
+    { type: Directive, args: [{
+                // tslint:disable-next-line
+                selector: 'input[misInput]',
+            },] }
+];
+MisInputDirective.ctorParameters = () => [
+    { type: ElementRef },
+    { type: NgControl, decorators: [{ type: Self }, { type: Optional }] }
+];
+
+class MisInputComponent {
+    constructor() {
+        this.type = 'floating';
+        this.noHints = false;
+        this.hasError = false; // show input in error state
+        this.inputValidity = true;
+    }
+    set formInput(input) {
+        var _a;
+        if (!this.placeholder) {
+            this.placeholder = input.el.nativeElement.placeholder;
+        }
+        (_a = this.inputSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+        this.inputSubscription = input === null || input === void 0 ? void 0 : input.validity.subscribe((res) => (this.inputValidity = res));
+        this.placeholder += ' ';
+    }
+    ngOnInit() { }
+    ngOnDestroy() {
+        var _a;
+        (_a = this.inputSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+MisInputComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'mis-input',
+                template: "<div class=\"input-container\" [ngClass]=\"{'rounded': type === 'rounded', 'floating': type === 'floating', 'has-error': !inputValidity || hasError, 'no-hint': noHints}\">\n  <div class=\"input-wrapper\">\n    <ng-content select=\"[mis-input-icon]\"></ng-content>\n    <div class=\"mis-input\">\n      <ng-content select=\"input\"></ng-content>\n      <span class=\"mis-placeholder\">{{placeholder}}</span>\n    </div>\n    <ng-content select=\"[mis-input-act]\"></ng-content>\n  </div>\n  <ng-content select=\"[mis-input-hint]\"></ng-content>\n  <ng-content select=\"[mis-input-error]\"></ng-content>\n</div>",
+                styles: [".input-container{position:relative;padding-bottom:24px}.input-container .input-wrapper{box-sizing:border-box;display:flex;align-items:center;flex-direction:row;flex-wrap:nowrap;transition:all 60ms ease-in;background-color:#fff;padding:3px 16px}.input-container .input-wrapper>:not(:last-child){margin-right:16px}.input-container .input-wrapper .mis-input{flex:1 1 auto;z-index:0;position:relative;display:flex;align-items:center}.input-container .input-wrapper input{flex:1 1 auto;border:none;outline:none;height:100%;padding:0;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;height:24px;color:#181f33;background-color:transparent;width:100%;vertical-align:middle}.input-container .input-wrapper input::-moz-placeholder{-moz-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input:-ms-input-placeholder{-ms-transition:all .1s ease-in;transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper input::placeholder{transition:all .1s ease-in;opacity:0;transform-origin:left center;color:transparent}.input-container .input-wrapper .mis-placeholder{position:absolute;font-family:Lato;font-style:normal;font-weight:400;font-size:16px;line-height:24px;color:#6a737d;z-index:-1;transition:all .15s ease-in}.input-container .input-wrapper:focus-within{background-color:#f5f5f5}.input-container .input-wrapper:focus-within{border:1px solid #0937b2}.input-container .input-wrapper [mis-input-act],.input-container .input-wrapper [mis-input-icon]{width:18px;height:18px;color:#6a737d;font-size:24px;line-height:18px}.input-container .input-wrapper [mis-input-act]{cursor:pointer}.input-container.no-hint{padding-bottom:0}.input-container.rounded .input-wrapper{border-radius:4px;border:1px solid #e0e0e0}.input-container.rounded .input-wrapper:focus-within,.input-container.rounded .input-wrapper:hover{background-color:#f5f5f5}.input-container.rounded .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{color:transparent!important}.input-container.rounded .input-wrapper .mis-placeholder{transition-duration:50ms}.input-container.rounded.has-error .input-wrapper{border:1px solid #b00020!important}.input-container.floating .input-wrapper{padding-top:24px;padding-bottom:7px;border-bottom:1px solid #e0e0e0}.input-container.floating .input-wrapper input:focus+.mis-placeholder{color:#0937b2!important}.input-container.floating .input-wrapper input:not(:-moz-placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:not(:-ms-input-placeholder)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper input:focus+.mis-placeholder,.input-container.floating .input-wrapper input:not(:placeholder-shown)+.mis-placeholder{transform:translateY(calc(-100% + 6px))!important;font-size:12px!important;letter-spacing:.2px!important}.input-container.floating .input-wrapper:focus-within{border:none;border-bottom:1px solid #0937b2}.input-container.floating .input-wrapper:focus-within input::-moz-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input:-ms-input-placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating .input-wrapper:focus-within input::placeholder{color:#6a737d;opacity:1;font-size:16px}.input-container.floating.has-error .input-wrapper{border-bottom:1px solid #b00020!important}.input-container.floating.has-error .input-wrapper .mis-placeholder{color:#b00020!important}.input-container [mis-input-error],.input-container [mis-input-hint]{position:absolute;left:0;right:0;bottom:0;line-height:24px;height:24px;font-size:12px;color:#6a737d;letter-spacing:.2px}.input-container [mis-input-error]{color:#b00020}"]
+            },] }
+];
+MisInputComponent.ctorParameters = () => [];
+MisInputComponent.propDecorators = {
+    type: [{ type: Input }],
+    placeholder: [{ type: Input }],
+    noHints: [{ type: Input }],
+    hasError: [{ type: Input }],
+    formInput: [{ type: ContentChild, args: [MisInputDirective,] }]
+};
+
+class MisInputModule {
+}
+MisInputModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [MisInputComponent, MisInputDirective],
+                imports: [CommonModule, FormsModule],
+                exports: [MisInputComponent, MisInputDirective],
+            },] }
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MisInputComponent, MisInputDirective, MisInputModule };
+//# sourceMappingURL=mis-crystal-design-system-input.js.map

package/fesm2015/mis-crystal-design-system-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mis-crystal-design-system-input.js","sources":["../../../projects/mis-components/input/directives/input/input.directive.ts","../../../projects/mis-components/input/mis-input.component.ts","../../../projects/mis-components/input/mis-input.module.ts","../../../projects/mis-components/input/mis-crystal-design-system-input.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  OnDestroy,\n  OnInit,\n  Optional,\n  Self,\n} from '@angular/core';\nimport { NgControl } from '@angular/forms';\nimport { ReplaySubject, Subject, Subscription } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\n@Directive({\n  // tslint:disable-next-line\n  selector: 'input[misInput]',\n})\nexport class MisInputDirective implements OnInit, OnDestroy {\n  constructor(\n    public el: ElementRef,\n    @Self() @Optional() private control: NgControl\n  ) {}\n  private validityChange: ReplaySubject<boolean> = new ReplaySubject(1);\n  validity = this.validityChange.asObservable();\n  endObs: Subject<void> = new Subject();\n  focus = false;\n  hasValue = false;\n\n  ngOnInit(): void {\n    this.control?.control?.statusChanges\n      .pipe(takeUntil(this.endObs))\n      .subscribe(() => {\n        this.validityChange.next(this.control.control?.valid);\n      });\n    this.el.nativeElement.placeholder += ' ';\n  }\n  ngOnDestroy(): void {\n    this.endObs.next();\n    this.endObs.complete();\n  }\n}\n","import {\n  Component,\n  ContentChild,\n  Input,\n  OnDestroy,\n  OnInit,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { MisInputDirective } from './directives/input/input.directive';\n\n@Component({\n  selector: 'mis-input',\n  templateUrl: './mis-input.component.html',\n  styleUrls: ['./mis-input.component.scss'],\n})\nexport class MisInputComponent implements OnInit, OnDestroy {\n  @Input() type: 'rounded' | 'floating' = 'floating';\n  @Input() placeholder: string; // floating placeholder text\n  @Input() noHints = false;\n  @Input() hasError = false; // show input in error state\n  @ContentChild(MisInputDirective) set formInput(input: MisInputDirective) {\n    if (!this.placeholder) {\n      this.placeholder = input.el.nativeElement.placeholder;\n    }\n    this.inputSubscription?.unsubscribe();\n    this.inputSubscription = input?.validity.subscribe(\n      (res) => (this.inputValidity = res)\n    );\n    this.placeholder += ' ';\n  }\n  inputSubscription: Subscription | undefined;\n  inputValidity: boolean = true;\n  constructor() {}\n\n  ngOnInit(): void {}\n  ngOnDestroy(): void {\n    this.inputSubscription?.unsubscribe();\n  }\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { MisInputDirective } from './directives/input/input.directive';\nimport { MisInputComponent } from './mis-input.component';\n\n@NgModule({\n  declarations: [MisInputComponent, MisInputDirective],\n  imports: [CommonModule, FormsModule],\n  exports: [MisInputComponent, MisInputDirective],\n})\nexport class MisInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;MAgBa,iBAAiB;IAC5B,YACS,EAAc,EACO,OAAkB;QADvC,OAAE,GAAF,EAAE,CAAY;QACO,YAAO,GAAP,OAAO,CAAW;QAExC,mBAAc,GAA2B,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;QACtE,aAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE,CAAC;QAC9C,WAAM,GAAkB,IAAI,OAAO,EAAE,CAAC;QACtC,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;KALb;IAOJ,QAAQ;;QACN,YAAA,IAAI,CAAC,OAAO,0CAAE,OAAO,0CAAE,aAAa,CACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAC3B,SAAS,CAAC;;YACT,IAAI,CAAC,cAAc,CAAC,IAAI,OAAC,IAAI,CAAC,OAAO,CAAC,OAAO,0CAAE,KAAK,CAAC,CAAC;SACvD,EAAE;QACL,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,IAAI,GAAG,CAAC;KAC1C;IACD,WAAW;QACT,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC;KACxB;;;YA1BF,SAAS,SAAC;;gBAET,QAAQ,EAAE,iBAAiB;aAC5B;;;YAbC,UAAU;YAMH,SAAS,uBAWb,IAAI,YAAI,QAAQ;;;MCHR,iBAAiB;IAiB5B;QAhBS,SAAI,GAA2B,UAAU,CAAC;QAE1C,YAAO,GAAG,KAAK,CAAC;QAChB,aAAQ,GAAG,KAAK,CAAC;QAY1B,kBAAa,GAAY,IAAI,CAAC;KACd;IAZhB,IAAqC,SAAS,CAAC,KAAwB;;QACrE,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,WAAW,CAAC;SACvD;QACD,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;QACtC,IAAI,CAAC,iBAAiB,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAC,SAAS,CAChD,CAAC,GAAG,MAAM,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC,CACpC,CAAC;QACF,IAAI,CAAC,WAAW,IAAI,GAAG,CAAC;KACzB;IAKD,QAAQ,MAAW;IACnB,WAAW;;QACT,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,GAAG;KACvC;;;YA3BF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,6mBAAyC;;aAE1C;;;;mBAEE,KAAK;0BACL,KAAK;sBACL,KAAK;uBACL,KAAK;wBACL,YAAY,SAAC,iBAAiB;;;MCVpB,cAAc;;;YAL1B,QAAQ,SAAC;gBACR,YAAY,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;gBACpD,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;gBACpC,OAAO,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;aAChD;;;ACVD;;;;;;"}