@hkdigital/lib-sveltekit 0.1.19 → 0.1.21

package/dist/widgets/presenter/index.js

@@ -0,0 +1,15 @@
+export { default as Presenter } from './Presenter.svelte';
+export { default as ImageSlide } from './ImageSlide.svelte';
+
+export {
+  PresenterState,
+  createOrGetState as createOrGetPresenterState,
+  createState as createPresenterState,
+  getState as getPresenterState
+} from './Presenter.state.svelte.js';
+
+export * from './typedef.js';
+export * from './constants.js';
+
+// @ts-ignore
+export * from './util.js';

package/dist/widgets/presenter/typedef.d.ts

@@ -0,0 +1,58 @@
+declare const _default: {};
+export default _default;
+export type CssTransition = {
+    type: ("css");
+    property: string;
+    from: string;
+    to: string;
+    delay?: number;
+    duration?: number;
+    timing?: string;
+};
+export type FadeInTransition = {
+    type: ("fade-in");
+    from?: string;
+    to?: string;
+    delay?: number;
+    duration?: number;
+    timing?: string;
+};
+export type FadeOutTransition = {
+    type: ("fade-out");
+    from?: string;
+    to?: string;
+    delay?: number;
+    duration?: number;
+    timing?: string;
+};
+export type Transition = CssTransition | FadeInTransition | FadeOutTransition;
+export type SlideData = {
+    [attrs: string]: any;
+};
+export type SlideLayerLayout = {
+    [attrs: string]: any;
+};
+export type SlideLayer = {
+    data?: SlideData;
+    layout?: SlideLayerLayout;
+};
+export type Slide = {
+    name: string;
+    data?: SlideData;
+    layers?: SlideLayer[];
+    intro?: Transition[];
+    outro?: Transition[];
+    duration?: number;
+};
+export type Layer = {
+    z: number;
+    visible: boolean;
+    stageIdle?: boolean;
+    stageBeforeIn?: boolean;
+    stageIn?: boolean;
+    stageShow?: boolean;
+    stageBeforeOut?: boolean;
+    stageOut?: boolean;
+    stageAfter?: boolean;
+    transitions?: Transition[];
+};

package/dist/widgets/presenter/typedef.js

@@ -0,0 +1,75 @@
+/**
+ * @typedef {{
+ *     type: (import('./constants').TRANSITION_CSS),
+ *     property: string,
+ *     from: string,
+ *     to: string,
+ *     delay?: number
+ *     duration?: number
+ *     timing?: string
+ * }} CssTransition
+ */
+
+/**
+ * @typedef {{
+ *     type: (import('./constants').FADE_IN),
+ *     from?: string,
+ *     to?: string,
+ *     delay?: number
+ *     duration?: number
+ *     timing?: string
+ * }} FadeInTransition
+ */
+
+/**
+ * @typedef {{
+ *     type: (import('./constants').FADE_OUT),
+ *     from?: string,
+ *     to?: string,
+ *     delay?: number
+ *     duration?: number
+ *     timing?: string
+ * }} FadeOutTransition
+ */
+
+/**
+ * @typedef {CssTransition|FadeInTransition|FadeOutTransition} Transition
+ */
+
+/**
+ * @typedef {{[attrs: string]: *}} SlideData
+ */
+
+/**
+ * @typedef {{[attrs: string]: *}} SlideLayerLayout
+ */
+
+/**
+ * @typedef {{data?:SlideData, layout?:SlideLayerLayout}} SlideLayer
+ */
+
+/**
+ * @typedef {object} Slide
+ * @property {string} name
+ * @property {SlideData} [data]
+ * @property {SlideLayer[]} [layers]
+ * @property {Transition[]} [intro]
+ * @property {Transition[]} [outro]
+ * @property {number} [duration]
+ */
+
+/**
+ * @typedef {object} Layer
+ * @property {number} z
+ * @property {boolean} visible
+ * @property {boolean} [stageIdle]
+ * @property {boolean} [stageBeforeIn]
+ * @property {boolean} [stageIn]
+ * @property {boolean} [stageShow]
+ * @property {boolean} [stageBeforeOut]
+ * @property {boolean} [stageOut]
+ * @property {boolean} [stageAfter]
+ * @property {Transition[]} [transitions]
+ */
+
+export default {};

