@apexara/ng-components 1.0.0

package/fesm2022/apexara-ng-components-drawer.mjs

@@ -0,0 +1,69 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, ContentChild, Output, Component } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import * as i1 from '@apexara/ng-components/services';
+
+const OpenCloseAnimation = trigger('openCloseAnimation', [
+    state('true', style({
+        transform: 'translateX(0%)',
+    })),
+    state('false', style({
+        transform: 'translateX(100%)',
+    })),
+    transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
+]);
+class IpiDrawerComponent {
+    constructor(scrollBlockService, changeDetector) {
+        this.scrollBlockService = scrollBlockService;
+        this.changeDetector = changeDetector;
+        this.isOpen = false;
+        this.closeChange = new EventEmitter();
+        this.scrollBlockService.activate();
+    }
+    ngOnDestroy() {
+        this.scrollBlockService.deactivate();
+    }
+    ngAfterViewInit() {
+        this.isOpen = true;
+        this.changeDetector.detectChanges();
+    }
+    close() {
+        if (!this.closeChange) {
+            return;
+        }
+        this.isOpen = false;
+        setTimeout(() => {
+            this.closeChange.emit();
+        }, 250);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDrawerComponent, deps: [{ token: i1.ScrollBlockService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiDrawerComponent, isStandalone: true, selector: "ipi-drawer", outputs: { closeChange: "closeChange" }, queries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true }], ngImport: i0, template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--ipi-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--ipi-drawer-background, #FFFFFF);box-shadow:var(--ipi-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--ipi-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--ipi-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: [OpenCloseAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiDrawerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-drawer', animations: [OpenCloseAnimation], imports: [
+                        NgTemplateOutlet,
+                    ], template: "<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n", styles: [".backdrop{width:100%;height:100%;position:fixed;top:0;left:0;background-color:var(--ipi-drawer-backdrop-background, #0B1222);opacity:.5;z-index:96}.wrapper{width:100%;height:100vh;display:flex;justify-content:right;position:fixed;top:0;left:0;z-index:97}.container{max-width:100%;width:var(--ipi-drawer-width, 410px);height:100%;display:flex;flex-direction:column;row-gap:32px;padding:44px 24px;background-color:var(--ipi-drawer-background, #FFFFFF);box-shadow:var(--ipi-drawer-box-shadow, 0px 4px 8px 0px #D6D6D635);box-sizing:border-box}.header{display:flex;flex-direction:column;row-gap:12px}.title{color:var(--ipi-drawer-title-color, #0B1222);font-size:24px;font-weight:600}.description{color:var(--ipi-drawer-description-color, #5D6068)}.content{width:100%;height:100%;overflow-y:auto}.actions{width:100%;height:fit-content}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ScrollBlockService }, { type: i0.ChangeDetectorRef }], propDecorators: { closeChange: [{
+                type: Output
+            }], title: [{
+                type: ContentChild,
+                args: ['title']
+            }], description: [{
+                type: ContentChild,
+                args: ['description']
+            }], content: [{
+                type: ContentChild,
+                args: ['content']
+            }], actions: [{
+                type: ContentChild,
+                args: ['actions']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiDrawerComponent };
+//# sourceMappingURL=apexara-ng-components-drawer.mjs.map

package/fesm2022/apexara-ng-components-drawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-drawer.mjs","sources":["../../../../projects/apexara/ng-components/drawer/src/drawer.component.ts","../../../../projects/apexara/ng-components/drawer/src/drawer.component.html","../../../../projects/apexara/ng-components/drawer/apexara-ng-components-drawer.ts"],"sourcesContent":["import { Component, OnDestroy, ContentChild, TemplateRef, EventEmitter, Output, AfterViewInit, ChangeDetectorRef } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\nimport { ScrollBlockService } from '@apexara/ng-components/services';\n\nconst OpenCloseAnimation = trigger('openCloseAnimation', [\n  state('true', style({\n      transform: 'translateX(0%)',\n    }),\n  ),\n  state('false', style({\n      transform: 'translateX(100%)',\n    }),\n  ),\n  transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),\n]);\n\n@Component({\n  selector: 'ipi-drawer',\n  templateUrl: './drawer.component.html',\n  styleUrls: ['./drawer.component.css'],\n  animations: [OpenCloseAnimation],\n  imports: [\n    NgTemplateOutlet,\n  ],\n})\n\nexport class IpiDrawerComponent implements AfterViewInit, OnDestroy {\n\n  constructor(\n    private scrollBlockService: ScrollBlockService,\n    private changeDetector: ChangeDetectorRef) {\n\n    this.scrollBlockService.activate();\n  }\n\n  public isOpen = false;\n\n  @Output() closeChange = new EventEmitter<void>();\n\n  @ContentChild('title') title?: TemplateRef<any>;\n  @ContentChild('description') description?: TemplateRef<any>;\n  @ContentChild('content') content?: TemplateRef<any>;\n  @ContentChild('actions') actions?: TemplateRef<any>;\n\n  public ngOnDestroy(): void {\n    this.scrollBlockService.deactivate();\n  }\n\n  public ngAfterViewInit(): void {\n    this.isOpen = true;\n\n    this.changeDetector.detectChanges();\n  }\n\n  public close(): void {\n    if (!this.closeChange) {\n      return;\n    }\n\n    this.isOpen = false;\n\n    setTimeout(() => {\n      this.closeChange.emit();\n    }, 250);\n  }\n\n}\n","<div class=\"backdrop\"></div>\n\n<div class=\"wrapper\">\n    <div class=\"container\" [@openCloseAnimation]=\"isOpen\">\n        <div class=\"header\">\n            @if (title) {\n                <span class=\"title\">\n                    <ng-container [ngTemplateOutlet]=\"title\"></ng-container>\n                </span>\n            }\n            \n            @if (description) {\n                <span class=\"description\">\n                    <ng-container [ngTemplateOutlet]=\"description\"></ng-container>\n                </span>\n            }\n        </div>\n\n        @if (content) {\n            <div class=\"content\">\n                <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n            </div>\n        }\n\n        @if (actions) {\n            <div class=\"actions\">\n                <ng-container [ngTemplateOutlet]=\"actions\"></ng-container>\n            </div>\n        }\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,EAAE;AACvD,IAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAChB,QAAA,SAAS,EAAE,gBAAgB;AAC5B,KAAA,CAAC,CACH;AACD,IAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;AACjB,QAAA,SAAS,EAAE,kBAAkB;AAC9B,KAAA,CAAC,CACH;AACD,IAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAC5E,CAAA,CAAC;MAYW,kBAAkB,CAAA;IAE7B,WAAA,CACU,kBAAsC,EACtC,cAAiC,EAAA;QADjC,IAAA,CAAA,kBAAkB,GAAlB,kBAAkB;QAClB,IAAA,CAAA,cAAc,GAAd,cAAc;QAKjB,IAAA,CAAA,MAAM,GAAG,KAAK;AAEX,QAAA,IAAA,CAAA,WAAW,GAAG,IAAI,YAAY,EAAQ;AAL9C,QAAA,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE;IACpC;IAWO,WAAW,GAAA;AAChB,QAAA,IAAI,CAAC,kBAAkB,CAAC,UAAU,EAAE;IACtC;IAEO,eAAe,GAAA;AACpB,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI;AAElB,QAAA,IAAI,CAAC,cAAc,CAAC,aAAa,EAAE;IACrC;IAEO,KAAK,GAAA;AACV,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;QACF;AAEA,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK;QAEnB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;QACzB,CAAC,EAAE,GAAG,CAAC;IACT;8GAtCW,kBAAkB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,kBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kBAAkB,kdC5B/B,i7BA+BA,EAAA,MAAA,EAAA,CAAA,i0BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDPI,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAFN,CAAC,kBAAkB,CAAC,EAAA,CAAA,CAAA;;2FAMrB,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAV9B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,YAAY,EAAA,UAAA,EAGV,CAAC,kBAAkB,CAAC,EAAA,OAAA,EACvB;wBACP,gBAAgB;AACjB,qBAAA,EAAA,QAAA,EAAA,i7BAAA,EAAA,MAAA,EAAA,CAAA,i0BAAA,CAAA,EAAA;;sBAcA;;sBAEA,YAAY;uBAAC,OAAO;;sBACpB,YAAY;uBAAC,aAAa;;sBAC1B,YAAY;uBAAC,SAAS;;sBACtB,YAAY;uBAAC,SAAS;;;AE5CzB;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-expander.mjs

