@kyndryl-design-system/shidoka-applications 2.33.0 → 2.33.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0 !important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:translate(0, 10px) rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:translate(0, 10px) rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none !important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0px}.grid-stack>.grid-stack-item[gs-x="0"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x="1"]{left:8.333%}.gs-12>.grid-stack-item[gs-w="2"]{width:16.667%}.gs-12>.grid-stack-item[gs-x="2"]{left:16.667%}.gs-12>.grid-stack-item[gs-w="3"]{width:25%}.gs-12>.grid-stack-item[gs-x="3"]{left:25%}.gs-12>.grid-stack-item[gs-w="4"]{width:33.333%}.gs-12>.grid-stack-item[gs-x="4"]{left:33.333%}.gs-12>.grid-stack-item[gs-w="5"]{width:41.667%}.gs-12>.grid-stack-item[gs-x="5"]{left:41.667%}.gs-12>.grid-stack-item[gs-w="6"]{width:50%}.gs-12>.grid-stack-item[gs-x="6"]{left:50%}.gs-12>.grid-stack-item[gs-w="7"]{width:58.333%}.gs-12>.grid-stack-item[gs-x="7"]{left:58.333%}.gs-12>.grid-stack-item[gs-w="8"]{width:66.667%}.gs-12>.grid-stack-item[gs-x="8"]{left:66.667%}.gs-12>.grid-stack-item[gs-w="9"]{width:75%}.gs-12>.grid-stack-item[gs-x="9"]{left:75%}.gs-12>.grid-stack-item[gs-w="10"]{width:83.333%}.gs-12>.grid-stack-item[gs-x="10"]{left:83.333%}.gs-12>.grid-stack-item[gs-w="11"]{width:91.667%}.gs-12>.grid-stack-item[gs-x="11"]{left:91.667%}.gs-12>.grid-stack-item[gs-w="12"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x="1"]{left:50%}.gs-2>.grid-stack-item[gs-w="2"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x="1"]{left:33.333%}.gs-3>.grid-stack-item[gs-w="2"]{width:66.667%}.gs-3>.grid-stack-item[gs-x="2"]{left:66.667%}.gs-3>.grid-stack-item[gs-w="3"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x="1"]{left:25%}.gs-4>.grid-stack-item[gs-w="2"]{width:50%}.gs-4>.grid-stack-item[gs-x="2"]{left:50%}.gs-4>.grid-stack-item[gs-w="3"]{width:75%}.gs-4>.grid-stack-item[gs-x="3"]{left:75%}.gs-4>.grid-stack-item[gs-w="4"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x="1"]{left:20%}.gs-5>.grid-stack-item[gs-w="2"]{width:40%}.gs-5>.grid-stack-item[gs-x="2"]{left:40%}.gs-5>.grid-stack-item[gs-w="3"]{width:60%}.gs-5>.grid-stack-item[gs-x="3"]{left:60%}.gs-5>.grid-stack-item[gs-w="4"]{width:80%}.gs-5>.grid-stack-item[gs-x="4"]{left:80%}.gs-5>.grid-stack-item[gs-w="5"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x="1"]{left:16.667%}.gs-6>.grid-stack-item[gs-w="2"]{width:33.333%}.gs-6>.grid-stack-item[gs-x="2"]{left:33.333%}.gs-6>.grid-stack-item[gs-w="3"]{width:50%}.gs-6>.grid-stack-item[gs-x="3"]{left:50%}.gs-6>.grid-stack-item[gs-w="4"]{width:66.667%}.gs-6>.grid-stack-item[gs-x="4"]{left:66.667%}.gs-6>.grid-stack-item[gs-w="5"]{width:83.333%}.gs-6>.grid-stack-item[gs-x="5"]{left:83.333%}.gs-6>.grid-stack-item[gs-w="6"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x="1"]{left:14.286%}.gs-7>.grid-stack-item[gs-w="2"]{width:28.571%}.gs-7>.grid-stack-item[gs-x="2"]{left:28.571%}.gs-7>.grid-stack-item[gs-w="3"]{width:42.857%}.gs-7>.grid-stack-item[gs-x="3"]{left:42.857%}.gs-7>.grid-stack-item[gs-w="4"]{width:57.143%}.gs-7>.grid-stack-item[gs-x="4"]{left:57.143%}.gs-7>.grid-stack-item[gs-w="5"]{width:71.429%}.gs-7>.grid-stack-item[gs-x="5"]{left:71.429%}.gs-7>.grid-stack-item[gs-w="6"]{width:85.714%}.gs-7>.grid-stack-item[gs-x="6"]{left:85.714%}.gs-7>.grid-stack-item[gs-w="7"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x="1"]{left:12.5%}.gs-8>.grid-stack-item[gs-w="2"]{width:25%}.gs-8>.grid-stack-item[gs-x="2"]{left:25%}.gs-8>.grid-stack-item[gs-w="3"]{width:37.5%}.gs-8>.grid-stack-item[gs-x="3"]{left:37.5%}.gs-8>.grid-stack-item[gs-w="4"]{width:50%}.gs-8>.grid-stack-item[gs-x="4"]{left:50%}.gs-8>.grid-stack-item[gs-w="5"]{width:62.5%}.gs-8>.grid-stack-item[gs-x="5"]{left:62.5%}.gs-8>.grid-stack-item[gs-w="6"]{width:75%}.gs-8>.grid-stack-item[gs-x="6"]{left:75%}.gs-8>.grid-stack-item[gs-w="7"]{width:87.5%}.gs-8>.grid-stack-item[gs-x="7"]{left:87.5%}.gs-8>.grid-stack-item[gs-w="8"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x="1"]{left:11.111%}.gs-9>.grid-stack-item[gs-w="2"]{width:22.222%}.gs-9>.grid-stack-item[gs-x="2"]{left:22.222%}.gs-9>.grid-stack-item[gs-w="3"]{width:33.333%}.gs-9>.grid-stack-item[gs-x="3"]{left:33.333%}.gs-9>.grid-stack-item[gs-w="4"]{width:44.444%}.gs-9>.grid-stack-item[gs-x="4"]{left:44.444%}.gs-9>.grid-stack-item[gs-w="5"]{width:55.556%}.gs-9>.grid-stack-item[gs-x="5"]{left:55.556%}.gs-9>.grid-stack-item[gs-w="6"]{width:66.667%}.gs-9>.grid-stack-item[gs-x="6"]{left:66.667%}.gs-9>.grid-stack-item[gs-w="7"]{width:77.778%}.gs-9>.grid-stack-item[gs-x="7"]{left:77.778%}.gs-9>.grid-stack-item[gs-w="8"]{width:88.889%}.gs-9>.grid-stack-item[gs-x="8"]{left:88.889%}.gs-9>.grid-stack-item[gs-w="9"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x="1"]{left:10%}.gs-10>.grid-stack-item[gs-w="2"]{width:20%}.gs-10>.grid-stack-item[gs-x="2"]{left:20%}.gs-10>.grid-stack-item[gs-w="3"]{width:30%}.gs-10>.grid-stack-item[gs-x="3"]{left:30%}.gs-10>.grid-stack-item[gs-w="4"]{width:40%}.gs-10>.grid-stack-item[gs-x="4"]{left:40%}.gs-10>.grid-stack-item[gs-w="5"]{width:50%}.gs-10>.grid-stack-item[gs-x="5"]{left:50%}.gs-10>.grid-stack-item[gs-w="6"]{width:60%}.gs-10>.grid-stack-item[gs-x="6"]{left:60%}.gs-10>.grid-stack-item[gs-w="7"]{width:70%}.gs-10>.grid-stack-item[gs-x="7"]{left:70%}.gs-10>.grid-stack-item[gs-w="8"]{width:80%}.gs-10>.grid-stack-item[gs-x="8"]{left:80%}.gs-10>.grid-stack-item[gs-w="9"]{width:90%}.gs-10>.grid-stack-item[gs-x="9"]{left:90%}.gs-10>.grid-stack-item[gs-w="10"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x="1"]{left:9.091%}.gs-11>.grid-stack-item[gs-w="2"]{width:18.182%}.gs-11>.grid-stack-item[gs-x="2"]{left:18.182%}.gs-11>.grid-stack-item[gs-w="3"]{width:27.273%}.gs-11>.grid-stack-item[gs-x="3"]{left:27.273%}.gs-11>.grid-stack-item[gs-w="4"]{width:36.364%}.gs-11>.grid-stack-item[gs-x="4"]{left:36.364%}.gs-11>.grid-stack-item[gs-w="5"]{width:45.455%}.gs-11>.grid-stack-item[gs-x="5"]{left:45.455%}.gs-11>.grid-stack-item[gs-w="6"]{width:54.545%}.gs-11>.grid-stack-item[gs-x="6"]{left:54.545%}.gs-11>.grid-stack-item[gs-w="7"]{width:63.636%}.gs-11>.grid-stack-item[gs-x="7"]{left:63.636%}.gs-11>.grid-stack-item[gs-w="8"]{width:72.727%}.gs-11>.grid-stack-item[gs-x="8"]{left:72.727%}.gs-11>.grid-stack-item[gs-w="9"]{width:81.818%}.gs-11>.grid-stack-item[gs-x="9"]{left:81.818%}.gs-11>.grid-stack-item[gs-w="10"]{width:90.909%}.gs-11>.grid-stack-item[gs-x="10"]{left:90.909%}.gs-11>.grid-stack-item[gs-w="11"]{width:100%}.grid-stack{max-width:
|
|
1
|
+
.grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:rgba(0,0,0,.1);margin:0;position:absolute;width:auto;z-index:0 !important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="%23666" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 20 20"><path d="m10 3 2 2H8l2-2v14l-2-2h4l-2 2"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:translate(0, 10px) rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:translate(0, 10px) rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none !important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y="0"]{top:0px}.grid-stack>.grid-stack-item[gs-x="0"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x="1"]{left:8.333%}.gs-12>.grid-stack-item[gs-w="2"]{width:16.667%}.gs-12>.grid-stack-item[gs-x="2"]{left:16.667%}.gs-12>.grid-stack-item[gs-w="3"]{width:25%}.gs-12>.grid-stack-item[gs-x="3"]{left:25%}.gs-12>.grid-stack-item[gs-w="4"]{width:33.333%}.gs-12>.grid-stack-item[gs-x="4"]{left:33.333%}.gs-12>.grid-stack-item[gs-w="5"]{width:41.667%}.gs-12>.grid-stack-item[gs-x="5"]{left:41.667%}.gs-12>.grid-stack-item[gs-w="6"]{width:50%}.gs-12>.grid-stack-item[gs-x="6"]{left:50%}.gs-12>.grid-stack-item[gs-w="7"]{width:58.333%}.gs-12>.grid-stack-item[gs-x="7"]{left:58.333%}.gs-12>.grid-stack-item[gs-w="8"]{width:66.667%}.gs-12>.grid-stack-item[gs-x="8"]{left:66.667%}.gs-12>.grid-stack-item[gs-w="9"]{width:75%}.gs-12>.grid-stack-item[gs-x="9"]{left:75%}.gs-12>.grid-stack-item[gs-w="10"]{width:83.333%}.gs-12>.grid-stack-item[gs-x="10"]{left:83.333%}.gs-12>.grid-stack-item[gs-w="11"]{width:91.667%}.gs-12>.grid-stack-item[gs-x="11"]{left:91.667%}.gs-12>.grid-stack-item[gs-w="12"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x="1"]{left:50%}.gs-2>.grid-stack-item[gs-w="2"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x="1"]{left:33.333%}.gs-3>.grid-stack-item[gs-w="2"]{width:66.667%}.gs-3>.grid-stack-item[gs-x="2"]{left:66.667%}.gs-3>.grid-stack-item[gs-w="3"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x="1"]{left:25%}.gs-4>.grid-stack-item[gs-w="2"]{width:50%}.gs-4>.grid-stack-item[gs-x="2"]{left:50%}.gs-4>.grid-stack-item[gs-w="3"]{width:75%}.gs-4>.grid-stack-item[gs-x="3"]{left:75%}.gs-4>.grid-stack-item[gs-w="4"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x="1"]{left:20%}.gs-5>.grid-stack-item[gs-w="2"]{width:40%}.gs-5>.grid-stack-item[gs-x="2"]{left:40%}.gs-5>.grid-stack-item[gs-w="3"]{width:60%}.gs-5>.grid-stack-item[gs-x="3"]{left:60%}.gs-5>.grid-stack-item[gs-w="4"]{width:80%}.gs-5>.grid-stack-item[gs-x="4"]{left:80%}.gs-5>.grid-stack-item[gs-w="5"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x="1"]{left:16.667%}.gs-6>.grid-stack-item[gs-w="2"]{width:33.333%}.gs-6>.grid-stack-item[gs-x="2"]{left:33.333%}.gs-6>.grid-stack-item[gs-w="3"]{width:50%}.gs-6>.grid-stack-item[gs-x="3"]{left:50%}.gs-6>.grid-stack-item[gs-w="4"]{width:66.667%}.gs-6>.grid-stack-item[gs-x="4"]{left:66.667%}.gs-6>.grid-stack-item[gs-w="5"]{width:83.333%}.gs-6>.grid-stack-item[gs-x="5"]{left:83.333%}.gs-6>.grid-stack-item[gs-w="6"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x="1"]{left:14.286%}.gs-7>.grid-stack-item[gs-w="2"]{width:28.571%}.gs-7>.grid-stack-item[gs-x="2"]{left:28.571%}.gs-7>.grid-stack-item[gs-w="3"]{width:42.857%}.gs-7>.grid-stack-item[gs-x="3"]{left:42.857%}.gs-7>.grid-stack-item[gs-w="4"]{width:57.143%}.gs-7>.grid-stack-item[gs-x="4"]{left:57.143%}.gs-7>.grid-stack-item[gs-w="5"]{width:71.429%}.gs-7>.grid-stack-item[gs-x="5"]{left:71.429%}.gs-7>.grid-stack-item[gs-w="6"]{width:85.714%}.gs-7>.grid-stack-item[gs-x="6"]{left:85.714%}.gs-7>.grid-stack-item[gs-w="7"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x="1"]{left:12.5%}.gs-8>.grid-stack-item[gs-w="2"]{width:25%}.gs-8>.grid-stack-item[gs-x="2"]{left:25%}.gs-8>.grid-stack-item[gs-w="3"]{width:37.5%}.gs-8>.grid-stack-item[gs-x="3"]{left:37.5%}.gs-8>.grid-stack-item[gs-w="4"]{width:50%}.gs-8>.grid-stack-item[gs-x="4"]{left:50%}.gs-8>.grid-stack-item[gs-w="5"]{width:62.5%}.gs-8>.grid-stack-item[gs-x="5"]{left:62.5%}.gs-8>.grid-stack-item[gs-w="6"]{width:75%}.gs-8>.grid-stack-item[gs-x="6"]{left:75%}.gs-8>.grid-stack-item[gs-w="7"]{width:87.5%}.gs-8>.grid-stack-item[gs-x="7"]{left:87.5%}.gs-8>.grid-stack-item[gs-w="8"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x="1"]{left:11.111%}.gs-9>.grid-stack-item[gs-w="2"]{width:22.222%}.gs-9>.grid-stack-item[gs-x="2"]{left:22.222%}.gs-9>.grid-stack-item[gs-w="3"]{width:33.333%}.gs-9>.grid-stack-item[gs-x="3"]{left:33.333%}.gs-9>.grid-stack-item[gs-w="4"]{width:44.444%}.gs-9>.grid-stack-item[gs-x="4"]{left:44.444%}.gs-9>.grid-stack-item[gs-w="5"]{width:55.556%}.gs-9>.grid-stack-item[gs-x="5"]{left:55.556%}.gs-9>.grid-stack-item[gs-w="6"]{width:66.667%}.gs-9>.grid-stack-item[gs-x="6"]{left:66.667%}.gs-9>.grid-stack-item[gs-w="7"]{width:77.778%}.gs-9>.grid-stack-item[gs-x="7"]{left:77.778%}.gs-9>.grid-stack-item[gs-w="8"]{width:88.889%}.gs-9>.grid-stack-item[gs-x="8"]{left:88.889%}.gs-9>.grid-stack-item[gs-w="9"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x="1"]{left:10%}.gs-10>.grid-stack-item[gs-w="2"]{width:20%}.gs-10>.grid-stack-item[gs-x="2"]{left:20%}.gs-10>.grid-stack-item[gs-w="3"]{width:30%}.gs-10>.grid-stack-item[gs-x="3"]{left:30%}.gs-10>.grid-stack-item[gs-w="4"]{width:40%}.gs-10>.grid-stack-item[gs-x="4"]{left:40%}.gs-10>.grid-stack-item[gs-w="5"]{width:50%}.gs-10>.grid-stack-item[gs-x="5"]{left:50%}.gs-10>.grid-stack-item[gs-w="6"]{width:60%}.gs-10>.grid-stack-item[gs-x="6"]{left:60%}.gs-10>.grid-stack-item[gs-w="7"]{width:70%}.gs-10>.grid-stack-item[gs-x="7"]{left:70%}.gs-10>.grid-stack-item[gs-w="8"]{width:80%}.gs-10>.grid-stack-item[gs-x="8"]{left:80%}.gs-10>.grid-stack-item[gs-w="9"]{width:90%}.gs-10>.grid-stack-item[gs-x="9"]{left:90%}.gs-10>.grid-stack-item[gs-w="10"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x="1"]{left:9.091%}.gs-11>.grid-stack-item[gs-w="2"]{width:18.182%}.gs-11>.grid-stack-item[gs-x="2"]{left:18.182%}.gs-11>.grid-stack-item[gs-w="3"]{width:27.273%}.gs-11>.grid-stack-item[gs-x="3"]{left:27.273%}.gs-11>.grid-stack-item[gs-w="4"]{width:36.364%}.gs-11>.grid-stack-item[gs-x="4"]{left:36.364%}.gs-11>.grid-stack-item[gs-w="5"]{width:45.455%}.gs-11>.grid-stack-item[gs-x="5"]{left:45.455%}.gs-11>.grid-stack-item[gs-w="6"]{width:54.545%}.gs-11>.grid-stack-item[gs-x="6"]{left:54.545%}.gs-11>.grid-stack-item[gs-w="7"]{width:63.636%}.gs-11>.grid-stack-item[gs-x="7"]{left:63.636%}.gs-11>.grid-stack-item[gs-w="8"]{width:72.727%}.gs-11>.grid-stack-item[gs-x="8"]{left:72.727%}.gs-11>.grid-stack-item[gs-w="9"]{width:81.818%}.gs-11>.grid-stack-item[gs-x="9"]{left:81.818%}.gs-11>.grid-stack-item[gs-w="10"]{width:90.909%}.gs-11>.grid-stack-item[gs-x="10"]{left:90.909%}.gs-11>.grid-stack-item[gs-w="11"]{width:100%}.grid-stack{max-width:1552px}.grid-stack>.grid-stack-item>.grid-stack-item-content{overflow:initial}.grid-stack-item>.ui-resizable-se{transform:none;background-image:url('data:image/svg+xml,<svg viewBox="0 0 16 16" stroke="%236D6D6D" stroke-width="2px" xmlns="http://www.w3.org/2000/svg"><path d="m9.5 14.5 5-5M4 14.5 14.5 4"></path></svg>');background-size:16px}
|
|
@@ -47,6 +47,15 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{o as t}from"../../.
|
|
|
47
47
|
overflow: hidden;
|
|
48
48
|
text-overflow: ellipsis;
|
|
49
49
|
}
|
|
50
|
+
.option span.text {
|
|
51
|
+
flex-shrink: 0;
|
|
52
|
+
}
|
|
53
|
+
.option span.check-icon {
|
|
54
|
+
display: flex;
|
|
55
|
+
margin-left: auto;
|
|
56
|
+
padding: 0.5rem 0.5rem 0.5rem 0;
|
|
57
|
+
color: var(--kd-color-icon-accent);
|
|
58
|
+
}
|
|
50
59
|
.option slot[name=icon]::slotted(span) {
|
|
51
60
|
display: flex;
|
|
52
61
|
}
|
|
@@ -57,13 +66,6 @@ kyn-checkbox {
|
|
|
57
66
|
margin-right: 10px;
|
|
58
67
|
}
|
|
59
68
|
|
|
60
|
-
.check-icon {
|
|
61
|
-
display: flex;
|
|
62
|
-
margin-left: auto;
|
|
63
|
-
padding: 0.5rem;
|
|
64
|
-
color: var(--kd-color-icon-accent);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
69
|
.remove-option {
|
|
68
70
|
margin-left: auto;
|
|
69
71
|
margin-top: 0.25rem;
|
|
@@ -83,7 +85,7 @@ kyn-checkbox {
|
|
|
83
85
|
@blur=${e=>this.handleBlur(e)}
|
|
84
86
|
>
|
|
85
87
|
<slot name="icon"></slot>
|
|
86
|
-
<span>
|
|
88
|
+
<span class="text">
|
|
87
89
|
${this.multiple?a`
|
|
88
90
|
<kyn-checkbox
|
|
89
91
|
type="checkbox"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @fires on-remove-option - Emits the option that is removed.\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = DropdownOptionScss;\n\n /** Option value. */\n @property({ type: String })\n value = '';\n\n /** Internal text strings.\n * @internal\n */\n @state()\n selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n removable = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n text: any = '';\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n @property({ type: String, reflect: true })\n override role = 'option';\n\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override ariaSelected = 'option';\n\n override render() {\n return html`\n <div\n class=\"option\"\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled}\n ?multiple=${this.multiple}\n title=${this.text}\n @pointerup=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n >\n <slot name=\"icon\"></slot>\n <span>\n ${this.multiple\n ? html`\n <kyn-checkbox\n type=\"checkbox\"\n value=${this.value}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n notFocusable\n .indeterminate=${this.indeterminate}\n >\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n </kyn-checkbox>\n `\n : html`\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n `}\n </span>\n\n ${this.selected && !this.multiple\n ? html` <span class=\"check-icon\">${unsafeSVG(checkIcon)}</span> `\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n class=\"remove-option\"\n kind=\"ghost\"\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n description=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleRemoveClick(e)}\n @mousedown=${(e: Event) => e.stopPropagation()}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <span slot=\"icon\" class=\"clear-icon\">\n ${unsafeSVG(clearIcon)}\n </span>\n </kyn-button>\n `\n : null}\n </div>\n `;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n }\n\n private handleRemoveClick(e: Event) {\n e.stopPropagation();\n const event = new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n let text = '';\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this.text = text;\n }\n\n private handleClick(e: Event) {\n console.log('blah');\n // prevent click if disabled\n if (this.disabled) {\n return;\n }\n\n // update selected state\n if (this.multiple) {\n this.selected = !this.selected;\n } else {\n this.selected = true;\n }\n\n // emit selected value, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: {\n selected: this.selected,\n value: this.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleBlur(e: any) {\n // emit blur event, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: {\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown-option': DropdownOption;\n }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","allowAddOption","highlighted","multiple","removable","text","indeterminate","role","ariaSelected","render","html","e","handleClick","handleBlur","handleSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","dispatchEvent","nodes","target","assignedNodes","flatten","i","length","textContent","trim","console","log","origEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","state","Boolean","reflect","attribute","customElement"],"mappings":"
|
|
1
|
+
{"version":3,"file":"dropdownOption.js","sources":["../../../../src/components/reusable/dropdown/dropdownOption.ts"],"sourcesContent":["import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport '../checkbox';\nimport '../button';\n\nimport checkIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/check.svg';\nimport clearIcon from '@kyndryl-design-system/shidoka-icons/svg/monochrome/16/close-simple.svg';\n\nimport DropdownOptionScss from './dropdownOption.scss';\n\n/**\n * Dropdown option.\n * @fires on-click - Emits the option details to the parent dropdown.\n * @fires on-remove-option - Emits the option that is removed.\n * @slot unnamed - Slot for option text.\n * @slot icon - Slot for option icon. Icon size should be 16px only.\n */\n@customElement('kyn-dropdown-option')\nexport class DropdownOption extends LitElement {\n static override styles = DropdownOptionScss;\n\n /** Option value. */\n @property({ type: String })\n value = '';\n\n /** Internal text strings.\n * @internal\n */\n @state()\n selected = false;\n\n /** Option disabled state. */\n @property({ type: Boolean })\n disabled = false;\n\n /** Allow Add Option state, derived from parent. */\n @property({ type: Boolean })\n allowAddOption = false;\n\n /**\n * Option highlighted state for keyboard navigation, automatically derived.\n * @ignore\n */\n @state()\n highlighted = false;\n\n /** Multi-select state, derived from parent.\n * @ignore\n */\n @property({ type: Boolean })\n multiple = false;\n\n /** Removable option. */\n @property({ type: Boolean })\n removable = false;\n\n /**\n * Option text, automatically derived.\n * @ignore\n */\n @state()\n text: any = '';\n\n /** Determines whether the checkbox is in an indeterminate state. */\n @property({ type: Boolean, reflect: true })\n indeterminate = false;\n\n @property({ type: String, reflect: true })\n override role = 'option';\n\n @property({ type: String, reflect: true, attribute: 'aria-selected' })\n override ariaSelected = 'option';\n\n override render() {\n return html`\n <div\n class=\"option\"\n ?highlighted=${this.highlighted}\n ?selected=${this.selected}\n ?disabled=${this.disabled}\n aria-disabled=${this.disabled}\n ?multiple=${this.multiple}\n title=${this.text}\n @pointerup=${(e: any) => this.handleClick(e)}\n @blur=${(e: any) => this.handleBlur(e)}\n >\n <slot name=\"icon\"></slot>\n <span class=\"text\">\n ${this.multiple\n ? html`\n <kyn-checkbox\n type=\"checkbox\"\n value=${this.value}\n .checked=${this.selected}\n ?checked=${this.selected}\n ?disabled=${this.disabled}\n notFocusable\n .indeterminate=${this.indeterminate}\n >\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n </kyn-checkbox>\n `\n : html`\n <slot\n @slotchange=${(e: any) => this.handleSlotChange(e)}\n ></slot>\n `}\n </span>\n\n ${this.selected && !this.multiple\n ? html` <span class=\"check-icon\">${unsafeSVG(checkIcon)}</span> `\n : this.allowAddOption && this.removable\n ? html`\n <kyn-button\n class=\"remove-option\"\n kind=\"ghost\"\n size=\"small\"\n aria-label=\"Delete ${this.value}\"\n description=\"Delete ${this.value}\"\n ?disabled=${this.disabled}\n @click=${(e: Event) => this.handleRemoveClick(e)}\n @mousedown=${(e: Event) => e.stopPropagation()}\n @keydown=${(e: KeyboardEvent) => e.stopPropagation()}\n @focus=${(e: KeyboardEvent) => e.stopPropagation()}\n >\n <span slot=\"icon\" class=\"clear-icon\">\n ${unsafeSVG(clearIcon)}\n </span>\n </kyn-button>\n `\n : null}\n </div>\n `;\n }\n\n override willUpdate(changedProps: any) {\n if (changedProps.has('selected')) {\n this.ariaSelected = this.selected.toString();\n }\n }\n\n private handleRemoveClick(e: Event) {\n e.stopPropagation();\n const event = new CustomEvent('on-remove-option', {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleSlotChange(e: any) {\n // set text prop from slotted text, for ease of access\n const nodes = e.target.assignedNodes({ flatten: true });\n let text = '';\n\n for (let i = 0; i < nodes.length; i++) {\n text += nodes[i].textContent.trim();\n }\n\n this.text = text;\n }\n\n private handleClick(e: Event) {\n console.log('blah');\n // prevent click if disabled\n if (this.disabled) {\n return;\n }\n\n // update selected state\n if (this.multiple) {\n this.selected = !this.selected;\n } else {\n this.selected = true;\n }\n\n // emit selected value, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-click', {\n bubbles: true,\n composed: true,\n detail: {\n selected: this.selected,\n value: this.value,\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n\n private handleBlur(e: any) {\n // emit blur event, bubble so it can be captured by the parent dropdown\n const event = new CustomEvent('on-blur', {\n bubbles: true,\n composed: true,\n detail: {\n origEvent: e,\n },\n });\n this.dispatchEvent(event);\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kyn-dropdown-option': DropdownOption;\n }\n}\n"],"names":["DropdownOption","LitElement","constructor","this","value","selected","disabled","allowAddOption","highlighted","multiple","removable","text","indeterminate","role","ariaSelected","render","html","e","handleClick","handleBlur","handleSlotChange","unsafeSVG","checkIcon","handleRemoveClick","stopPropagation","clearIcon","willUpdate","changedProps","has","toString","event","CustomEvent","bubbles","composed","detail","dispatchEvent","nodes","target","assignedNodes","flatten","i","length","textContent","trim","console","log","origEvent","styles","DropdownOptionScss","__decorate","property","type","String","prototype","state","Boolean","reflect","attribute","customElement"],"mappings":"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"}
|