@muonic/muon 0.0.2-beta.0

package/components/inputter/story.js

@@ -0,0 +1,243 @@
+import { Inputter } from '@muonic/muon/components/inputter';
+import setup from '@muonic/muon/storybook/stories';
+import customValidation from '@muon/utils/validation/index.js';
+import { staticHTML, unsafeStatic } from '@muonic/muon';
+
+const details = setup('inputter', Inputter);
+
+export default {
+  ...details.defaultValues,
+  parameters: {
+    controls: {
+      exclude: ['standardTemplate']
+    }
+  },
+  argTypes: {
+    ...details.defaultValues.argTypes,
+    validation: {
+      control: {
+        type: 'multi-select',
+        options: [...Object.keys(customValidation)]
+      }
+    }
+  }
+};
+
+const autoCompleteTemplate = (args) => args.autocomplete ? unsafeStatic(`autocomplete="${args.autocomplete}"`) : '';
+
+const placeHolderTemplate = (args) => args.placeholder ? unsafeStatic(`placeholder="${args.placeholder}"`) : '';
+
+const disabledTemplate = (args) => args.disabled ? unsafeStatic(`disabled`) : '';
+
+const labelTemplate = (args) => staticHTML`
+  <label slot="label">${args.label}</label>`;
+
+const tipDetailsTemplate = (args) => staticHTML`
+  <div slot="tip-details">${args.tip}</div>`;
+
+const inputTemplate = (args) => staticHTML`
+<input type="${args.inputtype}" ${placeHolderTemplate(args)} ${autoCompleteTemplate(args)} ${disabledTemplate(args)}>`;
+
+const singleTemplate = (args) => staticHTML`
+  ${args.label ? labelTemplate(args) : ''}
+  ${args.inputtype ? inputTemplate(args) : ''}
+  ${args.tip ? tipDetailsTemplate(args) : ''}`;
+
+const InputterStandardTemplate = (args) => details.template(args, singleTemplate);
+export const Text = InputterStandardTemplate.bind({});
+Text.args = {
+  inputtype: 'text',
+  label: 'Text',
+  value: '',
+  helper: 'Useful information to help populate this field.',
+  tip: '',
+  validation: ['isRequired'],
+  placeholder: 'e.g. Placeholder'
+};
+
+export const Email = InputterStandardTemplate.bind({});
+Email.args = {
+  inputtype: 'email',
+  label: 'Email',
+  value: '',
+  helper: 'How can we help you?',
+  tip: 'By providing clarification on why this information is necessary.',
+  validation: ['isRequired', 'isEmail'],
+  placeholder: 'e.g. my@email.com',
+  autocomplete: 'email'
+};
+
+export const Tel = InputterStandardTemplate.bind({});
+Tel.args = {
+  inputtype: 'tel',
+  label: 'Tel',
+  value: '',
+  helper: 'How can we help you?',
+  tip: 'By providing clarification on why this information is necessary.',
+  validation: ['isRequired'],
+  placeholder: 'e.g. 07770888444',
+  autocomplete: 'tel'
+};
+
+export const Search = InputterStandardTemplate.bind({});
+Search.args = {
+  inputtype: 'search',
+  label: 'Search'
+};
+
+export const Password = InputterStandardTemplate.bind({});
+Password.args = {
+  inputtype: 'password',
+  label: 'Password'
+};
+
+export const Disabled = InputterStandardTemplate.bind({});
+Disabled.args = {
+  inputtype: 'text',
+  label: 'Disabled',
+  value: '',
+  validation: ['isRequired'],
+  placeholder: 'e.g. Placeholder',
+  disabled: true
+};
+
+export const Date = InputterStandardTemplate.bind({});
+Date.args = {
+  inputtype: 'date',
+  label: 'Date',
+  value: '',
+  placeholder: '',
+  validation: ['isRequired', 'minDate(\'01/01/2022\')']
+};
+
+export const DateMask = InputterStandardTemplate.bind({});
+DateMask.args = {
+  inputtype: 'text',
+  label: 'Date Mask',
+  value: '',
+  placeholder: '',
+  mask: 'dd/mm/yyyy',
+  separator: '/',
+  validation: ['isRequired', 'minDate(\'01/01/2022\')']
+};
+
+export const Mask = InputterStandardTemplate.bind({});
+Mask.args = {
+  inputtype: 'text',
+  label: 'Mask',
+  value: '',
+  placeholder: '',
+  mask: '000000',
+  validation: ['isRequired']
+};
+
+export const Separator = InputterStandardTemplate.bind({});
+Separator.args = {
+  inputtype: 'text',
+  label: 'Separator',
+  value: '',
+  placeholder: '',
+  mask: '  -  -  ',
+  separator: '-'
+};
+
+const innerNumber = (args) => staticHTML`
+  ${args.label ? labelTemplate(args) : ''}
+  <input type="${args.inputtype}"  min="${args.min}" max="${args.max}">
+  ${args.tip ? tipDetailsTemplate(args) : ''}
+`;
+
+export const Number = (args) => details.template(args, innerNumber);
+Number.args = {
+  inputtype: 'number',
+  label: 'Number',
+  validation: ['isRequired', 'isBetween(5,20)'],
+  min: 0,
+  max: 10
+};
+
+const innerTextarea = (args) => staticHTML`
+  <label slot="label">${args.label}</label>
+  <textarea placeholder="${args.placeholder}"></textarea>
+`;
+
+export const Textarea = (args) => details.template(args, innerTextarea);
+Textarea.args = {
+  label: 'Textarea',
+  value: '',
+  validation: ['isRequired'],
+  placeholder: 'e.g. Provide information'
+};
+
+const innerMultiple = (args) => staticHTML`
+  <input type="${args.inputtype}" name="${args.name}" value="${args.value}" ${unsafeStatic(args.states?.join(' ') ?? '')} id="${args.id}">
+  <label for="${args.id}">${unsafeStatic(args.label)}</label>`;
+
+const multiTemplate = (args) => staticHTML`
+  ${args.options?.map((option, i) => {
+    const id = `${args.inputtype}-0${i + 1}`;
+    return staticHTML`${innerMultiple({
+      ...args,
+      value: option.value,
+      label: option.label,
+      id,
+      states: option.states
+    })}`;
+  })}
+  ${args.tip ? tipDetailsTemplate(args) : ''}
+`;
+
+const InputterMultipleTemplate = (args) => details.template(args, multiTemplate);
+export const Checkbox = InputterMultipleTemplate.bind({});
+Checkbox.args = {
+  inputtype: 'checkbox',
+  heading: 'What options do you like?',
+  helper: 'How can we help you?',
+  tip: 'By providing clarification on why this information is necessary.',
+  validation: ['isRequired'],
+  name: 'checkboxes',
+  options: [
+    { label: 'Option A', value: 'a', states: ['checked'] },
+    { label: 'Option B', value: 'b' },
+    { label: 'Option C', value: 'c' },
+    { label: 'Option D', value: 'd', states: ['disabled'] }
+  ]
+};
+
+export const Radio = InputterMultipleTemplate.bind({});
+Radio.args = {
+  inputtype: 'radio',
+  heading: 'Which choice would you prefer?',
+  helper: 'How can we help you?',
+  tip: 'By providing clarification on why this information is necessary.',
+  validation: ['isRequired'],
+  name: 'radiobuttons',
+  options: [
+    { label: 'Choice A', value: 'a', states: ['checked'] },
+    { label: 'Choice B', value: 'b' },
+    { label: 'Choice C', value: 'c' },
+    { label: 'Choice D', value: 'd', states: ['disabled'] }
+  ]
+};
+
+const selectTemplate = (args) => staticHTML`
+  <label slot="label">${args.label}</label>
+  <select name="${args.name}">
+  ${args.options?.map((option) => staticHTML`<option value="${option.value}" ${unsafeStatic(option.states?.join(' ') ?? '')}>${option.label}</option>`)}
+  </select>
+`;
+
+export const Select = (args) => details.template(args, selectTemplate);
+Select.args = {
+  label: 'Select',
+  value: '',
+  validation: ['isRequired'],
+  name: 'select',
+  options: [
+    { label: 'Please select', value: '' },
+    { label: 'Value one', value: 'value-01' },
+    { label: 'Value two', value: 'value-02', states: ['selected'] },
+    { label: 'Value three', value: 'value-03' },
+    { label: 'Value four', value: 'value-04' }
+  ]
+};

