@ukic/canary-web-components 3.0.0-canary.3 → 3.0.0-canary.4

package/dist/components/ic-classification-banner.js.map

@@ -1 +1 @@
-{"file":"ic-classification-banner.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,s5HAAs5H;;ACCx7H,MAAM,kBAAkB,GAAG;IACvB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC7B,CAAC;MACW,oBAAoB;IAC7B;;;;QACI,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IACD,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;;QAE9B,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YACR,OAAO,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,mBAAmB;YACpB,mBAAmB,GAAG,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc;aACd,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YACvD,cAAc,GAAG,SAAS,CAAC;QAC/B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,iCAAiC,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,oBAAoB,EAAE,KAAK,EAAE;gBAC7H,CAAC,uBAAuB,GAAG,IAAI;gBAC/B,CAAC,GAAG,cAAc,EAAE,GAAG,cAAc;aACxC,EAAE,EAAE,cAAc,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,yCAAyC,EAAE,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,cAAc,KAAK,SAAS;cAC/M,kBAAkB,CAAC,cAAc,CAAC;cAClC,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE;iBACnB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE;KACtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-classification-banner/ic-classification-banner.css?tag=ic-classification-banner&encapsulation=shadow","../web-components/dist/collection/components/ic-classification-banner/ic-classification-banner.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n/**\n * @prop --ic-z-index-classification-banner: z-index of classification banner\n */\n\n:host {\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: var(--ic-space-lg);\n  z-index: var(--ic-z-index-classification-banner);\n\n  --ic-typography-color: currentcolor;\n\n  /* classification official */\n  --ic-color-classification-official: var(--ic-color-classification-blue);\n  --ic-color-classification-official-foreground: #fff;\n\n  /* classification secret */\n  --ic-color-classification-secret: var(--ic-color-classification-yellow);\n  --ic-color-classification-secret-foreground: #000;\n\n  /* classification top secret */\n  --ic-color-classification-top-secret: var(--ic-color-classification-red);\n  --ic-color-classification-top-secret-foreground: #fff;\n\n  /* classification not set */\n  --ic-color-classification-not-set: var(--ic-color-classification-grey);\n  --ic-color-classification-not-set-foreground: #fff;\n}\n\n:host(.ic-classification-banner-inline) {\n  position: static;\n  left: auto;\n  bottom: auto;\n}\n\n.classification-banner {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-md);\n}\n\n.default {\n  background-color: var(--ic-color-classification-not-set);\n  color: var(--ic-color-classification-not-set-foreground);\n}\n\n.official,\n.official-sensitive {\n  background-color: var(--ic-color-classification-official);\n  color: var(--ic-color-classification-official-foreground);\n}\n\n.secret {\n  background-color: var(--ic-color-classification-secret);\n  color: var(--ic-color-classification-secret-foreground);\n}\n\n.top-secret {\n  background-color: var(--ic-color-classification-top-secret);\n  color: var(--ic-color-classification-top-secret-foreground);\n}\n\n.offscreen {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n@media (forced-colors: active) {\n  .classification-banner {\n    border: var(--ic-border-hc);\n  }\n}\n","import { h, Host } from \"@stencil/core\";\nconst classificationText = {\n    default: \"protective marking not set\",\n    official: \"official\",\n    \"official-sensitive\": \"official sensitive\",\n    secret: \"secret\",\n    \"top-secret\": \"top secret\",\n};\nexport class ClassificationBanner {\n    constructor() {\n        this.additionalSelectors = \"\";\n        this.classification = \"default\";\n        this.country = \"uk\";\n        this.inline = false;\n        this.upTo = false;\n    }\n    render() {\n        const { inline, upTo } = this;\n        // In case of unrecognized props, fallback to default\n        let { country, additionalSelectors, classification } = this;\n        if (!country)\n            country = \"\";\n        if (!additionalSelectors)\n            additionalSelectors = \"\";\n        if (!classification ||\n            (classification && !classificationText[classification]))\n            classification = \"default\";\n        return (h(Host, { class: { [\"ic-classification-banner-inline\"]: inline } }, h(\"banner\", { \"aria-label\": \"Protective marking\", class: {\n                [\"classification-banner\"]: true,\n                [`${classification}`]: classification,\n            } }, classification !== \"default\" ? (h(\"span\", { class: \"offscreen\" }, \"The protective marking of this page is:\", \" \")) : null, h(\"ic-typography\", { variant: \"caption-uppercase\" }, classification === \"default\"\n            ? classificationText[classification]\n            : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`))));\n    }\n    static get is() { return \"ic-classification-banner\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-classification-banner.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-classification-banner.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"additionalSelectors\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The additional information that will be displayed after the classification.\"\n                },\n                \"attribute\": \"additional-selectors\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"classification\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcProtectiveMarkings\",\n                    \"resolved\": \"\\\"default\\\" | \\\"official\\\" | \\\"official-sensitive\\\" | \\\"secret\\\" | \\\"top-secret\\\"\",\n                    \"references\": {\n                        \"IcProtectiveMarkings\": {\n                            \"location\": \"import\",\n                            \"path\": \"./ic-classification-banner.types\",\n                            \"id\": \"src/components/ic-classification-banner/ic-classification-banner.types.tsx::IcProtectiveMarkings\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The classification level to be displayed - also determines the banner and text colour.\"\n                },\n                \"attribute\": \"classification\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"default\\\"\"\n            },\n            \"country\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The optional text that will be displayed before classification to specify relevant country/countries.\"\n                },\n                \"attribute\": \"country\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"uk\\\"\"\n            },\n            \"inline\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\"\n                },\n                \"attribute\": \"inline\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"upTo\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, \\\"Up to\\\" will be displayed before the classification and country.\"\n                },\n                \"attribute\": \"up-to\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n}\n//# sourceMappingURL=ic-classification-banner.js.map\n"],"version":3}
+{"file":"ic-classification-banner.js","mappings":";;;AAAA,MAAM,yBAAyB,GAAG,+gHAA+gH;;ACCjjH,MAAM,kBAAkB,GAAG;IACvB,OAAO,EAAE,4BAA4B;IACrC,QAAQ,EAAE,UAAU;IACpB,oBAAoB,EAAE,oBAAoB;IAC1C,MAAM,EAAE,QAAQ;IAChB,YAAY,EAAE,YAAY;CAC7B,CAAC;MACW,oBAAoB;IAC7B;;;;QACI,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAChC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAC;KACrB;IACD,MAAM;QACF,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;;QAE9B,IAAI,EAAE,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;QAC5D,IAAI,CAAC,OAAO;YACR,OAAO,GAAG,EAAE,CAAC;QACjB,IAAI,CAAC,mBAAmB;YACpB,mBAAmB,GAAG,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc;aACd,cAAc,IAAI,CAAC,kBAAkB,CAAC,cAAc,CAAC,CAAC;YACvD,cAAc,GAAG,SAAS,CAAC;QAC/B,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,iCAAiC,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,EAAE,EAAE,YAAY,EAAE,oBAAoB,EAAE,KAAK,EAAE;gBAC7H,CAAC,uBAAuB,GAAG,IAAI;gBAC/B,CAAC,GAAG,cAAc,EAAE,GAAG,cAAc;aACxC,EAAE,EAAE,cAAc,KAAK,SAAS,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,yCAAyC,EAAE,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,eAAe,EAAE,EAAE,OAAO,EAAE,mBAAmB,EAAE,EAAE,cAAc,KAAK,SAAS;cAC/M,kBAAkB,CAAC,cAAc,CAAC;cAClC,GAAG,IAAI,GAAG,OAAO,GAAG,EAAE;iBACnB,OAAO;iBACP,kBAAkB,CAAC,cAAc,CAAC;iBAClC,mBAAmB,EAAE,CAAC,CAAC,CAAC,EAAE;KACtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["../web-components/dist/collection/components/ic-classification-banner/ic-classification-banner.css?tag=ic-classification-banner&encapsulation=shadow","../web-components/dist/collection/components/ic-classification-banner/ic-classification-banner.js"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n/**\n * @prop --ic-z-index-classification-banner: z-index of classification banner\n */\n\n:host {\n  position: fixed;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: var(--ic-space-lg);\n  z-index: var(--ic-z-index-classification-banner);\n\n  --ic-typography-color: currentcolor;\n}\n\n:host(.ic-classification-banner-inline) {\n  position: static;\n  left: auto;\n  bottom: auto;\n}\n\n.classification-banner {\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: var(--ic-space-xxxs) var(--ic-space-md);\n}\n\n.default {\n  background-color: var(--ic-classification-banner-not-set);\n  color: var(--ic-classification-banner-text-inverted);\n}\n\n.official {\n  background-color: var(--ic-classification-banner-official);\n  color: var(--ic-classification-banner-text-inverted);\n}\n\n.official-sensitive {\n  background-color: var(--ic-classification-banner-official-sensitive);\n  color: var(--ic-classification-banner-text-inverted);\n}\n\n.secret {\n  background-color: var(--ic-classification-banner-secret);\n  color: var(--ic-classification-banner-text);\n}\n\n.top-secret {\n  background-color: var(--ic-classification-banner-top-secret);\n  color: var(--ic-classification-banner-text-inverted);\n}\n\n.offscreen {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n@media (forced-colors: active) {\n  .classification-banner {\n    border: var(--ic-border-hc);\n  }\n}\n","import { h, Host } from \"@stencil/core\";\nconst classificationText = {\n    default: \"protective marking not set\",\n    official: \"official\",\n    \"official-sensitive\": \"official sensitive\",\n    secret: \"secret\",\n    \"top-secret\": \"top secret\",\n};\nexport class ClassificationBanner {\n    constructor() {\n        this.additionalSelectors = \"\";\n        this.classification = \"default\";\n        this.country = \"uk\";\n        this.inline = false;\n        this.upTo = false;\n    }\n    render() {\n        const { inline, upTo } = this;\n        // In case of unrecognized props, fallback to default\n        let { country, additionalSelectors, classification } = this;\n        if (!country)\n            country = \"\";\n        if (!additionalSelectors)\n            additionalSelectors = \"\";\n        if (!classification ||\n            (classification && !classificationText[classification]))\n            classification = \"default\";\n        return (h(Host, { class: { [\"ic-classification-banner-inline\"]: inline } }, h(\"banner\", { \"aria-label\": \"Protective marking\", class: {\n                [\"classification-banner\"]: true,\n                [`${classification}`]: classification,\n            } }, classification !== \"default\" ? (h(\"span\", { class: \"offscreen\" }, \"The protective marking of this page is:\", \" \")) : null, h(\"ic-typography\", { variant: \"caption-uppercase\" }, classification === \"default\"\n            ? classificationText[classification]\n            : `${upTo ? \"up to\" : \"\"} \n               ${country} \n               ${classificationText[classification]} \n               ${additionalSelectors}`))));\n    }\n    static get is() { return \"ic-classification-banner\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"ic-classification-banner.css\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"ic-classification-banner.css\"]\n        };\n    }\n    static get properties() {\n        return {\n            \"additionalSelectors\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The additional information that will be displayed after the classification.\"\n                },\n                \"attribute\": \"additional-selectors\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"\\\"\"\n            },\n            \"classification\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"IcProtectiveMarkings\",\n                    \"resolved\": \"\\\"default\\\" | \\\"official\\\" | \\\"official-sensitive\\\" | \\\"secret\\\" | \\\"top-secret\\\"\",\n                    \"references\": {\n                        \"IcProtectiveMarkings\": {\n                            \"location\": \"import\",\n                            \"path\": \"./ic-classification-banner.types\",\n                            \"id\": \"src/components/ic-classification-banner/ic-classification-banner.types.tsx::IcProtectiveMarkings\"\n                        }\n                    }\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The classification level to be displayed - also determines the banner and text colour.\"\n                },\n                \"attribute\": \"classification\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"default\\\"\"\n            },\n            \"country\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The optional text that will be displayed before classification to specify relevant country/countries.\"\n                },\n                \"attribute\": \"country\",\n                \"reflect\": false,\n                \"defaultValue\": \"\\\"uk\\\"\"\n            },\n            \"inline\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, the banner will appear inline with the page, instead of sticking to the bottom of the page.\"\n                },\n                \"attribute\": \"inline\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            },\n            \"upTo\": {\n                \"type\": \"boolean\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"boolean\",\n                    \"resolved\": \"boolean\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"If `true`, \\\"Up to\\\" will be displayed before the classification and country.\"\n                },\n                \"attribute\": \"up-to\",\n                \"reflect\": false,\n                \"defaultValue\": \"false\"\n            }\n        };\n    }\n}\n//# sourceMappingURL=ic-classification-banner.js.map\n"],"version":3}

