niris-public-community-components 0.0.1

package/rollup.config.js

@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import summary from 'rollup-plugin-summary';
+import {terser} from 'rollup-plugin-terser';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+
+export default {
+  input: 'my-element.js',
+  output: {
+    file: 'my-element.bundled.js',
+    format: 'esm',
+  },
+  onwarn(warning) {
+    if (warning.code !== 'THIS_IS_UNDEFINED') {
+      console.error(`(!) ${warning.message}`);
+    }
+  },
+  plugins: [
+    replace({'Reflect.decorate': 'undefined'}),
+    resolve(),
+    /**
+     * This minification setup serves the static site generation.
+     * For bundling and minification, check the README.md file.
+     */
+    terser({
+      ecma: 2021,
+      module: true,
+      warnings: true,
+      mangle: {
+        properties: {
+          regex: /^__/,
+        },
+      },
+    }),
+    summary(),
+  ],
+};

package/src/my-element.ts

@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright 2019 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {LitElement, html, css} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
+
+/**
+ * An example element.
+ *
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static override styles = css`
+    :host {
+      display: block;
+      border: solid 1px gray;
+      padding: 16px;
+      max-width: 800px;
+    }
+  `;
+
+  /**
+   * The name to say "Hello" to.
+   */
+  @property()
+  name = 'World';
+
+  /**
+   * The number of times the button has been clicked.
+   */
+  @property({type: Number})
+  count = 0;
+
+  override render() {
+    return html`
+      <h1>${this.sayHello(this.name)}!</h1>
+      <button @click=${this._onClick} part="button">
+        Click Count: ${this.count}
+      </button>
+      <slot></slot>
+    `;
+  }
+
+  private _onClick() {
+    this.count++;
+    this.dispatchEvent(new CustomEvent('count-changed'));
+  }
+
+  /**
+   * Formats a greeting
+   * @param name The name to say "Hello" to
+   */
+  sayHello(name: string): string {
+    return `Hello, ${name}`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement;
+  }
+}

package/src/test/my-element_test.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {MyElement} from '../my-element.js';
+
+import {fixture, assert} from '@open-wc/testing';
+import {html} from 'lit/static-html.js';
+
+suite('my-element', () => {
+  test('is defined', () => {
+    const el = document.createElement('my-element');
+    assert.instanceOf(el, MyElement);
+  });
+
+  test('renders with default values', async () => {
+    const el = await fixture(html`<my-element></my-element>`);
+    assert.shadowDom.equal(
+      el,
+      `
+      <h1>Hello, World!</h1>
+      <button part="button">Click Count: 0</button>
+      <slot></slot>
+    `
+    );
+  });
+
+  test('renders with a set name', async () => {
+    const el = await fixture(html`<my-element name="Test"></my-element>`);
+    assert.shadowDom.equal(
+      el,
+      `
+      <h1>Hello, Test!</h1>
+      <button part="button">Click Count: 0</button>
+      <slot></slot>
+    `
+    );
+  });
+
+  test('handles a click', async () => {
+    const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
+    const button = el.shadowRoot!.querySelector('button')!;
+    button.click();
+    await el.updateComplete;
+    assert.shadowDom.equal(
+      el,
+      `
+      <h1>Hello, World!</h1>
+      <button part="button">Click Count: 1</button>
+      <slot></slot>
+    `
+    );
+  });
+
+  test('styling applied', async () => {
+    const el = (await fixture(html`<my-element></my-element>`)) as MyElement;
+    await el.updateComplete;
+    assert.equal(getComputedStyle(el).paddingTop, '16px');
+  });
+});

package/src/textarea-to-niris.ts

