@rarui/components 1.28.0 → 1.28.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/custom-elements.json +1 -1
- package/dist/index.d.ts +1552 -275
- package/dist/index.js +4 -2
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -448,7 +448,7 @@ const po=Symbol.for(""),mo=r=>{if(r?.r===po)return r?._$litStatic$},ko=r=>({_$li
|
|
|
448
448
|
</button>
|
|
449
449
|
`}};Xa.shadowRootOptions={...tr.shadowRootOptions,delegatesFocus:!0},Xa.styles=_`
|
|
450
450
|
${t(".rarui-chip__1rk47pp0 {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: fit-content;\n box-sizing: border-box;\n position: relative;\n border-style: solid;\n transition: all 150ms ease;\n overflow: hidden;\n gap: var(--rarui-spacing-3xs);\n font-weight: var(--rarui-fontWeight-medium);\n font-family: var(--rarui-fontFamily-body);\n border-width: var(--rarui-shape-border-width-1);\n border-radius: var(--rarui-shape-border-radius-2xs);\n border-color: var(--rarui-colors-border-subdued);\n background-color: var(--rarui-colors-surface-primary);\n color: var(--rarui-colors-content-primary);\n}\n.rarui-chip__1rk47pp0:focus-within {\n outline: none;\n box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-chip__1rk47pp0:hover {\n background-color: var(--rarui-colors-surface-brand-hover);\n border-color: var(--rarui-colors-border-brand);\n}\n.rarui-chip__1rk47pp0:active {\n background-color: var(--rarui-colors-surface-brand-press);\n}\n.rarui-chip__1rk47pp0:disabled {\n background: var(--rarui-colors-surface-disabled);\n border-color: var(--rarui-colors-border-disabled);\n color: var(--rarui-colors-content-disabled);\n cursor: not-allowed;\n box-shadow: none;\n}\n.rarui-chip_pill_true__1rk47pp1 {\n border-radius: var(--rarui-shape-border-radius-pill);\n}\n.rarui-chip_selected_true__1rk47pp2 {\n border-color: var(--rarui-colors-surface-brand);\n background-color: var(--rarui-colors-surface-brand);\n color: var(--rarui-colors-content-on-brand);\n}\n.rarui-chip_selected_true__1rk47pp2:hover {\n background-color: var(--rarui-colors-surface-brand);\n}\n.rarui-chip_size_medium__1rk47pp3 {\n line-height: var(--rarui-lineHeight-button-m);\n font-size: var(--rarui-fontSize-button-m);\n height: 2rem;\n}\n.rarui-chip_size_small__1rk47pp4 {\n line-height: var(--rarui-lineHeight-button-s);\n font-size: var(--rarui-fontSize-button-s);\n height: 1.5rem;\n}\n.rarui-chip_textOverflow_true__1rk47pp5 {\n min-width: auto;\n width: 100%;\n}\n.rarui-chip_content__1rk47pp6 {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--rarui-spacing-3xs);\n}\n.rarui-chip_content_textOverflow_true__1rk47pp7 {\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n display: block;\n overflow: hidden;\n}\n.rarui-chip_close__1rk47pp8 {\n transition: all 150ms ease;\n color: var(--rarui-colors-content-secondary);\n border-radius: var(--rarui-shape-border-radius-pill);\n}\n.rarui-chip_close__1rk47pp8:focus-within {\n outline: none;\n box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-chip_close__1rk47pp8:hover {\n color: var(--rarui-colors-content-primary);\n}\n.rarui-chip_close__1rk47pp8[aria-disabled='true'] {\n color: var(--rarui-colors-content-disabled);\n box-shadow: none;\n}\n.rarui-chip_overlay__1rk47pp9 {\n position: absolute;\n inset: 0;\n pointer-events: none;\n}\n.rarui-chip__1rk47pp0 .rarui-chip_size_medium__1rk47pp3:hover .rarui-chip_overlay__1rk47pp9 {\n border-color: var(--rarui-colors-surface-hover);\n}\n.rarui-chip__1rk47pp0 .rarui-chip_size_medium__1rk47pp3:active .rarui-chip_overlay__1rk47pp9 {\n opacity: 1;\n background-color: var(--rarui-colors-surface-press);\n border-color: var(--rarui-colors-surface-press);\n}\n.rarui-chip__1rk47pp0 .rarui-chip_size_medium__1rk47pp3:disabled .rarui-chip_overlay__1rk47pp9 {\n opacity: 0;\n}\n@media screen and (min-width: 0px) {\n .rarui-chip_textTransform-xs__1rk47ppe {\n text-transform: var(--textTransform-xs__1rk47ppa);\n }\n .rarui-chip_padding-medium-xs__1rk47ppi {\n padding: 0 var(--rarui-spacing-xs);\n }\n .rarui-chip_padding-small-xs__1rk47ppm {\n padding: 0 var(--rarui-spacing-4xs);\n }\n}\n@media screen and (min-width: 768px) {\n .rarui-chip_textTransform-md__1rk47ppf {\n text-transform: var(--textTransform-md__1rk47ppb);\n }\n .rarui-chip_padding-medium-md__1rk47ppj {\n padding: 0 var(--rarui-spacing-xs);\n }\n .rarui-chip_padding-small-md__1rk47ppn {\n padding: 0 var(--rarui-spacing-4xs);\n }\n}\n@media screen and (min-width: 1200px) {\n .rarui-chip_textTransform-lg__1rk47ppg {\n text-transform: var(--textTransform-lg__1rk47ppc);\n }\n .rarui-chip_padding-medium-lg__1rk47ppk {\n padding: 0 var(--rarui-spacing-xs);\n }\n .rarui-chip_padding-small-lg__1rk47ppo {\n padding: 0 var(--rarui-spacing-4xs);\n }\n}\n@media screen and (min-width: 1400px) {\n .rarui-chip_textTransform-xl__1rk47pph {\n text-transform: var(--textTransform-xl__1rk47ppd);\n }\n .rarui-chip_padding-medium-xl__1rk47ppl {\n padding: 0 var(--rarui-spacing-xs);\n }\n .rarui-chip_padding-small-xl__1rk47ppp {\n padding: 0 var(--rarui-spacing-4xs);\n }\n}")}
|
|
451
|
-
`,i([lr({type:String})],Xa.prototype,"padding",void 0),i([lr({type:String})],Xa.prototype,"size",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"closeable",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"pill",void 0),i([lr({type:String,attribute:"text-transform"})],Xa.prototype,"textTransform",void 0),i([lr({type:Boolean,attribute:"text-overflow"})],Xa.prototype,"textOverflow",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"selected",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"disabled",void 0),i([lr({type:String})],Xa.prototype,"type",void 0),i([lr({type:String})],Xa.prototype,"name",void 0),i([lr({type:String})],Xa.prototype,"value",void 0),i([lr({type:String})],Xa.prototype,"form",void 0),i([lr({type:String,reflect:!0,attribute:"aria-pressed"})],Xa.prototype,"ariaPressed",void 0),Xa=i([dr("rarui-chip")],Xa);var Ya=".rarui-dropdown__1b7gjg50 {\n width: fit-content;\n display: flex;\n flex-direction: column;\n border-style: solid;\n box-sizing: border-box;\n gap: var(--rarui-spacing-3xs);\n z-index: var(--rarui-zIndex-800);\n border-radius: var(--rarui-shape-border-radius-2xs);\n padding: var(--rarui-spacing-3xs);\n box-shadow: var(--rarui-elevation-bottom-2);\n border-width: var(--rarui-shape-border-width-1);\n border-color: var(--rarui-colors-border-subdued);\n background-color: var(--rarui-colors-surface-primary);\n}\n.rarui-dropdown_padding_base__1b7gjg51 {\n padding: var(--rarui-spacing-3xs);\n}\n.rarui-dropdown_padding_none__1b7gjg52 {\n padding: 0;\n}\n.rarui-dropdown_item__1b7gjg53 {\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n background-color: transparent;\n border: none;\n width: 100%;\n box-sizing: border-box;\n transition: all 150ms ease;\n border-radius: var(--rarui-shape-border-radius-2xs);\n gap: var(--rarui-spacing-3xs);\n padding: var(--rarui-spacing-3xs);\n color: var(--rarui-colors-content-primary);\n font-weight: var(--rarui-fontWeight-medium);\n font-size: var(--rarui-fontSize-button-s);\n font-family: var(--rarui-fontFamily-button);\n}\n.rarui-dropdown_item__1b7gjg53:focus-within {\n outline: none;\n box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-dropdown_item__1b7gjg53:hover {\n background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-dropdown_item__1b7gjg53:active {\n background-color: var(--rarui-colors-surface-press);\n}\n.rarui-dropdown_item__1b7gjg53:disabled {\n color: var(--rarui-colors-content-disabled);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54 {\n background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54:hover {\n background-color: var(--rarui-colors-surface-brand-subdued);\n}\n@media screen and (min-width: 0px) {\n .rarui-dropdown_width-xs__1b7gjg59 {\n width: var(--width-xs__1b7gjg55);\n }\n .rarui-dropdown_maxWidth-xs__1b7gjg5h {\n max-width: var(--maxWidth-xs__1b7gjg5d);\n }\n .rarui-dropdown_zIndex-100-xs__1b7gjg5l {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-xs__1b7gjg5p {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-xs__1b7gjg5t {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-xs__1b7gjg5x {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-xs__1b7gjg511 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-xs__1b7gjg515 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-xs__1b7gjg519 {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-xs__1b7gjg51d {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-xs__1b7gjg51h {\n z-index: var(--rarui-zIndex-900);\n }\n}\n@media screen and (min-width: 768px) {\n .rarui-dropdown_width-md__1b7gjg5a {\n width: var(--width-md__1b7gjg56);\n }\n .rarui-dropdown_maxWidth-md__1b7gjg5i {\n max-width: var(--maxWidth-md__1b7gjg5e);\n }\n .rarui-dropdown_zIndex-100-md__1b7gjg5m {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-md__1b7gjg5q {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-md__1b7gjg5u {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-md__1b7gjg5y {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-md__1b7gjg512 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-md__1b7gjg516 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-md__1b7gjg51a {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-md__1b7gjg51e {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-md__1b7gjg51i {\n z-index: var(--rarui-zIndex-900);\n }\n}\n@media screen and (min-width: 1200px) {\n .rarui-dropdown_width-lg__1b7gjg5b {\n width: var(--width-lg__1b7gjg57);\n }\n .rarui-dropdown_maxWidth-lg__1b7gjg5j {\n max-width: var(--maxWidth-lg__1b7gjg5f);\n }\n .rarui-dropdown_zIndex-100-lg__1b7gjg5n {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-lg__1b7gjg5r {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-lg__1b7gjg5v {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-lg__1b7gjg5z {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-lg__1b7gjg513 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-lg__1b7gjg517 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-lg__1b7gjg51b {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-lg__1b7gjg51f {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-lg__1b7gjg51j {\n z-index: var(--rarui-zIndex-900);\n }\n}\n@media screen and (min-width: 1400px) {\n .rarui-dropdown_width-xl__1b7gjg5c {\n width: var(--width-xl__1b7gjg58);\n }\n .rarui-dropdown_maxWidth-xl__1b7gjg5k {\n max-width: var(--maxWidth-xl__1b7gjg5g);\n }\n .rarui-dropdown_zIndex-100-xl__1b7gjg5o {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-xl__1b7gjg5s {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-xl__1b7gjg5w {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-xl__1b7gjg510 {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-xl__1b7gjg514 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-xl__1b7gjg518 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-xl__1b7gjg51c {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-xl__1b7gjg51g {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-xl__1b7gjg51k {\n z-index: var(--rarui-zIndex-900);\n }\n}";let Ka=class extends(zr(yr(tr))){constructor(){super(...arguments),this.offset=10,this.position="bottom-start",this.strategy="fixed",this.enabledClick=!0,this.enabledDismiss=!0,this.open=this.visible??!1,this._hasVisibleAttribute=!1,this.updatePositionDebounceId=null,this.handleClickOutside=r=>{if(!this.enabledDismiss||!this.open)return;const i=r.composedPath();i.includes(this)||i.includes(this.floating)||this.closeDropdown("click-outside")},this.handleKeyDown=r=>{"Escape"===r.key&&this.open&&this.enabledDismiss&&(r.preventDefault(),r.stopPropagation(),this.closeDropdown("escape-key"))},this.handleClick=()=>{if(this.enabledClick){const r=!this.open;if(this._hasVisibleAttribute){const i=r?"click-open":"click-close";this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:r,reason:i},bubbles:!0,composed:!0}))}else this.open=r}},this.handleReferenceKeydown=r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),this.handleClick())}}set visible(r){const i=this._visible;this._visible=r,this.requestUpdate("visible",i),void 0!==r&&(this.open=r)}get visible(){return this._visible}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside,!0),document.addEventListener("keydown",this.handleKeyDown,!0),this._hasVisibleAttribute=this.hasAttribute("visible")}attributeChangedCallback(r,i,o){super.attributeChangedCallback(r,i,o),"visible"===r&&(this._hasVisibleAttribute=null!==o)}disconnectedCallback(){super.disconnectedCallback(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),document.removeEventListener("click",this.handleClickOutside,!0),document.removeEventListener("keydown",this.handleKeyDown,!0)}updated(r){r.has("open")&&(this._hasVisibleAttribute||this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:this.open,reason:"programmatic"},bubbles:!0,composed:!0})),this.open&&this.scheduleUpdatePosition()),r.has("visible")&&this._hasVisibleAttribute&&void 0!==this._visible&&(this.open=this._visible)}scheduleUpdatePosition(){this.updatePositionDebounceId&&cancelAnimationFrame(this.updatePositionDebounceId),this.updatePositionDebounceId=requestAnimationFrame((()=>{this.updatePosition()}))}closeDropdown(r="close"){this._hasVisibleAttribute?this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:!1,reason:r},bubbles:!0,composed:!0})):this.open=!1}async updatePosition(){await this.updateComplete,this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement&&(this.cleanupAutoUpdate?.(),this.cleanupAutoUpdate=ja(this.reference,this.floating,(()=>this.computePosition()),{animationFrame:!0}),await this.computePosition())}getMiddleware(){return[La(this.offset),Ha(),this.enabledFlip&&$a({crossAxis:this?.position?.includes("-"),fallbackAxisSideDirection:"end",padding:5}),this.matchReferenceWidth&&Ia({apply({rects:r,elements:i}){Object.assign(i.floating.style,{width:`${r.reference.width}px`})}})].filter(Boolean)}async computePosition(){if(!(this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement))return;const r=this.getMiddleware(),{x:i,y:o}=await Ea(this.reference,this.floating,{placement:this.position,middleware:r,strategy:this.strategy});Object.assign(this.floating.style,{position:this.strategy,zIndex:"99999",left:`${i}px`,top:`${o}px`})}render(){const{className:r,style:i}=Yi.sprinkle(this.sprinkleAttrs);return F`
|
|
451
|
+
`,i([lr({type:String})],Xa.prototype,"padding",void 0),i([lr({type:String})],Xa.prototype,"size",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"closeable",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"pill",void 0),i([lr({type:String,attribute:"text-transform"})],Xa.prototype,"textTransform",void 0),i([lr({type:Boolean,attribute:"text-overflow"})],Xa.prototype,"textOverflow",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"selected",void 0),i([lr({type:Boolean,converter:r=>"false"!==r})],Xa.prototype,"disabled",void 0),i([lr({type:String})],Xa.prototype,"type",void 0),i([lr({type:String})],Xa.prototype,"name",void 0),i([lr({type:String})],Xa.prototype,"value",void 0),i([lr({type:String})],Xa.prototype,"form",void 0),i([lr({type:String,reflect:!0,attribute:"aria-pressed"})],Xa.prototype,"ariaPressed",void 0),Xa=i([dr("rarui-chip")],Xa);var Ya=".rarui-dropdown__1b7gjg50 {\n width: fit-content;\n display: flex;\n flex-direction: column;\n border-style: solid;\n box-sizing: border-box;\n gap: var(--rarui-spacing-3xs);\n z-index: var(--rarui-zIndex-800);\n border-radius: var(--rarui-shape-border-radius-2xs);\n padding: var(--rarui-spacing-3xs);\n box-shadow: var(--rarui-elevation-bottom-2);\n border-width: var(--rarui-shape-border-width-1);\n border-color: var(--rarui-colors-border-subdued);\n background-color: var(--rarui-colors-surface-primary);\n}\n.rarui-dropdown_padding_base__1b7gjg51 {\n padding: var(--rarui-spacing-3xs);\n}\n.rarui-dropdown_padding_none__1b7gjg52 {\n padding: 0;\n}\n.rarui-dropdown_item__1b7gjg53 {\n display: flex;\n justify-content: space-between;\n cursor: pointer;\n background-color: transparent;\n border: none;\n width: 100%;\n box-sizing: border-box;\n transition: all 150ms ease;\n border-radius: var(--rarui-shape-border-radius-2xs);\n gap: var(--rarui-spacing-3xs);\n padding: var(--rarui-spacing-3xs);\n color: var(--rarui-colors-content-primary);\n font-weight: var(--rarui-fontWeight-medium);\n font-size: var(--rarui-fontSize-button-s);\n font-family: var(--rarui-fontFamily-button);\n text-decoration: none;\n}\n.rarui-dropdown_item__1b7gjg53:focus-within {\n outline: none;\n box-shadow: var(--rarui-elevation-focus-ring);\n}\n.rarui-dropdown_item__1b7gjg53:hover {\n background-color: var(--rarui-colors-surface-hover);\n}\n.rarui-dropdown_item__1b7gjg53:active {\n background-color: var(--rarui-colors-surface-press);\n}\n.rarui-dropdown_item__1b7gjg53:disabled {\n color: var(--rarui-colors-content-disabled);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54 {\n background-color: var(--rarui-colors-surface-brand-subdued);\n}\n.rarui-dropdown_item_selected_true__1b7gjg54:hover {\n background-color: var(--rarui-colors-surface-brand-subdued);\n}\n@media screen and (min-width: 0px) {\n .rarui-dropdown_width-xs__1b7gjg59 {\n width: var(--width-xs__1b7gjg55);\n }\n .rarui-dropdown_maxWidth-xs__1b7gjg5h {\n max-width: var(--maxWidth-xs__1b7gjg5d);\n }\n .rarui-dropdown_zIndex-100-xs__1b7gjg5l {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-xs__1b7gjg5p {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-xs__1b7gjg5t {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-xs__1b7gjg5x {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-xs__1b7gjg511 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-xs__1b7gjg515 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-xs__1b7gjg519 {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-xs__1b7gjg51d {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-xs__1b7gjg51h {\n z-index: var(--rarui-zIndex-900);\n }\n}\n@media screen and (min-width: 768px) {\n .rarui-dropdown_width-md__1b7gjg5a {\n width: var(--width-md__1b7gjg56);\n }\n .rarui-dropdown_maxWidth-md__1b7gjg5i {\n max-width: var(--maxWidth-md__1b7gjg5e);\n }\n .rarui-dropdown_zIndex-100-md__1b7gjg5m {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-md__1b7gjg5q {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-md__1b7gjg5u {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-md__1b7gjg5y {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-md__1b7gjg512 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-md__1b7gjg516 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-md__1b7gjg51a {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-md__1b7gjg51e {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-md__1b7gjg51i {\n z-index: var(--rarui-zIndex-900);\n }\n}\n@media screen and (min-width: 1200px) {\n .rarui-dropdown_width-lg__1b7gjg5b {\n width: var(--width-lg__1b7gjg57);\n }\n .rarui-dropdown_maxWidth-lg__1b7gjg5j {\n max-width: var(--maxWidth-lg__1b7gjg5f);\n }\n .rarui-dropdown_zIndex-100-lg__1b7gjg5n {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-lg__1b7gjg5r {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-lg__1b7gjg5v {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-lg__1b7gjg5z {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-lg__1b7gjg513 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-lg__1b7gjg517 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-lg__1b7gjg51b {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-lg__1b7gjg51f {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-lg__1b7gjg51j {\n z-index: var(--rarui-zIndex-900);\n }\n}\n@media screen and (min-width: 1400px) {\n .rarui-dropdown_width-xl__1b7gjg5c {\n width: var(--width-xl__1b7gjg58);\n }\n .rarui-dropdown_maxWidth-xl__1b7gjg5k {\n max-width: var(--maxWidth-xl__1b7gjg5g);\n }\n .rarui-dropdown_zIndex-100-xl__1b7gjg5o {\n z-index: var(--rarui-zIndex-100);\n }\n .rarui-dropdown_zIndex-200-xl__1b7gjg5s {\n z-index: var(--rarui-zIndex-200);\n }\n .rarui-dropdown_zIndex-300-xl__1b7gjg5w {\n z-index: var(--rarui-zIndex-300);\n }\n .rarui-dropdown_zIndex-400-xl__1b7gjg510 {\n z-index: var(--rarui-zIndex-400);\n }\n .rarui-dropdown_zIndex-500-xl__1b7gjg514 {\n z-index: var(--rarui-zIndex-500);\n }\n .rarui-dropdown_zIndex-600-xl__1b7gjg518 {\n z-index: var(--rarui-zIndex-600);\n }\n .rarui-dropdown_zIndex-700-xl__1b7gjg51c {\n z-index: var(--rarui-zIndex-700);\n }\n .rarui-dropdown_zIndex-800-xl__1b7gjg51g {\n z-index: var(--rarui-zIndex-800);\n }\n .rarui-dropdown_zIndex-900-xl__1b7gjg51k {\n z-index: var(--rarui-zIndex-900);\n }\n}";let Ka=class extends(zr(yr(tr))){constructor(){super(...arguments),this.offset=10,this.position="bottom-start",this.strategy="fixed",this.enabledClick=!0,this.enabledDismiss=!0,this.open=this.visible??!1,this._hasVisibleAttribute=!1,this.updatePositionDebounceId=null,this.handleClickOutside=r=>{if(!this.enabledDismiss||!this.open)return;const i=r.composedPath();i.includes(this)||i.includes(this.floating)||this.closeDropdown("click-outside")},this.handleKeyDown=r=>{"Escape"===r.key&&this.open&&this.enabledDismiss&&(r.preventDefault(),r.stopPropagation(),this.closeDropdown("escape-key"))},this.handleClick=()=>{if(this.enabledClick){const r=!this.open;if(this._hasVisibleAttribute){const i=r?"click-open":"click-close";this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:r,reason:i},bubbles:!0,composed:!0}))}else this.open=r}},this.handleReferenceKeydown=r=>{"Enter"!==r.key&&" "!==r.key||(r.preventDefault(),this.handleClick())}}set visible(r){const i=this._visible;this._visible=r,this.requestUpdate("visible",i),this._hasVisibleAttribute=void 0!==r,void 0!==r&&(this.open=r)}get visible(){return this._visible}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.handleClickOutside,!0),document.addEventListener("keydown",this.handleKeyDown,!0),this.updateComplete.then((()=>{this._hasVisibleAttribute=void 0!==this._visible}))}attributeChangedCallback(r,i,o){super.attributeChangedCallback(r,i,o)}disconnectedCallback(){super.disconnectedCallback(),this.cleanupAutoUpdate&&this.cleanupAutoUpdate(),document.removeEventListener("click",this.handleClickOutside,!0),document.removeEventListener("keydown",this.handleKeyDown,!0)}updated(r){r.has("open")&&(this._hasVisibleAttribute||this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:this.open,reason:"programmatic"},bubbles:!0,composed:!0})),this.open&&this.scheduleUpdatePosition()),r.has("visible")&&this._hasVisibleAttribute&&void 0!==this._visible&&(this.open=this._visible)}scheduleUpdatePosition(){this.updatePositionDebounceId&&cancelAnimationFrame(this.updatePositionDebounceId),this.updatePositionDebounceId=requestAnimationFrame((()=>{this.updatePosition()}))}closeDropdown(r="close"){this._hasVisibleAttribute?this.dispatchEvent(new CustomEvent("dropdown-visibility-change",{detail:{visible:!1,reason:r},bubbles:!0,composed:!0})):this.open=!1}async updatePosition(){await this.updateComplete,this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement&&(this.cleanupAutoUpdate?.(),this.cleanupAutoUpdate=ja(this.reference,this.floating,(()=>this.computePosition()),{animationFrame:!0}),await this.computePosition())}getMiddleware(){return[La(this.offset),Ha(),this.enabledFlip&&$a({crossAxis:this?.position?.includes("-"),fallbackAxisSideDirection:"end",padding:5}),this.matchReferenceWidth&&Ia({apply({rects:r,elements:i}){Object.assign(i.floating.style,{width:`${r.reference.width}px`})}})].filter(Boolean)}async computePosition(){if(!(this.reference instanceof HTMLElement&&this.floating instanceof HTMLElement))return;const r=this.getMiddleware(),{x:i,y:o}=await Ea(this.reference,this.floating,{placement:this.position,middleware:r,strategy:this.strategy});Object.assign(this.floating.style,{position:this.strategy,zIndex:"99999",left:`${i}px`,top:`${o}px`})}render(){const{className:r,style:i}=Yi.sprinkle(this.sprinkleAttrs);return console.log("this._hasVisibleAttribute",this._hasVisibleAttribute),F`
|
|
452
452
|
<div
|
|
453
453
|
id="reference"
|
|
454
454
|
role="button"
|
|
@@ -569,7 +569,8 @@ const po=Symbol.for(""),mo=r=>{if(r?.r===po)return r?._$litStatic$},ko=r=>({_$li
|
|
|
569
569
|
`}_focusInput(){this.disabled||this.shadowRoot?.querySelector("input")?.focus()}_onInput(r){const i=r.target;this.value=i.value,this.dispatchEvent(new CustomEvent("rarui-input-change",{detail:{value:i.value,originalEvent:r},bubbles:!0,composed:!0}))}focus(){this.shadowRoot?.querySelector("input")?.focus()}blur(){this.shadowRoot?.querySelector("input")?.blur()}_handleLabelClick(r){const i=r;i.detail?.targetId===this.id&&this.focus()}formResetCallback(){this.value="",this._internals.setFormValue("")}};rn.shadowRootOptions={...tr.shadowRootOptions,delegatesFocus:!0},rn.formAssociated=!0,rn.styles=_`
|
|
570
570
|
${t(Qa)}
|
|
571
571
|
|
|
572
|
-
slot[name="leading-start"],
|
|
572
|
+
slot[name="leading-start"],
|
|
573
|
+
slot[name="leading-end"] {
|
|
573
574
|
display: flex;
|
|
574
575
|
align-items: center;
|
|
575
576
|
justify-content: center;
|
|
@@ -792,6 +793,7 @@ let en=class{constructor(r,i,o,a){if(this.subscribe=!1,this.provided=!1,this.val
|
|
|
792
793
|
gap="$3xs"
|
|
793
794
|
overflow="hidden"
|
|
794
795
|
padding="$4xs"
|
|
796
|
+
width="1px"
|
|
795
797
|
>
|
|
796
798
|
${this.selectedOptions.map((r=>this.multiple?F`
|
|
797
799
|
<rarui-chip
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rarui/components",
|
|
3
|
-
"version": "1.28.
|
|
3
|
+
"version": "1.28.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"dependencies": {
|
|
33
33
|
"@lit/context": "^1.1.6",
|
|
34
34
|
"@rarui/icons": "^1.2.0",
|
|
35
|
-
"@rarui/styles": "^3.2.
|
|
35
|
+
"@rarui/styles": "^3.2.1",
|
|
36
36
|
"@rarui/typings": "^2.2.0"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|