npm - @siemens/ix - Versions diffs - 2.4.1 → 2.6.0 - Mend

@siemens/ix 2.4.1 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1750) hide show

package/dist/siemens-ix/p-c33cee36.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as i,H as s,g as h}from"./p-f87cd962.js";import{a as o}from"./p-71206084.js";import{A as a}from"./p-46a6cd9d.js";import{a as r}from"./p-fbe017b7.js";import{m as n}from"./p-68a274e7.js";import"./p-c4749812.js";const l=":host{background-color:var(--theme-color-2);display:flex;position:relative;overflow:hidden;box-sizing:border-box}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host {scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host aside{width:100%;height:100%}:host .title-text{display:flex;align-items:center;gap:var(--theme-space-1);overflow:hidden}:host .title-text .title-text-overflow{width:100%;height:100%;display:contents}:host .title-text .title-text-overflow *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host .header-gap{gap:var(--theme-space-1)}:host .top-bottom-pane{display:flex;flex-direction:column;flex-grow:1}:host .top-bottom-pane .title{display:flex;flex-direction:row;align-items:center;margin:var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2)}:host .top-bottom-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .top-bottom-pane .title-expanded{display:flex;flex-direction:row}:host .top-bottom-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane{display:flex;flex-grow:1}:host .left-right-pane .title{display:flex;flex-direction:column;align-items:center;margin:var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1)}:host .left-right-pane .title .title-text{flex-direction:row-reverse;justify-content:start;flex-direction:row}:host .left-right-pane .title .rotate{writing-mode:vertical-lr;text-orientation:mixed;transform:rotate(180deg);flex-direction:row-reverse}:host .left-right-pane .title .rotate ix-icon{transform:rotate(90deg)}:host .left-right-pane .title-finished{padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane .title-expanded{display:flex;flex-direction:row}:host .left-right-pane .title-hide-on-collapse{display:flex;flex-direction:row-reverse;justify-content:space-between;padding:0 !important;margin:var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2)}:host .left-right-pane.expanded{flex-direction:column}:host .mobile-pane{display:flex;flex-direction:column;flex-grow:1}:host .mobile-pane .title-mobile{display:flex;flex-direction:row-reverse;justify-content:space-between;margin:var(--theme-space-1) var(--theme-space-2)}:host .side-pane-content{padding:var(--theme-space-1) var(--theme-space-2);overflow:auto;height:100%;width:100%}:host(.not-visible){display:none}:host(.inline-color){background-color:var(--theme-color-1)}:host(.box-shadow){box-shadow:0 0 1rem black}:host(.nav-left-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr)}:host(.left-pane-border){border-right:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.right-pane-border){border-left:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-pane-border){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.bottom-pane-border){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-overlay){width:100%;position:absolute;z-index:100 !important}:host(.mobile-overlay) .side-pane-content{height:calc(100% - 2.5rem)}:host(.mobile-border-top){border-bottom:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.mobile-border-bottom){border-top:var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr)}:host(.top-expanded){top:0}:host(.bottom-expanded){bottom:0}:host(.left-right-pane){height:100%}:host(.top-bottom-pane){width:100%}";const d=l;const p=class{constructor(i){t(this,i);this.expandedChanged=e(this,"expandedChanged",7);this.variantChanged=e(this,"variantChanged",7);this.borderlessChanged=e(this,"borderlessChanged",7);this.hideOnCollapseChanged=e(this,"hideOnCollapseChanged",7);this.slotChanged=e(this,"slotChanged",7);this.validPositions=["top","left","bottom","right"];this.collapsedPane="40px";this.collapsedPaneMobile="48px";this.animations=new Map;this.animationCounter=0;this.heading=undefined;this.variant="inline";this.hideOnCollapse=false;this.size="240px";this.borderless=false;this.expanded=false;this.composition="top";this.icon=undefined;this.ignoreLayoutSettings=false;this.isMobile=false;this.expandIcon="";this.showContent=false;this.minimizeIcon="";this.floating=false;this.parentWidthPx=0;this.parentHeightPx=0}get currentSlot(){return this.hostElement.getAttribute("slot")}get isBottomTopPane(){return this.composition==="bottom"\|\|this.composition==="top"}get isLeftRightPane(){return this.composition==="left"\|\|this.composition==="right"}get isMobileTop(){return this.composition==="top"\|\|this.composition==="left"}componentWillLoad(){this.setIcons();this.floating=this.variant==="floating";if(this.expanded){this.onParentSizeChange()}this.isMobile=n("sm");r.onChange.on((()=>{this.isMobile=n("sm")}));this.setPosition(this.currentSlot);this.mutationObserver=new MutationObserver((t=>{t.forEach((t=>{if(t.type==="attributes"&&t.attributeName==="slot"){const e=this.currentSlot;const i=t.oldValue;if(e!==i){this.slotChanged.emit({slot:i,newSlot:e});this.setPosition(e)}}}))}));this.mutationObserver.observe(this.hostElement,{attributes:true,attributeOldValue:true});const t=this.hostElement.parentElement;this.resizeObserver=new ResizeObserver((t=>{this.parentWidthPx=t[0].borderBoxSize[0].inlineSize;this.parentHeightPx=t[0].borderBoxSize[0].blockSize}));if(t)this.resizeObserver.observe(t)}disconnectedCallback(){var t,e;(t=this.mutationObserver)===null\|\|t===void 0?void 0:t.disconnect();(e=this.resizeObserver)===null\|\|e===void 0?void 0:e.disconnect()}setPosition(t){if(this.validPositions.includes(t)){this.composition=t}}getExpandPaneSize(){let t;if(this.isBottomTopPane){if(this.size.includes("px")){const e=Math.round(this.parentHeightPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentHeightPx/2)}px`}else{t=`${Math.round(this.parentHeightPx/3)}px`}}}else{if(this.size.includes("px")){const e=Math.round(this.parentWidthPx/2);const i=Number(this.size.replace("px",""));if(e&&e<i){t=`${e}px`}else{t=`${i}px`}}else{if(this.size==="50%"){t=`${Math.round(this.parentWidthPx/2)}px`}else{t=`${Math.round(this.parentWidthPx/3)}px`}}}return t}setIcons(){const{expandIcon:t,minimizeIcon:e}=this.getIconNames();this.expandIcon=t;this.minimizeIcon=e}getIconNames(){let t="";let e="";switch(this.composition){case"left":t=this.isMobile?"double-chevron-up":"double-chevron-left";e=this.isMobile?"double-chevron-down":"double-chevron-right";break;case"right":t=this.isMobile?"double-chevron-down":"double-chevron-right";e=this.isMobile?"double-chevron-up":"double-chevron-left";break;case"bottom":t="double-chevron-down";e="double-chevron-up";break;case"top":t="double-chevron-up";e="double-chevron-down";break}return{expandIcon:t,minimizeIcon:e}}getKey(){return(this.animationCounter++).toString()}animateVerticalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,width:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;this.animateVerticalPadding("0px")}else{this.animateVerticalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}animateHorizontalFadeIn(t){let e=this.getKey();let i=o({targets:this.hostElement,duration:a.mediumTime,height:t,easing:"easeInOutSine",delay:0,begin:()=>{if(!this.expanded){this.showContent=false;if(!this.isMobile)this.animateHorizontalPadding("0px")}else{if(!this.isMobile)this.animateHorizontalPadding("8px")}},complete:()=>{if(this.expanded){this.showContent=true}this.animations.delete(e)}});this.animations.set(e,i)}removePadding(){o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:0,paddingTop:0,paddingBottom:0,paddingLeft:0,paddingRight:0,delay:0})}animateHorizontalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingTop:t,paddingBottom:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}animateVerticalPadding(t,e=a.mediumTime){let i=this.getKey();let s=o({targets:this.hostElement.shadowRoot.querySelector("#title-div"),duration:e,paddingLeft:t,paddingRight:t,easing:"easeInOutSine",delay:0,complete:()=>{this.animations.delete(i)}});this.animations.set(i,s)}clearAnimations(){this.animations.forEach((t=>t.pause()));this.animations.clear();this.animationCounter=0}onMobileChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.hostElement.style.removeProperty("min-height");this.onParentSizeChange()}onPositionChange(){this.setIcons();this.hostElement.style.removeProperty("width");this.hostElement.style.removeProperty("height");this.onParentSizeChange()}onHideOnCollapseChange(t){this.onParentSizeChange();this.hideOnCollapseChanged.emit({slot:this.currentSlot,hideOnCollapse:t})}onVariantChange(t){this.floating=t==="floating";this.variantChanged.emit({slot:this.currentSlot,variant:t})}onBorderlessChange(t){this.borderlessChanged.emit({slot:this.currentSlot,borderless:t})}onExpandedChange(){this.onSizeChange();this.expandedChanged.emit({slot:this.currentSlot,expanded:this.expanded})}onParentSizeChange(){this.clearAnimations();this.removePadding();if(this.expanded){if(this.isMobile){this.hostElement.style.height="100%"}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=t;this.animateHorizontalPadding("8px",0)}else{this.hostElement.style.width=t;this.animateVerticalPadding("8px",0)}}this.showContent=true}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPaneMobile}else{if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPane}else{this.hostElement.style.width=this.hideOnCollapse?"0":this.collapsedPane}}}}onSizeChange(){if(this.expanded){if(this.isMobile){this.hostElement.style.minHeight=this.hideOnCollapse?"0":this.collapsedPaneMobile;this.animateHorizontalFadeIn("100%")}else{const t=this.getExpandPaneSize();if(this.isBottomTopPane){this.hostElement.style.height=this.hideOnCollapse?"0":this.collapsedPane;this.animateHorizontalFadeIn(t)}else{this.hostElement.style.width=this.hideOnCollapse?"0":this.collapsedPane;this.animateVerticalFadeIn(t)}}}else{this.showContent=false;if(this.isMobile){this.hostElement.style.height=this.collapsedPaneMobile}else{if(this.isBottomTopPane){this.animateHorizontalFadeIn(this.collapsedPane)}else{this.animateVerticalFadeIn(this.collapsedPane)}}}}render(){return i(s,{key:"10c2543fa3814a44f4a696b768070da6a0b2ce83",class:{"inline-color":!this.floating,"mobile-overlay":this.expanded&&this.isMobile,"top-expanded":this.expanded&&this.isMobileTop&&this.isMobile,"bottom-expanded":this.expanded&&!this.isMobileTop&&this.isMobile,"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,[`${this.composition}-pane-border`]:!this.borderless&&!this.isMobile&&!this.floating,"nav-left-border":!this.borderless&&!this.isMobile&&this.composition!=="right"&&this.floating,"mobile-border-top":!this.borderless&&this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"mobile-border-bottom":!this.borderless&&!this.isMobileTop&&this.isMobile&&!this.expanded&&!this.floating,"box-shadow":this.floating,"aria-expanded":this.expanded,"not-visible":this.hideOnCollapse&&!this.expanded}},i("aside",{key:"4bea08d18307f21ca3d71874117152c10acd9ce9",class:{"top-bottom-pane":this.isBottomTopPane&&!this.isMobile,"left-right-pane":this.isLeftRightPane&&!this.isMobile,"mobile-pane":this.isMobile,expanded:this.expanded}},i("div",{key:"b86bd206f53643fb15f411528dd9e41e1d060ef8",id:"title-div",class:{title:!this.isMobile&&!this.hideOnCollapse&&!this.showContent,"title-finished":!this.isMobile&&!this.hideOnCollapse&&this.showContent,"title-expanded":!this.isMobile&&!this.hideOnCollapse&&this.expanded,"title-hide-on-collapse":!this.isMobile&&this.hideOnCollapse,"title-mobile":this.isMobile,"header-gap":!this.isMobile&&!this.hideOnCollapse}},i("ix-icon-button",{key:"4f58db9432c7685521d7a60257fff08118bc3c76",class:"title-icon",size:"24",icon:this.expanded?this.isMobile\|\|this.hideOnCollapse?"close":this.expandIcon:this.minimizeIcon,ghost:true,onClick:()=>{this.expanded=!this.expanded},"aria-controls":this.composition+"ToggleButton"}),i("span",{key:"bd88452cdede62871391416c736ff80ae29f14a0",class:{"title-text":true,rotate:!this.expanded&&!this.isMobile&&this.isLeftRightPane}},this.icon?i("ix-icon",{size:"24",name:this.icon}):null,i("div",{key:"6e49c2b280c258209dd43aa03658ab4bbcb9b883",class:"title-text-overflow"},i("ix-typography",{key:"65fa43f3fec84b63d24d14b38434eea186aa0910",format:"h4"},this.heading)))),i("div",{key:"11a5da6825a09b85f4957854179264c43ccd8a6f",class:"side-pane-content",hidden:!this.showContent},i("slot",{key:"3c986fb71f77e5481ffd6449445b4247429ff07e"}))))}get hostElement(){return h(this)}static get watchers(){return{isMobile:["onMobileChange"],composition:["onPositionChange"],hideOnCollapse:["onHideOnCollapseChange"],variant:["onVariantChange"],borderless:["onBorderlessChange"],expanded:["onExpandedChange"],parentHeightPx:["onParentSizeChange"],parentWidthPx:["onParentSizeChange"],size:["onSizeChange"]}}};p.style=d;export{p as ix_pane};
2	- //# sourceMappingURL=p-c33cee36.entry.js.map

package/dist/siemens-ix/p-c33cee36.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["paneCss","IxPaneStyle0","Pane","this","validPositions","collapsedPane","collapsedPaneMobile","animations","Map","animationCounter","currentSlot","hostElement","getAttribute","isBottomTopPane","composition","isLeftRightPane","isMobileTop","componentWillLoad","setIcons","floating","variant","expanded","onParentSizeChange","isMobile","matchBreakpoint","applicationLayoutService","onChange","on","setPosition","mutationObserver","MutationObserver","mutations","forEach","mutation","type","attributeName","newSlot","oldSlot","oldValue","slotChanged","emit","slot","observe","attributes","attributeOldValue","parentElement","resizeObserver","ResizeObserver","entries","parentWidthPx","borderBoxSize","inlineSize","parentHeightPx","blockSize","disconnectedCallback","_a","disconnect","_b","value","includes","getExpandPaneSize","expandPaneSize","size","referenceValue","Math","round","currentValue","Number","replace","expandIcon","minimizeIcon","getIconNames","getKey","toString","animateVerticalFadeIn","key","animation","anime","targets","duration","Animation","mediumTime","width","easing","delay","begin","showContent","animateVerticalPadding","complete","delete","set","animateHorizontalFadeIn","height","animateHorizontalPadding","removePadding","shadowRoot","querySelector","paddingTop","paddingBottom","paddingLeft","paddingRight","clearAnimations","pause","clear","onMobileChange","style","removeProperty","onPositionChange","onHideOnCollapseChange","hideOnCollapseChanged","hideOnCollapse","onVariantChange","variantChanged","onBorderlessChange","borderlessChanged","borderless","onExpandedChange","onSizeChange","expandedChanged","minHeight","render","h","Host","class","id","title","icon","ghost","onClick","rotate","name","format","heading","hidden"],"sources":["src/components/pane/pane.scss?tag=ix-pane&encapsulation=shadow","src/components/pane/pane.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n@mixin set-border($composition) {\n @if $composition {\n border-#{$composition}: var(--theme-app-header--border-width) solid var(--theme-color-soft-bdr);\n }\n}\n\n:host {\n @include ix-component;\n background-color: var(--theme-color-2);\n display: flex;\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n\n aside {\n width: 100%;\n height: 100%;\n }\n\n .title-text {\n display: flex;\n align-items: center;\n gap: var(--theme-space-1);\n overflow: hidden;\n\n .title-text-overflow {\n width: 100%;\n height: 100%;\n display: contents;\n\n * {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n }\n\n .header-gap {\n gap: var(--theme-space-1);\n }\n\n .top-bottom-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: row;\n align-items: center;\n margin: var(--theme-space--1) var(--theme-space-2) var(--theme-space--1) var(--theme-space-2);\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane {\n display: flex;\n flex-grow: 1;\n\n .title {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: var(--theme-space-2) var(--theme-space--1) var(--theme-space-2) var(--theme-space--1);\n\n .title-text {\n flex-direction: row-reverse;\n justify-content: start;\n flex-direction: row;\n }\n\n .rotate {\n writing-mode: vertical-lr;\n text-orientation: mixed;\n transform: rotate(180deg);\n flex-direction: row-reverse;\n\n ix-icon {\n transform: rotate(90deg);\n }\n }\n }\n\n .title-finished {\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n\n .title-expanded {\n display: flex;\n flex-direction: row;\n }\n\n .title-hide-on-collapse {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n padding: 0 !important;\n margin: var(--theme-space-2) var(--theme-space-2) var(--theme-space-2) var(--theme-space-2);\n }\n }\n\n .left-right-pane.expanded {\n flex-direction: column;\n }\n\n .mobile-pane {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n\n .title-mobile {\n display: flex;\n flex-direction: row-reverse;\n justify-content: space-between;\n margin: var(--theme-space-1) var(--theme-space-2);\n }\n }\n\n .side-pane-content {\n padding: var(--theme-space-1) var(--theme-space-2);\n overflow: auto;\n height: 100%;\n width: 100%;\n }\n}\n\n:host(.not-visible) {\n display: none;\n}\n\n:host(.inline-color) {\n background-color: var(--theme-color-1);\n}\n\n:host(.box-shadow) {\n box-shadow: 0 0 1rem black;\n}\n\n:host(.nav-left-border) {\n border-left: var(--theme-app-header--border-width) solid var(--theme-color-weak-bdr);\n}\n\n:host(.left-pane-border) {\n @include set-border(right);\n}\n\n:host(.right-pane-border) {\n @include set-border(left);\n}\n\n:host(.top-pane-border) {\n @include set-border(bottom);\n}\n\n:host(.bottom-pane-border) {\n @include set-border(top);\n}\n\n:host(.mobile-overlay) {\n width: 100%;\n position: absolute;\n z-index: 100 !important;\n\n .side-pane-content {\n height: calc(100% - 2.5rem);\n }\n}\n\n:host(.mobile-border-top) {\n @include set-border(bottom);\n}\n\n:host(.mobile-border-bottom) {\n @include set-border(top);\n}\n\n:host(.top-expanded) {\n top: 0;\n}\n\n:host(.bottom-expanded) {\n bottom: 0;\n}\n\n:host(.left-right-pane) {\n height: 100%;\n}\n\n:host(.top-bottom-pane) {\n width: 100%;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport Animation from '../utils/animation';\nimport { applicationLayoutService } from '../utils/application-layout';\nimport { matchBreakpoint } from '../utils/breakpoints';\n\nexport type Composition = 'top' | 'left' | 'bottom' | 'right';\nexport type ExpandedChangedEvent = {\n slot: string;\n expanded: boolean;\n};\nexport type SlotChangedEvent = {\n slot: string;\n newSlot: string;\n};\nexport type HideOnCollapseChangedEvent = {\n slot: string;\n hideOnCollapse: boolean;\n};\nexport type VariantChangedEvent = {\n slot: string;\n variant: 'floating' | 'inline';\n};\nexport type BorderlessChangedEvent = {\n slot: string;\n borderless: boolean;\n};\n\n/**\n * @since 2.1.0\n */\n@Component({\n tag: 'ix-pane',\n styleUrl: 'pane.scss',\n shadow: true,\n})\nexport class Pane {\n @Element() hostElement: HTMLIxPaneElement;\n\n /**\n * Title of the side panel\n */\n @Prop() heading: string;\n\n /**\n * Variant of the side pane.\n * Defaults to the variant attribute of the pane layout. If used standalone it defaults to inline.\n */\n @Prop() variant: 'floating' | 'inline' = 'inline';\n\n /**\n * Define if the pane should have a collapsed state\n */\n @Prop() hideOnCollapse: boolean = false;\n\n /**\n * The maximum size of the sidebar, when it is expanded\n */\n @Prop() size:\n | '240px'\n | '320px'\n | '360px'\n | '480px'\n | '600px'\n | '33%'\n | '50%' = '240px';\n\n /**\n * Toggle the border of the pane.\n * Defaults to the borderless attribute of the pane layout. If used standalone it defaults to false.\n */\n @Prop() borderless: boolean = false;\n\n /**\n * State of the pane\n */\n @Prop({ mutable: true }) expanded: boolean = false;\n\n /**\n * Defines the position of the pane inside it's container.\n * Inside a pane layout this property will automatically be set to the name of slot the pane is assigned to.\n */\n @Prop({ mutable: true }) composition: Composition = 'top';\n\n /**\n * Name of the icon\n */\n @Prop() icon: string;\n\n /**\n * @internal\n * Prevents overwriting of the variant and borderless property when used inside layout\n */\n @Prop() ignoreLayoutSettings: boolean = false;\n\n /**\n * @internal\n */\n @Prop({ mutable: true }) isMobile: boolean = false;\n\n /**\n * This event is triggered when the pane either expands or contracts\n */\n @Event() expandedChanged: EventEmitter<ExpandedChangedEvent>;\n\n /**\n * This event is triggered when the variant of the pane is changed\n */\n @Event() variantChanged: EventEmitter<VariantChangedEvent>;\n\n /**\n * This event is triggered when the variant of the pane is changed\n */\n @Event() borderlessChanged: EventEmitter<BorderlessChangedEvent>;\n\n /**\n * @internal\n */\n @Event() hideOnCollapseChanged: EventEmitter<HideOnCollapseChangedEvent>;\n\n /**\n * @internal\n */\n @Event() slotChanged: EventEmitter<SlotChangedEvent>;\n\n @State() private expandIcon = '';\n @State() private showContent = false;\n @State() private minimizeIcon = '';\n @State() private floating = false;\n @State() private parentWidthPx = 0;\n @State() private parentHeightPx = 0;\n\n private validPositions = ['top', 'left', 'bottom', 'right'];\n private collapsedPane = '40px';\n private collapsedPaneMobile = '48px';\n private animations: Map<string, anime.AnimeInstance> = new Map();\n private animationCounter = 0;\n\n private mutationObserver: MutationObserver;\n private resizeObserver: ResizeObserver;\n\n get currentSlot() {\n return this.hostElement.getAttribute('slot');\n }\n\n get isBottomTopPane() {\n return this.composition === 'bottom' || this.composition === 'top';\n }\n\n get isLeftRightPane() {\n return this.composition === 'left' || this.composition === 'right';\n }\n\n get isMobileTop() {\n return this.composition === 'top' || this.composition === 'left';\n }\n\n componentWillLoad() {\n this.setIcons();\n\n this.floating = this.variant === 'floating';\n\n if (this.expanded) {\n this.onParentSizeChange();\n }\n\n this.isMobile = matchBreakpoint('sm');\n applicationLayoutService.onChange.on(() => {\n this.isMobile = matchBreakpoint('sm');\n });\n\n this.setPosition(this.currentSlot);\n\n this.mutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n mutation.type === 'attributes' &&\n mutation.attributeName === 'slot'\n ) {\n const newSlot = this.currentSlot;\n const oldSlot = mutation.oldValue;\n\n if (newSlot !== oldSlot) {\n this.slotChanged.emit({\n slot: oldSlot,\n newSlot: newSlot,\n });\n this.setPosition(newSlot);\n }\n }\n });\n });\n this.mutationObserver.observe(this.hostElement, {\n attributes: true,\n attributeOldValue: true,\n });\n\n const parentElement = this.hostElement.parentElement;\n this.resizeObserver = new ResizeObserver((entries) => {\n this.parentWidthPx = entries[0].borderBoxSize[0].inlineSize;\n this.parentHeightPx = entries[0].borderBoxSize[0].blockSize;\n });\n if (parentElement) this.resizeObserver.observe(parentElement);\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n this.resizeObserver?.disconnect();\n }\n\n private setPosition(value: string) {\n if (this.validPositions.includes(value)) {\n this.composition = value as Composition;\n }\n }\n\n private getExpandPaneSize() {\n let expandPaneSize: string;\n\n if (this.isBottomTopPane) {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentHeightPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentHeightPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentHeightPx / 3)}px`;\n }\n }\n } else {\n if (this.size.includes('px')) {\n const referenceValue = Math.round(this.parentWidthPx / 2);\n const currentValue = Number(this.size.replace('px', ''));\n\n if (referenceValue && referenceValue < currentValue) {\n expandPaneSize = `${referenceValue}px`;\n } else {\n expandPaneSize = `${currentValue}px`;\n }\n } else {\n if (this.size === '50%') {\n expandPaneSize = `${Math.round(this.parentWidthPx / 2)}px`;\n } else {\n expandPaneSize = `${Math.round(this.parentWidthPx / 3)}px`;\n }\n }\n }\n\n return expandPaneSize;\n }\n\n private setIcons() {\n const { expandIcon, minimizeIcon } = this.getIconNames();\n this.expandIcon = expandIcon;\n this.minimizeIcon = minimizeIcon;\n }\n\n private getIconNames(): { expandIcon: string; minimizeIcon: string } {\n let expandIcon = '';\n let minimizeIcon = '';\n\n switch (this.composition) {\n case 'left':\n expandIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n minimizeIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n break;\n case 'right':\n expandIcon = this.isMobile\n ? 'double-chevron-down'\n : 'double-chevron-right';\n minimizeIcon = this.isMobile\n ? 'double-chevron-up'\n : 'double-chevron-left';\n break;\n case 'bottom':\n expandIcon = 'double-chevron-down';\n minimizeIcon = 'double-chevron-up';\n break;\n case 'top':\n expandIcon = 'double-chevron-up';\n minimizeIcon = 'double-chevron-down';\n break;\n }\n\n return { expandIcon, minimizeIcon };\n }\n\n private getKey() {\n return (this.animationCounter++).toString();\n }\n\n private animateVerticalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n width: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n this.animateVerticalPadding('0px');\n } else {\n this.animateVerticalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateHorizontalFadeIn(size: string) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement,\n duration: Animation.mediumTime,\n height: size,\n easing: 'easeInOutSine',\n delay: 0,\n begin: () => {\n if (!this.expanded) {\n this.showContent = false;\n if (!this.isMobile) this.animateHorizontalPadding('0px');\n } else {\n if (!this.isMobile) this.animateHorizontalPadding('8px');\n }\n },\n complete: () => {\n if (this.expanded) {\n this.showContent = true;\n }\n\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private removePadding() {\n anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: 0,\n paddingTop: 0,\n paddingBottom: 0,\n paddingLeft: 0,\n paddingRight: 0,\n delay: 0,\n });\n }\n\n private animateHorizontalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingTop: size,\n paddingBottom: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private animateVerticalPadding(\n size: string,\n duration = Animation.mediumTime\n ) {\n let key = this.getKey();\n let animation = anime({\n targets: this.hostElement.shadowRoot.querySelector('#title-div'),\n duration: duration,\n paddingLeft: size,\n paddingRight: size,\n easing: 'easeInOutSine',\n delay: 0,\n complete: () => {\n this.animations.delete(key);\n },\n });\n\n this.animations.set(key, animation);\n }\n\n private clearAnimations() {\n this.animations.forEach((animation) => animation.pause());\n this.animations.clear();\n this.animationCounter = 0;\n }\n\n @Watch('isMobile')\n onMobileChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.hostElement.style.removeProperty('min-height');\n this.onParentSizeChange();\n }\n\n @Watch('composition')\n onPositionChange() {\n this.setIcons();\n this.hostElement.style.removeProperty('width');\n this.hostElement.style.removeProperty('height');\n this.onParentSizeChange();\n }\n\n @Watch('hideOnCollapse')\n onHideOnCollapseChange(value: boolean) {\n this.onParentSizeChange();\n\n this.hideOnCollapseChanged.emit({\n slot: this.currentSlot,\n hideOnCollapse: value,\n });\n }\n\n @Watch('variant')\n onVariantChange(value: 'inline' | 'floating') {\n this.floating = value === 'floating';\n\n this.variantChanged.emit({\n slot: this.currentSlot,\n variant: value,\n });\n }\n\n @Watch('borderless')\n onBorderlessChange(value: boolean) {\n this.borderlessChanged.emit({\n slot: this.currentSlot,\n borderless: value,\n });\n }\n\n @Watch('expanded')\n onExpandedChange() {\n this.onSizeChange();\n\n this.expandedChanged.emit({\n slot: this.currentSlot,\n expanded: this.expanded,\n });\n }\n\n @Watch('parentHeightPx')\n @Watch('parentWidthPx')\n onParentSizeChange() {\n this.clearAnimations();\n this.removePadding();\n\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.height = '100%';\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = expandPaneSize;\n this.animateHorizontalPadding('8px', 0);\n } else {\n this.hostElement.style.width = expandPaneSize;\n this.animateVerticalPadding('8px', 0);\n }\n }\n\n this.showContent = true;\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n }\n }\n }\n }\n\n @Watch('size')\n onSizeChange() {\n if (this.expanded) {\n if (this.isMobile) {\n this.hostElement.style.minHeight = this.hideOnCollapse\n ? '0'\n : this.collapsedPaneMobile;\n this.animateHorizontalFadeIn('100%');\n } else {\n const expandPaneSize = this.getExpandPaneSize();\n\n if (this.isBottomTopPane) {\n this.hostElement.style.height = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateHorizontalFadeIn(expandPaneSize);\n } else {\n this.hostElement.style.width = this.hideOnCollapse\n ? '0'\n : this.collapsedPane;\n this.animateVerticalFadeIn(expandPaneSize);\n }\n }\n } else {\n this.showContent = false;\n\n if (this.isMobile) {\n this.hostElement.style.height = this.collapsedPaneMobile;\n } else {\n if (this.isBottomTopPane) {\n this.animateHorizontalFadeIn(this.collapsedPane);\n } else {\n this.animateVerticalFadeIn(this.collapsedPane);\n }\n }\n }\n }\n\n render() {\n return (\n <Host\n class={{\n 'inline-color': !this.floating,\n 'mobile-overlay': this.expanded && this.isMobile,\n 'top-expanded': this.expanded && this.isMobileTop && this.isMobile,\n 'bottom-expanded':\n this.expanded && !this.isMobileTop && this.isMobile,\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n [`${this.composition}-pane-border`]:\n !this.borderless && !this.isMobile && !this.floating,\n 'nav-left-border':\n !this.borderless &&\n !this.isMobile &&\n this.composition !== 'right' &&\n this.floating,\n 'mobile-border-top':\n !this.borderless &&\n this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'mobile-border-bottom':\n !this.borderless &&\n !this.isMobileTop &&\n this.isMobile &&\n !this.expanded &&\n !this.floating,\n 'box-shadow': this.floating,\n 'aria-expanded': this.expanded,\n 'not-visible': this.hideOnCollapse && !this.expanded,\n }}\n >\n <aside\n class={{\n 'top-bottom-pane': this.isBottomTopPane && !this.isMobile,\n 'left-right-pane': this.isLeftRightPane && !this.isMobile,\n 'mobile-pane': this.isMobile,\n expanded: this.expanded,\n }}\n >\n <div\n id=\"title-div\"\n class={{\n title:\n !this.isMobile && !this.hideOnCollapse && !this.showContent,\n 'title-finished':\n !this.isMobile && !this.hideOnCollapse && this.showContent,\n 'title-expanded':\n !this.isMobile && !this.hideOnCollapse && this.expanded,\n 'title-hide-on-collapse': !this.isMobile && this.hideOnCollapse,\n 'title-mobile': this.isMobile,\n 'header-gap': !this.isMobile && !this.hideOnCollapse,\n }}\n >\n <ix-icon-button\n class=\"title-icon\"\n size=\"24\"\n icon={\n this.expanded\n ? this.isMobile || this.hideOnCollapse\n ? 'close'\n : this.expandIcon\n : this.minimizeIcon\n }\n ghost\n onClick={() => {\n this.expanded = !this.expanded;\n }}\n aria-controls={this.composition + 'ToggleButton'}\n />\n <span\n class={{\n 'title-text': true,\n rotate:\n !this.expanded && !this.isMobile && this.isLeftRightPane,\n }}\n >\n {this.icon ? (\n <ix-icon size=\"24\" name={this.icon}></ix-icon>\n ) : null}\n <div class=\"title-text-overflow\">\n <ix-typography format=\"h4\">{this.heading}</ix-typography>\n </div>\n </span>\n </div>\n <div class=\"side-pane-content\" hidden={!this.showContent}>\n <slot></slot>\n </div>\n </aside>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-d03df401.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,h as o,H as t,g as r}from"./p-f87cd962.js";const a="label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover,input:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus,input:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{height:3.25rem;padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-moz-appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover,textarea:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus,textarea:focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}:host{display:contents}";const n=a;const i=class{constructor(o){e(this,o);this.label=undefined}get inputElement(){return this.hostElement.querySelector("input")}componentWillLoad(){}render(){return o(t,{key:"34305cf7e6ee023ae323d2c1b13248bb08f50001"},this.label?o("label",{htmlFor:this.inputElement.id},this.label):null,o("slot",{key:"7d9937b61fd5f5aa4711a7551c0665a1f048bb47"}))}get hostElement(){return r(this)}};i.style=n;export{i as ix_form_field};
2	- //# sourceMappingURL=p-d03df401.entry.js.map

package/dist/siemens-ix/p-d03df401.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["formFieldCss","IxFormFieldStyle0","FormField","inputElement","this","hostElement","querySelector","componentWillLoad","render","h","Host","key","label","htmlFor","id"],"sources":["src/components/form-field/form-field.scss?tag=ix-form-field&encapsulation=shadow","src/components/form-field/form-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'components/form/input';\n\n:host {\n display: contents;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-form-field',\n styleUrl: 'form-field.scss',\n shadow: true,\n})\nexport class FormField {\n @Element() hostElement!: HTMLIxFormFieldElement;\n\n /**\n * Label\n */\n @Prop() label: string;\n\n private get inputElement() {\n return this.hostElement.querySelector('input');\n }\n\n componentWillLoad() {}\n\n render() {\n return (\n <Host>\n {this.label ? (\n <label htmlFor={this.inputElement.id}>{this.label}</label>\n ) : null}\n <slot></slot>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAe,wsSACrB,MAAAC,EAAeD,E,MCcFE,EAAS,M,8CAQpB,gBAAYC,GACV,OAAOC,KAAKC,YAAYC,cAAc,Q,CAGxC,iBAAAC,GAAiB,CAEjB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFP,KAAKQ,MACJH,EAAA,SAAOI,QAAST,KAAKD,aAAaW,IAAKV,KAAKQ,OAC1C,KACJH,EAAA,QAAAE,IAAA,6C"}

package/dist/siemens-ix/p-d14024d3.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as a,H as s}from"./p-f87cd962.js";const i=":host{display:flex;flex-direction:row;align-items:flex-start;padding:0px}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0%}:host .subtitle{margin-top:0.5rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";const c=i;const o=class{constructor(a){t(this,a);this.backButtonClick=e(this,"backButtonClick",7);this.variant="primary";this.headerTitle=undefined;this.headerSubtitle=undefined;this.hasBackButton=false}render(){return a(s,{key:"eae27014039b16c023892b60cc904609e55b89ad"},this.hasBackButton?a("ix-icon-button",{class:"backButton",variant:"primary",icon:"arrow-left",ghost:true,onClick:()=>this.backButtonClick.emit()}):null,a("div",{key:"397be2503715bb15d260bcfada2260a8eb72e33b",class:"titleGroup"},a("ix-typography",{key:"5d08e001eb5178aaf4b089a4faa15bc759a43b6b",variant:this.variant==="secondary"?"large-single":"h2"},this.headerTitle),this.headerSubtitle!==undefined?a("ix-typography",{variant:"caption",color:"soft",class:"subtitle"},this.headerSubtitle):null),a("div",{key:"6c6cc165c96307a6ee2c2bec59a80d6cd62a02cf",class:"buttons"},a("slot",{key:"0ac3730bb5ec852b127554e8dbdd73970204e275"})))}};o.style=c;export{o as ix_content_header};
2	- //# sourceMappingURL=p-d14024d3.entry.js.map

package/dist/siemens-ix/p-d14024d3.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["contentHeaderCss","IxContentHeaderStyle0","ContentHeader","undefined","render","h","Host","key","this","hasBackButton","class","variant","icon","ghost","onClick","backButtonClick","emit","headerTitle","headerSubtitle","color"],"sources":["src/components/content-header/content-header.scss?tag=ix-content-header&encapsulation=shadow","src/components/content-header/content-header.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 0px;\n\n .titleGroup {\n display: flex;\n flex-direction: column;\n flex: 1 1 0%;\n }\n\n .subtitle {\n margin-top: 0.5rem;\n }\n\n .backButton {\n margin-right: 0.5rem;\n }\n\n .buttons {\n flex: 0 0 auto;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type ContentHeaderVariant = 'primary' | 'secondary';\n\n@Component({\n tag: 'ix-content-header',\n styleUrl: 'content-header.scss',\n shadow: true,\n})\nexport class ContentHeader {\n /**\n * Variant of content header\n */\n @Prop() variant: ContentHeaderVariant = 'primary';\n\n /**\n * Title of Header\n */\n @Prop() headerTitle: string;\n\n /**\n * Subtitle of Header\n */\n @Prop() headerSubtitle: string | undefined = undefined;\n\n /**\n * Display a back button\n */\n @Prop() hasBackButton: boolean = false;\n\n /**\n * Triggered when back button is clicked\n */\n @Event() backButtonClick: EventEmitter<void>;\n\n render() {\n return (\n <Host>\n {this.hasBackButton ? (\n <ix-icon-button\n class={'backButton'}\n variant=\"primary\"\n icon={'arrow-left'}\n ghost={true}\n onClick={() => this.backButtonClick.emit()}\n ></ix-icon-button>\n ) : null}\n\n <div class=\"titleGroup\">\n <ix-typography\n variant={this.variant === 'secondary' ? 'large-single' : 'h2'}\n >\n {this.headerTitle}\n </ix-typography>\n {this.headerSubtitle !== undefined ? (\n <ix-typography variant={'caption'} color={'soft'} class=\"subtitle\">\n {this.headerSubtitle}\n </ix-typography>\n ) : null}\n </div>\n <div class=\"buttons\">\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAmB,kPACzB,MAAAC,EAAeD,E,MCiBFE,EAAa,M,uFAIgB,U,+CAUKC,U,mBAKZ,K,CAOjC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACFC,KAAKC,cACJJ,EAAA,kBACEK,MAAO,aACPC,QAAQ,UACRC,KAAM,aACNC,MAAO,KACPC,QAAS,IAAMN,KAAKO,gBAAgBC,SAEpC,KAEJX,EAAA,OAAAE,IAAA,2CAAKG,MAAM,cACTL,EAAA,iBAAAE,IAAA,2CACEI,QAASH,KAAKG,UAAY,YAAc,eAAiB,MAExDH,KAAKS,aAEPT,KAAKU,iBAAmBf,UACvBE,EAAA,iBAAeM,QAAS,UAAWQ,MAAO,OAAQT,MAAM,YACrDF,KAAKU,gBAEN,MAENb,EAAA,OAAAE,IAAA,2CAAKG,MAAM,WACTL,EAAA,QAAAE,IAAA,8C"}

package/dist/siemens-ix/p-d1f49940.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as o,H as r,g as e}from"./p-f87cd962.js";const i=":host{display:inline-block;position:relative;height:2rem;width:auto}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host {scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .hide{display:none}:host .dropdown-button{display:block;position:relative;width:100%;height:100%}:host .dropdown-button>ix-button{width:100%;height:100%}:host .dropdown-button .button-label{margin-right:auto;min-width:0px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .dropdown-button .dropdown-icon{margin-right:0.25rem}:host .triangle{position:absolute;margin-inline-start:1.5625rem;margin-block-start:-0.4375rem;border-right:0 solid transparent;border-left:4px solid transparent;border-top:0 solid transparent;border-bottom:4px solid;color:var(--theme-btn-primary--color)}:host .triangle.primary.ghost{color:var(--theme-btn-invisible-primary--color)}:host .triangle.primary.outline{color:var(--theme-btn-outline-primary--color)}:host .triangle.primary.ghost.disabled{color:var(--theme-btn-invisible-primary--color--disabled)}:host .triangle.primary.outline.disabled{color:var(--theme-btn-outline-primary--color--disabled)}:host .triangle.primary.disabled{color:var(--theme-btn-primary--color--disabled)}:host .triangle.secondary.ghost{color:var(--theme-btn-invisible-secondary--color)}:host .triangle.secondary.outline{color:var(--theme-btn-outline-secondary--color)}:host .triangle.secondary.ghost.disabled{color:var(--theme-btn-invisible-secondary--color--disabled)}:host .triangle.secondary.outline.disabled{color:var(--theme-btn-outline-secondary--color--disabled)}:host .triangle.secondary.disabled{color:var(--theme-btn-secondary--color--disabled)}:host .content{display:flex;align-items:center}:host(.disabled){pointer-events:none}";const s=i;const a=class{constructor(o){t(this,o);this.variant="primary";this.outline=false;this.ghost=false;this.disabled=false;this.label=undefined;this.icon=undefined;this.closeBehavior="both";this.placement=undefined;this.dropdownAnchor=undefined}getTriangle(){return o("div",{class:{triangle:true,hide:this.label!=="",primary:this.variant==="primary",secondary:this.variant==="secondary",ghost:this.ghost,outline:this.outline,disabled:this.disabled}})}render(){return o(r,{key:"8669f7d302b6009aa9ab9cadb3c86e4bbcc6330f",class:{disabled:this.disabled},ref:t=>{this.dropdownAnchor=t}},o("div",{key:"5561196cfa6584097b0395ca1d4bf61db522b5a8",class:"dropdown-button"},this.label?o("ix-button",{variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled,alignment:"start"},o("div",{class:"content"},this.icon?o("ix-icon",{name:this.icon,size:"24",class:"dropdown-icon"}):null,o("div",{class:"button-label"},this.label),o("ix-icon",{name:"chevron-down-small",size:"24"}))):o("div",null,o("ix-icon-button",{icon:this.icon,variant:this.variant,outline:this.outline,ghost:this.ghost,disabled:this.disabled}),this.getTriangle())),o("ix-dropdown",{key:"4b738dfff8c84360e1d561560c3b29ba21684de6",class:"dropdown",trigger:this.dropdownAnchor,placement:this.placement,closeBehavior:this.closeBehavior},o("slot",{key:"ad15df81aad664b12a3183b45e443b110d2b4393"})))}get hostElement(){return e(this)}};a.style=s;export{a as ix_dropdown_button};
2	- //# sourceMappingURL=p-d1f49940.entry.js.map

