@patternfly/elements 2.3.2 → 2.4.0

package/pf-table/pf-thead.js

@@ -0,0 +1,37 @@
+var _PfThead_instances, _PfThead_onSlotchange;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { css } from "lit";
+const styles = css `:host{--pf-c-table--cell--MinWidth:var(--pf-c-table--m-truncate--cell--MinWidth);--pf-c-table--cell--MaxWidth:var(--pf-c-table--m-truncate--cell--MaxWidth);--pf-c-table--cell--Overflow:hidden;--pf-c-table--cell--TextOverflow:ellipsis;--pf-c-table--cell--WhiteSpace:nowrap;--pf-c-table--cell--FontSize:var(--pf-c-table--thead--cell--FontSize, var(--pf-global--FontSize--sm, 0.875rem));--pf-c-table--cell--FontWeight:var(--pf-c-table--thead--cell--FontWeight, var(--pf-global--FontWeight--bold, 700));vertical-align:bottom;display:grid;visibility:visible}@media (max-width:768px){:host{display:none;visibility:hidden}}`;
+/**
+ * Table head
+ * @slot - Place element content here
+ */
+let PfThead = class PfThead extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfThead_instances.add(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'rowgroup');
+    }
+    render() {
+        return html `
+      <slot @slotchange=${__classPrivateFieldGet(this, _PfThead_instances, "m", _PfThead_onSlotchange)}></slot>
+    `;
+    }
+};
+_PfThead_instances = new WeakSet();
+_PfThead_onSlotchange = function _PfThead_onSlotchange() {
+    for (const th of this.querySelectorAll(':scope > pf-th')) {
+        th.setAttribute('role', 'columnheader');
+    }
+};
+PfThead.styles = [styles];
+PfThead = __decorate([
+    customElement('pf-thead')
+], PfThead);
+export { PfThead };
+//# sourceMappingURL=pf-thead.js.map

package/pf-table/pf-thead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-thead.js","sourceRoot":"","sources":["pf-thead.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE;;;GAGG;AAEH,IAAa,OAAO,GAApB,MAAa,OAAQ,SAAQ,UAAU;IAAvC;;;IAmBA,CAAC;IAhBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,uBAAA,IAAI,iDAAc;KACvC,CAAC;IACJ,CAAC;;;;IAGC,KAAK,MAAM,EAAE,IAAI,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE;QACxD,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;KACzC;AACH,CAAC;AAjBe,cAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AADvB,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CAmBnB;SAnBY,OAAO","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-thead.css';\n\n/**\n * Table head\n * @slot - Place element content here\n */\n@customElement('pf-thead')\nexport class PfThead extends LitElement {\n  static readonly styles = [styles];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'rowgroup');\n  }\n\n  render() {\n    return html`\n      <slot @slotchange=${this.#onSlotchange}></slot>\n    `;\n  }\n\n  #onSlotchange() {\n    for (const th of this.querySelectorAll(':scope > pf-th')) {\n      th.setAttribute('role', 'columnheader');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-thead': PfThead;\n  }\n}\n"]}

package/pf-table/pf-tr.css

