@digipair/skill-web-inputs 0.89.0 → 0.91.0-0

package/.swcrc

@@ -0,0 +1,28 @@
+{
+  "jsc": {
+    "target": "es2017",
+    "parser": {
+      "syntax": "typescript",
+      "decorators": true,
+      "dynamicImport": true
+    },
+    "transform": {
+      "decoratorMetadata": true,
+      "legacyDecorator": true
+    },
+    "keepClassNames": true,
+    "externalHelpers": true,
+    "loose": true
+  },
+  "module": {
+    "type": "es6"
+  },
+  "sourceMaps": true,
+  "exclude": [
+    "jest.config.ts",
+    ".*\\.spec.tsx?$",
+    ".*\\.test.tsx?$",
+    "./src/jest-setup.ts$",
+    "./**/jest-setup.ts$"
+  ]
+}

package/README.md

@@ -0,0 +1,7 @@
+# mylib
+
+This library was generated with [Nx](https://nx.dev).
+
+## Building
+
+Run `nx build mylib` to build the library.

package/eslint.config.mjs

@@ -0,0 +1,22 @@
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  {
+    files: ['**/*.json'],
+    rules: {
+      '@nx/dependency-checks': [
+        'error',
+        {
+          ignoredFiles: [
+            '{projectRoot}/eslint.config.{js,cjs,mjs}',
+            '{projectRoot}/rollup.config.{js,ts,mjs,mts,cjs,cts}',
+          ],
+        },
+      ],
+    },
+    languageOptions: {
+      parser: await import('jsonc-eslint-parser'),
+    },
+  },
+];

package/package.json

@@ -1,12 +1,28 @@
 {
   "name": "@digipair/skill-web-inputs",
-  "version": "0.89.0",
+  "version": "0.91.0-0",
+  "type": "module",
+  "main": "dist/libs/skill-web-inputs/index.cjs.js",
+  "module": "dist/libs/skill-web-inputs/index.esm.js",
+  "types": "dist/libs/skill-web-inputs/index.esm.d.ts",
+  "exports": {
+    "./package.json": "./libs/skill-web-inputs/package.json",
+    ".": {
+      "development": "./dist/libs/skill-web-inputs/src/index.ts",
+      "types": "./dist/libs/skill-web-inputs/index.esm.d.ts",
+      "import": "./dist/libs/skill-web-inputs/index.esm.js",
+      "default": "./dist/libs/skill-web-inputs/index.cjs.js"
+    }
+  },
   "keywords": [
     "digipair",
     "web",
     "util"
   ],
-  "dependencies": {},
-  "main": "./index.cjs.js",
-  "module": "./index.esm.js"
-}
+  "nx": {
+    "name": "skill-web-inputs"
+  },
+  "dependencies": {
+    "@digipair/engine": "0.91.0-0"
+  }
+}

package/rollup.config.cjs

@@ -0,0 +1,28 @@
+const { withNx } = require('@nx/rollup/with-nx');
+
+module.exports = withNx(
+  {
+    main: 'libs/skill-web-inputs/src/index.ts',
+    outputPath: 'dist/libs/skill-web-inputs',
+    tsConfig: 'libs/skill-web-inputs/tsconfig.lib.json',
+    compiler: 'swc',
+    format: ['esm', "cjs"],
+    assets: [
+      {
+        input: 'libs/skill-web-inputs/',
+        glob: 'package.json',
+        output: '.'
+      },
+      {
+        input: 'libs/skill-web-inputs/src/',
+        glob: '*.json',
+        output: '.'
+      }
+    ]
+  },
+  {
+    // Provide additional rollup configuration here. See: https://rollupjs.org/configuration-options
+    // e.g.
+    // output: { sourcemap: true },
+  }
+);

package/src/lib/input-dom-attribute.element.ts

