npm - @siemens/ix - Versions diffs - 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533 - Mend

@siemens/ix 0.0.0-20240522074328 → 0.0.0-pr-1373-20240705054533

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 (1085) hide show

package/dist/siemens-ix/{p-30e8a26a.entry.js → p-7bfd6cd2.entry.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as t,c as i,h as e,H as r,g as n}from"./p-26e9d40e.js";import{c as s,g as o}from"./p-45840cb9.js";import{r as h}from"./p-effd2dcf.js";var a={exports:{}};(function(t,i){(function(i){{t.exports=i()}})((function(){return function(){function t(i,e,r){function n(h,a){if(!e[h]){if(!i[h]){var u="function"==typeof s&&s;if(!a&&u)return u(h,!0);if(o)return o(h,!0);var f=new Error("Cannot find module '"+h+"'");throw f.code="MODULE_NOT_FOUND",f}var c=e[h]={exports:{}};i[h][0].call(c.exports,(function(t){var e=i[h][1][t];return n(e||t)}),c,c.exports,t,i,e,r)}return e[h].exports}for(var o="function"==typeof s&&s,h=0;h<r.length;h++)n(r[h]);return n}return t}()({1:[function(t,i,e){Object.defineProperty(e,"__esModule",{value:true});var r=function(){function t(t,i){for(var e=0;e<i.length;e++){var r=i[e];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(t,r.key,r)}}return function(i,e,r){if(e)t(i.prototype,e);if(r)t(i,r);return i}}();function n(t,i,e){if(i in t){Object.defineProperty(t,i,{value:e,enumerable:true,configurable:true,writable:true})}else{t[i]=e}return t}function s(t,i){if(!(t instanceof i)){throw new TypeError("Cannot call a class as a function")}}var o={width:"100%",height:"100%"};var h=function t(i){return Number(i)===Number(i)};var a="classList"in document.documentElement?function(t,i){t.classList.add(i)}:function(t,i){var e=t.getAttribute("class")||"";t.setAttribute("class",e+" "+i)};var u=function(){r(t,null,[{key:"create",value:function i(e,r){return new t(e,r)}},{key:"mergeStyle",value:function t(i,e){for(var r in e){if(i.style[r]!==e[r]){i.style[r]=e[r]}}}},{key:"getMaxBrowserHeight",value:function i(){var e=document.createElement("div");var r=document.createElement("div");t.mergeStyle(e,{position:"absolute",height:"1px",opacity:0});t.mergeStyle(r,{height:"1e7px"});e.appendChild(r);document.body.appendChild(e);var n=r.offsetHeight;document.body.removeChild(e);return n}}]);function t(i,e){var r=this;s(this,t);this._config={};this._lastRepaint=null;this._maxElementHeight=t.getMaxBrowserHeight();this.refresh(i,e);var n=this._config;var o=function t(){var i=r._getScrollPosition();var e=r._lastRepaint;r._renderAnimationFrame=window.requestAnimationFrame(t);if(i===e){return}var s=e?i-e:0;if(!e||s<0||s>r._averageHeight){var o=r._renderChunk();r._lastRepaint=i;if(o!==false&&typeof n.afterRender==="function"){n.afterRender()}}};o()}r(t,[{key:"destroy",value:function t(){window.cancelAnimationFrame(this._renderAnimationFrame)}},{key:"refresh",value:function i(e,r){var s;Object.assign(this._config,o,r);if(!e||e.nodeType!==1){throw new Error("HyperList requires a valid DOM Node container")}this._element=e;var a=this._config;var u=this._scroller||a.scroller||document.createElement(a.scrollerTagName||"tr");if(typeof a.useFragment!=="boolean"){this._config.useFragment=true}if(!a.generate){throw new Error("Missing required `generate` function")}if(!h(a.total)){throw new Error("Invalid required `total` value, expected number")}if(!Array.isArray(a.itemHeight)&&!h(a.itemHeight)){throw new Error("\n        Invalid required `itemHeight` value, expected number or array\n      ".trim())}else if(h(a.itemHeight)){this._itemHeights=Array(a.total).fill(a.itemHeight)}else{this._itemHeights=a.itemHeight}Object.keys(o).filter((function(t){return t in a})).forEach((function(t){var i=a[t];var e=h(i);if(i&&typeof i!=="string"&&typeof i!=="number"){var r="Invalid optional `"+t+"`, expected string or number";throw new Error(r)}else if(e){a[t]=i+"px"}}));var f=Boolean(a.horizontal);var c=a[f?"width":"height"];if(c){var l=h(c);var v=l?false:c.slice(-1)==="%";var d=l?c:parseInt(c.replace(/px|%/,""),10);var p=window[f?"innerWidth":"innerHeight"];if(v){this._containerSize=p*d/100}else{this._containerSize=h(c)?c:d}}var m=a.scrollContainer;var w=a.itemHeight*a.total;var b=this._maxElementHeight;if(w>b){console.warn(["HyperList: The maximum element height",b+"px has","been exceeded; please reduce your item height."].join(" "))}var g={width:""+a.width,height:m?w+"px":""+a.height,overflow:m?"none":"auto",position:"relative"};t.mergeStyle(e,g);if(m){t.mergeStyle(a.scrollContainer,{overflow:"auto"})}var y=(s={opacity:"0",position:"absolute"},n(s,f?"height":"width","1px"),n(s,f?"width":"height",w+"px"),s);t.mergeStyle(u,y);if(!this._scroller){e.appendChild(u)}var x=this._computeScrollPadding();this._scrollPaddingBottom=x.bottom;this._scrollPaddingTop=x.top;this._scroller=u;this._scrollHeight=this._computeScrollHeight();this._itemPositions=this._itemPositions||Array(a.total).fill(0);this._computePositions(0);this._renderChunk(this._lastRepaint!==null);if(typeof a.afterRender==="function"){a.afterRender()}}},{key:"_getRow",value:function i(e){var r=this._config;var s=r.generate(e);var o=s.height;if(o!==undefined&&h(o)){s=s.element;if(o!==this._itemHeights[e]){this._itemHeights[e]=o;this._computePositions(e);this._scrollHeight=this._computeScrollHeight(e)}}else{o=this._itemHeights[e]}if(!s||s.nodeType!==1){throw new Error("Generator did not return a DOM Node for index: "+e)}a(s,r.rowClassName||"vrow");var u=this._itemPositions[e]+this._scrollPaddingTop;t.mergeStyle(s,n({position:"absolute"},r.horizontal?"left":"top",u+"px"));return s}},{key:"_getScrollPosition",value:function t(){var i=this._config;if(typeof i.overrideScrollPosition==="function"){return i.overrideScrollPosition()}return this._element[i.horizontal?"scrollLeft":"scrollTop"]}},{key:"_renderChunk",value:function t(i){var e=this._config;var r=this._element;var n=this._getScrollPosition();var s=e.total;var o=e.reverse?this._getReverseFrom(n):this._getFrom(n)-1;if(o<0||o-this._screenItemsLen<0){o=0}if(!i&&this._lastFrom===o){return false}this._lastFrom=o;var h=o+this._cachedItemsLen;if(h>s||h+this._cachedItemsLen>s){h=s}var a=e.useFragment?document.createDocumentFragment():[];var u=this._scroller;a[e.useFragment?"appendChild":"push"](u);for(var f=o;f<h;f++){var c=this._getRow(f);a[e.useFragment?"appendChild":"push"](c)}if(e.applyPatch){return e.applyPatch(r,a)}r.innerHTML="";r.appendChild(a)}},{key:"_computePositions",value:function t(){var i=arguments.length>0&&arguments[0]!==undefined?arguments[0]:1;var e=this._config;var r=e.total;var n=e.reverse;if(i<1&&!n){i=1}for(var s=i;s<r;s++){if(n){if(s===0){this._itemPositions[0]=this._scrollHeight-this._itemHeights[0]}else{this._itemPositions[s]=this._itemPositions[s-1]-this._itemHeights[s]}}else{this._itemPositions[s]=this._itemHeights[s-1]+this._itemPositions[s-1]}}}},{key:"_computeScrollHeight",value:function i(){var e,r=this;var s=this._config;var o=Boolean(s.horizontal);var h=s.total;var a=this._itemHeights.reduce((function(t,i){return t+i}),0)+this._scrollPaddingBottom+this._scrollPaddingTop;t.mergeStyle(this._scroller,(e={opacity:0,position:"absolute",top:"0px"},n(e,o?"height":"width","1px"),n(e,o?"width":"height",a+"px"),e));var u=this._itemHeights.slice(0).sort((function(t,i){return t-i}));var f=Math.floor(h/2);var c=h%2===0?(u[f]+u[f-1])/2:u[f];var l=o?"clientWidth":"clientHeight";var v=s.scrollContainer?s.scrollContainer:this._element;var d=v[l]?v[l]:this._containerSize;this._screenItemsLen=Math.ceil(d/c);this._containerSize=d;this._cachedItemsLen=Math.max(this._cachedItemsLen||0,this._screenItemsLen*3);this._averageHeight=c;if(s.reverse){window.requestAnimationFrame((function(){if(o){r._element.scrollLeft=a}else{r._element.scrollTop=a}}))}return a}},{key:"_computeScrollPadding",value:function t(){var i=this._config;var e=Boolean(i.horizontal);var r=i.reverse;var n=window.getComputedStyle(this._element);var s=function t(i){var e=n.getPropertyValue("padding-"+i);return parseInt(e,10)||0};if(e&&r){return{bottom:s("left"),top:s("right")}}else if(e){return{bottom:s("right"),top:s("left")}}else if(r){return{bottom:s("top"),top:s("bottom")}}else{return{bottom:s("bottom"),top:s("top")}}}},{key:"_getFrom",value:function t(i){var e=0;while(this._itemPositions[e]<i){e++}return e}},{key:"_getReverseFrom",value:function t(i){var e=this._config.total-1;while(e>0&&this._itemPositions[e]<i+this._containerSize){e--}return e}}]);return t}();e.default=u;i.exports=e["default"]},{}]},{},[1])(1)}))})(a);const u=o(a.exports);const f=":host{display:block}";const c=f;const l=class{constructor(e){t(this,e);this.contextChange=i(this,"contextChange",7);this.nodeToggled=i(this,"nodeToggled",7);this.nodeClicked=i(this,"nodeClicked",7);this.nodeRemoved=i(this,"nodeRemoved",7);this.toggleListener=new Map;this.itemClickListener=new Map;this.updates=new Map;this.hasFirstRender=false;this.root=undefined;this.model=undefined;this.renderItem=undefined;this.context={}}updatePadding(t,i){t.style.paddingLeft=i.level+"rem"}getVirtualizerOptions(){const t=this.buildTreeList(this.model[this.root]);let i=(i,e,r)=>{if(i.hasChildren&&!this.toggleListener.has(e)){const n=e=>{e.preventDefault();e.stopPropagation();const n=this.getContext(t[r].id);n.isExpanded=!n.isExpanded;this.nodeToggled.emit({id:i.id,isExpaned:n.isExpanded});this.setContext(i.id,n)};e.addEventListener("toggle",n);this.toggleListener.set(e,n)}};return{itemHeight:32,total:t.length,generate:e=>{const r=t[e];const n=this.hostElement.querySelector(`[data-tree-node-id="${r.id}"]`);const s=this.getContext(r.id);if(n){n.hasChildren=r.hasChildren;n.context=Object.assign({},s);i(r,n,e);if(this.updates.has(r.id)){const t=this.updates.get(r.id);t(r,Object.assign({},this.context))}this.updatePadding(n,r);return n}const o=t=>{this.updates.set(r.id,t)};let a=null;if(this.renderItem){a=this.renderItem(e,r,t,Object.assign({},this.context),o)}if(a===null){a=h(r,s,o)}const u=a;u.setAttribute("data-tree-node-id",r.id);u.style.paddingRight="1rem";this.updatePadding(u,r);if(!this.itemClickListener.has(u)){const t=t=>{t.preventDefault();t.stopPropagation();Object.values(this.context).forEach((t=>t.isSelected=false));const i=this.getContext(r.id);i.isSelected=true;this.setContext(r.id,i);this.nodeClicked.emit(r.id)};u.addEventListener("itemClick",t);this.itemClickListener.set(u,t)}i(r,u,e);return u}}}setContext(t,i){this.context=Object.assign(Object.assign({},this.context),{[t]:i});this.contextChange.emit(this.context)}getContext(t){if(!this.context){return{isExpanded:false,isSelected:false}}if(!this.context[t]){this.context[t]={isExpanded:false,isSelected:false}}return this.context[t]}buildTreeList(t,i=0){const e=[];if(t===null||t===void 0?void 0:t.hasChildren){const r=i+1;t.children.forEach((t=>{const n=this.model[t];const s=this.getContext(t);e.push(Object.assign(Object.assign({},n),{level:i}));if(n.hasChildren&&s.isExpanded){e.push(...this.buildTreeList(n,r))}}))}return e}componentDidLoad(){this.initList();this.observer=new MutationObserver((t=>{let i=[];t.forEach((t=>{i=[...i,...Array.from(t.removedNodes)];t.addedNodes.forEach((t=>{const e=i.indexOf(t);if(e>=0){i.splice(e,1)}}))}));this.nodeRemoved.emit(i)}));this.observer.observe(this.hostElement,{childList:true})}componentWillRender(){this.hasFirstRender=true;if(this.isListInitialized()){this.refreshList()}else{this.initList()}}disconnectedCallback(){var t,i;(t=this.hyperlist)===null||t===void 0?void 0:t.destroy();(i=this.observer)===null||i===void 0?void 0:i.disconnect()}modelChange(){if(this.hasFirstRender&&!this.isListInitialized()){this.initList()}}isListInitialized(){var t;const i=(t=this.hyperlist)===null||t===void 0?void 0:t._itemPositions;return i!==undefined&&i.length&&!(i===null||i===void 0?void 0:i.some((t=>t===undefined||Number.isNaN(t))))}refreshList(){if(this.hyperlist){this.hyperlist.refresh(this.hostElement,this.getVirtualizerOptions())}}initList(){var t;if(!this.model){return}(t=this.hyperlist)===null||t===void 0?void 0:t.destroy();const i=this.getVirtualizerOptions();this.hyperlist=new u(this.hostElement,i)}render(){return e(r,{key:"5e3f0e8bbd14073590ed9ae548fa51abb50bd52b"},e("slot",{key:"9e05d42472878f4791cce2033271e1918d40c38f"}))}get hostElement(){return n(this)}static get watchers(){return{model:["modelChange"]}}};l.style=c;export{l as ix_tree};
-//# sourceMappingURL=p-30e8a26a.entry.js.map
+import{r as t,c as i,h as e,H as r,g as n}from"./p-f87cd962.js";import{c as s,g as o}from"./p-45840cb9.js";import{r as h}from"./p-effd2dcf.js";var a={exports:{}};(function(t,i){(function(i){{t.exports=i()}})((function(){return function(){function t(i,e,r){function n(h,a){if(!e[h]){if(!i[h]){var u="function"==typeof s&&s;if(!a&&u)return u(h,!0);if(o)return o(h,!0);var f=new Error("Cannot find module '"+h+"'");throw f.code="MODULE_NOT_FOUND",f}var c=e[h]={exports:{}};i[h][0].call(c.exports,(function(t){var e=i[h][1][t];return n(e||t)}),c,c.exports,t,i,e,r)}return e[h].exports}for(var o="function"==typeof s&&s,h=0;h<r.length;h++)n(r[h]);return n}return t}()({1:[function(t,i,e){Object.defineProperty(e,"__esModule",{value:true});var r=function(){function t(t,i){for(var e=0;e<i.length;e++){var r=i[e];r.enumerable=r.enumerable||false;r.configurable=true;if("value"in r)r.writable=true;Object.defineProperty(t,r.key,r)}}return function(i,e,r){if(e)t(i.prototype,e);if(r)t(i,r);return i}}();function n(t,i,e){if(i in t){Object.defineProperty(t,i,{value:e,enumerable:true,configurable:true,writable:true})}else{t[i]=e}return t}function s(t,i){if(!(t instanceof i)){throw new TypeError("Cannot call a class as a function")}}var o={width:"100%",height:"100%"};var h=function t(i){return Number(i)===Number(i)};var a="classList"in document.documentElement?function(t,i){t.classList.add(i)}:function(t,i){var e=t.getAttribute("class")||"";t.setAttribute("class",e+" "+i)};var u=function(){r(t,null,[{key:"create",value:function i(e,r){return new t(e,r)}},{key:"mergeStyle",value:function t(i,e){for(var r in e){if(i.style[r]!==e[r]){i.style[r]=e[r]}}}},{key:"getMaxBrowserHeight",value:function i(){var e=document.createElement("div");var r=document.createElement("div");t.mergeStyle(e,{position:"absolute",height:"1px",opacity:0});t.mergeStyle(r,{height:"1e7px"});e.appendChild(r);document.body.appendChild(e);var n=r.offsetHeight;document.body.removeChild(e);return n}}]);function t(i,e){var r=this;s(this,t);this._config={};this._lastRepaint=null;this._maxElementHeight=t.getMaxBrowserHeight();this.refresh(i,e);var n=this._config;var o=function t(){var i=r._getScrollPosition();var e=r._lastRepaint;r._renderAnimationFrame=window.requestAnimationFrame(t);if(i===e){return}var s=e?i-e:0;if(!e||s<0||s>r._averageHeight){var o=r._renderChunk();r._lastRepaint=i;if(o!==false&&typeof n.afterRender==="function"){n.afterRender()}}};o()}r(t,[{key:"destroy",value:function t(){window.cancelAnimationFrame(this._renderAnimationFrame)}},{key:"refresh",value:function i(e,r){var s;Object.assign(this._config,o,r);if(!e||e.nodeType!==1){throw new Error("HyperList requires a valid DOM Node container")}this._element=e;var a=this._config;var u=this._scroller||a.scroller||document.createElement(a.scrollerTagName||"tr");if(typeof a.useFragment!=="boolean"){this._config.useFragment=true}if(!a.generate){throw new Error("Missing required `generate` function")}if(!h(a.total)){throw new Error("Invalid required `total` value, expected number")}if(!Array.isArray(a.itemHeight)&&!h(a.itemHeight)){throw new Error("\n        Invalid required `itemHeight` value, expected number or array\n      ".trim())}else if(h(a.itemHeight)){this._itemHeights=Array(a.total).fill(a.itemHeight)}else{this._itemHeights=a.itemHeight}Object.keys(o).filter((function(t){return t in a})).forEach((function(t){var i=a[t];var e=h(i);if(i&&typeof i!=="string"&&typeof i!=="number"){var r="Invalid optional `"+t+"`, expected string or number";throw new Error(r)}else if(e){a[t]=i+"px"}}));var f=Boolean(a.horizontal);var c=a[f?"width":"height"];if(c){var l=h(c);var v=l?false:c.slice(-1)==="%";var d=l?c:parseInt(c.replace(/px|%/,""),10);var p=window[f?"innerWidth":"innerHeight"];if(v){this._containerSize=p*d/100}else{this._containerSize=h(c)?c:d}}var m=a.scrollContainer;var w=a.itemHeight*a.total;var b=this._maxElementHeight;if(w>b){console.warn(["HyperList: The maximum element height",b+"px has","been exceeded; please reduce your item height."].join(" "))}var g={width:""+a.width,height:m?w+"px":""+a.height,overflow:m?"none":"auto",position:"relative"};t.mergeStyle(e,g);if(m){t.mergeStyle(a.scrollContainer,{overflow:"auto"})}var y=(s={opacity:"0",position:"absolute"},n(s,f?"height":"width","1px"),n(s,f?"width":"height",w+"px"),s);t.mergeStyle(u,y);if(!this._scroller){e.appendChild(u)}var x=this._computeScrollPadding();this._scrollPaddingBottom=x.bottom;this._scrollPaddingTop=x.top;this._scroller=u;this._scrollHeight=this._computeScrollHeight();this._itemPositions=this._itemPositions||Array(a.total).fill(0);this._computePositions(0);this._renderChunk(this._lastRepaint!==null);if(typeof a.afterRender==="function"){a.afterRender()}}},{key:"_getRow",value:function i(e){var r=this._config;var s=r.generate(e);var o=s.height;if(o!==undefined&&h(o)){s=s.element;if(o!==this._itemHeights[e]){this._itemHeights[e]=o;this._computePositions(e);this._scrollHeight=this._computeScrollHeight(e)}}else{o=this._itemHeights[e]}if(!s||s.nodeType!==1){throw new Error("Generator did not return a DOM Node for index: "+e)}a(s,r.rowClassName||"vrow");var u=this._itemPositions[e]+this._scrollPaddingTop;t.mergeStyle(s,n({position:"absolute"},r.horizontal?"left":"top",u+"px"));return s}},{key:"_getScrollPosition",value:function t(){var i=this._config;if(typeof i.overrideScrollPosition==="function"){return i.overrideScrollPosition()}return this._element[i.horizontal?"scrollLeft":"scrollTop"]}},{key:"_renderChunk",value:function t(i){var e=this._config;var r=this._element;var n=this._getScrollPosition();var s=e.total;var o=e.reverse?this._getReverseFrom(n):this._getFrom(n)-1;if(o<0||o-this._screenItemsLen<0){o=0}if(!i&&this._lastFrom===o){return false}this._lastFrom=o;var h=o+this._cachedItemsLen;if(h>s||h+this._cachedItemsLen>s){h=s}var a=e.useFragment?document.createDocumentFragment():[];var u=this._scroller;a[e.useFragment?"appendChild":"push"](u);for(var f=o;f<h;f++){var c=this._getRow(f);a[e.useFragment?"appendChild":"push"](c)}if(e.applyPatch){return e.applyPatch(r,a)}r.innerHTML="";r.appendChild(a)}},{key:"_computePositions",value:function t(){var i=arguments.length>0&&arguments[0]!==undefined?arguments[0]:1;var e=this._config;var r=e.total;var n=e.reverse;if(i<1&&!n){i=1}for(var s=i;s<r;s++){if(n){if(s===0){this._itemPositions[0]=this._scrollHeight-this._itemHeights[0]}else{this._itemPositions[s]=this._itemPositions[s-1]-this._itemHeights[s]}}else{this._itemPositions[s]=this._itemHeights[s-1]+this._itemPositions[s-1]}}}},{key:"_computeScrollHeight",value:function i(){var e,r=this;var s=this._config;var o=Boolean(s.horizontal);var h=s.total;var a=this._itemHeights.reduce((function(t,i){return t+i}),0)+this._scrollPaddingBottom+this._scrollPaddingTop;t.mergeStyle(this._scroller,(e={opacity:0,position:"absolute",top:"0px"},n(e,o?"height":"width","1px"),n(e,o?"width":"height",a+"px"),e));var u=this._itemHeights.slice(0).sort((function(t,i){return t-i}));var f=Math.floor(h/2);var c=h%2===0?(u[f]+u[f-1])/2:u[f];var l=o?"clientWidth":"clientHeight";var v=s.scrollContainer?s.scrollContainer:this._element;var d=v[l]?v[l]:this._containerSize;this._screenItemsLen=Math.ceil(d/c);this._containerSize=d;this._cachedItemsLen=Math.max(this._cachedItemsLen||0,this._screenItemsLen*3);this._averageHeight=c;if(s.reverse){window.requestAnimationFrame((function(){if(o){r._element.scrollLeft=a}else{r._element.scrollTop=a}}))}return a}},{key:"_computeScrollPadding",value:function t(){var i=this._config;var e=Boolean(i.horizontal);var r=i.reverse;var n=window.getComputedStyle(this._element);var s=function t(i){var e=n.getPropertyValue("padding-"+i);return parseInt(e,10)||0};if(e&&r){return{bottom:s("left"),top:s("right")}}else if(e){return{bottom:s("right"),top:s("left")}}else if(r){return{bottom:s("top"),top:s("bottom")}}else{return{bottom:s("bottom"),top:s("top")}}}},{key:"_getFrom",value:function t(i){var e=0;while(this._itemPositions[e]<i){e++}return e}},{key:"_getReverseFrom",value:function t(i){var e=this._config.total-1;while(e>0&&this._itemPositions[e]<i+this._containerSize){e--}return e}}]);return t}();e.default=u;i.exports=e["default"]},{}]},{},[1])(1)}))})(a);const u=o(a.exports);const f=":host{display:block}";const c=f;const l=class{constructor(e){t(this,e);this.contextChange=i(this,"contextChange",7);this.nodeToggled=i(this,"nodeToggled",7);this.nodeClicked=i(this,"nodeClicked",7);this.nodeRemoved=i(this,"nodeRemoved",7);this.toggleListener=new Map;this.itemClickListener=new Map;this.updates=new Map;this.hasFirstRender=false;this.root=undefined;this.model=undefined;this.renderItem=undefined;this.context={}}updatePadding(t,i){t.style.paddingLeft=i.level+"rem"}getVirtualizerOptions(){const t=this.buildTreeList(this.model[this.root]);let i=(i,e,r)=>{if(i.hasChildren&&!this.toggleListener.has(e)){const n=e=>{e.preventDefault();e.stopPropagation();const n=this.getContext(t[r].id);n.isExpanded=!n.isExpanded;this.nodeToggled.emit({id:i.id,isExpaned:n.isExpanded});this.setContext(i.id,n)};e.addEventListener("toggle",n);this.toggleListener.set(e,n)}};return{itemHeight:32,total:t.length,generate:e=>{const r=t[e];const n=this.hostElement.querySelector(`[data-tree-node-id="${r.id}"]`);const s=this.getContext(r.id);if(n){n.hasChildren=r.hasChildren;n.context=Object.assign({},s);i(r,n,e);if(this.updates.has(r.id)){const t=this.updates.get(r.id);t(r,Object.assign({},this.context))}this.updatePadding(n,r);return n}const o=t=>{this.updates.set(r.id,t)};let a=null;if(this.renderItem){a=this.renderItem(e,r,t,Object.assign({},this.context),o)}if(a===null){a=h(r,s,o)}const u=a;u.setAttribute("data-tree-node-id",r.id);u.style.paddingRight="1rem";this.updatePadding(u,r);if(!this.itemClickListener.has(u)){const t=t=>{t.preventDefault();t.stopPropagation();Object.values(this.context).forEach((t=>t.isSelected=false));const i=this.getContext(r.id);i.isSelected=true;this.setContext(r.id,i);this.nodeClicked.emit(r.id)};u.addEventListener("itemClick",t);this.itemClickListener.set(u,t)}i(r,u,e);return u}}}setContext(t,i){this.context=Object.assign(Object.assign({},this.context),{[t]:i});this.contextChange.emit(this.context)}getContext(t){if(!this.context){return{isExpanded:false,isSelected:false}}if(!this.context[t]){this.context[t]={isExpanded:false,isSelected:false}}return this.context[t]}buildTreeList(t,i=0){const e=[];if(t===null||t===void 0?void 0:t.hasChildren){const r=i+1;t.children.forEach((t=>{const n=this.model[t];const s=this.getContext(t);e.push(Object.assign(Object.assign({},n),{level:i}));if(n.hasChildren&&s.isExpanded){e.push(...this.buildTreeList(n,r))}}))}return e}componentDidLoad(){this.initList();this.observer=new MutationObserver((t=>{let i=[];t.forEach((t=>{i=[...i,...Array.from(t.removedNodes)];t.addedNodes.forEach((t=>{const e=i.indexOf(t);if(e>=0){i.splice(e,1)}}))}));this.nodeRemoved.emit(i)}));this.observer.observe(this.hostElement,{childList:true})}componentWillRender(){this.hasFirstRender=true;if(this.isListInitialized()){this.refreshList()}else{this.initList()}}disconnectedCallback(){var t,i;(t=this.hyperlist)===null||t===void 0?void 0:t.destroy();(i=this.observer)===null||i===void 0?void 0:i.disconnect()}modelChange(){if(this.hasFirstRender&&!this.isListInitialized()){this.initList()}}isListInitialized(){var t;const i=(t=this.hyperlist)===null||t===void 0?void 0:t._itemPositions;return i!==undefined&&i.length&&!(i===null||i===void 0?void 0:i.some((t=>t===undefined||Number.isNaN(t))))}refreshList(){if(this.hyperlist){this.hyperlist.refresh(this.hostElement,this.getVirtualizerOptions())}}initList(){var t;if(!this.model){return}(t=this.hyperlist)===null||t===void 0?void 0:t.destroy();const i=this.getVirtualizerOptions();this.hyperlist=new u(this.hostElement,i)}render(){return e(r,{key:"c663df76252b24029b33792151c943519a7c3be1"},e("slot",{key:"cfd96717be68c7c4e4c0b9e344ecd4c48481e1e0"}))}get hostElement(){return n(this)}static get watchers(){return{model:["modelChange"]}}};l.style=c;export{l as ix_tree};
+//# sourceMappingURL=p-7bfd6cd2.entry.js.map

