@warp-ds/elements 2.4.0 → 2.5.0-next.2

package/dist/packages/slider/slider.d.ts

@@ -1,55 +0,0 @@
-import { LitElement, PropertyValues } from 'lit';
-/**
- * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
- *
- * @slot - For single sliders place a `<w-slider-thumb>` in the default slot.
- * @slot label - Label for the slider or range slider as a whole.
- * @slot description - Optional description between the label and slider.
- * @slot from - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
- * @slot to - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
- */
-declare class WarpSlider extends LitElement {
-    #private;
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-    };
-    static styles: import("lit").CSSResult[];
-    /**
-     * The slider fieldset label. Required for proper accessibility.
-     *
-     * If you need to display HTML, use the `label` slot instead.
-     */
-    label: string;
-    disabled: boolean;
-    allowValuesOutsideRange: boolean;
-    error: string;
-    helpText: string;
-    invalid: boolean;
-    /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
-    required: boolean;
-    min: string;
-    max: string;
-    /** Pass a value similar to step to create visual markers at that interval */
-    markers: number;
-    step: number;
-    /** Suffix used in text input fields and for the min and max values of the slider. */
-    suffix: string;
-    /** Function to format the to- and from labels and value in the slider thumb tooltip. */
-    formatter: (value: string, type: 'to' | 'from') => string;
-    _invalidMessage: string;
-    _hasInternalError: boolean;
-    constructor();
-    get edgeMin(): string;
-    get edgeMax(): string;
-    connectedCallback(): Promise<void>;
-    updated(changedProperties: PropertyValues<this>): void;
-    get componentHasError(): boolean;
-    get errorText(): string;
-    render(): import("lit").TemplateResult<1>;
-}
-export { WarpSlider };

package/dist/packages/slider/slider.js

