@hortonstudio/main 1.2.5 → 1.2.6

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

@@ -0,0 +1,22 @@
+{
+  "name": "@finsweet/attributes-inputactive",
+  "version": "1.0.7",
+  "description": "Set custom active CSS classes for Webflow form elements.",
+  "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": {
+    "@finsweet/attributes-utils": "workspace:*"
+  }
+}

package/attributes-master/packages/inputactive/src/actions/classes.ts

@@ -0,0 +1,43 @@
+import { FORM_CSS_CLASSES, getRadioGroupInputs } from '@finsweet/attributes-utils';
+
+import { getAttribute } from '../utils/selectors';
+
+/**
+ * Handles adding/removing the active class from an input.
+ * @param input
+ */
+export const handleInputActiveClass = (input: HTMLInputElement) => {
+  // Checkboxes
+  const isCheckbox = input.type === 'checkbox';
+  const checkboxField = input.closest(`.${FORM_CSS_CLASSES.checkboxField}`);
+
+  if (isCheckbox && checkboxField) {
+    const activeClass = getAttribute(input, 'activeclass');
+
+    setClass(checkboxField, activeClass, input.checked);
+    return;
+  }
+
+  // Radios
+  const isRadio = input.type === 'radio';
+  if (!isRadio) return;
+
+  const groupRadios = getRadioGroupInputs(input);
+  for (const radio of groupRadios) {
+    const radioField = radio.closest(`.${FORM_CSS_CLASSES.radioField}`);
+    if (!radioField) continue;
+
+    const activeClass = getAttribute(radio, 'activeclass');
+
+    setClass(radioField, activeClass, radio.checked);
+  }
+};
+
+/**
+ * Adds/removes the active class from an element.
+ * @param target
+ * @param className
+ * @param add
+ */
+const setClass = (target: Element, className: string, add = true) =>
+  target.classList[add ? 'add' : 'remove'](className);

package/attributes-master/packages/inputactive/src/factory.ts

@@ -0,0 +1,24 @@
+import { addListener, isHTMLInputElement } from '@finsweet/attributes-utils';
+
+import { handleInputActiveClass } from './actions/classes';
+
+/**
+ * Inits adding/removing active CSS classes from input fields.
+ * @returns A cleanup callback.
+ */
+export const initInputActiveClasses = () => {
+  // Set initial state
+  const allInputs = document.querySelectorAll('input');
+  allInputs.forEach(handleInputActiveClass);
+
+  // Listen for changes
+  const cleanup = addListener(window, 'change', (e) => {
+    const { target } = e;
+
+    if (!isHTMLInputElement(target)) return;
+
+    handleInputActiveClass(target);
+  });
+
+  return cleanup;
+};

package/attributes-master/packages/inputactive/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/inputactive/src/init.ts

@@ -0,0 +1,18 @@
+import { type FinsweetAttributeInit, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { initInputActiveClasses } from './factory';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const cleanup = initInputActiveClasses();
+
+  return {
+    destroy() {
+      cleanup();
+    },
+  };
+};

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

@@ -0,0 +1,13 @@
+import { type AttributeElements, type AttributeSettings, INPUT_ACTIVE_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines a custom active class.
+   */
+  activeclass: {
+    key: 'activeclass',
+    defaultValue: `is-${INPUT_ACTIVE_ATTRIBUTE}-active`,
+  },
+} as const satisfies AttributeSettings;

package/attributes-master/packages/inputactive/src/utils/selectors.ts

@@ -0,0 +1,5 @@
+import { generateSelectors, INPUT_ACTIVE_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { getSettingSelector, getAttribute } = generateSelectors(INPUT_ACTIVE_ATTRIBUTE, ELEMENTS, SETTINGS);

package/attributes-master/packages/inputactive/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}

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