package/css/accessibility.css

@@ -0,0 +1,3 @@
+.sr-only {
+  display: none;
+}

package/css/default.css

@@ -0,0 +1,9 @@
+@import "accessibility.css";
+
+:host {
+  font-family: $THEME_FONT_FAMILY_DEFAULT;
+}
+
+:host([hidden]) {
+  display: none;
+}

package/css/global.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  font-family: $THEME_FONT_FAMILY_DEFAULT;
+  font-size: 16px;
+  overflow-x: hidden;
+  line-height: 1.5;
+  min-height: 100vh;
+}

package/directives/image-loader-directive.js

@@ -0,0 +1,116 @@
+import { AsyncDirective, directive, html, until, styleMap, ifDefined } from '@muonic/muon';
+export class ImageLoaderDirective extends AsyncDirective {
+  constructor(partInfo) {
+    super(partInfo);
+
+    this.src = '';
+    this.alt = '';
+    this.placeholder = '';
+    this.loading = '';
+    this.image = undefined;
+  }
+
+  async fetchImage() {
+    return new Promise((resolve, reject) => {
+      this.image = new Image();
+
+      this.image.src = this.src;
+      this.image.alt = this.alt;
+      this.image.classList.add('blur-out', 'image-lazy');
+      this.image.onload = () => resolve(this.image);
+      this.image.onerror = () => reject();
+    });
+  }
+
+  observer(parts, attributes) {
+    return new Promise((resolve) => {
+      const options = {
+        threshold: 0.01,
+        rootMargin: '150px'
+      };
+
+      const io = new IntersectionObserver((entries) => {
+        /* eslint-disable consistent-return */
+        return entries.forEach((entry) => {
+          if (!this.image && entry.intersectionRatio > 0) {
+            return resolve(this.render(attributes[0]));
+          }
+        });
+      }, options);
+
+      const observe = parts.parentNode;
+      io.observe(observe);
+    });
+  }
+
+  update(parts, attributes) {
+    if (attributes?.[0]?.loading === 'lazy') {
+      return html`${until(this.observer(parts, attributes), undefined)}`;
+    }
+
+    return this.render(attributes[0]);
+  }
+}
+
+export class ImageInlineLoaderDirective extends ImageLoaderDirective {
+  render({ src, alt, placeholder, loading = 'lazy' }) {
+    const loadingAttribute = window.chrome ? loading : undefined;
+
+    this.src = src;
+    this.alt = alt;
+    this.placeholder = placeholder;
+    this.loading = loading;
+
+    if (this.placeholder) {
+      this.setValue(html`<img class="image-lazy blur" loading="${ifDefined(loadingAttribute)}" src="${this.placeholder}" alt="" />`);
+    }
+
+    Promise.resolve(this.fetchImage()).then((image) => {
+      if (image) {
+        dispatchEvent(new CustomEvent('image-loaded', { bubbles: true }));
+        this.setValue(image);
+      }
+    }).catch(() => {
+      dispatchEvent(new CustomEvent('image-failed', { bubbles: true }));
+      console.error(`Image (${this.src}) failed to load`);
+    });
+
+    return undefined;
+  }
+}
+
+export class ImageBackgroundLoaderDirective extends ImageLoaderDirective {
+  render({ src, alt, placeholder, loading = 'lazy' }) {
+    this.src = src;
+    this.alt = alt;
+    this.placeholder = placeholder;
+    this.loading = loading;
+
+    const styles = {
+      '--background-image': `url("${this.placeholder}")`
+    };
+
+    if (this.placeholder) {
+      this.setValue(html`<div style=${styleMap(styles)} class="image-holder blur"></div>`);
+    }
+
+    Promise.resolve(this.fetchImage()).then((image) => {
+      if (image) {
+        const styles = {
+          '--background-image': `url("${this.src}")`
+        };
+
+        dispatchEvent(new CustomEvent('image-loaded'));
+        this.setValue(html`<div style=${styleMap(styles)} class="image-holder blur-out"></div>`);
+      }
+    }).catch(() => {
+      dispatchEvent(new CustomEvent('image-failed', { bubbles: true }));
+      console.error(`Image (${this.src}) failed to load`);
+    });
+
+    return undefined;
+  }
+}
+
+export const imageInlineLoader = directive(ImageInlineLoaderDirective);
+export const imageBackgroundLoader = directive(ImageBackgroundLoaderDirective);

