@hortonstudio/main 1.2.11 → 1.2.13

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

@@ -1,236 +0,0 @@
-# @finsweet/attributes-rangeslider
-
-## 1.9.0
-
-### Minor Changes
-
-- 3fe2798: feat: `fs-rangeslider-lazy`
-
-## 1.8.7
-
-### Patch Changes
-
-- Updated dependencies [2af0bad]
-  - @finsweet/attributes-utils@0.1.0
-
-## 1.8.6
-
-### Patch Changes
-
-- Updated dependencies [378d74d]
-  - @finsweet/attributes-utils@0.0.6
-
-## 1.8.5
-
-### Patch Changes
-
-- Updated dependencies [01973d8]
-  - @finsweet/attributes-utils@0.0.5
-
-## 1.8.4
-
-### Patch Changes
-
-- Updated dependencies [deef758]
-  - @finsweet/attributes-utils@0.0.4
-
-## 1.8.3
-
-### Patch Changes
-
-- Updated dependencies [d21cbca]
-  - @finsweet/attributes-utils@0.0.3
-
-## 1.8.2
-
-### Patch Changes
-
-- c7b544d: chore: updated dependencies
-- Updated dependencies [c7b544d]
-  - @finsweet/attributes-utils@0.0.2
-
-## 1.8.1
-
-### Patch Changes
-
-- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
-- Updated dependencies [b56e5e5]
-  - @finsweet/attributes-utils@0.0.1
-
-## 1.8.0
-
-### Minor Changes
-
-- e4b3b680: Created new `window.fsAttributes.destroy()` method to support SPA environments.
-  This new method allows users to destroy all Attributes instances, cleaning up event listeners, observers, states, global variables, etc.
-
-  Websites that use a client-side router that simulates an SPA environment like [barba.js](https://barba.js.org/) or [Swup](https://swup.js.org/) can now properly init and destroy Attributes.
-  After destroying, Attributes can be manually re-initted by calling `window.fsAttribute[ATTRIBUTE_KEY].init()`.
-
-  Updated changesets system, now all updates will be correctly reflected in [the official updates page](https://www.finsweet.com/attributes/updates).
-
-## 1.7.4
-
-### Patch Changes
-
-- 40b65ad7: Added fallback to use browser language when html lang attribute is not available for `toLocaleString`
-
-## 1.7.3
-
-### Patch Changes
-
-- 183daf27: Changed `formatDisplay` to get language from html attribute.
-
-## 1.7.2
-
-### Patch Changes
-
-- dea2fbf0: Added navigator language as explicit param on `toLocaleString` when using `formatValueDisplay` option
-
-## 1.7.1
-
-### Patch Changes
-
-- Updated dependencies [4792998a]
-  - @global/constants@1.2.0
-  - @global/factory@1.1.5
-
-## 1.7.0
-
-### Minor Changes
-
-- 07f32375: Created `fs-cmsattribute` Attribute
-
-### Patch Changes
-
-- Updated dependencies [07f32375]
-  - @global/constants@1.1.0
-  - @global/factory@1.1.4
-
-## 1.6.5
-
-### Patch Changes
-
-- 1c93f949: Added minRange to calculate offset in `adjustValueToStep`
-
-## 1.6.4
-
-### Patch Changes
-
-- Updated dependencies [7542dcdb]
-  - @global/constants@1.0.2
-  - @global/factory@1.1.3
-
-## 1.6.3
-
-### Patch Changes
-
-- Updated dependencies [bdd1a78]
-  - @global/constants@1.0.1
-  - @global/factory@1.1.2
-
-## 1.6.2
-
-### Patch Changes
-
-- Updated dependencies [13c3e23]
-  - @global/factory@1.1.1
-
-## 1.6.1
-
-### Patch Changes
-
-- Updated dependencies [627bf25]
-  - @global/factory@1.1.0
-
-## 1.6.0
-
-### Minor Changes
-
-- Added support wizard and publishing new schema version
-
-## 1.5.0
-
-### Minor Changes
-
-Included a new `window.fsAttributes.push()` method in the developer API that provides a standarized way to safely access any Attribute internals once it has fully loaded.
-It can be used like:
-
-```html
-<script>
-  window.fsAttributes = window.fsAttributes || [];
-  window.fsAttributes.push([
-    'rangeslider',
-    (handleInstances) => {
-      console.log('Attribute has successfully loaded!');
-      console.log(handleInstances);
-    },
-  ]);
-</script>
-```
-
-## 1.4.0
-
-### Minor Changes
-
-- Turned `touch` event listeners to `passive` to pass the [Use passive listeners to improve scrolling performance](https://web.dev/uses-passive-event-listeners/) performance Lighthouse test.
-- Improved Accessibility by assuring that each `Handle` has an `aria-label` attribute.
-  The value of `aria-label` will be the `name` of the `<input>` element.
-  If the user has already set this attribute in the Designer, `rangeslider` won't override that value.
-
-## 1.3.1
-
-### Patch Changes
-
-- Added support for handling [Floating-Point precision issues](https://floating-point-gui.de/).
-- Fixed an infinite loop being sometimes triggered during the `handle` - `input` update cycles.
-
-## 1.3.0
-
-### Minor Changes
-
-- Created `changesets.json` API.
-
-## 1.2.0
-
-### Minor Changes
-
-- Released `v1.2.0-beta`.
-
-## 1.1.2
-
-### Patch Changes
-
-- Reduced `resize` debouncing from 100ms to 50ms.
-
-## 1.1.1
-
-### Patch Changes
-
-- Added `examples.json` to the package.
-
-## 1.1.0
-
-### Minor Changes
-
-- Added new `fs-rangefilter-formatdisplay="true"` attribute.
-  Now, by default all `fs-rangefilter-element="display-value"` elements will display the numeric value without formatting.
-  If the `formatdisplay` attribute is added to the `wrapper` element, the `display-value` elements will display a formatted value (formatting defaults to the user's country conventions, some countries use commas and other countries use dots).
-- Added an extra check to make sure the Handles' start values are adjusted to the `step` increment coefficient.
-- Added an extra rule to set the Handles' start value to the `minRange` or `maxRange` if the provided value doesn't match the range. When this happens, a custom `Debug` message will be displayed to warn the user when using `debugMode`.
-- Added an extra `Debug` alert that warns the user when the provided `step` value doesn't fit the provided `[min,max]` range.
-
-## 1.0.1
-
-### Patch Changes
-
-- Made sure the track is set to `position: relative` and the Handles & Fill have the correct `position: absolute` values.
-
-## 1.0.0
-
-### Major Changes
-
-- Released `v1.0.0-beta` features.
-- Added support to recalculate the range slider position on window `resize` events.
-- Removed dependency on `Emittery`, reduced the package size from 14KB to 9KB.
-- Internal refactoring and performance improvements.

package/attributes-master/packages/rangeslider/README.md

@@ -1,95 +0,0 @@
-# `rangeslider` Attribute
-
-Build a custom Range Slider Form component natively in Webflow.
-
-## Getting Started
-
-Please follow the documentation at [finsweet.com/attributes](https://www.finsweet.com/attributes) to learn how to use Attributes in your Webflow projects.
-
-## Accessing the API
-
-To learn how to access the API, please check the general [API Reference](../attributes/README.md#api-reference) documentation:
-
-```javascript
-window.FinsweetAttributes ||= [];
-window.FinsweetAttributes.push([
-  'rangeslider',
-  (handleInstances) => {
-    // Your code goes here.
-  },
-]);
-```
-
-The `result` object contains the instances of the `Handle` classes for each active range slider on the page. Each value is a tuple with `[Handle, Handle | undefined]` objects representing the minimum and maximum (optional) handles of the range slider.
-
-## The `Handle` object
-
-The `Handle` class represents a draggable handle element in a range slider component. It manages the handle's position, value, constraints, and interactions with other elements like input fields and value displays.
-
-### Properties
-
-| Property  | Type          | Description                              |
-| --------- | ------------- | ---------------------------------------- |
-| `element` | `HTMLElement` | The DOM element representing the handle. |
-
-### Methods
-
-#### `Handle.getValue()`
-
-Returns the current value of the handle.
-
-- Returns: `number` - The current value of the handle.
-
-```javascript
-// Get the current value of a handle
-const value = handleInstance.getValue();
-console.log(`Current value: ${value}`);
-```
-
-#### `Handle.setValue(newValue, updateInputElement)`
-
-Sets a new value to the handle. The handle's position is automatically updated based on the new value.
-
-- `newValue` (number): The new value to set.
-- `updateInputElement` (boolean, optional): Defines if the linked input element should be updated. Defaults to `true`.
-- Returns: `boolean` - `true` if the value was updated, `false` if the value was unchanged or out of bounds.
-
-```javascript
-// Set the handle to a specific value
-handleInstance.setValue(50);
-
-// Set the value without updating the input element
-handleInstance.setValue(75, false);
-```
-
-#### `Handle.getConstraints()`
-
-Returns the current minimum and maximum value constraints for the handle.
-
-- Returns: `[number, number]` - An array with the minimum and maximum values.
-
-```javascript
-// Get the current constraints
-const [min, max] = handleInstance.getConstraints();
-console.log(`Min: ${min}, Max: ${max}`);
-```
-
-#### `Handle.setConstraints(minValue, maxValue)`
-
-Sets new minimum and maximum value constraints for the handle.
-
-- `minValue` (number): The new minimum value.
-- `maxValue` (number): The new maximum value.
-
-```javascript
-// Set new constraints for the handle
-handleInstance.setConstraints(20, 80);
-```
-
-#### `Handle.destroy()`
-
-Destroys the handle instance, removing all event listeners and cleaning up resources.
-
-## License
-
-[Apache 2.0](../../LICENSE.md)

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

@@ -1,23 +0,0 @@
-{
-  "name": "@finsweet/attributes-rangeslider",
-  "version": "1.9.0",
-  "description": "Build a custom Range Slider Form component natively in Webflow.",
-  "private": true,
-  "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"
-    }
-  },
-  "dependencies": {
-    "just-debounce": "^1.1.0",
-    "@finsweet/attributes-utils": "workspace:*"
-  }
-}

package/attributes-master/packages/rangeslider/src/actions/a11y.ts

@@ -1,21 +0,0 @@
-import {
-  ARIA_LABEL_KEY,
-  ARIA_LABELLEDBY_KEY,
-  ARIA_ROLE_KEY,
-  ARIA_ROLE_VALUES,
-  TABINDEX_KEY,
-} from '@finsweet/attributes-utils';
-
-/**
- * Sets the required `a11ty` attributes to a `Handle` element.
- * @param element The `Handle` element.
- * @param inputElement The correspondent `<input>` for the `Handle`, if existing.
- */
-export const setHandleA11Y = (element: HTMLElement, inputElement?: HTMLInputElement) => {
-  element.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.slider);
-  element.setAttribute(TABINDEX_KEY, '0');
-
-  if (![ARIA_LABEL_KEY, ARIA_LABELLEDBY_KEY].some((key) => element.getAttribute(key)) && inputElement) {
-    element.setAttribute(ARIA_LABEL_KEY, inputElement.name);
-  }
-};

package/attributes-master/packages/rangeslider/src/actions/events.ts

@@ -1,9 +0,0 @@
-/**
- * @returns The `clientX` property of an event.
- * @param e A {@link MouseEvent} or a {@link TouchEvent}
- */
-export const getClientX = (e: MouseEvent | TouchEvent) => {
-  if (e instanceof MouseEvent) return e.clientX;
-
-  return e.touches[0].clientX;
-};

package/attributes-master/packages/rangeslider/src/actions/settings.ts

@@ -1,97 +0,0 @@
-import { getDecimalPrecision, isFormField } from '@finsweet/attributes-utils';
-
-import { getAttribute, hasAttributeValue, queryAllElements, queryElement } from '../utils/selectors';
-
-/**
- * Collects the required settings.
- * @param wrapperElement The wrapper element.
- * @returns The settings, if no errors were found.
- */
-export const getSettings = (
-  wrapperElement: HTMLElement
-):
-  | {
-      trackElement: HTMLElement;
-      fillElement: HTMLElement | null;
-      handleElements: HTMLElement[];
-      inputElements: HTMLInputElement[];
-      displayValueElements: HTMLElement[];
-      formatValueDisplay?: string;
-      trackLeft: number;
-      trackRight: number;
-      trackWidth: number;
-      minRange: number;
-      maxRange: number;
-      totalRange: number;
-      step: number;
-      precision: number;
-      updateOnRelease: boolean;
-      isLazy: boolean;
-    }
-  | undefined => {
-  const trackElement = queryElement('track', { scope: wrapperElement });
-
-  const fillElement = queryElement('fill', { scope: wrapperElement });
-
-  const inputElements = [...wrapperElement.querySelectorAll('input')].filter(isFormField);
-
-  const handleElements = queryAllElements('handle', { scope: wrapperElement });
-
-  const displayValueElements = queryAllElements('display-value', { scope: wrapperElement });
-
-  const formatValueDisplay = getAttribute(wrapperElement, 'formatdisplay');
-
-  const updateOnRelease = hasAttributeValue(wrapperElement, 'update', 'release');
-
-  const isLazy = hasAttributeValue(wrapperElement, 'lazy', 'true');
-
-  if (!handleElements.length || !trackElement) {
-    console.error('The rangeslider is missing a Track element or a Handle element.');
-    return;
-  }
-
-  const { left: trackLeft, right: trackRight } = trackElement.getBoundingClientRect();
-  const trackWidth = trackElement.clientWidth;
-  trackElement.style.position = 'relative';
-
-  const minRange = parseFloat(getAttribute(wrapperElement, 'min') || '0');
-  const maxRange = parseFloat(getAttribute(wrapperElement, 'max') || `${minRange + 1}`);
-  const totalRange = maxRange - minRange;
-
-  if (Number.isNaN(totalRange)) {
-    console.error('Please make sure min and max are numbers.');
-    return;
-  }
-
-  if (Math.sign(totalRange) === -1) {
-    console.error("The min can't be greater than the max.");
-    return;
-  }
-
-  const step = parseFloat(getAttribute(wrapperElement, 'step') || `${totalRange / 100}`);
-  const precision = getDecimalPrecision(step);
-
-  if (totalRange % step > 0)
-    console.error(
-      `The provided step [${step}] doesn't fit the range [${minRange},${maxRange}], are you sure you want to use this value?`
-    );
-
-  return {
-    trackElement,
-    fillElement,
-    handleElements,
-    inputElements,
-    displayValueElements,
-    formatValueDisplay,
-    trackLeft,
-    trackRight,
-    trackWidth,
-    minRange,
-    maxRange,
-    totalRange,
-    step,
-    precision,
-    updateOnRelease,
-    isLazy,
-  };
-};

package/attributes-master/packages/rangeslider/src/actions/styles.ts

@@ -1,10 +0,0 @@
-/**
- * Sets the required CSS styles to a `Handle` element.
- * @param element The `Handle` element.
- */
-export const setHandleStyles = (element: HTMLElement) => {
-  element.style.position = 'absolute';
-  element.style.right = 'unset';
-  element.style.top = `50%`;
-  element.style.transform = 'translate(-50%, -50%)';
-};

package/attributes-master/packages/rangeslider/src/actions/values.ts

@@ -1,47 +0,0 @@
-import { isNotEmpty, isNumber } from '@finsweet/attributes-utils';
-
-import type { HandleInstances } from '../utils/types';
-
-/**
- * Returns the closest handle to an adjusted value.
- * @param adjustedValue The adjusted value through {@link adjustValueToStep}.
- * @param handles The {@link HandleInstances}.
- * @returns The closest valid `Handle`, if existing.
- */
-export const getClosestValidHandle = (adjustedValue: number, [handle1, handle2]: HandleInstances) => {
-  const handle1Value = handle1.getValue();
-  const handle2Value = handle2?.getValue();
-
-  const closestValue = getClosestValue(adjustedValue, [handle1Value, handle2Value]);
-
-  if (!isNumber(closestValue)) return;
-
-  const [handle1MinValue, handle1MaxValue] = handle1.getConstraints();
-
-  if (closestValue === handle1Value && adjustedValue >= handle1MinValue && adjustedValue <= handle1MaxValue) {
-    return handle1;
-  }
-
-  if (!handle2 || closestValue !== handle2Value) return;
-
-  const [handle2MinValue, handle2MaxValue] = handle2.getConstraints();
-
-  if (adjustedValue >= handle2MinValue && adjustedValue <= handle2MaxValue) return handle2;
-};
-
-/**
- * @returns The closest value from an array based on a reference value.
- * @param reference The reference value.
- * @param values The array of values to compare.
- */
-const getClosestValue = (reference: number, values: (number | undefined)[]) => {
-  const filteredValues = values.filter(isNotEmpty);
-
-  if (!filteredValues.length) return;
-
-  const closestValue = filteredValues.reduce((previous, current) =>
-    Math.abs(current - reference) < Math.abs(previous - reference) ? current : previous
-  );
-
-  return closestValue;
-};

package/attributes-master/packages/rangeslider/src/components/Fill.ts

@@ -1,70 +0,0 @@
-import type { Handle } from './Handle';
-
-export class Fill {
-  private readonly minRange;
-  private readonly totalRange;
-
-  private readonly handles: readonly [Handle, Handle | undefined];
-
-  private trackWidth: number;
-
-  constructor(
-    public readonly element: HTMLElement,
-    {
-      minRange,
-      maxRange,
-      handles,
-      trackWidth,
-    }: { minRange: number; maxRange: number; handles: readonly [Handle, Handle | undefined]; trackWidth: number }
-  ) {
-    element.style.position = 'absolute';
-    element.style.right = 'unset';
-
-    this.minRange = minRange;
-    this.totalRange = maxRange - minRange;
-
-    this.handles = handles;
-
-    this.trackWidth = trackWidth;
-
-    this.update();
-  }
-
-  /**
-   * Updates the stored track width.
-   * The `update` method is fired from the Handles.
-   * @param newTrackWidth The new track width.
-   */
-  public updateTrackWidth(newTrackWidth: number) {
-    this.trackWidth = newTrackWidth;
-  }
-
-  /**
-   * Updates the Fill width and position based on the handle's values.
-   */
-  public update(): void {
-    const {
-      element,
-      trackWidth,
-      minRange,
-      totalRange,
-      handles: [handle1, handle2],
-    } = this;
-
-    let left: number;
-    let width: number;
-
-    const leftOffset = ((handle1.getValue() - minRange) * trackWidth) / totalRange;
-
-    if (handle2) {
-      left = leftOffset;
-      width = ((handle2.getValue() - handle1.getValue()) * trackWidth) / totalRange;
-    } else {
-      left = 0;
-      width = leftOffset;
-    }
-
-    element.style.left = `${left}px`;
-    element.style.width = `${width}px`;
-  }
-}