@@ -0,0 +1,110 @@
+# @finsweet/attributes-inputcounter
+
+## 1.2.12
+
+### Patch Changes
+
+- Updated dependencies [2af0bad]
+  - @finsweet/attributes-utils@0.1.0
+
+## 1.2.11
+
+### Patch Changes
+
+- Updated dependencies [378d74d]
+  - @finsweet/attributes-utils@0.0.6
+
+## 1.2.10
+
+### Patch Changes
+
+- Updated dependencies [01973d8]
+  - @finsweet/attributes-utils@0.0.5
+
+## 1.2.9
+
+### Patch Changes
+
+- Updated dependencies [deef758]
+  - @finsweet/attributes-utils@0.0.4
+
+## 1.2.8
+
+### Patch Changes
+
+- Updated dependencies [d21cbca]
+  - @finsweet/attributes-utils@0.0.3
+
+## 1.2.7
+
+### Patch Changes
+
+- c7b544d: chore: updated dependencies
+- Updated dependencies [c7b544d]
+  - @finsweet/attributes-utils@0.0.2
+
+## 1.2.6
+
+### Patch Changes
+
+- b56e5e5: rename fsAttribute in places of usage to finsweetAttribute
+- Updated dependencies [b56e5e5]
+  - @finsweet/attributes-utils@0.0.1
+
+## 1.2.5
+
+### Patch Changes
+
+- 1b3142f0: Fix bug regarding read time, for small paragraphs, default to 1 minute. Add examples data for select custom and input counter
+
+## 1.2.4
+
+### Patch Changes
+
+- 1cfbca90: Update examples data and use clear attribute value inplace of option-reset, reset will be used as a fallback, may be removed completely in future.
+
+## 1.2.3
+
+### Patch Changes
+
+- fbd4f6c2: Add tabindex="0" to the buttons automatically
+
+## 1.2.2
+
+### Patch Changes
+
+- ddc110dc: Removed default initial value. Now users have to explicitly set an initial value using `fs-inputcounter-initial`.
+
+## 1.2.1
+
+### Patch Changes
+
+- 54a8ee37: Update `fs-a11y` import to `@1`
+
+## 1.2.0
+
+### Minor Changes
+
+- f06b218e: Added new `fs-inputcounter-showarrows` attribute.
+
+  By default, the native number input arrows (increment/decrement spinners) are hidden using CSS.
+
+  If the user defines `fs-inputcounter-showarrows="true"`, the number input will display as regular with the arrows.
+
+## 1.1.0
+
+### Minor Changes
+
+- 460f73c6: Improved a11y + fixed invalid attribute key in API
+
+## 1.0.1
+
+### Patch Changes
+
+- d7c4051a: Prevent default behavior of buttons
+
+## 1.0.0
+
+### Major Changes
+
+- 1ece2f42: Created `fs-inputcounter` Attribute

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

