bromcom-ui-next 0.1.4 → 0.1.5

package/dist/esm/bcm-textarea.entry.js.map

@@ -1 +1 @@
-{"file":"bcm-textarea.entry.js","mappings":"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","names":["tv"],"sources":["src/components/textarea/textarea.scss?tag=bcm-textarea&encapsulation=shadow","src/components/textarea/textarea.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.bcm-textarea {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n// Tailwind'in resize sınıflarını override et\n.resize-none {\n  resize: none !important;\n}\n\n.resize {\n  resize: both !important;\n}\n\n.resize-y {\n  resize: vertical !important;\n}\n\n.resize-x {\n  resize: horizontal !important;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, TextareaResize } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\n// import { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n  tag: 'bcm-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class BcmTextarea {\n  @Element() el: HTMLElement;\n  private textareaRef: HTMLTextAreaElement;\n\n  @State() isFocused = false;\n  @State() validationMessage: string;\n  @State() isValid = true;\n  @State() internalStatus: InputStatus = 'default';\n  @State() internalErrorMessage: string;\n\n  /** Textarea value */\n  @Prop({ mutable: true, reflect: true })\n  value: string = '';\n\n  /** Textarea rows */\n  @Prop()\n  rows?: number = 3;\n\n  /** Textarea cols */\n  @Prop()\n  cols?: number;\n\n  /** Minimum height in rows */\n  @Prop()\n  minRows?: number;\n\n  /** Maximum height in rows */\n  @Prop()\n  maxRows?: number;\n\n  /** Resize behavior */\n  @Prop()\n  resize: TextareaResize = 'none';\n\n  /** Auto grow height based on content */\n  @Prop()\n  autoGrow = false;\n\n  /** Input placeholder text */\n  @Prop()\n  placeholder?: string;\n\n  /** Input name */\n  @Prop()\n  name?: string;\n\n  /** Input id */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('textarea');\n\n  /** Controls the textarea size */\n  @Prop()\n  size: InputSize = 'medium';\n\n  /** Defines the textarea's status/state */\n  @Prop()\n  status: InputStatus = 'default';\n\n  /** Full width textarea */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** Whether the textarea is disabled */\n  @Prop()\n  disabled = false;\n\n  /** Whether the textarea is readonly */\n  @Prop()\n  readonly = false;\n\n  /** Whether the textarea is required */\n  @Prop()\n  required = false;\n\n  /** Min length for text input */\n  @Prop()\n  minLength?: number;\n\n  /** Max length for text input */\n  @Prop()\n  maxLength?: number;\n\n  /** Show character counter */\n  @Prop()\n  showCounter: boolean = true;\n\n  /** Textarea label for accessibility */\n  @Prop()\n  label?: string;\n\n  /** Error message to display */\n  @Prop()\n  errorMessage?: string;\n\n  /** Caption text to display below textarea */\n  @Prop()\n  captionText?: string;\n\n  /** ID of associated label element */\n  @Prop()\n  labelledby?: string;\n\n  /** ID of associated caption/error text element */\n  @Prop()\n  describedby?: string;\n\n  /** Custom validation function */\n  @Prop()\n  validator?: (value: string) => string | undefined;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmInput: EventEmitter<InputEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<Event>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    if (this.textareaRef) {\n      this.textareaRef.value = newValue;\n      if (this.autoGrow) {\n        this.adjustHeight();\n      }\n    }\n  }\n\n  @Watch('status')\n  watchStatus(newValue: InputStatus) {\n    this.internalStatus = newValue;\n  }\n\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: string) {\n    this.internalErrorMessage = newValue;\n  }\n\n  componentWillLoad() {\n    setValidationMessages('en', defaultValidationMessages);\n    this.internalStatus = this.status;\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  componentDidLoad() {\n    if (this.autoGrow) {\n      this.adjustHeight();\n      // Input event'ini dinle\n      this.textareaRef?.addEventListener('input', () => this.adjustHeight());\n    }\n  }\n\n  disconnectedCallback() {\n    // Event listener'ı temizle\n    if (this.autoGrow && this.textareaRef) {\n      this.textareaRef.removeEventListener('input', () => this.adjustHeight());\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.textareaRef?.focus();\n  }\n\n  @Method()\n  async setBlur() {\n    this.textareaRef?.blur();\n  }\n\n  @Method()\n  async select() {\n    this.textareaRef?.select();\n  }\n\n  private adjustHeight() {\n    if (!this.autoGrow || !this.textareaRef) return;\n\n    requestAnimationFrame(() => {\n      // Önce height'ı sıfırla ki scrollHeight doğru hesaplansın\n      this.textareaRef.style.height = '0px';\n\n      const computedStyle = getComputedStyle(this.textareaRef);\n      const lineHeight = parseInt(computedStyle.lineHeight);\n      const paddingTop = parseInt(computedStyle.paddingTop);\n      const paddingBottom = parseInt(computedStyle.paddingBottom);\n      const scrollHeight = this.textareaRef.scrollHeight;\n\n      let newHeight = scrollHeight;\n\n      // Min/max kontrolleri\n      if (this.minRows) {\n        const minHeight = this.minRows * lineHeight + paddingTop + paddingBottom;\n        newHeight = Math.max(newHeight, minHeight);\n      }\n\n      if (this.maxRows) {\n        const maxHeight = this.maxRows * lineHeight + paddingTop + paddingBottom;\n        newHeight = Math.min(newHeight, maxHeight);\n      }\n\n      this.textareaRef.style.height = `${newHeight}px`;\n    });\n  }\n\n  private validateInput(): void {\n    if (!this.textareaRef) return;\n\n    // Reset validation state\n    this.isValid = true;\n    this.validationMessage = '';\n\n    const value = this.textareaRef.value;\n\n    // Required check\n    if (this.required && !value) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('required');\n      this.internalStatus = 'error';\n      this.internalErrorMessage = this.validationMessage;\n      return;\n    }\n\n    // Minimum length check\n    if (this.minLength && value.length < this.minLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n    }\n    // Maximum length check\n    else if (this.maxLength && value.length > this.maxLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n    }\n\n    // Custom validator\n    if (this.validator) {\n      const customError = this.validator(value);\n      if (customError) {\n        this.isValid = false;\n        this.validationMessage = customError;\n      }\n    }\n\n    // Update component state\n    this.internalStatus = this.isValid ? 'default' : 'error';\n    this.internalErrorMessage = this.validationMessage;\n  }\n\n  private onChange = (event: Event) => {\n    this.bcmChange.emit(event);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.bcmFocus.emit(event);\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.bcmBlur.emit(event);\n    this.validateInput();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    this.bcmKeyDown.emit(event);\n  };\n\n  private onKeyUp = (event: KeyboardEvent) => {\n    this.bcmKeyUp.emit(event);\n  };\n\n  private styleClass = tv(\n    {\n      slots: {\n        base: [\n          'bcm-textarea bcm-textarea__container',\n          'bg-[--bcm-ui-color-background-base-default]',\n          'border border-solid rounded',\n          'flex flex-col', // flex-col ekledik\n          'transition-colors duration-200',\n          'px-2 py-2',\n          'w-full', // w-full ekledik\n        ],\n        textareaClass: [\n          'textarea',\n          'w-full',\n          'border-0 outline-0 bg-transparent',\n          'appearance-none',\n          'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n          'font-sans antialiased font-medium',\n          'px-1',\n          'overflow-y-auto', // overflow-y-auto ekledik\n          'min-h-0', // min-h-0 ekledik\n        ],\n        counterText: ['textarea-counter-text', 'text-[--bcm-ui-color-text-placeholder]', 'text-right', 'mt-1'],\n      },\n      variants: {\n        size: {\n          small: {\n            base: '',\n            textareaClass: 'text-size-4 min-h-[3rem]',\n            counterText: 'text-size-3',\n          },\n          medium: {\n            base: '',\n            textareaClass: 'text-size-5 min-h-[4rem]',\n            counterText: 'text-size-4',\n          },\n          large: {\n            base: '',\n            textareaClass: 'text-size-6 min-h-[5rem]',\n            counterText: 'text-size-5',\n          },\n        },\n        resize: {\n          none: { textareaClass: '!resize-none' },\n          both: { textareaClass: '!resize' },\n          horizontal: { textareaClass: '!resize-x' },\n          vertical: { textareaClass: '!resize-y' },\n        },\n        status: {\n          default: {\n            base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n          },\n          error: {\n            base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n          },\n          success: {\n            base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n          },\n          warning: {\n            base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n          },\n          info: {\n            base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n          },\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: {\n            base: 'disabled cursor-not-allowed opacity-50',\n            textareaClass: '!resize-none', // disabled durumunda resize'ı engelle\n          },\n          false: '',\n        },\n        focused: {\n          true: {\n            base: 'ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50',\n          },\n          false: '',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        status: 'default',\n        resize: 'vertical',\n        fullWidth: false,\n        disabled: false,\n        focused: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const textareaId = this._id + '-textarea' || this.name;\n\n    const { base, textareaClass, counterText } = this.styleClass({\n      size: this.size,\n      status: this.internalStatus,\n      resize: this.resize,\n      fullWidth: this.fullWidth,\n      disabled: this.disabled,\n      focused: this.isFocused,\n    });\n\n    return (\n      <div class=\"bcm-ui-element\">\n        {/* Label rendering */}\n        {this.label && (\n          <label\n            class={classNames(\n              'textarea-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n            htmlFor={textareaId}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n\n        {/* Textarea container */}\n        <div class={base()}>\n          <textarea\n            ref={el => (this.textareaRef = el)}\n            id={textareaId}\n            class={textareaClass()}\n            name={this.name}\n            rows={this.rows}\n            cols={this.cols}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            required={this.required}\n            placeholder={this.placeholder}\n            minLength={this.minLength}\n            maxLength={this.maxLength}\n            aria-invalid={this.status === 'error'}\n            aria-required={this.required}\n            aria-labelledby={this.labelledby}\n            aria-describedby={this.describedby}\n            value={this.value}\n            onInput={event => {\n              const target = event.target as HTMLTextAreaElement;\n              this.value = target.value;\n              this.bcmInput.emit(event);\n              this.validateInput();\n              if (this.autoGrow) {\n                this.adjustHeight();\n              }\n            }}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyDown={this.onKeyDown}\n            onKeyUp={this.onKeyUp}\n          />\n          {/* buraya isteğe bağlı olarak gözüken bir karakter sayacı ekleyeceğiz. bu sayaç sağa yaslı olacak şu formatta olacak 0/120 gibi 0 mevcut karakteri 120 ise limiti gösterecek */}\n          {this.showCounter && (\n            <div class={counterText()}>\n              {this.value.length}\n              {this.maxLength ? `/${this.maxLength}` : ''}\n            </div>\n          )}\n        </div>\n\n        {/* Validation/Caption message */}\n        {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n          <div\n            class={classNames(\n              'textarea-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n                'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n                'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n                'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n                'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-textarea.entry.js","mappings":"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","names":["tv"],"sources":["src/components/textarea/textarea.scss?tag=bcm-textarea&encapsulation=shadow","src/components/textarea/textarea.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.bcm-textarea {\n  &__container {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n}\n\n// Tailwind'in resize sınıflarını override et\n.resize-none {\n  resize: none !important;\n}\n\n.resize {\n  resize: both !important;\n}\n\n.resize-y {\n  resize: vertical !important;\n}\n\n.resize-x {\n  resize: horizontal !important;\n}\n","import { Component, Prop, h, Event, EventEmitter, Method, State, Watch, Element } from '@stencil/core';\nimport { InputSize, InputStatus, TextareaResize } from './types';\nimport { tv } from 'tailwind-variants';\nimport classNames from 'classnames';\nimport { generateId } from '../../utils/id/generate-id';\n// import { checkSlotContent } from '../../utils/slot/check-slot-content';\nimport { getValidationMessage, setValidationMessages, defaultValidationMessages } from '../../utils/validation-messages';\n\n@Component({\n  tag: 'bcm-textarea',\n  styleUrl: 'textarea.scss',\n  shadow: true,\n})\nexport class BcmTextarea {\n  @Element() el: HTMLElement;\n  private textareaRef: HTMLTextAreaElement;\n\n  @State() isFocused = false;\n  @State() validationMessage: string;\n  @State() isValid = true;\n  @State() internalStatus: InputStatus = 'default';\n  @State() internalErrorMessage: string;\n\n  /** Textarea value */\n  @Prop({ mutable: true, reflect: true })\n  value: string = '';\n\n  /** Textarea rows */\n  @Prop()\n  rows?: number = 3;\n\n  /** Textarea cols */\n  @Prop()\n  cols?: number;\n\n  /** Minimum height in rows */\n  @Prop()\n  minRows?: number;\n\n  /** Maximum height in rows */\n  @Prop()\n  maxRows?: number;\n\n  /** Resize behavior */\n  @Prop()\n  resize: TextareaResize = 'none';\n\n  /** Auto grow height based on content */\n  @Prop()\n  autoGrow = false;\n\n  /** Input placeholder text */\n  @Prop()\n  placeholder?: string;\n\n  /** Input name */\n  @Prop()\n  name?: string;\n\n  /** Input id */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('textarea');\n\n  /** Controls the textarea size */\n  @Prop()\n  size: InputSize = 'medium';\n\n  /** Defines the textarea's status/state */\n  @Prop()\n  status: InputStatus = 'default';\n\n  /** Full width textarea */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** Whether the textarea is disabled */\n  @Prop()\n  disabled = false;\n\n  /** Whether the textarea is readonly */\n  @Prop()\n  readonly = false;\n\n  /** Whether the textarea is required */\n  @Prop()\n  required = false;\n\n  /** Min length for text input */\n  @Prop()\n  minLength?: number;\n\n  /** Max length for text input */\n  @Prop()\n  maxLength?: number;\n\n  /** Show character counter */\n  @Prop()\n  showCounter: boolean = true;\n\n  /** Textarea label for accessibility */\n  @Prop()\n  label?: string;\n\n  /** Error message to display */\n  @Prop()\n  errorMessage?: string;\n\n  /** Caption text to display below textarea */\n  @Prop()\n  captionText?: string;\n\n  /** ID of associated label element */\n  @Prop()\n  labelledby?: string;\n\n  /** ID of associated caption/error text element */\n  @Prop()\n  describedby?: string;\n\n  /** Custom validation function */\n  @Prop()\n  validator?: (value: string) => string | undefined;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmInput: EventEmitter<InputEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmChange: EventEmitter<Event>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyDown: EventEmitter<KeyboardEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmKeyUp: EventEmitter<KeyboardEvent>;\n\n  @Watch('value')\n  handleValueChange(newValue: string) {\n    if (this.textareaRef) {\n      this.textareaRef.value = newValue;\n      if (this.autoGrow) {\n        this.adjustHeight();\n      }\n    }\n  }\n\n  @Watch('status')\n  watchStatus(newValue: InputStatus) {\n    this.internalStatus = newValue;\n  }\n\n  @Watch('errorMessage')\n  watchErrorMessage(newValue: string) {\n    this.internalErrorMessage = newValue;\n  }\n\n  componentWillLoad() {\n    setValidationMessages('en', defaultValidationMessages);\n    this.internalStatus = this.status;\n    this.internalErrorMessage = this.errorMessage;\n  }\n\n  componentDidLoad() {\n    if (this.autoGrow) {\n      this.adjustHeight();\n      // Input event'ini dinle\n      this.textareaRef?.addEventListener('input', () => this.adjustHeight());\n    }\n  }\n\n  disconnectedCallback() {\n    // Event listener'ı temizle\n    if (this.autoGrow && this.textareaRef) {\n      this.textareaRef.removeEventListener('input', () => this.adjustHeight());\n    }\n  }\n\n  @Method()\n  async setFocus() {\n    this.textareaRef?.focus();\n  }\n\n  @Method()\n  async setBlur() {\n    this.textareaRef?.blur();\n  }\n\n  @Method()\n  async select() {\n    this.textareaRef?.select();\n  }\n\n  private adjustHeight() {\n    if (!this.autoGrow || !this.textareaRef) return;\n\n    requestAnimationFrame(() => {\n      // Önce height'ı sıfırla ki scrollHeight doğru hesaplansın\n      this.textareaRef.style.height = '0px';\n\n      const computedStyle = getComputedStyle(this.textareaRef);\n      const lineHeight = parseInt(computedStyle.lineHeight);\n      const paddingTop = parseInt(computedStyle.paddingTop);\n      const paddingBottom = parseInt(computedStyle.paddingBottom);\n      const scrollHeight = this.textareaRef.scrollHeight;\n\n      let newHeight = scrollHeight;\n\n      // Min/max kontrolleri\n      if (this.minRows) {\n        const minHeight = this.minRows * lineHeight + paddingTop + paddingBottom;\n        newHeight = Math.max(newHeight, minHeight);\n      }\n\n      if (this.maxRows) {\n        const maxHeight = this.maxRows * lineHeight + paddingTop + paddingBottom;\n        newHeight = Math.min(newHeight, maxHeight);\n      }\n\n      this.textareaRef.style.height = `${newHeight}px`;\n    });\n  }\n\n  private validateInput(): void {\n    if (!this.textareaRef) return;\n\n    // Reset validation state\n    this.isValid = true;\n    this.validationMessage = '';\n\n    const value = this.textareaRef.value;\n\n    // Required check\n    if (this.required && !value) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('required');\n      this.internalStatus = 'error';\n      this.internalErrorMessage = this.validationMessage;\n      return;\n    }\n\n    // Minimum length check\n    if (this.minLength && value.length < this.minLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('minlength', { min: this.minLength });\n    }\n    // Maximum length check\n    else if (this.maxLength && value.length > this.maxLength) {\n      this.isValid = false;\n      this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });\n    }\n\n    // Custom validator\n    if (this.validator) {\n      const customError = this.validator(value);\n      if (customError) {\n        this.isValid = false;\n        this.validationMessage = customError;\n      }\n    }\n\n    // Update component state\n    this.internalStatus = this.isValid ? 'default' : 'error';\n    this.internalErrorMessage = this.validationMessage;\n  }\n\n  private onChange = (event: Event) => {\n    this.bcmChange.emit(event);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.isFocused = true;\n    this.bcmFocus.emit(event);\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.isFocused = false;\n    this.bcmBlur.emit(event);\n    this.validateInput();\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    this.bcmKeyDown.emit(event);\n  };\n\n  private onKeyUp = (event: KeyboardEvent) => {\n    this.bcmKeyUp.emit(event);\n  };\n\n  private styleClass = tv(\n    {\n      slots: {\n        base: [\n          'bcm-textarea bcm-textarea__container',\n          'bg-[--bcm-ui-color-background-base-default]',\n          'border border-solid rounded',\n          'flex flex-col', // flex-col ekledik\n          'transition-colors duration-200',\n          'px-2 py-2',\n          'w-full', // w-full ekledik\n        ],\n        textareaClass: [\n          'textarea',\n          'w-full',\n          'border-0 outline-0 bg-transparent',\n          'appearance-none',\n          'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',\n          'font-sans antialiased font-medium',\n          'px-1',\n          'overflow-y-auto', // overflow-y-auto ekledik\n          'min-h-0', // min-h-0 ekledik\n        ],\n        counterText: ['textarea-counter-text', 'text-[--bcm-ui-color-text-placeholder]', 'text-right', 'mt-1'],\n      },\n      variants: {\n        size: {\n          small: {\n            base: '',\n            textareaClass: 'text-size-4 min-h-[3rem]',\n            counterText: 'text-size-3',\n          },\n          medium: {\n            base: '',\n            textareaClass: 'text-size-5 min-h-[4rem]',\n            counterText: 'text-size-4',\n          },\n          large: {\n            base: '',\n            textareaClass: 'text-size-6 min-h-[5rem]',\n            counterText: 'text-size-5',\n          },\n        },\n        resize: {\n          none: { textareaClass: '!resize-none' },\n          both: { textareaClass: '!resize' },\n          horizontal: { textareaClass: '!resize-x' },\n          vertical: { textareaClass: '!resize-y' },\n        },\n        status: {\n          default: {\n            base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],\n          },\n          error: {\n            base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],\n          },\n          success: {\n            base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],\n          },\n          warning: {\n            base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],\n          },\n          info: {\n            base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],\n          },\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: {\n            base: 'disabled cursor-not-allowed opacity-50',\n            textareaClass: '!resize-none', // disabled durumunda resize'ı engelle\n          },\n          false: '',\n        },\n        focused: {\n          true: {\n            base: 'ring-2 ring-[--bcm-ui-color-border-primary] ring-opacity-50',\n          },\n          false: '',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        status: 'default',\n        resize: 'vertical',\n        fullWidth: false,\n        disabled: false,\n        focused: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const textareaId = this._id + '-textarea' || this.name;\n\n    const { base, textareaClass, counterText } = this.styleClass({\n      size: this.size,\n      status: this.internalStatus,\n      resize: this.resize,\n      fullWidth: this.fullWidth,\n      disabled: this.disabled,\n      focused: this.isFocused,\n    });\n\n    return (\n      <div class=\"bcm-ui-element\">\n        {/* Label rendering */}\n        {this.label && (\n          <label\n            class={classNames(\n              'textarea-label font-medium',\n              {\n                'text-color-label': !this.disabled,\n                'text-color-disabled': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n            htmlFor={textareaId}\n          >\n            <slot name=\"label\">{this.label}</slot>\n            {this.required && <span>*</span>}\n          </label>\n        )}\n\n        {/* Textarea container */}\n        <div class={base()}>\n          <textarea\n            ref={el => (this.textareaRef = el)}\n            id={textareaId}\n            class={textareaClass()}\n            name={this.name}\n            rows={this.rows}\n            cols={this.cols}\n            disabled={this.disabled}\n            readonly={this.readonly}\n            required={this.required}\n            placeholder={this.placeholder}\n            minLength={this.minLength}\n            maxLength={this.maxLength}\n            aria-invalid={this.status === 'error'}\n            aria-required={this.required}\n            aria-labelledby={this.labelledby}\n            aria-describedby={this.describedby}\n            value={this.value}\n            onInput={event => {\n              const target = event.target as HTMLTextAreaElement;\n              this.value = target.value;\n              this.bcmInput.emit(event);\n              this.validateInput();\n              if (this.autoGrow) {\n                this.adjustHeight();\n              }\n            }}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onKeyDown={this.onKeyDown}\n            onKeyUp={this.onKeyUp}\n          />\n          {/* buraya isteğe bağlı olarak gözüken bir karakter sayacı ekleyeceğiz. bu sayaç sağa yaslı olacak şu formatta olacak 0/120 gibi 0 mevcut karakteri 120 ise limiti gösterecek */}\n          {this.showCounter && (\n            <div class={counterText()}>\n              {this.value.length}\n              {this.maxLength ? `/${this.maxLength}` : ''}\n            </div>\n          )}\n        </div>\n\n        {/* Validation/Caption message */}\n        {(this.captionText || this.internalErrorMessage || this.validationMessage) && (\n          <div\n            class={classNames(\n              'textarea-caption-text font-regular mt-1',\n              {\n                'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',\n                'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),\n                'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',\n                'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',\n                'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',\n                'text-[--bcm-ui-color-text-disabled]': this.disabled,\n              },\n              {\n                'text-size-3': this.size === 'small',\n                'text-size-4': this.size === 'medium',\n                'text-size-5': this.size === 'large',\n              },\n            )}\n          >\n            {!this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/bromcom-ui.js

@@ -16,7 +16,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["bcm-accordion",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-chip",[[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[1,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-input",[[1,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-text",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]],["bcm-textarea",[[1,"bcm-textarea",{"value":[1537],"rows":[2],"cols":[2],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"resize":[1],"autoGrow":[4,"auto-grow"],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"disabled":[4],"readonly":[4],"required":[4],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"showCounter":[4,"show-counter"],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-avatar_4",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}],[1,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}],[1,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}],[1,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]]], options);
+  return bootstrapLazy([["bcm-dropdown",[[1,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["bcm-accordion",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-chip",[[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[1,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-dropdown-item",[[1,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16],"selected":[516],"error":[516],"disabled":[516]}]]],["bcm-input",[[1,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-text",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]],["bcm-textarea",[[1,"bcm-textarea",{"value":[1537],"rows":[2],"cols":[2],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"resize":[1],"autoGrow":[4,"auto-grow"],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"disabled":[4],"readonly":[4],"required":[4],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"showCounter":[4,"show-counter"],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-linked",[[1,"bcm-linked",{"targetId":[513,"target-id"],"targetElement":[16],"isVisible":[32]}]]],["bcm-avatar_4",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}],[1,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}],[1,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}],[1,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}]]]], options);
 });
 
 //# sourceMappingURL=bromcom-ui.js.map

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-bfa07b76.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["bcm-accordion",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-chip",[[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[1,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-input",[[1,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-text",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]],["bcm-textarea",[[1,"bcm-textarea",{"value":[1537],"rows":[2],"cols":[2],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"resize":[1],"autoGrow":[4,"auto-grow"],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"disabled":[4],"readonly":[4],"required":[4],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"showCounter":[4,"show-counter"],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-avatar_4",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}],[1,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}],[1,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}],[1,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}]]]], options);
+  return bootstrapLazy([["bcm-dropdown",[[1,"bcm-dropdown",{"text":[1],"isReady":[32],"dropdownItems":[32]},[[2,"bcmDropDownItemChange","handleDropdownItemChange"]]]]],["bcm-accordion",[[1,"bcm-accordion",{"expanded":[1540],"headerTitle":[1,"header-title"],"group":[516],"hintText":[1,"hint-text"],"hasFooterContent":[32],"toggle":[64],"expand":[64],"collapse":[64]}]]],["bcm-accordion-group",[[1,"bcm-accordion-group",{"multi":[4],"accordionItems":[32],"expandAll":[64],"collapseAll":[64],"getExpandedItems":[64]},[[2,"bcmAccordionChange","handleAccordionChange"]]]]],["bcm-alert",[[1,"bcm-alert",{"status":[1],"size":[1],"kind":[1],"dismissible":[4],"showStatusIcon":[4,"show-status-icon"]}]]],["bcm-chip",[[1,"bcm-chip",{"size":[1],"kind":[1],"status":[1],"dismissible":[4],"disabled":[4],"color":[1]}]]],["bcm-divider",[[1,"bcm-divider",{"direction":[1],"variant":[1],"size":[1]}]]],["bcm-dropdown-item",[[1,"bcm-dropdown-item",{"text":[1],"icon":[1],"rightIcons":[16],"selected":[516],"error":[516],"disabled":[516]}]]],["bcm-input",[[1,"bcm-input",{"value":[1537],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"type":[1],"disabled":[4],"readonly":[4],"required":[4],"autocomplete":[1],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"pattern":[1],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"prefixIcon":[1,"prefix-icon"],"suffixIcon":[1,"suffix-icon"],"useNativeValidation":[4,"use-native-validation"],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64],"setLocale":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-text",[[1,"bcm-text",{"text":[1],"variant":[1],"size":[1]}]]],["bcm-textarea",[[1,"bcm-textarea",{"value":[1537],"rows":[2],"cols":[2],"minRows":[2,"min-rows"],"maxRows":[2,"max-rows"],"resize":[1],"autoGrow":[4,"auto-grow"],"placeholder":[1],"name":[1],"_id":[513,"id"],"size":[1],"status":[1],"fullWidth":[516,"full-width"],"disabled":[4],"readonly":[4],"required":[4],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"showCounter":[4,"show-counter"],"label":[1],"errorMessage":[1,"error-message"],"captionText":[1,"caption-text"],"labelledby":[1],"describedby":[1],"validator":[16],"isFocused":[32],"validationMessage":[32],"isValid":[32],"internalStatus":[32],"internalErrorMessage":[32],"setFocus":[64],"setBlur":[64],"select":[64]},null,{"value":["handleValueChange"],"status":["watchStatus"],"errorMessage":["watchErrorMessage"]}]]],["bcm-linked",[[1,"bcm-linked",{"targetId":[513,"target-id"],"targetElement":[16],"isVisible":[32]}]]],["bcm-avatar_4",[[1,"bcm-avatar",{"image":[1],"alt":[1],"shape":[1],"size":[1],"color":[1],"icon":[1],"status":[1],"blink":[4],"name":[1],"isFallback":[32]}],[1,"bcm-basic-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"text":[1]}],[1,"bcm-badge",{"size":[1],"variant":[1],"color":[1],"soft":[4],"blink":[4],"status":[1],"position":[1],"offset":[1],"text":[1]}],[1,"bcm-button",{"kind":[1],"size":[1],"status":[1],"variant":[1],"icon":[1],"iconPosition":[1,"icon-position"],"iconOnly":[4,"icon-only"],"fullWidth":[516,"full-width"],"type":[1],"loading":[4],"disabled":[4],"text":[1],"active":[4],"form":[1],"value":[1],"name":[1],"label":[1],"expanded":[1],"controls":[1]}]]]], options);
 };
 
 export { defineCustomElements };