@@ -0,0 +1,87 @@
+:host {
+  display: grid;
+  align-items: center;
+  padding-inline-start: calc(50px * var(--_pf-table--expandable-rows, 0));
+}
+
+::slotted(*) {
+  height: 100%;
+}
+
+@media (min-width: 768px) {
+  :host {
+    /* TODO: provide ability to override */
+    grid-template-columns: repeat(var(--_pf-table--number-of-columns), 1fr);
+  }
+}
+
+#container {
+  display: contents;
+}
+
+:host([expandable]),
+#expansion {
+  position: relative;
+}
+
+#expansion {
+  display: block;
+  margin-inline-start: calc(-1 * 50px * var(--_pf-table--expandable-rows, 0));
+  grid-auto-flow: row;
+  grid-template-columns: auto;
+  padding: 0px 1.5rem;
+  display: grid;
+  grid-column: 1/-1;
+}
+
+:host(:not([expanded])),
+:host([expanded]) #expansion {
+  border-block-end: 1px solid #d2d2d2;
+}
+
+:host([expanded]) #expansion::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-block-start: 1px solid #d2d2d2;
+  inset-block-start: -1px;
+}
+
+
+#expansion::slotted(pf-td) {
+  padding-block-start: 0;
+  padding-inline-start: 0;
+}
+
+:host([expandable][expanded])::before {
+  position: absolute;
+  inset-block-start: -1px;
+  inset-inline-end: 0;
+  inset-block-end: -1px;
+  inset-inline-start: 0;
+  content: "";
+  border-inline-start: 3px solid #06c;
+  pointer-events: none;
+  z-index: 1;
+}
+
+#expansion::slotted(pf-table) {
+  margin-block-end: -1px;
+}
+
+#toggle-cell {
+  z-index: 2;
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-start: 1.5rem;
+  padding: 0;
+}
+
+#toggle-icon {
+  transition: .2s ease-in 0s;
+  vertical-align: -0.125em;
+}
+
+:host([expanded]) #toggle-icon {
+  transform: rotate(90deg);
+}

package/pf-table/pf-tr.d.ts

@@ -0,0 +1,34 @@
+import { LitElement, type PropertyValues } from 'lit';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+export declare class RequestExpandEvent extends Event {
+    /**
+     * if provided, the slot name for the compound-expanded cell
+     */
+    compoundExpanded: string | boolean;
+    /**
+     * if compoundExpanded is provided, a reference to the row
+     * must also be provided.
+     */
+    row?: PfTr;
+    constructor();
+    constructor(compoundExpanded: string | boolean, row: PfTr);
+}
+/**
+ * Table row
+ * @slot - Place element content here
+ */
+export declare class PfTr extends LitElement {
+    #private;
+    static readonly styles: import("lit").CSSResult[];
+    expandable: boolean | 'compound';
+    expanded: boolean | string;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    render(): (false | "" | import("lit-html").TemplateResult<1>)[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pf-tr': PfTr;
+    }
+}

package/pf-table/pf-tr.js

