@beeq/core 1.2.0 → 1.3.1

package/dist/cjs/bq-tag.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bq-tag.entry.cjs.js","mappings":";;;;;;;;;;;;;;AAAO,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,CAAU,CAAC;AAGxD,MAAM,SAAS,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAU,CAAC;AAG3E,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,QAAQ,CAAU;;ACJzD;;;;;;AAMO,MAAM,QAAQ,GAAG,CAAC,IAAc;IACrC,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC1B,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAE3B,MAAM,IAAI,GAAG;QACX,CAAC,MAAM,GAAG,EAAE;QACZ,CAAC,KAAK,GAAG,EAAE;QACX,CAAC,MAAM,GAAG,EAAE;KACb,CAAC;IAEF,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF;;;;;;AAMO,MAAM,SAAS,GAAG,CAAC,KAAgB;IACxC,MAAM,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IAC/B,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9B,MAAM,QAAQ,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IAC9B,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IACjC,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC;IAEjC,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;IAErC,MAAM,MAAM,GAAG;QACb,CAAC,SAAS,GAAG;YACX,CAAC,cAAc,GAAG,cAAc;YAChC,CAAC,aAAa,GAAG,WAAW;SAC7B;QACD,CAAC,QAAQ,GAAG;YACV,CAAC,cAAc,GAAG,eAAe;YACjC,CAAC,aAAa,GAAG,WAAW;SAC7B;QACD,CAAC,QAAQ,GAAG;YACV,CAAC,cAAc,GAAG,aAAa;YAC/B,CAAC,aAAa,GAAG,WAAW;SAC7B;QACD,CAAC,WAAW,GAAG;YACb,CAAC,cAAc,GAAG,eAAe;YACjC,CAAC,aAAa,GAAG,WAAW;SAC7B;QACD,CAAC,WAAW,GAAG;YACb,CAAC,cAAc,GAAG,eAAe;YACjC,CAAC,aAAa,GAAG,WAAW;SAC7B;KACF,CAAC;IAEF,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;AACvB,CAAC;;AC9DD,MAAM,QAAQ,GAAG,q01BAAq01B,CAAC;AACv11B,oBAAe,QAAQ;;MCiBV,KAAK;;;;;;;;;;;;QA+GR,eAAU,GAAG;YACnB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAE9B,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE;gBACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAE9B,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACrC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE;gBACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;SACF,CAAC;QAEM,gBAAW,GAAG;;YAEpB,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;;YAG/C,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;;YAEtC,IAAI,CAAC,EAAE,CAAC,gBAAgB,EAAE;gBACxB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;aAChC;SACF,CAAC;QAEM,eAAU,GAAG;YACnB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAE9B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC3B,CAAC;QAEM,gBAAW,GAAG;YACpB,IAAI,CAAC,IAAI,CAAC,WAAW;gBAAE,OAAO;YAE9B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SAC5B,CAAC;QAEM,qBAAgB,GAAG;YACzB,IAAI,CAAC,SAAS,GAAGA,mBAAc,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;SAC5D,CAAC;yBA5I2B,KAAK;;yBASY,KAAK;;wBAML,KAAK;;yBAML,KAAK;wBAGS,KAAK;oBAGvB,QAAQ;uBAGF,QAAQ;;;;IAOxD,eAAe;QACbC,uBAAiB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;QACvDA,uBAAiB,CAAC,WAAW,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;KAC9D;;;;IAyBD,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;;;;;;;;;;IAcD,MAAM,IAAI;QACR,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;;IAID,MAAM,IAAI;QACR,IAAI,CAAC,UAAU,EAAE,CAAC;KACnB;IAqDD,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC;KACjF;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC;KAC5C;IAED,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,MAAM,CAAC;KACxC;IAED,IAAY,cAAc;QACxB,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;KAC3E;;;;IAMD,MAAM;;QACJ,MAAM,KAAK,GAAG;YACZ,4BAA4B,EAAE,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI;YACxD,IAAI,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;YACrF,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,4BAA4B,EAAE,MAAAC,gCAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,mCAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAClG,IAAI,IAAI,CAAC,cAAc,IAAI,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,CAAC;SAC5E,CAAC;QAEF,QACEC,QAACC,UAAI,qDAAC,KAAK,EAAE,KAAK,iBAAe,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,IACzGD,qEACE,KAAK,EAAE;gBACL,CAAC,kBAAkB,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;gBACrC,CAAC,WAAW,IAAI,CAAC,KAAK,IAAI,SAAS,YAAY,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC,cAAc;gBACpF,cAAc,EAAE,IAAI,CAAC,WAAW;gBAChC,cAAc,EAAE,IAAI,CAAC,SAAS;;gBAE9B,MAAM,EAAE,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,QAAQ;;gBAEzC,YAAY,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM;aAC5B,EACD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC,EACnC,IAAI,EAAC,SAAS,IAEdA,mEACE,KAAK,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EACzE,GAAG,EAAE,CAAC,QAAQ,MAAM,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,EAC/C,IAAI,EAAC,QAAQ,IAEbA,mEAAM,IAAI,EAAC,QAAQ,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CACtD,EACPA,kEACE,KAAK,EAAE;gBACL,SAAS,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;gBACjC,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;gBAC/B,QAAQ,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ;aACjC,EACD,IAAI,EAAC,MAAM,IAEXA,oEAAQ,CACJ,EACL,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,KACjCA,uBAAW,KAAK,EAAC,eAAe,EAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAC,WAAW,IACxGA,qBACE,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EACzB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,eAAe,GACjG,CACQ,CACb,CACM,CACJ,EACP;KACH;;;;;;;;;;;;","names":["hasSlotContent","validatePropValue","getColorCSSVariable","h","Host"],"sources":["../../packages/beeq/src/components/tag/bq-tag.types.ts","../../packages/beeq/src/components/tag/helper/index.ts","../../packages/beeq/src/components/tag/scss/bq-tag.scss?tag=bq-tag&encapsulation=shadow","../../packages/beeq/src/components/tag/bq-tag.tsx"],"sourcesContent":["export const TAG_SIZE = ['xsmall', 'small', 'medium'] as const;\nexport type TTagSize = (typeof TAG_SIZE)[number];\n\nexport const TAG_COLOR = ['error', 'gray', 'info', 'success', 'warning'] as const;\nexport type TTagColor = (typeof TAG_COLOR)[number];\n\nexport const TAG_VARIANT = ['outline', 'filled'] as const;\nexport type TTagVariant = (typeof TAG_VARIANT)[number];\n\nexport const TAG_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TTagBorderRadius = (typeof TAG_BORDER_RADIUS)[number];\n","import { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagColor, TTagSize, TTagVariant } from '../bq-tag.types';\n\n/**\n * Function to determine the icon size based on the provided tag size.\n *\n * @param {TTagSize} size - The size of the tag.\n * @returns {number} The corresponding icon size. If the provided size does not match any predefined sizes, the function returns the size for 'medium'.\n */\nexport const iconSize = (size: TTagSize): number => {\n  const xsmall = TAG_SIZE[0];\n  const small = TAG_SIZE[1];\n  const medium = TAG_SIZE[2];\n\n  const SIZE = {\n    [xsmall]: 20,\n    [small]: 20,\n    [medium]: 24,\n  };\n\n  return SIZE[size] || SIZE[medium];\n};\n\n/**\n * Function to determine the tag text color scheme for a given tag type.\n *\n * @param {TTagType} color - The color of the tag.\n * @returns {Object} An object containing the color scheme for the given tag type. If the provided type does not match any predefined types, the function returns the color scheme for 'default'.\n */\nexport const textColor = (color: TTagColor): Partial<{ [K in TTagVariant]: string }> => {\n  const typeError = TAG_COLOR[0];\n  const typeGray = TAG_COLOR[1];\n  const typeInfo = TAG_COLOR[2];\n  const typeSuccess = TAG_COLOR[3];\n  const typeWarning = TAG_COLOR[4];\n\n  const variantOutline = TAG_VARIANT[0];\n  const variantFilled = TAG_VARIANT[1];\n\n  const COLORS = {\n    [typeError]: {\n      [variantOutline]: 'text--danger',\n      [variantFilled]: 'text--alt',\n    },\n    [typeGray]: {\n      [variantOutline]: 'text--primary',\n      [variantFilled]: 'text--alt',\n    },\n    [typeInfo]: {\n      [variantOutline]: 'text--brand',\n      [variantFilled]: 'text--alt',\n    },\n    [typeSuccess]: {\n      [variantOutline]: 'text--success',\n      [variantFilled]: 'text--alt',\n    },\n    [typeWarning]: {\n      [variantOutline]: 'text--warning',\n      [variantFilled]: 'text--alt',\n    },\n  };\n\n  return COLORS[color];\n};\n","/* -------------------------------------------------------------------------- */\n/*                        Tag styles                        */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tag.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n:host([removable][hidden]) {\n  @apply hidden;\n}\n\n.bq-tag {\n  @apply box-border inline-flex select-none flex-row items-center justify-center bg-[--bq-tag--background-color];\n  @apply gap-[--bq-tag--medium-gap]  px-[--bq-tag--medium-padding-x] py-[--bq-tag--medium-padding-y] font-medium leading-regular text-text-primary;\n  @apply rounded-[--bq-tag--border-radius] border-[length:--bq-tag--border-width] border-[color:--bq-tag--border-color];\n  @apply transition-colors duration-300 ease-in-out;\n\n  border-style: var(--bq-tag--border-style);\n}\n\n/* ---------------------------------- Size ---------------------------------- */\n\n.bq-tag__xsmall,\n.bq-tag__small {\n  @apply gap-[--bq-tag--small-gap] px-[--bq-tag--small-padding-x] py-[--bq-tag--small-padding-y];\n\n  /* Apply predefined border radius only if the border property have NO VALUE */\n  &:not(.has-border) {\n    @apply rounded-[--bq-tag--small-border-radius];\n  }\n}\n\n/* --------------------------------- Action --------------------------------- */\n\n.bq-tag__default.is-clickable {\n  @apply cursor-pointer;\n  // Focus\n  @apply focus-visible:focus;\n  // Hover\n  @apply hover:enabled:bg-[color-mix(in_srgb,_var(--bq-tag--background-color),_white_20%)];\n  // Active/Selected\n  @apply [&.active]:text-[--bq-text--alt] [&.active]:[--bq-tag--background-color:--bq-ui--brand];\n  // Disabled\n  @apply disabled:cursor-not-allowed disabled:border-none disabled:opacity-60;\n}\n\n/* ------------------------------ Color styles ------------------------------ */\n\n.bq-tag__error {\n  &.bq-tag__filled {\n    @apply bg-[color:--bq-ui--danger] text-[color:--bq-text--alt];\n  }\n\n  &.bq-tag__outline {\n    @apply bg-[color:--bq-ui--danger-alt] text-[color:--bq-text--danger] [--bq-tag--border-color:--bq-stroke--danger];\n  }\n}\n\n.bq-tag__gray {\n  &.bq-tag__filled {\n    @apply bg-[color:--bq-ui--tertiary] text-[color:--bq-text--alt];\n  }\n\n  &.bq-tag__outline {\n    @apply bg-[color:--bq-ui--primary] text-[color:--bq-text--primary] [--bq-tag--border-color:--bq-stroke--tertiary];\n  }\n}\n\n.bq-tag__info {\n  &.bq-tag__filled {\n    @apply bg-[color:--bq-ui--brand] text-[color:--bq-text--alt];\n  }\n\n  &.bq-tag__outline {\n    @apply bg-[color:--bq-ui--brand-alt] text-[color:--bq-text--brand] [--bq-tag--border-color:--bq-stroke--brand];\n  }\n}\n\n.bq-tag__success {\n  &.bq-tag__filled {\n    @apply bg-[color:--bq-ui--success] text-[color:--bq-text--alt];\n  }\n\n  &.bq-tag__outline {\n    @apply bg-[color:--bq-ui--success-alt] text-[color:--bq-text--success] [--bq-tag--border-color:--bq-tag--border-success];\n  }\n}\n\n.bq-tag__warning {\n  &.bq-tag__filled {\n    @apply bg-[color:--bq-ui--warning] text-[color:--bq-text--alt];\n  }\n\n  &.bq-tag__outline {\n    @apply border-[color:--bq-stroke--warning] bg-[color:--bq-ui--warning-alt] text-[color:--bq-text--warning];\n  }\n}\n\n/* ------------------------------ Close button ------------------------------ */\n\n.bq-tag__close::part(button) {\n  @apply pointer-events-none h-fit border-0 p-0;\n}\n\n/* --------------- Apply the right size to the bq-icon prefix --------------- */\n\n.bq-tag__prefix ::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-tag--icon-prefix-size) !important;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAG_COLOR, TAG_SIZE, TAG_VARIANT, TTagBorderRadius, TTagColor, TTagSize, TTagVariant } from './bq-tag.types';\nimport { iconSize, textColor } from './helper';\nimport { getColorCSSVariable, hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.\n * @part prefix - The `<span>` tag element that acts as prefix container (when icon exists in front of tag).\n * @part text - The `<div>` element containing the text of the tag component.\n */\n@Component({\n  tag: 'bq-tag',\n  styleUrl: './scss/bq-tag.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqTag {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTagElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The corner radius of the Tag (will override size's predefined border) */\n  @Prop({ reflect: true }) border: TTagBorderRadius;\n\n  /** If true, the Tag can be clickable */\n  @Prop({ reflect: true }) clickable: boolean = false;\n\n  /** The color style of the Tag */\n  @Prop({ reflect: true }) color: TTagColor;\n\n  /** If true, the Tag will be disabled (only if clickable = `true`, no interaction allowed) */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** If true, the Tag component will hidden (only if removable = `true`) */\n  @Prop({ reflect: true, mutable: true }) hidden: boolean;\n\n  /** If true, the Tag component can be removed */\n  @Prop({ reflect: true }) removable: boolean = false;\n\n  /** If true, the Tag is selected (only if clickable = `true`) */\n  @Prop({ reflect: true, mutable: true }) selected: boolean = false;\n\n  /** The size of the Tag component */\n  @Prop({ reflect: true }) size: TTagSize = 'medium';\n\n  /** The variant of Tag to apply on top of the variant */\n  @Prop({ reflect: true }) variant: TTagVariant = 'filled';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(TAG_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAG_VARIANT, 'filled', this.el, 'variant');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the tag is close/hidden  */\n  @Event() bqClose: EventEmitter;\n\n  /** Callback handler to be called when the tag is not open/shown */\n  @Event() bqOpen: EventEmitter;\n\n  /** Handler to be called when tag loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTagElement>;\n\n  /** Handler to be called when tag is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqTagElement>;\n\n  /** Handler to be called when tag is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqTagElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /** Method to be called to remove the tag component */\n  @Method()\n  async hide(): Promise<void> {\n    this.handleHide();\n  }\n\n  /** Method to be called to show the tag component */\n  @Method()\n  async show(): Promise<void> {\n    this.handleShow();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleHide = () => {\n    if (!this.isRemovable) return;\n\n    const ev = this.bqClose.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  private handleShow = () => {\n    if (!this.isRemovable) return;\n\n    const ev = this.bqOpen.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.hidden = false;\n    }\n  };\n\n  private handleClick = () => {\n    // If the tag is not clickable or the tag is disabled, we don't want to handle the click\n    if (!this.isClickable || this.disabled) return;\n\n    // Emit a click event on the element\n    const ev = this.bqClick.emit(this.el);\n    // If the event was not prevented, toggle the clickable state\n    if (!ev.defaultPrevented) {\n      this.selected = !this.selected;\n    }\n  };\n\n  private handleBlur = () => {\n    if (!this.isClickable) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (!this.isClickable) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n  };\n\n  private get isClickable(): boolean {\n    return this.clickable && !this.color && !this.hasCustomColor && !this.removable;\n  }\n\n  private get isRemovable(): boolean {\n    return this.removable && !this.isClickable;\n  }\n\n  private get isHidden(): boolean {\n    return this.isRemovable && this.hidden;\n  }\n\n  private get hasCustomColor(): boolean {\n    return this.color !== undefined ? !TAG_COLOR.includes(this.color) : false;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      '--bq-tag--icon-prefix-size': `${iconSize(this.size)}px`,\n      ...(this.border && { '--bq-tag--border-radius': `var(--bq-radius--${this.border})` }),\n      ...(this.color && { '--bq-tag--background-color': getColorCSSVariable(this.color) ?? this.color }),\n      ...(this.hasCustomColor && { '--bq-text--primary': `var(--bq-text--alt)` }),\n    };\n\n    return (\n      <Host style={style} aria-hidden={this.isHidden ? 'true' : 'false'} hidden={this.isHidden ? 'true' : 'false'}>\n        <button\n          class={{\n            [`bq-tag bq-tag__${this.size}`]: true,\n            [`bq-tag__${this.color || 'default'} bq-tag__${this.variant}`]: !this.hasCustomColor,\n            'is-clickable': this.isClickable,\n            'is-removable': this.removable,\n            // Active/Selected state when clickable\n            active: this.isClickable && this.selected,\n            // Fixed border radius\n            'has-border': !!this.border,\n          }}\n          disabled={this.disabled}\n          onBlur={this.handleBlur}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          tabindex={this.isClickable ? 0 : -1}\n          part=\"wrapper\"\n        >\n          <span\n            class={{ 'bq-tag__prefix inline-flex': true, '!hidden': !this.hasPrefix }}\n            ref={(spanElem) => (this.prefixElem = spanElem)}\n            part=\"prefix\"\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <div\n            class={{\n              'text-xs': this.size === 'xsmall',\n              'text-s': this.size === 'small',\n              'text-m': this.size === 'medium',\n            }}\n            part=\"text\"\n          >\n            <slot />\n          </div>\n          {this.isRemovable && !this.disabled && (\n            <bq-button class=\"bq-tag__close\" appearance=\"text\" size=\"small\" onClick={this.handleHide} part=\"btn-close\">\n              <bq-icon\n                size={iconSize(this.size)}\n                name=\"x-circle\"\n                color={this.color && !this.hasCustomColor ? textColor(this.color)[this.variant] : 'text--primary'}\n              />\n            </bq-button>\n          )}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}