@hortonstudio/main 1.2.5 → 1.2.6

package/attributes-master/packages/utils/CHANGELOG.md

@@ -0,0 +1,43 @@
+# @finsweet/attributes-utils
+
+## 0.1.0
+
+### Minor Changes
+
+- 2af0bad: feat: `removequery`
+
+## 0.0.6
+
+### Patch Changes
+
+- 378d74d: fix: unify public API under FinsweetAttributes and remove finsweetAttributes
+
+## 0.0.5
+
+### Patch Changes
+
+- 01973d8: fix: missing customValueAttribute param
+
+## 0.0.4
+
+### Patch Changes
+
+- deef758: chore: rename `finsweetAttributes.solutions` -> `modules`
+
+## 0.0.3
+
+### Patch Changes
+
+- d21cbca: refactor: unify form field value getters and setters
+
+## 0.0.2
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+
+## 0.0.1
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute

package/attributes-master/packages/utils/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@finsweet/attributes-utils",
+  "version": "0.1.0",
+  "description": "Attributes utils",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "types": "src/index.ts",
+  "scripts": {
+    "lint": "eslint ./src && prettier --check ./src",
+    "lint:fix": "eslint ./src --fix && prettier --write ./src",
+    "check": "tsc --noEmit"
+  },
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    }
+  },
+  "devDependencies": {
+    "@motionone/dom": "^10.16.2",
+    "@motionone/types": "^10.15.1"
+  },
+  "dependencies": {
+    "motion": "^10.16.2"
+  }
+}

package/attributes-master/packages/utils/src/animations/factory.ts

@@ -0,0 +1,100 @@
+import { animate, stagger as staggerDelay } from 'motion';
+
+import type { AnimationFunctions, AnimationProps } from './types';
+
+/**
+ * Creates a new Animation.
+ * @param props The animaiton props.
+ * @returns A new `in` and `out` Animation functions.
+ */
+export const createAnimation = ({ initialStyles, keyframes }: AnimationProps): AnimationFunctions => {
+  /**
+   * Prepares the {@link animateIn} elements by setting the initial styles and rendering them to the DOM.
+   * @param elements The elements to prepare.
+   * @param options.target If defined, the element will be appended to the target.
+   * @param options.insertAfter A child of the target. If defined, the element will be appended right after this anchor element.
+   */
+  const prepareIn: AnimationFunctions['prepareIn'] = (elements, options = {}) => {
+    const { target, insertAfter, display = '' } = options;
+
+    if (!Array.isArray(elements)) elements = [elements];
+
+    for (const element of elements) {
+      element.style.display = display;
+      Object.assign(element.style, initialStyles);
+
+      if (target && insertAfter !== undefined) {
+        if (insertAfter) target.insertBefore(element, insertAfter.nextSibling);
+        else target.prepend(element);
+      } else if (target) target.appendChild(element);
+    }
+  };
+
+  /**
+   * In animation.
+   * @param elements The elements to animate.
+   * @param options.target If defined, the element will be appended to the target.
+   * @param options.insertAfter A child of the target. If defined, the element will be appended right after this anchor element.
+   * @param options.prepared Defines if the animation has been prepared beforehand, useful to avoid performing double preparation.
+   * @param options.stagger If defined, the animation will be staggered using this time value.
+   * @param options.animationOptions The main options of the animation. Reference: {@link [Motion One](https://motion.dev/dom/animate#options)}.
+   * @returns An awaitable promise.
+   */
+  const animateIn: AnimationFunctions['animateIn'] = async (elements, options = {}) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { prepared, stagger, display, duration, ...animationOptions } = options;
+
+    const durationInSeconds = duration ? duration / 1000 : undefined;
+
+    if (!prepared) prepareIn(elements, options);
+
+    const { finished } = animate(elements, keyframes, {
+      ...animationOptions,
+      delay: stagger ? staggerDelay(stagger / 1000) : undefined,
+      duration: durationInSeconds,
+    });
+
+    return await finished;
+  };
+
+  /**
+   * Out animation.
+   * @param elements The elements to animate.
+   * @param options.remove If defined, the element will be removed from the DOM after the animation ends.
+   * @param options.stagger If defined, the animation will be staggered using this time value.
+   * @param options.animationOptions The main options of the animation. Reference: {@link [Motion One](https://motion.dev/dom/animate#options)}.
+   * @returns An awaitable promise.
+   */
+  const animateOut: AnimationFunctions['animateOut'] = async (elements, options = {}) => {
+    const { remove, stagger, target, insertAfter, display = 'none', duration, ...animationOptions } = options;
+
+    const durationInSeconds = duration ? duration / 1000 : undefined;
+
+    if (!Array.isArray(elements)) elements = [elements];
+
+    elements = elements.filter((element) => document.body.contains(element));
+
+    if (!elements.length) return;
+
+    const { finished } = animate(elements, keyframes, {
+      ...animationOptions,
+      duration: durationInSeconds,
+      delay: stagger ? staggerDelay(stagger / 1000) : undefined,
+      direction: 'reverse',
+    });
+
+    await finished;
+
+    for (const element of elements) {
+      if (target && insertAfter !== undefined) {
+        if (insertAfter) target.insertBefore(element, insertAfter.nextSibling);
+        else target.prepend(element);
+      } else if (target) target.appendChild(element);
+
+      if (remove) element.remove();
+      else element.style.display = display;
+    }
+  };
+
+  return { prepareIn, animateIn, animateOut };
+};