package/dist/widgets/presenter/util.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @typedef {import("./typedef").Transition} Transition
+ */
+/** ----------------------------------------------------------------- Exports */
+/** ----------------------------------- Generate CSS for lists of transitions */
+/**
+ * Generates style and class names to be used before the transitions
+ * become active
+ *
+ * @param {Transition[]} transitions
+ *
+ * @returns {{style: string, classes: string}}
+ */
+export function cssBefore(transitions: Transition[]): {
+    style: string;
+    classes: string;
+};
+/**
+ * Generates style and class names to be used when the transitions are active
+ *
+ * @param {Transition[]} transitions
+ *
+ * @returns {{style: string, classes: string}}
+ */
+export function cssDuring(transitions: Transition[]): {
+    style: string;
+    classes: string;
+};
+/** ------------------------------------- Generate CSS for single transitions */
+/**
+ * Generates style and class names for specified transition for
+ * the stage 'stageBeforeIn'
+ *
+ * @param {Transition} transition
+ *
+ * @returns {{propertyStyle: string, transitionStyle: string, classes: string}}
+ */
+export function transitionCssBefore(transition: Transition): {
+    propertyStyle: string;
+    transitionStyle: string;
+    classes: string;
+};
+/**
+ * Generates style and class names for specified transition for
+ * the stage 'stageIn'
+ *
+ * @param {Transition} transition
+ *
+ * @returns {{propertyStyle: string, transitionStyle: string, classes: string}}
+ */
+export function transitionCssDuring(transition: Transition): {
+    propertyStyle: string;
+    transitionStyle: string;
+    classes: string;
+};
+export type Transition = import("./typedef").Transition;

package/dist/widgets/presenter/util.js

