carbon-custom-elements/es/components/number-input/number-input.js

A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.

let _ = t => t,
    _t,
    _t2,
    _t3,
    _t4,
    _t5,
    _t6;

function _decorate(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements(r.d.map(_createElementDescriptor)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }

function _getDecoratorsApi() { _getDecoratorsApi = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }

function _createElementDescriptor(def) { var key = _toPropertyKey(def.key); var descriptor; if (def.kind === "method") { descriptor = { value: def.value, writable: true, configurable: true, enumerable: false }; } else if (def.kind === "get") { descriptor = { get: def.value, configurable: true, enumerable: false }; } else if (def.kind === "set") { descriptor = { set: def.value, configurable: true, enumerable: false }; } else if (def.kind === "field") { descriptor = { configurable: true, writable: true, enumerable: true }; } var element = { kind: def.kind === "field" ? "field" : "method", key: key, placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", descriptor: descriptor }; if (def.decorators) element.decorators = def.decorators; if (def.kind === "field") element.initializer = def.value; return element; }

function _coalesceGetterSetter(element, other) { if (element.descriptor.get !== undefined) { other.descriptor.get = element.descriptor.get; } else { other.descriptor.set = element.descriptor.set; } }

function _coalesceClassElements(elements) { var newElements = []; var isSameElement = function isSameElement(other) { return other.kind === "method" && other.key === element.key && other.placement === element.placement; }; for (var i = 0; i < elements.length; i++) { var element = elements[i]; var other; if (element.kind === "method" && (other = newElements.find(isSameElement))) { if (_isDataDescriptor(element.descriptor) || _isDataDescriptor(other.descriptor)) { if (_hasDecorators(element) || _hasDecorators(other)) { throw new ReferenceError("Duplicated methods (" + element.key + ") can't be decorated."); } other.descriptor = element.descriptor; } else { if (_hasDecorators(element)) { if (_hasDecorators(other)) { throw new ReferenceError("Decorators can't be placed on different accessors with for " + "the same property (" + element.key + ")."); } other.decorators = element.decorators; } _coalesceGetterSetter(element, other); } } else { newElements.push(element); } } return newElements; }

function _hasDecorators(element) { return element.decorators && element.decorators.length; }

function _isDataDescriptor(desc) { return desc !== undefined && !(desc.value === undefined && desc.writable === undefined); }

function _optionalCallableProperty(obj, name) { var value = obj[name]; if (value !== undefined && typeof value !== "function") { throw new TypeError("Expected '" + name + "' to be a function"); } return value; }

function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }

function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }

function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }

function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

/**
 * @license
 *
 * Copyright IBM Corp. 2019, 2020
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import { customElement, html, property, query } from 'lit-element';
import { classMap } from 'lit-html/directives/class-map';
import settings from 'carbon-components/es/globals/js/settings';
import WarningFilled16 from "../../icons/warning--filled/16";
import CaretUp16 from "../../icons/caret--up/16";
import CaretDown16 from "../../icons/caret--down/16";
import { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';
import ifNonEmpty from '../../globals/directives/if-non-empty';
import styles from "./number-input.css.js";
import BXInput, { INPUT_SIZE } from '../input/input';
export { FORM_ELEMENT_COLOR_SCHEME as NUMBER_INPUT_COLOR_SCHEME } from '../../globals/shared-enums';
const {
  prefix
} = settings;
/**
 * Works in conjunction with VALIDATION_STATUS
 */

export let NUMBER_INPUT_VALIDATION_STATUS;
/**
 * Number input.
 * @element bx-number-input
 * @slot helper-text - The helper text.
 * @slot label-text - The label text.
 * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
 */

(function (NUMBER_INPUT_VALIDATION_STATUS) {
  NUMBER_INPUT_VALIDATION_STATUS["EXCEEDED_MAXIMUM"] = "exceeded_maximum";
  NUMBER_INPUT_VALIDATION_STATUS["EXCEEDED_MINIMUM"] = "exceeded_minimum";
})(NUMBER_INPUT_VALIDATION_STATUS || (NUMBER_INPUT_VALIDATION_STATUS = {}));

