@carbon/web-components 2.0.0-beta.2 → 2.0.0-beta.4

package/es/components/data-table/table-skeleton.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement } from 'lit';
+/**
+ * Data table skeleton
+ *
+ * @element cds-table-skeleton
+ */
+declare class CDSTableSkeleton extends LitElement {
+    /**
+     * Optionally specify the displayed headers
+     */
+    private headers;
+    /**
+     * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable
+     */
+    compact: boolean;
+    /**
+     * Specify the number of columns that you want to render in the skeleton state
+     */
+    columnCount: number;
+    /**
+     * Specify the number of rows that you want to render in the skeleton state
+     */
+    rowCount: number;
+    /**
+     * Specify if the table header should be rendered as part of the skeleton.
+     */
+    showHeader: boolean;
+    /**
+     * Specify if the table toolbar should be rendered as part of the skeleton.
+     */
+    showToolbar: boolean;
+    /**
+     *  true to add useZebraStyles striping.
+     */
+    zebra: boolean;
+    /**
+     * @returns The header
+     */
+    protected _renderHeader(): import("lit-html").TemplateResult<1> | undefined;
+    /**
+     * @returns The header
+     */
+    protected _renderToolbar(): import("lit-html").TemplateResult<1> | undefined;
+    connectedCallback(): void;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: any;
+}
+export default CDSTableSkeleton;
+
+//# sourceMappingURL=table-skeleton.d.ts.map

package/es/components/data-table/table-skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/data-table/table-skeleton.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,cACM,gBAAiB,SAAQ,UAAU;IACvC;;OAEG;IAEH,OAAO,CAAC,OAAO,CAAgB;IAE/B;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,WAAW,SAAK;IAEhB;;OAEG;IAEH,QAAQ,SAAK;IAEb;;OAEG;IAEH,UAAU,UAAQ;IAElB;;OAEG;IAEH,WAAW,UAAQ;IAEnB;;OAEG;IAEH,KAAK,UAAS;IAEd;;OAEG;IACH,SAAS,CAAC,aAAa;IAcvB;;OAEG;IACH,SAAS,CAAC,cAAc;IAcxB,iBAAiB;IAOjB,OAAO;IAQP,MAAM;IA+CN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"table-skeleton.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss';\n\n/**\n * Data table skeleton\n *\n * @element cds-table-skeleton\n */\n@customElement(`${prefix}-table-skeleton`)\nclass CDSTableSkeleton extends LitElement {\n  /**\n   * Optionally specify the displayed headers\n   */\n  @property()\n  private headers: string[] = [];\n\n  /**\n   * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /**\n   * Specify the number of columns that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'column-count' })\n  columnCount = 5;\n\n  /**\n   * Specify the number of rows that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'row-count' })\n  rowCount = 5;\n\n  /**\n   * Specify if the table header should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-header' })\n  showHeader = true;\n\n  /**\n   * Specify if the table toolbar should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })\n  showToolbar = true;\n\n  /**\n   *  true to add useZebraStyles striping.\n   */\n  @property({ type: Boolean, reflect: true })\n  zebra = false;\n\n  /**\n   * @returns The header\n   */\n  protected _renderHeader() {\n    const { showHeader } = this;\n    return !showHeader\n      ? undefined\n      : html`\n          <div class=\"${prefix}--skeleton ${prefix}--data-table-container\">\n            <div class=\"${prefix}--data-table-header\">\n              <div class=\"${prefix}--data-table-header__title\"></div>\n              <div class=\"${prefix}--data-table-header__description\"></div>\n            </div>\n          </div>\n        `;\n  }\n\n  /**\n   * @returns The header\n   */\n  protected _renderToolbar() {\n    const { showToolbar } = this;\n    return !showToolbar\n      ? undefined\n      : html`\n          <section class=\"${prefix}--table-toolbar\">\n            <div class=\"${prefix}--toolbar-content\">\n              <span\n                class=\"${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm\"></span>\n            </div>\n          </section>\n        `;\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'table');\n    }\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (this.headers.length) {\n      this.columnCount = this.headers.length;\n    } else {\n      this.headers = Array(this.columnCount).fill('');\n    }\n  }\n\n  render() {\n    const { compact, columnCount, headers, rowCount, zebra } = this;\n    const classes = classMap({\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--data-table`]: true,\n      [`${prefix}--data-table--compact`]: compact,\n      [`${prefix}--data-table--zebra`]: zebra,\n    });\n    return html`\n      ${this._renderHeader()} ${this._renderToolbar()}\n\n      <table class=\"${classes}\">\n        <thead>\n          <tr>\n            ${Array.from(new Array(columnCount)).map(\n              (_, index) =>\n                html`\n                  <th>\n                    <div class=\"${prefix}--table-header-label\">\n                      ${headers[index]}\n                    </div>\n                  </th>\n                `\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${Array.from(new Array(rowCount)).map(\n            (_) =>\n              html`\n                <tr>\n                  ${Array.from(new Array(columnCount)).map(\n                    (_) =>\n                      html`\n                        <td>\n                          <span></span>\n                        </td>\n                      `\n                  )}\n                </tr>\n              `\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTableSkeleton;\n"]}

package/es/components/data-table/table-skeleton.js

