ember-primitives 0.61.1 → 0.63.0

package/dist/rating-BrIiwDLw.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"rating-BrIiwDLw.js","sources":["../src/components/rating/range.gts","../src/components/rating/utils.ts","../src/components/rating/stars.gts","../src/components/rating/state.gts","../src/components/rating/rating.gts"],"sourcesContent":["import { on } from \"@ember/modifier\";\n\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const RatingRange: TOC<{\n  Element: HTMLInputElement;\n  Args: {\n    name: string;\n    max: number;\n    value: number;\n    handleChange: (event: Event) => void;\n  };\n}> = <template>\n  <input\n    ...attributes\n    name={{@name}}\n    type=\"range\"\n    max={{@max}}\n    value={{@value}}\n    {{on \"change\" @handleChange}}\n  />\n</template>;\n","export function isString(x: unknown) {\n  return typeof x === 'string';\n}\n\nexport function lte(a: number, b: number) {\n  return a <= b;\n}\n","import { uniqueId } from \"../../utils.ts\";\nimport { isString, lte } from \"./utils.ts\";\n\nimport type { ComponentIcons, StringIcons } from \"./public-types.ts\";\nimport type { TOC } from \"@ember/component/template-only\";\n\nexport const Stars: TOC<{\n  Args: {\n    // Configuration\n    stars: number[];\n    icon: StringIcons[\"icon\"] | ComponentIcons[\"icon\"];\n    isReadonly: boolean;\n\n    // HTML Boilerplate\n    name: string;\n\n    // State\n    currentValue: number;\n    total: number;\n  };\n}> = <template>\n  <div class=\"ember-primitives__rating__items\">\n    {{#each @stars as |star|}}\n      {{#let (uniqueId) as |id|}}\n        <span\n          class=\"ember-primitives__rating__item\"\n          data-number={{star}}\n          data-selected={{lte star @currentValue}}\n          data-readonly={{@isReadonly}}\n        >\n          <label for=\"input-{{id}}\">\n            <span visually-hidden>{{star}} star</span>\n            {{#if @icon}}\n              <span aria-hidden=\"true\">\n                {{#if (isString @icon)}}\n                  {{@icon}}\n                {{else}}\n                  <@icon\n                    @value={{star}}\n                    @isSelected={{lte star @currentValue}}\n                    @readonly={{@isReadonly}}\n                  />\n                {{/if}}\n              </span>\n            {{/if}}\n          </label>\n\n          <input\n            id=\"input-{{id}}\"\n            type=\"radio\"\n            name={{@name}}\n            value={{star}}\n            readonly={{@isReadonly}}\n            checked={{Object.is star @currentValue}}\n          />\n        </span>\n      {{/let}}\n    {{/each}}\n  </div>\n</template>;\n","import Component from \"@glimmer/component\";\nimport { cached } from \"@glimmer/tracking\";\nimport { assert } from \"@ember/debug\";\nimport { hash } from \"@ember/helper\";\n\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-expect-error\nimport { localCopy } from \"tracked-toolbox\";\n\nexport class RatingState extends Component<{\n  Args: {\n    max: number | undefined;\n    value: number | undefined;\n    step: number | undefined;\n    readonly: boolean | undefined;\n    name: string;\n    onChange?: (value: number) => void;\n  };\n  Blocks: {\n    default: [\n      internalApi: {\n        stars: number[];\n        step: number;\n        value: number;\n        total: number;\n        handleClick: (event: Event) => void;\n        handleChange: (event: Event) => void;\n        setRating: (num: number) => void;\n      },\n      publicApi: {\n        value: number;\n        total: number;\n      },\n    ];\n  };\n}> {\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-call\n  @localCopy(\"args.value\") declare _value: number;\n\n  get value() {\n    return this._value ?? 0;\n  }\n\n  get step() {\n    return this.args.step ?? 1;\n  }\n\n  get max() {\n    return this.args.max ?? 5;\n  }\n\n  @cached\n  get stars() {\n    const result = [];\n\n    // 0 is \"none selected\"\n    let current = 0;\n\n    current += this.step;\n\n    while (current <= this.max) {\n      result.push(current);\n      current += this.step;\n    }\n\n    return result;\n  }\n\n  setRating = (value: number) => {\n    if (this.args.readonly) {\n      return;\n    }\n\n    if (value === this._value) {\n      this._value = 0;\n    } else {\n      this._value = value;\n    }\n\n    this.args.onChange?.(value);\n  };\n\n  setFromString = (value: unknown) => {\n    assert(\"[BUG]: value from input must be a string.\", typeof value === \"string\");\n\n    const num = parseFloat(value);\n\n    if (isNaN(num)) {\n      // something went wrong.\n      // Since we're using event delegation,\n      // this could be from an unrelated input\n      return;\n    }\n\n    this.setRating(num);\n  };\n\n  /**\n   * Click events are captured by\n   * - radio changes (mouse and keyboard)\n   *   - but only range clicks\n   */\n  handleClick = (event: Event) => {\n    // Since we're doing event delegation on a click, we want to make sure\n    // we don't do anything on other elements\n    const isValid =\n      event.target instanceof HTMLInputElement &&\n      event.target.name === this.args.name &&\n      event.target.type === \"radio\";\n\n    if (!isValid) return;\n\n    const selected = event.target?.value;\n\n    this.setFromString(selected);\n  };\n\n  /**\n   * Only attached to a range element, if present.\n   * Range elements don't fire click events on keyboard usage, like radios do\n   */\n  handleChange = (event: Event) => {\n    const isValid = event.target !== null && \"value\" in event.target;\n\n    if (!isValid) return;\n\n    this.setFromString(event.target.value);\n  };\n\n  <template>\n    {{yield\n      (hash\n        stars=this.stars\n        total=this.stars.length\n        handleClick=this.handleClick\n        handleChange=this.handleChange\n        setRating=this.setRating\n        value=this.value\n        step=this.step\n      )\n      (hash total=this.stars.length value=this.value)\n    }}\n  </template>\n}\n","import Component from \"@glimmer/component\";\nimport { hash } from \"@ember/helper\";\nimport { on } from \"@ember/modifier\";\n\nimport { uniqueId } from \"../../utils.ts\";\nimport { RatingRange } from \"./range.gts\";\nimport { Stars } from \"./stars.gts\";\nimport { RatingState } from \"./state.gts\";\n\nimport type { ComponentIcons, StringIcons } from \"./public-types.ts\";\nimport type { WithBoundArgs } from \"@glint/template\";\n\nexport interface Signature {\n  /*\n   * The element all passed attributes / modifiers are applied to.\n   *\n   * This is a `<fieldset>`, becaues the rating elements are\n   * powered by a group of radio buttons.\n   */\n  Element: HTMLFieldSetElement;\n  Args: (ComponentIcons | StringIcons) & {\n    /**\n     * The number of stars/whichever-icon to show\n     *\n     * Defaults to 5\n     */\n    max?: number;\n\n    /**\n     * The current number of stars/whichever-icon to show as selected\n     *\n     * Defaults to 0\n     */\n    value?: number;\n\n    /**\n     * When generating the radio inputs, this changes what value of rating each radio\n     * input will be incremented by.\n     *\n     * e.g.: Set to 0.5 for half-star ratings.\n     *\n     * Defaults to 1\n     */\n    step?: number;\n\n    /**\n     * Prevents click events on the icons and sets aria-readonly.\n     *\n     * Also sets data-readonly=true on the wrapping element\n     */\n    readonly?: boolean;\n\n    /**\n     * Toggles the ability to interact with the rating component.\n     * When `true` (the default), the Rating component can be as a form input\n     * to gather user feedback.\n     *\n     * When false, only the `@value` will be shown, and it cannot be changed.\n     */\n    interactive?: boolean;\n\n    /**\n     * Callback when the selected rating changes.\n     * Can include half-ratings if the iconHalf argument is passed.\n     */\n    onChange?: (value: number) => void;\n  };\n\n  Blocks: {\n    default: [\n      rating: {\n        /**\n         * The maximum rating\n         */\n        max: number;\n        /**\n         * The maxium rating\n         */\n        total: number;\n        /**\n         * The current rating\n         */\n        value: number;\n        /**\n         * The name shared by the field group\n         */\n        name: string;\n        /**\n         * If the rating can be changed\n         */\n        isReadonly: boolean;\n        /**\n         * If the rating can be changed\n         */\n        isChangeable: boolean;\n        /**\n         * The stars / items radio group\n         */\n        Stars: WithBoundArgs<\n          typeof Stars,\n          \"stars\" | \"icon\" | \"isReadonly\" | \"name\" | \"total\" | \"currentValue\"\n        >;\n        /**\n         * Input range for adjusting the rating via fractional means\n         */\n        Range: WithBoundArgs<typeof RatingRange, \"max\" | \"value\" | \"name\" | \"handleChange\">;\n      },\n    ];\n    label: [\n      state: {\n        /**\n         * The current rating\n         */\n        value: number;\n\n        /**\n         * The maximum rating\n         */\n        total: number;\n      },\n    ];\n  };\n}\n\nexport class Rating extends Component<Signature> {\n  name = `rating-${uniqueId()}`;\n\n  get icon() {\n    return this.args.icon ?? \"★\";\n  }\n\n  get isInteractive() {\n    return this.args.interactive ?? true;\n  }\n\n  get isChangeable() {\n    const readonly = this.args.readonly ?? false;\n\n    return !readonly && this.isInteractive;\n  }\n\n  get isReadonly() {\n    return !this.isChangeable;\n  }\n\n  get needsDescription() {\n    return !this.isInteractive;\n  }\n\n  <template>\n    <RatingState\n      @max={{@max}}\n      @step={{@step}}\n      @value={{@value}}\n      @name={{this.name}}\n      @readonly={{this.isReadonly}}\n      @onChange={{@onChange}}\n      as |r publicState|\n    >\n      <fieldset\n        class=\"ember-primitives__rating\"\n        data-total={{r.total}}\n        data-value={{r.value}}\n        data-readonly={{this.isReadonly}}\n        {{! We use event delegation, this isn't a primary interactive -- we're capturing events from inputs }}\n        {{! template-lint-disable no-invalid-interactive }}\n        {{on \"click\" r.handleClick}}\n        ...attributes\n      >\n        {{#let\n          (component\n            Stars\n            stars=r.stars\n            icon=this.icon\n            isReadonly=this.isReadonly\n            name=this.name\n            total=r.total\n            currentValue=r.value\n          )\n          as |RatingStars|\n        }}\n\n          {{#if (has-block)}}\n            {{yield\n              (hash\n                max=r.total\n                total=r.total\n                value=r.value\n                name=this.name\n                isReadonly=this.isReadonly\n                isChangeable=this.isChangeable\n                Stars=RatingStars\n                Range=(component\n                  RatingRange\n                  step=r.step\n                  max=r.total\n                  value=r.value\n                  name=this.name\n                  handleChange=r.handleChange\n                )\n              )\n            }}\n          {{else}}\n            {{#if this.needsDescription}}\n              {{#if (has-block \"label\")}}\n                {{yield publicState to=\"label\"}}\n              {{else}}\n                <span visually-hidden class=\"ember-primitives__rating__label\">Rated\n                  {{r.value}}\n                  out of\n                  {{r.total}}</span>\n              {{/if}}\n            {{else}}\n              {{#if (has-block \"label\")}}\n                <legend>\n                  {{yield publicState to=\"label\"}}\n                </legend>\n              {{/if}}\n            {{/if}}\n\n            <RatingStars />\n          {{/if}}\n        {{/let}}\n\n      </fieldset>\n    </RatingState>\n  </template>\n}\n"],"names":["RatingRange","setComponentTemplate","precompileTemplate","strictMode","scope","on","templateOnly","isString","x","lte","a","b","Stars","uniqueId","Object","RatingState","Component","localCopy","i","value","_value","step","args","max","stars","result","current","push","n","prototype","cached","setRating","readonly","onChange","setFromString","assert","num","parseFloat","isNaN","handleClick","event","isValid","target","HTMLInputElement","name","type","selected","handleChange","hash","Rating","icon","isInteractive","interactive","isChangeable","isReadonly","needsDescription"],"mappings":"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"}