package/attributes-master/packages/utils/src/animations/index.ts

@@ -0,0 +1,73 @@
+import { createAnimation } from './factory';
+import type { AnimationsObject } from './types';
+
+export * from './types';
+
+// Constants
+export const easings = ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out'] as const;
+
+/**
+ * Contains all animation functions.
+ */
+export const animations: AnimationsObject = {
+  /**
+   * Fade
+   */
+  fade: createAnimation({ keyframes: { opacity: [0, 1] }, initialStyles: { opacity: '0' } }),
+
+  /**
+   * Slide Up
+   */
+  'slide-up': createAnimation({
+    keyframes: { y: [100, 0], opacity: [0, 1] },
+    initialStyles: { transform: 'translateY(100px)', opacity: '0' },
+  }),
+
+  /**
+   * Slide Down
+   */
+  'slide-down': createAnimation({
+    keyframes: { y: [-100, 0], opacity: [0, 1] },
+    initialStyles: { transform: 'translateY(-100px)', opacity: '0' },
+  }),
+
+  /**
+   * Slide Right
+   */
+  'slide-right': createAnimation({
+    keyframes: { x: [-100, 0], opacity: [0, 1] },
+    initialStyles: { transform: 'translateX(-100px)', opacity: '0' },
+  }),
+
+  /**
+   * Slide Left
+   */
+  'slide-left': createAnimation({
+    keyframes: { x: [100, 0], opacity: [0, 1] },
+    initialStyles: { transform: 'translateX(100px)', opacity: '0' },
+  }),
+
+  /**
+   * Grow
+   */
+  grow: createAnimation({
+    keyframes: { scale: [0, 1], opacity: [0, 1] },
+    initialStyles: { transform: 'scale(0)', opacity: '0' },
+  }),
+
+  /**
+   * Shrink
+   */
+  shrink: createAnimation({
+    keyframes: { scale: [1.25, 1], opacity: [0, 1] },
+    initialStyles: { transform: 'scale(1.25)', opacity: '0' },
+  }),
+
+  /**
+   * Spin
+   */
+  spin: createAnimation({
+    keyframes: { rotate: [900, 0], opacity: [0, 1] },
+    initialStyles: { transform: 'rotate(900deg)', opacity: '0' },
+  }),
+} as const;

