@scania/tegel-angular-17 1.27.1 → 1.28.1

package/ng-package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel-angular-17",
-  "version": "1.27.1",
+  "version": "1.28.1",
   "description": "Angular wrappers for Tegel package using Angular 17 and above",
   "peerDependencies": {
     "@angular/common": ">=17.0.0",
@@ -10,18 +10,5 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/scania-tegel-angular-17.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/scania-tegel-angular-17.mjs",
-      "esm": "./esm2022/scania-tegel-angular-17.mjs",
-      "default": "./fesm2022/scania-tegel-angular-17.mjs"
-    }
-  }
-}
+  "sideEffects": false
+}

package/src/lib/components.module.ts

@@ -0,0 +1,35 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { defineCustomElements } from '@scania/tegel/loader';
+import { DIRECTIVES } from './stencil-generated';
+import { TextValueAccessor } from './stencil-generated/text-value-accessor';
+import { BooleanValueAccessor } from './stencil-generated/boolean-value-accessor';
+import { NumericValueAccessor } from './stencil-generated/number-value-accessor';
+import { TdsRadioValueAccessor } from './directives/tds-radio-value-accessor';
+import { TdsDropdownValueAccessor } from './directives/tds-dropdown-value-accessor';
+
+@NgModule({
+  declarations: [
+    ...DIRECTIVES,
+    BooleanValueAccessor,
+    NumericValueAccessor,
+    TextValueAccessor,
+    TdsRadioValueAccessor,
+    TdsDropdownValueAccessor,
+  ],
+  exports: [
+    ...DIRECTIVES,
+    BooleanValueAccessor,
+    NumericValueAccessor,
+    TextValueAccessor,
+    TdsRadioValueAccessor,
+    TdsDropdownValueAccessor,
+  ],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => defineCustomElements,
+      multi: true,
+    },
+  ],
+})
+export class TegelModule {}

package/{lib/directives/tds-dropdown-value-accessor.d.ts → src/lib/directives/tds-dropdown-value-accessor.ts}

@@ -1,11 +1,24 @@
+import { Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
 import { ValueAccessor } from '../stencil-generated/value-accessor';
-import * as i0 from "@angular/core";
+
 /**
  * A custom value accessor for the tds-dropdown. It extends the default ValueAccessor that is auto-generated by Stencil
  * The tds-dropdown requires slightly different event handling since it doesn't act like any of the native inputs.
  * The main difference between this value accessor and the other value accessors that are auto-generated by Stencil, is that this one handles `$event.detail.value` instead of `$event.target.value`.
  */
-export declare class TdsDropdownValueAccessor extends ValueAccessor {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TdsDropdownValueAccessor, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TdsDropdownValueAccessor, "tds-dropdown", never, {}, {}, never, never, false, never>;
-}
+@Directive({
+  selector: 'tds-dropdown',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.detail.value)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TdsDropdownValueAccessor,
+      multi: true,
+    },
+  ],
+})
+export class TdsDropdownValueAccessor extends ValueAccessor {}

package/src/lib/directives/tds-radio-value-accessor.ts

@@ -0,0 +1,29 @@
+import { Directive } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from '../stencil-generated/value-accessor';
+/**
+ * A custom value accessor for the tds-radio-button and tds-chip of type radio. It extends the default ValueAccessor that is auto-generated by Stencil
+ * Stencil offers an autogenerated radio value accessor but does not currently work as expected.
+ * An issue was submitted to their repository: https://github.com/ionic-team/stencil-ds-output-targets/issues/434
+ * If the issue is ever fixed this value accessor can be replaced with the one auto-generated by Stencil.
+ */
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'tds-radio-button, tds-chip[type="radio"]',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.target.value)',
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: TdsRadioValueAccessor,
+      multi: true,
+    },
+  ],
+})
+export class TdsRadioValueAccessor extends ValueAccessor {
+  writeValue(value: any) {
+    this.el.nativeElement.checked = value === this.el.nativeElement.value;
+  }
+}

package/src/lib/stencil-generated/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/lib/stencil-generated/boolean-value-accessor.ts

@@ -0,0 +1,28 @@
+import { Directive, ElementRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+import { ValueAccessor } from './value-accessor';
+
+@Directive({
+  /* tslint:disable-next-line:directive-selector */
+  selector: 'tds-checkbox, tds-chip[type="checkbox"], tds-toggle',
+  host: {
+    '(tdsChange)': 'handleChangeEvent($event.target.checked)',
+    '(tdsToggle)': 'handleChangeEvent($event.target.checked)'
+  },
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: BooleanValueAccessor,
+      multi: true
+    }
+  ]
+})
+export class BooleanValueAccessor extends ValueAccessor {
+  constructor(el: ElementRef) {
+    super(el);
+  }
+  writeValue(value: any) {
+    this.el.nativeElement.checked = this.lastValue = value == null ? false : value;
+  }
+}