@@ -0,0 +1,164 @@
+var _PfTr_instances, _PfTr_expandedChanged, _PfTr_expandableChanged, _PfTr_onClick;
+import { __classPrivateFieldGet, __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { property } from 'lit/decorators/property.js';
+import { css } from "lit";
+const styles = css `:host{display:grid;align-items:center;padding-inline-start:calc(50px * var(--_pf-table--expandable-rows,0))}::slotted(*){height:100%}@media (min-width:768px){:host{grid-template-columns:repeat(var(--_pf-table--number-of-columns),1fr)}}#container{display:contents}#expansion,:host([expandable]){position:relative}#expansion{display:block;margin-inline-start:calc(-1 * 50px * var(--_pf-table--expandable-rows,0));grid-auto-flow:row;grid-template-columns:auto;padding:0 1.5rem;display:grid;grid-column:1/-1}:host(:not([expanded])),:host([expanded]) #expansion{border-block-end:1px solid #d2d2d2}:host([expanded]) #expansion::before{content:'';position:absolute;inset:0;border-block-start:1px solid #d2d2d2;inset-block-start:-1px}#expansion::slotted(pf-td){padding-block-start:0;padding-inline-start:0}:host([expandable][expanded])::before{position:absolute;inset-block-start:-1px;inset-inline-end:0;inset-block-end:-1px;inset-inline-start:0;content:"";border-inline-start:3px solid #06c;pointer-events:none;z-index:1}#expansion::slotted(pf-table){margin-block-end:-1px}#toggle-cell{z-index:2;position:absolute;inset-inline-start:0;inset-block-start:1.5rem;padding:0}#toggle-icon{transition:.2s ease-in 0s;vertical-align:-.125em}:host([expanded]) #toggle-icon{transform:rotate(90deg)}`;
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+export class RequestExpandEvent extends Event {
+    constructor(compoundExpanded, row) {
+        super('request-expand', {
+            bubbles: true,
+            cancelable: true,
+        });
+        /**
+         * if provided, the slot name for the compound-expanded cell
+         */
+        this.compoundExpanded = false;
+        if (row) {
+            this.compoundExpanded = compoundExpanded ?? false;
+            this.row = row;
+        }
+    }
+}
+function BooleanEnumConverter(...allowedAttributes) {
+    const values = new Set(allowedAttributes);
+    return {
+        fromAttribute(value) {
+            if (value && values.has(value.toLowerCase())) {
+                return value;
+            }
+            else {
+                return value != null;
+            }
+        },
+        toAttribute(value) {
+            if (!value) {
+                return null;
+            }
+            else if (value === 'compound') {
+                return value;
+            }
+            else {
+                return '';
+            }
+        }
+    };
+}
+const StringOrBooleanConverter = {
+    fromAttribute(value) {
+        return value || value !== null;
+    },
+    toAttribute(value) {
+        if (!value) {
+            return null;
+        }
+        else if (typeof value === 'string') {
+            return value;
+        }
+        else {
+            return '';
+        }
+    }
+};
+/**
+ * Table row
+ * @slot - Place element content here
+ */
+let PfTr = class PfTr extends LitElement {
+    constructor() {
+        super(...arguments);
+        _PfTr_instances.add(this);
+        this.expandable = false;
+        this.expanded = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        __classPrivateFieldGet(this, _PfTr_instances, "m", _PfTr_expandableChanged).call(this);
+    }
+    willUpdate(changed) {
+        if (changed.has('expandable')) {
+            __classPrivateFieldGet(this, _PfTr_instances, "m", _PfTr_expandableChanged).call(this);
+        }
+        if (changed.has('expanded')) {
+            __classPrivateFieldGet(this, _PfTr_instances, "m", _PfTr_expandedChanged).call(this);
+        }
+    }
+    render() {
+        return [
+            this.expandable && this.expandable !== 'compound' && html `
+        <pf-td id="toggle-cell">
+          <pf-button id="toggle-button"
+                     aria-expanded=${String(this.expanded)}
+                     plain
+                     @click=${__classPrivateFieldGet(this, _PfTr_instances, "m", _PfTr_onClick)}>
+            <pf-icon id="toggle-icon"
+                     icon="angle-right"
+                     size="md"
+            ></pf-icon>
+          </pf-button>
+        </pf-td>
+      `,
+            html `
+        <div id="container">
+          <slot role="${ifDefined(this.expandable ? 'row' : undefined)}"></slot>
+        </div>
+      `,
+            this.expandable && this.expandable !== 'compound' && this.expanded && html `
+        <slot id="expansion"
+              name="expansion"
+              role="row"
+        ></slot>
+      `,
+            this.expandable === 'compound' && html `
+        <div id="expansion">${!this.expanded ? '' : html `
+          <slot name="${this.expanded}"></slot>`}
+        </div>
+      `
+        ].filter(Boolean);
+    }
+};
+_PfTr_instances = new WeakSet();
+_PfTr_expandedChanged = function _PfTr_expandedChanged() {
+    // disallow setting `expanded` unless `expandable` is also set
+    if (this.expanded && !this.expandable) {
+        this.expanded = false;
+    }
+};
+_PfTr_expandableChanged = function _PfTr_expandableChanged() {
+    switch (this.expandable) {
+        case 'compound': {
+            // TODO: do we need tab roles now?
+            break;
+        }
+        case true:
+            this.setAttribute('role', 'rowgroup');
+            break;
+        default:
+            this.setAttribute('role', 'row');
+    }
+};
+_PfTr_onClick = function _PfTr_onClick() {
+    this.dispatchEvent(new RequestExpandEvent());
+};
+PfTr.styles = [styles];
+__decorate([
+    property({
+        reflect: true,
+        converter: BooleanEnumConverter('compound'),
+    })
+], PfTr.prototype, "expandable", void 0);
+__decorate([
+    property({
+        reflect: true,
+        converter: StringOrBooleanConverter
+    })
+], PfTr.prototype, "expanded", void 0);
+PfTr = __decorate([
+    customElement('pf-tr')
+], PfTr);
+export { PfTr };
+//# sourceMappingURL=pf-tr.js.map

package/pf-table/pf-tr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pf-tr.js","sourceRoot":"","sources":["pf-tr.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, type ComplexAttributeConverter, type PropertyValues } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport styles from './pf-tr.css';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport '@patternfly/elements/pf-button/pf-button.js';\nimport '@patternfly/elements/pf-icon/pf-icon.js';\n\nexport class RequestExpandEvent extends Event {\n  /**\n   * if provided, the slot name for the compound-expanded cell\n   */\n  public compoundExpanded: string | boolean = false;\n\n  /**\n   * if compoundExpanded is provided, a reference to the row\n   * must also be provided.\n   */\n  public row?: PfTr;\n\n  constructor();\n  constructor(compoundExpanded: string | boolean, row: PfTr);\n  constructor(compoundExpanded?: string | boolean, row?: PfTr) {\n    super('request-expand', {\n      bubbles: true,\n      cancelable: true,\n    });\n    if (row) {\n      this.compoundExpanded = compoundExpanded ?? false;\n      this.row = row;\n    }\n  }\n}\n\nfunction BooleanEnumConverter(...allowedAttributes: string[]): ComplexAttributeConverter {\n  const values = new Set(allowedAttributes);\n  return {\n    fromAttribute(value) {\n      if (value && values.has(value.toLowerCase())) {\n        return value;\n      } else {\n        return value != null;\n      }\n    },\n    toAttribute(value) {\n      if (!value) {\n        return null;\n      } else if (value === 'compound') {\n        return value;\n      } else {\n        return '';\n      }\n    }\n  };\n}\n\nconst StringOrBooleanConverter: ComplexAttributeConverter = {\n  fromAttribute(value) {\n    return value || value !== null;\n  },\n  toAttribute(value) {\n    if (!value) {\n      return null;\n    } else if (typeof value === 'string') {\n      return value;\n    } else {\n      return '';\n    }\n  }\n};\n\n/**\n * Table row\n * @slot - Place element content here\n */\n@customElement('pf-tr')\nexport class PfTr extends LitElement {\n  static readonly styles = [styles];\n\n  @property({\n    reflect: true,\n    converter: BooleanEnumConverter('compound'),\n  }) expandable: boolean | 'compound' = false;\n\n  @property({\n    reflect: true,\n    converter: StringOrBooleanConverter\n  }) expanded: boolean | string = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.#expandableChanged();\n  }\n\n  override willUpdate(changed: PropertyValues<this>) {\n    if (changed.has('expandable')) {\n      this.#expandableChanged();\n    }\n    if (changed.has('expanded')) {\n      this.#expandedChanged();\n    }\n  }\n\n  render() {\n    return [\n      this.expandable && this.expandable !== 'compound' && html`\n        <pf-td id=\"toggle-cell\">\n          <pf-button id=\"toggle-button\"\n                     aria-expanded=${String(this.expanded) as 'true' | 'false'}\n                     plain\n                     @click=${this.#onClick}>\n            <pf-icon id=\"toggle-icon\"\n                     icon=\"angle-right\"\n                     size=\"md\"\n            ></pf-icon>\n          </pf-button>\n        </pf-td>\n      `,\n\n      html`\n        <div id=\"container\">\n          <slot role=\"${ifDefined(this.expandable ? 'row' : undefined)}\"></slot>\n        </div>\n      `,\n\n      this.expandable && this.expandable !== 'compound' && this.expanded && html`\n        <slot id=\"expansion\"\n              name=\"expansion\"\n              role=\"row\"\n        ></slot>\n      `,\n\n      this.expandable === 'compound' && html`\n        <div id=\"expansion\">${!this.expanded ? '' : html`\n          <slot name=\"${this.expanded}\"></slot>`}\n        </div>\n      `\n    ].filter(Boolean);\n  }\n\n  #expandedChanged() {\n    // disallow setting `expanded` unless `expandable` is also set\n    if (this.expanded && !this.expandable) {\n      this.expanded = false;\n    }\n  }\n\n  #expandableChanged() {\n    switch (this.expandable) {\n      case 'compound': {\n        // TODO: do we need tab roles now?\n        break;\n      }\n      case true:\n        this.setAttribute('role', 'rowgroup');\n        break;\n      default:\n        this.setAttribute('role', 'row');\n    }\n  }\n\n  #onClick() {\n    this.dispatchEvent(new RequestExpandEvent());\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'pf-tr': PfTr;\n  }\n}\n"]}

package/pf-tabs/BaseTab.d.ts

@@ -6,6 +6,9 @@ export declare class TabExpandEvent extends ComposedEvent {
     tab: BaseTab;
     constructor(active: boolean, tab: BaseTab);
 }
+/**
+ * @fires {TabExpandEvent} expand - when a tab is selected
+ */
 export declare abstract class BaseTab extends LitElement {
     #private;
     static readonly styles: import("lit").CSSResult[];

package/pf-tabs/BaseTab.js

@@ -1,4 +1,5 @@
-import { __decorate } from "tslib";
+var _BaseTab_instances, _BaseTab_internals, _BaseTab_clickHandler, _BaseTab_activeChanged, _BaseTab_disabledChanged;
+import { __classPrivateFieldGet, __decorate } from "tslib";
 import { LitElement, html } from 'lit';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { query } from 'lit/decorators/query.js';
@@ -13,15 +14,20 @@ export class TabExpandEvent extends ComposedEvent {
         this.tab = tab;
     }
 }
+/**
+ * @fires {TabExpandEvent} expand - when a tab is selected
+ */
 class BaseTab extends LitElement {
-    static { this.styles = [style]; }
-    static { this.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }; }
-    #internals = this.attachInternals();
+    constructor() {
+        super(...arguments);
+        _BaseTab_instances.add(this);
+        _BaseTab_internals.set(this, this.attachInternals());
+    }
     connectedCallback() {
         super.connectedCallback();
-        this.id ||= getRandomId(this.localName);
-        this.addEventListener('click', this.#clickHandler);
-        this.#internals.role = 'tab';
+        this.id || (this.id = getRandomId(this.localName));
+        this.addEventListener('click', __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_clickHandler));
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").role = 'tab';
     }
     render() {
         return html `
@@ -35,41 +41,36 @@ class BaseTab extends LitElement {
     `;
     }
     updated(changed) {
-        this.#internals.ariaSelected = String(this.ariaSelected);
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = String(this.ariaSelected);
         if (changed.has('active')) {
-            this.#activeChanged();
+            __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_activeChanged).call(this);
         }
         if (changed.has('disabled')) {
-            this.#disabledChanged();
+            __classPrivateFieldGet(this, _BaseTab_instances, "m", _BaseTab_disabledChanged).call(this);
         }
     }
     focus() {
         this.button.focus();
     }