@@ -0,0 +1,218 @@
+import {LitElement, html, css} from 'lit';
+import {property} from 'lit/decorators.js';
+
+export class TextareaToNiris extends LitElement {
+  @property({type: String}) formAction: any;
+  @property({type: String}) keywords: any;
+
+  constructor() {
+    super();
+    this.formAction = '';
+    this.keywords = '';
+  }
+
+  updateShownValue(event: Event) {
+    this.keywords = (event.target as HTMLInputElement)?.value;
+  }
+
+  closePopover(event: Event) {
+    event.preventDefault();
+    (this.shadowRoot?.getElementById('popover') as HTMLElement).hidePopover();
+  }
+
+  override render() {
+    return html`
+      <div id="popover-container">
+        <button id="button-popover" popovertarget="popover">
+          Atención en línea
+        </button>
+
+        <div popover id="popover">
+          <header>
+            <h2>Atención en línea Niris</h2>
+          </header>
+          <body>
+            <form action="${this.formAction}?keywords" =${this.keywords}>
+              <label for="niris-input"
+                >Información, Consultas, Quejas y Sugerencias:
+              </label>
+              <textarea
+                id="niris-input"
+                @change=${this.updateShownValue}
+                name="keywords"
+                required
+                minlength="4"
+                placeholder="Escribe tu consulta aquí"
+              ></textarea>
+              <button type="submit">Enviar</button>
+              <button type="button" @click="${this.closePopover}">
+                Cerrar
+              </button>
+            </form>
+          </body>
+        </div>
+      </div>
+    `;
+  }
+
+  static override styles = css`
+    :host {
+      --primary-color: #007bff;
+      --background-color: #d4d4d4;
+      --color: #fff;
+      --padding: 1rem 1rem;
+      --font-size: 1rem;
+      --border-radius: 0rem;
+      --font-weight: 500;
+      --font-family: 'Arial', sans-serif;
+    }
+    * {
+      font-family: 'Brush Script MT', cursive, sans-serif; /* This is fallback font for old browsers */
+      font-family: var(--font-family);
+      box-sizing: border-box;
+    }
+
+    button {
+      min-width: 120px;
+      background-color: var(--primary-color);
+      border: none;
+      color: white;
+      text-align: center;
+      text-decoration: none;
+      font-size: 16px;
+      cursor: pointer;
+      position: relative;
+      color: var(--color);
+      padding: var(--padding);
+      font-size: var(--font-size);
+      font-weight: var(--font-weight);
+      border-radius: var(--border-radius);
+      transition: 0.3s;
+    }
+
+    button:hover {
+      filter: brightness(120%);
+    }
+
+    button:focus-visible {
+      background-color: var(--primary-color);
+      outline: 3px solid var(--primary-color);
+      outline-offset: 2px;
+    }
+
+    #popover:popover-open {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 0;
+      border: 0;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);
+      width: 60%;
+      border-radius: var(--border-radius);
+      animation: fadeIn 150ms ease-in-out;
+    }
+
+    header {
+      text-align: center;
+      box-sizing: border-box;
+      padding-left: 1rem;
+      margin-bottom: 2rem;
+      width: 100%;
+      border-bottom: 1px solid #d4d4d4;
+      background-color: #f6f7f7;
+    }
+
+    header h2 {
+      color: var(--primary-color);
+      filter: opacity(100%);
+    }
+
+    header h2::before {
+      filter: opacity(50%);
+      color: var(--primary-color);
+      filter: opacity(100%);
+    }
+
+    form {
+      margin: 0 auto;
+      width: 90%;
+    }
+
+    textarea {
+      resize: none;
+      border-radius: var(--border-radius);
+      height: 8rem;
+      border-width: 2px;
+      margin: 0.7rem 0;
+      --tw-border-opacity: 1;
+      border-color: rgb(209 213 219 / var(--tw-border-opacity));
+      width: 100%;
+      font-size: 0.875rem;
+      padding: 0.5rem;
+    }
+
+    textarea:focus,
+    select:focus {
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-color: var(--primary-color);
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
+        var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
+        calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+        var(--tw-shadow);
+      border-color: var(--primary-color);
+    }
+    form button {
+      float: left;
+      margin: 1rem auto;
+    }
+
+    form button:last-child {
+      background-color: transparent;
+      margin-left: 1rem;
+      border: inset 2px solid var(--primary-color);
+      box-shadow: 0 0 0 1px var(--primary-color),
+        inset 0 0 0 2px var(--primary-color);
+      color: var(--primary-color);
+    }
+    form button:last-child:hover {
+      background-color: var(--primary-color);
+      color: white;
+      filter: none;
+    }
+    #popover::backdrop {
+      background-color: rgba(#c6c8ce 0.3);
+      backdrop-filter: blur(2px);
+    }
+
+    @keyframes fadeIn {
+      0% {
+        scale: 0.8;
+        opacity: 0;
+      }
+      100% {
+        scale: 1;
+        opacity: 1;
+      }
+    }
+
+    @media (max-width: 1024px) {
+      #popover:popover-open {
+        width: 90%;
+      }
+    }
+
+    @media (min-width: 1024px) {
+      #popover:popover-open {
+        width: 60%;
+      }
+    }
+  `;
+}
+
+customElements.define('textarea-to-niris', TextareaToNiris);

package/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "es2021",
+    "module": "es2020",
+    "lib": ["es2021", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "inlineSources": true,
+    "outDir": "./",
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitOverride": true,
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "strict": true
+      }
+    ],
+    "types": ["mocha"]
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": []
+}

package/web-dev-server.config.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {legacyPlugin} from '@web/dev-server-legacy';
+
+const mode = process.env.MODE || 'dev';
+if (!['dev', 'prod'].includes(mode)) {
+  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
+}
+
+export default {
+  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
+  preserveSymlinks: true,
+  plugins: [
+    legacyPlugin({
+      polyfills: {
+        // Manually imported in index.html file
+        webcomponents: false,
+      },
+    }),
+  ],
+};

package/web-test-runner.config.js

