@progressive-development/pd-forms 0.2.15 → 0.5.0

package/src/stories/range.stories.js

@@ -1,105 +0,0 @@
-import { html } from 'lit';
-import '../../pd-range.js';
-import '../../pd-form-container.js';
-import '../../pd-form-row.js';
-
-export default {
-  title: 'PdForms/Range',
-  component: 'pd-range',
-  argTypes: {
-    primaryColor: { control: 'color' },
-    secondaryColor: { control: 'color' },
-    textColor: { control: 'color' },
-    highlightColor: { control: 'color' },
-    errorColor: { control: 'color' },
-    errorBackgroundColor: { control: 'color' },
-    borderRadius: { control: 'text' },
-    displayFont: { control: 'text' },
-    fontSize: { control: 'text' },
-  },
-};
-
-const OPTIONS_GENRE = {
-  0: "Keine Auswahl",
-  1: "No-Go",
-  2: "Wenig",
-  3: "Mittel",
-  4: "Viel",
-};
-
-
-function Template() {
-  return html`
-    <h3>Default Input Range</h3>  
-    <pd-form-container id="testFormContainerId" requiredFieldInfo>
-      <pd-form-row>
-        <pd-range id="range5060Id"
-              class="quarter4"
-              label="50er/60er" 
-              required
-              max="4"
-              value="0"
-              .optionValueMapper="${OPTIONS_GENRE}">
-        </pd-range>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-range id="range5060Id"
-              class="quarter4"
-              label="50er/60er" 
-              helperTxt="Absolut kurz."
-              required
-              max="4"
-              value="0"
-              .optionValueMapper="${OPTIONS_GENRE}">
-        </pd-range>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-range id="range5060Id"
-              class="quarter4"
-              label="50er/60er" 
-              helperTxt="Hier steht ein Hilfstext, mit etwas Text."
-              required
-              max="4"
-              value="0"
-              .optionValueMapper="${OPTIONS_GENRE}">
-        </pd-range>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-range id="range5060Id"
-              class="quarter4"
-              label="50er/60er" 
-              helperTxt="Hier steht ein Hilfstext, oder aber auch ein etwas längeres Element. Mit mehr als nur etwas Text. Man weiß es nicht genau."
-              required
-              max="4"
-              value="0"
-              .optionValueMapper="${OPTIONS_GENRE}">
-        </pd-range>
-      </pd-form-row>
-      <pd-form-row>
-        <pd-range id="range5060Id"
-              class="quarter4"
-              label="50er/60er" 
-              helperTxt="Hier steht ein Hilfstext, oder aber auch ein etwas längeres Element. Mit mehr als nur etwas Text. Man weiß es nicht genau. Aber jetzt mal etwas länger. Man weiß ja nie was hier so alles geschrieben wird."
-              required
-              max="4"
-              value="0"
-              .optionValueMapper="${OPTIONS_GENRE}">
-        </pd-range>
-      </pd-form-row>
-    </pd-form-container>
-
-    <h2>Test Validation</h2>
-      <button
-      @click="${() => {
-        document.getElementById('testFormContainerId').dispatchEvent(
-          new CustomEvent("validate-form", {detail: {errorMap: new Map()}})
-        );
-      }}"
-      >
-        Test Validate
-      </button>
-  `;
-}
-
-export const Range = Template.bind({});
-Range.args = {};

package/src/stories/select.stories.js