package/dist/siemens-ix/p-d1f49940.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["dropdownButtonCss","IxDropdownButtonStyle0","DropdownButton","getTriangle","h","class","triangle","hide","this","label","primary","variant","secondary","ghost","outline","disabled","render","Host","key","ref","dropdownAnchor","alignment","icon","name","size","trigger","placement","closeBehavior"],"sources":["src/components/dropdown-button/dropdown-button.scss?tag=ix-dropdown-button&encapsulation=shadow","src/components/dropdown-button/dropdown-button.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n\n:host {\n @include ix-component;\n\n display: inline-block;\n position: relative;\n height: $x-large-space;\n width: auto;\n\n .hide {\n display: none;\n }\n\n .dropdown-button {\n display: block;\n position: relative;\n width: 100%;\n height: 100%;\n }\n\n .dropdown-button > ix-button {\n width: 100%;\n height: 100%;\n }\n\n .dropdown-button .button-label {\n margin-right: auto;\n min-width: 0px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n .dropdown-button .dropdown-icon {\n margin-right: 0.25rem;\n }\n\n .triangle {\n position: absolute;\n margin-inline-start: 1.5625rem;\n margin-block-start: -0.4375rem;\n border-right: 0 solid transparent;\n border-left: 4px solid transparent;\n border-top: 0 solid transparent;\n border-bottom: 4px solid;\n color: var(--theme-btn-primary--color);\n }\n\n .triangle.primary {\n &.ghost {\n color: var(--theme-btn-invisible-primary--color);\n }\n\n &.outline {\n color: var(--theme-btn-outline-primary--color);\n }\n\n &.ghost.disabled {\n color: var(--theme-btn-invisible-primary--color--disabled);\n }\n\n &.outline.disabled {\n color: var(--theme-btn-outline-primary--color--disabled);\n }\n\n &.disabled {\n color: var(--theme-btn-primary--color--disabled);\n }\n }\n\n .triangle.secondary {\n &.ghost {\n color: var(--theme-btn-invisible-secondary--color);\n }\n\n &.outline {\n color: var(--theme-btn-outline-secondary--color);\n }\n\n &.ghost.disabled {\n color: var(--theme-btn-invisible-secondary--color--disabled);\n }\n\n &.outline.disabled {\n color: var(--theme-btn-outline-secondary--color--disabled);\n }\n\n &.disabled {\n color: var(--theme-btn-secondary--color--disabled);\n }\n }\n\n .content {\n display: flex;\n align-items: center;\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { AlignedPlacement } from '../dropdown/placement';\n\nexport type DropdownButtonVariant = ButtonVariant;\n\n/**\n * @since 1.3.0\n */\n@Component({\n tag: 'ix-dropdown-button',\n styleUrl: 'dropdown-button.scss',\n shadow: true,\n})\nexport class DropdownButton {\n @Element() hostElement!: HTMLIxDropdownButtonElement;\n\n /**\n * Button variant\n */\n @Prop() variant: DropdownButtonVariant = 'primary';\n\n /**\n * Outline button\n */\n @Prop() outline = false;\n\n /**\n * Button with no background or outline\n */\n @Prop() ghost = false;\n\n /**\n * Disable button\n */\n @Prop() disabled = false;\n\n /**\n * Set label\n */\n @Prop() label: string;\n\n /**\n * Button icon\n */\n @Prop() icon: string;\n\n /**\n * Controls if the dropdown will be closed in response to a click event depending on the position of the event relative to the dropdown.\n * @since 2.1.0\n */\n @Prop() closeBehavior: 'inside' | 'outside' | 'both' | boolean = 'both';\n\n /**\n * Placement of the dropdown\n *\n * @since 2.0.0\n */\n @Prop() placement: AlignedPlacement;\n\n @State() dropdownAnchor!: HTMLElement;\n\n private getTriangle() {\n return (\n <div\n class={{\n triangle: true,\n hide: this.label !== '',\n primary: this.variant === 'primary',\n secondary: this.variant === 'secondary',\n ghost: this.ghost,\n outline: this.outline,\n disabled: this.disabled,\n }}\n ></div>\n );\n }\n\n render() {\n return (\n <Host\n class={{\n disabled: this.disabled,\n }}\n ref={(ref) => {\n this.dropdownAnchor = ref;\n }}\n >\n <div class=\"dropdown-button\">\n {this.label ? (\n <ix-button\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n alignment=\"start\"\n >\n <div class={'content'}>\n {this.icon ? (\n <ix-icon\n name={this.icon}\n size=\"24\"\n class={'dropdown-icon'}\n ></ix-icon>\n ) : null}\n <div class={'button-label'}>{this.label}</div>\n <ix-icon name={'chevron-down-small'} size=\"24\"></ix-icon>\n </div>\n </ix-button>\n ) : (\n <div>\n <ix-icon-button\n icon={this.icon}\n variant={this.variant}\n outline={this.outline}\n ghost={this.ghost}\n disabled={this.disabled}\n ></ix-icon-button>\n {this.getTriangle()}\n </div>\n )}\n </div>\n\n <ix-dropdown\n class=\"dropdown\"\n trigger={this.dropdownAnchor}\n placement={this.placement}\n closeBehavior={this.closeBehavior}\n >\n <slot></slot>\n </ix-dropdown>\n </Host>\n );\n }\n}\n"],"mappings":"yDAAA,MAAMA,EAAoB,41EAC1B,MAAAC,EAAeD,E,MCsBFE,EAAc,M,sCAMgB,U,aAKvB,M,WAKF,M,cAKG,M,4DAgB8C,O,uDAWzD,WAAAC,GACN,OACEC,EAAA,OACEC,MAAO,CACLC,SAAU,KACVC,KAAMC,KAAKC,QAAU,GACrBC,QAASF,KAAKG,UAAY,UAC1BC,UAAWJ,KAAKG,UAAY,YAC5BE,MAAOL,KAAKK,MACZC,QAASN,KAAKM,QACdC,SAAUP,KAAKO,W,CAMvB,MAAAC,GACE,OACEZ,EAACa,EAAI,CAAAC,IAAA,2CACHb,MAAO,CACLU,SAAUP,KAAKO,UAEjBI,IAAMA,IACJX,KAAKY,eAAiBD,CAAG,GAG3Bf,EAAA,OAAAc,IAAA,2CAAKb,MAAM,mBACRG,KAAKC,MACJL,EAAA,aACEO,QAASH,KAAKG,QACdG,QAASN,KAAKM,QACdD,MAAOL,KAAKK,MACZE,SAAUP,KAAKO,SACfM,UAAU,SAEVjB,EAAA,OAAKC,MAAO,WACTG,KAAKc,KACJlB,EAAA,WACEmB,KAAMf,KAAKc,KACXE,KAAK,KACLnB,MAAO,kBAEP,KACJD,EAAA,OAAKC,MAAO,gBAAiBG,KAAKC,OAClCL,EAAA,WAASmB,KAAM,qBAAsBC,KAAK,SAI9CpB,EAAA,WACEA,EAAA,kBACEkB,KAAMd,KAAKc,KACXX,QAASH,KAAKG,QACdG,QAASN,KAAKM,QACdD,MAAOL,KAAKK,MACZE,SAAUP,KAAKO,WAEhBP,KAAKL,gBAKZC,EAAA,eAAAc,IAAA,2CACEb,MAAM,WACNoB,QAASjB,KAAKY,eACdM,UAAWlB,KAAKkB,UAChBC,cAAenB,KAAKmB,eAEpBvB,EAAA,QAAAc,IAAA,8C"}

