@beeq/core 1.8.0-beta.4 → 1.8.0-beta.5

package/dist/beeq/beeq.esm.js

@@ -43,6 +43,6 @@ var patchCloneNodeFix = e => {
 
 patchBrowser().then((async e => {
   await n();
-  return o(JSON.parse('[["p-d2f682a9",[[81,"bq-select",{"autofocus":[516],"clearButtonLabel":[513,"clear-button-label"],"debounceTime":[1538,"debounce-time"],"disabled":[1028],"disableClear":[516,"disable-clear"],"distance":[514],"form":[513],"keepOpenOnSelect":[516,"keep-open-on-select"],"name":[513],"maxTagsVisible":[1026,"max-tags-visible"],"multiple":[516],"open":[1540],"panelHeight":[513,"panel-height"],"placeholder":[513],"placement":[513],"readonly":[516],"required":[516],"sameWidth":[516,"same-width"],"skidding":[514],"strategy":[513],"validationStatus":[513,"validation-status"],"value":[1537],"displayValue":[32],"hasHelperText":[32],"selectedOptions":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"hasValue":[32],"clear":[64]},[[2,"bqOpen","handleOpenChange"],[2,"bqFocus","stopOptionFocusBlurPropagation"],[2,"bqBlur","stopOptionFocusBlurPropagation"]],{"value":["handleValueChange"]}]]],["p-bb14b231",[[17,"bq-date-picker",{"autofocus":[516],"clearButtonLabel":[513,"clear-button-label"],"disableClear":[516,"disable-clear"],"disabled":[1028],"distance":[514],"firstDayOfWeek":[514,"first-day-of-week"],"formatOptions":[16],"form":[513],"isDateDisallowed":[16],"locale":[513],"max":[513],"min":[513],"months":[514],"monthsPerView":[513,"months-per-view"],"name":[513],"open":[1540],"panelHeight":[1537,"panel-height"],"placeholder":[513],"placement":[513],"required":[516],"skidding":[514],"showOutsideDays":[516,"show-outside-days"],"strategy":[513],"tentative":[1537],"type":[513],"validationStatus":[513,"validation-status"],"value":[1537],"focusedDate":[32],"displayDate":[32],"hasLabel":[32],"hasPrefix":[32],"hasRangeEnd":[32],"hasSuffix":[32],"hasValue":[32],"clear":[64]},[[2,"bqOpen","handleOpenChange"],[18,"click","handleClickOutside"]],{"value":["handleValueChange"],"type":["checkPropValues"]}]]],["p-cdd5b425",[[1,"bq-drawer",{"enableBackdrop":[516,"enable-backdrop"],"closeOnClickOutside":[516,"close-on-click-outside"],"closeOnEsc":[516,"close-on-esc"],"open":[1540],"placement":[1537],"position":[1537],"hasFooter":[32],"hasIcon":[32],"hide":[64],"show":[64]},[[11,"mousedown","handleMouseClick"],[10,"keydown","handleKeyDown"]],{"open":["handleOpenChange"],"placement":["handlePlacementChange"],"position":["handlePositionChange"]}]]],["p-d8f7bf11",[[1,"bq-alert",{"autoDismiss":[516,"auto-dismiss"],"border":[513],"disableClose":[516,"disable-close"],"hideIcon":[516,"hide-icon"],"open":[1540],"time":[514],"type":[513],"sticky":[516],"hasContent":[32],"hasFooter":[32],"hide":[64],"show":[64]},null,{"autoDismiss":["handleTimeout"],"time":["handleTimeout"],"open":["handleOpenChange"],"type":["checkPropValues"]}]]],["p-be746e37",[[1,"bq-dialog",{"border":[513],"disableBackdrop":[516,"disable-backdrop"],"disableCloseEscKeydown":[516,"disable-close-esc-keydown"],"disableCloseClickOutside":[516,"disable-close-click-outside"],"footerAppearance":[513,"footer-appearance"],"hideCloseButton":[516,"hide-close-button"],"open":[1540],"size":[1537],"hasContent":[32],"hasFooter":[32],"show":[64],"hide":[64],"cancel":[64]},[[11,"mousedown","handleMouseClick"],[10,"keydown","handleKeyDown"]],{"footerAppearance":["checkPropValues"],"size":["checkPropValues"],"open":["handleOpenChange"]}]]],["p-f5eb8fff",[[81,"bq-input",{"autocapitalize":[513],"autocomplete":[513],"autocorrect":[513],"autofocus":[516],"clearButtonLabel":[513,"clear-button-label"],"debounceTime":[1538,"debounce-time"],"disabled":[1028],"disableClear":[516,"disable-clear"],"form":[513],"inputmode":[1],"max":[520],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"step":[520],"type":[513],"validationStatus":[513,"validation-status"],"value":[1544],"hasHelperText":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"hasValue":[32]},null,{"value":["handleValueChange"]}]]],["p-e06c8398",[[1,"bq-notification",{"autoDismiss":[516,"auto-dismiss"],"border":[513],"disableClose":[516,"disable-close"],"hideIcon":[516,"hide-icon"],"open":[1540],"time":[514],"type":[513],"hasContent":[32],"hasFooter":[32],"notificationPortal":[32],"hide":[64],"show":[64],"toast":[64]},[[0,"bqAfterClose","afterNotificationClose"]],{"autoDismiss":["handleTimeout"],"time":["handleTimeout"],"open":["handleOpenChange"],"type":["checkPropValues"]}]]],["p-e6911710",[[1,"bq-accordion",{"appearance":[1537],"disabled":[516],"expanded":[1540],"noAnimation":[516,"no-animation"],"rotate":[516],"size":[1537],"hasPrefix":[32],"hasSuffix":[32]},[[0,"accordionTransitionEnd","onAccordionTransitionEnd"]],{"size":["checkPropValues"],"expanded":["handleExpandedChange"],"disabled":["handleDisabledChange"],"noAnimation":["handleJsAnimation"]}]]],["p-3ed73068",[[1,"bq-empty-state",{"size":[1537],"hasBody":[32],"hasFooter":[32]},null,{"size":["checkPropValues"]}]]],["p-a94d15f9",[[1,"bq-progress",{"indeterminate":[516],"value":[1538],"thickness":[513],"type":[513],"borderShape":[513,"border-shape"],"label":[516],"enableTooltip":[516,"enable-tooltip"]},null,{"borderShape":["handleTypePropChange"],"thickness":["handleTypePropChange"],"type":["handleTypePropChange"],"value":["handleValuePropChange"]}]]],["p-8b6fc3ef",[[1,"bq-side-menu-item",{"active":[4],"collapse":[4],"disabled":[4],"textContent":[32]}]]],["p-d9bcaeed",[[17,"bq-slider",{"debounceTime":[514,"debounce-time"],"disabled":[516],"enableValueIndicator":[516,"enable-value-indicator"],"gap":[1538],"max":[514],"min":[514],"step":[514],"type":[513],"value":[1544],"enableTooltip":[516,"enable-tooltip"],"tooltipAlwaysVisible":[516,"tooltip-always-visible"],"minValue":[32],"maxValue":[32],"minThumbPosition":[32],"maxThumbPosition":[32]},null,{"value":["handleValuePropChange"],"step":["handleStepPropChange"],"gap":["handleGapChange"]}]]],["p-908c57e9",[[1,"bq-status",{"type":[513]},null,{"type":["checkPropValues"]}]]],["p-03e23dca",[[1,"bq-steps",{"dividerColor":[513,"divider-color"],"size":[513],"type":[513]},null,{"type":["checkPropValues"],"size":["checkPropValues"]}]]],["p-7695fc8d",[[17,"bq-switch",{"backgroundOnHover":[516,"background-on-hover"],"checked":[1540],"disabled":[516],"fullWidth":[516,"full-width"],"innerLabel":[513,"inner-label"],"justifyContent":[513,"justify-content"],"name":[513],"required":[516],"reverseOrder":[516,"reverse-order"],"value":[513],"hasLabel":[32],"vClick":[64],"vFocus":[64],"vBlur":[64]}]]],["p-7aa47927",[[1,"bq-toast",{"border":[513],"type":[1537],"placement":[1537],"hideIcon":[1540,"hide-icon"],"open":[1540],"time":[514],"toastPortal":[32],"show":[64],"hide":[64],"toast":[64]},[[0,"bqHide","onNotificationHide"]],{"type":["checkPropValues"],"placement":["checkPropValues"],"time":["handleTimeChange"],"open":["handleOpenChange"]}]]],["p-60ab652b",[[1,"bq-accordion-group",{"appearance":[1537],"expandAll":[516,"expand-all"],"noAnimation":[516,"no-animation"],"multiple":[516],"size":[1537]},[[1,"bqClick","onBqClick"]],{"appearance":["checkPropValues"],"expandAll":["checkPropValues"],"noAnimation":["checkPropValues"],"size":["checkPropValues"]}]]],["p-98de0101",[[1,"bq-avatar",{"altText":[513,"alt-text"],"image":[513],"label":[513],"initials":[513],"shape":[513],"size":[1537],"hasError":[32]},null,{"image":["handleImagePropChange"],"shape":["checkPropValues"],"size":["checkPropValues","onInitialsChange"],"initials":["onInitialsChange"]}]]],["p-5d51cadd",[[1,"bq-breadcrumb",{"ariaLabel":[513,"aria-label"]},[[1,"bqBlur","onBlur"],[1,"bqFocus","onFocus"],[1,"bqClick","onClick"]]]]],["p-2b2d8b0c",[[1,"bq-breadcrumb-item",{"ariaLabel":[1,"aria-label"],"isLastItem":[4,"is-last-item"],"href":[513],"target":[513],"rel":[513]}]]],["p-3e3fd7b5",[[1,"bq-card",{"type":[513],"border":[513]},null,{"type":["checkPropValue"]}]]],["p-f69d2900",[[81,"bq-checkbox",{"backgroundOnHover":[516,"background-on-hover"],"formId":[513,"form-id"],"formValidationMessage":[1025,"form-validation-message"],"checked":[1540],"disabled":[516],"indeterminate":[1540],"name":[513],"required":[516],"value":[513],"vClick":[64],"vFocus":[64],"vBlur":[64]},null,{"indeterminate":["handleIndeterminatePropChange"],"required":["handleRequiredPropChange"]}]]],["p-5a12011a",[[1,"bq-option",{"hidden":[516],"disabled":[516],"value":[513],"selected":[516],"hasPrefix":[32],"hasSuffix":[32]},[[0,"keydown","onKeyDown"]]]]],["p-f11a3beb",[[1,"bq-option-group"]]],["p-ac0d84a6",[[1,"bq-page-title",{"haveBackNavigation":[32],"hasSuffix":[32],"hasSubTitle":[32]}]]],["p-f350516b",[[17,"bq-radio",{"checked":[1540],"disabled":[516],"backgroundOnHover":[516,"background-on-hover"],"formId":[513,"form-id"],"name":[513],"required":[516],"value":[513],"vClick":[64],"vFocus":[64],"vBlur":[64]}]]],["p-bc60faa1",[[1,"bq-radio-group",{"backgroundOnHover":[516,"background-on-hover"],"name":[513],"value":[1537],"disabled":[516],"fieldset":[516],"orientation":[1537],"debounceTime":[1538,"debounce-time"]},[[17,"mousedown","onMouseDown"],[0,"bqClick","onBqClick"],[0,"bqKeyDown","onBqKeyDown"],[2,"bqFocus","onBqFocus"],[2,"bqBlur","onBqBlur"]],{"backgroundOnHover":["handleGroupProperties"],"disabled":["handleGroupProperties"],"name":["handleGroupProperties"],"value":["handleGroupProperties"],"orientation":["checkPropValues"],"debounceTime":["checkDebounceChange"]}]]],["p-5fcbf15f",[[1,"bq-side-menu",{"appearance":[513],"collapse":[516],"size":[513],"toggleCollapse":[64]},[[1,"bqClick","onMenuItemClick"]],{"collapse":["onCollapsePropChange"]}]]],["p-27974392",[[1,"bq-spinner",{"animation":[516],"textPosition":[513,"text-position"],"size":[513],"hasIconSlot":[32],"hasSlot":[32],"slotContentLength":[32]},null,{"textPosition":["handleTextPositionProp"],"size":["handleSizeProp"],"hasIconSlot":["handleHasIconSlot"]}]]],["p-fe57aa48",[[1,"bq-step-item",{"size":[513],"status":[513],"type":[513]},null,{"size":["checkPropValues"],"status":["checkPropValues"]}]]],["p-7ea146b8",[[1,"bq-tab",{"active":[1540],"disabled":[516],"size":[513],"orientation":[513],"placement":[513],"tabId":[513,"tab-id"],"controls":[513],"tabIndex":[32],"hasIcon":[32],"vClick":[64],"vFocus":[64],"vBlur":[64],"enableFocus":[64]},null,{"size":["checkPropValues"],"orientation":["checkPropValues"],"placement":["checkPropValues"]}]]],["p-03749fbf",[[1,"bq-tab-group",{"value":[1537],"size":[513],"orientation":[513],"placement":[513],"debounceTime":[1538,"debounce-time"],"disableDivider":[516,"disable-divider"]},[[19,"keyup","onKeyUp"],[1,"bqClick","onBqClick"],[1,"bqKeyDown","onBqKeyDown"],[3,"bqBlur","onBqBlur"]],{"debounceTime":["checkDebounceChange"],"size":["checkPropValues"],"value":["checkPropValues"],"orientation":["checkPropValues"],"placement":["checkPropValues"]}]]],["p-818cd6d7",[[17,"bq-textarea",{"autocapitalize":[513],"autocomplete":[513],"autocorrect":[513],"autofocus":[516],"autoGrow":[516,"auto-grow"],"debounceTime":[1538,"debounce-time"],"disabled":[516],"disableResize":[516,"disable-resize"],"form":[513],"maxlength":[514],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"rows":[514],"spellcheck":[516],"validationStatus":[513,"validation-status"],"value":[1025],"wrap":[513],"hasHelperText":[32],"hasLabel":[32]},null,{"value":["handleValueChange"]}]]],["p-f5d59aba",[[1,"bq-badge",{"backgroundColor":[1537,"background-color"],"textColor":[1537,"text-color"],"size":[1537],"contentLength":[32]},null,{"size":["handleSizePropChange"]}]]],["p-b877d662",[[1,"bq-button",{"appearance":[513],"block":[516],"border":[513],"disabled":[4],"download":[1],"href":[513],"justifyContent":[513,"justify-content"],"loading":[4],"size":[513],"target":[513],"type":[513],"variant":[513],"hasPrefix":[32],"hasSuffix":[32]},null,{"appearance":["checkPropValues"],"type":["checkPropValues"],"size":["checkPropValues"],"variant":["checkPropValues"]}],[1,"bq-icon",{"label":[513],"color":[513],"name":[513],"size":[520],"src":[513],"weight":[513],"_svgContent":[32]},null,{"color":["handlePropsChange"],"name":["handlePropsChange"],"size":["handlePropsChange"],"weight":["handleWeightChange"]}]]],["p-89665044",[[17,"bq-tag",{"border":[513],"clickable":[516],"color":[513],"disabled":[516],"hidden":[1540],"removable":[516],"selected":[1540],"size":[513],"variant":[513],"hasPrefix":[32],"hide":[64],"show":[64]},null,{"size":["checkPropValues"],"variant":["checkPropValues"]}],[1,"bq-option-list",{"ariaLabel":[513,"aria-label"]},[[1,"bqClick","onBqSelect"],[1,"bqEnter","onBqSelect"]]]]],["p-5d8d6717",[[1,"bq-divider",{"dashed":[4],"orientation":[513],"strokeColor":[513,"stroke-color"],"titleAlignment":[513,"title-alignment"],"strokeDashWidth":[514,"stroke-dash-width"],"strokeDashGap":[514,"stroke-dash-gap"],"strokeThickness":[514,"stroke-thickness"],"strokeBasis":[514,"stroke-basis"],"strokeLinecap":[513,"stroke-linecap"],"hasTitle":[32]},null,{"orientation":["checkPropValues"],"titleAlignment":["checkPropValues"],"strokeLinecap":["checkPropValues"]}]]],["p-cb917e68",[[1,"bq-tooltip",{"alwaysVisible":[4,"always-visible"],"distance":[514],"hideArrow":[516,"hide-arrow"],"placement":[513],"sameWidth":[516,"same-width"],"displayOn":[513,"display-on"],"visible":[1540],"show":[64],"hide":[64]},[[5,"mousedown","handleDocumentMouseDown"]],{"visible":["handleVisibleChange"],"distance":["handleFloatingUIOptionsChange"],"hideArrow":["handleFloatingUIOptionsChange"],"placement":["handleFloatingUIOptionsChange"],"sameWidth":["handleFloatingUIOptionsChange"]}]]],["p-f1d6a960",[[1,"bq-dropdown",{"disabled":[516],"distance":[514],"keepOpenOnSelect":[516,"keep-open-on-select"],"placement":[513],"open":[1540],"panelHeight":[513,"panel-height"],"sameWidth":[516,"same-width"],"skidding":[514],"strategy":[513]},[[5,"click","onClickOutside"],[9,"keyup","onEscape"],[1,"bqSelect","onItemSelect"]],{"open":["onOpenChange"],"disabled":["handleDisabledChange"]}],[1,"bq-panel",{"distance":[514],"placement":[513],"open":[1540],"sameWidth":[516,"same-width"],"skidding":[514],"strategy":[513]},null,{"open":["handleOpenChange"],"distance":["onPropChange"],"placement":["onPropChange"],"sameWidth":["onPropChange"],"skidding":["onPropChange"],"strategy":["onPropChange"]}]]]]'), e);
+  return o(JSON.parse('[["p-544deac1",[[81,"bq-select",{"autofocus":[516],"clearButtonLabel":[513,"clear-button-label"],"debounceTime":[1538,"debounce-time"],"disabled":[1028],"disableClear":[516,"disable-clear"],"distance":[514],"form":[513],"keepOpenOnSelect":[516,"keep-open-on-select"],"name":[513],"maxTagsVisible":[1026,"max-tags-visible"],"multiple":[516],"open":[1540],"panelHeight":[513,"panel-height"],"placeholder":[513],"placement":[513],"readonly":[516],"required":[516],"sameWidth":[516,"same-width"],"skidding":[514],"strategy":[513],"validationStatus":[513,"validation-status"],"value":[1537],"displayValue":[32],"hasHelperText":[32],"selectedOptions":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"hasValue":[32],"clear":[64]},[[2,"bqOpen","handleOpenChange"],[2,"bqFocus","stopOptionFocusBlurPropagation"],[2,"bqBlur","stopOptionFocusBlurPropagation"]],{"value":["handleValueChange"]}]]],["p-fb20c6eb",[[17,"bq-date-picker",{"autofocus":[516],"clearButtonLabel":[513,"clear-button-label"],"disableClear":[516,"disable-clear"],"disabled":[1028],"distance":[514],"firstDayOfWeek":[514,"first-day-of-week"],"formatOptions":[16],"form":[513],"isDateDisallowed":[16],"locale":[513],"max":[513],"min":[513],"months":[514],"monthsPerView":[513,"months-per-view"],"name":[513],"open":[1540],"panelHeight":[1537,"panel-height"],"placeholder":[513],"placement":[513],"required":[516],"skidding":[514],"showOutsideDays":[516,"show-outside-days"],"strategy":[513],"tentative":[1537],"type":[513],"validationStatus":[513,"validation-status"],"value":[1537],"focusedDate":[32],"displayDate":[32],"hasLabel":[32],"hasPrefix":[32],"hasRangeEnd":[32],"hasSuffix":[32],"hasValue":[32],"clear":[64]},[[2,"bqOpen","handleOpenChange"],[18,"click","handleClickOutside"]],{"value":["handleValueChange"],"type":["checkPropValues"]}]]],["p-3f9a348a",[[1,"bq-drawer",{"enableBackdrop":[516,"enable-backdrop"],"closeOnClickOutside":[516,"close-on-click-outside"],"closeOnEsc":[516,"close-on-esc"],"open":[1540],"placement":[1537],"position":[1537],"hasFooter":[32],"hasIcon":[32],"hide":[64],"show":[64]},[[11,"mousedown","handleMouseClick"],[10,"keydown","handleKeyDown"]],{"open":["handleOpenChange"],"placement":["handlePlacementChange"],"position":["handlePositionChange"]}]]],["p-b2df1479",[[1,"bq-alert",{"autoDismiss":[516,"auto-dismiss"],"border":[513],"disableClose":[516,"disable-close"],"hideIcon":[516,"hide-icon"],"open":[1540],"time":[514],"type":[513],"sticky":[516],"hasContent":[32],"hasFooter":[32],"hide":[64],"show":[64]},null,{"autoDismiss":["handleTimeout"],"time":["handleTimeout"],"open":["handleOpenChange"],"type":["checkPropValues"]}]]],["p-fe278ecc",[[1,"bq-dialog",{"border":[513],"disableBackdrop":[516,"disable-backdrop"],"disableCloseEscKeydown":[516,"disable-close-esc-keydown"],"disableCloseClickOutside":[516,"disable-close-click-outside"],"footerAppearance":[513,"footer-appearance"],"hideCloseButton":[516,"hide-close-button"],"open":[1540],"size":[1537],"hasContent":[32],"hasFooter":[32],"show":[64],"hide":[64],"cancel":[64]},[[11,"mousedown","handleMouseClick"],[10,"keydown","handleKeyDown"]],{"footerAppearance":["checkPropValues"],"size":["checkPropValues"],"open":["handleOpenChange"]}]]],["p-2bb049ae",[[81,"bq-input",{"autocapitalize":[513],"autocomplete":[513],"autocorrect":[513],"autofocus":[516],"clearButtonLabel":[513,"clear-button-label"],"debounceTime":[1538,"debounce-time"],"disabled":[1028],"disableClear":[516,"disable-clear"],"form":[513],"inputmode":[1],"max":[520],"maxlength":[514],"min":[520],"minlength":[514],"name":[513],"pattern":[513],"placeholder":[513],"readonly":[516],"required":[516],"step":[520],"type":[513],"validationStatus":[513,"validation-status"],"value":[1544],"hasHelperText":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"hasValue":[32]},null,{"value":["handleValueChange"]}]]],["p-03c586df",[[1,"bq-notification",{"autoDismiss":[516,"auto-dismiss"],"border":[513],"disableClose":[516,"disable-close"],"hideIcon":[516,"hide-icon"],"open":[1540],"time":[514],"type":[513],"hasContent":[32],"hasFooter":[32],"notificationPortal":[32],"hide":[64],"show":[64],"toast":[64]},[[0,"bqAfterClose","afterNotificationClose"]],{"autoDismiss":["handleTimeout"],"time":["handleTimeout"],"open":["handleOpenChange"],"type":["checkPropValues"]}]]],["p-cb2b0014",[[1,"bq-accordion",{"appearance":[1537],"disabled":[516],"expanded":[1540],"noAnimation":[516,"no-animation"],"rotate":[516],"size":[1537],"hasPrefix":[32],"hasSuffix":[32]},[[0,"accordionTransitionEnd","onAccordionTransitionEnd"]],{"size":["checkPropValues"],"expanded":["handleExpandedChange"],"disabled":["handleDisabledChange"],"noAnimation":["handleJsAnimation"]}]]],["p-d7067dae",[[1,"bq-empty-state",{"size":[1537],"hasBody":[32],"hasFooter":[32]},null,{"size":["checkPropValues"]}]]],["p-0a981080",[[1,"bq-progress",{"indeterminate":[516],"value":[1538],"thickness":[513],"type":[513],"borderShape":[513,"border-shape"],"label":[516],"enableTooltip":[516,"enable-tooltip"]},null,{"borderShape":["handleTypePropChange"],"thickness":["handleTypePropChange"],"type":["handleTypePropChange"],"value":["handleValuePropChange"]}]]],["p-3043c826",[[1,"bq-side-menu-item",{"active":[4],"collapse":[4],"disabled":[4],"textContent":[32]}]]],["p-03373320",[[17,"bq-slider",{"debounceTime":[514,"debounce-time"],"disabled":[516],"enableValueIndicator":[516,"enable-value-indicator"],"gap":[1538],"max":[514],"min":[514],"step":[514],"type":[513],"value":[1544],"enableTooltip":[516,"enable-tooltip"],"tooltipAlwaysVisible":[516,"tooltip-always-visible"],"minValue":[32],"maxValue":[32],"minThumbPosition":[32],"maxThumbPosition":[32]},null,{"value":["handleValuePropChange"],"step":["handleStepPropChange"],"gap":["handleGapChange"]}]]],["p-4eabcd51",[[1,"bq-status",{"type":[513]},null,{"type":["checkPropValues"]}]]],["p-0ce76c54",[[1,"bq-steps",{"dividerColor":[513,"divider-color"],"size":[513],"type":[513]},null,{"type":["checkPropValues"],"size":["checkPropValues"]}]]],["p-a23b23c4",[[17,"bq-switch",{"backgroundOnHover":[516,"background-on-hover"],"checked":[1540],"disabled":[516],"fullWidth":[516,"full-width"],"innerLabel":[513,"inner-label"],"justifyContent":[513,"justify-content"],"name":[513],"required":[516],"reverseOrder":[516,"reverse-order"],"value":[513],"hasLabel":[32],"vClick":[64],"vFocus":[64],"vBlur":[64]}]]],["p-69c766a3",[[1,"bq-toast",{"border":[513],"type":[1537],"placement":[1537],"hideIcon":[1540,"hide-icon"],"open":[1540],"time":[514],"toastPortal":[32],"show":[64],"hide":[64],"toast":[64]},[[0,"bqHide","onNotificationHide"]],{"type":["checkPropValues"],"placement":["checkPropValues"],"time":["handleTimeChange"],"open":["handleOpenChange"]}]]],["p-cfb8829b",[[1,"bq-accordion-group",{"appearance":[1537],"expandAll":[516,"expand-all"],"noAnimation":[516,"no-animation"],"multiple":[516],"size":[1537]},[[1,"bqClick","onBqClick"]],{"appearance":["checkPropValues"],"expandAll":["checkPropValues"],"noAnimation":["checkPropValues"],"size":["checkPropValues"]}]]],["p-68ff188d",[[1,"bq-avatar",{"altText":[513,"alt-text"],"image":[513],"label":[513],"initials":[513],"shape":[513],"size":[1537],"hasError":[32]},null,{"image":["handleImagePropChange"],"shape":["checkPropValues"],"size":["checkPropValues","onInitialsChange"],"initials":["onInitialsChange"]}]]],["p-9cab14ee",[[1,"bq-breadcrumb",{"ariaLabel":[513,"aria-label"]},[[1,"bqBlur","onBlur"],[1,"bqFocus","onFocus"],[1,"bqClick","onClick"]]]]],["p-a608a4fb",[[1,"bq-breadcrumb-item",{"ariaLabel":[1,"aria-label"],"isLastItem":[4,"is-last-item"],"href":[513],"target":[513],"rel":[513]}]]],["p-60cbc966",[[1,"bq-card",{"type":[513],"border":[513]},null,{"type":["checkPropValue"]}]]],["p-d7dc7086",[[81,"bq-checkbox",{"backgroundOnHover":[516,"background-on-hover"],"formId":[513,"form-id"],"formValidationMessage":[1025,"form-validation-message"],"checked":[1540],"disabled":[516],"indeterminate":[1540],"name":[513],"required":[516],"value":[513],"vClick":[64],"vFocus":[64],"vBlur":[64]},null,{"indeterminate":["handleIndeterminatePropChange"],"required":["handleRequiredPropChange"]}]]],["p-faa3be41",[[1,"bq-option",{"hidden":[516],"disabled":[516],"value":[513],"selected":[516],"hasPrefix":[32],"hasSuffix":[32]},[[0,"keydown","onKeyDown"]]]]],["p-f11a3beb",[[1,"bq-option-group"]]],["p-f979d79a",[[1,"bq-page-title",{"haveBackNavigation":[32],"hasSuffix":[32],"hasSubTitle":[32]}]]],["p-f350516b",[[17,"bq-radio",{"checked":[1540],"disabled":[516],"backgroundOnHover":[516,"background-on-hover"],"formId":[513,"form-id"],"name":[513],"required":[516],"value":[513],"vClick":[64],"vFocus":[64],"vBlur":[64]}]]],["p-aacaaa35",[[1,"bq-radio-group",{"backgroundOnHover":[516,"background-on-hover"],"name":[513],"value":[1537],"disabled":[516],"fieldset":[516],"orientation":[1537],"debounceTime":[1538,"debounce-time"]},[[17,"mousedown","onMouseDown"],[0,"bqClick","onBqClick"],[0,"bqKeyDown","onBqKeyDown"],[2,"bqFocus","onBqFocus"],[2,"bqBlur","onBqBlur"]],{"backgroundOnHover":["handleGroupProperties"],"disabled":["handleGroupProperties"],"name":["handleGroupProperties"],"value":["handleGroupProperties"],"orientation":["checkPropValues"],"debounceTime":["checkDebounceChange"]}]]],["p-c83bc7fd",[[1,"bq-side-menu",{"appearance":[513],"collapse":[516],"size":[513],"documentBody":[32],"toggleCollapse":[64]},[[1,"bqClick","onMenuItemClick"]],{"collapse":["onCollapsePropChange"]}]]],["p-41ac1d84",[[1,"bq-spinner",{"animation":[516],"textPosition":[513,"text-position"],"size":[513],"hasIconSlot":[32],"hasSlot":[32],"slotContentLength":[32]},null,{"textPosition":["handleTextPositionProp"],"size":["handleSizeProp"],"hasIconSlot":["handleHasIconSlot"]}]]],["p-38e70f78",[[1,"bq-step-item",{"size":[513],"status":[513],"type":[513]},null,{"size":["checkPropValues"],"status":["checkPropValues"]}]]],["p-01fe8efb",[[1,"bq-tab",{"active":[1540],"disabled":[516],"size":[513],"orientation":[513],"placement":[513],"tabId":[513,"tab-id"],"controls":[513],"tabIndex":[32],"hasIcon":[32],"vClick":[64],"vFocus":[64],"vBlur":[64],"enableFocus":[64]},null,{"size":["checkPropValues"],"orientation":["checkPropValues"],"placement":["checkPropValues"]}]]],["p-8b16f130",[[1,"bq-tab-group",{"value":[1537],"size":[513],"orientation":[513],"placement":[513],"debounceTime":[1538,"debounce-time"],"disableDivider":[516,"disable-divider"]},[[19,"keyup","onKeyUp"],[1,"bqClick","onBqClick"],[1,"bqKeyDown","onBqKeyDown"],[3,"bqBlur","onBqBlur"]],{"debounceTime":["checkDebounceChange"],"size":["checkPropValues"],"value":["checkPropValues"],"orientation":["checkPropValues"],"placement":["checkPropValues"]}]]],["p-398bfb48",[[17,"bq-textarea",{"autocapitalize":[513],"autocomplete":[513],"autocorrect":[513],"autofocus":[516],"autoGrow":[516,"auto-grow"],"debounceTime":[1538,"debounce-time"],"disabled":[516],"disableResize":[516,"disable-resize"],"form":[513],"maxlength":[514],"name":[513],"placeholder":[513],"readonly":[516],"required":[516],"rows":[514],"spellcheck":[516],"validationStatus":[513,"validation-status"],"value":[1025],"wrap":[513],"hasHelperText":[32],"hasLabel":[32]},null,{"value":["handleValueChange"]}]]],["p-5ff6621d",[[1,"bq-badge",{"backgroundColor":[1537,"background-color"],"textColor":[1537,"text-color"],"size":[1537],"contentLength":[32]},null,{"size":["handleSizePropChange"]}]]],["p-8e1c6978",[[81,"bq-button",{"appearance":[513],"block":[516],"border":[513],"disabled":[4],"download":[1],"href":[513],"justifyContent":[513,"justify-content"],"loading":[4],"size":[513],"target":[513],"type":[513],"variant":[513],"hasPrefix":[32],"hasSuffix":[32]},null,{"appearance":["checkPropValues"],"type":["checkPropValues"],"size":["checkPropValues"],"variant":["checkPropValues"]}],[1,"bq-icon",{"label":[513],"color":[513],"name":[513],"size":[520],"src":[513],"weight":[513],"_svgContent":[32]},null,{"color":["handlePropsChange"],"name":["handlePropsChange"],"size":["handlePropsChange"],"weight":["handleWeightChange"]}]]],["p-76486949",[[17,"bq-tag",{"border":[513],"clickable":[516],"color":[513],"disabled":[516],"hidden":[1540],"removable":[516],"selected":[1540],"size":[513],"variant":[513],"hasPrefix":[32],"hide":[64],"show":[64]},null,{"size":["checkPropValues"],"variant":["checkPropValues"]}],[1,"bq-option-list",{"ariaLabel":[513,"aria-label"]},[[1,"bqClick","onBqSelect"],[1,"bqEnter","onBqSelect"]]]]],["p-b77b52f2",[[1,"bq-divider",{"dashed":[4],"orientation":[513],"strokeColor":[513,"stroke-color"],"titleAlignment":[513,"title-alignment"],"strokeDashWidth":[514,"stroke-dash-width"],"strokeDashGap":[514,"stroke-dash-gap"],"strokeThickness":[514,"stroke-thickness"],"strokeBasis":[514,"stroke-basis"],"strokeLinecap":[513,"stroke-linecap"],"hasTitle":[32]},null,{"orientation":["checkPropValues"],"titleAlignment":["checkPropValues"],"strokeLinecap":["checkPropValues"]}]]],["p-cb917e68",[[1,"bq-tooltip",{"alwaysVisible":[4,"always-visible"],"distance":[514],"hideArrow":[516,"hide-arrow"],"placement":[513],"sameWidth":[516,"same-width"],"displayOn":[513,"display-on"],"visible":[1540],"show":[64],"hide":[64]},[[5,"mousedown","handleDocumentMouseDown"]],{"visible":["handleVisibleChange"],"distance":["handleFloatingUIOptionsChange"],"hideArrow":["handleFloatingUIOptionsChange"],"placement":["handleFloatingUIOptionsChange"],"sameWidth":["handleFloatingUIOptionsChange"]}]]],["p-f1d6a960",[[1,"bq-dropdown",{"disabled":[516],"distance":[514],"keepOpenOnSelect":[516,"keep-open-on-select"],"placement":[513],"open":[1540],"panelHeight":[513,"panel-height"],"sameWidth":[516,"same-width"],"skidding":[514],"strategy":[513]},[[5,"click","onClickOutside"],[9,"keyup","onEscape"],[1,"bqSelect","onItemSelect"]],{"open":["onOpenChange"],"disabled":["handleDisabledChange"]}],[1,"bq-panel",{"distance":[514],"placement":[513],"open":[1540],"sameWidth":[516,"same-width"],"skidding":[514],"strategy":[513]},null,{"open":["handleOpenChange"],"distance":["onPropChange"],"placement":["onPropChange"],"sameWidth":["onPropChange"],"skidding":["onPropChange"],"strategy":["onPropChange"]}]]]]'), e);
 }));
 //# sourceMappingURL=beeq.esm.js.map

package/dist/beeq/beeq.esm.js.map

@@ -1 +1 @@
-{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;;;;;;;;;;GAOA,KAAIA,eAAe;EAIO;IACtBC,kBAAkBC,EAAEC;AACxB;EAIE,MAAMC,gBAAyBC;EAC/B,MAAMC,IAAqE;EAC3E,IAAIF,MAAe,IAAI;IACrBE,EAAKC,eAAe,IAAIC,IAAI,KAAKJ,GAAYK;AACjD;EACE,OAAOC,EAAeJ;AAAK;;AAE7B,IAAIL,oBAAqBU;EACvB,MAAMC,IAAoBD,EAAqBE;EAC/CF,EAAqBE,YAAY,SAASC;IACxC,IAAIC,KAAKC,aAAa,YAAY;MAChC,OAAOJ,EAAkBK,KAAKF,MAAMD;AAC1C;IACI,MAAMI,IAAaN,EAAkBK,KAAKF,MAAM;IAChD,MAAMI,IAAgBJ,KAAKK;IAC3B,IAAIN,GAAM;MACR,KAAK,IAAIO,IAAI,GAAGA,IAAIF,EAAcG,QAAQD,KAAK;QAC7C,IAAIF,EAAcE,GAAGE,aAAa,GAAG;UACnCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU;AAC5D;AACA;AACA;IACI,OAAOK;AACX;AAAG;;ACpCHlB,eAAeyB,MAAKC,MAAOC;QACnBC;EACN,OAAOC,EAAcC,KAAAC,MAAA,usbAAuCJ;AAAA","ignoreList":[]}
+{"version":3,"names":["patchBrowser","patchCloneNodeFix","H","prototype","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","HTMLElementPrototype","nativeCloneNodeFn","cloneNode","deep","this","nodeName","call","clonedNode","srcChildNodes","childNodes","i","length","nodeType","appendChild","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.1 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":";;;;;;;;;;;;GAOA,KAAIA,eAAe;EAIO;IACtBC,kBAAkBC,EAAEC;AACxB;EAIE,MAAMC,gBAAyBC;EAC/B,MAAMC,IAAqE;EAC3E,IAAIF,MAAe,IAAI;IACrBE,EAAKC,eAAe,IAAIC,IAAI,KAAKJ,GAAYK;AACjD;EACE,OAAOC,EAAeJ;AAAK;;AAE7B,IAAIL,oBAAqBU;EACvB,MAAMC,IAAoBD,EAAqBE;EAC/CF,EAAqBE,YAAY,SAASC;IACxC,IAAIC,KAAKC,aAAa,YAAY;MAChC,OAAOJ,EAAkBK,KAAKF,MAAMD;AAC1C;IACI,MAAMI,IAAaN,EAAkBK,KAAKF,MAAM;IAChD,MAAMI,IAAgBJ,KAAKK;IAC3B,IAAIN,GAAM;MACR,KAAK,IAAIO,IAAI,GAAGA,IAAIF,EAAcG,QAAQD,KAAK;QAC7C,IAAIF,EAAcE,GAAGE,aAAa,GAAG;UACnCL,EAAWM,YAAYL,EAAcE,GAAGR,UAAU;AAC5D;AACA;AACA;IACI,OAAOK;AACX;AAAG;;ACpCHlB,eAAeyB,MAAKC,MAAOC;QACnBC;EACN,OAAOC,EAAcC,KAAAC,MAAA,4tbAAuCJ;AAAA","ignoreList":[]}

package/dist/beeq/index.esm.js

@@ -2,11 +2,11 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-export { g as getBasePath, s as setBasePath } from "./p-a84d4562.js";
+export { g as getBasePath, s as setBasePath } from "./p-8f1c68c0.js";
 
 export { c as clamp } from "./p-1f3a4359.js";
 
-export { a as getCSSVariableValue, g as getColorCSSVariable } from "./p-5a9a73a0.js";
+export { a as getCSSVariableValue, g as getColorCSSVariable } from "./p-edfd9767.js";
 
 export { d as debounce, s as setRafTimeout } from "./p-1defeea3.js";
 
@@ -14,9 +14,9 @@ export { i as isEventTargetChildOfElement } from "./p-1c8b6eb4.js";
 
 export { g as getNextElement } from "./p-115ed5b2.js";
 
-import { i as r } from "./p-0fce4de9.js";
+import { i as r } from "./p-83d6d9ad.js";
 
-export { i as isDefined } from "./p-0fce4de9.js";
+export { i as isDefined } from "./p-83d6d9ad.js";
 
 import { i as o } from "./p-99829fc7.js";
 
@@ -39,16 +39,16 @@ export { e as enter, l as leave, t as toggle } from "./p-a5dc1c94.js";
  * @param {Number} n - The number of random items to take
  * @returns {Array} An array with the number of random items specified
  */ const getRandomFromArray = (e, t) => {
-  let a = e.length;
-  const s = new Array(t);
-  const r = new Array(a);
-  if (t > a) throw new RangeError("getRandom: more elements taken than available");
+  let s = e.length;
+  const a = new Array(t);
+  const r = new Array(s);
+  if (t > s) throw new RangeError("getRandom: more elements taken than available");
   while (t--) {
-    const o = Date.now() % a;
-    s[t] = e[o in r ? r[o] : o];
-    r[o] = --a in r ? r[a] : a;
+    const o = Date.now() % s;
+    a[t] = e[o in r ? r[o] : o];
+    r[o] = --s in r ? r[s] : s;
   }
-  return s;
+  return a;
 };
 
 /**

package/dist/beeq/{p-7ea146b8.entry.js → p-01fe8efb.entry.js}

@@ -6,8 +6,6 @@ import { r as a, c as r, g as b, h as e } from "./p-01df4baa.js";
 
 import { T as n, a as t, b as i } from "./p-af062402.js";
 
-import "./p-a84d4562.js";
-
 import { v as q } from "./p-687da041.js";
 
 import { b as o } from "./p-d7ce7165.js";
@@ -181,4 +179,4 @@ const d = class {
 d.style = l;
 
 export { d as bq_tab };
-//# sourceMappingURL=p-7ea146b8.entry.js.map
+//# sourceMappingURL=p-01fe8efb.entry.js.map

package/dist/beeq/{p-7ea146b8.entry.js.map → p-01fe8efb.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bqTabCss","BqTabStyle0","BqTab","buttonElement","iconElement","checkPropValues","validatePropValue","TAB_SIZE","this","el","TAB_ORIENTATION","TAB_PLACEMENT","bqClick","bqFocus","bqBlur","bqKeyDown","componentWillLoad","vClick","click","vFocus","focus","vBlur","blur","enableFocus","value","tabIndex","handleClick","active","emit","handleOnFocus","handleOnBlur","handleOnKeyDown","event","handleIconSlotChange","hasIcon","hasSlotContent","tabindex","render","h","key","ref","class","size","orientation","placement","id","tabId","onBlur","onClick","onFocus","onKeyDown","disabled","role","controls","part","span","name","onSlotchange"],"sources":["../../packages/beeq/src/components/tab/scss/bq-tab.scss?tag=bq-tab&encapsulation=shadow","../../packages/beeq/src/components/tab/bq-tab.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tab.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-tab {\n  @apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed disabled:opacity-60;\n  @apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:bg-hover-ui-primary [&:not([disabled])]:hover:text-hover-text-brand;\n  @apply border-0 bg-transparent focus-visible:focus;\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n\n  &::after {\n    @apply absolute z-[1] block bg-stroke-brand opacity-0 content-empty -inset-be-1;\n    @apply transition-opacity duration-300 ease-linear;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      /**\n     * This hack will make the underline larger so it fits till the tab bar edges for the first and last tab button,\n     * because the parent container applies some padding to not cut the focus outline style.\n     */\n      @apply -start-xs3 bs-[2px] is-[calc(100%_+_var(--bq-spacing-xs2))];\n    }\n  }\n\n  &--vertical-start {\n    @apply justify-end is-full;\n\n    &::after {\n      @apply -end-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &--vertical-end {\n    @apply justify-start is-full;\n\n    &::after {\n      @apply -start-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &[aria-selected='true']::after {\n    @apply opacity-100;\n  }\n\n  &--small {\n    @apply p-b-[--bq-tab--padding-vertical-small] p-i-[--bq-tab--padding-horizontal-small];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};\n    }\n  }\n\n  &--medium {\n    @apply p-b-[--bq-tab--padding-vertical-medium] p-i-[--bq-tab--padding-horizontal-medium];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};\n    }\n  }\n\n  &--large {\n    @apply text-l p-b-[--bq-tab--padding-vertical-large] p-i-[--bq-tab--padding-horizontal-large];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE, TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n */\n@Component({\n  tag: 'bq-tab',\n  styleUrl: './scss/bq-tab.scss',\n  shadow: true,\n})\nexport class BqTab {\n  // Own Properties\n  // ====================\n\n  private buttonElement: HTMLButtonElement;\n  private iconElement: HTMLSpanElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() tabIndex: number | null = null;\n  @State() hasIcon: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true tab is active */\n  @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n  /** If true tab is disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\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 id of the tab */\n  @Prop({ reflect: true }) tabId!: string;\n\n  /** The tab panel id that the tab controls */\n  @Prop({ reflect: true }) controls!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\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\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab state changes */\n  @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab key is pressed */\n  @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n  /**\n   * Simulate a click event on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.buttonElement?.click();\n  }\n\n  /**\n   * Sets focus on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.buttonElement?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.buttonElement?.blur();\n  }\n\n  /**\n   * Sets tabindex on the native `<button>` HTML element used under the hood.\n   * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n   */\n  @Method()\n  async enableFocus(value: boolean) {\n    this.tabIndex = value ? 0 : null;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = () => {\n    this.active = true;\n    this.bqClick.emit(this.el);\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(event);\n  };\n\n  private handleIconSlotChange = () => {\n    this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n  };\n\n  private get tabindex(): string {\n    // NOTE: this.active is undefined when is not part of bq-tab-group\n    return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <button\n        ref={(el) => (this.buttonElement = el)}\n        class={{\n          [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n          'text-text-brand': this.active,\n          'text-text-primary': !this.active,\n        }}\n        id={this.tabId}\n        onBlur={this.handleOnBlur}\n        onClick={this.handleClick}\n        onFocus={this.handleOnFocus}\n        onKeyDown={this.handleOnKeyDown}\n        disabled={this.disabled}\n        role=\"tab\"\n        aria-controls={this.controls}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n        tabindex={this.tabindex}\n        part=\"base\"\n      >\n        <div class=\"flex items-center justify-center\" part=\"content\">\n          <div class=\"flex\" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part=\"icon\">\n            <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n          </div>\n          <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n            <slot />\n          </div>\n        </div>\n      </button>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;AAAA,MAAMA,IAAW;;AACjB,MAAAC,IAAeD;;MCgBFE,IAAK;;;;;;;oBAgBmB;mBACP;;oBASQ;gBAGM;uBAGe;qBAGJ;;;;;;EA/B7CC;EACAC;;;;;;EA4CR,eAAAC;IACEC,EAAkBC,GAAU,UAAUC,KAAKC,IAAI;IAC/CH,EAAkBI,GAAiB,cAAcF,KAAKC,IAAI;IAC1DH,EAAkBK,GAAe,SAASH,KAAKC,IAAI;;;;;;EAQ5CG;;EAGAC;;EAGAC;;EAGAC;;;;EAMT,iBAAAC;IACER,KAAKH;;;;;;;;;;;;;;EAiBP,YAAMY;IACJT,KAAKL,eAAee;;;;;SAQtB,YAAMC;IACJX,KAAKL,eAAeiB;;;;;SAQtB,WAAMC;IACJb,KAAKL,eAAemB;;;;;SAQtB,iBAAMC,CAAYC;IAChBhB,KAAKiB,WAAWD,IAAQ,IAAI;;;;;;EAQtBE,YAAc;IACpBlB,KAAKmB,SAAS;IACdnB,KAAKI,QAAQgB,KAAKpB,KAAKC;AAAG;EAGpBoB,cAAgB;IACtBrB,KAAKK,QAAQe,KAAKpB,KAAKC;AAAG;EAGpBqB,aAAe;IACrBtB,KAAKM,OAAOc,KAAKpB,KAAKC;AAAG;EAGnBsB,gBAAmBC;IACzBxB,KAAKO,UAAUa,KAAKI;AAAM;EAGpBC,qBAAuB;IAC7BzB,KAAK0B,UAAUC,EAAe3B,KAAKJ,aAAa;AAAO;EAGzD,YAAYgC;;IAEV,OAAO,GAAG5B,KAAKiB,aAAa,MAAMjB,KAAKmB,UAAU;;;;;EAOnD,MAAAU;IACE,OACEC,EAAA;MAAAC,KAAA;MACEC,KAAM/B,KAAQD,KAAKL,gBAAgBM;MACnCgC,OAAO;QACL,CAAC,kBAAkBjC,KAAKkC,gBAAgBlC,KAAKmC,eAAenC,KAAKoC,cAAc;QAC/E,mBAAmBpC,KAAKmB;QACxB,sBAAsBnB,KAAKmB;;MAE7BkB,IAAIrC,KAAKsC;MACTC,QAAQvC,KAAKsB;MACbkB,SAASxC,KAAKkB;MACduB,SAASzC,KAAKqB;MACdqB,WAAW1C,KAAKuB;MAChBoB,UAAU3C,KAAK2C;MACfC,MAAK;MAAK,iBACK5C,KAAK6C;MAAQ,iBACb7C,KAAK2C,WAAW,SAAS;MAAO,iBAChC3C,KAAKmB,SAAS,SAAS;MACtCS,UAAU5B,KAAK4B;MACfkB,MAAK;OAELhB,EAAA;MAAAC,KAAA;MAAKE,OAAM;MAAmCa,MAAK;OACjDhB,EAAA;MAAAC,KAAA;MAAKE,OAAM;MAAOD,KAAMe,KAA2B/C,KAAKJ,cAAcmD;MAAOD,MAAK;OAChFhB,EAAA;MAAAC,KAAA;MAAMiB,MAAK;MAAOC,cAAcjD,KAAKyB;SAEvCK,EAAA;MAAAC,KAAA;MAAKE,OAAO;QAAE,gBAAgB;QAAM,iCAAiCjC,KAAK0B;;MAAWoB,MAAK;OACxFhB,EAAA;MAAAC,KAAA","ignoreList":[]}
+{"version":3,"names":["bqTabCss","BqTabStyle0","BqTab","buttonElement","iconElement","checkPropValues","validatePropValue","TAB_SIZE","this","el","TAB_ORIENTATION","TAB_PLACEMENT","bqClick","bqFocus","bqBlur","bqKeyDown","componentWillLoad","vClick","click","vFocus","focus","vBlur","blur","enableFocus","value","tabIndex","handleClick","active","emit","handleOnFocus","handleOnBlur","handleOnKeyDown","event","handleIconSlotChange","hasIcon","hasSlotContent","tabindex","render","h","key","ref","class","size","orientation","placement","id","tabId","onBlur","onClick","onFocus","onKeyDown","disabled","role","controls","part","span","name","onSlotchange"],"sources":["../../packages/beeq/src/components/tab/scss/bq-tab.scss?tag=bq-tab&encapsulation=shadow","../../packages/beeq/src/components/tab/bq-tab.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Tab styles                               */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-tab.variables';\n\n:host {\n  @apply inline-block;\n}\n\n.bq-tab {\n  @apply relative flex cursor-pointer items-center justify-center rounded-s disabled:cursor-not-allowed disabled:opacity-60;\n  @apply text-[length:--bq-tab--font-size] font-[--bq-tab--font-weight] leading-[--bq-tab--line-height] [&:not([disabled])]:hover:bg-hover-ui-primary [&:not([disabled])]:hover:text-hover-text-brand;\n  @apply border-0 bg-transparent focus-visible:focus;\n  @apply transition-[color,background-color,border-color,box-shadow] duration-300;\n\n  &::after {\n    @apply absolute z-[1] block bg-stroke-brand opacity-0 content-empty -inset-be-1;\n    @apply transition-opacity duration-300 ease-linear;\n  }\n\n  &--horizontal-start,\n  &--horizontal-end {\n    &::after {\n      /**\n     * This hack will make the underline larger so it fits till the tab bar edges for the first and last tab button,\n     * because the parent container applies some padding to not cut the focus outline style.\n     */\n      @apply -start-xs3 bs-[2px] is-[calc(100%_+_var(--bq-spacing-xs2))];\n    }\n  }\n\n  &--vertical-start {\n    @apply justify-end is-full;\n\n    &::after {\n      @apply -end-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &--vertical-end {\n    @apply justify-start is-full;\n\n    &::after {\n      @apply -start-xs2 bs-[calc(100%_+_var(--bq-spacing-xs2))] is-[2px];\n    }\n  }\n\n  &[aria-selected='true']::after {\n    @apply opacity-100;\n  }\n\n  &--small {\n    @apply p-b-[--bq-tab--padding-vertical-small] p-i-[--bq-tab--padding-horizontal-small];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-small) #{!important};\n    }\n  }\n\n  &--medium {\n    @apply p-b-[--bq-tab--padding-vertical-medium] p-i-[--bq-tab--padding-horizontal-medium];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-medium) #{!important};\n    }\n  }\n\n  &--large {\n    @apply text-l p-b-[--bq-tab--padding-vertical-large] p-i-[--bq-tab--padding-horizontal-large];\n\n    ::slotted(bq-icon) {\n      --bq-icon--size: var(--bq-tab--icon-size-large) #{!important};\n    }\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { TAB_ORIENTATION, TAB_PLACEMENT, TAB_SIZE, TTabOrientation, TTabPlacement, TTabSize } from './bq-tab.types';\nimport { hasSlotContent, validatePropValue } from '../../shared/utils';\n\n/**\n * @part base - The HTML button used under the hood.\n * @part content - The HTML `<div>` element that holds the content.\n * @part icon - The HTML `<div>` element that holds the icon content.\n * @part text - The HTML `<div>` element that holds the text content.\n * @part underline - The HTML `<div>` element that display active state.\n */\n@Component({\n  tag: 'bq-tab',\n  styleUrl: './scss/bq-tab.scss',\n  shadow: true,\n})\nexport class BqTab {\n  // Own Properties\n  // ====================\n\n  private buttonElement: HTMLButtonElement;\n  private iconElement: HTMLSpanElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqTabElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() tabIndex: number | null = null;\n  @State() hasIcon: boolean = false;\n\n  // Public Property API\n  // ========================\n\n  /** If true tab is active */\n  @Prop({ reflect: true, mutable: true }) active?: boolean;\n\n  /** If true tab is disabled */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The size of the tab */\n  @Prop({ reflect: true }) size: TTabSize = 'medium';\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 id of the tab */\n  @Prop({ reflect: true }) tabId!: string;\n\n  /** The tab panel id that the tab controls */\n  @Prop({ reflect: true }) controls!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\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\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the tab state changes */\n  @Event() bqClick: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqTabElement>;\n\n  /** Handler to be called when the tab key is pressed */\n  @Event() bqKeyDown: EventEmitter<KeyboardEvent>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n  /**\n   * Simulate a click event on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.buttonElement?.click();\n  }\n\n  /**\n   * Sets focus on the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.buttonElement?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<button>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.buttonElement?.blur();\n  }\n\n  /**\n   * Sets tabindex on the native `<button>` HTML element used under the hood.\n   * This method is used inside `<bq-tab-group>` to make tab focusable after the active one is focused\n   */\n  @Method()\n  async enableFocus(value: boolean) {\n    this.tabIndex = value ? 0 : null;\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleClick = () => {\n    this.active = true;\n    this.bqClick.emit(this.el);\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(event);\n  };\n\n  private handleIconSlotChange = () => {\n    this.hasIcon = hasSlotContent(this.iconElement, 'icon');\n  };\n\n  private get tabindex(): string {\n    // NOTE: this.active is undefined when is not part of bq-tab-group\n    return `${this.tabIndex ?? -1 + +(this.active ?? 1)}`;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <button\n        ref={(el) => (this.buttonElement = el)}\n        class={{\n          [`bq-tab bq-tab--${this.size} bq-tab--${this.orientation}-${this.placement}`]: true,\n          'text-text-brand': this.active,\n          'text-text-primary': !this.active,\n        }}\n        id={this.tabId}\n        onBlur={this.handleOnBlur}\n        onClick={this.handleClick}\n        onFocus={this.handleOnFocus}\n        onKeyDown={this.handleOnKeyDown}\n        disabled={this.disabled}\n        role=\"tab\"\n        aria-controls={this.controls}\n        aria-disabled={this.disabled ? 'true' : 'false'}\n        aria-selected={this.active ? 'true' : 'false'}\n        tabindex={this.tabindex}\n        part=\"base\"\n      >\n        <div class=\"flex items-center justify-center\" part=\"content\">\n          <div class=\"flex\" ref={(span: HTMLSpanElement) => (this.iconElement = span)} part=\"icon\">\n            <slot name=\"icon\" onSlotchange={this.handleIconSlotChange} />\n          </div>\n          <div class={{ 'line-clamp-1': true, 'ms-[--bq-tab--label-icon-gap]': this.hasIcon }} part=\"text\">\n            <slot />\n          </div>\n        </div>\n      </button>\n    );\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAAA,MAAMA,IAAW;;AACjB,MAAAC,IAAeD;;MCgBFE,IAAK;;;;;;;oBAgBmB;mBACP;;oBASQ;gBAGM;uBAGe;qBAGJ;;;;;;EA/B7CC;EACAC;;;;;;EA4CR,eAAAC;IACEC,EAAkBC,GAAU,UAAUC,KAAKC,IAAI;IAC/CH,EAAkBI,GAAiB,cAAcF,KAAKC,IAAI;IAC1DH,EAAkBK,GAAe,SAASH,KAAKC,IAAI;;;;;;EAQ5CG;;EAGAC;;EAGAC;;EAGAC;;;;EAMT,iBAAAC;IACER,KAAKH;;;;;;;;;;;;;;EAiBP,YAAMY;IACJT,KAAKL,eAAee;;;;;SAQtB,YAAMC;IACJX,KAAKL,eAAeiB;;;;;SAQtB,WAAMC;IACJb,KAAKL,eAAemB;;;;;SAQtB,iBAAMC,CAAYC;IAChBhB,KAAKiB,WAAWD,IAAQ,IAAI;;;;;;EAQtBE,YAAc;IACpBlB,KAAKmB,SAAS;IACdnB,KAAKI,QAAQgB,KAAKpB,KAAKC;AAAG;EAGpBoB,cAAgB;IACtBrB,KAAKK,QAAQe,KAAKpB,KAAKC;AAAG;EAGpBqB,aAAe;IACrBtB,KAAKM,OAAOc,KAAKpB,KAAKC;AAAG;EAGnBsB,gBAAmBC;IACzBxB,KAAKO,UAAUa,KAAKI;AAAM;EAGpBC,qBAAuB;IAC7BzB,KAAK0B,UAAUC,EAAe3B,KAAKJ,aAAa;AAAO;EAGzD,YAAYgC;;IAEV,OAAO,GAAG5B,KAAKiB,aAAa,MAAMjB,KAAKmB,UAAU;;;;;EAOnD,MAAAU;IACE,OACEC,EAAA;MAAAC,KAAA;MACEC,KAAM/B,KAAQD,KAAKL,gBAAgBM;MACnCgC,OAAO;QACL,CAAC,kBAAkBjC,KAAKkC,gBAAgBlC,KAAKmC,eAAenC,KAAKoC,cAAc;QAC/E,mBAAmBpC,KAAKmB;QACxB,sBAAsBnB,KAAKmB;;MAE7BkB,IAAIrC,KAAKsC;MACTC,QAAQvC,KAAKsB;MACbkB,SAASxC,KAAKkB;MACduB,SAASzC,KAAKqB;MACdqB,WAAW1C,KAAKuB;MAChBoB,UAAU3C,KAAK2C;MACfC,MAAK;MAAK,iBACK5C,KAAK6C;MAAQ,iBACb7C,KAAK2C,WAAW,SAAS;MAAO,iBAChC3C,KAAKmB,SAAS,SAAS;MACtCS,UAAU5B,KAAK4B;MACfkB,MAAK;OAELhB,EAAA;MAAAC,KAAA;MAAKE,OAAM;MAAmCa,MAAK;OACjDhB,EAAA;MAAAC,KAAA;MAAKE,OAAM;MAAOD,KAAMe,KAA2B/C,KAAKJ,cAAcmD;MAAOD,MAAK;OAChFhB,EAAA;MAAAC,KAAA;MAAMiB,MAAK;MAAOC,cAAcjD,KAAKyB;SAEvCK,EAAA;MAAAC,KAAA;MAAKE,OAAO;QAAE,gBAAgB;QAAM,iCAAiCjC,KAAK0B;;MAAWoB,MAAK;OACxFhB,EAAA;MAAAC,KAAA","ignoreList":[]}

package/dist/beeq/{p-d9bcaeed.entry.js → p-03373320.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r, c as a, g as e, h as b } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { c as t } from "./p-1f3a4359.js";
 
 import { d as n } from "./p-1defeea3.js";
@@ -317,4 +315,4 @@ const d = class {
 d.style = q;
 
 export { d as bq_slider };
-//# sourceMappingURL=p-d9bcaeed.entry.js.map
+//# sourceMappingURL=p-03373320.entry.js.map

package/dist/beeq/{p-d9bcaeed.entry.js.map → p-03373320.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["bqSliderCss","BqSliderStyle0","BqSlider","inputMinElem","inputMaxElem","minTooltipElem","maxTooltipElem","progressElem","trackElem","debounceBqChange","handleValuePropChange","newValue","this","setState","emitBqChange","handleStepPropChange","minValue","Math","round","step","maxValue","handleGapChange","isRangeType","value","isNil","min","max","stringToObject","gap","bqChange","bqBlur","bqFocus","connectedCallback","init","componentWillLoad","componentDidLoad","runUpdates","componentDidUpdate","updateProgressTrack","syncInputsValue","setThumbPosition","clamp","enableTooltip","minThumbPosition","maxThumbPosition","thumbPosition","setAttribute","toString","isString","JSON","parse","handleInputChange","type","event","target","parseFloat","reflectedValue","calculatePercent","totalRange","Number","left","width","style","insetInlineStart","inlineSize","calculateThumbPosition","trackAreaWidth","getBoundingClientRect","inputThumbSize","parseInt","getComputedStyle","el","getPropertyValue","totalWidth","undefined","cancel","debounce","emit","debounceTime","handleBlur","handleFocus","handleMouseDown","handleTooltipVisibility","handleMouseUp","action","tooltipAlwaysVisible","tooltipElem","classList","decimalCount","toFixed","split","replace","length","isTooltipAlwaysVisible","renderLabel","position","css","h","class","hidden","enableValueIndicator","part","renderInput","refCallback","zIndexValue","zIndex","disabled","ref","onInput","ev","onBlur","onFocus","onMouseDown","onMouseUp","renderTooltip","exportparts","alwaysVisible","distance","fontVariant","slot","render","key","elem","input"],"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-stroke-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-stroke-brand;\n  }\n\n  .thumb-active {\n    @apply cursor-grabbing bg-active-ui-brand border-active-stroke-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 { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\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@Component({\n  tag: 'bq-slider',\n  styleUrl: './scss/bq-slider.scss',\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  @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  /**\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  connectedCallback() {\n    this.init();\n  }\n\n  componentWillLoad() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.runUpdates();\n  }\n\n  componentDidUpdate() {\n    this.runUpdates();\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    this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n  };\n\n  private calculatePercent = (value: number) => {\n    const totalRange = Number(this.max) - Number(this.min);\n    return (value / 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))\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;\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-text-primary is-fit min-is-8 [font-variant:tabular-nums]`]:\n            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':\n            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        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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["bqSliderCss","BqSliderStyle0","BqSlider","inputMinElem","inputMaxElem","minTooltipElem","maxTooltipElem","progressElem","trackElem","debounceBqChange","handleValuePropChange","newValue","this","setState","emitBqChange","handleStepPropChange","minValue","Math","round","step","maxValue","handleGapChange","isRangeType","value","isNil","min","max","stringToObject","gap","bqChange","bqBlur","bqFocus","connectedCallback","init","componentWillLoad","componentDidLoad","runUpdates","componentDidUpdate","updateProgressTrack","syncInputsValue","setThumbPosition","clamp","enableTooltip","minThumbPosition","maxThumbPosition","thumbPosition","setAttribute","toString","isString","JSON","parse","handleInputChange","type","event","target","parseFloat","reflectedValue","calculatePercent","totalRange","Number","left","width","style","insetInlineStart","inlineSize","calculateThumbPosition","trackAreaWidth","getBoundingClientRect","inputThumbSize","parseInt","getComputedStyle","el","getPropertyValue","totalWidth","undefined","cancel","debounce","emit","debounceTime","handleBlur","handleFocus","handleMouseDown","handleTooltipVisibility","handleMouseUp","action","tooltipAlwaysVisible","tooltipElem","classList","decimalCount","toFixed","split","replace","length","isTooltipAlwaysVisible","renderLabel","position","css","h","class","hidden","enableValueIndicator","part","renderInput","refCallback","zIndexValue","zIndex","disabled","ref","onInput","ev","onBlur","onFocus","onMouseDown","onMouseUp","renderTooltip","exportparts","alwaysVisible","distance","fontVariant","slot","render","key","elem","input"],"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-stroke-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-stroke-brand;\n  }\n\n  .thumb-active {\n    @apply cursor-grabbing bg-active-ui-brand border-active-stroke-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 { Component, Element, Event, EventEmitter, h, Prop, State, Watch } from '@stencil/core';\n\nimport { TSliderType, TSliderValue } from './bq-slider.types';\nimport { clamp, debounce, isNil, isString, TDebounce } from '../../shared/utils';\n\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@Component({\n  tag: 'bq-slider',\n  styleUrl: './scss/bq-slider.scss',\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  @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  /**\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  connectedCallback() {\n    this.init();\n  }\n\n  componentWillLoad() {\n    this.init();\n  }\n\n  componentDidLoad() {\n    this.runUpdates();\n  }\n\n  componentDidUpdate() {\n    this.runUpdates();\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    this.value = this.isRangeType ? [this.minValue, this.maxValue] : this.minValue;\n  };\n\n  private calculatePercent = (value: number) => {\n    const totalRange = Number(this.max) - Number(this.min);\n    return (value / 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))\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;\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-text-primary is-fit min-is-8 [font-variant:tabular-nums]`]:\n            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':\n            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        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"],"mappings":"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","ignoreList":[]}

package/dist/beeq/{p-e06c8398.entry.js → p-03c586df.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, c as r, g as e, h as t, a as n } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { d as b } from "./p-1defeea3.js";
 
 import { v as i } from "./p-687da041.js";
@@ -33,7 +31,7 @@ const f = class {
     this.bqAfterClose = r(this, "bqAfterClose", 7);
     this.hasContent = false;
     this.hasFooter = false;
-    this.notificationPortal = document.querySelector(`.${v}`);
+    this.notificationPortal = typeof window !== "undefined" ? document.querySelector(`.${v}`) : null;
     this.autoDismiss = undefined;
     this.border = "s";
     this.disableClose = undefined;
@@ -86,7 +84,7 @@ const f = class {
   // =====================================
   connectedCallback() {
     const {notificationPortal: a} = this;
-    if (!a && typeof document !== "undefined") {
+    if (!a && typeof window !== "undefined") {
       this.notificationPortal = Object.assign(document.createElement("div"), {
         className: v
       });
@@ -189,7 +187,7 @@ const f = class {
       }
     };
     return t(n, {
-      key: "635a7cacceb2d9611a4b07a950686add7e1d6dfa",
+      key: "411d19d1f08119b6c7fe7853e49195a5b9e12cd9",
       style: a,
       class: {
         "is-hidden": !this.open
@@ -198,7 +196,7 @@ const f = class {
       hidden: !this.open ? "true" : "false",
       role: "alert"
     }, t("div", {
-      key: "e58a5c744e18a45e2dfecbbe66a24e1c354ed402",
+      key: "45f9cd844fde4725a766bd9af611b1ba37f92acd",
       class: "bq-notification",
       "data-transition-enter": "transform transition ease-out duration-300",
       "data-transition-enter-start": "translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s",
@@ -209,20 +207,20 @@ const f = class {
       ref: a => this.notificationElem = a,
       part: "wrapper"
     }, !this.disableClose && t("bq-button", {
-      key: "9c6420dcc9429bb2fb2799fe9f4ebddee4e01901",
+      key: "9f4115b99545244551ee758430e4bb5d7f72a81b",
       class: "notification--close absolute inset-ie-5 [&::part(label)]:inline-flex",
       appearance: "text",
       size: "small",
       onClick: () => this.hide(),
       part: "btn-close"
     }, t("slot", {
-      key: "861b72cfeceb7e0bc6fce67ce6a23838e7979031",
+      key: "5472deffc786ecbd62374f7fd28968bceac2aa5b",
       name: "btn-close"
     }, t("bq-icon", {
-      key: "fde9f6eb4189dca4045ba9263c72ee867ae7d6d0",
+      key: "33e3ca7621c377aae89fe1c09692568d3caeca11",
       name: "x"
     }))), t("div", {
-      key: "d866ddeb7d7c74ba33b41e5377ab8902340a6c58",
+      key: "8139860988d2ff313310a13757eefee3e76c23d9",
       class: {
         "!hidden": this.hideIcon,
         [`color-${this.type}`]: true,
@@ -231,29 +229,29 @@ const f = class {
       },
       part: "icon-outline"
     }, t("slot", {
-      key: "da8c411b03acbe06c44af477a4123b32c645c870",
+      key: "46a501d0ef1f7fa1440cac3eac05d51e19c25336",
       name: "icon"
     }, t("bq-icon", {
-      key: "09d42073f6496fe8d179526301bac1ff167b81e2",
+      key: "6306ef09bff157ef4eca5ee45259d4a17c9da89e",
       name: this.iconName,
       part: "icon",
       exportparts: "base,svg"
     }))), t("div", {
-      key: "3593124d9e0c874841a8456b3c0ce26e78fefe67",
+      key: "39b62fdb9df69307eb913707a9cc585415064709",
       class: "flex flex-col items-start gap-[--bq-notification--content-footer-gap]",
       part: "main"
     }, t("div", {
-      key: "bf70e73d5a73645d670b7e8c65d99323ea325cd3",
+      key: "c3a061358db3859536429a5c7cce781575bc0740",
       class: "flex flex-col gap-[--bq-notification--title-body-gap]",
       part: "content"
     }, t("div", {
-      key: "f7866f62899d5e467af450f4e4b054004948dddb",
+      key: "d7bc9f7ccd2e3c66b2ff48f6d8fd1a0687a34570",
       class: "title-font font-semibold leading-regular",
       part: "title"
     }, t("slot", {
-      key: "b40316a74af238c6dd3e865a72a40f44b34bceb4"
+      key: "04f8365658aafe57aa8bc67231560addbddd6eab"
     })), t("div", {
-      key: "d21bdc707eb85ba9f2a388e40f4c74369a0d6fa6",
+      key: "13c7e30888fae485aa127dd2d0cbcddf9a1ef3f4",
       class: {
         "text-s leading-regular": true,
         "!hidden": !this.hasContent
@@ -261,11 +259,11 @@ const f = class {
       ref: a => this.bodyElem = a,
       part: "body"
     }, t("slot", {
-      key: "756744bb4587ec9b2b2f8d810e2d030ab98153fb",
+      key: "39d07bf713348590855059a0b44efe0d66ee9222",
       name: "body",
       onSlotchange: this.handleContentSlotChange
     }))), t("div", {
-      key: "24a5390de7f160ef98a184a5e7db50080be91e10",
+      key: "dadf3b1c035aa1b2061ab22d0badf8a90a843923",
       class: {
         "flex items-start gap-xs": true,
         "!hidden": !this.hasFooter
@@ -273,7 +271,7 @@ const f = class {
       ref: a => this.footerElem = a,
       part: "footer"
     }, t("slot", {
-      key: "0f4a35ca8a0db64372d8f9eb4c73bddcfba32d54",
+      key: "4e3075f3f32633d8af9a41468bd1c3972f709404",
       name: "footer",
       onSlotchange: this.handleFooterSlotChange
     })))));
@@ -291,4 +289,4 @@ const f = class {
 f.style = l;
 
 export { f as bq_notification };
-//# sourceMappingURL=p-e06c8398.entry.js.map
+//# sourceMappingURL=p-03c586df.entry.js.map

package/dist/beeq/p-03c586df.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["NOTIFICATION_TYPE","bqNotificationCss","BqNotificationStyle0","NOTIFICATION_PORTAL_SELECTOR","BqNotification","window","document","querySelector","autoDismissDebounce","bodyElem","footerElem","notificationElem","handleTimeout","this","cancel","autoDismiss","debounce","hide","time","open","handleOpenChange","checkPropValues","validatePropValue","el","bqHide","bqShow","bqAfterOpen","bqAfterClose","connectedCallback","notificationPortal","Object","assign","createElement","className","componentWillLoad","afterNotificationClose","removeChild","tagName","toLowerCase","remove","error","DOMException","handleHide","show","handleShow","toast","parentElement","body","append","appendChild","requestAnimationFrame","async","ev","emit","defaultPrevented","leave","handleTransitionEnd","enter","handleContentSlotChange","hasContent","hasSlotContent","handleFooterSlotChange","hasFooter","iconName","typeMap","success","warning","type","render","style","border","h","Host","key","class","hidden","role","ref","div","part","disableClose","appearance","size","onClick","name","hideIcon","exportparts","onSlotchange"],"sources":["../../packages/beeq/src/components/notification/bq-notification.types.ts","../../packages/beeq/src/components/notification/scss/bq-notification.scss?tag=bq-notification&encapsulation=shadow","../../packages/beeq/src/components/notification/bq-notification.tsx"],"sourcesContent":["export const NOTIFICATION_TYPE = ['error', 'info', 'neutral', 'success', 'warning'] as const;\nexport type TNotificationType = (typeof NOTIFICATION_TYPE)[number];\n\nexport const NOTIFICATION_BORDER_RADIUS = ['none', 'xs2', 'xs', 's', 'm', 'l', 'full'] as const;\nexport type TNotificationBorderRadius = (typeof NOTIFICATION_BORDER_RADIUS)[number];\n","/* -------------------------------------------------------------------------- */\n/*                             Notification styles                            */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-notification.variables';\n\n:host {\n  @apply block;\n}\n\n:host(.is-hidden) {\n  @apply hidden;\n}\n\n.bq-notification {\n  @apply relative flex transition-all min-is-[--bq-notification--min-width] p-b-[--bq-notification--padding] p-i-[--bq-notification--padding];\n  @apply rounded-[--bq-notification--border-radius] bg-[--bq-notification--background] shadow-[shadow:--bq-notification--box-shadow];\n}\n\n/**\n * Set the notification icon color based on the type value selected\n */\n.notification--icon.color {\n  &-error {\n    @apply text-[color:--bq-notification--icon-color-error];\n  }\n\n  &-info {\n    @apply text-[color:--bq-notification--icon-color-info];\n  }\n\n  &-neutral {\n    @apply text-[color:--bq-notification--icon-color-neutral];\n  }\n\n  &-success {\n    @apply text-[color:--bq-notification--icon-color-success];\n  }\n\n  &-warning {\n    @apply text-[color:--bq-notification--icon-color-warning];\n  }\n}\n\n/**\n * Tweak the close bq-button styles so it remain small without extra padding\n */\n.notification--close::part(button) {\n  @apply rounded-s border-0 bs-fit p-b-0 p-i-0;\n}\n\n/**\n * Here we guarantee that if the footer actions are wrapped in a div container from the consumer side,\n * the styles get applied to the that wrapping container directly\n */\n[part='footer'] ::slotted(*) {\n  @apply flex items-start gap-xs;\n}\n\n[part='body'],\n[part='footer'] {\n  ::slotted(*) {\n    @apply block m-bs-m;\n  }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { NOTIFICATION_TYPE, TNotificationBorderRadius, TNotificationType } from './bq-notification.types';\nimport { debounce, enter, hasSlotContent, leave, TDebounce, validatePropValue } from '../../shared/utils';\n\nconst NOTIFICATION_PORTAL_SELECTOR = 'bq-notification-portal';\n\n/**\n * @part base - The `<div>` container of the predefined bq-icon component.\n * @part body - The container `<div>` that wraps the notification description content\n * @part btn-close - The `bq-button` used to close the notification\n * @part content - The container `<div>` that wraps all the notification content (title, description, footer)\n * @part footer - The container `<div>` that wraps the notification footer content\n * @part icon - The `<bq-icon>` element used to render a predefined icon based on the notification type\n * @part icon-outline - The container `<div>` that wraps the icon element\n * @part main - The container `<div>` that wraps the notification main content (title, description)\n * @part svg - The `<svg>` element of the predefined bq-icon component.\n * @part title - The container `<div>` that wraps the notification title content\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n *\n * @slot - The notification title content\n * @slot body - The notification description content\n * @slot footer - The notification footer content\n * @slot icon - The icon to be displayed in the notification\n * @slot btn-close - The close button of the notification\n */\n\n@Component({\n  tag: 'bq-notification',\n  styleUrl: './scss/bq-notification.scss',\n  shadow: true,\n})\nexport class BqNotification {\n  // Own Properties\n  // ====================\n\n  private autoDismissDebounce: TDebounce<void>;\n  private bodyElem: HTMLDivElement;\n  private footerElem: HTMLDivElement;\n  private notificationElem: HTMLDivElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqNotificationElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasContent = false;\n  @State() private hasFooter = false;\n  @State() private notificationPortal =\n    typeof window !== 'undefined' ? document.querySelector(`.${NOTIFICATION_PORTAL_SELECTOR}`) : null;\n\n  // Public Property API\n  // ========================\n\n  /** If true, the notification will automatically hide after the specified amount of time */\n  @Prop({ reflect: true }) autoDismiss: boolean;\n\n  /** The corder radius of the notification component */\n  @Prop({ reflect: true }) border: TNotificationBorderRadius = 's';\n\n  /** If true, the close button at the top right of the notification won't be shown */\n  @Prop({ reflect: true }) disableClose: boolean;\n\n  /** If true, the notification icon won't be shown */\n  @Prop({ reflect: true }) hideIcon: boolean;\n\n  /** If true, the notification will be shown */\n  @Prop({ reflect: true, mutable: true }) open: boolean;\n\n  /** The length of time, in milliseconds, after which the notification will close itself. Only valid if `autoDismiss=\"true\"` */\n  @Prop({ reflect: true }) time: number = 3000;\n\n  /** Type of Notification */\n  @Prop({ reflect: true }) type: TNotificationType = 'info';\n\n  // Prop lifecycle events\n  // =======================\n  @Watch('autoDismiss')\n  @Watch('time')\n  handleTimeout() {\n    this.autoDismissDebounce?.cancel();\n    if (!this.autoDismiss) return;\n\n    this.autoDismissDebounce = debounce(() => {\n      this.hide();\n    }, this.time);\n    // Make sure to autodismiss the notification if the `auto-dismiss` value changed while open\n    if (this.open) this.autoDismissDebounce();\n  }\n\n  @Watch('open')\n  handleOpenChange() {\n    this.autoDismissDebounce?.cancel();\n\n    if (!(this.autoDismiss && this.open)) return;\n    this.autoDismissDebounce();\n  }\n\n  @Watch('type')\n  checkPropValues() {\n    validatePropValue(NOTIFICATION_TYPE, 'info', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the notification is hidden */\n  @Event() bqHide!: EventEmitter;\n\n  /** Callback handler to be called when the notification is shown */\n  @Event() bqShow!: EventEmitter;\n\n  /** Callback handler to be called after the notification has been opened */\n  @Event() bqAfterOpen!: EventEmitter;\n\n  /** Callback handler to be called after the notification has been closed */\n  @Event() bqAfterClose!: EventEmitter;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  connectedCallback() {\n    const { notificationPortal } = this;\n    if (!notificationPortal && typeof window !== 'undefined') {\n      this.notificationPortal = Object.assign(document.createElement('div'), {\n        className: NOTIFICATION_PORTAL_SELECTOR,\n      });\n    }\n  }\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleTimeout();\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqAfterClose')\n  afterNotificationClose() {\n    try {\n      const { notificationPortal } = this;\n      notificationPortal.removeChild(this.el);\n      // Remove the notification portal from the DOM when there are no more notifications\n      if (notificationPortal.querySelector(this.el.tagName.toLowerCase()) === null) {\n        notificationPortal.remove();\n      }\n    } catch (error) {\n      /**\n       * Skip DOMException error since it could be possible that\n       * in some situations the notification portal is missing\n       */\n      if (error instanceof DOMException) return;\n      throw error;\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  /** Method to be called to hide the notification component */\n  @Method()\n  async hide(): Promise<void> {\n    await this.handleHide();\n  }\n\n  /** Method to be called to show the notification component */\n  @Method()\n  async show(): Promise<void> {\n    await this.handleShow();\n  }\n\n  /** This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically */\n  @Method()\n  async toast() {\n    const { notificationPortal } = this;\n    if (notificationPortal?.parentElement === null) {\n      document.body.append(notificationPortal);\n    }\n\n    notificationPortal?.appendChild(this.el);\n    requestAnimationFrame(() => {\n      this.show();\n    });\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleHide = async () => {\n    const ev = this.bqHide.emit(this.el);\n    if (!ev.defaultPrevented) {\n      await leave(this.notificationElem);\n      this.open = false;\n      this.handleTransitionEnd();\n    }\n  };\n\n  private handleShow = async () => {\n    const ev = this.bqShow.emit(this.el);\n    if (!ev.defaultPrevented) {\n      this.open = true;\n      await enter(this.notificationElem);\n      this.handleTransitionEnd();\n    }\n  };\n\n  private handleTransitionEnd = () => {\n    if (this.open) {\n      this.bqAfterOpen.emit();\n      return;\n    }\n\n    this.bqAfterClose.emit();\n  };\n\n  private handleContentSlotChange = () => {\n    this.hasContent = hasSlotContent(this.bodyElem);\n  };\n\n  private handleFooterSlotChange = () => {\n    this.hasFooter = hasSlotContent(this.footerElem, 'footer');\n  };\n\n  private get iconName(): string {\n    const typeMap = {\n      error: 'x-circle',\n      success: 'check-circle',\n      warning: 'warning-circle',\n    };\n\n    return typeMap[this.type] || 'info';\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-notification--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host\n        style={style}\n        class={{ 'is-hidden': !this.open }}\n        aria-hidden={!this.open ? 'true' : 'false'}\n        hidden={!this.open ? 'true' : 'false'}\n        role=\"alert\"\n      >\n        <div\n          class=\"bq-notification\"\n          data-transition-enter=\"transform transition ease-out duration-300\"\n          data-transition-enter-start=\"translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n          data-transition-enter-end=\"translate-y-0 opacity-100 sm:translate-x-0\"\n          data-transition-leave=\"transform transition ease-in duration-100\"\n          data-transition-leave-start=\"translate-y-0 opacity-100 sm:translate-x-0\"\n          data-transition-leave-end=\"-translate-y-xs opacity-0 sm:translate-y-0 sm:translate-x-s\"\n          ref={(div) => (this.notificationElem = div)}\n          part=\"wrapper\"\n        >\n          {/* CLOSE BUTTON */}\n          {!this.disableClose && (\n            <bq-button\n              class=\"notification--close absolute inset-ie-5 [&::part(label)]:inline-flex\"\n              appearance=\"text\"\n              size=\"small\"\n              onClick={() => this.hide()}\n              part=\"btn-close\"\n            >\n              <slot name=\"btn-close\">\n                <bq-icon name=\"x\" />\n              </slot>\n            </bq-button>\n          )}\n          {/* ICON */}\n          <div\n            class={{\n              '!hidden': this.hideIcon,\n              [`color-${this.type}`]: true, // The icon color will be based on the type (info, success, warning, error)\n              'notification--icon me-xs flex text-left align-top': true,\n            }}\n            part=\"icon-outline\"\n          >\n            <slot name=\"icon\">\n              <bq-icon name={this.iconName} part=\"icon\" exportparts=\"base,svg\" />\n            </slot>\n          </div>\n          {/* MAIN */}\n          <div class=\"flex flex-col items-start gap-[--bq-notification--content-footer-gap]\" part=\"main\">\n            <div class=\"flex flex-col gap-[--bq-notification--title-body-gap]\" part=\"content\">\n              {/* TITLE */}\n              <div class=\"title-font font-semibold leading-regular\" part=\"title\">\n                <slot />\n              </div>\n              {/* BODY */}\n              <div\n                class={{ 'text-s leading-regular': true, '!hidden': !this.hasContent }}\n                ref={(div) => (this.bodyElem = div)}\n                part=\"body\"\n              >\n                <slot name=\"body\" onSlotchange={this.handleContentSlotChange} />\n              </div>\n            </div>\n            {/* FOOTER */}\n            <div\n              class={{ 'flex items-start gap-xs': true, '!hidden': !this.hasFooter }}\n              ref={(div) => (this.footerElem = div)}\n              part=\"footer\"\n            >\n              <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange} />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/beeq/{p-a94d15f9.entry.js → p-0a981080.entry.js}

@@ -4,8 +4,6 @@
  */
 import { r as a, g as r, h as e, a as b } from "./p-01df4baa.js";
 
-import "./p-a84d4562.js";
-
 import { v as n } from "./p-687da041.js";
 
 const t = [ "square", "rounded" ];
@@ -153,4 +151,4 @@ const d = class {
 d.style = o;
 
 export { d as bq_progress };
-//# sourceMappingURL=p-a94d15f9.entry.js.map
+//# sourceMappingURL=p-0a981080.entry.js.map