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

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

@@ -0,0 +1,101 @@
+import { LitElement, TemplateResult, css, html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+@customElement('digipair-input-text')
+export class InputTextElement extends LitElement {
+  @property()
+  label = 'Upload';
+
+  @property()
+  accept = '.txt';
+
+  @property()
+  multiple = false;
+
+  @property()
+  required = true;
+
+  @state()
+  private state = 'unloaded';
+
+  @state()
+  private _content = 'no file selected';
+  get content() {
+    return this._content;
+  }
+
+  private _value: any = '';
+  get value(): any {
+    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 = 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>
+    `;
+  }
+}

package/src/lib/skill-web-inputs.spec.ts

@@ -0,0 +1,7 @@
+import { skillWebInputs } from './skill-web-inputs';
+
+describe('skillWebInputs', () => {
+  it('should work', () => {
+    expect(skillWebInputs()).toEqual('skill-web-inputs');
+  });
+});

package/src/lib/tools/css-selector.ts

@@ -0,0 +1,12 @@
+import getCssSelectorOrigin from 'css-selector-generator';
+
+function unescapeCSS(cssEscapedString: any) {
+  return cssEscapedString.replace(/\\([0-9A-Fa-f]{1,6})\s?/g, (_match: any, charCode: any) =>
+    String.fromCharCode(parseInt(charCode, 16))
+  ).replace(/\\/g, '');
+}
+
+export default function getCssSelector(element: any, options: any = {}) {
+  const selector = getCssSelectorOrigin(element, options);
+  return unescapeCSS(selector);
+}

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../engine"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "forceConsistentCasingInFileNames": true,
+    "types": ["node"]
+  },
+  "include": ["src/**/*.ts"],
+  "references": [
+    {
+      "path": "../engine/tsconfig.lib.json"
+    }
+  ]
+}

package/index.cjs.d.ts

@@ -1 +0,0 @@
-export * from "./src/index";