@getflip/swirl-components 0.3.0 → 0.4.0

package/dist/swirl-components/p-bc94ecde.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["src/components/flip-text-input/flip-text-input.css?tag=flip-text-input&encapsulation=scoped","src/components/flip-text-input/flip-text-input.tsx"],"names":["flipTextInputCss","FlipTextInput","[object Object]","hostRef","this","autoComplete","clearButtonLabel","rows","passwordToggleLabel","type","showPassword","clear","inputEl","value","valueChange","emit","focus","onChange","event","el","target","onFocus","handleAutoSelect","onInput","onKeyPress","includes","key","preventDefault","decreaseValue","step","currentValue","isNaN","valueAsNumber","min","undefined","String","Math","max","Infinity","increaseValue","togglePassword","adjustInputSize","style","width","height","scrollHeight","scrollWidth","autoSelect","select","Tag","ariaInvalid","invalid","showStepper","disabled","showPasswordToggle","showClearButton","clearable","Boolean","showCharacterCounter","className","classnames","text-input--clearable","text-input--disabled","text-input--show-password","h","Host","class","prefixLabel","aria-describedby","flipAriaDescribedby","aria-disabled","aria-invalid","autoFocus","inputMode","mode","maxLength","ref","required","spellcheck","spellCheck","suffixLabel","aria-label","onClick","aria-hidden","tabIndex","_a","length"],"mappings":"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","sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.text-input {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: var(--s-text-default);\n  font: inherit;\n  line-height: var(--s-line-height-sm);\n}\n\n.text-input--clearable {\n  padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--type-number {\n  padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--show-password {\n  & .text-input__input {\n    width: 100%;\n  }\n}\n\n.text-input--disabled {\n  & .text-input__character-counter {\n    color: var(--s-text-disabled);\n  }\n}\n\n.text-input__input {\n  display: inline-flex;\n  width: 100%;\n  max-height: 13.75rem;\n  margin: 0;\n  padding: 0;\n  border: none;\n  color: var(--s-text-default);\n  background-color: transparent;\n  font: inherit;\n  font-size: var(--s-font-size-base);\n  line-height: var(--s-line-height-base);\n  resize: none;\n  caret-color: var(--s-border-highlight);\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    color: var(--s-text-disabled);\n    background-color: transparent;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n}\n\ninput.text-input__input:not([type=\"password\"]) {\n  width: 0.25rem;\n  min-width: 0.25rem;\n}\n\n.text-input__clear-button,\n.text-input__password-toggle {\n  position: absolute;\n  top: calc(-1 * var(--s-space-12));\n  right: 0;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  color: var(--s-icon-default);\n  background-color: transparent;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.text-input__stepper {\n  position: absolute;\n  top: -1.4375rem;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.text-input__step-button {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  color: var(--s-icon-default);\n  background-color: transparent;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.text-input__character-counter {\n  position: absolute;\n  top: -1.375rem;\n  right: 0;\n  display: flex;\n  color: var(--s-text-subdued);\n  line-height: var(--s-line-height-sm);\n  flex-direction: column;\n}\n\n.text-input__prefix {\n  padding-right: var(--s-space-4);\n  font-size: var(--s-font-size-base);\n}\n\n.text-input__suffix {\n  padding-left: var(--s-space-4);\n  font-size: var(--s-font-size-base);\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\nexport type FlipTextInputType =\n  | \"date\"\n  | \"datetime-local\"\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"reset\"\n  | \"tel\"\n  | \"text\"\n  | \"url\";\n\nexport type FlipTextInputMode =\n  | \"decimal\"\n  | \"email\"\n  | \"numeric\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-text-input.css\",\n  tag: \"flip-text-input\",\n})\nexport class FlipTextInput implements FlipFormInput {\n  @Prop() autoComplete?: string = \"on\";\n  @Prop() autoFocus?: boolean;\n  @Prop() autoSelect?: boolean;\n  @Prop() clearable?: boolean;\n  @Prop() clearButtonLabel?: string = \"Clear input\";\n  @Prop() disabled?: boolean;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() invalid?: boolean;\n  @Prop() maxLength?: number;\n  @Prop() max?: number;\n  @Prop() min?: number;\n  @Prop() mode?: FlipTextInputMode;\n  @Prop() prefixLabel?: string;\n  @Prop() required?: boolean;\n  @Prop() rows?: number = 1;\n  @Prop() showCharacterCounter?: boolean;\n  @Prop() spellCheck?: boolean;\n  @Prop() suffixLabel?: string;\n  @Prop() step?: number;\n  @Prop() passwordToggleLabel?: string = \"Toggle password display\";\n  @Prop() type?: FlipTextInputType = \"text\";\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @State() showPassword = false;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private inputEl: HTMLInputElement;\n\n  componentDidRender() {\n    this.adjustInputSize();\n  }\n\n  private adjustInputSize() {\n    if (this.rows > 1) {\n      this.inputEl.style.width = \"\";\n      this.inputEl.style.height = \"\";\n      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + \"rem\";\n    }\n\n    if (this.rows === 1) {\n      this.inputEl.style.height = \"\";\n      this.inputEl.style.width = \"\";\n\n      if (this.type !== \"password\") {\n        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + \"rem\";\n      }\n    }\n  }\n\n  private clear = () => {\n    this.inputEl.value = \"\";\n    this.value = \"\";\n    this.valueChange.emit(\"\");\n    this.inputEl.focus();\n  };\n\n  private onChange = (event: Event) => {\n    const el = event.target as HTMLInputElement;\n\n    this.value = el.value;\n    this.valueChange.emit(el.value);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.handleAutoSelect(event);\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.onChange(event);\n  };\n\n  private onKeyPress = (event: KeyboardEvent) => {\n    if (this.type !== \"number\") {\n      return;\n    }\n\n    if ([\"+\", \"-\", \"e\"].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private decreaseValue = () => {\n    if (this.type !== \"number\") {\n      return;\n    }\n    const step = this.step || 1;\n    const currentValue = isNaN(this.inputEl.valueAsNumber)\n      ? this.min !== undefined\n        ? this.min + 1\n        : 1\n      : this.inputEl.valueAsNumber;\n\n    this.value = String(Math.max(this.min || -Infinity, currentValue - step));\n    this.valueChange.emit(this.value);\n  };\n\n  private increaseValue = () => {\n    if (this.type !== \"number\") {\n      return;\n    }\n\n    const step = this.step || 1;\n    const currentValue = isNaN(this.inputEl.valueAsNumber)\n      ? this.min !== undefined\n        ? this.min - 1\n        : -1\n      : this.inputEl.valueAsNumber;\n\n    this.value = String(Math.min(this.max || Infinity, currentValue + step));\n    this.valueChange.emit(this.value);\n  };\n\n  private handleAutoSelect(event: FocusEvent) {\n    if (!this.autoSelect) {\n      return;\n    }\n\n    (event.target as HTMLInputElement).select();\n  }\n\n  private togglePassword = () => {\n    if (this.type !== \"password\") {\n      return;\n    }\n\n    this.showPassword = !this.showPassword;\n  };\n\n  render() {\n    const Tag = this.rows === 1 ? \"input\" : \"textarea\";\n\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const showStepper = this.type === \"number\" && !this.disabled;\n    const showPasswordToggle = this.type === \"password\" && !this.disabled;\n\n    const showClearButton =\n      this.clearable &&\n      !this.disabled &&\n      Boolean(this.value) &&\n      !showPasswordToggle &&\n      !showStepper &&\n      !this.showCharacterCounter;\n\n    const type =\n      this.type === \"password\" && this.showPassword ? \"text\" : this.type;\n\n    const className = classnames(\n      \"text-input\",\n      `text-input--type-${this.type}`,\n      {\n        \"text-input--clearable\": this.clearable,\n        \"text-input--disabled\": this.disabled,\n        \"text-input--show-password\":\n          this.type === \"password\" && this.showPassword,\n      }\n    );\n\n    return (\n      <Host>\n        <div class={className}>\n          {this.prefixLabel && (\n            <span class=\"text-input__prefix\">{this.prefixLabel}</span>\n          )}\n          <Tag\n            aria-describedby={this.flipAriaDescribedby}\n            aria-disabled={this.disabled ? \"true\" : undefined}\n            aria-invalid={ariaInvalid}\n            autoComplete={this.autoComplete}\n            autoFocus={this.autoFocus}\n            class=\"text-input__input\"\n            disabled={this.disabled}\n            inputMode={this.mode}\n            maxLength={this.maxLength}\n            max={this.type === \"number\" ? this.max : undefined}\n            min={this.type === \"number\" ? this.min : undefined}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            onKeyPress={this.onKeyPress}\n            ref={(el) => (this.inputEl = el)}\n            required={this.required}\n            rows={this.rows > 1 ? this.rows : undefined}\n            spellcheck={this.spellCheck}\n            step={this.type === \"number\" ? this.step : undefined}\n            type={type}\n            value={this.rows === 1 ? this.value : undefined}\n          >\n            {this.rows > 1 && this.value}\n          </Tag>\n          {this.suffixLabel && (\n            <span class=\"text-input__suffix\">{this.suffixLabel}</span>\n          )}\n          {showClearButton && (\n            <button\n              aria-label={this.clearButtonLabel}\n              class=\"text-input__clear-button\"\n              onClick={this.clear}\n              type=\"button\"\n            >\n              <flip-icon-cancel></flip-icon-cancel>\n            </button>\n          )}\n          {showPasswordToggle && (\n            <button\n              aria-label={this.passwordToggleLabel}\n              class=\"text-input__password-toggle\"\n              onClick={this.togglePassword}\n              type=\"button\"\n            >\n              {this.showPassword ? (\n                <flip-icon-visibility-off></flip-icon-visibility-off>\n              ) : (\n                <flip-icon-visibility></flip-icon-visibility>\n              )}\n            </button>\n          )}\n          {showStepper && (\n            <span class=\"text-input__stepper\">\n              <button\n                aria-hidden=\"true\"\n                class=\"text-input__step-button\"\n                onClick={this.increaseValue}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <flip-icon-expand-less></flip-icon-expand-less>\n              </button>\n              <button\n                aria-hidden=\"true\"\n                class=\"text-input__step-button\"\n                onClick={this.decreaseValue}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <flip-icon-expand-more></flip-icon-expand-more>\n              </button>\n            </span>\n          )}\n          {this.showCharacterCounter && (\n            <span class=\"text-input__character-counter\">\n              {this.value?.length || 0}{\" \"}\n              {Boolean(this.maxLength) ? `/ ${this.maxLength}` : \"\"}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}