@spectrum-web-components/slider 0.12.13 → 0.12.15-devmode.7

package/stories/slider.stories.js

@@ -1,100 +1,87 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-import { html } from '@spectrum-web-components/base';
-import '../sp-slider.js';
-import '../sp-slider-handle.js';
-import { variants } from '../';
-import { spreadProps } from '../../../test/lit-helpers.js';
+import { html } from "@spectrum-web-components/base";
+import "@spectrum-web-components/slider/sp-slider.js";
+import "@spectrum-web-components/slider/sp-slider-handle.js";
+import {
+  variants
+} from "@spectrum-web-components/slider";
+import { spreadProps } from "../../../test/lit-helpers.js";
 export default {
-    component: 'sp-slider',
-    title: 'Slider',
-    argTypes: {
-        onInput: { action: 'input' },
-        onChange: { action: 'change' },
-        variant: {
-            name: 'Variant',
-            description: 'Determines the style of slider.',
-            table: {
-                type: { summary: 'string' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'inline-radio',
-                options: [undefined, ...variants],
-            },
-        },
-        tickStep: {
-            name: 'Tick Step',
-            description: 'Tick spacing on slider.',
-            table: {
-                type: { summary: 'number' },
-                defaultValue: { summary: 0.1 },
-            },
-            control: {
-                type: 'number',
-            },
-        },
-        labelVisibility: {
-            name: 'Label Visibility',
-            description: 'The labels visibily available in the UI',
-            table: {
-                type: { summary: '"text" | "value" | "none" | undefined' },
-                defaultValue: { summary: undefined },
-            },
-            control: {
-                type: 'text',
-            },
-        },
+  component: "sp-slider",
+  title: "Slider",
+  argTypes: {
+    onInput: { action: "input" },
+    onChange: { action: "change" },
+    variant: {
+      name: "Variant",
+      description: "Determines the style of slider.",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "inline-radio",
+        options: [void 0, ...variants]
+      }
     },
-    args: {
-        variant: undefined,
-        tickStep: 0.1,
-        labelVisibility: undefined,
+    tickStep: {
+      name: "Tick Step",
+      description: "Tick spacing on slider.",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: 0.1 }
+      },
+      control: {
+        type: "number"
+      }
     },
+    labelVisibility: {
+      name: "Label Visibility",
+      description: "The labels visibily available in the UI",
+      table: {
+        type: { summary: '"text" | "value" | "none" | undefined' },
+        defaultValue: { summary: void 0 }
+      },
+      control: {
+        type: "text"
+      }
+    }
+  },
+  args: {
+    variant: void 0,
+    tickStep: 0.1,
+    labelVisibility: void 0
+  }
 };
 const handleEvent = ({ onInput, onChange }) => (event) => {
-    const { value } = event.target;
-    if (onInput && event.type === 'input') {
-        onInput(value.toString());
-    }
-    else if (onChange && event.type === 'change') {
-        onChange(value.toString());
-    }
+  const { value } = event.target;
+  if (onInput && event.type === "input") {
+    onInput(value.toString());
+  } else if (onChange && event.type === "change") {
+    onChange(value.toString());
+  }
 };
 const handleHandleEvent = ({ onInput, onChange }) => (event) => {
-    const target = event.target;
-    if (target.value != null) {
-        if (typeof target.value === 'object') {
-            const value = JSON.stringify(target.value, null, 2);
-            if (onInput && event.type === 'input') {
-                onInput(value);
-            }
-            else if (onChange && event.type === 'change') {
-                onChange(value);
-            }
-        }
-        else {
-            const value = `${target.name}: ${target.value}`;
-            if (onInput && event.type === 'input') {
-                onInput(value);
-            }
-            else if (onChange && event.type === 'change') {
-                onChange(value);
-            }
-        }
+  const target = event.target;
+  if (target.value != null) {
+    if (typeof target.value === "object") {
+      const value = JSON.stringify(target.value, null, 2);
+      if (onInput && event.type === "input") {
+        onInput(value);
+      } else if (onChange && event.type === "change") {
+        onChange(value);
+      }
+    } else {
+      const value = `${target.name}: ${target.value}`;
+      if (onInput && event.type === "input") {
+        onInput(value);
+      } else if (onChange && event.type === "change") {
+        onChange(value);
+      }
     }
+  }
 };
 export const Default = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
@@ -103,7 +90,7 @@ export const Default = (args = {}) => {
                 step="0.01"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
-                .formatOptions=${{ style: 'percent' }}
+                .formatOptions=${{ style: "percent" }}
                 ...=${spreadProps(args)}
             >
                 Opacity
@@ -112,7 +99,7 @@ export const Default = (args = {}) => {
     `;
 };
 export const noVisibleTextLabel = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
@@ -121,7 +108,7 @@ export const noVisibleTextLabel = (args = {}) => {
                 step="0.01"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
-                .formatOptions=${{ style: 'percent' }}
+                .formatOptions=${{ style: "percent" }}
                 ...=${spreadProps(args)}
             >
                 Opacity
@@ -130,10 +117,10 @@ export const noVisibleTextLabel = (args = {}) => {
     `;
 };
 noVisibleTextLabel.args = {
-    labelVisibility: 'value',
+  labelVisibility: "value"
 };
 export const noVisibleValueLabel = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
@@ -142,7 +129,7 @@ export const noVisibleValueLabel = (args = {}) => {
                 step="0.01"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
-                .formatOptions=${{ style: 'percent' }}
+                .formatOptions=${{ style: "percent" }}
                 ...=${spreadProps(args)}
             >
                 Opacity
@@ -151,10 +138,10 @@ export const noVisibleValueLabel = (args = {}) => {
     `;
 };
 noVisibleValueLabel.args = {
-    labelVisibility: 'text',
+  labelVisibility: "text"
 };
 export const noVisibleLabels = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="1"
@@ -163,7 +150,7 @@ export const noVisibleLabels = (args = {}) => {
                 step="0.01"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
-                .formatOptions=${{ style: 'percent' }}
+                .formatOptions=${{ style: "percent" }}
                 ...=${spreadProps(args)}
             >
                 Opacity
@@ -172,10 +159,10 @@ export const noVisibleLabels = (args = {}) => {
     `;
 };
 noVisibleLabels.args = {
-    labelVisibility: 'none',
+  labelVisibility: "none"
 };
 export const px = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 max="360"
@@ -185,9 +172,9 @@ export const px = (args = {}) => {
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
                 .formatOptions=${{
-        style: 'unit',
-        unit: 'px',
-    }}
+    style: "unit",
+    unit: "px"
+  }}
                 ...=${spreadProps(args)}
             >
                 Angle
@@ -196,28 +183,28 @@ export const px = (args = {}) => {
     `;
 };
 class NumberFieldDefined extends HTMLElement {
-    constructor() {
-        super();
-        this.numberFieldLoaderPromise = Promise.resolve(false);
-        this.numberFieldLoaderPromise = new Promise((res) => {
-            customElements.whenDefined('sp-number-field').then(() => {
-                res(true);
-            });
-        });
-    }
-    get updateComplete() {
-        return this.numberFieldLoaderPromise;
-    }
+  constructor() {
+    super();
+    this.numberFieldLoaderPromise = Promise.resolve(false);
+    this.numberFieldLoaderPromise = new Promise((res) => {
+      customElements.whenDefined("sp-number-field").then(() => {
+        res(true);
+      });
+    });
+  }
+  get updateComplete() {
+    return this.numberFieldLoaderPromise;
+  }
 }
-customElements.define('number-field-defined', NumberFieldDefined);
+customElements.define("number-field-defined", NumberFieldDefined);
 const editableDecorator = (story) => {
-    return html `
+  return html`
         ${story()}
         <number-field-defined></number-field-defined>
     `;
 };
 export const editable = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -228,10 +215,10 @@ export const editable = (args = {}) => {
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
                 .formatOptions=${{
-        style: 'unit',
-        unit: 'degree',
-        unitDisplay: 'narrow',
-    }}
+    style: "unit",
+    unit: "degree",
+    unitDisplay: "narrow"
+  }}
                 ...=${spreadProps(args)}
             >
                 Angle
@@ -241,7 +228,7 @@ export const editable = (args = {}) => {
 };
 editable.decorators = [editableDecorator];
 export const editableDisabled = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -253,10 +240,10 @@ export const editableDisabled = (args = {}) => {
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
                 .formatOptions=${{
-        style: 'unit',
-        unit: 'degree',
-        unitDisplay: 'narrow',
-    }}
+    style: "unit",
+    unit: "degree",
+    unitDisplay: "narrow"
+  }}
                 ...=${spreadProps(args)}
             >
                 Angle