package/dist/tailwind.config.js

@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+  content: ['./src/**/*.{ts,tsx,html,css}', './src/index.html'],
+  theme: {
+    extend: {
+      colors: require('./src/styles/theme-variables').themeVariables.v4ColorPalette,
+      textColor: {
+        color: require('./src/styles/theme-variables').themeVariables.textColor,
+      },
+      fontSize: require('./src/styles/theme-variables').themeVariables.fontSize,
+      boxShadow: require('./src/styles/theme-variables').themeVariables.boxShadow,
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+      },
+      ringColor: {
+        DEFAULT: 'var(--bcm-ui-color-ring-default)',
+      },
+      ringOffsetWidth: {
+        DEFAULT: '1px',
+      },
+      animation: {
+        ...require('tailwindcss/defaultConfig').theme.animation,
+        shake: 'shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite',
+        blink: 'ping 2s infinite',
+      },
+      ringWidth: {
+        DEFAULT: '2px',
+      },
+    },
+  },
+};

package/dist/types/components/dropdown/dropdown.component.d.ts

@@ -0,0 +1,14 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class Dropdown implements ComponentInterface {
+    host: HTMLElement;
+    text?: string;
+    isReady: boolean;
+    dropdownItems: HTMLBcmDropdownItemElement[];
+    protected buttonRef?: HTMLBcmButtonElement;
+    bcmDropdownChange: EventEmitter<any>;
+    componentDidLoad(): void;
+    handleDropdownItemChange(event: CustomEvent): void;
+    private dropdownClass;
+    private handleSlotChange;
+    render(): any;
+}