package/attributes-master/packages/utils/src/animations/types.ts

@@ -0,0 +1,37 @@
+import type { MotionKeyframesDefinition } from '@motionone/dom';
+import type { AnimationOptions } from '@motionone/types';
+
+import type { easings } from '.';
+
+export interface AnimationProps {
+  keyframes: MotionKeyframesDefinition;
+  initialStyles: {
+    [key: string]: string;
+  };
+}
+
+type FilteredAnimationOptions = Pick<AnimationOptions, 'duration' | 'easing'> & { stagger?: number };
+
+type AnimationPrepare<T> = (element: HTMLElement | HTMLElement[], options?: T) => void;
+type AnimationBase<T> = (element: HTMLElement | HTMLElement[], options?: T & FilteredAnimationOptions) => Promise<void>;
+
+type PrepareProps = { target?: Element; insertAfter?: Node | null; display?: string };
+type AnimationInProps = PrepareProps & { prepared?: true };
+type AnimationOutProps = PrepareProps & { remove?: boolean };
+
+type PrepareIn = AnimationPrepare<PrepareProps>;
+
+type AnimationIn = AnimationBase<AnimationInProps>;
+type AnimationOut = AnimationBase<AnimationOutProps>;
+
+export type AnimationFunctions = { prepareIn: PrepareIn; animateIn: AnimationIn; animateOut: AnimationOut };
+export type Animation = AnimationFunctions & { options?: FilteredAnimationOptions };
+
+export type AnimationsObject = Readonly<
+  Record<
+    'fade' | 'slide-up' | 'slide-down' | 'slide-right' | 'slide-left' | 'grow' | 'shrink' | 'spin',
+    AnimationFunctions
+  >
+>;
+
+export type Easings = typeof easings;

package/attributes-master/packages/utils/src/components/Interaction.ts

@@ -0,0 +1,79 @@
+import { simulateEvent } from '../helpers';
+import { wait } from '../helpers/wait';
+
+// Types
+export interface InteractionParams {
+  /**
+   * The element that has a Webflow Ix2 Click interaction binded to it.
+   */
+  element: HTMLElement | string;
+
+  /**
+   * The duration of the interaction.
+   * If a single number is passed, it will be used for both first and second interactions.
+   * If an object is passed, you can specify the duration for each interaction.
+   */
+  duration?: number | Partial<Interaction['duration']>;
+}
+
+export class Interaction {
+  private readonly element: HTMLElement;
+  private active = false;
+  private running = false;
+  private runningPromise?: Promise<unknown>;
+
+  public readonly duration: {
+    first: number;
+    second: number;
+  };
+
+  /**
+   * Acts as the controller for a Webflow Interaction.
+   * It accepts an element that will be clicked when required (firing a Mouse Click interaction).
+   * @param element Element that has the Mouse Click interaction.
+   * @param duration Optionally, the duration can be explicitly set so the trigger methods will return an awaitable Promise.
+   */
+  constructor({ element, duration }: InteractionParams) {
+    this.element = typeof element === 'string' ? document.querySelector<HTMLElement>(element)! : element;
+
+    this.duration = {
+      first: typeof duration === 'number' ? duration : (duration?.first ?? 0),
+      second: typeof duration === 'number' ? duration : (duration?.second ?? 0),
+    };
+  }
+
+  /**
+   * Trigger the interaction
+   * @param click Perform first or second click
+   * @returns True if the interaction was fired
+   */
+  public async trigger(click?: 'first' | 'second'): Promise<boolean> {
+    if ((click === 'first' && this.active) || (click === 'second' && !this.active)) return false;
+    if (!click) click = this.active ? 'second' : 'first';
+
+    simulateEvent(this.element, 'click');
+
+    this.running = true;
+    this.runningPromise = wait(this.duration[click]);
+    await this.runningPromise;
+    this.running = false;
+
+    this.active = click === 'first';
+    return true;
+  }
+
+  /**
+   * @returns If the interaction is active
+   */
+  public isActive = (): boolean => this.active;
+
+  /**
+   * @returns If the interaction is running
+   */
+  public isRunning = (): boolean => this.running;
+
+  /**
+   * @returns A promise that fulfills when the current running interaction has finished
+   */
+  public untilFinished = (): Promise<unknown> | undefined => this.runningPromise;
+}

