@hortonstudio/main 1.2.4 → 1.2.6

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

@@ -0,0 +1,236 @@
+# @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

@@ -0,0 +1,95 @@
+# `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

@@ -0,0 +1,23 @@
+{
+  "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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,9 @@
+/**
+ * @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

@@ -0,0 +1,97 @@
+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

@@ -0,0 +1,10 @@
+/**
+ * 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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,70 @@
+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`;
+  }
+}