@ukic/web-components 2.7.0 → 2.9.0

package/dist/collection/components/ic-data-entity/test/basic/ic-data-entity.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;EAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;IAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;wBAKY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;IACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;MAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;MACxB,IAAI,EAAE;;;;;;;;;;wBAUY;KACnB,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with small prop\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\" small>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\" class=\"small\" small>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n});\n"]}
+{"version":3,"file":"ic-data-entity.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-entity/test/basic/ic-data-entity.spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAElD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC9B,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;;;;;;wBAUY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,+BAA+B,EAAE,KAAK,IAAI,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;wBAKY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;KAmB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;;;;;;;wBAWY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;KAyB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,sDAAsD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC7B,UAAU,EAAE,CAAC,UAAU,CAAC;YACxB,IAAI,EAAE;;;;;;;;;;wBAUY;SACnB,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;;KAwB7B,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { DataEntity } from \"../../ic-data-entity\";\n\ndescribe(\"ic-data-entity\", () => {\n  it(\"should render with data-row children\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with small prop\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\" small>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\" class=\"small\" small>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row size=\"small\" label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render with a slotted heading\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity>\n        <ic-typography variant=\"h3\" slot=\"heading\">Heading</ic-typography>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity>\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\"></ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-typography slot=\"heading\" variant=\"h3\">\n      Heading\n     </ic-typography>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n\n  it(\"should render data-row children with slotted content\", async () => {\n    const page = await newSpecPage({\n      components: [DataEntity],\n      html: `\n      <ic-data-entity heading=\"Heading\">\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n        <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n      </ic-data-entity>`,\n    });\n\n    expect(page.root).toEqualHtml(`\n    <ic-data-entity heading=\"Heading\">\n      <mock:shadow-root>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">  \n            <ic-typography variant=\"h3\">\n              Heading\n            </ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\"></div>\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </mock:shadow-root>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n     <ic-data-row label=\"Label\" value=\"value\"><ic-link href=\"/\" slot=\"end-component\"></ic-link></ic-data-row>\n    </ic-data-entity>\n    `);\n  });\n});\n"]}

package/dist/collection/components/ic-data-row/ic-data-row.css