-    #clickHandler() {
-        if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
-            this.active = true;
-            this.focus(); // safari fix
-        }
+}
+_BaseTab_internals = new WeakMap(), _BaseTab_instances = new WeakSet(), _BaseTab_clickHandler = function _BaseTab_clickHandler() {
+    if (!this.disabled && __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {
+        this.active = true;
+        this.focus(); // safari fix
     }
-    #activeChanged() {
-        if (this.active && !this.disabled) {
-            this.#internals.ariaSelected = 'true';
-        }
-        else {
-            this.#internals.ariaSelected = 'false';
-        }
-        this.dispatchEvent(new TabExpandEvent(this.active, this));
+}, _BaseTab_activeChanged = function _BaseTab_activeChanged() {
+    if (this.active && !this.disabled) {
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = 'true';
     }
-    /**
-     * if a tab is disabled, then it is also aria-disabled
-     * if a tab is removed from disabled its not necessarily
-     * not still aria-disabled so we don't remove the aria-disabled
-     */
-    #disabledChanged() {
-        this.#internals.ariaDisabled = String(!!this.disabled);
+    else {
+        __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaSelected = 'false';
     }
-}
+    this.dispatchEvent(new TabExpandEvent(this.active, this));
+}, _BaseTab_disabledChanged = function _BaseTab_disabledChanged() {
+    __classPrivateFieldGet(this, _BaseTab_internals, "f").ariaDisabled = String(!!this.disabled);
+};
+BaseTab.styles = [style];
+BaseTab.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 __decorate([
     queryAssignedElements({ slot: 'icon', flatten: true })
 ], BaseTab.prototype, "icons", void 0);