package/directives/svg-loader-directive.js

@@ -0,0 +1,94 @@
+import { AsyncDirective, directive, html, unsafeSVG, until } from '@muonic/muon';
+
+export class SVGLoaderDirective extends AsyncDirective {
+  constructor(partInfo) {
+    super(partInfo);
+    this.name = '';
+    this.category = '';
+    this.path = '';
+  }
+
+  url(path = this.path) {
+    return path.replace('(name)', this.name).replace('(category)', this.category);
+  }
+
+  async fetchSVG() {
+    const url = this.url();
+    let response;
+    let cache = undefined;
+    let cacheAvailable = false;
+
+    try {
+      cacheAvailable = 'caches' in self;
+      cache = cacheAvailable && await caches?.open('muon');
+      const cacheData = await cache.match(url);
+
+      response = cache && cacheData ? cacheData : undefined;
+    } catch (error) {
+      console.info('cache not available');
+      console.info(error);
+    }
+
+    if (!response) {
+      response = await window.fetch(url);
+
+      response = new Response(response.body, response);
+      response.headers.append('Cache-Control', 'max-age=100000');
+
+      if (cache && response.body) {
+        cache.put(url, response.clone())
+          .catch((error) => {
+            console.error(error);
+          });
+      }
+    }
+
+    return await response.text().then((text) => {
+      if (response.status === 200) {
+        return html`${unsafeSVG(text)}`;
+      }
+
+      return html``;
+    });
+  }
+
+  observer(parts, attributes) {
+    return new Promise((resolve) => {
+      const options = {
+        threshold: 0.01,
+        rootMargin: '150px'
+      };
+
+      const io = new IntersectionObserver((entries) => {
+        /* eslint-disable consistent-return */
+        return entries.forEach((entry) => {
+          if (entry.intersectionRatio > 0) {
+            return resolve(this.render(attributes));
+          }
+        });
+      }, options);
+
+      const observe = parts.parentNode;
+      io.observe(observe);
+    });
+  }
+
+  update(parts, attributes) {
+    return html`${until(this.observer(parts, attributes), undefined)}`;
+  }
+
+  render([{ name, category, path }]) {
+    this.path = path;
+    this.name = name;
+    this.category = category;
+
+    Promise.resolve(this.fetchSVG()).then((svg) => {
+      dispatchEvent(new CustomEvent('svg-loaded'));
+      this.setValue(svg);
+    });
+
+    return undefined;
+  }
+}
+
+export const svgLoader = directive(SVGLoaderDirective);