@@ -0,0 +1,120 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+import {legacyPlugin} from '@web/dev-server-legacy';
+import {playwrightLauncher} from '@web/test-runner-playwright';
+
+const mode = process.env.MODE || 'dev';
+if (!['dev', 'prod'].includes(mode)) {
+  throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
+}
+
+// Uncomment for testing on Sauce Labs
+// Must run `npm i --save-dev @web/test-runner-saucelabs` and set
+// SAUCE_USERNAME and SAUCE_USERNAME environment variables
+// ===========
+// import {createSauceLabsLauncher} from '@web/test-runner-saucelabs';
+// const sauceLabsLauncher = createSauceLabsLauncher(
+//   {
+//     user: process.env.SAUCE_USERNAME,
+//     key: process.env.SAUCE_USERNAME,
+//   },
+//   {
+//     'sauce:options': {
+//       name: 'unit tests',
+//       build: `${process.env.GITHUB_REF ?? 'local'} build ${
+//         process.env.GITHUB_RUN_NUMBER ?? ''
+//       }`,
+//     },
+//   }
+// );
+
+// Uncomment for testing on BrowserStack
+// Must run `npm i --save-dev @web/test-runner-browserstack` and set
+// BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY environment variables
+// ===========
+// import {browserstackLauncher as createBrowserstackLauncher} from '@web/test-runner-browserstack';
+// const browserstackLauncher = (config) => createBrowserstackLauncher({
+//   capabilities: {
+//     'browserstack.user': process.env.BROWSER_STACK_USERNAME,
+//     'browserstack.key': process.env.BROWSER_STACK_ACCESS_KEY,
+//     project: 'my-element',
+//     name: 'unit tests',
+//     build: `${process.env.GITHUB_REF ?? 'local'} build ${
+//       process.env.GITHUB_RUN_NUMBER ?? ''
+//     }`,
+//     ...config,
+//   }
+// });
+
+const browsers = {
+  // Local browser testing via playwright
+  // ===========
+  chromium: playwrightLauncher({product: 'chromium'}),
+  firefox: playwrightLauncher({product: 'firefox'}),
+  webkit: playwrightLauncher({product: 'webkit'}),
+
+  // Uncomment example launchers for running on Sauce Labs
+  // ===========
+  // chromium: sauceLabsLauncher({browserName: 'chrome', browserVersion: 'latest', platformName: 'Windows 10'}),
+  // firefox: sauceLabsLauncher({browserName: 'firefox', browserVersion: 'latest', platformName: 'Windows 10'}),
+  // safari: sauceLabsLauncher({browserName: 'safari', browserVersion: 'latest', platformName: 'macOS 10.15'}),
+
+  // Uncomment example launchers for running on Sauce Labs
+  // ===========
+  // chromium: browserstackLauncher({browserName: 'Chrome', os: 'Windows', os_version: '10'}),
+  // firefox: browserstackLauncher({browserName: 'Firefox', os: 'Windows', os_version: '10'}),
+  // safari: browserstackLauncher({browserName: 'Safari', browser_version: '14.0', os: 'OS X', os_version: 'Big Sur'}),
+};
+
+// Prepend BROWSERS=x,y to `npm run test` to run a subset of browsers
+// e.g. `BROWSERS=chromium,firefox npm run test`
+const noBrowser = (b) => {
+  throw new Error(`No browser configured named '${b}'; using defaults`);
+};
+let commandLineBrowsers;
+try {
+  commandLineBrowsers = process.env.BROWSERS?.split(',').map(
+    (b) => browsers[b] ?? noBrowser(b)
+  );
+} catch (e) {
+  console.warn(e);
+}
+
+// https://modern-web.dev/docs/test-runner/cli-and-configuration/
+export default {
+  rootDir: '.',
+  files: ['./test/**/*_test.js'],
+  nodeResolve: {exportConditions: mode === 'dev' ? ['development'] : []},
+  preserveSymlinks: true,
+  browsers: commandLineBrowsers ?? Object.values(browsers),
+  testFramework: {
+    // https://mochajs.org/api/mocha
+    config: {
+      ui: 'tdd',
+      timeout: '60000',
+    },
+  },
+  plugins: [
+    // Detect browsers without modules (e.g. IE11) and transform to SystemJS
+    // (https://modern-web.dev/docs/dev-server/plugins/legacy/).
+    legacyPlugin({
+      polyfills: {
+        webcomponents: true,
+        // Inject lit's polyfill-support module into test files, which is required
+        // for interfacing with the webcomponents polyfills
+        custom: [
+          {
+            name: 'lit-polyfill-support',
+            path: 'node_modules/lit/polyfill-support.js',
+            test: "!('attachShadow' in Element.prototype) || !('getRootNode' in Element.prototype) || window.ShadyDOM && window.ShadyDOM.force",
+            module: false,
+          },
+        ],
+      },
+    }),
+  ],
+};