@@ -0,0 +1,259 @@
+import _decorate from "@babel/runtime/helpers/esm/decorate";
+import _get from "@babel/runtime/helpers/esm/get";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3,
+  _t4,
+  _t5,
+  _t6;
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from "././data-table.css.js";
+
+/**
+ * Data table skeleton
+ *
+ * @element cds-table-skeleton
+ */ /**
+     * Data table skeleton
+     *
+     * @element cds-table-skeleton
+     */
+let CDSTableSkeleton = _decorate([customElement(`${prefix}-table-skeleton`)], function (_initialize, _LitElement) {
+  class CDSTableSkeleton extends _LitElement {
+    constructor(...args) {
+      super(...args);
+      _initialize(this);
+    }
+  }
+  return {
+    F: CDSTableSkeleton,
+    d: [{
+      kind: "field",
+      decorators: [property()],
+      key: "headers",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "compact",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number,
+        reflect: true,
+        attribute: 'column-count'
+      })],
+      key: "columnCount",
+      value() {
+        return 5;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number,
+        reflect: true,
+        attribute: 'row-count'
+      })],
+      key: "rowCount",
+      value() {
+        return 5;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'show-header'
+      })],
+      key: "showHeader",
+      value() {
+        return true;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true,
+        attribute: 'show-toolbar'
+      })],
+      key: "showToolbar",
+      value() {
+        return true;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "zebra",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "method",
+      key: "_renderHeader",
+      value:
+      /**
+       * Optionally specify the displayed headers
+       */
+
+      /**
+       * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable
+       */
+
+      /**
+       * Specify the number of columns that you want to render in the skeleton state
+       */
+
+      /**
+       * Specify the number of rows that you want to render in the skeleton state
+       */
+
+      /**
+       * Specify if the table header should be rendered as part of the skeleton.
+       */
+
+      /**
+       * Specify if the table toolbar should be rendered as part of the skeleton.
+       */
+
+      /**
+       *  true to add useZebraStyles striping.
+       */
+
+      /**
+       * @returns The header
+       */
+      function _renderHeader() {
+        const {
+          showHeader
+        } = this;
+        return !showHeader ? undefined : html(_t || (_t = _2`
+          <div class="${0}--skeleton ${0}--data-table-container">
+            <div class="${0}--data-table-header">
+              <div class="${0}--data-table-header__title"></div>
+              <div class="${0}--data-table-header__description"></div>
+            </div>
+          </div>
+        `), prefix, prefix, prefix, prefix, prefix);
+      }
+
+      /**
+       * @returns The header
+       */
+    }, {
+      kind: "method",
+      key: "_renderToolbar",
+      value: function _renderToolbar() {
+        const {
+          showToolbar
+        } = this;
+        return !showToolbar ? undefined : html(_t2 || (_t2 = _2`
+          <section class="${0}--table-toolbar">
+            <div class="${0}--toolbar-content">
+              <span
+                class="${0}--skeleton ${0}--btn ${0}--btn--sm"></span>
+            </div>
+          </section>
+        `), prefix, prefix, prefix, prefix, prefix);
+      }
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        if (!this.hasAttribute('role')) {
+          this.setAttribute('role', 'table');
+        }
+        _get(_getPrototypeOf(CDSTableSkeleton.prototype), "connectedCallback", this).call(this);
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated() {
+        if (this.headers.length) {
+          this.columnCount = this.headers.length;
+        } else {
+          this.headers = Array(this.columnCount).fill('');
+        }
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        const {
+          compact,
+          columnCount,
+          headers,
+          rowCount,
+          zebra
+        } = this;
+        const classes = classMap({
+          [`${prefix}--skeleton`]: true,
+          [`${prefix}--data-table`]: true,
+          [`${prefix}--data-table--compact`]: compact,
+          [`${prefix}--data-table--zebra`]: zebra
+        });
+        return html(_t3 || (_t3 = _2`
+      ${0} ${0}
+
+      <table class="${0}">
+        <thead>
+          <tr>
+            ${0}
+          </tr>
+        </thead>
+        <tbody>
+          ${0}
+        </tbody>
+      </table>
+    `), this._renderHeader(), this._renderToolbar(), classes, Array.from(new Array(columnCount)).map((_, index) => html(_t4 || (_t4 = _2`
+                  <th>
+                    <div class="${0}--table-header-label">
+                      ${0}
+                    </div>
+                  </th>
+                `), prefix, headers[index])), Array.from(new Array(rowCount)).map(_ => html(_t5 || (_t5 = _2`
+                <tr>
+                  ${0}
+                </tr>
+              `), Array.from(new Array(columnCount)).map(_ => html(_t6 || (_t6 = _2`
+                        <td>
+                          <span></span>
+                        </td>
+                      `))))));
+      }
+    }, {
+      kind: "field",
+      static: true,
+      key: "styles",
+      value() {
+        return styles;
+      }
+    }]
+  };
+}, LitElement);
+export default CDSTableSkeleton;
+//# sourceMappingURL=table-skeleton.js.map