package/dist/siemens-ix/p-d331216f.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as e,c as t,h as o,H as r,g as i}from"./p-f87cd962.js";import{c as d}from"./p-e898862b.js";import{h as s}from"./p-712e0ee0.js";const a=":host{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}:host .group-header{height:4rem;min-height:4rem;max-height:4rem;border-radius:var(--theme-group--border-radius) var(--theme-group--border-radius) 0 0;display:flex;background-color:var(--theme-group-item--background);color:var(--theme-group-header--color);cursor:pointer}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover)}:host .group-header:not(.disabled):not(:disabled):hover.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled){cursor:pointer}:host .group-header:not(.disabled):not(:disabled):active,:host .group-header:not(.disabled):not(:disabled).active{background-color:var(--theme-group-item--background--active)}:host .group-header:not(.disabled):not(:disabled):active.selected,:host .group-header:not(.disabled):not(:disabled).active.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header:not(.disabled):not(:disabled):focus-visible{border:1px solid var(--theme-color-focus-bdr);border-radius:var(--theme-default-border-radius) var(--theme-default-border-radius) 0px 0px;outline:none}:host .group-header.selected{background-color:var(--theme-group-item--background--selected)}:host .group-header.selected .group-header-selection-indicator{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header .group-header-selection-indicator{background-color:var(--theme-color-input--focus)}:host .group-header .group-header-selection-indicator.group-header-selection-indicator-item-selected{background-color:var(--theme-group-item-indicator--background--selected)}:host .group-header-clickable{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}:host .group-header-selection-indicator{width:0.25rem;border-top-left-radius:var(--theme-group--border-radius)}:host .group-header-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;flex-grow:1;flex-basis:0;padding:0.5rem;padding-left:0}:host .group-header-content .group-header-props-container{width:100%}:host .group-header-content .group-header-title{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}:host .group-header-content .group-header-title>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;padding-right:0}:host .group-header-content .group-subheader{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}:host .expand-icon{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}:host .btn-expand-header{margin:0.5rem;margin-inline-end:0.25rem;min-width:1.5rem}:host .group-content{display:flex;flex-direction:column;gap:1px;margin-top:1px}:host .footer{visibility:collapse;height:auto;min-height:0}:host .footer-visible{visibility:visible}:host .hidden{display:none}";const h=a;const n=class{constructor(o){e(this,o);this.selectGroup=t(this,"selectGroup",7);this.selectItem=t(this,"selectItem",7);this.collapsedChanged=t(this,"collapsedChanged",7);this.observer=null;this.suppressHeaderSelection=false;this.header=undefined;this.subHeader=undefined;this.collapsed=true;this.selected=false;this.index=undefined;this.expandOnHeaderClick=false;this.itemSelected=false;this.slotSize=this.groupItems.length;this.footerVisible=false;this.showExpandCollapsedIcon=false}get dropdownItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-dropdown-item"))}get groupItems(){return Array.from(this.hostElement.querySelectorAll("ix-group-item:not(.footer)"))}get groupContent(){var e;return(e=this.hostElement.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector(".group-content")}onExpandClick(e){this.collapsed=!this.collapsed;this.collapsedChanged.emit(this.collapsed);e.stopPropagation()}onHeaderClick(e){this.setGroupSelection(!this.selected);if(this.suppressHeaderSelection){this.onExpandClick(e)}}onItemClick(e){const t=e===this.index?undefined:e;this.selectItem.emit(t);this.index=t;if(this.index!==undefined&&this.index>=0){this.itemSelected=true}else this.itemSelected=false;this.setGroupSelection(false)}setGroupSelection(e){if(!this.suppressHeaderSelection){this.selected=e;this.selectGroup.emit(this.selected)}}onSlotChange(){var e;const t=(e=this.hostElement.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector('slot[name="footer"]');if(t){this.footerVisible=s(t)}}componentWillRender(){this.groupItems.forEach(((e,t)=>{if(this.selected===true){e.selected=false;this.index=undefined;this.itemSelected=false;return}e.selected=t===this.index;e.index=t}))}componentDidLoad(){var e;this.observer=d((()=>{this.slotSize=this.groupItems.length}));if(!this.groupContent){return}this.observer.observe(this.groupContent,{childList:true});(e=this.groupContent)===null\|\|e===void 0?void 0:e.addEventListener("selectedChanged",(e=>{if(e.detail.suppressSelection){e.stopPropagation();return}this.onItemClick(e.detail.index)}))}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}render(){return o(r,{key:"8153fe3f0c5fd78f733287dacb9fb5cfd23e624c"},o("div",{key:"109139ea65795878ffd08e539ef5a59ade8c05ba",class:{"group-header":true,expand:!this.collapsed,selected:this.selected},tabindex:"0"},o("div",{key:"262c00872bbfb8958de008e6a5d9f847a6121777",class:"group-header-clickable",onClick:e=>this.onHeaderClick(e)},o("div",{key:"c64dc6333e5b8cd876d5dac4ed294885fa9d97db",class:{"group-header-selection-indicator":true,"group-header-selection-indicator-item-selected":this.itemSelected}}),o("div",{key:"b295acc0552867f1d97803cf7ffa2fcdafe30931",class:"btn-expand-header"},o("ix-icon",{key:"d0b798aa02a970d77d1636ff38677f2b5777dc0b","data-testid":"expand-collapsed-icon",class:{hidden:!this.showExpandCollapsedIcon},name:this.collapsed?"chevron-right-small":"chevron-down-small",onClick:e=>this.onExpandClick(e)})),o("div",{key:"fa7a41f9e379ec4972d1c3db364f0ab82e57a0b5",class:"group-header-content"},this.header?o("div",{class:"group-header-props-container"},o("div",{class:"group-header-title"},o("span",{title:this.header},this.header)),o("div",{class:"group-subheader",title:this.subHeader},this.subHeader)):null,o("slot",{key:"4caba82a4558a06a999723d52dd05ed1c19c772b",name:"header"}))),o("ix-group-context-menu",{key:"ca29c2ff305e9a0ba11299771cdb27c509cf887c"},o("slot",{key:"dfd21416520cac904b790be7fceb0f02f8ef630d",name:"dropdown"}))),o("div",{key:"07470786706f46bd197ea7ff9ce6b0b97d8b114a",class:{"group-content":true}},o("div",{key:"f9ec75f57035ff5583dd728d34907139f7d787f5",style:{display:this.collapsed?"none":"contents"}},o("slot",{key:"bc86c0d2b2cc896e350c61aeb98896979ffb3647",onSlotchange:()=>{var e;const t=(e=this.hostElement.shadowRoot)===null\|\|e===void 0?void 0:e.querySelector("slot:not([name])");this.showExpandCollapsedIcon=s(t)}}),o("ix-group-item",{key:"ad82143a05418d19517e06205452ed1db0367258",suppressSelection:true,focusable:false,class:{footer:true,"footer-visible":this.footerVisible}},o("slot",{key:"e4aec4e664f7f4479e9be7d90bec9ea19c1b8677",name:"footer",onSlotchange:()=>this.onSlotChange()})))))}get hostElement(){return i(this)}};n.style=h;export{n as ix_group};
2	- //# sourceMappingURL=p-d331216f.entry.js.map

package/dist/siemens-ix/p-d331216f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["groupCss","IxGroupStyle0","Group","this","observer","groupItems","length","dropdownItems","Array","from","hostElement","querySelectorAll","groupContent","_a","shadowRoot","querySelector","onExpandClick","event","collapsed","collapsedChanged","emit","stopPropagation","onHeaderClick","setGroupSelection","selected","suppressHeaderSelection","onItemClick","index","newIndex","undefined","selectItem","itemSelected","selection","selectGroup","onSlotChange","slot","footerVisible","hasSlottedElements","componentWillRender","forEach","item","componentDidLoad","createMutationObserver","slotSize","observe","childList","addEventListener","evt","detail","suppressSelection","disconnectedCallback","disconnect","render","h","Host","key","class","expand","tabindex","onClick","e","hidden","showExpandCollapsedIcon","name","header","title","subHeader","style","display","onSlotchange","focusable","footer"],"sources":["src/components/group/group.scss?tag=ix-group&encapsulation=shadow","src/components/group/group.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'legacy/mixins/fonts';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n:host {\n @include ellipsis;\n\n display: flex;\n flex-direction: column;\n position: relative;\n max-width: 19.75rem;\n border-color: var(--theme-group-item--border-color);\n\n .group-header {\n height: 4rem;\n min-height: 4rem;\n max-height: 4rem;\n border-radius: var(--theme-group--border-radius)\n var(--theme-group--border-radius) 0 0;\n display: flex;\n background-color: var(--theme-group-item--background);\n color: var(--theme-group-header--color);\n\n cursor: pointer;\n\n @include hover {\n background-color: var(--theme-group-item--background--hover);\n\n &.selected {\n background-color: var(--theme-group-item--background--selected);\n }\n }\n\n @include active {\n background-color: var(--theme-group-item--background--active);\n\n &.selected {\n background-color: var(--theme-group-item--background--selected);\n }\n }\n\n @include focus-visible {\n border: 1px solid var(--theme-color-focus-bdr);\n border-radius: var(--theme-default-border-radius)\n var(--theme-default-border-radius) 0px 0px;\n outline: none;\n }\n\n &.selected {\n background-color: var(--theme-group-item--background--selected);\n\n .group-header-selection-indicator {\n background-color: var(\n --theme-group-item-indicator--background--selected\n );\n }\n }\n\n .group-header-selection-indicator {\n background-color: var(--theme-color-input--focus);\n\n &.group-header-selection-indicator-item-selected {\n background-color: var(\n --theme-group-item-indicator--background--selected\n );\n }\n }\n }\n\n .group-header-clickable {\n @include ellipsis;\n\n display: flex;\n width: 100%;\n min-width: 0;\n }\n\n .group-header-selection-indicator {\n width: $tiny-space;\n border-top-left-radius: var(--theme-group--border-radius);\n }\n\n .group-header-content {\n @include ellipsis;\n\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n min-width: 0;\n flex-grow: 1;\n flex-basis: 0;\n padding: 0.5rem;\n padding-left: 0;\n\n .group-header-props-container {\n width: 100%;\n }\n\n .group-header-title {\n display: flex;\n align-items: center;\n font-size: 1rem;\n font-weight: $font-weight-bold;\n height: 1.5rem;\n\n & > * {\n @include ellipsis;\n\n min-width: 0;\n padding-right: 0;\n }\n }\n\n .group-subheader {\n @include ellipsis();\n\n height: 1.25rem;\n font-size: 0.875rem;\n color: var(--theme-group-subheader--color);\n }\n }\n\n .expand-icon {\n padding: 0.125rem 0.437rem;\n color: var(--theme-color-std-text);\n }\n\n .btn-expand-header {\n margin: $small-space;\n margin-inline-end: $tiny-space;\n min-width: 1.5rem;\n }\n\n .group-content {\n display: flex;\n flex-direction: column;\n gap: 1px;\n margin-top: 1px;\n }\n\n .footer {\n visibility: collapse;\n height: auto;\n min-height: 0;\n }\n\n .footer-visible {\n visibility: visible;\n }\n\n .hidden {\n display: none;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n@Component({\n tag: 'ix-group',\n styleUrl: 'group.scss',\n shadow: true,\n})\nexport class Group {\n @Element() hostElement!: HTMLIxGroupElement;\n\n /**\n * Prevent header from being selectable\n */\n @Prop() suppressHeaderSelection = false;\n\n /**\n * Group header\n */\n @Prop() header?: string;\n\n /**\n * Group header subtitle\n */\n @Prop() subHeader?: string;\n\n /**\n * Whether the group is collapsed or expanded. Defaults to true.\n */\n @Prop({ mutable: true, reflect: true }) collapsed = true;\n\n /**\n * Whether the group is selected.\n */\n @Prop({ mutable: true, reflect: true }) selected = false;\n\n /**\n * The index of the selected group entry.\n * If undefined no group item is selected.\n */\n @Prop({ mutable: true, reflect: true }) index?: number;\n\n /**\n * Expand the group if the header is clicked\n */\n @Prop() expandOnHeaderClick = false;\n\n /**\n * Emits when whole group gets selected.\n */\n @Event() selectGroup!: EventEmitter<boolean>;\n\n /**\n * Emits when group item gets selected.\n */\n @Event() selectItem!: EventEmitter<number>;\n\n /**\n * Group collapsed\n */\n @Event() collapsedChanged!: EventEmitter<boolean>;\n\n @State() itemSelected = false;\n @State() slotSize = this.groupItems.length;\n @State() footerVisible = false;\n\n @State() showExpandCollapsedIcon = false;\n\n private observer: MutationObserver = null!;\n\n get dropdownItems() {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-dropdown-item')\n );\n }\n\n get groupItems(): Array<HTMLIxGroupItemElement> {\n return Array.from(\n this.hostElement.querySelectorAll('ix-group-item:not(.footer)')\n );\n }\n\n get groupContent() {\n return this.hostElement.shadowRoot?.querySelector('.group-content');\n }\n\n private onExpandClick(event: Event) {\n this.collapsed = !this.collapsed;\n\n this.collapsedChanged.emit(this.collapsed);\n event.stopPropagation();\n }\n\n private onHeaderClick(event: Event) {\n this.setGroupSelection(!this.selected);\n\n if (this.suppressHeaderSelection) {\n this.onExpandClick(event);\n }\n }\n\n private onItemClick(index?: number) {\n const newIndex = index === this.index ? undefined : index;\n this.selectItem.emit(newIndex);\n\n this.index = newIndex;\n\n if (this.index !== undefined && this.index >= 0) {\n this.itemSelected = true;\n } else this.itemSelected = false;\n\n this.setGroupSelection(false);\n }\n\n private setGroupSelection(selection: boolean) {\n if (!this.suppressHeaderSelection) {\n this.selected = selection;\n this.selectGroup.emit(this.selected);\n }\n }\n\n private onSlotChange() {\n const slot = this.hostElement.shadowRoot?.querySelector(\n 'slot[name=\"footer\"]'\n );\n\n if (slot) {\n this.footerVisible = hasSlottedElements(slot);\n }\n }\n\n componentWillRender() {\n this.groupItems.forEach((item, index) => {\n if (this.selected === true) {\n item.selected = false;\n this.index = undefined;\n this.itemSelected = false;\n return;\n }\n item.selected = index === this.index;\n item.index = index;\n });\n }\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => {\n this.slotSize = this.groupItems.length;\n });\n\n if (!this.groupContent) {\n return;\n }\n\n this.observer.observe(this.groupContent, {\n childList: true,\n });\n\n this.groupContent?.addEventListener(\n 'selectedChanged',\n (evt: CustomEvent<HTMLIxGroupItemElement>) => {\n if (evt.detail.suppressSelection) {\n evt.stopPropagation();\n return;\n }\n\n this.onItemClick(evt.detail.index);\n }\n );\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'group-header': true,\n expand: !this.collapsed,\n selected: this.selected,\n }}\n tabindex=\"0\"\n >\n <div\n class=\"group-header-clickable\"\n onClick={(e) => this.onHeaderClick(e)}\n >\n <div\n class={{\n 'group-header-selection-indicator': true,\n 'group-header-selection-indicator-item-selected':\n this.itemSelected,\n }}\n ></div>\n <div class=\"btn-expand-header\">\n <ix-icon\n data-testid=\"expand-collapsed-icon\"\n class={{\n hidden: !this.showExpandCollapsedIcon,\n }}\n name={\n this.collapsed ? 'chevron-right-small' : 'chevron-down-small'\n }\n onClick={(e) => this.onExpandClick(e)}\n ></ix-icon>\n </div>\n\n <div class=\"group-header-content\">\n {this.header ? (\n <div class=\"group-header-props-container\">\n <div class=\"group-header-title\">\n <span title={this.header}>{this.header}</span>\n </div>\n <div class=\"group-subheader\" title={this.subHeader}>\n {this.subHeader}\n </div>\n </div>\n ) : null}\n <slot name=\"header\"></slot>\n </div>\n </div>\n <ix-group-context-menu>\n <slot name=\"dropdown\"></slot>\n </ix-group-context-menu>\n </div>\n <div\n class={{\n 'group-content': true,\n }}\n >\n <div\n style={{\n display: this.collapsed ? 'none' : 'contents',\n }}\n >\n <slot\n onSlotchange={() => {\n const slot =\n this.hostElement.shadowRoot?.querySelector(\n 'slot:not([name])'\n );\n this.showExpandCollapsedIcon = hasSlottedElements(slot);\n }}\n ></slot>\n <ix-group-item\n suppressSelection={true}\n focusable={false}\n class={{\n footer: true,\n 'footer-visible': this.footerVisible,\n }}\n >\n <slot\n name=\"footer\"\n onSlotchange={() => this.onSlotChange()}\n ></slot>\n </ix-group-item>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"wIAAA,MAAMA,EAAW,krGACjB,MAAAC,EAAeD,E,MC0BFE,EAAK,M,4JA4DRC,KAAAC,SAA6B,K,6BAtDH,M,8DAekB,K,cAKD,M,8CAWrB,M,kBAiBN,M,cACJD,KAAKE,WAAWC,O,mBACX,M,6BAEU,K,CAInC,iBAAIC,GACF,OAAOC,MAAMC,KACXN,KAAKO,YAAYC,iBAAiB,0B,CAItC,cAAIN,GACF,OAAOG,MAAMC,KACXN,KAAKO,YAAYC,iBAAiB,8B,CAItC,gBAAIC,G,MACF,OAAOC,EAAAV,KAAKO,YAAYI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cAAc,iB,CAG5C,aAAAC,CAAcC,GACpBd,KAAKe,WAAaf,KAAKe,UAEvBf,KAAKgB,iBAAiBC,KAAKjB,KAAKe,WAChCD,EAAMI,iB,CAGA,aAAAC,CAAcL,GACpBd,KAAKoB,mBAAmBpB,KAAKqB,UAE7B,GAAIrB,KAAKsB,wBAAyB,CAChCtB,KAAKa,cAAcC,E,EAIf,WAAAS,CAAYC,GAClB,MAAMC,EAAWD,IAAUxB,KAAKwB,MAAQE,UAAYF,EACpDxB,KAAK2B,WAAWV,KAAKQ,GAErBzB,KAAKwB,MAAQC,EAEb,GAAIzB,KAAKwB,QAAUE,WAAa1B,KAAKwB,OAAS,EAAG,CAC/CxB,KAAK4B,aAAe,I,MACf5B,KAAK4B,aAAe,MAE3B5B,KAAKoB,kBAAkB,M,CAGjB,iBAAAA,CAAkBS,GACxB,IAAK7B,KAAKsB,wBAAyB,CACjCtB,KAAKqB,SAAWQ,EAChB7B,KAAK8B,YAAYb,KAAKjB,KAAKqB,S,EAIvB,YAAAU,G,MACN,MAAMC,GAAOtB,EAAAV,KAAKO,YAAYI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cACxC,uBAGF,GAAIoB,EAAM,CACRhC,KAAKiC,cAAgBC,EAAmBF,E,EAI5C,mBAAAG,GACEnC,KAAKE,WAAWkC,SAAQ,CAACC,EAAMb,KAC7B,GAAIxB,KAAKqB,WAAa,KAAM,CAC1BgB,EAAKhB,SAAW,MAChBrB,KAAKwB,MAAQE,UACb1B,KAAK4B,aAAe,MACpB,M,CAEFS,EAAKhB,SAAWG,IAAUxB,KAAKwB,MAC/Ba,EAAKb,MAAQA,CAAK,G,CAItB,gBAAAc,G,MACEtC,KAAKC,SAAWsC,GAAuB,KACrCvC,KAAKwC,SAAWxC,KAAKE,WAAWC,MAAM,IAGxC,IAAKH,KAAKS,aAAc,CACtB,M,CAGFT,KAAKC,SAASwC,QAAQzC,KAAKS,aAAc,CACvCiC,UAAW,QAGbhC,EAAAV,KAAKS,gBAAY,MAAAC,SAAA,SAAAA,EAAEiC,iBACjB,mBACCC,IACC,GAAIA,EAAIC,OAAOC,kBAAmB,CAChCF,EAAI1B,kBACJ,M,CAGFlB,KAAKuB,YAAYqB,EAAIC,OAAOrB,MAAM,G,CAKxC,oBAAAuB,GACE,GAAI/C,KAAKC,SAAU,CACjBD,KAAKC,SAAS+C,Y,EAIlB,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,eAAgB,KAChBC,QAAStD,KAAKe,UACdM,SAAUrB,KAAKqB,UAEjBkC,SAAS,KAETL,EAAA,OAAAE,IAAA,2CACEC,MAAM,yBACNG,QAAUC,GAAMzD,KAAKmB,cAAcsC,IAEnCP,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,mCAAoC,KACpC,iDACErD,KAAK4B,gBAGXsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,WAAAE,IAAA,yDACc,wBACZC,MAAO,CACLK,QAAS1D,KAAK2D,yBAEhBC,KACE5D,KAAKe,UAAY,sBAAwB,qBAE3CyC,QAAUC,GAAMzD,KAAKa,cAAc4C,MAIvCP,EAAA,OAAAE,IAAA,2CAAKC,MAAM,wBACRrD,KAAK6D,OACJX,EAAA,OAAKG,MAAM,gCACTH,EAAA,OAAKG,MAAM,sBACTH,EAAA,QAAMY,MAAO9D,KAAK6D,QAAS7D,KAAK6D,SAElCX,EAAA,OAAKG,MAAM,kBAAkBS,MAAO9D,KAAK+D,WACtC/D,KAAK+D,YAGR,KACJb,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,aAGfV,EAAA,yBAAAE,IAAA,4CACEF,EAAA,QAAAE,IAAA,2CAAMQ,KAAK,eAGfV,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,OAGnBH,EAAA,OAAAE,IAAA,2CACEY,MAAO,CACLC,QAASjE,KAAKe,UAAY,OAAS,aAGrCmC,EAAA,QAAAE,IAAA,2CACEc,aAAc,K,MACZ,MAAMlC,GACJtB,EAAAV,KAAKO,YAAYI,cAAU,MAAAD,SAAA,SAAAA,EAAEE,cAC3B,oBAEJZ,KAAK2D,wBAA0BzB,EAAmBF,EAAK,IAG3DkB,EAAA,iBAAAE,IAAA,2CACEN,kBAAmB,KACnBqB,UAAW,MACXd,MAAO,CACLe,OAAQ,KACR,iBAAkBpE,KAAKiC,gBAGzBiB,EAAA,QAAAE,IAAA,2CACEQ,KAAK,SACLM,aAAc,IAAMlE,KAAK+B,oB"}

package/dist/siemens-ix/p-d8790ff5.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,h as e,H as i,g as s}from"./p-f87cd962.js";import{c as o,s as r,o as n,b as a,f as c,a as l}from"./p-b3f35666.js";import{O as h}from"./p-0c8a98cd.js";class d{constructor(){this.overlays=new Set}connected(t){this.overlays.add(t)}disconnected(t){this.overlays.delete(t)}present(t){if(t.willPresent&&!t.willPresent()){return}this.dismissOthers(t);t.present()}dismiss(t){if(t.willDismiss&&!t.willDismiss()){return}t.dismiss()}dismissOthers(t){this.overlays.forEach((e=>{if(e!==t){this.dismiss(e)}}))}}class f extends d{}const u=new f;const p=':host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:12px;height:12px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:"";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}';const m=p;var b=undefined&&undefined.__decorate\|\|function(t,e,i,s){var o=arguments.length,r=o<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,i):s,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)if(n=t[a])r=(o<3?n(r):o>3?n(e,i,r):n(e,i))\|\|r;return o>3&&r&&Object.defineProperty(e,i,r),r};const y=t=>t!=null?`${t}px`:"";const v=class{constructor(e){t(this,e);this.for=undefined;this.titleContent=undefined;this.interactive=false;this.placement="top";this.showDelay=0;this.hideDelay=50;this.animationFrame=false;this.visible=false}get arrowElement(){return this.hostElement.shadowRoot.querySelector(".arrow")}destroyAutoUpdate(){if(this.disposeAutoUpdate!==undefined){this.disposeAutoUpdate()}}async showTooltip(t){clearTimeout(this.hideTooltipTimeout);await this.applyTooltipPosition(t);this.showTooltipTimeout=setTimeout((()=>{u.present(this);this.applyTooltipPosition(t)}),this.showDelay)}async hideTooltip(){clearTimeout(this.showTooltipTimeout);let t=50;if(this.interactive&&this.hideDelay===t){t=150}this.hideTooltipTimeout=setTimeout((()=>{u.dismiss(this)}),t);this.destroyAutoUpdate()}computeArrowPosition({placement:t,middlewareData:e}){let{x:i,y:s}=e.arrow;if(t.startsWith("top")){return{left:y(i),top:y(s)}}if(t.startsWith("right")){return{left:y(-6),top:y(s)}}if(t.startsWith("bottom")){return{left:y(i),top:y(-6)}}if(t.startsWith("left")){return{right:y(-6),top:y(s)}}}async computeTooltipPosition(t){return o(t,this.hostElement,{strategy:"fixed",placement:this.placement,middleware:[r(),n(12),a({element:this.arrowElement}),c({fallbackStrategy:"initialPlacement",padding:10})]})}applyTooltipArrowPosition(t){const e=this.computeArrowPosition(t);Object.assign(this.arrowElement.style,e)}async applyTooltipPosition(t){if(!t){return}return new Promise((e=>{this.destroyAutoUpdate();this.disposeAutoUpdate=l(t,this.hostElement,(async()=>{setTimeout((async()=>{const i=await this.computeTooltipPosition(t);if(i.middlewareData.arrow){this.applyTooltipArrowPosition(i)}const{x:s,y:o}=i;Object.assign(this.hostElement.style,{left:s!==null?`${s}px`:"",top:o!==null?`${o}px`:""});e(i)}))}),{ancestorResize:true,ancestorScroll:true,elementResize:true,animationFrame:this.animationFrame})}))}clearHideTimeout(){if(this.interactive){clearTimeout(this.hideTooltipTimeout)}}async queryAnchorElements(){if(typeof this.for==="string"){return Promise.resolve(Array.from(document.querySelectorAll(this.for)))}if(this.for instanceof HTMLElement){return Promise.resolve([this.for])}if(this.for instanceof Promise){const t=await this.for;return[t]}}async registerTriggerListener(){const t=await this.queryAnchorElements();if(this.disposeListener){this.disposeListener()}if(!t){return}t.forEach((t=>{const e=()=>{this.showTooltip(t)};const i=()=>{this.hideTooltip()};const s=()=>{if(this.showTooltipTimeout!==undefined){clearTimeout(this.showTooltipTimeout)}e()};const o=()=>{this.hideTooltip()};t.addEventListener("mouseenter",e);t.addEventListener("mouseleave",i);t.addEventListener("focusin",s);t.addEventListener("focusout",o);this.disposeListener=()=>{t.removeEventListener("mouseenter",e);t.removeEventListener("mouseleave",i);t.removeEventListener("focusin",s);t.removeEventListener("focusout",o)}}))}registerTooltipListener(){const{hostElement:t}=this;t.addEventListener("mouseenter",(()=>this.clearHideTimeout()));t.addEventListener("focusin",(()=>this.clearHideTimeout()));t.addEventListener("mouseleave",(()=>this.hideTooltip()));t.addEventListener("focusout",(()=>this.hideTooltip()))}async onKeydown(t){if(t.code==="Escape"){this.hideTooltip()}}componentWillLoad(){this.registerTriggerListener()}componentDidLoad(){this.observer=new MutationObserver((()=>{this.registerTriggerListener()}));this.observer.observe(document.body,{attributes:true,attributeFilter:["data-ix-tooltip"],childList:true,subtree:true});this.registerTooltipListener()}connectedCallback(){u.connected(this)}disconnectedCallback(){var t;(t=this.observer)===null\|\|t===void 0?void 0:t.disconnect();this.destroyAutoUpdate();u.disconnected(this)}isPresent(){return this.visible}present(){this.visible=true}dismiss(){this.visible=false}render(){return e(i,{key:"5d57bd50e4b54e59eef7e0ec463cf9cadba6ddc4",class:{visible:this.visible},role:"tooltip"},e("div",{key:"004a422b325b2c26639e479f3bc6a832277c38db",class:"tooltip-title"},e("slot",{key:"dfb6ebe4022d3835b11d7237438358e8dd27191d",name:"title-icon"}),e("ix-typography",{key:"e4230c3e9c28f53d217e8653fd972749af995dde",variant:"default-title"},this.titleContent,e("slot",{key:"bfd75a3ae808f03a552271a9f10c896de28072e2",name:"title-content"}))),e("div",{key:"b8c20ae1bb16343dca997ecb2ef744d8b18b6ede",class:"tooltip-content"},e("slot",{key:"cb15413ddd0b35a6ceb5dd95beebc855131fb998"})),e("div",{key:"91e9df64725d3ce40f280640374f0e95f89cf67b",class:"arrow"}))}get hostElement(){return s(this)}};b([h("keydown",(t=>t.visible))],v.prototype,"onKeydown",null);v.style=m;export{v as ix_tooltip};
2	- //# sourceMappingURL=p-d8790ff5.entry.js.map