package/dist/types/components/dropdown-item/dropdown-item.component.d.ts

@@ -0,0 +1,14 @@
+import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
+export declare class DropdownItem implements ComponentInterface {
+    host: HTMLElement;
+    text: string;
+    icon: string;
+    rightIcons: string[];
+    selected: boolean;
+    error: boolean;
+    disabled: boolean;
+    bcmDropDownItemChange: EventEmitter<any>;
+    private handleClick;
+    private dropdownItemClass;
+    render(): any;
+}

package/dist/types/components/linked/linked.component.d.ts

@@ -0,0 +1,16 @@
+import { ComponentInterface } from "../../stencil-public-runtime";
+export declare class BcmLinked implements ComponentInterface {
+    host: HTMLElement;
+    targetId: string;
+    targetElement?: HTMLElement;
+    isVisible: boolean;
+    private floatingEl?;
+    private targetEl?;
+    componentDidLoad(): void;
+    private updatePosition;
+    private show;
+    private hide;
+    private toggle;
+    render(): any;
+    disconnectedCallback(): void;
+}

package/dist/types/components.d.ts

@@ -511,6 +511,17 @@ export namespace Components {
          */
         "variant": 'solid' | 'dashed' | 'dotted';
     }
+    interface BcmDropdown {
+        "text"?: string;
+    }
+    interface BcmDropdownItem {
+        "disabled": boolean;
+        "error": boolean;
+        "icon": string;
+        "rightIcons": string[];
+        "selected": boolean;
+        "text": string;
+    }
     interface BcmInput {
         /**
           * Input id
@@ -628,6 +639,10 @@ export namespace Components {
          */
         "value": string;
     }
