@ukic/canary-web-components 3.0.0-canary.13 → 3.0.0-canary.15

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js

@@ -25,10 +25,10 @@ export class DataTableTitleBar {
     }
     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;
             }
@@ -40,14 +40,14 @@ export class DataTableTitleBar {
             isSlotUsed(el, "custom-actions") ||
             !hideDensitySelect;
         const hasDescription = isSlotUsed(el, "description") || description;
-        return (h("div", { key: 'ae200cd54744bc200f21426914cbafbb78648e7e', class: {
+        return (h("div", { key: 'f36585c5730a7a5c69ea13b5ebefb0da062cb8b7', class: {
                 "title-bar-wrapper": true,
                 "full-width": isEmbedded,
-            } }, h("div", { key: '505507c0b4cfb023bee49f19f16cd20fe86d6b5e', class: "header-container" }, h("slot", { key: '4d2f19bbb99f5d408e71abb0d145f79afb588720', name: "heading" }, h("ic-typography", { key: '94496f9c6d5d1ca6898419dcecdf34e7ffe7e331', variant: "h3", class: "heading" }, h("h3", { key: '79d6c2515a9decba84300040ddb78bf6b06e9af8' }, heading))), metadata && (h("ic-typography", { key: 'ecc21af952a119dc5948bd6f225d9f93fe02b592', variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { key: 'e48ca0055f420a23f2b1ad86206920f67c66e750', class: "description-actions" }, h("slot", { key: 'b942baf4a54917611e1022796180a912f760f01c', name: "description" }, description && (h("ic-typography", { key: 'd02da52e2fa02b134e2add8e44a2d38676e37e7e', variant: "body" }, description))), showActionArea && (h("div", { key: 'b9b1506b8b4d0780b70bce64f520337a7e225a7b', class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { key: '8ddba68dfb413510d05d2b02eab6f95968690178', class: "custom-actions-wrapper" }, h("slot", { key: '730b065e8c73f7cac68f593645f550fe63c5cc29', name: "custom-actions" }))), !hideDensitySelect && (h("ic-select", { key: '0c0cef3758321f381c4f9aff8f58988c1cdd690a', size: "small", label: "Change density", class: "density-input", hideLabel: true, options: [
+            } }, h("div", { key: 'f4321857a3f013c2138225f4d3994d8b00d686fd', class: "header-container" }, h("slot", { key: 'f403f6e936b12a0a1e94f4f5327fb0746e443232', name: "heading" }, h("ic-typography", { key: '841a57bbc3e426c036b6d5eb86a0505e9567b870', variant: "h3", class: "heading" }, h("h3", { key: 'ee15ed41ade023c9e72f73de03f2a438a411ed3c' }, heading))), metadata && (h("ic-typography", { key: 'e577c48e340c9780f6c28a2db8c68c13507ab2e2', variant: "subtitle-small" }, metadata))), (showActionArea || hasDescription) && (h("div", { key: '1915ed0a874cf45b0bc37ee66e605040291476c8', class: "description-actions" }, h("slot", { key: '7b8b96377409c80fc7832089e17e508fbf7b2d75', name: "description" }, description && (h("ic-typography", { key: '3629998ba78578ff1aa1acf388447d5cae4ecb57', variant: "body" }, description))), showActionArea && (h("div", { key: 'ae469ae8726a57eeadb47c378bb8698cf96e8a4d', class: "action-area" }, isSlotUsed(el, "custom-actions") && (h("div", { key: '3b2b53888a282a584ded2c1682bf58b3f49b2432', class: "custom-actions-wrapper" }, h("slot", { key: '85d7e895d3be219b3403ccf4507ef792b625c374', name: "custom-actions" }))), !hideDensitySelect && (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 })), isSlotUsed(el, "primary-action") && (h("slot", { key: '69dadd87109154375dc486a110eb674c9ece8fe6', name: "primary-action" }))))))));
+            ], value: initialDensitySelectOption, onIcChange: changeDensity })), isSlotUsed(el, "primary-action") && (h("slot", { key: '804c56e9ada0368f5fb53320d45d4af47f3e531e', name: "primary-action" }))))))));
     }
     static get is() { return "ic-data-table-title-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -68,7 +68,7 @@ export class DataTableTitleBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -87,7 +87,7 @@ export class DataTableTitleBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -107,7 +107,7 @@ export class DataTableTitleBar {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -127,7 +127,7 @@ export class DataTableTitleBar {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/ic-data-table-title-bar/ic-data-table-title-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-data-table-title-bar.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["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.js","sourceRoot":"","sources":["../../../src/components/ic-data-table-title-bar/ic-data-table-title-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}