@@ -0,0 +1,188 @@
+import * as expect from '../../util/expect/index.js';
+
+import { pushNotEmpty } from '../../util/array/index.js';
+
+import { TRANSITION_CSS, FADE_IN, FADE_OUT } from './constants.js';
+
+/**
+ * @typedef {import("./typedef").Transition} Transition
+ */
+
+/** ----------------------------------------------------------------- Exports */
+
+/** ----------------------------------- Generate CSS for lists of transitions */
+
+/**
+ * Generates style and class names to be used before the transitions
+ * become active
+ *
+ * @param {Transition[]} transitions
+ *
+ * @returns {{style: string, classes: string}}
+ */
+export function cssBefore(transitions) {
+  expect.objectArray(transitions);
+
+  /** @type {string[]} */ let propertyStyleArr = [];
+  /** @type {string[]} */ let transitionStyleArr = [];
+  /** @type {string[]} */ let classesArr = [];
+
+  for (const transition of transitions) {
+    const { propertyStyle, transitionStyle, classes } =
+      transitionCssBefore(transition);
+
+    pushNotEmpty(propertyStyleArr, propertyStyle);
+    pushNotEmpty(transitionStyleArr, transitionStyle);
+    pushNotEmpty(classesArr, classes);
+  }
+
+  let style = propertyStyleArr.join(';');
+
+  if (transitionStyleArr.length) {
+    style += `;transition: ${transitionStyleArr.join(',')}`;
+  }
+
+  // console.log('cssBefore', transitions, style);
+
+  return { style, classes: classesArr.join() };
+}
+
+/**
+ * Generates style and class names to be used when the transitions are active
+ *
+ * @param {Transition[]} transitions
+ *
+ * @returns {{style: string, classes: string}}
+ */
+export function cssDuring(transitions) {
+  expect.objectArray(transitions);
+
+  /** @type {string[]} */ let propertyStyleArr = [];
+  /** @type {string[]} */ let transitionStyleArr = [];
+  /** @type {string[]} */ let classesArr = [];
+
+  for (const transition of transitions) {
+    const { propertyStyle, transitionStyle, classes } =
+      transitionCssDuring(transition);
+
+    pushNotEmpty(propertyStyleArr, propertyStyle);
+    pushNotEmpty(transitionStyleArr, transitionStyle);
+    pushNotEmpty(classesArr, classes);
+  } // end for
+
+  let style = propertyStyleArr.join(';');
+
+  if (transitionStyleArr.length) {
+    style += `;transition: ${transitionStyleArr.join(',')}`;
+  }
+
+  return { style, classes: classesArr.join() };
+}
+
+/** ------------------------------------- Generate CSS for single transitions */
+
+/**
+ * Generates style and class names for specified transition for
+ * the stage 'stageBeforeIn'
+ *
+ * @param {Transition} transition
+ *
+ * @returns {{propertyStyle: string, transitionStyle: string, classes: string}}
+ */
+export function transitionCssBefore(transition) {
+  expect.objectNoArray(transition);
+
+  let {
+    type,
+    // @ts-ignore
+    property,
+    from
+  } = transition;
+
+  let propertyStyle = '';
+  let transitionStyle = '';
+  let classes = '';
+
+  switch (type) {
+    case FADE_IN:
+      type = TRANSITION_CSS;
+      property = 'opacity';
+      from = from ?? '0';
+      break;
+
+    case FADE_OUT:
+      type = TRANSITION_CSS;
+      property = 'opacity';
+      from = from ?? '1';
+      break;
+  }
+
+  if (!type || TRANSITION_CSS === type) {
+    expect.notEmptyString(property);
+    expect.string(from);
+
+    propertyStyle = `${property}: ${from}`;
+  } else {
+    throw new Error(`Unknown transition type [${type}]`);
+  }
+
+  // console.log('transitionCssBefore', { propertyStyle, transitionStyle });
+
+  return { propertyStyle, transitionStyle, classes };
+}
+
+/**
+ * Generates style and class names for specified transition for
+ * the stage 'stageIn'
+ *
+ * @param {Transition} transition
+ *
+ * @returns {{propertyStyle: string, transitionStyle: string, classes: string}}
+ */
+export function transitionCssDuring(transition) {
+  expect.objectNoArray(transition);
+
+  let {
+    type,
+    // @ts-ignore
+    property,
+    to,
+    delay = 0,
+    duration = 1000,
+    timing = 'ease'
+  } = transition;
+
+  let propertyStyle;
+  let transitionStyle;
+  let classes = '';
+
+  switch (type) {
+    case FADE_IN:
+      type = TRANSITION_CSS;
+      property = 'opacity';
+      to = to ?? '1';
+      break;
+
+    case FADE_OUT:
+      type = TRANSITION_CSS;
+      property = 'opacity';
+      to = to ?? '0';
+      break;
+  }
+
+  if (!type || TRANSITION_CSS === type) {
+    expect.notEmptyString(property);
+    expect.string(to);
+
+    propertyStyle = `${property}: ${to}`;
+
+    /* property name | duration | easing function | delay */
+    transitionStyle = `${property} ${duration}ms ${timing} ${delay}ms`;
+  } else {
+    throw new Error(`Unknown transition type [${type}]`);
+  }
+
+  // console.log('transitionCssDuring', { propertyStyle, transitionStyle });
+
+  return { propertyStyle, transitionStyle, classes };
+}

package/dist/{components/layout → widgets}/virtual-viewport/VirtualViewport.svelte

@@ -5,7 +5,7 @@
     getRootCssDesignHeight,
     getClampParams,
     clamp
-  } from '../../../util/design-system/index.js';
+  } from '../../util/design-system/index.js';
 
   /**
    * Virtual viewport component that creates a container with its own scaling

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hkdigital/lib-sveltekit",
-	"version": "0.1.19",
+	"version": "0.1.21",
 	"author": {
 		"name": "HKdigital",
 		"url": "https://hkdigital.nl"

package/dist/components/widgets/scale-control/ScaleControl.svelte.d.ts

@@ -1,26 +0,0 @@
-export default ScaleControl;
-type ScaleControl = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string;
-};
-declare const ScaleControl: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/components/widgets/scale-control/index.d.ts

@@ -1 +0,0 @@
-export { default as ScaleControl } from "./ScaleControl.svelte";

package/dist/components/widgets/scale-control/index.js

@@ -1 +0,0 @@
-export { default as ScaleControl } from './ScaleControl.svelte';