+    interface BcmLinked {
+        "targetElement"?: HTMLElement;
+        "targetId": string;
+    }
     interface BcmText {
         /**
           * Text size
@@ -768,6 +783,14 @@ export interface BcmChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmChipElement;
 }
+export interface BcmDropdownCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmDropdownElement;
+}
+export interface BcmDropdownItemCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLBcmDropdownItemElement;
+}
 export interface BcmInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLBcmInputElement;
@@ -1042,6 +1065,40 @@ declare global {
         prototype: HTMLBcmDividerElement;
         new (): HTMLBcmDividerElement;
     };
+    interface HTMLBcmDropdownElementEventMap {
+        "bcmDropdownChange": any;
+    }
+    interface HTMLBcmDropdownElement extends Components.BcmDropdown, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmDropdownElementEventMap>(type: K, listener: (this: HTMLBcmDropdownElement, ev: BcmDropdownCustomEvent<HTMLBcmDropdownElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmDropdownElementEventMap>(type: K, listener: (this: HTMLBcmDropdownElement, ev: BcmDropdownCustomEvent<HTMLBcmDropdownElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBcmDropdownElement: {
+        prototype: HTMLBcmDropdownElement;
+        new (): HTMLBcmDropdownElement;
+    };
+    interface HTMLBcmDropdownItemElementEventMap {
+        "bcmDropDownItemChange": any;
+    }
+    interface HTMLBcmDropdownItemElement extends Components.BcmDropdownItem, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLBcmDropdownItemElementEventMap>(type: K, listener: (this: HTMLBcmDropdownItemElement, ev: BcmDropdownItemCustomEvent<HTMLBcmDropdownItemElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLBcmDropdownItemElementEventMap>(type: K, listener: (this: HTMLBcmDropdownItemElement, ev: BcmDropdownItemCustomEvent<HTMLBcmDropdownItemElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLBcmDropdownItemElement: {
+        prototype: HTMLBcmDropdownItemElement;
+        new (): HTMLBcmDropdownItemElement;
+    };
     interface HTMLBcmInputElementEventMap {
         "bcmInput": InputEvent;
         "bcmChange": Event;
@@ -1064,6 +1121,12 @@ declare global {
         prototype: HTMLBcmInputElement;
         new (): HTMLBcmInputElement;
     };
+    interface HTMLBcmLinkedElement extends Components.BcmLinked, HTMLStencilElement {
+    }
+    var HTMLBcmLinkedElement: {
+        prototype: HTMLBcmLinkedElement;
+        new (): HTMLBcmLinkedElement;
+    };
     interface HTMLBcmTextElement extends Components.BcmText, HTMLStencilElement {
     }
     var HTMLBcmTextElement: {
@@ -1102,7 +1165,10 @@ declare global {
         "bcm-button": HTMLBcmButtonElement;
         "bcm-chip": HTMLBcmChipElement;
         "bcm-divider": HTMLBcmDividerElement;
+        "bcm-dropdown": HTMLBcmDropdownElement;
+        "bcm-dropdown-item": HTMLBcmDropdownItemElement;
         "bcm-input": HTMLBcmInputElement;
+        "bcm-linked": HTMLBcmLinkedElement;
         "bcm-text": HTMLBcmTextElement;
         "bcm-textarea": HTMLBcmTextareaElement;
     }
@@ -1577,6 +1643,19 @@ declare namespace LocalJSX {
          */
         "variant"?: 'solid' | 'dashed' | 'dotted';
     }