package/pf-tabs/BaseTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,2CAA2C,CAAC;AAClF,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;;;AAIrD,MAAM,OAAO,cAAe,SAAQ,aAAa;IAC/C,YACS,MAAe,EACf,GAAY;QAEnB,KAAK,CAAC,QAAQ,CAAC,CAAC;QAHT,WAAM,GAAN,MAAM,CAAS;QACf,QAAG,GAAH,GAAG,CAAS;IAGrB,CAAC;CACF;AAED,MAAsB,OAAQ,SAAQ,UAAU;aAC9B,WAAM,GAAG,CAAC,KAAK,CAAC,CAAC;aAE1B,sBAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,CAAC;IAarF,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAEpC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACxC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACnD,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;yCAC0B,IAAI,CAAC,QAAQ;;;yBAG7B,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM;6BACd,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE;;;KAGlD,CAAC;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACzD,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;YACzB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;QACD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;IACH,CAAC;IAED,KAAK;QACH,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,CAAC,YAAY,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM,EAAE;YAC7F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,aAAa;SAC5B;IACH,CAAC;IAED,cAAc;QACZ,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACjC,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC;SACvC;aAAM;YACL,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,OAAO,CAAC;SACxC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,cAAc,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC;IAC5D,CAAC;IAED;;;;OAIG;IACH,gBAAgB;QACd,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACzD,CAAC;;AApEO;IADP,qBAAqB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACpB;AAEV;IAAxB,KAAK,CAAC,QAAQ,CAAC;uCAAoC;SARhC,OAAO","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n      this.focus(); // safari fix\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}
+{"version":3,"file":"BaseTab.js","sourceRoot":"","sources":["BaseTab.ts"],"names":[],"mappings":"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","sourcesContent":["import type { PropertyValues } from 'lit';\n\nimport { LitElement, html } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { query } from 'lit/decorators/query.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\nimport { ComposedEvent } from '@patternfly/pfe-core';\n\nimport style from './BaseTab.css';\n\nexport class TabExpandEvent extends ComposedEvent {\n  constructor(\n    public active: boolean,\n    public tab: BaseTab,\n  ) {\n    super('expand');\n  }\n}\n\n/**\n * @fires {TabExpandEvent} expand - when a tab is selected\n */\nexport abstract class BaseTab extends LitElement {\n  static readonly styles = [style];\n\n  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private icons!: Array<HTMLElement>;\n\n  @query('button') private button!: HTMLButtonElement;\n\n  /** `active` should be observed, and true when the tab is selected */\n  abstract active: boolean;\n\n  /** `active` should be observed, and true when the tab is disabled */\n  abstract disabled: boolean;\n\n  #internals = this.attachInternals();\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId(this.localName);\n    this.addEventListener('click', this.#clickHandler);\n    this.#internals.role = 'tab';\n  }\n\n  render() {\n    return html`\n      <button part=\"button\" ?disabled=\"${this.disabled}\">\n        <slot name=\"icon\"\n              part=\"icon\"\n              ?hidden=\"${!this.icons.length}\"\n              @slotchange=\"${() => this.requestUpdate()}\"></slot>\n        <slot part=\"text\"></slot>\n      </button>\n    `;\n  }\n\n  updated(changed: PropertyValues<this>) {\n    this.#internals.ariaSelected = String(this.ariaSelected);\n    if (changed.has('active')) {\n      this.#activeChanged();\n    }\n    if (changed.has('disabled')) {\n      this.#disabledChanged();\n    }\n  }\n\n  focus() {\n    this.button.focus();\n  }\n\n  #clickHandler() {\n    if (!this.disabled && this.#internals.ariaDisabled !== 'true' && this.ariaDisabled !== 'true') {\n      this.active = true;\n      this.focus(); // safari fix\n    }\n  }\n\n  #activeChanged() {\n    if (this.active && !this.disabled) {\n      this.#internals.ariaSelected = 'true';\n    } else {\n      this.#internals.ariaSelected = 'false';\n    }\n    this.dispatchEvent(new TabExpandEvent(this.active, this));\n  }\n\n  /**\n   * if a tab is disabled, then it is also aria-disabled\n   * if a tab is removed from disabled its not necessarily\n   * not still aria-disabled so we don't remove the aria-disabled\n   */\n  #disabledChanged() {\n    this.#internals.ariaDisabled = String(!!this.disabled);\n  }\n}\n"]}

