labx-components 1.0.0 → 1.0.1

package/dist-angular/components.js

@@ -30,6 +30,7 @@ LabxButton = __decorate([
         inputs: ['disabled', 'label', 'type', 'variant']
     }),
     Component({
+        standalone: true,
         selector: 'labx-button',
         changeDetection: ChangeDetectionStrategy.OnPush,
         template: '<ng-content></ng-content>',
@@ -54,6 +55,7 @@ LabxIcon = __decorate([
         inputs: ['filled', 'name', 'size']
     }),
     Component({
+        standalone: true,
         selector: 'labx-icon',
         changeDetection: ChangeDetectionStrategy.OnPush,
         template: '<ng-content></ng-content>',
@@ -81,6 +83,7 @@ LabxInput = __decorate([
         inputs: ['disabled', 'error', 'label', 'type', 'value']
     }),
     Component({
+        standalone: true,
         selector: 'labx-input',
         changeDetection: ChangeDetectionStrategy.OnPush,
         template: '<ng-content></ng-content>',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "labx-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Web Components library built with Stencil. Includes Angular wrappers and design tokens.",
   "author": "egarcia9543",
   "license": "MIT",
@@ -43,11 +43,12 @@
   "files": [
     "dist/",
     "loader/",
+    "src-angular/",
     "dist-angular/"
   ],
   "scripts": {
-    "build": "stencil build && tsc -p tsconfig.angular.json",
-    "build:angular": "tsc -p tsconfig.angular.json",
+    "build": "node -e \"require('fs').mkdirSync('dist-angular',{recursive:true})\" && stencil build && node scripts/patch-angular.js && tsc -p tsconfig.angular.json",
+    "build:angular": "node scripts/patch-angular.js && tsc -p tsconfig.angular.json",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil-test",
     "test:watch": "stencil-test --watch",

package/src-angular/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/src-angular/components.ts

@@ -0,0 +1,97 @@
+/* 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({
+  standalone: true,
+  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({
+  standalone: true,
+  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({
+  standalone: true,
+  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/src-angular/index.ts

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

package/src-angular/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/src-angular/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;
+  }
+}