package/dist/siemens-ix/p-7faa148f.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,h as a,H as c}from"./p-f87cd962.js";const t=":host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";const s=t;const o=class{constructor(a){e(this,a)}render(){return a(c,{key:"8e3c29a9c15b121a2da0acebdf1a00dbe0d18c52"},a("ix-spinner",{key:"bc602e7bc4b0264b19be3823e78cc63c7adc39fa",variant:"primary"}),a("span",{key:"69d563df6c6a05ece5723c8c94d24d546831aca4",class:"loading-text"},a("slot",{key:"b369c9d0c257a9c0c11584c72f0696eb969bd13d"})))}};o.style=s;export{o as ix_modal_loading};
2	+ //# sourceMappingURL=p-7faa148f.entry.js.map

package/dist/siemens-ix/p-85423643.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as o,c as e,h as t,H as r,g as n}from"./p-f87cd962.js";import{B as i}from"./p-1d581190.js";import{L as a,I as d}from"./p-25ee1b62.js";const l=":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-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.429em;color:var(--theme-color-std-text)}: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 button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}.dropdown-group{margin:0.687rem;display:block;position:relative;width:21.562rem;border-radius:0.25rem;background-color:#f8f9fa;border:solid 0.062rem rgba(0, 0, 0, 0.25)}.dropdown-group .dropdown-group-title{display:block;position:relative;font-size:0.875rem;text-align:left;margin:0.937rem 0 1.25rem 0.937rem}.dropdown-group .dropdown-group-content{position:relative;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;height:11.562rem;margin:0.937rem 0 0.937rem 0.937rem}.dropdown-group .dropdown-group-content>{margin-bottom:1rem}.dropdown-group-submit{display:flex;justify-content:space-between;margin:0 0.687rem 0 0.687rem}.dropdown-menu{position:absolute;background-color:var(--theme-menu--background);-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.143em;color:var(--theme-color-std-text);border:var(--theme-menu--border-thickness) solid var(--theme-menu--border--color);border-radius:var(--theme-menu--border-radius);max-width:100vw;padding:0.25rem 0;transition:background-color var(--theme-default-time);box-shadow:var(--theme-menu--box-shadow)}.dropdown-menu.xl>.dropdown-item{height:2.5rem;line-height:2.187rem}.dropdown-header{display:flex;align-items:center;height:2.5rem;color:var(--theme-menu-header--color);padding:0 1rem}.dropdown-buttons{display:flex;padding:0.25rem 0.5rem}.dropdown-buttons ix-icon-button+ix-icon-button{margin-inline-start:0.5rem}.dropdown-item{display:flex;height:2.5rem;position:relative;align-items:center;cursor:pointer;padding:0 2rem;border:1px solid transparent;color:var(--theme-menu-item--color);background-color:transparent}.dropdown-item:focus-visible{background-color:var(--theme-menu-item--background);color:var(--theme-menu-item--color)}.dropdown-item:focus-visible{outline:none;background-color:var(--theme-menu-item--background);border-color:#119fff;color:var(--theme-menu-item--color--focus)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):hover{color:var(--theme-menu-item--color--hover);background-color:var(--theme-menu-item--background--hover)}.dropdown-item:not(.disabled):not(:disabled){cursor:pointer}.dropdown-item:not(.disabled):not(:disabled):active,.dropdown-item:not(.disabled):not(:disabled).active{color:var(--theme-menu-item--color--active);background-color:var(--theme-menu-item--background--active)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--theme-menu-item--color--disabled);background-color:var(--theme-menu-item--background--disabled)}.dropdown-item>a,.dropdown-item a:hover,.dropdown-item a:active{color:var(--theme-color-std-text)}.dropdown-item>.glyph{color:var(--theme-menu-item-icon--color);margin-inline-end:0.5rem}.dropdown-item>.glyph.disabled{color:var(--color-weak-text)}.dropdown-item>.glyph.glyph-single-check{color:var(--theme-menu-item-icon-check--color)}.dropdown-item>input[type=checkbox]+label{margin-bottom:0px}.dropdown-item>input[type=checkbox]+label::before{margin-right:1rem}.dropdown-divider{border-top:1px solid var(--theme-menu-separator--background);margin:0.25rem 0}button.dropdown-toggle{position:relative;padding-right:1.5rem}button.dropdown-toggle::after{position:absolute;top:45%;right:0.5rem}.form-control,.form-control-plaintext{-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);color:var(--theme-input--color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:var(--theme-input--border-radius);height:2rem;min-height:2rem;min-width:2rem;background-color:var(--theme-input--background);border:solid 1px var(--theme-input--border-color);box-shadow:var(--theme-input--box-shadow);padding-inline-start:0.5rem;padding-inline-end:0.5rem}.form-control::-moz-placeholder,.form-control-plaintext::-moz-placeholder{color:var(--theme-input-hint--color)}.form-control::placeholder,.form-control-plaintext::placeholder{color:var(--theme-input-hint--color)}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled),.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled){cursor:pointer}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover);cursor:auto}.form-control:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:-moz-read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible,.form-control-plaintext:not(:read-only):not([readonly]):not([readOnly]):not(.readonly):not(.disabled):not(:disabled):focus-visible{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline-offset:var(--theme-input--focus--outline-offset);box-shadow:var(--theme-input--box-shadow);outline:1px solid var(--theme-color-focus-bdr)}.form-control:focus-visible{color:var(--theme-input--color)}.form-control[type=number]{text-align:right}.form-control[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}.form-control.readonly,.form-control[readonly]{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem}.form-control:-moz-read-only{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only,.form-control[readonly],.form-control[readOnly],.form-control.readonly{box-shadow:none !important;outline:none !important;border-color:var(--theme-input--border-color);cursor:default !important}.form-control:read-only::-moz-placeholder,.form-control[readonly]::-moz-placeholder,.form-control[readOnly]::-moz-placeholder,.form-control.readonly::-moz-placeholder{color:transparent}.form-control:-moz-read-only::placeholder{color:transparent}.form-control:read-only::placeholder,.form-control[readonly]::placeholder,.form-control[readOnly]::placeholder,.form-control.readonly::placeholder{color:transparent}.form-control:disabled,.form-control.disabled{background:transparent !important;border-block-start:none !important;border-inline-start:none !important;border-inline-end:none !important;border-radius:0rem;color:var(--theme-color-weak-text);border-color:var(--theme-input--border-color-bottom--disabled)}.form-control:disabled::-moz-placeholder,.form-control.disabled::-moz-placeholder{color:transparent}.form-control:disabled::placeholder,.form-control.disabled::placeholder{color:transparent}.form-control-plaintext{outline:0}.form-group{position:relative}.input-wrapper{display:flex;position:relative;align-items:center;flex-wrap:nowrap}.input-wrapper>.glyph{display:block;position:absolute;margin-inline-start:0.312rem;color:var(--theme-color-std-text)}.input-wrapper>input{padding-inline-start:2.2rem}select.form-control{padding:0 0.312rem}textarea.form-control{padding:0.375rem 0.5rem}input.disabled,input:disabled{color:var(--theme-input--color--disabled)}input:-moz-read-only{cursor:default}input:read-only,input.readonly{cursor:default}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:block;position:relative;height: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 :host(:focus-visible:not(.disabled):not(:disabled)){border-color:var(--theme-color-primary);box-shadow:0 0 0.25rem 0 var(--theme-color-primary) !important}:host .reset-button{position:absolute;top:0.25rem;right:0.25rem}:host .reset-button.hide-reset-button{display:none}:host .input-container{display:flex;height:auto;max-height:3.75rem;padding:1px 1.5rem 1px 1.75rem !important}:host .input-container:not(.readonly):not(.disabled){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)}:host .input-container:not(.readonly):not(.disabled):-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}:host .input-container:not(.readonly):not(.disabled):-webkit-autofill,:host .input-container:not(.readonly):not(.disabled):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}:host .input-container:not(.readonly):not(.disabled)::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled)::placeholder{color:var(--theme-input-hint--color)}:host .input-container:not(.readonly):not(.disabled).hover,:host .input-container:not(.readonly):not(.disabled):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container:not(.readonly):not(.disabled).focus,:host .input-container:not(.readonly):not(.disabled):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}:host .input-container:not(.readonly):not(.disabled):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)}:host .input-container:not(.readonly):not(.disabled):disabled::-moz-placeholder{color:transparent}:host .input-container:not(.readonly):not(.disabled):disabled::placeholder{color:transparent}:host .input-container.disabled{color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}:host .input-container.readonly{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)}:host .input-container.readonly:-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}:host .input-container.readonly:-webkit-autofill,:host .input-container.readonly: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}:host .input-container.readonly::-moz-placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly::placeholder{color:var(--theme-input-hint--color)}:host .input-container.readonly.hover,:host .input-container.readonly:hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-container.readonly.focus,:host .input-container.readonly: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}:host .input-container.readonly:-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)}:host .input-container.readonly.read-only,:host .input-container.readonly: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)}:host .input-container.readonly.read-only::-moz-placeholder,:host .input-container.readonly:read-only::-moz-placeholder{color:transparent}:host .input-container.readonly:-moz-read-only::placeholder{color:transparent}:host .input-container.readonly.read-only::placeholder,:host .input-container.readonly:read-only::placeholder{color:transparent}:host .input-container.readonly: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)}:host .input-container.readonly:disabled::-moz-placeholder{color:transparent}:host .input-container.readonly:disabled::placeholder{color:transparent}:host .input-container.no-icon{padding-left:0.25rem}:host .token-container{flex-grow:1;overflow:hidden}:host .text-input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-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);width:auto;height:1.75rem;min-height:1.5rem;background:transparent;flex-grow:1;box-shadow:none}:host .text-input,:host .text-input:hover,:host .text-input:focus-visible{border:none;outline:none}:host .text-input.hide-placeholder::-moz-placeholder{opacity:0}:host .text-input.hide-placeholder::placeholder{opacity:0}:host .list-unstyled{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:0;overflow-y:auto}:host ix-icon{position:absolute;top:0.5rem;left:0.5rem}:host ix-filter-chip{margin-right:0.25rem}:host .category-preview{display:flex;align-items:center;height:1.5rem;background-color:var(--theme-bg-3);border-top-left-radius:1rem;border-bottom-left-radius:1rem;padding:0.5rem;margin:2px 0}:host ul{height:100%}:host ul>li,:host input{padding-inline-start:0;padding-top:2px;padding-bottom:2px}:host ix-dropdown{min-width:10rem !important}:host ix-dropdown .dropdown-item-container{display:flex;flex-direction:column}:host ix-dropdown .dropdown-item-container .dropdown-item{-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.143em;color:var(--theme-color-std-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:2.5rem;margin:0.25rem 0.5rem;padding-inline:0.5rem;border:1px solid transparent;border-radius:100rem;width:auto;justify-content:flex-start;flex-grow:1}:host ix-dropdown .dropdown-item-container .dropdown-item:not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-color-focus-bdr)}:host ix-dropdown .dropdown-item-container .category-item{border-end-end-radius:0;border-start-end-radius:0}:host ix-dropdown .dropdown-item-container .category-item-value{border-start-start-radius:0;border-end-start-radius:0}:host ix-dropdown .btn-toggle-operator{width:2rem;height:2rem;margin-inline:0.5rem}:host .d-none{display:none}";const s=l;const c=class{constructor(t){o(this,t);this.categoryChanged=e(this,"categoryChanged",7);this.inputChanged=e(this,"inputChanged",7);this.filterChanged=e(this,"filterChanged",7);this.ID_CUSTOM_FILTER_VALUE="CW_CUSTOM_FILTER_VALUE";this.showDropdown=undefined;this.textInput=undefined;this.hasFocus=undefined;this.categoryLogicalOperator=a.EQUAL;this.inputValue=undefined;this.category=undefined;this.filterTokens=[];this.disabled=false;this.readonly=false;this.filterState=undefined;this.placeholder=undefined;this.categories=undefined;this.nonSelectableCategories={};this.suggestions=undefined;this.icon="search";this.hideIcon=undefined;this.staticOperator=undefined;this.repeatCategories=true;this.tmpDisableScrollIntoView=true;this.labelCategories="Categories";this.i18nPlainText="Filter by text"}get dropdown(){return this.hostElement.shadowRoot.querySelector("ix-dropdown")}watchFilterState(o){this.setFilterState(o)}componentDidLoad(){var o,e;if(this.filterState!==undefined){setTimeout((()=>this.setFilterState(this.filterState)))}(o=this.hostElement)===null\|\|o===void 0?void 0:o.addEventListener("keydown",this.handleFormElementKeyDown.bind(this));(e=this.formElement)===null\|\|e===void 0?void 0:e.addEventListener("submit",(o=>o.preventDefault()));if(this.textInput==null){console.warn("ix-category-filter - unable to add event listeners to native input element");return}this.textInput.addEventListener("focusin",(()=>{this.hasFocus=true}));this.textInput.addEventListener("focusout",(()=>this.hasFocus=false));this.textInput.addEventListener("input",(()=>{this.inputValue=this.textInput.value;const o=new d(this.inputValue,this.category);this.inputChanged.emit(o);if(!this.dropdown.show){this.openDropdown()}}));this.textInput.addEventListener("keydown",this.handleInputElementKeyDown.bind(this))}setFilterState(o){this.filterTokens=[];for(const e of o.tokens){this.addToken(e,this.ID_CUSTOM_FILTER_VALUE,this.categoryLogicalOperator,false)}for(const e of o.categories){this.addToken(e.value,e.id,e.operator,false)}this.emitFilterEvent()}closeDropdown(){if(this.disabled\|\|this.readonly){return}this.dropdown.show=false}openDropdown(){if(this.disabled\|\|this.readonly){return}this.dropdown.show=true}handleFormElementKeyDown(o){switch(o.code){case"Enter":case"NumpadEnter":if(!document.activeElement.classList.contains("dropdown-item")){return}const e=document.activeElement.getAttribute("data-id");if(this.hasCategorySelection()){if(this.category!==undefined){this.addToken(e,this.category)}else if(document.activeElement.classList.contains("category-item-id")){this.selectCategory(e)}}else{this.addToken(e)}o.preventDefault();break;case"ArrowUp":this.focusPreviousItem();o.preventDefault();break;case"ArrowDown":this.showDropdown=true;this.focusNextItem();o.preventDefault();break;case"Escape":this.closeDropdown();break}}focusPreviousItem(){const o=document.activeElement.previousSibling;if(o instanceof HTMLElement){o.focus()}}focusNextItem(){const o=document.activeElement.nextSibling;if(o instanceof HTMLElement){o.focus()}}handleInputElementKeyDown(o){var e;switch(o.code){case"ArrowDown":const t=`.category-item-${this.category!==undefined?"value":"id"}`;let r=this.hostElement.shadowRoot.querySelector(t);if(r instanceof HTMLElement){r.focus();o.stopPropagation()}else if((e=this.suggestions)===null\|\|e===void 0?void 0:e.length){r=this.hostElement.shadowRoot.querySelector(".category-item");if(r instanceof HTMLElement){r.focus();o.stopPropagation()}}break;case"Backspace":if(this.textInput.value!==""){return}if(this.category!==undefined){this.category=undefined;return}const n=this.filterTokens.length;if(n>0){this.removeToken(n-1)}break;case"Enter":case"NumpadEnter":this.addToken(this.inputValue,this.category);o.preventDefault();break}}emitFilterEvent(){const o=this.filterTokens.filter((o=>o.id===this.ID_CUSTOM_FILTER_VALUE)).map((o=>o.value));const e=this.filterTokens.filter((o=>o.id!==this.ID_CUSTOM_FILTER_VALUE));const t={tokens:o,categories:e};this.filterChanged.emit(t)}addToken(o,e=this.ID_CUSTOM_FILTER_VALUE,t=this.categoryLogicalOperator,r=true){if(o===undefined\|\|o===null){return}const n=o.trim();if(n===""){return}if(this.hasToken(n)){return}const i={id:e,value:n,operator:t};this.filterTokens=[...this.filterTokens,i];this.textInput.value="";this.inputValue="";this.categoryLogicalOperator=a.EQUAL;if(this.category!==undefined){this.category=undefined}this.isScrollStateDirty=true;this.textInput.focus();if(r){this.emitFilterEvent()}}removeToken(o){this.filterTokens=this.filterTokens.filter(((e,t)=>t!==o));this.emitFilterEvent()}getCategoryIds(){const o=[];for(const e in this.categories){if(Object.prototype.hasOwnProperty.call(this.categories,e)){o.push(e)}}return o}selectCategory(o){this.category=o;this.textInput.value="";this.inputValue="";this.textInput.focus();this.categoryChanged.emit(o)}resetFilter(o){o.stopPropagation();this.closeDropdown();this.filterTokens=[];this.emitFilterEvent()}filterMultiples(o){if(this.repeatCategories){return true}const e=this.filterTokens.find((e=>e.id===o));return!e}hasToken(o){return this.filterTokens.some((e=>{const t=e.value===o;if(!t){return false}if(this.category!==undefined){return this.category===e.id}if(e.id){return e.id===this.ID_CUSTOM_FILTER_VALUE}return t}))}filterDuplicateTokens(o){return!this.hasToken(o)}filterByInput(o){if(this.inputValue===undefined\|\|this.inputValue===""){return true}return o.toLowerCase().indexOf(this.inputValue.toLowerCase())!==-1}toggleCategoryOperator(){switch(this.categoryLogicalOperator){case a.EQUAL:this.categoryLogicalOperator=a.NOT_EQUAL;break;case a.NOT_EQUAL:this.categoryLogicalOperator=a.EQUAL;break}}getFilterChipLabel(o){var e,t,r;if(o.id===this.ID_CUSTOM_FILTER_VALUE){return o.value}const n=o.operator===a.EQUAL?"=":"!=";const i=(r=(t=(e=this.categories[o.id])===null\|\|e===void 0?void 0:e.label)!==null&&t!==void 0?t:this.nonSelectableCategories[o.id])!==null&&r!==void 0?r:o.id;return`${i} ${n} ${o.value}`}getFilteredSuggestions(){var o,e;if(!((o=this.suggestions)===null\|\|o===void 0?void 0:o.length)){return[]}return(e=this.suggestions)===null\|\|e===void 0?void 0:e.filter((o=>this.filterByInput(o))).filter((o=>this.filterDuplicateTokens(o)))}hasCategorySelection(){return this.categories!==undefined}renderPlainSuggestions(){return t("div",{class:"dropdown-item-container"},this.getFilteredSuggestions().map((o=>t("button",{class:"dropdown-item","data-id":o,onClick:()=>this.addToken(o),key:o,title:o},o))))}renderOperatorButton(){if(this.staticOperator){return""}const o={type:"button",variant:"secondary",outline:false,ghost:true,iconOnly:true,iconOval:false,selected:false,disabled:this.disabled\|\|this.staticOperator!==undefined,loading:false,icon:"",onClick:o=>{o.stopPropagation();this.toggleCategoryOperator()},extraClasses:{"btn-icon-32":true,"btn-toggle-operator":true}};return t(i,Object.assign({},o),this.categoryLogicalOperator===a.NOT_EQUAL?"=":"!=")}getFilterOperatorString(){let o;if(this.staticOperator!==undefined){o=this.staticOperator}else{o=this.categoryLogicalOperator}return`${o===a.EQUAL?"=":"!="} `}renderCategoryValues(){var o,e;return t("div",{class:"dropdown-item-container"},this.renderOperatorButton(),t("div",{class:"dropdown-header"},(o=this.categories[this.category])===null\|\|o===void 0?void 0:o.label),(e=this.categories[this.category])===null\|\|e===void 0?void 0:e.options.filter((o=>this.filterByInput(o))).filter((o=>this.filterDuplicateTokens(o))).map((o=>t("button",{class:"dropdown-item category-item-value","data-id":o,title:o,key:o,onClick:e=>{e.preventDefault();this.addToken(o,this.category)}},`${this.getFilterOperatorString()} ${o}`))))}renderDropdownContent(){if(this.hasCategorySelection()){if(this.category!==undefined){return this.renderCategoryValues()}else{return this.renderCategorySelection()}}else return this.renderPlainSuggestions()}renderCategorySelection(){var o;return t("div",{class:"dropdown-item-container"},(o=this.getCategoryIds())===null\|\|o===void 0?void 0:o.filter((o=>this.filterByInput(this.categories[o].label))).filter((o=>this.filterMultiples(o))).map((o=>{var e;return t("button",{class:"dropdown-item category-item category-item-id","data-id":o,title:this.categories[o].label,key:o,onClick:e=>{e.preventDefault();this.selectCategory(o)},tabindex:"0"},(e=this.categories[o])===null\|\|e===void 0?void 0:e.label)})))}getDropdownHeader(){if(this.categories!==undefined){if(this.category!==undefined){return null}else{return this.labelCategories}}return this.i18nPlainText}componentDidRender(){if(this.isScrollStateDirty){if(!this.tmpDisableScrollIntoView){this.textInput.scrollIntoView()}this.isScrollStateDirty=false}}getResetButton(){return t("ix-icon-button",{onClick:o=>this.resetFilter(o),class:{"reset-button":true,"hide-reset-button":!this.filterTokens.length&&this.category===undefined},ghost:true,oval:true,icon:"clear",size:"16"})}getIconColor(){if(this.disabled){return"color-componentn-1"}if(this.readonly){return"color-std-txt"}return"color-primary"}render(){var o;return t(r,{key:"460d61c8d2a83d95445b5cad86e1ea2e2fbbf289"},t("form",{key:"401290f84df0375dd2d23214e10942382dbc28de",ref:o=>this.formElement=o},t("div",{key:"06d9f1a58cd4daa32d13509142625a91cc4884f4","read-only":this.readonly,class:{"input-container":true,disabled:this.disabled,focus:this.hasFocus,readonly:this.readonly,"no-icon":this.hideIcon}},t("ix-icon",{key:"b24d1cfd93ac33cb209d2ce516537c72ea0a3010",color:this.getIconColor(),class:{"d-none":this.hideIcon},name:this.icon,size:"16"}),t("div",{key:"61ab21b44baf97bc8c65cf7ac65f8ee418210b6e",class:"token-container"},t("ul",{key:"d4e318bc1204bbf50d9894b5b735f4b2faa03d11",class:"list-unstyled"},this.filterTokens.map(((o,e)=>t("li",{key:o.toString(),class:{animate__animated:true,animate__fadein:true}},t("ix-filter-chip",{disabled:this.disabled,readonly:this.readonly,onClick:o=>o.stopPropagation(),onCloseClick:()=>this.removeToken(e)},this.getFilterChipLabel(o))))),this.categories===undefined?"":t("li",{class:{"category-preview":true,"d-none":this.category===undefined}},(o=this.categories[this.category])===null\|\|o===void 0?void 0:o.label),t("input",{key:"457dee28a04610b7299aa2939c3e1280eca2f16f",class:{"text-input":true,"hide-placeholder":this.readonly\|\|this.disabled\|\|this.category!==undefined},autocomplete:"off",name:"category-filter-input",disabled:this.disabled,readonly:this.readonly,ref:o=>this.textInput=o,type:"text",placeholder:this.placeholder}))),!this.readonly&&!this.disabled&&this.getResetButton())),this.disabled\|\|this.readonly?"":t("ix-dropdown",{show:this.showDropdown,closeBehavior:"outside",offset:{mainAxis:2},anchor:this.textInput,trigger:this.hostElement,header:this.getDropdownHeader()},this.renderDropdownContent()))}get hostElement(){return n(this)}static get watchers(){return{filterState:["watchFilterState"]}}};c.style=s;export{c as ix_category_filter};
2	+ //# sourceMappingURL=p-85423643.entry.js.map