@@ -0,0 +1,25 @@
+# `inputcounter` Attribute
+
+Increment and decrement (+ and -) counter in a Webflow Form.
+
+## 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([
+  'inputcounter',
+  () => {
+    // Your code goes here.
+  },
+]);
+```
+
+## License
+
+[Apache 2.0](../../LICENSE.md)

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

@@ -0,0 +1,22 @@
+{
+  "name": "@finsweet/attributes-inputcounter",
+  "version": "1.2.12",
+  "description": "Increment and decrement (+ and -) counter in a Webflow Form.",
+  "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": {
+    "@finsweet/attributes-utils": "workspace:*"
+  }
+}

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

@@ -0,0 +1,23 @@
+import {
+  ARIA_CONTROLS_KEY,
+  ARIA_LABEL_KEY,
+  ARIA_ROLE_KEY,
+  ARIA_ROLE_VALUES,
+  TABINDEX_KEY,
+} from '@finsweet/attributes-utils';
+
+/**
+ * Sets A11Y attributes to a button.
+ * @param inputElement
+ * @param button
+ * @param label
+ */
+export const setButtonA11Y = (inputElement: HTMLInputElement, button: Element, label: string) => {
+  button.setAttribute(ARIA_ROLE_KEY, ARIA_ROLE_VALUES.button);
+  button.setAttribute(ARIA_CONTROLS_KEY, inputElement.id);
+  button.setAttribute(TABINDEX_KEY, '0');
+
+  if (!button.hasAttribute(ARIA_LABEL_KEY)) {
+    button.setAttribute(ARIA_LABEL_KEY, label);
+  }
+};

package/attributes-master/packages/inputcounter/src/actions/buttons.ts

@@ -0,0 +1,61 @@
+import { addListener, isNotEmpty, setFormFieldValue } from '@finsweet/attributes-utils';
+
+import { setButtonA11Y } from './a11y';
+
+/**
+ * Handles the increment/buttons accessibility and functionality.
+ * @param inputElement
+ * @param incrementButton
+ * @param decrementButton
+ * @returns A clanup callback.
+ */
+export const handleButtons = (
+  inputElement: HTMLInputElement,
+  incrementButton?: Element | null,
+  decrementButton?: Element | null
+) => {
+  // Set up aria
+  for (const button of [incrementButton, decrementButton].filter(isNotEmpty)) {
+    const action = button === incrementButton ? 'Increment' : 'Decrement';
+    const label = `${action} the input value`;
+
+    setButtonA11Y(inputElement, button, label);
+  }
+
+  // Set up listeners
+  const cleanupIncrement = addListener(incrementButton, 'click', (e) => {
+    e.preventDefault();
+    inputElement.stepUp();
+  });
+  const cleanupDecrement = addListener(decrementButton, 'click', (e) => {
+    e.preventDefault();
+    inputElement.stepDown();
+  });
+
+  return () => {
+    cleanupIncrement();
+    cleanupDecrement();
+  };
+};
+
+/**
+ * Handles a reset button's accessibility and functionality.
+ * @param inputElement
+ * @param resetButton
+ * @param initialValue
+ * @returns A cleanup callback.
+ */
+export const handleResetButton = (inputElement: HTMLInputElement, resetButton: Element, initialValue?: number) => {
+  // Set up aria
+  const label = `Reset the input value`;
+
+  setButtonA11Y(inputElement, resetButton, label);
+
+  // Set up listeners
+  const cleanupReset = addListener(resetButton, 'click', (e) => {
+    e.preventDefault();
+    setFormFieldValue(inputElement, initialValue?.toString() || '');
+  });
+
+  return cleanupReset;
+};

package/attributes-master/packages/inputcounter/src/actions/input.ts

@@ -0,0 +1,31 @@
+import { addListener, adjustValueToStep, isNumber, parseNumericAttribute } from '@finsweet/attributes-utils';
+
+/**
+ * Enforces the input's step, min and max, if defined.
+ * @param inputElement
+ * @returns A cleanup callback.
+ */
+export const handleInput = (inputElement: HTMLInputElement) => {
+  const { step: rawStep, min: rawMin, max: rawMax } = inputElement;
+  if (!rawStep && !rawMin && !rawMax) return;
+
+  const step = parseNumericAttribute(rawStep);
+  const min = parseNumericAttribute(rawMin);
+  const max = parseNumericAttribute(rawMax);
+
+  const cleanupInput = addListener(inputElement, 'change', () => {
+    const value = Number(inputElement.value);
+    if (isNaN(value)) return;
+
+    const adjustedValue = step ? adjustValueToStep(value, step) : value;
+
+    inputElement.value =
+      isNumber(min) && adjustedValue < min
+        ? min.toString()
+        : isNumber(max) && adjustedValue > max
+          ? max.toString()
+          : adjustedValue.toString();
+  });
+
+  return cleanupInput;
+};

package/attributes-master/packages/inputcounter/src/actions/style.ts

@@ -0,0 +1,12 @@
+import { HIDE_ARROWS_STYLE } from '../utils/constants';
+import { queryElement } from '../utils/selectors';
+
+/**
+ * Adds to the `<head>` the CSS style to hide the input arrows.
+ */
+export const addHideArrowsStylesheet = () => {
+  const existing = queryElement<HTMLStyleElement>('style');
+  if (existing) return;
+
+  document.head.insertAdjacentHTML('beforeend', HIDE_ARROWS_STYLE);
+};

package/attributes-master/packages/inputcounter/src/factory.ts

@@ -0,0 +1,51 @@
+import { isNumber, setFormFieldValue } from '@finsweet/attributes-utils';
+
+import { handleButtons, handleResetButton } from './actions/buttons';
+import { handleInput } from './actions/input';
+import { addHideArrowsStylesheet } from './actions/style';
+import { getAttribute, getInstance, queryElement } from './utils/selectors';
+
+/**
+ * Inits an input counter component.
+ * @param inputElement
+ * @returns A cleanup callback.
+ */
+export const initInputCounter = (inputElement: HTMLInputElement) => {
+  const instance = getInstance(inputElement);
+
+  const showArrows = getAttribute(inputElement, 'showarrows');
+
+  const initialValue = getAttribute(inputElement, 'initial');
+
+  const incrementButton = queryElement('increment', { instance });
+  const decrementButton = queryElement('decrement', { instance });
+
+  const resetButton = queryElement('clear', { instance });
+
+  if (!incrementButton && !decrementButton) return;
+
+  // Hide number input arrows (spinners)
+  if (!showArrows) addHideArrowsStylesheet();
+
+  // Handle input
+  const cleanupInput = handleInput(inputElement);
+
+  // Handle buttons
+  const cleanupButtons = handleButtons(inputElement, incrementButton, decrementButton);
+  const cleanupResetButton = resetButton ? handleResetButton(inputElement, resetButton, initialValue) : undefined;
+
+  // Enforce number type
+  inputElement.type = 'number';
+
+  // Set initial value
+  if (isNumber(initialValue)) {
+    setFormFieldValue(inputElement, initialValue.toString());
+  }
+
+  // Return cleanup
+  return () => {
+    cleanupInput?.();
+    cleanupButtons();
+    cleanupResetButton?.();
+  };
+};

package/attributes-master/packages/inputcounter/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';

package/attributes-master/packages/inputcounter/src/init.ts

@@ -0,0 +1,22 @@
+import { type FinsweetAttributeInit, isNotEmpty, waitWebflowReady } from '@finsweet/attributes-utils';
+
+import { initInputCounter } from './factory';
+import { getElementSelector } from './utils/selectors';
+
+/**
+ * Inits the attribute.
+ */
+export const init: FinsweetAttributeInit = async () => {
+  await waitWebflowReady();
+
+  const inputElements = [...document.querySelectorAll<HTMLInputElement>(`input${getElementSelector('input')}`)];
+
+  const cleanups = inputElements.map(initInputCounter).filter(isNotEmpty);
+
+  return {
+    result: inputElements,
+    destroy() {
+      for (const cleanup of cleanups) cleanup();
+    },
+  };
+};

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

@@ -0,0 +1,59 @@
+import { type AttributeElements, type AttributeSettings, INPUT_COUNTER_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+export const ELEMENTS = [
+  /**
+   * Defines the input element.
+   */
+  'input',
+
+  /**
+   * Defines an increment button.
+   */
+  'increment',
+
+  /**
+   * Defines an decrement button.
+   */
+  'decrement',
+
+  /**
+   * Defines a reset button.
+   */
+  'clear',
+
+  /**
+   * Defines the stylesheet that contains the hide arrows CSS.
+   */
+  'style',
+] as const satisfies AttributeElements;
+
+export const SETTINGS = {
+  /**
+   * Defines the initial value for the numeric input.
+   */
+  initial: {
+    key: 'initial',
+    isNumeric: true,
+  },
+
+  /**
+   * Defines if the native number input arrows should be displayed.
+   */
+  showarrows: {
+    key: 'showarrows',
+  },
+} as const satisfies AttributeSettings;
+
+export const HIDE_ARROWS_STYLE = `<style fs-${INPUT_COUNTER_ATTRIBUTE}-element="style">
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+</style>`;

package/attributes-master/packages/inputcounter/src/utils/selectors.ts

@@ -0,0 +1,9 @@
+import { generateSelectors, INPUT_COUNTER_ATTRIBUTE } from '@finsweet/attributes-utils';
+
+import { ELEMENTS, SETTINGS } from './constants';
+
+export const { queryElement, getElementSelector, getInstance, getAttribute } = generateSelectors(
+  INPUT_COUNTER_ATTRIBUTE,
+  ELEMENTS,
+  SETTINGS
+);

package/attributes-master/packages/inputcounter/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}