@ukic/canary-web-components 3.0.0-canary.14 → 3.0.0-canary.16

package/dist/cjs/ic-data-list.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a24b20c.js');
+const index = require('./index-d337cd8a.js');
 
 const icDataListCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.heading{--ic-typography-color:var(--ic-data-list-text-heading)}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.ic-data-list-small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-data-list-keyline-heading)}:host(.ic-data-list-small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}";
 const IcDataListStyle0 = icDataListCss;

package/dist/cjs/ic-data-row.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a24b20c.js');
-const helpers = require('./helpers-fc51fdcb.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-199b92d5.js');
 
 const icDataRowCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{position:relative;display:block}.data{display:flex;align-items:center}.text-cells{display:flex;flex-grow:1;min-width:0;--ic-typography-color:var(--ic-data-list-text-cell)}.label{width:12.5rem;min-width:12.5rem;margin-right:var(--ic-space-md);--ic-typography-color:var(--ic-data-list-text-label)}.value{flex-grow:1}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]){margin-top:calc(var(--ic-space-xs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]){margin-top:calc(var(--ic-space-xxs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]){margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}.end-component{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}.divider{margin-top:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-data-list-keyline-cell)}:host(.ic-data-row-small) .divider{margin-top:var(--ic-space-xs)}:host(.breakpoint-medium) .label{width:10rem;min-width:10rem}:host(.breakpoint-xs) .text-cells{flex-direction:column}:host(.breakpoint-xs) .label{width:8rem;margin-bottom:var(--ic-space-xs)}:host(.breakpoint-xs) .value{max-width:95%}:host(.breakpoint-xs) .end-component{margin-left:0}@media (forced-colors: active){.divider{background-color:canvastext}}";
 const IcDataRowStyle0 = icDataRowCss;

package/dist/cjs/ic-data-table-title-bar.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-8a24b20c.js');
-const helpers = require('./helpers-32016c21.js');
+const index = require('./index-d337cd8a.js');
+const helpers = require('./helpers-d01564f7.js');
 
 const icDataTableTitleBarCss = ".title-bar-wrapper,.header-container,.description-actions,.action-area,.custom-actions-wrapper{display:flex}.title-bar-wrapper,.action-area,.custom-actions-wrapper{gap:var(--ic-space-xs)}.title-bar-wrapper{flex-direction:column;padding:var(--ic-space-sm) var(--ic-space-xs);border-bottom:var(--ic-space-1px) solid\n    var(--ic-data-table-title-bar-keyline);background-color:var(--ic-data-table-title-bar-background)}.full-width{padding:var(--ic-space-sm) 0;border-bottom:none}ic-typography.heading h3{margin:0}ic-typography.ic-typography-subtitle-small{--ic-typography-color:var(--ic-data-table-title-bar-information)}ic-typography.ic-typography-h3,::slotted([slot=\"header\"]){max-width:50rem;color:var(--ic-data-table-title-bar-title);--ic-typography-color:var(--ic-data-table-title-bar-title)}ic-typography.ic-typography-body,::slotted([slot=\"description\"]){color:var(--ic-data-table-title-bar-description);--ic-typography-color:var(--ic-data-table-title-bar-description)}ic-typography.ic-typography-body,ic-typography.ic-typography-subtitle-small,::slotted([slot=\"description\"]){max-width:40rem}.density-input{--input-width:7.625rem}@media (max-width: 1200px){.header-container{flex-direction:column}}@media (min-width: 1201px){.header-container{gap:var(--ic-space-xs);align-items:baseline}}@media (min-width: 769px){.description-actions{justify-content:space-between}}@media (max-width: 768px){.description-actions{flex-direction:column;align-items:flex-start;gap:var(--ic-space-xs)}}@media (min-width: 577px){.action-area{align-items:center}}@media (max-width: 576px){.action-area{flex-direction:column}}";
 const IcDataTableTitleBarStyle0 = icDataTableTitleBarCss;
@@ -29,10 +29,10 @@ const DataTableTitleBar = class {
     }
     componentWillLoad() {
         const parentEl = this.el.parentElement;
-        if (parentEl.tagName === "IC-DATA-TABLE") {
+        if ((parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === "IC-DATA-TABLE") {
             const { caption, density, embedded } = parentEl;
             this.initialDensitySelectOption = density;
-            this.isEmbedded = embedded;
+            this.isEmbedded = !!embedded;
             if (this.heading === DEFAULT_TITLE_BAR_HEADING) {
                 this.heading = caption;
             }
@@ -44,14 +44,14 @@ const DataTableTitleBar = class {
             helpers.isSlotUsed(el, "custom-actions") ||
             !hideDensitySelect;
         const hasDescription = helpers.isSlotUsed(el, "description") || description;
-        return (index.h("div", { key: 'ae200cd54744bc200f21426914cbafbb78648e7e', class: {
+        return (index.h("div", { key: 'f36585c5730a7a5c69ea13b5ebefb0da062cb8b7', class: {
                 "title-bar-wrapper": true,
                 "full-width": isEmbedded,
-            } }, index.h("div", { key: '505507c0b4cfb023bee49f19f16cd20fe86d6b5e', class: "header-container" }, index.h("slot", { key: '4d2f19bbb99f5d408e71abb0d145f79afb588720', name: "heading" }, index.h("ic-typography", { key: '94496f9c6d5d1ca6898419dcecdf34e7ffe7e331', variant: "h3", class: "heading" }, index.h("h3", { key: '79d6c2515a9decba84300040ddb78bf6b06e9af8' }, heading))), metadata && (index.h("ic-typography", { key: 'ecc21af952a119dc5948bd6f225d9f93fe02b592', variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (index.h("div", { key: 'e48ca0055f420a23f2b1ad86206920f67c66e750', class: "description-actions" }, index.h("slot", { key: 'b942baf4a54917611e1022796180a912f760f01c', name: "description" }, description && (index.h("ic-typography", { key: 'd02da52e2fa02b134e2add8e44a2d38676e37e7e', variant: "body" }, description))), showActionArea && (index.h("div", { key: 'b9b1506b8b4d0780b70bce64f520337a7e225a7b', class: "action-area" }, helpers.isSlotUsed(el, "custom-actions") && (index.h("div", { key: '8ddba68dfb413510d05d2b02eab6f95968690178', class: "custom-actions-wrapper" }, index.h("slot", { key: '730b065e8c73f7cac68f593645f550fe63c5cc29', name: "custom-actions" }))), !hideDensitySelect && (index.h("ic-select", { key: '0c0cef3758321f381c4f9aff8f58988c1cdd690a', size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
+            } }, index.h("div", { key: 'f4321857a3f013c2138225f4d3994d8b00d686fd', class: "header-container" }, index.h("slot", { key: 'f403f6e936b12a0a1e94f4f5327fb0746e443232', name: "heading" }, index.h("ic-typography", { key: '841a57bbc3e426c036b6d5eb86a0505e9567b870', variant: "h3", class: "heading" }, index.h("h3", { key: 'ee15ed41ade023c9e72f73de03f2a438a411ed3c' }, heading))), metadata && (index.h("ic-typography", { key: 'e577c48e340c9780f6c28a2db8c68c13507ab2e2', variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (index.h("div", { key: '1915ed0a874cf45b0bc37ee66e605040291476c8', class: "description-actions" }, index.h("slot", { key: '7b8b96377409c80fc7832089e17e508fbf7b2d75', name: "description" }, description && (index.h("ic-typography", { key: '3629998ba78578ff1aa1acf388447d5cae4ecb57', variant: "body" }, description))), showActionArea && (index.h("div", { key: 'ae469ae8726a57eeadb47c378bb8698cf96e8a4d', class: "action-area" }, helpers.isSlotUsed(el, "custom-actions") && (index.h("div", { key: '3b2b53888a282a584ded2c1682bf58b3f49b2432', class: "custom-actions-wrapper" }, index.h("slot", { key: '85d7e895d3be219b3403ccf4507ef792b625c374', name: "custom-actions" }))), !hideDensitySelect && (index.h("ic-select", { key: '69088722aa8720b874ca9539f8b9329884087515', size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
                 { label: "Default", value: "default" },
                 { label: "Dense", value: "dense" },
                 { label: "Spacious", value: "spacious" },
-            ], value: initialDensitySelectOption, onIcChange: changeDensity })), helpers.isSlotUsed(el, "primary-action") && (index.h("slot", { key: '69dadd87109154375dc486a110eb674c9ece8fe6', name: "primary-action" }))))))));
+            ], value: initialDensitySelectOption, onIcChange: changeDensity })), helpers.isSlotUsed(el, "primary-action") && (index.h("slot", { key: '804c56e9ada0368f5fb53320d45d4af47f3e531e', name: "primary-action" }))))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/ic-data-table-title-bar.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-data-table-title-bar.entry.cjs.js","mappings":"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","names":["isSlotUsed","h"],"sources":["src/components/ic-data-table-title-bar/ic-data-table-title-bar.css?tag=ic-data-table-title-bar&encapsulation=shadow","src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"sourcesContent":[".title-bar-wrapper,\n.header-container,\n.description-actions,\n.action-area,\n.custom-actions-wrapper {\n  display: flex;\n}\n\n.title-bar-wrapper,\n.action-area,\n.custom-actions-wrapper {\n  gap: var(--ic-space-xs);\n}\n\n.title-bar-wrapper {\n  flex-direction: column;\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n  border-bottom: var(--ic-space-1px) solid\n    var(--ic-data-table-title-bar-keyline);\n  background-color: var(--ic-data-table-title-bar-background);\n}\n\n.full-width {\n  padding: var(--ic-space-sm) 0;\n  border-bottom: none;\n}\n\nic-typography.heading h3 {\n  margin: 0;\n}\n\nic-typography.ic-typography-subtitle-small {\n  --ic-typography-color: var(--ic-data-table-title-bar-information);\n}\n\nic-typography.ic-typography-h3,\n::slotted([slot=\"header\"]) {\n  max-width: 50rem;\n  color: var(--ic-data-table-title-bar-title);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-title);\n}\n\nic-typography.ic-typography-body,\n::slotted([slot=\"description\"]) {\n  color: var(--ic-data-table-title-bar-description);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-description);\n}\n\nic-typography.ic-typography-body,\nic-typography.ic-typography-subtitle-small,\n::slotted([slot=\"description\"]) {\n  max-width: 40rem;\n}\n\n.density-input {\n  --input-width: 7.625rem;\n}\n\n@media (max-width: 1200px) {\n  .header-container {\n    flex-direction: column;\n  }\n}\n\n@media (min-width: 1201px) {\n  .header-container {\n    gap: var(--ic-space-xs);\n    align-items: baseline;\n  }\n}\n\n@media (min-width: 769px) {\n  .description-actions {\n    justify-content: space-between;\n  }\n}\n\n@media (max-width: 768px) {\n  .description-actions {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--ic-space-xs);\n  }\n}\n\n@media (min-width: 577px) {\n  .action-area {\n    align-items: center;\n  }\n}\n\n@media (max-width: 576px) {\n  .action-area {\n    flex-direction: column;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-table-title-bar.entry.cjs.js","mappings":"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","names":["isSlotUsed","h"],"sources":["src/components/ic-data-table-title-bar/ic-data-table-title-bar.css?tag=ic-data-table-title-bar&encapsulation=shadow","src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"sourcesContent":[".title-bar-wrapper,\n.header-container,\n.description-actions,\n.action-area,\n.custom-actions-wrapper {\n  display: flex;\n}\n\n.title-bar-wrapper,\n.action-area,\n.custom-actions-wrapper {\n  gap: var(--ic-space-xs);\n}\n\n.title-bar-wrapper {\n  flex-direction: column;\n  padding: var(--ic-space-sm) var(--ic-space-xs);\n  border-bottom: var(--ic-space-1px) solid\n    var(--ic-data-table-title-bar-keyline);\n  background-color: var(--ic-data-table-title-bar-background);\n}\n\n.full-width {\n  padding: var(--ic-space-sm) 0;\n  border-bottom: none;\n}\n\nic-typography.heading h3 {\n  margin: 0;\n}\n\nic-typography.ic-typography-subtitle-small {\n  --ic-typography-color: var(--ic-data-table-title-bar-information);\n}\n\nic-typography.ic-typography-h3,\n::slotted([slot=\"header\"]) {\n  max-width: 50rem;\n  color: var(--ic-data-table-title-bar-title);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-title);\n}\n\nic-typography.ic-typography-body,\n::slotted([slot=\"description\"]) {\n  color: var(--ic-data-table-title-bar-description);\n\n  --ic-typography-color: var(--ic-data-table-title-bar-description);\n}\n\nic-typography.ic-typography-body,\nic-typography.ic-typography-subtitle-small,\n::slotted([slot=\"description\"]) {\n  max-width: 40rem;\n}\n\n.density-input {\n  --input-width: 7.625rem;\n}\n\n@media (max-width: 1200px) {\n  .header-container {\n    flex-direction: column;\n  }\n}\n\n@media (min-width: 1201px) {\n  .header-container {\n    gap: var(--ic-space-xs);\n    align-items: baseline;\n  }\n}\n\n@media (min-width: 769px) {\n  .description-actions {\n    justify-content: space-between;\n  }\n}\n\n@media (max-width: 768px) {\n  .description-actions {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--ic-space-xs);\n  }\n}\n\n@media (min-width: 577px) {\n  .action-area {\n    align-items: center;\n  }\n}\n\n@media (max-width: 576px) {\n  .action-area {\n    flex-direction: column;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport { IcSelectCustomEvent } from \"@ukic/web-components/dist/types/interface\";\nimport {\n  IcDataTableDensityOptions,\n  IcDensityUpdateEventDetail,\n} from \"../ic-data-table/ic-data-table.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\n\nconst DEFAULT_TITLE_BAR_HEADING = \"Title Bar\";\n\n/**\n * @slot primary-action - Render an interactive element that will perform a primary action. Renders to the right of the density select.\n * @slot custom-actions - Render additional custom actions to the left of the density select.\n * @slot heading - The heading to render on the data table title bar.\n * @slot description - Render an alternative description in the description section.\n */\n@Component({\n  tag: \"ic-data-table-title-bar\",\n  styleUrl: \"ic-data-table-title-bar.css\",\n  shadow: true,\n})\nexport class DataTableTitleBar {\n  private initialDensitySelectOption: IcDataTableDensityOptions = \"default\";\n  private isEmbedded: boolean = false;\n\n  @Element() el: HTMLIcDataTableTitleBarElement;\n\n  /**\n   * The description that is displayed below the `heading` and `metadata`. Can be overridden with the `description` slot.\n   */\n  @Prop() description?: string;\n\n  /**\n   * The heading of the title bar. Can be overridden with the `heading` slot. If used with an `ic-data-table` it will default to the table's `caption` unless overridden.\n   */\n  @Prop() heading?: string = DEFAULT_TITLE_BAR_HEADING;\n\n  /**\n   * When `true`, the density select will not be rendered.\n   */\n  @Prop() hideDensitySelect?: boolean = false;\n\n  /**\n   * The metadata displayed next to the `heading`.\n   */\n  @Prop() metadata?: string;\n\n  /**\n   * Emitted when the table density select value is changed.\n   */\n  @Event() icTableDensityUpdate: EventEmitter<IcDensityUpdateEventDetail>;\n\n  componentWillLoad(): void {\n    const parentEl = this.el.parentElement;\n    if (parentEl?.tagName === \"IC-DATA-TABLE\") {\n      const { caption, density, embedded } = parentEl as HTMLIcDataTableElement;\n      this.initialDensitySelectOption = density;\n      this.isEmbedded = !!embedded;\n      if (this.heading === DEFAULT_TITLE_BAR_HEADING) {\n        this.heading = caption;\n      }\n    }\n  }\n\n  private changeDensity = (\n    ev: IcSelectCustomEvent<IcDensityUpdateEventDetail>\n  ) => {\n    this.icTableDensityUpdate.emit({ value: ev.detail.value });\n  };\n\n  render() {\n    const {\n      changeDensity,\n      description,\n      el,\n      heading,\n      hideDensitySelect,\n      initialDensitySelectOption,\n      isEmbedded,\n      metadata,\n    } = this;\n    const showActionArea =\n      isSlotUsed(el, \"primary-action\") ||\n      isSlotUsed(el, \"custom-actions\") ||\n      !hideDensitySelect;\n\n    const hasDescription = isSlotUsed(el, \"description\") || description;\n    return (\n      <div\n        class={{\n          \"title-bar-wrapper\": true,\n          \"full-width\": isEmbedded,\n        }}\n      >\n        <div class=\"header-container\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\" class=\"heading\">\n              <h3>{heading}</h3>\n            </ic-typography>\n          </slot>\n          {metadata && (\n            <ic-typography variant=\"subtitle-small\">{metadata}</ic-typography>\n          )}\n        </div>\n        {(showActionArea || hasDescription) && (\n          <div class=\"description-actions\">\n            <slot name=\"description\">\n              {description && (\n                <ic-typography variant=\"body\">{description}</ic-typography>\n              )}\n            </slot>\n            {showActionArea && (\n              <div class=\"action-area\">\n                {isSlotUsed(el, \"custom-actions\") && (\n                  <div class=\"custom-actions-wrapper\">\n                    <slot name=\"custom-actions\" />\n                  </div>\n                )}\n                {!hideDensitySelect && (\n                  <ic-select\n                    size=\"small\"\n                    label=\"Change density\"\n                    class=\"density-input\"\n                    hideLabel\n                    options={[\n                      { label: \"Default\", value: \"default\" },\n                      { label: \"Dense\", value: \"dense\" },\n                      { label: \"Spacious\", value: \"spacious\" },\n                    ]}\n                    value={initialDensitySelectOption}\n                    onIcChange={changeDensity}\n                  ></ic-select>\n                )}\n                {isSlotUsed(el, \"primary-action\") && (\n                  <slot name=\"primary-action\" />\n                )}\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}