package/dist/siemens-ix/{p-213f16d5.entry.js.map → p-85423643.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["categoryFilterCss","IxCategoryFilterStyle0","CategoryFilter","this","ID_CUSTOM_FILTER_VALUE","LogicalFilterOperator","EQUAL","dropdown","hostElement","shadowRoot","querySelector","watchFilterState","newValue","setFilterState","componentDidLoad","filterState","undefined","setTimeout","_a","addEventListener","handleFormElementKeyDown","bind","_b","formElement","e","preventDefault","textInput","console","warn","hasFocus","inputValue","value","inputState","InputState","category","inputChanged","emit","show","openDropdown","handleInputElementKeyDown","state","filterTokens","token","tokens","addToken","categoryLogicalOperator","categories","id","operator","emitFilterEvent","closeDropdown","disabled","readonly","code","document","activeElement","classList","contains","getAttribute","hasCategorySelection","selectCategory","focusPreviousItem","showDropdown","focusNextItem","sibling","previousSibling","HTMLElement","focus","nextSibling","selector","item","stopPropagation","suggestions","length","tokenCount","removeToken","filter","map","filterChanged","emitEvent","newToken","trim","hasToken","pair","isScrollStateDirty","index","_","i","getCategoryIds","ids","Object","prototype","hasOwnProperty","call","push","categoryChanged","resetFilter","filterMultiples","repeatCategories","isCategoryAlreadySet","find","some","filterToken","hasSameValue","filterDuplicateTokens","filterByInput","toLowerCase","indexOf","toggleCategoryOperator","NOT_EQUAL","getFilterChipLabel","operatorString","label","_c","nonSelectableCategories","getFilteredSuggestions","renderPlainSuggestions","h","class","suggestion","onClick","key","title","renderOperatorButton","staticOperator","params","type","variant","outline","ghost","iconOnly","iconOval","selected","loading","icon","extraClasses","BaseButton","assign","getFilterOperatorString","renderCategoryValues","options","renderDropdownContent","renderCategorySelection","tabindex","getDropdownHeader","labelCategories","i18nPlainText","componentDidRender","tmpDisableScrollIntoView","scrollIntoView","getResetButton","oval","size","getIconColor","render","Host","ref","el","hideIcon","color","name","toString","animate__animated","animate__fadein","onCloseClick","autocomplete","placeholder","closeBehavior","offset","mainAxis","anchor","trigger","header"],"sources":["src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=shadow","src/components/category-filter/category-filter.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/shadows';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n@import '../button/button';\n@import 'legacy/components/dropdown';\n@import 'legacy/components/forms';\n@import 'components/form/input';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n height: auto;\n\n @include host-focus-visible {\n border-color: var(--theme-color-primary);\n box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n }\n\n .reset-button {\n position: absolute;\n top: $tiny-space;\n right: $tiny-space;\n }\n\n .reset-button.hide-reset-button {\n display: none;\n }\n\n .input-container {\n &:not(.readonly):not(.disabled) {\n @include element-input('false');\n }\n\n &.disabled {\n color: var(--theme-input--color--disabled);\n border-bottom: var(--theme-input--border-thickness, 1px) solid\n var(--theme-input--border-color-bottom--disabled);\n }\n\n &.readonly {\n @include element-input;\n }\n\n display: flex;\n height: auto;\n max-height: 3.75rem;\n padding: 1px $large-space 1px 1.75rem !important;\n\n &.no-icon {\n padding-left: $tiny-space;\n }\n }\n\n .token-container {\n flex-grow: 1;\n overflow: hidden;\n }\n\n .text-input {\n @include ellipsis;\n @include text-default;\n width: auto;\n height: 1.75rem;\n min-height: $large-space;\n background: transparent;\n flex-grow: 1;\n box-shadow: none;\n\n &,\n &:hover,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &.hide-placeholder::placeholder {\n opacity: 0;\n }\n }\n\n .list-unstyled {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0;\n margin: 0;\n overflow-y: auto;\n }\n\n ix-icon {\n position: absolute;\n top: $small-space;\n left: $small-space;\n }\n\n ix-filter-chip {\n margin-right: $tiny-space;\n }\n\n .category-preview {\n display: flex;\n align-items: center;\n height: $large-space;\n background-color: var(--theme-bg-3);\n border-top-left-radius: $default-space;\n border-bottom-left-radius: $default-space;\n padding: $small-space;\n margin: 2px 0;\n }\n\n ul {\n height: 100%;\n }\n\n ul > li,\n input {\n padding-inline-start: 0;\n padding-top: 2px;\n padding-bottom: 2px;\n }\n\n ix-dropdown {\n min-width: 10rem !important;\n\n .dropdown-item-container {\n display: flex;\n flex-direction: column;\n\n .dropdown-item {\n @include text-default-single;\n @include ellipsis;\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n }\n\n height: $large-control-height;\n margin: $tiny-space $small-space;\n padding-inline: $small-space;\n border: 1px solid transparent;\n border-radius: 100rem;\n width: auto;\n justify-content: flex-start;\n flex-grow: 1;\n }\n\n .category-item {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n\n .category-item-value {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n\n .btn-toggle-operator {\n width: 2rem;\n height: 2rem;\n margin-inline: $small-space;\n }\n }\n\n .d-none {\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 Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n tag: 'ix-category-filter',\n styleUrl: 'category-filter.scss',\n shadow: true,\n})\nexport class CategoryFilter {\n private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n @State() showDropdown: boolean;\n @State() private textInput?: HTMLInputElement;\n private formElement?: HTMLFormElement;\n private isScrollStateDirty: boolean;\n\n @Element() hostElement: HTMLIxCategoryFilterElement;\n\n @State() hasFocus: boolean;\n @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n @State() inputValue: string;\n @State() category: string;\n @State() filterTokens: Array<{\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }> = [];\n\n /\n If true the filter will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the filter will be in readonly mode\n /\n @Prop() readonly = false;\n\n /\n A set of search criteria to populate the component with.\n /\n @Prop() filterState: FilterState;\n\n /\n Placeholder text to be displayed in an empty input field.\n /\n @Prop() placeholder: string;\n\n /\n Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n * Each ID maps to an object with a label and an array of options to select from.\n /\n @Prop() categories: {\n [id: string]: {\n label: string;\n options: string[];\n };\n };\n\n /\n In certain use cases some categories may not be available for selection anymore.\n * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n \n Configuration object hash used to supply labels to the filter chips in the input field.\n * Each ID maps to a string representing the label to display.\n /\n @Prop() nonSelectableCategories?: {\n [id: string]: string;\n } = {};\n\n /\n A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n /\n @Prop() suggestions: string[];\n\n /\n The icon next to the actual text input\n * Defaults to 'search'\n /\n @Prop() icon = 'search';\n\n /\n Allows to hide the icon inside the text input.\n * Defaults to false\n /\n @Prop() hideIcon: boolean;\n\n /\n If set categories will always be filtered via the respective logical operator.\n * Toggling of the operator will not be available to the user.\n \n @since 2.2.0\n /\n @Prop() staticOperator?: LogicalFilterOperator;\n\n /\n If set to true allows that a single category can be set more than once.\n * An already set category will not appear in the category dropdown if set to false.\n \n Defaults to true\n /\n @Prop() repeatCategories = true;\n\n /\n @internal For debugging purposes only!\n /\n @Prop() tmpDisableScrollIntoView = true;\n\n /\n i18n\n /\n @Prop() labelCategories = 'Categories';\n\n /\n i18n\n /\n @Prop() i18nPlainText = 'Filter by text';\n\n /\n Event dispatched whenever the a category gets selected in the dropdown\n /\n @Event() categoryChanged: EventEmitter<string>;\n\n /\n Event dispatched whenever the text input changes.\n /\n @Event() inputChanged: EventEmitter<InputState>;\n\n /\n Event dispatched whenever the filter state changes.\n */\n @Event() filterChanged: EventEmitter<FilterState>;\n\n get dropdown() {\n return this.hostElement.shadowRoot.querySelector('ix-dropdown');\n }\n\n @Watch('filterState')\n watchFilterState(newValue) {\n this.setFilterState(newValue);\n }\n\n componentDidLoad() {\n if (this.filterState !== undefined) {\n setTimeout(() => this.setFilterState(this.filterState));\n }\n\n this.hostElement?.addEventListener(\n 'keydown',\n this.handleFormElementKeyDown.bind(this)\n );\n\n this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n if (this.textInput == null) {\n console.warn(\n 'ix-category-filter - unable to add event listeners to native input element'\n );\n return;\n }\n\n this.textInput.addEventListener('focusin', () => {\n this.hasFocus = true;\n });\n this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n this.textInput.addEventListener('input', () => {\n this.inputValue = this.textInput.value;\n const inputState = new InputState(this.inputValue, this.category);\n this.inputChanged.emit(inputState);\n\n if (!this.dropdown.show) {\n this.openDropdown();\n }\n });\n this.textInput.addEventListener(\n 'keydown',\n this.handleInputElementKeyDown.bind(this)\n );\n }\n\n private setFilterState(state: FilterState) {\n this.filterTokens = [];\n\n for (const token of state.tokens) {\n this.addToken(\n token,\n this.ID_CUSTOM_FILTER_VALUE,\n this.categoryLogicalOperator,\n false\n );\n }\n\n for (const category of state.categories) {\n this.addToken(category.value, category.id, category.operator, false);\n }\n\n this.emitFilterEvent();\n }\n\n private closeDropdown() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.dropdown.show = false;\n }\n\n private openDropdown() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.dropdown.show = true;\n }\n\n private handleFormElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'Enter':\n case 'NumpadEnter':\n if (!document.activeElement.classList.contains('dropdown-item')) {\n return;\n }\n\n const token = document.activeElement.getAttribute('data-id');\n\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n this.addToken(token, this.category);\n } else if (\n document.activeElement.classList.contains('category-item-id')\n ) {\n this.selectCategory(token);\n }\n } else {\n this.addToken(token);\n }\n\n e.preventDefault();\n break;\n\n case 'ArrowUp':\n this.focusPreviousItem();\n e.preventDefault();\n break;\n\n case 'ArrowDown':\n this.showDropdown = true;\n this.focusNextItem();\n e.preventDefault();\n break;\n\n case 'Escape':\n this.closeDropdown();\n break;\n }\n }\n\n private focusPreviousItem() {\n const sibling = document.activeElement.previousSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private focusNextItem() {\n const sibling = document.activeElement.nextSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private handleInputElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'ArrowDown':\n const selector = `.category-item-${\n this.category !== undefined ? 'value' : 'id'\n }`;\n let item = this.hostElement.shadowRoot.querySelector(selector);\n\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n } else if (this.suggestions?.length) {\n item = this.hostElement.shadowRoot.querySelector('.category-item');\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n }\n }\n break;\n\n case 'Backspace':\n if (this.textInput.value !== '') {\n return;\n }\n\n if (this.category !== undefined) {\n this.category = undefined;\n return;\n }\n\n const tokenCount = this.filterTokens.length;\n if (tokenCount > 0) {\n this.removeToken(tokenCount - 1);\n }\n break;\n\n case 'Enter':\n case 'NumpadEnter':\n this.addToken(this.inputValue, this.category);\n e.preventDefault();\n break;\n }\n }\n\n private emitFilterEvent() {\n const tokens = this.filterTokens\n .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n .map((item) => item.value);\n const categories = this.filterTokens.filter(\n (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n );\n const filterState: FilterState = {\n tokens,\n categories,\n };\n\n this.filterChanged.emit(filterState);\n }\n\n private addToken(\n token: string,\n category: string = this.ID_CUSTOM_FILTER_VALUE,\n operator = this.categoryLogicalOperator,\n emitEvent = true\n ) {\n if (token === undefined \|\| token === null) {\n return;\n }\n\n const newToken = token.trim();\n\n if (newToken === '') {\n return;\n }\n\n if (this.hasToken(newToken)) {\n return;\n }\n\n const pair = { id: category, value: newToken, operator };\n this.filterTokens = [...this.filterTokens, pair];\n this.textInput.value = '';\n this.inputValue = '';\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n if (this.category !== undefined) {\n this.category = undefined;\n }\n\n this.isScrollStateDirty = true;\n\n this.textInput.focus();\n\n if (emitEvent) {\n this.emitFilterEvent();\n }\n }\n\n private removeToken(index: number) {\n this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n this.emitFilterEvent();\n }\n\n private getCategoryIds() {\n const ids = [];\n for (const id in this.categories) {\n if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n ids.push(id);\n }\n }\n\n return ids;\n }\n\n private selectCategory(category: string) {\n this.category = category;\n this.textInput.value = '';\n this.inputValue = '';\n this.textInput.focus();\n this.categoryChanged.emit(category);\n }\n\n private resetFilter(e: Event) {\n e.stopPropagation();\n this.closeDropdown();\n this.filterTokens = [];\n this.emitFilterEvent();\n }\n\n private filterMultiples(value: string) {\n if (this.repeatCategories) {\n return true;\n }\n\n const isCategoryAlreadySet = this.filterTokens.find(\n (token) => token.id === value\n );\n\n return !isCategoryAlreadySet;\n }\n\n private hasToken(token: string) {\n return this.filterTokens.some((filterToken) => {\n const hasSameValue = filterToken.value === token;\n\n if (!hasSameValue) {\n return false;\n }\n\n if (this.category !== undefined) {\n return this.category === filterToken.id;\n }\n\n if (filterToken.id) {\n return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n }\n\n return hasSameValue;\n });\n }\n\n private filterDuplicateTokens(value: string) {\n return !this.hasToken(value);\n }\n\n private filterByInput(value: string) {\n if (this.inputValue === undefined \|\| this.inputValue === '') {\n return true;\n }\n\n return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n }\n\n private toggleCategoryOperator() {\n switch (this.categoryLogicalOperator) {\n case LogicalFilterOperator.EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n break;\n\n case LogicalFilterOperator.NOT_EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n break;\n }\n }\n\n private getFilterChipLabel(value: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }): string {\n if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n return value.value;\n }\n\n const operatorString =\n value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n const label =\n this.categories[value.id]?.label ??\n this.nonSelectableCategories[value.id] ??\n value.id;\n\n return `${label} ${operatorString} ${value.value}`;\n }\n\n private getFilteredSuggestions() {\n if (!this.suggestions?.length) {\n return [];\n }\n\n return this.suggestions\n ?.filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value));\n }\n\n private hasCategorySelection() {\n return this.categories !== undefined;\n }\n\n private renderPlainSuggestions() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getFilteredSuggestions().map((suggestion) => (\n <button\n class=\"dropdown-item\"\n data-id={suggestion}\n onClick={() => this.addToken(suggestion)}\n key={suggestion}\n title={suggestion}\n >\n {suggestion}\n </button>\n ))}\n </div>\n );\n }\n\n private renderOperatorButton() {\n if (this.staticOperator) {\n return '';\n }\n\n const params: BaseButtonProps = {\n type: 'button',\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n selected: false,\n disabled: this.disabled \|\| this.staticOperator !== undefined,\n loading: false,\n icon: '',\n onClick: (e: Event) => {\n e.stopPropagation();\n this.toggleCategoryOperator();\n },\n extraClasses: {\n 'btn-icon-32': true,\n 'btn-toggle-operator': true,\n },\n };\n\n return (\n <BaseButton {...params}>\n {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n ? '='\n : '!='}\n </BaseButton>\n );\n }\n\n private getFilterOperatorString() {\n let operator: LogicalFilterOperator;\n if (this.staticOperator !== undefined) {\n operator = this.staticOperator;\n } else {\n operator = this.categoryLogicalOperator;\n }\n return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;\n }\n\n private renderCategoryValues() {\n return (\n <div class=\"dropdown-item-container\">\n {this.renderOperatorButton()}\n <div class=\"dropdown-header\">\n {this.categories[this.category]?.label}\n </div>\n {this.categories[this.category]?.options\n .filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value))\n .map((id) => (\n <button\n class=\"dropdown-item category-item-value\"\n data-id={id}\n title={id}\n key={id}\n onClick={() => this.addToken(id, this.category)}\n >\n {`${this.getFilterOperatorString()} ${id}`}\n </button>\n ))}\n </div>\n );\n }\n\n private renderDropdownContent() {\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n return this.renderCategoryValues();\n } else {\n return this.renderCategorySelection();\n }\n } else return this.renderPlainSuggestions();\n }\n\n private renderCategorySelection() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getCategoryIds()\n ?.filter((id) => this.filterByInput(this.categories[id].label))\n .filter((id) => this.filterMultiples(id))\n .map((id) => (\n <button\n class=\"dropdown-item category-item category-item-id\"\n data-id={id}\n title={this.categories[id].label}\n key={id}\n onClick={(e) => {\n e.preventDefault();\n this.selectCategory(id);\n }}\n tabindex=\"0\"\n >\n {this.categories[id]?.label}\n </button>\n ))}\n </div>\n );\n }\n\n private getDropdownHeader() {\n if (this.categories !== undefined) {\n if (this.category !== undefined) {\n return null;\n } else {\n return this.labelCategories;\n }\n }\n\n return this.i18nPlainText;\n }\n\n componentDidRender() {\n if (this.isScrollStateDirty) {\n if (!this.tmpDisableScrollIntoView) {\n this.textInput.scrollIntoView();\n }\n this.isScrollStateDirty = false;\n }\n }\n\n private getResetButton() {\n return (\n <ix-icon-button\n onClick={(e) => this.resetFilter(e)}\n class={{\n 'reset-button': true,\n 'hide-reset-button':\n !this.filterTokens.length && this.category === undefined,\n }}\n ghost\n oval\n icon={'clear'}\n size=\"16\"\n ></ix-icon-button>\n );\n }\n\n private getIconColor() {\n if (this.disabled) {\n return 'color-componentn-1';\n }\n\n if (this.readonly) {\n return 'color-std-txt';\n }\n\n return 'color-primary';\n }\n\n render() {\n return (\n <Host>\n <form ref={(el) => (this.formElement = el)}>\n <div\n read-only={this.readonly}\n class={{\n 'input-container': true,\n disabled: this.disabled,\n focus: this.hasFocus,\n readonly: this.readonly,\n 'no-icon': this.hideIcon,\n }}\n >\n <ix-icon\n color={this.getIconColor()}\n class={{ 'd-none': this.hideIcon }}\n name={this.icon}\n size=\"16\"\n ></ix-icon>\n <div class=\"token-container\">\n <ul class=\"list-unstyled\">\n {this.filterTokens.map((value, index) => (\n <li\n key={value.toString()}\n class={{\n animate__animated: true,\n animate__fadein: true,\n }}\n >\n <ix-filter-chip\n disabled={this.disabled}\n readonly={this.readonly}\n onClick={(e) => e.stopPropagation()}\n onCloseClick={() => this.removeToken(index)}\n >\n {this.getFilterChipLabel(value)}\n </ix-filter-chip>\n </li>\n ))}\n {this.categories === undefined ? (\n ''\n ) : (\n <li\n class={{\n 'category-preview': true,\n 'd-none': this.category === undefined,\n }}\n >\n {this.categories[this.category]?.label}\n </li>\n )}\n <input\n class={{\n 'text-input': true,\n 'hide-placeholder':\n this.readonly \|\|\n this.disabled \|\|\n this.category !== undefined,\n }}\n autocomplete=\"off\"\n name=\"category-filter-input\"\n disabled={this.disabled}\n readonly={this.readonly}\n ref={(el) => (this.textInput = el)}\n type=\"text\"\n placeholder={this.placeholder}\n ></input>\n </ul>\n </div>\n {!this.readonly && !this.disabled && this.getResetButton()}\n </div>\n </form>\n\n {this.disabled \|\| this.readonly ? (\n ''\n ) : (\n <ix-dropdown\n show={this.showDropdown}\n closeBehavior=\"outside\"\n offset={{ mainAxis: 2 }}\n anchor={this.textInput}\n trigger={this.hostElement}\n header={this.getDropdownHeader()}\n >\n {this.renderDropdownContent()}\n </ix-dropdown>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"names":["categoryFilterCss","IxCategoryFilterStyle0","CategoryFilter","this","ID_CUSTOM_FILTER_VALUE","LogicalFilterOperator","EQUAL","dropdown","hostElement","shadowRoot","querySelector","watchFilterState","newValue","setFilterState","componentDidLoad","filterState","undefined","setTimeout","_a","addEventListener","handleFormElementKeyDown","bind","_b","formElement","e","preventDefault","textInput","console","warn","hasFocus","inputValue","value","inputState","InputState","category","inputChanged","emit","show","openDropdown","handleInputElementKeyDown","state","filterTokens","token","tokens","addToken","categoryLogicalOperator","categories","id","operator","emitFilterEvent","closeDropdown","disabled","readonly","code","document","activeElement","classList","contains","getAttribute","hasCategorySelection","selectCategory","focusPreviousItem","showDropdown","focusNextItem","sibling","previousSibling","HTMLElement","focus","nextSibling","selector","item","stopPropagation","suggestions","length","tokenCount","removeToken","filter","map","filterChanged","emitEvent","newToken","trim","hasToken","pair","isScrollStateDirty","index","_","i","getCategoryIds","ids","Object","prototype","hasOwnProperty","call","push","categoryChanged","resetFilter","filterMultiples","repeatCategories","isCategoryAlreadySet","find","some","filterToken","hasSameValue","filterDuplicateTokens","filterByInput","toLowerCase","indexOf","toggleCategoryOperator","NOT_EQUAL","getFilterChipLabel","operatorString","label","_c","nonSelectableCategories","getFilteredSuggestions","renderPlainSuggestions","h","class","suggestion","onClick","key","title","renderOperatorButton","staticOperator","params","type","variant","outline","ghost","iconOnly","iconOval","selected","loading","icon","extraClasses","BaseButton","assign","getFilterOperatorString","renderCategoryValues","options","renderDropdownContent","renderCategorySelection","tabindex","getDropdownHeader","labelCategories","i18nPlainText","componentDidRender","tmpDisableScrollIntoView","scrollIntoView","getResetButton","oval","size","getIconColor","render","Host","ref","el","hideIcon","color","name","toString","animate__animated","animate__fadein","onCloseClick","autocomplete","placeholder","closeBehavior","offset","mainAxis","anchor","trigger","header"],"sources":["src/components/category-filter/category-filter.scss?tag=ix-category-filter&encapsulation=shadow","src/components/category-filter/category-filter.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/shadows';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n@import '../button/button';\n@import 'legacy/components/dropdown';\n@import 'legacy/components/forms';\n@import 'components/form/input';\n\n:host {\n @include ix-component;\n\n display: block;\n position: relative;\n height: auto;\n\n @include host-focus-visible {\n border-color: var(--theme-color-primary);\n box-shadow: 0 0 $tiny-space 0 var(--theme-color-primary) !important;\n }\n\n .reset-button {\n position: absolute;\n top: $tiny-space;\n right: $tiny-space;\n }\n\n .reset-button.hide-reset-button {\n display: none;\n }\n\n .input-container {\n &:not(.readonly):not(.disabled) {\n @include element-input('false');\n }\n\n &.disabled {\n color: var(--theme-input--color--disabled);\n border-bottom: var(--theme-input--border-thickness, 1px) solid\n var(--theme-input--border-color-bottom--disabled);\n }\n\n &.readonly {\n @include element-input;\n }\n\n display: flex;\n height: auto;\n max-height: 3.75rem;\n padding: 1px $large-space 1px 1.75rem !important;\n\n &.no-icon {\n padding-left: $tiny-space;\n }\n }\n\n .token-container {\n flex-grow: 1;\n overflow: hidden;\n }\n\n .text-input {\n @include ellipsis;\n @include text-default;\n width: auto;\n height: 1.75rem;\n min-height: $large-space;\n background: transparent;\n flex-grow: 1;\n box-shadow: none;\n\n &,\n &:hover,\n &:focus-visible {\n border: none;\n outline: none;\n }\n\n &.hide-placeholder::placeholder {\n opacity: 0;\n }\n }\n\n .list-unstyled {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0;\n margin: 0;\n overflow-y: auto;\n }\n\n ix-icon {\n position: absolute;\n top: $small-space;\n left: $small-space;\n }\n\n ix-filter-chip {\n margin-right: $tiny-space;\n }\n\n .category-preview {\n display: flex;\n align-items: center;\n height: $large-space;\n background-color: var(--theme-bg-3);\n border-top-left-radius: $default-space;\n border-bottom-left-radius: $default-space;\n padding: $small-space;\n margin: 2px 0;\n }\n\n ul {\n height: 100%;\n }\n\n ul > li,\n input {\n padding-inline-start: 0;\n padding-top: 2px;\n padding-bottom: 2px;\n }\n\n ix-dropdown {\n min-width: 10rem !important;\n\n .dropdown-item-container {\n display: flex;\n flex-direction: column;\n\n .dropdown-item {\n @include text-default-single;\n @include ellipsis;\n @include focus-visible {\n border-color: var(--theme-color-focus-bdr);\n }\n\n height: $large-control-height;\n margin: $tiny-space $small-space;\n padding-inline: $small-space;\n border: 1px solid transparent;\n border-radius: 100rem;\n width: auto;\n justify-content: flex-start;\n flex-grow: 1;\n }\n\n .category-item {\n border-end-end-radius: 0;\n border-start-end-radius: 0;\n }\n\n .category-item-value {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n }\n\n .btn-toggle-operator {\n width: 2rem;\n height: 2rem;\n margin-inline: $small-space;\n }\n }\n\n .d-none {\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 Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { FilterState } from './filter-state';\nimport { InputState } from './input-state';\nimport { LogicalFilterOperator } from './logical-filter-operator';\n\n@Component({\n tag: 'ix-category-filter',\n styleUrl: 'category-filter.scss',\n shadow: true,\n})\nexport class CategoryFilter {\n private readonly ID_CUSTOM_FILTER_VALUE = 'CW_CUSTOM_FILTER_VALUE';\n\n @State() showDropdown: boolean;\n @State() private textInput?: HTMLInputElement;\n private formElement?: HTMLFormElement;\n private isScrollStateDirty: boolean;\n\n @Element() hostElement: HTMLIxCategoryFilterElement;\n\n @State() hasFocus: boolean;\n @State() categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n @State() inputValue: string;\n @State() category: string;\n @State() filterTokens: Array<{\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }> = [];\n\n /\n If true the filter will be in disabled state\n /\n @Prop() disabled = false;\n\n /\n If true the filter will be in readonly mode\n /\n @Prop() readonly = false;\n\n /\n A set of search criteria to populate the component with.\n /\n @Prop() filterState: FilterState;\n\n /\n Placeholder text to be displayed in an empty input field.\n /\n @Prop() placeholder: string;\n\n /\n Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.\n * Each ID maps to an object with a label and an array of options to select from.\n /\n @Prop() categories: {\n [id: string]: {\n label: string;\n options: string[];\n };\n };\n\n /\n In certain use cases some categories may not be available for selection anymore.\n * To allow proper display of set filters with these categories this ID to label mapping can be populated.\n \n Configuration object hash used to supply labels to the filter chips in the input field.\n * Each ID maps to a string representing the label to display.\n /\n @Prop() nonSelectableCategories?: {\n [id: string]: string;\n } = {};\n\n /\n A list of strings that will be supplied as typeahead suggestions not tied to any categories.\n /\n @Prop() suggestions: string[];\n\n /\n The icon next to the actual text input\n * Defaults to 'search'\n /\n @Prop() icon = 'search';\n\n /\n Allows to hide the icon inside the text input.\n * Defaults to false\n /\n @Prop() hideIcon: boolean;\n\n /\n If set categories will always be filtered via the respective logical operator.\n * Toggling of the operator will not be available to the user.\n \n @since 2.2.0\n /\n @Prop() staticOperator?: LogicalFilterOperator;\n\n /\n If set to true allows that a single category can be set more than once.\n * An already set category will not appear in the category dropdown if set to false.\n \n Defaults to true\n /\n @Prop() repeatCategories = true;\n\n /\n @internal For debugging purposes only!\n /\n @Prop() tmpDisableScrollIntoView = true;\n\n /\n i18n\n /\n @Prop() labelCategories = 'Categories';\n\n /\n i18n\n /\n @Prop() i18nPlainText = 'Filter by text';\n\n /\n Event dispatched whenever the a category gets selected in the dropdown\n /\n @Event() categoryChanged: EventEmitter<string>;\n\n /\n Event dispatched whenever the text input changes.\n /\n @Event() inputChanged: EventEmitter<InputState>;\n\n /\n Event dispatched whenever the filter state changes.\n */\n @Event() filterChanged: EventEmitter<FilterState>;\n\n get dropdown() {\n return this.hostElement.shadowRoot.querySelector('ix-dropdown');\n }\n\n @Watch('filterState')\n watchFilterState(newValue) {\n this.setFilterState(newValue);\n }\n\n componentDidLoad() {\n if (this.filterState !== undefined) {\n setTimeout(() => this.setFilterState(this.filterState));\n }\n\n this.hostElement?.addEventListener(\n 'keydown',\n this.handleFormElementKeyDown.bind(this)\n );\n\n this.formElement?.addEventListener('submit', (e) => e.preventDefault());\n\n if (this.textInput == null) {\n console.warn(\n 'ix-category-filter - unable to add event listeners to native input element'\n );\n return;\n }\n\n this.textInput.addEventListener('focusin', () => {\n this.hasFocus = true;\n });\n this.textInput.addEventListener('focusout', () => (this.hasFocus = false));\n this.textInput.addEventListener('input', () => {\n this.inputValue = this.textInput.value;\n const inputState = new InputState(this.inputValue, this.category);\n this.inputChanged.emit(inputState);\n\n if (!this.dropdown.show) {\n this.openDropdown();\n }\n });\n this.textInput.addEventListener(\n 'keydown',\n this.handleInputElementKeyDown.bind(this)\n );\n }\n\n private setFilterState(state: FilterState) {\n this.filterTokens = [];\n\n for (const token of state.tokens) {\n this.addToken(\n token,\n this.ID_CUSTOM_FILTER_VALUE,\n this.categoryLogicalOperator,\n false\n );\n }\n\n for (const category of state.categories) {\n this.addToken(category.value, category.id, category.operator, false);\n }\n\n this.emitFilterEvent();\n }\n\n private closeDropdown() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.dropdown.show = false;\n }\n\n private openDropdown() {\n if (this.disabled \|\| this.readonly) {\n return;\n }\n\n this.dropdown.show = true;\n }\n\n private handleFormElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'Enter':\n case 'NumpadEnter':\n if (!document.activeElement.classList.contains('dropdown-item')) {\n return;\n }\n\n const token = document.activeElement.getAttribute('data-id');\n\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n this.addToken(token, this.category);\n } else if (\n document.activeElement.classList.contains('category-item-id')\n ) {\n this.selectCategory(token);\n }\n } else {\n this.addToken(token);\n }\n\n e.preventDefault();\n break;\n\n case 'ArrowUp':\n this.focusPreviousItem();\n e.preventDefault();\n break;\n\n case 'ArrowDown':\n this.showDropdown = true;\n this.focusNextItem();\n e.preventDefault();\n break;\n\n case 'Escape':\n this.closeDropdown();\n break;\n }\n }\n\n private focusPreviousItem() {\n const sibling = document.activeElement.previousSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private focusNextItem() {\n const sibling = document.activeElement.nextSibling;\n if (sibling instanceof HTMLElement) {\n sibling.focus();\n }\n }\n\n private handleInputElementKeyDown(e: KeyboardEvent) {\n switch (e.code) {\n case 'ArrowDown':\n const selector = `.category-item-${\n this.category !== undefined ? 'value' : 'id'\n }`;\n let item = this.hostElement.shadowRoot.querySelector(selector);\n\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n } else if (this.suggestions?.length) {\n item = this.hostElement.shadowRoot.querySelector('.category-item');\n if (item instanceof HTMLElement) {\n item.focus();\n e.stopPropagation();\n }\n }\n break;\n\n case 'Backspace':\n if (this.textInput.value !== '') {\n return;\n }\n\n if (this.category !== undefined) {\n this.category = undefined;\n return;\n }\n\n const tokenCount = this.filterTokens.length;\n if (tokenCount > 0) {\n this.removeToken(tokenCount - 1);\n }\n break;\n\n case 'Enter':\n case 'NumpadEnter':\n this.addToken(this.inputValue, this.category);\n e.preventDefault();\n break;\n }\n }\n\n private emitFilterEvent() {\n const tokens = this.filterTokens\n .filter((item) => item.id === this.ID_CUSTOM_FILTER_VALUE)\n .map((item) => item.value);\n const categories = this.filterTokens.filter(\n (item) => item.id !== this.ID_CUSTOM_FILTER_VALUE\n );\n const filterState: FilterState = {\n tokens,\n categories,\n };\n\n this.filterChanged.emit(filterState);\n }\n\n private addToken(\n token: string,\n category: string = this.ID_CUSTOM_FILTER_VALUE,\n operator = this.categoryLogicalOperator,\n emitEvent = true\n ) {\n if (token === undefined \|\| token === null) {\n return;\n }\n\n const newToken = token.trim();\n\n if (newToken === '') {\n return;\n }\n\n if (this.hasToken(newToken)) {\n return;\n }\n\n const pair = { id: category, value: newToken, operator };\n this.filterTokens = [...this.filterTokens, pair];\n this.textInput.value = '';\n this.inputValue = '';\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n\n if (this.category !== undefined) {\n this.category = undefined;\n }\n\n this.isScrollStateDirty = true;\n\n this.textInput.focus();\n\n if (emitEvent) {\n this.emitFilterEvent();\n }\n }\n\n private removeToken(index: number) {\n this.filterTokens = this.filterTokens.filter((_, i) => i !== index);\n this.emitFilterEvent();\n }\n\n private getCategoryIds() {\n const ids = [];\n for (const id in this.categories) {\n if (Object.prototype.hasOwnProperty.call(this.categories, id)) {\n ids.push(id);\n }\n }\n\n return ids;\n }\n\n private selectCategory(category: string) {\n this.category = category;\n this.textInput.value = '';\n this.inputValue = '';\n this.textInput.focus();\n this.categoryChanged.emit(category);\n }\n\n private resetFilter(e: Event) {\n e.stopPropagation();\n this.closeDropdown();\n this.filterTokens = [];\n this.emitFilterEvent();\n }\n\n private filterMultiples(value: string) {\n if (this.repeatCategories) {\n return true;\n }\n\n const isCategoryAlreadySet = this.filterTokens.find(\n (token) => token.id === value\n );\n\n return !isCategoryAlreadySet;\n }\n\n private hasToken(token: string) {\n return this.filterTokens.some((filterToken) => {\n const hasSameValue = filterToken.value === token;\n\n if (!hasSameValue) {\n return false;\n }\n\n if (this.category !== undefined) {\n return this.category === filterToken.id;\n }\n\n if (filterToken.id) {\n return filterToken.id === this.ID_CUSTOM_FILTER_VALUE;\n }\n\n return hasSameValue;\n });\n }\n\n private filterDuplicateTokens(value: string) {\n return !this.hasToken(value);\n }\n\n private filterByInput(value: string) {\n if (this.inputValue === undefined \|\| this.inputValue === '') {\n return true;\n }\n\n return value.toLowerCase().indexOf(this.inputValue.toLowerCase()) !== -1;\n }\n\n private toggleCategoryOperator() {\n switch (this.categoryLogicalOperator) {\n case LogicalFilterOperator.EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.NOT_EQUAL;\n break;\n\n case LogicalFilterOperator.NOT_EQUAL:\n this.categoryLogicalOperator = LogicalFilterOperator.EQUAL;\n break;\n }\n }\n\n private getFilterChipLabel(value: {\n id: string;\n value: string;\n operator: LogicalFilterOperator;\n }): string {\n if (value.id === this.ID_CUSTOM_FILTER_VALUE) {\n return value.value;\n }\n\n const operatorString =\n value.operator === LogicalFilterOperator.EQUAL ? '=' : '!=';\n const label =\n this.categories[value.id]?.label ??\n this.nonSelectableCategories[value.id] ??\n value.id;\n\n return `${label} ${operatorString} ${value.value}`;\n }\n\n private getFilteredSuggestions() {\n if (!this.suggestions?.length) {\n return [];\n }\n\n return this.suggestions\n ?.filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value));\n }\n\n private hasCategorySelection() {\n return this.categories !== undefined;\n }\n\n private renderPlainSuggestions() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getFilteredSuggestions().map((suggestion) => (\n <button\n class=\"dropdown-item\"\n data-id={suggestion}\n onClick={() => this.addToken(suggestion)}\n key={suggestion}\n title={suggestion}\n >\n {suggestion}\n </button>\n ))}\n </div>\n );\n }\n\n private renderOperatorButton() {\n if (this.staticOperator) {\n return '';\n }\n\n const params: BaseButtonProps = {\n type: 'button',\n variant: 'secondary',\n outline: false,\n ghost: true,\n iconOnly: true,\n iconOval: false,\n selected: false,\n disabled: this.disabled \|\| this.staticOperator !== undefined,\n loading: false,\n icon: '',\n onClick: (e: Event) => {\n e.stopPropagation();\n this.toggleCategoryOperator();\n },\n extraClasses: {\n 'btn-icon-32': true,\n 'btn-toggle-operator': true,\n },\n };\n\n return (\n <BaseButton {...params}>\n {this.categoryLogicalOperator === LogicalFilterOperator.NOT_EQUAL\n ? '='\n : '!='}\n </BaseButton>\n );\n }\n\n private getFilterOperatorString() {\n let operator: LogicalFilterOperator;\n if (this.staticOperator !== undefined) {\n operator = this.staticOperator;\n } else {\n operator = this.categoryLogicalOperator;\n }\n return `${operator === LogicalFilterOperator.EQUAL ? '=' : '!='} `;\n }\n\n private renderCategoryValues() {\n return (\n <div class=\"dropdown-item-container\">\n {this.renderOperatorButton()}\n <div class=\"dropdown-header\">\n {this.categories[this.category]?.label}\n </div>\n {this.categories[this.category]?.options\n .filter((value) => this.filterByInput(value))\n .filter((value) => this.filterDuplicateTokens(value))\n .map((id) => (\n <button\n class=\"dropdown-item category-item-value\"\n data-id={id}\n title={id}\n key={id}\n onClick={(e) => {\n e.preventDefault();\n this.addToken(id, this.category);\n }}\n >\n {`${this.getFilterOperatorString()} ${id}`}\n </button>\n ))}\n </div>\n );\n }\n\n private renderDropdownContent() {\n if (this.hasCategorySelection()) {\n if (this.category !== undefined) {\n return this.renderCategoryValues();\n } else {\n return this.renderCategorySelection();\n }\n } else return this.renderPlainSuggestions();\n }\n\n private renderCategorySelection() {\n return (\n <div class=\"dropdown-item-container\">\n {this.getCategoryIds()\n ?.filter((id) => this.filterByInput(this.categories[id].label))\n .filter((id) => this.filterMultiples(id))\n .map((id) => (\n <button\n class=\"dropdown-item category-item category-item-id\"\n data-id={id}\n title={this.categories[id].label}\n key={id}\n onClick={(e) => {\n e.preventDefault();\n this.selectCategory(id);\n }}\n tabindex=\"0\"\n >\n {this.categories[id]?.label}\n </button>\n ))}\n </div>\n );\n }\n\n private getDropdownHeader() {\n if (this.categories !== undefined) {\n if (this.category !== undefined) {\n return null;\n } else {\n return this.labelCategories;\n }\n }\n\n return this.i18nPlainText;\n }\n\n componentDidRender() {\n if (this.isScrollStateDirty) {\n if (!this.tmpDisableScrollIntoView) {\n this.textInput.scrollIntoView();\n }\n this.isScrollStateDirty = false;\n }\n }\n\n private getResetButton() {\n return (\n <ix-icon-button\n onClick={(e) => this.resetFilter(e)}\n class={{\n 'reset-button': true,\n 'hide-reset-button':\n !this.filterTokens.length && this.category === undefined,\n }}\n ghost\n oval\n icon={'clear'}\n size=\"16\"\n ></ix-icon-button>\n );\n }\n\n private getIconColor() {\n if (this.disabled) {\n return 'color-componentn-1';\n }\n\n if (this.readonly) {\n return 'color-std-txt';\n }\n\n return 'color-primary';\n }\n\n render() {\n return (\n <Host>\n <form ref={(el) => (this.formElement = el)}>\n <div\n read-only={this.readonly}\n class={{\n 'input-container': true,\n disabled: this.disabled,\n focus: this.hasFocus,\n readonly: this.readonly,\n 'no-icon': this.hideIcon,\n }}\n >\n <ix-icon\n color={this.getIconColor()}\n class={{ 'd-none': this.hideIcon }}\n name={this.icon}\n size=\"16\"\n ></ix-icon>\n <div class=\"token-container\">\n <ul class=\"list-unstyled\">\n {this.filterTokens.map((value, index) => (\n <li\n key={value.toString()}\n class={{\n animate__animated: true,\n animate__fadein: true,\n }}\n >\n <ix-filter-chip\n disabled={this.disabled}\n readonly={this.readonly}\n onClick={(e) => e.stopPropagation()}\n onCloseClick={() => this.removeToken(index)}\n >\n {this.getFilterChipLabel(value)}\n </ix-filter-chip>\n </li>\n ))}\n {this.categories === undefined ? (\n ''\n ) : (\n <li\n class={{\n 'category-preview': true,\n 'd-none': this.category === undefined,\n }}\n >\n {this.categories[this.category]?.label}\n </li>\n )}\n <input\n class={{\n 'text-input': true,\n 'hide-placeholder':\n this.readonly \|\|\n this.disabled \|\|\n this.category !== undefined,\n }}\n autocomplete=\"off\"\n name=\"category-filter-input\"\n disabled={this.disabled}\n readonly={this.readonly}\n ref={(el) => (this.textInput = el)}\n type=\"text\"\n placeholder={this.placeholder}\n ></input>\n </ul>\n </div>\n {!this.readonly && !this.disabled && this.getResetButton()}\n </div>\n </form>\n\n {this.disabled \|\| this.readonly ? (\n ''\n ) : (\n <ix-dropdown\n show={this.showDropdown}\n closeBehavior=\"outside\"\n offset={{ mainAxis: 2 }}\n anchor={this.textInput}\n trigger={this.hostElement}\n header={this.getDropdownHeader()}\n >\n {this.renderDropdownContent()}\n </ix-dropdown>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-8629db91.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,c as e,h as i,H as s}from"./p-f87cd962.js";import{a as o}from"./p-71206084.js";const r=":host{top:0;right:0;box-shadow:var(--theme-box-shadow-level-3);visibility:hidden;display:flex;position:absolute;flex-flow:column nowrap;justify-content:flex-start;align-items:center;max-height:100vh;min-height:1.5rem;background-color:var(--theme-color-1);border-radius:0.25rem;transition:all var(--theme-medium-time) ease-out}: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 .toggle{z-index:100;visibility:visible}:host .drawer-container.full-height{min-height:100%}:host .header{display:flex;position:relative;align-items:center;justify-content:flex-end;padding:0.5rem;width:100%;order:1}:host .header .header-content{flex-grow:1;margin-right:1rem}:host .content{position:relative;flex:1;flex-grow:1;order:2;height:100%;width:100%;overflow-y:auto}:host(.toggle){visibility:visible}";const a=r;const h=class{constructor(i){t(this,i);this.open=e(this,"open",7);this.drawerClose=e(this,"drawerClose",7);this.callback=this.clickedOutside.bind(this);this.show=false;this.closeOnClickOutside=true;this.fullHeight=false;this.minWidth=16;this.maxWidth=28;this.width=this.minWidth}onShowChanged(t){this.show=t!==undefined?t:!this.show;this.toggleDrawer(this.show)}async toggleDrawer(t){this.show=t!==undefined?t:!this.show;if(t){this.open.emit();this.slideInRight(this.divElement);setTimeout((()=>{window.addEventListener("mousedown",this.callback)}),300)}else{this.drawerClose.emit();this.slideOutRight(this.divElement);window.removeEventListener("mousedown",this.callback)}return Promise.resolve()}onCloseClicked(){this.show=false}clickedOutside(t){if(!this.closeOnClickOutside){return}const e=t.target;const i=e.closest("#div-container");const s=e.closest("#drawer-btn");if(t.target.type!=="button"&&i!==this.divElement&&e!==s){this.show=false}}slideOutRight(t){o({targets:t,duration:h.duration,translateX:[0,"16rem"],opacity:[1,0],easing:"easeInSine",complete:()=>{t.classList.add("d-none")}})}slideInRight(t){o({targets:t,duration:h.duration,translateX:["16rem",0],opacity:[0,1],easing:"easeOutSine",begin:()=>{t.classList.remove("d-none")}})}componentDidLoad(){this.onShowChanged(this.show)}render(){return i(s,{key:"4cb0a06786c80cd977ebfbbfef6c23d6e7926d86",class:{"drawer-container":true,toggle:this.show,"full-height":this.fullHeight,"d-none":true},style:{width:this.width==="auto"?this.width:`${this.width}rem`,"min-width":`${this.minWidth}rem`,"max-width":`${this.maxWidth}rem`},ref:t=>this.divElement=t,"data-testid":"container",id:"div-container"},i("div",{key:"63c8952c342a1d412237ab82f96ac063c0a30158",class:"header"},i("div",{key:"4a8525053f3954b3b83dac4f8b012f005e9725b7",class:"header-content"},i("slot",{key:"55b887208a3bdc445950c2e5f153cfaa1ba89068",name:"header"})),i("ix-icon-button",{key:"84b5b11f21d4d768c0118450147bf74d6e0a1400",class:"close-button",icon:"close",size:"24",ghost:true,onClick:()=>this.onCloseClicked(),"data-testid":"close-button"})),i("div",{key:"00079cfb6504ed6fa44c23209787add116e72591",class:"content"},i("slot",{key:"3de3610ac265b9eda7d69eedf28494b47861c7e3"})))}static get watchers(){return{show:["onShowChanged"]}}};h.duration=300;h.style=a;export{h as ix_drawer};
2	+ //# sourceMappingURL=p-8629db91.entry.js.map

package/dist/siemens-ix/{p-f23e0121.entry.js.map → p-8629db91.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["drawerCss","IxDrawerStyle0","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","componentDidLoad","render","h","Host","key","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.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@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n @include ix-component;\n\n top: 0;\n right: 0;\n @include box-shadow(3);\n\n visibility: hidden;\n\n display: flex;\n position: absolute;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: center;\n\n max-height: 100vh;\n min-height: $large-space;\n background-color: var(--theme-color-1);\n border-radius: $default-border-radius;\n\n transition: all var(--theme-medium-time) ease-out;\n\n .toggle {\n z-index: 100;\n visibility: visible;\n }\n\n .drawer-container.full-height {\n min-height: 100%;\n }\n\n .header {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-end;\n padding: 0.5rem;\n width: 100%;\n order: 1;\n\n .header-content {\n flex-grow: 1;\n margin-right: $default-space;\n }\n }\n\n .content {\n position: relative;\n flex: 1;\n flex-grow: 1;\n order: 2;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n }\n}\n\n:host(.toggle) {\n visibility: visible;\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 Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n Fire event after drawer is open\n /\n @Event() open: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose: EventEmitter;\n\n private static duration = 300;\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @Watch('show')\n onShowChanged(newValue: boolean) {\n this.show = newValue !== undefined ? newValue : !this.show;\n this.toggleDrawer(this.show);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n this.show = show !== undefined ? show : !this.show;\n\n if (show) {\n this.open.emit();\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, 300);\n } else {\n this.drawerClose.emit();\n this.slideOutRight(this.divElement);\n window.removeEventListener('mousedown', this.callback);\n }\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.show = false;\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private slideOutRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: [0, '16rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: ['16rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n el.classList.remove('d-none');\n },\n });\n }\n\n componentDidLoad() {\n this.onShowChanged(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n toggle: this.show,\n 'full-height': this.fullHeight,\n 'd-none': true,\n }}\n style={{\n width: this.width === 'auto' ? this.width : `${this.width}rem`,\n 'min-width': `${this.minWidth}rem`,\n 'max-width': `${this.maxWidth}rem`,\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n ></ix-icon-button>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,~~k0CAClB~~,MAAAC,EAAeD,E,MCyBFE,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtC,aAAAC,CAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzB,kBAAME,CAAaF,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKU,KAAKC,OACVX,KAAKY,aAAaZ,KAAKa,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAahB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKiB,YAAYN,OACjBX,KAAKkB,cAAclB,KAAKa,YACxBE,OAAOI,oBAAoB,YAAanB,KAAKC,S,CAG/C,OAAOmB,QAAQC,S,CAGT,cAAAC,GACNtB,KAAKO,KAAO,K,CAGN,cAAAL,CAAeqB,GACrB,IAAKvB,KAAKwB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB1B,KAAKa,YACxBY,IAAWG,EACX,CACA5B,KAAKO,KAAO,K,EAIR,aAAAW,CAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB,YAAA3B,CAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnC,gBAAAC,GACE1C,KAAKK,cAAcL,KAAKO,K,CAG1B,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpBC,OAAQhD,KAAKO,KACb,cAAeP,KAAKiD,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOnD,KAAKmD,QAAU,OAASnD,KAAKmD,MAAQ,GAAGnD,KAAKmD,WACpD,YAAa,GAAGnD,KAAKI,cACrB,YAAa,GAAGJ,KAAKoD,eAEvBC,IAAMvB,GAAQ9B,KAAKa,WAAaiB,EAAkB,cACtC,YACZwB,GAAG,iBAEHV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,kBAAAE,IAAA,2CACEC,MAAM,eACNS,KAAM,QACNC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAM3D,KAAKsB,iBAAgB,cACxB,kBAGhBsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACTH,EAAA,QAAAE,IAAA,8C,wDArHO/C,EAAAkC,SAAW,I"}
1	+ {"version":3,"names":["drawerCss","IxDrawerStyle0","Drawer","this","callback","clickedOutside","bind","minWidth","onShowChanged","newValue","show","undefined","toggleDrawer","open","emit","slideInRight","divElement","setTimeout","window","addEventListener","drawerClose","slideOutRight","removeEventListener","Promise","resolve","onCloseClicked","evt","closeOnClickOutside","target","closestElement","closest","btn","type","el","anime","targets","duration","translateX","opacity","easing","complete","classList","add","begin","remove","componentDidLoad","render","h","Host","key","class","toggle","fullHeight","style","width","maxWidth","ref","id","name","icon","size","ghost","onClick"],"sources":["src/components/drawer/drawer.scss?tag=ix-drawer&encapsulation=shadow","src/components/drawer/drawer.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@import 'mixins/shadows';\n@import 'common-variables';\n\n:host {\n @include ix-component;\n\n top: 0;\n right: 0;\n @include box-shadow(3);\n\n visibility: hidden;\n\n display: flex;\n position: absolute;\n flex-flow: column nowrap;\n justify-content: flex-start;\n align-items: center;\n\n max-height: 100vh;\n min-height: $large-space;\n background-color: var(--theme-color-1);\n border-radius: $default-border-radius;\n\n transition: all var(--theme-medium-time) ease-out;\n\n .toggle {\n z-index: 100;\n visibility: visible;\n }\n\n .drawer-container.full-height {\n min-height: 100%;\n }\n\n .header {\n display: flex;\n position: relative;\n align-items: center;\n justify-content: flex-end;\n padding: 0.5rem;\n width: 100%;\n order: 1;\n\n .header-content {\n flex-grow: 1;\n margin-right: $default-space;\n }\n }\n\n .content {\n position: relative;\n flex: 1;\n flex-grow: 1;\n order: 2;\n height: 100%;\n width: 100%;\n overflow-y: auto;\n }\n}\n\n:host(.toggle) {\n visibility: visible;\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 Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n Watch,\n} from '@stencil/core';\nimport anime from 'animejs';\n\n@Component({\n tag: 'ix-drawer',\n styleUrl: 'drawer.scss',\n shadow: true,\n})\nexport class Drawer {\n /\n Show or hide the drawer\n /\n @Prop({ mutable: true }) show = false;\n\n /\n Fired in case of an outside click during drawer showed state\n /\n @Prop() closeOnClickOutside = true;\n\n /\n Render the drawer with maximum height\n /\n @Prop() fullHeight = false;\n\n /\n Min width interpreted as REM\n /\n @Prop() minWidth = 16;\n\n /\n Max width interpreted as REM\n /\n @Prop() maxWidth = 28;\n\n /\n Width interpreted as REM if not set to 'auto'\n /\n @Prop() width: number \| 'auto' = this.minWidth;\n\n /\n Fire event after drawer is open\n /\n @Event() open: EventEmitter;\n\n /\n Fire event after drawer is close\n /\n @Event() drawerClose: EventEmitter;\n\n private static duration = 300;\n private callback = this.clickedOutside.bind(this);\n private divElement?: HTMLElement;\n\n @Watch('show')\n onShowChanged(newValue: boolean) {\n this.show = newValue !== undefined ? newValue : !this.show;\n this.toggleDrawer(this.show);\n }\n\n /\n Toggle or define show state of drawer\n * @param show Overwrite toggle state with boolean\n */\n @Method()\n async toggleDrawer(show?: boolean): Promise<void> {\n this.show = show !== undefined ? show : !this.show;\n\n if (show) {\n this.open.emit();\n this.slideInRight(this.divElement);\n setTimeout(() => {\n window.addEventListener('mousedown', this.callback);\n }, 300);\n } else {\n this.drawerClose.emit();\n this.slideOutRight(this.divElement);\n window.removeEventListener('mousedown', this.callback);\n }\n\n return Promise.resolve();\n }\n\n private onCloseClicked() {\n this.show = false;\n }\n\n private clickedOutside(evt: any) {\n if (!this.closeOnClickOutside) {\n return;\n }\n\n const target = evt.target;\n const closestElement = target.closest('#div-container');\n const btn = target.closest('#drawer-btn');\n\n if (\n evt.target.type !== 'button' &&\n closestElement !== this.divElement &&\n target !== btn\n ) {\n this.show = false;\n }\n }\n\n private slideOutRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: [0, '16rem'],\n opacity: [1, 0],\n easing: 'easeInSine',\n complete: () => {\n el.classList.add('d-none');\n },\n });\n }\n\n private slideInRight(el: HTMLElement) {\n anime({\n targets: el,\n duration: Drawer.duration,\n translateX: ['16rem', 0],\n opacity: [0, 1],\n easing: 'easeOutSine',\n begin: () => {\n el.classList.remove('d-none');\n },\n });\n }\n\n componentDidLoad() {\n this.onShowChanged(this.show);\n }\n\n render() {\n return (\n <Host\n class={{\n 'drawer-container': true,\n toggle: this.show,\n 'full-height': this.fullHeight,\n 'd-none': true,\n }}\n style={{\n width: this.width === 'auto' ? this.width : `${this.width}rem`,\n 'min-width': `${this.minWidth}rem`,\n 'max-width': `${this.maxWidth}rem`,\n }}\n ref={(el) => (this.divElement = el as HTMLElement)}\n data-testid=\"container\"\n id=\"div-container\"\n >\n <div class=\"header\">\n <div class=\"header-content\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n class=\"close-button\"\n icon={'close'}\n size=\"24\"\n ghost\n onClick={() => this.onCloseClicked()}\n data-testid=\"close-button\"\n ></ix-icon-button>\n </div>\n <div class=\"content\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,89CAClB,MAAAC,EAAeD,E,MCyBFE,EAAM,M,6FA0CTC,KAAAC,SAAWD,KAAKE,eAAeC,KAAKH,M,UAtCZ,M,yBAKF,K,gBAKT,M,cAKF,G,cAKA,G,WAKcA,KAAKI,Q,CAiBtC,aAAAC,CAAcC,GACZN,KAAKO,KAAOD,IAAaE,UAAYF,GAAYN,KAAKO,KACtDP,KAAKS,aAAaT,KAAKO,K,CAQzB,kBAAME,CAAaF,GACjBP,KAAKO,KAAOA,IAASC,UAAYD,GAAQP,KAAKO,KAE9C,GAAIA,EAAM,CACRP,KAAKU,KAAKC,OACVX,KAAKY,aAAaZ,KAAKa,YACvBC,YAAW,KACTC,OAAOC,iBAAiB,YAAahB,KAAKC,SAAS,GAClD,I,KACE,CACLD,KAAKiB,YAAYN,OACjBX,KAAKkB,cAAclB,KAAKa,YACxBE,OAAOI,oBAAoB,YAAanB,KAAKC,S,CAG/C,OAAOmB,QAAQC,S,CAGT,cAAAC,GACNtB,KAAKO,KAAO,K,CAGN,cAAAL,CAAeqB,GACrB,IAAKvB,KAAKwB,oBAAqB,CAC7B,M,CAGF,MAAMC,EAASF,EAAIE,OACnB,MAAMC,EAAiBD,EAAOE,QAAQ,kBACtC,MAAMC,EAAMH,EAAOE,QAAQ,eAE3B,GACEJ,EAAIE,OAAOI,OAAS,UACpBH,IAAmB1B,KAAKa,YACxBY,IAAWG,EACX,CACA5B,KAAKO,KAAO,K,EAIR,aAAAW,CAAcY,GACpBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,EAAG,SAChBC,QAAS,CAAC,EAAG,GACbC,OAAQ,aACRC,SAAU,KACRP,EAAGQ,UAAUC,IAAI,SAAS,G,CAKxB,YAAA3B,CAAakB,GACnBC,EAAM,CACJC,QAASF,EACTG,SAAUlC,EAAOkC,SACjBC,WAAY,CAAC,QAAS,GACtBC,QAAS,CAAC,EAAG,GACbC,OAAQ,cACRI,MAAO,KACLV,EAAGQ,UAAUG,OAAO,SAAS,G,CAKnC,gBAAAC,GACE1C,KAAKK,cAAcL,KAAKO,K,CAG1B,MAAAoC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,mBAAoB,KACpBC,OAAQhD,KAAKO,KACb,cAAeP,KAAKiD,WACpB,SAAU,MAEZC,MAAO,CACLC,MAAOnD,KAAKmD,QAAU,OAASnD,KAAKmD,MAAQ,GAAGnD,KAAKmD,WACpD,YAAa,GAAGnD,KAAKI,cACrB,YAAa,GAAGJ,KAAKoD,eAEvBC,IAAMvB,GAAQ9B,KAAKa,WAAaiB,EAAkB,cACtC,YACZwB,GAAG,iBAEHV,EAAA,OAAAE,IAAA,2CAAKC,MAAM,UACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBACTH,EAAA,QAAAE,IAAA,2CAAMS,KAAK,YAEbX,EAAA,kBAAAE,IAAA,2CACEC,MAAM,eACNS,KAAM,QACNC,KAAK,KACLC,MAAK,KACLC,QAAS,IAAM3D,KAAKsB,iBAAgB,cACxB,kBAGhBsB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACTH,EAAA,QAAAE,IAAA,8C,wDArHO/C,EAAAkC,SAAW,I"}

package/dist/siemens-ix/p-87e692d9.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as e,H as t}from"./p-f87cd962.js";const n=".sc-ix-playground-internal-h{display:block;position:relative;width:100vw;height:100vh;padding:0rem 0rem 0rem 0rem}";const s=n;const a=class{constructor(e){r(this,e)}render(){return e(t,{key:"cb88d03e375d222d5903d13ca1fc154d9af86898"})}};a.style=s;export{a as ix_playground_internal};
2	+ //# sourceMappingURL=p-87e692d9.entry.js.map

package/dist/siemens-ix/p-882a0233.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r,h as o,H as e}from"./p-f87cd962.js";const t=":host{display:block;position:relative;width:100%;border-bottom:0.0625rem solid var(--theme-color-x-weak-bdr);margin:0.25rem 0px}";const s=t;const a=class{constructor(o){r(this,o)}render(){return o(e,{key:"b940598630bbccaae3d37bfb9fef71c35e777a14"})}};a.style=s;export{a as ix_divider};
2	+ //# sourceMappingURL=p-882a0233.entry.js.map

package/dist/siemens-ix/{p-5d582c48.entry.js.map → p-882a0233.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["dividerCss","IxDividerStyle0","Divider","render","h","Host","key"],"sources":["src/components/divider/divider.scss?tag=ix-divider&encapsulation=shadow","src/components/divider/divider.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: block;\n position: relative;\n\n width: 100%;\n border-bottom: 0.0625rem solid var(--theme-color-x-weak-bdr);\n margin: 0.25rem 0px;\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, h, Host } from '@stencil/core';\n\n/\n @since 1.4.0\n */\n@Component({\n tag: 'ix-divider',\n styleUrl: 'divider.scss',\n shadow: true,\n})\nexport class Divider {\n render() {\n return <Host></Host>;\n }\n}\n"],"mappings":"~~kDAAA~~,MAAMA,EAAa,mIACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,M,yBAClB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C"}
1	+ {"version":3,"names":["dividerCss","IxDividerStyle0","Divider","render","h","Host","key"],"sources":["src/components/divider/divider.scss?tag=ix-divider&encapsulation=shadow","src/components/divider/divider.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: block;\n position: relative;\n\n width: 100%;\n border-bottom: 0.0625rem solid var(--theme-color-x-weak-bdr);\n margin: 0.25rem 0px;\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, h, Host } from '@stencil/core';\n\n/\n @since 1.4.0\n */\n@Component({\n tag: 'ix-divider',\n styleUrl: 'divider.scss',\n shadow: true,\n})\nexport class Divider {\n render() {\n return <Host></Host>;\n }\n}\n"],"mappings":"6CAAA,MAAMA,EAAa,mIACnB,MAAAC,EAAeD,E,MCiBFE,EAAO,M,yBAClB,MAAAC,GACE,OAAOC,EAACC,EAAI,CAAAC,IAAA,4C"}

package/dist/siemens-ix/p-8d0758c1.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as t,h as e,H as o,g as i}from"./p-f87cd962.js";import{c as r}from"./p-e898862b.js";import{F as s}from"./p-dded1449.js";const a=".text-xs{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.625rem;font-weight:400;line-height:1.4em;color:var(--theme-color-std-text)}.text-s{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-caption-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.75rem;font-weight:700;line-height:1em;color:var(--theme-color-std-text)}.text-default{-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)}.text-default-single{-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.143em;color:var(--theme-color-std-text)}.text-default-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.429em;color:var(--theme-color-std-text)}.text-default-title-single{-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)}.text-l{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:400;line-height:1.25em;color:var(--theme-color-std-text)}.text-l-title{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.5em;color:var(--theme-color-std-text)}.text-l-title-single{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1rem;font-weight:700;line-height:1.25em;color:var(--theme-color-std-text)}.text-h2{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:700;line-height:1.455em;color:var(--theme-color-std-text)}.text-xl{-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text)}a{color:var(--theme-color-primary)}@keyframes flip-animation{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}51%{transform:rotateY(270deg)}100%{transform:rotateY(360deg)}}:host{display:flex;flex-direction:column;perspective:1000px}: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 .flip-tile-header{display:flex;align-items:center;height:2.5rem;padding:0 0.5rem 0 1rem}:host .flip-tile-header .header-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1;min-width:0}:host .content-container{flex-grow:1;margin:1rem}:host .flip-tile-container{display:flex;flex-direction:column;height:100%;background-color:var(--theme-blind-base--background);border:solid 1px var(--theme-blind-base--border-color);border-radius:var(--theme-flip-tile--border-radius) var(--theme-flip-tile--border-radius) 0 0;transform-style:preserve-3d}:host .flip-tile-container.flip-animation-active{animation:flip-animation 300ms, ease-in-out}:host .flip-tile-container .footer{display:flex;height:3rem;align-items:center;justify-content:center;padding:0 0.5rem;color:var(--theme-flip-footer--color);background-color:var(--theme-blind-base--background)}:host .flip-tile-container .footer :first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:100%}:host .flip-tile-container ::slotted(){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;align-items:center;min-width:0}:host .flip-tile-container.primary{border-color:var(--theme-color-primary)}:host .flip-tile-container.primary .footer{background-color:var(--theme-color-primary);color:var(--theme-color-primary--contrast)}:host .flip-tile-container.info{border-color:var(--theme-color-info)}:host .flip-tile-container.info .footer{background-color:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host .flip-tile-container.warning{border-color:var(--theme-color-warning)}:host .flip-tile-container.warning .footer{background-color:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host .flip-tile-container.alarm{border-color:var(--theme-color-alarm)}:host .flip-tile-container.alarm .footer{background-color:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host:hover .flip-tile-container .footer ix-icon{color:var(--theme-color-std-text)}";const n=a;const l=class{constructor(e){t(this,e);this.ANIMATION_DURATION=150;this.state=undefined;this.height=15.125;this.width=16;this.index=0;this.isFlipAnimationActive=undefined}componentDidLoad(){this.observer=r((()=>this.updateContentItems()));this.observer.observe(this.hostElement,{childList:true})}componentWillLoad(){this.updateContentItems();this.updateContentVisibility(this.index)}disconnectedCallback(){if(this.observer){this.observer.disconnect()}}updateContentItems(){this.contentItems=Array.from(this.hostElement.querySelectorAll("ix-flip-tile-content"))}updateContentVisibility(t){this.contentItems.forEach(((e,o)=>e.contentVisible=o===t))}toggleIndex(){this.doFlipAnimation()}doFlipAnimation(){this.isFlipAnimationActive=true;setTimeout((()=>{this.updateContentVisibility(this.index);if(this.index>=this.contentItems.length-1){this.index=0}else{this.index++}this.updateContentVisibility(this.index)}),this.ANIMATION_DURATION);setTimeout((()=>{this.isFlipAnimationActive=false}),2this.ANIMATION_DURATION)}render(){return e(o,{key:"6325a67810cec0daa810626fd07fdee585dff321",style:{height:`${this.height}${this.height==="auto"?"":"rem"}`,"min-height":`${this.height}${this.height==="auto"?"":"rem"}`,"max-height":`${this.height}${this.height==="auto"?"":"rem"}`,width:`${this.width}${this.width==="auto"?"":"rem"}`,"min-width":`${this.width}${this.width==="auto"?"":"rem"}`,"max-width":`${this.width}${this.width==="auto"?"":"rem"}`}},e("div",{key:"b32de5296d6f9eaa2a47d7fca8fc37ccc3038ca8",class:{"flip-tile-container":true,info:this.state===s.Info,warning:this.state===s.Warning,alarm:this.state===s.Alarm,primary:this.state===s.Primary,"flip-animation-active":this.isFlipAnimationActive}},e("div",{key:"547fd0065516281539327d61b7ba4806973b230e",class:"flip-tile-header"},e("div",{key:"6f6105b466f35d94e7d5c51e6a8d0cd9190fda90",class:"header-slot-container text-l-title"},e("slot",{key:"e0d28500f1b867e120308d8ae08d19f8e2ed62ef",name:"header"})),e("ix-icon-button",{key:"9b1115eedef1cd2b5c20322e7126d69a7ddd5367",icon:"eye",variant:"primary",ghost:true,onClick:()=>this.toggleIndex()})),e("div",{key:"208e84bf8a58d0f0d664e6afa61f4c0134c170a1",class:"content-container"},e("slot",{key:"e58477ccc1f34df0f10d34b76ebfeb8740e6a2b7"})),e("div",{key:"1d2775674ae6ccf49d45349bb092e62a4edb6839",class:{footer:true,"contrast-light":this.state===s.Warning,"contrast-dark":this.state===s.Info\|\|this.state===s.Alarm}},e("slot",{key:"0876aa784c23b91f289b9feec114d94c5860bf29",name:"footer"}))))}get hostElement(){return i(this)}};l.style=n;export{l as ix_flip_tile};
2	+ //# sourceMappingURL=p-8d0758c1.entry.js.map

package/dist/siemens-ix/{p-e0cab820.entry.js.map → p-8d0758c1.entry.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["flipTileCss","IxFlipTileStyle0","FlipTile","this","ANIMATION_DURATION","componentDidLoad","observer","createMutationObserver","updateContentItems","observe","hostElement","childList","componentWillLoad","updateContentVisibility","index","disconnectedCallback","disconnect","contentItems","Array","from","querySelectorAll","indexVisible","forEach","content","contentVisible","toggleIndex","doFlipAnimation","isFlipAnimationActive","setTimeout","length","render","h","Host","key","style","height","width","class","info","state","FlipTileState","Info","warning","Warning","alarm","Alarm","primary","Primary","name","icon","variant","ghost","onClick","footer"],"sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.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/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n 0% {\n transform: rotateY(0);\n }\n 50% {\n transform: rotateY(90deg);\n }\n 51% {\n transform: rotateY(270deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n perspective: 1000px;\n\n .flip-tile-header {\n display: flex;\n align-items: center;\n height: $large-control-height;\n padding: 0 $small-space 0 $default-space;\n\n .header-slot-container {\n @include ellipsis;\n flex-grow: 1;\n min-width: 0;\n }\n }\n\n .content-container {\n flex-grow: 1;\n margin: $default-space;\n }\n\n .flip-tile-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--theme-blind-base--background);\n border: solid 1px var(--theme-blind-base--border-color);\n border-radius: var(--theme-flip-tile--border-radius)\n var(--theme-flip-tile--border-radius) 0 0;\n transform-style: preserve-3d;\n\n &.flip-animation-active {\n @include animation(flip-animation, 2 $default-time, ease-in-out);\n }\n\n .footer {\n display: flex;\n height: 3rem;\n align-items: center;\n justify-content: center;\n padding: 0 $small-space;\n color: var(--theme-flip-footer--color);\n background-color: var(--theme-blind-base--background);\n\n :first-child {\n @include ellipsis;\n height: 100%;\n }\n }\n\n ::slotted() {\n @include ellipsis;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 0;\n }\n\n &.primary {\n border-color: var(--theme-color-primary);\n\n .footer {\n background-color: var(--theme-color-primary);\n color: var(--theme-color-primary--contrast);\n }\n }\n\n &.info {\n border-color: var(--theme-color-info);\n\n .footer {\n background-color: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n }\n }\n\n &.warning {\n border-color: var(--theme-color-warning);\n\n .footer {\n background-color: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n }\n }\n\n &.alarm {\n border-color: var(--theme-color-alarm);\n\n .footer {\n background-color: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n }\n }\n }\n\n &:hover .flip-tile-container .footer ix-icon {\n color: var(--theme-color-std-text);\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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n tag: 'ix-flip-tile',\n styleUrl: 'flip-tile.scss',\n shadow: true,\n})\nexport class FlipTile {\n @Element() hostElement!: HTMLIxFlipTileElement;\n\n /\n Variation of the Flip\n /\n @Prop() state: FlipTileState;\n\n /\n Height interpreted as REM\n * @since 1.5.0\n /\n @Prop() height: number \| 'auto' = 15.125;\n\n /\n Width interpreted as REM\n * @since 1.5.0\n /\n @Prop() width: number \| 'auto' = 16;\n\n @State() index = 0;\n @State() isFlipAnimationActive: boolean;\n\n private readonly ANIMATION_DURATION = 150;\n private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n private observer: MutationObserver;\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.updateContentItems());\n this.observer.observe(this.hostElement, {\n childList: true,\n });\n }\n\n componentWillLoad() {\n this.updateContentItems();\n this.updateContentVisibility(this.index);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n private updateContentItems() {\n this.contentItems = Array.from(\n this.hostElement.querySelectorAll('ix-flip-tile-content')\n );\n }\n\n private updateContentVisibility(indexVisible: number) {\n this.contentItems.forEach(\n (content, index) => (content.contentVisible = index === indexVisible)\n );\n }\n\n private toggleIndex() {\n this.doFlipAnimation();\n }\n\n private doFlipAnimation() {\n this.isFlipAnimationActive = true;\n\n setTimeout(() => {\n this.updateContentVisibility(this.index);\n\n if (this.index >= this.contentItems.length - 1) {\n this.index = 0;\n } else {\n this.index++;\n }\n\n this.updateContentVisibility(this.index);\n }, this.ANIMATION_DURATION);\n\n setTimeout(() => {\n this.isFlipAnimationActive = false;\n }, 2 this.ANIMATION_DURATION);\n }\n\n render() {\n return (\n <Host\n style={{\n height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n }}\n >\n <div\n class={{\n 'flip-tile-container': true,\n info: this.state === FlipTileState.Info,\n warning: this.state === FlipTileState.Warning,\n alarm: this.state === FlipTileState.Alarm,\n primary: this.state === FlipTileState.Primary,\n 'flip-animation-active': this.isFlipAnimationActive,\n }}\n >\n <div class=\"flip-tile-header\">\n <div class=\"header-slot-container text-l-title\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n icon={'eye'}\n variant=\"primary\"\n ghost\n onClick={() => this.toggleIndex()}\n ></ix-icon-button>\n </div>\n\n <div class=\"content-container\">\n <slot></slot>\n </div>\n <div\n class={{\n footer: true,\n 'contrast-light': this.state === FlipTileState.Warning,\n 'contrast-dark':\n this.state === FlipTileState.Info \|\|\n this.state === FlipTileState.Alarm,\n }}\n >\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,~~6oLACpB~~,MAAAC,EAAeD,E,MCiBFE,EAAQ,M,yBAuBFC,KAAAC,mBAAqB,I,iCAXJ,O,WAMD,G,WAEhB,E,qCAQjB,gBAAAC,GACEF,KAAKG,SAAWC,GAAuB,IAAMJ,KAAKK,uBAClDL,KAAKG,SAASG,QAAQN,KAAKO,YAAa,CACtCC,UAAW,M,CAIf,iBAAAC,GACET,KAAKK,qBACLL,KAAKU,wBAAwBV,KAAKW,M,CAGpC,oBAAAC,GACE,GAAIZ,KAAKG,SAAU,CACjBH,KAAKG,SAASU,Y,EAIV,kBAAAR,GACNL,KAAKc,aAAeC,MAAMC,KACxBhB,KAAKO,YAAYU,iBAAiB,wB,CAI9B,uBAAAP,CAAwBQ,GAC9BlB,KAAKc,aAAaK,SAChB,CAACC,EAAST,IAAWS,EAAQC,eAAiBV,IAAUO,G,CAIpD,WAAAI,GACNtB,KAAKuB,iB,CAGC,eAAAA,GACNvB,KAAKwB,sBAAwB,KAE7BC,YAAW,KACTzB,KAAKU,wBAAwBV,KAAKW,OAElC,GAAIX,KAAKW,OAASX,KAAKc,aAAaY,OAAS,EAAG,CAC9C1B,KAAKW,MAAQ,C,KACR,CACLX,KAAKW,O,CAGPX,KAAKU,wBAAwBV,KAAKW,MAAM,GACvCX,KAAKC,oBAERwB,YAAW,KACTzB,KAAKwB,sBAAwB,KAAK,GACjC,EAAIxB,KAAKC,mB,CAGd,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,OAAQ,GAAGhC,KAAKgC,SAAShC,KAAKgC,SAAW,OAAS,GAAK,QACvD,aAAc,GAAGhC,KAAKgC,SAAShC,KAAKgC,SAAW,OAAS,GAAK,QAC7D,aAAc,GAAGhC,KAAKgC,SAAShC,KAAKgC,SAAW,OAAS,GAAK,QAC7DC,MAAO,GAAGjC,KAAKiC,QAAQjC,KAAKiC,QAAU,OAAS,GAAK,QACpD,YAAa,GAAGjC,KAAKiC,QAAQjC,KAAKiC,QAAU,OAAS,GAAK,QAC1D,YAAa,GAAGjC,KAAKiC,QAAQjC,KAAKiC,QAAU,OAAS,GAAK,UAG5DL,EAAA,OAAAE,IAAA,2CACEI,MAAO,CACL,sBAAuB,KACvBC,KAAMnC,KAAKoC,QAAUC,EAAcC,KACnCC,QAASvC,KAAKoC,QAAUC,EAAcG,QACtCC,MAAOzC,KAAKoC,QAAUC,EAAcK,MACpCC,QAAS3C,KAAKoC,QAAUC,EAAcO,QACtC,wBAAyB5C,KAAKwB,wBAGhCI,EAAA,OAAAE,IAAA,2CAAKI,MAAM,oBACTN,EAAA,OAAAE,IAAA,2CAAKI,MAAM,sCACTN,EAAA,QAAAE,IAAA,2CAAMe,KAAK,YAEbjB,EAAA,kBAAAE,IAAA,2CACEgB,KAAM,MACNC,QAAQ,UACRC,MAAK,KACLC,QAAS,IAAMjD,KAAKsB,iBAIxBM,EAAA,OAAAE,IAAA,2CAAKI,MAAM,qBACTN,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CACEI,MAAO,CACLgB,OAAQ,KACR,iBAAkBlD,KAAKoC,QAAUC,EAAcG,QAC/C,gBACExC,KAAKoC,QAAUC,EAAcC,MAC7BtC,KAAKoC,QAAUC,EAAcK,QAGjCd,EAAA,QAAAE,IAAA,2CAAMe,KAAK,a"}
1	+ {"version":3,"names":["flipTileCss","IxFlipTileStyle0","FlipTile","this","ANIMATION_DURATION","componentDidLoad","observer","createMutationObserver","updateContentItems","observe","hostElement","childList","componentWillLoad","updateContentVisibility","index","disconnectedCallback","disconnect","contentItems","Array","from","querySelectorAll","indexVisible","forEach","content","contentVisible","toggleIndex","doFlipAnimation","isFlipAnimationActive","setTimeout","length","render","h","Host","key","style","height","width","class","info","state","FlipTileState","Info","warning","Warning","alarm","Alarm","primary","Primary","name","icon","variant","ghost","onClick","footer"],"sources":["src/components/flip-tile/flip-tile.scss?tag=ix-flip-tile&encapsulation=shadow","src/components/flip-tile/flip-tile.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/animations';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n@import 'legacy/fonts';\n\n@include keyframes(flip-animation) {\n 0% {\n transform: rotateY(0);\n }\n 50% {\n transform: rotateY(90deg);\n }\n 51% {\n transform: rotateY(270deg);\n }\n 100% {\n transform: rotateY(360deg);\n }\n}\n\n:host {\n @include ix-component;\n display: flex;\n flex-direction: column;\n perspective: 1000px;\n\n .flip-tile-header {\n display: flex;\n align-items: center;\n height: $large-control-height;\n padding: 0 $small-space 0 $default-space;\n\n .header-slot-container {\n @include ellipsis;\n flex-grow: 1;\n min-width: 0;\n }\n }\n\n .content-container {\n flex-grow: 1;\n margin: $default-space;\n }\n\n .flip-tile-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n background-color: var(--theme-blind-base--background);\n border: solid 1px var(--theme-blind-base--border-color);\n border-radius: var(--theme-flip-tile--border-radius)\n var(--theme-flip-tile--border-radius) 0 0;\n transform-style: preserve-3d;\n\n &.flip-animation-active {\n @include animation(flip-animation, 2 $default-time, ease-in-out);\n }\n\n .footer {\n display: flex;\n height: 3rem;\n align-items: center;\n justify-content: center;\n padding: 0 $small-space;\n color: var(--theme-flip-footer--color);\n background-color: var(--theme-blind-base--background);\n\n :first-child {\n @include ellipsis;\n height: 100%;\n }\n }\n\n ::slotted() {\n @include ellipsis;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-width: 0;\n }\n\n &.primary {\n border-color: var(--theme-color-primary);\n\n .footer {\n background-color: var(--theme-color-primary);\n color: var(--theme-color-primary--contrast);\n }\n }\n\n &.info {\n border-color: var(--theme-color-info);\n\n .footer {\n background-color: var(--theme-color-info);\n color: var(--theme-color-info--contrast);\n }\n }\n\n &.warning {\n border-color: var(--theme-color-warning);\n\n .footer {\n background-color: var(--theme-color-warning);\n color: var(--theme-color-warning--contrast);\n }\n }\n\n &.alarm {\n border-color: var(--theme-color-alarm);\n\n .footer {\n background-color: var(--theme-color-alarm);\n color: var(--theme-color-alarm--contrast);\n }\n }\n }\n\n &:hover .flip-tile-container .footer ix-icon {\n color: var(--theme-color-std-text);\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, Element, h, Host, Prop, State } from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { FlipTileState } from './flip-tile-state';\n\n@Component({\n tag: 'ix-flip-tile',\n styleUrl: 'flip-tile.scss',\n shadow: true,\n})\nexport class FlipTile {\n @Element() hostElement!: HTMLIxFlipTileElement;\n\n /\n Variation of the Flip\n /\n @Prop() state: FlipTileState;\n\n /\n Height interpreted as REM\n * @since 1.5.0\n /\n @Prop() height: number \| 'auto' = 15.125;\n\n /\n Width interpreted as REM\n * @since 1.5.0\n /\n @Prop() width: number \| 'auto' = 16;\n\n @State() index = 0;\n @State() isFlipAnimationActive: boolean;\n\n private readonly ANIMATION_DURATION = 150;\n private contentItems: Array<HTMLIxFlipTileContentElement>;\n\n private observer: MutationObserver;\n\n componentDidLoad() {\n this.observer = createMutationObserver(() => this.updateContentItems());\n this.observer.observe(this.hostElement, {\n childList: true,\n });\n }\n\n componentWillLoad() {\n this.updateContentItems();\n this.updateContentVisibility(this.index);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n private updateContentItems() {\n this.contentItems = Array.from(\n this.hostElement.querySelectorAll('ix-flip-tile-content')\n );\n }\n\n private updateContentVisibility(indexVisible: number) {\n this.contentItems.forEach(\n (content, index) => (content.contentVisible = index === indexVisible)\n );\n }\n\n private toggleIndex() {\n this.doFlipAnimation();\n }\n\n private doFlipAnimation() {\n this.isFlipAnimationActive = true;\n\n setTimeout(() => {\n this.updateContentVisibility(this.index);\n\n if (this.index >= this.contentItems.length - 1) {\n this.index = 0;\n } else {\n this.index++;\n }\n\n this.updateContentVisibility(this.index);\n }, this.ANIMATION_DURATION);\n\n setTimeout(() => {\n this.isFlipAnimationActive = false;\n }, 2 this.ANIMATION_DURATION);\n }\n\n render() {\n return (\n <Host\n style={{\n height: `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n 'min-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n 'max-height': `${this.height}${this.height === 'auto' ? '' : 'rem'}`,\n width: `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n 'min-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n 'max-width': `${this.width}${this.width === 'auto' ? '' : 'rem'}`,\n }}\n >\n <div\n class={{\n 'flip-tile-container': true,\n info: this.state === FlipTileState.Info,\n warning: this.state === FlipTileState.Warning,\n alarm: this.state === FlipTileState.Alarm,\n primary: this.state === FlipTileState.Primary,\n 'flip-animation-active': this.isFlipAnimationActive,\n }}\n >\n <div class=\"flip-tile-header\">\n <div class=\"header-slot-container text-l-title\">\n <slot name=\"header\"></slot>\n </div>\n <ix-icon-button\n icon={'eye'}\n variant=\"primary\"\n ghost\n onClick={() => this.toggleIndex()}\n ></ix-icon-button>\n </div>\n\n <div class=\"content-container\">\n <slot></slot>\n </div>\n <div\n class={{\n footer: true,\n 'contrast-light': this.state === FlipTileState.Warning,\n 'contrast-dark':\n this.state === FlipTileState.Info \|\|\n this.state === FlipTileState.Alarm,\n }}\n >\n <slot name=\"footer\"></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"iIAAA,MAAMA,EAAc,yyLACpB,MAAAC,EAAeD,E,MCiBFE,EAAQ,M,yBAuBFC,KAAAC,mBAAqB,I,iCAXJ,O,WAMD,G,WAEhB,E,qCAQjB,gBAAAC,GACEF,KAAKG,SAAWC,GAAuB,IAAMJ,KAAKK,uBAClDL,KAAKG,SAASG,QAAQN,KAAKO,YAAa,CACtCC,UAAW,M,CAIf,iBAAAC,GACET,KAAKK,qBACLL,KAAKU,wBAAwBV,KAAKW,M,CAGpC,oBAAAC,GACE,GAAIZ,KAAKG,SAAU,CACjBH,KAAKG,SAASU,Y,EAIV,kBAAAR,GACNL,KAAKc,aAAeC,MAAMC,KACxBhB,KAAKO,YAAYU,iBAAiB,wB,CAI9B,uBAAAP,CAAwBQ,GAC9BlB,KAAKc,aAAaK,SAChB,CAACC,EAAST,IAAWS,EAAQC,eAAiBV,IAAUO,G,CAIpD,WAAAI,GACNtB,KAAKuB,iB,CAGC,eAAAA,GACNvB,KAAKwB,sBAAwB,KAE7BC,YAAW,KACTzB,KAAKU,wBAAwBV,KAAKW,OAElC,GAAIX,KAAKW,OAASX,KAAKc,aAAaY,OAAS,EAAG,CAC9C1B,KAAKW,MAAQ,C,KACR,CACLX,KAAKW,O,CAGPX,KAAKU,wBAAwBV,KAAKW,MAAM,GACvCX,KAAKC,oBAERwB,YAAW,KACTzB,KAAKwB,sBAAwB,KAAK,GACjC,EAAIxB,KAAKC,mB,CAGd,MAAA0B,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,OAAQ,GAAGhC,KAAKgC,SAAShC,KAAKgC,SAAW,OAAS,GAAK,QACvD,aAAc,GAAGhC,KAAKgC,SAAShC,KAAKgC,SAAW,OAAS,GAAK,QAC7D,aAAc,GAAGhC,KAAKgC,SAAShC,KAAKgC,SAAW,OAAS,GAAK,QAC7DC,MAAO,GAAGjC,KAAKiC,QAAQjC,KAAKiC,QAAU,OAAS,GAAK,QACpD,YAAa,GAAGjC,KAAKiC,QAAQjC,KAAKiC,QAAU,OAAS,GAAK,QAC1D,YAAa,GAAGjC,KAAKiC,QAAQjC,KAAKiC,QAAU,OAAS,GAAK,UAG5DL,EAAA,OAAAE,IAAA,2CACEI,MAAO,CACL,sBAAuB,KACvBC,KAAMnC,KAAKoC,QAAUC,EAAcC,KACnCC,QAASvC,KAAKoC,QAAUC,EAAcG,QACtCC,MAAOzC,KAAKoC,QAAUC,EAAcK,MACpCC,QAAS3C,KAAKoC,QAAUC,EAAcO,QACtC,wBAAyB5C,KAAKwB,wBAGhCI,EAAA,OAAAE,IAAA,2CAAKI,MAAM,oBACTN,EAAA,OAAAE,IAAA,2CAAKI,MAAM,sCACTN,EAAA,QAAAE,IAAA,2CAAMe,KAAK,YAEbjB,EAAA,kBAAAE,IAAA,2CACEgB,KAAM,MACNC,QAAQ,UACRC,MAAK,KACLC,QAAS,IAAMjD,KAAKsB,iBAIxBM,EAAA,OAAAE,IAAA,2CAAKI,MAAM,qBACTN,EAAA,QAAAE,IAAA,8CAEFF,EAAA,OAAAE,IAAA,2CACEI,MAAO,CACLgB,OAAQ,KACR,iBAAkBlD,KAAKoC,QAAUC,EAAcG,QAC/C,gBACExC,KAAKoC,QAAUC,EAAcC,MAC7BtC,KAAKoC,QAAUC,EAAcK,QAGjCd,EAAA,QAAAE,IAAA,2CAAMe,KAAK,a"}

package/dist/siemens-ix/p-8d599677.entry.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,c as t,h as a,H as s,g as r}from"./p-f87cd962.js";import{U as i}from"./p-ef0d5678.js";const o=":host{display:block;min-height:4rem;height:4rem}: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 .file-upload-area{display:flex;flex-direction:row;align-items:center;justify-content:space-between;overflow:hidden;height:100%;width:100%;padding:1rem;border:1px dashed var(--theme-upload--border-color);border-radius:var(--theme-upload--border-radius);color:var(--theme-upload-text--color)}:host .file-upload-area.multiline{max-height:unset;height:auto}:host .file-upload-area.multiline .glyph{align-self:flex-start;margin-block-start:3px}:host .file-upload-area.multiline>div{align-self:flex-start}:host .file-upload-area:not(.multiline) .state,:host .file-upload-area:not(.multiline) .upload-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .file-upload-area:not(.disabled).file-over{border-color:var(--theme-upload--border-color--dragover);border-style:solid}:host .file-upload-area.checking{color:var(--theme-upload-text--color--checking);border-style:solid}:host .file-upload-area.disabled{border-style:solid;color:var(--theme-upload-text--color--disabled)}:host .file-upload-area ix-button{margin-inline-start:1rem}:host .file-upload-area .upload-browser{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host .file-upload-area .loader{margin:2.187rem auto;font-size:0.937rem;width:1rem;height:1rem;border-radius:50%;position:relative;text-indent:-9999em;animation:optimise-loading 1.1s infinite ease;transform:translateZ(0)}:host .file-upload-area .upload-filename{margin-bottom:1rem}:host .file-upload-area .state{display:flex;align-items:center}:host .file-upload-area .state>ix-spinner{margin-inline-end:0.5rem;height:1.5rem;width:1.5rem}:host .file-upload-area .state>ix-icon{margin-inline-end:0.5rem}:host .file-upload-area .state>ix-icon.icon-error{color:var(--theme-color-alarm)}:host .file-upload-area .state>ix-icon.icon-success{color:var(--theme-color-success)}:host(.disabled){pointer-events:none}";const l=o;const n=class{get inputElement(){return this.hostElement.shadowRoot.querySelector("#upload-browser")}constructor(a){e(this,a);this.filesChanged=t(this,"filesChanged",7);this.accept=undefined;this.multiple=false;this.multiline=false;this.disabled=false;this.state=i.SELECT_FILE;this.selectFileText="+ Drag files here or…";this.loadingText="Checking files…";this.uploadFailedText="Upload failed. Please try again.";this.uploadSuccessText="Upload successful";this.i18nUploadFile="Upload file…";this.i18nUploadDisabled="File upload currently not possible.";this.isFileOver=false}fileDropped(e){e.preventDefault();if(this.disabled){return}const t=e.dataTransfer.files;this.isFileOver=false;this.filesToUpload=this.convertToFileArray(t);this.filesChanged.emit(this.filesToUpload)}fileOver(e){if(this.state!==i.LOADING){e.preventDefault();e.dataTransfer.dropEffect="move"}if(!this.multiple&&e.dataTransfer.items.length>1){e.preventDefault();e.stopPropagation();e.dataTransfer.effectAllowed="none";e.dataTransfer.dropEffect="none"}else{this.isFileOver=true}}fileLeave(){this.isFileOver=false}fileChangeEvent(e){if(this.disabled){return}this.filesToUpload=this.convertToFileArray(e.target.files);this.filesChanged.emit(this.filesToUpload);this.inputElement.type="";this.inputElement.type="file"}convertToFileArray(e){let t=[];if(e instanceof FileList){t=Array.from(e)}else{t=[e]}return t}renderUploadState(){if(this.disabled){return a("span",{class:"state"},a("span",{class:"upload-text"},this.i18nUploadDisabled))}switch(this.state){case i.SELECT_FILE:return a("span",{class:"state"},a("span",{class:"upload-text"},this.selectFileText));case i.LOADING:return a("span",{class:"state"},a("ix-spinner",{variant:"primary"}),a("span",{class:"upload-text"},this.loadingText));case i.UPLOAD_FAILED:return a("span",{class:"state"},a("ix-icon",{name:"error",class:"icon-error"}),a("span",{class:"upload-text"},this.uploadFailedText));case i.UPLOAD_SUCCESSED:return a("span",{class:"state"},a("ix-icon",{name:"success",class:"icon-success"}),a("span",{class:"upload-text"},this.uploadSuccessText));default:return""}}async setFilesToUpload(e){this.filesToUpload=e}render(){return a(s,{key:"65168929ba323f1a3eea30d4812d4da20f120fa4"},a("div",{key:"9b6d1e303b8a117a329ce55fa54a05f7ecd59359",class:{"file-upload-area":true,"file-over":this.state!==i.LOADING&&this.isFileOver,checking:this.state===i.LOADING,disabled:this.disabled,multiline:this.multiline},onDrop:e=>{if(this.state!==i.LOADING){this.fileDropped(e)}},onDragOver:e=>this.fileOver(e),onDragLeave:()=>this.fileLeave(),draggable:!this.disabled},this.renderUploadState(),a("div",{key:"069112fd233fb12c6cd6512ad7283015952caf0b"},a("input",{key:"64bfed06cda8cae2f20ab441f4b3f0fe373de90f",multiple:this.multiple,type:"file",class:"upload-browser",id:"upload-browser",onChange:e=>{this.fileChangeEvent(e)},accept:this.accept}),a("ix-button",{key:"99f054605ac4d39ad7a6e1258e0cc50302305157",tabindex:"-1",outline:true,onClick:()=>this.inputElement.click(),disabled:this.disabled\|\|this.state===i.LOADING},this.i18nUploadFile))))}get hostElement(){return r(this)}};n.style=l;export{n as ix_upload};
2	+ //# sourceMappingURL=p-8d599677.entry.js.map