+    interface BcmDropdown {
+        "onBcmDropdownChange"?: (event: BcmDropdownCustomEvent<any>) => void;
+        "text"?: string;
+    }
+    interface BcmDropdownItem {
+        "disabled"?: boolean;
+        "error"?: boolean;
+        "icon"?: string;
+        "onBcmDropDownItemChange"?: (event: BcmDropdownItemCustomEvent<any>) => void;
+        "rightIcons"?: string[];
+        "selected"?: boolean;
+        "text"?: string;
+    }
     interface BcmInput {
         /**
           * Input id
@@ -1693,6 +1772,10 @@ declare namespace LocalJSX {
          */
         "value"?: string;
     }
+    interface BcmLinked {
+        "targetElement"?: HTMLElement;
+        "targetId"?: string;
+    }
     interface BcmText {
         /**
           * Text size
@@ -1825,7 +1908,10 @@ declare namespace LocalJSX {
         "bcm-button": BcmButton;
         "bcm-chip": BcmChip;
         "bcm-divider": BcmDivider;
+        "bcm-dropdown": BcmDropdown;
+        "bcm-dropdown-item": BcmDropdownItem;
         "bcm-input": BcmInput;
+        "bcm-linked": BcmLinked;
         "bcm-text": BcmText;
         "bcm-textarea": BcmTextarea;
     }
@@ -1997,7 +2083,10 @@ declare module "@stencil/core" {
              * The component uses CSS variables for theming and Tailwind for styling.
              */
             "bcm-divider": LocalJSX.BcmDivider & JSXBase.HTMLAttributes<HTMLBcmDividerElement>;
+            "bcm-dropdown": LocalJSX.BcmDropdown & JSXBase.HTMLAttributes<HTMLBcmDropdownElement>;
+            "bcm-dropdown-item": LocalJSX.BcmDropdownItem & JSXBase.HTMLAttributes<HTMLBcmDropdownItemElement>;
             "bcm-input": LocalJSX.BcmInput & JSXBase.HTMLAttributes<HTMLBcmInputElement>;
+            "bcm-linked": LocalJSX.BcmLinked & JSXBase.HTMLAttributes<HTMLBcmLinkedElement>;
             "bcm-text": LocalJSX.BcmText & JSXBase.HTMLAttributes<HTMLBcmTextElement>;
             "bcm-textarea": LocalJSX.BcmTextarea & JSXBase.HTMLAttributes<HTMLBcmTextareaElement>;
         }

