ids-enterprise-wc 1.7.1 → 1.8.0

package/chunks/{ids-chunk-VQKJRHA3.js → ids-chunk-KJ5BD2P3.js}

@@ -1,4 +1,4 @@
-import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chunk-3WDLQN3R.js";import{a as c}from"./ids-chunk-EYAUFFVU.js";import{a as u,b as y}from"./ids-chunk-XE4WFW5M.js";import{e as r}from"./ids-chunk-Y6KVKFJX.js";import{a as t}from"./ids-chunk-AFDLSC6P.js";import{a as g}from"./ids-chunk-ZMMCFAAI.js";var p=`/* Host Variables */
+import{a as i,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chunk-JH3PQTLP.js";import{a as c}from"./ids-chunk-JG6742NO.js";import{a as u,b as y}from"./ids-chunk-XE4WFW5M.js";import{e as r}from"./ids-chunk-Y6KVKFJX.js";import{a as t}from"./ids-chunk-ATC4BIOV.js";import{a as g}from"./ids-chunk-ZMMCFAAI.js";var p=`/* Host Variables */
 :host {
   --grid-auto-row-height: 0;
   --grid-fill-color: var(--ids-layout-grid-color-background);
@@ -1527,6 +1527,858 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
 }
 
 @media (min-width: 360px) {
+  :host(:not([enable-container])[cols-xs="1"]),
+  .ids-layout-grid-cols-xs-1 {
+    width: 100%;
+    grid-template-columns: repeat(1, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="2"]),
+  .ids-layout-grid-cols-xs-2 {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="3"]),
+  .ids-layout-grid-cols-xs-3 {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="4"]),
+  .ids-layout-grid-cols-xs-4 {
+    width: 100%;
+    grid-template-columns: repeat(4, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="5"]),
+  .ids-layout-grid-cols-xs-5 {
+    width: 100%;
+    grid-template-columns: repeat(5, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="6"]),
+  .ids-layout-grid-cols-xs-6 {
+    width: 100%;
+    grid-template-columns: repeat(6, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="7"]),
+  .ids-layout-grid-cols-xs-7 {
+    width: 100%;
+    grid-template-columns: repeat(7, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="8"]),
+  .ids-layout-grid-cols-xs-8 {
+    width: 100%;
+    grid-template-columns: repeat(8, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="9"]),
+  .ids-layout-grid-cols-xs-9 {
+    width: 100%;
+    grid-template-columns: repeat(9, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="10"]),
+  .ids-layout-grid-cols-xs-10 {
+    width: 100%;
+    grid-template-columns: repeat(10, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="11"]),
+  .ids-layout-grid-cols-xs-11 {
+    width: 100%;
+    grid-template-columns: repeat(11, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="12"]),
+  .ids-layout-grid-cols-xs-12 {
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="13"]),
+  .ids-layout-grid-cols-xs-13 {
+    width: 100%;
+    grid-template-columns: repeat(13, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="14"]),
+  .ids-layout-grid-cols-xs-14 {
+    width: 100%;
+    grid-template-columns: repeat(14, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="15"]),
+  .ids-layout-grid-cols-xs-15 {
+    width: 100%;
+    grid-template-columns: repeat(15, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="16"]),
+  .ids-layout-grid-cols-xs-16 {
+    width: 100%;
+    grid-template-columns: repeat(16, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="17"]),
+  .ids-layout-grid-cols-xs-17 {
+    width: 100%;
+    grid-template-columns: repeat(17, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="18"]),
+  .ids-layout-grid-cols-xs-18 {
+    width: 100%;
+    grid-template-columns: repeat(18, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="19"]),
+  .ids-layout-grid-cols-xs-19 {
+    width: 100%;
+    grid-template-columns: repeat(19, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="20"]),
+  .ids-layout-grid-cols-xs-20 {
+    width: 100%;
+    grid-template-columns: repeat(20, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="21"]),
+  .ids-layout-grid-cols-xs-21 {
+    width: 100%;
+    grid-template-columns: repeat(21, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="22"]),
+  .ids-layout-grid-cols-xs-22 {
+    width: 100%;
+    grid-template-columns: repeat(22, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="23"]),
+  .ids-layout-grid-cols-xs-23 {
+    width: 100%;
+    grid-template-columns: repeat(23, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xs="24"]),
+  .ids-layout-grid-cols-xs-24 {
+    width: 100%;
+    grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host([flow-xs=row]),
+  .ids-layout-grid-flow-xs-row {
+    grid-auto-flow: row;
+  }
+  :host([flow-xs=column]),
+  .ids-layout-grid-flow-xs-col {
+    grid-auto-flow: column;
+  }
+  :host([flow-xs=dense]),
+  .ids-layout-grid-flow-xs-dense {
+    grid-auto-flow: dense;
+  }
+  :host([flow-xs=row-dense]),
+  .ids-layout-grid-flow-xs-row-dense {
+    grid-auto-flow: row dense;
+  }
+  :host([flow-xs=column-dense]),
+  .ids-layout-grid-flow-xs-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+@media (min-width: 600px) {
+  :host(:not([enable-container])[cols-sm="1"]),
+  .ids-layout-grid-cols-sm-1 {
+    width: 100%;
+    grid-template-columns: repeat(1, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="2"]),
+  .ids-layout-grid-cols-sm-2 {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="3"]),
+  .ids-layout-grid-cols-sm-3 {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="4"]),
+  .ids-layout-grid-cols-sm-4 {
+    width: 100%;
+    grid-template-columns: repeat(4, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="5"]),
+  .ids-layout-grid-cols-sm-5 {
+    width: 100%;
+    grid-template-columns: repeat(5, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="6"]),
+  .ids-layout-grid-cols-sm-6 {
+    width: 100%;
+    grid-template-columns: repeat(6, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="7"]),
+  .ids-layout-grid-cols-sm-7 {
+    width: 100%;
+    grid-template-columns: repeat(7, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="8"]),
+  .ids-layout-grid-cols-sm-8 {
+    width: 100%;
+    grid-template-columns: repeat(8, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="9"]),
+  .ids-layout-grid-cols-sm-9 {
+    width: 100%;
+    grid-template-columns: repeat(9, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="10"]),
+  .ids-layout-grid-cols-sm-10 {
+    width: 100%;
+    grid-template-columns: repeat(10, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="11"]),
+  .ids-layout-grid-cols-sm-11 {
+    width: 100%;
+    grid-template-columns: repeat(11, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="12"]),
+  .ids-layout-grid-cols-sm-12 {
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="13"]),
+  .ids-layout-grid-cols-sm-13 {
+    width: 100%;
+    grid-template-columns: repeat(13, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="14"]),
+  .ids-layout-grid-cols-sm-14 {
+    width: 100%;
+    grid-template-columns: repeat(14, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="15"]),
+  .ids-layout-grid-cols-sm-15 {
+    width: 100%;
+    grid-template-columns: repeat(15, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="16"]),
+  .ids-layout-grid-cols-sm-16 {
+    width: 100%;
+    grid-template-columns: repeat(16, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="17"]),
+  .ids-layout-grid-cols-sm-17 {
+    width: 100%;
+    grid-template-columns: repeat(17, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="18"]),
+  .ids-layout-grid-cols-sm-18 {
+    width: 100%;
+    grid-template-columns: repeat(18, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="19"]),
+  .ids-layout-grid-cols-sm-19 {
+    width: 100%;
+    grid-template-columns: repeat(19, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="20"]),
+  .ids-layout-grid-cols-sm-20 {
+    width: 100%;
+    grid-template-columns: repeat(20, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="21"]),
+  .ids-layout-grid-cols-sm-21 {
+    width: 100%;
+    grid-template-columns: repeat(21, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="22"]),
+  .ids-layout-grid-cols-sm-22 {
+    width: 100%;
+    grid-template-columns: repeat(22, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="23"]),
+  .ids-layout-grid-cols-sm-23 {
+    width: 100%;
+    grid-template-columns: repeat(23, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-sm="24"]),
+  .ids-layout-grid-cols-sm-24 {
+    width: 100%;
+    grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host([flow-sm=row]),
+  .ids-layout-grid-flow-sm-row {
+    grid-auto-flow: row;
+  }
+  :host([flow-sm=column]),
+  .ids-layout-grid-flow-sm-col {
+    grid-auto-flow: column;
+  }
+  :host([flow-sm=dense]),
+  .ids-layout-grid-flow-sm-dense {
+    grid-auto-flow: dense;
+  }
+  :host([flow-sm=row-dense]),
+  .ids-layout-grid-flow-sm-row-dense {
+    grid-auto-flow: row dense;
+  }
+  :host([flow-sm=column-dense]),
+  .ids-layout-grid-flow-sm-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+@media (min-width: 840px) {
+  :host(:not([enable-container])[cols-md="1"]),
+  .ids-layout-grid-cols-md-1 {
+    width: 100%;
+    grid-template-columns: repeat(1, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="2"]),
+  .ids-layout-grid-cols-md-2 {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="3"]),
+  .ids-layout-grid-cols-md-3 {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="4"]),
+  .ids-layout-grid-cols-md-4 {
+    width: 100%;
+    grid-template-columns: repeat(4, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="5"]),
+  .ids-layout-grid-cols-md-5 {
+    width: 100%;
+    grid-template-columns: repeat(5, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="6"]),
+  .ids-layout-grid-cols-md-6 {
+    width: 100%;
+    grid-template-columns: repeat(6, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="7"]),
+  .ids-layout-grid-cols-md-7 {
+    width: 100%;
+    grid-template-columns: repeat(7, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="8"]),
+  .ids-layout-grid-cols-md-8 {
+    width: 100%;
+    grid-template-columns: repeat(8, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="9"]),
+  .ids-layout-grid-cols-md-9 {
+    width: 100%;
+    grid-template-columns: repeat(9, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="10"]),
+  .ids-layout-grid-cols-md-10 {
+    width: 100%;
+    grid-template-columns: repeat(10, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="11"]),
+  .ids-layout-grid-cols-md-11 {
+    width: 100%;
+    grid-template-columns: repeat(11, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="12"]),
+  .ids-layout-grid-cols-md-12 {
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="13"]),
+  .ids-layout-grid-cols-md-13 {
+    width: 100%;
+    grid-template-columns: repeat(13, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="14"]),
+  .ids-layout-grid-cols-md-14 {
+    width: 100%;
+    grid-template-columns: repeat(14, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="15"]),
+  .ids-layout-grid-cols-md-15 {
+    width: 100%;
+    grid-template-columns: repeat(15, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="16"]),
+  .ids-layout-grid-cols-md-16 {
+    width: 100%;
+    grid-template-columns: repeat(16, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="17"]),
+  .ids-layout-grid-cols-md-17 {
+    width: 100%;
+    grid-template-columns: repeat(17, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="18"]),
+  .ids-layout-grid-cols-md-18 {
+    width: 100%;
+    grid-template-columns: repeat(18, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="19"]),
+  .ids-layout-grid-cols-md-19 {
+    width: 100%;
+    grid-template-columns: repeat(19, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="20"]),
+  .ids-layout-grid-cols-md-20 {
+    width: 100%;
+    grid-template-columns: repeat(20, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="21"]),
+  .ids-layout-grid-cols-md-21 {
+    width: 100%;
+    grid-template-columns: repeat(21, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="22"]),
+  .ids-layout-grid-cols-md-22 {
+    width: 100%;
+    grid-template-columns: repeat(22, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="23"]),
+  .ids-layout-grid-cols-md-23 {
+    width: 100%;
+    grid-template-columns: repeat(23, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-md="24"]),
+  .ids-layout-grid-cols-md-24 {
+    width: 100%;
+    grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host([flow-md=row]),
+  .ids-layout-grid-flow-md-row {
+    grid-auto-flow: row;
+  }
+  :host([flow-md=column]),
+  .ids-layout-grid-flow-md-col {
+    grid-auto-flow: column;
+  }
+  :host([flow-md=dense]),
+  .ids-layout-grid-flow-md-dense {
+    grid-auto-flow: dense;
+  }
+  :host([flow-md=row-dense]),
+  .ids-layout-grid-flow-md-row-dense {
+    grid-auto-flow: row dense;
+  }
+  :host([flow-md=column-dense]),
+  .ids-layout-grid-flow-md-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+@media (min-width: 1024px) {
+  :host(:not([enable-container])[cols-lg="1"]),
+  .ids-layout-grid-cols-lg-1 {
+    width: 100%;
+    grid-template-columns: repeat(1, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="2"]),
+  .ids-layout-grid-cols-lg-2 {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="3"]),
+  .ids-layout-grid-cols-lg-3 {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="4"]),
+  .ids-layout-grid-cols-lg-4 {
+    width: 100%;
+    grid-template-columns: repeat(4, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="5"]),
+  .ids-layout-grid-cols-lg-5 {
+    width: 100%;
+    grid-template-columns: repeat(5, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="6"]),
+  .ids-layout-grid-cols-lg-6 {
+    width: 100%;
+    grid-template-columns: repeat(6, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="7"]),
+  .ids-layout-grid-cols-lg-7 {
+    width: 100%;
+    grid-template-columns: repeat(7, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="8"]),
+  .ids-layout-grid-cols-lg-8 {
+    width: 100%;
+    grid-template-columns: repeat(8, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="9"]),
+  .ids-layout-grid-cols-lg-9 {
+    width: 100%;
+    grid-template-columns: repeat(9, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="10"]),
+  .ids-layout-grid-cols-lg-10 {
+    width: 100%;
+    grid-template-columns: repeat(10, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="11"]),
+  .ids-layout-grid-cols-lg-11 {
+    width: 100%;
+    grid-template-columns: repeat(11, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="12"]),
+  .ids-layout-grid-cols-lg-12 {
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="13"]),
+  .ids-layout-grid-cols-lg-13 {
+    width: 100%;
+    grid-template-columns: repeat(13, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="14"]),
+  .ids-layout-grid-cols-lg-14 {
+    width: 100%;
+    grid-template-columns: repeat(14, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="15"]),
+  .ids-layout-grid-cols-lg-15 {
+    width: 100%;
+    grid-template-columns: repeat(15, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="16"]),
+  .ids-layout-grid-cols-lg-16 {
+    width: 100%;
+    grid-template-columns: repeat(16, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="17"]),
+  .ids-layout-grid-cols-lg-17 {
+    width: 100%;
+    grid-template-columns: repeat(17, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="18"]),
+  .ids-layout-grid-cols-lg-18 {
+    width: 100%;
+    grid-template-columns: repeat(18, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="19"]),
+  .ids-layout-grid-cols-lg-19 {
+    width: 100%;
+    grid-template-columns: repeat(19, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="20"]),
+  .ids-layout-grid-cols-lg-20 {
+    width: 100%;
+    grid-template-columns: repeat(20, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="21"]),
+  .ids-layout-grid-cols-lg-21 {
+    width: 100%;
+    grid-template-columns: repeat(21, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="22"]),
+  .ids-layout-grid-cols-lg-22 {
+    width: 100%;
+    grid-template-columns: repeat(22, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="23"]),
+  .ids-layout-grid-cols-lg-23 {
+    width: 100%;
+    grid-template-columns: repeat(23, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-lg="24"]),
+  .ids-layout-grid-cols-lg-24 {
+    width: 100%;
+    grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host([flow-lg=row]),
+  .ids-layout-grid-flow-lg-row {
+    grid-auto-flow: row;
+  }
+  :host([flow-lg=column]),
+  .ids-layout-grid-flow-lg-col {
+    grid-auto-flow: column;
+  }
+  :host([flow-lg=dense]),
+  .ids-layout-grid-flow-lg-dense {
+    grid-auto-flow: dense;
+  }
+  :host([flow-lg=row-dense]),
+  .ids-layout-grid-flow-lg-row-dense {
+    grid-auto-flow: row dense;
+  }
+  :host([flow-lg=column-dense]),
+  .ids-layout-grid-flow-lg-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+@media (min-width: 1280px) {
+  :host(:not([enable-container])[cols-xl="1"]),
+  .ids-layout-grid-cols-xl-1 {
+    width: 100%;
+    grid-template-columns: repeat(1, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="2"]),
+  .ids-layout-grid-cols-xl-2 {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="3"]),
+  .ids-layout-grid-cols-xl-3 {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="4"]),
+  .ids-layout-grid-cols-xl-4 {
+    width: 100%;
+    grid-template-columns: repeat(4, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="5"]),
+  .ids-layout-grid-cols-xl-5 {
+    width: 100%;
+    grid-template-columns: repeat(5, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="6"]),
+  .ids-layout-grid-cols-xl-6 {
+    width: 100%;
+    grid-template-columns: repeat(6, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="7"]),
+  .ids-layout-grid-cols-xl-7 {
+    width: 100%;
+    grid-template-columns: repeat(7, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="8"]),
+  .ids-layout-grid-cols-xl-8 {
+    width: 100%;
+    grid-template-columns: repeat(8, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="9"]),
+  .ids-layout-grid-cols-xl-9 {
+    width: 100%;
+    grid-template-columns: repeat(9, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="10"]),
+  .ids-layout-grid-cols-xl-10 {
+    width: 100%;
+    grid-template-columns: repeat(10, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="11"]),
+  .ids-layout-grid-cols-xl-11 {
+    width: 100%;
+    grid-template-columns: repeat(11, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="12"]),
+  .ids-layout-grid-cols-xl-12 {
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="13"]),
+  .ids-layout-grid-cols-xl-13 {
+    width: 100%;
+    grid-template-columns: repeat(13, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="14"]),
+  .ids-layout-grid-cols-xl-14 {
+    width: 100%;
+    grid-template-columns: repeat(14, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="15"]),
+  .ids-layout-grid-cols-xl-15 {
+    width: 100%;
+    grid-template-columns: repeat(15, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="16"]),
+  .ids-layout-grid-cols-xl-16 {
+    width: 100%;
+    grid-template-columns: repeat(16, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="17"]),
+  .ids-layout-grid-cols-xl-17 {
+    width: 100%;
+    grid-template-columns: repeat(17, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="18"]),
+  .ids-layout-grid-cols-xl-18 {
+    width: 100%;
+    grid-template-columns: repeat(18, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="19"]),
+  .ids-layout-grid-cols-xl-19 {
+    width: 100%;
+    grid-template-columns: repeat(19, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="20"]),
+  .ids-layout-grid-cols-xl-20 {
+    width: 100%;
+    grid-template-columns: repeat(20, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="21"]),
+  .ids-layout-grid-cols-xl-21 {
+    width: 100%;
+    grid-template-columns: repeat(21, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="22"]),
+  .ids-layout-grid-cols-xl-22 {
+    width: 100%;
+    grid-template-columns: repeat(22, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="23"]),
+  .ids-layout-grid-cols-xl-23 {
+    width: 100%;
+    grid-template-columns: repeat(23, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xl="24"]),
+  .ids-layout-grid-cols-xl-24 {
+    width: 100%;
+    grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host([flow-xl=row]),
+  .ids-layout-grid-flow-xl-row {
+    grid-auto-flow: row;
+  }
+  :host([flow-xl=column]),
+  .ids-layout-grid-flow-xl-col {
+    grid-auto-flow: column;
+  }
+  :host([flow-xl=dense]),
+  .ids-layout-grid-flow-xl-dense {
+    grid-auto-flow: dense;
+  }
+  :host([flow-xl=row-dense]),
+  .ids-layout-grid-flow-xl-row-dense {
+    grid-auto-flow: row dense;
+  }
+  :host([flow-xl=column-dense]),
+  .ids-layout-grid-flow-xl-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+@media (min-width: 1440px) {
+  :host(:not([enable-container])[cols-xxl="1"]),
+  .ids-layout-grid-cols-xxl-1 {
+    width: 100%;
+    grid-template-columns: repeat(1, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="2"]),
+  .ids-layout-grid-cols-xxl-2 {
+    width: 100%;
+    grid-template-columns: repeat(2, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="3"]),
+  .ids-layout-grid-cols-xxl-3 {
+    width: 100%;
+    grid-template-columns: repeat(3, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="4"]),
+  .ids-layout-grid-cols-xxl-4 {
+    width: 100%;
+    grid-template-columns: repeat(4, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="5"]),
+  .ids-layout-grid-cols-xxl-5 {
+    width: 100%;
+    grid-template-columns: repeat(5, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="6"]),
+  .ids-layout-grid-cols-xxl-6 {
+    width: 100%;
+    grid-template-columns: repeat(6, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="7"]),
+  .ids-layout-grid-cols-xxl-7 {
+    width: 100%;
+    grid-template-columns: repeat(7, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="8"]),
+  .ids-layout-grid-cols-xxl-8 {
+    width: 100%;
+    grid-template-columns: repeat(8, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="9"]),
+  .ids-layout-grid-cols-xxl-9 {
+    width: 100%;
+    grid-template-columns: repeat(9, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="10"]),
+  .ids-layout-grid-cols-xxl-10 {
+    width: 100%;
+    grid-template-columns: repeat(10, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="11"]),
+  .ids-layout-grid-cols-xxl-11 {
+    width: 100%;
+    grid-template-columns: repeat(11, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="12"]),
+  .ids-layout-grid-cols-xxl-12 {
+    width: 100%;
+    grid-template-columns: repeat(12, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="13"]),
+  .ids-layout-grid-cols-xxl-13 {
+    width: 100%;
+    grid-template-columns: repeat(13, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="14"]),
+  .ids-layout-grid-cols-xxl-14 {
+    width: 100%;
+    grid-template-columns: repeat(14, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="15"]),
+  .ids-layout-grid-cols-xxl-15 {
+    width: 100%;
+    grid-template-columns: repeat(15, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="16"]),
+  .ids-layout-grid-cols-xxl-16 {
+    width: 100%;
+    grid-template-columns: repeat(16, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="17"]),
+  .ids-layout-grid-cols-xxl-17 {
+    width: 100%;
+    grid-template-columns: repeat(17, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="18"]),
+  .ids-layout-grid-cols-xxl-18 {
+    width: 100%;
+    grid-template-columns: repeat(18, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="19"]),
+  .ids-layout-grid-cols-xxl-19 {
+    width: 100%;
+    grid-template-columns: repeat(19, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="20"]),
+  .ids-layout-grid-cols-xxl-20 {
+    width: 100%;
+    grid-template-columns: repeat(20, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="21"]),
+  .ids-layout-grid-cols-xxl-21 {
+    width: 100%;
+    grid-template-columns: repeat(21, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="22"]),
+  .ids-layout-grid-cols-xxl-22 {
+    width: 100%;
+    grid-template-columns: repeat(22, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="23"]),
+  .ids-layout-grid-cols-xxl-23 {
+    width: 100%;
+    grid-template-columns: repeat(23, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host(:not([enable-container])[cols-xxl="24"]),
+  .ids-layout-grid-cols-xxl-24 {
+    width: 100%;
+    grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
+  }
+  :host([flow-xxl=row]),
+  .ids-layout-grid-flow-xxl-row {
+    grid-auto-flow: row;
+  }
+  :host([flow-xxl=column]),
+  .ids-layout-grid-flow-xxl-col {
+    grid-auto-flow: column;
+  }
+  :host([flow-xxl=dense]),
+  .ids-layout-grid-flow-xxl-dense {
+    grid-auto-flow: dense;
+  }
+  :host([flow-xxl=row-dense]),
+  .ids-layout-grid-flow-xxl-row-dense {
+    grid-auto-flow: row dense;
+  }
+  :host([flow-xxl=column-dense]),
+  .ids-layout-grid-flow-xxl-col-dense {
+    grid-auto-flow: column dense;
+  }
+}
+@container (min-width: 360px) {
   :host([cols-xs="1"]),
   .ids-layout-grid-cols-xs-1 {
     width: 100%;
@@ -1647,28 +2499,8 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
     width: 100%;
     grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
   }
-  :host([flow-xs=row]),
-  .ids-layout-grid-flow-xs-row {
-    grid-auto-flow: row;
-  }
-  :host([flow-xs=column]),
-  .ids-layout-grid-flow-xs-col {
-    grid-auto-flow: column;
-  }
-  :host([flow-xs=dense]),
-  .ids-layout-grid-flow-xs-dense {
-    grid-auto-flow: dense;
-  }
-  :host([flow-xs=row-dense]),
-  .ids-layout-grid-flow-xs-row-dense {
-    grid-auto-flow: row dense;
-  }
-  :host([flow-xs=column-dense]),
-  .ids-layout-grid-flow-xs-col-dense {
-    grid-auto-flow: column dense;
-  }
 }
-@media (min-width: 600px) {
+@container (min-width: 600px) {
   :host([cols-sm="1"]),
   .ids-layout-grid-cols-sm-1 {
     width: 100%;
@@ -1789,28 +2621,8 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
     width: 100%;
     grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
   }
-  :host([flow-sm=row]),
-  .ids-layout-grid-flow-sm-row {
-    grid-auto-flow: row;
-  }
-  :host([flow-sm=column]),
-  .ids-layout-grid-flow-sm-col {
-    grid-auto-flow: column;
-  }
-  :host([flow-sm=dense]),
-  .ids-layout-grid-flow-sm-dense {
-    grid-auto-flow: dense;
-  }
-  :host([flow-sm=row-dense]),
-  .ids-layout-grid-flow-sm-row-dense {
-    grid-auto-flow: row dense;
-  }
-  :host([flow-sm=column-dense]),
-  .ids-layout-grid-flow-sm-col-dense {
-    grid-auto-flow: column dense;
-  }
 }
-@media (min-width: 840px) {
+@container (min-width: 840px) {
   :host([cols-md="1"]),
   .ids-layout-grid-cols-md-1 {
     width: 100%;
@@ -1931,28 +2743,8 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
     width: 100%;
     grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
   }
-  :host([flow-md=row]),
-  .ids-layout-grid-flow-md-row {
-    grid-auto-flow: row;
-  }
-  :host([flow-md=column]),
-  .ids-layout-grid-flow-md-col {
-    grid-auto-flow: column;
-  }
-  :host([flow-md=dense]),
-  .ids-layout-grid-flow-md-dense {
-    grid-auto-flow: dense;
-  }
-  :host([flow-md=row-dense]),
-  .ids-layout-grid-flow-md-row-dense {
-    grid-auto-flow: row dense;
-  }
-  :host([flow-md=column-dense]),
-  .ids-layout-grid-flow-md-col-dense {
-    grid-auto-flow: column dense;
-  }
 }
-@media (min-width: 1024px) {
+@container (min-width: 1024px) {
   :host([cols-lg="1"]),
   .ids-layout-grid-cols-lg-1 {
     width: 100%;
@@ -2073,28 +2865,8 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
     width: 100%;
     grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
   }
-  :host([flow-lg=row]),
-  .ids-layout-grid-flow-lg-row {
-    grid-auto-flow: row;
-  }
-  :host([flow-lg=column]),
-  .ids-layout-grid-flow-lg-col {
-    grid-auto-flow: column;
-  }
-  :host([flow-lg=dense]),
-  .ids-layout-grid-flow-lg-dense {
-    grid-auto-flow: dense;
-  }
-  :host([flow-lg=row-dense]),
-  .ids-layout-grid-flow-lg-row-dense {
-    grid-auto-flow: row dense;
-  }
-  :host([flow-lg=column-dense]),
-  .ids-layout-grid-flow-lg-col-dense {
-    grid-auto-flow: column dense;
-  }
 }
-@media (min-width: 1280px) {
+@container (min-width: 1280px) {
   :host([cols-xl="1"]),
   .ids-layout-grid-cols-xl-1 {
     width: 100%;
@@ -2215,28 +2987,8 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
     width: 100%;
     grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
   }
-  :host([flow-xl=row]),
-  .ids-layout-grid-flow-xl-row {
-    grid-auto-flow: row;
-  }
-  :host([flow-xl=column]),
-  .ids-layout-grid-flow-xl-col {
-    grid-auto-flow: column;
-  }
-  :host([flow-xl=dense]),
-  .ids-layout-grid-flow-xl-dense {
-    grid-auto-flow: dense;
-  }
-  :host([flow-xl=row-dense]),
-  .ids-layout-grid-flow-xl-row-dense {
-    grid-auto-flow: row dense;
-  }
-  :host([flow-xl=column-dense]),
-  .ids-layout-grid-flow-xl-col-dense {
-    grid-auto-flow: column dense;
-  }
 }
-@media (min-width: 1440px) {
+@container (min-width: 1440px) {
   :host([cols-xxl="1"]),
   .ids-layout-grid-cols-xxl-1 {
     width: 100%;
@@ -2357,26 +3109,6 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
     width: 100%;
     grid-template-columns: repeat(24, minmax(var(--min-col-width), var(--max-col-width)));
   }
-  :host([flow-xxl=row]),
-  .ids-layout-grid-flow-xxl-row {
-    grid-auto-flow: row;
-  }
-  :host([flow-xxl=column]),
-  .ids-layout-grid-flow-xxl-col {
-    grid-auto-flow: column;
-  }
-  :host([flow-xxl=dense]),
-  .ids-layout-grid-flow-xxl-dense {
-    grid-auto-flow: dense;
-  }
-  :host([flow-xxl=row-dense]),
-  .ids-layout-grid-flow-xxl-row-dense {
-    grid-auto-flow: row dense;
-  }
-  :host([flow-xxl=column-dense]),
-  .ids-layout-grid-flow-xxl-col-dense {
-    grid-auto-flow: column dense;
-  }
 }
 /* Use media queries by default */
 @media (min-width: 360px) {
@@ -19272,6 +20004,10 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
   display: none;
 }
 
+:host > ::slotted([hide=always]) {
+  display: none;
+}
+
 /* Editable */
 ::slotted([editable]) > ids-button,
 .ids-layout-grid > .ids-layout-grid-cell.editable > ids-button {
@@ -19291,4 +20027,4 @@ import{a as e,b,d as x,e as m,f as l,g as d,h as s,i as n,j as h}from"./ids-chun
 ::slotted([height=auto]),
 .ids-layout-grid > .ids-layout-grid-height-auto {
   height: auto;
-}`;var a=class extends c{set alignContent(o){!o||l.indexOf(o)<=0?this.removeAttribute(t.ALIGN_CONTENT):this.setAttribute(t.ALIGN_CONTENT,o)}get alignContent(){return this.getAttribute(t.ALIGN_CONTENT)}set alignItems(o){!o||m.indexOf(o)<0?this.removeAttribute(t.ALIGN_ITEMS):this.setAttribute(t.ALIGN_ITEMS,o)}get alignItems(){return this.getAttribute(t.ALIGN_ITEMS)}set autoFit(o){r(o)?this.setAttribute(t.AUTO_FIT,""):this.removeAttribute(t.AUTO_FIT)}get autoFit(){return r(this.getAttribute(t.AUTO_FIT))}set autoFill(o){r(o)?this.setAttribute(t.AUTO_FILL,""):this.removeAttribute(t.AUTO_FILL)}get autoFill(){return r(this.getAttribute(t.AUTO_FILL))}set cols(o){o!==null?this.setAttribute(t.COLS,o):this.removeAttribute(t.COLS)}get cols(){return this.getAttribute(t.COLS)}set colsXs(o){o!==null?this.setAttribute(t.COLS_XS,o):this.removeAttribute(t.COLS_XS)}get colsXs(){return this.getAttribute(t.COLS_XS)}set colsSm(o){o!==null?this.setAttribute(t.COLS_SM,o):this.removeAttribute(t.COLS_SM)}get colsSm(){return this.getAttribute(t.COLS_SM)}set colsMd(o){o!==null?this.setAttribute(t.COLS_MD,o):this.removeAttribute(t.COLS_MD)}get colsMd(){return this.getAttribute(t.COLS_MD)}set colsLg(o){o!==null?this.setAttribute(t.COLS_LG,o):this.removeAttribute(t.COLS_LG)}get colsLg(){return this.getAttribute(t.COLS_LG)}set colsXl(o){o!==null?this.setAttribute(t.COLS_XL,o):this.removeAttribute(t.COLS_XL)}get colsXl(){return this.getAttribute(t.COLS_XL)}set colsXxl(o){o!==null?this.setAttribute(t.COLS_XXL,o):this.removeAttribute(t.COLS_XXL)}get colsXxl(){return this.getAttribute(t.COLS_XXL)}set minColWidth(o){o!==null?(this.setAttribute(t.MIN_COL_WIDTH,o),this.style.setProperty("--min-col-width",o)):(this.removeAttribute(t.MIN_COL_WIDTH),this.style.removeProperty("--min-col-width"))}get minColWidth(){return this.getAttribute(t.MIN_COL_WIDTH)}set minRowHeight(o){o!==null?(this.setAttribute(t.MIN_ROW_HEIGHT,o),this.style.setProperty("--min-row-height",o)):(this.removeAttribute(t.MIN_ROW_HEIGHT),this.style.removeProperty("--min-row-height"))}get minRowHeight(){return this.getAttribute(t.MIN_ROW_HEIGHT)}set maxColWidth(o){o!==null?(this.setAttribute(t.MAX_COL_WIDTH,o),this.style.setProperty("--max-col-width",o)):(this.removeAttribute(t.MAX_COL_WIDTH),this.style.removeProperty("--max-col-width"))}get maxColWidth(){return this.getAttribute(t.MAX_COL_WIDTH)}set maxRowHeight(o){o!==null?(this.setAttribute(t.MAX_ROW_HEIGHT,o),this.style.setProperty("--max-row-height",o)):(this.removeAttribute(t.MAX_ROW_HEIGHT),this.style.removeProperty("--max-row-height"))}get maxRowHeight(){return this.getAttribute(t.MAX_ROW_HEIGHT)}set gap(o){!o||x.indexOf(o)<=0?this.removeAttribute(t.GAP):this.setAttribute(t.GAP,o)}get gap(){return this.getAttribute(t.GAP)}set margin(o){!o||s.indexOf(o)<=0?this.removeAttribute(t.MARGIN):this.setAttribute(t.MARGIN,o)}get margin(){return this.getAttribute(t.MARGIN)}set marginY(o){!o||s.indexOf(o)<=0?this.removeAttribute(t.MARGIN_Y):this.setAttribute(t.MARGIN_Y,o)}get marginY(){return this.getAttribute(t.MARGIN_Y)}set maxWidth(o){h.indexOf(o)>=0?(this.setAttribute(t.MAX_WIDTH,o),this.style.removeProperty("--max-width")):/^\d+$/.test(o)?(o=`${o}px`,this.style.setProperty("--max-width",o),this.setAttribute(t.MAX_WIDTH,o)):o?.endsWith("px")?(this.style.setProperty("--max-width",o),this.setAttribute(t.MAX_WIDTH,o)):(this.removeAttribute(t.MAX_WIDTH),this.style.removeProperty("--max-width"))}get maxWidth(){return this.getAttribute(t.MAX_WIDTH)}set padding(o){!o||n.indexOf(o)<=0?this.removeAttribute(t.PADDING):this.setAttribute(t.PADDING,o)}get padding(){return this.getAttribute(t.PADDING)}set paddingX(o){!o||n.indexOf(o)<=0?this.removeAttribute(t.PADDING_X):this.setAttribute(t.PADDING_X,o)}get paddingX(){return this.getAttribute(t.PADDING_X)}set paddingY(o){!o||n.indexOf(o)<=0?this.removeAttribute(t.PADDING_Y):this.setAttribute(t.PADDING_Y,o)}get paddingY(){return this.getAttribute(t.PADDING_Y)}set justifyContent(o){!o||l.indexOf(o)<=0?this.removeAttribute(t.JUSTIFY_CONTENT):this.setAttribute(t.JUSTIFY_CONTENT,o)}get justifyContent(){return this.getAttribute(t.JUSTIFY_CONTENT)}set flow(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW):this.setAttribute(t.FLOW,o)}get flow(){return this.getAttribute(t.FLOW)}set flowXs(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_XS):this.setAttribute(t.FLOW_XS,o)}get flowXs(){return this.getAttribute(t.FLOW_XS)}set flowSm(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_SM):this.setAttribute(t.FLOW_SM,o)}get flowSm(){return this.getAttribute(t.FLOW_SM)}set flowMd(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_MD):this.setAttribute(t.FLOW_MD,o)}get flowMd(){return this.getAttribute(t.FLOW_MD)}set flowLg(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_LG):this.setAttribute(t.FLOW_LG,o)}get flowLg(){return this.getAttribute(t.FLOW_LG)}set flowXl(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_XL):this.setAttribute(t.FLOW_XL,o)}get flowXl(){return this.getAttribute(t.FLOW_XL)}set flowXxl(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_XXL):this.setAttribute(t.FLOW_XXL,o)}get flowXxl(){return this.getAttribute(t.FLOW_XXL)}set height(o){if(o!==null){let i=/^\d+(\.\d+)?$/g.test(o)?`${o}px`:o;this.setAttribute(t.HEIGHT,i),this.style.setProperty(t.HEIGHT,i)}else this.removeAttribute(t.HEIGHT),this.style.removeProperty(t.HEIGHT)}get height(){return this.getAttribute(t.HEIGHT)}set rows(o){o!==null?this.setAttribute(t.ROWS,o):this.removeAttribute(t.ROWS)}get rows(){return this.getAttribute(t.ROWS)}set rowsXs(o){o!==null?this.setAttribute(t.ROWS_XS,o):this.removeAttribute(t.ROWS_XS)}get rowsXs(){return this.getAttribute(t.ROWS_XS)}set rowsSm(o){o!==null?this.setAttribute(t.ROWS_SM,o):this.removeAttribute(t.ROWS_SM)}get rowsSm(){return this.getAttribute(t.ROWS_SM)}set rowsMd(o){o!==null?this.setAttribute(t.ROWS_MD,o):this.removeAttribute(t.ROWS_MD)}get rowsMd(){return this.getAttribute(t.ROWS_MD)}set rowsLg(o){o!==null?this.setAttribute(t.ROWS_LG,o):this.removeAttribute(t.ROWS_LG)}get rowsLg(){return this.getAttribute(t.ROWS_LG)}set rowsXl(o){o!==null?this.setAttribute(t.ROWS_XL,o):this.removeAttribute(t.ROWS_XL)}get rowsXl(){return this.getAttribute(t.ROWS_XL)}set rowsXxl(o){o!==null?this.setAttribute(t.ROWS_XXL,o):this.removeAttribute(t.ROWS_XXL)}get rowsXxl(){return this.getAttribute(t.ROWS_XXL)}set rowHeight(o){o!==null?(this.setAttribute(t.ROW_HEIGHT,o),this.classList.add(`${e}-auto-row-height`),this.style.setProperty("--grid-auto-row-height",o)):(this.removeAttribute(t.ROW_HEIGHT),this.classList.remove(`${e}-auto-row-height`),this.style.removeProperty("--grid-auto-row-height"))}get rowHeight(){return this.getAttribute(t.ROW_HEIGHT)}set templateRows(o){o!==null?(this.setAttribute(t.TEMPLATE_ROWS,o),this.classList.add(`${e}-template-rows`),this.style.setProperty("--grid-template-rows",o)):(this.removeAttribute(t.TEMPLATE_ROWS),this.classList.remove(`${e}-template-rows`),this.style.removeProperty("--grid-template-rows"))}get templateRows(){return this.getAttribute(t.TEMPLATE_ROWS)}set enableContainer(o){r(o)?(this.setAttribute(t.ENABLE_CONTAINER,""),this.classList.add(t.ENABLE_CONTAINER)):(this.removeAttribute(t.ENABLE_CONTAINER),this.classList.remove(t.ENABLE_CONTAINER))}get enableContainer(){return this.hasAttribute(t.ENABLE_CONTAINER)}constructor(){super()}static get attributes(){return b}connectedCallback(){super.connectedCallback(),this.initialSettings()}initialSettings(){this.classList.add(`${e}`)}template(){return"<slot></slot>"}};a=g([u("ids-layout-grid"),y(p)],a);export{a};
+}`;var a=class extends c{set alignContent(o){!o||l.indexOf(o)<=0?this.removeAttribute(t.ALIGN_CONTENT):this.setAttribute(t.ALIGN_CONTENT,o)}get alignContent(){return this.getAttribute(t.ALIGN_CONTENT)}set alignItems(o){!o||m.indexOf(o)<0?this.removeAttribute(t.ALIGN_ITEMS):this.setAttribute(t.ALIGN_ITEMS,o)}get alignItems(){return this.getAttribute(t.ALIGN_ITEMS)}set autoFit(o){r(o)?this.setAttribute(t.AUTO_FIT,""):this.removeAttribute(t.AUTO_FIT)}get autoFit(){return r(this.getAttribute(t.AUTO_FIT))}set autoFill(o){r(o)?this.setAttribute(t.AUTO_FILL,""):this.removeAttribute(t.AUTO_FILL)}get autoFill(){return r(this.getAttribute(t.AUTO_FILL))}set cols(o){o!==null?this.setAttribute(t.COLS,o):this.removeAttribute(t.COLS)}get cols(){return this.getAttribute(t.COLS)}set colsXs(o){o!==null?this.setAttribute(t.COLS_XS,o):this.removeAttribute(t.COLS_XS)}get colsXs(){return this.getAttribute(t.COLS_XS)}set colsSm(o){o!==null?this.setAttribute(t.COLS_SM,o):this.removeAttribute(t.COLS_SM)}get colsSm(){return this.getAttribute(t.COLS_SM)}set colsMd(o){o!==null?this.setAttribute(t.COLS_MD,o):this.removeAttribute(t.COLS_MD)}get colsMd(){return this.getAttribute(t.COLS_MD)}set colsLg(o){o!==null?this.setAttribute(t.COLS_LG,o):this.removeAttribute(t.COLS_LG)}get colsLg(){return this.getAttribute(t.COLS_LG)}set colsXl(o){o!==null?this.setAttribute(t.COLS_XL,o):this.removeAttribute(t.COLS_XL)}get colsXl(){return this.getAttribute(t.COLS_XL)}set colsXxl(o){o!==null?this.setAttribute(t.COLS_XXL,o):this.removeAttribute(t.COLS_XXL)}get colsXxl(){return this.getAttribute(t.COLS_XXL)}set minColWidth(o){o!==null?(this.setAttribute(t.MIN_COL_WIDTH,o),this.style.setProperty("--min-col-width",o)):(this.removeAttribute(t.MIN_COL_WIDTH),this.style.removeProperty("--min-col-width"))}get minColWidth(){return this.getAttribute(t.MIN_COL_WIDTH)}set minRowHeight(o){o!==null?(this.setAttribute(t.MIN_ROW_HEIGHT,o),this.style.setProperty("--min-row-height",o)):(this.removeAttribute(t.MIN_ROW_HEIGHT),this.style.removeProperty("--min-row-height"))}get minRowHeight(){return this.getAttribute(t.MIN_ROW_HEIGHT)}set maxColWidth(o){o!==null?(this.setAttribute(t.MAX_COL_WIDTH,o),this.style.setProperty("--max-col-width",o)):(this.removeAttribute(t.MAX_COL_WIDTH),this.style.removeProperty("--max-col-width"))}get maxColWidth(){return this.getAttribute(t.MAX_COL_WIDTH)}set maxRowHeight(o){o!==null?(this.setAttribute(t.MAX_ROW_HEIGHT,o),this.style.setProperty("--max-row-height",o)):(this.removeAttribute(t.MAX_ROW_HEIGHT),this.style.removeProperty("--max-row-height"))}get maxRowHeight(){return this.getAttribute(t.MAX_ROW_HEIGHT)}set gap(o){!o||x.indexOf(o)<=0?this.removeAttribute(t.GAP):this.setAttribute(t.GAP,o)}get gap(){return this.getAttribute(t.GAP)}set margin(o){!o||s.indexOf(o)<=0?this.removeAttribute(t.MARGIN):this.setAttribute(t.MARGIN,o)}get margin(){return this.getAttribute(t.MARGIN)}set marginY(o){!o||s.indexOf(o)<=0?this.removeAttribute(t.MARGIN_Y):this.setAttribute(t.MARGIN_Y,o)}get marginY(){return this.getAttribute(t.MARGIN_Y)}set maxWidth(o){h.indexOf(o)>=0?(this.setAttribute(t.MAX_WIDTH,o),this.style.removeProperty("--max-width")):/^\d+$/.test(o)?(o=`${o}px`,this.style.setProperty("--max-width",o),this.setAttribute(t.MAX_WIDTH,o)):o?.endsWith("px")?(this.style.setProperty("--max-width",o),this.setAttribute(t.MAX_WIDTH,o)):(this.removeAttribute(t.MAX_WIDTH),this.style.removeProperty("--max-width"))}get maxWidth(){return this.getAttribute(t.MAX_WIDTH)}set padding(o){!o||n.indexOf(o)<=0?this.removeAttribute(t.PADDING):this.setAttribute(t.PADDING,o)}get padding(){return this.getAttribute(t.PADDING)}set paddingX(o){!o||n.indexOf(o)<=0?this.removeAttribute(t.PADDING_X):this.setAttribute(t.PADDING_X,o)}get paddingX(){return this.getAttribute(t.PADDING_X)}set paddingY(o){!o||n.indexOf(o)<=0?this.removeAttribute(t.PADDING_Y):this.setAttribute(t.PADDING_Y,o)}get paddingY(){return this.getAttribute(t.PADDING_Y)}set justifyContent(o){!o||l.indexOf(o)<=0?this.removeAttribute(t.JUSTIFY_CONTENT):this.setAttribute(t.JUSTIFY_CONTENT,o)}get justifyContent(){return this.getAttribute(t.JUSTIFY_CONTENT)}set flow(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW):this.setAttribute(t.FLOW,o)}get flow(){return this.getAttribute(t.FLOW)}set flowXs(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_XS):this.setAttribute(t.FLOW_XS,o)}get flowXs(){return this.getAttribute(t.FLOW_XS)}set flowSm(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_SM):this.setAttribute(t.FLOW_SM,o)}get flowSm(){return this.getAttribute(t.FLOW_SM)}set flowMd(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_MD):this.setAttribute(t.FLOW_MD,o)}get flowMd(){return this.getAttribute(t.FLOW_MD)}set flowLg(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_LG):this.setAttribute(t.FLOW_LG,o)}get flowLg(){return this.getAttribute(t.FLOW_LG)}set flowXl(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_XL):this.setAttribute(t.FLOW_XL,o)}get flowXl(){return this.getAttribute(t.FLOW_XL)}set flowXxl(o){!o||d.indexOf(o)<=0?this.removeAttribute(t.FLOW_XXL):this.setAttribute(t.FLOW_XXL,o)}get flowXxl(){return this.getAttribute(t.FLOW_XXL)}set height(o){if(o!==null){let e=/^\d+(\.\d+)?$/g.test(o)?`${o}px`:o;this.setAttribute(t.HEIGHT,e),this.style.setProperty(t.HEIGHT,e)}else this.removeAttribute(t.HEIGHT),this.style.removeProperty(t.HEIGHT)}get height(){return this.getAttribute(t.HEIGHT)}set rows(o){o!==null?this.setAttribute(t.ROWS,o):this.removeAttribute(t.ROWS)}get rows(){return this.getAttribute(t.ROWS)}set rowsXs(o){o!==null?this.setAttribute(t.ROWS_XS,o):this.removeAttribute(t.ROWS_XS)}get rowsXs(){return this.getAttribute(t.ROWS_XS)}set rowsSm(o){o!==null?this.setAttribute(t.ROWS_SM,o):this.removeAttribute(t.ROWS_SM)}get rowsSm(){return this.getAttribute(t.ROWS_SM)}set rowsMd(o){o!==null?this.setAttribute(t.ROWS_MD,o):this.removeAttribute(t.ROWS_MD)}get rowsMd(){return this.getAttribute(t.ROWS_MD)}set rowsLg(o){o!==null?this.setAttribute(t.ROWS_LG,o):this.removeAttribute(t.ROWS_LG)}get rowsLg(){return this.getAttribute(t.ROWS_LG)}set rowsXl(o){o!==null?this.setAttribute(t.ROWS_XL,o):this.removeAttribute(t.ROWS_XL)}get rowsXl(){return this.getAttribute(t.ROWS_XL)}set rowsXxl(o){o!==null?this.setAttribute(t.ROWS_XXL,o):this.removeAttribute(t.ROWS_XXL)}get rowsXxl(){return this.getAttribute(t.ROWS_XXL)}set rowHeight(o){o!==null?(this.setAttribute(t.ROW_HEIGHT,o),this.classList.add(`${i}-auto-row-height`),this.style.setProperty("--grid-auto-row-height",o)):(this.removeAttribute(t.ROW_HEIGHT),this.classList.remove(`${i}-auto-row-height`),this.style.removeProperty("--grid-auto-row-height"))}get rowHeight(){return this.getAttribute(t.ROW_HEIGHT)}set templateRows(o){o!==null?(this.setAttribute(t.TEMPLATE_ROWS,o),this.classList.add(`${i}-template-rows`),this.style.setProperty("--grid-template-rows",o)):(this.removeAttribute(t.TEMPLATE_ROWS),this.classList.remove(`${i}-template-rows`),this.style.removeProperty("--grid-template-rows"))}get templateRows(){return this.getAttribute(t.TEMPLATE_ROWS)}set enableContainer(o){r(o)?(this.setAttribute(t.ENABLE_CONTAINER,""),this.classList.add(t.ENABLE_CONTAINER)):(this.removeAttribute(t.ENABLE_CONTAINER),this.classList.remove(t.ENABLE_CONTAINER))}get enableContainer(){return this.hasAttribute(t.ENABLE_CONTAINER)}constructor(){super()}static get attributes(){return b}connectedCallback(){super.connectedCallback(),this.initialSettings()}initialSettings(){this.classList.add(`${i}`)}template(){return"<slot></slot>"}};a=g([u("ids-layout-grid"),y(p)],a);export{a};