package/index.js

@@ -0,0 +1,52 @@
+import {
+  LitElement,
+  html,
+  css,
+  unsafeCSS,
+  noChange,
+  adoptStyles,
+  supportsAdoptingStyleSheets
+} from 'lit';
+import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { Directive, directive } from 'lit/directive.js';
+import { live } from 'lit/directives/live.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { cache } from 'lit/directives/cache.js';
+import { AsyncDirective } from 'lit/async-directive.js';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { dedupeMixin } from '@open-wc/dedupe-mixin';
+import { literal, html as staticHTML, unsafeStatic } from 'lit/static-html.js';
+import { until } from 'lit/directives/until.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { MuonElement } from '@muonic/muon/muon-element';
+
+export {
+  MuonElement,
+  LitElement,
+  html,
+  css,
+  unsafeCSS,
+  unsafeHTML,
+  unsafeSVG,
+  classMap,
+  styleMap,
+  Directive,
+  AsyncDirective,
+  directive,
+  live,
+  ifDefined,
+  cache,
+  ScopedElementsMixin,
+  dedupeMixin,
+  literal,
+  staticHTML,
+  unsafeStatic,
+  until,
+  noChange,
+  repeat,
+  adoptStyles,
+  supportsAdoptingStyleSheets
+};