package/es/components/data-table/table-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-skeleton.js","names":["classMap","LitElement","html","property","customElement","prefix","styles","CDSTableSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","key","value","type","Boolean","reflect","Number","attribute","_renderHeader","showHeader","undefined","_t","_2","_renderToolbar","showToolbar","_t2","connectedCallback","hasAttribute","setAttribute","_get","_getPrototypeOf","prototype","call","updated","headers","length","columnCount","Array","fill","render","compact","rowCount","zebra","classes","_t3","from","map","_","index","_t4","_t5","_t6","static"],"sources":["components/data-table/table-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss';\n\n/**\n * Data table skeleton\n *\n * @element cds-table-skeleton\n */\n@customElement(`${prefix}-table-skeleton`)\nclass CDSTableSkeleton extends LitElement {\n  /**\n   * Optionally specify the displayed headers\n   */\n  @property()\n  private headers: string[] = [];\n\n  /**\n   * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable\n   */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  /**\n   * Specify the number of columns that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'column-count' })\n  columnCount = 5;\n\n  /**\n   * Specify the number of rows that you want to render in the skeleton state\n   */\n  @property({ type: Number, reflect: true, attribute: 'row-count' })\n  rowCount = 5;\n\n  /**\n   * Specify if the table header should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-header' })\n  showHeader = true;\n\n  /**\n   * Specify if the table toolbar should be rendered as part of the skeleton.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })\n  showToolbar = true;\n\n  /**\n   *  true to add useZebraStyles striping.\n   */\n  @property({ type: Boolean, reflect: true })\n  zebra = false;\n\n  /**\n   * @returns The header\n   */\n  protected _renderHeader() {\n    const { showHeader } = this;\n    return !showHeader\n      ? undefined\n      : html`\n          <div class=\"${prefix}--skeleton ${prefix}--data-table-container\">\n            <div class=\"${prefix}--data-table-header\">\n              <div class=\"${prefix}--data-table-header__title\"></div>\n              <div class=\"${prefix}--data-table-header__description\"></div>\n            </div>\n          </div>\n        `;\n  }\n\n  /**\n   * @returns The header\n   */\n  protected _renderToolbar() {\n    const { showToolbar } = this;\n    return !showToolbar\n      ? undefined\n      : html`\n          <section class=\"${prefix}--table-toolbar\">\n            <div class=\"${prefix}--toolbar-content\">\n              <span\n                class=\"${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm\"></span>\n            </div>\n          </section>\n        `;\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'table');\n    }\n    super.connectedCallback();\n  }\n\n  updated() {\n    if (this.headers.length) {\n      this.columnCount = this.headers.length;\n    } else {\n      this.headers = Array(this.columnCount).fill('');\n    }\n  }\n\n  render() {\n    const { compact, columnCount, headers, rowCount, zebra } = this;\n    const classes = classMap({\n      [`${prefix}--skeleton`]: true,\n      [`${prefix}--data-table`]: true,\n      [`${prefix}--data-table--compact`]: compact,\n      [`${prefix}--data-table--zebra`]: zebra,\n    });\n    return html`\n      ${this._renderHeader()} ${this._renderToolbar()}\n\n      <table class=\"${classes}\">\n        <thead>\n          <tr>\n            ${Array.from(new Array(columnCount)).map(\n              (_, index) =>\n                html`\n                  <th>\n                    <div class=\"${prefix}--table-header-label\">\n                      ${headers[index]}\n                    </div>\n                  </th>\n                `\n            )}\n          </tr>\n        </thead>\n        <tbody>\n          ${Array.from(new Array(rowCount)).map(\n            (_) =>\n              html`\n                <tr>\n                  ${Array.from(new Array(columnCount)).map(\n                    (_) =>\n                      html`\n                        <td>\n                          <span></span>\n                        </td>\n                      `\n                  )}\n                </tr>\n              `\n          )}\n        </tbody>\n      </table>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTableSkeleton;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,QAAQ,6BAA6B;AACtD,SAASC,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,uBAAmB;;AAEtC;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,gBAAgB,GAAAC,SAAA,EADrBJ,aAAa,CAAE,GAAEC,MAAO,iBAAgB,CAAC,aAAAI,WAAA,EAAAC,WAAA;EAA1C,MACMH,gBAAgB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA4I1C;EAAC;IAAAI,CAAA,EA5IKN,gBAAgB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAInBb,QAAQ,EAAE;MAAAc,GAAA;MAAAC,MAAA;QAAA,OACiB,EAAE;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAK7Bb,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACjC,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKdb,QAAQ,CAAC;QAAEgB,IAAI,EAAEG,MAAM;QAAED,OAAO,EAAE,IAAI;QAAEE,SAAS,EAAE;MAAe,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OACvD,CAAC;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKdb,QAAQ,CAAC;QAAEgB,IAAI,EAAEG,MAAM;QAAED,OAAO,EAAE,IAAI;QAAEE,SAAS,EAAE;MAAY,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OACvD,CAAC;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKXb,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEE,SAAS,EAAE;MAAc,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OACxD,IAAI;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKhBb,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEE,SAAS,EAAE;MAAe,CAAC,CAAC;MAAAN,GAAA;MAAAC,MAAA;QAAA,OACxD,IAAI;MAAA;IAAA;MAAAH,IAAA;MAAAC,UAAA,GAKjBb,QAAQ,CAAC;QAAEgB,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACnC,KAAK;MAAA;IAAA;MAAAH,IAAA;MAAAE,GAAA;MAAAC,KAAA;MAxCb;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;MACE,SAAAM,cAAA,EAA0B;QACxB,MAAM;UAAEC;QAAW,CAAC,GAAG,IAAI;QAC3B,OAAO,CAACA,UAAU,GACdC,SAAS,GACTxB,IAAI,CAAAyB,EAAA,KAAAA,EAAA,GAAAC,EAAC;AACb,wBAAsB,CAAS,cAAW,CAAS;AACnD,0BAAwB,CAAS;AACjC,4BAA0B,CAAS;AACnC,4BAA0B,CAAS;AACnC;AACA;AACA,SAAQ,GANgBvB,MAAM,EAAcA,MAAM,EACxBA,MAAM,EACJA,MAAM,EACNA,MAAM,CAGzB;MACP;;MAEA;AACF;AACA;IAFE;MAAAU,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAGA,SAAAW,eAAA,EAA2B;QACzB,MAAM;UAAEC;QAAY,CAAC,GAAG,IAAI;QAC5B,OAAO,CAACA,WAAW,GACfJ,SAAS,GACTxB,IAAI,CAAA6B,GAAA,KAAAA,GAAA,GAAAH,EAAC;AACb,4BAA0B,CAAS;AACnC,0BAAwB,CAAS;AACjC;AACA,yBAAuB,CAAS,cAAW,CAAS,SAAM,CAAS;AACnE;AACA;AACA,SAAQ,GANoBvB,MAAM,EACRA,MAAM,EAEPA,MAAM,EAAcA,MAAM,EAASA,MAAM,CAGzD;MACP;IAAC;MAAAU,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAED,SAAAc,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,MAAM,CAAC,EAAE;UAC9B,IAAI,CAACC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC;QACpC;QACAC,IAAA,CAAAC,eAAA,CAjFE7B,gBAAgB,CAAA8B,SAAA,8BAAAC,IAAA;MAkFpB;IAAC;MAAAvB,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAED,SAAAqB,QAAA,EAAU;QACR,IAAI,IAAI,CAACC,OAAO,CAACC,MAAM,EAAE;UACvB,IAAI,CAACC,WAAW,GAAG,IAAI,CAACF,OAAO,CAACC,MAAM;QACxC,CAAC,MAAM;UACL,IAAI,CAACD,OAAO,GAAGG,KAAK,CAAC,IAAI,CAACD,WAAW,CAAC,CAACE,IAAI,CAAC,EAAE,CAAC;QACjD;MACF;IAAC;MAAA7B,IAAA;MAAAE,GAAA;MAAAC,KAAA,EAED,SAAA2B,OAAA,EAAS;QACP,MAAM;UAAEC,OAAO;UAAEJ,WAAW;UAAEF,OAAO;UAAEO,QAAQ;UAAEC;QAAM,CAAC,GAAG,IAAI;QAC/D,MAAMC,OAAO,GAAGjD,QAAQ,CAAC;UACvB,CAAE,GAAEK,MAAO,YAAW,GAAG,IAAI;UAC7B,CAAE,GAAEA,MAAO,cAAa,GAAG,IAAI;UAC/B,CAAE,GAAEA,MAAO,uBAAsB,GAAGyC,OAAO;UAC3C,CAAE,GAAEzC,MAAO,qBAAoB,GAAG2C;QACpC,CAAC,CAAC;QACF,OAAO9C,IAAI,CAAAgD,GAAA,KAAAA,GAAA,GAAAtB,EAAC;AAChB,QAAM,CAAuB,IAAC,CAAwB;AACtD;AACA,sBAAoB,CAAU;AAC9B;AACA;AACA,cAAY,CASE;AACd;AACA;AACA;AACA,YAAU,CAcE;AACZ;AACA;AACA,KAAI,GAnCI,IAAI,CAACJ,aAAa,EAAE,EAAI,IAAI,CAACK,cAAc,EAAE,EAE/BoB,OAAO,EAGfN,KAAK,CAACQ,IAAI,CAAC,IAAIR,KAAK,CAACD,WAAW,CAAC,CAAC,CAACU,GAAG,CACtC,CAACC,CAAC,EAAEC,KAAK,KACPpD,IAAI,CAAAqD,GAAA,KAAAA,GAAA,GAAA3B,EAAC;AACrB;AACA,kCAAgC,CAAS;AACzC,wBAAsB,CAAiB;AACvC;AACA;AACA,iBAAgB,GAJkBvB,MAAM,EAChBmC,OAAO,CAACc,KAAK,CAAC,CAGrB,CACJ,EAIDX,KAAK,CAACQ,IAAI,CAAC,IAAIR,KAAK,CAACI,QAAQ,CAAC,CAAC,CAACK,GAAG,CAClCC,CAAC,IACAnD,IAAI,CAAAsD,GAAA,KAAAA,GAAA,GAAA5B,EAAC;AACnB;AACA,oBAAkB,CAOE;AACpB;AACA,eAAc,GATMe,KAAK,CAACQ,IAAI,CAAC,IAAIR,KAAK,CAACD,WAAW,CAAC,CAAC,CAACU,GAAG,CACrCC,CAAC,IACAnD,IAAI,CAAAuD,GAAA,KAAAA,GAAA,GAAA7B,EAAC;AAC3B;AACA;AACA;AACA,uBAAsB,EAAC,CACJ,CAEJ,CACJ;MAIT;IAAC;MAAAb,IAAA;MAAA2C,MAAA;MAAAzC,GAAA;MAAAC,MAAA;QAAA,OAEeZ,MAAM;MAAA;IAAA;EAAA;AAAA,GA3IOL,UAAU;AA8IzC,eAAeM,gBAAgB"}