package/pf-tabs/BaseTabPanel.js

@@ -1,10 +1,14 @@
+var _BaseTabPanel_internals;
+import { __classPrivateFieldGet } from "tslib";
 import { LitElement, html } from 'lit';
 import { css } from "lit";
 const style = css `:host{display:block}:host([hidden]){display:none}`;
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 class BaseTabPanel extends LitElement {
-    static { this.styles = [style]; }
-    #internals = this.attachInternals();
+    constructor() {
+        super(...arguments);
+        _BaseTabPanel_internals.set(this, this.attachInternals());
+    }
     render() {
         return html `
       <slot></slot>
@@ -12,9 +16,9 @@ class BaseTabPanel extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.id ||= getRandomId('pf-tab-panel');
-        this.hidden ??= true;
-        this.#internals.role = 'tabpanel';
+        this.id || (this.id = getRandomId('pf-tab-panel'));
+        this.hidden ?? (this.hidden = true);
+        __classPrivateFieldGet(this, _BaseTabPanel_internals, "f").role = 'tabpanel';
         /*
          To make it easy for screen reader users to navigate from a tab
          to the beginning of content in the active tabpanel, the tabpanel
@@ -27,5 +31,7 @@ class BaseTabPanel extends LitElement {
         this.tabIndex = 0;
     }
 }
+_BaseTabPanel_internals = new WeakMap();
+BaseTabPanel.styles = [style];
 export { BaseTabPanel };
 //# sourceMappingURL=BaseTabPanel.js.map

package/pf-tabs/BaseTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAsB,YAAa,SAAQ,UAAU;aACnC,WAAM,GAAG,CAAC,KAAK,CAAC,CAAC;IAEjC,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAEpC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,WAAW,CAAC,cAAc,CAAC,CAAC;QACxC,IAAI,CAAC,MAAM,KAAK,IAAI,CAAC;QACrB,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC;QAElC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;SA3BmB,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n    this.#internals.role = 'tabpanel';\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n}\n"]}
+{"version":3,"file":"BaseTabPanel.js","sourceRoot":"","sources":["BaseTabPanel.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;;;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AAEvE,MAAsB,YAAa,SAAQ,UAAU;IAArD;;QAGE,kCAAa,IAAI,CAAC,eAAe,EAAE,EAAC;IAyBtC,CAAC;IAvBC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAP,IAAI,CAAC,EAAE,GAAK,WAAW,CAAC,cAAc,CAAC,EAAC;QACxC,IAAI,CAAC,MAAM,KAAX,IAAI,CAAC,MAAM,GAAK,IAAI,EAAC;QACrB,uBAAA,IAAI,+BAAW,CAAC,IAAI,GAAG,UAAU,CAAC;QAElC;;;;;;;;UAQE;QACF,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC;IACpB,CAAC;;;AA1Be,mBAAM,GAAG,CAAC,KAAK,CAAC,AAAV,CAAW;SADb,YAAY","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport style from './BaseTabPanel.css';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nexport abstract class BaseTabPanel extends LitElement {\n  static readonly styles = [style];\n\n  #internals = this.attachInternals();\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.id ||= getRandomId('pf-tab-panel');\n    this.hidden ??= true;\n    this.#internals.role = 'tabpanel';\n\n    /*\n     To make it easy for screen reader users to navigate from a tab\n     to the beginning of content in the active tabpanel, the tabpanel\n     element has tabindex=\"0\" to include the panel in the page Tab sequence.\n     It is recommended that all tabpanel elements in a tab set are focusable\n     if there are any panels in the set that contain content where the first\n     element in the panel is not focusable.\n     https://www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-automatic\n    */\n    this.tabIndex = 0;\n  }\n}\n"]}