npm - @six-group/ui-library - Versions diffs - 4.0.3 → 4.1.0 - Mend

@six-group/ui-library 4.0.3 → 4.1.0

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.

Files changed (1092) hide show

package/dist/ui-library/p-0440335d.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as o,h as i,H as r,g as s}from"./p-af15381b.js";import{P as e}from"./p-7f856f00.js";const a=':host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{--max-width:20rem;--hide-delay:0s;--hide-duration:0.125s;--hide-timing-function:ease;--show-delay:0.125s;--show-duration:0.125s;--show-timing-function:ease;display:contents}.tooltip-positioner{position:fixed;z-index:var(--six-z-index-tooltip);pointer-events:none}.tooltip{max-width:var(--max-width);border-radius:var(--six-border-radius-medium);background-color:var(--six-tooltip-background-color);font-family:var(--six-font-family);font-size:var(--six-tooltip-font-size);font-weight:var(--six-tooltip-font-weight);line-height:var(--six-tooltip-line-height);color:var(--six-tooltip-color);opacity:0;padding:var(--six-spacing-xxx-small) var(--six-spacing-x-small);transform:scale(0.8);transform-origin:bottom;transition-property:opacity, transform;transition-delay:var(--hide-delay);transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.tooltip::after{content:"";position:absolute;width:0;height:0}.tooltip-positioner[data-popper-placement^=top] .tooltip{transform-origin:bottom}.tooltip-positioner[data-popper-placement^=bottom] .tooltip{transform-origin:top}.tooltip-positioner[data-popper-placement^=left] .tooltip{transform-origin:right}.tooltip-positioner[data-popper-placement^=right] .tooltip{transform-origin:left}.tooltip-positioner.popover-visible .tooltip{opacity:1;transform:none;transition-delay:var(--show-delay);transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after{bottom:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-bottom:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=top] .tooltip::after{top:100%;left:calc(50% - var(--six-tooltip-arrow-size));border-top:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-left:var(--six-tooltip-arrow-size) solid transparent;border-right:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=top-start] .tooltip::after{left:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=top-end] .tooltip::after{right:var(--six-tooltip-arrow-start-end-offset);left:auto}.tooltip-positioner[data-popper-placement^=left] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));left:100%;border-left:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=left-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=left-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement^=right] .tooltip::after{top:calc(50% - var(--six-tooltip-arrow-size));right:100%;border-right:var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);border-top:var(--six-tooltip-arrow-size) solid transparent;border-bottom:var(--six-tooltip-arrow-size) solid transparent}.tooltip-positioner[data-popper-placement=right-start] .tooltip::after{top:var(--six-tooltip-arrow-start-end-offset)}.tooltip-positioner[data-popper-placement=right-end] .tooltip::after{top:auto;bottom:var(--six-tooltip-arrow-start-end-offset)}';let n=0;const p=class{constructor(i){t(this,i);this.sixShow=o(this,"six-tooltip-show",7);this.sixAfterShow=o(this,"six-tooltip-after-show",7);this.sixHide=o(this,"six-tooltip-hide",7);this.sixAfterHide=o(this,"six-tooltip-after-hide",7);this.componentId=`tooltip-${++n}`;this.isVisible=false;this.handleBlur=()=>{if(this.hasTrigger("focus")){this.hide()}};this.handleClick=()=>{if(this.hasTrigger("click")){this.open?this.hide():this.show()}};this.handleFocus=()=>{if(this.hasTrigger("focus")){this.show()}};this.handleKeyDown=t=>{if(this.open&&t.key==="Escape"){t.stopPropagation();this.hide()}};this.handleMouseOver=()=>{if(this.hasTrigger("hover")){this.show()}};this.handleMouseOut=()=>{if(this.hasTrigger("hover")){this.hide()}};this.handleSlotChange=()=>{const t=this.target;const o=this.getTarget();if(o!==t){if(t!=null){t.removeAttribute("aria-describedby")}o.setAttribute("aria-describedby",this.componentId)}};this.content="";this.placement="top";this.disabled=false;this.distance=10;this.open=false;this.skidding=0;this.trigger="hover focus"}handleOpenChange(){this.open?this.show():this.hide()}componentDidLoad(){if(this.tooltipPositioner==null)return;this.target=this.getTarget();this.popover=new e(this.target,this.tooltipPositioner,{strategy:"fixed"});this.syncOptions();this.host.addEventListener("blur",this.handleBlur,true);this.host.addEventListener("click",this.handleClick,true);this.host.addEventListener("focus",this.handleFocus,true);this.tooltipPositioner.hidden=!this.open;if(this.open){this.show()}}componentDidUpdate(){this.syncOptions()}disconnectedCallback(){if(this.popover!=null){this.popover.destroy()}this.host.removeEventListener("blur",this.handleBlur,true);this.host.removeEventListener("click",this.handleClick,true);this.host.removeEventListener("focus",this.handleFocus,true)}async show(){var t;if(this.isVisible\|\|this.disabled){return}const o=this.sixShow.emit();if(o.defaultPrevented){this.open=false;return}this.isVisible=true;this.open=true;(t=this.popover)===null\|\|t===void 0?void 0:t.show()}async hide(){var t;if(!this.isVisible\|\|this.disabled){return}const o=this.sixHide.emit();if(o.defaultPrevented){this.open=true;return}this.isVisible=false;this.open=false;(t=this.popover)===null\|\|t===void 0?void 0:t.hide()}getTarget(){const t=[...this.host.children].find((t=>t.tagName.toLowerCase()!=="style"&&t.getAttribute("slot")!=="content"));if(t==null){throw new Error("Invalid tooltip target: no child element was found.")}return t}hasTrigger(t){const o=this.trigger.split(" ");return o.includes(t)}syncOptions(){if(this.popover==null)return;this.popover.setOptions({placement:this.placement,distance:this.distance,skidding:this.skidding,transitionElement:this.tooltip,onAfterHide:()=>this.sixAfterHide.emit(),onAfterShow:()=>this.sixAfterShow.emit()})}render(){return i(r,{onKeyDown:this.handleKeyDown,onMouseOver:this.handleMouseOver,onMouseOut:this.handleMouseOut},i("slot",{onSlotchange:this.handleSlotChange}),i("div",{ref:t=>this.tooltipPositioner=t,class:"tooltip-positioner"},i("div",{part:"base",ref:t=>this.tooltip=t,id:this.componentId,class:{tooltip:true,"tooltip--open":this.open},role:"tooltip","aria-hidden":this.open?"false":"true"},i("slot",{name:"content"},this.content))))}get host(){return s(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=a;export{p as six_tooltip};
2	+ //# sourceMappingURL=p-0440335d.entry.js.map

package/dist/ui-library/{p-dc4f41d8.entry.js.map → p-0440335d.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["sixTooltipCss","id","SixTooltip","this","componentId","isVisible","handleBlur","hasTrigger","hide","handleClick","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","handleOpenChange","componentDidLoad","tooltipPositioner","popover","Popover","strategy","syncOptions","host","addEventListener","hidden","componentDidUpdate","disconnectedCallback","destroy","removeEventListener","disabled","sixShow","emit","defaultPrevented","_a","sixHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","setOptions","placement","distance","skidding","transitionElement","tooltip","onAfterHide","sixAfterHide","onAfterShow","sixAfterShow","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","role","name","content"],"sources":["src/components/six-tooltip/six-tooltip.scss?tag=six-tooltip&encapsulation=shadow","src/components/six-tooltip/six-tooltip.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n display: contents;\n}\n\n.tooltip-positioner {\n position: fixed;\n z-index: var(--six-z-index-tooltip);\n pointer-events: none;\n}\n\n.tooltip {\n max-width: var(--max-width);\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-tooltip-background-color);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-tooltip-color);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-x-small);\n transform: scale(0.8);\n transform-origin: bottom;\n transition-property: opacity, transform;\n transition-delay: var(--hide-delay);\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n }\n}\n\n.tooltip-positioner {\n &[data-popper-placement^='top'] .tooltip {\n transform-origin: bottom;\n }\n\n &[data-popper-placement^='bottom'] .tooltip {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] .tooltip {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] .tooltip {\n transform-origin: left;\n }\n\n &.popover-visible .tooltip {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n}\n\n// Arrow + bottom\n.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {\n bottom: 100%;\n left: calc(50% - var(--six-tooltip-arrow-size));\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {\n left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {\n right: var(--six-tooltip-arrow-start-end-offset);\n left: auto;\n}\n\n// Arrow + top\n.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {\n top: 100%;\n left: calc(50% - var(--six-tooltip-arrow-size));\n border-top: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {\n left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {\n right: var(--six-tooltip-arrow-start-end-offset);\n left: auto;\n}\n\n// Arrow + left\n.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {\n top: calc(50% - var(--six-tooltip-arrow-size));\n left: 100%;\n border-left: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-top: var(--six-tooltip-arrow-size) solid transparent;\n border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {\n top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {\n top: auto;\n bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n\n// Arrow + right\n.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {\n top: calc(50% - var(--six-tooltip-arrow-size));\n right: 100%;\n border-right: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-top: var(--six-tooltip-arrow-size) solid transparent;\n border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {\n top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {\n top: auto;\n bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-tooltip',\n styleUrl: 'six-tooltip.scss',\n shadow: true,\n})\nexport class SixTooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover?: Popover;\n private tooltipPositioner?: HTMLElement;\n private target?: HTMLElement;\n private tooltip?: HTMLElement;\n\n @Element() host!: HTMLSixTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip, so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event({ eventName: 'six-tooltip-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event({ eventName: 'six-tooltip-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event({ eventName: 'six-tooltip-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event({ eventName: 'six-tooltip-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentDidLoad() {\n if (this.tooltipPositioner == null) return;\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner, { strategy: 'fixed' });\n this.syncOptions();\n\n this.host.addEventListener('blur', this.handleBlur, true);\n this.host.addEventListener('click', this.handleClick, true);\n this.host.addEventListener('focus', this.handleFocus, true);\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n if (this.popover != null) {\n this.popover.destroy();\n }\n\n this.host.removeEventListener('blur', this.handleBlur, true);\n this.host.removeEventListener('click', this.handleClick, true);\n this.host.removeEventListener('focus', this.handleFocus, true);\n }\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.disabled) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover?.show();\n }\n\n /* Shows the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible \|\| this.disabled) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover?.hide();\n }\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...this.host.children].find(\n (el) => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (target == null) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n const oldTarget = this.target;\n const newTarget = this.getTarget();\n\n if (newTarget !== oldTarget) {\n if (oldTarget != null) {\n oldTarget.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n if (this.popover == null) return;\n\n this.popover.setOptions({\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.sixAfterHide.emit(),\n onAfterShow: () => this.sixAfterShow.emit(),\n });\n }\n\n render() {\n return (\n <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n <slot onSlotchange={this.handleSlotChange} />\n <div ref={(el) => (this.tooltipPositioner = el)} class=\"tooltip-positioner\">\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n id={this.componentId}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\">{this.content}</slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAgB,sxHCItB,IAAIC,EAAK,E,MAmBIC,EAAU,M,uNACbC,KAAAC,YAAc,aAAaH,IAC3BE,KAAAE,UAAY,MAmJZF,KAAAG,WAAa,KACnB,GAAIH,KAAKI,WAAW,SAAU,CAC5BJ,KAAKK,M,GAIDL,KAAAM,YAAc,KACpB,GAAIN,KAAKI,WAAW,SAAU,CAC5BJ,KAAKO,KAAOP,KAAKK,OAASL,KAAKQ,M,GAI3BR,KAAAS,YAAc,KACpB,GAAIT,KAAKI,WAAW,SAAU,CAC5BJ,KAAKQ,M,GAIDR,KAAAU,cAAiBC,IAEvB,GAAIX,KAAKO,MAAQI,EAAMC,MAAQ,SAAU,CACvCD,EAAME,kBACNb,KAAKK,M,GAIDL,KAAAc,gBAAkB,KACxB,GAAId,KAAKI,WAAW,SAAU,CAC5BJ,KAAKQ,M,GAIDR,KAAAe,eAAiB,KACvB,GAAIf,KAAKI,WAAW,SAAU,CAC5BJ,KAAKK,M,GAIDL,KAAAgB,iBAAmB,KACzB,MAAMC,EAAYjB,KAAKkB,OACvB,MAAMC,EAAYnB,KAAKoB,YAEvB,GAAID,IAAcF,EAAW,CAC3B,GAAIA,GAAa,KAAM,CACrBA,EAAUI,gBAAgB,mB,CAE5BF,EAAUG,aAAa,mBAAoBtB,KAAKC,Y,gBAxLlC,G,eAkBD,M,cAGE,M,cAGA,G,UAG4B,M,cAG5B,E,aAOD,a,CAGlB,gBAAAsB,GACEvB,KAAKO,KAAOP,KAAKQ,OAASR,KAAKK,M,CAejC,gBAAAmB,GACE,GAAIxB,KAAKyB,mBAAqB,KAAM,OACpCzB,KAAKkB,OAASlB,KAAKoB,YACnBpB,KAAK0B,QAAU,IAAIC,EAAQ3B,KAAKkB,OAAQlB,KAAKyB,kBAAmB,CAAEG,SAAU,UAC5E5B,KAAK6B,cAEL7B,KAAK8B,KAAKC,iBAAiB,OAAQ/B,KAAKG,WAAY,MACpDH,KAAK8B,KAAKC,iBAAiB,QAAS/B,KAAKM,YAAa,MACtDN,KAAK8B,KAAKC,iBAAiB,QAAS/B,KAAKS,YAAa,MAGtDT,KAAKyB,kBAAkBO,QAAUhC,KAAKO,KACtC,GAAIP,KAAKO,KAAM,CACbP,KAAKQ,M,EAIT,kBAAAyB,GACEjC,KAAK6B,a,CAGP,oBAAAK,GACE,GAAIlC,KAAK0B,SAAW,KAAM,CACxB1B,KAAK0B,QAAQS,S,CAGfnC,KAAK8B,KAAKM,oBAAoB,OAAQpC,KAAKG,WAAY,MACvDH,KAAK8B,KAAKM,oBAAoB,QAASpC,KAAKM,YAAa,MACzDN,KAAK8B,KAAKM,oBAAoB,QAASpC,KAAKS,YAAa,K,CAK3D,UAAMD,G,MAEJ,GAAIR,KAAKE,WAAaF,KAAKqC,SAAU,CACnC,M,CAGF,MAAMC,EAAUtC,KAAKsC,QAAQC,OAC7B,GAAID,EAAQE,iBAAkB,CAC5BxC,KAAKO,KAAO,MACZ,M,CAGFP,KAAKE,UAAY,KACjBF,KAAKO,KAAO,MACZkC,EAAAzC,KAAK0B,WAAO,MAAAe,SAAA,SAAAA,EAAEjC,M,CAKhB,UAAMH,G,MAEJ,IAAKL,KAAKE,WAAaF,KAAKqC,SAAU,CACpC,M,CAGF,MAAMK,EAAU1C,KAAK0C,QAAQH,OAC7B,GAAIG,EAAQF,iBAAkB,CAC5BxC,KAAKO,KAAO,KACZ,M,CAGFP,KAAKE,UAAY,MACjBF,KAAKO,KAAO,OACZkC,EAAAzC,KAAK0B,WAAO,MAAAe,SAAA,SAAAA,EAAEpC,M,CAGR,SAAAe,GAEN,MAAMF,EAAS,IAAIlB,KAAK8B,KAAKa,UAAUC,MACpCC,GAAOA,EAAGC,QAAQC,gBAAkB,SAAWF,EAAGG,aAAa,UAAY,YAG9E,GAAI9B,GAAU,KAAM,CAClB,MAAM,IAAI+B,MAAM,sD,CAGlB,OAAO/B,C,CAqDD,UAAAd,CAAW8C,GACjB,MAAMC,EAAWnD,KAAKoD,QAAQC,MAAM,KACpC,OAAOF,EAASG,SAASJ,E,CAGnB,WAAArB,GACN,GAAI7B,KAAK0B,SAAW,KAAM,OAE1B1B,KAAK0B,QAAQ6B,WAAW,CACtBC,UAAWxD,KAAKwD,UAChBC,SAAUzD,KAAKyD,SACfC,SAAU1D,KAAK0D,SACfC,kBAAmB3D,KAAK4D,QACxBC,YAAa,IAAM7D,KAAK8D,aAAavB,OACrCwB,YAAa,IAAM/D,KAAKgE,aAAazB,Q,CAIzC,MAAA0B,GACE,OACEC,EAACC,EAAI,CAACC,UAAWpE,KAAKU,cAAe2D,YAAarE,KAAKc,gBAAiBwD,WAAYtE,KAAKe,gBACvFmD,EAAA,QAAMK,aAAcvE,KAAKgB,mBACzBkD,EAAA,OAAKM,IAAM3B,GAAQ7C,KAAKyB,kBAAoBoB,EAAK4B,MAAM,sBACrDP,EAAA,OACEQ,KAAK,OACLF,IAAM3B,GAAQ7C,KAAK4D,QAAUf,EAC7B/C,GAAIE,KAAKC,YACTwE,MAAO,CACLb,QAAS,KACT,gBAAiB5D,KAAKO,MAExBoE,KAAK,UAAS,cACD3E,KAAKO,KAAO,QAAU,QAEnC2D,EAAA,QAAMU,KAAK,WAAW5E,KAAK6E,W"}
1	+ {"version":3,"names":["sixTooltipCss","id","SixTooltip","this","componentId","isVisible","handleBlur","hasTrigger","hide","handleClick","open","show","handleFocus","handleKeyDown","event","key","stopPropagation","handleMouseOver","handleMouseOut","handleSlotChange","oldTarget","target","newTarget","getTarget","removeAttribute","setAttribute","handleOpenChange","componentDidLoad","tooltipPositioner","popover","Popover","strategy","syncOptions","host","addEventListener","hidden","componentDidUpdate","disconnectedCallback","destroy","removeEventListener","disabled","sixShow","emit","defaultPrevented","_a","sixHide","children","find","el","tagName","toLowerCase","getAttribute","Error","triggerType","triggers","trigger","split","includes","setOptions","placement","distance","skidding","transitionElement","tooltip","onAfterHide","sixAfterHide","onAfterShow","sixAfterShow","render","h","Host","onKeyDown","onMouseOver","onMouseOut","onSlotchange","ref","class","part","role","name","content"],"sources":["src/components/six-tooltip/six-tooltip.scss?tag=six-tooltip&encapsulation=shadow","src/components/six-tooltip/six-tooltip.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/*\n @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n /\n:host {\n --max-width: 20rem;\n --hide-delay: 0s;\n --hide-duration: 0.125s;\n --hide-timing-function: ease;\n --show-delay: 0.125s;\n --show-duration: 0.125s;\n --show-timing-function: ease;\n\n display: contents;\n}\n\n.tooltip-positioner {\n position: fixed;\n z-index: var(--six-z-index-tooltip);\n pointer-events: none;\n}\n\n.tooltip {\n max-width: var(--max-width);\n border-radius: var(--six-border-radius-medium);\n background-color: var(--six-tooltip-background-color);\n font-family: var(--six-font-family);\n font-size: var(--six-tooltip-font-size);\n font-weight: var(--six-tooltip-font-weight);\n line-height: var(--six-tooltip-line-height);\n color: var(--six-tooltip-color);\n opacity: 0;\n padding: var(--six-spacing-xxx-small) var(--six-spacing-x-small);\n transform: scale(0.8);\n transform-origin: bottom;\n transition-property: opacity, transform;\n transition-delay: var(--hide-delay);\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n\n &::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n }\n}\n\n.tooltip-positioner {\n &[data-popper-placement^='top'] .tooltip {\n transform-origin: bottom;\n }\n\n &[data-popper-placement^='bottom'] .tooltip {\n transform-origin: top;\n }\n\n &[data-popper-placement^='left'] .tooltip {\n transform-origin: right;\n }\n\n &[data-popper-placement^='right'] .tooltip {\n transform-origin: left;\n }\n\n &.popover-visible .tooltip {\n opacity: 1;\n transform: none;\n transition-delay: var(--show-delay);\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n }\n}\n\n// Arrow + bottom\n.tooltip-positioner[data-popper-placement^='bottom'] .tooltip::after {\n bottom: 100%;\n left: calc(50% - var(--six-tooltip-arrow-size));\n border-bottom: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='bottom-start'] .tooltip::after {\n left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='bottom-end'] .tooltip::after {\n right: var(--six-tooltip-arrow-start-end-offset);\n left: auto;\n}\n\n// Arrow + top\n.tooltip-positioner[data-popper-placement^='top'] .tooltip::after {\n top: 100%;\n left: calc(50% - var(--six-tooltip-arrow-size));\n border-top: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-left: var(--six-tooltip-arrow-size) solid transparent;\n border-right: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='top-start'] .tooltip::after {\n left: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='top-end'] .tooltip::after {\n right: var(--six-tooltip-arrow-start-end-offset);\n left: auto;\n}\n\n// Arrow + left\n.tooltip-positioner[data-popper-placement^='left'] .tooltip::after {\n top: calc(50% - var(--six-tooltip-arrow-size));\n left: 100%;\n border-left: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-top: var(--six-tooltip-arrow-size) solid transparent;\n border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='left-start'] .tooltip::after {\n top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='left-end'] .tooltip::after {\n top: auto;\n bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n\n// Arrow + right\n.tooltip-positioner[data-popper-placement^='right'] .tooltip::after {\n top: calc(50% - var(--six-tooltip-arrow-size));\n right: 100%;\n border-right: var(--six-tooltip-arrow-size) solid var(--six-tooltip-background-color);\n border-top: var(--six-tooltip-arrow-size) solid transparent;\n border-bottom: var(--six-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement='right-start'] .tooltip::after {\n top: var(--six-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement='right-end'] .tooltip::after {\n top: auto;\n bottom: var(--six-tooltip-arrow-start-end-offset);\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, Watch } from '@stencil/core';\nimport Popover from '../../utils/popover';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The tooltip's target element. Only the first element will be used as the target.\n * @slot content - The tooltip's content. Alternatively, you can use the content prop.\n \n @part base - The component's base wrapper.\n /\n\n@Component({\n tag: 'six-tooltip',\n styleUrl: 'six-tooltip.scss',\n shadow: true,\n})\nexport class SixTooltip {\n private componentId = `tooltip-${++id}`;\n private isVisible = false;\n private popover?: Popover;\n private tooltipPositioner?: HTMLElement;\n private target?: HTMLElement;\n private tooltip?: HTMLElement;\n\n @Element() host!: HTMLSixTooltipElement;\n\n /* The tooltip's content. Alternatively, you can use the content slot. /\n @Prop() content = '';\n\n /\n The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n * inside the viewport.\n /\n @Prop() placement:\n \| 'top'\n \| 'top-start'\n \| 'top-end'\n \| 'right'\n \| 'right-start'\n \| 'right-end'\n \| 'bottom'\n \| 'bottom-start'\n \| 'bottom-end'\n \| 'left'\n \| 'left-start'\n \| 'left-end' = 'top';\n\n /* Set to true to disable the tooltip, so it won't show when triggered. /\n @Prop() disabled = false;\n\n /* The distance in pixels from which to offset the tooltip away from its target. /\n @Prop() distance = 10;\n\n /* Indicates whether the tooltip is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* The distance in pixels from which to offset the tooltip along its target. /\n @Prop() skidding = 0;\n\n /\n Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n * programmatically.\n /\n @Prop() trigger = 'hover focus';\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the tooltip begins to show. Calling `event.preventDefault()` will prevent it from being shown. /\n @Event({ eventName: 'six-tooltip-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the tooltip has shown and all transitions are complete. /\n @Event({ eventName: 'six-tooltip-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the tooltip begins to hide. Calling `event.preventDefault()` will prevent it from being hidden. /\n @Event({ eventName: 'six-tooltip-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the tooltip has hidden and all transitions are complete. /\n @Event({ eventName: 'six-tooltip-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentDidLoad() {\n if (this.tooltipPositioner == null) return;\n this.target = this.getTarget();\n this.popover = new Popover(this.target, this.tooltipPositioner, { strategy: 'fixed' });\n this.syncOptions();\n\n this.host.addEventListener('blur', this.handleBlur, true);\n this.host.addEventListener('click', this.handleClick, true);\n this.host.addEventListener('focus', this.handleFocus, true);\n\n // Show on init if open\n this.tooltipPositioner.hidden = !this.open;\n if (this.open) {\n this.show();\n }\n }\n\n componentDidUpdate() {\n this.syncOptions();\n }\n\n disconnectedCallback() {\n if (this.popover != null) {\n this.popover.destroy();\n }\n\n this.host.removeEventListener('blur', this.handleBlur, true);\n this.host.removeEventListener('click', this.handleClick, true);\n this.host.removeEventListener('focus', this.handleFocus, true);\n }\n\n /* Shows the tooltip. /\n @Method()\n async show() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (this.isVisible \|\| this.disabled) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.isVisible = true;\n this.open = true;\n this.popover?.show();\n }\n\n /* Shows the tooltip. */\n @Method()\n async hide() {\n // Prevent subsequent calls to the method, whether manually or triggered by the `open` watcher\n if (!this.isVisible \|\| this.disabled) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.isVisible = false;\n this.open = false;\n this.popover?.hide();\n }\n\n private getTarget() {\n // Get the first child that isn't a <style> or content slot\n const target = [...this.host.children].find(\n (el) => el.tagName.toLowerCase() !== 'style' && el.getAttribute('slot') !== 'content'\n ) as HTMLElement;\n\n if (target == null) {\n throw new Error('Invalid tooltip target: no child element was found.');\n }\n\n return target;\n }\n\n private handleBlur = () => {\n if (this.hasTrigger('focus')) {\n this.hide();\n }\n };\n\n private handleClick = () => {\n if (this.hasTrigger('click')) {\n this.open ? this.hide() : this.show();\n }\n };\n\n private handleFocus = () => {\n if (this.hasTrigger('focus')) {\n this.show();\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n // Pressing escape when the target element has focus should dismiss the tooltip\n if (this.open && event.key === 'Escape') {\n event.stopPropagation();\n this.hide();\n }\n };\n\n private handleMouseOver = () => {\n if (this.hasTrigger('hover')) {\n this.show();\n }\n };\n\n private handleMouseOut = () => {\n if (this.hasTrigger('hover')) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n const oldTarget = this.target;\n const newTarget = this.getTarget();\n\n if (newTarget !== oldTarget) {\n if (oldTarget != null) {\n oldTarget.removeAttribute('aria-describedby');\n }\n newTarget.setAttribute('aria-describedby', this.componentId);\n }\n };\n\n private hasTrigger(triggerType: string) {\n const triggers = this.trigger.split(' ');\n return triggers.includes(triggerType);\n }\n\n private syncOptions() {\n if (this.popover == null) return;\n\n this.popover.setOptions({\n placement: this.placement,\n distance: this.distance,\n skidding: this.skidding,\n transitionElement: this.tooltip,\n onAfterHide: () => this.sixAfterHide.emit(),\n onAfterShow: () => this.sixAfterShow.emit(),\n });\n }\n\n render() {\n return (\n <Host onKeyDown={this.handleKeyDown} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>\n <slot onSlotchange={this.handleSlotChange} />\n <div ref={(el) => (this.tooltipPositioner = el)} class=\"tooltip-positioner\">\n <div\n part=\"base\"\n ref={(el) => (this.tooltip = el)}\n id={this.componentId}\n class={{\n tooltip: true,\n 'tooltip--open': this.open,\n }}\n role=\"tooltip\"\n aria-hidden={this.open ? 'false' : 'true'}\n >\n <slot name=\"content\">{this.content}</slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-04cc397c.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as o}from"./p-af15381b.js";const a=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";const s=class{constructor(o){r(this,o);this.type="primary";this.pill=false;this.pulse=false}render(){return o("span",{part:"base",class:{badge:true,"badge--primary":this.type==="primary","badge--secondary":this.type==="secondary","badge--success":this.type==="success","badge--warning":this.type==="warning","badge--danger":this.type==="danger","badge--action":this.type==="action","badge--info":this.type==="info","badge--pill":this.pill,"badge--pulse":this.pulse},role:"status"},o("slot",null))}};s.style=a;export{s as six_badge};
2	+ //# sourceMappingURL=p-04cc397c.entry.js.map

package/dist/ui-library/{p-a0f290d0.entry.js.map → p-04cc397c.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["sixBadgeCss","SixBadge","render","h","part","class","badge","this","type","pill","pulse","role"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-flex;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-x-small);\n font-weight: var(--six-font-weight-semibold);\n letter-spacing: var(--six-letter-spacing-normal);\n line-height: 1;\n border-radius: var(--six-border-radius-small);\n white-space: nowrap;\n padding: 3px 6px;\n user-select: none;\n cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n}\n\n.badge--success {\n background-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n background-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n background-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n}\n\n.badge--action {\n background-color: var(--six-color-action-500);\n color: var(--six-color-white);\n}\n\n.badge--primary {\n background-color: var(--six-color-clay-50);\n color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 var(--pulse-color);\n }\n 70% {\n box-shadow: 0 0 0 0.5rem transparent;\n }\n 100% {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The badge's content.\n \n @part base - The base wrapper\n /\n\n@Component({\n tag: 'six-badge',\n styleUrl: 'six-badge.scss',\n shadow: true,\n})\nexport class SixBadge {\n /* The badge's type. /\n @Prop() type: 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'action' = 'primary';\n\n /* Set to true to draw a pill-style badge with rounded edges. /\n @Prop() pill = false;\n\n /* Set to true to make the badge pulsate to draw attention. */\n @Prop() pulse = false;\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n badge: true,\n\n // Types\n 'badge--primary': this.type === 'primary',\n 'badge--secondary': this.type === 'secondary',\n 'badge--success': this.type === 'success',\n 'badge--warning': this.type === 'warning',\n 'badge--danger': this.type === 'danger',\n 'badge--action': this.type === 'action',\n 'badge--info': this.type === 'info',\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n }}\n role=\"status\"\n >\n <slot />\n </span>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,~~oqD~~,MCkBPC,EAAQ,M,mCAE4E,U,UAGhF,M,WAGC,K,CAEhB,MAAAC,GACE,OACEC,EAAA,QACEC,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,iBAAkBC,KAAKC,OAAS,UAChC,mBAAoBD,KAAKC,OAAS,YAClC,iBAAkBD,KAAKC,OAAS,UAChC,iBAAkBD,KAAKC,OAAS,UAChC,gBAAiBD,KAAKC,OAAS,SAC/B,gBAAiBD,KAAKC,OAAS,SAC/B,cAAeD,KAAKC,OAAS,OAC7B,cAAeD,KAAKE,KACpB,eAAgBF,KAAKG,OAEvBC,KAAK,UAELR,EAAA,a"}
1	+ {"version":3,"names":["sixBadgeCss","SixBadge","render","h","part","class","badge","this","type","pill","pulse","role"],"sources":["src/components/six-badge/six-badge.scss?tag=six-badge&encapsulation=shadow","src/components/six-badge/six-badge.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-flex;\n}\n\n.badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--six-font-family);\n font-size: var(--six-font-size-x-small);\n font-weight: var(--six-font-weight-semibold);\n letter-spacing: var(--six-letter-spacing-normal);\n line-height: 1;\n border-radius: var(--six-border-radius-small);\n white-space: nowrap;\n padding: 3px 6px;\n user-select: none;\n cursor: inherit;\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Type modifiers\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--info {\n background-color: var(--six-color-web-rock-900);\n color: var(--six-color-white);\n}\n\n.badge--success {\n background-color: var(--six-color-success-500);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--warning {\n background-color: var(--six-color-warning-700);\n color: var(--six-color-web-rock-900);\n}\n\n.badge--danger {\n background-color: var(--six-color-danger-800);\n color: var(--six-color-white);\n}\n\n.badge--action {\n background-color: var(--six-color-action-500);\n color: var(--six-color-white);\n}\n\n.badge--primary {\n background-color: var(--six-color-clay-50);\n color: var(--six-color-black);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pill modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pill {\n border-radius: var(--six-border-radius-pill);\n}\n\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Pulse modifier\n////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////\n\n.badge--pulse {\n animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--info {\n --pulse-color: var(--six-color-web-rock-900);\n}\n\n.badge--pulse.badge--success {\n --pulse-color: var(--six-color-success-500);\n}\n\n.badge--pulse.badge--warning {\n --pulse-color: var(--six-color-warning-700);\n}\n\n.badge--pulse.badge--danger {\n --pulse-color: var(--six-color-danger-800);\n}\n\n.badge--pulse.badge--action {\n --pulse-color: var(--six-color-action-500);\n}\n\n.badge--pulse.badge--primary {\n --pulse-color: var(--six-color-clay-50);\n}\n\n@keyframes pulse {\n 0% {\n box-shadow: 0 0 0 0 var(--pulse-color);\n }\n 70% {\n box-shadow: 0 0 0 0.5rem transparent;\n }\n 100% {\n box-shadow: 0 0 0 0 transparent;\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The badge's content.\n \n @part base - The base wrapper\n /\n\n@Component({\n tag: 'six-badge',\n styleUrl: 'six-badge.scss',\n shadow: true,\n})\nexport class SixBadge {\n /* The badge's type. /\n @Prop() type: 'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'action' = 'primary';\n\n /* Set to true to draw a pill-style badge with rounded edges. /\n @Prop() pill = false;\n\n /* Set to true to make the badge pulsate to draw attention. */\n @Prop() pulse = false;\n\n render() {\n return (\n <span\n part=\"base\"\n class={{\n badge: true,\n\n // Types\n 'badge--primary': this.type === 'primary',\n 'badge--secondary': this.type === 'secondary',\n 'badge--success': this.type === 'success',\n 'badge--warning': this.type === 'warning',\n 'badge--danger': this.type === 'danger',\n 'badge--action': this.type === 'action',\n 'badge--info': this.type === 'info',\n 'badge--pill': this.pill,\n 'badge--pulse': this.pulse,\n }}\n role=\"status\"\n >\n <slot />\n </span>\n );\n }\n}\n"],"mappings":"sCAAA,MAAMA,EAAc,uqD,MCkBPC,EAAQ,M,mCAE4E,U,UAGhF,M,WAGC,K,CAEhB,MAAAC,GACE,OACEC,EAAA,QACEC,KAAK,OACLC,MAAO,CACLC,MAAO,KAGP,iBAAkBC,KAAKC,OAAS,UAChC,mBAAoBD,KAAKC,OAAS,YAClC,iBAAkBD,KAAKC,OAAS,UAChC,iBAAkBD,KAAKC,OAAS,UAChC,gBAAiBD,KAAKC,OAAS,SAC/B,gBAAiBD,KAAKC,OAAS,SAC/B,cAAeD,KAAKC,OAAS,OAC7B,cAAeD,KAAKE,KACpB,eAAgBF,KAAKG,OAEvBC,KAAK,UAELR,EAAA,a"}

package/dist/ui-library/{p-5654e4c7.js → p-06ba4450.js} RENAMED Viewed

@@ -1,2 +1,2 @@
 const o=new WeakMap;function n(n){if(n==null)return;const e=["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","Home","End","PageDown","PageUp"];const s=o=>{if(e.includes(o.key)){n.classList.add("focus-visible")}};const i=()=>n.classList.remove("focus-visible");o.set(n,{is:s,isNot:i});n.addEventListener("keydown",s);n.addEventListener("keyup",s);n.addEventListener("mousedown",i);n.addEventListener("mousedown",i)}function e(n){if(n==null)return;const e=o.get(n);if(!e){return}const{is:s,isNot:i}=e;n.classList.remove("focus-visible");n.removeEventListener("keydown",s);n.removeEventListener("keyup",s);n.removeEventListener("mousedown",i);n.removeEventListener("mousedown",i)}const s={observe:n,unobserve:e};export{s as f};
-//# sourceMappingURL=p-5654e4c7.js.map
+//# sourceMappingURL=p-06ba4450.js.map

package/dist/ui-library/p-0cebf1d2.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ function n(n){const r=n!=null?n.assignedNodes({flatten:true}):[];let t="";[...r].map((n=>{if(n.nodeType===Node.TEXT_NODE){t+=n.textContent}}));return t}function r(n,r){if(r!=null&&r!==""){return n.querySelector(`[slot="${r}"]`)!==null}return Array.from(n.childNodes).some((n=>{var r;if(n.nodeType===n.TEXT_NODE&&((r=n.textContent)===null\|\|r===void 0?void 0:r.trim())!==""){return true}if(n.nodeType===n.ELEMENT_NODE){const r=n;if(!r.hasAttribute("slot")){return true}}return false}))}function t(n,r){if(n==null)return null;return n.querySelector(`[slot="${r}"]`)}export{n as a,t as g,r as h};
2	+ //# sourceMappingURL=p-0cebf1d2.js.map

package/dist/ui-library/p-0cebf1d2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["getTextContent","slot","nodes","assignedNodes","flatten","text","map","node","nodeType","Node","TEXT_NODE","textContent","hasSlot","el","name","querySelector","Array","from","childNodes","some","_a","trim","ELEMENT_NODE","hasAttribute","getSlot","element","slotName"],"sources":["src/utils/slot.ts"],"sourcesContent":["//\n// Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a\n// string. This is useful because we can't use slot.textContent as an alternative.\n//\nexport function getTextContent(slot?: HTMLSlotElement): string {\n const nodes = slot != null ? slot.assignedNodes({ flatten: true }) : [];\n let text = '';\n\n [...nodes].map((node) => {\n if (node.nodeType === Node.TEXT_NODE) {\n text += node.textContent;\n }\n });\n\n return text;\n}\n\n//\n// Determines whether an element has a slot. If name is specified, the function will look for a corresponding named\n// slot, otherwise it will look for a \"default\" slot (e.g. a non-empty text node or an element with no slot attribute).\n//\nexport function hasSlot(el: HTMLElement, name?: string): boolean {\n // Look for a named slot\n if (name != null && name !== '') {\n return el.querySelector(`[slot=\"${name}\"]`) !== null;\n }\n\n // Look for a default slot\n return Array.from(el.childNodes).some((node) => {\n if (node.nodeType === node.TEXT_NODE && node.textContent?.trim() !== '') {\n return true;\n }\n\n if (node.nodeType === node.ELEMENT_NODE) {\n const el = node as HTMLElement;\n if (!el.hasAttribute('slot')) {\n return true;\n }\n }\n\n return false;\n });\n}\n\nexport function getSlot(element: ParentNode | null | undefined, slotName: string): HTMLElement | null {\n if (element == null) return null;\n return element.querySelector(`[slot=\"${slotName}\"]`);\n}\n"],"mappings":"SAIgBA,EAAeC,GAC7B,MAAMC,EAAQD,GAAQ,KAAOA,EAAKE,cAAc,CAAEC,QAAS,OAAU,GACrE,IAAIC,EAAO,GAEX,IAAIH,GAAOI,KAAKC,IACd,GAAIA,EAAKC,WAAaC,KAAKC,UAAW,CACpCL,GAAQE,EAAKI,W,KAIjB,OAAON,CACT,C,SAMgBO,EAAQC,EAAiBC,GAEvC,GAAIA,GAAQ,MAAQA,IAAS,GAAI,CAC/B,OAAOD,EAAGE,cAAc,UAAUD,SAAc,I,CAIlD,OAAOE,MAAMC,KAAKJ,EAAGK,YAAYC,MAAMZ,I,MACrC,GAAIA,EAAKC,WAAaD,EAAKG,aAAaU,EAAAb,EAAKI,eAAW,MAAAS,SAAA,SAAAA,EAAEC,UAAW,GAAI,CACvE,OAAO,I,CAGT,GAAId,EAAKC,WAAaD,EAAKe,aAAc,CACvC,MAAMT,EAAKN,EACX,IAAKM,EAAGU,aAAa,QAAS,CAC5B,OAAO,I,EAIX,OAAO,KAAK,GAEhB,C,SAEgBC,EAAQC,EAAwCC,GAC9D,GAAID,GAAW,KAAM,OAAO,KAC5B,OAAOA,EAAQV,cAAc,UAAUW,MACzC,Q"}

package/dist/ui-library/p-0edd3091.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as i,c as t,h as s,g as e}from"./p-af15381b.js";import{I as r}from"./p-862d474e.js";import{D as n,b as o,a as h}from"./p-a1502802.js";import{E as a}from"./p-8bfb4bfc.js";import{h as c}from"./p-0cebf1d2.js";import{a as l,m as p}from"./p-f136a6b2.js";const u=()=>{const i=new Date;return{hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:true}};const m=12;const d=i=>i>m?i-m:i;const f=()=>{const i=new Date;const t=i.getHours();return{hours:d(t),minutes:i.getMinutes(),seconds:i.getSeconds(),milliseconds:i.getMilliseconds(),has24Hours:false,period:t>=m?"PM":"AM"}};const g=(i=true)=>i?u():f();const x=(i,t)=>{const s=i.split(":");const e=t.split(":");return s.length===e.length};const b=(i,t)=>{const s=i.split(":");const e=t.split(":");if(!x(i,t)){console.error(`Timestring did not match expected format.\nExpected format: ${t}\nReceived timestring: ${i}`)}const r={};s.forEach(((i,t)=>{const s=e[t];switch(s){case"HH":r.hours=Number(i);r.has24Hours=true;break;case"hh":r.hours=Number(i);r.has24Hours=false;break;case"mm":r.minutes=Number(i);break;case"ss":r.seconds=Number(i);break;case"ms":r.milliseconds=Number(i);break;case"aa":r.period=i.toUpperCase()==="PM"?"PM":"AM"}}));return r};const k=(i,t)=>{if(i==null){return""}const s=t.split(":");return s.map((t=>{switch(t){case"HH":case"hh":return String(i.hours).padStart(2,"0");case"mm":return String(i.minutes).padStart(2,"0");case"ss":return String(i.seconds).padStart(2,"0");case"ms":return String(i.milliseconds).padStart(3,"0");case"aa":return String(i.period)}})).join(":")};const v=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:block;font-family:var(--six-font-family)}.timepicker_clear{display:inline-flex;align-items:center;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;padding:0;transition:var(--six-transition-fast) color;cursor:pointer}.timepicker_clear:hover{color:var(--six-input-icon-color-hover)}.timepicker_clear:focus{outline:none}.timepicker_clear--right{right:0;position:absolute}.timepicker_clear--left{right:35px;position:absolute}.timepicker__container{position:relative}.timepicker__popup{display:flex;justify-content:center;min-width:min-content;min-height:145px;background-color:white;padding:0.5em 0.5em 1.5em;box-shadow:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);user-select:none;position:absolute;z-index:var(--six-z-index-dropdown);right:0;left:0}.timepicker__popup--is-up{bottom:100%}.timepicker__popup--is-inline{position:initial;box-shadow:none;border:1px solid var(--six-color-web-rock-400)}.timepicker__separator{display:flex;align-items:center}.timepicker__item--wide{padding-left:0.5rem;padding-right:0.5rem}.input--empty .timepicker_clear{visibility:hidden}.input--hide{display:none}.prefix{cursor:pointer}.prefix--right{right:0;display:inline-flex;position:absolute;font-size:inherit;color:var(--six-input-icon-color);border:none;background:none;margin-right:var(--six-input-spacing-medium);transition:var(--six-transition-fast) color}";const _=145;const y=class{constructor(s){i(this,s);this.sixChange=t(this,"six-timepicker-change",7);this.sixChangeDebounced=t(this,"six-timepicker-change-debounced",7);this.sixClear=t(this,"six-timepicker-clear",7);this.eventListeners=new a;this.handlePickerChange=(i,t)=>{i.stopPropagation();if(this.popupValue==null){return}this.popupValue[t]=i.detail;const s=k(this.popupValue,this.format);this.value=s;this.sixChange.emit({changedProperty:t,value:this.popupValue,valueAsString:s})};this.handleDocumentMouseDown=i=>{const t=i.composedPath();if(!t.includes(this.host)){this.closePopup();return}};this.handleClearClick=i=>{i.stopPropagation();this.value="";this.sixClear.emit();this.sixChange.emit({value:{},valueAsString:""})};this.format="HH:mm:ss";this.separator=":";this.value="";this.open=false;this.inline=false;this.readonly=false;this.disabled=false;this.placement=undefined;this.size="medium";this.required=false;this.placeholder=undefined;this.errorText="";this.errorTextCount=undefined;this.label="";this.invalid=false;this.name="";this.clearable=false;this.iconPosition="left";this.hoist=false;this.timeout=n;this.interval=o;this.defaultTime=undefined;this.debounce=n;this.isPopupContentUp=false;this.isDropDownContentUp=false;this.popupValue={}}async resizeHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}async scrollHandler(){this.calcIsPopupContentUp();this.moveOpenHoistedPopup()}valueChanged(){this.updateValue()}async setFocus(i){var t;(t=this.inputElement)===null\|\|t===void 0?void 0:t.setFocus(i)}connectedCallback(){this.eventListeners.forward("six-timepicker-change","change",this.host)}componentWillLoad(){this.updateValue();if(this.inline){this.open=true}if(this.open){this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}componentDidLoad(){if(this.inputElement==null)return;const i=this.inputElement;this.eventListeners.add(this.host,"six-timepicker-change",h((i=>this.sixChangeDebounced.emit(i.detail)),this.debounce));this.eventListeners.add(i,"six-input-input",h((t=>{t.stopPropagation();if(!x(i.value,this.format)){this.value=i.value;this.sixChange.emit({value:{},valueAsString:""});return}this.value=i.value;this.popupValue=b(i.value,this.format);this.sixChange.emit({value:this.popupValue,valueAsString:k(this.popupValue,this.format)})}),this.debounce))}componentDidRender(){l(this.hoist,this.popup,this.inputElement,this.wrapper,_,(i=>this.isDropDownContentUp=i))}disconnectedCallback(){this.eventListeners.removeAll()}updateValue(){if(typeof this.value!=="string"\|\|!x(this.value,this.format)){this.value=""}if(this.value===""){if(this.defaultTime==null){this.popupValue=g(this.is24HourClock())}else{this.popupValue=b(this.defaultTime,this.format)}}else{this.popupValue=b(this.value,this.format)}}calcIsPopupContentUp(){if(this.inputElement==null\|\|this.wrapper==null){return}const i=this.inputElement.getBoundingClientRect();const t=this.wrapper.getBoundingClientRect();const s=Math.max(t.height,_);const e=i.y>window.innerHeight/2;this.isPopupContentUp=e&&window.innerHeight<i.bottom+s}moveOpenHoistedPopup(){p(this.hoist,this.open,this.popup,this.inputElement,this.wrapper,_)}getSixTimeUnitPicker(i){return s("six-item-picker",{class:i.class,timeout:this.timeout,interval:this.interval,padded:true,min:i.min,max:i.max,value:this.popupValue[i.propertyName],items:i.items,type:i.type\|\|r.NUMBER,"padding-length":i.paddingLength,"onSix-item-picker-change":t=>this.handlePickerChange(t,i.propertyName)})}getHour24Picker(){if(!this.is24HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:23,propertyName:"hours"})}is24HourClock(){return this.format.includes("HH")}getHour12Picker(){if(!this.is12HourClock()){return}return this.getSixTimeUnitPicker({min:0,max:11,propertyName:"hours"})}is12HourClock(){return this.format.includes("hh")}getAmPmPicker(){if(!this.is12HourClock()){return}const i=["AM","PM"];return this.getSixTimeUnitPicker({items:i,type:r.CUSTOM,propertyName:"period"})}getMinutePicker(){if(!this.format.includes("mm")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"minutes"})}getSecondsPicker(){if(!this.format.includes("ss")){return}return this.getSixTimeUnitPicker({min:0,max:59,propertyName:"seconds"})}getMillisecondsPicker(){if(!this.format.includes("ms")){return}return this.getSixTimeUnitPicker({min:0,max:999,class:"timepicker__item--wide",paddingLength:3,propertyName:"milliseconds"})}getSeparator(){return s("div",{class:"timepicker__separator"},s("span",null,this.separator))}getContent(){const i=[this.getHour24Picker(),this.getHour12Picker(),this.getMinutePicker(),this.getSecondsPicker(),this.getMillisecondsPicker()];const t=i.filter((i=>i!==undefined));return t.map(((i,s)=>{if(s===t.length-1){return[i]}return[i,this.getSeparator()]}))}openPopup(){if(!this.open&&!this.disabled){this.open=true;this.eventListeners.add(document,"mousedown",this.handleDocumentMouseDown)}}closePopup(){if(this.inline){return}this.open=false;this.eventListeners.remove(document,"mousedown",this.handleDocumentMouseDown)}renderClearable(){return this.clearable&&s("button",{slot:"suffix",class:{timepicker_clear:true,"timepicker_clear--right":this.iconPosition==="left","timepicker_clear--left":this.iconPosition==="right"},type:"button",onClick:this.handleClearClick,tabindex:"-1"},s("six-icon",{size:"small"},"clear"))}renderCustomIcon(){const i=c(this.host,"custom-icon")?s("slot",{name:"custom-icon"}):s("six-icon",{size:this.size==="large"?"medium":this.size},"watch_later");return s("span",{slot:"prefix",part:"icon",class:{prefix:true,"prefix--right":this.iconPosition==="right"}},i)}render(){return s("div",{part:"container",ref:i=>this.wrapper=i,class:"timepicker__container"},s("six-input",{ref:i=>this.inputElement=i,part:"input",onClick:()=>this.openPopup(),value:this.value,placeholder:this.placeholder,readonly:this.readonly,disabled:this.disabled,errorTextCount:this.errorTextCount,errorText:this.errorText,invalid:this.invalid,size:this.size,name:this.name,label:this.label,required:this.required,class:{"input--empty":this.value==="","input--hide":this.inline}},this.renderCustomIcon(),this.renderClearable(),c(this.host,"label")?s("span",{slot:"label"},s("slot",{name:"label"})):null,c(this.host,"error-text")?s("span",{slot:"error-text"},s("slot",{name:"error-text"})):null),this.open&&s("div",{ref:i=>this.popup=i,part:"popup",class:{timepicker__popup:true,"timepicker__popup--is-up":this.placement==null?this.placement==="top":this.isPopupContentUp,"timepicker__popup--is-inline":this.inline}},...this.getContent(),this.getAmPmPicker()))}get host(){return e(this)}static get watchers(){return{value:["valueChanged"]}}};y.style=v;export{y as six_timepicker};
2	+ //# sourceMappingURL=p-0edd3091.entry.js.map

package/dist/ui-library/{p-b6f47c9d.entry.js.map → p-0edd3091.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","getCurrentTime","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","timeParts","formatParts","console","error","time","forEach","timeStringPart","i","formatStringPart","Number","toUpperCase","createTimeString","map","timeFormatPart","String","padStart","join","sixTimepickerCss","MIN_POPUP_HEIGHT","SixTimepicker","this","eventListeners","EventListeners","handlePickerChange","event","property","stopPropagation","popupValue","detail","timeString","value","sixChange","emit","changedProperty","valueAsString","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","sixClear","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","resizeHandler","calcIsPopupContentUp","moveOpenHoistedPopup","scrollHandler","valueChanged","updateValue","setFocus","options","_a","inputElement","connectedCallback","forward","componentWillLoad","inline","open","add","document","componentDidLoad","debounce","sixChangeDebounced","componentDidRender","adjustPopupForHoisting","hoist","popup","wrapper","isUp","isDropDownContentUp","disconnectedCallback","removeAll","defaultTime","is24HourClock","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","isPopupContentUp","bottom","movePopup","getSixTimeUnitPicker","params","h","class","timeout","interval","padded","min","propertyName","items","type","ItemPickerType","NUMBER","paddingLength","getHour24Picker","getHour12Picker","is12HourClock","getAmPmPicker","CUSTOM","getMinutePicker","getSecondsPicker","getMillisecondsPicker","getSeparator","separator","getContent","elementsInOrder","visibleElements","filter","el","undefined","idx","openPopup","disabled","remove","renderClearable","clearable","slot","timepicker_clear","iconPosition","onClick","tabindex","size","renderCustomIcon","icon","hasSlot","name","part","prefix","render","ref","placeholder","readonly","errorTextCount","errorText","invalid","label","required","timepicker__popup","placement"],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' \| 'PM';\n\nexport interface Time {\n hours?: number;\n minutes?: number;\n seconds?: number;\n milliseconds?: number;\n has24Hours?: boolean; // true => 24h, false => 12h\n period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n \| 'HH' // 24h\n \| 'hh' // 12h\n \| 'mm' // minutes\n \| 'ss' // seconds\n \| 'ms' // milliseconds\n \| 'aa'; // period (AM/PM)\n\n/\n Supported time formats\n /\nexport type TimeFormat =\n \| 'HH:mm:ss'\n \| 'hh:mm:ss:aa'\n \| 'HH:mm:ss:ms'\n \| 'hh:mm:ss:ms:aa'\n \| 'HH:mm'\n \| 'hh:mm:aa'\n \| 'HH'\n \| 'hh:aa'\n \| 'mm'\n \| 'ss'\n \| 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n const now = new Date();\n return {\n hours: now.getHours(),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: true,\n };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n const now = new Date();\n const hours = now.getHours();\n return {\n hours: getHoursIn12HourFormat(hours),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: false,\n period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n const timeStringParts = timeStr.split(':');\n const timeFormatParts = format.split(':');\n return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n const timeParts = timeStr.split(':');\n const formatParts = format.split(':') as TimeFormatChar[];\n\n if (!isValidTimeString(timeStr, format)) {\n console.error(\n `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n );\n }\n\n const time: Time = {};\n\n timeParts.forEach((timeStringPart, i) => {\n const formatStringPart: TimeFormatChar = formatParts[i];\n switch (formatStringPart) {\n case 'HH':\n time.hours = Number(timeStringPart);\n time.has24Hours = true;\n break;\n case 'hh':\n time.hours = Number(timeStringPart);\n time.has24Hours = false;\n break;\n case 'mm':\n time.minutes = Number(timeStringPart);\n break;\n case 'ss':\n time.seconds = Number(timeStringPart);\n break;\n case 'ms':\n time.milliseconds = Number(timeStringPart);\n break;\n case 'aa':\n time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n }\n });\n return time;\n};\n\nexport const createTimeString = (time: Time \| undefined, format: TimeFormat): string => {\n if (time == null) {\n return '';\n }\n\n const formatParts = format.split(':') as TimeFormatChar[];\n\n return formatParts\n .map((timeFormatPart) => {\n switch (timeFormatPart) {\n case 'HH':\n case 'hh':\n return String(time.hours).padStart(2, '0');\n case 'mm':\n return String(time.minutes).padStart(2, '0');\n case 'ss':\n return String(time.seconds).padStart(2, '0');\n case 'ms':\n return String(time.milliseconds).padStart(3, '0');\n case 'aa':\n return String(time.period);\n }\n })\n .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.timepicker {\n &_clear {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n\n &--right {\n right: 0;\n position: absolute;\n }\n\n &--left {\n right: 35px;\n position: absolute;\n }\n }\n\n &__container {\n position: relative;\n }\n\n &__popup {\n display: flex;\n justify-content: center;\n min-width: min-content;\n min-height: 145px;\n background-color: white;\n padding: 0.5em 0.5em 1.5em;\n box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n user-select: none;\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n right: 0;\n left: 0;\n\n &--is-up {\n bottom: 100%;\n }\n\n &--is-inline {\n position: initial;\n box-shadow: none;\n border: 1px solid var(--six-color-web-rock-400);\n }\n }\n\n &__separator {\n display: flex;\n align-items: center;\n }\n\n &__item {\n &--wide {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n }\n}\n\n.input--empty .timepicker_clear {\n visibility: hidden;\n}\n\n.input--hide {\n display: none;\n}\n\n// Icon position\n.prefix {\n cursor: pointer;\n\n &--right {\n right: 0;\n display: inline-flex;\n position: absolute;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n margin-right: var(--six-input-spacing-medium);\n transition: var(--six-transition-fast) color;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n \n /\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixTimepickerElement;\n\n /*\n Define the time format. Valid formats are:\n \n HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n \n where HH is the 24 hour format\n * and hh is the 12 hour format\n \n Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * /\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /\n Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * /\n @Prop() separator = ':';\n\n /\n The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n /\n @Prop({ mutable: true }) value = '';\n\n /* Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Indicates whether the timepicker should be shown as an inline (always open) component /\n @Prop({ reflect: true }) inline = false;\n\n /\n If `true` the user can only select a time via the timepicker but not directly edit the input field.\n /\n @Prop() readonly = false;\n\n /\n If `true` the component is disabled.\n /\n @Prop() disabled = false;\n\n /\n The enforced placement of the dropdown panel.\n /\n @Prop() placement?: 'top' \| 'bottom';\n\n /* Timepicker size. /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /\n The placeholder defines what text to be shown on the input element\n /\n @Prop() placeholder?: string;\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set the position of the icon /\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n /\n @Prop() defaultTime?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n /\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /\n Emitted when the timepicker's value changes\n /\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the timepicker's value changes, but debounced\n /\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the clear button is activated.\n /\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n /* Sets focus on the datepickers input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n // update value and popup value, and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' \|\| !isValidTimeString(this.value, this.format)) {\n this.value = '';\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null \|\| this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type \|\| ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n errorTextCount={this.errorTextCount}\n errorText={this.errorText}\n invalid={this.invalid}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["getCurrentTimeIn24Hours","now","Date","hours","getHours","minutes","getMinutes","seconds","getSeconds","milliseconds","getMilliseconds","has24Hours","HOURS_IN_12_HOUR_CLOCK_FORMAT","getHoursIn12HourFormat","getCurrentTimeIn12Hours","period","getCurrentTime","isValidTimeString","timeStr","format","timeStringParts","split","timeFormatParts","length","parseTimeString","timeParts","formatParts","console","error","time","forEach","timeStringPart","i","formatStringPart","Number","toUpperCase","createTimeString","map","timeFormatPart","String","padStart","join","sixTimepickerCss","MIN_POPUP_HEIGHT","SixTimepicker","this","eventListeners","EventListeners","handlePickerChange","event","property","stopPropagation","popupValue","detail","timeString","value","sixChange","emit","changedProperty","valueAsString","handleDocumentMouseDown","path","composedPath","includes","host","closePopup","handleClearClick","sixClear","DEFAULT_DEBOUNCE_FAST","DEFAULT_DEBOUNCE_INSANELY_FAST","resizeHandler","calcIsPopupContentUp","moveOpenHoistedPopup","scrollHandler","valueChanged","updateValue","setFocus","options","_a","inputElement","connectedCallback","forward","componentWillLoad","inline","open","add","document","componentDidLoad","debounce","sixChangeDebounced","componentDidRender","adjustPopupForHoisting","hoist","popup","wrapper","isUp","isDropDownContentUp","disconnectedCallback","removeAll","defaultTime","is24HourClock","inputBoundingRect","getBoundingClientRect","wrapperBoundingRect","minPopupHeight","Math","max","height","moreSpaceInTop","y","window","innerHeight","isPopupContentUp","bottom","movePopup","getSixTimeUnitPicker","params","h","class","timeout","interval","padded","min","propertyName","items","type","ItemPickerType","NUMBER","paddingLength","getHour24Picker","getHour12Picker","is12HourClock","getAmPmPicker","CUSTOM","getMinutePicker","getSecondsPicker","getMillisecondsPicker","getSeparator","separator","getContent","elementsInOrder","visibleElements","filter","el","undefined","idx","openPopup","disabled","remove","renderClearable","clearable","slot","timepicker_clear","iconPosition","onClick","tabindex","size","renderCustomIcon","icon","hasSlot","name","part","prefix","render","ref","placeholder","readonly","errorTextCount","errorText","invalid","label","required","timepicker__popup","placement"],"sources":["src/utils/time.util.ts","src/components/six-timepicker/six-timepicker.scss?tag=six-timepicker&encapsulation=shadow","src/components/six-timepicker/six-timepicker.tsx"],"sourcesContent":["export type TimePeriod = 'AM' \| 'PM';\n\nexport interface Time {\n hours?: number;\n minutes?: number;\n seconds?: number;\n milliseconds?: number;\n has24Hours?: boolean; // true => 24h, false => 12h\n period?: TimePeriod; // only needed for 12-hour clock\n}\n\nexport type TimeProperties = keyof Time;\n\nexport type TimeFormatChar =\n \| 'HH' // 24h\n \| 'hh' // 12h\n \| 'mm' // minutes\n \| 'ss' // seconds\n \| 'ms' // milliseconds\n \| 'aa'; // period (AM/PM)\n\n/\n Supported time formats\n /\nexport type TimeFormat =\n \| 'HH:mm:ss'\n \| 'hh:mm:ss:aa'\n \| 'HH:mm:ss:ms'\n \| 'hh:mm:ss:ms:aa'\n \| 'HH:mm'\n \| 'hh:mm:aa'\n \| 'HH'\n \| 'hh:aa'\n \| 'mm'\n \| 'ss'\n \| 'ms';\n\nexport const getCurrentTimeIn24Hours = (): Time => {\n const now = new Date();\n return {\n hours: now.getHours(),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: true,\n };\n};\n\nconst HOURS_IN_12_HOUR_CLOCK_FORMAT = 12;\n\nexport const getHoursIn12HourFormat = (hours: number) =>\n hours > HOURS_IN_12_HOUR_CLOCK_FORMAT ? hours - HOURS_IN_12_HOUR_CLOCK_FORMAT : hours;\n\nexport const getCurrentTimeIn12Hours = (): Time => {\n const now = new Date();\n const hours = now.getHours();\n return {\n hours: getHoursIn12HourFormat(hours),\n minutes: now.getMinutes(),\n seconds: now.getSeconds(),\n milliseconds: now.getMilliseconds(),\n has24Hours: false,\n period: hours >= HOURS_IN_12_HOUR_CLOCK_FORMAT ? 'PM' : 'AM',\n };\n};\n\nexport const getCurrentTime = (has24Hours = true): Time => {\n return has24Hours ? getCurrentTimeIn24Hours() : getCurrentTimeIn12Hours();\n};\n\nexport const isValidTimeString = (timeStr: string, format: TimeFormat) => {\n const timeStringParts = timeStr.split(':');\n const timeFormatParts = format.split(':');\n return timeStringParts.length === timeFormatParts.length;\n};\n\nexport const parseTimeString = (timeStr: string, format: TimeFormat): Time => {\n const timeParts = timeStr.split(':');\n const formatParts = format.split(':') as TimeFormatChar[];\n\n if (!isValidTimeString(timeStr, format)) {\n console.error(\n `Timestring did not match expected format.\\nExpected format: ${format}\\nReceived timestring: ${timeStr}`\n );\n }\n\n const time: Time = {};\n\n timeParts.forEach((timeStringPart, i) => {\n const formatStringPart: TimeFormatChar = formatParts[i];\n switch (formatStringPart) {\n case 'HH':\n time.hours = Number(timeStringPart);\n time.has24Hours = true;\n break;\n case 'hh':\n time.hours = Number(timeStringPart);\n time.has24Hours = false;\n break;\n case 'mm':\n time.minutes = Number(timeStringPart);\n break;\n case 'ss':\n time.seconds = Number(timeStringPart);\n break;\n case 'ms':\n time.milliseconds = Number(timeStringPart);\n break;\n case 'aa':\n time.period = timeStringPart.toUpperCase() === 'PM' ? 'PM' : 'AM';\n }\n });\n return time;\n};\n\nexport const createTimeString = (time: Time \| undefined, format: TimeFormat): string => {\n if (time == null) {\n return '';\n }\n\n const formatParts = format.split(':') as TimeFormatChar[];\n\n return formatParts\n .map((timeFormatPart) => {\n switch (timeFormatPart) {\n case 'HH':\n case 'hh':\n return String(time.hours).padStart(2, '0');\n case 'mm':\n return String(time.minutes).padStart(2, '0');\n case 'ss':\n return String(time.seconds).padStart(2, '0');\n case 'ms':\n return String(time.milliseconds).padStart(3, '0');\n case 'aa':\n return String(time.period);\n }\n })\n .join(':');\n};\n","@import 'src/global/component';\n\n:host {\n display: block;\n font-family: var(--six-font-family);\n}\n\n.timepicker {\n &_clear {\n display: inline-flex;\n align-items: center;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n padding: 0;\n transition: var(--six-transition-fast) color;\n cursor: pointer;\n\n &:hover {\n color: var(--six-input-icon-color-hover);\n }\n\n &:focus {\n outline: none;\n }\n\n &--right {\n right: 0;\n position: absolute;\n }\n\n &--left {\n right: 35px;\n position: absolute;\n }\n }\n\n &__container {\n position: relative;\n }\n\n &__popup {\n display: flex;\n justify-content: center;\n min-width: min-content;\n min-height: 145px;\n background-color: white;\n padding: 0.5em 0.5em 1.5em;\n box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%), 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%);\n user-select: none;\n position: absolute;\n z-index: var(--six-z-index-dropdown);\n right: 0;\n left: 0;\n\n &--is-up {\n bottom: 100%;\n }\n\n &--is-inline {\n position: initial;\n box-shadow: none;\n border: 1px solid var(--six-color-web-rock-400);\n }\n }\n\n &__separator {\n display: flex;\n align-items: center;\n }\n\n &__item {\n &--wide {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n }\n }\n}\n\n.input--empty .timepicker_clear {\n visibility: hidden;\n}\n\n.input--hide {\n display: none;\n}\n\n// Icon position\n.prefix {\n cursor: pointer;\n\n &--right {\n right: 0;\n display: inline-flex;\n position: absolute;\n font-size: inherit;\n color: var(--six-input-icon-color);\n border: none;\n background: none;\n margin-right: var(--six-input-spacing-medium);\n transition: var(--six-transition-fast) color;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport { ItemPickerType } from '../six-item-picker/types';\nimport {\n createTimeString,\n getCurrentTime,\n isValidTimeString,\n parseTimeString,\n Time,\n TimeFormat,\n TimeProperties,\n} from '../../utils/time.util';\nimport { debounce, DEFAULT_DEBOUNCE_FAST, DEFAULT_DEBOUNCE_INSANELY_FAST } from '../../utils/execution-control';\nimport { SixItemPickerChangePayload } from '../six-item-picker/six-item-picker';\nimport { EventListeners } from '../../utils/event-listeners';\nimport { hasSlot } from '../../utils/slot';\nimport { EmptyPayload } from '../../utils/types';\nimport { adjustPopupForHoisting, movePopup } from '../../utils/popup';\n\nexport interface SixTimepickerChange {\n value?: Time;\n valueAsString: string;\n changedProperty?: string;\n}\n\ninterface SixTimeUnitPickerParams {\n min?: number;\n max?: number;\n items?: string[];\n type?: ItemPickerType;\n class?: string;\n paddingLength?: number;\n propertyName: TimeProperties;\n}\n\nconst MIN_POPUP_HEIGHT = 145;\n\n/\n @since 2.0.0\n * @status experimental\n \n @slot error-text - Error text that is shown for validation errors. Alternatively, you can use the error-text prop.\n \n @part input - The input field\n * @part container - The container of whole component\n * @part popup - The popup of the timepicker component\n \n /\n@Component({\n tag: 'six-timepicker',\n styleUrl: 'six-timepicker.scss',\n shadow: true,\n})\nexport class SixTimepicker {\n private eventListeners = new EventListeners();\n private popup?: HTMLElement;\n private wrapper?: HTMLElement;\n private inputElement?: HTMLSixInputElement;\n\n @Element() host!: HTMLSixTimepickerElement;\n\n /*\n Define the time format. Valid formats are:\n \n HH:mm:ss\n * hh:mm:ss:aa\n * HH:mm:ss:ms\n * hh:mm:ss:ms:aa\n * HH:mm\n * hh:mm:aa\n * HH\n * hh:aa\n * mm\n * ss\n * ms\n \n where HH is the 24 hour format\n * and hh is the 12 hour format\n \n Please notice that when using the 12-hour-clock (hh)\n * you always need a period indicator (aa). So the time can be parsed as either am or pm\n * /\n @Prop() format: TimeFormat = 'HH:mm:ss';\n\n /\n Define the separator to be shown between the time unit pickers.\n * Please be aware that this property will modify the displayed separator only.\n * The separator for a timestring is always expected to be a colon (eg. '13:52:20')\n * /\n @Prop() separator = ':';\n\n /\n The value of the timepicker provided as a string. The string mast match the provided format (or default format)\n /\n @Prop({ mutable: true }) value = '';\n\n /* Indicates whether the timepicker dropdown is open on startup. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /* Indicates whether the timepicker should be shown as an inline (always open) component /\n @Prop({ reflect: true }) inline = false;\n\n /\n If `true` the user can only select a time via the timepicker but not directly edit the input field.\n /\n @Prop() readonly = false;\n\n /\n If `true` the component is disabled.\n /\n @Prop() disabled = false;\n\n /\n The enforced placement of the dropdown panel.\n /\n @Prop() placement?: 'top' \| 'bottom';\n\n /* Timepicker size. /\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n\n /* Set to true to show an asterisk beneath the label. /\n @Prop() required = false;\n\n /\n The placeholder defines what text to be shown on the input element\n /\n @Prop() placeholder?: string;\n\n /* The input's error text. Alternatively, you can use the error-text slot. /\n @Prop() errorText: string \| string[] = '';\n\n /* The number of error texts to be shown (if the error-text slot isn't used). Defaults to 1 /\n @Prop() errorTextCount?: number;\n\n /* The input's label. Alternatively, you can use the label slot. /\n @Prop() label = '';\n\n /* If this property is set to true and an error message is provided by `errorText`, the error message is displayed. /\n @Prop({ reflect: true }) invalid = false;\n\n /* The input's name attribute. /\n @Prop({ reflect: true }) name = '';\n\n /* Set to true to add a clear button when the input is populated. /\n @Prop() clearable = false;\n\n /* Set the position of the icon /\n @Prop() iconPosition: 'left' \| 'right' = 'left';\n\n /\n Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n * `overflow: auto\|scroll`.\n /\n @Prop() hoist = false;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger faster switching between timeunits (e.g. hours).\n /\n @Prop() timeout = DEFAULT_DEBOUNCE_FAST;\n\n /\n Set the amount of time, in milliseconds, to wait between switching to next timeunit (e.g. next hour) when mouse button is held pressed.\n /\n @Prop() interval = DEFAULT_DEBOUNCE_INSANELY_FAST;\n\n /\n The defaultTime defines the default setting for the timepicker when you open the popup. Default time must match the provided format.\n /\n @Prop() defaultTime?: string;\n\n /\n Set the amount of time, in milliseconds, to wait to trigger the `six-timepicker-change-debounced` event.\n * If you want your change debounce event to not trigger when keeping the nav button pressed before, make sure debounce\n * is a bit bigger than timeout, otherwise keeping the button pressed will trigger the event twice: once you click\n * (and keep pressed) and once you release\n /\n @Prop() debounce = DEFAULT_DEBOUNCE_FAST;\n\n /\n Emitted when the timepicker's value changes\n /\n @Event({ eventName: 'six-timepicker-change' }) sixChange!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the timepicker's value changes, but debounced\n /\n @Event({ eventName: 'six-timepicker-change-debounced' }) sixChangeDebounced!: EventEmitter<SixTimepickerChange>;\n\n /\n Emitted when the clear button is activated.\n /\n @Event({ eventName: 'six-timepicker-clear' }) sixClear!: EventEmitter<EmptyPayload>;\n\n @State() isPopupContentUp = false;\n\n @State() isDropDownContentUp = false;\n\n @Listen('resize', { target: 'window' })\n async resizeHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n @Listen('scroll', { target: 'window' })\n async scrollHandler() {\n this.calcIsPopupContentUp();\n this.moveOpenHoistedPopup();\n }\n\n /\n Update the native input element when the value changes\n /\n @Watch('value')\n protected valueChanged() {\n this.updateValue();\n }\n\n /* Sets focus on the datepickers input. /\n @Method()\n async setFocus(options?: FocusOptions) {\n this.inputElement?.setFocus(options);\n }\n\n /\n * Internally the six-timepicker uses a standardized representation of time, so we don't have a mess,\n * when switching between formats\n */\n @State() private popupValue: Time = {};\n\n connectedCallback() {\n this.eventListeners.forward('six-timepicker-change', 'change', this.host);\n }\n\n componentWillLoad() {\n this.updateValue();\n\n if (this.inline) {\n this.open = true;\n }\n\n if (this.open) {\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n componentDidLoad() {\n if (this.inputElement == null) return;\n const inputElement = this.inputElement;\n\n // emit debounced change event\n this.eventListeners.add(\n this.host,\n 'six-timepicker-change',\n debounce((event: Event) => this.sixChangeDebounced.emit((event as CustomEvent).detail), this.debounce)\n );\n\n // update value and popup value based on input-element value\n this.eventListeners.add(\n inputElement,\n 'six-input-input',\n debounce((event: Event) => {\n event.stopPropagation();\n\n // emit empty event if time string is invalid\n if (!isValidTimeString(inputElement.value, this.format)) {\n this.value = inputElement.value;\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n return;\n }\n\n // update value and popup value, and emit the new value\n this.value = inputElement.value;\n this.popupValue = parseTimeString(inputElement.value, this.format);\n this.sixChange.emit({\n value: this.popupValue,\n valueAsString: createTimeString(this.popupValue, this.format),\n });\n }, this.debounce)\n );\n }\n\n componentDidRender() {\n adjustPopupForHoisting(\n this.hoist,\n this.popup,\n this.inputElement,\n this.wrapper,\n MIN_POPUP_HEIGHT,\n (isUp) => (this.isDropDownContentUp = isUp)\n );\n }\n\n disconnectedCallback() {\n this.eventListeners.removeAll();\n }\n private updateValue() {\n // normalize value\n if (typeof this.value !== 'string' \|\| !isValidTimeString(this.value, this.format)) {\n this.value = '';\n }\n\n // update popup value\n if (this.value === '') {\n if (this.defaultTime == null) {\n this.popupValue = getCurrentTime(this.is24HourClock());\n } else {\n this.popupValue = parseTimeString(this.defaultTime, this.format);\n }\n } else {\n this.popupValue = parseTimeString(this.value, this.format);\n }\n }\n\n private calcIsPopupContentUp() {\n if (this.inputElement == null \|\| this.wrapper == null) {\n return;\n }\n\n const inputBoundingRect = this.inputElement.getBoundingClientRect();\n const wrapperBoundingRect = this.wrapper.getBoundingClientRect();\n const minPopupHeight = Math.max(wrapperBoundingRect.height, MIN_POPUP_HEIGHT);\n\n const moreSpaceInTop = inputBoundingRect.y > window.innerHeight / 2;\n this.isPopupContentUp = moreSpaceInTop && window.innerHeight < inputBoundingRect.bottom + minPopupHeight;\n }\n\n private moveOpenHoistedPopup() {\n movePopup(this.hoist, this.open, this.popup, this.inputElement, this.wrapper, MIN_POPUP_HEIGHT);\n }\n\n private handlePickerChange = (event: CustomEvent<SixItemPickerChangePayload>, property: TimeProperties) => {\n // stop propagation, since the timepicker should not expose the events of the underlying item-picker\n event.stopPropagation();\n if (this.popupValue == null) {\n return;\n }\n\n // update the internal state\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n this.popupValue[property] = event.detail;\n\n const timeString = createTimeString(this.popupValue, this.format);\n\n // update the input value\n this.value = timeString;\n\n // emit change event\n this.sixChange.emit({\n changedProperty: property,\n value: this.popupValue,\n valueAsString: timeString,\n });\n };\n\n private getSixTimeUnitPicker(params: SixTimeUnitPickerParams) {\n return (\n <six-item-picker\n class={params.class}\n timeout={this.timeout}\n interval={this.interval}\n padded\n min={params.min}\n max={params.max}\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n value={this.popupValue[params.propertyName]}\n items={params.items}\n type={params.type \|\| ItemPickerType.NUMBER}\n padding-length={params.paddingLength}\n onSix-item-picker-change={(event) => this.handlePickerChange(event, params.propertyName)}\n ></six-item-picker>\n );\n }\n\n private getHour24Picker() {\n if (!this.is24HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 23, propertyName: 'hours' });\n }\n\n private is24HourClock() {\n return this.format.includes('HH');\n }\n\n private getHour12Picker() {\n if (!this.is12HourClock()) {\n return;\n }\n return this.getSixTimeUnitPicker({ min: 0, max: 11, propertyName: 'hours' });\n }\n\n private is12HourClock() {\n return this.format.includes('hh');\n }\n\n private getAmPmPicker() {\n if (!this.is12HourClock()) {\n return;\n }\n const items = ['AM', 'PM'];\n return this.getSixTimeUnitPicker({\n items,\n type: ItemPickerType.CUSTOM,\n propertyName: 'period',\n });\n }\n\n private getMinutePicker() {\n if (!this.format.includes('mm')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'minutes' });\n }\n\n private getSecondsPicker() {\n if (!this.format.includes('ss')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({ min: 0, max: 59, propertyName: 'seconds' });\n }\n\n private getMillisecondsPicker() {\n if (!this.format.includes('ms')) {\n return;\n }\n\n return this.getSixTimeUnitPicker({\n min: 0,\n max: 999,\n class: 'timepicker__item--wide',\n paddingLength: 3,\n propertyName: 'milliseconds',\n });\n }\n\n private getSeparator() {\n return (\n <div class=\"timepicker__separator\">\n <span>{this.separator}</span>\n </div>\n );\n }\n\n private getContent() {\n const elementsInOrder = [\n this.getHour24Picker(),\n this.getHour12Picker(),\n this.getMinutePicker(),\n this.getSecondsPicker(),\n this.getMillisecondsPicker(),\n ];\n\n const visibleElements = elementsInOrder.filter((el) => el !== undefined);\n\n return visibleElements.map((el, idx) => {\n if (idx === visibleElements.length - 1) {\n return [el];\n }\n\n return [el, this.getSeparator()];\n });\n }\n\n private openPopup() {\n if (!this.open && !this.disabled) {\n this.open = true;\n this.eventListeners.add(document, 'mousedown', this.handleDocumentMouseDown);\n }\n }\n\n private closePopup() {\n if (this.inline) {\n return;\n }\n\n this.open = false;\n this.eventListeners.remove(document, 'mousedown', this.handleDocumentMouseDown);\n }\n\n private handleDocumentMouseDown = (event: Event) => {\n // Close when clicking outside the containing element\n const path = event.composedPath() as EventTarget[];\n if (!path.includes(this.host)) {\n this.closePopup();\n return;\n }\n };\n\n private handleClearClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.value = '';\n this.sixClear.emit();\n this.sixChange.emit({\n value: {},\n valueAsString: '',\n });\n };\n\n private renderClearable() {\n return (\n this.clearable && (\n <button\n slot=\"suffix\"\n class={{\n timepicker_clear: true,\n 'timepicker_clear--right': this.iconPosition === 'left',\n 'timepicker_clear--left': this.iconPosition === 'right',\n }}\n type=\"button\"\n onClick={this.handleClearClick}\n tabindex=\"-1\"\n >\n <six-icon size=\"small\">clear</six-icon>\n </button>\n )\n );\n }\n\n private renderCustomIcon() {\n const icon = hasSlot(this.host, 'custom-icon') ? (\n <slot name=\"custom-icon\"></slot>\n ) : (\n <six-icon size={this.size === 'large' ? 'medium' : this.size}>watch_later</six-icon>\n );\n\n return (\n <span\n slot=\"prefix\"\n part=\"icon\"\n class={{\n prefix: true,\n 'prefix--right': this.iconPosition === 'right',\n }}\n >\n {icon}\n </span>\n );\n }\n\n render() {\n return (\n <div part=\"container\" ref={(el) => (this.wrapper = el)} class=\"timepicker__container\">\n <six-input\n ref={(el) => (this.inputElement = el)}\n part=\"input\"\n onClick={() => this.openPopup()}\n value={this.value}\n placeholder={this.placeholder}\n readonly={this.readonly}\n disabled={this.disabled}\n errorTextCount={this.errorTextCount}\n errorText={this.errorText}\n invalid={this.invalid}\n size={this.size}\n name={this.name}\n label={this.label}\n required={this.required}\n class={{\n 'input--empty': this.value === '',\n 'input--hide': this.inline,\n }}\n >\n {this.renderCustomIcon()}\n {this.renderClearable()}\n {hasSlot(this.host, 'label') ? (\n <span slot=\"label\">\n <slot name=\"label\" />\n </span>\n ) : null}\n {hasSlot(this.host, 'error-text') ? (\n <span slot=\"error-text\">\n <slot name=\"error-text\" />\n </span>\n ) : null}\n </six-input>\n {this.open && (\n <div\n ref={(el) => (this.popup = el)}\n part=\"popup\"\n class={{\n timepicker__popup: true,\n 'timepicker__popup--is-up': this.placement == null ? this.placement === 'top' : this.isPopupContentUp,\n 'timepicker__popup--is-inline': this.inline,\n }}\n >\n {...this.getContent()}\n {this.getAmPmPicker()}\n </div>\n )}\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-150b7664.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as o,h as i,g as r}from"./p-af15381b.js";import{s}from"./p-8227aaed.js";function a(t,o,i={duration:150,easing:"ease",fill:"both"}){const r=o.getBoundingClientRect();const s=t.getBoundingClientRect();const a=r.left-s.left;const l=r.top-s.top;const e=r.width/s.width;const n=r.height/s.height;t.animate([{transformOrigin:"top left",transform:`translate(${a}px, ${l}px) scale(${e}, ${n})`},{transformOrigin:"top left",transform:"none"}],i)}const l=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host *:after{box-sizing:border-box}:host{display:block}.tab-group{display:flex;border:solid 1px transparent;border-radius:0}.tab-group .tab-group__tabs{display:flex;position:relative}.tab-group--has-scroll-controls .tab-group__nav-container{position:relative;padding:0 var(--six-spacing-x-large)}.tab-group__scroll-button{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:var(--six-spacing-x-large)}.tab-group__scroll-button--left{left:0}.tab-group__scroll-button--right{right:0}.tab-group--top{flex-direction:column}.tab-group--top .tab-group__nav-container{order:1}.tab-group--top .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--top .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--top .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--top .tab-group__body{order:2}.tab-group--bottom{flex-direction:column}.tab-group--bottom .tab-group__nav-container{order:2}.tab-group--bottom .tab-group__nav{display:flex;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}.tab-group--bottom .tab-group__nav::-webkit-scrollbar{width:0;height:0}.tab-group--bottom .tab-group__tabs{flex:1 1 auto;position:relative;flex-direction:row}.tab-group--bottom .tab-group__body{order:1}.tab-group--left{flex-direction:row}.tab-group--left .tab-group__nav-container{order:1}.tab-group--left .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--left .tab-group__body{flex:1 1 auto;order:2}.tab-group--right{flex-direction:row}.tab-group--right .tab-group__nav-container{order:2}.tab-group--right .tab-group__tabs{flex:0 0 auto;flex-direction:column}.tab-group--right .tab-group__body{flex:1 1 auto;order:1}";const e=class{constructor(i){t(this,i);this.sixTabShow=o(this,"six-tab-show",7);this.sixTabHide=o(this,"six-tab-hide",7);this.handleClick=t=>{const o=t.target;const i=o.closest("six-tab");const r=i===null\|\|i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(i!=null){this.setActiveTab(i)}};this.handleKeyDown=t=>{if(this.nav==null)return;const o=t.target;const i=o.closest("six-tab");const r=i===null\|\|i===void 0?void 0:i.closest("six-tab-group");if(r!==this.host){return false}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){const o=document.activeElement;if(o&&o.tagName.toLowerCase()==="six-tab"){const i=this.getAllTabs();let r=i.indexOf(o);if(t.key==="Home"){r=0}else if(t.key==="End"){r=i.length-1}else if(t.key==="ArrowLeft"){r=Math.max(0,r-1)}else if(t.key==="ArrowRight"){r=Math.min(i.length-1,r+1)}i[r].setFocus({preventScroll:true});this.setActiveTab(i[r]);if(["top","bottom"].includes(this.placement)){s(i[r],this.nav,"horizontal")}t.preventDefault()}}};this.handleScrollLeft=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})};this.handleScrollRight=()=>{if(this.nav==null)return;this.nav.scroll({left:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})};this.hasScrollControls=false;this.placement="top";this.noScrollControls=false}handleNoScrollControlsChange(){this.updateScrollControls()}componentDidLoad(){if(this.tabGroup==null\|\|this.nav==null)return;const t=new IntersectionObserver(((t,o)=>{if(t[0].intersectionRatio>0){this.setAriaLabels();this.setActiveTab(this.getActiveTab()\|\|this.getAllTabs()[0],false);o.unobserve(t[0].target)}}));t.observe(this.host);this.resizeObserver=new ResizeObserver((()=>this.updateScrollControls()));this.resizeObserver.observe(this.nav);requestAnimationFrame((()=>this.updateScrollControls()));this.mutationObserver=new MutationObserver((t=>{if(t.some((t=>{var o;return!["aria-labelledby","aria-controls"].includes((o=t.attributeName)!==null&&o!==void 0?o:"")}))){setTimeout((()=>this.setAriaLabels()))}}));this.mutationObserver.observe(this.host,{attributes:true,childList:true,subtree:true})}disconnectedCallback(){if(this.mutationObserver==null\|\|this.tabGroup==null\|\|this.nav==null\|\|this.resizeObserver==null){return}this.mutationObserver.disconnect();this.resizeObserver.unobserve(this.nav)}async show(t){const o=this.getAllTabs();const i=o.find((o=>o.panel===t));if(i!=null){this.setActiveTab(i)}}getAllTabs(t=false){var o;const i=(o=this.tabs)===null\|\|o===void 0?void 0:o.querySelector("slot");if(i==null)return[];return[...i.assignedElements()].filter((o=>t?o.tagName.toLowerCase()==="six-tab":o.tagName.toLowerCase()==="six-tab"&&!o.disabled))}getAllPanels(){var t;const o=(t=this.body)===null\|\|t===void 0?void 0:t.querySelector("slot");if(o==null)return[];return[...o.assignedElements()].filter((t=>t.tagName.toLowerCase()==="six-tab-panel"))}getActiveTab(){return this.getAllTabs().find((t=>t.active))}updateScrollControls(){if(this.nav==null)return;this.hasScrollControls=this.noScrollControls?false:["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth}setActiveTab(t,o=true){var i,r,l;if(this.nav==null)return;const e=(i=t===null\|\|t===void 0?void 0:t.shadowRoot)===null\|\|i===void 0?void 0:i.querySelector(".tab__indicator");const n=(l=(r=this.getActiveTab())===null\|\|r===void 0?void 0:r.shadowRoot)===null\|\|l===void 0?void 0:l.querySelector(".tab__indicator");if(n!=null&&e!=null){a(e,n)}if(t!==this.activeTab&&!t.disabled){const i=this.activeTab;this.activeTab=t;this.getAllTabs().map((t=>t.active=t===this.activeTab));this.getAllPanels().map((t=>{var o;return t.active=t.name===((o=this.activeTab)===null\|\|o===void 0?void 0:o.panel)}));if(["top","bottom"].includes(this.placement)){s(this.activeTab,this.nav,"horizontal")}if(o){if(i!=null){this.sixTabHide.emit({name:i.panel})}this.sixTabShow.emit({name:this.activeTab.panel})}}}setAriaLabels(){const t=this.getAllTabs();const o=this.getAllPanels();t.map((t=>{var i,r;const s=o.find((o=>o.name===t.panel));if(s!=null){t.setAttribute("aria-controls",(i=s.getAttribute("id"))!==null&&i!==void 0?i:"");s.setAttribute("aria-labelledby",(r=t.getAttribute("id"))!==null&&r!==void 0?r:"")}}))}render(){return i("div",{part:"base",ref:t=>this.tabGroup=t,class:{"tab-group":true,"tab-group--top":this.placement==="top","tab-group--bottom":this.placement==="bottom","tab-group--left":this.placement==="left","tab-group--right":this.placement==="right","tab-group--has-scroll-controls":this.hasScrollControls},onClick:this.handleClick,onKeyDown:this.handleKeyDown},i("div",{class:"tab-group__nav-container"},this.hasScrollControls&&i("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--left",exportparts:"base:scroll-button",name:"chevron_left",onClick:this.handleScrollLeft}),i("div",{ref:t=>this.nav=t,key:"nav",part:"nav",class:"tab-group__nav"},i("div",{ref:t=>this.tabs=t,part:"tabs",class:"tab-group__tabs",role:"tablist"},i("slot",{name:"nav"}))),this.hasScrollControls&&i("six-icon-button",{class:"tab-group__scroll-button tab-group__scroll-button--right",exportparts:"base:scroll-button",name:"chevron_right",onClick:this.handleScrollRight})),i("div",{ref:t=>this.body=t,part:"body",class:"tab-group__body"},i("slot",null)))}get host(){return r(this)}static get watchers(){return{noScrollControls:["handleNoScrollControlsChange"]}}};e.style=l;export{e as six_tab_group};
2	+ //# sourceMappingURL=p-150b7664.entry.js.map

package/dist/ui-library/{p-66fe54b3.entry.js.map → p-150b7664.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["flipAnimate","element","fromElement","options","duration","easing","fill","dimensionsTo","getBoundingClientRect","dimensionsFrom","deltaX","left","deltaY","top","deltaW","width","deltaH","height","animate","transformOrigin","transform","sixTabGroupCss","SixTabGroup","this","handleClick","event","target","tab","closest","tabGroup","host","setActiveTab","handleKeyDown","nav","includes","key","activeEl","document","activeElement","tagName","toLowerCase","tabs","getAllTabs","index","indexOf","length","Math","max","min","setFocus","preventScroll","placement","scrollIntoView","preventDefault","handleScrollLeft","scroll","scrollLeft","clientWidth","behavior","handleScrollRight","handleNoScrollControlsChange","updateScrollControls","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","getActiveTab","unobserve","observe","resizeObserver","ResizeObserver","requestAnimationFrame","mutationObserver","MutationObserver","mutations","some","mutation","_a","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","show","panel","find","el","includeDisabled","slot","querySelector","assignedElements","filter","disabled","getAllPanels","body","active","hasScrollControls","noScrollControls","scrollWidth","emitEvents","newIndicator","shadowRoot","oldIndicator","_c","_b","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","render","h","part","ref","class","onClick","onKeyDown","exportparts","role"],"sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/*\n Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n \n @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n \n @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n \n /\nexport function flipAnimate(\n element: Element,\n fromElement: Element,\n options: KeyframeAnimationOptions = {\n duration: 150,\n easing: 'ease',\n fill: 'both',\n }\n) {\n const dimensionsTo = fromElement.getBoundingClientRect();\n const dimensionsFrom = element.getBoundingClientRect();\n\n const deltaX = dimensionsTo.left - dimensionsFrom.left;\n const deltaY = dimensionsTo.top - dimensionsFrom.top;\n const deltaW = dimensionsTo.width / dimensionsFrom.width;\n const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n element.animate(\n [\n {\n transformOrigin: 'top left',\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n },\n {\n transformOrigin: 'top left',\n transform: 'none',\n },\n ],\n options\n );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n display: block;\n}\n\n.tab-group {\n display: flex;\n border: solid 1px transparent;\n border-radius: 0;\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n left: 0;\n}\n\n.tab-group__scroll-button--right {\n right: 0;\n}\n\n// TOP\n.tab-group--top {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group__body {\n order: 2;\n }\n}\n\n// Bottom\n.tab-group--bottom {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group__body {\n order: 1;\n }\n}\n\n// Left\n\n.tab-group--left {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n}\n\n// Right\n.tab-group--right {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n name: string;\n}\n\nexport interface SixTabHidePayload {\n name: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n \n @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n /\n@Component({\n tag: 'six-tab-group',\n styleUrl: 'six-tab-group.scss',\n shadow: true,\n})\nexport class SixTabGroup {\n private activeTab?: HTMLSixTabElement;\n private body?: HTMLElement;\n private mutationObserver?: MutationObserver;\n private nav?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n private tabGroup?: HTMLElement;\n private tabs?: HTMLElement;\n\n @Element() host!: HTMLSixTabGroupElement;\n\n @State() hasScrollControls = false;\n\n /* The placement of the tabs. /\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @Prop() noScrollControls = false;\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n /* Emitted when a tab is shown. /\n @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n /* Emitted when a tab is hidden. /\n @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n componentDidLoad() {\n if (this.tabGroup == null \|\| this.nav == null) return;\n\n // Set initial tab state when the tabs first become visible\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() \|\| this.getAllTabs()[0], false);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n this.resizeObserver.observe(this.nav);\n requestAnimationFrame(() => this.updateScrollControls());\n\n // Update aria labels if the DOM changes\n this.mutationObserver = new MutationObserver((mutations) => {\n if (\n mutations.some((mutation) => {\n return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n })\n ) {\n setTimeout(() => this.setAriaLabels());\n }\n });\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n if (this.mutationObserver == null \|\| this.tabGroup == null \|\| this.nav == null \|\| this.resizeObserver == null) {\n return;\n }\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n\n /* Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n const tabs = this.getAllTabs();\n const tab = tabs.find((el) => el.panel === panel);\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n }\n\n private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n const slot = this.tabs?.querySelector('slot');\n if (slot == null) return [];\n\n return [...slot.assignedElements()].filter((el: Element) => {\n return includeDisabled\n ? el.tagName.toLowerCase() === 'six-tab'\n : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n }) as [HTMLSixTabElement];\n }\n\n private getAllPanels(): HTMLSixTabPanelElement[] {\n const slot = this.body?.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n HTMLSixTabPanelElement\n ];\n }\n\n private getActiveTab() {\n return this.getAllTabs().find((el) => el.active);\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.nav == null) return;\n\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = document.activeElement as HTMLSixTabElement;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n const tabs = this.getAllTabs();\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (event.key === 'ArrowLeft') {\n index = Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus({ preventScroll: true });\n this.setActiveTab(tabs[index]);\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n };\n\n private handleScrollLeft = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private handleScrollRight = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private updateScrollControls() {\n if (this.nav == null) return;\n\n this.hasScrollControls = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n }\n\n private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n if (this.nav == null) return;\n\n const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n if (oldIndicator != null && newIndicator != null) {\n flipAnimate(newIndicator, oldIndicator);\n }\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync tabs and panels\n this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab != null) {\n this.sixTabHide.emit({ name: previousTab.panel });\n }\n\n this.sixTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllTabs();\n const panels = this.getAllPanels();\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel != null) {\n tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n }\n });\n }\n\n render() {\n return (\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'tab-group': true,\n\n // Placements\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--left': this.placement === 'left',\n 'tab-group--right': this.placement === 'right',\n\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\">\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_left\"\n onClick={this.handleScrollLeft}\n />\n )}\n <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <slot name=\"nav\" />\n </div>\n </div>\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_right\"\n onClick={this.handleScrollRight}\n />\n )}\n </div>\n\n <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["flipAnimate","element","fromElement","options","duration","easing","fill","dimensionsTo","getBoundingClientRect","dimensionsFrom","deltaX","left","deltaY","top","deltaW","width","deltaH","height","animate","transformOrigin","transform","sixTabGroupCss","SixTabGroup","this","handleClick","event","target","tab","closest","tabGroup","host","setActiveTab","handleKeyDown","nav","includes","key","activeEl","document","activeElement","tagName","toLowerCase","tabs","getAllTabs","index","indexOf","length","Math","max","min","setFocus","preventScroll","placement","scrollIntoView","preventDefault","handleScrollLeft","scroll","scrollLeft","clientWidth","behavior","handleScrollRight","handleNoScrollControlsChange","updateScrollControls","componentDidLoad","observer","IntersectionObserver","entries","intersectionRatio","setAriaLabels","getActiveTab","unobserve","observe","resizeObserver","ResizeObserver","requestAnimationFrame","mutationObserver","MutationObserver","mutations","some","mutation","_a","attributeName","setTimeout","attributes","childList","subtree","disconnectedCallback","disconnect","show","panel","find","el","includeDisabled","slot","querySelector","assignedElements","filter","disabled","getAllPanels","body","active","hasScrollControls","noScrollControls","scrollWidth","emitEvents","newIndicator","shadowRoot","oldIndicator","_c","_b","activeTab","previousTab","map","name","sixTabHide","emit","sixTabShow","panels","setAttribute","getAttribute","render","h","part","ref","class","onClick","onKeyDown","exportparts","role"],"sources":["src/utils/animation.ts","src/components/six-tab-group/six-tab-group.scss?tag=six-tab-group&encapsulation=shadow","src/components/six-tab-group/six-tab-group.tsx"],"sourcesContent":["/*\n Animates a given `element` from the position and dimension of `fromElement` to\n * its current position and dimension. Can be useful to implement the FLIP animation technique.\n \n @see {@link https://css-tricks.com/animating-layouts-with-the-flip-technique/} for details on the FLIP technique.\n \n @param {Element} element - The element to animate.\n * @param {Element} fromElement - The element representing the initial position and dimensions.\n * @param {KeyframeAnimationOptions} [options={ duration: 150, easing: 'ease', fill: 'both' }] - Optional animation parameters.\n \n /\nexport function flipAnimate(\n element: Element,\n fromElement: Element,\n options: KeyframeAnimationOptions = {\n duration: 150,\n easing: 'ease',\n fill: 'both',\n }\n) {\n const dimensionsTo = fromElement.getBoundingClientRect();\n const dimensionsFrom = element.getBoundingClientRect();\n\n const deltaX = dimensionsTo.left - dimensionsFrom.left;\n const deltaY = dimensionsTo.top - dimensionsFrom.top;\n const deltaW = dimensionsTo.width / dimensionsFrom.width;\n const deltaH = dimensionsTo.height / dimensionsFrom.height;\n\n element.animate(\n [\n {\n transformOrigin: 'top left',\n transform: `translate(${deltaX}px, ${deltaY}px) scale(${deltaW}, ${deltaH})`,\n },\n {\n transformOrigin: 'top left',\n transform: 'none',\n },\n ],\n options\n );\n}\n","@import 'src/global/component';\n@import 'src/global/mixins/hide-scrollbar';\n\n:host {\n display: block;\n}\n\n.tab-group {\n display: flex;\n border: solid 1px transparent;\n border-radius: 0;\n\n .tab-group__tabs {\n display: flex;\n position: relative;\n }\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n position: relative;\n padding: 0 var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n bottom: 0;\n width: var(--six-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n left: 0;\n}\n\n.tab-group__scroll-button--right {\n right: 0;\n}\n\n// TOP\n.tab-group--top {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group__body {\n order: 2;\n }\n}\n\n// Bottom\n.tab-group--bottom {\n flex-direction: column;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__nav {\n display: flex;\n overflow-x: auto;\n @include hide-scrollbar();\n }\n\n .tab-group__tabs {\n flex: 1 1 auto;\n position: relative;\n flex-direction: row;\n }\n\n .tab-group__body {\n order: 1;\n }\n}\n\n// Left\n\n.tab-group--left {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 1;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 2;\n }\n}\n\n// Right\n.tab-group--right {\n flex-direction: row;\n\n .tab-group__nav-container {\n order: 2;\n }\n\n .tab-group__tabs {\n flex: 0 0 auto;\n flex-direction: column;\n }\n\n .tab-group__body {\n flex: 1 1 auto;\n order: 1;\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { scrollIntoView } from '../../utils/scroll';\nimport { flipAnimate } from '../../utils/animation';\n\nexport interface SixTabShowPayload {\n name: string;\n}\n\nexport interface SixTabHidePayload {\n name: string;\n}\n\n/*\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot nav - Used for grouping tabs in the tab group.\n * @slot - Used for grouping tab panels in the tab group.\n \n @part base - The component's base wrapper.\n * @part nav - The tab group navigation container.\n * @part tabs - The container that wraps the slotted tabs.\n * @part active-tab-indicator - An element that displays the currently selected tab. This is a child of the tab's container.\n * @part body - The tab group body where tab panels are slotted in.\n * @part scroll-button - The previous and next scroll buttons that appear when tabs are scrollable.\n /\n@Component({\n tag: 'six-tab-group',\n styleUrl: 'six-tab-group.scss',\n shadow: true,\n})\nexport class SixTabGroup {\n private activeTab?: HTMLSixTabElement;\n private body?: HTMLElement;\n private mutationObserver?: MutationObserver;\n private nav?: HTMLElement;\n private resizeObserver?: ResizeObserver;\n private tabGroup?: HTMLElement;\n private tabs?: HTMLElement;\n\n @Element() host!: HTMLSixTabGroupElement;\n\n @State() hasScrollControls = false;\n\n /* The placement of the tabs. /\n @Prop() placement: 'top' \| 'bottom' \| 'left' \| 'right' = 'top';\n\n /* Disables the scroll arrows that appear when tabs overflow. /\n @Prop() noScrollControls = false;\n\n @Watch('noScrollControls')\n handleNoScrollControlsChange() {\n this.updateScrollControls();\n }\n\n /* Emitted when a tab is shown. /\n @Event({ eventName: 'six-tab-show' }) sixTabShow!: EventEmitter<SixTabShowPayload>;\n\n /* Emitted when a tab is hidden. /\n @Event({ eventName: 'six-tab-hide' }) sixTabHide!: EventEmitter<SixTabHidePayload>;\n\n componentDidLoad() {\n if (this.tabGroup == null \|\| this.nav == null) return;\n\n // Set initial tab state when the tabs first become visible\n const observer = new IntersectionObserver((entries, observer) => {\n if (entries[0].intersectionRatio > 0) {\n this.setAriaLabels();\n this.setActiveTab(this.getActiveTab() \|\| this.getAllTabs()[0], false);\n observer.unobserve(entries[0].target);\n }\n });\n observer.observe(this.host);\n this.resizeObserver = new ResizeObserver(() => this.updateScrollControls());\n this.resizeObserver.observe(this.nav);\n requestAnimationFrame(() => this.updateScrollControls());\n\n // Update aria labels if the DOM changes\n this.mutationObserver = new MutationObserver((mutations) => {\n if (\n mutations.some((mutation) => {\n return !['aria-labelledby', 'aria-controls'].includes(mutation.attributeName ?? '');\n })\n ) {\n setTimeout(() => this.setAriaLabels());\n }\n });\n this.mutationObserver.observe(this.host, { attributes: true, childList: true, subtree: true });\n }\n\n disconnectedCallback() {\n if (this.mutationObserver == null \|\| this.tabGroup == null \|\| this.nav == null \|\| this.resizeObserver == null) {\n return;\n }\n this.mutationObserver.disconnect();\n this.resizeObserver.unobserve(this.nav);\n }\n\n /* Shows the specified tab panel. */\n @Method()\n async show(panel: string) {\n const tabs = this.getAllTabs();\n const tab = tabs.find((el) => el.panel === panel);\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n }\n\n private getAllTabs(includeDisabled = false): HTMLSixTabElement[] {\n const slot = this.tabs?.querySelector('slot');\n if (slot == null) return [];\n\n return [...slot.assignedElements()].filter((el: Element) => {\n return includeDisabled\n ? el.tagName.toLowerCase() === 'six-tab'\n : el.tagName.toLowerCase() === 'six-tab' && !(el as HTMLSixTabElement).disabled;\n }) as [HTMLSixTabElement];\n }\n\n private getAllPanels(): HTMLSixTabPanelElement[] {\n const slot = this.body?.querySelector('slot');\n if (slot == null) return [];\n return [...slot.assignedElements()].filter((el: Element) => el.tagName.toLowerCase() === 'six-tab-panel') as [\n HTMLSixTabPanelElement\n ];\n }\n\n private getActiveTab() {\n return this.getAllTabs().find((el) => el.active);\n }\n\n private handleClick = (event: MouseEvent) => {\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n if (tab != null) {\n this.setActiveTab(tab);\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (this.nav == null) return;\n\n const target = event.target as HTMLElement;\n const tab = target.closest('six-tab');\n const tabGroup = tab?.closest('six-tab-group');\n\n // Ensure the target tab is in this tab group\n if (tabGroup !== this.host) {\n return false;\n }\n\n // Move focus left or right\n if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n const activeEl = document.activeElement as HTMLSixTabElement;\n\n if (activeEl && activeEl.tagName.toLowerCase() === 'six-tab') {\n const tabs = this.getAllTabs();\n let index = tabs.indexOf(activeEl);\n\n if (event.key === 'Home') {\n index = 0;\n } else if (event.key === 'End') {\n index = tabs.length - 1;\n } else if (event.key === 'ArrowLeft') {\n index = Math.max(0, index - 1);\n } else if (event.key === 'ArrowRight') {\n index = Math.min(tabs.length - 1, index + 1);\n }\n\n tabs[index].setFocus({ preventScroll: true });\n this.setActiveTab(tabs[index]);\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(tabs[index], this.nav, 'horizontal');\n }\n\n event.preventDefault();\n }\n }\n };\n\n private handleScrollLeft = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft - this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private handleScrollRight = () => {\n if (this.nav == null) return;\n\n this.nav.scroll({\n left: this.nav.scrollLeft + this.nav.clientWidth,\n behavior: 'smooth',\n });\n };\n\n private updateScrollControls() {\n if (this.nav == null) return;\n\n this.hasScrollControls = this.noScrollControls\n ? false\n : ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth;\n }\n\n private setActiveTab(tab: HTMLSixTabElement, emitEvents = true) {\n if (this.nav == null) return;\n\n const newIndicator = tab?.shadowRoot?.querySelector('.tab__indicator');\n const oldIndicator = this.getActiveTab()?.shadowRoot?.querySelector('.tab__indicator');\n\n if (oldIndicator != null && newIndicator != null) {\n flipAnimate(newIndicator, oldIndicator);\n }\n\n if (tab !== this.activeTab && !tab.disabled) {\n const previousTab = this.activeTab;\n this.activeTab = tab;\n\n // Sync tabs and panels\n this.getAllTabs().map((el) => (el.active = el === this.activeTab));\n this.getAllPanels().map((el) => (el.active = el.name === this.activeTab?.panel));\n\n if (['top', 'bottom'].includes(this.placement)) {\n scrollIntoView(this.activeTab, this.nav, 'horizontal');\n }\n\n // Emit events\n if (emitEvents) {\n if (previousTab != null) {\n this.sixTabHide.emit({ name: previousTab.panel });\n }\n\n this.sixTabShow.emit({ name: this.activeTab.panel });\n }\n }\n }\n\n private setAriaLabels() {\n const tabs = this.getAllTabs();\n const panels = this.getAllPanels();\n\n // Link each tab with its corresponding panel\n tabs.map((tab) => {\n const panel = panels.find((el) => el.name === tab.panel);\n if (panel != null) {\n tab.setAttribute('aria-controls', panel.getAttribute('id') ?? '');\n panel.setAttribute('aria-labelledby', tab.getAttribute('id') ?? '');\n }\n });\n }\n\n render() {\n return (\n <div\n part=\"base\"\n ref={(el) => (this.tabGroup = el)}\n class={{\n 'tab-group': true,\n\n // Placements\n 'tab-group--top': this.placement === 'top',\n 'tab-group--bottom': this.placement === 'bottom',\n 'tab-group--left': this.placement === 'left',\n 'tab-group--right': this.placement === 'right',\n\n 'tab-group--has-scroll-controls': this.hasScrollControls,\n }}\n onClick={this.handleClick}\n onKeyDown={this.handleKeyDown}\n >\n <div class=\"tab-group__nav-container\">\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--left\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_left\"\n onClick={this.handleScrollLeft}\n />\n )}\n <div ref={(el) => (this.nav = el)} key=\"nav\" part=\"nav\" class=\"tab-group__nav\">\n <div ref={(el) => (this.tabs = el)} part=\"tabs\" class=\"tab-group__tabs\" role=\"tablist\">\n <slot name=\"nav\" />\n </div>\n </div>\n {this.hasScrollControls && (\n <six-icon-button\n class=\"tab-group__scroll-button tab-group__scroll-button--right\"\n exportparts=\"base:scroll-button\"\n name=\"chevron_right\"\n onClick={this.handleScrollRight}\n />\n )}\n </div>\n\n <div ref={(el) => (this.body = el)} part=\"body\" class=\"tab-group__body\">\n <slot />\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}

package/dist/ui-library/p-1f5840b5.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as i}from"./p-af15381b.js";const s=":host{display:block}a{text-decoration:none;display:block}.sidebar-item{padding:8px 8px 16px 16px;font-size:0.9rem;color:var(--six-sidebar-color);cursor:pointer;font-family:var(--six-font-family)}.sidebar-item:hover:not(.sidebar-item--disabled){color:var(--six-color-web-rock-600)}.sidebar-item.sidebar-item--disabled{outline:none;color:var(--six-input-color-disabled);cursor:not-allowed}.sidebar-item.sidebar-item--selected{font-weight:var(--six-font-weight-bold)}";const t=class{constructor(i){e(this,i);this.value="";this.selected=false;this.disabled=false;this.href=undefined}render(){const e=this.href!=null?"a":"div";return i(e,{class:{"sidebar-item":true,"sidebar-item--selected":this.selected,"sidebar-item--disabled":this.disabled},role:"menuitem",href:this.href,"aria-selected":this.selected?"true":"false","aria-disabled":this.disabled?"true":"false"},i("slot",null))}};t.style=s;export{t as six_sidebar_item};
2	+ //# sourceMappingURL=p-1f5840b5.entry.js.map

package/dist/ui-library/p-1f5840b5.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["sixSidebarItemCss","SixSidebarItem","render","Tag","this","href","h","class","selected","disabled","role"],"sources":["src/components/six-sidebar-item/six-sidebar-item.scss?tag=six-sidebar-item&encapsulation=shadow","src/components/six-sidebar-item/six-sidebar-item.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\na {\n text-decoration: none;\n display: block;\n}\n\n.sidebar-item {\n padding: 8px 8px 16px 16px;\n font-size: 0.9rem;\n color: var(--six-sidebar-color);\n cursor: pointer;\n font-family: var(--six-font-family);\n\n &:hover:not(.sidebar-item--disabled) {\n color: var(--six-color-web-rock-600);\n }\n\n &.sidebar-item--disabled {\n outline: none;\n color: var(--six-input-color-disabled);\n cursor: not-allowed;\n }\n\n &.sidebar-item--selected {\n font-weight: var(--six-font-weight-bold);\n }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested displayed text of the item.\n */\n\n@Component({\n tag: 'six-sidebar-item',\n styleUrl: 'six-sidebar-item.scss',\n shadow: true,\n})\nexport class SixSidebarItem {\n /** A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. */\n @Prop({ reflect: true }) value = '';\n\n /** Set to true to draw the item in a selected state. */\n @Prop({ reflect: true }) selected = false;\n\n /** Set to true to draw the sidebar item in a disabled state. */\n @Prop({ reflect: true }) disabled = false;\n\n /**\n * Provide if the item should be rendered as anchor tag.\n * Note, that the href is added automatically when using routerLink in Angular.\n */\n @Prop({ reflect: true }) href: string | undefined;\n\n render() {\n const Tag = this.href != null ? 'a' : 'div';\n return (\n <Tag\n class={{\n 'sidebar-item': true,\n 'sidebar-item--selected': this.selected,\n 'sidebar-item--disabled': this.disabled,\n }}\n role=\"menuitem\"\n href={this.href}\n aria-selected={this.selected ? 'true' : 'false'}\n aria-disabled={this.disabled ? 'true' : 'false'}\n >\n <slot></slot>\n </Tag>\n );\n }\n}\n"],"mappings":"2CAAA,MAAMA,EAAoB,md,MCcbC,EAAc,M,oCAEQ,G,cAGG,M,cAGA,M,oBAQpC,MAAAC,GACE,MAAMC,EAAMC,KAAKC,MAAQ,KAAO,IAAM,MACtC,OACEC,EAACH,EAAG,CACFI,MAAO,CACL,eAAgB,KAChB,yBAA0BH,KAAKI,SAC/B,yBAA0BJ,KAAKK,UAEjCC,KAAK,WACLL,KAAMD,KAAKC,KAAI,gBACAD,KAAKI,SAAW,OAAS,QAAO,gBAChCJ,KAAKK,SAAW,OAAS,SAExCH,EAAA,a"}

package/dist/ui-library/p-28cc013e.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as t,h as r,g as i}from"./p-af15381b.js";import{h as n}from"./p-0cebf1d2.js";import{s}from"./p-842b492e.js";const a=":host{position:relative;box-sizing:border-box}:host ,:host :before,:host :after{box-sizing:border-box}:host{display:inline-block;width:auto;cursor:pointer}.button{display:inline-flex;align-items:stretch;justify-content:center;width:100%;border-style:solid;border-width:var(--six-border-width);border-radius:0;font-family:var(--six-font-family);font-weight:var(--six-font-weight-semibold);text-decoration:none;user-select:none;white-space:nowrap;vertical-align:middle;padding:0;transition:var(--six-transition-fast) background-color, var(--six-transition-fast) color, var(--six-transition-fast) border, var(--six-transition-fast) box-shadow;cursor:inherit}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button.button--disabled{pointer-events:none}.button ::slotted(six-icon){pointer-events:none;transform:translateY(-1.5px)}.button-wrapper--disabled{cursor:not-allowed}.button__prefix,.button__suffix{flex:0 0 auto;display:flex;align-items:center}.button:focus-visible{outline:var(--six-focus-ring);outline-offset:var(--six-focus-ring-offset)}.button.button--secondary{background-color:var(--six-color-white);border-color:var(--six-color-web-rock-900);color:var(--six-color-web-rock-900)}.button.button--secondary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--secondary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-100)}.button.button--secondary:focus:not(.button--disabled){background-color:var(--six-color-web-rock-100);border-color:var(--six-color-web-rock-400)}.button.button--secondary:active:not(.button--disabled){background-color:var(--six-color-web-rock-300);border-color:var(--six-color-web-rock-900);border-width:1px}.button.button--primary{background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.button.button--primary.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--primary:hover:not(.button--disabled){background-color:var(--six-color-web-rock-800);border-color:var(--six-color-web-rock-800)}.button.button--primary:active:not(.button--disabled){background-color:var(--six-color-web-rock-900);border-color:var(--six-color-web-rock-900);opacity:70%}.button.button--link{background-color:transparent;border-color:transparent;color:var(--six-color-action-500)}.button.button--link.button--disabled{color:var(--six-color-web-rock-400)}.button.button--link:hover:not(.button--disabled){color:var(--six-color-action-600)}.button.button--link:active:not(.button--disabled){color:var(--six-color-action-light-to-be-defined)}.button.button--danger{background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);color:var(--six-color-white)}.button.button--danger.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--danger:hover:not(.button--disabled){background-color:var(--six-color-danger-900);border-color:var(--six-color-danger-900)}.button.button--danger:active:not(.button--disabled){background-color:var(--six-color-danger-800);border-color:var(--six-color-danger-800);opacity:70%}.button.button--warning{background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.button.button--warning.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--warning:hover:not(.button--disabled){background-color:var(--six-color-warning-800);border-color:var(--six-color-warning-800)}.button.button--warning:active:not(.button--disabled){background-color:var(--six-color-warning-700);border-color:var(--six-color-warning-700);opacity:70%}.button.button--success{background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.button.button--success.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--success:hover:not(.button--disabled){background-color:var(--six-color-success-600);border-color:var(--six-color-success-600)}.button.button--success:active:not(.button--disabled){background-color:var(--six-color-success-500);border-color:var(--six-color-success-500);opacity:70%}.button.button--action{background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);color:var(--six-color-white)}.button.button--action.button--disabled{background-color:var(--six-color-web-rock-400);border-color:var(--six-color-web-rock-400);color:var(--six-color-web-rock-700)}.button.button--action:hover:not(.button--disabled){background-color:var(--six-color-action-600);border-color:var(--six-color-action-600)}.button.button--action:active:not(.button--disabled){background-color:var(--six-color-action-500);border-color:var(--six-color-action-500);opacity:70%}.button--small{font-size:var(--six-button-font-size-small);height:var(--six-height-small);line-height:calc(var(--six-height-small) - var(--six-border-width) 2)}.button--medium{font-size:var(--six-button-font-size-medium);height:var(--six-height-medium);line-height:calc(var(--six-height-medium) - var(--six-border-width) * 2)}.button--large{font-size:var(--six-button-font-size-large);height:var(--six-height-large);line-height:calc(var(--six-height-large) - var(--six-border-width) * 2)}.button--pill.button--small{border-radius:var(--six-height-small)}.button--pill.button--medium{border-radius:var(--six-height-medium)}.button--pill.button--large{border-radius:var(--six-height-large)}.button--circle{padding-left:0;padding-right:0;font-size:revert}.button--circle.button--small{width:var(--six-height-small);border-radius:50%}.button--circle.button--medium{width:var(--six-height-medium);border-radius:50%}.button--circle.button--large{width:var(--six-height-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__prefix svg,.button--circle .button__suffix svg,.button--circle .button__caret svg{color:var(--six-color-web-rock-900)}.button--caret .button__suffix{display:none}.button--caret .button__caret{display:flex;align-items:center}.button--caret .button__caret svg{color:var(--six-color-web-rock-900);width:1em;height:1em}.button--primary .button__caret svg,.button--action .button__caret svg,.button--danger .button__caret svg{color:var(--six-color-white)}.button--loading{position:relative;cursor:wait}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading six-spinner{--indicator-color:currentColor;position:absolute;height:1em;width:1em;top:calc(50% - 0.5em);left:calc(50% - 0.5em)}.button ::slotted(six-badge){position:absolute;top:0;right:0;transform:translateY(-50%) translateX(50%);pointer-events:none}.button--has-label.button--small .button__label{padding:0 var(--six-spacing-small)}.button--has-label.button--medium .button__label{padding:0 var(--six-spacing-medium)}.button--has-label.button--large .button__label{padding:0 var(--six-spacing-large)}.button--has-prefix.button--small{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--small .button__label{padding-left:var(--six-spacing-x-small)}.button--has-prefix.button--medium{padding-left:var(--six-spacing-small)}.button--has-prefix.button--medium .button__label{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large{padding-left:var(--six-spacing-small)}.button--has-prefix.button--large .button__label{padding-left:var(--six-spacing-small)}.button--has-suffix.button--small,.button--caret.button--small{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label{padding-right:var(--six-spacing-x-small)}.button--has-suffix.button--medium,.button--caret.button--medium{padding-right:var(--six-spacing-small)}.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-right:var(--six-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-right:var(--six-spacing-small)}";const e=class{constructor(r){o(this,r);this.sixBlur=t(this,"six-button-blur",7);this.sixFocus=t(this,"six-button-focus",7);this.handleSlotChange=()=>{this.hasLabel=n(this.host);this.hasPrefix=n(this.host,"prefix");this.hasSuffix=n(this.host,"suffix")};this.handleBlur=()=>{this.hasFocus=false;this.sixBlur.emit()};this.handleFocus=()=>{this.hasFocus=true;this.sixFocus.emit()};this.handleClick=o=>{if(this.disabled\|\|this.loading){o.preventDefault();o.stopPropagation();return}if(this.submit){o.preventDefault();s(this.host)}};this.hasFocus=false;this.hasLabel=false;this.hasPrefix=false;this.hasSuffix=false;this.type="primary";this.size="medium";this.caret=false;this.disabled=false;this.loading=false;this.pill=false;this.circle=false;this.submit=false;this.reset=false;this.name="";this.value="";this.href=undefined;this.target=undefined;this.download=undefined}componentWillLoad(){this.handleSlotChange()}async setFocus(o){var t;(t=this.nativeButton)===null\|\|t===void 0?void 0:t.focus(o)}async removeFocus(){var o;(o=this.nativeButton)===null\|\|o===void 0?void 0:o.blur()}render(){const o=this.href!=null;const t=!o;const i=o?"a":"button";return r("div",{onClick:this.handleClick,class:{"button-wrapper--disabled":this.disabled}},r(i,{ref:o=>this.nativeButton=o,part:"base",class:{button:true,"button--secondary":this.type==="secondary","button--primary":this.type==="primary","button--link":this.type==="link","button--success":this.type==="success","button--warning":this.type==="warning","button--danger":this.type==="danger","button--action":this.type==="action","button--small":this.size==="small","button--medium":this.size==="medium","button--large":this.size==="large","button--caret":this.caret,"button--circle":this.circle,"button--disabled":this.disabled,"button--focused":this.hasFocus,"button--loading":this.loading,"button--pill":this.pill,"button--has-label":this.hasLabel,"button--has-prefix":this.hasPrefix,"button--has-suffix":this.hasSuffix},disabled:t?this.disabled:undefined,tabindex:this.disabled?"-1":undefined,type:t?this.submit?"submit":this.reset?"reset":"button":undefined,name:t?this.name:undefined,value:t?this.value:undefined,href:o?this.href:undefined,target:o&&this.target!=null?this.target:undefined,download:o&&this.download!=null?this.download:undefined,rel:o&&this.target!=null?"noreferrer noopener":undefined,onBlur:this.handleBlur,onFocus:this.handleFocus,"data-testid":"button"},r("span",{part:"prefix",class:"button__prefix"},r("slot",{onSlotchange:this.handleSlotChange,name:"prefix"})),r("span",{part:"label",class:"button__label"},r("slot",{onSlotchange:this.handleSlotChange})),r("span",{part:"suffix",class:"button__suffix"},r("slot",{onSlotchange:this.handleSlotChange,name:"suffix"})),this.caret&&r("span",{part:"caret",class:"button__caret"},r("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"},r("polyline",{points:"6 9 12 15 18 9"}))),this.loading&&r("six-spinner",null)))}get host(){return i(this)}};e.style=a;export{e as six_button};
2	+ //# sourceMappingURL=p-28cc013e.entry.js.map