package/es/components/data-table/table-toolbar-content.d.ts

@@ -12,15 +12,19 @@ import { LitElement } from 'lit';
  *
  * @element cds-table-toolbar-content
  */
-declare class BXTableToolbarContent extends LitElement {
+declare class CDSTableToolbarContent extends LitElement {
     /**
      * `true` if this batch actions bar is active.
      */
     hasBatchActions: boolean;
+    /**
+     * Table toolbar contents size
+     */
+    size: any;
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: any;
 }
-export default BXTableToolbarContent;
+export default CDSTableToolbarContent;
 
 //# sourceMappingURL=table-toolbar-content.d.ts.map

package/es/components/data-table/table-toolbar-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/data-table/table-toolbar-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,cACM,qBAAsB,SAAQ,UAAU;IAC5C;;OAEG;IAEH,eAAe,UAAS;IAExB,OAAO,CAAC,iBAAiB,KAAA;IAMzB,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"table-toolbar-content.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss';\n\n/**\n * Table toolbar content.\n *\n * @element cds-table-toolbar-content\n */\n@customElement(`${prefix}-table-toolbar-content`)\nclass BXTableToolbarContent extends LitElement {\n  /**\n   * `true` if this batch actions bar is active.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })\n  hasBatchActions = false;\n\n  updated(changedProperties) {\n    if (changedProperties.has('hasBatchActions')) {\n      this.setAttribute('tabindex', `${this.hasBatchActions ? '-1' : ''}`);\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTableToolbarContent;\n"]}
+{"version":3,"sources":["components/data-table/table-toolbar-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,cACM,sBAAuB,SAAQ,UAAU;IAC7C;;OAEG;IAEH,eAAe,UAAS;IAExB;;OAEG;IAEH,IAAI,MAAC;IAEL,OAAO,CAAC,iBAAiB,KAAA;IAazB,MAAM;IAIN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,sBAAsB,CAAC","file":"table-toolbar-content.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss';\n\n/**\n * Table toolbar content.\n *\n * @element cds-table-toolbar-content\n */\n@customElement(`${prefix}-table-toolbar-content`)\nclass CDSTableToolbarContent extends LitElement {\n  /**\n   * `true` if this batch actions bar is active.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })\n  hasBatchActions = false;\n\n  /**\n   * Table toolbar contents size\n   */\n  @property({ reflect: true })\n  size;\n\n  updated(changedProperties) {\n    if (changedProperties.has('hasBatchActions')) {\n      this.setAttribute('tabindex', `${this.hasBatchActions ? '-1' : ''}`);\n    }\n\n    if (changedProperties.has('size')) {\n      [...this.children].forEach((e) => {\n        const size = this.size === 'xs' ? 'sm' : this.size;\n        e.setAttribute('size', size);\n      });\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTableToolbarContent;\n"]}

