labx-components 0.1.3 → 1.0.0

package/dist-angular/angular-component-lib/utils.d.ts

@@ -0,0 +1,9 @@
+export declare const proxyInputs: (Cmp: any, inputs: string[]) => void;
+export declare const proxyMethods: (Cmp: any, methods: string[]) => void;
+export declare const proxyOutputs: (instance: any, el: any, events: string[]) => void;
+export declare const defineCustomElement: (tagName: string, customElement: any) => void;
+export declare function ProxyCmp(opts: {
+    defineCustomElementFn?: () => void;
+    inputs?: any;
+    methods?: any;
+}): (cls: any) => any;

package/dist-angular/angular-component-lib/utils.js

@@ -0,0 +1,58 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+export const proxyInputs = (Cmp, inputs) => {
+    const Prototype = Cmp.prototype;
+    inputs.forEach((item) => {
+        Object.defineProperty(Prototype, item, {
+            get() {
+                return this.el[item];
+            },
+            set(val) {
+                this.z.runOutsideAngular(() => (this.el[item] = val));
+            },
+            /**
+             * In the event that proxyInputs is called
+             * multiple times re-defining these inputs
+             * will cause an error to be thrown. As a result
+             * we set configurable: true to indicate these
+             * properties can be changed.
+             */
+            configurable: true,
+        });
+    });
+};
+export const proxyMethods = (Cmp, methods) => {
+    const Prototype = Cmp.prototype;
+    methods.forEach((methodName) => {
+        Prototype[methodName] = function () {
+            const args = arguments;
+            return this.z.runOutsideAngular(() => this.el[methodName].apply(this.el, args));
+        };
+    });
+};
+export const proxyOutputs = (instance, el, events) => {
+    events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+export const defineCustomElement = (tagName, customElement) => {
+    if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+        customElements.define(tagName, customElement);
+    }
+};
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts) {
+    const decorator = function (cls) {
+        const { defineCustomElementFn, inputs, methods } = opts;
+        if (defineCustomElementFn !== undefined) {
+            defineCustomElementFn();
+        }
+        if (inputs) {
+            proxyInputs(cls, inputs);
+        }
+        if (methods) {
+            proxyMethods(cls, methods);
+        }
+        return cls;
+    };
+    return decorator;
+}

package/dist-angular/components.d.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone } from '@angular/core';
+import type { Components } from 'labx-components/components';
+export declare class LabxButton {
+    protected z: NgZone;
+    protected el: HTMLLabxButtonElement;
+    labxClick: EventEmitter<CustomEvent<void>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+}
+export declare interface LabxButton extends Components.LabxButton {
+    /**
+     * Se emite cuando el botón es clickeado
+     */
+    labxClick: EventEmitter<CustomEvent<void>>;
+}
+export declare class LabxIcon {
+    protected z: NgZone;
+    protected el: HTMLLabxIconElement;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+}
+export declare interface LabxIcon extends Components.LabxIcon {
+}
+export declare class LabxInput {
+    protected z: NgZone;
+    protected el: HTMLLabxInputElement;
+    labxChange: EventEmitter<CustomEvent<string>>;
+    constructor(c: ChangeDetectorRef, r: ElementRef, z: NgZone);
+}
+export declare interface LabxInput extends Components.LabxInput {
+    /**
+     * Se emite cuando el valor cambia
+     */
+    labxChange: EventEmitter<CustomEvent<string>>;
+}

package/dist-angular/components.js

@@ -0,0 +1,92 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
+import { ProxyCmp } from './angular-component-lib/utils';
+import { defineCustomElement as defineLabxButton } from 'labx-components/components/labx-button.js';
+import { defineCustomElement as defineLabxIcon } from 'labx-components/components/labx-icon.js';
+import { defineCustomElement as defineLabxInput } from 'labx-components/components/labx-input.js';
+let LabxButton = class LabxButton {
+    z;
+    el;
+    labxClick = new EventEmitter();
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+__decorate([
+    Output()
+], LabxButton.prototype, "labxClick", void 0);
+LabxButton = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: defineLabxButton,
+        inputs: ['disabled', 'label', 'type', 'variant']
+    }),
+    Component({
+        selector: 'labx-button',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: '<ng-content></ng-content>',
+        // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+        inputs: ['disabled', 'label', 'type', 'variant'],
+        outputs: ['labxClick'],
+    })
+], LabxButton);
+export { LabxButton };
+let LabxIcon = class LabxIcon {
+    z;
+    el;
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+LabxIcon = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: defineLabxIcon,
+        inputs: ['filled', 'name', 'size']
+    }),
+    Component({
+        selector: 'labx-icon',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: '<ng-content></ng-content>',
+        // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+        inputs: ['filled', { name: 'name', required: true }, 'size'],
+    })
+], LabxIcon);
+export { LabxIcon };
+let LabxInput = class LabxInput {
+    z;
+    el;
+    labxChange = new EventEmitter();
+    constructor(c, r, z) {
+        this.z = z;
+        c.detach();
+        this.el = r.nativeElement;
+    }
+};
+__decorate([
+    Output()
+], LabxInput.prototype, "labxChange", void 0);
+LabxInput = __decorate([
+    ProxyCmp({
+        defineCustomElementFn: defineLabxInput,
+        inputs: ['disabled', 'error', 'label', 'type', 'value']
+    }),
+    Component({
+        selector: 'labx-input',
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        template: '<ng-content></ng-content>',
+        // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+        inputs: ['disabled', 'error', 'label', 'type', 'value'],
+        outputs: ['labxChange'],
+    })
+], LabxInput);
+export { LabxInput };

