@oiz/stzh-components 0.0.1-pretest → 1.5.0-alpha

package/dist/collection/patterns/appointments.stories.js

@@ -1,43 +1,43 @@
-import { h } from '../utils/h';
-import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../figma';
-
-export default {
-  title: 'Patterns/Appointments',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      inlineStories: false,
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('pattern_appointments'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Template = (args) => (
-  <stzh-container>
-    <stzh-vspace around curve="big">
-      <stzh-section variant="highlight">
-        <stzh-heading level="2" with-border>Select Date</stzh-heading>
-        <stzh-vspace curve="medium"></stzh-vspace>
-        <Appointments {...args.appointments}></Appointments>
-        <stzh-vspace size="xlarge"></stzh-vspace>
-        <stzh-actions variant="process" with-border>
-          <stzh-button slot="primary" href="#" variant="primary">Next Step</stzh-button>
-        </stzh-actions>
-      </stzh-section>
-    </stzh-vspace>
-  </stzh-container>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  appointments: Appointments.args
-};
+import { h } from '../utils/h';
+import { Default as Appointments } from '../components/stzh-appointments/stzh-appointments.stories'
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../figma';
+
+export default {
+  title: 'Patterns/Appointments',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      inlineStories: false,
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pattern_appointments'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <stzh-container>
+    <stzh-vspace around curve="big">
+      <stzh-section variant="highlight">
+        <stzh-heading level="2" with-border>Select Date</stzh-heading>
+        <stzh-vspace curve="medium"></stzh-vspace>
+        <Appointments {...args.appointments}></Appointments>
+        <stzh-vspace size="xlarge"></stzh-vspace>
+        <stzh-actions variant="process" with-border>
+          <stzh-button slot="primary" href="#" variant="primary">Next Step</stzh-button>
+        </stzh-actions>
+      </stzh-section>
+    </stzh-vspace>
+  </stzh-container>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  appointments: Appointments.args
+};

package/dist/collection/patterns/processingscreen.stories.js

@@ -1,43 +1,43 @@
-import { h } from '../utils/h';
-import { withDesign } from 'storybook-addon-designs';
-import { getFigmaLink } from '../../figma';
-
-export default {
-  title: 'Patterns/ProcessingScreen',
-  parameters: {
-    layout: 'padded',
-    docs: {
-      inlineStories: false,
-    },
-    design: {
-      type: 'figma',
-      url: getFigmaLink('pattern_processingscreen'),
-      allowFullscreen: true
-    }
-  },
-  decorators: [
-    withDesign
-  ]
-};
-
-const Template = (args) => (
-  <div>
-    <stzh-text>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
-    </stzh-text>
-    <stzh-overlay open stay>
-      <stzh-loader>
-        The page is loading,<br />
-        please wait
-      </stzh-loader>
-    </stzh-overlay>
-  </div>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-};
+import { h } from '../utils/h';
+import { withDesign } from 'storybook-addon-designs';
+import { getFigmaLink } from '../../figma';
+
+export default {
+  title: 'Patterns/ProcessingScreen',
+  parameters: {
+    layout: 'padded',
+    docs: {
+      inlineStories: false,
+    },
+    design: {
+      type: 'figma',
+      url: getFigmaLink('pattern_processingscreen'),
+      allowFullscreen: true
+    }
+  },
+  decorators: [
+    withDesign
+  ]
+};
+
+const Template = (args) => (
+  <div>
+    <stzh-text>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+      <p>Laboris laborum aute id laboris culpa esse aliquip nisi anim velit. Minim sunt eiusmod do laborum amet ut magna. Labore dolore id nostrud enim Lorem pariatur ad dolore id eiusmod adipisicing laboris laborum minim. Reprehenderit deserunt ut occaecat sit sit ullamco laborum deserunt. Eu pariatur est exercitation ea ut tempor laborum. Amet veniam consectetur cupidatat Lorem eu ipsum.</p>
+    </stzh-text>
+    <stzh-overlay open stay>
+      <stzh-loader>
+        The page is loading,<br />
+        please wait
+      </stzh-loader>
+    </stzh-overlay>
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+};

package/dist/collection/utils/animation-utils.js

@@ -1,51 +1,51 @@
-//
-// Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
-//
-export function animateTo(el, keyframes, options) {
-  return new Promise(resolve => {
-    if ((options === null || options === void 0 ? void 0 : options.duration) === Infinity) {
-      throw new Error('Promise-based animations must be finite.');
-    }
-    const animation = el.animate(keyframes, Object.assign(Object.assign({}, options), { duration: prefersReducedMotion() ? 0 : options.duration }));
-    animation.addEventListener('cancel', resolve, { once: true });
-    animation.addEventListener('finish', resolve, { once: true });
-  });
-}
-//
-// Parses a CSS duration and returns the number of milliseconds.
-//
-export function parseDuration(delay) {
-  delay = delay.toString().toLowerCase();
-  if (delay.indexOf('ms') > -1) {
-    return parseFloat(delay);
-  }
-  if (delay.indexOf('s') > -1) {
-    return parseFloat(delay) * 1000;
-  }
-  return parseFloat(delay);
-}
-//
-// Tells if the user has enabled the "reduced motion" setting in their browser or OS.
-//
-export function prefersReducedMotion() {
-  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
-  return query.matches;
-}
-//
-// Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
-//
-export function stopAnimations(el) {
-  return Promise.all(el.getAnimations().map(animation => {
-    return new Promise(resolve => {
-      const handleAnimationEvent = requestAnimationFrame(resolve);
-      animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
-      animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
-      animation.cancel();
-    });
-  }));
-}
-// We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
-// element's scrollHeight before the animation.
-export function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
-  return keyframes.map(keyframe => (Object.assign(Object.assign({}, keyframe), { height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height })));
-}
+//
+// Animates an element using keyframes. Returns a promise that resolves after the animation completes or gets canceled.
+//
+export function animateTo(el, keyframes, options) {
+  return new Promise(resolve => {
+    if ((options === null || options === void 0 ? void 0 : options.duration) === Infinity) {
+      throw new Error('Promise-based animations must be finite.');
+    }
+    const animation = el.animate(keyframes, Object.assign(Object.assign({}, options), { duration: prefersReducedMotion() ? 0 : options.duration }));
+    animation.addEventListener('cancel', resolve, { once: true });
+    animation.addEventListener('finish', resolve, { once: true });
+  });
+}
+//
+// Parses a CSS duration and returns the number of milliseconds.
+//
+export function parseDuration(delay) {
+  delay = delay.toString().toLowerCase();
+  if (delay.indexOf('ms') > -1) {
+    return parseFloat(delay);
+  }
+  if (delay.indexOf('s') > -1) {
+    return parseFloat(delay) * 1000;
+  }
+  return parseFloat(delay);
+}
+//
+// Tells if the user has enabled the "reduced motion" setting in their browser or OS.
+//
+export function prefersReducedMotion() {
+  const query = window.matchMedia('(prefers-reduced-motion: reduce)');
+  return query.matches;
+}
+//
+// Stops all active animations on the target element. Returns a promise that resolves after all animations are canceled.
+//
+export function stopAnimations(el) {
+  return Promise.all(el.getAnimations().map(animation => {
+    return new Promise(resolve => {
+      const handleAnimationEvent = requestAnimationFrame(resolve);
+      animation.addEventListener('cancel', () => handleAnimationEvent, { once: true });
+      animation.addEventListener('finish', () => handleAnimationEvent, { once: true });
+      animation.cancel();
+    });
+  }));
+}
+// We can't animate `height: auto`, but we can calculate the height and shim keyframes by replacing it with the
+// element's scrollHeight before the animation.
+export function shimKeyframesHeightAuto(keyframes, calculatedHeight) {
+  return keyframes.map(keyframe => (Object.assign(Object.assign({}, keyframe), { height: keyframe.height === 'auto' ? `${calculatedHeight}px` : keyframe.height })));
+}

package/dist/collection/utils/date-adapter.js

@@ -1,86 +1,86 @@
-export const createGlobalAdapter = function (formats, globals) {
-  // format letters from https://www.php.net/manual/de/datetime.format.php
-  const globalFormatter = function (format, date) {
-    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
-      return "";
-    }
-    let j = date.getDate().toString(10);
-    let d = j;
-    let n = (date.getMonth() + 1).toString(10);
-    let m = n;
-    let yC = date.getFullYear().toString(10);
-    let gC = date.getHours().toString(10);
-    let hC = gC;
-    let i = date.getMinutes().toString(10);
-    // full textual representation of a month
-    let fC = globals.monthNames[date.getMonth()];
-    // short textual representation of a month
-    let mC = globals.monthNamesShort[date.getMonth()];
-    // full textual representation of the day
-    let l = globals.dayNames[date.getDay()];
-    // months *are* zero-indexed, pad if less than 9!
-    if (date.getMonth() < 9) {
-      m = `0${m}`;
-    }
-    if (date.getDate() < 10) {
-      d = `0${d}`;
-    }
-    if (date.getHours() < 10) {
-      hC = `0${hC}`;
-    }
-    if (date.getMinutes() < 10) {
-      i = `0${i}`;
-    }
-    return format
-      .replace(/\{j\}/g, j)
-      .replace(/\{d\}/g, d)
-      .replace(/\{l\}/g, l)
-      .replace(/\{n\}/g, n)
-      .replace(/\{m\}/g, m)
-      .replace(/\{F\}/g, fC)
-      .replace(/\{M\}/g, mC)
-      .replace(/\{Y\}/g, yC)
-      .replace(/\{H\}/g, hC)
-      .replace(/\{G\}/g, gC)
-      .replace(/\{i\}/g, i);
-  };
-  const globalParser = function (parse, input) {
-    if (!input) {
-      return;
-    }
-    const regex = new RegExp(parse);
-    const match = input.match(regex);
-    if (match) {
-      const { groups } = match;
-      const year = parseInt(groups.Y || '', 10);
-      const month = parseInt(groups.n || groups.m || '', 10);
-      const day = parseInt(groups.j || groups.d || '', 10);
-      const hours = parseInt(groups.G || groups.H || '', 10);
-      const minutes = parseInt(groups.i || '', 10);
-      return new Date(!isNaN(year) ? year : null, !isNaN(month) ? month - 1 : null, !isNaN(day) ? day : null, !isNaN(hours) ? hours : null, !isNaN(minutes) ? minutes : null);
-    }
-  };
-  const globalAdapter = {
-    format: function (date, type = "date") {
-      var _a;
-      const dateFormats = Object.assign(Object.assign({}, formats[type]), ((_a = window.stzhComponents) === null || _a === void 0 ? void 0 : _a.formats[type]) || {});
-      if (typeof dateFormats.format === "string") {
-        return globalFormatter(dateFormats.format, date);
-      }
-      else {
-        return dateFormats.format(date);
-      }
-    },
-    parse: function (input, type = "date") {
-      var _a;
-      const dateFormats = Object.assign(Object.assign({}, formats[type]), ((_a = window.stzhComponents) === null || _a === void 0 ? void 0 : _a.formats[type]) || {});
-      if (typeof dateFormats.parse === "string") {
-        return globalParser(dateFormats.parse, input);
-      }
-      else {
-        return dateFormats.parse(input);
-      }
-    }
-  };
-  return globalAdapter;
-};
+export const createGlobalAdapter = function (formats, globals) {
+  // format letters from https://www.php.net/manual/de/datetime.format.php
+  const globalFormatter = function (format, date) {
+    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+      return "";
+    }
+    let j = date.getDate().toString(10);
+    let d = j;
+    let n = (date.getMonth() + 1).toString(10);
+    let m = n;
+    let yC = date.getFullYear().toString(10);
+    let gC = date.getHours().toString(10);
+    let hC = gC;
+    let i = date.getMinutes().toString(10);
+    // full textual representation of a month
+    let fC = globals.monthNames[date.getMonth()];
+    // short textual representation of a month
+    let mC = globals.monthNamesShort[date.getMonth()];
+    // full textual representation of the day
+    let l = globals.dayNames[date.getDay()];
+    // months *are* zero-indexed, pad if less than 9!
+    if (date.getMonth() < 9) {
+      m = `0${m}`;
+    }
+    if (date.getDate() < 10) {
+      d = `0${d}`;
+    }
+    if (date.getHours() < 10) {
+      hC = `0${hC}`;
+    }
+    if (date.getMinutes() < 10) {
+      i = `0${i}`;
+    }
+    return format
+      .replace(/\{j\}/g, j)
+      .replace(/\{d\}/g, d)
+      .replace(/\{l\}/g, l)
+      .replace(/\{n\}/g, n)
+      .replace(/\{m\}/g, m)
+      .replace(/\{F\}/g, fC)
+      .replace(/\{M\}/g, mC)
+      .replace(/\{Y\}/g, yC)
+      .replace(/\{H\}/g, hC)
+      .replace(/\{G\}/g, gC)
+      .replace(/\{i\}/g, i);
+  };
+  const globalParser = function (parse, input) {
+    if (!input) {
+      return;
+    }
+    const regex = new RegExp(parse);
+    const match = input.match(regex);
+    if (match) {
+      const { groups } = match;
+      const year = parseInt(groups.Y || '', 10);
+      const month = parseInt(groups.n || groups.m || '', 10);
+      const day = parseInt(groups.j || groups.d || '', 10);
+      const hours = parseInt(groups.G || groups.H || '', 10);
+      const minutes = parseInt(groups.i || '', 10);
+      return new Date(!isNaN(year) ? year : null, !isNaN(month) ? month - 1 : null, !isNaN(day) ? day : null, !isNaN(hours) ? hours : null, !isNaN(minutes) ? minutes : null);
+    }
+  };
+  const globalAdapter = {
+    format: function (date, type = "date") {
+      var _a;
+      const dateFormats = Object.assign(Object.assign({}, formats[type]), ((_a = window.stzhComponents) === null || _a === void 0 ? void 0 : _a.formats[type]) || {});
+      if (typeof dateFormats.format === "string") {
+        return globalFormatter(dateFormats.format, date);
+      }
+      else {
+        return dateFormats.format(date);
+      }
+    },
+    parse: function (input, type = "date") {
+      var _a;
+      const dateFormats = Object.assign(Object.assign({}, formats[type]), ((_a = window.stzhComponents) === null || _a === void 0 ? void 0 : _a.formats[type]) || {});
+      if (typeof dateFormats.parse === "string") {
+        return globalParser(dateFormats.parse, input);
+      }
+      else {
+        return dateFormats.parse(input);
+      }
+    }
+  };
+  return globalAdapter;
+};