@@ -488,7 +488,7 @@ slot[name="value"]::slotted(ic-text-field[readonly][hide-label][rows]) {
 
 .divider {
   margin-top: var(--ic-space-md);
-  height: var(--ic-space-1px);
+  height: var(--ic-border-width);
   background-color: var(--ic-architectural-300);
 }
 

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -6,180 +6,180 @@ import { checkResizeObserver, DEVICE_SIZES, getCurrentDeviceSize, isSlotUsed, sl
  * @slot end-component - Content will be displayed in the rightmost cell.
  */
 export class DataRow {
-  constructor() {
-    this.hasEndComponent = false;
-    this.resizeObserver = null;
-    this.runResizeObserver = () => {
-      this.resizeObserver = new ResizeObserver(() => {
+    constructor() {
+        this.hasEndComponent = false;
+        this.resizeObserver = null;
+        this.runResizeObserver = () => {
+            this.resizeObserver = new ResizeObserver(() => {
+                this.checkLabelAbove();
+            });
+            this.resizeObserver.observe(this.el);
+        };
+        /**
+         * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
+         * @param label string - label of value
+         * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
+         */
+        this.renderLabel = (label) => {
+            if (isSlotUsed(this.el, "label")) {
+                return (h("div", { class: "label" }, h("slot", { name: "label" })));
+            }
+            else if (label) {
+                return (h("div", { class: "label" }, h("ic-typography", { variant: this.entitySize === "xs" ? "label" : "subtitle-large" }, label)));
+            }
+            return null;
+        };
+        this.deviceSize = DEVICE_SIZES.XL;
+        this.entitySize = undefined;
+        this.label = undefined;
+        this.size = "default";
+        this.small = false;
+        this.value = undefined;
+    }
+    disconnectedCallback() {
+        if (this.resizeObserver !== null) {
+            this.resizeObserver.disconnect();
+        }
+    }
+    componentWillLoad() {
+        this.deviceSize = getCurrentDeviceSize();
+        this.hasEndComponent = slotHasContent(this.el, "end-component");
         this.checkLabelAbove();
-      });
-      this.resizeObserver.observe(this.el);
-    };
-    /**
-     * Renders the label either as a ic-typography or slot. Slotted content takes precedence.
-     * @param label string - label of value
-     * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent
-     */
-    this.renderLabel = (label) => {
-      if (isSlotUsed(this.el, "label")) {
-        return (h("div", { class: "label" }, h("slot", { name: "label" })));
-      }
-      else if (label) {
-        return (h("div", { class: "label" }, h("ic-typography", { variant: this.entitySize === "xs" ? "label" : "subtitle-large" }, label)));
-      }
-      return null;
-    };
-    this.deviceSize = DEVICE_SIZES.XL;
-    this.entitySize = undefined;
-    this.label = undefined;
-    this.size = "default";
-    this.small = false;
-    this.value = undefined;
-  }
-  disconnectedCallback() {
-    if (this.resizeObserver !== null) {
-      this.resizeObserver.disconnect();
     }
-  }
-  componentWillLoad() {
-    this.deviceSize = getCurrentDeviceSize();
-    this.hasEndComponent = slotHasContent(this.el, "end-component");
-    this.checkLabelAbove();
-  }
-  componentDidLoad() {
-    checkResizeObserver(this.runResizeObserver);
-    if (this.hasEndComponent) {
-      this.labelEndComponent();
+    componentDidLoad() {
+        checkResizeObserver(this.runResizeObserver);
+        if (this.hasEndComponent) {
+            this.labelEndComponent();
+        }
     }
-  }
-  checkLabelAbove() {
-    var _a;
-    const rowSize = (_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    if (rowSize) {
-      if (rowSize + 46 < DEVICE_SIZES.S) {
-        this.entitySize = "xs";
-      }
-      else if (rowSize + 46 < DEVICE_SIZES.M) {
-        this.entitySize = "m";
-      }
-      else {
-        this.entitySize = "xl";
-      }
+    checkLabelAbove() {
+        var _a;
+        const rowSize = (_a = this.el.shadowRoot.querySelector(".data")) === null || _a === void 0 ? void 0 : _a.clientWidth;
+        if (rowSize) {
+            if (rowSize + 46 < DEVICE_SIZES.S) {
+                this.entitySize = "xs";
+            }
+            else if (rowSize + 46 < DEVICE_SIZES.M) {
+                this.entitySize = "m";
+            }
+            else {
+                this.entitySize = "xl";
+            }
+        }
     }
-  }
-  labelEndComponent() {
-    const component = this.el.shadowRoot.querySelectorAll("slot[name=end-component]");
-    component.forEach((child) => child.setAttribute("aria-label", "for " + this.label + " row"));
-  }
-  render() {
-    const { label, value, small, size } = this;
-    return (h(Host, { class: {
-        ["small"]: small || size === "small",
-        ["breakpoint-medium"]: this.entitySize === "m",
-        ["breakpoint-xs"]: this.entitySize === "xs",
-      }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, this.renderLabel(label), h("div", { class: "value" }, h("slot", { name: "value" }, h("ic-typography", { variant: "body" }, value)))), this.hasEndComponent && (h("div", { class: "end-component" }, h("div", { role: "cell" }, h("slot", { name: "end-component" }))))), h("div", { class: "divider" })));
-  }
-  static get is() { return "ic-data-row"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ic-data-row.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ic-data-row.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label in the leftmost cell of the row."
-        },
-        "attribute": "label",
-        "reflect": false
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "IcSizesNoLarge",
-          "resolved": "\"default\" | \"small\"",
-          "references": {
-            "IcSizesNoLarge": {
-              "location": "import",
-              "path": "../../utils/types",
-              "id": "src/utils/types.ts::IcSizesNoLarge"
+    labelEndComponent() {
+        const component = this.el.shadowRoot.querySelectorAll("slot[name=end-component]");
+        component.forEach((child) => child.setAttribute("aria-label", "for " + this.label + " row"));
+    }
+    render() {
+        const { label, value, small, size } = this;
+        return (h(Host, { class: {
+                ["small"]: small || size === "small",
+                ["breakpoint-medium"]: this.entitySize === "m",
+                ["breakpoint-xs"]: this.entitySize === "xs",
+            }, role: "listitem" }, h("div", { class: "data" }, h("div", { class: "text-cells" }, this.renderLabel(label), h("div", { class: "value" }, h("slot", { name: "value" }, h("ic-typography", { variant: "body" }, value)))), this.hasEndComponent && (h("div", { class: "end-component" }, h("div", { role: "cell" }, h("slot", { name: "end-component" }))))), h("div", { class: "divider" })));
+    }
+    static get is() { return "ic-data-row"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ic-data-row.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ic-data-row.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label in the leftmost cell of the row."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcSizesNoLarge",
+                    "resolved": "\"default\" | \"small\"",
+                    "references": {
+                        "IcSizesNoLarge": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcSizesNoLarge"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the data row component."
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "small": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
+                        }],
+                    "text": ""
+                },
+                "attribute": "small",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the middle (right if no end-component supplied) cell of the row."
+                },
+                "attribute": "value",
+                "reflect": false
             }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size of the data row component."
-        },
-        "attribute": "size",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "small": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-            }],
-          "text": ""
-        },
-        "attribute": "small",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "value": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The value of the middle (right if no end-component supplied) cell of the row."
-        },
-        "attribute": "value",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "deviceSize": {},
-      "entitySize": {}
-    };
-  }
-  static get elementRef() { return "el"; }
+        };
+    }
+    static get states() {
+        return {
+            "deviceSize": {},
+            "entitySize": {}
+        };
+    }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=ic-data-row.js.map