@@ -1,116 +0,0 @@
-import { html } from 'lit';
-import '../../pd-select.js';
-import '../../pd-form-container.js';
-import '../../pd-form-row.js';
-
-export default {
-  title: 'PdForms/Select',
-  component: 'pd-select',
-  argTypes: {
-    primaryColor: { control: 'color' },
-    secondaryColor: { control: 'color' },
-    textColor: { control: 'color' },
-    highlightColor: { control: 'color' },
-    errorColor: { control: 'color' },
-    errorBackgroundColor: { control: 'color' },
-    borderRadius: { control: 'text' },
-    displayFont: { control: 'text' },
-    fontSize: { control: 'text' },
-  },
-};
-
-function Template({
-  selectVals,
-}) {
-  /*
-  let style = '';
-  if (primaryColor) {
-    style += `--squi-primary-color:${primaryColor};`;
-  }
-  if (secondaryColor) {
-    style += `--squi-secondary-color:${secondaryColor};`;
-  }
-  if (textColor) {
-    style += `--squi-text-color:${textColor};`;
-  }
-  if (highlightColor) {
-    style += `--squi-highlight-color:${highlightColor};`;
-  }
-  if (errorColor) {
-    style += `--squi-error-color:${errorColor};`;
-  }
-  if (errorBackgroundColor) {
-    style += `--squi-error-background-color:${errorBackgroundColor};`;
-  }
-  if (borderRadius) {
-    style += `--squi-border-radius:${borderRadius};`;
-  }
-  if (displayFont) {
-    style += `--squi-display-font:${displayFont};`;
-  }
-  if (fontSize) {
-    style += `--squi-font-size:${fontSize};`;
-  }
-  */
-
-  return html`
-    <h3>Select default</h3>
-    <pd-select
-      id="testId1"
-      .values="${selectVals}"      
-    ></pd-select>
-
-    <h3>Select with label</h3>
-    <pd-select
-      id="testId2"
-      .values="${selectVals}"
-      label="Label for Select"    
-    ></pd-select>
-
-    <h3>Select with label - disabled</h3>
-    <pd-select
-      id="testId2"
-      .values="${selectVals}"
-      label="Label for Select"
-      ?disabled="${true}"      
-    ></pd-select>
-
-    <h3>Select with label - error</h3>
-    <pd-form-container id="testSelectContainerId">
-
-      <pd-form-row>
-        <pd-select
-          id="testId2"
-          .values="${selectVals}"
-          label="Label for Select"
-          required
-        ></pd-select>
-      </pd-form-row>
-    </pd-form-container>
-
-    <h2>Test Validation</h2>
-    <button
-      @click="${() => {
-        document
-          .getElementById('testSelectContainerId')
-          .dispatchEvent(
-            new CustomEvent('validate-form', {
-              detail: { errorMap: new Map() },
-            })
-          );
-      }}"
-    >
-      Test Validate
-    </button>
-  `;
-}
-
-export const Select = Template.bind({});
-Select.args = {
-  selectVals: [
-    { name: 'Auswahl treffen', value: undefined },
-    { name: 'Option 1', value: 1 },
-    { name: 'Option 2', value: 2 },
-    { name: 'Option 3', value: 3 },
-  ],
-};

package/test/pd-forms.test.js

@@ -1,32 +0,0 @@
-import { html } from 'lit';
-import { fixture, expect } from '@open-wc/testing';
-
-import '../pd-forms.js';
-
-describe('PdForms', () => {
-  it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture(html`<pd-forms></pd-forms>`);
-
-    expect(el.title).to.equal('Hey there');
-    expect(el.counter).to.equal(5);
-  });
-
-  it('increases the counter on button click', async () => {
-    const el = await fixture(html`<pd-forms></pd-forms>`);
-    el.shadowRoot.querySelector('button').click();
-
-    expect(el.counter).to.equal(6);
-  });
-
-  it('can override the title via attribute', async () => {
-    const el = await fixture(html`<pd-forms title="attribute title"></pd-forms>`);
-
-    expect(el.title).to.equal('attribute title');
-  });
-
-  it('passes the a11y audit', async () => {
-    const el = await fixture(html`<pd-forms></pd-forms>`);
-
-    await expect(el).shadowDom.to.be.accessible();
-  });
-});

package/web-dev-server.config.mjs

@@ -1,27 +0,0 @@
-// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
-
-/** Use Hot Module replacement by adding --hmr to the start command */
-const hmr = process.argv.includes('--hmr');
-
-export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
-  open: '/demo/',
-  /** Use regular watch mode if HMR is not enabled. */
-  watch: !hmr,
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto'
-
-  /** Set appIndex to enable SPA routing */
-  // appIndex: 'demo/index.html',
-
-  plugins: [
-    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
-    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
-  ],
-
-  // See documentation for all available options
-});