package/dist/siemens-ix/p-d8790ff5.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["OverlayController","constructor","this","overlays","Set","connected","instance","add","disconnected","delete","present","willPresent","dismissOthers","dismiss","willDismiss","forEach","overlay","TooltipController","tooltipController","tooltipCss","IxTooltipStyle0","numberToPixel","value","Tooltip","arrowElement","hostElement","shadowRoot","querySelector","destroyAutoUpdate","disposeAutoUpdate","undefined","showTooltip","anchorElement","clearTimeout","hideTooltipTimeout","applyTooltipPosition","showTooltipTimeout","setTimeout","showDelay","hideTooltip","hideDelay","interactive","computeArrowPosition","placement","middlewareData","x","y","arrow","startsWith","left","top","right","computeTooltipPosition","target","computePosition","strategy","middleware","shift","offset","element","flip","fallbackStrategy","padding","applyTooltipArrowPosition","computeResponse","arrowPosition","Object","assign","style","Promise","resolve","autoUpdate","async","ancestorResize","ancestorScroll","elementResize","animationFrame","clearHideTimeout","queryAnchorElements","for","Array","from","document","querySelectorAll","HTMLElement","registerTriggerListener","triggerElementList","disposeListener","onMouseEnter","onMouseLeave","onFocusIn","onFocusOut","addEventListener","removeEventListener","registerTooltipListener","onKeydown","event","code","componentWillLoad","componentDidLoad","observer","MutationObserver","observe","body","attributes","attributeFilter","childList","subtree","connectedCallback","disconnectedCallback","_a","disconnect","isPresent","visible","render","h","Host","key","class","role","name","variant","titleContent","__decorate","OnListener","self"],"sources":["src/components/utils/overlay.ts","src/components/tooltip/tooltip-controller.ts","src/components/tooltip/tooltip.scss?tag=ix-tooltip&encapsulation=shadow","src/components/tooltip/tooltip.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { IxComponent } from '../utils/internal';\n\nexport interface IxOverlayComponent extends IxComponent {\n isPresent(): boolean;\n\n willPresent?(): boolean;\n willDismiss?(): boolean;\n\n present(): void;\n dismiss(): void;\n}\n\nexport class OverlayController {\n overlays: Set<IxOverlayComponent> = new Set();\n\n connected(instance: IxOverlayComponent): void {\n this.overlays.add(instance);\n }\n\n disconnected(instance: IxOverlayComponent): void {\n this.overlays.delete(instance);\n }\n\n present(instance: IxOverlayComponent): void {\n if (instance.willPresent && !instance.willPresent()) {\n return;\n }\n this.dismissOthers(instance);\n instance.present();\n }\n\n dismiss(instance: IxOverlayComponent): void {\n if (instance.willDismiss && !instance.willDismiss()) {\n return;\n }\n instance.dismiss();\n }\n\n private dismissOthers(instance: IxOverlayComponent): void {\n this.overlays.forEach((overlay) => {\n if (overlay !== instance) {\n this.dismiss(overlay);\n }\n });\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { OverlayController } from '../utils/overlay';\n\nclass TooltipController extends OverlayController {}\n\nexport const tooltipController = new TooltipController();\n",":host {\n display: inline-block;\n position: fixed;\n left: 0px;\n top: 0px;\n z-index: var(--theme-z-index-tooltip);\n\n max-width: 18.25rem;\n\n opacity: 0;\n visibility: collapse !important;\n overflow-wrap: break-word;\n\n border-radius: 0.25rem;\n background-color: var(--theme-tootlip--background);\n padding: 0.375rem 0.75rem 0.375rem 0.875rem;\n\n box-shadow: var(--theme-shadow-4);\n\n .tooltip-title {\n display: flex;\n align-items: center;\n\n ::slotted(ix-icon) {\n margin-right: 0.35rem;\n }\n }\n}\n\n:host(.visible) {\n opacity: 1;\n visibility: visible !important;\n}\n\n:host(.visible) {\n .arrow,\n .arrow::before {\n position: absolute;\n width: 12px;\n height: 12px;\n background: inherit;\n }\n\n .arrow {\n visibility: hidden;\n }\n\n .arrow::before {\n visibility: visible;\n content: '';\n transform: rotate(45deg);\n background-color: var(--theme-tootlip--background);\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n arrow,\n autoUpdate,\n computePosition,\n ComputePositionReturn,\n flip,\n offset,\n shift,\n} from '@floating-ui/dom';\nimport {\n Component,\n Element,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport { OnListener } from '../utils/listener';\nimport { tooltipController } from './tooltip-controller';\nimport { IxOverlayComponent } from '../utils/overlay';\n\ntype ArrowPosition = {\n top?: string;\n left?: string;\n right?: string;\n};\n\nconst numberToPixel = (value: number) => (value != null ? `${value}px` : '');\n\n/**\n * @slot title-icon - Icon of tooltip title\n * @slot title-content - Content of tooltip title\n *\n * @since 1.4.0\n */\n@Component({\n tag: 'ix-tooltip',\n styleUrl: 'tooltip.scss',\n shadow: true,\n})\nexport class Tooltip implements IxOverlayComponent {\n /**\n * CSS selector for hover trigger element e.g. `for=\"[data-my-custom-select]\"`\n */\n @Prop() for?: string | HTMLElement | Promise<HTMLElement>;\n\n /**\n * Title of the tooltip\n */\n @Prop() titleContent?: string;\n\n /**\n * Define if the user can access the tooltip via mouse.\n */\n @Prop() interactive = false;\n\n /**\n * Initial placement of the tooltip. If the placement don\"t have enough space,\n * the tooltip will placed on another location.\n *\n * @since 1.5.0\n */\n @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';\n\n /** @internal */\n @Prop() showDelay = 0;\n\n /** @internal */\n @Prop() hideDelay = 50;\n\n /** @internal */\n @Prop() animationFrame = false;\n\n @State() visible = false;\n\n @Element() hostElement!: HTMLIxTooltipElement;\n\n private observer?: MutationObserver;\n private hideTooltipTimeout?: NodeJS.Timeout;\n private showTooltipTimeout?: NodeJS.Timeout;\n private disposeAutoUpdate?: () => void;\n private disposeListener?: () => void;\n\n private get arrowElement(): HTMLElement {\n return this.hostElement.shadowRoot.querySelector('.arrow');\n }\n\n private destroyAutoUpdate() {\n if (this.disposeAutoUpdate !== undefined) {\n this.disposeAutoUpdate();\n }\n }\n\n /** @internal */\n @Method()\n async showTooltip(anchorElement: Element) {\n clearTimeout(this.hideTooltipTimeout);\n await this.applyTooltipPosition(anchorElement);\n\n this.showTooltipTimeout = setTimeout(() => {\n tooltipController.present(this);\n // Need to compute and apply tooltip position after initial render,\n // because arrow has no valid bounding rect before that\n this.applyTooltipPosition(anchorElement);\n }, this.showDelay);\n }\n\n /** @internal */\n @Method()\n async hideTooltip() {\n clearTimeout(this.showTooltipTimeout);\n let hideDelay = 50;\n\n if (this.interactive && this.hideDelay === hideDelay) {\n hideDelay = 150;\n }\n\n this.hideTooltipTimeout = setTimeout(() => {\n tooltipController.dismiss(this);\n }, hideDelay);\n this.destroyAutoUpdate();\n }\n\n private computeArrowPosition({\n placement,\n middlewareData,\n }: ComputePositionReturn): ArrowPosition {\n let { x, y } = middlewareData.arrow;\n\n if (placement.startsWith('top')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('right')) {\n return {\n left: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n\n if (placement.startsWith('bottom')) {\n return {\n left: numberToPixel(x),\n top: numberToPixel(-6),\n };\n }\n\n if (placement.startsWith('left')) {\n return {\n right: numberToPixel(-6),\n top: numberToPixel(y),\n };\n }\n }\n\n private async computeTooltipPosition(target: Element) {\n return computePosition(target, this.hostElement, {\n strategy: 'fixed',\n placement: this.placement,\n middleware: [\n shift(),\n offset(12),\n arrow({\n element: this.arrowElement,\n }),\n flip({\n fallbackStrategy: 'initialPlacement',\n padding: 10,\n }),\n ],\n });\n }\n\n private applyTooltipArrowPosition(computeResponse: ComputePositionReturn) {\n const arrowPosition = this.computeArrowPosition(computeResponse);\n Object.assign(this.arrowElement.style, arrowPosition);\n }\n\n private async applyTooltipPosition(target: Element) {\n if (!target) {\n return;\n }\n\n return new Promise<ComputePositionReturn>((resolve) => {\n this.destroyAutoUpdate();\n this.disposeAutoUpdate = autoUpdate(\n target,\n this.hostElement,\n async () => {\n setTimeout(async () => {\n const computeResponse = await this.computeTooltipPosition(target);\n\n if (computeResponse.middlewareData.arrow) {\n this.applyTooltipArrowPosition(computeResponse);\n }\n\n const { x, y } = computeResponse;\n Object.assign(this.hostElement.style, {\n left: x !== null ? `${x}px` : '',\n top: y !== null ? `${y}px` : '',\n });\n\n resolve(computeResponse);\n });\n },\n {\n ancestorResize: true,\n ancestorScroll: true,\n elementResize: true,\n animationFrame: this.animationFrame,\n }\n );\n });\n }\n\n private clearHideTimeout() {\n if (this.interactive) {\n clearTimeout(this.hideTooltipTimeout);\n }\n }\n\n private async queryAnchorElements(): Promise<Array<HTMLElement> | undefined> {\n if (typeof this.for === 'string') {\n return Promise.resolve(Array.from(document.querySelectorAll(this.for)));\n }\n\n if (this.for instanceof HTMLElement) {\n return Promise.resolve([this.for]);\n }\n\n if (this.for instanceof Promise) {\n const element = await this.for;\n return [element];\n }\n }\n\n private async registerTriggerListener() {\n const triggerElementList = await this.queryAnchorElements();\n\n if (this.disposeListener) {\n this.disposeListener();\n }\n\n if (!triggerElementList) {\n return;\n }\n\n triggerElementList.forEach((element) => {\n const onMouseEnter = () => {\n this.showTooltip(element);\n };\n\n const onMouseLeave = () => {\n this.hideTooltip();\n };\n\n const onFocusIn = () => {\n if (this.showTooltipTimeout !== undefined) {\n clearTimeout(this.showTooltipTimeout);\n }\n\n onMouseEnter();\n };\n\n const onFocusOut = () => {\n this.hideTooltip();\n };\n\n element.addEventListener('mouseenter', onMouseEnter);\n element.addEventListener('mouseleave', onMouseLeave);\n element.addEventListener('focusin', onFocusIn);\n element.addEventListener('focusout', onFocusOut);\n\n this.disposeListener = () => {\n element.removeEventListener('mouseenter', onMouseEnter);\n element.removeEventListener('mouseleave', onMouseLeave);\n element.removeEventListener('focusin', onFocusIn);\n element.removeEventListener('focusout', onFocusOut);\n };\n });\n }\n\n private registerTooltipListener() {\n const { hostElement } = this;\n hostElement.addEventListener('mouseenter', () => this.clearHideTimeout());\n hostElement.addEventListener('focusin', () => this.clearHideTimeout());\n\n hostElement.addEventListener('mouseleave', () => this.hideTooltip());\n hostElement.addEventListener('focusout', () => this.hideTooltip());\n }\n\n @OnListener<Tooltip>('keydown', (self) => self.visible)\n async onKeydown(event: KeyboardEvent) {\n if (event.code === 'Escape') {\n this.hideTooltip();\n }\n }\n\n componentWillLoad() {\n this.registerTriggerListener();\n }\n\n componentDidLoad() {\n this.observer = new MutationObserver(() => {\n this.registerTriggerListener();\n });\n\n this.observer.observe(document.body, {\n attributes: true,\n attributeFilter: ['data-ix-tooltip'],\n childList: true,\n subtree: true,\n });\n\n this.registerTooltipListener();\n }\n\n connectedCallback() {\n tooltipController.connected(this);\n }\n\n disconnectedCallback() {\n this.observer?.disconnect();\n this.destroyAutoUpdate();\n tooltipController.disconnected(this);\n }\n\n isPresent(): boolean {\n return this.visible;\n }\n\n present(): void {\n this.visible = true;\n }\n\n dismiss(): void {\n this.visible = false;\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.visible,\n }}\n role=\"tooltip\"\n >\n <div class={'tooltip-title'}>\n <slot name=\"title-icon\"></slot>\n <ix-typography variant=\"default-title\">\n {this.titleContent}\n <slot name=\"title-content\"></slot>\n </ix-typography>\n </div>\n <div class={'tooltip-content'}>\n <slot></slot>\n </div>\n <div class=\"arrow\"></div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-d950c3a8.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as r,H as a,g as o}from"./p-f87cd962.js";import{b as i}from"./p-4f8ac3bf.js";import{O as s}from"./p-0c8a98cd.js";const n=':host{display:flex;flex-direction:column;min-height:2rem;--thumb-size:1rem;--value:0;--trace-start:0;--trace-end:0;--trace-reference:0;--trace-reference-color:var(--theme-color-8);--trace-color:var(--theme-color-dynamic);--tick-color:var(--theme-color-8);--tick-color--active:var(--theme-color-dynamic);--track-color:var(--theme-color-component-4);}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host {scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host input[type=range]{position:absolute;top:50%;transform:translateY(-50%);left:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%;height:1rem;margin:0}:host input[type=range].trace::before{content:"";position:absolute;display:block;z-index:-1;width:calc(7px + 100% * var(--trace-end) - 16px * var(--trace-end) - (7px + 100% * var(--trace-start) - 16px * var(--trace-start)));left:calc(7px + 100% * var(--trace-start) - 16px * var(--trace-start));height:4px;background-color:var(--trace-color);top:50%;transform:translateY(-50%)}:host input[type=range].trace:not(.hide-trace-reference)::after{content:"";position:absolute;display:block;width:2px;height:16px;background-color:var(--trace-reference-color);top:50%;transform:translateY(-50%);left:calc(7px + 100% * var(--trace-reference) - 16px * var(--trace-reference))}:host input[type=range]::-webkit-slider-runnable-track{background:transparent;height:0.25rem}:host input[type=range]::-moz-range-track{background:transparent;height:0.25rem}:host input[type=range i]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-6px}:host input[type=range i]::-moz-range-thumb{border:none;border-radius:0}:host input[type=range]::-webkit-slider-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-webkit-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]::-moz-range-thumb{border-radius:100px;background-color:var(--theme-color-dynamic);height:var(--thumb-size);width:var(--thumb-size);-moz-transition:all var(--theme-default-time) ease-in-out;transition:all var(--theme-default-time) ease-in-out;z-index:10}:host input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:hover::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-webkit-slider-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:active::-moz-range-thumb{transform:scale(1.2);background-color:var(--theme-color-dynamic)}:host input[type=range]:focus{outline:none}:host input[type=range]:focus-visible::-webkit-slider-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host input[type=range]:focus-visible::-moz-range-thumb{outline:1px solid var(--theme-color-focus-bdr);outline-offset:0.125rem}:host .ticks{display:flex;position:relative;top:50%;transform:translateY(-50%)}:host .ticks .tick{display:block;position:absolute;width:8px;height:8px;background-color:var(--tick-color);border-radius:100px;top:50%;transform:translateY(-50%);left:calc(var(--tick-value) * 100% - 4px)}:host .ticks .tick.tick-active{background-color:var(--tick-color--active)}:host .slider{position:relative;display:block;width:100%;height:1.5rem}:host .track{position:absolute;background-color:var(--track-color);height:4px;width:calc(100% - 1rem);margin-left:0.5rem;top:50%;transform:translateY(-50%);left:0px}:host .thumb{display:block;position:absolute;background-color:transparent;height:1rem;width:1rem;border-radius:100px;left:0px;top:50%;transform:translateY(-50%)}:host .hide-tooltip{display:none}:host .label{display:flex;position:relative;align-items:center;justify-content:space-between;width:100%;margin-top:0.5rem;min-height:0px}:host .label-start{margin-left:0.5rem}:host .label-end{margin-right:0.5rem}:host .label-error{margin-left:0.5rem}:host(.error){--trace-color:var(--theme-color-alarm-40);--tick-color--active:var(--theme-color-alarm)}:host(.error) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-alarm)}:host(.error) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-alarm)}:host(.disabled){pointer-events:none;--track-color:var(--theme-color-component-3);--trace-color:var(--theme-color-3);--tick-color:var(--theme-color-7);--tick-color--active:var(--theme-color-7)}:host(.disabled) input[type=range]::-webkit-slider-thumb{background-color:var(--theme-color-7)}:host(.disabled) input[type=range]::-moz-range-thumb{background-color:var(--theme-color-7)}';const l=n;var c=undefined&&undefined.__decorate\|\|function(t,e,r,a){var o=arguments.length,i=o<3?e:a===null?a=Object.getOwnPropertyDescriptor(e,r):a,s;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(t,e,r,a);else for(var n=t.length-1;n>=0;n--)if(s=t[n])i=(o<3?s(i):o>3?s(e,r,i):s(e,r))\|\|i;return o>3&&i&&Object.defineProperty(e,r,i),i};function h(t,e,r){if(e<t){return t}else if(e>r){return r}else{return e}}const d=class{constructor(r){t(this,r);this.valueChange=e(this,"valueChange",7);this.step=1;this.min=0;this.max=100;this.value=0;this.marker=undefined;this.trace=false;this.traceReference=0;this.disabled=false;this.error=undefined;this.rangeInput=0;this.rangeMin=0;this.rangeMax=100;this.rangeTraceReference=0;this.showTooltip=false}get tooltip(){var t;return(t=this.hostElement.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector("ix-tooltip")}get pseudoThumb(){var t;return(t=this.hostElement.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".thumb")}get slider(){var t;return(t=this.hostElement.shadowRoot)===null\|\|t===void 0?void 0:t.getElementById("slider")}onShowTooltipChange(){var t,e;if(this.showTooltip){(t=this.tooltip)===null\|\|t===void 0?void 0:t.showTooltip(this.pseudoThumb);return}(e=this.tooltip)===null\|\|e===void 0?void 0:e.hideTooltip()}componentWillLoad(){this.a11yAttributes=i(this.hostElement,["role","aria-valuemin","aria-valuemax","aria-valuenow"]);this.updateRangeVariables()}updateRangeVariables(){this.rangeInput=h(this.min,this.value,this.max);this.rangeTraceReference=h(this.min,this.traceReference,this.max);this.rangeMin=Math.min(this.min,this.max);this.rangeMax=Math.max(this.min,this.max)}onInput(t){t.stopPropagation();const e=parseInt(this.slider.value);if(!isNaN(e)){this.rangeInput=e;this.emitInputEvent()}}emitInputEvent(){this.valueChange.emit(this.rangeInput)}isMarkerActive(t){const e=Math.min(this.traceReference,this.rangeInput);const r=Math.max(this.traceReference,this.rangeInput);const a=t;return a>=e&&a<=r}onPointerUp(){this.showTooltip=false}render(){const t=this.rangeMax-this.rangeMin;let e=(this.rangeTraceReference-this.rangeMin)/t;let o=(this.rangeInput-this.rangeMin)/t;const i=o-e;let s=e;let n=o;if(i<=0){s=o;n=e}return r(a,{key:"c7e6a14875ee17d49fe5e42459b81fb561802ebc",class:{disabled:this.disabled,error:!!this.error},onPointerDown:()=>setTimeout((()=>this.showTooltip=true))},r("div",{key:"bed770beec56a4798df1c0b8546fd78ef6c1f749",class:"slider"},r("div",{key:"b2337e7802806933356cc7930bcb5a0e025796b8",class:"track"},r("div",{key:"d5d40d3e44d50112733e5c9137b807e3a25dcafa",class:"thumb",style:{left:`calc(${o} * 100% - 8px)`}}),r("div",{key:"041f4368d4b80929a03abfbe617d8f5bb15957d0",class:"ticks"},this.marker?this.marker.map((e=>{if(e>this.max\|\|e<this.min){return}let a=(e-this.rangeMin)/t;return r("div",{class:{tick:true,"tick-active":this.isMarkerActive(e)&&this.trace},style:{"--tick-value":`${a}`}})})):null)),r("input",Object.assign({key:"ef61a64f69ebc8816778dfd95dee2402b0ed9144",id:"slider",type:"range",list:this.marker?"markers":undefined,step:this.step,min:this.min,max:this.max,value:this.rangeInput,tabindex:this.disabled?-1:0,onInput:t=>this.onInput(t),style:{"--value":`${o}`,"--trace-reference":`${e}`,"--trace-start":`${s}`,"--trace-end":`${n}`},class:{trace:this.trace&&e!==o,"hide-trace-reference":this.trace&&(this.traceReference<=this.min\|\|this.traceReference>=this.max)},onFocus:()=>{this.showTooltip=true},onBlur:()=>{this.showTooltip=false},role:"slider","aria-valuenow":this.rangeInput,"aria-valuemin":this.min,"aria-valuemax":this.max},this.a11yAttributes)),r("ix-tooltip",{key:"4dfe584376f3df426be2e049703adfb4c2bf39ab",class:{"hide-tooltip":!this.showTooltip},animationFrame:true},this.rangeInput)),r("div",{key:"9c42a9aa11e4c59c2fa9f0b132d6ac3a2b4f8f72",class:"label"},r("div",{key:"22ed6e4412f84449c68109dd5619054a65d8790f",class:"label-start"},r("slot",{key:"676a5d1b03b6a398bda253f01396c06ccb7cdb04",name:"label-start"})),r("div",{key:"7ec74b8f1f5a4a6e0eb4dd2b1bd8c32aa098f47c",class:"label-end"},r("slot",{key:"1a4b99aebbe60d9db5e4ed5c26907aecf2a38568",name:"label-end"}))),this.error?r("ix-typography",{class:"label-error",color:"alarm"},this.error):null)}get hostElement(){return o(this)}static get watchers(){return{showTooltip:["onShowTooltipChange"],value:["updateRangeVariables"],max:["updateRangeVariables"],min:["updateRangeVariables"],traceReference:["updateRangeVariables"]}}};c([s("pointerup",(t=>t.showTooltip))],d.prototype,"onPointerUp",null);d.style=l;export{d as ix_slider};
2	- //# sourceMappingURL=p-d950c3a8.entry.js.map

package/dist/siemens-ix/p-d950c3a8.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["sliderCss","IxSliderStyle0","between","min","value","max","Slider","tooltip","_a","this","hostElement","shadowRoot","querySelector","pseudoThumb","slider","getElementById","onShowTooltipChange","showTooltip","_b","hideTooltip","componentWillLoad","a11yAttributes","a11yHostAttributes","updateRangeVariables","rangeInput","rangeTraceReference","traceReference","rangeMin","Math","rangeMax","onInput","event","stopPropagation","parseInt","isNaN","emitInputEvent","valueChange","emit","isMarkerActive","markerValue","start","end","onPointerUp","render","range","traceReferenceInPercentage","valueInPercentage","distance","traceStart","traceEnd","h","Host","key","class","disabled","error","onPointerDown","setTimeout","style","left","marker","map","tick","trace","Object","assign","id","type","list","undefined","step","tabindex","onFocus","onBlur","role","animationFrame","name","color","__decorate","OnListener","self"],"sources":["src/components/slider/slider.scss?tag=ix-slider&encapsulation=shadow","src/components/slider/slider.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n@mixin track {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']::-webkit-slider-runnable-track {\n @content;\n }\n\n // Firefox\n input[type='range']::-moz-range-track {\n @content;\n }\n}\n\n@mixin clear-browser-thumb {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range' i]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n margin-top: -6px;\n }\n\n // Firefox\n input[type='range' i]::-moz-range-thumb {\n border: none;\n border-radius: 0;\n }\n}\n\n@mixin thumb {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-hover {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:hover::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:hover::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-active {\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:active::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:active::-moz-range-thumb {\n @content;\n }\n}\n\n@mixin thumb-focus {\n input[type='range']:focus {\n outline: none;\n }\n\n // Chrome, Safari, Opera, and Edge Chromium\n input[type='range']:focus-visible::-webkit-slider-thumb {\n @content;\n }\n\n // Firefox\n input[type='range']:focus-visible::-moz-range-thumb {\n @content;\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n min-height: 2rem;\n --thumb-size: 1rem;\n --value: 0;\n --trace-start: 0;\n --trace-end: 0;\n --trace-reference: 0;\n --trace-reference-color: var(--theme-color-8);\n --trace-color: var(--theme-color-dynamic);\n --tick-color: var(--theme-color-8);\n --tick-color--active: var(--theme-color-dynamic);\n --track-color: var(--theme-color-component-4);\n\n input[type='range'] {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n appearance: none;\n background: transparent;\n cursor: pointer;\n width: 100%;\n height: 1rem;\n margin: 0;\n }\n\n // Trace line\n input[type='range'].trace::before {\n content: '';\n position: absolute;\n display: block;\n z-index: -1;\n\n width: calc(\n calc(7px + calc(100% * var(--trace-end)) - calc(16px * var(--trace-end))) -\n calc(\n 7px + calc(100% * var(--trace-start)) -\n calc(16px * var(--trace-start))\n )\n );\n\n left: calc(\n 7px + calc(100% * var(--trace-start)) - calc(16px * var(--trace-start))\n );\n\n height: 4px;\n background-color: var(--trace-color);\n top: 50%;\n transform: translateY(-50%);\n }\n\n // Trace reference\n input[type='range'].trace:not(.hide-trace-reference)::after {\n content: '';\n position: absolute;\n display: block;\n width: 2px;\n height: 16px;\n background-color: var(--trace-reference-color);\n top: 50%;\n transform: translateY(-50%);\n left: calc(\n 7px + calc(100% * var(--trace-reference)) -\n calc(16px * var(--trace-reference))\n );\n }\n\n @include track() {\n background: transparent;\n height: 0.25rem;\n }\n\n @include clear-browser-thumb();\n\n @include thumb() {\n border-radius: 100px;\n background-color: var(--theme-color-dynamic);\n height: var(--thumb-size);\n width: var(--thumb-size);\n transition: all var(--theme-default-time) ease-in-out;\n z-index: 10;\n }\n\n @include thumb-hover() {\n transform: scale(1.2);\n background-color: var(--theme-color-dynamic);\n }\n\n @include thumb-active() {\n transform: scale(1.2);\n\n background-color: var(--theme-color-dynamic);\n }\n\n @include thumb-focus() {\n outline: 1px solid var(--theme-color-focus-bdr);\n outline-offset: 0.125rem;\n }\n\n /* style datalist */\n .ticks {\n display: flex;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n }\n .ticks .tick {\n display: block;\n position: absolute;\n width: 8px;\n height: 8px;\n background-color: var(--tick-color);\n border-radius: 100px;\n top: 50%;\n transform: translateY(-50%);\n left: calc(var(--tick-value) * 100% - 4px);\n }\n\n .ticks .tick.tick-active {\n background-color: var(--tick-color--active);\n }\n\n .slider {\n position: relative;\n display: block;\n width: 100%;\n height: 1.5rem;\n }\n\n .track {\n position: absolute;\n background-color: var(--track-color);\n height: 4px;\n width: calc(100% - 1rem);\n margin-left: 0.5rem;\n top: 50%;\n transform: translateY(-50%);\n left: 0px;\n }\n\n .thumb {\n display: block;\n position: absolute;\n background-color: transparent;\n height: 1rem;\n width: 1rem;\n border-radius: 100px;\n left: 0px;\n top: 50%;\n transform: translateY(-50%);\n }\n\n .hide-tooltip {\n display: none;\n }\n\n .label {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n margin-top: 0.5rem;\n\n min-height: 0px;\n }\n\n .label-start {\n margin-left: 0.5rem;\n }\n\n .label-end {\n margin-right: 0.5rem;\n }\n\n .label-error {\n margin-left: 0.5rem;\n }\n}\n\n:host(.error) {\n --trace-color: var(--theme-color-alarm-40);\n --tick-color--active: var(--theme-color-alarm);\n\n @include thumb() {\n background-color: var(--theme-color-alarm);\n }\n}\n\n:host(.disabled) {\n pointer-events: none;\n\n --track-color: var(--theme-color-component-3);\n --trace-color: var(--theme-color-3);\n --tick-color: var(--theme-color-7);\n --tick-color--active: var(--theme-color-7);\n\n @include thumb() {\n background-color: var(--theme-color-7);\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { A11yAttributes, a11yHostAttributes } from '../utils/a11y';\nimport { OnListener } from '../utils/listener';\n\nexport type SliderMarker = Array<number>;\n\nfunction between(min: number, value: number, max: number) {\n if (value < min) {\n return min;\n } else if (value > max) {\n return max;\n } else {\n return value;\n }\n}\n\n/**\n * @since 2.0.0\n *\n * @slot label-start - Element will be displayed at the start of the slider\n * @slot label-end - Element will be displayed at the end of the slider\n */\n@Component({\n tag: 'ix-slider',\n styleUrl: 'slider.scss',\n shadow: true,\n})\nexport class Slider {\n @Element() hostElement!: HTMLIxSliderElement;\n\n /**\n * Legal number intervals\n *\n * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#step\n */\n @Prop() step: number = 1;\n\n /**\n * Minimum slider value\n */\n @Prop() min = 0;\n\n /**\n * Maximum slider value\n */\n @Prop() max = 100;\n\n /**\n * Current value of the slider\n */\n @Prop() value = 0;\n\n /**\n * Define tick marker on the slider. Marker has to be within slider min/max\n */\n @Prop() marker?: SliderMarker;\n\n /**\n * Show a trace line\n */\n @Prop() trace = false;\n\n /**\n * Define the start point of the trace line\n */\n @Prop() traceReference = 0;\n\n /**\n * Show control as disabled\n */\n @Prop() disabled = false;\n\n /**\n * Show error state and message\n */\n @Prop() error?: boolean | string;\n\n /**\n *\n */\n @Event() valueChange!: EventEmitter<number>;\n\n @State() rangeInput = 0;\n @State() rangeMin = 0;\n @State() rangeMax = 100;\n @State() rangeTraceReference = 0;\n @State() showTooltip = false;\n\n private a11yAttributes?: A11yAttributes;\n\n get tooltip() {\n return this.hostElement.shadowRoot?.querySelector('ix-tooltip');\n }\n\n get pseudoThumb() {\n return this.hostElement.shadowRoot?.querySelector('.thumb') as HTMLElement;\n }\n\n get slider() {\n return this.hostElement.shadowRoot?.getElementById(\n 'slider'\n ) as HTMLInputElement;\n }\n\n @Watch('showTooltip')\n onShowTooltipChange() {\n if (this.showTooltip) {\n this.tooltip?.showTooltip(this.pseudoThumb);\n return;\n }\n\n this.tooltip?.hideTooltip();\n }\n\n componentWillLoad() {\n this.a11yAttributes = a11yHostAttributes(this.hostElement, [\n 'role',\n 'aria-valuemin',\n 'aria-valuemax',\n 'aria-valuenow',\n ]);\n this.updateRangeVariables();\n }\n\n @Watch('value')\n @Watch('max')\n @Watch('min')\n @Watch('traceReference')\n private updateRangeVariables() {\n this.rangeInput = between(this.min, this.value, this.max);\n this.rangeTraceReference = between(this.min, this.traceReference, this.max);\n this.rangeMin = Math.min(this.min, this.max);\n this.rangeMax = Math.max(this.min, this.max);\n }\n\n private onInput(event: InputEvent) {\n event.stopPropagation();\n const value = parseInt(this.slider.value);\n\n if (!isNaN(value)) {\n this.rangeInput = value;\n this.emitInputEvent();\n }\n }\n\n private emitInputEvent() {\n this.valueChange.emit(this.rangeInput);\n }\n\n private isMarkerActive(markerValue: number) {\n const start = Math.min(this.traceReference, this.rangeInput);\n const end = Math.max(this.traceReference, this.rangeInput);\n const value = markerValue;\n\n return value >= start && value <= end;\n }\n\n // Listen globally on window because sometimes the event listener\n // of the DOM element input itself is not called if the release\n // click is not inside the element anymore\n @OnListener<Slider>('pointerup', (self) => self.showTooltip)\n onPointerUp() {\n this.showTooltip = false;\n }\n\n render() {\n const range = this.rangeMax - this.rangeMin;\n\n let traceReferenceInPercentage =\n (this.rangeTraceReference - this.rangeMin) / range;\n\n let valueInPercentage = (this.rangeInput - this.rangeMin) / range;\n\n const distance = valueInPercentage - traceReferenceInPercentage;\n\n let traceStart = traceReferenceInPercentage;\n let traceEnd = valueInPercentage;\n\n if (distance <= 0) {\n traceStart = valueInPercentage;\n traceEnd = traceReferenceInPercentage;\n }\n\n return (\n <Host\n class={{\n disabled: this.disabled,\n error: !!this.error,\n }}\n onPointerDown={() => setTimeout(() => (this.showTooltip = true))}\n >\n <div class=\"slider\">\n <div class=\"track\">\n <div\n class=\"thumb\"\n style={{\n left: `calc(${valueInPercentage} * 100% - 8px)`,\n }}\n ></div>\n <div class=\"ticks\">\n {this.marker\n ? this.marker.map((markerValue) => {\n if (markerValue > this.max || markerValue < this.min) {\n return;\n }\n\n let left = (markerValue - this.rangeMin) / range;\n\n return (\n <div\n class={{\n tick: true,\n 'tick-active':\n this.isMarkerActive(markerValue) && this.trace,\n }}\n style={{\n '--tick-value': `${left}`,\n }}\n ></div>\n );\n })\n : null}\n </div>\n </div>\n\n <input\n id=\"slider\"\n type=\"range\"\n list={this.marker ? 'markers' : undefined}\n step={this.step}\n min={this.min}\n max={this.max}\n value={this.rangeInput}\n tabindex={this.disabled ? -1 : 0}\n onInput={(event) => this.onInput(event)}\n style={{\n '--value': `${valueInPercentage}`,\n '--trace-reference': `${traceReferenceInPercentage}`,\n '--trace-start': `${traceStart}`,\n '--trace-end': `${traceEnd}`,\n }}\n class={{\n trace:\n this.trace && traceReferenceInPercentage !== valueInPercentage,\n 'hide-trace-reference':\n this.trace &&\n (this.traceReference <= this.min ||\n this.traceReference >= this.max),\n }}\n onFocus={() => {\n this.showTooltip = true;\n }}\n onBlur={() => {\n this.showTooltip = false;\n }}\n role=\"slider\"\n aria-valuenow={this.rangeInput}\n aria-valuemin={this.min}\n aria-valuemax={this.max}\n {...this.a11yAttributes}\n />\n\n <ix-tooltip\n class={{\n 'hide-tooltip': !this.showTooltip,\n }}\n animationFrame={true}\n >\n {this.rangeInput}\n </ix-tooltip>\n </div>\n <div class=\"label\">\n <div class=\"label-start\">\n <slot name=\"label-start\"></slot>\n </div>\n <div class=\"label-end\">\n <slot name=\"label-end\"></slot>\n </div>\n </div>\n {this.error ? (\n <ix-typography class={'label-error'} color=\"alarm\">\n {this.error}\n </ix-typography>\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-d95cbd1f.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as o,h as e,H as s,g as a}from"./p-f87cd962.js";const r=":host{display:flex;flex-direction:column;position:relative;min-width:17.5rem;max-width:17.5rem;min-height:3.5rem;pointer-events:all;background-color:var(--theme-toast--background);border:var(--theme-toast--border-thickness) solid var(--theme-toast--border-color);border-radius:var(--theme-toast--border-radius);box-shadow:var(--theme-toast--box-shadow);--animate-duration:300ms}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host {scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .toast-body{display:flex;position:relative;min-height:3.5rem;width:100%;flex-grow:1;padding:0.75rem}:host .toast-body .toast-icon{display:flex;align-items:flex-start;margin-right:1rem}:host .toast-body .toast-content{overflow:hidden;text-overflow:ellipsis;min-width:0;width:100%}:host .toast-body .toast-content .toast-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.143em;color:var(--theme-color-std-text);margin:0.25rem 0px}:host .toast-body .toast-content .toast-message{min-width:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text)}:host .toast-body .toast-icon+.toast-content{max-width:10.25rem}:host .toast-close{display:flex;position:relative;pointer-events:all;margin-left:auto;margin-right:0px}:host .toast-progress-bar{position:absolute;bottom:0;height:0.25rem;width:100%;background-color:var(--theme-toast-timer-value--background);transform-origin:left}:host .toast-progress-bar--animated{animation:trackProgress linear 1 forwards}@keyframes trackProgress{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}";const i=r;const n=class{constructor(e){t(this,e);this.closeToast=o(this,"closeToast",7);this.type="info";this.toastTitle=undefined;this.autoCloseDelay=5e3;this.autoClose=true;this.icon=undefined;this.iconColor=undefined;this.progress=0;this.touched=false}getIcon(){if(this.icon){return e("ix-icon",{"data-testid":"toast-icon",name:this.icon,color:this.iconColor,size:"24"})}switch(this.type){case"info":return e("ix-icon",{"data-testid":"toast-icon",name:"info",size:"24",color:"color-std-text"});case"error":return e("ix-icon",{"data-testid":"toast-icon",name:"error",size:"24",color:"color-alarm"});case"success":return e("ix-icon",{"data-testid":"toast-icon",name:"success",size:"24",color:"color-success"});case"warning":return e("ix-icon",{"data-testid":"toast-icon",name:"warning",size:"24",color:"color-warning"});default:return""}}close(){if(this.hostElement){this.hostElement.classList.add("animate__fadeOut")}setTimeout((()=>{this.closeToast.emit()}),250)}render(){let t={};const o=["toast-progress-bar"];t={animationDuration:`${this.autoCloseDelay}ms`,animationPlayState:this.touched?"paused":"running"};o.push("toast-progress-bar--animated");return e(s,{key:"165e8ce47907c08afaef29ec7741efaddaf59d0f",class:"animate__animated animate__fadeIn"},e("div",{key:"fff7c4afb35bf57eead0fa4b484e0843dcf6c163",class:"toast-body",onPointerLeave:()=>{this.touched=false},onPointerEnter:()=>{this.touched=true}},this.type\|\|this.icon?e("div",{class:"toast-icon"},this.getIcon()):null,e("div",{key:"cd9db0e7591fc8cc069608cff6c3824b4063b1df",class:"toast-content"},this.toastTitle?e("div",{class:"toast-title"},this.toastTitle):null,e("div",{key:"5c850aab1090ec83bfbb2ed4be68d665efaa403f",class:"toast-message"},e("slot",{key:"0f857c156d576f8bc62cca7f2ab50df00fe3e794"}))),e("div",{key:"47db8f9094de72a16be06466bd694923d86492ff",class:"toast-close"},e("ix-icon-button",{key:"db141553999f04175cb135c9b89b7655a5eae216",icon:"close",size:"24",ghost:true,onClick:()=>this.closeToast.emit()}))),this.autoClose?e("div",{class:o.join(" "),style:t,onAnimationEnd:()=>{this.close()},onTransitionEnd:()=>{if(this.progress===0){this.close()}}}):null)}get hostElement(){return a(this)}};n.style=i;export{n as ix_toast};
2	- //# sourceMappingURL=p-d95cbd1f.entry.js.map

package/dist/siemens-ix/p-d95cbd1f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["toastCss","IxToastStyle0","Toast","getIcon","this","icon","h","name","color","iconColor","size","type","close","hostElement","classList","add","setTimeout","closeToast","emit","render","progressBarStyle","progressBarClass","animationDuration","autoCloseDelay","animationPlayState","touched","push","Host","key","class","onPointerLeave","onPointerEnter","toastTitle","ghost","onClick","autoClose","join","style","onAnimationEnd","onTransitionEnd","progress"],"sources":["src/components/toast/toast.scss?tag=ix-toast&encapsulation=shadow","src/components/toast/toast.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/mixins/fonts';\n\n:host {\n @include ix-component;\n\n display: flex;\n flex-direction: column;\n position: relative;\n min-width: 17.5rem;\n max-width: 17.5rem;\n min-height: 3.5rem;\n\n pointer-events: all;\n\n background-color: var(--theme-toast--background);\n border: var(--theme-toast--border-thickness) solid\n var(--theme-toast--border-color);\n border-radius: var(--theme-toast--border-radius);\n box-shadow: var(--theme-toast--box-shadow);\n\n --animate-duration: #{$medium-time};\n\n .toast-body {\n display: flex;\n position: relative;\n min-height: 3.5rem;\n width: 100%;\n flex-grow: 1;\n padding: 0.75rem;\n\n .toast-icon {\n display: flex;\n align-items: flex-start;\n margin-right: $default-space;\n }\n\n .toast-content {\n overflow: hidden;\n text-overflow: ellipsis;\n min-width: 0;\n width: 100%;\n\n .toast-title {\n @include text-default-title-single;\n margin: 0.25rem 0px;\n }\n\n .toast-message {\n min-width: 0;\n\n @include text-default;\n }\n }\n\n .toast-icon + .toast-content {\n max-width: 10.25rem;\n }\n }\n\n .toast-close {\n display: flex;\n position: relative;\n pointer-events: all;\n margin-left: auto;\n margin-right: 0px;\n }\n\n .toast-progress-bar {\n position: absolute;\n bottom: 0;\n height: $tiny-space;\n width: 100%;\n background-color: var(--theme-toast-timer-value--background);\n transform-origin: left;\n\n &--animated {\n animation: trackProgress linear 1 forwards;\n }\n }\n\n @keyframes trackProgress {\n 0% {\n transform: scaleX(1);\n }\n 100% {\n transform: scaleX(0);\n }\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport { ToastType } from './toast-utils';\n\n@Component({\n tag: 'ix-toast',\n styleUrl: 'toast.scss',\n shadow: true,\n})\nexport class Toast {\n /**\n * Toast type\n */\n @Prop() type: ToastType = 'info';\n\n /**\n * Toast title\n */\n @Prop() toastTitle: string;\n\n /**\n * Autoclose title after delay\n */\n @Prop() autoCloseDelay = 5000;\n\n /**\n * Autoclose behavior\n */\n @Prop() autoClose = true;\n\n /**\n * Icon of toast\n */\n @Prop() icon: string;\n\n /**\n * Icon color of toast\n */\n @Prop() iconColor: string;\n\n /**\n * Toast closed\n */\n @Event() closeToast: EventEmitter;\n\n @State() progress = 0;\n @State() touched = false;\n\n @Element() hostElement!: HTMLIxToastElement;\n\n private getIcon() {\n if (this.icon) {\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={this.icon}\n color={this.iconColor}\n size=\"24\"\n />\n );\n }\n\n switch (this.type) {\n case 'info':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'info'}\n size=\"24\"\n color=\"color-std-text\"\n />\n );\n\n case 'error':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'error'}\n size=\"24\"\n color=\"color-alarm\"\n />\n );\n\n case 'success':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'success'}\n size=\"24\"\n color=\"color-success\"\n />\n );\n\n case 'warning':\n return (\n <ix-icon\n data-testid=\"toast-icon\"\n name={'warning'}\n size=\"24\"\n color=\"color-warning\"\n />\n );\n\n default:\n return '';\n }\n }\n\n private close() {\n if (this.hostElement) {\n this.hostElement.classList.add('animate__fadeOut');\n }\n setTimeout(() => {\n this.closeToast.emit();\n }, 250);\n }\n\n render() {\n let progressBarStyle: Record<string, string> = {};\n\n const progressBarClass = ['toast-progress-bar'];\n\n progressBarStyle = {\n animationDuration: `${this.autoCloseDelay}ms`,\n animationPlayState: this.touched ? 'paused' : 'running',\n };\n\n progressBarClass.push('toast-progress-bar--animated');\n\n return (\n <Host class=\"animate__animated animate__fadeIn\">\n <div\n class=\"toast-body\"\n onPointerLeave={() => {\n this.touched = false;\n }}\n onPointerEnter={() => {\n this.touched = true;\n }}\n >\n {this.type || this.icon ? (\n <div class=\"toast-icon\">{this.getIcon()}</div>\n ) : null}\n <div class=\"toast-content\">\n {this.toastTitle ? (\n <div class=\"toast-title\">{this.toastTitle}</div>\n ) : null}\n <div class=\"toast-message\">\n <slot></slot>\n </div>\n </div>\n <div class=\"toast-close\">\n <ix-icon-button\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.closeToast.emit()}\n />\n </div>\n </div>\n {this.autoClose ? (\n <div\n class={progressBarClass.join(' ')}\n style={progressBarStyle}\n onAnimationEnd={() => {\n this.close();\n }}\n onTransitionEnd={() => {\n if (this.progress === 0) {\n this.close();\n }\n }}\n ></div>\n ) : null}\n </Host>\n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAW,m3EACjB,MAAAC,EAAeD,E,MCyBFE,EAAK,M,0EAIU,O,8CAUD,I,eAKL,K,2DAiBA,E,aACD,K,CAIX,OAAAC,GACN,GAAIC,KAAKC,KAAM,CACb,OACEC,EAAA,yBACc,aACZC,KAAMH,KAAKC,KACXG,MAAOJ,KAAKK,UACZC,KAAK,M,CAKX,OAAQN,KAAKO,MACX,IAAK,OACH,OACEL,EAAA,yBACc,aACZC,KAAM,OACNG,KAAK,KACLF,MAAM,mBAIZ,IAAK,QACH,OACEF,EAAA,yBACc,aACZC,KAAM,QACNG,KAAK,KACLF,MAAM,gBAIZ,IAAK,UACH,OACEF,EAAA,yBACc,aACZC,KAAM,UACNG,KAAK,KACLF,MAAM,kBAIZ,IAAK,UACH,OACEF,EAAA,yBACc,aACZC,KAAM,UACNG,KAAK,KACLF,MAAM,kBAIZ,QACE,MAAO,G,CAIL,KAAAI,GACN,GAAIR,KAAKS,YAAa,CACpBT,KAAKS,YAAYC,UAAUC,IAAI,mB,CAEjCC,YAAW,KACTZ,KAAKa,WAAWC,MAAM,GACrB,I,CAGL,MAAAC,GACE,IAAIC,EAA2C,GAE/C,MAAMC,EAAmB,CAAC,sBAE1BD,EAAmB,CACjBE,kBAAmB,GAAGlB,KAAKmB,mBAC3BC,mBAAoBpB,KAAKqB,QAAU,SAAW,WAGhDJ,EAAiBK,KAAK,gCAEtB,OACEpB,EAACqB,EAAI,CAAAC,IAAA,2CAACC,MAAM,qCACVvB,EAAA,OAAAsB,IAAA,2CACEC,MAAM,aACNC,eAAgB,KACd1B,KAAKqB,QAAU,KAAK,EAEtBM,eAAgB,KACd3B,KAAKqB,QAAU,IAAI,GAGpBrB,KAAKO,MAAQP,KAAKC,KACjBC,EAAA,OAAKuB,MAAM,cAAczB,KAAKD,WAC5B,KACJG,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,iBACRzB,KAAK4B,WACJ1B,EAAA,OAAKuB,MAAM,eAAezB,KAAK4B,YAC7B,KACJ1B,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,iBACTvB,EAAA,QAAAsB,IAAA,+CAGJtB,EAAA,OAAAsB,IAAA,2CAAKC,MAAM,eACTvB,EAAA,kBAAAsB,IAAA,2CACEvB,KAAM,QACNK,KAAK,KACLuB,MAAK,KACLC,QAAS,IAAM9B,KAAKa,WAAWC,WAIpCd,KAAK+B,UACJ7B,EAAA,OACEuB,MAAOR,EAAiBe,KAAK,KAC7BC,MAAOjB,EACPkB,eAAgB,KACdlC,KAAKQ,OAAO,EAEd2B,gBAAiB,KACf,GAAInC,KAAKoC,WAAa,EAAG,CACvBpC,KAAKQ,O,KAIT,K"}

package/dist/siemens-ix/p-d998415f.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as i,H as o,g as s}from"./p-f87cd962.js";import{a}from"./p-71206084.js";import{b as l,a as r}from"./p-4f8ac3bf.js";import{A as n}from"./p-46a6cd9d.js";import{O as d}from"./p-0c8a98cd.js";function h(t,e,i=3e3){return new Promise(((o,s)=>{const a=Date.now();const l=()=>{const r=e.querySelector(t);if(r){o(r)}else{if(Date.now()-a<i){setTimeout(l)}else{s()}}};l()}))}const c="::backdrop{--ix-dialog-backdrop:var(--theme-color-lightbox, #0000008c)}:focus-visible{outline:none !important}:host{display:none}:host dialog{margin:0;padding:1rem;left:50%}:host dialog::backdrop{-webkit-backdrop-filter:blur(2.7182817459px);backdrop-filter:blur(2.7182817459px)}:host .modal{display:flex;flex-direction:column;position:relative;border:none;border-radius:var(--theme-default-border-radius);background:var(--theme-modal--background);box-shadow:var(--theme-shadow-4);color:var(--theme-color-std-text);overflow:visible;max-height:80vh;pointer-events:all}:host .modal-size-360{width:22.5rem}:host .modal-size-480{width:30rem}:host .modal-size-600{width:37.5rem}:host .modal-size-720{width:45rem}:host .modal-size-840{width:52.5rem}:host .modal-size-full-width{width:95%}:host .modal-size-full-screen{left:0 !important;top:0 !important;transform:none !important;width:calc(100% - 28px);min-width:calc(100% - 28px);max-width:calc(100% - 28px);height:calc(100% - 28px);min-height:calc(100% - 28px);max-height:calc(100% - 28px)}:host .dialog-backdrop{display:block;position:fixed;width:100vw;height:100vh;top:0;left:0;pointer-events:none}:host ::slotted(ix-modal-footer){margin-top:auto}:host(.visible){display:block}:host(.align-center) dialog{margin:0;left:50%;top:50%}:host(.no-backdrop) dialog::backdrop{background-color:transparent !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important}:host(.with-icon) ::slotted(ix-modal-footer),:host(.with-icon) ::slotted(ix-modal-content){margin-left:2.5rem}";const m=c;var f=undefined&&undefined.__decorate\|\|function(t,e,i,o){var s=arguments.length,a=s<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,l;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(t,e,i,o);else for(var r=t.length-1;r>=0;r--)if(l=t[r])a=(s<3?l(a):s>3?l(e,i,a):l(e,i))\|\|a;return s>3&&a&&Object.defineProperty(e,i,a),a};const p=class{constructor(i){t(this,i);this.dialogClose=e(this,"dialogClose",7);this.dialogDismiss=e(this,"dialogDismiss",7);this.ariaAttributes={};this.size="360";this.animation=true;this.backdrop=true;this.closeOnBackdropClick=false;this.beforeDismiss=undefined;this.centered=false;this.keyboard=true;this.closeOnEscape=true;this.modalVisible=false}onKey(t){if(t.key==="Escape"){t.preventDefault()}}get dialog(){return this.hostElement.shadowRoot.querySelector("dialog")}slideInModal(){const t=this.animation?n.mediumTime:0;let e=this.centered?"-50%":40;a({targets:this.dialog,duration:t,opacity:[0,1],translateY:[0,e],translateX:["-50%","-50%"],easing:"easeOutSine"})}slideOutModal(t){const e=this.animation?n.mediumTime:0;let i=this.centered?"-50%":40;a({targets:this.dialog,duration:e,opacity:[1,0],translateY:[i,0],translateX:["-50%","-50%"],easing:"easeInSine",complete:()=>{if(t){t()}}})}onModalClick(t){if(t.target!==this.dialog){return}const e=this.dialog.getBoundingClientRect();const i=e.top<=t.clientY&&t.clientY<=e.top+e.height&&e.left<=t.clientX&&t.clientX<=e.left+e.width;if(!i&&this.closeOnBackdropClick){this.dismissModal()}}async showModal(){try{const t=await h("dialog",this.hostElement.shadowRoot);this.modalVisible=true;t.showModal()}catch(t){console.error("HTMLDialogElement not existing")}}async dismissModal(t){let e=true;if(this.beforeDismiss!==undefined){e=await this.beforeDismiss(t)}if(!e){return}this.slideOutModal((()=>{this.modalVisible=false;this.dialog.close(JSON.stringify({type:"dismiss",reason:t},null,2));this.dialogDismiss.emit(t)}))}async closeModal(t){this.slideOutModal((()=>{this.dialog.close(JSON.stringify({type:"close",reason:t},null,2));this.dialogClose.emit(t)}))}componentDidLoad(){this.slideInModal()}componentWillLoad(){this.ariaAttributes=l(this.hostElement)}render(){return i(o,{key:"e7e27615541ea127c4d9608a71f447f169cde5d3",class:{visible:this.modalVisible,"no-backdrop":this.backdrop===false,"align-center":this.centered}},i("div",{key:"3a4e1950295bec70cfdf1a332a9e9e4ab3186472",class:"dialog-backdrop"},i("dialog",{key:"4455ba17c66dc4d03a792a9aeea11d1380c31674","aria-modal":r(true),"aria-describedby":this.ariaAttributes["aria-describedby"],"aria-labelledby":this.ariaAttributes["aria-labelledby"],class:{modal:true,[`modal-size-${this.size}`]:true},onClose:()=>this.dismissModal(),onClick:t=>this.onModalClick(t),onCancel:t=>{t.preventDefault();this.dismissModal()}},i("slot",{key:"383eae1fa01e4159ca2d512f477532f51c56664a"}))))}get hostElement(){return s(this)}};f([d("keydown",(t=>!t.closeOnEscape\|\|!t.keyboard))],p.prototype,"onKey",null);p.style=m;export{p as ix_modal};
2	- //# sourceMappingURL=p-d998415f.entry.js.map