@@ -0,0 +1,41 @@
+import * as i0 from '@angular/core';
+import { Input, Component } from '@angular/core';
+import { NgClass } from '@angular/common';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+const OpenCloseAnimation = trigger('openCloseAnimation', [
+    state('true', style({
+        height: '{{ height }}',
+        paddingBottom: '20px',
+    }), { params: { height: '*' } }),
+    state('false', style({
+        height: '0px',
+        paddingBottom: '0px',
+    })),
+    transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),
+]);
+class IpiExpanderComponent {
+    constructor() {
+        this.isOpen = false;
+        this.maxHeight = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiExpanderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IpiExpanderComponent, isStandalone: true, selector: "ipi-expander", inputs: { isOpen: "isOpen", maxHeight: "maxHeight" }, ngImport: i0, template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n        <ng-content select=\"[content]\"></ng-content>\n    </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--ipi-expander-background-color, #FFFFFF);border-radius:8px;border:var(--ipi-expander-border, 0px);box-shadow:var(--ipi-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--ipi-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--ipi-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--ipi-expander-chevron-color, #5D6068);border-left:2px solid var(--ipi-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--ipi-expander-chevron-open-color, #F96138);border-left:2px solid var(--ipi-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--ipi-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [OpenCloseAnimation] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiExpanderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-expander', animations: [OpenCloseAnimation], imports: [
+                        NgClass,
+                    ], template: "<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n        <ng-content select=\"[content]\"></ng-content>\n    </div>\n</div>\n", styles: [":host{display:block;touch-action:manipulation}.container{display:flex;flex-direction:column;background-color:var(--ipi-expander-background-color, #FFFFFF);border-radius:8px;border:var(--ipi-expander-border, 0px);box-shadow:var(--ipi-expander-box-shadow, 0px 4px 8px 0px rgba(214, 214, 214, .35))}.header{display:flex;align-items:center;justify-content:space-between;column-gap:30px;cursor:pointer;padding:20px 30px}.header:focus{outline:var(--ipi-expander-outline-color, none)}.header .title{width:100%;font-size:16px;font-weight:500;color:var(--ipi-expander-title-color, #0B1222)}.header .chevron{width:8px;height:8px;flex-shrink:0;position:relative;bottom:3px;transform-origin:center;transform:rotate(-135deg);transition:all .25s cubic-bezier(.4,0,.1,1);border-top:2px solid var(--ipi-expander-chevron-color, #5D6068);border-left:2px solid var(--ipi-expander-chevron-color, #5D6068);border-top-left-radius:3px;border-top-right-radius:1px;border-bottom-left-radius:1px}.container.open .header .chevron{bottom:-3px;transform:rotate(45deg);border-top:2px solid var(--ipi-expander-chevron-open-color, #F96138);border-left:2px solid var(--ipi-expander-chevron-open-color, #F96138)}.content{overflow:hidden;font-size:15px;color:var(--ipi-expander-content-color, #5D6068);padding-left:30px;padding-right:30px}.container.open .content{overflow:auto}.container.fit-content .content::-webkit-scrollbar{display:none}\n"] }]
+        }], propDecorators: { isOpen: [{
+                type: Input
+            }], maxHeight: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiExpanderComponent };
+//# sourceMappingURL=apexara-ng-components-expander.mjs.map