let BXNumberInput = _decorate([customElement(`${prefix}-number-input`)], function (_initialize, _BXInput) {
  class BXNumberInput extends _BXInput {
    constructor(...args) {
      super(...args);

      _initialize(this);
    }

  }

  return {
    F: BXNumberInput,
    d: [{
      kind: "field",
      decorators: [query('input')],
      key: "_input",
      value: void 0
    }, {
      kind: "method",
      key: "_testValidity",
      value:
      /**
       * The underlying input element
       */
      function _testValidity() {
        var _this$_input, _this$_input2;

        if (((_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.valueAsNumber) > Number(this.max)) {
          return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM;
        }

        if (((_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.valueAsNumber) < Number(this.min)) {
          return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;
        }

        return _get(_getPrototypeOf(BXNumberInput.prototype), "_testValidity", this).call(this);
      }
    }, {
      kind: "method",
      key: "_getValidityMessage",
      value: function _getValidityMessage(state) {
        if (Object.values(NUMBER_INPUT_VALIDATION_STATUS).includes(state)) {
          const stateMessageMap = {
            [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM]: this.validityMessageMax,
            [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM]: this.validityMessageMin
          };
          return stateMessageMap[state];
        }

        return _get(_getPrototypeOf(BXNumberInput.prototype), "_getValidityMessage", this).call(this, state);
      }
    }, {
      kind: "field",
      key: "_min",

      value() {
        return '';
      }

    }, {
      kind: "field",
      key: "_max",

      value() {
        return '';
      }

    }, {
      kind: "field",
      key: "_step",

      value() {
        return '1';
      }

    }, {
      kind: "field",
      key: "_value",

      value() {
        return '';
      }

    }, {
      kind: "field",
      decorators: [property({
        attribute: 'color-scheme',
        reflect: true
      })],
      key: "colorScheme",

      value() {
        return FORM_ELEMENT_COLOR_SCHEME.REGULAR;
      }

    }, {
      kind: "get",
      decorators: [property({
        reflect: true
      })],
      key: "min",
      value:
      /**
       * The color scheme.
       */

      /**
       * The minimum value allowed in the input
       */
      function min() {
        return this._min.toString();
      }
    }, {
      kind: "set",
      key: "min",
      value: function min(value) {
        const oldValue = this.min;
        this._min = value;
        this.requestUpdate('min', oldValue);
      }
      /**
       * The maximum value allowed in the input
       */

    }, {
      kind: "get",
      decorators: [property({
        reflect: true
      })],
      key: "max",
      value: function max() {
        return this._max.toString();
      }
    }, {
      kind: "set",
      key: "max",
      value: function max(value) {
        const oldValue = this.max;
        this._max = value;
        this.requestUpdate('max', oldValue);
      }
      /**
       * The amount the value should increase or decrease by
       */

    }, {
      kind: "get",
      decorators: [property({
        reflect: true
      })],
      key: "step",
      value: function step() {
        return this._step.toString();
      }
    }, {
      kind: "set",
      key: "step",
      value: function step(value) {
        const oldValue = this.step;
        this._step = value;
        this.requestUpdate('step', oldValue);
      }
      /**
       * The value of the input.
       */

    }, {
      kind: "get",
      decorators: [property({
        reflect: true
      })],
      key: "value",
      value: function value() {
        // once we have the input we can directly query for the value
        if (this._input) {
          return this._input.value;
        } // but before then _value will work fine


        return this._value;
      }
    }, {
      kind: "set",
      key: "value",
      value: function value(_value) {
        const oldValue = this._value;
        this._value = _value; // make sure that lit-element updates the right properties

        this.requestUpdate('value', oldValue); // we set the value directly on the input (when available)
        // so that programatic manipulation updates the UI correctly

        if (this._input) {
          this._input.value = _value;
        }
      }
      /**
       * Set to `true` to enable the mobile variant of the number input
       */

    }, {
      kind: "field",
      decorators: [property({
        type: Boolean,
        reflect: true
      })],
      key: "mobile",

      value() {
        return false;
      }

    }, {
      kind: "field",
      decorators: [property({
        attribute: 'increment-button-assistive-text'
      })],
      key: "incrementButtonAssistiveText",

      value() {
        return 'increase number input';
      }

    }, {
      kind: "field",
      decorators: [property({
        attribute: 'decrement-button-assistive-text'
      })],
      key: "decrementButtonAssistiveText",

      value() {
        return 'decrease number input';
      }

    }, {
      kind: "field",
      decorators: [property({
        reflect: true
      })],
      key: "size",

      value() {
        return INPUT_SIZE.REGULAR;
      }

    }, {
      kind: "field",
      decorators: [property({
        attribute: 'validity-message-max'
      })],
      key: "validityMessageMax",

      value() {
        return '';
      }

    }, {
      kind: "field",
      decorators: [property({
        attribute: 'validity-message-min'
      })],
      key: "validityMessageMin",

      value() {
        return '';
      }

    }, {
      kind: "method",
      key: "stepUp",
      value:
      /**
       * Aria text for the button that increments the value
       */

      /**
       * Aria text for the button that decrements the value
       */

      /**
       * The input box size.
       */

      /**
       * The validity message shown when the value is greater than the maximum
       *
       * Also available via the `validity-message-max` slot
       */

      /**
       * The validity message shown when the value is less than the minimum
       *
       * Also available via the `validity-message-min` slot
       */

      /**
       * Handles incrementing the value in the input
       */
      function stepUp() {
        this._input.stepUp();
      }
      /**
       * Handles decrementing the value in the input
       */

    }, {
      kind: "method",
      key: "stepDown",
      value: function stepDown() {
        this._input.stepDown();
      }
    }, {
      kind: "method",
      key: "createRenderRoot",
      value: function createRenderRoot() {
        return this.attachShadow({
          mode: 'open',
          delegatesFocus: true
        });
      }
    }, {
      kind: "method",
      key: "render",
      value: function render() {
        const {
          _handleInput: handleInput
        } = this;
        const invalidIcon = WarningFilled16({
          class: `${prefix}--number__invalid`
        });

        const validity = this._testValidity();

        const isGenericallyInvalid = () => this.invalid && validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM && validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;

        const wrapperClasses = classMap({
          [`${prefix}--number`]: true,
          [`${prefix}--number--${this.colorScheme}`]: this.colorScheme,
          [`${prefix}--number--mobile`]: this.mobile,
          [`${prefix}--number--${this.size}`]: this.size
        });
        const labelClasses = classMap({
          [`${prefix}--label`]: true,
          [`${prefix}--label--disabled`]: this.disabled
        });
        const helperTextClasses = classMap({
          [`${prefix}--form__helper-text`]: true,
          [`${prefix}--form__helper-text--disabled`]: this.disabled
        });
        const incrementButton = html(_t || (_t = _`
      <button
        class="${0}--number__control-btn up-icon"
        aria-label="${0}"
        aria-live="polite"
        aria-atomic="true"
        type="button"
        ?disabled=${0}
        @click=${0}
      >
        ${0}
      </button>
    `), prefix, this.incrementButtonAssistiveText, this.disabled, this.stepUp, CaretUp16());
        const decrementButton = html(_t2 || (_t2 = _`
      <button
        class="${0}--number__control-btn down-icon"
        aria-label="${0}"
        aria-live="polite"
        aria-atomic="true"
        type="button"
        ?disabled=${0}
        @click=${0}
      >
        ${0}
      </button>
    `), prefix, this.decrementButtonAssistiveText, this.disabled, this.stepDown, CaretDown16());
        const input = html(_t3 || (_t3 = _`
      <input
        ?autocomplete="${0}"
        ?autofocus="${0}"
        ?data-invalid="${0}"
        ?disabled="${0}"
        id="input"
        name="${0}"
        pattern="${0}"
        placeholder="${0}"
        ?readonly="${0}"
        ?required="${0}"
        type="number"
        .value="${0}"
        @input="${0}"
        min="${0}"
        max="${0}"
        step="${0}"
        role="alert"
        aria-atomic="true"
      />
    `), this.autocomplete, this.autofocus, this.invalid, this.disabled, ifNonEmpty(this.name), ifNonEmpty(this.pattern), ifNonEmpty(this.placeholder), this.readonly, this.required, this._value, handleInput, ifNonEmpty(this.min), ifNonEmpty(this.max), ifNonEmpty(this.step));
        const defaultLayout = html(_t4 || (_t4 = _`
      ${0} ${0}
      <div class="${0}--number__controls">
        ${0} ${0}
      </div>
    `), this.invalid ? invalidIcon : null, input, prefix, incrementButton, decrementButton);
        const mobileLayout = html(_t5 || (_t5 = _`
      ${0} ${0} ${0}
    `), decrementButton, input, incrementButton);
        return html(_t6 || (_t6 = _`
      <div class="${0}" ?data-invalid=${0}>
        <label class="${0}" for="input">
          <slot name="label-text">
            ${0}
          </slot>
        </label>
        <div class="${0}">
          <slot name="helper-text">
            ${0}
          </slot>
        </div>
        <div class="${0}--number__input-wrapper">
          ${0}
        </div>
        <div class="${0}--form-requirement" ?hidden="${0}">
          <slot name="validity-message">
            ${0}
          </slot>
        </div>
        <div class="${0}--form-requirement" ?hidden="${0}">
          <slot name="validity-message-max">
            ${0}
          </slot>
        </div>
        <div class="${0}--form-requirement" ?hidden="${0}">
          <slot name="validity-message-min">
            ${0}
          </slot>
        </div>
      </div>
    `), wrapperClasses, this.invalid, labelClasses, this.labelText, helperTextClasses, this.helperText, prefix, this.mobile ? mobileLayout : defaultLayout, prefix, !isGenericallyInvalid(), this.validityMessage, prefix, validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM, this.validityMessageMax, prefix, validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM, this.validityMessageMin);
      }
    }, {
      kind: "field",
      static: true,
      key: "styles",

      value() {
        return styles;
      }

    }]
  };
}, BXInput);

export { BXNumberInput as default };
//# sourceMappingURL=number-input.js.map