@sula-tech/webcomponents 0.2.0 → 0.2.2

package/dist/collection/components/sula-textfield/sula-textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"sula-textfield.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\n@Component({\n  tag: 'sula-textfield',\n  styleUrl: 'sula-textfield.scss',\n  shadow: true,\n})\nexport class SulaTextfield {\n  /**\n   * Value for the input.\n   */\n  @Prop({ mutable: true })\n  value?: string;\n\n  /**\n   * The textfield type\n   */\n  @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n  /**\n   * The textfield status\n   */\n  @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n  /**\n   * The textfield label\n   */\n  @Prop() label: string;\n\n  /**\n   * The textfield placeholder\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The textfield is disabled\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n\n  /**\n   * The help text for textfield\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * The textfield max length\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The textfield icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Event emitted when input value changes.\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when input is focused.\n   */\n  @Event()\n  focusedOn: EventEmitter<void>;\n\n  /**\n   * Event emitted when input is focused out.\n   */\n  @Event()\n  focusedOut: EventEmitter<void>;\n\n  @State()\n  inputIsOpen = false;\n\n  @State()\n  textValue: string = '';\n\n  @State()\n  showPassword = false;\n\n  @State()\n  inputIsFocused = false;\n\n  inputContainer: HTMLDivElement;\n  inputElement: HTMLInputElement;\n  labelElement: HTMLDivElement;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleClick(event: Event) {\n    if (!this.node) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.toggleOptions(false);\n      this.focusedOut.emit();\n      this.inputIsFocused = false;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.trim().length > 0) {\n      this.textValue = this.value;\n      this.inputIsOpen = true;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.textValue && this.textValue.trim().length > 0) {\n      this.changeElementsStyle();\n    }\n  }\n\n  handleInputClick = () => {\n    this.toggleOptions(true);\n  };\n\n  toggleOptions(inputIsOpen: boolean) {\n    if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled) return;\n\n    this.inputIsOpen = inputIsOpen;\n    this.changeElementsStyle();\n    this.inputElement.focus();\n  }\n\n  changeElementsStyle() {\n    this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n    this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n    if (!this.inputIsOpen) {\n      this.labelElement.classList.add('from-up');\n    }\n  }\n\n  handleInputChanges = (event: InputEvent) => {\n    const newValue = (event.target as HTMLInputElement).value;\n    this.textValue = newValue;\n\n    this.valueChanged.emit(newValue);\n  };\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.toggleOptions(true);\n    this.inputElement.focus();\n  };\n\n  handleBlur = () => {\n    this.toggleOptions(false);\n\n    this.focusedOut.emit();\n    this.inputIsFocused = false;\n  };\n\n  handleInputFocus = () => {\n    this.focusedOn.emit();\n    this.inputIsFocused = true;\n  };\n\n  handleIconClick = (event: MouseEvent) => {\n    if (this.type === SulaTextfieldType.Password) {\n      event.stopPropagation();\n      this.handlePasswordIconClicked();\n    }\n  };\n\n  handlePasswordIconClicked() {\n    const cursorPosition = this.inputElement.selectionStart;\n    const inputValue = this.inputElement.value;\n    const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n    this.inputElement.setAttribute('type', inputType);\n    this.showPassword = !this.showPassword;\n\n    setTimeout(() => {\n      this.inputElement.value = inputValue;\n\n      this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n    }, 0);\n  }\n\n  getInputIcon() {\n    if (this.type === SulaTextfieldType.Password) {\n      return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n    }\n\n    return this.icon;\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div>\n          <div\n            id=\"button-container\"\n            class={{\n              'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n              'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,\n              'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n              'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n              'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n              'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n            }}\n            tabIndex={0}\n            onFocus={this.handleFocus}\n            onClick={this.handleInputClick}\n          >\n            {!this.disabled && (\n              <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n                <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n                <input\n                  type={this.type}\n                  ref={node => (this.inputElement = node)}\n                  placeholder={this.placeholder}\n                  class=\"outline-none text-base text-text-primary\"\n                  onInput={this.handleInputChanges}\n                  onFocus={this.handleInputFocus}\n                  value={this.value}\n                />\n              </div>\n            )}\n\n            <div\n              id=\"textfield-label\"\n              class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n              ref={node => (this.labelElement = node)}\n            >\n              {this.label}\n            </div>\n\n            {(!!this.icon || this.type === SulaTextfieldType.Password) && (\n              <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n                <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n              </div>\n            )}\n          </div>\n\n          {(this.helpText || this.maxLength) && !this.disabled && (\n            <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n              {this.helpText && (\n                <div id=\"textfield-help-text\" class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}>\n                  {this.helpText}\n                </div>\n              )}\n              {this.maxLength && (\n                <div\n                  id=\"max-length-container\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sula-textfield.js","sourceRoot":"","sources":["../../../src/components/sula-textfield/sula-textfield.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, Host, Listen, Prop, State, h } from '@stencil/core';\nimport { SulaTextfieldStatus, SulaTextfieldType } from './model/sula-textfield.model';\n\n@Component({\n  tag: 'sula-textfield',\n  styleUrl: 'sula-textfield.scss',\n  shadow: true,\n})\nexport class SulaTextfield {\n  /**\n   * Value for the input.\n   */\n  @Prop({ mutable: true })\n  value?: string;\n\n  /**\n   * The textfield type\n   */\n  @Prop() type: SulaTextfieldType = SulaTextfieldType.Text;\n\n  /**\n   * The textfield status\n   */\n  @Prop({ mutable: true }) status: SulaTextfieldStatus = SulaTextfieldStatus.Default;\n\n  /**\n   * The textfield label\n   */\n  @Prop() label: string;\n\n  /**\n   * The textfield placeholder\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * The textfield is disabled\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n\n  /**\n   * The help text for textfield\n   */\n  @Prop() helpText?: string;\n\n  /**\n   * The textfield max length\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The textfield icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Event emitted when input value changes.\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  /**\n   * Event emitted when input is focused.\n   */\n  @Event()\n  focusedOn: EventEmitter<void>;\n\n  /**\n   * Event emitted when input is focused out.\n   */\n  @Event()\n  focusedOut: EventEmitter<void>;\n\n  @State()\n  inputIsOpen = false;\n\n  @State()\n  textValue: string = '';\n\n  @State()\n  showPassword = false;\n\n  @State()\n  inputIsFocused = false;\n\n  inputContainer: HTMLDivElement;\n  inputElement: HTMLInputElement;\n  labelElement: HTMLDivElement;\n\n  node?: HTMLElement;\n\n  @Listen('click', { target: 'document' })\n  handleClick(event: Event) {\n    if (!this.node) return;\n\n    const clickInside = this.node.contains(event.target as Node);\n\n    if (!clickInside) {\n      this.toggleOptions(false);\n      this.focusedOut.emit();\n      this.inputIsFocused = false;\n    }\n  }\n\n  componentWillLoad() {\n    if (this.value && this.value.trim().length > 0) {\n      this.textValue = this.value;\n      this.inputIsOpen = true;\n    }\n  }\n\n  componentDidLoad() {\n    if (this.textValue && this.textValue.trim().length > 0) {\n      this.changeElementsStyle();\n    }\n  }\n\n  handleInputClick = () => {\n    this.toggleOptions(true);\n  };\n\n  toggleOptions(inputIsOpen: boolean) {\n    if ((this.inputIsOpen && this.textValue && this.textValue.length > 0) || this.disabled) return;\n\n    this.inputIsOpen = inputIsOpen;\n    this.changeElementsStyle();\n    this.inputElement.focus();\n  }\n\n  changeElementsStyle() {\n    this.inputContainer.style.display = this.inputIsOpen ? 'flex' : 'none';\n    this.labelElement.style.display = this.inputIsOpen ? 'none' : 'block';\n    if (!this.inputIsOpen) {\n      this.labelElement.classList.add('from-up');\n    }\n  }\n\n  handleInputChanges = (event: InputEvent) => {\n    const newValue = (event.target as HTMLInputElement).value;\n    this.textValue = newValue;\n\n    this.valueChanged.emit(newValue);\n  };\n\n  handleFocus = () => {\n    if (this.disabled) return;\n    this.toggleOptions(true);\n    this.inputElement.focus();\n  };\n\n  handleBlur = () => {\n    this.toggleOptions(false);\n\n    this.focusedOut.emit();\n    this.inputIsFocused = false;\n  };\n\n  handleInputFocus = () => {\n    this.focusedOn.emit();\n    this.inputIsFocused = true;\n  };\n\n  handleIconClick = (event: MouseEvent) => {\n    if (this.type === SulaTextfieldType.Password) {\n      event.stopPropagation();\n      this.handlePasswordIconClicked();\n    }\n  };\n\n  handlePasswordIconClicked() {\n    const cursorPosition = this.inputElement.selectionStart;\n    const inputValue = this.inputElement.value;\n    const inputType = this.showPassword ? SulaTextfieldType.Password : SulaTextfieldType.Text;\n\n    this.inputElement.setAttribute('type', inputType);\n    this.showPassword = !this.showPassword;\n\n    setTimeout(() => {\n      this.inputElement.value = inputValue;\n\n      this.inputElement.setSelectionRange(cursorPosition, cursorPosition);\n    }, 0);\n  }\n\n  getInputIcon() {\n    if (this.type === SulaTextfieldType.Password) {\n      return this.showPassword ? 'ph ph-eye' : 'ph ph-eye-slash';\n    }\n\n    return this.icon;\n  }\n\n  render() {\n    return (\n      <Host ref={node => (this.node = node)}>\n        <div>\n          <div\n            id=\"button-container\"\n            class={{\n              'flex items-center border rounded-sm px-16 outline-none h-[72px] caret-brand-primary': true,\n              'flex-row justify-between': !!this.icon || this.type === SulaTextfieldType.Password,\n              'button-focus': this.inputIsFocused && !this.disabled && this.status === SulaTextfieldStatus.Default,\n              'button-error': this.status === SulaTextfieldStatus.Error && !this.disabled,\n              'bg-states-bg-disabled border-line-general cursor-not-allowed': this.disabled,\n              'bg-surface-body border-line-input cursor-pointer': !this.disabled,\n            }}\n            tabIndex={0}\n            onFocus={this.handleFocus}\n            onClick={this.handleInputClick}\n          >\n            {!this.disabled && (\n              <div class={{ 'hidden flex-col w-full': true, 'pr-12': !!this.icon }} ref={node => (this.inputContainer = node)}>\n                <label class=\"font-bold text-sm text-text-primary from-down\">{this.label}</label>\n                <input\n                  type={this.type}\n                  ref={node => (this.inputElement = node)}\n                  placeholder={this.placeholder}\n                  class=\"outline-none text-base text-text-primary bg-transparent\"\n                  onInput={this.handleInputChanges}\n                  onFocus={this.handleInputFocus}\n                  value={this.value}\n                />\n              </div>\n            )}\n\n            <div\n              id=\"textfield-label\"\n              class={{ 'text-base flex items-center': true, 'text-text-primary': !this.disabled, 'text-text-disabled': this.disabled }}\n              ref={node => (this.labelElement = node)}\n            >\n              {this.label}\n            </div>\n\n            {(!!this.icon || this.type === SulaTextfieldType.Password) && (\n              <div class=\"flex items-center justify-center\" onClick={this.handleIconClick}>\n                <sula-icon icon={this.getInputIcon()} customClass={`text-2xl ${this.disabled ? 'text-icon-disabled' : 'text-icon-primary'}`} />\n              </div>\n            )}\n          </div>\n\n          {(this.helpText || this.maxLength) && !this.disabled && (\n            <div class=\"flex justify-between items-center px-16 mt-4 text-sm\">\n              {this.helpText && (\n                <div\n                  id=\"textfield-help-text\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.helpText}\n                </div>\n              )}\n              {this.maxLength && (\n                <div\n                  id=\"max-length-container\"\n                  class={{ 'text-text-primary': this.status === SulaTextfieldStatus.Default, 'text-feedback-error': this.status === SulaTextfieldStatus.Error }}\n                >\n                  {this.textValue ? this.textValue.length : 0}/{this.maxLength}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/components/index.js

@@ -1,3 +1,3 @@
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-ca146b16.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-881c6b35.js';
 
 //# sourceMappingURL=index.js.map