package/dist/components/ic-data-table.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
-import { d as dynamicDebounce, a as isEmptyString, p as pxToRem, i as isSlotUsed, b as addDataToPosition, e as getSlotElements } from './helpers2.js';
+import { d as dynamicDebounce, a as isEmptyString, p as pxToRem, i as isSlotUsed, b as addDataToPosition, e as getSlotElements, f as checkResizeObserver } from './helpers2.js';
 import { d as defineCustomElement$h } from './ic-button2.js';
 import { d as defineCustomElement$g } from './ic-empty-state2.js';
 import { d as defineCustomElement$f } from './ic-input-component-container2.js';
@@ -29,7 +29,7 @@ const descendingIcon = `<svg focusable="false" aria-hidden="true" viewBox="0 0 2
     <path d="M16.01 11H4v2h12.01v3L20 12l-3.99-4z"></path>
 </svg>`;
 
-const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height)}.truncation-show-hide{overflow:visible;display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}ic-loading-indicator.ic-theme-dark{--inner-color:var(--ic-action-default-dark);--outer-color:var(--ic-action-neutral-light);--label-color:var(--ic-color-text-primary-dark)}ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome{--inner-color:var(--ic-action-light);--outer-color:var(--ic-action-neutral-dark);--label-color:var(--ic-color-text-inverse-dark)}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-border-light)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-pressed)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-text-tertiary)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low{--ic-typography-color:var(--ic-color-text-secondary)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-border-light)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading.show-background{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}@media screen and (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}";
+const icDataTableCss = ":host{position:relative;display:inline-flex;max-height:100%;width:var(--table-width, 100%);height:100%;min-width:var(--table-min-width);max-width:var(--table-max-width)}tbody{vertical-align:top}.table-container{position:relative;height:calc(100% - var(--ic-space-xxxs));display:flex;flex-direction:column;width:100%}.cell-container{display:flex;min-height:1.5rem;overflow-y:hidden;height:var(--row-height)}.truncation-show-hide{overflow:visible;display:block}.cell-icon.truncation-show-hide{display:flex}.cell-container:not(.data-type-element,.truncation-show-hide){overflow-x:hidden}ic-loading-indicator{position:sticky;top:20px}ic-loading-indicator.ic-theme-dark{--inner-color:var(--ic-action-default-dark);--outer-color:var(--ic-action-neutral-light);--label-color:var(--ic-color-text-primary-dark)}ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome{--inner-color:var(--ic-action-light);--outer-color:var(--ic-action-neutral-dark);--label-color:var(--ic-color-text-inverse-dark)}.table-row-container{position:relative;height:100%;overflow:auto;transition:var(--ic-easing-transition-fast);overflow-anchor:none}:host([show-pagination=\"true\"]) .table-row-container{height:calc(100% - 3.5625rem)}table{table-layout:var(--table-layout, \"fixed\");border-spacing:0;width:100%;height:var(--table-height, auto)}.table-row-container:focus{outline:none;box-shadow:var(--ic-border-focus);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast);z-index:1}:host([embedded=\"true\"]) .table-row-container{border:var(--ic-border-light)}.column-header-inner-container{padding:var(--ic-space-xs);box-sizing:border-box}.column-header-inner-container ic-tooltip{pointer-events:none}.column-header-inner-container ic-tooltip.show-trunc-tooltip{pointer-events:auto}.column-header-inner-container ic-tooltip .column-header-text{--ic-line-clamp:1}.column-header-sticky{position:sticky;top:0;z-index:1}.column-header-overlay{position:sticky;top:0;z-index:1;box-shadow:0 0.375rem var(--ic-space-xs) calc(var(--ic-space-xxs * -1))\n    rgb(0 0 0 / 20%)}.row-header-sticky{position:sticky;left:0}.column-header,.table-row{box-sizing:border-box}.table-row-selected{background-color:var(--ic-table-row-selected) !important}.sort-button{margin-left:auto}.sort-button:hover{background-color:var(--ic-action-dark-bg-hover)}.sort-button:active{background-color:var(--ic-action-dark-bg-pressed)}.sort-button svg{color:var(--ic-architectural-black)}.sort-button-unsorted svg{color:var(--ic-color-text-tertiary)}.table-density-dense .column-header-inner-container,td.table-density-dense{padding:var(--ic-space-xxs) var(--ic-space-xs) !important}.text-dense{font-size:var(--ic-font-size-label)}.table-density-spacious .column-header-inner-container,td.table-density-spacious{padding:0.625rem var(--ic-space-xs) !important}.text-spacious{font-size:1.125rem}.column-header-text{font-weight:var(--ic-font-weight-bold)}.dummy-column-header-text{white-space:nowrap;overflow:hidden;height:0;width:-moz-fit-content;width:fit-content}.row-header,.column-header{text-align:left;padding:var(--ic-space-xs);background-color:var(--ic-architectural-40);border-right:var(--ic-border-light);border-bottom:var(--ic-border-light)}.column-header{padding:0;width:var(--column-width);min-width:var(--column-min-width, 4rem);max-width:var(--column-max-width)}.column-header:last-child{border-right:none}.scrollable .column-header:last-child{border-right:var(--ic-border-light) !important}:host([embedded=\"true\"]) tr:last-child .table-cell,:host([embedded=\"true\"]) tr:last-child .row-header{border-bottom:none}.column-header-alignment-left,.row-header-alignment-left,.cell-alignment-left{text-align:left !important;justify-content:start !important}.column-header-alignment-right,.row-header-alignment-right,.cell-alignment-right{text-align:right !important;justify-content:end !important}.cell-alignment-right.truncation-tooltip ic-tooltip ic-typography{padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.cell-alignment-right.truncation-show-hide ic-typography{--ellipsis-padding-right:calc(var(--ic-space-xxs) + var(--ic-space-xs))}.column-header-alignment-center,.row-header-alignment-center,.cell-alignment-center{text-align:center !important;justify-content:center !important}.table-row:nth-child(even){background-color:var(--ic-architectural-20)}.table-cell{padding:var(--ic-space-xs);border-bottom:solid var(--ic-architectural-100) var(--ic-space-1px);overflow:hidden;box-sizing:border-box;max-width:var(--column-max-width);min-width:var(--column-min-width)}.table-cell.with-overflow{overflow:visible}.data-type-string,.data-type-address{text-align:left;vertical-align:top}.data-type-number,.data-type-date{text-align:right;justify-content:end;vertical-align:top}.cell-alignment-top{vertical-align:top;align-items:flex-start}.cell-alignment-middle{vertical-align:middle;align-items:center}.cell-alignment-bottom{vertical-align:bottom;align-items:flex-end}.cell-emphasis-low{--ic-typography-color:var(--ic-color-text-secondary)}.cell-emphasis-high{font-weight:var(--ic-font-weight-bold)}.pagination-container{background-color:var(--ic-architectural-40);border-top:var(--ic-border-light)}.screen-reader-sort-text,.table-caption{position:absolute;left:-100rem}.table-cell,.column-header,.row-header{word-wrap:break-word;white-space:pre-wrap}.loading-empty{padding:var(--ic-space-xl) var(--ic-space-xxl);margin-top:var(--ic-space-xl)}.updating-state{padding:0;border-bottom:var(--ic-border-light)}.updating-state-headers{border-bottom:none}.loading{position:absolute;left:calc(50% - 5.9741rem);opacity:0;transition:opacity var(--ic-transition-duration-slow)}.loading.show-background{background-color:var(--ic-architectural-white);border:var(--ic-border-light)}.loading.show{opacity:1}.icon,::slotted(svg){height:var(--ic-space-lg);width:var(--ic-space-lg);margin-right:var(--ic-space-xxs)}.column-header-alignment-right>.icon,.row-header-alignment-right>.icon,.cell-alignment-right>.icon,.column-header-alignment-right>::slotted(svg),.row-header-alignment-right>::slotted(svg),.cell-alignment-right>::slotted(svg){margin-right:auto}.column-header-alignment-center>ic-typography,.row-header-alignment-right>ic-typography,.cell-alignment-center>ic-typography{flex:1}.icon>svg{height:var(--ic-space-lg);width:var(--ic-space-lg);display:inline-block}.truncation-tooltip ic-typography{display:-webkit-box;-webkit-line-clamp:var(--ic-line-clamp, 0);-webkit-box-orient:vertical;overflow:hidden}.truncation-tooltip ic-typography,.truncation-show-hide ic-typography{white-space:normal}.ic-tooltip-overflow{overflow:hidden;width:100%}@media screen and (min-width: 577px){.column-header-inner-container{display:flex;align-items:center}}";
 
 const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLElement {
     constructor() {
@@ -72,6 +72,34 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.densityUpdate = false;
         this.truncationPatternUpdated = false;
         this.isNewDebounceDelaySet = false;
+        this.headerResizeObserver = null;
+        this.IC_TOOLTIP_STRING = "ic-tooltip";
+        this.SHOW_TRUNC_TOOLTIP_STRING = "show-trunc-tooltip";
+        this.runHeaderResizeObserver = () => {
+            this.headerResizeObserver = new ResizeObserver(() => {
+                this.headerResizeCallback();
+            });
+            this.headerResizeObserver.observe(this.el);
+        };
+        this.headerResizeCallback = () => {
+            if (!this.hideColumnHeaders && this.columnHeaderTruncation) {
+                const tableContainerWidth = this.el.shadowRoot.querySelector(".table-container").clientWidth;
+                if (tableContainerWidth !== this.prevTableContainerWidth) {
+                    const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+                    headers.forEach((header) => {
+                        const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                        const typographyEls = header.querySelectorAll("ic-typography");
+                        if (tooltip && typographyEls && typographyEls.length === 2) {
+                            tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            if (typographyEls[1].clientWidth > typographyEls[0].clientWidth) {
+                                tooltip.classList.add(this.SHOW_TRUNC_TOOLTIP_STRING);
+                            }
+                        }
+                    });
+                    this.prevTableContainerWidth = tableContainerWidth;
+                }
+            }
+        };
         this.updateSetRowHeight = (typographyEl) => {
             const fontSize = parseInt(getComputedStyle(document.documentElement).fontSize);
             if (typographyEl) {
@@ -337,18 +365,22 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             });
         };
         this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }) => (h("th", { scope: "col", class: {
+            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index) => (h("th", { scope: "col", class: {
                     ["column-header"]: true,
                     [`table-density-${this.density}`]: this.notDefaultDensity(),
                     ["updating-state-headers"]: this.updating && !this.loading,
                 }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, h("div", { class: {
                     "column-header-inner-container": true,
+                    "truncation-tooltip": this.columnHeaderTruncation,
                     [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
                 } }, isSlotUsed(this.el, `${key}-column-icon`) ? (h("slot", { name: `${key}-column-icon` })) : (icon &&
-                !icon.hideOnHeader && (h("span", { class: "icon", innerHTML: icon.icon }))), h("ic-typography", { variant: "body", class: {
+                !icon.hideOnHeader && (h("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (h("ic-tooltip", { label: title, target: `column-header-${index}` }, h("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
                     ["column-header-text"]: true,
                     [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title), this.sortable && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+                } }, title))) : (h("ic-typography", { variant: "body", class: {
+                    ["column-header-text"]: true,
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, title)), this.sortable && (h("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
                 // eslint-disable-next-line react/jsx-no-bind
                 onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
                     ? this.sortedColumnOrder
@@ -356,7 +388,11 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     ["sort-button"]: true,
                     ["sort-button-unsorted"]: this.sortedColumn !== key ||
                         this.sortedColumnOrder === "unsorted",
-                } }))))));
+                } }))), this.columnHeaderTruncation && (h("ic-typography", { variant: "body", "aria-hidden": "true", class: {
+                    ["column-header-text"]: true,
+                    ["dummy-column-header-text"]: this.columnHeaderTruncation,
+                    [`text-${this.density}`]: this.notDefaultDensity(),
+                } }, title)))));
         };
         this.onRowClick = (row) => {
             this.selectedRow =
@@ -501,7 +537,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                     var _a;
                     const tooltipEl = (slottedEl.tagName === "IC-TOOLTIP"
                         ? slottedEl
-                        : (_a = slottedEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector("ic-tooltip"));
+                        : (_a = slottedEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(this.IC_TOOLTIP_STRING));
                     if (tooltipEl) {
                         tooltipEl.setExternalPopperProps({
                             strategy: "fixed",
@@ -522,6 +558,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.currentRowHeight = undefined;
         this.debounceDelay = 0;
         this.caption = undefined;
+        this.columnHeaderTruncation = false;
         this.columns = undefined;
         this.data = undefined;
         this.density = "default";
@@ -545,11 +582,12 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
             showItemsPerPageControl: true,
             showGoToPageControl: true,
             alignment: "right",
-            appearance: "default",
             itemLabel: "Item",
             pageLabel: "Page",
             hideRangeLabel: false,
             hideAllFromItemsPerPage: false,
+            theme: "inherit",
+            monochrome: false,
         };
         this.showPagination = false;
         this.sortable = false;
@@ -566,9 +604,24 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         this.variableRowHeight = undefined;
         this.width = undefined;
     }
+    headerTruncationChangeHandler() {
+        if (this.columnHeaderTruncation) {
+            this.prevTableContainerWidth = 0;
+        }
+        else {
+            const headers = this.el.shadowRoot.querySelectorAll("th.column-header");
+            headers.forEach((header) => {
+                const tooltip = header.querySelector(this.IC_TOOLTIP_STRING);
+                if (tooltip) {
+                    tooltip.classList.remove(this.SHOW_TRUNC_TOOLTIP_STRING);
+                }
+            });
+        }
+    }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.headerResizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     componentWillLoad() {
         var _a;
@@ -584,6 +637,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     componentDidLoad() {
         const tableElement = this.el.shadowRoot.querySelector("table");
         const tableContainer = this.el.shadowRoot.querySelector(".table-container");
+        checkResizeObserver(this.runHeaderResizeObserver);
         if (this.dataUpdated) {
             this.dataUpdated = false;
         }
@@ -998,7 +1052,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         typographyEl.setAttribute("style", `--ic-line-clamp: ${this.getLines(cellContainer === null || cellContainer === void 0 ? void 0 : cellContainer.clientHeight)}`);
     }
     createTruncationTooltip(typographyEl, cellContainer) {
-        const tooltipEl = document.createElement("ic-tooltip");
+        const tooltipEl = document.createElement(this.IC_TOOLTIP_STRING);
         tooltipEl.setAttribute("target", typographyEl.id);
         tooltipEl.setAttribute("label", typographyEl.textContent);
         tooltipEl.classList.add("ic-tooltip-overflow");
@@ -1027,12 +1081,13 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
                 "loading-empty": loading,
                 loading: true,
                 "show-background": loadingOptions.showBackground,
-            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { totalItems: data.length, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, appearance: paginationBarOptions.appearance, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
+            }, description: loadingOptions.description || "Loading table data", label: loadingOptions.label || "Loading...", labelDuration: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.labelDuration, max: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.max, min: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.min, progress: loadingOptions === null || loadingOptions === void 0 ? void 0 : loadingOptions.progress, ref: (el) => (this.loadingIndicator = el) })), (showPagination || isSlotUsed(this.el, "pagination-bar")) && (h("div", { class: "pagination-container" }, isSlotUsed(this.el, "pagination-bar") ? (h("slot", { name: "pagination-bar" })) : (h("ic-pagination-bar", { totalItems: data.length, type: paginationBarOptions.type, rangeLabelType: paginationBarOptions.rangeLabelType, showItemsPerPageControl: paginationBarOptions.showItemsPerPageControl, showGoToPageControl: paginationBarOptions.showGoToPageControl, itemsPerPageOptions: paginationBarOptions.itemsPerPageOptions, alignment: paginationBarOptions.alignment, theme: paginationBarOptions.theme, monochrome: paginationBarOptions.monochrome, itemLabel: paginationBarOptions.itemLabel, pageLabel: paginationBarOptions.pageLabel, hideRangeLabel: paginationBarOptions.hideRangeLabel, hideAllFromItemsPerPage: paginationBarOptions.hideAllFromItemsPerPage })))), sortable && (h("div", { class: "screen-reader-sort-text", "aria-live": "polite" }, sortedColumnOrder !== "unsorted" && sortedColumn
             ? `${sortedColumn} sorted ${sortedColumnOrder}`
             : "table unsorted")))));
     }
     get el() { return this; }
     static get watchers() { return {
+        "columnHeaderTruncation": ["headerTruncationChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],
@@ -1043,6 +1098,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
     static get style() { return icDataTableCss; }
 }, [1, "ic-data-table", {
         "caption": [1],
+        "columnHeaderTruncation": [4, "column-header-truncation"],
         "columns": [16],
         "data": [16],
         "density": [1025],
@@ -1080,6 +1136,7 @@ const DataTable = /*@__PURE__*/ proxyCustomElement(class DataTable extends HTMLE
         "debounceDelay": [32],
         "resetRowHeights": [64]
     }, [[0, "typographyTruncationExpandToggle", "handleTypographyTruncationExpandToggle"], [0, "icPageChange", "handlePageChange"], [0, "icItemsPerPageChange", "handleItemsPerPageChange"], [0, "icTableDensityUpdate", "handleDensityChange"], [8, "click", "clickListener"]], {
+        "columnHeaderTruncation": ["headerTruncationChangeHandler"],
         "loading": ["loadingHandler"],
         "truncationPattern": ["truncationPatternHandler"],
         "data": ["dataHandler"],