@@ -1,301 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, LitElement, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
-import { activateI18n } from '../i18n.js';
-import { messages as daMessages } from './locales/da/messages.mjs';
-import { messages as enMessages } from './locales/en/messages.mjs';
-import { messages as fiMessages } from './locales/fi/messages.mjs';
-import { messages as nbMessages } from './locales/nb/messages.mjs';
-import { messages as svMessages } from './locales/sv/messages.mjs';
-import { reset } from '../styles.js';
-import { wSliderStyles } from './styles/w-slider.styles.js';
-// Inspo:
-//   https://css-tricks.com/multi-thumb-sliders-particular-two-thumb-case/
-//   https://css-tricks.com/multi-thumb-sliders-general-case/
-//   https://css-tricks.com/lets-make-a-multi-thumb-slider-that-calculates-the-width-between-thumbs/
-/**
- * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
- *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
- *
- * @slot - For single sliders place a `<w-slider-thumb>` in the default slot.
- * @slot label - Label for the slider or range slider as a whole.
- * @slot description - Optional description between the label and slider.
- * @slot from - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
- * @slot to - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
- */
-class WarpSlider extends LitElement {
-    static { this.shadowRootOptions = {
-        ...LitElement.shadowRootOptions,
-        delegatesFocus: true,
-    }; }
-    static { this.styles = [reset, wSliderStyles]; }
-    constructor() {
-        super();
-        this.disabled = false;
-        this.allowValuesOutsideRange = false;
-        this.error = '';
-        this.helpText = '';
-        this.invalid = false;
-        /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
-        this.required = false;
-        /** Suffix used in text input fields and for the min and max values of the slider. */
-        this.suffix = '';
-        this._invalidMessage = '';
-        this._hasInternalError = false;
-        activateI18n(enMessages, nbMessages, fiMessages, daMessages, svMessages);
-    }
-    #syncSliderThumbs() {
-        const sliderThumbs = this.querySelectorAll('w-slider-thumb');
-        let usedNamedSlots = false;
-        for (const thumb of sliderThumbs.values()) {
-            // Set attributes that should be in sync between slider thumbs
-            thumb.min = this.edgeMin;
-            thumb.max = this.edgeMax;
-            thumb.step = this.step;
-            thumb.suffix = this.suffix;
-            thumb.required = this.required;
-            thumb.formatter = this.formatter;
-            thumb.allowValuesOutsideRange = this.allowValuesOutsideRange;
-            if (!thumb.ariaLabel) {
-                if (!thumb.slot) {
-                    thumb.ariaLabel = this.label;
-                }
-                if (thumb.slot === 'from') {
-                    thumb.ariaLabel = `${this.label} min`;
-                }
-                if (thumb.slot === 'to') {
-                    thumb.ariaLabel = `${this.label} max`;
-                }
-            }
-            if (thumb.slot === 'from' || thumb.slot === 'to') {
-                usedNamedSlots = true;
-            }
-            thumb.disabled = this.disabled;
-            thumb.invalid = this.invalid || this._hasInternalError;
-            this.#updateActiveTrack(thumb);
-        }
-        // Missing a CSS-only way to detect if something is slotted in the named slots
-        const fieldset = this.shadowRoot.querySelector('fieldset');
-        if (usedNamedSlots) {
-            fieldset.style.setProperty('--active-range-inline-start-padding', 'var(--w-slider-thumb-size)');
-            fieldset.style.setProperty('--active-range-inline-end-padding', 'var(--w-slider-thumb-size)');
-        }
-        else {
-            fieldset.style.setProperty('--active-range-border-radius', '4px');
-        }
-    }
-    get edgeMin() {
-        return this.allowValuesOutsideRange ? (Number(this.min) - 1).toString() : this.min;
-    }
-    get edgeMax() {
-        return this.allowValuesOutsideRange ? (Number(this.max) + 1).toString() : this.max;
-    }
-    async connectedCallback() {
-        super.connectedCallback();
-        await this.updateComplete;
-        if (this.step) {
-            this.style.setProperty('--step', String(this.step));
-        }
-        this.style.setProperty('--min', this.edgeMin);
-        this.style.setProperty('--max', this.max);
-        if (this.markers) {
-            this.style.setProperty('--markers', String(this.markers));
-        }
-        if (this.allowValuesOutsideRange) {
-            this.style.setProperty('--over-under-offset', '1');
-        }
-        this.#syncSliderThumbs();
-    }
-    updated(changedProperties) {
-        if (changedProperties.has('disabled') ||
-            changedProperties.has('invalid') ||
-            changedProperties.has('required') ||
-            changedProperties.has('min') ||
-            changedProperties.has('step') ||
-            changedProperties.has('max') ||
-            changedProperties.has('suffix') ||
-            changedProperties.has('formatter') ||
-            changedProperties.has('_invalidMessage') ||
-            changedProperties.has('_hasInternalError')) {
-            this.#syncSliderThumbs();
-        }
-    }
-    #onInput(e) {
-        const input = e.target;
-        this.#updateActiveTrack(input);
-        const isRangeSlider = input.slot;
-        if (isRangeSlider) {
-            this.#doValidation();
-        }
-    }
-    #doValidation() {
-        // In a range slider changing the value in one input can change the validity
-        // of the second input. Specifically, what was a value outside the mininum or
-        // maximum can become inside those limits when the limits change, by changing
-        // the from or to values. Check to see if a field is invalid, but should be
-        // valid based on those rules.
-        let from;
-        let to;
-        const sliderThumbs = this.querySelectorAll('w-slider-thumb');
-        for (const thumb of sliderThumbs.values()) {
-            if (thumb.slot === 'from')
-                from = thumb;
-            if (thumb.slot === 'to')
-                to = thumb;
-        }
-        if (!from || !to) {
-            // Not a range slider, nothing to do here.
-            return;
-        }
-        if (!from.invalid && !to.invalid) {
-            // Both are valid, nothing to do here
-            return;
-        }
-    }
-    #onSliderValidity(e) {
-        e.stopPropagation();
-        const didHaveInternalError = this._hasInternalError || this.invalid;
-        const triggeredThumb = e.target;
-        this._hasInternalError = Boolean(e.detail.invalid) || this.invalid;
-        this._invalidMessage = e.detail.invalid;
-        if (didHaveInternalError === true && this._hasInternalError === false) {
-            const sliderThumbs = this.querySelectorAll('w-slider-thumb');
-            for (const thumb of sliderThumbs.values()) {
-                if (thumb !== triggeredThumb) {
-                    thumb.updateFieldAfterValidation();
-                }
-            }
-        }
-    }
-    #getEdgeValue(boundary, input) {
-        if (input.value === undefined || input.value === null) {
-            input.value = this.allowValuesOutsideRange ? '' : boundary;
-        }
-        // Use boundary for CSS positioning when value is empty
-        return input.value === '' ? boundary : input.value;
-    }
-    /**
-     * We use CSS variables to fill the active track with a background color.
-     */
-    #updateActiveTrack(input) {
-        const slotName = input.slot;
-        if (!slotName) {
-            this.style.setProperty('--from', '0');
-        }
-        if (slotName === 'from') {
-            this.style.setProperty('--from', this.#getEdgeValue(this.edgeMin, input));
-        }
-        if (!slotName || slotName === 'to') {
-            this.style.setProperty('--to', this.#getEdgeValue(this.edgeMax, input));
-        }
-    }
-    get componentHasError() {
-        return this.invalid || this._hasInternalError;
-    }
-    get errorText() {
-        if (!this.componentHasError) {
-            return '';
-        }
-        return this.error || this._invalidMessage;
-    }
-    render() {
-        return html `
-      <fieldset
-        id="fieldset"
-        class="w-slider"
-        @input="${this.#onInput}"
-        @slidervalidity="${this.#onSliderValidity}"
-        aria-invalid="${this.errorText ? 'true' : nothing}"
-      >
-        ${this.label
-            ? html `<legend class="w-slider__label">
-              <slot id="label" name="label">${this.label}</slot>
-            </legend>`
-            : nothing}
-        <slot class="w-slider__description" name="description"></slot>
-        ${this.markers ? html `<div class="w-slider__markers"></div>` : nothing}
-        <div class="w-slider__range">
-          <div class="w-slider__active-range"></div>
-        </div>
-        <slot
-          class="w-slider__slider"
-          @slotchange=${this.#syncSliderThumbs}
-        ></slot>
-        <slot
-          class="w-slider__slider"
-          name="from"
-          @slotchange=${this.#syncSliderThumbs}
-        ></slot>
-        <slot
-          class="w-slider__slider"
-          name="to"
-          @slotchange=${this.#syncSliderThumbs}
-        ></slot>
-        ${this.errorText
-            ? html `<p class="w-slider__error" aria-describes="fieldset">
-              ${this.errorText}
-            </p>`
-            : this.helpText
-                ? html `<p class="w-slider__help-text" aria-describes="fieldset">
-                ${this.helpText}
-              </p>`
-                : nothing}
-      </fieldset>
-    `;
-    }
-}
-__decorate([
-    property({ reflect: true })
-], WarpSlider.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpSlider.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: 'allow-values-outside-range' })
-], WarpSlider.prototype, "allowValuesOutsideRange", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], WarpSlider.prototype, "error", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'help-text' })
-], WarpSlider.prototype, "helpText", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpSlider.prototype, "invalid", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], WarpSlider.prototype, "required", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpSlider.prototype, "min", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpSlider.prototype, "max", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], WarpSlider.prototype, "markers", void 0);
-__decorate([
-    property({ type: Number, reflect: true })
-], WarpSlider.prototype, "step", void 0);
-__decorate([
-    property({ reflect: true })
-], WarpSlider.prototype, "suffix", void 0);
-__decorate([
-    property({ attribute: false })
-], WarpSlider.prototype, "formatter", void 0);
-__decorate([
-    state()
-], WarpSlider.prototype, "_invalidMessage", void 0);
-__decorate([
-    state()
-], WarpSlider.prototype, "_hasInternalError", void 0);
-if (!customElements.get('w-slider')) {
-    customElements.define('w-slider', WarpSlider);
-}
-export { WarpSlider };