@@ -266,7 +253,7 @@ export const editableDisabled = (args = {}) => {
 };
 editable.decorators = [editableDecorator];
 export const editableCustom = (args = {}) => {
-    return html `
+  return html`
         <div
             style="width: 500px; margin: 12px 20px; --spectrum-slider-editable-number-field-width: 150px;"
         >
@@ -278,7 +265,7 @@ export const editableCustom = (args = {}) => {
                 step="0.25"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
-                .formatOptions=${{ style: 'unit', unit: 'hour' }}
+                .formatOptions=${{ style: "unit", unit: "hour" }}
                 ...=${spreadProps(args)}
             >
                 Hours
@@ -288,7 +275,7 @@ export const editableCustom = (args = {}) => {
 };
 editableCustom.decorators = [editableDecorator];
 export const hideStepper = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 editable
@@ -299,7 +286,7 @@ export const hideStepper = (args = {}) => {
                 step="0.01"
                 @input=${handleEvent(args)}
                 @change=${handleEvent(args)}
-                .formatOptions=${{ style: 'percent' }}
+                .formatOptions=${{ style: "percent" }}
                 ...=${spreadProps(args)}
             >
                 Opacity
@@ -309,7 +296,7 @@ export const hideStepper = (args = {}) => {
 };
 hideStepper.decorators = [editableDecorator];
 export const Gradient = (args = {}) => {
-    return html `
+  return html`
         <div
             style="
                 width: 500px;
@@ -332,10 +319,10 @@ export const Gradient = (args = {}) => {
     `;
 };
 Gradient.args = {
-    variant: undefined,
+  variant: void 0
 };
 export const tick = (args = {}) => {
-    return html `
+  return html`
         <sp-slider
             label="Slider Label"
             variant="tick"
@@ -346,11 +333,11 @@ export const tick = (args = {}) => {
     `;
 };
 tick.args = {
-    variant: 'tick',
-    tickStep: 5,
+  variant: "tick",
+  tickStep: 5
 };
 export const tickLabels = (args = {}) => {
-    return html `
+  return html`
         <sp-slider
             label="Slider Label"
             tick-labels
@@ -362,11 +349,11 @@ export const tickLabels = (args = {}) => {
     `;
 };
 tickLabels.args = {
-    variant: 'tick',
-    tickStep: 5,
+  variant: "tick",
+  tickStep: 5
 };
 export const Disabled = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 disabled
@@ -380,8 +367,43 @@ export const Disabled = (args = {}) => {
         </div>
     `;
 };
+export const Quiet = (args = {}) => {
+  return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                hide-stepper
+                quiet
+                value="5"
+                step="0.5"
+                min="0"
+                max="20"
+                label="Intensity"
+                ...=${spreadProps(args)}
+            ></sp-slider>
+        </div>
+    `;
+};
+export const Indeterminate = (args = {}) => {
+  return html`
+        <div style="width: 500px; margin: 12px 20px;">
+            <sp-slider
+                editable
+                indeterminate
+                value="5"
+                step="0.5"
+                min="0"
+                max="20"
+                label="Intensity"
+                @input=${handleEvent(args)}
+                @change=${handleEvent(args)}
+                ...=${spreadProps(args)}
+            ></sp-slider>
+        </div>
+    `;
+};
 export const ExplicitHandle = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="0.5"
@@ -398,7 +420,7 @@ export const ExplicitHandle = (args = {}) => {
     `;
 };
 export const TwoHandles = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
@@ -425,11 +447,11 @@ export const TwoHandles = (args = {}) => {
     `;
 };
 TwoHandles.args = {
-    variant: 'range',
-    tickStep: 10,
+  variant: "range",
+  tickStep: 10
 };
 export const TwoHandlesPt = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
@@ -439,9 +461,9 @@ export const TwoHandlesPt = (args = {}) => {
                 @input=${handleHandleEvent(args)}
                 @change=${handleHandleEvent(args)}
                 .formatOptions=${{
-        style: 'unit',
-        unit: 'pt',
-    }}
+    style: "unit",
+    unit: "pt"
+  }}
                 ...=${spreadProps(args)}
             >
                 Output Levels
@@ -460,11 +482,11 @@ export const TwoHandlesPt = (args = {}) => {
     `;
 };
 TwoHandlesPt.args = {
-    variant: 'range',
-    tickStep: 10,
+  variant: "range",
+  tickStep: 10
 };
 export const ThreeHandlesPc = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 value="5"
@@ -474,9 +496,9 @@ export const ThreeHandlesPc = (args = {}) => {
                 @input=${handleHandleEvent(args)}
                 @change=${handleHandleEvent(args)}
                 .formatOptions=${{
-        style: 'unit',
-        unit: 'pc',
-    }}
+    style: "unit",
+    unit: "pc"
+  }}
                 ...=${spreadProps(args)}
             >
                 Output Levels
@@ -488,7 +510,7 @@ export const ThreeHandlesPc = (args = {}) => {
     `;
 };
 export const ThreeHandlesOrdered = (args = {}) => {
-    return html `
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="1"
@@ -523,122 +545,90 @@ export const ThreeHandlesOrdered = (args = {}) => {
     `;
 };
 ThreeHandlesOrdered.args = {
-    tickStep: 10,
-};
-// This is a very complex example from an actual application.
-//
-// The first and last handles go from 0 to 255 in a linear fashion.
-// The last and first handles are ordered so that the last handle
-// must be greater than or equal to the first handle.
-//
-// The middle handle's range goes from 9.99 to 0.01, counting down.
-// the middle handle's limits are set by the outer handles such that
-// the position of the left handle is the staring value (9.99) for the
-// middle handle. And the position of the right handle is the end
-// value (0.01). That means that the middle handle will move
-// proportionally as you move the outer handles.
-//
-// The two other interesting features of the middle handle are that
-// it counts down, and that it does so exponentially for the first
-// half of its range.
-//
-// Because the specification for the <input> tag in HTML says that the
-// min should be less than the max, we do a double normalization to make
-// this work. The middle handle is considered to go between 0 and 1,
-// where 0 is the left handle's position and 1 is the right handle's
-// position. We then do the appropriate calculation to convert that
-// value into one between 9.99 and 0.01 for display to the user.
-//
-// One iteresting thing to note is that the normalization function
-// can also be used to enforce clamping.
-//
+  tickStep: 10
+};
 export const ThreeHandlesComplex = (args = {}) => {
-    const values = {
-        black: 50,
-        gray: 4.98,
-        white: 225,
-    };
-    const handleEvent = ({ onInput, onChange }) => (event) => {
-        const target = event.target;
-        if (target.value != null) {
-            if (typeof target.value === 'object') {
-                const value = JSON.stringify(target.value, null, 2);
-                if (onInput && event.type === 'input') {
-                    onInput(value);
-                }
-                else if (onChange && event.type === 'change') {
-                    onChange(value);
-                }
-            }
-            else {
-                const value = `${target.name}: ${target.value}`;
-                if (onInput && event.type === 'input') {
-                    onInput(value);
-                }
-                else if (onChange && event.type === 'change') {
-                    onChange(value);
-                }
-            }
-            values[target.name] = target.value;
-        }
-    };
-    const grayNormalization = {
-        toNormalized(value) {
-            const normalizedBlack = values.black / 255;
-            const normalizedWhite = values.white / 255;
-            const clamped = Math.max(Math.min(value, 1), 0);
-            return (clamped * (normalizedWhite - normalizedBlack) + normalizedBlack);
-        },
-        fromNormalized(value) {
-            const normalizedBlack = values.black / 255;
-            const normalizedWhite = values.white / 255;
-            const clamped = Math.max(Math.min(value, normalizedWhite), normalizedBlack);
-            return ((clamped - normalizedBlack) /
-                (normalizedWhite - normalizedBlack));
-        },
-    };
-    const blackNormalization = {
-        toNormalized(value) {
-            const clamped = Math.min(value, values.white);
-            return clamped / 255;
-        },
-        fromNormalized(value) {
-            const denormalized = value * 255;
-            return Math.min(denormalized, values.white);
-        },
-    };
-    const whiteNormalization = {
-        toNormalized(value) {
-            const clamped = Math.max(value, values.black);
-            return clamped / 255;
-        },
-        fromNormalized(value) {
-            const denormalized = value * 255;
-            return Math.max(denormalized, values.black);
-        },
-    };
-    const computeGray = (value) => {
-        let result = 1.0;
-        if (value > 0.5) {
-            result = Math.max(2 * (1 - value), 0.01);
+  const values = {
+    black: 50,
+    gray: 4.98,
+    white: 225
+  };
+  const handleEvent2 = ({ onInput, onChange }) => (event) => {
+    const target = event.target;
+    if (target.value != null) {
+      if (typeof target.value === "object") {
+        const value = JSON.stringify(target.value, null, 2);
+        if (onInput && event.type === "input") {
+          onInput(value);
+        } else if (onChange && event.type === "change") {
+          onChange(value);
         }
-        else if (value < 0.5) {
-            result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;
+      } else {
+        const value = `${target.name}: ${target.value}`;
+        if (onInput && event.type === "input") {
+          onInput(value);
+        } else if (onChange && event.type === "change") {
+          onChange(value);
         }
-        const formatOptions = {
-            maximumFractionDigits: 2,
-            minimumFractionDigits: 2,
-        };
-        return new Intl.NumberFormat(navigator.language, formatOptions).format(result);
+      }
+      values[target.name] = target.value;
+    }
+  };
+  const grayNormalization = {
+    toNormalized(value) {
+      const normalizedBlack = values.black / 255;
+      const normalizedWhite = values.white / 255;
+      const clamped = Math.max(Math.min(value, 1), 0);
+      return clamped * (normalizedWhite - normalizedBlack) + normalizedBlack;
+    },
+    fromNormalized(value) {
+      const normalizedBlack = values.black / 255;
+      const normalizedWhite = values.white / 255;
+      const clamped = Math.max(Math.min(value, normalizedWhite), normalizedBlack);
+      return (clamped - normalizedBlack) / (normalizedWhite - normalizedBlack);
+    }
+  };
+  const blackNormalization = {
+    toNormalized(value) {
+      const clamped = Math.min(value, values.white);
+      return clamped / 255;
+    },
+    fromNormalized(value) {
+      const denormalized = value * 255;
+      return Math.min(denormalized, values.white);
+    }
+  };
+  const whiteNormalization = {
+    toNormalized(value) {
+      const clamped = Math.max(value, values.black);
+      return clamped / 255;
+    },
+    fromNormalized(value) {
+      const denormalized = value * 255;
+      return Math.max(denormalized, values.black);
+    }
+  };
+  const computeGray = (value) => {
+    let result = 1;
+    if (value > 0.5) {
+      result = Math.max(2 * (1 - value), 0.01);
+    } else if (value < 0.5) {
+      result = ((1 - 2 * value) * (Math.sqrt(9.99) - 1) + 1) ** 2;
+    }
+    const formatOptions = {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2
     };
-    return html `
+    return new Intl.NumberFormat(navigator.language, formatOptions).format(result);
+  };
+  return html`
         <div style="width: 500px; margin: 12px 20px;">
             <sp-slider
                 step="1"
                 min="0"
                 max="255"
-                @input=${handleEvent}
-                @change=${handleEvent}
+                @input=${handleEvent2}
+                @change=${handleEvent2}
                 ...=${spreadProps(args)}
             >
                 Output Levels
@@ -669,14 +659,14 @@ export const ThreeHandlesComplex = (args = {}) => {
     `;
 };
 ThreeHandlesOrdered.args = {
-    tickStep: 10,
+  tickStep: 10
 };
 export const focusTabDemo = (args = {}) => {
-    const value = 50;
-    const min = 0;
-    const max = 100;
-    const step = 1;
-    return html `
+  const value = 50;
+  const min = 0;
+  const max = 100;
+  const step = 1;
+  return html`
         <div style="width: 500px; margin: 12px 20px 20px;">
             <sp-slider
                 value="${value}"
@@ -712,4 +702,4 @@ export const focusTabDemo = (args = {}) => {
         </div>
     `;
 };
-//# sourceMappingURL=slider.stories.js.map
+//# sourceMappingURL=slider.stories.js.map