package/fesm2022/apexara-ng-components-expander.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-expander.mjs","sources":["../../../../projects/apexara/ng-components/expander/src/expander.component.ts","../../../../projects/apexara/ng-components/expander/src/expander.component.html","../../../../projects/apexara/ng-components/expander/apexara-ng-components-expander.ts"],"sourcesContent":["import { Component, Input } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { animate, state, style, transition, trigger } from '@angular/animations';\n\nconst OpenCloseAnimation = trigger('openCloseAnimation', [\n  state('true', style({\n      height: '{{ height }}',\n      paddingBottom: '20px',\n    }),\n    { params: { height: '*' }},\n  ),\n  state('false', style({\n      height: '0px',\n      paddingBottom: '0px',\n    }),\n  ),\n  transition('false <=> true', animate('0.25s cubic-bezier(0.4, 0, 0.1, 1)')),\n]);\n\n@Component({\n  selector: 'ipi-expander',\n  templateUrl: './expander.component.html',\n  styleUrls: ['./expander.component.css'],\n  animations: [OpenCloseAnimation],\n  imports: [\n    NgClass,\n  ],\n})\n\nexport class IpiExpanderComponent {\n\n  @Input() isOpen = false;\n  @Input() maxHeight: number | null = null;\n\n}\n","<div [ngClass]=\"{ container: true, open: isOpen, 'fit-content': !maxHeight }\">\n    <div class=\"header\" role=\"button\" tabindex=\"0\" (click)=\"isOpen = !isOpen\">\n        <span class=\"title\">\n            <ng-content select=\"[title]\"></ng-content>\n        </span>\n\n        <span class=\"chevron\"></span>\n    </div>\n\n    <div class=\"content\" [@openCloseAnimation]=\"{ value: isOpen, params: { height: maxHeight ? maxHeight + 'px' : '*' }}\">\n        <ng-content select=\"[content]\"></ng-content>\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA,MAAM,kBAAkB,GAAG,OAAO,CAAC,oBAAoB,EAAE;AACvD,IAAA,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC;AAChB,QAAA,MAAM,EAAE,cAAc;AACtB,QAAA,aAAa,EAAE,MAAM;KACtB,CAAC,EACF,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,EAAC,CAC3B;AACD,IAAA,KAAK,CAAC,OAAO,EAAE,KAAK,CAAC;AACjB,QAAA,MAAM,EAAE,KAAK;AACb,QAAA,aAAa,EAAE,KAAK;AACrB,KAAA,CAAC,CACH;AACD,IAAA,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,oCAAoC,CAAC,CAAC;AAC5E,CAAA,CAAC;MAYW,oBAAoB,CAAA;AAVjC,IAAA,WAAA,GAAA;QAYW,IAAA,CAAA,MAAM,GAAG,KAAK;QACd,IAAA,CAAA,SAAS,GAAkB,IAAI;AAEzC,IAAA;8GALY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,8HC7BjC,4hBAaA,EAAA,MAAA,EAAA,CAAA,m4CAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDYI,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,UAAA,EAFG,CAAC,kBAAkB,CAAC,EAAA,CAAA,CAAA;;2FAMrB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAVhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,UAAA,EAGZ,CAAC,kBAAkB,CAAC,EAAA,OAAA,EACvB;wBACP,OAAO;AACR,qBAAA,EAAA,QAAA,EAAA,4hBAAA,EAAA,MAAA,EAAA,CAAA,m4CAAA,CAAA,EAAA;;sBAKA;;sBACA;;;AEhCH;;AAEG;;;;"}

package/fesm2022/apexara-ng-components-image.mjs

