carbon-custom-elements/es/components/date-picker/date-picker-input.d.ts.map

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

{"version":3,"sources":["components/date-picker/date-picker-input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAwC,UAAU,EAAE,MAAM,aAAa,CAAC;AAG/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAIvE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,yBAAyB,IAAI,8BAA8B,EAAE,MAAM,4BAA4B,CAAC;AAIzG;;GAEG;AACH,oBAAY,sBAAsB;IAChC;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,IAAI,SAAS;IAEb;;OAEG;IACH,EAAE,OAAO;CACV;AAED;;GAEG;AACH,oBAAY,iCAAiC;IAC3C;;OAEG;IACH,OAAO,KAAK;IAEZ;;OAEG;IACH,KAAK,UAAU;CAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAED;;;GAGG;AACH,cACM,iBAAkB,SAAQ,sBAAqC;IACnE;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAmB;IAE/C;;OAEG;IACH,OAAO,KAAK,mBAAmB,GAG9B;IAED;;OAEG;IACH,OAAO,CAAC,gCAAgC;IAIxC;;;OAGG;IACH,OAAO,CAAC,YAAY;IAKpB;;OAEG;IACH,OAAO,CAAC,WAAW;IAcnB;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAa9B;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,IAAI,yBAAiC;IAErC;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,OAAO,EAAG,MAAM,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAG,MAAM,CAAC;IAErB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,uBAAuB,SAAiC;IAExD;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;;OAGG;IAEH,cAAc,oCAA6C;IAE3D;;OAEG;IAEH,IAAI,EAAG,MAAM,CAAC;IAEd;;;OAGG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,gBAAgB;IAIhB,MAAM;IA6CN;;OAEG;IACH,MAAM,CAAC,cAAc,SAAkC;IAEvD;;OAEG;IACH,MAAM,CAAC,WAAW,SAAU;IAE5B;;OAEG;IACH,MAAM,KAAK,cAAc,WAExB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,iBAAiB,CAAC","file":"date-picker-input.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit-html/directives/class-map';\nimport { html, property, query, customElement, LitElement } from 'lit-element';\nimport Calendar16 from '@carbon/icons/lib/calendar/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';\nimport ifNonNull from '../../globals/directives/if-non-null';\nimport FocusMixin from '../../globals/mixins/focus';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { INPUT_SIZE } from '../input/input';\nimport styles from './date-picker.scss';\n\nexport { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\nconst { prefix } = settings;\n\n/**\n * Date picker input kinds.\n */\nexport enum DATE_PICKER_INPUT_KIND {\n  /**\n   * One for simple variant of date picker, comes without the calendar dropdown.\n   */\n  SIMPLE = 'simple',\n\n  /**\n   * One for single variant of date picker.\n   */\n  SINGLE = 'single',\n\n  /**\n   * One for the start date for the range variant.\n   */\n  FROM = 'from',\n\n  /**\n   * One for the end date for the range variant.\n   */\n  TO = 'to',\n}\n\n/**\n * Horizontal size, applicable only to the simple variant.\n */\nexport enum DATE_PICKER_INPUT_SIZE_HORIZONTAL {\n  /**\n   * Regular size.\n   */\n  REGULAR = '',\n\n  /**\n   * Short size.\n   */\n  SHORT = 'short',\n}\n\n/**\n * The input box for date picker.\n * @element bx-date-picker-input\n */\n@customElement(`${prefix}-date-picker-input`)\nclass BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {\n  /**\n   * The `<slot>` for the validity message.\n   */\n  @query('slot[name=\"validity-message\"]')\n  private _slotValidityMessage!: HTMLSlotElement;\n\n  /**\n   * `true` if validity message is given via `validityMessage` property or via `<slot name=\"validity-message\">`.\n   */\n  private get _hasValidityMessage() {\n    const { validityMessage, _slotValidityMessage: slotValidityMessage } = this;\n    return validityMessage || (slotValidityMessage && slotValidityMessage.assignedNodes.length > 0);\n  }\n\n  /**\n   * Handles `slotchange` event on `<slot name=\"validity-message\">`.\n   */\n  private _handleSlotChangeValidityMessage() {\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `input` event on `<input>` in the shadow DOM.\n   * @param event The event.\n   */\n  private _handleInput({ target }: Event) {\n    const { value } = target as HTMLInputElement;\n    this.value = value;\n  }\n\n  /**\n   * @returns The template for the the calendar icon.\n   */\n  private _renderIcon() {\n    return this.kind === DATE_PICKER_INPUT_KIND.SIMPLE\n      ? undefined\n      : Calendar16({\n          class: `${prefix}--date-picker__icon`,\n          role: 'img',\n          children: [\n            html`\n              <title>Open calendar</title>\n            `,\n          ],\n        });\n  }\n\n  /**\n   * @returns The template for the the validity message.\n   */\n  private _renderValidityMessage() {\n    const {\n      validityMessage,\n      _hasValidityMessage: hasValidityMessage,\n      _handleSlotChangeValidityMessage: handleSlotChangeValidityMessage,\n    } = this;\n    return html`\n      <div ?hidden=\"${!hasValidityMessage}\" class=\"${prefix}--form-requirement\">\n        <slot name=\"validity-message\" @slotchange=\"${handleSlotChangeValidityMessage}\">${validityMessage}</slot>\n      </div>\n    `;\n  }\n\n  /**\n   * The `<input>`, used for Flatpickr to grab.\n   */\n  @query('input')\n  input!: HTMLInputElement;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if the check box should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the label should be hidden.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Date picker input kind.\n   */\n  @property({ reflect: true })\n  kind = DATE_PICKER_INPUT_KIND.SIMPLE;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText!: string;\n\n  /**\n   * The `pattern` attribute for the `<input>` in the shadow DOM.\n   */\n  @property()\n  pattern!: string;\n\n  /**\n   * The placeholder text.\n   */\n  @property()\n  placeholder!: string;\n\n  /**\n   * `true` if the value is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * Vertical size of this date picker input.\n   */\n  @property({ attribute: 'size', reflect: true })\n  size = INPUT_SIZE.REGULAR;\n\n  /**\n   * Horizontal size of this date picker input.\n   * Effective only when `kind` property is `DATE_PICKER_INPUT_KIND.SIMPLE`.\n   */\n  @property({ attribute: 'size-horizontal', reflect: true })\n  sizeHorizontal = DATE_PICKER_INPUT_SIZE_HORIZONTAL.REGULAR;\n\n  /**\n   * The `type` attribute for the `<input>` in the shadow DOM.\n   */\n  @property()\n  type!: string;\n\n  /**\n   * The validity message.\n   * If present and non-empty, this date picker input shows the UI of its invalid state.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value.\n   */\n  @property()\n  value!: string;\n\n  createRenderRoot() {\n    return this.attachShadow({ mode: 'open', delegatesFocus: true });\n  }\n\n  render() {\n    const constructor = this.constructor as typeof BXDatePickerInput;\n    const {\n      disabled,\n      hideLabel,\n      invalid,\n      labelText,\n      pattern = constructor.defaultPattern,\n      placeholder,\n      size,\n      type = constructor.defaultType,\n      value,\n      _handleInput: handleInput,\n    } = this;\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: hideLabel,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const inputClasses = classMap({\n      [`${prefix}--date-picker__input`]: true,\n      [`${prefix}--date-picker__input--${size}`]: size,\n    });\n    return html`\n      <label for=\"input\" class=\"${labelClasses}\">\n        <slot name=\"label-text\">${labelText}</slot>\n      </label>\n      <div class=\"${prefix}--date-picker-input__wrapper\">\n        <input\n          id=\"input\"\n          type=\"${type}\"\n          class=\"${inputClasses}\"\n          ?disabled=\"${disabled}\"\n          pattern=\"${pattern}\"\n          placeholder=\"${ifNonNull(placeholder)}\"\n          .value=\"${ifNonNull(value)}\"\n          ?data-invalid=\"${invalid}\"\n          @input=\"${handleInput}\"\n        />\n        ${this._renderIcon()}\n      </div>\n      ${this._renderValidityMessage()}\n    `;\n  }\n\n  /**\n   * The default value for `pattern` property.\n   */\n  static defaultPattern = '\\\\d{1,2}\\\\/\\\\d{1,2}\\\\/\\\\d{4}';\n\n  /**\n   * The default value for `type` property.\n   */\n  static defaultType = 'text';\n\n  /**\n   * A selector that will return the parent date picker.\n   */\n  static get selectorParent() {\n    return `${prefix}-date-picker`;\n  }\n\n  static styles = styles;\n}\n\nexport default BXDatePickerInput;\n"]}