package/dist/packages/slider/slider.react.stories.d.ts

@@ -1,19 +0,0 @@
-import { StoryObj } from '@storybook/react';
-import { Slider } from './react';
-declare const _default: {
-    title: string;
-    component: import("@lit/react").ReactWebComponent<import("./slider").WarpSlider, {}>;
-};
-export default _default;
-export type Story = StoryObj<typeof Slider>;
-export declare const Single: Story;
-export declare const Range: Story;
-export declare const SuffixSquareMeters: Story;
-export declare const SuffixCurrency: Story;
-export declare const SuffixKilometers: Story;
-export declare const Marks: Story;
-export declare const Step: Story;
-export declare const OverUnder: Story;
-export declare const SingleError: Story;
-export declare const RangeError: Story;
-export declare const TestCase: Story;

package/dist/packages/slider/slider.react.stories.js

@@ -1,140 +0,0 @@
-import React, { useState } from 'react';
-import { Slider, SliderThumb } from './react';
-const locale = 'nb';
-const getNumberFormatter = (locale, opts = {}) => {
-    return (value) => new Intl.NumberFormat(locale, { maximumFractionDigits: 0, ...opts }).format(value);
-};
-export default {
-    title: 'Forms/Slider and Range Slider',
-    component: Slider,
-};
-export const Single = {
-    render() {
-        return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
-            React.createElement(SliderThumb, { name: "value" })));
-    },
-};
-export const Range = {
-    render() {
-        return (React.createElement(Slider, { label: "Range", min: "0", max: "100" },
-            React.createElement(SliderThumb, { name: "from", slot: "from", "aria-label": "From value" }),
-            React.createElement(SliderThumb, { name: "to", slot: "to", "aria-label": "To value" })));
-    },
-};
-// Take a suffix attribute on `<Slider>` I think, have `<SliderThumb>` get from that.
-export const SuffixSquareMeters = {
-    args: {
-        suffix: 'm²',
-    },
-    render({ suffix }) {
-        return (React.createElement(Slider, { label: "Apartment size", min: "0", max: "250", suffix: suffix, formatter: getNumberFormatter(locale) },
-            React.createElement(SliderThumb, { slot: "from", "aria-label": "From size", name: "from" }),
-            React.createElement(SliderThumb, { slot: "to", "aria-label": "To size", name: "to" })));
-    },
-};
-export const SuffixCurrency = {
-    args: {
-        suffix: 'kr',
-    },
-    render({ suffix }) {
-        return (React.createElement(Slider, { label: "Price", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
-            React.createElement(SliderThumb, { slot: "from", "aria-label": "From price", name: "from" }),
-            React.createElement(SliderThumb, { slot: "to", "aria-label": "To price", name: "to" })));
-    },
-};
-export const SuffixKilometers = {
-    args: {
-        suffix: 'km',
-    },
-    render({ suffix }) {
-        return (React.createElement(Slider, { label: "Distance", min: "0", max: "250000", suffix: suffix, formatter: getNumberFormatter(locale) },
-            React.createElement(SliderThumb, { slot: "from", "aria-label": "From distance", name: "from" }),
-            React.createElement(SliderThumb, { slot: "to", "aria-label": "To distance", name: "to" })));
-    },
-};
-export const Marks = {
-    args: {
-        suffix: 'km',
-    },
-    render({ suffix }) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Slider, { label: "Single", min: "0", max: "100", markers: 5, step: 5 },
-                React.createElement(SliderThumb, { name: "value" }))));
-    },
-};
-export const Step = {
-    args: {
-        step: 5,
-    },
-    render({ step }) {
-        return (React.createElement(Slider, { label: "Single", step: step, min: "0", max: "100" },
-            React.createElement(SliderThumb, { name: "value" })));
-    },
-};
-export const OverUnder = {
-    render() {
-        const [overUnderFrom, setOverUnderFrom] = useState('');
-        const [overUnderTo, setOverUnderTo] = useState('');
-        return (React.createElement(React.Fragment, null,
-            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
-                    const formData = new FormData(val.currentTarget);
-                    setOverUnderFrom(formData.get('from'));
-                    setOverUnderTo(formData.get('to'));
-                } },
-                React.createElement(Slider, { label: "Produksjons\u00E5r", min: "1950", max: "2025", "data-testid": "overunder", formatter: (value) => {
-                        if (value === '1950') {
-                            return 'Før 1950';
-                        }
-                        if (value === '2025') {
-                            return 'Etter 2025';
-                        }
-                        return value;
-                    } },
-                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra \u00E5r", "aria-description": "1950 inkluderer kj\u00F8ret\u00F8y produsert fram til 1950", name: "from" }),
-                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til \u00E5r", "aria-description": "2025 inkluderer kj\u00F8ret\u00F8y produsert etter 2025", name: "to" }))),
-            React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
-            React.createElement("output", null,
-                React.createElement("dl", null,
-                    React.createElement("dt", null, "From:"),
-                    React.createElement("dd", { id: "overunder-from" }, overUnderFrom),
-                    React.createElement("dt", null, "To:"),
-                    React.createElement("dd", { id: "overunder-to" }, overUnderTo)))));
-    },
-};
-export const SingleError = {
-    render() {
-        return (React.createElement(Slider, { label: "Single", min: "0", max: "100" },
-            React.createElement("p", { slot: "description" }, "Try typing a value over 100"),
-            React.createElement(SliderThumb, null)));
-    },
-};
-export const RangeError = {
-    render() {
-        return (React.createElement(Slider, { label: "Production year", min: "1950", max: "2025" },
-            React.createElement("p", { slot: "description" }, "Try typing a from value higher than a to value"),
-            React.createElement(SliderThumb, { slot: "from", name: "from" }),
-            React.createElement(SliderThumb, { slot: "to", name: "to" })));
-    },
-};
-export const TestCase = {
-    render() {
-        const [fromValue, setFromValue] = useState('0');
-        const [toValue, setToValue] = useState('150000');
-        return (React.createElement(React.Fragment, null,
-            React.createElement("form", { id: "overunder", style: { marginBottom: 16 }, lang: "nb", onInput: (val) => {
-                    const formData = new FormData(val.currentTarget);
-                    setFromValue(formData.get('from'));
-                    setToValue(formData.get('to'));
-                } },
-                React.createElement(Slider, { label: "Pris", min: "0", max: "700000" },
-                    React.createElement(SliderThumb, { slot: "from", "aria-label": "Fra pris", name: "from", value: fromValue }),
-                    React.createElement(SliderThumb, { slot: "to", "aria-label": "Til pris", "aria-description": "700000 inkluderer prisen derfra og opp", name: "to", value: toValue }))),
-            React.createElement("p", null, "Drag the slider to show the value below. See the Code tab for how to format the labels."),
-            React.createElement("output", null,
-                React.createElement("dl", null,
-                    React.createElement("dt", null, "From:"),
-                    React.createElement("dd", null, fromValue),
-                    React.createElement("dt", null, "To:"),
-                    React.createElement("dd", null, toValue)))));
-    },
-};

package/dist/packages/slider/slider.stories.d.ts

@@ -1,21 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import '../affix/index.js';
-import '../attention/index.js';
-import '../textfield/index.js';
-import './index.js';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Single: Story;
-export declare const Range: Story;
-export declare const SuffixSquareMeters: Story;
-export declare const SuffixCurrency: Story;
-export declare const SuffixKilometers: Story;
-export declare const Marks: Story;
-export declare const Step: Story;
-export declare const OverUnder: Story;
-export declare const SingleError: Story;
-export declare const RangeError: Story;
-export declare const TestCase: Story;
-export declare const CustomError: Story;
-export declare const Description: Story;