@@ -0,0 +1,45 @@
+import { LitElement, TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('digipair-input-dom-attribute')
+export class DomAttributeElement extends LitElement {
+  @property()
+  selector = '';
+
+  @property()
+  attribute = '';
+
+  @property()
+  required = true;
+
+  private _value: any;
+  get value(): any {
+    return this._value;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.initialize();
+  }
+
+  private async initialize(): Promise<void> {
+    const element = document.querySelector(this.selector) as any;
+    const value = element[this.attribute] ?? element.getAttribute(this.attribute);
+
+    if (!(value instanceof Promise)) {
+      this._value = value;
+      return;
+    }
+
+    try {
+      this._value = await value;
+      this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
+    } catch (error) {
+      this._value = value;
+    }
+  }
+
+  override render(): TemplateResult {
+    return html``;
+  }
+}

package/src/lib/input-element.element.ts

@@ -0,0 +1,189 @@
+import { LitElement, TemplateResult, css, html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import getCssSelector from './tools/css-selector';
+
+@customElement('digipair-input-element')
+export class ElementElement extends LitElement {
+  @property()
+  label = 'Element';
+
+  @property()
+  selector = '';
+
+  @property()
+  filter = '*';
+
+  @property()
+  required = true;
+
+  @state()
+  private state = 'unloaded';
+
+  @state()
+  private _content = 'aucun element selectionne';
+  get content() {
+    return this._content;
+  }
+
+  private _value = '';
+  get value(): string {
+    return this._value;
+  }
+
+  static override styles = css`
+    .digipair-input {
+      padding: 10px 15px;
+      margin-bottom: 10px;
+      line-height: 1.4;
+      border: 1px solid var(--digipair-color-primary, #52dfdb);
+      color: var(--digipair-color-primary, #52dfdb);
+      align-self: flex-start;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    .digipair-input ui5-icon {
+      color: var(--digipair-color-secondary, #52dfdb);
+    }
+
+    .digipair-input.unloaded ui5-icon {
+      color: var(--digipair-color-primary, #52dfdb);
+    }
+
+    .digipair-input p {
+      text-align: center;
+      font-size: 12px;
+      margin: 0;
+    }
+
+    .digipair-input.unloaded {
+      cursor: pointer;
+    }
+
+    .digipair-input.loaded ui5-icon {
+      float: left;
+    }
+  `;
+
+  private loadElement() {
+    const digipairEl = document.querySelector('digipair-chatbot') as any;
+
+    this.state = 'selecting';
+    digipairEl.closeResult();
+
+    const unsetCurrentElement = () => {
+      document
+        .querySelectorAll('.digipair-input-element-selecting')
+        .forEach(el => el.classList.remove('digipair-input-element-selecting'));
+    };
+
+    const keydown = (event: any) => {
+      if (event.key === 'Escape' || event.keyCode === 27) {
+        document.removeEventListener('keydown', keydown);
+        document.removeEventListener('click', click);
+        document.removeEventListener('mouseout', mouseout);
+        unsetCurrentElement();
+        this.state = this._value ? 'loaded' : 'unloaded';
+        digipairEl.openResult();
+      }
+    };
+
+    const click = (event: any) => {
+      if (event.target.closest('digipair-chatbot')) {
+        return;
+      }
+
+      document.removeEventListener('keydown', keydown);
+      document.removeEventListener('click', click);
+      document.removeEventListener('mouseout', mouseout);
+
+      const selector = document.querySelector('.digipair-input-element-selecting');
+
+      if (!selector) {
+        this.state = this._value ? 'loaded' : 'unloaded';
+        digipairEl.openResult();
+        return;
+      }
+
+      this._value = getCssSelector(selector, { blacklist: ['.digipair-input-element-selecting'] });
+      this._content = `> $(${this._value})`;
+      this.state = 'loaded';
+      unsetCurrentElement();
+
+      this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
+
+      setTimeout(() => {
+        digipairEl.openResult();
+      }, 1);
+    };
+
+    const mouseout = (event: any) => {
+      if (event.target.closest('digipair-chatbot')) {
+        return;
+      }
+
+      unsetCurrentElement();
+      event.target.closest(this.filter)?.classList.add('digipair-input-element-selecting');
+      this.requestUpdate();
+    };
+
+    document.addEventListener('keydown', keydown);
+    document.addEventListener('click', click);
+    document.addEventListener('mouseout', mouseout);
+  }
+
+  private addSelectingStyle() {
+    if (document.querySelector('#digipair-input-element-style')) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.setAttribute('id', 'digipair-input-element-style');
+    style.innerHTML = `
+      .digipair-input-element-selecting {
+        border: 1px dashed rgb(153, 153, 153) !important;
+      }
+    `;
+    document.body.append(style);
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    this.addSelectingStyle();
+
+    if (this.selector) {
+      this._value = this.selector;
+      this._content = `> $(${this.selector})`;
+      this.state = 'loaded';
+    }
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <section
+        class="digipair-input ${this.state}"
+        @click=${() =>
+          ['unloaded', 'loaded'].indexOf(this.state) >= 0 ? this.loadElement() : void 0}
+      >
+        ${this.state === 'loaded'
+          ? html`
+              <ui5-icon name="attachment"></ui5-icon>
+              <p>${this.label}<br />${this._content}</p>
+            `
+          : this.state === 'selecting'
+          ? html` <ui5-icon name="locate-me"></ui5-icon>
+              <p>
+                ${this.label}${document.querySelector('.digipair-input-element-selecting')
+                  ? html`<br />$(${getCssSelector(
+                        document.querySelector('.digipair-input-element-selecting'),
+                        { blacklist: ['.digipair-input-element-selecting'] },
+                      )})`
+                  : nothing}
+              </p>`
+          : html` <ui5-icon name="add-document"></ui5-icon>
+              <p>${this.label}</p>`}
+      </section>
+    `;
+  }
+}

package/src/lib/input-fetch.element.ts

@@ -0,0 +1,38 @@
+import { LitElement, TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('digipair-input-fetch')
+export class FetchElement extends LitElement {
+  @property()
+  url!: string;
+
+  @property()
+  type: 'json' | 'text' = 'json';
+
+  @property()
+  required = true;
+
+  private _value: any;
+  get value(): any {
+    return this._value;
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.initialize();
+  }
+
+  private async initialize() {
+    const response = await fetch(this.url);
+    if (this.type === 'text') {
+      this._value = await response.text();
+    } else if (this.type === 'json') {
+      this._value = await response.json();
+    }
+    this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
+  }
+
+  override render(): TemplateResult {
+    return html``;
+  }
+}

package/src/lib/input-file.element.ts

@@ -0,0 +1,101 @@
+import { LitElement, TemplateResult, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('digipair-input-file')
+export class InputFileElement extends LitElement {
+  @property()
+  label = 'Upload';
+
+  @property()
+  accept = '*';
+
+  @property()
+  multiple = false;
+
+  @property()
+  required = true;
+
+  @state()
+  private state = 'unloaded';
+
+  @state()
+  private _content = 'no file selected';
+  get content() {
+    return this._content;
+  }
+
+  private _value: string | ArrayBuffer | null = '';
+  get value(): string | ArrayBuffer | null {
+    return this._value;
+  }
+
+  static override styles = css`
+    .download {
+      padding: 10px 15px;
+      margin-bottom: 10px;
+      line-height: 1.4;
+      border: 1px solid var(--digipair-color-primary, #52dfdb);
+      color: var(--digipair-color-primary, #52dfdb);
+      align-self: flex-start;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    .download ui5-icon {
+      color: var(--digipair-color-secondary, #52dfdb);
+    }
+
+    .download.unloaded ui5-icon {
+      color: var(--digipair-color-primary, #52dfdb);
+    }
+
+    .download p {
+      text-align: center;
+      font-size: 12px;
+      margin: 0;
+    }
+
+    .download.unloaded {
+      cursor: pointer;
+    }
+
+    .download.loaded ui5-icon {
+      float: left;
+    }
+  `;
+
+  private loadFile() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = this.multiple;
+    input.accept = this.accept;
+    input.onchange = (event: any) => {
+      const files = event.target.files;
+      const file = files[0];
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this._value = reader.result;
+        this._content = `> ${file.name}`;
+        this.state = 'loaded';
+        this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
+      };
+    };
+    input.click();
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <section
+        class="download ${this.state}"
+        @click=${() => (['unloaded', 'loaded'].indexOf(this.state) >= 0 ? this.loadFile() : void 0)}
+      >
+        ${this.state === 'loaded'
+          ? html` <ui5-icon name="attachment"></ui5-icon>
+              <p>${this.label}<br />${this._content}</p>`
+          : html` <ui5-icon name="add-document"></ui5-icon>
+              <p>${this.label}</p>`}
+      </section>
+    `;
+  }
+}

package/src/lib/input-hidden.element.ts

@@ -0,0 +1,15 @@
+import { LitElement, TemplateResult, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('digipair-input-hidden')
+export class HiddenElement extends LitElement {
+  @property()
+  value = '';
+
+  @property()
+  required = true;
+
+  override render(): TemplateResult {
+    return html``;
+  }
+}

package/src/lib/input-json.element.ts

@@ -0,0 +1,101 @@
+import { LitElement, TemplateResult, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('digipair-input-json')
+export class InputJsonElement extends LitElement {
+  @property()
+  label = 'Upload';
+
+  @property()
+  accept = '.json';
+
+  @property()
+  multiple = false;
+
+  @property()
+  required = true;
+
+  @state()
+  private state = 'unloaded';
+
+  @state()
+  private _content = 'no file selected';
+  get content() {
+    return this._content;
+  }
+
+  private _value: string | ArrayBuffer | null = '';
+  get value(): string | ArrayBuffer | null {
+    return this._value;
+  }
+
+  static override styles = css`
+    .download {
+      padding: 10px 15px;
+      margin-bottom: 10px;
+      line-height: 1.4;
+      border: 1px solid var(--digipair-color-primary, #52dfdb);
+      color: var(--digipair-color-primary, #52dfdb);
+      align-self: flex-start;
+      margin-right: auto;
+      text-align: center;
+    }
+
+    .download ui5-icon {
+      color: var(--digipair-color-secondary, #52dfdb);
+    }
+
+    .download.unloaded ui5-icon {
+      color: var(--digipair-color-primary, #52dfdb);
+    }
+
+    .download p {
+      text-align: center;
+      font-size: 12px;
+      margin: 0;
+    }
+
+    .download.unloaded {
+      cursor: pointer;
+    }
+
+    .download.loaded ui5-icon {
+      float: left;
+    }
+  `;
+
+  private loadFile() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = this.multiple;
+    input.accept = this.accept;
+    input.onchange = (event: any) => {
+      const files = event.target.files;
+      const file = files[0];
+      const reader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = () => {
+        this._value = JSON.parse(reader.result as string);
+        this._content = `> ${file.name}`;
+        this.state = 'loaded';
+        this.dispatchEvent(new CustomEvent('change', { detail: { value: this.value } }));
+      };
+    };
+    input.click();
+  }
+
+  override render(): TemplateResult {
+    return html`
+      <section
+        class="download ${this.state}"
+        @click=${() => (['unloaded', 'loaded'].indexOf(this.state) >= 0 ? this.loadFile() : void 0)}
+      >
+        ${this.state === 'loaded'
+          ? html` <ui5-icon name="attachment"></ui5-icon>
+              <p>${this.label}<br />${this._content}</p>`
+          : html` <ui5-icon name="add-document"></ui5-icon>
+              <p>${this.label}</p>`}
+      </section>
+    `;
+  }
+}