package/web-test-runner.config.mjs

@@ -1,41 +0,0 @@
-// import { playwrightLauncher } from '@web/test-runner-playwright';
-
-const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
-
-export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  /** Test files to run */
-  files: 'test/**/*.test.js',
-
-  /** Resolve bare module imports */
-  nodeResolve: {
-    exportConditions: ['browser', 'development'],
-  },
-
-  /** Filter out lit dev mode logs */
-  filterBrowserLogs(log) {
-    for (const arg of log.args) {
-      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
-        return false;
-      }
-    }
-    return true;
-  },
-
-  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
-  // esbuildTarget: 'auto',
-
-  /** Amount of browsers to run concurrently */
-  // concurrentBrowsers: 2,
-
-  /** Amount of test files per browser to test concurrently */
-  // concurrency: 1,
-
-  /** Browsers to run tests on */
-  // browsers: [
-  //   playwrightLauncher({ product: 'chromium' }),
-  //   playwrightLauncher({ product: 'firefox' }),
-  //   playwrightLauncher({ product: 'webkit' }),
-  // ],
-
-  // See documentation for all available options
-});

package/xliff/be.xlf

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-<file target-language="be" source-language="de" original="lit-localize-inputs" datatype="plaintext">
-<body>
-<trans-unit id="s82000595de0f83d0">
-  <source>Format mail@test.de verwenden</source>
-  <target>Ongeldig e-mailadres, gebruik mail@test.be</target>
-  <note>#pd.form.field.invalid.mail#</note>
-</trans-unit>
-<trans-unit id="s8716290d3f8456dd">
-  <source>Nur Zahlen erlaubt</source>
-  <target>Alleen nummers toegestaan</target>
-  <note>#pd.form.field.invalid.number#</note>
-</trans-unit>
-<trans-unit id="s5b7e33463603827f">
-  <source>Format +49123 123456 verwenden</source>
-  <target>Ongeldig telefoonnummer, gebruik +32 494 667085</target>
-  <note>#pd.form.field.invalid.phone#</note>
-</trans-unit>
-<trans-unit id="s570d46ddb2a278ce">
-  <source>Format DE0123456789 verwenden</source>
-  <target>Ongeldig VAT, gebruik BE0123456789</target>
-  <note>#pd.form.field.invalid.vat#</note>
-</trans-unit>
-<trans-unit id="s441bc7f34cdb5af3">
-  <source>Eingabe erforderlich</source>
-  <target>Vul dit veld in</target>
-  <note>#pd.form.field.required#</note>
-</trans-unit>
-<trans-unit id="s369cb9ac30f626a2">
-  <source>* Pflichtfeld</source>
-  <target>* Verplichte in te vullen</target>
-  <note>#pd.form.required.info#</note>
-</trans-unit>
-</body>
-</file>
-</xliff>

package/xliff/en.xlf

@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
-<file target-language="en" source-language="de" original="lit-localize-inputs" datatype="plaintext">
-<body>
-<trans-unit id="s82000595de0f83d0">
-  <source>Format mail@test.de verwenden</source>
-  <note>#pd.form.field.invalid.mail#</note>
-</trans-unit>
-<trans-unit id="s8716290d3f8456dd">
-  <source>Nur Zahlen erlaubt</source>
-  <note>#pd.form.field.invalid.number#</note>
-</trans-unit>
-<trans-unit id="s5b7e33463603827f">
-  <source>Format +49123 123456 verwenden</source>
-  <note>#pd.form.field.invalid.phone#</note>
-</trans-unit>
-<trans-unit id="s570d46ddb2a278ce">
-  <source>Format DE0123456789 verwenden</source>
-  <note>#pd.form.field.invalid.vat#</note>
-</trans-unit>
-<trans-unit id="s441bc7f34cdb5af3">
-  <source>Eingabe erforderlich</source>
-  <note>#pd.form.field.required#</note>
-</trans-unit>
-<trans-unit id="s369cb9ac30f626a2">
-  <source>* Pflichtfeld</source>
-  <note>#pd.form.required.info#</note>
-</trans-unit>
-</body>
-</file>
-</xliff>