package/dist-angular/index.d.ts

@@ -0,0 +1,2 @@
+import * as d from './components';
+export declare const DIRECTIVES: (typeof d.LabxButton | typeof d.LabxIcon | typeof d.LabxInput)[];

package/dist-angular/index.js

@@ -0,0 +1,6 @@
+import * as d from './components';
+export const DIRECTIVES = [
+    d.LabxButton,
+    d.LabxIcon,
+    d.LabxInput
+];

package/dist-angular/text-value-accessor.d.ts

@@ -0,0 +1,5 @@
+import { ElementRef } from '@angular/core';
+import { ValueAccessor } from './value-accessor';
+export declare class TextValueAccessor extends ValueAccessor {
+    constructor(el: ElementRef);
+}

package/dist-angular/text-value-accessor.js

@@ -0,0 +1,31 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Directive, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ValueAccessor } from './value-accessor';
+let TextValueAccessor = class TextValueAccessor extends ValueAccessor {
+    constructor(el) {
+        super(el);
+    }
+};
+TextValueAccessor = __decorate([
+    Directive({
+        /* tslint:disable-next-line:directive-selector */
+        selector: 'labx-input',
+        host: {
+            '(labxChange)': 'handleChangeEvent($event.target?.["value"])'
+        },
+        providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TextValueAccessor),
+                multi: true
+            }
+        ]
+    })
+], TextValueAccessor);
+export { TextValueAccessor };

package/dist-angular/value-accessor.d.ts

@@ -0,0 +1,15 @@
+import { ElementRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+export declare class ValueAccessor implements ControlValueAccessor {
+    protected el: ElementRef;
+    private onChange;
+    private onTouched;
+    protected lastValue: any;
+    constructor(el: ElementRef);
+    writeValue(value: any): void;
+    handleChangeEvent(value: any): void;
+    _handleBlurEvent(): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+}

package/dist-angular/value-accessor.js

@@ -0,0 +1,44 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Directive, HostListener } from '@angular/core';
+let ValueAccessor = class ValueAccessor {
+    el;
+    onChange = () => { };
+    onTouched = () => { };
+    lastValue;
+    constructor(el) {
+        this.el = el;
+    }
+    writeValue(value) {
+        this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+    }
+    handleChangeEvent(value) {
+        if (value !== this.lastValue) {
+            this.lastValue = value;
+            this.onChange(value);
+        }
+    }
+    _handleBlurEvent() {
+        this.onTouched();
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.el.nativeElement.disabled = isDisabled;
+    }
+};
+__decorate([
+    HostListener('focusout')
+], ValueAccessor.prototype, "_handleBlurEvent", null);
+ValueAccessor = __decorate([
+    Directive({})
+], ValueAccessor);
+export { ValueAccessor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labx-components",
-  "version": "0.1.3",
+  "version": "1.0.0",
   "description": "Web Components library built with Stencil. Includes Angular wrappers and design tokens.",
   "author": "egarcia9543",
   "license": "MIT",
@@ -28,7 +28,8 @@
       "types": "./loader/index.d.ts"
     },
     "./angular": {
-      "import": "./dist-angular/components.ts"
+      "import": "./dist-angular/components.js",
+      "types": "./dist-angular/components.d.ts"
     },
     "./components": {
       "import": "./dist/components/index.js",
@@ -45,18 +46,22 @@
     "dist-angular/"
   ],
   "scripts": {
-    "build": "stencil build",
+    "build": "stencil build && tsc -p tsconfig.angular.json",
+    "build:angular": "tsc -p tsconfig.angular.json",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil-test",
     "test:watch": "stencil-test --watch",
     "generate": "stencil generate"
   },
   "devDependencies": {
+    "@angular/core": "^18.2.14",
+    "@angular/forms": "^18.2.14",
     "@stencil/angular-output-target": "^1.3.0",
     "@stencil/core": "^4.27.1",
     "@stencil/vitest": "^1.8.3",
     "@types/node": "^22.13.5",
     "@vitest/browser-playwright": "^4.0.0",
+    "rxjs": "^7.8.2",
     "vitest": "^4.0.0"
   },
   "peerDependencies": {