@@ -0,0 +1,201 @@
+import * as i0 from '@angular/core';
+import { Inject, Injectable, Input, Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { of } from 'rxjs';
+import { catchError, map, tap, finalize, share } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+
+class IpiImgService {
+    constructor(http, document) {
+        this.http = http;
+        this.document = document;
+        this.svgs = new Map();
+        this.svgsLoading = new Map();
+        this.defaultSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0" fill="#2e3434" fill-opacity="0.34902"/></svg>';
+    }
+    loadImg(url) {
+        if (!url.endsWith('.svg')) {
+            return url;
+        }
+        if (this.svgs.has(url)) {
+            return of(this.svgs.get(url));
+        }
+        if (this.svgsLoading.has(url)) {
+            return this.svgsLoading.get(url);
+        }
+        const observable = this.getSvg(url)
+            .pipe(catchError(() => { return of(this.defaultSvg); }), map(content => this.createSVG(content)), tap(element => this.svgs.set(url, element)), finalize(() => this.svgsLoading.delete(url)), share());
+        this.svgsLoading.set(url, observable);
+        return observable;
+    }
+    getSvg(url) {
+        return this.http.get(url, { responseType: 'text' });
+    }
+    createSVG(content) {
+        const div = this.document.createElement('DIV');
+        div.innerHTML = content;
+        return div.querySelector('svg');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiImgService, deps: [{ token: i1.HttpClient }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiImgService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiImgService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }] });
+
+class ImageHelper {
+    constructor() {
+        this.loaded = false;
+    }
+}
+class IpiImageComponent {
+    constructor(element, renderer, imgService, document, changeDetectorRef) {
+        this.element = element;
+        this.renderer = renderer;
+        this.imgService = imgService;
+        this.document = document;
+        this.changeDetectorRef = changeDetectorRef;
+        this.helper = new ImageHelper();
+        this.changeDetectorRef.detach();
+    }
+    ngOnInit() {
+        this.init();
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    ngOnChanges(changeRecord) {
+        if (!this.helper.loaded) {
+            return;
+        }
+        if (changeRecord['src']) {
+            this.destroy();
+            this.init();
+        }
+        if (changeRecord['ariaLabel']) {
+            this.setAriaLabel(changeRecord['ariaLabel'].currentValue);
+        }
+    }
+    init() {
+        if (!this.src || !this.ariaLabel) {
+            return;
+        }
+        const img = this.imgService.loadImg(this.src);
+        if (typeof img === 'string') {
+            this.initImage(img);
+            return;
+        }
+        this.helper.imgSub = img.subscribe(img => { this.initSvg(img); });
+    }
+    destroy() {
+        if (this.helper.imgSub) {
+            this.helper.imgSub.unsubscribe();
+        }
+        this.helper = new ImageHelper();
+    }
+    initImage(url) {
+        const img = this.document.createElement('img');
+        img.onerror = () => { this.onImgError(elem, img); };
+        const elem = this.element.nativeElement;
+        elem.innerHTML = '';
+        this.setStyling(img);
+        img.src = url;
+        this.renderer.appendChild(elem, img);
+        this.setAriaLabel(this.ariaLabel);
+        this.helper.loaded = true;
+        this.copyNgContentAttribute(elem, img);
+    }
+    initSvg(svg) {
+        if (this.helper.loaded || !svg) {
+            return;
+        }
+        const clonedSvg = svg.cloneNode(true);
+        this.setStyling(clonedSvg);
+        const elem = this.element.nativeElement;
+        elem.innerHTML = '';
+        this.renderer.appendChild(elem, clonedSvg);
+        this.helper.loaded = true;
+        if (!(this.ariaLabel === undefined && elem.firstChild.hasAttribute('aria-label')) && this.ariaLabel) {
+            this.setAriaLabel(this.ariaLabel);
+        }
+        this.copyNgContentAttribute(elem, clonedSvg);
+    }
+    setAriaLabel(label) {
+        const img = this.element.nativeElement.firstChild;
+        if (img) {
+            if (label === '') {
+                this.renderer.setAttribute(img, 'aria-hidden', 'true');
+                this.renderer.removeAttribute(img, 'aria-label');
+            }
+            else {
+                this.renderer.removeAttribute(img, 'aria-hidden');
+                this.renderer.setAttribute(img, 'aria-label', label);
+            }
+        }
+    }
+    setStyling(element) {
+        this.element.nativeElement.style.display = 'flex';
+        this.element.nativeElement.style.justifyContent = 'center';
+        this.element.nativeElement.style.alignItems = 'center';
+        element.style.width = 'inherit';
+        element.style.maxWidth = 'inherit';
+        element.style.height = 'inherit';
+        element.style.maxHeight = 'inherit';
+    }
+    onImgError(element, img) {
+        this.renderer.removeChild(element, img);
+        let svg = document.createRange().createContextualFragment(this.imgService.defaultSvg);
+        this.renderer.appendChild(element, svg);
+        setTimeout(() => {
+            this.renderer.setAttribute(element.firstChild, 'aria-label', 'A broken or missing image');
+        });
+    }
+    copyNgContentAttribute(hostElem, icon) {
+        const attributes = hostElem.attributes;
+        for (let i = 0; i < attributes.length; i += 1) {
+            const attribute = attributes.item(i);
+            if (attribute && attribute.name.startsWith('_ngcontent')) {
+                this.setNgContentAttribute(icon, attribute.name);
+                break;
+            }
+        }
+    }
+    setNgContentAttribute(parent, attributeName) {
+        this.renderer.setAttribute(parent, attributeName, '');
+        for (let i = 0; i < parent.childNodes.length; i += 1) {
+            const child = parent.childNodes[i];
+            if (child instanceof Element) {
+                this.setNgContentAttribute(child, attributeName);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiImageComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: IpiImgService }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.2", type: IpiImageComponent, isStandalone: true, selector: "ipi-img", inputs: { src: "src", ariaLabel: "ariaLabel" }, usesOnChanges: true, ngImport: i0, template: '<ng-content></ng-content>', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiImageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ipi-img',
+                    template: '<ng-content></ng-content>',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: IpiImgService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { src: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiImageComponent, IpiImgService };
+//# sourceMappingURL=apexara-ng-components-image.mjs.map

package/fesm2022/apexara-ng-components-image.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-image.mjs","sources":["../../../../projects/apexara/ng-components/image/src/ipi-img.service.ts","../../../../projects/apexara/ng-components/image/src/ipi-img.component.ts","../../../../projects/apexara/ng-components/image/apexara-ng-components-image.ts"],"sourcesContent":["import { Inject, Injectable } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nimport { HttpClient } from '@angular/common/http';\n\nimport { Observable, of } from 'rxjs';\nimport { tap, finalize, share, map, catchError } from 'rxjs/operators';\n\n@Injectable({\n  providedIn: 'root'\n})\n\nexport class IpiImgService {\n\n  constructor(private http: HttpClient, @Inject(DOCUMENT) private document: Document) { }\n\n  private svgs = new Map<string, SVGElement>();\n  private svgsLoading = new Map<string, Observable<SVGElement>>();\n\n  public defaultSvg = '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"m 4 1 c -1.644531 0 -3 1.355469 -3 3 v 1 h 1 v -1 c 0 -1.109375 0.890625 -2 2 -2 h 1 v -1 z m 2 0 v 1 h 4 v -1 z m 5 0 v 1 h 1 c 1.109375 0 2 0.890625 2 2 v 1 h 1 v -1 c 0 -1.644531 -1.355469 -3 -3 -3 z m -5 4 c -0.550781 0 -1 0.449219 -1 1 s 0.449219 1 1 1 s 1 -0.449219 1 -1 s -0.449219 -1 -1 -1 z m -5 1 v 4 h 1 v -4 z m 13 0 v 4 h 1 v -4 z m -4.5 2 l -2 2 l -1.5 -1 l -2 2 v 0.5 c 0 0.5 0.5 0.5 0.5 0.5 h 7 s 0.472656 -0.035156 0.5 -0.5 v -1 z m -8.5 3 v 1 c 0 1.644531 1.355469 3 3 3 h 1 v -1 h -1 c -1.109375 0 -2 -0.890625 -2 -2 v -1 z m 13 0 v 1 c 0 1.109375 -0.890625 2 -2 2 h -1 v 1 h 1 c 1.644531 0 3 -1.355469 3 -3 v -1 z m -8 3 v 1 h 4 v -1 z m 0 0\" fill=\"#2e3434\" fill-opacity=\"0.34902\"/></svg>'; \n\n  public loadImg(url: string): Observable<SVGElement> | string {\n    if (!url.endsWith('.svg')) {\n      return url;\n    }\n\n    if (this.svgs.has(url)) {\n      return of(this.svgs.get(url) as SVGElement);\n    }\n\n    if (this.svgsLoading.has(url)) {\n      return this.svgsLoading.get(url) as Observable<SVGElement>;\n    }\n\n    const observable = this.getSvg(url)\n      .pipe(\n        catchError(() => { return of(this.defaultSvg); }),\n        map(content => this.createSVG(content)),\n        tap(element => this.svgs.set(url, element as SVGElement)),\n        finalize(() => this.svgsLoading.delete(url)),\n        share()\n      );\n\n    this.svgsLoading.set(url, observable);\n\n    return observable;\n  }\n\n  private getSvg(url: string): Observable<string> {\n    return this.http.get(url, { responseType: 'text' });\n  }\n\n  private createSVG(content: string): SVGElement {\n      const div = this.document.createElement('DIV');\n\n      div.innerHTML = content;\n\n      return div.querySelector('svg') as SVGElement;\n  }\n\n}\n","import { ChangeDetectorRef, Component, ElementRef, Inject, Input, Renderer2, SimpleChanges } from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nimport { Subscription } from 'rxjs';\n\nimport { IpiImgService } from './ipi-img.service';\n\nclass ImageHelper {\n  loaded = false;\n  imgSub?: Subscription;\n}\n\n@Component({\n  selector: 'ipi-img',\n  template: '<ng-content></ng-content>',\n})\n\nexport class IpiImageComponent {\n\n  constructor(\n    private element: ElementRef,\n    private renderer: Renderer2,\n    private imgService: IpiImgService,\n    @Inject(DOCUMENT) private document: Document,\n    private changeDetectorRef: ChangeDetectorRef) {\n      this.changeDetectorRef.detach();\n  }\n\n  @Input() src!: string;\n  @Input() ariaLabel!: string;\n\n  private helper = new ImageHelper();\n\n  public ngOnInit(): void {\n    this.init();\n  }\n\n  public ngOnDestroy(): void {\n    this.destroy();\n  }\n\n  public ngOnChanges(changeRecord: SimpleChanges): void {\n    if (!this.helper.loaded) {\n      return;\n    }\n\n    if (changeRecord['src']) {\n      this.destroy();\n\n      this.init();\n    }\n\n    if (changeRecord['ariaLabel']) {\n      this.setAriaLabel(changeRecord['ariaLabel'].currentValue);\n    }\n  }\n\n  private init(): void {\n    if (!this.src || !this.ariaLabel) {\n      return;\n     }\n\n    const img = this.imgService.loadImg(this.src);\n\n    if (typeof img === 'string') {\n      this.initImage(img);\n\n      return;\n    }\n\n    this.helper.imgSub = img.subscribe(img => { this.initSvg(img); });\n  }\n\n  private destroy(): void {\n    if (this.helper.imgSub) {\n      this.helper.imgSub.unsubscribe();\n    }\n\n    this.helper = new ImageHelper();\n  }\n\n  private initImage(url: string): void {\n    const img = this.document.createElement('img');\n    img.onerror = () => { this.onImgError(elem, img); };\n  \n    const elem = this.element.nativeElement;\n    elem.innerHTML = '';\n\n    this.setStyling(img);\n\n    img.src = url;\n\n    this.renderer.appendChild(elem, img);\n    this.setAriaLabel(this.ariaLabel);\n  \n    this.helper.loaded = true;\n    this.copyNgContentAttribute(elem, img);\n  }\n\n  private initSvg(svg: SVGElement): void {\n    if (this.helper.loaded || !svg) {\n      return;\n    }\n\n    const clonedSvg = svg.cloneNode(true) as SVGElement;\n\n    this.setStyling(clonedSvg);\n\n    const elem = this.element.nativeElement;\n    elem.innerHTML = '';\n\n    this.renderer.appendChild(elem, clonedSvg);\n    this.helper.loaded = true;\n\n    if (!(this.ariaLabel === undefined && elem.firstChild.hasAttribute('aria-label')) && this.ariaLabel) {\n      this.setAriaLabel(this.ariaLabel);\n    }\n\n    this.copyNgContentAttribute(elem, clonedSvg);\n  }\n\n  private setAriaLabel(label: string): void {\n    const img = this.element.nativeElement.firstChild;\n\n    if (img) {\n      if (label === '') {\n        this.renderer.setAttribute(img, 'aria-hidden', 'true');\n        this.renderer.removeAttribute(img, 'aria-label');\n      } else {\n        this.renderer.removeAttribute(img, 'aria-hidden');\n        this.renderer.setAttribute(img, 'aria-label', label);\n      }\n    }\n  }\n\n  private setStyling(element: SVGElement | HTMLImageElement) {\n    this.element.nativeElement.style.display = 'flex';\n    this.element.nativeElement.style.justifyContent = 'center';\n    this.element.nativeElement.style.alignItems = 'center';\n\n    element.style.width = 'inherit';\n    element.style.maxWidth = 'inherit';\n\n    element.style.height = 'inherit';\n    element.style.maxHeight = 'inherit';\n  }\n\n  private onImgError(element: any, img: HTMLImageElement): void {\n    this.renderer.removeChild(element, img);\n\n    let svg = document.createRange().createContextualFragment(this.imgService.defaultSvg);\n\n    this.renderer.appendChild(element, svg);\n\n    setTimeout(() => {\n      this.renderer.setAttribute(element.firstChild, 'aria-label', 'A broken or missing image');\n    });\n  }\n\n  private copyNgContentAttribute(hostElem: any, icon: SVGElement | HTMLImageElement) {\n    const attributes = hostElem.attributes as NamedNodeMap;\n\n    for (let i = 0; i < attributes.length; i += 1) {\n      const attribute = attributes.item(i);\n  \n      if (attribute && attribute.name.startsWith('_ngcontent')) {\n        this.setNgContentAttribute(icon, attribute.name);\n        break;\n      }\n    }\n  }\n\n  private setNgContentAttribute(parent: Node, attributeName: string) {\n    this.renderer.setAttribute(parent, attributeName, '');\n\n    for (let i = 0; i < parent.childNodes.length; i += 1) {\n      const child = parent.childNodes[i];\n\n      if (child instanceof Element) {\n        this.setNgContentAttribute(child, attributeName);\n      }\n    }\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/apexara-ng-components-input.mjs

@@ -0,0 +1,129 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, Output, Input, Component } from '@angular/core';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { IpiImageComponent } from '@apexara/ng-components/image';
+import { TooltipPosition, IpiTooltipDirective } from '@apexara/ng-components/tooltip';
+
+class IpiInputComponent {
+    constructor(changeDetectorRef) {
+        this.changeDetectorRef = changeDetectorRef;
+        this.inputChange = new EventEmitter();
+        this.suffixImgChange = new EventEmitter();
+        this.helperTextChange = new EventEmitter();
+        this.controlInvalid = false;
+        this.tooltipPosition = TooltipPosition;
+        this.control = null;
+        this.changeDetectorRef.detach();
+    }
+    ngOnInit() {
+        this.setControl();
+        this.changeDetectorRef.detectChanges();
+    }
+    ngOnDestroy() {
+        if (this.controlSubscription) {
+            this.controlSubscription.unsubscribe();
+        }
+    }
+    onInput(event) {
+        const input = event.target;
+        const sanitizedValue = input.value.replace(/([\u2700-\u27BF]|[\uE000-\uF8FF]|[\uD83C-\uDBFF\uDC00-\uDFFF])/g, '');
+        input.value = sanitizedValue;
+        this.inputChange.emit(sanitizedValue);
+        this.changeDetectorRef.detectChanges();
+    }
+    onSuffixImage() {
+        this.suffixImgChange.emit();
+        this.changeDetectorRef.detectChanges();
+    }
+    onHelperText() {
+        this.helperTextChange.emit();
+        this.changeDetectorRef.detectChanges();
+    }
+    onFocusOut() {
+        this.initChange();
+    }
+    setControl() {
+        if (!this.options) {
+            return;
+        }
+        if (!this.options.placeholder) {
+            this.options.placeholder = this.options.label;
+        }
+        if (!this.options.formGroup || !this.options.formControlName) {
+            return;
+        }
+        this.control = this.options.formGroup.controls[this.options.formControlName];
+        this.checkIfControlDisabled(this.control);
+        this.control.markAsTouched();
+        this.controlSubscription = this.control.statusChanges.subscribe(() => {
+            this.initChange();
+        });
+    }
+    initChange() {
+        if (!this.control) {
+            return;
+        }
+        this.checkIfControlInvalid(this.control);
+        this.getLabel();
+        this.changeDetectorRef.detectChanges();
+    }
+    checkIfControlInvalid(control) {
+        this.controlInvalid = control.touched && control.invalid;
+    }
+    checkIfControlDisabled(control) {
+        if (control.disabled || this.options.disabled) {
+            control.disable();
+            this.options.disabled = true;
+        }
+    }
+    getLabel() {
+        this.label = '';
+        const options = this.options;
+        const formGroup = options.formGroup;
+        const formControlName = options.formControlName;
+        if (formGroup && formControlName && options.errors && this.controlInvalid) {
+            for (const error in options.errors) {
+                if (formGroup.controls[formControlName].hasError(error)) {
+                    this.label = options.errors[error];
+                    return;
+                }
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.2", type: IpiInputComponent, isStandalone: true, selector: "ipi-input", inputs: { options: "options" }, outputs: { inputChange: "inputChange", suffixImgChange: "suffixImgChange", helperTextChange: "helperTextChange" }, host: { listeners: { "focusout": "onFocusOut()" } }, ngImport: i0, template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <ipi-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [ariaLabel]=\"'Input prefix icon'\"></ipi-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <ipi-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [ariaLabel]=\"'Input suffix icon'\"></ipi-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--ipi-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--ipi-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--ipi-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--ipi-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--ipi-input-border-color, #E9E9E9);border-width:var(--ipi-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--ipi-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-input-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}ipi-img.left path{fill:var(--ipi-input-icon-left-fill, #C6C6C6);stroke:var(--ipi-input-icon-left-stroke, transparent)}ipi-img.right path{fill:var(--ipi-input-icon-right-fill, #C6C6C6);stroke:var(--ipi-input-icon-right-stroke, transparent)}.error{border-color:var(--ipi-input-border-error-color, #F96138);border-width:var(--ipi-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--ipi-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: IpiImageComponent, selector: "ipi-img", inputs: ["src", "ariaLabel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: IpiTooltipDirective, selector: "[ipiTooltip]", inputs: ["ipiTooltip", "tooltipPosition"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.2", ngImport: i0, type: IpiInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ipi-input', imports: [
+                        NgClass,
+                        NgTemplateOutlet,
+                        RouterLink,
+                        FormsModule,
+                        IpiImageComponent,
+                        ReactiveFormsModule,
+                        IpiTooltipDirective,
+                        IpiTooltipDirective
+                    ], template: "@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <ipi-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [ariaLabel]=\"'Input prefix icon'\"></ipi-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <ipi-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [ariaLabel]=\"'Input suffix icon'\"></ipi-img>\n    }\n</ng-template>\n", styles: [":host{display:flex;flex-direction:column;touch-action:manipulation}.header{width:100%;min-height:20px;display:flex;align-items:center;justify-content:space-between;column-gap:4px;color:var(--ipi-input-header-color, #0B1222);text-wrap:nowrap;margin-bottom:2px}.header-helper{font-size:12px;text-align:right;color:var(--ipi-input-helper-text-color, #5D6068);cursor:pointer}.header-helper:after{content:\"\";display:block;width:0;height:2px;background:var(--ipi-input-helper-text-color, #5D6068);transition:width .3s}.header-helper:hover:after{width:100%}input::placeholder{color:var(--ipi-input-placeholder-color, #C6C6C6)}.footer{height:14px;font-size:12px;margin-top:2px}.footer.error{color:var(--ipi-input-error-color, #F96138)}label{font-size:14px;font-weight:600;text-wrap:wrap;margin-right:4px}.label-wrapper{display:flex;align-items:center}.input-field{height:44px;display:flex;align-items:center;justify-content:space-around;border:solid var(--ipi-input-border-color, #E9E9E9);border-width:var(--ipi-input-border-width, 1px);border-radius:4px;transition:border 1s;padding:0 6px}.input-field.disabled{opacity:.7}.input{width:100%;height:20px;min-width:108px;font-weight:400;font-size:14px;color:var(--ipi-input-value-color, #0B1222);background-color:transparent;line-height:20px;border:none;outline:none}input[disabled],.input-field.disabled{cursor:not-allowed}input[type=password]{font-weight:700;letter-spacing:3px}input[type=password]::placeholder{font-weight:400;letter-spacing:normal}.icon{width:16px;height:16px}.icon.left{margin-right:6px;padding:6px}.icon.right{cursor:pointer;margin-left:6px;padding:6px}.tooltip-icon{overflow:visible}.tooltip-icon path{fill:var(--ipi-input-tooltip-icon-fill, transparent);stroke:var(--ipi-input-tooltip-icon-stroke, #C6C6C6)}ipi-img.left path{fill:var(--ipi-input-icon-left-fill, #C6C6C6);stroke:var(--ipi-input-icon-left-stroke, transparent)}ipi-img.right path{fill:var(--ipi-input-icon-right-fill, #C6C6C6);stroke:var(--ipi-input-icon-right-stroke, transparent)}.error{border-color:var(--ipi-input-border-error-color, #F96138);border-width:var(--ipi-input-border-error-width, 1px)}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active{-webkit-background-clip:text;-webkit-text-fill-color:var(--ipi-input-text-color, #0B1222);box-shadow:inset 0 0 20px 20px #23232300}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
+                type: Input
+            }], inputChange: [{
+                type: Output
+            }], suffixImgChange: [{
+                type: Output
+            }], helperTextChange: [{
+                type: Output
+            }], onFocusOut: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IpiInputComponent };
+//# sourceMappingURL=apexara-ng-components-input.mjs.map

package/fesm2022/apexara-ng-components-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"apexara-ng-components-input.mjs","sources":["../../../../projects/apexara/ng-components/input/src/input.component.ts","../../../../projects/apexara/ng-components/input/src/input.component.html","../../../../projects/apexara/ng-components/input/apexara-ng-components-input.ts"],"sourcesContent":["import { Component, ChangeDetectorRef, Input, Output, EventEmitter, HostListener } from '@angular/core';\nimport { NgClass, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport { AbstractControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';\n\nimport { Subscription } from 'rxjs';\n\nimport { IpiImageComponent } from '@apexara/ng-components/image';\n\nimport { IpiTooltipDirective, TooltipPosition } from '@apexara/ng-components/tooltip';\n\nexport interface IpiInputOptions {\n  label: string;\n  type?: string;\n  tooltip?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  helperText?: string;\n  helperRoute?: string;\n  prefixImg?: string;\n  suffixImg?: string;\n  formGroup?: FormGroup;\n  formControlName?: string;\n  errors?: IpiControlErrors;\n}\n\nexport interface IpiControlErrors {\n  [x: string]: string;\n}\n\n@Component({\n  selector: 'ipi-input',\n  templateUrl: './input.component.html',\n  styleUrls: ['./input.component.css'],\n  imports: [\n    NgClass,\n    NgTemplateOutlet,\n    RouterLink,\n    FormsModule,\n    IpiImageComponent,\n    ReactiveFormsModule,\n    IpiTooltipDirective,\n    IpiTooltipDirective\n  ]\n})\n\nexport class IpiInputComponent {\n\n  constructor(private changeDetectorRef: ChangeDetectorRef) { \n    this.changeDetectorRef.detach();\n  }\n\n  @Input() options!: IpiInputOptions;\n\n  @Output() inputChange = new EventEmitter<string>();\n  @Output() suffixImgChange = new EventEmitter<void>();\n  @Output() helperTextChange = new EventEmitter<void>();\n\n  public label!: string;\n  public controlInvalid = false;\n  public tooltipPosition = TooltipPosition;\n\n  private controlSubscription!: Subscription;\n  private control: AbstractControl | null = null;\n\n  public ngOnInit(): void {\n    this.setControl();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public ngOnDestroy(): void {\n    if (this.controlSubscription) {\n      this.controlSubscription.unsubscribe();\n    }\n  }\n\n  public onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n  \n    const sanitizedValue = input.value.replace(/([\\u2700-\\u27BF]|[\\uE000-\\uF8FF]|[\\uD83C-\\uDBFF\\uDC00-\\uDFFF])/g, '');\n  \n    input.value = sanitizedValue;\n  \n    this.inputChange.emit(sanitizedValue);\n  \n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onSuffixImage(): void {\n    this.suffixImgChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  public onHelperText(): void {\n    this.helperTextChange.emit();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  @HostListener('focusout')\n   onFocusOut(): void {\n    this.initChange();\n  }\n\n  private setControl(): void {\n    if (!this.options) {\n      return;\n    }\n\n    if (!this.options.placeholder) {\n      this.options.placeholder = this.options.label;\n    }\n  \n    if (!this.options.formGroup || !this.options.formControlName) {\n      return;\n    }\n\n    this.control = this.options.formGroup.controls[this.options.formControlName];\n\n    this.checkIfControlDisabled(this.control);\n\n    this.control.markAsTouched();\n\n    this.controlSubscription = this.control.statusChanges.subscribe(() => {\n      this.initChange();\n    });\n  }\n\n  private initChange(): void {\n    if (!this.control) {\n      return;\n    }\n\n    this.checkIfControlInvalid(this.control);\n\n    this.getLabel();\n\n    this.changeDetectorRef.detectChanges();\n  }\n\n  private checkIfControlInvalid(control: AbstractControl): void {\n    this.controlInvalid = control.touched && control.invalid;\n  }\n\n  private checkIfControlDisabled(control: AbstractControl): void {\n    if (control.disabled || this.options.disabled) {\n      control.disable();\n  \n      this.options.disabled = true;\n    }\n  }\n\n  private getLabel(): void {\n    this.label = '';\n\n    const options = this.options!;\n    const formGroup = options.formGroup;\n    const formControlName = options.formControlName;\n\n    if (formGroup && formControlName && options.errors && this.controlInvalid) {\n      for (const error in options.errors) {\n        if (formGroup.controls[formControlName].hasError(error)) {\n          this.label = options.errors[error];\n\n          return;\n        }\n      }\n\n    }\n  }\n\n}\n","@if (options) {\n    @if (options.label !== '') {\n        <div class=\"header\">\n            <div class=\"label-wrapper\">\n                <label>{{ options.label }}</label>\n\n                @if (options.tooltip) {\n                    <svg class=\"tooltip-icon\" [ipiTooltip]=\"options.tooltip\" [tooltipPosition]=\"tooltipPosition.Above\" width=\"16\" height=\"16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <g>\n                            <path d=\"M8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M7.5 7.5H8V11h.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n                            <path d=\"M8.25 5.25a.25.25 0 1 1-.5 0 .25.25 0 0 1 .5 0z\" fill=\"#fff\"/>\n                        </g>\n                    </svg>\n                }\n            </div>\n\n            @if (options.helperText) {\n                <div class=\"header-helper\" (click)=\"onHelperText()\" [routerLink]=\"options.helperRoute\">{{ options.helperText }}</div>\n            }\n        </div>\n    }\n\n    @if (!options.formGroup) {\n        <div class=\"input-field\" [ngClass]=\"{ 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            <input [disabled]=\"options.disabled\" class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" (input)=\"onInput($event)\"/>\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n    } @else {\n        <div class=\"input-field\" [formGroup]=\"options.formGroup\" [ngClass]=\"{ 'error': controlInvalid, 'disabled': options.disabled }\">\n            <ng-container [ngTemplateOutlet]=\"prefix\" [ngTemplateOutletContext]=\"{ prefixImg: options.prefixImg }\"></ng-container>\n\n            @if (options.formControlName) {\n                <input class=\"input\" autocomplete=\"off\" [type]=\"options.type ? options.type : 'text'\" [placeholder]=\"options.placeholder\" [formControlName]=\"options.formControlName\"/>\n            }\n\n            <ng-container [ngTemplateOutlet]=\"suffix\" [ngTemplateOutletContext]=\"{ suffixImg: options.suffixImg }\"></ng-container>\n        </div>\n\n        <div class=\"footer\" [ngClass]=\"{ 'error': controlInvalid }\">\n            {{ label }}\n        </div>\n    }\n}\n\n<ng-template #prefix let-prefixImg=\"prefixImg\">\n    @if (prefixImg) {\n        <ipi-img class=\"icon left\" [src]=\"'assets/img/' + prefixImg\" [ariaLabel]=\"'Input prefix icon'\"></ipi-img>\n    }\n</ng-template>\n\n<ng-template #suffix let-suffixImg=\"suffixImg\">\n    @if (suffixImg) {\n        <ipi-img class=\"icon right\" [src]=\"'assets/img/' + suffixImg\" (click)=\"onSuffixImage()\" [ariaLabel]=\"'Input suffix icon'\"></ipi-img>\n    }\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}