@spw-ds/spw-angular-library 1.4.0 → 1.4.1

package/README.md

@@ -1,16 +1,16 @@
-# SPW Design System
-
-Le **SPW Design System** est une bibliothèque de composants Web conçue pour créer des interfaces utilisateur cohérentes, accessibles et maintenables dans toutes les applications web du Service Public de Wallonie.
-
-## Documentation et guides
-
-- [Documentation complète sur ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) : Découvrez les principes de design, les guidelines, et les spécifications de chaque composant.
-- [Storybook interactif](https://main--6698db7bdfc632c36f76afdb.chromatic.com/) : Explorez et testez les composants en action, avec des exemples détaillés et des cas d'utilisation.
-
-## Compatibilité
-
-Les composants sont développés en utilisant [StencilJS](https://stenciljs.com/), ce qui garantit une compatibilité native avec tous les frameworks modernes (tels que React et Angular) ainsi qu'avec des projets sans framework.
-
-## Contribution
-
-Pour contribuer ou poser des questions, référez-vous à [notre documentation ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) ou [contactez l’équipe de développement](mailto:pierre.henrion.ext@spw.wallonie.be).
+# SPW Design System
+
+Le **SPW Design System** est une bibliothèque de composants Web conçue pour créer des interfaces utilisateur cohérentes, accessibles et maintenables dans toutes les applications web du Service Public de Wallonie.
+
+## Documentation et guides
+
+- [Documentation complète sur ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) : Découvrez les principes de design, les guidelines, et les spécifications de chaque composant.
+- [Storybook interactif](https://main--6698db7bdfc632c36f76afdb.chromatic.com/) : Explorez et testez les composants en action, avec des exemples détaillés et des cas d'utilisation.
+
+## Compatibilité
+
+Les composants sont développés en utilisant [StencilJS](https://stenciljs.com/), ce qui garantit une compatibilité native avec tous les frameworks modernes (tels que React et Angular) ainsi qu'avec des projets sans framework.
+
+## Contribution
+
+Pour contribuer ou poser des questions, référez-vous à [notre documentation ZeroHeight](https://zeroheight.com/2310c7a1e/p/44e962-design-system-du-spw) ou [contactez l’équipe de développement](mailto:pierre.henrion.ext@spw.wallonie.be).

package/ng-package.json

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

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@spw-ds/spw-angular-library",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Design System du SPW. Librairie Angular.",
   "readme": "../../../../README.md",
   "peerDependencies": {
-    "@angular/common": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/core": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@angular/forms": "^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
-    "@spw-ds/spw-stencil-library": "1.4.0"
+    "@angular/common": ">=18.0.0",
+    "@angular/core": ">=18.0.0",
+    "@angular/forms": ">=18.0.0",
+    "@spw-ds/spw-stencil-library": "1.4.1"
   },
   "repository": {
     "type": "git",
@@ -16,16 +16,8 @@
   "dependencies": {
     "tslib": "^2.7.0"
   },
-  "sideEffects": false,
-  "module": "fesm2022/spw-ds-spw-angular-library.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "default": "./fesm2022/spw-ds-spw-angular-library.mjs"
-    }
-  }
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false
 }

package/src/lib/spw-design-system-directives.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { DIRECTIVES } from './stencil-generated';
+
+@NgModule({
+  imports: [...DIRECTIVES],
+  exports: [...DIRECTIVES],
+})
+export class SpwDesignSystemDirectivesModule {}

package/src/lib/spw-design-system.module.ts

@@ -0,0 +1,16 @@
+import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { defineCustomElements } from '@spw-ds/spw-stencil-library/loader';
+import { SpwDesignSystemDirectivesModule } from './spw-design-system-directives.module';
+
+@NgModule({
+  imports: [SpwDesignSystemDirectivesModule],
+  exports: [SpwDesignSystemDirectivesModule],
+  providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: () => defineCustomElements,
+      multi: true,
+    },
+  ],
+})
+export class SpwDesignSystemModule {}

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;
+}