package/dist/types/styles/theme-variables.d.ts

@@ -46,8 +46,23 @@ export declare const themeVariables: {
             lineHeight: string;
         })[];
     };
+    boxShadow: {
+        sm: string;
+        DEFAULT: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        inner: string;
+        none: string;
+        default: string;
+        '2': string;
+        '3': string;
+        '4': string;
+    };
     textColor: {
         DEFAULT: string;
+        default: string;
         base: string;
         header: string;
         label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bromcom-ui-next",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "A modern UI component library built with StencilJS and Tailwind CSS for Bromcom applications",
   "private": false,
   "author": "Bromcom Computers Plc",
@@ -33,6 +33,7 @@
     "generate": "stencil generate"
   },
   "devDependencies": {
+    "@floating-ui/dom": "^1.6.13",
     "@stencil/core": "^4.7.0",
     "@stencil/sass": "^3.0.12",
     "@types/jest": "^29.5.6",

package/dist/bromcom-ui/p-dcea8d62.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as t}from"./p-15fe392b.js";import{c as o}from"./p-12360e4c.js";const l={display:"h1",heading1:"h2",heading2:"h3",title1:"h4",title2:"h5",title3:"h6",body:"p",bodyAccent:"p",helper:"p",caption:"p",label:"label",placeholder:"p",link:"a",info:"p",infoAccent:"p"};const i=".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";const r=i;const a=class{constructor(t){e(this,t);this.variant="body";this.size="medium";this.variantClassMap={display:"font-semibold text-size-12 text-color-header",heading1:"font-semibold text-size-7 text-color-header",heading2:"font-semibold text-size-6 text-color-header",title1:{small:"font-semibold text-size-5 text-color-header",medium:"font-semibold text-size-6 text-color-header",large:"font-semibold text-size-7 text-color-header"},title2:{small:"font-semibold text-size-4 text-color-default",medium:"font-semibold text-size-5 text-color-default",large:"font-semibold text-size-6 text-color-default"},title3:{small:"font-semibold text-size-3 text-color-disabled",medium:"font-semibold text-size-4 text-color-disabled",large:"font-semibold text-size-5 text-color-disabled"},body:{small:"font-regular text-size-4 text-color-default",medium:"font-regular text-size-5 text-color-default",large:"font-regular text-size-6 text-color-default"},bodyAccent:{small:"font-medium text-size-4 text-color-default",medium:"font-medium text-size-5 text-color-default",large:"font-medium text-size-6 text-color-default"},helper:{small:"font-regular text-size-4 text-color-helper",medium:"font-regular text-size-5 text-color-helper",large:"font-regular text-size-6 text-color-helper"},caption:{small:"font-regular text-size-3 text-color-caption",medium:"font-regular text-size-4 text-color-caption",large:"font-regular text-size-5 text-color-caption"},link:{small:"font-medium text-size-4 underline text-color-primary",medium:"font-medium text-size-5 underline text-color-primary",large:"font-medium text-size-6 underline text-color-primary"},label:{small:"font-medium text-size-3 text-color-label",medium:"font-medium text-size-4 text-color-label",large:"font-medium text-size-5 text-color-label"},placeholder:{small:"font-regular text-size-4 text-color-placeholder",medium:"font-regular text-size-5 text-color-placeholder",large:"font-regular text-size-6 text-color-placeholder"},info:{small:"font-regular text-size-3 text-color-default",medium:"font-regular text-size-4 text-color-default",large:"font-regular text-size-5 text-color-default"},infoAccent:{small:"font-medium text-size-3 text-color-header",medium:"font-medium text-size-4 text-color-header",large:"font-medium text-size-5 text-color-header"}};this.getTextClass=(e,t)=>{const o=this.variantClassMap[e];if(typeof o==="string"){return o}return o[t]}}render(){const e=l[this.variant];const i=this.getTextClass(this.variant,this.size);return t(e,{key:"a9ba5eeb50ec7e4bce324ae9f3e2ef91b6d68966",class:o("bcm-text appearance-none m-0 p-0",i),part:"text"},t("slot",{key:"d656033433d725099f429978df47d119dba10727"},this.text))}};a.style=r;export{a as bcm_text};
-//# sourceMappingURL=p-dcea8d62.entry.js.map