package/dist/collection/components/ic-data-row/ic-data-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  /**\n   * Renders the label either as a ic-typography or slot. Slotted content takes precedence.\n   * @param label string - label of value\n   * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent\n   */\n  private renderLabel = (label: string) => {\n    if (isSlotUsed(this.el, \"label\")) {\n      return (\n        <div class=\"label\">\n          <slot name=\"label\"></slot>\n        </div>\n      );\n    } else if (label) {\n      return (\n        <div class=\"label\">\n          <ic-typography\n            variant={this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"}\n          >\n            {label}\n          </ic-typography>\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  render() {\n    const { label, value, small, size } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small || size === \"small\",\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {this.renderLabel(label)}\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-data-row.js","sourceRoot":"","sources":["../../../src/components/ic-data-row/ic-data-row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge } from \"../../utils/types\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"default\";\n\n  /**\n   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  /**\n   * Renders the label either as a ic-typography or slot. Slotted content takes precedence.\n   * @param label string - label of value\n   * @returns HTMLDivElement - returns label as slot or ic-typography with label as textContent\n   */\n  private renderLabel = (label: string) => {\n    if (isSlotUsed(this.el, \"label\")) {\n      return (\n        <div class=\"label\">\n          <slot name=\"label\"></slot>\n        </div>\n      );\n    } else if (label) {\n      return (\n        <div class=\"label\">\n          <ic-typography\n            variant={this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"}\n          >\n            {label}\n          </ic-typography>\n        </div>\n      );\n    }\n\n    return null;\n  };\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  render() {\n    const { label, value, small, size } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small || size === \"small\",\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {this.renderLabel(label)}\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-data-row/test/a11y/ic-data-row.test.a11y.js

@@ -1,18 +1,20 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
 import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
-describe("skeleton component", () => {
-  it("passes accessibility", async () => {
-    const el = await fixture("<ic-data-row />");
-    checkShadowElementRendersCorrectly(el);
-    expect(await axe(el, {
-      // Rule met by wrapping slot in parent component in <ul>
-      rules: {
-        "aria-required-parent": {
-          enabled: false,
-        },
-      },
-    })).toHaveNoViolations();
-  });
+describe("data row component", () => {
+    it("passes accessibility", async () => {
+        const matchMedia = jest.fn().mockReturnValue(true);
+        window.matchMedia = matchMedia;
+        const el = await fixture("<ic-data-row />");
+        checkShadowElementRendersCorrectly(el);
+        expect(await axe(el, {
+            // Rule met by wrapping slot in parent component in <ul>
+            rules: {
+                "aria-required-parent": {
+                    enabled: false,
+                },
+            },
+        })).toHaveNoViolations();
+    });
 });
 //# sourceMappingURL=ic-data-row.test.a11y.js.map

package/dist/collection/components/ic-data-row/test/a11y/ic-data-row.test.a11y.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-row.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-row/test/a11y/ic-data-row.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC5C,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CACJ,MAAM,GAAG,CAAC,EAAE,EAAE;MACZ,wDAAwD;MACxD,KAAK,EAAE;QACL,sBAAsB,EAAE;UACtB,OAAO,EAAE,KAAK;SACf;OACF;KACF,CAAC,CACH,CAAC,kBAAkB,EAAE,CAAC;EACzB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"skeleton component\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\"<ic-data-row />\");\n    checkShadowElementRendersCorrectly(el);\n    expect(\n      await axe(el, {\n        // Rule met by wrapping slot in parent component in <ul>\n        rules: {\n          \"aria-required-parent\": {\n            enabled: false,\n          },\n        },\n      })\n    ).toHaveNoViolations();\n  });\n});\n"]}
+{"version":3,"file":"ic-data-row.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-data-row/test/a11y/ic-data-row.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;IAClC,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;QACpC,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,CAAC,UAAU,GAAG,UAAU,CAAC;QAC/B,MAAM,EAAE,GAAG,MAAM,OAAO,CAAC,iBAAiB,CAAC,CAAC;QAC5C,kCAAkC,CAAC,EAAE,CAAC,CAAC;QACvC,MAAM,CACJ,MAAM,GAAG,CAAC,EAAE,EAAE;YACZ,wDAAwD;YACxD,KAAK,EAAE;gBACL,sBAAsB,EAAE;oBACtB,OAAO,EAAE,KAAK;iBACf;aACF;SACF,CAAC,CACH,CAAC,kBAAkB,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"data row component\", () => {\n  it(\"passes accessibility\", async () => {\n    const matchMedia = jest.fn().mockReturnValue(true);\n    window.matchMedia = matchMedia;\n    const el = await fixture(\"<ic-data-row />\");\n    checkShadowElementRendersCorrectly(el);\n    expect(\n      await axe(el, {\n        // Rule met by wrapping slot in parent component in <ul>\n        rules: {\n          \"aria-required-parent\": {\n            enabled: false,\n          },\n        },\n      })\n    ).toHaveNoViolations();\n  });\n});\n"]}