@six-group/ui-library 4.0.1 → 4.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{scroll-03678de1.js → scroll-2c4200dc.js} +1 -2
- package/dist/cjs/scroll-2c4200dc.js.map +1 -0
- package/dist/cjs/six-button.cjs.entry.js +2 -2
- package/dist/cjs/six-button.cjs.entry.js.map +1 -1
- package/dist/cjs/six-details.cjs.entry.js +1 -1
- package/dist/cjs/six-details.cjs.entry.js.map +1 -1
- package/dist/cjs/six-dialog.cjs.entry.js +1 -1
- package/dist/cjs/six-drawer.cjs.entry.js +1 -1
- package/dist/cjs/six-icon-button.cjs.entry.js +1 -1
- package/dist/cjs/six-icon-button.cjs.entry.js.map +1 -1
- package/dist/cjs/six-sidebar-item-group.cjs.entry.js +2 -1
- package/dist/cjs/six-sidebar-item-group.cjs.entry.js.map +1 -1
- package/dist/cjs/six-sidebar.cjs.entry.js +2 -2
- package/dist/cjs/six-sidebar.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tab-group.cjs.entry.js +45 -50
- package/dist/cjs/six-tab-group.cjs.entry.js.map +1 -1
- package/dist/cjs/six-tab.cjs.entry.js +19 -3
- package/dist/cjs/six-tab.cjs.entry.js.map +1 -1
- package/dist/collection/components/six-button/six-button.css +5 -30
- package/dist/collection/components/six-button/six-button.js +1 -1
- package/dist/collection/components/six-button/six-button.js.map +1 -1
- package/dist/collection/components/six-details/six-details.css +3 -1
- package/dist/collection/components/six-icon-button/six-icon-button.css +4 -4
- package/dist/collection/components/six-sidebar/six-sidebar.css +0 -1
- package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.css +4 -0
- package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.js +1 -0
- package/dist/collection/components/six-sidebar-item-group/six-sidebar-item-group.js.map +1 -1
- package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js +2 -2
- package/dist/collection/components/six-sidebar-item-group/test/six-sidebar-item-group.spec.js.map +1 -1
- package/dist/collection/components/six-tab/six-tab.css +54 -5
- package/dist/collection/components/six-tab/six-tab.js +18 -2
- package/dist/collection/components/six-tab/six-tab.js.map +1 -1
- package/dist/collection/components/six-tab-group/six-tab-group.css +0 -31
- package/dist/collection/components/six-tab-group/six-tab-group.js +10 -51
- package/dist/collection/components/six-tab-group/six-tab-group.js.map +1 -1
- package/dist/collection/utils/animation.js +34 -0
- package/dist/collection/utils/animation.js.map +1 -0
- package/dist/components/scroll.js +1 -1
- package/dist/components/six-button.js +2 -2
- package/dist/components/six-button.js.map +1 -1
- package/dist/components/six-details2.js +1 -1
- package/dist/components/six-details2.js.map +1 -1
- package/dist/components/six-icon-button2.js +1 -1
- package/dist/components/six-icon-button2.js.map +1 -1
- package/dist/components/six-sidebar-item-group.js +2 -1
- package/dist/components/six-sidebar-item-group.js.map +1 -1
- package/dist/components/six-sidebar.js +1 -1
- package/dist/components/six-sidebar.js.map +1 -1
- package/dist/components/six-tab-group.js +45 -50
- package/dist/components/six-tab-group.js.map +1 -1
- package/dist/components/six-tab.js +19 -3
- package/dist/components/six-tab.js.map +1 -1
- package/dist/components.json +7 -8
- package/dist/esm/{scroll-3fb087a2.js → scroll-774762d6.js} +2 -2
- package/dist/esm/{scroll-3fb087a2.js.map → scroll-774762d6.js.map} +1 -1
- package/dist/esm/six-button.entry.js +2 -2
- package/dist/esm/six-button.entry.js.map +1 -1
- package/dist/esm/six-details.entry.js +1 -1
- package/dist/esm/six-details.entry.js.map +1 -1
- package/dist/esm/six-dialog.entry.js +1 -1
- package/dist/esm/six-drawer.entry.js +1 -1
- package/dist/esm/six-icon-button.entry.js +1 -1
- package/dist/esm/six-icon-button.entry.js.map +1 -1
- package/dist/esm/six-sidebar-item-group.entry.js +2 -1
- package/dist/esm/six-sidebar-item-group.entry.js.map +1 -1
- package/dist/esm/six-sidebar.entry.js +2 -2
- package/dist/esm/six-sidebar.entry.js.map +1 -1
- package/dist/esm/six-tab-group.entry.js +45 -50
- package/dist/esm/six-tab-group.entry.js.map +1 -1
- package/dist/esm/six-tab.entry.js +19 -3
- package/dist/esm/six-tab.entry.js.map +1 -1
- package/dist/types/components/six-tab-group/six-tab-group.d.ts +0 -3
- package/dist/types/utils/animation.d.ts +12 -0
- package/dist/ui-library/{p-1f18768a.js → p-052aa8d3.js} +2 -2
- package/dist/ui-library/p-1286ab62.entry.js +2 -0
- package/dist/ui-library/p-1286ab62.entry.js.map +1 -0
- package/dist/ui-library/p-22c9b8c3.entry.js +2 -0
- package/dist/ui-library/p-22c9b8c3.entry.js.map +1 -0
- package/dist/ui-library/p-3f1a5ecb.entry.js +2 -0
- package/dist/ui-library/p-3f1a5ecb.entry.js.map +1 -0
- package/dist/ui-library/p-5800663b.entry.js +2 -0
- package/dist/ui-library/p-5800663b.entry.js.map +1 -0
- package/dist/ui-library/p-5ba3a0fe.entry.js +2 -0
- package/dist/ui-library/p-5ba3a0fe.entry.js.map +1 -0
- package/dist/ui-library/p-66fe54b3.entry.js +2 -0
- package/dist/ui-library/p-66fe54b3.entry.js.map +1 -0
- package/dist/ui-library/{p-99e24daf.entry.js → p-a2035543.entry.js} +2 -2
- package/dist/ui-library/p-cba69e9d.entry.js +2 -0
- package/dist/ui-library/p-cba69e9d.entry.js.map +1 -0
- package/dist/ui-library/{p-19ed7a4c.entry.js → p-d1bda563.entry.js} +2 -2
- package/dist/ui-library/ui-library.css +2 -2
- package/dist/ui-library/ui-library.esm.js +1 -1
- package/package.json +1 -1
- package/dist/cjs/scroll-03678de1.js.map +0 -1
- package/dist/collection/components/six-tab/test/six-tab.spec.js +0 -20
- package/dist/collection/components/six-tab/test/six-tab.spec.js.map +0 -1
- package/dist/collection/components/six-tab-group/test/six-tab-group.spec.js +0 -45
- package/dist/collection/components/six-tab-group/test/six-tab-group.spec.js.map +0 -1
- package/dist/ui-library/p-1256cc0a.entry.js +0 -2
- package/dist/ui-library/p-1256cc0a.entry.js.map +0 -1
- package/dist/ui-library/p-21b3b321.entry.js +0 -2
- package/dist/ui-library/p-21b3b321.entry.js.map +0 -1
- package/dist/ui-library/p-29ac3d7d.entry.js +0 -2
- package/dist/ui-library/p-29ac3d7d.entry.js.map +0 -1
- package/dist/ui-library/p-2a141e10.entry.js +0 -2
- package/dist/ui-library/p-2a141e10.entry.js.map +0 -1
- package/dist/ui-library/p-4705a51e.entry.js +0 -2
- package/dist/ui-library/p-4705a51e.entry.js.map +0 -1
- package/dist/ui-library/p-83864cfe.entry.js +0 -2
- package/dist/ui-library/p-83864cfe.entry.js.map +0 -1
- package/dist/ui-library/p-ee8342e1.entry.js +0 -2
- package/dist/ui-library/p-ee8342e1.entry.js.map +0 -1
- /package/dist/ui-library/{p-1f18768a.js.map → p-052aa8d3.js.map} +0 -0
- /package/dist/ui-library/{p-99e24daf.entry.js.map → p-a2035543.entry.js.map} +0 -0
- /package/dist/ui-library/{p-19ed7a4c.entry.js.map → p-d1bda563.entry.js.map} +0 -0
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as s,h as t}from"./p-6153045b.js";import{s as e}from"./p-052aa8d3.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block;height:100%}.sidebar__container{height:100%;overflow:auto}.sidebar__container.sidebar--open{box-shadow:var(--six-elevation-1dp)}.sidebar__container:not(.sidebar--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.sidebar--left{color:var(--six-sidebar-color);background-color:var(--six-sidebar-background-color);transition:var(--six-transition-medium) margin-left;background-size:300vw 70%;background-position:bottom;background-repeat:no-repeat}.sidebar--right{transition:var(--six-transition-medium) margin-right}.sidebar--open.sidebar--left{margin-right:2px}.sidebar--open.sidebar--right{margin-left:2px}";const n=i=>{var s;return((s=i===null||i===void 0?void 0:i.tagName)===null||s===void 0?void 0:s.toLowerCase())==="six-sidebar-item-group"};const r=class{constructor(t){i(this,t);this.sixShow=s(this,"six-sidebar-show",7);this.sixAfterShow=s(this,"six-sidebar-after-show",7);this.sixHide=s(this,"six-sidebar-hide",7);this.sixAfterHide=s(this,"six-sidebar-after-hide",7);this.sixInitialFocus=s(this,"six-sidebar-initial-focus",7);this.willShow=false;this.willHide=false;this.handleTransitionEnd=i=>{const s=i.target;if(i.type==="transitionend"&&s.classList.contains("sidebar__container")){this.resetTransitionVariables()}};this.closeSiblingDetailsOnShow=i=>{const s=i.target;if(this.sidebar!=null){e(s,this.sidebar)}const t=i=>{var t;let e=s;while(i(e)!=null){e=i(e);if(n(e)){const i=(t=e===null||e===void 0?void 0:e.shadowRoot)===null||t===void 0?void 0:t.querySelector("six-details");if(i!=null){i.open=false}}}};t((i=>i===null||i===void 0?void 0:i.previousElementSibling));t((i=>i===null||i===void 0?void 0:i.nextElementSibling))};this.isVisible=false;this.position="left";this.open=false;this.width="16rem";this.toggled=false}handleOpenChange(){this.open?this.show():this.hide()}componentWillLoad(){if(this.open){void this.show();this.resetTransitionVariables()}}componentDidRender(){this.setupTogglableMenuItems()}disconnectedCallback(){var i;(i=this.sidebar)===null||i===void 0?void 0:i.removeEventListener("six-details-show",this.closeSiblingDetailsOnShow)}setupTogglableMenuItems(){if(!this.toggled||this.sidebar==null)return;this.markAllMenuItemsAsSelectableEmpty();this.sidebar.addEventListener("six-details-show",this.closeSiblingDetailsOnShow)}markAllMenuItemsAsSelectableEmpty(){var i;const s=(i=this.sidebar)===null||i===void 0?void 0:i.querySelector("slot");const t=(s===null||s===void 0?void 0:s.assignedElements())||[];const e=[];while(t.length>0){const i=t.pop();if((i===null||i===void 0?void 0:i.shadowRoot)==null){continue}const s=i.shadowRoot.querySelectorAll("six-details");e.push(...s);const o=Array.from(i.children).filter(n);t.push(...o)}e.forEach((i=>i.selectableEmpty=true))}async toggle(){if(this.willShow||this.willHide){return}if(this.open){await this.hide()}else{await this.show()}}async show(){if(this.willShow){return}const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true}async hide(){if(this.willHide){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false}async selectItemByIndex(i){if(this.sidebar==null)return;const s=this.sidebar.querySelector("slot");const t=((s===null||s===void 0?void 0:s.assignedElements())||[]).flatMap((i=>{var s;const t=(s=i.shadowRoot)===null||s===void 0?void 0:s.querySelector("six-details");if(t==null){return[]}return[t]}));if(i<0||i>t.length-1){console.error(`Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${i}`);return}await t[i].show()}async selectItemByName(i){var s,t,e;const o=(s=this.sidebar)===null||s===void 0?void 0:s.querySelector("slot");const n=o===null||o===void 0?void 0:o.assignedElements();if(n==null){return}const r=n.findIndex((s=>(s===null||s===void 0?void 0:s.name)===i));const a=(e=(t=n.at(r))===null||t===void 0?void 0:t.shadowRoot)===null||e===void 0?void 0:e.querySelector("six-details");await(a===null||a===void 0?void 0:a.show())}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return t("host",{class:"six-sidebar"},t("div",{class:{sidebar__container:true,"sidebar--visible":this.isVisible,"sidebar--open":this.open,"sidebar--left":this.position==="left","sidebar--right":this.position==="right"},style:{width:this.width,[`margin-${this.position}`]:this.open?"0":`calc(1rem - ${this.width})`},ref:i=>this.sidebar=i,"aria-hidden":this.open?"false":"true",onTransitionEnd:this.handleTransitionEnd},t("slot",null)))}static get watchers(){return{open:["handleOpenChange"]}}};r.style=o;export{r as six_sidebar};
|
|
2
|
+
//# sourceMappingURL=p-5800663b.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixSidebarCss","isSidebarItemGroup","node","_a","tagName","toLowerCase","SixSidebar","this","willShow","willHide","handleTransitionEnd","event","target","type","classList","contains","resetTransitionVariables","closeSiblingDetailsOnShow","clickedMenuItem","sidebar","scrollIntoView","closeAllSiblingsBySiblingProperty","getSibling","detailsElement","shadowRoot","querySelector","open","previousElementSibling","nextElementSibling","handleOpenChange","show","hide","componentWillLoad","componentDidRender","setupTogglableMenuItems","disconnectedCallback","removeEventListener","toggled","markAllMenuItemsAsSelectableEmpty","addEventListener","slot","nodes","assignedElements","menuItems","length","pop","menuItemsForCurrentNode","querySelectorAll","push","newItemGroups","Array","from","children","filter","forEach","details","selectableEmpty","toggle","sixShow","emit","defaultPrevented","isVisible","sixHide","selectItemByIndex","index","menuItemsOnRootLevel","flatMap","el","console","error","selectItemByName","value","sidebarItemGroups","indexOfSelectedElement","findIndex","name","selectedItem","_c","_b","at","sixAfterShow","sixAfterHide","render","h","class","sidebar__container","position","style","width","ref","onTransitionEnd"],"sources":["src/components/six-sidebar/six-sidebar.scss?tag=six-sidebar&encapsulation=shadow","src/components/six-sidebar/six-sidebar.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n@import 'src/global/mixins/scrollbar';\n\n:host {\n display: block;\n height: 100%;\n}\n\n.sidebar {\n &__container {\n // scroll\n height: 100%;\n overflow: auto;\n\n &.sidebar--open {\n box-shadow: var(--six-elevation-1dp);\n }\n\n &:not(.sidebar--visible) {\n @include hidden;\n }\n }\n\n &--left {\n color: var(--six-sidebar-color);\n background-color: var(--six-sidebar-background-color);\n // collapse\n transition: var(--six-transition-medium) margin-left;\n // six background\n background-size: 300vw 70%;\n background-position: bottom;\n background-repeat: no-repeat;\n }\n\n &--right {\n // collapse\n transition: var(--six-transition-medium) margin-right;\n }\n\n // if the sidebar is embedded within six-root it cuts-off the border styling, for thus we need to guarante a margin\n &--open {\n &.sidebar--left {\n margin-right: 2px;\n }\n\n &.sidebar--right {\n margin-left: 2px;\n }\n }\n}\n","import { Component, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { EmptyPayload } from '../../utils/types';\nimport { scrollIntoView } from '../../utils/scroll';\n\nconst isSidebarItemGroup = (node?: Element | null): boolean =>\n node?.tagName?.toLowerCase() === 'six-sidebar-item-group';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested side bar [group] items.\n */\n\n@Component({\n tag: 'six-sidebar',\n styleUrl: 'six-sidebar.scss',\n shadow: true,\n})\nexport class SixSidebar {\n private willShow = false;\n private willHide = false;\n\n private sidebar?: HTMLElement;\n\n @State() isVisible = false;\n\n /** Sidebar position */\n @Prop() position: 'left' | 'right' = 'left';\n\n /** Indicates whether the sidebar is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** Sidebar width */\n @Prop() width = '16rem';\n\n /** Define whether sidebar is toggled meaning only one menu can be open at the same time*/\n @Prop() toggled = false;\n\n /** Emitted when the sidebar opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-sidebar-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the sidebar opens and all transitions are complete. */\n @Event({ eventName: 'six-sidebar-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the sidebar closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-sidebar-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the sidebar closes and all transitions are complete. */\n @Event({ eventName: 'six-sidebar-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /**\n * Emitted when the sidebar opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the sidebar, such as an input or button.\n */\n @Event({ eventName: 'six-sidebar-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.type === 'transitionend' && target.classList.contains('sidebar__container')) {\n this.resetTransitionVariables();\n }\n };\n\n componentWillLoad() {\n // Show on init if open\n if (this.open) {\n void this.show();\n // if the sidebar is open by default we need to manually reset the\n // transition variables since there will be no transition event\n this.resetTransitionVariables();\n }\n }\n\n componentDidRender() {\n this.setupTogglableMenuItems();\n }\n\n disconnectedCallback() {\n this.sidebar?.removeEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private closeSiblingDetailsOnShow = (event: Event) => {\n const clickedMenuItem = event.target as HTMLElement;\n if (this.sidebar != null) {\n scrollIntoView(clickedMenuItem, this.sidebar);\n }\n\n const closeAllSiblingsBySiblingProperty = (\n getSibling: (node: Element | null | undefined) => Element | null | undefined\n ) => {\n let node: Element | null | undefined = clickedMenuItem;\n while (getSibling(node) != null) {\n node = getSibling(node);\n if (isSidebarItemGroup(node)) {\n const detailsElement = node?.shadowRoot?.querySelector('six-details');\n if (detailsElement != null) {\n detailsElement.open = false;\n }\n }\n }\n };\n\n // close all previous siblings\n closeAllSiblingsBySiblingProperty((node) => node?.previousElementSibling);\n // close all further siblings\n closeAllSiblingsBySiblingProperty((node) => node?.nextElementSibling);\n };\n\n private setupTogglableMenuItems() {\n if (!this.toggled || this.sidebar == null) return;\n this.markAllMenuItemsAsSelectableEmpty();\n this.sidebar.addEventListener('six-details-show', this.closeSiblingDetailsOnShow);\n }\n\n private markAllMenuItemsAsSelectableEmpty() {\n // when you have a toggled menu you also want to close other menu items when you click on an item without children\n // nice benefit this item will then also be highlighted\n const slot = this.sidebar?.querySelector('slot');\n const nodes = slot?.assignedElements() || [];\n\n // since we don't just want to make the top level empty menuItems selectable in toggled mode,\n // but also nested items we need to traverse the whole menu item tree\n const menuItems = [];\n while (nodes.length > 0) {\n const node = nodes.pop();\n if (node?.shadowRoot == null) {\n continue;\n }\n\n // collect six-details in the current shadowDOM\n const menuItemsForCurrentNode = node.shadowRoot.querySelectorAll('six-details');\n menuItems.push(...menuItemsForCurrentNode);\n\n // collect all six-sidebar-item-group children of the current node to afterwards check their shadowDOM too\n const newItemGroups = Array.from(node.children).filter(isSidebarItemGroup);\n nodes.push(...newItemGroups);\n }\n\n menuItems.forEach((details) => (details.selectableEmpty = true));\n }\n\n /** Toggles whether the sidebar should be shown or hidden */\n @Method()\n async toggle() {\n if (this.willShow || this.willHide) {\n return;\n }\n\n if (this.open) {\n await this.hide();\n } else {\n await this.show();\n }\n }\n\n /** Shows the sidebar */\n @Method()\n async show() {\n if (this.willShow) {\n return;\n }\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n }\n\n /** Hides the sidebar */\n @Method()\n async hide() {\n if (this.willHide) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n }\n\n /** Allows to select a menu item programmatically by index */\n @Method()\n async selectItemByIndex(index: number) {\n if (this.sidebar == null) return;\n\n const slot = this.sidebar.querySelector('slot');\n const menuItemsOnRootLevel: HTMLSixDetailsElement[] = (slot?.assignedElements() || []).flatMap((el) => {\n const detailsElement = el.shadowRoot?.querySelector('six-details');\n if (detailsElement == null) {\n return [];\n }\n return [detailsElement];\n });\n if (index < 0 || index > menuItemsOnRootLevel.length - 1) {\n console.error(\n `Tried to access sidebar menu item by index, but provided index out of range. Provided index: ${index}`\n );\n return;\n }\n await menuItemsOnRootLevel[index].show();\n }\n\n /** Allows to select a menu item programmatically by name */\n @Method()\n async selectItemByName(value: string) {\n const slot = this.sidebar?.querySelector('slot');\n const sidebarItemGroups = slot?.assignedElements() as HTMLSixSidebarItemGroupElement[];\n if (sidebarItemGroups == null) {\n return;\n }\n\n const indexOfSelectedElement = sidebarItemGroups.findIndex((el) => el?.name === value);\n const selectedItem = sidebarItemGroups.at(indexOfSelectedElement)?.shadowRoot?.querySelector('six-details');\n await selectedItem?.show();\n }\n\n private resetTransitionVariables() {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n\n render() {\n return (\n <host class=\"six-sidebar\">\n <div\n class={{\n sidebar__container: true,\n 'sidebar--visible': this.isVisible,\n 'sidebar--open': this.open,\n 'sidebar--left': this.position === 'left',\n 'sidebar--right': this.position === 'right',\n }}\n style={{\n width: this.width,\n [`margin-${this.position}`]: this.open ? '0' : `calc(1rem - ${this.width})`,\n }}\n ref={(el) => (this.sidebar = el)}\n aria-hidden={this.open ? 'false' : 'true'}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <slot />\n </div>\n </host>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,h as s,g as t}from"./p-6153045b.js";import{h as e}from"./p-15559d38.js";const r=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:block}.six-sidebar-item-group{--horizontal-padding:var(--six-spacing-x-large)}.six-sidebar-item-group--childless::part(content){padding:0 !important}.six-sidebar-item-group--subgroup::part(header){background-color:transparent !important}.six-sidebar-item-group__header-icon{margin-left:16px;transform:translate(0px, -3px)}.six-sidebar-details__header{display:flex}.six-sidebar-details__header-icon{margin-right:1em}";const a=class{constructor(t){i(this,t);this.provideSlot=i=>{if(this.summaryIconHasContent){return s("div",{slot:i},s("slot",{name:i}))}return s("slot",{name:i,onSlotchange:()=>{var s;const t=(s=this.host.shadowRoot)===null||s===void 0?void 0:s.querySelector(`slot[name="${i}"]`);if(t!=null){this.summaryIconHasContent=t.assignedNodes().length>0}}})};this.hasItems=false;this.name="";this.icon="";this.value="";this.open=false;this.summaryIcon=undefined;this.summaryIconHasContent=false}connectedCallback(){this.handleSlotChange=this.handleSlotChange.bind(this)}componentWillLoad(){this.handleSlotChange()}handleSlotChange(){this.hasItems=e(this.host)}isSubgroup(){var i;return((i=this.host.parentElement)===null||i===void 0?void 0:i.closest("six-sidebar-item-group"))!=null}render(){return s("six-details",{class:{"six-sidebar-item-group":true,"six-sidebar-item-group--childless":!this.hasItems,"six-sidebar-item-group--subgroup":this.isSubgroup()},inline:true,open:this.open,"summary-icon":this.summaryIcon,hasContent:this.hasItems},s("div",{slot:"summary"},s("div",{class:"six-sidebar-details__header"},this.icon&&s("six-icon",{class:"six-sidebar-details__header-icon"},this.icon),this.name)),this.provideSlot("summary-icon"),s("slot",null))}get host(){return t(this)}};a.style=r;export{a as six_sidebar_item_group};
|
|
2
|
+
//# sourceMappingURL=p-5ba3a0fe.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixSidebarItemGroupCss","SixSidebarItemGroup","this","provideSlot","name","summaryIconHasContent","h","slot","onSlotchange","_a","host","shadowRoot","querySelector","assignedNodes","length","connectedCallback","handleSlotChange","bind","componentWillLoad","hasItems","hasSlot","isSubgroup","parentElement","closest","render","class","inline","open","summaryIcon","hasContent","icon"],"sources":["src/components/six-sidebar-item-group/six-sidebar-item-group.scss?tag=six-sidebar-item-group&encapsulation=shadow","src/components/six-sidebar-item-group/six-sidebar-item-group.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: block;\n}\n\n.six-sidebar-item-group {\n --horizontal-padding: var(--six-spacing-x-large);\n}\n\n.six-sidebar-item-group--childless::part(content) {\n padding: 0 !important;\n}\n\n.six-sidebar-item-group--subgroup::part(header) {\n background-color: transparent !important;\n}\n\n.six-sidebar-item-group__header-icon {\n margin-left: 16px;\n transform: translate(0px, -3px);\n}\n\n.six-sidebar-details__header {\n display: flex;\n}\n\n.six-sidebar-details__header-icon {\n margin-right: 1em;\n}\n","import { Component, Element, h, Prop, State } from '@stencil/core';\nimport { hasSlot } from '../../utils/slot';\n\n/**\n * @since 1.0\n * @status stable\n *\n * @slot - Used to define the nested sidebar [group] items.\n */\n\n@Component({\n tag: 'six-sidebar-item-group',\n styleUrl: 'six-sidebar-item-group.scss',\n shadow: true,\n})\nexport class SixSidebarItemGroup {\n @Element() readonly host!: HTMLSixSidebarItemGroupElement;\n\n @State() hasItems = false;\n\n /** Title of item group */\n @Prop() name = '';\n\n /** Icon of the group */\n @Prop() icon = '';\n\n /** A unique value to store in the sidebar item of the group label. This can be used as a way to identify sidebar items when selected. */\n @Prop({ reflect: true }) value = '';\n\n /** Indicates whether the sidebar is shown */\n @Prop({ reflect: true }) open = false;\n\n /** Custom summary icon name. */\n @Prop() summaryIcon?: string;\n\n @State() summaryIconHasContent = false;\n\n connectedCallback() {\n this.handleSlotChange = this.handleSlotChange.bind(this);\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n private handleSlotChange() {\n this.hasItems = hasSlot(this.host);\n }\n\n private isSubgroup() {\n return this.host.parentElement?.closest('six-sidebar-item-group') != null;\n }\n\n private provideSlot = (name: string) => {\n if (this.summaryIconHasContent) {\n return (\n <div slot={name}>\n <slot name={name}></slot>\n </div>\n );\n }\n\n return (\n <slot\n name={name}\n onSlotchange={() => {\n const slot = this.host.shadowRoot?.querySelector<HTMLSlotElement>(`slot[name=\"${name}\"]`);\n if (slot != null) {\n this.summaryIconHasContent = slot.assignedNodes().length > 0;\n }\n }}\n ></slot>\n );\n };\n\n render() {\n return (\n <six-details\n class={{\n 'six-sidebar-item-group': true,\n 'six-sidebar-item-group--childless': !this.hasItems,\n 'six-sidebar-item-group--subgroup': this.isSubgroup(),\n }}\n inline={true}\n open={this.open}\n summary-icon={this.summaryIcon}\n hasContent={this.hasItems}\n >\n <div slot=\"summary\">\n <div class=\"six-sidebar-details__header\">\n {this.icon && <six-icon class=\"six-sidebar-details__header-icon\">{this.icon}</six-icon>}\n {this.name}\n </div>\n </div>\n {this.provideSlot('summary-icon')}\n <slot />\n </six-details>\n );\n }\n}\n"],"mappings":"sFAAA,MAAMA,EAAyB,shB,MCelBC,EAAmB,M,yBAsCtBC,KAAAC,YAAeC,IACrB,GAAIF,KAAKG,sBAAuB,CAC9B,OACEC,EAAA,OAAKC,KAAMH,GACTE,EAAA,QAAMF,KAAMA,I,CAKlB,OACEE,EAAA,QACEF,KAAMA,EACNI,aAAc,K,MACZ,MAAMD,GAAOE,EAAAP,KAAKQ,KAAKC,cAAU,MAAAF,SAAA,SAAAA,EAAEG,cAA+B,cAAcR,OAChF,GAAIG,GAAQ,KAAM,CAChBL,KAAKG,sBAAwBE,EAAKM,gBAAgBC,OAAS,C,IAGzD,E,cArDQ,M,UAGL,G,UAGA,G,WAGkB,G,UAGD,M,sDAKC,K,CAEjC,iBAAAC,GACEb,KAAKc,iBAAmBd,KAAKc,iBAAiBC,KAAKf,K,CAGrD,iBAAAgB,GACEhB,KAAKc,kB,CAGC,gBAAAA,GACNd,KAAKiB,SAAWC,EAAQlB,KAAKQ,K,CAGvB,UAAAW,G,MACN,QAAOZ,EAAAP,KAAKQ,KAAKY,iBAAa,MAAAb,SAAA,SAAAA,EAAEc,QAAQ,4BAA6B,I,CAyBvE,MAAAC,GACE,OACElB,EAAA,eACEmB,MAAO,CACL,yBAA0B,KAC1B,qCAAsCvB,KAAKiB,SAC3C,mCAAoCjB,KAAKmB,cAE3CK,OAAQ,KACRC,KAAMzB,KAAKyB,KAAI,eACDzB,KAAK0B,YACnBC,WAAY3B,KAAKiB,UAEjBb,EAAA,OAAKC,KAAK,WACRD,EAAA,OAAKmB,MAAM,+BACRvB,KAAK4B,MAAQxB,EAAA,YAAUmB,MAAM,oCAAoCvB,KAAK4B,MACtE5B,KAAKE,OAGTF,KAAKC,YAAY,gBAClBG,EAAA,a"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as o,h as i,g as r}from"./p-6153045b.js";import{s}from"./p-052aa8d3.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 n=r.width/s.width;const e=r.height/s.height;t.animate([{transformOrigin:"top left",transform:`translate(${a}px, ${l}px) scale(${n}, ${e})`},{transformOrigin:"top left",transform:"none"}],i)}const l=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}: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 n=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 n=(i=t===null||t===void 0?void 0:t.shadowRoot)===null||i===void 0?void 0:i.querySelector(".tab__indicator");const e=(l=(r=this.getActiveTab())===null||r===void 0?void 0:r.shadowRoot)===null||l===void 0?void 0:l.querySelector(".tab__indicator");if(e!=null&&n!=null){a(n,e)}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"]}}};n.style=l;export{n as six_tab_group};
|
|
2
|
+
//# sourceMappingURL=p-66fe54b3.entry.js.map
|
|
@@ -0,0 +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,2 +1,2 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,g as r}from"./p-6153045b.js";import{u as s,l as a}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as t,c as i,h as e,g as r}from"./p-6153045b.js";import{u as s,l as a}from"./p-052aa8d3.js";import{h as o}from"./p-15559d38.js";import{i as n,M as h}from"./p-9ace84c7.js";const l=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-x-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";const d=n();let f=0;const p=class{constructor(e){t(this,e);this.sixShow=i(this,"six-drawer-show",7);this.sixAfterShow=i(this,"six-drawer-after-show",7);this.sixHide=i(this,"six-drawer-hide",7);this.sixAfterHide=i(this,"six-drawer-after-hide",7);this.sixInitialFocus=i(this,"six-drawer-initial-focus",7);this.sixOverlayDismiss=i(this,"six-drawer-overlay-dismiss",7);this.componentId=`drawer-${++f}`;this.willShow=false;this.willHide=false;this.handleCloseClick=()=>{this.hide()};this.handleKeyDown=t=>{if(t.key==="Escape"){this.hide()}};this.handleOverlayClick=()=>{const t=this.sixOverlayDismiss.emit();if(!t.defaultPrevented){this.hide()}};this.handleSlotChange=()=>{this.hasFooter=o(this.host,"footer")};this.handleTransitionEnd=t=>{const i=t.target;if(t.propertyName==="transform"&&i.classList.contains("drawer__panel")){this.resetTransitionVariables()}};this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.placement="right";this.contained=false;this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new h(this.host,{onFocusOut:()=>{var t;return this.contained?null:(t=this.panel)===null||t===void 0?void 0:t.focus()}})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show();this.resetTransitionVariables()}}disconnectedCallback(){s(this.host)}async show(){if(this.willShow||this.modal==null||this.panel==null||this.drawer==null){return}const t=this.panel;const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;if(!this.contained){this.modal.activate();a(this.host)}if(this.open){if(d){requestAnimationFrame((()=>{const i=this.sixInitialFocus.emit();if(!i.defaultPrevented){t.focus({preventScroll:true})}}))}else{this.drawer.addEventListener("transitionend",(()=>{const i=this.sixInitialFocus.emit();if(!i.defaultPrevented){t.focus()}}),{once:true})}}}async hide(){if(this.willHide||this.modal==null){return}const t=this.sixHide.emit();if(t.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();s(this.host)}resetTransitionVariables(){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}render(){return e("div",{ref:t=>this.drawer=t,part:"base",class:{drawer:true,"drawer--open":this.open,"drawer--visible":this.isVisible,"drawer--top":this.placement==="top","drawer--right":this.placement==="right","drawer--bottom":this.placement==="bottom","drawer--left":this.placement==="left","drawer--contained":this.contained,"drawer--fixed":!this.contained,"drawer--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},e("div",{part:"overlay",class:"drawer__overlay",onClick:this.handleOverlayClick,tabIndex:-1}),e("div",{ref:t=>this.panel=t,part:"panel",class:"drawer__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&e("header",{part:"header",class:"drawer__header"},e("span",{part:"title",class:"drawer__title",id:`${this.componentId}-title`},e("slot",{name:"label"},this.label||String.fromCharCode(65279))),e("six-icon-button",{exportparts:"base:close-button",class:"drawer__close",name:"x",onClick:this.handleCloseClick})),e("div",{part:"body",class:"drawer__body"},e("slot",null)),e("footer",{part:"footer",class:"drawer__footer"},e("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return r(this)}static get watchers(){return{open:["handleOpenChange"]}}};p.style=l;export{p as six_drawer};
|
|
2
|
+
//# sourceMappingURL=p-a2035543.entry.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,c as s,h as t,g as e}from"./p-6153045b.js";import{f as a}from"./p-5654e4c7.js";const o=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;--horizontal-padding:var(--six-spacing-medium);font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium) var(--horizontal-padding);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details--open:hover{color:var(--six-input-color-focus)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";let r=0;const n=class{constructor(t){i(this,t);this.sixShow=s(this,"six-details-show",7);this.sixAfterShow=s(this,"six-details-after-show",7);this.sixHide=s(this,"six-details-hide",7);this.sixAfterHide=s(this,"six-details-after-hide",7);this.componentId=`details-${++r}`;this.isVisible=false;this.handleBodyTransitionEnd=i=>{if(this.body==null)return;const s=i.target;if(i.propertyName==="height"&&s.classList.contains("details__body")){this.body.style.overflow=this.open?"visible":"hidden";this.body.style.height=this.open?"auto":"0";this.open?this.sixAfterShow.emit():this.sixAfterHide.emit();this.body.hidden=!this.open}};this.handleSummaryClick=()=>{var i;if(!this.disabled&&(this.hasContent||this.selectableEmpty)){this.open?this.hide():this.show();(i=this.header)===null||i===void 0?void 0:i.focus()}};this.handleSummaryKeyDown=i=>{if(i.key==="Enter"||i.key===" "){i.preventDefault();this.open?this.hide():this.show()}if(i.key==="ArrowUp"||i.key==="ArrowLeft"){i.preventDefault();this.hide()}if(i.key==="ArrowDown"||i.key==="ArrowRight"){i.preventDefault();this.show()}};this.animateSummaryIcon=true;this.open=false;this.summary="";this.summaryIcon=undefined;this.summaryIconSize="inherit";this.disabled=false;this.inline=false;this.selectableEmpty=false;this.hasContent=true}handleOpenChange(){if(this.body!=null){this.open?this.show():this.hide()}}componentDidLoad(){if(this.details==null||this.body==null)return;a.observe(this.details);this.body.hidden=!this.open;if(this.open){this.show()}}disconnectedCallback(){if(this.details!=null){a.unobserve(this.details)}}async show(){if(this.isVisible||this.body==null)return;const i=this.sixShow.emit();if(i.defaultPrevented){this.open=false;return}this.body.hidden=false;if(this.body.scrollHeight===0){this.body.style.height="auto";this.body.style.overflow="visible"}else{this.body.style.height=`${this.body.scrollHeight}px`;this.body.style.overflow="hidden"}this.isVisible=true;this.open=true}async hide(){if(!this.isVisible||this.body==null)return;const i=this.body;const s=this.sixHide.emit();if(s.defaultPrevented){this.open=true;return}i.style.height=`${i.scrollHeight}px`;i.style.overflow="hidden";requestAnimationFrame((()=>{i.style.height="0"}));this.isVisible=false;this.open=false}render(){const i=this.hasContent&&(this.summaryIcon||"expand_more");return t("div",{ref:i=>this.details=i,part:"base",class:{details:true,"details--open":this.open,"details--disabled":this.disabled,inline:this.inline}},t("header",{ref:i=>this.header=i,part:"header",id:`${this.componentId}-header`,class:"details__header",role:"button","aria-expanded":this.open?"true":"false","aria-controls":`${this.componentId}-content`,"aria-disabled":this.disabled?"true":"false",tabIndex:this.disabled?-1:0,onClick:this.handleSummaryClick,onKeyDown:this.handleSummaryKeyDown},t("div",{part:"summary",class:"details__summary"},t("slot",{name:"summary"},this.summary)),t("span",{part:"summary-icon",class:{"details__summary-icon":true,"details__summary-icon--animate":this.animateSummaryIcon}},t("slot",{name:"summary-icon",onSlotchange:()=>this.animateSummaryIcon=false},i&&t("six-icon",{size:this.summaryIconSize},i)))),t("div",{ref:i=>this.body=i,class:"details__body",onTransitionEnd:this.handleBodyTransitionEnd},t("div",{part:"content",id:`${this.componentId}-content`,class:"details__content",role:"region","aria-labelledby":`${this.componentId}-header`},t("slot",null))))}get host(){return e(this)}static get watchers(){return{open:["handleOpenChange"]}}};n.style=o;export{n as six_details};
|
|
2
|
+
//# sourceMappingURL=p-cba69e9d.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["sixDetailsCss","id","SixDetails","this","componentId","isVisible","handleBodyTransitionEnd","event","body","target","propertyName","classList","contains","style","overflow","open","height","sixAfterShow","emit","sixAfterHide","hidden","handleSummaryClick","disabled","hasContent","selectableEmpty","hide","show","_a","header","focus","handleSummaryKeyDown","key","preventDefault","handleOpenChange","componentDidLoad","details","focusVisible","observe","disconnectedCallback","unobserve","sixShow","defaultPrevented","scrollHeight","sixHide","requestAnimationFrame","render","summaryIcon","h","ref","el","part","class","inline","role","tabIndex","onClick","onKeyDown","name","summary","animateSummaryIcon","onSlotchange","size","summaryIconSize","onTransitionEnd"],"sources":["src/components/six-details/six-details.scss?tag=six-details&encapsulation=shadow","src/components/six-details/six-details.tsx"],"sourcesContent":["@import 'src/global/component';\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n * @prop --horizontal-padding: The horizontal padding\n */\n:host {\n --hide-duration: var(--six-transition-medium);\n --hide-timing-function: ease;\n --show-duration: var(--six-transition-medium);\n --show-timing-function: ease;\n --horizontal-padding: var(--six-spacing-medium);\n\n font-family: var(--six-font-family);\n display: block;\n}\n\n.details {\n border: solid var(--six-border-width) var(--six-input-border-color);\n border-radius: var(--six-border-radius-medium);\n color: var(--six-details-color);\n overflow-anchor: none;\n font-size: var(--six-input-font-size-medium);\n\n &:hover:not(.details--disabled):not(.details--open) {\n border-color: var(--six-input-border-color-hover);\n }\n\n &.inline {\n border: none;\n color: var(--six-sidebar-color);\n\n &:hover {\n background-color: var(--six-sidebar-hover-background-color);\n }\n\n &.details--open {\n background-color: var(--six-color-web-rock-50);\n\n &:hover {\n border: none;\n box-shadow: none;\n }\n\n & > .details__header {\n color: var(--six-sidebar-color);\n font-weight: var(--six-font-weight-bold);\n background-color: var(--six-sidebar-header-background-color);\n }\n }\n }\n}\n\n.details--disabled {\n background-color: var(--six-input-background-color-disabled);\n border-color: var(--six-input-border-color-disabled);\n color: var(--six-input-color-disabled);\n}\n\n.details__header {\n display: flex;\n align-items: center;\n border-radius: inherit;\n padding: var(--six-spacing-medium) var(--horizontal-padding);\n user-select: none;\n cursor: pointer;\n\n &:focus {\n outline: none;\n }\n}\n\n.focus-visible .details__header:focus {\n}\n\n.details--disabled .details__header {\n cursor: not-allowed;\n border-width: 1px;\n\n &:focus {\n outline: none;\n box-shadow: none;\n }\n}\n\n.details__summary {\n flex: 1 1 auto;\n display: flex;\n align-items: center;\n}\n\n.details__summary-icon {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: 1.2em;\n transition: var(--six-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon--animate {\n transform: rotate(-180deg);\n}\n\n.details--open:hover {\n color: var(--six-input-color-focus);\n}\n\n.details__body {\n height: 0;\n overflow: hidden;\n transition-property: height;\n transition-duration: var(--hide-duration);\n transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n transition-duration: var(--show-duration);\n transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n padding: var(--six-spacing-medium);\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 details' content.\n * @slot summary - The details' summary. Alternatively, you can use the summary prop.\n *\n * @part base - The component's base wrapper.\n * @part header - The summary header.\n * @part summary - The details summary.\n * @part summary-icon - The expand/collapse summary icon.\n * @part content - The details content.\n */\n\n@Component({\n tag: 'six-details',\n styleUrl: 'six-details.scss',\n shadow: true,\n})\nexport class SixDetails {\n @Element() readonly host!: HTMLSixDetailsElement;\n\n @State() animateSummaryIcon = true;\n\n private body?: HTMLElement;\n private details?: HTMLElement;\n private header?: HTMLElement;\n private componentId = `details-${++id}`;\n private isVisible = false;\n\n /** Indicates whether the details is open. You can use this in lieu of the show/hide methods. */\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /** The summary to show in the details header. If you need to display HTML, use the `summary` slot instead. */\n @Prop() summary = '';\n\n /** The summary icon to show in the details header. If you need to display HTML, use the `summary-icon` slot instead. */\n @Prop() summaryIcon?: string;\n\n /** The icon's size. */\n @Prop({ reflect: true }) summaryIconSize:\n | 'inherit'\n | 'xSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'xLarge'\n | 'xxLarge'\n | 'xxxLarge' = 'inherit';\n\n /** Set to true to prevent the user from toggling the details. */\n @Prop() disabled = false;\n\n /** Set to true when you want to use six-details inline e.g. in a sidebar */\n @Prop() inline = false;\n\n /** Set to true when you want details without content to be selectable. This is important if you e.g. have a toggled sidebar where some menus have no children */\n @Prop() selectableEmpty = false;\n\n /** Set to false when you want to hide the summary icon and disable the open/close mechanism. Usually not needed, but used internally by 'six-sidebar-item-group' */\n @Prop() hasContent = true;\n\n @Watch('open')\n handleOpenChange() {\n if (this.body != null) {\n this.open ? this.show() : this.hide();\n }\n }\n\n /** Emitted when the details opens. Calling `event.preventDefault()` will prevent it from being opened. */\n @Event({ eventName: 'six-details-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the details opens and all transitions are complete. */\n @Event({ eventName: 'six-details-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /** Emitted when the details closes. Calling `event.preventDefault()` will prevent it from being closed. */\n @Event({ eventName: 'six-details-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /** Emitted after the details closes and all transitions are complete. */\n @Event({ eventName: 'six-details-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n componentDidLoad() {\n if (this.details == null || this.body == null) return;\n\n focusVisible.observe(this.details);\n this.body.hidden = !this.open;\n\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n if (this.details != null) {\n focusVisible.unobserve(this.details);\n }\n }\n\n /** Shows the detail body */\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.body == null) return;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.body.hidden = false;\n\n if (this.body.scrollHeight === 0) {\n // When the scroll height can't be measured, use auto. This prevents a borked open state when the details is open\n // initially, but not immediately visible (i.e. in a tab panel).\n this.body.style.height = 'auto';\n this.body.style.overflow = 'visible';\n } else {\n this.body.style.height = `${this.body.scrollHeight}px`;\n this.body.style.overflow = 'hidden';\n }\n this.isVisible = true;\n this.open = true;\n }\n\n /** Hides the detail body */\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.body == null) return;\n const body = this.body;\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n // We can't transition out of `height: auto`, so let's set it to the current height first\n body.style.height = `${body.scrollHeight}px`;\n body.style.overflow = 'hidden';\n\n requestAnimationFrame(() => {\n // tslint:disable-next-line: no-unused-expression\n body.clientWidth; // force a reflow\n body.style.height = '0';\n });\n\n this.isVisible = false;\n this.open = false;\n }\n\n private handleBodyTransitionEnd = (event: TransitionEvent) => {\n if (this.body == null) return;\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'height' && target.classList.contains('details__body')) {\n this.body.style.overflow = this.open ? 'visible' : 'hidden';\n this.body.style.height = this.open ? 'auto' : '0';\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n this.body.hidden = !this.open;\n }\n };\n\n private handleSummaryClick = () => {\n if (!this.disabled && (this.hasContent || this.selectableEmpty)) {\n this.open ? this.hide() : this.show();\n this.header?.focus();\n }\n };\n\n private handleSummaryKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n this.open ? this.hide() : this.show();\n }\n\n if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n event.preventDefault();\n this.hide();\n }\n\n if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n event.preventDefault();\n this.show();\n }\n };\n\n render() {\n const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');\n\n return (\n <div\n ref={(el) => (this.details = el)}\n part=\"base\"\n class={{\n details: true,\n 'details--open': this.open,\n 'details--disabled': this.disabled,\n inline: this.inline,\n }}\n >\n <header\n ref={(el) => (this.header = el)}\n part=\"header\"\n id={`${this.componentId}-header`}\n class=\"details__header\"\n role=\"button\"\n aria-expanded={this.open ? 'true' : 'false'}\n aria-controls={`${this.componentId}-content`}\n aria-disabled={this.disabled ? 'true' : 'false'}\n tabIndex={this.disabled ? -1 : 0}\n onClick={this.handleSummaryClick}\n onKeyDown={this.handleSummaryKeyDown}\n >\n <div part=\"summary\" class=\"details__summary\">\n <slot name=\"summary\">{this.summary}</slot>\n </div>\n\n <span\n part=\"summary-icon\"\n class={{\n 'details__summary-icon': true,\n 'details__summary-icon--animate': this.animateSummaryIcon,\n }}\n >\n <slot name=\"summary-icon\" onSlotchange={() => (this.animateSummaryIcon = false)}>\n {summaryIcon && <six-icon size={this.summaryIconSize}>{summaryIcon}</six-icon>}\n </slot>\n </span>\n </header>\n\n <div ref={(el) => (this.body = el)} class=\"details__body\" onTransitionEnd={this.handleBodyTransitionEnd}>\n <div\n part=\"content\"\n id={`${this.componentId}-content`}\n class=\"details__content\"\n role=\"region\"\n aria-labelledby={`${this.componentId}-header`}\n >\n <slot />\n </div>\n </div>\n </div>\n );\n }\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,g as a}from"./p-6153045b.js";import{u as o,l as e}from"./p-
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as i,c as t,h as s,g as a}from"./p-6153045b.js";import{u as o,l as e}from"./p-052aa8d3.js";import{h as l}from"./p-15559d38.js";import{i as r,M as n}from"./p-9ace84c7.js";const h=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-x-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";const d=r();let c=0;const g=class{constructor(s){i(this,s);this.sixShow=t(this,"six-dialog-show",7);this.sixAfterShow=t(this,"six-dialog-after-show",7);this.sixHide=t(this,"six-dialog-hide",7);this.sixAfterHide=t(this,"six-dialog-after-hide",7);this.sixInitialFocus=t(this,"six-dialog-initial-focus",7);this.sixOverlayDismiss=t(this,"six-dialog-overlay-dismiss",7);this.componentId=`dialog-${++c}`;this.willShow=false;this.willHide=false;this.handleCloseClick=()=>{this.hide()};this.handleKeyDown=i=>{if(i.key==="Escape"){this.hide()}};this.handleOverlayClick=()=>{const i=this.sixOverlayDismiss.emit();if(!i.defaultPrevented){this.hide()}};this.handleSlotChange=()=>{this.hasFooter=l(this.host,"footer")};this.handleTransitionEnd=i=>{const t=i.target;if(i.propertyName==="opacity"&&t.classList.contains("dialog__panel")){this.isVisible=this.open;this.willShow=false;this.willHide=false;this.open?this.sixAfterShow.emit():this.sixAfterHide.emit()}};this.hasFooter=false;this.isVisible=false;this.open=false;this.label="";this.noHeader=false}handleOpenChange(){this.open?this.show():this.hide()}connectedCallback(){this.modal=new n(this.host,{onFocusOut:()=>{var i;return(i=this.panel)===null||i===void 0?void 0:i.focus()}})}componentWillLoad(){this.handleSlotChange();if(this.open){this.show()}}disconnectedCallback(){o(this.host)}async show(){if(this.willShow||this.modal==null||this.panel==null||this.dialog==null){return}const i=this.panel;const t=this.sixShow.emit();if(t.defaultPrevented){this.open=false;return}this.willShow=true;this.isVisible=true;this.open=true;this.modal.activate();e(this.host);if(this.open){if(d){requestAnimationFrame((()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus({preventScroll:true})}}))}else{this.dialog.addEventListener("transitionend",(()=>{const t=this.sixInitialFocus.emit();if(!t.defaultPrevented){i.focus()}}),{once:true})}}}async hide(){if(this.willHide||this.modal==null){return}const i=this.sixHide.emit();if(i.defaultPrevented){this.open=true;return}this.willHide=true;this.open=false;this.modal.deactivate();o(this.host)}render(){return s("div",{ref:i=>this.dialog=i,part:"base",class:{dialog:true,"dialog--open":this.open,"dialog--visible":this.isVisible,"dialog--has-footer":this.hasFooter},onKeyDown:this.handleKeyDown,onTransitionEnd:this.handleTransitionEnd},s("div",{part:"overlay",class:"dialog__overlay",onClick:this.handleOverlayClick}),s("div",{ref:i=>this.panel=i,part:"panel",class:"dialog__panel",role:"dialog","aria-modal":"true","aria-hidden":this.open?"false":"true","aria-label":this.noHeader?this.label:null,"aria-labelledby":!this.noHeader?`${this.componentId}-title`:null,tabIndex:0},!this.noHeader&&s("header",{part:"header",class:"dialog__header"},s("span",{part:"title",class:"dialog__title",id:`${this.componentId}-title`},s("slot",{name:"label"},this.label||String.fromCharCode(65279))),s("six-icon-button",{exportparts:"base:close-button",class:"dialog__close",name:"close",onClick:this.handleCloseClick})),s("div",{part:"body",class:"dialog__body"},s("slot",null)),s("footer",{part:"footer",class:"dialog__footer"},s("slot",{name:"footer",onSlotchange:this.handleSlotChange}))))}get host(){return a(this)}static get watchers(){return{open:["handleOpenChange"]}}};g.style=h;export{g as six_dialog};
|
|
2
|
+
//# sourceMappingURL=p-d1bda563.entry.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff")}.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Outlined";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff")}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Round";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff")}.material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Sharp";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff")}.material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Two Tone";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff")}.material-icons-two-tone{font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:100;src:url('./files/noto-sans-latin-100-normal.woff2') format('woff2'), url('./files/noto-sans-latin-100-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:200;src:url('./files/noto-sans-latin-200-normal.woff2') format('woff2'), url('./files/noto-sans-latin-200-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:300;src:url('./files/noto-sans-latin-300-normal.woff2') format('woff2'), url('./files/noto-sans-latin-300-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:400;src:url('./files/noto-sans-latin-400-normal.woff2') format('woff2'), url('./files/noto-sans-latin-400-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:500;src:url('./files/noto-sans-latin-500-normal.woff2') format('woff2'), url('./files/noto-sans-latin-500-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:600;src:url('./files/noto-sans-latin-600-normal.woff2') format('woff2'), url('./files/noto-sans-latin-600-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:700;src:url('./files/noto-sans-latin-700-normal.woff2') format('woff2'), url('./files/noto-sans-latin-700-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:800;src:url('./files/noto-sans-latin-800-normal.woff2') format('woff2'), url('./files/noto-sans-latin-800-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:900;src:url('./files/noto-sans-latin-900-normal.woff2') format('woff2'), url('./files/noto-sans-latin-900-normal.woff') format('woff')}:root{--six-color-red:#de3919;--six-color-black:#000;--six-color-white:#fff;--six-color-web-rock-900:#262626;--six-color-web-rock-800:#484848;--six-color-web-rock-700:#676767;--six-color-web-rock-600:#7b7b7b;--six-color-web-rock-500:#a5a5a5;--six-color-web-rock-400:#c3c3c3;--six-color-web-rock-300:#e5e5e5;--six-color-web-rock-200:#f1f1f1;--six-color-web-rock-100:#f6f6f6;--six-color-web-rock-50:#fbfbfb;--six-color-clay-200:#ada398;--six-color-clay-50:#ebe8e7;--six-color-danger-900:#c52c0f;--six-color-danger-800:#de3919;--six-color-danger-light-to-be-defined:#f58c78;--six-color-warning-800:#ef9f25;--six-color-warning-700:#f2b72c;--six-color-warning-light-to-be-defined:#f9deb4;--six-color-success-600:#58d200;--six-color-success-500:#6ae300;--six-color-success-light-to-be-defined:#aaff6c;--six-color-action-600:#1f87e5;--six-color-action-500:#2196f3;--six-color-action-light-to-be-defined:#a8d0f5;--six-color-inactive:#c3c3c3;--six-focus-ring-color:var(--six-color-
|
|
1
|
+
@font-face{font-family:"Material Icons";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons.woff2") format("woff2"), url("./material-icons.woff") format("woff")}.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Outlined";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-outlined.woff2") format("woff2"), url("./material-icons-outlined.woff") format("woff")}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Round";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-round.woff2") format("woff2"), url("./material-icons-round.woff") format("woff")}.material-icons-round{font-family:"Material Icons Round";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Sharp";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-sharp.woff2") format("woff2"), url("./material-icons-sharp.woff") format("woff")}.material-icons-sharp{font-family:"Material Icons Sharp";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:"Material Icons Two Tone";font-style:normal;font-weight:400;font-display:block;src:url("./material-icons-two-tone.woff2") format("woff2"), url("./material-icons-two-tone.woff") format("woff")}.material-icons-two-tone{font-family:"Material Icons Two Tone";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"liga"}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:100;src:url('./files/noto-sans-latin-100-normal.woff2') format('woff2'), url('./files/noto-sans-latin-100-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:200;src:url('./files/noto-sans-latin-200-normal.woff2') format('woff2'), url('./files/noto-sans-latin-200-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:300;src:url('./files/noto-sans-latin-300-normal.woff2') format('woff2'), url('./files/noto-sans-latin-300-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:400;src:url('./files/noto-sans-latin-400-normal.woff2') format('woff2'), url('./files/noto-sans-latin-400-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:500;src:url('./files/noto-sans-latin-500-normal.woff2') format('woff2'), url('./files/noto-sans-latin-500-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:600;src:url('./files/noto-sans-latin-600-normal.woff2') format('woff2'), url('./files/noto-sans-latin-600-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:700;src:url('./files/noto-sans-latin-700-normal.woff2') format('woff2'), url('./files/noto-sans-latin-700-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:800;src:url('./files/noto-sans-latin-800-normal.woff2') format('woff2'), url('./files/noto-sans-latin-800-normal.woff') format('woff')}@font-face{font-family:'Noto Sans';font-style:normal;font-display:swap;font-weight:900;src:url('./files/noto-sans-latin-900-normal.woff2') format('woff2'), url('./files/noto-sans-latin-900-normal.woff') format('woff')}:root{--six-color-red:#de3919;--six-color-black:#000;--six-color-white:#fff;--six-color-web-rock-900:#262626;--six-color-web-rock-800:#484848;--six-color-web-rock-700:#676767;--six-color-web-rock-600:#7b7b7b;--six-color-web-rock-500:#a5a5a5;--six-color-web-rock-400:#c3c3c3;--six-color-web-rock-300:#e5e5e5;--six-color-web-rock-200:#f1f1f1;--six-color-web-rock-100:#f6f6f6;--six-color-web-rock-50:#fbfbfb;--six-color-clay-200:#ada398;--six-color-clay-50:#ebe8e7;--six-color-danger-900:#c52c0f;--six-color-danger-800:#de3919;--six-color-danger-light-to-be-defined:#f58c78;--six-color-warning-800:#ef9f25;--six-color-warning-700:#f2b72c;--six-color-warning-light-to-be-defined:#f9deb4;--six-color-success-600:#58d200;--six-color-success-500:#6ae300;--six-color-success-light-to-be-defined:#aaff6c;--six-color-action-600:#1f87e5;--six-color-action-500:#2196f3;--six-color-action-light-to-be-defined:#a8d0f5;--six-color-inactive:#c3c3c3;--six-focus-ring-color:var(--six-color-action-600)}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}html,body{margin:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:'Noto Sans', sans-serif}code{background:rgba(0, 0, 0, 0.04);padding:0.2rem;border-radius:3px;font-weight:bold}.warn{border-left:solid 3px var(--six-color-warning-700);background:rgba(0, 0, 0, 0.02);padding:1rem}body>div.container{margin:1rem}:root{--six-border-radius-small:0rem;--six-border-radius-medium:0rem;--six-border-radius-large:0.5rem;--six-border-radius-x-large:1rem;--six-border-radius-circle:50%;--six-border-radius-pill:9999px;--six-shadow-x-small:0 1px 0 #00000029;--six-shadow-small:0 6px 12px 0px #00000029;--six-shadow-medium:0 12px 24px 0 #00000029;--six-shadow-large:0 2px 8px #0d131e1a;--six-shadow-x-large:0 4px 16px #0d131e1a;--six-shadow-x-large-top:0 -4px 16px #0d131e1a;--six-spacing-xxx-small:0.125rem;--six-spacing-xx-small:0.25rem;--six-spacing-x-small:0.5rem;--six-spacing-small:0.75rem;--six-spacing-medium:1rem;--six-spacing-large:1.25rem;--six-spacing-x-large:1.75rem;--six-spacing-xx-large:2.25rem;--six-spacing-xxx-large:3rem;--six-spacing-xxxx-large:4.5rem;--six-transition-x-slow:1000ms;--six-transition-slow:500ms;--six-transition-medium:250ms;--six-transition-fast:150ms;--six-transition-x-fast:50ms;--six-font-mono:SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;--six-font-sans:'Noto Sans', sans-serif;--six-font-family:var(--six-font-sans);--six-font-serif:Georgia, 'Times New Roman', serif;--six-font-size-xxx-small:0.5rem;--six-font-size-xx-small:0.625rem;--six-font-size-x-small:0.75rem;--six-font-size-small:0.875rem;--six-font-size-medium:1rem;--six-font-size-large:1.25rem;--six-font-size-x-large:1.5rem;--six-font-size-xx-large:2.25rem;--six-font-size-xxx-large:3rem;--six-font-size-xxxx-large:4.5rem;--six-font-weight-light:300;--six-font-weight-normal:400;--six-font-weight-semibold:500;--six-font-weight-bold:700;--six-letter-spacing-dense:-0.015em;--six-letter-spacing-normal:normal;--six-letter-spacing-loose:0.075em;--six-line-height-dense:1.4;--six-line-height-normal:1.8;--six-line-height-loose:2.2;--six-z-index-header:500;--six-z-index-search-field:500;--six-z-index-drawer:600;--six-z-index-dropdown:700;--six-z-index-toast:800;--six-z-index-tooltip:900;--six-z-index-dialog:1000;--six-elevation-1dp:0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.12);--six-elevation-2dp:0 2px 3px 0 rgba(0, 0, 0, 0.2), 0 3px 1px -2px rgba(0, 0, 0, 0.14),
|
|
2
2
|
0 2px 2px 0 rgba(0, 0, 0, 0.12);--six-elevation-3dp:0 1px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14),
|
|
3
3
|
0 3px 3px -2px rgba(0, 0, 0, 0.12);--six-elevation-4dp:0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14),
|
|
4
4
|
0 1px 10px -2px rgba(0, 0, 0, 0.12);--six-elevation-6dp:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14),
|
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
0 3px 16px 2px rgba(0, 0, 0, 0.12);--six-elevation-12dp:0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14),
|
|
8
8
|
0 5px 22px 4px rgba(0, 0, 0, 0.12);--six-elevation-16dp:0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14),
|
|
9
9
|
0 6px 30px 5px rgba(0, 0, 0, 0.12);--six-elevation-24dp:0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
|
|
10
|
-
0 9px 46px 8px rgba(0, 0, 0, 0.12);--six-height-small:1.875rem;--six-height-medium:2.5rem;--six-height-large:3.125rem;--six-border-width:1px;--six-focus-ring-width:
|
|
10
|
+
0 9px 46px 8px rgba(0, 0, 0, 0.12);--six-height-small:1.875rem;--six-height-medium:2.5rem;--six-height-large:3.125rem;--six-border-width:1px;--six-focus-ring-style:solid;--six-focus-ring-width:2px;--six-focus-ring-offset:2px;--six-focus-ring:var(--six-focus-ring-style) var(--six-focus-ring-width) var(--six-focus-ring-color);--six-focus-offset-input:1px;--six-button-font-size-medium:var(--six-font-size-medium);--six-button-font-size-large:var(--six-font-size-large);--six-focus-shadow:0 0 0 var(--six-focus-offset-input);--six-input-focus-shadow:var(--six-focus-shadow) var(--six-input-border-color-focus);--six-input-background-color:var(--six-color-white);--six-input-background-color-hover:var(--six-color-white);--six-input-background-color-focus:var(--six-color-white);--six-input-background-color-disabled:var(--six-color-web-rock-100);--six-input-border-color:var(--six-color-web-rock-400);--six-input-border-color-hover:var(--six-color-web-rock-600);--six-input-border-color-focus:var(--six-color-action-600);--six-input-border-color-danger:var(--six-color-danger-800);--six-input-border-color-disabled:var(--six-color-web-rock-400);--six-input-border-radius-small:var(--six-border-radius-medium);--six-input-border-radius-medium:var(--six-border-radius-medium);--six-input-border-radius-large:var(--six-border-radius-medium);--six-input-font-weight:var(--six-font-weight-normal);--six-input-font-size-small:var(--six-font-size-x-small);--six-input-font-size-medium:var(--six-font-size-small);--six-input-font-size-large:var(--six-font-size-medium);--six-input-letter-spacing:var(--six-letter-spacing-normal);--six-input-color:var(--six-color-web-rock-900);--six-input-color-hover:var(--six-color-web-rock-900);--six-input-color-focus:var(--six-color-web-rock-900);--six-input-color-disabled:var(--six-color-web-rock-600);--six-input-icon-color:var(--six-color-web-rock-900);--six-input-icon-color-hover:var(--six-color-web-rock-600);--six-input-icon-color-focus:var(--six-color-web-rock-900);--six-input-placeholder-color:var(--six-color-web-rock-500);--six-input-placeholder-color-disabled:var(--six-color-web-rock-500);--six-input-spacing-small:var(--six-spacing-small);--six-input-spacing-medium:var(--six-spacing-medium);--six-input-spacing-large:var(--six-spacing-large);--six-input-prefix-spacing-small:var(--six-spacing-xx-small);--six-input-prefix-spacing-medium:var(--six-spacing-x-small);--six-input-prefix-spacing-large:var(--six-spacing-small);--six-input-label-font-size-small:var(--six-font-size-xx-small);--six-input-label-font-size-medium:var(--six-font-size-x-small);--six-input-label-font-size-large:var(--six-font-size-small);--six-input-label-color:var(--six-color-web-rock-900);--six-input-label-color-disabled:var(--six-color-web-rock-600);--six-input-help-text-font-size-small:var(--six-font-size-xx-small);--six-input-help-text-font-size-medium:var(--six-font-size-x-small);--six-input-help-text-font-size-large:var(--six-font-size-small);--six-input-help-text-color:var(--six-color-web-rock-600);--six-input-help-text-color-disabled:var(--six-color-web-rock-600);--six-overlay-background-color:var(--six-color-web-rock-900);--six-panel-background-color:var(--six-color-white);--six-panel-border-color:var(--six-color-clay-50);--six-progress-track-color:var(--six-color-web-rock-300);--six-progress-indicator-color:var(--six-color-danger-800);--six-progress-label-color:var(--six-color-white);--six-tooltip-background-color:var(--six-color-web-rock-900);--six-tooltip-color:var(--six-color-white);--six-tooltip-arrow-size:5px;--six-tooltip-arrow-start-end-offset:8px;--six-tooltip-font-size:var(--six-font-size-small);--six-tooltip-font-weight:var(--six-font-weight-normal);--six-tooltip-line-height:var(--six-line-height-dense);--six-avatar-color:var(--six-color-white);--six-avatar-background-color:var(--six-color-web-rock-300);--six-checkbox-color:var(--six-color-white);--six-selection-control-color:var(--six-color-action-500);--six-selection-control-color-disabled:var(--six-color-web-rock-400);--six-selection-control-toggle-size:1rem;--six-details-color:var(--six-color-web-rock-600);--six-drawer-color:var(--six-color-web-rock-900);--six-drawer-background-color:var(--six-color-clay-50);--six-footer-background-color:var(--six-color-white);--six-header-background-color:var(--six-color-white);--six-header-border-color:var(--six-color-web-rock-300);--six-header-border-color-open:var(--six-color-web-rock-900);--six-header-border-with:1px;--six-header-selected-app-color-hover:var(--six-color-web-rock-600);--six-menu-divider-color:var(--six-color-clay-50);--six-menu-item-background-color:var(--six-color-clay-50);--six-search-color:var(--six-color-action-600);--six-sidebar-color:var(--six-color-web-rock-900);--six-sidebar-background-color:var(--six-color-white);--six-sidebar-hover-background-color:var(--six-color-clay-50);--six-sidebar-header-background-color:var(--six-color-clay-50);--six-sidebar-item-background-color:var(--six-color-web-rock-50);--six-tab-color:var(--six-color-web-rock-900);--six-tab-color-active:var(--six-color-web-rock-900);--six-tab-color-hover:var(--six-color-web-rock-700);--six-tab-color-disabled:var(--six-color-web-rock-400);--six-tab-border-color:var(--six-color-white);--six-tab-border-width:3px;--six-tab-border-color-active:var(--six-color-web-rock-900)}[hidden]{display:none !important}.six-scroll-lock{overflow:hidden !important}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-6153045b.js";export{s as setNonce}from"./p-6153045b.js";const a=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};a().then((e=>t(JSON.parse('[["p-b57afbe4",[[1,"six-select",{"multiple":[4],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"helpText":[1,"help-text"],"required":[4],"clearable":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"line":[4],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"isOpen":[32],"displayLabel":[32],"displayTags":[32],"setFocus":[64]}]]],["p-ae601a0f",[[1,"six-header",{"shiftContent":[4,"shift-content"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]}]]],["p-14c1ec31",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[4],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"setFocus":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]]]]],["p-a55c7258",[[1,"six-root",{"breakpoint":[2],"padded":[4],"stage":[1],"version":[1],"collapse":[32]}]]],["p-37557787",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]}]]],["p-c03ebf7d",[[1,"six-tile",{"label":[1],"iconName":[1,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-411ed539",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]}]]],["p-19ed7a4c",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-99e24daf",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-83864cfe",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-29ac3d7d",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-4705a51e",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasScrollControls":[32],"show":[64]}]]],["p-878226a0",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-ee8342e1",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-ab91c2a9",[[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"checked":[1540],"indeterminate":[1540],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-9b354f5d",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-5af44076",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-cdaed936",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"multiple":[4],"maxFileSize":[2,"max-file-size"],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-db936ad7",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[4],"hasHelpTextSlot":[32],"hasLabelSlot":[32]}]]],["p-4435ff73",[[1,"six-range",{"name":[1],"value":[1026],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-db34a6cc",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"hasFocus":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-a457fee8",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"helpText":[1,"help-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]}]]],["p-a0f290d0",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-613283a7",[[1,"six-card"]]],["p-dfed33c5",[[1,"six-file-list"]]],["p-1d5ee1a0",[[1,"six-footer"]]],["p-b351f889",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]}]]],["p-91b51800",[[1,"six-layout-grid",{"columns":[1026]}]]],["p-ac099e6b",[[1,"six-main-container",{"padded":[4]}]]],["p-346f9557",[[1,"six-menu-divider"]]],["p-a6a9ee96",[[1,"six-menu-label"]]],["p-3cc5addb",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-ee950ce2",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]}]]],["p-264d4ea8",[[1,"six-radio",{"name":[1],"value":[513],"disabled":[4],"checked":[1540],"invalid":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-2a141e10",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]}]]],["p-6197fe2f",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516]}]]],["p-cd67da3d",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-25bb1752",[[1,"six-error"]]],["p-7afafb9d",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-b6f47c9d",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[4],"placeholder":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"label":[1],"invalid":[516],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"popupValue":[32],"setFocus":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]]]]],["p-f1dc3a88",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-21b3b321",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]}]]],["p-13b43e04",[[1,"six-picto",{"size":[1]}]]],["p-7e3ad38a",[[1,"six-spinner",{"six":[4]}]]],["p-724875b0",[[1,"six-stage-indicator",{"stage":[1]}],[4,"set-attributes",{"value":[16]}]]],["p-95fbdd0b",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]}]]],["p-dc4f41d8",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]}]]],["p-9c1be3fb",[[1,"six-menu-item",{"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64],"getTextLabel":[64]}]]],["p-538f3c50",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"helpText":[1,"help-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"required":[4],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]}]]],["p-e775dcb4",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[2,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"filteredOptions":[32],"show":[64],"hide":[64],"reposition":[64]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}]]],["p-1256cc0a",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as t}from"./p-6153045b.js";export{s as setNonce}from"./p-6153045b.js";const a=()=>{const t=import.meta.url;const a={};if(t!==""){a.resourcesUrl=new URL(".",t).href}return e(a)};a().then((e=>t(JSON.parse('[["p-b57afbe4",[[1,"six-select",{"multiple":[4],"maxTagsVisible":[2,"max-tags-visible"],"disabled":[4],"name":[1],"placeholder":[1],"filterPlaceholder":[1,"filter-placeholder"],"filterDebounce":[2,"filter-debounce"],"size":[1],"hoist":[4],"value":[1025],"pill":[4],"helpText":[1,"help-text"],"required":[4],"clearable":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"line":[4],"filter":[4],"asyncFilter":[4,"async-filter"],"autocomplete":[4],"inputDebounce":[2,"input-debounce"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"isOpen":[32],"displayLabel":[32],"displayTags":[32],"setFocus":[64]}]]],["p-ae601a0f",[[1,"six-header",{"shiftContent":[4,"shift-content"],"openHamburgerMenu":[4,"open-hamburger-menu"],"openSearch":[4,"open-search"],"clickableLogo":[4,"clickable-logo"],"selectedApp":[32],"selectedSection":[32],"setSearchOpenState":[64],"getIsSearchOpen":[64]}]]],["p-14c1ec31",[[1,"six-datepicker",{"type":[1],"locale":[1],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"allowedDates":[16],"min":[16],"max":[16],"closeOnSelect":[4,"close-on-select"],"placement":[1],"size":[1],"required":[4],"defaultDate":[1,"default-date"],"placeholder":[1],"value":[1040],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"containingElement":[16],"dateFormat":[1,"date-format"],"debounce":[2],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"pointerDate":[32],"selectionMode":[32],"isDropDownContentUp":[32],"setFocus":[64],"select":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]]]]],["p-a55c7258",[[1,"six-root",{"breakpoint":[2],"padded":[4],"stage":[1],"version":[1],"collapse":[32]}]]],["p-37557787",[[1,"six-search-field",{"placeholder":[1],"debounce":[514],"disabled":[516],"value":[513],"clearable":[4]}]]],["p-c03ebf7d",[[1,"six-tile",{"label":[1],"iconName":[1,"icon-name"],"closeable":[4],"elevated":[4],"disableTooltip":[4,"disable-tooltip"],"disabled":[516],"size":[513],"visible":[32],"hasIconSlot":[32],"hasLabelSlot":[32],"hide":[64],"show":[64]}]]],["p-411ed539",[[1,"six-alert",{"open":[1540],"closable":[516],"type":[513],"duration":[2],"isVisible":[32],"show":[64],"hide":[64],"toast":[64]}]]],["p-d1bda563",[[1,"six-dialog",{"open":[1540],"label":[1],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-a2035543",[[1,"six-drawer",{"open":[1540],"label":[1],"placement":[1],"contained":[4],"noHeader":[4,"no-header"],"hasFooter":[32],"isVisible":[32],"show":[64],"hide":[64]}]]],["p-5ba3a0fe",[[1,"six-sidebar-item-group",{"name":[1],"icon":[1],"value":[513],"open":[516],"summaryIcon":[1,"summary-icon"],"hasItems":[32],"summaryIconHasContent":[32]}]]],["p-22c9b8c3",[[1,"six-tab",{"panel":[513],"active":[516],"closable":[4],"disabled":[516],"setFocus":[64],"removeFocus":[64]}]]],["p-66fe54b3",[[1,"six-tab-group",{"placement":[1],"noScrollControls":[4,"no-scroll-controls"],"hasScrollControls":[32],"show":[64]}]]],["p-878226a0",[[1,"six-avatar",{"image":[1],"alt":[1],"initials":[1],"shape":[1],"hasError":[32]}]]],["p-1286ab62",[[1,"six-button",{"type":[513],"size":[513],"caret":[4],"disabled":[516],"loading":[516],"pill":[516],"circle":[516],"submit":[516],"reset":[516],"name":[1],"value":[1],"href":[1],"target":[1],"download":[1],"hasFocus":[32],"hasLabel":[32],"hasPrefix":[32],"hasSuffix":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-ab91c2a9",[[1,"six-checkbox",{"name":[1],"value":[1],"disabled":[4],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"checked":[1540],"indeterminate":[1540],"hasFocus":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-9b354f5d",[[1,"six-error-page",{"errorCode":[2,"error-code"],"language":[1],"customTitle":[1,"custom-title"],"customDescription":[16],"customIcon":[1,"custom-icon"]}]]],["p-5af44076",[[1,"six-file-list-item",{"identifier":[513],"name":[513],"date":[513],"size":[514],"nodownload":[516],"nodelete":[516]}]]],["p-cdaed936",[[2,"six-file-upload",{"compact":[4],"label":[1],"disabled":[4],"accept":[1],"multiple":[4],"maxFileSize":[2,"max-file-size"],"isOver":[32]},[[1,"dragenter","dragenterHandler"],[1,"dragover","dragoverHandler"],[1,"dragleave","dragleaveHandler"],[1,"drop","dropHandler"]]]]],["p-db936ad7",[[1,"six-group-label",{"size":[513],"label":[1],"helpText":[1,"help-text"],"disabled":[516],"required":[4],"hasHelpTextSlot":[32],"hasLabelSlot":[32]}]]],["p-4435ff73",[[1,"six-range",{"name":[1],"value":[1026],"required":[4],"helpText":[1,"help-text"],"disabled":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"min":[2],"max":[2],"step":[2],"tooltip":[1],"tooltipFormatter":[16],"hasFocus":[32],"hasHelpTextSlot":[32],"hasErrorTextSlot":[32],"hasLabelSlot":[32],"hasTooltip":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-db34a6cc",[[1,"six-switch",{"name":[1],"value":[1],"disabled":[4],"required":[4],"checked":[1540],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"hasFocus":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-a457fee8",[[1,"six-textarea",{"size":[513],"name":[513],"value":[1537],"helpText":[1,"help-text"],"placeholder":[1],"rows":[2],"resize":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"required":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"inputmode":[1],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorTextSlot":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]}]]],["p-a0f290d0",[[1,"six-badge",{"type":[1],"pill":[4],"pulse":[4]}]]],["p-613283a7",[[1,"six-card"]]],["p-dfed33c5",[[1,"six-file-list"]]],["p-1d5ee1a0",[[1,"six-footer"]]],["p-b351f889",[[1,"six-language-switcher",{"selected":[1537],"languages":[16]}]]],["p-91b51800",[[1,"six-layout-grid",{"columns":[1026]}]]],["p-ac099e6b",[[1,"six-main-container",{"padded":[4]}]]],["p-346f9557",[[1,"six-menu-divider"]]],["p-a6a9ee96",[[1,"six-menu-label"]]],["p-3cc5addb",[[1,"six-progress-bar",{"percentage":[2],"indeterminate":[4]}]]],["p-ee950ce2",[[1,"six-progress-ring",{"size":[2],"strokeWidth":[2,"stroke-width"],"percentage":[2]}]]],["p-264d4ea8",[[1,"six-radio",{"name":[1],"value":[513],"disabled":[4],"checked":[1540],"invalid":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64]}]]],["p-5800663b",[[1,"six-sidebar",{"position":[1],"open":[1540],"width":[1],"toggled":[4],"isVisible":[32],"toggle":[64],"show":[64],"hide":[64],"selectItemByIndex":[64],"selectItemByName":[64]}]]],["p-6197fe2f",[[1,"six-sidebar-item",{"value":[513],"selected":[516],"disabled":[516]}]]],["p-cd67da3d",[[1,"six-tab-panel",{"name":[1],"active":[516]}]]],["p-25bb1752",[[1,"six-error"]]],["p-7afafb9d",[[1,"six-icon",{"size":[513],"filled":[4]}]]],["p-b6f47c9d",[[1,"six-timepicker",{"format":[1],"separator":[1],"value":[1025],"open":[1540],"inline":[516],"readonly":[4],"disabled":[4],"placement":[1],"size":[1],"required":[4],"placeholder":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"label":[1],"invalid":[516],"name":[513],"clearable":[4],"iconPosition":[1,"icon-position"],"hoist":[4],"timeout":[2],"interval":[2],"defaultTime":[1,"default-time"],"debounce":[2],"isPopupContentUp":[32],"isDropDownContentUp":[32],"popupValue":[32],"setFocus":[64]},[[9,"resize","resizeHandler"],[9,"scroll","scrollHandler"]]]]],["p-f1dc3a88",[[1,"six-tag",{"type":[513],"size":[513],"pill":[516],"clearable":[516]}]]],["p-cba69e9d",[[1,"six-details",{"open":[1540],"summary":[1],"summaryIcon":[1,"summary-icon"],"summaryIconSize":[513,"summary-icon-size"],"disabled":[4],"inline":[4],"selectableEmpty":[4,"selectable-empty"],"hasContent":[4,"has-content"],"animateSummaryIcon":[32],"show":[64],"hide":[64]}]]],["p-13b43e04",[[1,"six-picto",{"size":[1]}]]],["p-7e3ad38a",[[1,"six-spinner",{"six":[4]}]]],["p-724875b0",[[1,"six-stage-indicator",{"stage":[1]}],[4,"set-attributes",{"value":[16]}]]],["p-95fbdd0b",[[1,"six-item-picker",{"value":[1544],"type":[1],"min":[1544],"max":[1544],"roundtrip":[516],"step":[514],"items":[16],"padded":[4],"paddingLength":[2,"padding-length"],"paddingChar":[1,"padding-char"],"paddingDirection":[1,"padding-direction"],"timeout":[2],"interval":[2],"debounce":[2],"_items":[32],"_itemIndexes":[32]}]]],["p-dc4f41d8",[[1,"six-tooltip",{"content":[1],"placement":[1],"disabled":[4],"distance":[2],"open":[1540],"skidding":[2],"trigger":[1],"show":[64],"hide":[64]}]]],["p-9c1be3fb",[[1,"six-menu-item",{"checked":[516],"value":[513],"disabled":[516],"hasFocus":[32],"setFocus":[64],"removeFocus":[64],"getTextLabel":[64]}]]],["p-538f3c50",[[1,"six-input",{"type":[513],"size":[513],"name":[513],"value":[1537],"pill":[516],"helpText":[1,"help-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"minlength":[514],"maxlength":[514],"min":[514],"max":[514],"step":[514],"pattern":[513],"required":[4],"autocapitalize":[1],"autocorrect":[1],"autocomplete":[1],"autofocus":[4],"spellcheck":[4],"label":[1],"errorText":[1,"error-text"],"errorTextCount":[2,"error-text-count"],"invalid":[516],"clearable":[4],"togglePassword":[4,"toggle-password"],"inputmode":[1],"line":[4],"hasFocus":[32],"hasHelpTextSlot":[32],"hasLabelSlot":[32],"hasErrorSlot":[32],"isPasswordVisible":[32],"setFocus":[64],"removeFocus":[64],"select":[64],"setSelectionRange":[64],"setRangeText":[64]}]]],["p-e775dcb4",[[1,"six-dropdown",{"open":[1540],"placement":[1],"closeOnSelect":[4,"close-on-select"],"distance":[2],"skidding":[2],"hoist":[4],"containingElement":[16],"filter":[4],"asyncFilter":[4,"async-filter"],"filterPlaceholder":[1,"filter-placeholder"],"autofocusFilter":[4,"autofocus-filter"],"filterDebounce":[2,"filter-debounce"],"disableHideOnEnterAndSpace":[4,"disable-hide-on-enter-and-space"],"options":[16],"virtualScroll":[4,"virtual-scroll"],"filteredOptions":[32],"show":[64],"hide":[64],"reposition":[64]}],[1,"six-menu",{"removeBoxShadow":[4,"remove-box-shadow"],"items":[16],"itemsShown":[2,"items-shown"],"virtualScroll":[4,"virtual-scroll"],"itemSize":[2,"item-size"],"scrollingDebounce":[2,"scrolling-debounce"],"scrollingIndex":[32],"sixMenuItemHeight":[32],"typeToSelect":[64]}]]],["p-3f1a5ecb",[[1,"six-icon-button",{"name":[513],"size":[513],"label":[513],"disabled":[516],"html":[513]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=ui-library.esm.js.map
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"file":"scroll-03678de1.js","mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;SACgB,SAAS,CAAC,OAAoB,EAAE,MAAmB;EACjE,OAAO;IACL,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,GAAG,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;IACzF,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,IAAI,GAAG,MAAM,CAAC,qBAAqB,EAAE,CAAC,IAAI,CAAC;GAC7F,CAAC;AACJ;;ACVA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAE,CAAC;AAExB;AACA;AACA;AACA;SACgB,iBAAiB,CAAC,SAAsB;EACtD,KAAK,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;EACrB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;AACjD,CAAC;AAED;AACA;AACA;SACgB,mBAAmB,CAAC,SAAsB;EACxD,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;EAExB,IAAI,KAAK,CAAC,IAAI,KAAK,CAAC,EAAE;IACpB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;GACnD;AACH,CAAC;AAED;AACA;AACA;SACgB,cAAc,CAC5B,OAAoB,EACpB,SAAsB,EACtB,YAAgD,UAAU,EAC1D,WAA8B,QAAQ;EAEtC,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;EAC7C,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,GAAG,SAAS,CAAC,SAAS,CAAC;EACnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EACtD,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,CAAC;EAClC,MAAM,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;EAC1D,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,CAAC;EACjC,MAAM,IAAI,GAAG,SAAS,CAAC,SAAS,GAAG,SAAS,CAAC,YAAY,CAAC;EAE1D,IAAI,SAAS,KAAK,YAAY,IAAI,SAAS,KAAK,MAAM,EAAE;IACtD,IAAI,UAAU,GAAG,IAAI,EAAE;MACrB,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;KACpD;SAAM,IAAI,UAAU,GAAG,OAAO,CAAC,WAAW,GAAG,IAAI,EAAE;MAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClG;GACF;EAED,IAAI,SAAS,KAAK,UAAU,IAAI,SAAS,KAAK,MAAM,EAAE;IACpD,IAAI,SAAS,GAAG,IAAI,EAAE;MACpB,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClD;SAAM,IAAI,SAAS,GAAG,OAAO,CAAC,YAAY,GAAG,IAAI,EAAE;MAClD,SAAS,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,SAAS,GAAG,SAAS,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,EAAE,CAAC,CAAC;KAClG;GACF;AACH;;;;;;;","names":[],"sources":["src/utils/offset.ts","src/utils/scroll.ts"],"sourcesContent":["//\n// Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the\n// parent doesn't have to be positioned relative or absolute.\n//\n// NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent\n// seems to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069\n//\nexport function getOffset(element: HTMLElement, parent: HTMLElement) {\n return {\n top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),\n left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left),\n };\n}\n","import { getOffset } from './offset';\n\nconst locks = new Set();\n\n//\n// Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible\n// without premature unlocking.\n//\nexport function lockBodyScrolling(lockingEl: HTMLElement) {\n locks.add(lockingEl);\n document.body.classList.add('six-scroll-lock');\n}\n\n//\n// Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.\n//\nexport function unlockBodyScrolling(lockingEl: HTMLElement) {\n locks.delete(lockingEl);\n\n if (locks.size === 0) {\n document.body.classList.remove('six-scroll-lock');\n }\n}\n\n//\n// Scrolls an element into view of its container. If the element is already in view, nothing will happen.\n//\nexport function scrollIntoView(\n element: HTMLElement,\n container: HTMLElement,\n direction: 'horizontal' | 'vertical' | 'both' = 'vertical',\n behavior: 'smooth' | 'auto' = 'smooth'\n) {\n const offset = getOffset(element, container);\n const offsetTop = offset.top + container.scrollTop;\n const offsetLeft = offset.left + container.scrollLeft;\n const minX = container.scrollLeft;\n const maxX = container.scrollLeft + container.offsetWidth;\n const minY = container.scrollTop;\n const maxY = container.scrollTop + container.offsetHeight;\n\n if (direction === 'horizontal' || direction === 'both') {\n if (offsetLeft < minX) {\n container.scrollTo({ left: offsetLeft, behavior });\n } else if (offsetLeft + element.clientWidth > maxX) {\n container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });\n }\n }\n\n if (direction === 'vertical' || direction === 'both') {\n if (offsetTop < minY) {\n container.scrollTo({ top: offsetTop, behavior });\n } else if (offsetTop + element.clientHeight > maxY) {\n container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });\n }\n }\n}\n"],"version":3}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { newSpecPage } from "@stencil/core/testing";
|
|
2
|
-
import { SixTab } from "../six-tab";
|
|
3
|
-
describe('six-tab', () => {
|
|
4
|
-
it('renders', async () => {
|
|
5
|
-
const page = await newSpecPage({
|
|
6
|
-
components: [SixTab],
|
|
7
|
-
html: `<six-tab></six-tab>`,
|
|
8
|
-
});
|
|
9
|
-
expect(page.root).toEqualHtml(`
|
|
10
|
-
<six-tab id="tab-1" panel="">
|
|
11
|
-
<mock:shadow-root>
|
|
12
|
-
<div aria-disabled="false" aria-selected="false" class="tab" part="base" role="tab" tabindex="-1">
|
|
13
|
-
<slot></slot>
|
|
14
|
-
</div>
|
|
15
|
-
</mock:shadow-root>
|
|
16
|
-
</six-tab>
|
|
17
|
-
`);
|
|
18
|
-
});
|
|
19
|
-
});
|
|
20
|
-
//# sourceMappingURL=six-tab.spec.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"six-tab.spec.js","sourceRoot":"","sources":["../../../../src/components/six-tab/test/six-tab.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,MAAM,CAAC;MACpB,IAAI,EAAE,qBAAqB;KAC5B,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;KAQ7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTab } from '../six-tab';\n\ndescribe('six-tab', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixTab],\n html: `<six-tab></six-tab>`,\n });\n expect(page.root).toEqualHtml(`\n <six-tab id=\"tab-1\" panel=\"\">\n <mock:shadow-root>\n <div aria-disabled=\"false\" aria-selected=\"false\" class=\"tab\" part=\"base\" role=\"tab\" tabindex=\"-1\">\n <slot></slot>\n </div>\n </mock:shadow-root>\n </six-tab>\n `);\n });\n});\n"]}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { newSpecPage } from "@stencil/core/testing";
|
|
2
|
-
import { SixTabGroup } from "../six-tab-group";
|
|
3
|
-
global.ResizeObserver = jest.fn().mockImplementation(() => ({
|
|
4
|
-
observe: jest.fn(),
|
|
5
|
-
unobserve: jest.fn(),
|
|
6
|
-
disconnect: jest.fn(),
|
|
7
|
-
}));
|
|
8
|
-
global.IntersectionObserver = jest.fn().mockImplementation(() => ({
|
|
9
|
-
observe: jest.fn(),
|
|
10
|
-
unobserve: jest.fn(),
|
|
11
|
-
disconnect: jest.fn(),
|
|
12
|
-
}));
|
|
13
|
-
global.MutationObserver = jest.fn().mockImplementation(() => ({
|
|
14
|
-
observe: jest.fn(),
|
|
15
|
-
unobserve: jest.fn(),
|
|
16
|
-
disconnect: jest.fn(),
|
|
17
|
-
}));
|
|
18
|
-
describe('six-tab-group', () => {
|
|
19
|
-
it('renders', async () => {
|
|
20
|
-
const page = await newSpecPage({
|
|
21
|
-
components: [SixTabGroup],
|
|
22
|
-
html: `<six-tab-group></six-tab-group>`,
|
|
23
|
-
});
|
|
24
|
-
expect(page.root).toEqualHtml(`
|
|
25
|
-
<six-tab-group>
|
|
26
|
-
<mock:shadow-root>
|
|
27
|
-
<div class="tab-group tab-group--top" part="base">
|
|
28
|
-
<div class="tab-group__nav-container">
|
|
29
|
-
<div class="tab-group__nav" part="nav">
|
|
30
|
-
<div class="tab-group__tabs" part="tabs" role="tablist">
|
|
31
|
-
<div class="tab-group__active-tab-indicator" part="active-tab-indicator"></div>
|
|
32
|
-
<slot name="nav"></slot>
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="tab-group__body" part="body">
|
|
37
|
-
<slot></slot>
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
</mock:shadow-root>
|
|
41
|
-
</six-tab-group>
|
|
42
|
-
`);
|
|
43
|
-
});
|
|
44
|
-
});
|
|
45
|
-
//# sourceMappingURL=six-tab-group.spec.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"six-tab-group.spec.js","sourceRoot":"","sources":["../../../../src/components/six-tab-group/test/six-tab-group.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,CAAC,cAAc,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;EAC1D,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;EAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;EACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,oBAAoB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;EAChE,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;EAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;EACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,kBAAkB,CAAC,GAAG,EAAE,CAAC,CAAC;EAC5D,OAAO,EAAE,IAAI,CAAC,EAAE,EAAE;EAClB,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE;EACpB,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE;CACtB,CAAC,CAAC,CAAC;AAEJ,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;EAC7B,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;IACvB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,WAAW,CAAC;MACzB,IAAI,EAAE,iCAAiC;KACxC,CAAC,CAAC;IACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;KAkB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { SixTabGroup } from '../six-tab-group';\n\nglobal.ResizeObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n}));\n\nglobal.IntersectionObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n}));\n\nglobal.MutationObserver = jest.fn().mockImplementation(() => ({\n observe: jest.fn(),\n unobserve: jest.fn(),\n disconnect: jest.fn(),\n}));\n\ndescribe('six-tab-group', () => {\n it('renders', async () => {\n const page = await newSpecPage({\n components: [SixTabGroup],\n html: `<six-tab-group></six-tab-group>`,\n });\n expect(page.root).toEqualHtml(`\n <six-tab-group>\n <mock:shadow-root>\n <div class=\"tab-group tab-group--top\" part=\"base\">\n <div class=\"tab-group__nav-container\">\n <div class=\"tab-group__nav\" part=\"nav\">\n <div class=\"tab-group__tabs\" part=\"tabs\" role=\"tablist\">\n <div class=\"tab-group__active-tab-indicator\" part=\"active-tab-indicator\"></div>\n <slot name=\"nav\"></slot>\n </div>\n </div>\n </div>\n <div class=\"tab-group__body\" part=\"body\">\n <slot></slot>\n </div>\n </div>\n </mock:shadow-root>\n </six-tab-group>\n `);\n });\n});\n"]}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,h as o}from"./p-6153045b.js";import{f as i}from"./p-5654e4c7.js";const n=":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}:host{display:inline-block}.icon-button{flex:0 0 auto;display:flex;align-items:center;background:none;border:none;border-radius:var(--six-border-radius-medium);font-size:inherit;color:var(--six-input-icon-color);padding:var(--six-spacing-x-small);cursor:pointer;transition:var(--six-transition-medium) color;-webkit-appearance:none}.icon-button:hover:not(.icon-button--disabled),.icon-button:focus:not(.icon-button--disabled){color:var(--six-input-icon-color-hover)}.icon-button:active:not(.icon-button--disabled){color:var(--six-input-icon-color)}.icon-button:focus{outline:none}.icon-button--disabled{opacity:0.5;pointer-events:none}.icon-button-wrapper--disabled{cursor:not-allowed}.focus-visible.icon-button:focus{box-shadow:var(--six-button-focus-shadow)}.icon-button ::slotted(six-badge){position:absolute;top:0;right:0;pointer-events:none}.icon-button six-icon[size=xLarge]+::slotted(six-badge){transform:translateY(40%) translateX(-35%)}.icon-button six-icon[size=large]+::slotted(six-badge){transform:translateY(20%) translateX(-20%)}.icon-button six-icon[size=medium]+::slotted(six-badge){transform:translateY(10%) translateX(50%)}.icon-button six-icon[size=xSmall]+::slotted(six-badge){transform:translateY(-25%) translateX(25%)}";const s=class{constructor(o){t(this,o);this.handleClickEvent=t=>{if(this.disabled){t.preventDefault();t.stopPropagation()}};this.name=undefined;this.size="medium";this.label=undefined;this.disabled=false;this.html=undefined}componentDidLoad(){if(this.button!=null){i.observe(this.button)}}disconnectedCallback(){if(this.button!=null){i.unobserve(this.button)}}render(){const t=this.html&&o("span",{innerHTML:this.html});return o("div",{onClick:this.handleClickEvent,class:{"icon-button-wrapper--disabled":this.disabled}},o("button",{ref:t=>this.button=t,part:"base",disabled:this.disabled,class:{"icon-button":true,"icon-button--disabled":this.disabled},type:"button","aria-label":this.label},o("six-icon",{"aria-hidden":"true",size:this.size},this.name),o("slot",null),t))}};s.style=n;export{s as six_icon_button};
|
|
2
|
-
//# sourceMappingURL=p-1256cc0a.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["sixIconButtonCss","SixIconButton","this","handleClickEvent","event","disabled","preventDefault","stopPropagation","componentDidLoad","button","focusVisible","observe","disconnectedCallback","unobserve","render","html","h","innerHTML","onClick","class","ref","el","part","type","label","size","name"],"sources":["src/components/six-icon-button/six-icon-button.scss?tag=six-icon-button&encapsulation=shadow","src/components/six-icon-button/six-icon-button.tsx"],"sourcesContent":["@import 'src/global/component';\n\n:host {\n display: inline-block;\n}\n\n.icon-button {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n background: none;\n border: none;\n border-radius: var(--six-border-radius-medium);\n font-size: inherit;\n color: var(--six-input-icon-color);\n padding: var(--six-spacing-x-small);\n cursor: pointer;\n transition: var(--six-transition-medium) color;\n -webkit-appearance: none;\n\n &:hover:not(.icon-button--disabled),\n &:focus:not(.icon-button--disabled) {\n color: var(--six-input-icon-color-hover);\n }\n\n &:active:not(.icon-button--disabled) {\n color: var(--six-input-icon-color);\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.icon-button--disabled {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.icon-button-wrapper--disabled {\n cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n box-shadow: var(--six-button-focus-shadow);\n}\n\n.icon-button ::slotted(six-badge) {\n position: absolute;\n top: 0;\n right: 0;\n pointer-events: none;\n}\n\n.icon-button six-icon[size='xLarge'] + ::slotted(six-badge) {\n transform: translateY(40%) translateX(-35%);\n}\n\n.icon-button six-icon[size='large'] + ::slotted(six-badge) {\n transform: translateY(20%) translateX(-20%);\n}\n\n// TODO: tx4u9 should be adjusted for all sizes after design team\n.icon-button six-icon[size='medium'] + ::slotted(six-badge) {\n transform: translateY(10%) translateX(50%);\n}\n\n.icon-button six-icon[size='small'] + ::slotted(six-badge) {\n // no translation necessary\n}\n\n.icon-button six-icon[size='xSmall'] + ::slotted(six-badge) {\n transform: translateY(-25%) translateX(25%);\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { focusVisible } from '../../utils/focus-visible';\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 * @part base - The component's base wrapper.\n */\n\n@Component({\n tag: 'six-icon-button',\n styleUrl: 'six-icon-button.scss',\n shadow: true,\n})\nexport class SixIconButton {\n private button?: HTMLButtonElement;\n\n /** The name of the icon to draw. */\n @Prop({ reflect: true }) name?: string;\n\n /** The icon's size. */\n @Prop({ reflect: true }) size: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | 'xxLarge' | 'xxxLarge' = 'medium';\n\n /**\n * A description that gets read by screen readers and other assistive devices. For optimal accessibility, you should\n * always include a label that describes what the icon button does.\n */\n @Prop({ reflect: true }) label?: string;\n\n /** Set to true to disable the button. */\n @Prop({ reflect: true }) disabled = false;\n\n /** HTML symbol code or entity. */\n @Prop({ reflect: true }) html?: string;\n\n componentDidLoad() {\n if (this.button != null) {\n focusVisible.observe(this.button);\n }\n }\n\n disconnectedCallback() {\n if (this.button != null) {\n focusVisible.unobserve(this.button);\n }\n }\n\n render() {\n const html = this.html && <span innerHTML={this.html} />;\n\n return (\n <div onClick={this.handleClickEvent} class={{ 'icon-button-wrapper--disabled': this.disabled }}>\n <button\n ref={(el) => (this.button = el)}\n part=\"base\"\n disabled={this.disabled}\n class={{\n 'icon-button': true,\n 'icon-button--disabled': this.disabled,\n }}\n type=\"button\"\n aria-label={this.label}\n >\n <six-icon aria-hidden=\"true\" size={this.size}>\n {this.name}\n </six-icon>\n <slot />\n {html}\n </button>\n </div>\n );\n }\n\n private handleClickEvent = (event: Event) => {\n if (this.disabled) {\n event.preventDefault();\n event.stopPropagation();\n }\n };\n}\n"],"mappings":"+EAAA,MAAMA,EAAmB,i0C,MCiBZC,EAAa,M,yBA2DhBC,KAAAC,iBAAoBC,IAC1B,GAAIF,KAAKG,SAAU,CACjBD,EAAME,iBACNF,EAAMG,iB,iCAvDmG,S,mCASzE,M,oBAKpC,gBAAAC,GACE,GAAIN,KAAKO,QAAU,KAAM,CACvBC,EAAaC,QAAQT,KAAKO,O,EAI9B,oBAAAG,GACE,GAAIV,KAAKO,QAAU,KAAM,CACvBC,EAAaG,UAAUX,KAAKO,O,EAIhC,MAAAK,GACE,MAAMC,EAAOb,KAAKa,MAAQC,EAAA,QAAMC,UAAWf,KAAKa,OAEhD,OACEC,EAAA,OAAKE,QAAShB,KAAKC,iBAAkBgB,MAAO,CAAE,gCAAiCjB,KAAKG,WAClFW,EAAA,UACEI,IAAMC,GAAQnB,KAAKO,OAASY,EAC5BC,KAAK,OACLjB,SAAUH,KAAKG,SACfc,MAAO,CACL,cAAe,KACf,wBAAyBjB,KAAKG,UAEhCkB,KAAK,SAAQ,aACDrB,KAAKsB,OAEjBR,EAAA,0BAAsB,OAAOS,KAAMvB,KAAKuB,MACrCvB,KAAKwB,MAERV,EAAA,aACCD,G"}
|