package/attributes-master/packages/utils/src/components/Renderer.ts

@@ -0,0 +1,59 @@
+/**
+ * A render controller for an element.
+ * It allows to render and remove the element from the DOM.
+ */
+export class Renderer {
+  #rendered = true;
+  #anchor = new Comment();
+
+  /**
+   * Creates a render controller instance for an element.
+   * @param element The element to control.
+   */
+  constructor(public readonly element: Element) {}
+
+  /**
+   * Renders the element using the anchor as a reference.
+   */
+  render() {
+    if (this.#rendered) return;
+
+    this.#anchor.after(this.element);
+    this.#anchor.remove();
+
+    this.#rendered = true;
+  }
+
+  /**
+   * Removes the element from the DOM and replaces it with the anchor.
+   */
+  remove() {
+    if (!this.#rendered) return;
+
+    this.element.after(this.#anchor);
+    this.element.remove();
+
+    this.#rendered = false;
+  }
+
+  /**
+   * Updates the element's rendering state.
+   * @param shouldRender Whether the element should be rendered or not.
+   */
+  update(shouldRender: boolean) {
+    if (shouldRender) this.render();
+    else this.remove();
+  }
+
+  /**
+   * Destroys the render controller.
+   * @param forceRender Whether to force the element to be rendered after destroying the controller.
+   */
+  destroy = (forceRender = true) => {
+    if (forceRender) {
+      this.render();
+    }
+
+    this.#anchor.remove();
+  };
+}

package/attributes-master/packages/utils/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './Interaction';
+export * from './Renderer';

package/attributes-master/packages/utils/src/constants/a11y.ts

@@ -0,0 +1,50 @@
+export const ARIA_ROLE_KEY = 'role';
+export const enum ARIA_ROLE_VALUES {
+  slider = 'slider',
+  listbox = 'listbox',
+  option = 'option',
+  columnheader = 'columnheader',
+  link = 'link',
+  marquee = 'marquee',
+  button = 'button',
+  radiogroup = 'radiogroup',
+  dialog = 'dialog',
+}
+export const TABINDEX_KEY = 'tabindex';
+export const ARIA_LABEL_KEY = 'aria-label';
+export const ARIA_LABELLEDBY_KEY = 'aria-labelledby';
+export const ARIA_VALUENOW_KEY = 'aria-valuenow';
+export const ARIA_VALUEMIN_KEY = 'aria-valuemin';
+export const ARIA_VALUEMAX_KEY = 'aria-valuemax';
+export const ARIA_SELECTED_KEY = 'aria-selected';
+export const ARIA_HASPOPUP_KEY = 'aria-haspopup';
+export const ARIA_MULTISELECTABLE_KEY = 'aria-multiselectable';
+export const ARIA_EXPANDED_KEY = 'aria-expanded';
+export const ARIA_CURRENT_KEY = 'aria-current';
+export const ARIA_ACTIVEDESCENDANT_KEY = 'aria-activedescendant';
+export const ARIA_PRESSED_KEY = 'aria-pressed';
+export const ARIA_CONTROLS_KEY = 'aria-controls';
+export const ARIA_OWNS_KEY = 'aria-owns';
+export const ARIA_ROLEDESCRIPTION_KEY = 'aria-roledescription';
+export const ARIA_DESCRIPTION_KEY = 'aria-description';
+export const ARIA_HIDDEN_KEY = 'aria-hidden';
+export const AUTOCOMPLETE_KEY = 'autocomplete';
+export const AUTOCAPITALIZE_KEY = 'autocapitalize';
+export const ARIA_AUTOCOMPLETE_KEY = 'aria-autocomplete';
+export const ROLE_KEY = 'role';
+export const REQUIRED_KEY = 'required';
+export const NAME_KEY = 'name';
+export const ARIA_SETSIZE_KEY = 'aria-setsize';
+export const ARIA_POSINSET_KEY = 'aria-posinset';
+export const ID_KEY = 'id';
+export const ARIA_MODAL_KEY = 'aria-modal';
+export const enum ARIA_MODAL_VALUES {
+  true = 'true',
+}
+
+export const ARIA_SORT_KEY = 'aria-sort';
+export const enum ARIA_SORT_VALUES {
+  ascending = 'ascending',
+  descending = 'descending',
+}
+export const CONTENT_EDITABLE_KEY = 'contenteditable';

package/attributes-master/packages/utils/src/constants/attributes.ts

@@ -0,0 +1,57 @@
+export const ACCORDION_ATTRIBUTE = 'accordion';
+
+export const AUTO_VIDEO_ATTRIBUTE = 'autovideo';
+
+export const CODE_HIGHLIGHT_ATTRIBUTE = 'codehighlight';
+
+export const COMBO_BOX_ATTRIBUTE = 'combobox';
+
+export const INJECT_ATTRIBUTE = 'inject';
+
+export const COPY_CLIP_ATTRIBUTE = 'copyclip';
+
+export const DISPLAY_VALUES_ATTRIBUTE = 'displayvalues';
+
+export const DOCS_ATTRIBUTE = 'docs';
+
+export const FAV_CUSTOM_ATTRIBUTE = 'favcustom';
+
+export const FORM_SUBMIT_ATTRIBUTE = 'formsubmit';
+
+export const INPUT_ACTIVE_ATTRIBUTE = 'inputactive';
+
+export const INPUT_COUNTER_ATTRIBUTE = 'inputcounter';
+
+export const MIRROR_CLICK_ATTRIBUTE = 'mirrorclick';
+
+export const MIRROR_INPUT_ATTRIBUTE = 'mirrorinput';
+
+export const MODAL_ATTRIBUTE = 'modal';
+
+export const NUMBER_COUNT_ATTRIBUTE = 'numbercount';
+
+export const LIST_ATTRIBUTE = 'list';
+
+export const QUERY_PARAM_ATTRIBUTE = 'queryparam';
+
+export const RANGE_SLIDER_ATTRIBUTE = 'rangeslider';
+
+export const SCROLL_DISABLE_ATTRIBUTE = 'scrolldisable';
+
+export const SELECT_CUSTOM_ATTRIBUTE = 'selectcustom';
+
+export const SLIDER_DOTS_ATTRIBUTE = 'sliderdots';
+
+export const SMART_LIGHTBOX_ATTRIBUTE = 'smartlightbox';
+
+export const SOCIAL_SHARE_ATTRIBUTE = 'socialshare';
+
+export const STAR_RATING_ATTRIBUTE = 'starrating';
+
+export const TOC_ATTRIBUTE = 'toc';
+
+export const READ_TIME_ATTRIBUTE = 'readtime';
+
+export const REMOVE_QUERY_ATTRIBUTE = 'removequery';
+
+export const VIDEO_HLS_ATTRIBUTE = 'videohls';

package/attributes-master/packages/utils/src/constants/index.ts

@@ -0,0 +1,5 @@
+export * from './a11y';
+export * from './attributes';
+export * as ATTRIBUTES from './attributes';
+export * from './keyboard';
+export * from './webflow';

package/attributes-master/packages/utils/src/constants/keyboard.ts

@@ -0,0 +1,10 @@
+export const SPACE_KEY = ' ';
+export const ENTER_KEY = 'Enter';
+export const ESCAPE_KEY = 'Escape';
+export const TAB_KEY = 'Tab';
+export const CLICK = 'click';
+export const BACKSPACE_KEY = 'Backspace';
+export const ARROW_UP_KEY = 'ArrowUp';
+export const ARROW_DOWN_KEY = 'ArrowDown';
+export const ARROW_RIGHT_KEY = 'ArrowRight';
+export const ARROW_LEFT_KEY = 'ArrowLeft';

package/attributes-master/packages/utils/src/constants/webflow.ts

@@ -0,0 +1,74 @@
+import type { WebflowBreakpoint } from '../types';
+
+export const CURRENT_CSS_CLASS = 'w--current';
+
+export const RICH_TEXT_BLOCK_CSS_CLASS = 'w-richtext';
+
+export const HTML_EMBED_CSS_CLASS = 'w-embed';
+
+export const SLIDER_CSS_CLASSES = {
+  slider: 'w-slider',
+  slide: 'w-slide',
+  sliderMask: 'w-slider-mask',
+  sliderNav: 'w-slider-nav',
+  sliderDot: 'w-slider-dot',
+  activeSliderDot: 'w-active',
+} as const;
+
+export const TABS_CSS_CLASSES = {
+  tabs: 'w-tabs',
+  tabsContent: 'w-tab-content',
+  tabPane: 'w-tab-pane',
+  tabsMenu: 'w-tab-menu',
+  tabLink: 'w-tab-link',
+  activeTab: 'w--tab-active',
+} as const;
+
+export const NAVBAR_CSS_CLASSES = {
+  navMenu: 'w-nav-menu',
+} as const;
+
+export const CMS_CSS_CLASSES = {
+  wrapper: 'w-dyn-list',
+  list: 'w-dyn-items',
+  item: 'w-dyn-item',
+  paginationWrapper: 'w-pagination-wrapper',
+  paginationNext: 'w-pagination-next',
+  paginationPrevious: 'w-pagination-previous',
+  pageCount: 'w-page-count',
+  emptyState: 'w-dyn-empty',
+} as const;
+
+export const FORM_CSS_CLASSES = {
+  formBlock: 'w-form',
+  checkboxField: 'w-checkbox',
+  checkboxInput: 'w-checkbox-input',
+  radioField: 'w-radio',
+  radioInput: 'w-radio-input',
+  checkboxOrRadioLabel: 'w-form-label',
+  checkboxOrRadioFocus: 'w--redirected-focus',
+  checkboxOrRadioChecked: 'w--redirected-checked',
+  successMessage: 'w-form-done',
+  errorMessage: 'w-form-fail',
+} as const;
+
+export const DROPDOWN_CSS_CLASSES = {
+  dropdown: 'w-dropdown',
+  dropdownToggle: 'w-dropdown-toggle',
+  dropdownList: 'w-dropdown-list',
+} as const;
+
+export const COMMERCE_CSS_CLASSES = {
+  addToCartForm: 'w-commerce-commerceaddtocartform',
+} as const;
+
+export const LIGHTBOX_CSS_CLASSES = {
+  trigger: 'w-lightbox',
+} as const;
+
+export const WEBFLOW_BREAKPOINTS: Map<WebflowBreakpoint, string> = new Map([
+  ['tiny', '(max-width: 479px)'],
+  ['small', '(max-width: 767px)'],
+  ['medium', '(max-width: 991px)'],
+  ['main', '(min-width: 992px)'],
+]);

package/attributes-master/packages/utils/src/helpers/dates.ts

@@ -0,0 +1,17 @@
+import { isDate } from './guards';
+
+/**
+ * Converts a string to a `Date`.
+ * @param value
+ * @returns The `Date` object, if the conversion is successful.
+ */
+export const normalizeDate = (value: string | number | Date) => {
+  if (isDate(value)) return value;
+  if (value === '') return;
+
+  const date = new Date(value);
+
+  if (!isNaN(date.getTime())) {
+    return date;
+  }
+};