labx-components 1.0.0 → 1.1.0

package/angular-lib/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "dest": "../dist-angular"
+}

package/angular-lib/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "labx-components-angular",
+  "version": "1.0.1",
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0"
+  }
+}

package/angular-lib/src/lib/angular-component-lib/utils.ts

@@ -0,0 +1,65 @@
+/* eslint-disable */
+/* tslint:disable */
+import { fromEvent } from 'rxjs';
+
+export const proxyInputs = (Cmp: any, inputs: string[]) => {
+  const Prototype = Cmp.prototype;
+  inputs.forEach((item) => {
+    Object.defineProperty(Prototype, item, {
+      get() {
+        return this.el[item];
+      },
+      set(val: any) {
+        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: any, methods: string[]) => {
+  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: any, el: any, events: string[]) => {
+  events.forEach((eventName) => (instance[eventName] = fromEvent(el, eventName)));
+};
+
+export const defineCustomElement = (tagName: string, customElement: any) => {
+  if (customElement !== undefined && typeof customElements !== 'undefined' && !customElements.get(tagName)) {
+    customElements.define(tagName, customElement);
+  }
+};
+
+// tslint:disable-next-line: only-arrow-functions
+export function ProxyCmp(opts: { defineCustomElementFn?: () => void; inputs?: any; methods?: any }) {
+  const decorator = function (cls: any) {
+    const { defineCustomElementFn, inputs, methods } = opts;
+
+    if (defineCustomElementFn !== undefined) {
+      defineCustomElementFn();
+    }
+
+    if (inputs) {
+      proxyInputs(cls, inputs);
+    }
+    if (methods) {
+      proxyMethods(cls, methods);
+    }
+    return cls;
+  };
+  return decorator;
+}

package/angular-lib/src/lib/components.ts

@@ -0,0 +1,94 @@
+/* tslint:disable */
+/* auto-generated angular directive proxies */
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Output, NgZone } from '@angular/core';
+
+import { ProxyCmp } from './angular-component-lib/utils';
+
+import type { Components } from 'labx-components/components';
+
+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';
+@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'],
+})
+export class LabxButton {
+  protected el: HTMLLabxButtonElement;
+  @Output() labxClick = new EventEmitter<CustomEvent<void>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface LabxButton extends Components.LabxButton {
+  /**
+   * Se emite cuando el botón es clickeado
+   */
+  labxClick: EventEmitter<CustomEvent<void>>;
+}
+
+
+@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'],
+})
+export class LabxIcon {
+  protected el: HTMLLabxIconElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface LabxIcon extends Components.LabxIcon {}
+
+
+@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'],
+})
+export class LabxInput {
+  protected el: HTMLLabxInputElement;
+  @Output() labxChange = new EventEmitter<CustomEvent<string>>();
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface LabxInput extends Components.LabxInput {
+  /**
+   * Se emite cuando el valor cambia
+   */
+  labxChange: EventEmitter<CustomEvent<string>>;
+}
+
+

package/{dist-angular/index.js → angular-lib/src/lib/index.ts}

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

package/angular-lib/src/lib/text-value-accessor.ts

@@ -0,0 +1,24 @@
+import { Directive, ElementRef, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@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
+    }
+  ]
+})
+export class TextValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+}

package/angular-lib/src/lib/value-accessor.ts

@@ -0,0 +1,39 @@
+import { Directive, ElementRef, HostListener } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+@Directive({})
+export class ValueAccessor implements ControlValueAccessor {
+
+  private onChange: (value: any) => void = () => {/**/};
+  private onTouched: () => void = () => {/**/};
+  protected lastValue: any;
+
+  constructor(protected el: ElementRef) {}
+
+  writeValue(value: any) {
+    this.el.nativeElement.value = this.lastValue = value == null ? '' : value;
+  }
+
+  handleChangeEvent(value: any) {
+    if (value !== this.lastValue) {
+      this.lastValue = value;
+      this.onChange(value);
+    }
+  }
+
+  @HostListener('focusout')
+  _handleBlurEvent() {
+    this.onTouched();
+  }
+
+  registerOnChange(fn: (value: any) => void) {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: () => void) {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.el.nativeElement.disabled = isDisabled;
+  }
+}

package/angular-lib/src/public-api.ts

@@ -0,0 +1,2 @@
+export * from './lib/components';
+export * from './lib/index';

package/angular-lib/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "useDefineForClassFields": false,
+    "baseUrl": ".",
+    "paths": {
+      "labx-components/components": ["../dist/components/index.js"],
+      "labx-components/components/*": ["../dist/components/*"]
+    }
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  },
+  "include": ["src/**/*.ts", "../dist/types/components.d.ts"],
+  "exclude": ["**/*.spec.ts"]
+}