package/es/components/data-table/table-toolbar-content.js

@@ -24,15 +24,15 @@ import styles from "././data-table.css.js";
      *
      * @element cds-table-toolbar-content
      */
-let BXTableToolbarContent = _decorate([customElement(`${prefix}-table-toolbar-content`)], function (_initialize, _LitElement) {
-  class BXTableToolbarContent extends _LitElement {
+let CDSTableToolbarContent = _decorate([customElement(`${prefix}-table-toolbar-content`)], function (_initialize, _LitElement) {
+  class CDSTableToolbarContent extends _LitElement {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXTableToolbarContent,
+    F: CDSTableToolbarContent,
     d: [{
       kind: "field",
       decorators: [property({
@@ -44,6 +44,13 @@ let BXTableToolbarContent = _decorate([customElement(`${prefix}-table-toolbar-co
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        reflect: true
+      })],
+      key: "size",
+      value: void 0
     }, {
       kind: "method",
       key: "updated",
@@ -52,10 +59,20 @@ let BXTableToolbarContent = _decorate([customElement(`${prefix}-table-toolbar-co
        * `true` if this batch actions bar is active.
        */
 
+      /**
+       * Table toolbar contents size
+       */
+
       function updated(changedProperties) {
         if (changedProperties.has('hasBatchActions')) {
           this.setAttribute('tabindex', `${this.hasBatchActions ? '-1' : ''}`);
         }
+        if (changedProperties.has('size')) {
+          [...this.children].forEach(e => {
+            const size = this.size === 'xs' ? 'sm' : this.size;
+            e.setAttribute('size', size);
+          });
+        }
       }
     }, {
       kind: "method",
@@ -73,5 +90,5 @@ let BXTableToolbarContent = _decorate([customElement(`${prefix}-table-toolbar-co
     }]
   };
 }, LitElement);
-export default BXTableToolbarContent;
+export default CDSTableToolbarContent;
 //# sourceMappingURL=table-toolbar-content.js.map

package/es/components/data-table/table-toolbar-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-toolbar-content.js","names":["LitElement","html","property","customElement","prefix","styles","BXTableToolbarContent","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","type","Boolean","reflect","attribute","key","value","updated","changedProperties","has","setAttribute","hasBatchActions","render","_t","_","static"],"sources":["components/data-table/table-toolbar-content.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss';\n\n/**\n * Table toolbar content.\n *\n * @element cds-table-toolbar-content\n */\n@customElement(`${prefix}-table-toolbar-content`)\nclass BXTableToolbarContent extends LitElement {\n  /**\n   * `true` if this batch actions bar is active.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })\n  hasBatchActions = false;\n\n  updated(changedProperties) {\n    if (changedProperties.has('hasBatchActions')) {\n      this.setAttribute('tabindex', `${this.hasBatchActions ? '-1' : ''}`);\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXTableToolbarContent;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,uBAAmB;;AAEtC;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,qBAAqB,GAAAC,SAAA,EAD1BJ,aAAa,CAAE,GAAEC,MAAO,wBAAuB,CAAC,aAAAI,WAAA,EAAAC,WAAA;EAAjD,MACMH,qBAAqB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAkB/C;EAAC;IAAAI,CAAA,EAlBKN,qBAAqB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIxBb,QAAQ,CAAC;QAAEc,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAoB,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACzD,KAAK;MAAA;IAAA;MAAAP,IAAA;MAAAM,GAAA;MAAAC,KAAA;MAJvB;AACF;AACA;;MAIE,SAAAC,QAAQC,iBAAiB,EAAE;QACzB,IAAIA,iBAAiB,CAACC,GAAG,CAAC,iBAAiB,CAAC,EAAE;UAC5C,IAAI,CAACC,YAAY,CAAC,UAAU,EAAG,GAAE,IAAI,CAACC,eAAe,GAAG,IAAI,GAAG,EAAG,EAAC,CAAC;QACtE;MACF;IAAC;MAAAZ,IAAA;MAAAM,GAAA;MAAAC,KAAA,EAED,SAAAM,OAAA,EAAS;QACP,OAAO1B,IAAI,CAAA2B,EAAA,KAAAA,EAAA,GAAAC,CAAC,iBAAe;MAC7B;IAAC;MAAAf,IAAA;MAAAgB,MAAA;MAAAV,GAAA;MAAAC,MAAA;QAAA,OAEehB,MAAM;MAAA;IAAA;EAAA;AAAA,GAjBYL,UAAU;AAoB9C,eAAeM,qBAAqB"}
+{"version":3,"file":"table-toolbar-content.js","names":["LitElement","html","property","customElement","prefix","styles","CDSTableToolbarContent","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","type","Boolean","reflect","attribute","key","value","updated","changedProperties","has","setAttribute","hasBatchActions","children","forEach","e","size","render","_t","_","static"],"sources":["components/data-table/table-toolbar-content.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './data-table.scss';\n\n/**\n * Table toolbar content.\n *\n * @element cds-table-toolbar-content\n */\n@customElement(`${prefix}-table-toolbar-content`)\nclass CDSTableToolbarContent extends LitElement {\n  /**\n   * `true` if this batch actions bar is active.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })\n  hasBatchActions = false;\n\n  /**\n   * Table toolbar contents size\n   */\n  @property({ reflect: true })\n  size;\n\n  updated(changedProperties) {\n    if (changedProperties.has('hasBatchActions')) {\n      this.setAttribute('tabindex', `${this.hasBatchActions ? '-1' : ''}`);\n    }\n\n    if (changedProperties.has('size')) {\n      [...this.children].forEach((e) => {\n        const size = this.size === 'xs' ? 'sm' : this.size;\n        e.setAttribute('size', size);\n      });\n    }\n  }\n\n  render() {\n    return html` <slot></slot> `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTableToolbarContent;\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,uBAAmB;;AAEtC;AACA;AACA;AACA;AACA,GAJA;AACA;AACA;AACA;AACA;AAJA,IAMMC,sBAAsB,GAAAC,SAAA,EAD3BJ,aAAa,CAAE,GAAEC,MAAO,wBAAuB,CAAC,aAAAI,WAAA,EAAAC,WAAA;EAAjD,MACMH,sBAAsB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA+BhD;EAAC;IAAAI,CAAA,EA/BKN,sBAAsB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIzBb,QAAQ,CAAC;QAAEc,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAoB,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACzD,KAAK;MAAA;IAAA;MAAAP,IAAA;MAAAC,UAAA,GAKtBb,QAAQ,CAAC;QAAEgB,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAE,GAAA;MAAAC,KAAA;IAAA;MAAAP,IAAA;MAAAM,GAAA;MAAAC,KAAA;MAT5B;AACF;AACA;;MAIE;AACF;AACA;;MAIE,SAAAC,QAAQC,iBAAiB,EAAE;QACzB,IAAIA,iBAAiB,CAACC,GAAG,CAAC,iBAAiB,CAAC,EAAE;UAC5C,IAAI,CAACC,YAAY,CAAC,UAAU,EAAG,GAAE,IAAI,CAACC,eAAe,GAAG,IAAI,GAAG,EAAG,EAAC,CAAC;QACtE;QAEA,IAAIH,iBAAiB,CAACC,GAAG,CAAC,MAAM,CAAC,EAAE;UACjC,CAAC,GAAG,IAAI,CAACG,QAAQ,CAAC,CAACC,OAAO,CAAEC,CAAC,IAAK;YAChC,MAAMC,IAAI,GAAG,IAAI,CAACA,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,CAACA,IAAI;YAClDD,CAAC,CAACJ,YAAY,CAAC,MAAM,EAAEK,IAAI,CAAC;UAC9B,CAAC,CAAC;QACJ;MACF;IAAC;MAAAhB,IAAA;MAAAM,GAAA;MAAAC,KAAA,EAED,SAAAU,OAAA,EAAS;QACP,OAAO9B,IAAI,CAAA+B,EAAA,KAAAA,EAAA,GAAAC,CAAC,iBAAe;MAC7B;IAAC;MAAAnB,IAAA;MAAAoB,MAAA;MAAAd,GAAA;MAAAC,MAAA;QAAA,OAEehB,MAAM;MAAA;IAAA;EAAA;AAAA,GA9BaL,UAAU;AAiC/C,eAAeM,sBAAsB"}

package/es/components/data-table/table-toolbar-search.d.ts

@@ -8,7 +8,7 @@
  */
 import { INPUT_SIZE } from '../text-input/text-input';
 import CDSSearch from '../search/search';
-declare const BXTableToolbarSearch_base: {
+declare const CDSTableToolbarSearch_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
@@ -330,7 +330,7 @@ declare const BXTableToolbarSearch_base: {
  * @element cds-table-toolbar-search
  * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.
  */
-declare class BXTableToolbarSearch extends BXTableToolbarSearch_base {
+declare class CDSTableToolbarSearch extends CDSTableToolbarSearch_base {
     private _inputNode;
     /**
      * Handles user-initiated gestures for expanding the search box.
@@ -354,6 +354,10 @@ declare class BXTableToolbarSearch extends BXTableToolbarSearch_base {
      * `true` if the search box should be expanded.
      */
     expanded: boolean;
+    /**
+     * `true` if the search box should be always be open.
+     */
+    persistent: boolean;
     /**
      * The search box size.
      */
@@ -371,6 +375,6 @@ declare class BXTableToolbarSearch extends BXTableToolbarSearch_base {
     };
     static styles: any;
 }
-export default BXTableToolbarSearch;
+export default CDSTableToolbarSearch;
 
 //# sourceMappingURL=table-toolbar-search.d.ts.map

package/es/components/data-table/table-toolbar-search.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/data-table/table-toolbar-search.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,SAAS,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGzC;;;;;GAKG;AACH,cACM,oBAAqB,SAAQ,yBAA4B;IAE7D,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;YACW,0BAA0B;IAOxC;;OAEG;IAGH,OAAO,CAAC,cAAc;IAItB;;;;OAIG;IAGH,OAAO,CAAC,eAAe;IAMvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,aAAoB;IAExB,iBAAiB;IAOjB,MAAM;IAiBN;;OAEG;IACH,MAAM,KAAK,UAAU,WAGpB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,oBAAoB,CAAC","file":"table-toolbar-search.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { INPUT_SIZE } from '../text-input/text-input';\nimport CDSSearch from '../search/search';\nimport styles from './data-table.scss';\n\n/**\n * Table toolbar search.\n *\n * @element cds-table-toolbar-search\n * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.\n */\n@customElement(`${prefix}-table-toolbar-search`)\nclass BXTableToolbarSearch extends HostListenerMixin(CDSSearch) {\n  @query('input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles user-initiated gestures for expanding the search box.\n   */\n  private async _handleUserInitiatedExpand() {\n    this.expanded = true;\n    await this.updateComplete;\n    const { _inputNode: inputNode } = this;\n    inputNode?.focus();\n  }\n\n  /**\n   * Handles `focus` event handler on this element.\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusIn() {\n    this._handleUserInitiatedExpand();\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node) && !this.value) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * Handles `click` event handler on the search box.\n   */\n  private _handleSearchClick() {\n    this._handleUserInitiatedExpand();\n  }\n\n  /**\n   * `true` if the search box should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * The search box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.SMALL;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'search');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const result = super.render();\n    const { expanded, size, _handleSearchClick: handleSearchClick } = this;\n    const classes = classMap({\n      [`${prefix}--search`]: true,\n      [`${prefix}--search--${size}`]: size,\n    });\n    return html`\n      <div\n        class=\"${classes}\"\n        tabindex=\"${expanded ? '-1' : '0'}\"\n        @click=\"${handleSearchClick}\">\n        ${result}\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the search content is changed upon a user gesture.\n   */\n  static get eventInput() {\n    // The code uses on in `<cds-search>`, but definition is done also here for React event generation\n    return `${prefix}-search-input`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default BXTableToolbarSearch;\n"]}
+{"version":3,"sources":["components/data-table/table-toolbar-search.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,SAAS,MAAM,kBAAkB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGzC;;;;;GAKG;AACH,cACM,qBAAsB,SAAQ,0BAA4B;IAE9D,OAAO,CAAC,UAAU,CAAoB;IAEtC;;OAEG;YACW,0BAA0B;IAOxC;;OAEG;IAGH,OAAO,CAAC,cAAc;IAItB;;;;OAIG;IAGH,OAAO,CAAC,eAAe;IAUvB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAI1B;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,IAAI,aAAoB;IAExB,iBAAiB;IAOjB,MAAM;IAyBN;;OAEG;IACH,MAAM,KAAK,UAAU,WAGpB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,qBAAqB,CAAC","file":"table-toolbar-search.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { INPUT_SIZE } from '../text-input/text-input';\nimport CDSSearch from '../search/search';\nimport styles from './data-table.scss';\n\n/**\n * Table toolbar search.\n *\n * @element cds-table-toolbar-search\n * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.\n */\n@customElement(`${prefix}-table-toolbar-search`)\nclass CDSTableToolbarSearch extends HostListenerMixin(CDSSearch) {\n  @query('input')\n  private _inputNode!: HTMLInputElement;\n\n  /**\n   * Handles user-initiated gestures for expanding the search box.\n   */\n  private async _handleUserInitiatedExpand() {\n    this.expanded = true;\n    await this.updateComplete;\n    const { _inputNode: inputNode } = this;\n    inputNode?.focus();\n  }\n\n  /**\n   * Handles `focus` event handler on this element.\n   */\n  @HostListener('focusin')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusIn() {\n    this._handleUserInitiatedExpand();\n  }\n\n  /**\n   * Handles `blur` event handler on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleFocusOut(event: FocusEvent) {\n    if (\n      !this.contains(event.relatedTarget as Node) &&\n      !this.value &&\n      !this.persistent\n    ) {\n      this.expanded = false;\n    }\n  }\n\n  /**\n   * Handles `click` event handler on the search box.\n   */\n  private _handleSearchClick() {\n    this._handleUserInitiatedExpand();\n  }\n\n  /**\n   * `true` if the search box should be expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` if the search box should be always be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  persistent = false;\n\n  /**\n   * The search box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.LARGE;\n\n  connectedCallback() {\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'search');\n    }\n    super.connectedCallback();\n  }\n\n  render() {\n    const result = super.render();\n    const {\n      persistent,\n      expanded,\n      size,\n      _handleSearchClick: handleSearchClick,\n    } = this;\n    const classes = classMap({\n      [`${prefix}--search`]: true,\n      [`${prefix}--search--${size}`]: size,\n    });\n    if (persistent) {\n      this.expanded = true;\n    }\n    return html`\n      <div\n        class=\"${classes}\"\n        tabindex=\"${expanded ? '-1' : '0'}\"\n        @click=\"${handleSearchClick}\">\n        ${result}\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the search content is changed upon a user gesture.\n   */\n  static get eventInput() {\n    // The code uses on in `<cds-search>`, but definition is done also here for React event generation\n    return `${prefix}-search-input`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSTableToolbarSearch;\n"]}

package/es/components/data-table/table-toolbar-search.js

@@ -34,15 +34,15 @@ import styles from "././data-table.css.js";
      * @element cds-table-toolbar-search
      * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.
      */
-let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-search`)], function (_initialize, _HostListenerMixin) {
-  class BXTableToolbarSearch extends _HostListenerMixin {
+let CDSTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-search`)], function (_initialize, _HostListenerMixin) {
+  class CDSTableToolbarSearch extends _HostListenerMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXTableToolbarSearch,
+    F: CDSTableToolbarSearch,
     d: [{
       kind: "field",
       decorators: [query('input')],
@@ -85,7 +85,7 @@ let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-sea
       decorators: [HostListener('focusout')],
       key: "_handleFocusOut",
       value: function _handleFocusOut(event) {
-        if (!this.contains(event.relatedTarget) && !this.value) {
+        if (!this.contains(event.relatedTarget) && !this.value && !this.persistent) {
           this.expanded = false;
         }
       }
@@ -113,6 +113,16 @@ let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-sea
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "persistent",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -120,12 +130,15 @@ let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-sea
       })],
       key: "size",
       value() {
-        return INPUT_SIZE.SMALL;
+        return INPUT_SIZE.LARGE;
       }
     }, {
       kind: "method",
       key: "connectedCallback",
       value:
+      /**
+       * `true` if the search box should be always be open.
+       */
       /**
        * The search box size.
        */
@@ -133,14 +146,15 @@ let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-sea
         if (!this.hasAttribute('role')) {
           this.setAttribute('role', 'search');
         }
-        _get(_getPrototypeOf(BXTableToolbarSearch.prototype), "connectedCallback", this).call(this);
+        _get(_getPrototypeOf(CDSTableToolbarSearch.prototype), "connectedCallback", this).call(this);
       }
     }, {
       kind: "method",
       key: "render",
       value: function render() {
-        const result = _get(_getPrototypeOf(BXTableToolbarSearch.prototype), "render", this).call(this);
+        const result = _get(_getPrototypeOf(CDSTableToolbarSearch.prototype), "render", this).call(this);
         const {
+          persistent,
           expanded,
           size,
           _handleSearchClick: handleSearchClick
@@ -149,6 +163,9 @@ let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-sea
           [`${prefix}--search`]: true,
           [`${prefix}--search--${size}`]: size
         });
+        if (persistent) {
+          this.expanded = true;
+        }
         return html(_t || (_t = _`
       <div
         class="${0}"
@@ -189,5 +206,5 @@ let BXTableToolbarSearch = _decorate([customElement(`${prefix}-table-toolbar-sea
     }]
   };
 }, HostListenerMixin(CDSSearch));
-export default BXTableToolbarSearch;
+export default CDSTableToolbarSearch;
 //# sourceMappingURL=table-toolbar-search.js.map