@beeq/core 1.11.0-beta.0 → 1.11.0-beta.2

package/dist/cjs/bq-radio-group.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bq-radio-group.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAAO,MAAM,uBAAuB,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU;;ACA1E,MAAM,eAAe,GAAG,womBAAwomB;;ACehqmB,MAAM,OAAO,GAAG;AACd,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,UAAU,EAAE,SAAS;AACrB,IAAA,OAAO,EAAE,UAAU;AACnB,IAAA,SAAS,EAAE,UAAU;CACb;MAmDG,YAAY,GAAA,MAAA;;;;;;;;;;;;;;;AAIf,IAAA,YAAY;AACZ,IAAA,iBAAiB;IACjB,cAAc,GAA8B,IAAI;AACvC,IAAA,gBAAgB,GAAG,IAAI,GAAG,EAAsB;IACzD,mBAAmB,GAAyB,EAAE;;;AAKnC,IAAA,SAAS;;;;;AAOnB,IAAA,YAAY;IACZ,QAAQ,GAAe,GAAG;;;;IAMV,iBAAiB,GAAG,KAAK;;IAGV,YAAY,GAAG,CAAC;;IAG/B,QAAQ,GAAG,KAAK;;IAGhB,QAAQ,GAAG,KAAK;;AAGhB,IAAA,IAAI;;IAGW,WAAW,GAA2B,UAAU;;IAG/D,QAAQ,GAAG,KAAK;;AAGhB,IAAA,yBAAyB;;AAGV,IAAA,KAAK;;;IAM7C,wBAAwB,GAAA;QACtB,MAAM,iBAAiB,GAAG,CAAC;AAC3B,QAAA,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,EAAE,IAAI,CAAC,YAAY,CAAC;AAE7E,QAAA,IAAI,sBAAsB,KAAK,IAAI,CAAC,YAAY,EAAE;AAChD,YAAA,IAAI,CAAC,YAAY,GAAG,sBAAsB;;AAG5C,QAAA,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE;QAChC,IAAI,CAAC,iBAAiB,GAAGA,iBAAQ,CAAC,CAAC,KAAoD,KAAU;AAC/F,YAAA,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC;AAC5B,SAAC,EAAE,IAAI,CAAC,YAAY,CAAC;;IAIvB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG;QAC1C,IAAI,CAAC,qBAAqB,EAAE;;IAO9B,qBAAqB,GAAA;QACnB,IAAI,CAAC,qBAAqB,EAAE;;IAI9B,eAAe,GAAA;QACbC,uBAAiB,CAAC,uBAAuB,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,aAAa,CAAC;;IAIhF,oBAAoB,GAAA;QAClB,IAAI,CAAC,kBAAkB,EAAE;;IAI3B,iBAAiB,GAAA;QACf,IAAI,CAAC,qBAAqB,EAAE;QAC5B,IAAI,CAAC,kBAAkB,EAAE;;QAGzB,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;QAC5F,IAAI,eAAe,EAAE;AACnB,YAAA,IAAI,CAAC,YAAY,GAAG,eAAe;AACnC,YAAA,IAAI,CAAC,iBAAiB,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;;aACnE;AACL,YAAA,IAAI,CAAC,YAAY,GAAG,SAAS;;;;;;;AASxB,IAAA,QAAQ;;AAGR,IAAA,MAAM;;;;IAMf,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;QAC9B,IAAI,CAAC,wBAAwB,EAAE;QAC/B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;QAE/C,IAAI,CAAC,kBAAkB,EAAE;QACzB,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,iBAAiB,EAAE,MAAM,EAAE;;IAGlC,sBAAsB,GAAA;QACpB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;QAC/C,IAAI,CAAC,kBAAkB,EAAE;;IAG3B,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY;QAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;QAC/C,IAAI,CAAC,kBAAkB,EAAE;QACzB,IAAI,CAAC,kBAAkB,EAAE;;;;IAO3B,MAAM,SAAS,CAACC,OAAiE,EAAA;QAC/E,IAAI,CAACC,iCAA2B,CAACD,OAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE;QAElD,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAGA,OAAK,CAAC,MAAM;AACtC,QAAA,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK;YAAE;QAE1B,qBAAqB,CAAC,MAAK;YACzB,IAAIA,OAAK,CAAC,gBAAgB;gBAAE;AAC5B,YAAA,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;AACnC,SAAC,CAAC;;AAIJ,IAAA,WAAW,CAACA,OAA+D,EAAA;QACzE,IAAI,CAACC,iCAA2B,CAACD,OAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE;QAElD,MAAM,SAAS,GAA0B,OAAO,CAACA,OAAK,CAAC,MAAM,CAAC,GAAG,CAAC;AAClE,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,IAAI,CAAC,sBAAsB,CAACA,OAAK,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC;;AAI7D,IAAA,SAAS,CAACA,OAAsC,EAAA;QAC9C,IAAI,CAACC,iCAA2B,CAACD,OAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE;QAElD,MAAM,qBAAqB,GAAGE,mBAAS,CAAC,IAAI,CAAC,cAAc,CAAC;AAC5D,QAAA,IAAI,CAAC,cAAc,GAAGF,OAAK,CAAC,MAAM;QAElC,IAAI,qBAAqB,EAAE;YACzBA,OAAK,CAAC,eAAe,EAAE;;;AAK3B,IAAA,QAAQ,CAACA,OAAsC,EAAA;QAC7C,IAAI,CAACC,iCAA2B,CAACD,OAAK,EAAE,IAAI,CAAC,EAAE,CAAC;YAAE;;AAGlD,QAAA,IAAIG,WAAK,CAAC,IAAI,CAAC,cAAc,CAAC;YAAE;QAEhCH,OAAK,CAAC,eAAe,EAAE;QAEvB,qBAAqB,CAAC,MAAK;AACzB,YAAA,IAAI,IAAI,CAAC,cAAc,KAAKA,OAAK,CAAC,MAAM;gBAAE;AAE1C,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI;YAC1B,IAAI,CAAC,MAAM,CAAC,IAAI,CAACA,OAAK,CAAC,MAAM,CAAC;AAChC,SAAC,CAAC;;;;;;;;;;;;AAeJ;;;AAGG;IACK,uBAAuB,GAAG,MAAW;AAC3C,QAAA,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE;QAC7B,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;;QAEzF,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC;;QAE5D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,CAAC,QAAQ,GAAG,IAAI,GAAG,GAAG;;QAEnF,IAAI,CAAC,qBAAqB,EAAE;AAC9B,KAAC;AAED;;;AAGG;IACK,qBAAqB,GAAG,MAAW;AACzC,QAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC;YAAE;;AAG3C,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,KAAK,MAAM,KAAK,CAAC,QAAQ,GAAG,EAAE,CAAC,CAAC;YAClE;;;AAIF,QAAA,IAAI,cAA8C;;AAGlD,QAAA,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,CAAC;;AAGxE,QAAA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,EAAE;YACjC,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;;;QAIvF,IAAI,CAAC,cAAc,EAAE;AACnB,YAAA,cAAc,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;;;QAI5E,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACzC,YAAA,KAAK,CAAC,QAAQ,GAAG,KAAK,KAAK,cAAc,GAAG,CAAC,GAAG,EAAE;AACpD,SAAC,CAAC;AACJ,KAAC;AAED;;;AAGG;AACK,IAAA,oBAAoB,GAAG,CAAC,MAA0B,KAAU;;QAElE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;AACrD,YAAA,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,KAAK;AACjC,YAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,EAAE;;AAGjC,QAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACrB,QAAA,MAAM,CAAC,QAAQ,GAAG,CAAC;QACnB,MAAM,CAAC,MAAM,EAAE;AAEf,QAAA,IAAI,CAAC,YAAY,GAAG,MAAM;AAC1B,QAAA,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK;QACzB,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC;QAEhD,IAAI,CAAC,qBAAqB,EAAE;AAC9B,KAAC;AAED;;AAEG;IACK,qBAAqB,GAAG,MAAW;AACzC,QAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,KAAK,CAAC;YAAE;AAE3C,QAAA,MAAM,EAAE,iBAAiB,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI;AAEnE,QAAA,KAAK,MAAM,KAAK,IAAI,IAAI,CAAC,mBAAmB,EAAE;AAC5C,YAAA,KAAK,CAAC,iBAAiB,GAAG,iBAAiB;YAC3C,KAAK,CAAC,OAAO,GAAG,KAAK,KAAK,KAAK,CAAC,KAAK;;;AAGrC,YAAA,KAAK,CAAC,aAAa,GAAG,QAAQ;AAC9B,YAAA,KAAK,CAAC,IAAI,GAAG,IAAI;AACjB,YAAA,KAAK,CAAC,QAAQ,GAAG,QAAQ;;AAE7B,KAAC;AAED;;;;;AAKG;AACK,IAAA,sBAAsB,GAAG,CAAC,aAAiC,EAAE,SAAoB,KAAU;;AAEjG,QAAA,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,IAAI,CAAC;YAAE;QAE1C,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,OAAO,CAAC,aAAa,CAAC;;QAEpE,IAAI,YAAY,KAAK,EAAE;YAAE;AAEzB,QAAA,MAAM,WAAW,GAAGI,6BAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,YAAY,EAAE,SAAS,CAAC;AACrF,QAAA,IAAI,CAAC,oBAAoB,CAAC,WAAW,CAAC;AACxC,KAAC;IAEO,kBAAkB,GAAG,YAA0B;QACrD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,yBAAyB,EAAE,KAAK,EAAE,GAAG,IAAI;;AAEtE,QAAA,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE;AAEzB,QAAA,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,CAACD,WAAK,CAAC,KAAK,CAAC,CAAC,EAAE;;AAE5C,YAAA,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC;AAC9B,YAAA,SAAS,EAAE,WAAW,CAAC,EAAE,CAAC;YAC1B;;QAGF,MAAM,UAAU,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC;AAC9C,QAAA,IAAI,CAAC,UAAU;YAAE;;AAEjB,QAAA,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC;;AAEhC,QAAA,SAAS,EAAE,WAAW,CACpB,EAAE,YAAY,EAAE,IAAI,EAAE,EACtB,yBAAyB,IAAI,yBAAyB,EACtD,MAAM,UAAU,CAAC,cAAc,EAAE,CAClC;AACH,KAAC;AAED;;;;AAIG;IACK,kBAAkB,GAAG,MAAW;AACtC,QAAA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAU;QAEhC,IAAI,IAAI,CAAC,QAAQ;AAAE,YAAA,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC;QACzC,IAAI,IAAI,CAAC,WAAW;AAAE,YAAA,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC;;AAGlD,QAAA,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE;AAC9B,QAAA,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC9D,KAAC;IAEO,gBAAgB,GAAG,MAAW;QACpC,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,qBAAqB,EAAE;AAC9B,KAAC;;;;IAMD,MAAM,GAAA;AACJ,QAAA,QACEE,QAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAC3BD,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAE,mBAClD,eAAe,EAAA,iBAAA,EACb,uBAAuB,EACxB,eAAA,EAAA,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,MAAM,EAAA,EAEXA,OAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAA,EAClBA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,sBAAsB,EAAC,IAAI,EAAC,OAAO,GAAG,CACxC,EACTA,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAC,OAAO,EAAA,EAC7DA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,EAAE,EAAC,eAAe,EAAC,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAI,CAAA,CAC5D,CACG,CACN;;;;;;;;;;;;;;;;;;","names":["debounce","validatePropValue","event","isEventTargetChildOfElement","isDefined","isNil","getNextElement","h","Host"],"sources":["../../packages/beeq/src/components/radio-group/bq-radio-group.types.ts","../../packages/beeq/src/components/radio-group/scss/bq-radio-group.scss?tag=bq-radio-group&encapsulation=shadow","../../packages/beeq/src/components/radio-group/bq-radio-group.tsx"],"sourcesContent":["export const RADIO_GROUP_ORIENTATION = ['horizontal', 'vertical'] as const;\nexport type TRadioGroupOrientation = (typeof RADIO_GROUP_ORIENTATION)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Radio group styles                               */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply inline-block;\n}\n\n.bq-radio-group {\n  @apply m-b-0 m-i-0;\n\n  &:not(.has-fieldset) {\n    @apply border-0 m-b-0 m-i-0 p-b-0 p-i-0;\n  }\n\n  &--horizontal {\n    @apply flex;\n  }\n\n  &--vertical {\n    @apply flex flex-col;\n  }\n}\n","import { AttachInternals, Component, Element, Event, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { RADIO_GROUP_ORIENTATION } from './bq-radio-group.types';\nimport type { TRadioGroupOrientation } from './bq-radio-group.types';\nimport {\n  debounce,\n  getNextElement,\n  isDefined,\n  isEventTargetChildOfElement,\n  isNil,\n  TDebounce,\n  validatePropValue,\n} from '../../shared/utils';\n\nconst KEY_MAP = {\n  ArrowDown: 'forward',\n  ArrowRight: 'forward',\n  ArrowUp: 'backward',\n  ArrowLeft: 'backward',\n} as const;\n\ntype Direction = (typeof KEY_MAP)[keyof typeof KEY_MAP];\n\n/**\n * The radio group is a user interface component that groups radio buttons to enable a single selection within the group.\n *\n * @example How to use it\n * ```html\n * <bq-radio-group fieldset value=\"option1\">\n *   <span slot=\"label\">radio group</span>\n *   <bq-radio value=\"option1\">Radio option 1</bq-radio>\n *   <bq-radio value=\"option2\">Radio option 2</bq-radio>\n *   <bq-radio value=\"option3\">Radio option 3</bq-radio>\n * </bq-radio-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n *\n * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {number} debounce-time - A number representing the delay time (in milliseconds) that bqChange event handler gets triggered once the value change\n * @attr {boolean} disabled - If `true` radio inputs are disabled\n * @attr {boolean} fieldset - If `true` displays fieldset\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {\"horizontal\" | \"vertical\"} orientation - The display orientation of the radio inputs\n * @attr {boolean} required - If `true`, the radio group is required\n * @attr {string} required-validation-message - The native form validation message when the radio group is required\n * @attr {string} value - The display orientation of the radio inputs\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the radio state changes\n *\n * @slot - The bq-radio items to group\n * @slot label - The label content of radio group\n *\n * @part base - The component's internal wrapper of the radio components.\n * @part label - The `<legend>` element that holds the text content.\n * @part group - The `<div>` element that holds the radio inputs.\n */\n@Component({\n  tag: 'bq-radio-group',\n  styleUrl: './scss/bq-radio-group.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqRadioGroup {\n  // Own Properties\n  // ====================\n\n  private initialValue?: string;\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqRadioElement }>;\n  private focusedBqRadio: HTMLBqRadioElement | null = null;\n  private readonly radioElementsSet = new Set<HTMLBqRadioElement>();\n  private cachedRadioElements: HTMLBqRadioElement[] = [];\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqRadioGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() checkedRadio?: HTMLBqRadioElement;\n  @State() tabIndex: '0' | '-1' = '0';\n\n  // Public Property API\n  // ========================\n\n  /** If true, all radio inputs in the group will display a background on hover */\n  @Prop({ reflect: true }) backgroundOnHover = false;\n\n  /** A number representing the delay time (in milliseconds) that `bqChange` event handler gets triggered once the value change */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true radio inputs are disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** If true displays fieldset */\n  @Prop({ reflect: true }) fieldset = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The display orientation of the radio inputs */\n  @Prop({ reflect: true, mutable: true }) orientation: TRadioGroupOrientation = 'vertical';\n\n  /** If true, the radio group is required */\n  @Prop({ reflect: true }) required = false;\n\n  /** The native form validation message when the radio group is required */\n  @Prop({ reflect: true }) requiredValidationMessage?: string;\n\n  /** A string representing the value of the radio. */\n  @Prop({ reflect: true, mutable: true }) value?: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('debounceTime')\n  handleDebounceTimeChange() {\n    const MIN_DEBOUNCE_TIME = 0;\n    const normalizedDebounceTime = Math.max(MIN_DEBOUNCE_TIME, this.debounceTime);\n\n    if (normalizedDebounceTime !== this.debounceTime) {\n      this.debounceTime = normalizedDebounceTime;\n    }\n\n    this.debouncedBqChange?.cancel();\n    this.debouncedBqChange = debounce((event: { value: string; target: HTMLBqRadioElement }): void => {\n      this.bqChange?.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    this.tabIndex = this.disabled ? '-1' : '0';\n    this.updateRadioTabIndexes();\n  }\n\n  @Watch('backgroundOnHover')\n  @Watch('disabled')\n  @Watch('name')\n  @Watch('required')\n  handleGroupProperties() {\n    this.updateRadioProperties();\n  }\n\n  @Watch('orientation')\n  checkPropValues() {\n    validatePropValue(RADIO_GROUP_ORIENTATION, 'vertical', this.el, 'orientation');\n  }\n\n  @Watch('required')\n  handleRequiredChange() {\n    this.updateFormValidity();\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.updateRadioProperties();\n    this.updateFormValidity();\n\n    // Find and update the checked radio based on the new value\n    const newCheckedRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n    if (newCheckedRadio) {\n      this.checkedRadio = newCheckedRadio;\n      this.debouncedBqChange?.({ value: this.value, target: newCheckedRadio });\n    } else {\n      this.checkedRadio = undefined;\n    }\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the radio state changes */\n  @Event() bqChange: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n  /** Handler to be called when the radio loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.handleDebounceTimeChange();\n    this.internals.setFormValue(this.value ?? null);\n\n    this.updateCustomStates();\n    this.updateFormValidity();\n  }\n\n  disconnectedCallback() {\n    this.debouncedBqChange?.cancel();\n  }\n\n  formAssociatedCallback() {\n    this.internals.setFormValue(this.value ?? null);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n    this.internals.setFormValue(this.value ?? null);\n    this.updateFormValidity();\n    this.updateCustomStates();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { capture: true })\n  async onBqClick(event: CustomEvent<{ value: string; target: HTMLBqRadioElement }>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const { target, value } = event.detail;\n    if (value === this.value) return;\n\n    requestAnimationFrame(() => {\n      if (event.defaultPrevented) return;\n      this.updateRadioSelection(target);\n    });\n  }\n\n  @Listen('bqKeyDown')\n  onBqKeyDown(event: CustomEvent<{ key: string; target: HTMLBqRadioElement }>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const direction: Direction | undefined = KEY_MAP[event.detail.key];\n    if (!direction) return;\n\n    this.focusRadioInputSibling(event.detail.target, direction);\n  }\n\n  @Listen('bqFocus', { capture: true })\n  onBqFocus(event: CustomEvent<HTMLBqRadioElement>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    const shouldStopPropagation = isDefined(this.focusedBqRadio);\n    this.focusedBqRadio = event.detail;\n\n    if (shouldStopPropagation) {\n      event.stopPropagation();\n    }\n  }\n\n  @Listen('bqBlur', { capture: true })\n  onBqBlur(event: CustomEvent<HTMLBqRadioElement>) {\n    if (!isEventTargetChildOfElement(event, this.el)) return;\n\n    // NOTE: if focusedBqRadio is nil that means the event occured from this component\n    if (isNil(this.focusedBqRadio)) return;\n\n    event.stopPropagation();\n\n    requestAnimationFrame(() => {\n      if (this.focusedBqRadio !== event.detail) return;\n\n      this.focusedBqRadio = null;\n      this.bqBlur.emit(event.detail);\n    });\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  /**\n   * Initializes the radio elements set by querying the host element for `ds-radio` elements.\n   * This is done to avoid re-querying the host element for radio elements on every change.\n   */\n  private initializeRadioElements = (): void => {\n    this.radioElementsSet.clear();\n    this.el.querySelectorAll('bq-radio').forEach((radio) => this.radioElementsSet.add(radio));\n    // Caching the radio elements in an array for faster access and iteration\n    this.cachedRadioElements = Array.from(this.radioElementsSet);\n    // Set the tabIndex of the host element to -1 if there are no radio elements or the group is disabled, otherwise set it to 0\n    this.tabIndex = this.cachedRadioElements.length === 0 || this.disabled ? '-1' : '0';\n    // Set initial tabIndex for all radios\n    this.updateRadioTabIndexes();\n  };\n\n  /**\n   * Sets tabIndex for all radio elements based on current state\n   * Handles all scenarios: disabled state, checked radio, value matching, fallback to first\n   */\n  private updateRadioTabIndexes = (): void => {\n    if (this.cachedRadioElements.length === 0) return;\n\n    // If disabled, all radios get tabIndex -1\n    if (this.disabled) {\n      this.cachedRadioElements.forEach((radio) => (radio.tabIndex = -1));\n      return;\n    }\n\n    // Find which radio should be focusable\n    let focusableRadio: HTMLBqRadioElement | undefined;\n\n    // Priority 1: Currently checked radio\n    focusableRadio = this.cachedRadioElements.find((radio) => radio.checked);\n\n    // Priority 2: Radio matching current value\n    if (!focusableRadio && this.value) {\n      focusableRadio = this.cachedRadioElements.find((radio) => radio.value === this.value);\n    }\n\n    // Priority 3: First enabled radio (fallback)\n    if (!focusableRadio) {\n      focusableRadio = this.cachedRadioElements.find((radio) => !radio.disabled);\n    }\n\n    // Apply tabIndex to all radios\n    this.cachedRadioElements.forEach((radio) => {\n      radio.tabIndex = radio === focusableRadio ? 0 : -1;\n    });\n  };\n\n  /**\n   * Updates the radio selection and focus.\n   * @param target - The radio element to update.\n   */\n  private updateRadioSelection = (target: HTMLBqRadioElement): void => {\n    // Only uncheck the previously checked radio if it's different\n    if (this.checkedRadio && this.checkedRadio !== target) {\n      this.checkedRadio.checked = false;\n      this.checkedRadio.tabIndex = -1;\n    }\n\n    target.checked = true;\n    target.tabIndex = 0;\n    target.vFocus();\n\n    this.checkedRadio = target;\n    this.value = target.value;\n    this.internals?.setFormValue(this.value ?? null);\n\n    this.updateRadioTabIndexes();\n  };\n\n  /**\n   * Synchronizes properties of child radio elements with the group's state.\n   */\n  private updateRadioProperties = (): void => {\n    if (this.cachedRadioElements.length === 0) return;\n\n    const { backgroundOnHover, disabled, name, required, value } = this;\n\n    for (const radio of this.cachedRadioElements) {\n      radio.backgroundOnHover = backgroundOnHover;\n      radio.checked = value === radio.value;\n      // This will allows us to force all radio elements to be disabled\n      // while keeping the disabled state of the radio element if it was set individually by the user\n      radio.forceDisabled = disabled;\n      radio.name = name;\n      radio.required = required;\n    }\n  };\n\n  /**\n   * Focuses the next/previous radio element in the group based on the current target.\n   * Handles circular navigation and skips disabled elements.\n   * @param currentTarget - The currently focused radio element\n   * @param direction - The navigation direction ('forward' | 'backward')\n   */\n  private focusRadioInputSibling = (currentTarget: HTMLBqRadioElement, direction: Direction): void => {\n    // If there is none or only one radio element, there will be no sibling to focus\n    if (this.cachedRadioElements.length <= 1) return;\n\n    const currentIndex = this.cachedRadioElements.indexOf(currentTarget);\n    // If the index of the radio element target is not found, it means that it's not part of the group\n    if (currentIndex === -1) return;\n\n    const nextElement = getNextElement(this.cachedRadioElements, currentIndex, direction);\n    this.updateRadioSelection(nextElement);\n  };\n\n  private updateFormValidity = async (): Promise<void> => {\n    const { internals, required, requiredValidationMessage, value } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!required || (required && !isNil(value))) {\n      // If the radio group is not required or has a value, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    const firstRadio = this.cachedRadioElements[0];\n    if (!firstRadio) return;\n    // If the radio group is required and has no value, set the validity state to invalid\n    internals?.states.add('invalid');\n    // We need to pass the native input element to the setValidity method as anchor element\n    internals?.setValidity(\n      { valueMissing: true },\n      requiredValidationMessage ?? 'Please select an option',\n      await firstRadio.getNativeInput(),\n    );\n  };\n\n  /**\n   * Updates the custom states based on the component properties.\n   * The custom states can be used to style the component based on the component properties.\n   * The custom states are `disabled`, based on the component properties.\n   */\n  private updateCustomStates = (): void => {\n    const states = new Set<string>();\n\n    if (this.disabled) states.add('disabled');\n    if (this.orientation) states.add(this.orientation);\n\n    // Update states\n    this.internals?.states.clear();\n    states.forEach((state) => this.internals?.states.add(state));\n  };\n\n  private handleSlotChange = (): void => {\n    this.initializeRadioElements();\n    this.updateRadioProperties();\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host tabindex={this.tabIndex}>\n        <fieldset\n          class={{ 'bq-radio-group': true, 'has-fieldset': this.fieldset }}\n          aria-controls=\"bq-radiogroup\"\n          aria-labelledby=\"bq-radio-group__label\"\n          aria-disabled={this.disabled}\n          aria-required={this.required}\n          disabled={this.disabled}\n          role=\"radiogroup\"\n          part=\"base\"\n        >\n          <legend part=\"label\">\n            <slot id=\"bq-radiogroup__label\" name=\"label\" />\n          </legend>\n          <div class={`bq-radio-group--${this.orientation}`} part=\"group\">\n            <slot id=\"bq-radiogroup\" onSlotchange={this.handleSlotChange} />\n          </div>\n        </fieldset>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-radio.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["../../packages/beeq/src/components/radio/scss/bq-radio.scss?tag=bq-radio&encapsulation=shadow","../../packages/beeq/src/components/radio/bq-radio.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Radio styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-radio.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-radio {\n  @apply box-border inline-flex cursor-pointer items-center justify-center gap-2 transition-[background-color] duration-300;\n  @apply rounded-s p-b-xs p-i-xs;\n\n  &.is-disabled {\n    @apply cursor-not-allowed opacity-60;\n\n    &.is-checked .bq-radio__circle {\n      @apply border-icon-brand;\n    }\n\n    &.is-checked .bq-radio__checked {\n      @apply bg-ui-brand;\n    }\n  }\n\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  &.is-checked:not(.is-disabled) {\n    .bq-radio__circle {\n      @apply border-icon-brand;\n    }\n\n    .bq-radio__checked {\n      @apply bg-ui-brand;\n    }\n  }\n\n  &:not(.is-disabled):hover .bq-radio__circle {\n    @apply border-hover-icon-brand;\n  }\n\n  &.is-checked:not(.is-disabled):hover {\n    .bq-radio__checked,\n    .bq-radio__circle {\n      @apply border-hover-icon-brand;\n    }\n  }\n}\n\n.bq-radio__input {\n  @apply sr-only;\n\n  &:focus-visible {\n    ~ .bq-radio__circle {\n      @apply focus;\n    }\n  }\n}\n\n.bq-radio__control {\n  @apply box-border flex items-center justify-center rounded-full bs-[--bq-radio--size] is-[--bq-radio--size] p-b-[2px] p-i-[2px];\n}\n\n.bq-radio__circle {\n  @apply relative box-border flex items-center justify-center rounded-full border-[length:--bq-radio--border-width] border-solid border-hover-icon-primary bs-full is-full p-b-[3px] p-i-[3px];\n}\n\n.bq-radio__checked {\n  @apply rounded-full bs-full is-full;\n}\n\n.bq-radio__label {\n  @apply font-medium leading-regular text-primary;\n}\n\n.bq-radio__circle,\n.bq-radio__checked,\n.bq-radio__label {\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n}\n","import { Component, Element, Event, h, Host, Method, Prop } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * The radio button is a user interface element that allows users to select a single option.\n *\n * @example How to use it\n * ```html\n * <bq-radio value=\"option1\">Radio option 1</bq-radio>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/9718e1-radio-button/b/09d7b1\n * @status stable\n *\n * @attr {boolean} background-on-hover - If `true`, the radio displays background on hover\n * @attr {boolean} checked - If `true` radio input is checked\n * @attr {boolean} disabled - If `true` radio input is disabled\n * @attr {string} form-id - The form ID that the radio input is associated with\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted\n * @attr {boolean} value - A string representing the value of the radio\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n * @method getNativeInput - Returns the native `<input>` HTML element used under the hood\n *\n * @event bqBlur - Handler to be called when the radio loses focus\n * @event bqClick - Handler to be called when the radio state changes\n * @event bqFocus - Handler to be called when the radio gets focused\n * @event bqKeyDown - The handler is to be called when the radio key is pressed\n *\n * @slot - The bq-radio item\n *\n * @part base - The component's internal wrapper of the radio component.\n * @part input - The native HTML `<input type=\"radio\">` used under the hood.\n * @part radio - The component's internal wrapper of the radio component.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-radio--size - Radio size\n * @cssprop --bq-radio--border-width - Radio border width\n */\n@Component({\n  tag: 'bq-radio',\n  styleUrl: './scss/bq-radio.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqRadio {\n  // Own Properties\n  // ====================\n  private inputElement: HTMLInputElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqRadioElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true radio displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover = false;\n\n  /** If true radio input is checked */\n  @Prop({ reflect: true, mutable: true }) checked = false;\n\n  /** If true radio input is disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** @internal Used by the radio-group parent component to force the disabled state of the radio input */\n  @Prop({ reflect: true }) forceDisabled = false;\n\n  /** The form ID that the radio input is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the radio before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the radio. */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the radio state changes */\n  @Event() bqClick: EventEmitter<{ value: string; target: HTMLBqRadioElement }>;\n\n  /** Handler to be called when the radio gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqRadioElement>;\n\n  /** Handler to be called when the radio loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqRadioElement>;\n\n  /** Handler to be called when the radio key is pressed */\n  @Event() bqKeyDown: EventEmitter<{ key: string; target: HTMLBqRadioElement }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElement?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElement?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElement?.blur();\n  }\n\n  /**\n   * Returns the native `<input>` HTML element used under the hood.\n   */\n  @Method()\n  async getNativeInput() {\n    return this.inputElement;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = (event: MouseEvent) => {\n    // Prevent the native input click default behavior\n    event.preventDefault();\n    if (this.disabled) return;\n\n    // Emit the event without changing state\n    // Let the radio-group handle all state management and event propagation\n    const bqClickEvent = this.bqClick.emit({ value: this.value, target: this.el });\n    if (bqClickEvent.defaultPrevented) {\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleOnKeyDown = (event: KeyboardEvent) => {\n    this.bqKeyDown.emit({ key: event.key, target: this.el });\n  };\n\n  private get isDisabled() {\n    return this.disabled || this.forceDisabled;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        <label\n          class={{\n            'bq-radio group': true,\n            'is-disabled': this.isDisabled,\n            'is-checked': this.checked,\n            'has-background': this.backgroundOnHover,\n          }}\n          part=\"base\"\n        >\n          <div class=\"bq-radio__control\">\n            <input\n              class=\"bq-radio__input\"\n              ref={(element) => (this.inputElement = element)}\n              type=\"radio\"\n              form={this.formId}\n              name={this.name}\n              value={this.value}\n              required={this.required}\n              disabled={this.isDisabled}\n              checked={this.checked}\n              onBlur={this.handleOnBlur}\n              onClick={this.handleClick}\n              onFocus={this.handleOnFocus}\n              onKeyDown={this.handleOnKeyDown}\n              aria-checked={this.checked ? 'true' : 'false'}\n              aria-disabled={this.isDisabled ? 'true' : 'false'}\n              aria-labelledby=\"bq-radio__label\"\n              part=\"input\"\n            />\n            <div class=\"bq-radio__circle\" part=\"radio\">\n              <div class=\"bq-radio__checked\" />\n            </div>\n          </div>\n          <span\n            class=\"bq-radio__label group-hover:text-text-primary-hover group-[.is-disabled]:text-text-primary-disabled\"\n            part=\"label\"\n          >\n            <slot id=\"bq-radio__label\"></slot>\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-select.entry.cjs.js","mappings":"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","names":["isNil","stringToArray","isHTMLElement","isDefined","debounce","hasSlotContent","index","h"],"sources":["../../packages/beeq/src/components/select/scss/bq-select.scss?tag=bq-select&encapsulation=shadow","../../packages/beeq/src/components/select/bq-select.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Select styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-select.variables';\n\n:host {\n  @apply block w-full;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                            Label and Helper text                           */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__label {\n  @apply flex items-center m-be-[--bq-select--label-margin-bottom];\n  @apply text-[length:--bq-select--label-text-size] text-[color:--bq-select--label-text-color];\n}\n\n.bq-select__helper-text {\n  @apply text-[length:--bq-select--helper-text-size] text-[color:--bq-select--helper-text-color] m-bs-[--bq-select--helper-margin-top];\n}\n\n.bq-select__helper-text.validation-error {\n  @apply text-danger;\n}\n\n.bq-select__helper-text.validation-success {\n  @apply text-success;\n}\n\n.bq-select__helper-text.validation-warning {\n  @apply text-warning;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Select input group control                         */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__dropdown:has(:focus-within, :focus-visible) {\n  // The focus state will be controlled by the dropdown element\n  // if any of its children has focus, the dropdown will set the focus state to the .bq-select__control\n  .bq-select__control {\n    --bq-ring-width: 1px;\n    --bq-ring-offset-width: 0;\n    --bq-ring-color-focus: var(--bq-select--border-color-focus);\n\n    @apply focus border-[color:--bq-select--border-color-focus];\n  }\n}\n\n.bq-select__control {\n  @apply flex items-center transition-[border-color,box-shadow] is-full;\n  // Border\n  @apply rounded-[--bq-select--border-radius] border-[length:--bq-select--border-width] border-[color:--bq-select--border-color];\n  // Padding\n  @apply pe-[--bq-select--padding-end] ps-[--bq-select--padding-start] p-b-[var(--bq-select--paddingY)];\n  // Text\n  @apply select-none text-[length:--bq-select--text-size] text-[color:--bq-select--text-color] placeholder:text-[color:--bq-select--text-placeholder-color];\n  // Hover\n  @apply [&:not(.disabled):not(:focus-within)]:hover:border-hover-brand;\n\n  border-style: var(--bq-select--border-style);\n\n  // Enable clear button whenever the input group control is hovered or has focus\n  &:not(.disabled):hover,\n  &:not(.disabled):focus-within {\n    .bq-select__control--clear {\n      @apply inline-block;\n    }\n  }\n}\n\n.bq-select__control.disabled {\n  @apply cursor-not-allowed opacity-60;\n}\n\n/* ------------------------------- Validation ------------------------------- */\n\n.bq-select__control.validation-error {\n  @apply border-danger [&:not(.disabled):not(:focus-within)]:hover:border-hover-danger;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.danger);\n\n    @apply border-active-danger;\n  }\n}\n\n.bq-select__control.validation-success {\n  @apply border-success [&:not(.disabled):not(:focus-within)]:hover:border-hover-success;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.success);\n\n    @apply border-active-success;\n  }\n}\n\n.bq-select__control.validation-warning {\n  @apply border-warning [&:not(.disabled):not(:focus-within)]:hover:border-hover-warning;\n\n  &:not(.disabled):focus-within {\n    --bq-ring-color-focus: theme(stroke.warning);\n\n    @apply border-active-warning;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Native HTML Input                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__control--input {\n  @apply flex-auto cursor-inherit select-none appearance-none bg-inherit font-inherit text-[length:inherit] text-inherit;\n  @apply m-0 border-none p-0 min-bs-[var(--bq-select--icon-size)] min-is-0 focus:outline-none focus-visible:outline-none;\n\n  box-shadow: none;\n  font-weight: inherit;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Clear button                                */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__control--clear::part(button) {\n  // Since the clear button is inside the input group control,\n  // we need to reset the focus ring styles\n  --bq-ring-width: initial;\n  --bq-ring-offset-width: initial;\n  --bq-ring-color-focus: initial;\n\n  @apply rounded-xs border-none p-0 bs-auto;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                              Prefix and suffix                             */\n/* -------------------------------------------------------------------------- */\n\n.bq-select__control--prefix,\n.bq-select__control--suffix {\n  @apply pointer-events-none flex items-center text-[color:var(--bq-select--text-color)];\n}\n\n.bq-select__control--prefix {\n  @apply me-[--bq-select--gap];\n}\n\n.bq-select__control--suffix {\n  @apply ms-[--bq-select--gap] transition-transform duration-300 ease-in-out;\n}\n\n.bq-select__tags {\n  @apply me-xs2 flex flex-1 gap-xs2;\n\n  bq-tag,\n  ::slotted(bq-tag) {\n    @apply inline-flex;\n  }\n\n  bq-tag::part(text) {\n    @apply text-nowrap leading-small;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                         Slotted and internal icons                         */\n/* -------------------------------------------------------------------------- */\n\nbq-icon,\n::slotted(bq-icon) {\n  --bq-icon--size: var(--bq-select--icon-size) !important;\n}\n","import { AttachInternals, Component, Element, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport {\n  debounce,\n  hasSlotContent,\n  isDefined,\n  isHTMLElement,\n  isNil,\n  stringToArray,\n  TDebounce,\n} from '../../shared/utils';\nimport type { TInputValidation } from '../input/bq-input.types';\n\nexport type TSelectValue = string | string[];\n\n/**\n * The select input component lets users choose from a predefined list, commonly used in forms for easy data selection.\n *\n * @example How to use it\n * ```html\n * <bq-select placeholder=\"Placeholder\">\n *   <label slot=\"label\">Select label</label>\n *   <span slot=\"helper-text\">\n *     <bq-icon name=\"star\"></bq-icon>\n *       Helper text\n *   </span>\n *\n *   <bq-option value=\"1\">Option 1</bq-option>\n *   <bq-option value=\"2\">Option 2</bq-option>\n *   <bq-option value=\"3\">Option 3</bq-option>\n * </bq-select>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/41989d-select/b/09d7b1\n * @status stable\n *\n * @dependency bq-button\n * @dependency bq-dropdown\n * @dependency bq-icon\n * @dependency bq-option-list\n * @dependency bq-tag\n *\n * @attr {boolean} autofocus - If `true`, the Select input will be focused on component render.\n * @attr {string} clear-button-label - The clear button aria label.\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n * @attr {boolean} disable-clear - If `true`, the clear button won't be displayed.\n * @attr {boolean} disabled - Indicates whether the Select input is disabled and cannot be interacted with.\n * @attr {number} distance - Represents the distance (gutter or margin) between the Select panel and the input element.\n * @attr {string} form - The ID of the form that Select input field belongs to.\n * @attr {boolean} keep-open-on-select - If `true`, the Select panel will remain open after a selection is made.\n * @attr {number} max-tags-visible - The maximum number of tags to display when multiple selection is enabled.\n * @attr {boolean} multiple - If `true`, the Select input will allow multiple selections.\n * @attr {string} name - The Select input name.\n * @attr {boolean} open - If `true`, the Select panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the Select panel.\n * @attr {string} placeholder - The Select input placeholder text value.\n * @attr {\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"} placement - Position of the Select panel.\n * @attr {boolean} readonly - If `true`, the Select input cannot be modified.\n * @attr {boolean} required - Indicates whether or not the Select input is required to be filled out before submitting the form.\n * @attr {boolean} same-width - Whether the panel should have the Select same width as the input element.\n * @attr {number} skidding - Represents the skidding between the Select panel and the input element.\n * @attr {\"absolute\" | \"fixed\"} strategy - Defines the strategy to position the Select panel.\n * @attr {\"error\" | \"success\" | \"warning\" | \"none\"} validation-status - The validation status of the Select input.\n * @attr {\"number\" | \"string\" | \"string[]\"} value - The select input value can be used to reset the field to a previous value.\n *\n * @method clear - Method to be called to clear the selected value.\n *\n * @event bqBlur - The callback handler is emitted when the Select input loses focus.\n * @event bqClear - The callback handler is emitted when the selected value has been cleared.\n * @event bqFocus - A callback handler is emitted when the Select input has received focus.\n * @event bqSelect - The callback handler is emitted when the selected value has changed.\n *\n * @slot label - The label slot container.\n * @slot prefix - The prefix slot container.\n * @slot tags - The tags slot container.\n * @slot clear-icon - The clear icon slot container.\n * @slot suffix - The suffix slot container.\n * @slot helper-text - The helper text slot container.\n *\n * @part base - The component's base wrapper.\n * @part button - The native HTML button used under the hood in the clear button.\n * @part clear-btn - The clear button.\n * @part control - The input control wrapper.\n * @part input-outline - The input outline wrapper that holds the tags container and the native HTML input used under the hood.\n * @part helper-text - The helper text slot container.\n * @part input - The native HTML input element used under the hood.\n * @part label - The label slot container.\n * @part panel - The select panel container\n * @part prefix - The prefix slot container.\n * @part suffix - The suffix slot container.\n * @part tags - The tags container of the BqTags for multiple selection.\n * @part tag - The tag container of the BqTag for multiple selection.\n * @part tag__base - The base wrapper of the BqTag for multiple selection.\n * @part tag__prefix - The prefix slot container of the BqTag for multiple selection.\n * @part tag__text - The text slot container of the BqTag for multiple selection.\n * @part tag__btn-close - The close button of the BqTag for multiple selection.\n * @part option-list - The option list container.\n *\n * @cssprop --bq-select--background-color - Select background color\n * @cssprop --bq-select--border-color - Select border color\n * @cssprop --bq-select--border-color-focus - Select border color on focus\n * @cssprop --bq-select--border-color-disabled - Select border color when disabled\n * @cssprop --bq-select--border-radius - Select border radius\n * @cssprop --bq-select--border-width - Select border width\n * @cssprop --bq-select--border-style - Select border style\n * @cssprop --bq-select--gap - Gap between Select content and prefix/suffix\n * @cssprop --bq-select--helper-margin-top - Helper text margin top\n * @cssprop --bq-select--helper-text-color - Helper text color\n * @cssprop --bq-select--helper-text-size - Helper text size\n * @cssprop --bq-select--icon-size - Icon size to use in prefix/suffix and clear button\n * @cssprop --bq-select--label-margin-bottom - Select label margin bottom\n * @cssprop --bq-select--label-text-color - Select label text color\n * @cssprop --bq-select--label-text-size - Select label text size\n * @cssprop --bq-select--padding-start - Select padding start\n * @cssprop --bq-select--padding-end - Select padding end\n * @cssprop --bq-select--paddingY - Select padding top and bottom\n * @cssprop --bq-select--text-color - Select text color\n * @cssprop --bq-select--text-size - Select text size\n * @cssprop --bq-select--text-placeholder-color - Select placeholder text color\n */\n@Component({\n  tag: 'bq-select',\n  styleUrl: './scss/bq-select.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSelect {\n  // Own Properties\n  // ====================\n\n  private helperTextElem?: HTMLElement;\n  private inputElem?: HTMLInputElement;\n  private labelElem?: HTMLElement;\n  private prefixElem?: HTMLElement;\n  private suffixElem?: HTMLElement;\n\n  private debounceQuery: TDebounce<void>;\n  private debounceInput: TDebounce<void>;\n\n  private fallbackInputId = 'select';\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSelectElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() displayValue?: string;\n  @State() hasHelperText = false;\n  @State() selectedOptions: HTMLBqOptionElement[] = [];\n\n  @State() hasLabel = false;\n  @State() hasPrefix = false;\n  @State() hasSuffix = false;\n  @State() hasValue = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the Select input will be focused on component render */\n  @Prop({ reflect: true }) autofocus: boolean;\n\n  /** The clear button aria label */\n  @Prop({ reflect: true }) clearButtonLabel? = 'Clear value';\n\n  /**\n   * The amount of time, in milliseconds, to wait before emitting the `bqInput` event after the input value changes.\n   * A value of 0 means no debouncing will occur.\n   */\n  @Prop({ reflect: true, mutable: true }) debounceTime? = 0;\n\n  /** If true, the Select panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /**\n   * Indicates whether the Select input is disabled or not.\n   * If `true`, the Select is disabled and cannot be interacted with.\n   */\n  @Prop({ mutable: true }) disabled?: boolean = false;\n\n  /** If true, the clear button won't be displayed */\n  @Prop({ reflect: true }) disableClear? = false;\n\n  /** Represents the distance (gutter or margin) between the Select panel and the input element. */\n  @Prop({ reflect: true }) distance?: number = 8;\n\n  /** The ID of the form that the Select input belongs to. */\n  @Prop({ reflect: true }) form?: string;\n\n  /** If true, the Select panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** The Select input name. */\n  @Prop({ reflect: true }) name!: string;\n\n  /** The maximum number of tags to display when multiple selection is enabled */\n  @Prop({ mutable: true }) maxTagsVisible: number = 2;\n\n  /** If true, the Select input will allow multiple selections. */\n  @Prop({ reflect: true }) multiple?: boolean = false;\n\n  /** If true, the Select panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the Select panel. */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** The Select input placeholder text value */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /** Position of the Select panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom';\n\n  /** If true, the list of options cannot be filtered (searching won't be available) */\n  @Prop({ reflect: true }) readonly?: boolean;\n\n  /** Indicates whether or not the Select input is required to be filled out before submitting the form. */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** Whether the panel should have the Select same width as the input element */\n  @Prop({ reflect: true }) sameWidth?: boolean = true;\n\n  /**  Represents the skidding between the Select panel and the input element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the Select panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  /**\n   * The validation status of the Select input.\n   *\n   * @remarks\n   * This property is used to indicate the validation status of the select input. It can be set to one of the following values:\n   * - `'none'`: No validation status is set.\n   * - `'error'`: The input has a validation error.\n   * - `'warning'`: The input has a validation warning.\n   * - `'success'`: The input has passed validation.\n   */\n  @Prop({ reflect: true }) validationStatus: TInputValidation = 'none';\n\n  /** The select input value, it can be used to reset the field to a previous value */\n  @Prop({ reflect: true, mutable: true }) value: TSelectValue;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValueChange() {\n    // Early return for undefined/null values\n    if (isNil(this.value)) {\n      this.value = this.multiple ? [] : '';\n      this.internals.setFormValue(undefined);\n      this.syncItemsFromValue();\n      return;\n    }\n\n    // Handle multiple selection mode\n    if (this.multiple) {\n      this.value = stringToArray(this.value);\n      this.internals.setFormValue(this.value.join(','));\n      this.syncItemsFromValue();\n\n      return;\n    }\n\n    // Handle single selection mode\n    this.value = String(this.value);\n    this.internals.setFormValue(this.value);\n    this.syncItemsFromValue();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler emitted when the Select input loses focus */\n  @Event() bqBlur!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the selected value has been cleared */\n  @Event() bqClear!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the Select input has received focus */\n  @Event() bqFocus!: EventEmitter<HTMLBqSelectElement>;\n\n  /** Callback handler emitted when the selected value has changed */\n  @Event() bqSelect!: EventEmitter<{ value: string | number | string[]; item: HTMLBqOptionElement }>;\n\n  /** Callback handler emitted when the Select input changes its value while typing */\n  @Event() bqInput: EventEmitter<{ value: string | number | string[] }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.initMultipleValue();\n  }\n\n  componentWillLoad() {\n    this.initMultipleValue();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n\n    if (this.multiple && Array.isArray(this.value)) {\n      this.selectedOptions = this.options.filter((item) => this.value.includes(item.value));\n    }\n    this.handleValueChange();\n  }\n\n  formAssociatedCallback() {\n    this.internals.role = 'combobox';\n    this.internals.ariaExpanded = this.open ? 'true' : 'false';\n  }\n\n  async formResetCallback() {\n    if (isNil(this.value)) return;\n\n    this.internals.setValidity({});\n    this.clear();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqOpen', { capture: true })\n  handleOpenChange(ev: CustomEvent<{ open: boolean }>) {\n    if (!ev.composedPath().includes(this.el)) return;\n\n    this.open = ev.detail.open;\n  }\n\n  @Listen('bqFocus', { capture: true })\n  @Listen('bqBlur', { capture: true })\n  stopOptionFocusBlurPropagation(ev: CustomEvent) {\n    // Stop propagation of focus and blur events coming from the `bq-option` elements\n    if (isHTMLElement(ev.target, 'bq-select')) return;\n\n    ev.stopPropagation();\n  }\n\n  @Listen('scroll', { target: 'window', passive: true, capture: true })\n  handleScrollEvent() {\n    if (!this.open || this.disableScrollLock) return;\n\n    // Close the panel when the scroll event is triggered.\n    // This is useful for those cases where the floating panel is inside a scrollable container.\n    // For example, a select inside a dialog, drawer, etc.\n    // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n    this.open = false;\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  /**\n   * Clears the selected value.\n   *\n   * @return {Promise<void>}\n   * @memberof BqSelect\n   */\n  @Method()\n  async clear(): Promise<void> {\n    if (this.disabled) return;\n\n    const { multiple, inputElem, bqClear, el } = this;\n\n    // Clear value and selected options\n    this.value = '';\n    this.selectedOptions = [];\n\n    // Clear display value and input element if not multiple\n    if (!multiple) {\n      this.displayValue = '';\n      inputElem.value = '';\n    }\n\n    // Update form value and reset options visibility\n    this.resetOptionsVisibility();\n\n    // Emit clear event\n    bqClear.emit(el);\n  }\n\n  /**\n   * Resets the Select input to a previous value.\n   *\n   * @param {TSelectValue} value - The value to reset the Select input to.\n   * @return {Promise<void>}\n   * @memberof BqSelect\n   */\n  @Method()\n  async reset(value: TSelectValue): Promise<void> {\n    if (isNil(value)) return;\n\n    this.value = value;\n    this.syncItemsFromValue();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private initMultipleValue = () => {\n    if (!this.multiple || !isDefined(this.value)) return;\n\n    this.value = Array.isArray(this.value) ? this.value : Array.from(JSON.parse(String(this.value)));\n  };\n\n  private handleBlur = () => {\n    if (this.disabled) return;\n\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    if (this.disabled) return;\n\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleSelect = (ev: CustomEvent<{ value: TSelectValue; item: HTMLBqOptionElement }>) => {\n    if (this.disabled) return;\n\n    if (this.multiple) {\n      ev.stopPropagation();\n    }\n\n    const { value, item } = ev.detail;\n\n    if (this.multiple) {\n      this.handleMultipleSelection(item);\n      // Clear the input value after selecting an item\n      this.inputElem.value = '';\n      // If multiple selection is enabled, emit the selected items array instead of relying on\n      // the option list to emit the value of the selected item\n      this.bqSelect.emit({ value: this.value, item });\n    } else {\n      this.value = value;\n    }\n\n    this.resetOptionsVisibility();\n    this.inputElem.focus();\n  };\n\n  private handleMultipleSelection = (item: HTMLBqOptionElement) => {\n    // Set has O(1) complexity for insertion, deletion, and search operations, compared to an Array's O(n)\n    const selectedOptionsSet = new Set(this.selectedOptions);\n\n    if (selectedOptionsSet.has(item)) {\n      selectedOptionsSet.delete(item);\n    } else {\n      selectedOptionsSet.add(item);\n    }\n\n    this.selectedOptions = Array.from(selectedOptionsSet);\n    this.value = this.selectedOptions.map((item) => item.value);\n  };\n\n  private handleSearchFilter = (value: string) => {\n    if (this.disabled) return;\n\n    this.debounceQuery?.cancel();\n\n    if (!isDefined(value)) {\n      this.clear();\n    } else {\n      this.debounceQuery = debounce(() => {\n        this.options.forEach((item: HTMLBqOptionElement) => {\n          const itemLabel = this.getOptionLabel(item).toLowerCase();\n          item.hidden = !itemLabel.includes(value);\n        });\n      }, this.debounceTime);\n\n      this.debounceQuery();\n    }\n\n    // The panel will close once a selection is made\n    // so we need to make sure it's open when the user is typing and the query is not empty\n    this.open = true;\n  };\n\n  private handleInput = (ev: Event) => {\n    if (this.disabled) return;\n\n    const { value } = ev.target as HTMLInputElement;\n\n    this.debounceInput?.cancel();\n\n    this.debounceInput = debounce(() => {\n      const inputEvent = this.bqInput.emit({ value });\n      if (!inputEvent.defaultPrevented) {\n        // Continue with search filtering only if the event wasn't prevented\n        this.handleSearchFilter(value);\n      }\n    }, this.debounceTime);\n\n    this.debounceInput();\n  };\n\n  private handleClearClick = (ev: CustomEvent) => {\n    (async () => {\n      await this.clear();\n    })();\n    this.inputElem.focus();\n\n    ev.stopPropagation();\n  };\n\n  private handleTagRemove = (item: HTMLBqOptionElement) => {\n    if (this.disabled) return;\n\n    this.handleMultipleSelection(item);\n    this.bqSelect.emit({ value: this.value, item });\n  };\n\n  private handleSlotChange = () => {\n    this.hasLabel = hasSlotContent(this.labelElem);\n    this.hasPrefix = hasSlotContent(this.prefixElem);\n    this.hasSuffix = hasSlotContent(this.suffixElem);\n    this.hasHelperText = hasSlotContent(this.helperTextElem);\n  };\n\n  private resetOptionsVisibility = () => {\n    this.options.forEach((item: HTMLBqOptionElement) => (item.hidden = false));\n  };\n\n  private syncItemsFromValue = () => {\n    const { internals, options, value } = this;\n    if (!options.length) return;\n\n    // Sync selected state of the BqOption elements\n    this.syncSelectedOptionsState();\n\n    if (this.multiple) {\n      // Sync selected options for multiple selection mode\n      this.selectedOptions = options.filter((option) => this.value?.includes(option.value));\n    }\n\n    // Always update display value and form value\n    this.updateDisplayLabel();\n    internals.setFormValue(!isNil(value) ? `${value}` : undefined);\n  };\n\n  /**\n   * Syncs the selected state of the BqOption elements which value is included in the `value` property.\n   * Notice that value can be a string or an array of strings.\n   *\n   * @private\n   * @memberof BqSelect\n   */\n  private syncSelectedOptionsState = () => {\n    const { options, multiple, value } = this;\n    const lowerCaseValue = String(value).toLowerCase();\n\n    options.forEach((option: HTMLBqOptionElement) => {\n      if (multiple && Array.isArray(value)) {\n        option.selected = value.includes(option.value);\n      } else {\n        option.selected = option.value.toLowerCase() === lowerCaseValue;\n      }\n    });\n  };\n\n  /**\n   * Updates the display value of the input element based on the selected option.\n   *\n   * @private\n   * @memberof BqSelect\n   */\n  private updateDisplayLabel = () => {\n    const { value, options, inputElem } = this;\n\n    const checkedItem = options.find((item) => item.value === value);\n    const displayValue = checkedItem ? this.getOptionLabel(checkedItem) : '';\n\n    this.displayValue = displayValue;\n    if (inputElem) {\n      inputElem.value = displayValue;\n    }\n  };\n\n  private getOptionLabel = (item: HTMLBqOptionElement) => {\n    if (!item) return '';\n    return item.innerText.trim() ?? '';\n  };\n\n  private get options() {\n    return Array.from(this.el.querySelectorAll('bq-option'));\n  }\n\n  private get displayPlaceholder() {\n    // Hide the placeholder when multiple selection is enabled and there are selected items\n    return this.multiple && this.selectedOptions.length !== 0 ? undefined : this.placeholder;\n  }\n\n  private get displayTags() {\n    return this.selectedOptions.map((item, index) => {\n      if (index < this.maxTagsVisible || this.maxTagsVisible < 0) {\n        return (\n          <bq-tag\n            key={item.value}\n            removable\n            size=\"xsmall\"\n            variant=\"filled\"\n            onBqClose={(event) => {\n              // NOTE: prevents triggering bqClose on parent\n              event.stopPropagation();\n              this.handleTagRemove(item);\n            }}\n            // Prevent the tag from closing the panel when clicked\n            onClick={(ev: MouseEvent) => ev.stopPropagation()}\n            exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n            part=\"tag\"\n          >\n            {this.getOptionLabel(item)}\n          </bq-tag>\n        );\n      } else if (index === this.maxTagsVisible) {\n        return (\n          <bq-tag\n            key=\"more\"\n            size=\"xsmall\"\n            variant=\"filled\"\n            exportparts=\"wrapper:tag__base,prefix:tag__prefix,text:tag__text,btn-close:tag__btn-close\"\n            part=\"tag\"\n          >\n            +{this.selectedOptions.length - index}\n          </bq-tag>\n        );\n      }\n\n      return null;\n    });\n  }\n\n  private get hasClearIcon() {\n    if (this.disableClear || this.disabled) {\n      return false;\n    }\n\n    if (this.multiple) {\n      return this.selectedOptions.length > 0;\n    }\n\n    return isDefined(this.displayValue);\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const labelId = `bq-select__label-${this.name || this.fallbackInputId}`;\n\n    return (\n      <div class=\"bq-select\" part=\"base\">\n        {/* Label */}\n        <label\n          id={labelId}\n          class={{ 'bq-select__label': true, '!hidden': !this.hasLabel }}\n          aria-label={this.name || this.fallbackInputId}\n          htmlFor={this.name || this.fallbackInputId}\n          ref={(labelElem: HTMLSpanElement) => (this.labelElem = labelElem)}\n          part=\"label\"\n        >\n          <slot name=\"label\" onSlotchange={this.handleSlotChange} />\n        </label>\n        {/* Select dropdown */}\n        <bq-dropdown\n          class=\"bq-select__dropdown w-full\"\n          disableScrollLock={this.disableScrollLock}\n          disabled={this.disabled}\n          distance={this.distance}\n          keepOpenOnSelect={this.keepOpenOnSelect}\n          open={this.open}\n          panelHeight={this.panelHeight}\n          placement={this.placement}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          exportparts=\"panel\"\n        >\n          {/* Input control group */}\n          <div\n            class={{\n              'bq-select__control': true,\n              [`validation-${this.validationStatus}`]: true,\n              disabled: this.disabled,\n            }}\n            part=\"control\"\n            slot=\"trigger\"\n          >\n            {/* Prefix */}\n            <span\n              class={{ 'bq-select__control--prefix': true, '!hidden': !this.hasPrefix }}\n              ref={(spanElem: HTMLSpanElement) => (this.prefixElem = spanElem)}\n              part=\"prefix\"\n            >\n              <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n            </span>\n            <div class=\"flex flex-1 overflow-x-auto\" part=\"input-outline\">\n              {/* Display selected values using BqTags for multiple selection */}\n              {this.multiple && (\n                <span class=\"bq-select__tags\" part=\"tags\">\n                  <slot name=\"tags\">{this.displayTags}</slot>\n                </span>\n              )}\n              {/* HTML Input */}\n              <input\n                id={this.name || this.fallbackInputId}\n                class=\"bq-select__control--input flex-grow is-full\"\n                autoComplete=\"off\"\n                autoCapitalize=\"off\"\n                aria-disabled={this.disabled ? 'true' : 'false'}\n                aria-controls={`bq-options-${this.name}`}\n                aria-expanded={this.open ? 'true' : 'false'}\n                aria-haspopup=\"listbox\"\n                disabled={this.disabled}\n                form={this.form}\n                name={this.name}\n                placeholder={this.displayPlaceholder}\n                ref={(inputElem: HTMLInputElement) => (this.inputElem = inputElem)}\n                readOnly={this.readonly}\n                required={this.required}\n                role=\"combobox\"\n                spellcheck={false}\n                type=\"text\"\n                value={this.displayValue}\n                part=\"input\"\n                // Events\n                onBlur={this.handleBlur}\n                onFocus={this.handleFocus}\n                onInput={this.handleInput}\n              />\n            </div>\n            {/* Clear Button */}\n            {this.hasClearIcon && (\n              // The clear button will be visible as long as the input has a value\n              // and the parent group is hovered or has focus-within\n              <bq-button\n                class=\"bq-select__control--clear ms-[--bq-select--gap]\"\n                appearance=\"text\"\n                aria-label={this.clearButtonLabel}\n                size=\"small\"\n                onBqClick={this.handleClearClick}\n                part=\"clear-btn\"\n                exportparts=\"button\"\n                tabIndex={-1}\n              >\n                <slot name=\"clear-icon\">\n                  <bq-icon name=\"x-circle\" class=\"flex\" />\n                </slot>\n              </bq-button>\n            )}\n            {/* Suffix */}\n            <span\n              class={{ 'bq-select__control--suffix': true, 'rotate-180': this.open, 'rotate-0': !this.open }}\n              ref={(spanElem: HTMLSpanElement) => (this.suffixElem = spanElem)}\n              part=\"suffix\"\n            >\n              <slot name=\"suffix\" onSlotchange={this.handleSlotChange}>\n                <bq-icon name=\"caret-down\" class=\"flex\" />\n              </slot>\n            </span>\n          </div>\n          <bq-option-list\n            id={`bq-options-${this.name}`}\n            onBqSelect={this.handleSelect}\n            aria-expanded={this.open ? 'true' : 'false'}\n            exportparts=\"base:option-list\"\n            role=\"listbox\"\n          >\n            <slot />\n          </bq-option-list>\n        </bq-dropdown>\n        {/* Helper text */}\n        <div\n          class={{\n            [`bq-select__helper-text validation-${this.validationStatus}`]: true,\n            '!hidden': !this.hasHelperText,\n          }}\n          ref={(divElem: HTMLDivElement) => (this.helperTextElem = divElem)}\n          part=\"helper-text\"\n        >\n          <slot name=\"helper-text\" onSlotchange={this.handleSlotChange} />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-side-menu-item.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bq-side-menu-item.entry.cjs.js","mappings":"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","names":["getTextContent","h"],"sources":["../../packages/beeq/src/components/side-menu-item/scss/bq-side-menu-item.scss?tag=bq-side-menu-item&encapsulation=shadow","../../packages/beeq/src/components/side-menu-item/bq-side-menu-item.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Side menu item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu-item.variables';\n\n:host {\n  @apply flex;\n}\n\n.bq-side-menu__item {\n  @apply flex flex-grow items-center gap-x-s rounded-s border-none px-[var(--bq-side-menu-item--paddingX)] py-[var(--bq-side-menu-item--paddingY)] no-underline transition-colors duration-150;\n\n  // Default state\n  @apply bg-[var(--bq-side-menu-item--bg-default)] text-m text-[color:var(--bq-side-menu-item--text-default)];\n\n  // Focus state\n  @apply [&:not(.disabled)]:focus-visible:focus;\n\n  // Hover state\n  @apply [&:not(.disabled)]:hover:cursor-pointer;\n  @apply [&:not(.disabled,.active)]:hover:text-m [&:not(.disabled,.active)]:hover:bg-hover-ui-alt [&:not(.disabled,.active)]:hover:text-hover-primary;\n}\n\n.bq-side-menu__item.active {\n  // Active state\n  @apply bg-[var(--bq-side-menu-item--bg-active)] text-m text-[color:var(--bq-side-menu-item--text-active)];\n}\n\n.bq-side-menu__item.disabled {\n  @apply opacity-60 hover:cursor-not-allowed;\n}\n\n.bq-side-menu__item.is-collapsed {\n  @apply justify-center gap-0;\n\n  .bq-side-menu__item--label,\n  .bq-side-menu__item--suffix {\n    @apply sr-only scale-0;\n  }\n}\n\n.bq-side-menu__item--label,\n.bq-side-menu__item--suffix {\n  @apply transition-all duration-300 ease-in-out;\n}\n","import { Component, Element, Event, h, Prop, State } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { getTextContent } from '../../shared/utils';\n\n/**\n * Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n *\n * @example How to use it\n * ```html\n * <bq-side-menu-item>\n *   <bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\n *   Menu item\n *   <bq-badge slot=\"suffix\">5</bq-badge>\n * </bq-side-menu-item>\n * ```\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {boolean} active - If `true`, the menu item will be shown as active/selected.\n * @attr {boolean} collapse - If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.\n * @attr {boolean} disabled - If `true`, the menu item will be disabled (no interaction allowed).\n *\n * @event bqBlur - Handler to be called when the button loses focus.\n * @event bqClick - Handler to be called when the button gets focused.\n * @event bqFocus - Handler to be called when the button is clicked.\n *\n * @slot prefix - The prefix part of menu item.\n * @slot - The content of the menu item.\n * @slot suffix - The suffix part of menu item.\n *\n * @part base - The component wrapper container inside the shadow DOM\n * @part label - The label slot\n * @part prefix - The prefix slot\n * @part suffix - The suffix slot\n * @part panel - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n * @part trigger - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)\n *\n * @cssprop --bq-side-menu-item--bg-default - Side menu item default background color\n * @cssprop --bq-side-menu-item--bg-active - Side menu item active background color\n * @cssprop --bq-side-menu-item--text-default - Side menu item default text color\n * @cssprop --bq-side-menu-item--text-active - Side menu item active text color\n * @cssprop --bq-side-menu-item--paddingX - Side menu item vertical padding\n * @cssprop --bq-side-menu-item--paddingY - Side menu item horizontal padding\n */\n@Component({\n  tag: 'bq-side-menu-item',\n  styleUrl: './scss/bq-side-menu-item.scss',\n  shadow: true,\n})\nexport class BqSideMenuItem {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSideMenuItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() textContent: string;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the menu item will be shown as active/selected. */\n  @Prop() active: boolean = false;\n\n  /** If true, the item label and suffix will be hidden and the `width` will be reduced according to its parent. */\n  @Prop() collapse: boolean = false;\n\n  /** If true, the menu item will be disabled (no interaction allowed) */\n  @Prop() disabled: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when the button is clicked */\n  @Event() bqFocus: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  /** Handler to be called when button gets focus */\n  @Event() bqClick: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.labelElem) return;\n    this.textContent = getTextContent(this.labelElem.querySelector('slot'));\n  };\n\n  handleBlur = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqBlur.emit(this.el);\n  };\n\n  handleFocus = (ev: Event) => {\n    if (this.disabled) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqFocus.emit(this.el);\n  };\n\n  handleClick = (ev: Event) => {\n    if (this.disabled || this.active) {\n      ev.preventDefault();\n      ev.stopPropagation();\n      return;\n    }\n\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  private menuItem = () => (\n    <button\n      class={{\n        'bq-side-menu__item': true,\n        active: this.active,\n        disabled: this.disabled,\n        'is-collapsed': this.collapse,\n      }}\n      onBlur={this.handleBlur}\n      onFocus={this.handleFocus}\n      onClick={this.handleClick}\n      aria-disabled={this.disabled ? 'true' : 'false'}\n      role=\"menuitem\"\n      tabindex={this.disabled ? -1 : 0}\n      slot=\"trigger\"\n      part=\"base\"\n    >\n      <div class=\"bq-side-menu__item--prefix flex items-center\" part=\"prefix\">\n        <slot name=\"prefix\" />\n      </div>\n      <div\n        class=\"bq-side-menu__item--label overflow-hidden text-ellipsis whitespace-nowrap\"\n        ref={(labelElem) => (this.labelElem = labelElem)}\n      >\n        <slot onSlotchange={this.handleSlotChange} />\n      </div>\n      <div class=\"bq-side-menu__item--suffix ml-auto flex items-center\" part=\"suffix\">\n        <slot name=\"suffix\" />\n      </div>\n    </button>\n  );\n\n  render() {\n    return !this.collapse ? (\n      this.menuItem()\n    ) : (\n      <bq-tooltip class=\"bq-side-menu__item--tooltip block\" placement=\"right\" exportparts=\"trigger, panel\">\n        {this.textContent}\n        {this.menuItem()}\n      </bq-tooltip>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-side-menu.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bq-side-menu.entry.cjs.js","mappings":"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","names":["isClient","isHTMLElement","h"],"sources":["../../packages/beeq/src/components/side-menu/scss/bq-side-menu.scss?tag=bq-side-menu&encapsulation=shadow","../../packages/beeq/src/components/side-menu/bq-side-menu.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Side menu styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-side-menu.variables';\n\n:host {\n  @apply flex overflow-hidden;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                               Aside container                              */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu {\n  @apply fixed flex h-dynamic-vh grow flex-col bg-[--bq-side-menu--bg-color] is-[--bq-side-menu--width] inset-bs-0 inset-is-0;\n  @apply border-0 border-e-s border-solid border-[color:--bq-side-menu--border-color];\n  @apply transition-[background-color,width] duration-150;\n  @include hide-scrollbar;\n}\n\n.bq-side-menu.is-collapsed {\n  @apply is-[--bq-side-menu--width-collapse];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                               Logo container                               */\n/* -------------------------------------------------------------------------- */\n\n.bq-side-menu--logo {\n  @apply sticky top-0 z-[1] p-xs;\n  @apply box-content flex items-center bg-[--bq-side-menu--bg-color] text-[color:--bq-side-menu--brand-color];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                 APPEARANCE                                 */\n/* -------------------------------------------------------------------------- */\n\n/**\n * The following change the default values of some CSS custom properties\n * to make it complain with the side menu appearance selected\n */\n\n:host([size='small']) {\n  ::slotted(bq-side-menu-item) {\n    --bq-side-menu-item--paddingY: theme(space.s);\n  }\n}\n\n:host([appearance='brand']) {\n  --bq-focus: theme(stroke.alt);\n  --bq-side-menu--bg-color: theme(backgroundColor.ui.brand);\n  --bq-side-menu--brand-color: theme(stroke.inverse);\n  --bq-side-menu--border-color: theme(stroke.brand);\n\n  ::slotted(bq-side-menu-item) {\n    --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--brand), var(--bq-hover) 20%);\n\n    --bq-side-menu-item--text-default: theme(textColor.alt);\n    --bq-side-menu-item--text-hover: theme(textColor.alt);\n  }\n\n  .bq-side-menu--footer ::slotted([slot='footer']) {\n    --bq-ui--secondary: theme(colors.transparent);\n    --bq-text--primary: theme(textColor.inverse);\n  }\n}\n\n:host([appearance='inverse']) {\n  --bq-side-menu--bg-color: theme(backgroundColor.ui.inverse);\n  --bq-side-menu--brand-color: theme(stroke.inverse);\n  --bq-side-menu--border-color: theme(backgroundColor.ui.inverse);\n\n  ::slotted(bq-side-menu-item) {\n    --bq-side-menu-item--bg-hover: color-mix(in srgb, var(--bq-ui--inverse), var(--bq-hover) 20%);\n    --bq-side-menu-item--bg-active: color-mix(in srgb, var(--bq-ui--alt), var(--bq-active) 20%);\n\n    --bq-side-menu-item--text-default: theme(textColor.inverse);\n    --bq-side-menu-item--text-hover: theme(textColor.inverse);\n    --bq-side-menu-item--text-active: theme(textColor.primary);\n  }\n\n  .bq-side-menu--footer ::slotted([slot='footer']) {\n    --bq-ui--secondary: theme(colors.transparent);\n    --bq-text--primary: theme(textColor.inverse);\n  }\n}\n","import { Component, Event, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TSideMenuAppearance, TSideMenuSize } from './bq-side-menu.types';\nimport { isClient, isHTMLElement } from '../../shared/utils';\n\n/**\n *The default side menu serves as a versatile container for organizing and displaying navigation elements,\n * with default side menu items providing a clean and straightforward way to represent individual menu options.\n * Together, they form the foundation for building structured and intuitive side menu layouts.\n *\n * @example How to use it\n * ```html\n * <bq-side-menu>\n *   <div slot=\"logo\">\n *     <h1>Your Logo</h1>\n *   </div>\n *   <bq-side-menu-item active>\n *     <bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\n *     Home\n *   </bq-side-menu-item>\n *   <bq-side-menu-item>\n *     <bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\n *     Settings\n *   </bq-side-menu-item>\n *   <bq-side-menu-item disabled>\n *     <bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\n *     Help\n *   </bq-side-menu-item>\n * </bq-side-menu>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/99822d-side-menu/b/09d7b1\n * @status stable\n *\n * @attr {\"brand\" | \"default\" | \"inverse\"} appearance - It sets a predefined appearance of the side menu.\n * @attr {boolean} collapse - If `true`, the container will reduce its width.\n * @attr {\"medium\" | \"small\"} - size - It sets the size of the navigation menu items.\n *\n * @method toggleCollapse - Method to be called to toggle the collapse state of the side menu.\n *\n * @event bqCollapse - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.\n * @event bqSelect - Callback handler to be called when the active/selected menu item changes.\n *\n * @slot logo - The section for displaying the logo or brand in the side menu.\n * @slot The main section that holds all menu items.\n * @slot footer - The section for adding footer content to the side menu.\n *\n * @part base - HTML `<aside>` root container\n * @part footer - HTML `<div>` element that holds the footer\n * @part logo - HTML `<div>` element that holds the logo\n * @part nav - HTML `<nav>` element that holds the navigation items\n *\n * @cssprop --bq-side-menu--bg-color - Side menu background color\n * @cssprop --bq-side-menu--brand-color - Side menu logo color\n * @cssprop --bq-side-menu--border-color - Side menu border color\n */\n@Component({\n  tag: 'bq-side-menu',\n  styleUrl: './scss/bq-side-menu.scss',\n  shadow: true,\n})\nexport class BqSideMenu {\n  // Own Properties\n  // ====================\n\n  private menuItemCssSelector = 'bq-side-menu-item';\n\n  private bodyCss = 'bq-body--side-menu';\n  private bodyCssExpand = 'bq-body--side-menu__expand';\n  private bodyCssCollapse = 'bq-body--side-menu__collapse';\n\n  private menuElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private documentBody: HTMLBodyElement;\n\n  // Public Property API\n  // ========================\n\n  /** It sets a predefined appearance of the side menu */\n  @Prop({ reflect: true }) appearance: TSideMenuAppearance = 'default';\n\n  /** If true, the container will reduce its width */\n  @Prop({ reflect: true }) collapse: boolean = false;\n\n  /** It sets the size of the navigation menu items */\n  @Prop({ reflect: true }) size: TSideMenuSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('collapse')\n  onCollapsePropChange() {\n    this.handleCollapse();\n    this.bqCollapse.emit({ collapse: this.collapse });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa */\n  @Event() bqCollapse: EventEmitter<{ collapse: boolean }>;\n\n  /** Callback handler to be called when the active/selected menu item changes */\n  @Event() bqSelect: EventEmitter<HTMLBqSideMenuItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    if (!isClient()) return;\n\n    this.documentBody = document.querySelector('body');\n    this.documentBody.classList.add(this.bodyCss);\n    this.handleCollapse();\n  }\n\n  disconnectedCallback() {\n    this.cleanDocumentBodyClass();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqClick', { passive: true })\n  onMenuItemClick(event: Event) {\n    const { target: item } = event;\n    if (!isHTMLElement(item, 'bq-side-menu-item')) return;\n\n    this.menuItems.forEach(\n      (menuItem: HTMLBqSideMenuItemElement) => (menuItem.active = !menuItem.disabled && menuItem === item),\n    );\n    this.bqSelect.emit(item);\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  /** Toggle the collapse state of the side menu */\n  @Method()\n  async toggleCollapse() {\n    this.collapse = !this.collapse;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get menuItems() {\n    if (!this.menuElem) return [];\n\n    const slot = this.menuElem.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === this.menuItemCssSelector,\n    ) as [HTMLBqSideMenuItemElement];\n  }\n\n  private handleCollapse = () => {\n    if (!this.menuItems.length) return;\n\n    this.menuItems.forEach((menuItem: HTMLBqSideMenuItemElement) => (menuItem.collapse = this.collapse));\n    if (this.collapse) {\n      this.collapseDocumentBody();\n    } else {\n      this.expandDocumentBody();\n    }\n  };\n\n  private collapseDocumentBody = () => {\n    if (!this.collapse) return;\n\n    this.documentBody.classList.remove(this.bodyCssExpand);\n    this.documentBody.classList.add(this.bodyCssCollapse);\n  };\n\n  private expandDocumentBody = () => {\n    if (this.collapse) return;\n\n    this.documentBody.classList.remove(this.bodyCssCollapse);\n    this.documentBody.classList.add(this.bodyCssExpand);\n  };\n\n  private cleanDocumentBodyClass = () => {\n    this.documentBody.classList.remove(this.bodyCss, this.bodyCssCollapse, this.bodyCssExpand);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <aside class={{ 'bq-side-menu overflow-y-auto': true, 'is-collapsed': this.collapse }} part=\"base\">\n        {/* Company logo and name */}\n        <div class={{ 'bq-side-menu--logo': true, 'is-collapsed': this.collapse }} part=\"logo\">\n          <slot name=\"logo\" />\n        </div>\n        {/* Navigation content */}\n        <nav\n          class=\"bq-side-menu--nav flex flex-col gap-y-xs px-xs pt-xs2\"\n          ref={(navElem) => (this.menuElem = navElem)}\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role\n          role=\"menu\"\n          part=\"nav\"\n        >\n          <slot />\n        </nav>\n        {/* Footer */}\n        <div\n          class=\"bq-side-menu--footer sticky flex justify-center bg-[var(--bq-side-menu--bg-color)] p-xs inset-be-0 m-bs-[auto]\"\n          part=\"footer\"\n        >\n          <slot name=\"footer\"></slot>\n        </div>\n      </aside>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-slider.entry.cjs.js","mappings":"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","names":["isNil","clamp","isString","debounce","h"],"sources":["../../packages/beeq/src/components/slider/scss/bq-slider.scss?tag=bq-slider&encapsulation=shadow","../../packages/beeq/src/components/slider/bq-slider.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                               Slider styles                                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-slider.variables';\n\n@layer components {\n  .thumb {\n    @apply pointer-events-auto box-content size-[--bq-slider--thumb-size] cursor-pointer appearance-none rounded-full border-m border-solid border-brand bg-ui-primary;\n    @apply transition-[background-color,border-color,box-shadow] duration-300;\n  }\n\n  .thumb-focus {\n    @apply focus;\n  }\n\n  .thumb-hover {\n    @apply border-hover-brand;\n  }\n\n  .thumb-active {\n    @apply cursor-grabbing bg-active-ui-brand border-active-brand;\n  }\n}\n\n:host {\n  @apply block is-full;\n}\n\n/* ---------------------- Webkit (Chrome, Safari, Edge) --------------------- */\n\ninput[type='range']::-webkit-slider-thumb {\n  @apply thumb;\n}\n\ninput[type='range']::-webkit-slider-runnable-track {\n  @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-webkit-slider-thumb {\n  @apply thumb-focus;\n}\n\ninput[type='range']:hover::-webkit-slider-thumb {\n  @apply thumb-hover;\n}\n\ninput[type='range']:active::-webkit-slider-thumb {\n  @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-webkit-slider-thumb {\n  @apply cursor-not-allowed;\n}\n\n/* ---------------------------- Mozilla (Firefox) --------------------------- */\n\ninput[type='range']::-moz-range-thumb {\n  @apply thumb;\n}\n\ninput[type='range']::-moz-range-track {\n  @apply transition-all duration-300 ease-in;\n}\n\ninput[type='range']:focus-visible::-moz-range-thumb {\n  @apply thumb-focus;\n}\n\ninput[type='range']:hover::-moz-range-thumb {\n  @apply thumb-hover;\n}\n\ninput[type='range']:active::-moz-range-thumb {\n  @apply thumb-active;\n}\n\ninput[type='range'][disabled]::-moz-range-thumb {\n  @apply cursor-not-allowed;\n}\n","import { AttachInternals, Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\n/**\n * Sliders provide a visual representation of adjustable content, enabling users to change values by dragging a handle along a horizontal track.\n *\n * @example How to use it\n * ```html\n * <bq-slider max=\"100\" value=\"30\"></bq-slider>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/509cbc-slider/b/09d7b1\n * @status stable\n *\n * @dependency bq-tooltip\n *\n * @attr {number} debounce-time - The amount of time, in milliseconds, to wait to trigger the bqChange event after each value change.\n * @attr {boolean} disabled - If `true` the slider is disabled.\n * @attr {boolean} enable-tooltip - If `true`, a tooltip will be shown displaying the progress value.\n * @attr {boolean} enable-value-indicator - If `true` it will show the value label on the side of the slider track area.\n * @attr {number} gap - A number representing the amount to remain between the minimum and maximum values (only for range type).\n * @attr {number} max - A number representing the max value of the slider.\n * @attr {number} min - A number representing the min value of the slider.\n * @attr {number} step - A number represents the step of the slider. ⚠️ Please notice that the value (or list of values if the slider type is range) will be rounded to the nearest multiple of step.\n * @attr {boolean} tooltip-always-visible - If `true`, a tooltip will always display the progress value. It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n * @attr {\"range\" | \"single\"} type - It defines the type of slider to display.\n * @attr {\"[number, number]\" | \"number\" | \"string\"} value - The value of the slider. If the slider type is single, the value is a number.\n * If the slider type is range, the value is an array of two numbers (the first number represents the min value and the second number represents the max value).\n *\n * @event bqBlur - Handler to be called when the slider loses focus.\n * @event bqChange - Handler to be called when changing the value on range inputs.\n * @event bqFocus - Handler to be called when the slider gets focused.\n *\n * @part base - The component's base wrapper.\n * @part container - The container of the slider.\n * @part track-area - The track area of the slider.\n * @part progress-area - The progress area of the slider.\n * @part input-min - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part input-max - The input element for the maximum value.\n * @part label-start - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n * @part label-end - The label for maximum value when the slider type is `range`.\n *\n * @cssprop --bq-slider--size - The height of the slider track/progress area\n * @cssprop --bq-slider--border-radius - Slider border radius\n * @cssprop --bq-slider--thumb-size - Slider hover thumb size\n * @cssprop --bq-slider--progress-color - Slider progress background color\n * @cssprop --bq-slider--trackarea-color - Slider track background color\n */\n@Component({\n  tag: 'bq-slider',\n  styleUrl: './scss/bq-slider.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSlider {\n  // Own Properties\n  // ====================\n\n  private inputMinElem: HTMLInputElement;\n  private inputMaxElem: HTMLInputElement;\n  private minTooltipElem: HTMLBqTooltipElement;\n  private maxTooltipElem: HTMLBqTooltipElement;\n  private progressElem: HTMLSpanElement;\n  private trackElem: HTMLSpanElement;\n  private debounceBqChange: TDebounce<void>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqSliderElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  /**\n   * The `minValue` state is the only value when the slider type is `single`\n   * and the minimum value when the slider type is `range`.\n   */\n  @State() minValue: number;\n  /** The `maxValue` state is only used when the slider type is `range`. */\n  @State() maxValue: number;\n  /** It hold the left position of the Thumb for the value or the minimum value (if the slider type is `range`) */\n  @State() minThumbPosition: number;\n  /** It hold the left position of the Thumb for the maximum value (if the slider type is `range`) */\n  @State() maxThumbPosition: number;\n\n  // Public Property API\n  // ========================\n\n  /** The amount of time, in milliseconds, to wait to trigger the `bqChange` event after each value change. */\n  @Prop({ reflect: true }) debounceTime = 0;\n\n  /** If `true` the slider is disabled. */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** If `true` it will show the value label on a side of the slider track area */\n  @Prop({ reflect: true }) enableValueIndicator? = false;\n\n  /** A number representing the amount to remain between the minimum and maximum values (only for range type). */\n  @Prop({ reflect: true, mutable: true }) gap = 0;\n\n  /** A number representing the max value of the slider. */\n  @Prop({ reflect: true }) max = 100;\n\n  /** A number representing the min value of the slider. */\n  @Prop({ reflect: true }) min = 0;\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair */\n  @Prop({ reflect: true }) name: string;\n\n  /**\n   * A number representing the step of the slider.\n   * ⚠️ Please notice that the value (or list of values if the slider type is `range`) will be rounded to the nearest multiple of `step`.\n   */\n  @Prop({ reflect: true }) step = 1;\n\n  /** It defines the type of slider to display  */\n  @Prop({ reflect: true }) type: TSliderType = 'single';\n\n  /**\n   * The value of the slider.\n   * - If the slider type is `single`, the value is a number.\n   * - If the slider type is `range`, the value is an array of two numbers (the first number represents the `min` value and the second number represents the `max` value).\n   */\n  @Prop({ reflect: true, mutable: true }) value: TSliderValue;\n\n  /** If `true`, a tooltip will be shown displaying the progress value */\n  @Prop({ reflect: true }) enableTooltip: boolean = false;\n\n  /**\n   * If `true`, a tooltip will always display the progress value.\n   * It relies on enableTooltip and if enableTooltip is false, tooltipAlwaysVisible cannot be true.\n   */\n  @Prop({ reflect: true }) tooltipAlwaysVisible: boolean = false;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('value')\n  handleValuePropChange(newValue: TSliderValue) {\n    this.setState(newValue);\n    this.emitBqChange();\n  }\n\n  @Watch('step')\n  handleStepPropChange() {\n    this.minValue = Math.round(this.minValue / this.step) * this.step;\n    this.maxValue = Math.round(this.maxValue / this.step) * this.step;\n  }\n\n  @Watch('gap')\n  handleGapChange(newValue: number) {\n    if (!this.isRangeType) return;\n    // Use the this.value prop value when the component is initialized\n    // Otherwise, use the current this.min and this.max state values\n    const value = !isNil(this.min) && !isNil(this.max) ? [this.min, this.max] : this.stringToObject(this.value);\n    // If the gap is less than the min or greater than the max, set it to 0\n    this.gap = newValue < value[0] || newValue > value[1] ? 0 : newValue;\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when change the value on range inputs */\n  @Event() bqChange: EventEmitter<{ value: Exclude<TSliderValue, string>; el: HTMLBqSliderElement }>;\n\n  /** Handler to be called when the slider loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSliderElement>;\n\n  /** Handler to be called when the slider gets focused */\n  @Event() bqFocus: EventEmitter<HTMLBqSliderElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.runUpdates();\n  }\n\n  componentDidUpdate() {\n    this.runUpdates();\n  }\n\n  formAssociatedCallback() {\n    this.internals?.setFormValue(`${this.value}`);\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private init = () => {\n    this.handleGapChange(this.gap);\n    this.setState(this.value);\n    this.handleStepPropChange();\n  };\n\n  private runUpdates = () => {\n    this.updateProgressTrack();\n    this.syncInputsValue();\n    this.setThumbPosition();\n  };\n\n  private setState = (newValue: TSliderValue) => {\n    const isRangeType = this.isRangeType;\n    const value = this.stringToObject(newValue);\n\n    this.minValue = isRangeType ? clamp(value[0], this.min, this.max - this.gap) : value;\n    this.maxValue = isRangeType ? clamp(value[1], this.minValue + this.gap, this.max) : this.minValue;\n  };\n\n  private setThumbPosition = () => {\n    if (!this.enableTooltip) return;\n\n    // Destructure the returned object from this.thumbPosition() and assign the properties to this.minThumbPosition and this.maxThumbPosition\n    ({ minThumbPosition: this.minThumbPosition, maxThumbPosition: this.maxThumbPosition } = this.thumbPosition());\n  };\n\n  private syncInputsValue = () => {\n    this.inputMinElem?.setAttribute('value', this.minValue.toString());\n    this.inputMaxElem?.setAttribute('value', this.maxValue.toString());\n  };\n\n  private stringToObject = (value: TSliderValue) => (isString(value) ? JSON.parse(value) : value);\n\n  private handleInputChange = (type: 'min' | 'max', event: InputEvent) => {\n    const target = event.target as HTMLInputElement;\n    const value = parseFloat(target.value);\n\n    if (type === 'min') {\n      this.minValue = this.isRangeType ? Math.min(value, this.maxValue - this.gap) : value;\n    } else if (type === 'max') {\n      this.maxValue = this.isRangeType ? Math.max(value, this.minValue + this.gap) : value;\n    }\n\n    // Update the input value to reflect the clamped value\n    const reflectedValue = (type === 'min' ? this.minValue : this.maxValue).toString();\n    target.value = reflectedValue;\n    target.setAttribute('value', reflectedValue);\n\n    // Sync the prop value.\n    // This will trigger the `@Watch('value')` method and emit the `bqChange` event.\n    const { internals, isRangeType, maxValue, minValue } = this;\n    this.value = isRangeType ? [minValue, maxValue] : minValue;\n    internals?.setFormValue(isRangeType ? JSON.stringify(this.value) : this.value.toString());\n    if (isRangeType) this.el.setAttribute('value', JSON.stringify(this.value));\n  };\n\n  private calculatePercent = (value: number) => {\n    const totalRange = Number(this.max) - Number(this.min);\n    return ((value - this.min) / totalRange) * 100;\n  };\n\n  private updateProgressTrack = () => {\n    if (!this.progressElem) return;\n\n    // For range type, left starts from the `min` value and width is the difference between `max` and `min`.\n    // For non-range type, left starts from 0 and width is the `min` value.\n    const left = this.isRangeType ? this.calculatePercent(this.minValue) : 0;\n    const width = this.isRangeType\n      ? this.calculatePercent(Number(this.maxValue) - Number(this.minValue) + this.min)\n      : this.calculatePercent(this.minValue);\n\n    this.progressElem.style.insetInlineStart = `${left}%`;\n    this.progressElem.style.inlineSize = `${width}%`;\n  };\n\n  private calculateThumbPosition = (value: number): number => {\n    if (!this.progressElem) return 0;\n\n    // Get the width of the track area and the size of the input range thumb\n    const trackAreaWidth = this.trackElem.getBoundingClientRect().width;\n    // We need to also add 4px to the thumb size,\n    // this is because the thumb is 2px border (`border-m`)\n    const inputThumbSize = parseInt(getComputedStyle(this.el).getPropertyValue('--bq-slider--thumb-size'), 10) + 4;\n    const totalWidth = trackAreaWidth - inputThumbSize;\n\n    return ((value - this.min) / (this.max - this.min)) * totalWidth + inputThumbSize / 2;\n  };\n\n  private thumbPosition = (): { minThumbPosition: number; maxThumbPosition?: number } => {\n    const minThumbPosition = this.calculateThumbPosition(this.minValue);\n    const maxThumbPosition = this.isRangeType ? this.calculateThumbPosition(this.maxValue) : undefined;\n\n    return { minThumbPosition, maxThumbPosition };\n  };\n\n  private emitBqChange = () => {\n    this.debounceBqChange?.cancel();\n\n    const value: Exclude<TSliderValue, string> = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n    this.debounceBqChange = debounce(() => this.bqChange.emit({ value, el: this.el }), this.debounceTime);\n\n    this.debounceBqChange();\n  };\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleMouseDown = (event: MouseEvent) => {\n    this.handleTooltipVisibility(event, 'remove');\n  };\n\n  private handleMouseUp = (event: MouseEvent) => {\n    this.handleTooltipVisibility(event, 'add');\n  };\n\n  private handleTooltipVisibility = (event: MouseEvent, action: 'add' | 'remove') => {\n    if (!this.enableTooltip || this.tooltipAlwaysVisible) return;\n\n    const target = event.target as HTMLElement;\n    const tooltipElem = target === this.inputMinElem ? this.minTooltipElem : this.maxTooltipElem;\n    tooltipElem.classList[action]('hidden');\n  };\n\n  private get decimalCount(): number {\n    // Return the length of the decimal part of the step value.\n    return (this.step % 1).toFixed(10).split('.')[1].replace(/0+$/, '').length;\n  }\n\n  private get isRangeType() {\n    return this.type === 'range';\n  }\n\n  private get isTooltipAlwaysVisible(): boolean {\n    return this.tooltipAlwaysVisible && this.enableTooltip;\n  }\n\n  private renderLabel = (value: number, position: 'start' | 'end', css?: string) => {\n    return (\n      <span\n        class={{\n          [`${css} box-content block text-s font-medium leading-regular text-primary is-fit min-is-8 [font-variant:tabular-nums]`]: true,\n          hidden: position === 'start' ? !this.enableValueIndicator : !this.enableValueIndicator || !this.isRangeType,\n        }}\n        part={`label-${position}`}\n      >\n        {value.toFixed(this.decimalCount)}\n      </span>\n    );\n  };\n\n  private renderInput = (type: 'max' | 'min', value: number, refCallback: (input: HTMLInputElement) => void) => {\n    // Determine the zIndex value based on the type and the current min and max values.\n    const zIndexValue = (type: 'min' | 'max'): string => {\n      const zIndex = {\n        min: this.minValue === this.min && this.maxValue === this.minValue,\n        max: this.maxValue === this.max && this.minValue === this.maxValue,\n      };\n\n      // If the value of both thumbs is the same as the min or max value, set the zIndex to -1\n      return zIndex[type] ? '-1' : '0';\n    };\n\n    return (\n      <input\n        type=\"range\"\n        class={{\n          'absolute start-0 -translate-y-1/2 cursor-pointer appearance-none bg-transparent outline-none is-full inset-bs-[50%] disabled:cursor-not-allowed': true,\n          'pointer-events-none': this.isRangeType,\n        }}\n        style={this.isRangeType ? { zIndex: zIndexValue(type) } : undefined}\n        disabled={this.disabled}\n        min={this.min}\n        max={this.max}\n        name={this.name}\n        step={this.step}\n        ref={refCallback}\n        onInput={(ev) => this.handleInputChange(type, ev)}\n        onBlur={this.handleBlur}\n        onFocus={this.handleFocus}\n        onMouseDown={this.handleMouseDown}\n        onMouseUp={this.handleMouseUp}\n        value={value}\n        part={`input-${type}`}\n      />\n    );\n  };\n\n  private renderTooltip = (\n    value: number,\n    thumbPosition: number,\n    refCallback: (elem: HTMLBqTooltipElement) => void,\n  ): HTMLBqTooltipElement => (\n    <bq-tooltip\n      class={{\n        'absolute [&::part(panel)]:absolute': true,\n        hidden: !this.isTooltipAlwaysVisible,\n      }}\n      exportparts=\"base,trigger,panel\"\n      alwaysVisible={true}\n      distance={this.enableValueIndicator ? 6 : 16}\n      style={{ insetInlineStart: `${thumbPosition}px`, fontVariant: 'tabular-nums' }}\n      ref={refCallback}\n    >\n      <div class=\"absolute bs-1 is-1\" slot=\"trigger\" />\n      {value.toFixed(this.decimalCount)}\n    </bq-tooltip>\n  );\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        class={{ 'flex is-full': true, 'cursor-not-allowed opacity-60': this.disabled }}\n        part=\"base\"\n      >\n        {/* LABEL (start) */}\n        {this.renderLabel(this.minValue, 'start', 'me-xs text-end')}\n        {/* SLIDER */}\n        <div class=\"relative is-full\" part=\"container\">\n          {/* TRACK AREA */}\n          <span\n            class=\"absolute start-0 -translate-y-1/2 rounded-xs bg-[--bq-slider--trackarea-color] bs-1 is-full inset-bs-[50%]\"\n            ref={(elem) => (this.trackElem = elem)}\n            part=\"track-area\"\n          />\n          {/* PROGRESS AREA */}\n          <span\n            class=\"absolute -translate-y-1/2 rounded-xs bg-[--bq-slider--progress-color] bs-1 is-[50%] inset-bs-[50%]\"\n            ref={(elem) => (this.progressElem = elem)}\n            part=\"progress-area\"\n          />\n          {/* TOOLTIP on top of the value or min value (if the slider type is `range`) */}\n          {this.enableTooltip &&\n            this.renderTooltip(this.minValue, this.minThumbPosition, (elem) => (this.minTooltipElem = elem))}\n          {/* INPUT (Min), used on single type */}\n          {this.renderInput('min', this.minValue, (input) => (this.inputMinElem = input))}\n          {/* TOOLTIP on top of the max value (if the slider type is `range`) */}\n          {this.enableTooltip &&\n            this.isRangeType &&\n            this.renderTooltip(this.maxValue, this.maxThumbPosition, (elem) => (this.maxTooltipElem = elem))}\n          {/* INPUT (Max) */}\n          {this.isRangeType && this.renderInput('max', this.maxValue, (input) => (this.inputMaxElem = input))}\n        </div>\n        {/* LABEL (end) */}\n        {this.renderLabel(this.maxValue, 'end', 'ms-xs text-start')}\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-spinner.entry.cjs.js","mappings":"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","names":["validatePropValue","hasSlotContent","slot","isNil","getTextContent","getCSSVariableValue","isHTMLElement","h"],"sources":["../../packages/beeq/src/components/spinner/bq-spinner.types.ts","../../packages/beeq/src/components/spinner/scss/bq-spinner.scss?tag=bq-spinner&encapsulation=shadow","../../packages/beeq/src/components/spinner/bq-spinner.tsx"],"sourcesContent":["export const SPINNER_TEXT_POSITION = ['none', 'left', 'right', 'above', 'bellow'] as const;\nexport const SPINNER_SIZE = ['small', 'medium', 'large'] as const;\nexport type TSpinnerTextPosition = (typeof SPINNER_TEXT_POSITION)[number];\nexport type TSpinnerSize = (typeof SPINNER_SIZE)[number];\n","/* -------------------------------------------------------------------------- */\n/*                               Spinner styles                               */\n/* -------------------------------------------------------------------------- */\n@import './bq-spinner.variables';\n\n:host {\n  @apply relative inline-block;\n}\n\n.bq-spinner {\n  @apply flex;\n}\n\n/* -------------------------------------------------------------------------- */\n/*                             Spinner loader size                            */\n/* -------------------------------------------------------------------------- */\n\n.bq-spinner--loader.large {\n  @apply bs-[--bq-spinner--size-large] is-[--bq-spinner--size-large];\n}\n\n.bq-spinner--loader.medium {\n  @apply bs-[--bq-spinner--size-medium] is-[--bq-spinner--size-medium];\n}\n\n.bq-spinner--loader.small {\n  @apply bs-[--bq-spinner--size-small] is-[--bq-spinner--size-small];\n}\n\n/* -------------------------------------------------------------------------- */\n/*                                Text position                               */\n/* -------------------------------------------------------------------------- */\n\n.text-left,\n.text-right {\n  @apply flex-row items-center;\n\n  &.has-text {\n    @apply gap-x-m;\n  }\n}\n\n.text-left {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-2;\n  }\n\n  .bq-spinner--text {\n    @apply order-1;\n  }\n}\n\n.text-right {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-1;\n  }\n\n  .bq-spinner--text {\n    @apply order-2;\n  }\n}\n\n.text-above,\n.text-bellow {\n  @apply flex-col items-center;\n\n  &.has-text {\n    @apply gap-y-m;\n  }\n}\n\n.text-above {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-2;\n  }\n\n  .bq-spinner--text {\n    @apply order-1;\n  }\n}\n\n.text-bellow {\n  .bq-spinner--loader,\n  .bq-spinner--icon {\n    @apply order-1;\n  }\n\n  .bq-spinner--text {\n    @apply order-2;\n  }\n}\n\n/* -------------------------------------------------------------------------- */\n/*                      Animate slotted icon if provided                      */\n/* -------------------------------------------------------------------------- */\n\n.is-animated {\n  .bq-spinner--icon,\n  .bq-spinner--loader > svg {\n    @include animation-spin;\n  }\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { SPINNER_SIZE, SPINNER_TEXT_POSITION } from './bq-spinner.types';\nimport type { TSpinnerSize, TSpinnerTextPosition } from './bq-spinner.types';\nimport {\n  getCSSVariableValue,\n  getTextContent,\n  hasSlotContent,\n  isHTMLElement,\n  isNil,\n  validatePropValue,\n} from '../../shared/utils';\n\n/**\n * Spinners are designed for users to display data loading.\n *\n * @example How to use it\n * ```html\n * <bq-spinner size=\"medium\" text-position=\"bellow\">\n *   <span>Loading...</span>\n * </bq-spinner>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/275f10-spinner/b/09d7b1\n * @status stable\n *\n * @attr {boolean} animation - If `false`, the animation on the icon element will be stopped.\n * @attr {\"small\" | \"medium\" | \"large\"} size - It defines the size of the icon element displayed.\n * @attr {\"above\" | \"below\" | \"left\" | \"right\" | \"none\"} text-position - It defines the position of the label text.\n *\n * @slot icon - The icon slot container.\n * @slot - The content of the spinner component.\n *\n * @part base - The div wrapper container used under the hood.\n * @part icon - The `<svg>` icon element used to spin/animate.\n * @part custom-icon - The `<span>` tag element that holds the custom icon element passed.\n * @part text - The `<span>` tag element that renders the label text inside the component.\n *\n * @cssprop --bq-spinner--color - Spinner color\n * @cssprop --bq-spinner--size-large - Spinner large size\n * @cssprop --bq-spinner--size-medium - Spinner medium size\n * @cssprop --bq-spinner--size-small - Spinner small size\n * @cssprop --bq-spinner--large-text-fontSize - Spinner large text font size\n * @cssprop --bq-spinner--medium-text-fontSize - Spinner medium text font size\n * @cssprop --bq-spinner--small-text-fontSize - Spinner small text font size\n * @cssprop --bq-spinner--text-lineHeight - Spinner text line height\n */\n@Component({\n  tag: 'bq-spinner',\n  styleUrl: './scss/bq-spinner.scss',\n  shadow: true,\n})\nexport class BqSpinner {\n  // Own Properties\n  // ====================\n\n  private iconSlotElem: HTMLElement;\n  private slotElem: HTMLElement;\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.slotContentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqSpinnerElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasIconSlot = false;\n  @State() private hasSlot = false;\n  @State() private slotContentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** If `false`, the animation on the icon element will be stopped */\n  @Prop({ reflect: true }) animation? = true;\n\n  /** It defines the position of the label text */\n  @Prop({ reflect: true }) textPosition: TSpinnerTextPosition = 'none';\n\n  /** It defines the size of the icon element displayed */\n  @Prop({ reflect: true }) size: TSpinnerSize = 'medium';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('textPosition')\n  handleTextPositionProp() {\n    validatePropValue(SPINNER_TEXT_POSITION, 'none', this.el, 'textPosition');\n  }\n\n  @Watch('size')\n  handleSizeProp() {\n    validatePropValue(SPINNER_SIZE, 'medium', this.el, 'size');\n    this.setIconSize();\n  }\n\n  @Watch('hasIconSlot')\n  handleHasIconSlot() {\n    this.setIconSize();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n    this.handleIconSlotChange();\n    this.setIconSize();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    if (!this.slotElem) return;\n\n    this.hasSlot = hasSlotContent(this.slotElem);\n    if (!this.hasSlot) return;\n\n    const slot = this.slotElem.querySelector('slot') ?? null;\n    if (isNil(slot)) return;\n\n    this.slotContentLength = getTextContent(slot, { recurse: true }).length;\n    const nodes = slot.assignedNodes({ flatten: true });\n    nodes.forEach((node) => {\n      this.observer.observe(node, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      });\n    });\n  };\n\n  private handleIconSlotChange = (): void => {\n    this.hasIconSlot = hasSlotContent(this.iconSlotElem, 'icon');\n  };\n\n  private checkPropValues = (): void => {\n    validatePropValue(SPINNER_TEXT_POSITION, 'none', this.el, 'textPosition');\n    validatePropValue(SPINNER_SIZE, 'medium', this.el, 'size');\n  };\n\n  private get isTextDisplayed(): boolean {\n    return this.textPosition !== 'none';\n  }\n\n  private setIconSize(): void {\n    if (!this.hasIconSlot || !this.bqIcon) return;\n\n    this.bqIcon.size = parseInt(getCSSVariableValue(`bq-spinner--size-${this.size}`, this.el)).toString();\n  }\n\n  private get bqIcon(): HTMLBqIconElement | null {\n    if (!this.hasIconSlot) return null;\n\n    const slot = this.iconSlotElem.querySelector('slot');\n\n    return [...slot.assignedElements({ flatten: true })].filter((el: Element) =>\n      isHTMLElement(el, 'bq-icon'),\n    )[0] as HTMLBqIconElement;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        class={{\n          [`bq-spinner ${this.size} text-${this.textPosition}`]: true,\n          'is-animated': this.animation,\n          'has-text': !!this.slotContentLength,\n        }}\n        part=\"base\"\n      >\n        {!this.hasIconSlot && (\n          <div\n            class={`bq-spinner--loader ${this.size} relative text-[--bq-spinner--color]`}\n            aria-label=\"Loading...\"\n            role=\"status\"\n          >\n            <svg class=\"bs-full is-full\" fill=\"currentColor\" viewBox=\"0 0 48 48\">\n              <path\n                fill=\"currentColor\"\n                d=\"M10.27 7.637c-.937-1.117-.798-2.796.415-3.605a24 24 0 0 1 37.09 23.249c-.2 1.444-1.65 2.301-3.064 1.944-1.414-.356-2.25-1.793-2.096-3.242A18.72 18.72 0 0 0 14.102 8.11c-1.237.77-2.895.643-3.832-.474Z\"\n              />\n              <path\n                fill=\"currentColor\"\n                d=\"M48 24c0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0s24 10.745 24 24ZM5.28 24c0 10.339 8.381 18.72 18.72 18.72 10.339 0 18.72-8.381 18.72-18.72 0-10.339-8.381-18.72-18.72-18.72C13.661 5.28 5.28 13.661 5.28 24Z\"\n                opacity=\".1\"\n              />\n            </svg>\n          </div>\n        )}\n        <span\n          class={{\n            'bq-spinner--icon': true,\n            flex: this.hasIconSlot,\n            '!hidden': !this.hasIconSlot,\n          }}\n          ref={(spanElem) => (this.iconSlotElem = spanElem)}\n          part=\"custom-icon\"\n        >\n          <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n        </span>\n        <span\n          class={{\n            'bq-spinner--text font-medium leading-regular text-primary': true,\n            '!hidden': !this.isTextDisplayed,\n          }}\n          part=\"text\"\n          ref={(spanElem) => (this.slotElem = spanElem)}\n        >\n          <slot onSlotchange={this.handleSlotChange} />\n        </span>\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-status.entry.cjs.js","mappings":";;;;;;;;;AAAO,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,CAAU;;ACArF,MAAM,WAAW,GAAG,ykpBAAykpB;;MCkChlpB,QAAQ,GAAA,MAAA;;;;;;;;;;;IAgBM,IAAI,GAAgB,SAAS;;;IAKtD,eAAe,GAAA;QACbA,uBAAiB,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;;;;;;;;IAU5D,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;;;;;;;;;;;;;;;;IAoBxB,MAAM,GAAA;AACJ,QAAA,QACEC,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC9EA,OAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAE,CAAkC,+BAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAE,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAG,CAAA,EACzGA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,uGAAuG,EAC7G,IAAI,EAAC,MAAM,EAAA,EAEXA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACF;;;;;;;;;;","names":["validatePropValue","h"],"sources":["../../packages/beeq/src/components/status/bq-status.types.ts","../../packages/beeq/src/components/status/scss/bq-status.scss?tag=bq-status&encapsulation=shadow","../../packages/beeq/src/components/status/bq-status.tsx"],"sourcesContent":["export const STATUS_TYPE = ['alert', 'danger', 'info', 'neutral', 'success'] as const;\nexport type TStatusType = (typeof STATUS_TYPE)[number];\n","@import './bq-status.variables';\n\n.bq-status__circle {\n  &::part(base) {\n    --bq-badge--size-medium: var(--bq-status-circle--size);\n  }\n\n  &.success::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.success);\n  }\n\n  &.danger::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.danger);\n  }\n\n  &.neutral::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.secondary);\n  }\n\n  &.alert::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.warning);\n  }\n\n  &.info::part(base) {\n    --bq-badge--background-color: theme(backgroundColor.ui.brand);\n  }\n}\n\n.bq-status__text ::slotted(*) {\n  @apply text-s font-medium leading-regular text-primary p-b-0 p-i-0 m-b-0 m-i-0;\n}\n","import { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport { STATUS_TYPE } from './bq-status.types';\nimport type { TStatusType } from './bq-status.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * The Status Component is a UI element that represents the current state or condition of an item, task, or process.\n *\n * @example How to use it\n * ```html\n * <bq-status type=\"alert\">Alert status</bq-status>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/46c8d5-status/b/09d7b1\n * @status stable\n *\n * @dependency bq-badge\n *\n * @attr {\"alert\" | \"danger\" | \"info\" | \"neutral\" | \"success\"} type - It defines the type of status to display.\n *\n * @slot The content of the status component.\n *\n * @part base - The component's internal wrapper of the status component.\n * @part circle - The colored circle that marks the status type.\n * @part text - The `<div>` container that holds the text label of the status component.\n *\n * @cssprop --bq-status-circ - Status circle size.\n */\n@Component({\n  tag: 'bq-status',\n  styleUrl: './scss/bq-status.scss',\n  shadow: true,\n})\nexport class BqStatus {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStatusElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines the type of status to display  */\n  @Prop({ reflect: true }) type: TStatusType = 'neutral';\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(STATUS_TYPE, 'neutral', this.el, 'type');\n  }\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n  render() {\n    return (\n      <div class=\"bq-status inline-flex items-center gap-xs\" part=\"base\" role=\"status\">\n        <bq-badge class={`bq-status__circle rounded-full ${this.type}`} size=\"medium\" part=\"circle\" role=\"img\" />\n        <div\n          class=\"bq-status__text text-s font-medium leading-regular text-primary max-bs-[20px] p-b-0 p-i-0 m-b-0 m-i-0\"\n          part=\"text\"\n        >\n          <slot />\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-step-item.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bq-step-item.entry.cjs.js","mappings":"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","names":["validatePropValue","STEPS_SIZE","isHTMLElement","h"],"sources":["../../packages/beeq/src/components/step-item/bq-step-item.types.ts","../../packages/beeq/src/components/step-item/scss/bq-step-item.scss?tag=bq-step-item&encapsulation=shadow","../../packages/beeq/src/components/step-item/bq-step-item.tsx"],"sourcesContent":["export const STEP_ITEM_STATUS = ['default', 'current', 'completed', 'error', 'disabled'] as const;\nexport type TStepItemStatus = (typeof STEP_ITEM_STATUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                                Step item styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-step-item.variables';\n\n:host {\n  --bq-icon--color: theme(stroke.icon.primary);\n  // !Note: The use of the `bg-primary` is to avoid the divider to be visible behind the step item.\n  @apply bg-primary;\n}\n\n.bq-step-item {\n  @apply flex gap-s rounded-m border-none bg-transparent pe-[--bq-steps--gap] ps-0 p-b-xs2 focus-visible:focus hover:bg-hover-ui-secondary;\n  @apply transition-colors duration-300;\n}\n\n.bq-step-item__prefix.dot,\n.bq-step-item__prefix.icon {\n  ::slotted(bq-icon) {\n    --bq-icon--color: var(--bq-step-item--prefix-color);\n  }\n\n  &.current {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-current);\n    }\n  }\n\n  &.completed {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-completed);\n    }\n  }\n\n  &.error {\n    ::slotted(bq-icon) {\n      --bq-icon--color: var(--bq-step-item--prefix-color-error);\n    }\n  }\n\n  &.disabled {\n    ::slotted(bq-icon) {\n      opacity: 0.6;\n    }\n  }\n}\n\n.bq-step-item__prefix.numeric {\n  @apply flex items-center justify-center rounded-full;\n  @apply bg-[--bq-step-item--prefix-num-bg-color] bs-[--bq-step-item--prefix-num-size] is-[--bq-step-item--prefix-num-size];\n  @apply text-m font-semibold leading-regular text-primary;\n\n  &.small {\n    @apply text-s [--bq-step-item--prefix-num-size:--bq-spacing-l];\n  }\n\n  // Status\n\n  &.current {\n    @apply bg-[var(--bq-step-item--prefix-color-current)] text-alt;\n  }\n\n  &.completed {\n    @apply bg-ui-success-alt text-success;\n  }\n\n  &.error {\n    @apply bg-ui-danger-alt text-danger;\n  }\n\n  &.disabled {\n    @apply opacity-60;\n  }\n}\n\n.bq-step-item__content--description::slotted(*) {\n  @apply text-s leading-regular opacity-60;\n}\n","import { Component, Element, Event, h, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { STEP_ITEM_STATUS } from './bq-step-item.types';\nimport type { TStepItemStatus } from './bq-step-item.types';\nimport { isHTMLElement, validatePropValue } from '../../shared/utils';\nimport { STEPS_SIZE } from '../steps/bq-steps.types';\nimport type { TStepsSize, TStepsType } from '../steps/bq-steps.types';\n\n/**\n * The Step Item Component is a UI element used to display a single step or stage in a process or task.\n * It should be used inside the Steps component.\n *\n * @example How to use it\n * ```html\n * <bq-step-item status=\"completed\">\n *   <bq-icon slot=\"prefix\" name=\"check-circle\"></bq-icon>\n *   <span>Title</span>\n *   <span slot=\"description\">Description</span>\n * </bq-step-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @attr {\"small\" | \"medium\"} size - It defines prefix size\n * @attr {\"completed\" | \"current\" | \"error\" | \"default\" | \"disabled\"} status - It defines step item appearance based on its status\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - It defines the step item type used\n *\n * @event bqClick - Callback handler emitted when the step item is clicked\n *\n * @slot - The step item content\n * @slot prefix - The step item prefix\n * @slot description - The step item description\n *\n * @part base - The component's base wrapper.\n * @part title - The component's title.\n * @part description - The component's description.\n *\n * @cssprop --bq-step-item--prefix-color - Color of the prefix icon\n * @cssprop --bq-step-item--prefix-color-current - Color of the prefix icon when current\n * @cssprop --bq-step-item--prefix-color-completed - Color of the prefix icon when completed\n * @cssprop --bq-step-item--prefix-color-error - Color of the prefix icon when error\n * @cssprop --bq-step-item--prefix-num-size - Size of the prefix number\n * @cssprop --bq-step-item--prefix-num-bg-color - Background color of the prefix number\n */\n@Component({\n  tag: 'bq-step-item',\n  styleUrl: './scss/bq-step-item.scss',\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqStepItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n  @Element() el!: HTMLBqStepItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** It defines prefix size */\n  @Prop({ reflect: true }) size?: TStepsSize = 'medium';\n\n  /** It defines step item appearance based on its status */\n  @Prop({ reflect: true, mutable: true }) status?: TStepItemStatus = 'default';\n\n  /** It defines the step item type used */\n  @Prop({ reflect: true }) type?: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  @Watch('status')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEP_ITEM_STATUS, 'default', this.el, 'status');\n\n    this.handleIconPrefix();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler triggered when the step item is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqStepItemElement>;\n\n  /** Callback handler triggered when the step item is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqStepItemElement>;\n\n  /** Callback handler triggered when the step item loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqStepItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    this.checkPropValues();\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.handleIconPrefix();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleClick = async () => {\n    if (this.isDisabled || this.isCurrent) return;\n\n    const clickEvent = this.bqClick.emit(this.el);\n    if (clickEvent.defaultPrevented) return;\n\n    const stepsParent = this.el.closest('bq-steps') as HTMLBqStepsElement;\n    if (!stepsParent) return;\n\n    await stepsParent.setCurrentStepItem(this.el);\n  };\n\n  private handleIconPrefix = () => {\n    const iconElem = this.el.querySelector('[slot=\"prefix\"]');\n    if (!iconElem || !isHTMLElement(iconElem, 'bq-icon')) return;\n\n    iconElem.size = this.size === 'small' ? 24 : 32;\n  };\n\n  private get isDisabled(): boolean {\n    return this.status === 'disabled';\n  }\n\n  private get isCurrent(): boolean {\n    return this.status === 'current';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <button\n        class={{\n          'bq-step-item': true,\n          [`bq-step-item--${this.status}`]: true,\n          'pointer-events-none opacity-60': this.isDisabled,\n        }}\n        disabled={this.isDisabled}\n        onClick={this.handleClick}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        type=\"button\"\n        part=\"base\"\n      >\n        <div class={`bq-step-item__prefix relative ${this.type} ${this.size} ${this.status}`}>\n          <slot name=\"prefix\" onSlotchange={this.handleIconPrefix} />\n        </div>\n        <div class=\"bq-step-item__content items-start text-start\">\n          {/* TITLE */}\n          <div\n            class={{\n              'bq-step-item__content--title pe-xs3 text-m leading-regular text-primary': true,\n              'pointer-events-none': this.isDisabled,\n              'text-brand': this.isCurrent,\n            }}\n            part=\"title\"\n          >\n            <slot />\n          </div>\n          {/* DESCRIPTION */}\n          <div\n            class={{\n              'bq-step-item__content--description text-s leading-regular text-secondary': true,\n              'opacity-60': this.isDisabled,\n            }}\n            part=\"description\"\n          >\n            <slot name=\"description\" />\n          </div>\n        </div>\n      </button>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-steps.entry.cjs.js","mappings":";;;;;;;;;;AAAA,MAAM,UAAU,GAAG,g/nBAAg/nB;;MC4Ct/nB,OAAO,GAAA,MAAA;;;;;;AAIV,IAAA,QAAQ;;;;;;;;IAeS,YAAY,GAAW,iBAAiB;;IAGxC,IAAI,GAAe,QAAQ;;AAG3B,IAAA,IAAI;;;IAO7B,eAAe,GAAA;QACbA,uBAAiB,CAACC,wBAAU,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;QACxDD,uBAAiB,CAACE,wBAAU,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC;QAEzD,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;IAUzB,gBAAgB,GAAA;QACd,IAAI,CAAC,gBAAgB,EAAE;;;;;;;;;;AAazB;;;AAGG;IAEH,MAAM,kBAAkB,CAAC,cAAqC,EAAA;;;AAG5D,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC;AAC1E,QAAA,IAAI,WAAW;AAAE,YAAA,WAAW,CAAC,MAAM,GAAG,SAAS;;AAE/C,QAAA,cAAc,CAAC,MAAM,GAAG,SAAS;;;;;;AAQnC,IAAA,IAAY,OAAO,GAAA;QACjB,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,YAAA,OAAO,EAAE;QAE7B,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC;AAChD,QAAA,OAAO,CAAC,GAAG,IAAI,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CACzD,CAAC,EAA6B,KAAK,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAChD;;IAG1B,gBAAgB,GAAG,MAAK;QAC9B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,UAAiC,KAAI;AACzD,YAAA,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AAC3B,YAAA,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI;AAC7B,SAAC,CAAC;AACJ,KAAC;;;;IAMD,MAAM,GAAA;;AAEJ,QAAA,MAAM,iBAAiB,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAErE,QAAA,QACEC,kEACE,KAAK,EAAC,kDAAkD,EACxD,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC,EACnC,IAAI,EAAC,WAAW,EAAA,EAEhBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACRA,OACE,CAAA,YAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAA8C,2CAAA,EAAA,iBAAiB,CAAE,CAAA,EACxE,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,eAAe,EAAE,CAAC,EAClB,WAAW,EAAC,2EAA2E,EAAA,CACvF,CACE;;;;;;;;;;;","names":["validatePropValue","STEPS_SIZE","STEPS_TYPE","h"],"sources":["../../packages/beeq/src/components/steps/scss/bq-steps.scss?tag=bq-steps&encapsulation=shadow","../../packages/beeq/src/components/steps/bq-steps.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Steps styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-steps.variables';\n\n:host {\n  @apply block;\n}\n\n::slotted(bq-step-item:not(:first-child)) {\n  @apply ps-[--bq-steps--gap];\n}\n","import { Component, Element, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { STEPS_SIZE, STEPS_TYPE } from './bq-steps.types';\nimport type { TStepsSize, TStepsType } from './bq-steps.types';\nimport { validatePropValue } from '../../shared/utils';\n\n/**\n * The Steps Component is a UI element used to display a series of steps or stages in a process or task.\n * It is used to guide users through a process or task and to indicate their progress.\n *\n * @example How to use it\n * ```html\n * <bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n *   <bq-step-item status=\"completed\"> ... </bq-step-item>\n *   <bq-step-item status=\"error\"> ... </bq-step-item>\n *   <bq-step-item status=\"current\"> ... </bq-step-item>\n *   <bq-step-item status=\"default\"> ... </bq-step-item>\n * </bq-steps>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/896b66-stepper\n * @status stable\n *\n * @dependency bq-divider\n *\n * @attr {string} divider-color - The color of the line that connects the steps. It should be a valid declarative color token.\n * @attr {\"medium\" | \"small\"} size - The size of the steps\n * @attr {\"numeric\" | \"icon\" | \"dot\"} type - The type of prefix element to use on the step items\n *\n * @slot - The step items\n *\n * @part container - The container wrapper of the Steps component\n * @part divider-base - The base wrapper of the divider component\n * @part divider-dash-start - The dash start wrapper of the divider component\n * @part divider-dash-end - The dash end wrapper of the divider component\n *\n * @cssprop --bq-steps--divider-color - Divider color\n * @cssprop --bq-steps--gap - Gap between steps\n */\n@Component({\n  tag: 'bq-steps',\n  styleUrl: './scss/bq-steps.scss',\n  shadow: true,\n})\nexport class BqSteps {\n  // Own Properties\n  // ====================\n\n  private stepElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqStepsElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The color of the line that connects the steps. It should be a valid declarative color token. */\n  @Prop({ reflect: true }) dividerColor: string = 'stroke--primary';\n\n  /** The size of the steps */\n  @Prop({ reflect: true }) size: TStepsSize = 'medium';\n\n  /** The type of prefix element to use on the step items */\n  @Prop({ reflect: true }) type: TStepsType;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  @Watch('size')\n  checkPropValues() {\n    validatePropValue(STEPS_SIZE, 'medium', this.el, 'size');\n    validatePropValue(STEPS_TYPE, 'numeric', this.el, 'type');\n\n    this.setStepItemProps();\n  }\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.setStepItemProps();\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  /**\n   * Set the current step item.\n   * @param newCurrentStep - The step item to set as current.\n   */\n  @Method()\n  async setCurrentStepItem(newCurrentStep: HTMLBqStepItemElement): Promise<void> {\n    // Ideally, only one step item should be current.\n    // So we change the status of the current step item to default.\n    const currentStep = this.bqSteps.find((step) => step.status === 'current');\n    if (currentStep) currentStep.status = 'default';\n    // And then we set the status of the new current step item to current.\n    newCurrentStep.status = 'current';\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private get bqSteps(): HTMLBqStepItemElement[] {\n    if (!this.stepElem) return [];\n\n    const slot = this.stepElem.querySelector('slot');\n    return [...slot.assignedElements({ flatten: true })].filter(\n      (el: HTMLBqSideMenuItemElement) => el.tagName.toLowerCase() === 'bq-step-item',\n    ) as [HTMLBqSideMenuItemElement];\n  }\n\n  private setStepItemProps = () => {\n    this.bqSteps.forEach((bqStepElem: HTMLBqStepItemElement) => {\n      bqStepElem.size = this.size;\n      bqStepElem.type = this.type;\n    });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    // !Note: We use a custom padding value for the medium size to avoid misalignment between the steps and the divider.\n    const dividerPaddingTop = this.size === 'small' ? 'p-bs-m' : 'p-bs-5';\n\n    return (\n      <div\n        class=\"relative flex w-full items-start justify-between\"\n        ref={(div) => (this.stepElem = div)}\n        part=\"container\"\n      >\n        <slot />\n        <bq-divider\n          class={`absolute -z-10 p-i-s inset-ie-0 inset-is-0 ${dividerPaddingTop}`}\n          strokeColor={this.dividerColor}\n          strokeThickness={2}\n          exportparts=\"base:divider-base,dash-start:divider-dash-start,dash-end:divider-dash-end\"\n        />\n      </div>\n    );\n  }\n}\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"bq-switch.entry.cjs.js","mappings":"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","names":["slot","isNil","getTextContent","h","Host"],"sources":["../../packages/beeq/src/components/switch/scss/bq-switch.scss?tag=bq-switch&encapsulation=shadow","../../packages/beeq/src/components/switch/bq-switch.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Switch styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-switch.variables';\n\n:host {\n  @apply inline-block;\n}\n\n:host(.full-width) {\n  @apply is-full;\n}\n\n.bq-switch {\n  @apply flex cursor-pointer select-none items-center rounded-s transition-colors duration-300 p-b-2 p-i-2;\n\n  justify-content: var(--bq-switch--justify-content);\n\n  // Display background on hover (if enabled)\n  &.has-background:not(.is-disabled):hover {\n    @apply bg-hover-ui-primary;\n  }\n\n  &.is-disabled {\n    @apply cursor-not-allowed opacity-60;\n  }\n}\n\n.bq-switch--input:not(:disabled):focus,\n.bq-switch--input:not(:disabled):focus-visible {\n  ~ .bq-switch--control {\n    @apply focus;\n  }\n}\n\n.bq-switch--control__dot {\n  @apply absolute start-xs2 rounded-full bg-ui-primary bs-[--bq-switch--dot-size] is-[--bq-switch--dot-size];\n  @apply group-[&.is-checked]:start-[calc(100%_-_var(--bq-switch--dot-size)_-_var(--bq-spacing-xs2))] group-[&.is-checked]:bg-[--bq-icon--alt];\n  @apply transition-all duration-300;\n}\n\n.bq-switch--control__icon {\n  --bq-icon--size: var(--bq-switch--dot-size) !important;\n\n  &::part(base) {\n    @apply flex;\n  }\n}\n","import { AttachInternals, Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport type { TSwitchInnerLabel, TSwitchJustifyContent } from './bq-switch.types';\nimport { getTextContent, isNil } from '../../shared/utils';\n\n/**\n * Toggle switches are digital on/off switches.\n * They should provide immediate results, giving users the freedom to control their preferences as needed.\n *\n * @example How to use it\n * ```html\n * <bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\n *   Toggle me!\n * </bq-switch>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/49d9c9-switch\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {boolean} background-on-hover - If `true`, a background will be displayed on hover\n * @attr {boolean} checked - It indicates whether if the switch is `ON` by default (when the page loads)\n * @attr {boolean} disabled - If `true`, the switch control will be disabled and no interaction will be allowed\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} full-width - If `true`, the component will take the full width space available on the parent container\n * @attr {\"default\" | \"icon\"} inner-label - It indicates how to to display the on/off marks inside the control, with icons or none (default)\n * @attr {\"start\" | \"end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\"} justify-content - It defines how to distribute the space between and around the control and the label text\n * @attr {string} name - Name of the form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted\n * @attr {boolean} reverse-order - If `true`, the order of the control and the label text will be changed\n * @attr {string} value - The input control's value, submitted as a name/value pair with form data\n *\n * @event bqChange - Handler to be called when the switch state changes\n * @event bqFocus - Handler to be called when the switch gets focus\n * @event bqBlur - Handler to be called when the switch loses focus\n *\n * @slot - The switch label text\n *\n * @part base - HTML `<label>` root container\n * @part control - HTML `<div>` element for the custom control\n * @part dot - HTML `<div>` element that acts as changing dot\n * @part icon-off - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n * @part icon-on - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n * @part label - HTML `<span>` element that holds the label text\n *\n * @cssprop --bq-switch--height - Switch height\n * @cssprop --bq-switch--justify-content - Switch justify content\n * @cssprop --bq-switch--width - Switch width\n * @cssprop --bq-switch--dot-size - Switch dot size\n */\n@Component({\n  tag: 'bq-switch',\n  styleUrl: './scss/bq-switch.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqSwitch {\n  // Own Properties\n  // ====================\n\n  private labelElem: HTMLSpanElement;\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @AttachInternals() internals!: ElementInternals;\n  @Element() el!: HTMLBqSwitchElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() hasLabel = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true, a background will be displayed on hover */\n  @Prop({ reflect: true }) backgroundOnHover?: boolean = false;\n\n  /** It indicates whether if the switch is `ON` by default (when the page loads) */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n\n  /** If true, the switch control will be disabled and no interaction will be allowed */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true, the component will take the full width space available on the parent container */\n  @Prop({ reflect: true }) fullWidth?: boolean = false;\n\n  /** It indicates how to to display the on/off marks inside the control, with icons or none (default)  */\n  @Prop({ reflect: true }) innerLabel?: TSwitchInnerLabel = 'default';\n\n  /**\n   * It defines how to distribute the space between and around the control and the label text\n   * (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)\n   */\n  @Prop({ reflect: true }) justifyContent?: TSwitchJustifyContent = 'start';\n\n  /** Name of the form control. Submitted with the form as part of a name/value pair */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must switch `ON` the element before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean = false;\n\n  /** If true, the order of the control and the label text will be changed  */\n  @Prop({ reflect: true }) reverseOrder?: boolean = false;\n\n  /** The input control's value, submitted as a name/value pair with form data. */\n  @Prop({ reflect: true }) value?: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('required')\n  handleRequiredChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the switch state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the switch gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqSwitchElement>;\n\n  /** Handler to be called when the switch loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqSwitchElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      this.bqChange.emit({ checked: this.checked });\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\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  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.inputElem.setAttribute('checked', `${this.checked}`);\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleSlotChange = () => {\n    const slot = this.labelElem?.querySelector('slot') ?? null;\n    if (isNil(slot)) return;\n\n    this.hasLabel = !!getTextContent(slot, { recurse: true }).length;\n  };\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the component (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the switch component is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const hostStyle = {\n      ...(this.justifyContent && { '--bq-switch--justify-content': this.justifyContent }),\n    };\n\n    const labelCssClasses = {\n      'has-background': this.backgroundOnHover,\n      'is-checked': this.checked,\n      'is-disabled': this.disabled,\n      'flex-row-reverse': this.reverseOrder,\n    };\n\n    return (\n      <Host class={{ 'full-width': this.fullWidth }} style={hostStyle}>\n        <label class={{ 'bq-switch group': true, ...labelCssClasses }} part=\"base\">\n          {/* Hidden native HTML input */}\n          <input\n            class=\"bq-switch--input peer sr-only !bs-[--bq-switch--dot-size] !is-[--bq-switch--width] peer-checked:invisible\"\n            type=\"checkbox\"\n            checked={this.checked}\n            disabled={this.disabled}\n            required={this.required}\n            name={!isNil(this.name) ? this.name : undefined}\n            aria-label={this.name}\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            ref={(input) => (this.inputElem = input)}\n            role=\"switch\"\n            value={this.value}\n          />\n          {/* Control */}\n          <div\n            class=\"bq-switch--control relative box-border flex justify-between rounded-full bg-ui-tertiary transition duration-300 bs-[--bq-switch--height] is-[--bq-switch--width] p-b-xs2 p-i-xs2 group-[&.is-checked]:bg-ui-brand\"\n            part=\"control\"\n          >\n            {this.innerLabel === 'icon' && (\n              <bq-icon\n                class=\"bq-switch--control__icon on\"\n                name=\"check\"\n                color=\"icon--alt\"\n                role=\"img\"\n                title=\"On\"\n                part=\"icon-on\"\n              />\n            )}\n            {this.innerLabel === 'icon' && (\n              <bq-icon\n                class=\"bq-switch--control__icon off\"\n                name=\"x\"\n                color=\"icon--inverse\"\n                role=\"img\"\n                title=\"Off\"\n                part=\"icon-off\"\n              />\n            )}\n            {/* Dot */}\n            <div class=\"bq-switch--control__dot\" part=\"dot\" />\n          </div>\n          {/* Label */}\n          <span\n            class={{\n              'bq-switch--label text-m font-medium leading-regular text-primary transition-colors duration-300': true,\n              'ms-s': this.hasLabel && !this.reverseOrder,\n              'me-s': this.hasLabel && this.reverseOrder,\n            }}\n            ref={(span) => (this.labelElem = span)}\n            part=\"label\"\n          >\n            <slot onSlotchange={this.handleSlotChange} />\n          </span>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/bq-tab-group.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"bq-tab-group.entry.cjs.js","mappings":"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","names":["debounce","validatePropValue","TAB_SIZE","TAB_ORIENTATION","TAB_PLACEMENT","isNil","isHTMLElement","getNextElement","h","Host"],"sources":["../../packages/beeq/src/components/tab-group/scss/bq-tab-group.scss?tag=bq-tab-group&encapsulation=shadow","../../packages/beeq/src/components/tab-group/bq-tab-group.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply block;\n}\n\n.bq-tab-group {\n  @apply relative;\n\n  &::after {\n    @apply absolute flex border-0 border-solid border-primary content-empty;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      @apply is-full inset-be-0 [border-block-end-width:--bq-stroke-s];\n    }\n  }\n\n  &--horizontal-start {\n    @apply justify-start;\n  }\n\n  &--horizontal-end {\n    @apply justify-end;\n  }\n\n  &--vertical-start::after {\n    @apply end-0 bs-full is-0 [border-block-end-width:0px] [border-inline-end-width:--bq-stroke-s];\n  }\n\n  &--vertical-end::after {\n    @apply start-0 bs-full is-0 [border-block-end-width:0px] [border-inline-start-width:--bq-stroke-s];\n  }\n}\n\n.bq-tab-group.no-divider {\n  &::after {\n    @apply content-none;\n  }\n}\n\n.bq-tab-group--container {\n  @include hide-scrollbar;\n  @apply gap-xs2 p-xs2; // This will avoid cutting the outline focus style\n}\n","import { Component, Element, Event, h, Host, Listen, Prop, Watch } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\nimport { debounce, getNextElement, isHTMLElement, isNil, TDebounce, validatePropValue } from '../../shared/utils';\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE } from '../tab/bq-tab.types';\nimport type { TTabOrientation, TTabPlacement, TTabSize } from '../tab/bq-tab.types';\n\n/**\n * The tab group is a user interface element that allows users wrap a set of tab items.\n *\n * @example How to use it\n * ```html\n * <bq-tab-group value=\"5\">\n *   <bq-tab tab-id=\"1\">Tab</bq-tab>\n *   <bq-tab tab-id=\"2\" active>Tab</bq-tab>\n *   <bq-tab tab-id=\"3\">Long Tab name</bq-tab>\n *   <bq-tab tab-id=\"4\" disabled>Tab</bq-tab>\n * </bq-tab-group>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/775321-tabs\n * @status stable\n *\n * @attr {number} debounce-time - A number representing the delay value applied to bqChange event handler\n * @attr {boolean} disable-divider - If true, the underline divider below the tabs won't be shown\n * @attr {string} orientation - The direction that tab should be render\n * @attr {string} placement - The placement that tab should be render\n * @attr {string} size - The size of the tab\n * @attr {string} value - A string representing the id of the selected tab.\n *\n * @event bqChange - Handler to be called when the tab value changes\n *\n * @slot - The bq-tab items\n *\n * @part base - The HTML div wrapper inside the shadow DOM.\n * @part tabs - The HTML div used to hold the tab buttons.\n */\n@Component({\n  tag: 'bq-tab-group',\n  styleUrl: './scss/bq-tab-group.scss',\n  shadow: true,\n})\nexport class BqTabGroup {\n  // Own Properties\n  // ====================\n\n  private debouncedBqChange: TDebounce<{ value: string; target: HTMLBqTabElement }>;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabGroupElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** A number representing the delay value applied to bqChange event handler */\n  @Prop({ reflect: true, mutable: true }) debounceTime = 0;\n\n  /** If true, the underline divider below the tabs won't be shown  */\n  @Prop({ reflect: true }) disableDivider = false;\n\n  /** The direction that tab should be render */\n  @Prop({ reflect: true }) orientation?: TTabOrientation = 'horizontal';\n\n  /** The placement that tab should be render */\n  @Prop({ reflect: true }) placement?: TTabPlacement = 'start';\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\n\n  /** A string representing the id of the selected tab. */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('debounceTime')\n  checkDebounceChange() {\n    if (this.debounceTime < 0) {\n      this.debounceTime = Math.max(0, this.debounceTime);\n    }\n\n    if (this.debouncedBqChange) {\n      this.debouncedBqChange.cancel();\n    }\n\n    this.debouncedBqChange = debounce((event: Parameters<typeof this.debouncedBqChange>[0]) => {\n      this.bqChange.emit(event);\n    }, this.debounceTime);\n  }\n\n  @Watch('size')\n  @Watch('value')\n  @Watch('orientation')\n  @Watch('placement')\n  checkPropValues() {\n    validatePropValue(TAB_SIZE, 'medium', this.el, 'size');\n    validatePropValue(TAB_ORIENTATION, 'horizontal', this.el, 'orientation');\n    validatePropValue(TAB_PLACEMENT, 'start', this.el, 'placement');\n\n    this.bqTabElements.forEach((bqTabElement) => {\n      bqTabElement.size = this.size;\n      bqTabElement.orientation = this.orientation;\n      bqTabElement.placement = this.placement;\n      bqTabElement.active = !isNil(this.value) ? bqTabElement.tabId === this.value : false;\n    });\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab value changes */\n  @Event() bqChange: EventEmitter<{ target: HTMLBqTabElement; value: string }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkDebounceChange();\n    this.checkPropValues();\n  }\n\n  componentDidLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('keyup', { target: 'body', passive: true, capture: true })\n  onKeyUp(event: KeyboardEvent) {\n    const { target } = event;\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    this.makeTabsFocusable();\n  }\n\n  @Listen('bqClick', { passive: true })\n  onBqClick(event: CustomEvent<HTMLBqTabElement>) {\n    const { detail: target } = event;\n    this.bqTabElements.forEach((bqTabElement) => (bqTabElement.active = bqTabElement === target));\n    this.debouncedBqChange({ value: target.tabId, target });\n    this.selectTab(target);\n  }\n\n  @Listen('bqKeyDown', { passive: true })\n  async onBqKeyDown(event: CustomEvent<KeyboardEvent>) {\n    const { target } = event;\n\n    // NOTE: ensures the target is an HTML element with the tag name 'bq-tab'\n    if (!isHTMLElement(target, 'bq-tab')) return;\n\n    const keyActions: { [key: string]: 'forward' | 'backward' } = {\n      ArrowDown: 'forward',\n      ArrowRight: 'forward',\n      ArrowUp: 'backward',\n      ArrowLeft: 'backward',\n    };\n\n    // NOTE: gets the direction based on key pressed\n    const direction = keyActions[event.detail.key];\n\n    if (!direction) return;\n\n    await this.focusTabSibling(target, direction);\n  }\n\n  @Listen('bqBlur', { capture: true, passive: true })\n  onBqBlur() {\n    this.restoreTabsFocus();\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  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private focusTabSibling = async (\n    currentTarget: HTMLBqTabElement,\n    direction: 'forward' | 'backward',\n  ): Promise<void> => {\n    let target: HTMLBqTabElement | null = null;\n\n    this.bqTabElements.forEach((bqTabElement, index, elements) => {\n      bqTabElement.active = false;\n\n      if (bqTabElement === currentTarget) {\n        target = getNextElement(elements, index, direction);\n      }\n    });\n\n    if (target) {\n      await target.vFocus();\n      this.selectTab(target);\n    }\n  };\n\n  private makeTabsFocusable = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled) return;\n\n      /**\n       * This is a \"fire and forget\" operation. The callback itself doesn't do anything special\n       * with the asynchronous code (doesn't await it or do anything with the result)\n       * Details: https://stackoverflow.com/a/63488201\n       */\n      (async () => {\n        await bqTabElement.enableFocus(true);\n      })();\n    });\n  };\n\n  private restoreTabsFocus = (): void => {\n    this.bqTabElements.forEach((bqTabElement) => {\n      if (bqTabElement.disabled || bqTabElement.active) return;\n\n      /** @See line #173 */\n      (async () => {\n        await bqTabElement.enableFocus(false);\n      })();\n    });\n  };\n\n  private get bqTabElements(): HTMLBqTabElement[] {\n    return Array.from(this.el.querySelectorAll('bq-tab'));\n  }\n\n  private selectTab = (target: HTMLBqTabElement): void => {\n    const { tabId } = target;\n    target.active = true;\n    this.value = tabId;\n    this.debouncedBqChange({ value: tabId, target });\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host class={{ 'inline-block': this.orientation === 'vertical' }}>\n        <div\n          class={{\n            [`bq-tab-group bq-tab-group--${this.orientation}-${this.placement} flex is-full`]: true,\n            'no-divider': this.disableDivider,\n          }}\n          part=\"base\"\n        >\n          <div\n            class={{\n              'bq-tab-group--container flex overflow-x-auto': true,\n              'flex-col': this.orientation !== 'horizontal',\n            }}\n            role=\"tablist\"\n            part=\"tabs\"\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}