package/mixins/card-mixin.js

@@ -0,0 +1,27 @@
+import { html, dedupeMixin } from '@muonic/muon';
+
+export const CardMixin = dedupeMixin((superClass) =>
+  class CardMixinClass extends superClass {
+
+    get _addHeader() {
+      return html`
+        <div class="header">
+          <slot name="header"></slot>
+        </div>`;
+    }
+
+    get _addContent() {
+      return html`
+        <div class="content">
+          <slot></slot>
+        </div>`;
+    }
+
+    get _addFooter() {
+      return html`
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>`;
+    }
+  }
+);

package/mixins/detail-mixin.js

@@ -0,0 +1,128 @@
+import { html, classMap, ScopedElementsMixin, dedupeMixin } from '@muonic/muon';
+import { Icon } from '@muon/components/icon';
+
+/**.
+ * A mixin to hold show / hide content
+ *
+ * @mixin
+ */
+
+export const DetailMixin = dedupeMixin((superClass) =>
+  class DetailMixinClass extends ScopedElementsMixin(superClass) {
+
+    static get properties() {
+      return {
+        open: {
+          type: Boolean,
+          reflect: true
+        },
+
+        icon: {
+          type: String
+        },
+
+        _toggleOpen: {
+          type: String,
+          state: true
+        },
+
+        _toggleClose: {
+          type: String,
+          state: true
+        },
+
+        _togglePosition: {
+          type: String,
+          state: true
+        }
+      };
+    }
+
+    static get scopedElements() {
+      return {
+        'detail-icon': Icon
+      };
+    }
+
+    constructor() {
+      super();
+      this.open = false;
+      this._toggleEvent = 'detail-toggle';
+    }
+
+    /**
+     * A method to handle 'toggle' event from the html detail element.
+     *
+     * @param {Event} toggleEvent - Event to handle.
+     * @returns {void}
+     * @example
+     */
+    _onToggle(toggleEvent) {
+      const isOpen = !!toggleEvent.target.open;
+      this.open = isOpen;
+      this.dispatchEvent(new CustomEvent(this._toggleEvent, {
+        detail: {
+          open: isOpen
+        }
+      }));
+    }
+
+    get standardTemplate() {
+      const classes = {
+        details: true,
+        'toggle-start': this._togglePosition === 'start',
+        'toggle-end': this._togglePosition === 'end',
+        'has-icon': !!this.icon
+      };
+      return html`
+        <details class=${classMap(classes)} ?open="${this.open}" @toggle="${this._onToggle}">
+          ${this._addHeading}
+          ${this._addContent}
+        </details>
+      `;
+    }
+
+    get __addIcon() {
+      if (this.icon) {
+        return html`
+          <detail-icon name="${this.icon}" class="icon"></detail-icon>
+        `;
+      }
+      return undefined;
+    }
+
+    get __addToggle() {
+      const toggle = this.open ? this._toggleClose : this._toggleOpen;
+      return html`<detail-icon name='${toggle}' class="toggle"></detail-icon>`;
+    }
+
+    /**
+     * A method to render the heading part.
+     *
+     * @returns {object} TemplateResult - rendering template.
+     */
+    get _addHeading() {
+      const isToggleStart = this._togglePosition === 'start';
+      return html`
+        <summary class="heading">
+          ${isToggleStart ? this.__addToggle : this.__addIcon}
+          <slot name="heading"></slot>
+          ${isToggleStart ? this.__addIcon : this.__addToggle}
+        </summary>
+      `;
+    }
+
+    /**
+     * A method to render the content part when expanded.
+     *
+     * @returns {object} TemplateResult - rendering template.
+     */
+    get _addContent() {
+      return html`
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+    }
+  }
+);