package/dist/siemens-ix/p-d998415f.entry.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"names":["waitForElement","selector","doc","timeout","Promise","resolve","reject","startTime","Date","now","checkIfElementExist","dialog","querySelector","setTimeout","modalCss","IxModalStyle0","Modal","this","ariaAttributes","onKey","e","key","preventDefault","hostElement","shadowRoot","slideInModal","duration","animation","Animation","mediumTime","transformY","centered","anime","targets","opacity","translateY","translateX","easing","slideOutModal","completeCallback","complete","onModalClick","event","target","rect","getBoundingClientRect","isClickOutside","top","clientY","height","left","clientX","width","closeOnBackdropClick","dismissModal","showModal","modalVisible","console","error","reason","allowDismiss","beforeDismiss","undefined","close","JSON","stringify","type","dialogDismiss","emit","closeModal","dialogClose","componentDidLoad","componentWillLoad","a11yHostAttributes","render","h","Host","class","visible","backdrop","a11yBoolean","modal","size","onClose","onClick","onCancel","__decorate","OnListener","self","closeOnEscape","keyboard"],"sources":["src/components/utils/waitForElement.ts","src/components/modal/modal.scss?tag=ix-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport function waitForElement<R extends HTMLElement>(\n selector: string,\n doc: any,\n timeout = 3000\n): Promise<R> {\n return new Promise<R>((resolve, reject) => {\n const startTime = Date.now();\n\n const checkIfElementExist = () => {\n const dialog = doc.querySelector(selector) satisfies R;\n\n if (dialog) {\n resolve(dialog);\n } else {\n if (Date.now() - startTime < timeout) {\n setTimeout(checkIfElementExist);\n } else {\n reject();\n }\n }\n };\n\n checkIfElementExist();\n });\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n::backdrop {\n --ix-dialog-backdrop: var(--theme-color-lightbox, #0000008c);\n}\n\n:focus-visible {\n outline: none !important;\n}\n\n:host {\n display: none;\n\n dialog {\n margin: 0;\n padding: 1rem;\n left: 50%;\n }\n\n dialog::backdrop {\n backdrop-filter: blur(2.7182817459106445px);\n }\n\n .modal {\n display: flex;\n flex-direction: column;\n position: relative;\n border: none;\n border-radius: var(--theme-default-border-radius);\n background: var(--theme-modal--background);\n box-shadow: var(--theme-shadow-4);\n color: var(--theme-color-std-text);\n overflow: visible;\n max-height: 80vh;\n pointer-events: all;\n }\n\n .modal-size-360 {\n width: 22.5rem;\n }\n\n .modal-size-480 {\n width: 30rem;\n }\n\n .modal-size-600 {\n width: 37.5rem;\n }\n\n .modal-size-720 {\n width: 45rem;\n }\n\n .modal-size-840 {\n width: 52.5rem;\n }\n\n .modal-size-full-width {\n width: 95%;\n }\n\n .modal-size-full-screen {\n left: 0 !important;\n top: 0 !important;\n transform: none !important;\n\n width: calc(100% - 28px);\n min-width: calc(100% - 28px);\n max-width: calc(100% - 28px);\n\n height: calc(100% - 28px);\n min-height: calc(100% - 28px);\n max-height: calc(100% - 28px);\n }\n\n .dialog-backdrop {\n display: block;\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n\n pointer-events: none;\n }\n\n ::slotted(ix-modal-footer) {\n margin-top: auto;\n }\n}\n\n:host(.visible) {\n display: block;\n}\n\n:host(.align-center) {\n dialog {\n margin: 0;\n left: 50%;\n top: 50%;\n }\n}\n\n:host(.no-backdrop) {\n dialog::backdrop {\n background-color: transparent !important;\n backdrop-filter: none !important;\n }\n}\n\n:host(.with-icon) {\n ::slotted(ix-modal-footer),\n ::slotted(ix-modal-content) {\n margin-left: 2.5rem;\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { A11yAttributes, a11yBoolean, a11yHostAttributes } from '../utils/a11y';\nimport Animation from '../utils/animation';\nimport { OnListener } from '../utils/listener';\nimport { waitForElement } from '../utils/waitForElement';\n\nexport type IxModalFixedSize = '360' | '480' | '600' | '720' | '840';\nexport type IxModalDynamicSize = 'full-width' | 'full-screen';\nexport type IxModalSize = IxModalFixedSize | IxModalDynamicSize;\n\n@Component({\n tag: 'ix-modal',\n styleUrl: 'modal.scss',\n shadow: true,\n})\nexport class Modal {\n private ariaAttributes: A11yAttributes = {};\n\n @Element() hostElement!: HTMLIxModalElement;\n\n /**\n * Modal size\n *\n * @since 2.0.0\n */\n @Prop() size: IxModalSize = '360';\n\n /**\n * Should the modal be animated\n */\n @Prop() animation = true;\n\n /**\n * Show a backdrop behind the modal dialog\n */\n @Prop() backdrop = true;\n\n /**\n * Dismiss modal on backdrop click\n *\n * @since 2.0.0\n */\n @Prop() closeOnBackdropClick = false;\n\n /**\n * Is called before the modal is dismissed.\n *\n * - Return `true` to proceed in dismissing the modal\n * - Return `false` to abort in dismissing the modal\n */\n @Prop() beforeDismiss: (reason?: any) => boolean | Promise<boolean>;\n\n /**\n * Centered modal\n */\n @Prop() centered = false;\n\n /**\n * Use ESC to dismiss the modal\n * @deprecated - Use closeOnEscape instead\n */\n @Prop() keyboard = true;\n\n /**\n * If set to true the modal can be closed by pressing the Escape key\n */\n @Prop() closeOnEscape = true;\n\n /**\n * Dialog close\n */\n @Event() dialogClose: EventEmitter;\n\n /**\n * Dialog cancel\n */\n @Event() dialogDismiss: EventEmitter;\n\n @State() modalVisible = false;\n\n @OnListener<Modal>('keydown', (self) => !self.closeOnEscape || !self.keyboard)\n onKey(e: KeyboardEvent) {\n if (e.key === 'Escape') {\n e.preventDefault();\n }\n }\n\n get dialog() {\n return this.hostElement.shadowRoot.querySelector('dialog');\n }\n\n private slideInModal() {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [0, 1],\n translateY: [0, transformY],\n translateX: ['-50%', '-50%'],\n easing: 'easeOutSine',\n });\n }\n\n private slideOutModal(completeCallback: Function) {\n const duration = this.animation ? Animation.mediumTime : 0;\n\n let transformY = this.centered ? '-50%' : 40;\n\n anime({\n targets: this.dialog,\n duration,\n opacity: [1, 0],\n translateY: [transformY, 0],\n translateX: ['-50%', '-50%'],\n easing: 'easeInSine',\n complete: () => {\n if (completeCallback) {\n completeCallback();\n }\n },\n });\n }\n\n private onModalClick(event: MouseEvent) {\n if (event.target !== this.dialog) {\n return;\n }\n\n const rect = this.dialog.getBoundingClientRect();\n const isClickOutside =\n rect.top <= event.clientY &&\n event.clientY <= rect.top + rect.height &&\n rect.left <= event.clientX &&\n event.clientX <= rect.left + rect.width;\n\n if (!isClickOutside && this.closeOnBackdropClick) {\n this.dismissModal();\n }\n }\n\n /**\n * Show the dialog\n */\n @Method()\n async showModal() {\n try {\n const dialog = await waitForElement<HTMLDialogElement>(\n 'dialog',\n this.hostElement.shadowRoot\n );\n this.modalVisible = true;\n dialog.showModal();\n } catch (e) {\n console.error('HTMLDialogElement not existing');\n }\n }\n\n /**\n * Dismiss the dialog\n */\n @Method()\n async dismissModal<T = any>(reason?: T) {\n let allowDismiss = true;\n\n if (this.beforeDismiss !== undefined) {\n allowDismiss = await this.beforeDismiss(reason);\n }\n if (!allowDismiss) {\n return;\n }\n\n this.slideOutModal(() => {\n this.modalVisible = false;\n this.dialog.close(\n JSON.stringify(\n {\n type: 'dismiss',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogDismiss.emit(reason);\n });\n }\n\n /**\n * Close the dialog\n */\n @Method()\n async closeModal<T = any>(reason: T) {\n this.slideOutModal(() => {\n this.dialog.close(\n JSON.stringify(\n {\n type: 'close',\n reason,\n },\n null,\n 2\n )\n );\n\n this.dialogClose.emit(reason);\n });\n }\n\n componentDidLoad() {\n this.slideInModal();\n }\n\n componentWillLoad() {\n this.ariaAttributes = a11yHostAttributes(this.hostElement);\n }\n\n render() {\n return (\n <Host\n class={{\n visible: this.modalVisible,\n 'no-backdrop': this.backdrop === false,\n 'align-center': this.centered,\n }}\n >\n <div class=\"dialog-backdrop\">\n <dialog\n aria-modal={a11yBoolean(true)}\n aria-describedby={this.ariaAttributes['aria-describedby']}\n aria-labelledby={this.ariaAttributes['aria-labelledby']}\n class={{\n modal: true,\n [`modal-size-${this.size}`]: true,\n }}\n onClose={() => this.dismissModal()}\n onClick={(event) => this.onModalClick(event)}\n onCancel={(e) => {\n e.preventDefault();\n this.dismissModal();\n }}\n >\n <slot></slot>\n </dialog>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-dbe8f5e6.entry.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- import{r as t,c as e,h as r,H as o,g as a}from"./p-f87cd962.js";const i='@charset "UTF-8";:host{position:relative;display:flex;align-items:center;justify-content:center;padding:10px 1.5rem;line-height:20px;font-size:14px;font-weight:bold;background-color:var(--theme-tab--background);color:var(--theme-tab--color)}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host {scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host::after{content:"";position:absolute;background-color:var(--theme-tab-indicator--background);width:100%;height:var(--theme-tab-indicator--height);left:0}:host .text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}:host .text span,:host .text span::before{pointer-events:none}:host .circle{display:flex;justify-content:center;align-items:center;height:3rem;width:3rem;background-color:var(--theme-animated-tab-indicator--background);border-radius:50%;border:2px solid var(--theme-animated-tab-circle--border-color);color:var(--theme-an…icon--color);cursor:pointer}:host .circle.selected:not(.disabled){background-color:var(--theme-animated-tab-circle--background--selected);color:var(--theme-animated-tab-icon--color--selected);border-color:var(--theme-animated-tab-circle--border-color--selected)}:host .circle.selected:not(.disabled):hover{background-color:var(--theme-animated-tab-circle--background--selected)}:host .circle:hover{background-color:var(--theme-animated-tab-circle--background--hover)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle:active{background-color:var(--theme-animated-tab-circle--background--active)}:host .circle.disabled{background-color:var(--theme-animated-tab-circle--background--disabled);border-color:var(--theme-animated-tab-circle--border-color--disabled)}:host .counter{position:absolute;z-index:1;height:16px;width:auto;background-color:var(--theme-pill-outline--background);border:1px solid var(--theme-tab-pill--border-color);border-radius:100px;bottom:6px;display:flex;justify-content:center;align-items:center;padding-left:0.25rem;padding-right:0.25rem;font-size:12px;line-height:14px;color:var(--theme-pill-outline--color);cursor:pointer}:host .counter.selected{border-color:var(--theme-tab-pill--border-color--selected)}:host .counter.disabled{border-color:var(--theme-tab-pill--border-color--disabled)}:host .hidden{display:none}:host(.circle){height:72px}:host(.top)::after{top:0}:host(.bottom)::after{bottom:0}:host(.stretched){flex-basis:100%;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(:hover:not(.circle)){background-color:var(--theme-tab--background--hover);color:var(--theme-tab-color-hover);cursor:pointer}:host(:hover:not(.circle))::after{background-color:var(--theme-tab-indicator--background--hover)}:host(:active:not(.circle)){background-color:var(--theme-tab--background--active);color:var(--theme-tab-color--active)}:host(:active:not(.circle))::after{background-color:var(--theme-tab-indicator--background--active)}:host(:focus-visible){outline:0px solid var(--focus--border-color)}:host(:focus-visible) .circle{outline:1px solid var(--focus--border-color)}:host(:focus-visible:not(.circle)){outline:1px solid var(--focus--border-color)}:host(.disabled){pointer-events:none;color:var(--theme-tab--color--disabled);background-color:var(--theme-tab--background--disabled)}:host(.disabled)::after{background-color:var(--theme-tab-indicator--background--disabled)}:host(.selected:not(.disabled)){background-color:var(--theme-tab--background--selected);color:var(--theme-tab--color--selected)}:host(.selected:not(.disabled))::after{background-color:var(--theme-tab-indicator--background--selected)}:host(.icon){padding:1.5rem 0.5rem}:host(.small-tab){height:32px;padding:1rem}:host(.small-tab.icon){padding:1rem 0.25rem}';const s=i;const c=class{constructor(r){t(this,r);this.tabClick=e(this,"tabClick",7);this.selected=false;this.disabled=false;this.small=false;this.icon=false;this.rounded=false;this.counter=undefined;this.layout="auto";this.placement="bottom"}tabItemClasses(t){return{selected:t.selected,disabled:t.disabled,"small-tab":t.small,icon:t.small,stretched:t.layout==="stretched",bottom:t.placement==="bottom",top:t.placement==="top",circle:t.circle}}render(){return r(o,{key:"d066fe09ebb7ac33ef162eafed96189de7215022",class:this.tabItemClasses({selected:this.selected,disabled:this.disabled,small:this.small,icon:this.icon,layout:this.layout,placement:this.placement,circle:this.rounded}),tabIndex:0,onClick:t=>{const e=this.tabClick.emit({nativeEvent:t});if(e.defaultPrevented){t.stopPropagation()}}},r("div",{key:"944c3beb003abae7f64ed18c3d77fa8d3a576be3",class:{circle:this.rounded,text:!this.rounded,selected:this.selected,disabled:this.disabled}},r("slot",{key:"ff6b883c8b1ec2e53fe9faa705bbcdb0345ef27b"})),r("div",{key:"292419b01ae7e18db509ad09a83ffa5bbc6480a5",class:{counter:true,selected:this.selected,hidden:!(this.rounded&&this.counter!==undefined),disabled:this.disabled}},this.counter))}};c.style=s;const l=t=>{if(typeof __zone_symbol__requestAnimationFrame==="function"){return __zone_symbol__requestAnimationFrame(t)}if(typeof requestAnimationFrame==="function"){return requestAnimationFrame(t)}return setTimeout(t)};const n=":host{width:auto;display:flex;align-items:center;position:relative}:host ,:host ::after,:host ::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host {scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .tab-items{overflow:hidden;scroll-behavior:smooth;width:100%}:host .tab-items .items-content{display:flex;align-items:center}:host .arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:32px;height:32px;top:0;bottom:0;left:0;margin:auto 0;border-radius:4px;color:var(--theme-btn-invisible-primary--color);background-color:var(--theme-btn-invisible-primary--background);z-index:2}:host .arrow:hover{color:var(--theme-btn-invisible-primary--color--hover);background-color:var(--theme-btn-invisible-primary--background--hover)}:host .arrow:active{color:var(--theme-btn-invisible-primary--color--active);background-color:var(--theme-btn-invisible-primary--background--active)}:host .arrow.right{left:auto;right:0}:host .overflow-shadow{display:block;position:relative;height:100%;width:100%;pointer-events:all}:host .overflow-shadow.shadow-left{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px);mask-image:linear-gradient(90deg, transparent 0px, black 45px)}:host .overflow-shadow.shadow-right{-webkit-mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, black calc(100% - 45px), transparent 100%)}:host .overflow-shadow.shadow-both{-webkit-mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%);mask-image:linear-gradient(90deg, transparent 0px, black 45px, black calc(100% - 45px), transparent 100%)}";const h=n;const d=class{constructor(r){t(this,r);this.selectedChange=e(this,"selectedChange",7);this.windowStartSize=window.innerWidth;this.clickAction={timeout:null,isClick:true};this.small=false;this.rounded=false;this.selected=0;this.layout="auto";this.placement="bottom";this.totalItems=0;this.currentScrollAmount=0;this.scrollAmount=100;this.scrollActionAmount=0;this.showArrowPrevious=false;this.showArrowNext=false}onWindowResize(){this.totalItems=0;this.totalItems=this.getTabs().length;if(this.windowStartSize===0)return this.windowStartSize=window.innerWidth;this.move(this.windowStartSize-window.innerWidth);this.windowStartSize=window.innerWidth}getTabs(){return Array.from(this.hostElement.querySelectorAll("ix-tab-item"))}getTab(t){return this.getTabs()[t]}getTabsWrapper(){var t;return(t=this.hostElement.shadowRoot)===null\|\|t===void 0?void 0:t.querySelector(".items-content")}initResizeObserver(){const t=this.hostElement.parentElement;if(!t)return;this.resizeObserver=new ResizeObserver((()=>{this.renderArrows()}));this.resizeObserver.observe(t)}showArrows(){try{const t=this.getTabsWrapper();return t&&t.scrollWidth>Math.ceil(t.getBoundingClientRect().width)&&this.layout==="auto"}catch(t){return false}}showPreviousArrow(){try{return this.showArrows()===true&&this.scrollActionAmount<0}catch(t){return false}}showNextArrow(){try{const t=this.getTabsWrapper();if(!t){return false}const e=t.getBoundingClientRect();return this.showArrows()===true&&this.scrollActionAmount>(t.scrollWidth-e.width)*-1}catch(t){return false}}move(t,e=false){const r=this.getTabsWrapper();if(!r){return}const o=r.getBoundingClientRect().width;const a=-this.currentScrollAmount+o-r.scrollWidth;t=t<a?a:t;t+=this.currentScrollAmount;t=Math.min(t,0);const i=[`transform: translateX(${t}px);`,e?"transition: all ease-in-out 400ms;":""].join("");r.setAttribute("style",i);if(e)this.currentScrollAmount=this.scrollActionAmount=t;else this.scrollActionAmount=t}onSelectedChange(t){var e;if(!this.showArrows())return;const r=this.getTab(t).getBoundingClientRect();const o=(e=this.getTabsWrapper())===null\|\|e===void 0?void 0:e.clientWidth;const a=32;if(r.left<a){this.move(-r.left+a,true)}else if(o&&r.right>o-a){this.move(o-r.right-a,true)}}setSelected(t){this.selected=t}clickTab(t){if(!this.clickAction.isClick\|\|this.dragStop()){return}const{defaultPrevented:e}=this.selectedChange.emit(t);if(e){return}this.setSelected(t)}dragStart(t,e){if(!this.showArrows())return;if(e.button>0)return;this.clickAction.timeout=this.clickAction.timeout===null?setTimeout((()=>this.clickAction.isClick=false),300):null;const r=parseFloat(window.getComputedStyle(t).left);const o=e.clientX;const a=t=>this.dragMove(t,r,o);const i=()=>{window.removeEventListener("mousemove",a,false);window.removeEventListener("click",i,false);this.dragStop()};window.addEventListener("click",i);window.addEventListener("mousemove",a,false)}dragMove(t,e,r){this.move(t.clientX+e-r)}dragStop(){if(this.clickAction.timeout){clearTimeout(this.clickAction.timeout);this.clickAction.timeout=null}if(this.clickAction.isClick)return false;this.currentScrollAmount=this.scrollActionAmount;this.clickAction.isClick=true;return true}componentWillLoad(){const t=this.getTabs();t.map(((t,e)=>{if(this.small)t.setAttribute("small","true");if(this.rounded)t.setAttribute("rounded","true");t.setAttribute("layout",this.layout);t.setAttribute("selected",e===this.selected?"true":"false");t.setAttribute("placement",this.placement)}));this.initResizeObserver()}componentDidRender(){const t=this.getTabs();this.totalItems=t.length;t.map(((t,e)=>{t.setAttribute("selected",e===this.selected?"true":"false")}))}componentWillRender(){this.renderArrows()}renderArrows(){l((()=>{this.showArrowNext=this.showNextArrow();this.showArrowPrevious=this.showPreviousArrow()}))}componentDidLoad(){const t=this.getTabs();t.forEach((t=>{t.addEventListener("mousedown",(e=>this.dragStart(t,e)))}))}disconnectedCallback(){var t;(t=this.resizeObserver)===null\|\|t===void 0?void 0:t.disconnect()}onTabClick(t){if(t.defaultPrevented){return}const e=t.target;const r=this.getTabs();r.forEach(((t,r)=>{if(!t.disabled&&t===e){this.clickTab(r)}}))}render(){return r(o,{key:"014b3afcc4165f3c3aa0800ea6f12c15d138b48b"},this.showArrowPrevious&&r("div",{key:"6c98e2c2957c96970d42d5abdf959f325e1c05b8",class:"arrow",onClick:()=>this.move(this.scrollAmount,true)},r("ix-icon",{key:"55f46b38e62a863415fa5d51da48a1be19303b78",name:"chevron-left-small"})),r("div",{key:"c0528e9e703746cc1acc63c1b68c4d9ee3a01a04",class:{"tab-items":true,"overflow-shadow":true,"shadow-left":this.showArrowPrevious,"shadow-right":this.showArrowNext,"shadow-both":this.showArrowNext&&this.showArrowPrevious}},r("div",{key:"bb6174f8e9a9543ee928a70de23500edbedaeb04",class:"items-content"},r("slot",{key:"ba881f7c4784685ebdb1f0a2581c4691f2a8f1b9"}))),this.showArrowNext&&r("div",{key:"743123a5b14ed6a473c21b742f54cbf4ae4405da",class:"arrow right",onClick:()=>this.move(-this.scrollAmount,true)},r("ix-icon",{key:"d67ab90bf1b620791ca9e84f7ace8b7a04a7a772",name:"chevron-right-small"})))}get hostElement(){return a(this)}static get watchers(){return{selected:["onSelectedChange"]}}};d.style=h;export{c as ix_tab_item,d as ix_tabs};
2	- //# sourceMappingURL=p-dbe8f5e6.entry.js.map