@patternfly/elements 2.3.2 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (169) hide show
  1. package/custom-elements.json +4399 -699
  2. package/package.json +11 -1
  3. package/pf-accordion/BaseAccordion.js +155 -220
  4. package/pf-accordion/BaseAccordion.js.map +1 -1
  5. package/pf-accordion/BaseAccordionHeader.d.ts +1 -0
  6. package/pf-accordion/BaseAccordionHeader.js +69 -71
  7. package/pf-accordion/BaseAccordionHeader.js.map +1 -1
  8. package/pf-accordion/BaseAccordionPanel.js +2 -2
  9. package/pf-accordion/BaseAccordionPanel.js.map +1 -1
  10. package/pf-accordion/pf-accordion-header.js +9 -4
  11. package/pf-accordion/pf-accordion-header.js.map +1 -1
  12. package/pf-accordion/pf-accordion-panel.js +1 -1
  13. package/pf-accordion/pf-accordion-panel.js.map +1 -1
  14. package/pf-accordion/pf-accordion.js +1 -1
  15. package/pf-accordion/pf-accordion.js.map +1 -1
  16. package/pf-avatar/BaseAvatar.js +1 -1
  17. package/pf-avatar/BaseAvatar.js.map +1 -1
  18. package/pf-avatar/pf-avatar.js +1 -1
  19. package/pf-avatar/pf-avatar.js.map +1 -1
  20. package/pf-badge/BaseBadge.js +1 -1
  21. package/pf-badge/BaseBadge.js.map +1 -1
  22. package/pf-badge/pf-badge.js +1 -1
  23. package/pf-badge/pf-badge.js.map +1 -1
  24. package/pf-banner/README.md +60 -0
  25. package/pf-banner/pf-banner.css +96 -0
  26. package/pf-banner/pf-banner.d.ts +52 -0
  27. package/pf-banner/pf-banner.js +85 -0
  28. package/pf-banner/pf-banner.js.map +1 -0
  29. package/pf-button/BaseButton.js +17 -16
  30. package/pf-button/BaseButton.js.map +1 -1
  31. package/pf-button/pf-button.js +1 -1
  32. package/pf-button/pf-button.js.map +1 -1
  33. package/pf-card/BaseCard.css +2 -2
  34. package/pf-card/BaseCard.js +2 -2
  35. package/pf-card/BaseCard.js.map +1 -1
  36. package/pf-card/pf-card.css +4 -4
  37. package/pf-card/pf-card.js +2 -2
  38. package/pf-card/pf-card.js.map +1 -1
  39. package/pf-clipboard-copy/BaseClipboardCopy.js +1 -1
  40. package/pf-clipboard-copy/BaseClipboardCopy.js.map +1 -1
  41. package/pf-clipboard-copy/pf-clipboard-copy.js +36 -33
  42. package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
  43. package/pf-code-block/BaseCodeBlock.js +1 -1
  44. package/pf-code-block/BaseCodeBlock.js.map +1 -1
  45. package/pf-code-block/pf-code-block.js +14 -11
  46. package/pf-code-block/pf-code-block.js.map +1 -1
  47. package/pf-icon/BaseIcon.js +39 -41
  48. package/pf-icon/BaseIcon.js.map +1 -1
  49. package/pf-icon/pf-icon.js +2 -2
  50. package/pf-icon/pf-icon.js.map +1 -1
  51. package/pf-jump-links/pf-jump-links-item.js +17 -14
  52. package/pf-jump-links/pf-jump-links-item.js.map +1 -1
  53. package/pf-jump-links/pf-jump-links-list.js +1 -1
  54. package/pf-jump-links/pf-jump-links-list.js.map +1 -1
  55. package/pf-jump-links/pf-jump-links.js +37 -34
  56. package/pf-jump-links/pf-jump-links.js.map +1 -1
  57. package/pf-label/BaseLabel.js +1 -1
  58. package/pf-label/BaseLabel.js.map +1 -1
  59. package/pf-label/pf-label.js +2 -2
  60. package/pf-label/pf-label.js.map +1 -1
  61. package/pf-modal/pf-modal.js +46 -45
  62. package/pf-modal/pf-modal.js.map +1 -1
  63. package/pf-panel/pf-panel.js +7 -6
  64. package/pf-panel/pf-panel.js.map +1 -1
  65. package/pf-popover/pf-popover.d.ts +2 -2
  66. package/pf-popover/pf-popover.js +67 -55
  67. package/pf-popover/pf-popover.js.map +1 -1
  68. package/pf-progress/README.md +33 -0
  69. package/pf-progress/pf-progress.css +210 -0
  70. package/pf-progress/pf-progress.d.ts +111 -0
  71. package/pf-progress/pf-progress.js +218 -0
  72. package/pf-progress/pf-progress.js.map +1 -0
  73. package/pf-progress-stepper/pf-progress-step.js +11 -10
  74. package/pf-progress-stepper/pf-progress-step.js.map +1 -1
  75. package/pf-progress-stepper/pf-progress-stepper.js +16 -13
  76. package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
  77. package/pf-spinner/BaseSpinner.js +1 -1
  78. package/pf-spinner/BaseSpinner.js.map +1 -1
  79. package/pf-spinner/pf-spinner.js +1 -1
  80. package/pf-spinner/pf-spinner.js.map +1 -1
  81. package/pf-switch/BaseSwitch.js +44 -47
  82. package/pf-switch/BaseSwitch.js.map +1 -1
  83. package/pf-switch/pf-switch.js +1 -1
  84. package/pf-switch/pf-switch.js.map +1 -1
  85. package/pf-table/README.md +43 -0
  86. package/pf-table/pf-caption.css +9 -0
  87. package/pf-table/pf-caption.d.ts +14 -0
  88. package/pf-table/pf-caption.js +22 -0
  89. package/pf-table/pf-caption.js.map +1 -0
  90. package/pf-table/pf-table.css +223 -0
  91. package/pf-table/pf-table.d.ts +663 -0
  92. package/pf-table/pf-table.js +767 -0
  93. package/pf-table/pf-table.js.map +1 -0
  94. package/pf-table/pf-tbody.css +16 -0
  95. package/pf-table/pf-tbody.d.ts +15 -0
  96. package/pf-table/pf-tbody.js +26 -0
  97. package/pf-table/pf-tbody.js.map +1 -0
  98. package/pf-table/pf-td.css +105 -0
  99. package/pf-table/pf-td.d.ts +18 -0
  100. package/pf-table/pf-td.js +52 -0
  101. package/pf-table/pf-td.js.map +1 -0
  102. package/pf-table/pf-th.css +93 -0
  103. package/pf-table/pf-th.d.ts +27 -0
  104. package/pf-table/pf-th.js +96 -0
  105. package/pf-table/pf-th.js.map +1 -0
  106. package/pf-table/pf-thead.css +19 -0
  107. package/pf-table/pf-thead.d.ts +16 -0
  108. package/pf-table/pf-thead.js +37 -0
  109. package/pf-table/pf-thead.js.map +1 -0
  110. package/pf-table/pf-tr.css +87 -0
  111. package/pf-table/pf-tr.d.ts +34 -0
  112. package/pf-table/pf-tr.js +164 -0
  113. package/pf-table/pf-tr.js.map +1 -0
  114. package/pf-tabs/BaseTab.d.ts +3 -0
  115. package/pf-tabs/BaseTab.js +32 -31
  116. package/pf-tabs/BaseTab.js.map +1 -1
  117. package/pf-tabs/BaseTabPanel.js +11 -5
  118. package/pf-tabs/BaseTabPanel.js.map +1 -1
  119. package/pf-tabs/BaseTabs.js +116 -135
  120. package/pf-tabs/BaseTabs.js.map +1 -1
  121. package/pf-tabs/pf-tab-panel.js +1 -1
  122. package/pf-tabs/pf-tab-panel.js.map +1 -1
  123. package/pf-tabs/pf-tab.d.ts +1 -1
  124. package/pf-tabs/pf-tab.js +2 -2
  125. package/pf-tabs/pf-tab.js.map +1 -1
  126. package/pf-tabs/pf-tabs.d.ts +2 -0
  127. package/pf-tabs/pf-tabs.js +6 -2
  128. package/pf-tabs/pf-tabs.js.map +1 -1
  129. package/pf-text-input/README.md +9 -0
  130. package/pf-text-input/pf-text-input.css +261 -0
  131. package/pf-text-input/pf-text-input.d.ts +174 -0
  132. package/pf-text-input/pf-text-input.js +262 -0
  133. package/pf-text-input/pf-text-input.js.map +1 -0
  134. package/pf-tile/pf-tile.js +1 -1
  135. package/pf-tile/pf-tile.js.map +1 -1
  136. package/pf-timestamp/pf-timestamp.js +15 -10
  137. package/pf-timestamp/pf-timestamp.js.map +1 -1
  138. package/pf-tooltip/BaseTooltip.css +1 -5
  139. package/pf-tooltip/BaseTooltip.d.ts +3 -0
  140. package/pf-tooltip/BaseTooltip.js +18 -9
  141. package/pf-tooltip/BaseTooltip.js.map +1 -1
  142. package/pf-tooltip/pf-tooltip.css +66 -4
  143. package/pf-tooltip/pf-tooltip.d.ts +25 -3
  144. package/pf-tooltip/pf-tooltip.js +144 -5
  145. package/pf-tooltip/pf-tooltip.js.map +1 -1
  146. package/pfe.min.js +257 -137
  147. package/pfe.min.js.map +4 -4
  148. package/react/pf-banner/pf-banner.d.ts +4 -0
  149. package/react/pf-banner/pf-banner.js +10 -0
  150. package/react/pf-progress/pf-progress.d.ts +4 -0
  151. package/react/pf-progress/pf-progress.js +10 -0
  152. package/react/pf-table/pf-caption.d.ts +4 -0
  153. package/react/pf-table/pf-caption.js +10 -0
  154. package/react/pf-table/pf-table.d.ts +4 -0
  155. package/react/pf-table/pf-table.js +10 -0
  156. package/react/pf-table/pf-tbody.d.ts +4 -0
  157. package/react/pf-table/pf-tbody.js +10 -0
  158. package/react/pf-table/pf-td.d.ts +4 -0
  159. package/react/pf-table/pf-td.js +10 -0
  160. package/react/pf-table/pf-th.d.ts +4 -0
  161. package/react/pf-table/pf-th.js +10 -0
  162. package/react/pf-table/pf-thead.d.ts +4 -0
  163. package/react/pf-table/pf-thead.js +10 -0
  164. package/react/pf-table/pf-tr.d.ts +4 -0
  165. package/react/pf-table/pf-tr.js +10 -0
  166. package/react/pf-tabs/pf-tab.d.ts +1 -1
  167. package/react/pf-tabs/pf-tab.js +1 -1
  168. package/react/pf-text-input/pf-text-input.d.ts +4 -0
  169. package/react/pf-text-input/pf-text-input.js +10 -0
@@ -1,4 +1,5 @@
1
- import { __decorate } from "tslib";
1
+ var _BaseTabs_instances, _a, _BaseTabs_instances_1, _BaseTabs_tabindex, _BaseTabs_overflow, _BaseTabs_logger, _BaseTabs__allTabs, _BaseTabs__allPanels, _BaseTabs_activeIndex, _BaseTabs_activeTab_get, _BaseTabs_allTabs_get, _BaseTabs_allTabs_set, _BaseTabs_allPanels_get, _BaseTabs_allPanels_set, _BaseTabs_onSlotchange, _BaseTabs_updateAccessibility, _BaseTabs_onTabExpand, _BaseTabs_deactivateExcept, _BaseTabs_firstFocusable_get, _BaseTabs_firstTab_get, _BaseTabs_lastTab_get, _BaseTabs_activeItemIndex_get, _BaseTabs_firstLastClasses, _BaseTabs_scrollLeft, _BaseTabs_scrollRight;
2
+ import { __classPrivateFieldGet, __classPrivateFieldSet, __decorate } from "tslib";
2
3
  import { LitElement, html } from 'lit';
3
4
  import { property } from 'lit/decorators/property.js';
4
5
  import { query } from 'lit/decorators/query.js';
@@ -22,73 +23,50 @@ const styles = css `:host{display:block}[part=tabs-container]{position:relative;
22
23
  class BaseTabs extends LitElement {
23
24
  constructor() {
24
25
  super(...arguments);
25
- this.#tabindex = new RovingTabindexController(this);
26
- this.#overflow = new OverflowController(this);
27
- this.#logger = new Logger(this);
28
- this.#_allTabs = [];
29
- this.#_allPanels = [];
30
- this.#activeIndex = 0;
26
+ _BaseTabs_instances.add(this);
27
+ _BaseTabs_tabindex.set(this, new RovingTabindexController(this));
28
+ _BaseTabs_overflow.set(this, new OverflowController(this));
29
+ _BaseTabs_logger.set(this, new Logger(this));
30
+ _BaseTabs__allTabs.set(this, []);
31
+ _BaseTabs__allPanels.set(this, []);
32
+ _BaseTabs_activeIndex.set(this, 0);
31
33
  /**
32
34
  * Tab activation
33
35
  * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated
34
36
  * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)
35
37
  */
36
38
  this.manual = false;
37
- this.#onTabExpand = (event) => {
39
+ _BaseTabs_onTabExpand.set(this, (event) => {
38
40
  if (!(event instanceof TabExpandEvent) ||
39
- !this.#allTabs.length ||
40
- !this.#allPanels.length) {
41
+ !__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length ||
42
+ !__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) {
41
43
  return;
42
44
  }
43
45
  if (event.active) {
44
- if (event.tab !== this.#tabindex.activeItem) {
45
- this.#tabindex.updateActiveItem(event.tab);
46
+ if (event.tab !== __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").activeItem) {
47
+ __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(event.tab);
46
48
  }
47
- this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);
49
+ this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab === event.tab);
48
50
  }
49
- };
51
+ });
50
52
  }
51
- static { this.styles = [styles]; }
52
53
  static isTab(element) {
53
54
  return element instanceof BaseTab;
54
55
  }
55
56
  static isPanel(element) {
56
57
  return element instanceof BaseTabPanel;
57
58
  }
58
- /** Time in milliseconds to debounce between scroll events and updating scroll button state */
59
- static { this.scrollTimeoutDelay = 0; }
60
- /** Icon name to use for the scroll left button */
61
- static { this.scrollIconLeft = 'angle-left'; }
62
- /** Icon name to use for the scroll right button */
63
- static { this.scrollIconRight = 'angle-right'; }
64
- /** Icon set to use for the scroll buttons */
65
- static { this.scrollIconSet = 'fas'; }
66
- static #instances = new Set();
67
- static {
68
- // on resize check for overflows to add or remove scroll buttons
69
- window.addEventListener('resize', () => {
70
- for (const instance of this.#instances) {
71
- instance.#overflow.onScroll();
72
- }
73
- }, { capture: false });
74
- }
75
- #tabindex;
76
- #overflow;
77
- #logger;
78
- #_allTabs;
79
- #_allPanels;
80
- #activeIndex;
81
59
  get activeIndex() {
82
- return this.#activeIndex;
60
+ return __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f");
83
61
  }
84
62
  set activeIndex(index) {
85
63
  const oldIndex = this.activeIndex;
86
- const tab = this.#allTabs[index];
64
+ const tab = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get)[index];
87
65
  if (tab) {
88
66
  if (tab.disabled) {
89
- this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);
90
- this.#tabindex.updateActiveItem(this.#firstFocusable);
91
- index = this.#activeItemIndex;
67
+ __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`Disabled tabs can not be active, setting first focusable tab to active`);
68
+ __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstFocusable_get));
69
+ index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
92
70
  }
93
71
  else if (!tab.active) {
94
72
  // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`
@@ -97,138 +75,141 @@ class BaseTabs extends LitElement {
97
75
  }
98
76
  }
99
77
  if (index === -1) {
100
- this.#logger.warn(`No active tab found, setting first focusable tab to active`);
101
- const first = this.#tabindex.firstItem;
102
- this.#tabindex.updateActiveItem(first);
103
- index = this.#activeItemIndex;
78
+ __classPrivateFieldGet(this, _BaseTabs_logger, "f").warn(`No active tab found, setting first focusable tab to active`);
79
+ const first = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
80
+ __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(first);
81
+ index = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeItemIndex_get);
104
82
  }
105
- this.#activeIndex = index;
83
+ __classPrivateFieldSet(this, _BaseTabs_activeIndex, index, "f");
106
84
  this.requestUpdate('activeIndex', oldIndex);
107
- this.#allPanels[this.#activeIndex].hidden = false;
85
+ __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[__classPrivateFieldGet(this, _BaseTabs_activeIndex, "f")].hidden = false;
108
86
  // close all tabs that are not the activeIndex
109
- this.#deactivateExcept(this.#activeIndex);
110
- }
111
- get #activeTab() {
112
- const [tab] = this.#_allTabs.filter(tab => tab.active);
113
- return tab;
114
- }
115
- get #allTabs() {
116
- return this.#_allTabs;
117
- }
118
- set #allTabs(tabs) {
119
- this.#_allTabs = tabs.filter(tab => this.constructor.isTab(tab));
120
- }
121
- get #allPanels() {
122
- return this.#_allPanels;
123
- }
124
- set #allPanels(panels) {
125
- this.#_allPanels = panels.filter(panel => this.constructor.isPanel(panel));
87
+ __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_deactivateExcept).call(this, __classPrivateFieldGet(this, _BaseTabs_activeIndex, "f"));
126
88
  }
127
89
  connectedCallback() {
128
90
  super.connectedCallback();
129
- this.id ||= getRandomId(this.localName);
130
- this.addEventListener('expand', this.#onTabExpand);
131
- BaseTabs.#instances.add(this);
91
+ this.id || (this.id = getRandomId(this.localName));
92
+ this.addEventListener('expand', __classPrivateFieldGet(this, _BaseTabs_onTabExpand, "f"));
93
+ __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).add(this);
132
94
  }
133
95
  disconnectedCallback() {
134
96
  super.disconnectedCallback();
135
- BaseTabs.#instances.delete(this);
97
+ __classPrivateFieldGet(BaseTabs, _a, "f", _BaseTabs_instances_1).delete(this);
136
98
  }
137
99
  willUpdate() {
138
- const { activeItem } = this.#tabindex;
100
+ const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
139
101
  // If RTI has an activeItem, update the roving tabindex controller
140
102
  if (!this.manual &&
141
103
  activeItem &&
142
- activeItem !== this.#activeTab &&
104
+ activeItem !== __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get) &&
143
105
  activeItem.ariaDisabled !== 'true') {
144
106
  activeItem.active = true;
145
107
  }
146
108
  }
147
109
  async firstUpdated() {
148
- this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));
110
+ this.tabList.addEventListener('scroll', __classPrivateFieldGet(this, _BaseTabs_overflow, "f").onScroll.bind(this));
149
111
  }
150
112
  render() {
151
113
  const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor;
152
114
  return html `
153
- <div part="container" class="${classMap({ overflow: this.#overflow.showScrollButtons })}">
154
- <div part="tabs-container">${!this.#overflow.showScrollButtons ? '' : html `
115
+ <div part="container" class="${classMap({ overflow: __classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons })}">
116
+ <div part="tabs-container">${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons ? '' : html `
155
117
  <button id="previousTab" tabindex="-1"
156
118
  aria-label="${this.getAttribute('label-scroll-left') ?? 'Scroll left'}"
157
- ?disabled="${!this.#overflow.overflowLeft}"
158
- @click="${this.#scrollLeft}">
119
+ ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").overflowLeft}"
120
+ @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollLeft)}">
159
121
  <pf-icon icon="${scrollIconLeft}" set="${scrollIconSet}" loading="eager"></pf-icon>
160
122
  </button>`}
161
123
  <slot name="tab"
162
124
  part="tabs"
163
125
  role="tablist"
164
- @slotchange="${this.#onSlotchange}"></slot> ${!this.#overflow.showScrollButtons ? '' : html `
126
+ @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot> ${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").showScrollButtons ? '' : html `
165
127
  <button id="nextTab" tabindex="-1"
166
128
  aria-label="${this.getAttribute('label-scroll-right') ?? 'Scroll right'}"
167
- ?disabled="${!this.#overflow.overflowRight}"
168
- @click="${this.#scrollRight}">
129
+ ?disabled="${!__classPrivateFieldGet(this, _BaseTabs_overflow, "f").overflowRight}"
130
+ @click="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_scrollRight)}">
169
131
  <pf-icon icon="${scrollIconRight}" set="${scrollIconSet}" loading="eager"></pf-icon>
170
132
  </button>`}
171
133
  </div>
172
- <slot part="panels" @slotchange="${this.#onSlotchange}"></slot>
134
+ <slot part="panels" @slotchange="${__classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_onSlotchange)}"></slot>
173
135
  </div>
174
136
  `;
175
137
  }
176
- #onSlotchange(event) {
177
- if (event.target.name === 'tab') {
178
- this.#allTabs = this.tabs;
179
- }
180
- else {
181
- this.#allPanels = this.panels;
138
+ }
139
+ _a = BaseTabs, _BaseTabs_tabindex = new WeakMap(), _BaseTabs_overflow = new WeakMap(), _BaseTabs_logger = new WeakMap(), _BaseTabs__allTabs = new WeakMap(), _BaseTabs__allPanels = new WeakMap(), _BaseTabs_activeIndex = new WeakMap(), _BaseTabs_onTabExpand = new WeakMap(), _BaseTabs_instances = new WeakSet(), _BaseTabs_activeTab_get = function _BaseTabs_activeTab_get() {
140
+ const [tab] = __classPrivateFieldGet(this, _BaseTabs__allTabs, "f").filter(tab => tab.active);
141
+ return tab;
142
+ }, _BaseTabs_allTabs_get = function _BaseTabs_allTabs_get() {
143
+ return __classPrivateFieldGet(this, _BaseTabs__allTabs, "f");
144
+ }, _BaseTabs_allTabs_set = function _BaseTabs_allTabs_set(tabs) {
145
+ __classPrivateFieldSet(this, _BaseTabs__allTabs, tabs.filter(tab => this.constructor.isTab(tab)), "f");
146
+ }, _BaseTabs_allPanels_get = function _BaseTabs_allPanels_get() {
147
+ return __classPrivateFieldGet(this, _BaseTabs__allPanels, "f");
148
+ }, _BaseTabs_allPanels_set = function _BaseTabs_allPanels_set(panels) {
149
+ __classPrivateFieldSet(this, _BaseTabs__allPanels, panels.filter(panel => this.constructor.isPanel(panel)), "f");
150
+ }, _BaseTabs_onSlotchange = function _BaseTabs_onSlotchange(event) {
151
+ if (event.target.name === 'tab') {
152
+ __classPrivateFieldSet(this, _BaseTabs_instances, this.tabs, "a", _BaseTabs_allTabs_set);
153
+ }
154
+ else {
155
+ __classPrivateFieldSet(this, _BaseTabs_instances, this.panels, "a", _BaseTabs_allPanels_set);
156
+ }
157
+ if ((__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length === __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length) &&
158
+ (__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).length !== 0 || __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).length !== 0)) {
159
+ __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_updateAccessibility).call(this);
160
+ __classPrivateFieldGet(this, _BaseTabs_instances, "m", _BaseTabs_firstLastClasses).call(this);
161
+ __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").initItems(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
162
+ this.activeIndex = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(tab => tab.active);
163
+ __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").updateActiveItem(__classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_activeTab_get));
164
+ __classPrivateFieldGet(this, _BaseTabs_overflow, "f").init(this.tabList, __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get));
165
+ }
166
+ }, _BaseTabs_updateAccessibility = function _BaseTabs_updateAccessibility() {
167
+ __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, index) => {
168
+ const panel = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get)[index];
169
+ if (!panel.hasAttribute('aria-labelledby')) {
170
+ panel.setAttribute('aria-labelledby', tab.id);
182
171
  }
183
- if ((this.#allTabs.length === this.#allPanels.length) &&
184
- (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {
185
- this.#updateAccessibility();
186
- this.#firstLastClasses();
187
- this.#tabindex.initItems(this.#allTabs);
188
- this.activeIndex = this.#allTabs.findIndex(tab => tab.active);
189
- this.#tabindex.updateActiveItem(this.#activeTab);
190
- this.#overflow.init(this.tabList, this.#allTabs);
172
+ tab.setAttribute('aria-controls', panel.id);
173
+ });
174
+ }, _BaseTabs_deactivateExcept = function _BaseTabs_deactivateExcept(index) {
175
+ __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).forEach((tab, i) => tab.active = i === index);
176
+ __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allPanels_get).forEach((panel, i) => panel.hidden = i !== index);
177
+ }, _BaseTabs_firstFocusable_get = function _BaseTabs_firstFocusable_get() {
178
+ return __classPrivateFieldGet(this, _BaseTabs_tabindex, "f").firstItem;
179
+ }, _BaseTabs_firstTab_get = function _BaseTabs_firstTab_get() {
180
+ const [tab] = __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get);
181
+ return tab;
182
+ }, _BaseTabs_lastTab_get = function _BaseTabs_lastTab_get() {
183
+ return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).at(-1);
184
+ }, _BaseTabs_activeItemIndex_get = function _BaseTabs_activeItemIndex_get() {
185
+ const { activeItem } = __classPrivateFieldGet(this, _BaseTabs_tabindex, "f");
186
+ return __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_allTabs_get).findIndex(t => t === activeItem);
187
+ }, _BaseTabs_firstLastClasses = function _BaseTabs_firstLastClasses() {
188
+ __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_firstTab_get)?.classList.add('first');
189
+ __classPrivateFieldGet(this, _BaseTabs_instances, "a", _BaseTabs_lastTab_get)?.classList.add('last');
190
+ }, _BaseTabs_scrollLeft = function _BaseTabs_scrollLeft() {
191
+ __classPrivateFieldGet(this, _BaseTabs_overflow, "f").scrollLeft();
192
+ }, _BaseTabs_scrollRight = function _BaseTabs_scrollRight() {
193
+ __classPrivateFieldGet(this, _BaseTabs_overflow, "f").scrollRight();
194
+ };
195
+ BaseTabs.styles = [styles];
196
+ /** Time in milliseconds to debounce between scroll events and updating scroll button state */
197
+ BaseTabs.scrollTimeoutDelay = 0;
198
+ /** Icon name to use for the scroll left button */
199
+ BaseTabs.scrollIconLeft = 'angle-left';
200
+ /** Icon name to use for the scroll right button */
201
+ BaseTabs.scrollIconRight = 'angle-right';
202
+ /** Icon set to use for the scroll buttons */
203
+ BaseTabs.scrollIconSet = 'fas';
204
+ _BaseTabs_instances_1 = { value: new Set() };
205
+ (() => {
206
+ // on resize check for overflows to add or remove scroll buttons
207
+ window.addEventListener('resize', () => {
208
+ for (const instance of __classPrivateFieldGet(_a, _a, "f", _BaseTabs_instances_1)) {
209
+ __classPrivateFieldGet(instance, _BaseTabs_overflow, "f").onScroll();
191
210
  }
192
- }
193
- #updateAccessibility() {
194
- this.#allTabs.forEach((tab, index) => {
195
- const panel = this.#allPanels[index];
196
- if (!panel.hasAttribute('aria-labelledby')) {
197
- panel.setAttribute('aria-labelledby', tab.id);
198
- }
199
- tab.setAttribute('aria-controls', panel.id);
200
- });
201
- }
202
- #onTabExpand;
203
- #deactivateExcept(index) {
204
- this.#allTabs.forEach((tab, i) => tab.active = i === index);
205
- this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);
206
- }
207
- get #firstFocusable() {
208
- return this.#tabindex.firstItem;
209
- }
210
- get #firstTab() {
211
- const [tab] = this.#allTabs;
212
- return tab;
213
- }
214
- get #lastTab() {
215
- return this.#allTabs.at(-1);
216
- }
217
- get #activeItemIndex() {
218
- const { activeItem } = this.#tabindex;
219
- return this.#allTabs.findIndex(t => t === activeItem);
220
- }
221
- #firstLastClasses() {
222
- this.#firstTab?.classList.add('first');
223
- this.#lastTab?.classList.add('last');
224
- }
225
- #scrollLeft() {
226
- this.#overflow.scrollLeft();
227
- }
228
- #scrollRight() {
229
- this.#overflow.scrollRight();
230
- }
231
- }
211
+ }, { capture: false });
212
+ })();
232
213
  __decorate([
233
214
  queryAssignedElements({ slot: 'tab' })
234
215
  ], BaseTabs.prototype, "tabs", void 0);
@@ -1 +1 @@
1
- {"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n static readonly styles = [styles];\n\n static isTab(element: BaseTab): element is BaseTab {\n return element instanceof BaseTab;\n }\n\n static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n return element instanceof BaseTabPanel;\n }\n\n /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n protected static readonly scrollTimeoutDelay: number = 0;\n /** Icon name to use for the scroll left button */\n protected static readonly scrollIconLeft: string = 'angle-left';\n /** Icon name to use for the scroll right button */\n protected static readonly scrollIconRight: string = 'angle-right';\n /** Icon set to use for the scroll buttons */\n protected static readonly scrollIconSet: string = 'fas';\n\n static #instances = new Set<BaseTabs>();\n\n static {\n // on resize check for overflows to add or remove scroll buttons\n window.addEventListener('resize', () => {\n for (const instance of this.#instances) {\n instance.#overflow.onScroll();\n }\n }, { capture: false });\n }\n\n @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n @queryAssignedElements() private panels!: BaseTabPanel[];\n\n @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n #tabindex = new RovingTabindexController<BaseTab>(this);\n\n #overflow = new OverflowController(this);\n\n #logger = new Logger(this);\n\n #_allTabs: BaseTab[] = [];\n\n #_allPanels: BaseTabPanel[] = [];\n\n #activeIndex = 0;\n\n /**\n * Tab activation\n * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n */\n @property({ reflect: true, type: Boolean }) manual = false;\n\n @property({ attribute: false })\n get activeIndex() {\n return this.#activeIndex;\n }\n\n set activeIndex(index: number) {\n const oldIndex = this.activeIndex;\n const tab = this.#allTabs[index];\n if (tab) {\n if (tab.disabled) {\n this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n this.#tabindex.updateActiveItem(this.#firstFocusable);\n index = this.#activeItemIndex;\n } else if (!tab.active) {\n // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n tab.active = true;\n return;\n }\n }\n\n if (index === -1) {\n this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n const first = this.#tabindex.firstItem;\n this.#tabindex.updateActiveItem(first);\n index = this.#activeItemIndex;\n }\n this.#activeIndex = index;\n this.requestUpdate('activeIndex', oldIndex);\n\n this.#allPanels[this.#activeIndex].hidden = false;\n // close all tabs that are not the activeIndex\n this.#deactivateExcept(this.#activeIndex);\n }\n\n get #activeTab() {\n const [tab] = this.#_allTabs.filter(tab => tab.active);\n return tab;\n }\n\n get #allTabs() {\n return this.#_allTabs;\n }\n\n set #allTabs(tabs: BaseTab[]) {\n this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n }\n\n get #allPanels() {\n return this.#_allPanels;\n }\n\n set #allPanels(panels: BaseTabPanel[]) {\n this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.id ||= getRandomId(this.localName);\n this.addEventListener('expand', this.#onTabExpand);\n BaseTabs.#instances.add(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n BaseTabs.#instances.delete(this);\n }\n\n override willUpdate(): void {\n const { activeItem } = this.#tabindex;\n // If RTI has an activeItem, update the roving tabindex controller\n if (!this.manual &&\n activeItem &&\n activeItem !== this.#activeTab &&\n activeItem.ariaDisabled !== 'true') {\n activeItem.active = true;\n }\n }\n\n async firstUpdated() {\n this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n }\n\n override render() {\n const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n return html`\n <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"previousTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n ?disabled=\"${!this.#overflow.overflowLeft}\"\n @click=\"${this.#scrollLeft}\">\n <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n <slot name=\"tab\"\n part=\"tabs\"\n role=\"tablist\"\n @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"nextTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n ?disabled=\"${!this.#overflow.overflowRight}\"\n @click=\"${this.#scrollRight}\">\n <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n </div>\n <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n </div>\n `;\n }\n\n #onSlotchange(event: { target: { name: string } }) {\n if (event.target.name === 'tab') {\n this.#allTabs = this.tabs;\n } else {\n this.#allPanels = this.panels;\n }\n\n if ((this.#allTabs.length === this.#allPanels.length) &&\n (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n this.#updateAccessibility();\n this.#firstLastClasses();\n this.#tabindex.initItems(this.#allTabs);\n this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n this.#tabindex.updateActiveItem(this.#activeTab);\n this.#overflow.init(this.tabList, this.#allTabs);\n }\n }\n\n #updateAccessibility(): void {\n this.#allTabs.forEach((tab, index) => {\n const panel = this.#allPanels[index];\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tab.id);\n }\n tab.setAttribute('aria-controls', panel.id);\n });\n }\n\n #onTabExpand = (event: Event): void => {\n if (!(event instanceof TabExpandEvent) ||\n !this.#allTabs.length ||\n !this.#allPanels.length) {\n return;\n }\n\n if (event.active) {\n if (event.tab !== this.#tabindex.activeItem) {\n this.#tabindex.updateActiveItem(event.tab);\n }\n this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);\n }\n };\n\n #deactivateExcept(index: number) {\n this.#allTabs.forEach((tab, i) => tab.active = i === index);\n this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n }\n\n get #firstFocusable(): BaseTab | undefined {\n return this.#tabindex.firstItem;\n }\n\n get #firstTab(): BaseTab | undefined {\n const [tab] = this.#allTabs;\n return tab;\n }\n\n get #lastTab(): BaseTab | undefined {\n return this.#allTabs.at(-1);\n }\n\n get #activeItemIndex() {\n const { activeItem } = this.#tabindex;\n return this.#allTabs.findIndex(t => t === activeItem);\n }\n\n #firstLastClasses() {\n this.#firstTab?.classList.add('first');\n this.#lastTab?.classList.add('last');\n }\n\n #scrollLeft() {\n this.#overflow.scrollLeft();\n }\n\n #scrollRight() {\n this.#overflow.scrollRight();\n }\n}\n"]}
1
+ {"version":3,"file":"BaseTabs.js","sourceRoot":"","sources":["BaseTabs.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html } from 'lit';\n\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\n\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport { RovingTabindexController } from '@patternfly/pfe-core/controllers/roving-tabindex-controller.js';\nimport { OverflowController } from '@patternfly/pfe-core/controllers/overflow-controller.js';\nimport { Logger } from '@patternfly/pfe-core/controllers/logger.js';\n\nimport { getRandomId } from '@patternfly/pfe-core/functions/random.js';\n\nimport { BaseTab, TabExpandEvent } from './BaseTab.js';\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\nimport styles from './BaseTabs.css';\n\n/**\n * BaseTabs\n *\n * @attr [label-scroll-left=\"Scroll left\"] - accessible label for the tab panel's scroll left button.\n * @attr [label-scroll-right=\"Scroll right\"] - accessible label for the tab panel's scroll right button.\n *\n */\nexport abstract class BaseTabs extends LitElement {\n static readonly styles = [styles];\n\n static isTab(element: BaseTab): element is BaseTab {\n return element instanceof BaseTab;\n }\n\n static isPanel(element: BaseTabPanel): element is BaseTabPanel {\n return element instanceof BaseTabPanel;\n }\n\n /** Time in milliseconds to debounce between scroll events and updating scroll button state */\n protected static readonly scrollTimeoutDelay: number = 0;\n /** Icon name to use for the scroll left button */\n protected static readonly scrollIconLeft: string = 'angle-left';\n /** Icon name to use for the scroll right button */\n protected static readonly scrollIconRight: string = 'angle-right';\n /** Icon set to use for the scroll buttons */\n protected static readonly scrollIconSet: string = 'fas';\n\n static #instances = new Set<BaseTabs>();\n\n static {\n // on resize check for overflows to add or remove scroll buttons\n window.addEventListener('resize', () => {\n for (const instance of this.#instances) {\n instance.#overflow.onScroll();\n }\n }, { capture: false });\n }\n\n @queryAssignedElements({ slot: 'tab' }) private tabs!: BaseTab[];\n\n @queryAssignedElements() private panels!: BaseTabPanel[];\n\n @query('[part=\"tabs\"]') private tabList!: HTMLElement;\n\n #tabindex = new RovingTabindexController<BaseTab>(this);\n\n #overflow = new OverflowController(this);\n\n #logger = new Logger(this);\n\n #_allTabs: BaseTab[] = [];\n\n #_allPanels: BaseTabPanel[] = [];\n\n #activeIndex = 0;\n\n /**\n * Tab activation\n * Tabs can be either [automatic](https://w3c.github.io/aria-practices/examples/tabs/tabs-automatic.html) activated\n * or [manual](https://w3c.github.io/aria-practices/examples/tabs/tabs-manual.html)\n */\n @property({ reflect: true, type: Boolean }) manual = false;\n\n @property({ attribute: false })\n get activeIndex() {\n return this.#activeIndex;\n }\n\n set activeIndex(index: number) {\n const oldIndex = this.activeIndex;\n const tab = this.#allTabs[index];\n if (tab) {\n if (tab.disabled) {\n this.#logger.warn(`Disabled tabs can not be active, setting first focusable tab to active`);\n this.#tabindex.updateActiveItem(this.#firstFocusable);\n index = this.#activeItemIndex;\n } else if (!tab.active) {\n // if the activeIndex was set through the CLI e.g.`$0.activeIndex = 2`\n tab.active = true;\n return;\n }\n }\n\n if (index === -1) {\n this.#logger.warn(`No active tab found, setting first focusable tab to active`);\n const first = this.#tabindex.firstItem;\n this.#tabindex.updateActiveItem(first);\n index = this.#activeItemIndex;\n }\n this.#activeIndex = index;\n this.requestUpdate('activeIndex', oldIndex);\n\n this.#allPanels[this.#activeIndex].hidden = false;\n // close all tabs that are not the activeIndex\n this.#deactivateExcept(this.#activeIndex);\n }\n\n get #activeTab() {\n const [tab] = this.#_allTabs.filter(tab => tab.active);\n return tab;\n }\n\n get #allTabs() {\n return this.#_allTabs;\n }\n\n set #allTabs(tabs: BaseTab[]) {\n this.#_allTabs = tabs.filter(tab => (this.constructor as typeof BaseTabs).isTab(tab));\n }\n\n get #allPanels() {\n return this.#_allPanels;\n }\n\n set #allPanels(panels: BaseTabPanel[]) {\n this.#_allPanels = panels.filter(panel => (this.constructor as typeof BaseTabs).isPanel(panel));\n }\n\n override connectedCallback() {\n super.connectedCallback();\n this.id ||= getRandomId(this.localName);\n this.addEventListener('expand', this.#onTabExpand);\n BaseTabs.#instances.add(this);\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n BaseTabs.#instances.delete(this);\n }\n\n override willUpdate(): void {\n const { activeItem } = this.#tabindex;\n // If RTI has an activeItem, update the roving tabindex controller\n if (!this.manual &&\n activeItem &&\n activeItem !== this.#activeTab &&\n activeItem.ariaDisabled !== 'true') {\n activeItem.active = true;\n }\n }\n\n async firstUpdated() {\n this.tabList.addEventListener('scroll', this.#overflow.onScroll.bind(this));\n }\n\n override render() {\n const { scrollIconSet, scrollIconLeft, scrollIconRight } = this.constructor as typeof BaseTabs;\n return html`\n <div part=\"container\" class=\"${classMap({ overflow: this.#overflow.showScrollButtons })}\">\n <div part=\"tabs-container\">${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"previousTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-left') ?? 'Scroll left'}\"\n ?disabled=\"${!this.#overflow.overflowLeft}\"\n @click=\"${this.#scrollLeft}\">\n <pf-icon icon=\"${scrollIconLeft}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n <slot name=\"tab\"\n part=\"tabs\"\n role=\"tablist\"\n @slotchange=\"${this.#onSlotchange}\"></slot> ${!this.#overflow.showScrollButtons ? '' : html`\n <button id=\"nextTab\" tabindex=\"-1\"\n aria-label=\"${this.getAttribute('label-scroll-right') ?? 'Scroll right'}\"\n ?disabled=\"${!this.#overflow.overflowRight}\"\n @click=\"${this.#scrollRight}\">\n <pf-icon icon=\"${scrollIconRight}\" set=\"${scrollIconSet}\" loading=\"eager\"></pf-icon>\n </button>`}\n </div>\n <slot part=\"panels\" @slotchange=\"${this.#onSlotchange}\"></slot>\n </div>\n `;\n }\n\n #onSlotchange(event: { target: { name: string } }) {\n if (event.target.name === 'tab') {\n this.#allTabs = this.tabs;\n } else {\n this.#allPanels = this.panels;\n }\n\n if ((this.#allTabs.length === this.#allPanels.length) &&\n (this.#allTabs.length !== 0 || this.#allPanels.length !== 0)) {\n this.#updateAccessibility();\n this.#firstLastClasses();\n this.#tabindex.initItems(this.#allTabs);\n this.activeIndex = this.#allTabs.findIndex(tab => tab.active);\n this.#tabindex.updateActiveItem(this.#activeTab);\n this.#overflow.init(this.tabList, this.#allTabs);\n }\n }\n\n #updateAccessibility(): void {\n this.#allTabs.forEach((tab, index) => {\n const panel = this.#allPanels[index];\n if (!panel.hasAttribute('aria-labelledby')) {\n panel.setAttribute('aria-labelledby', tab.id);\n }\n tab.setAttribute('aria-controls', panel.id);\n });\n }\n\n #onTabExpand = (event: Event): void => {\n if (!(event instanceof TabExpandEvent) ||\n !this.#allTabs.length ||\n !this.#allPanels.length) {\n return;\n }\n\n if (event.active) {\n if (event.tab !== this.#tabindex.activeItem) {\n this.#tabindex.updateActiveItem(event.tab);\n }\n this.activeIndex = this.#allTabs.findIndex(tab => tab === event.tab);\n }\n };\n\n #deactivateExcept(index: number) {\n this.#allTabs.forEach((tab, i) => tab.active = i === index);\n this.#allPanels.forEach((panel, i) => panel.hidden = i !== index);\n }\n\n get #firstFocusable(): BaseTab | undefined {\n return this.#tabindex.firstItem;\n }\n\n get #firstTab(): BaseTab | undefined {\n const [tab] = this.#allTabs;\n return tab;\n }\n\n get #lastTab(): BaseTab | undefined {\n return this.#allTabs.at(-1);\n }\n\n get #activeItemIndex() {\n const { activeItem } = this.#tabindex;\n return this.#allTabs.findIndex(t => t === activeItem);\n }\n\n #firstLastClasses() {\n this.#firstTab?.classList.add('first');\n this.#lastTab?.classList.add('last');\n }\n\n #scrollLeft() {\n this.#overflow.scrollLeft();\n }\n\n #scrollRight() {\n this.#overflow.scrollRight();\n }\n}\n"]}
@@ -11,8 +11,8 @@ import { BaseTabPanel } from './BaseTabPanel.js';
11
11
  * @csspart container - container for the panel content
12
12
  */
13
13
  let PfTabPanel = class PfTabPanel extends BaseTabPanel {
14
- static { this.styles = [...BaseTabPanel.styles, styles]; }
15
14
  };
15
+ PfTabPanel.styles = [...BaseTabPanel.styles, styles];
16
16
  PfTabPanel = __decorate([
17
17
  customElement('pf-tab-panel')
18
18
  ], PfTabPanel);
@@ -1 +1 @@
1
- {"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,YAAY;aAC1B,WAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\n/**\n * @slot - Tab panel content\n *\n * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}\n *\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends BaseTabPanel {\n static readonly styles = [...BaseTabPanel.styles, styles];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tab-panel': PfTabPanel;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-tab-panel.js","sourceRoot":"","sources":["pf-tab-panel.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;;;AAIjE,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;GAMG;AAEH,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,YAAY;;AAC1B,iBAAM,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,AAAnC,CAAoC;AAD/C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAEtB;SAFY,UAAU","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\n\nimport styles from './pf-tab-panel.css';\n\nimport { BaseTabPanel } from './BaseTabPanel.js';\n\n/**\n * @slot - Tab panel content\n *\n * @cssprop {<color>} --pf-c-tab-content--m-light-300 {@default `#f0f0f0`}\n *\n * @csspart container - container for the panel content\n */\n@customElement('pf-tab-panel')\nexport class PfTabPanel extends BaseTabPanel {\n static readonly styles = [...BaseTabPanel.styles, styles];\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tab-panel': PfTabPanel;\n }\n}\n"]}
@@ -57,7 +57,7 @@ import { BaseTab } from './BaseTab.js';
57
57
  *
58
58
  * @cssprop {<length>} --pf-c-tabs__link--child--MarginRight {@default `1rem`}
59
59
  *
60
- * @fires { TabExpandEvent } tab-expand - when a tab expands
60
+ * @fires { TabExpandEvent } expand - when a tab expands
61
61
  */
62
62
  export declare class PfTab extends BaseTab {
63
63
  static readonly styles: import("lit").CSSResult[];
package/pf-tabs/pf-tab.js CHANGED
@@ -63,7 +63,7 @@ const styles = css `:host{scroll-snap-align:var(--pf-c-tabs__item--ScrollSnapAli
63
63
  *
64
64
  * @cssprop {<length>} --pf-c-tabs__link--child--MarginRight {@default `1rem`}
65
65
  *
66
- * @fires { TabExpandEvent } tab-expand - when a tab expands
66
+ * @fires { TabExpandEvent } expand - when a tab expands
67
67
  */
68
68
  let PfTab = class PfTab extends BaseTab {
69
69
  constructor() {
@@ -71,8 +71,8 @@ let PfTab = class PfTab extends BaseTab {
71
71
  this.active = false;
72
72
  this.disabled = false;
73
73
  }
74
- static { this.styles = [...BaseTab.styles, styles]; }
75
74
  };
75
+ PfTab.styles = [...BaseTab.styles, styles];
76
76
  __decorate([
77
77
  observed,
78
78
  property({ reflect: true, type: Boolean })
@@ -1 +1 @@
1
- {"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,OAAO;IAAlC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAC/D,CAAC;aAPiB,WAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;;AAGT;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAPlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAQjB;SARY,KAAK","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTab } from './BaseTab.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n * Can contain an `<svg>` or `<pf-icon>`\n * @slot\n * Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth {@default `1px`}\n *\n * @cssprop {<color>} --pf-c-tabs__link--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-tabs__link--disabled--BackgroundColor {@default `#d2d2d2`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderTopWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderLeftWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderRightWidth {@default `1px`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth {@default `1px`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--after--Top {@default `auto`}\n * @cssprop {<length>} --pf-c-tabs__link--after--Right {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--before--Left {@default `0`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth {@default `1px`}\n *\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderTopColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderRightColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderLeftColor {@default `#d2d2d2`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--FontSize {@default `1rem`}\n * @cssprop {<color>} --pf-c-tabs__link--Color {@default `#6a6e73`}\n * @cssprop {<length>} --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop {<color>} --pf-c-tabs__link--after--BorderColor {@default `#b8bbbe`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderTopWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderBottomWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderLeftWidth {@default `0`}\n *\n * @cssprop {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--child--MarginRight {@default `1rem`}\n *\n * @fires { TabExpandEvent } tab-expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends BaseTab {\n static readonly styles = [...BaseTab.styles, styles];\n\n @observed\n @property({ reflect: true, type: Boolean }) active = false;\n\n @observed\n @property({ reflect: true, type: Boolean }) disabled = false;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tab': PfTab;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-tab.js","sourceRoot":"","sources":["pf-tab.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;;;AAIvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AAEH,IAAa,KAAK,GAAlB,MAAa,KAAM,SAAQ,OAAO;IAAlC;;QAI8C,WAAM,GAAG,KAAK,CAAC;QAGf,aAAQ,GAAG,KAAK,CAAC;IAC/D,CAAC;;AAPiB,YAAM,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,AAA9B,CAA+B;AAGT;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qCAAgB;AAGf;IAD3C,QAAQ;IACR,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAAkB;AAPlD,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAQjB;SARY,KAAK","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { observed } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTab } from './BaseTab.js';\n\nimport styles from './pf-tab.css';\n\n/**\n * Tab\n *\n * @slot icon\n * Can contain an `<svg>` or `<pf-icon>`\n * @slot\n * Tab title text\n *\n * @csspart button - button element\n * @csspart icon - span container for the icon\n * @csspart text - span container for the title text\n *\n * @cssprop {<length>} --pf-c-tabs--m-box__item--m-current--first-child__link--before--BorderLeftWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs--m-box__item--m-current--last-child__link--before--BorderRightWidth {@default `1px`}\n *\n * @cssprop {<color>} --pf-c-tabs__link--BackgroundColor {@default `#f0f0f0`}\n * @cssprop {<color>} --pf-c-tabs__link--disabled--BackgroundColor {@default `#d2d2d2`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderTopWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderLeftWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--before--BorderRightWidth {@default `1px`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--disabled--before--BorderRightWidth {@default `1px`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--after--Top {@default `auto`}\n * @cssprop {<length>} --pf-c-tabs__link--after--Right {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--Bottom {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--before--Left {@default `0`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--PaddingTop {@default `1rem`}\n * @cssprop {<length>} --pf-c-tabs__link--PaddingBottom {@default `1rem`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--disabled--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__link--disabled--before--BorderLeftWidth {@default `1px`}\n *\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderTopColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderRightColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderBottomColor {@default `#d2d2d2`}\n * @cssprop {<color>} --pf-c-tabs__link--before--BorderLeftColor {@default `#d2d2d2`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--FontSize {@default `1rem`}\n * @cssprop {<color>} --pf-c-tabs__link--Color {@default `#6a6e73`}\n * @cssprop {<length>} --pf-c-tabs__link--OutlineOffset {@default `-0.375rem`}\n *\n * @cssprop {<color>} --pf-c-tabs__link--after--BorderColor {@default `#b8bbbe`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderTopWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderBottomWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__link--after--BorderLeftWidth {@default `0`}\n *\n * @cssprop {<color>} --pf-c-tabs__item--m-current__link--Color {@default `#151515`}\n *\n * @cssprop {<color>} --pf-c-tabs__item--m-current__link--after--BorderColor {@default `#06c`}\n * @cssprop {<length>} --pf-c-tabs__item--m-current__link--after--BorderWidth {@default `3px`}\n *\n * @cssprop {<length>} --pf-c-tabs__link--child--MarginRight {@default `1rem`}\n *\n * @fires { TabExpandEvent } expand - when a tab expands\n */\n@customElement('pf-tab')\nexport class PfTab extends BaseTab {\n static readonly styles = [...BaseTab.styles, styles];\n\n @observed\n @property({ reflect: true, type: Boolean }) active = false;\n\n @observed\n @property({ reflect: true, type: Boolean }) disabled = false;\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tab': PfTab;\n }\n}\n"]}
@@ -1,4 +1,5 @@
1
1
  import { BaseTabs } from './BaseTabs.js';
2
+ import { TabExpandEvent } from './BaseTab.js';
2
3
  import { PfTab } from './pf-tab.js';
3
4
  import { PfTabPanel } from './pf-tab-panel.js';
4
5
  /**
@@ -56,6 +57,7 @@ export declare class PfTabs extends BaseTabs {
56
57
  protected static readonly scrollTimeoutDelay = 150;
57
58
  static isTab(element: HTMLElement): element is PfTab;
58
59
  static isPanel(element: HTMLElement): element is PfTabPanel;
60
+ static isExpandEvent(event: Event): event is TabExpandEvent;
59
61
  box: 'light' | 'dark' | null;
60
62
  vertical: boolean;
61
63
  fill: boolean;
@@ -3,6 +3,7 @@ import { customElement } from 'lit/decorators/custom-element.js';
3
3
  import { property } from 'lit/decorators/property.js';
4
4
  import { cascades } from '@patternfly/pfe-core/decorators.js';
5
5
  import { BaseTabs } from './BaseTabs.js';
6
+ import { TabExpandEvent } from './BaseTab.js';
6
7
  import { PfTab } from './pf-tab.js';
7
8
  import { PfTabPanel } from './pf-tab-panel.js';
8
9
  import { css } from "lit";
@@ -65,18 +66,21 @@ let PfTabs = class PfTabs extends BaseTabs {
65
66
  this.fill = false;
66
67
  this.borderBottom = 'true';
67
68
  }
68
- static { this.styles = [...BaseTabs.styles, styles]; }
69
- static { this.scrollTimeoutDelay = 150; }
70
69
  static isTab(element) {
71
70
  return element instanceof PfTab;
72
71
  }
73
72
  static isPanel(element) {
74
73
  return element instanceof PfTabPanel;
75
74
  }
75
+ static isExpandEvent(event) {
76
+ return event instanceof TabExpandEvent;
77
+ }
76
78
  get canShowScrollButtons() {
77
79
  return !this.vertical;
78
80
  }
79
81
  };
82
+ PfTabs.styles = [...BaseTabs.styles, styles];
83
+ PfTabs.scrollTimeoutDelay = 150;
80
84
  __decorate([
81
85
  cascades('pf-tab', 'pf-tab-panel'),
82
86
  property({ reflect: true })
@@ -1 +1 @@
1
- {"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAc+B,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;aA3BiB,WAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;aAE5B,uBAAkB,GAAG,GAAG,AAAN,CAAO;IAEnD,MAAM,CAAC,KAAK,CAAC,OAAoB;QAC/B,OAAO,OAAO,YAAY,KAAK,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB;QACjC,OAAO,OAAO,YAAY,UAAU,CAAC;IACvC,CAAC;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AAb4B;IAD5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAqC;AAGrB;IAD3C,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAGjB;IAD3C,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAc;AAGf;IADzC,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4CAAyC;AAvBvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CA4BlB;SA5BY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.js';\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop {<color>} --pf-c-tabs--before--BorderColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-tabs--before--BorderTopWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--before--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs--before---BorderLeftWidth {@default `0`}\n *\n * @cssprop {<length>} --pf-c-tabs--m-vertical--MaxWidth {@default `15.625rem`}\n *\n * @cssprop {<color>} --pf-c-tabs--m-vertical__list--before--BorderColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderTopWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderLeftWidth {@default `1px`}\n *\n * @cssprop {<length>} --pf-c-tabs--m-vertical--m-box--inset {@default `2rem`}\n *\n * @cssprop {<display>} --pf-c-tabs__list--Display {@default `flex`}\n *\n * @cssprop {<length>} --pf-c-tabs__scroll-button--Width {@default `3rem`}\n * @cssprop {<color>} --pf-c-tabs__scroll-button--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-tabs__scroll-button--BackgroundColor {@default `#ffffff`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--OutlineOffset {@default `-0.25rem`}\n * @cssprop {<time>} --pf-c-tabs__scroll-button--TransitionDuration--margin {@default `.125s`}\n * @cssprop {<time>} --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop {<color>} --pf-c-tabs__scroll-button--hover--Color {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-tabs__scroll-button--before--BorderColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--BorderLeftWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--border-width--base {@default `1px`}\n *\n * @cssprop {<color>} --pf-c-tabs__scroll-button--disabled--Color {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends BaseTabs {\n static readonly styles = [...BaseTabs.styles, styles];\n\n protected static readonly scrollTimeoutDelay = 150;\n\n static isTab(element: HTMLElement): element is PfTab {\n return element instanceof PfTab;\n }\n\n static isPanel(element: HTMLElement): element is PfTabPanel {\n return element instanceof PfTabPanel;\n }\n\n @cascades('pf-tab', 'pf-tab-panel')\n @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n @cascades('pf-tab', 'pf-tab-panel')\n @property({ reflect: true, type: Boolean }) vertical = false;\n\n @cascades('pf-tab')\n @property({ reflect: true, type: Boolean }) fill = false;\n\n @cascades('pf-tab')\n @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n protected get canShowScrollButtons(): boolean {\n return !this.vertical;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tabs': PfTabs;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-tabs.js","sourceRoot":"","sources":["pf-tabs.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;;;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AAEH,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,QAAQ;IAApC;;QAkB+B,QAAG,GAA4B,IAAI,CAAC;QAGrB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,KAAK,CAAC;QAGf,iBAAY,GAAqB,MAAM,CAAC;IAKpF,CAAC;IA3BC,MAAM,CAAC,KAAK,CAAC,OAAoB;QAC/B,OAAO,OAAO,YAAY,KAAK,CAAC;IAClC,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB;QACjC,OAAO,OAAO,YAAY,UAAU,CAAC;IACvC,CAAC;IAED,MAAM,CAAC,aAAa,CAAC,KAAY;QAC/B,OAAO,KAAK,YAAY,cAAc,CAAC;IACzC,CAAC;IAcD,IAAc,oBAAoB;QAChC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;IACxB,CAAC;;AA9Be,aAAM,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;AAE5B,yBAAkB,GAAG,GAAG,AAAN,CAAO;AAetB;IAD5B,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mCAAqC;AAGrB;IAD3C,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAGjB;IAD3C,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;oCAAc;AAGf;IADzC,QAAQ,CAAC,QAAQ,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;4CAAyC;AA3BvE,MAAM;IADlB,aAAa,CAAC,SAAS,CAAC;GACZ,MAAM,CAgClB;SAhCY,MAAM","sourcesContent":["import { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\n\nimport { cascades } from '@patternfly/pfe-core/decorators.js';\n\nimport { BaseTabs } from './BaseTabs.js';\nimport { TabExpandEvent } from './BaseTab.js';\nimport { PfTab } from './pf-tab.js';\nimport { PfTabPanel } from './pf-tab-panel.js';\n\nimport styles from './pf-tabs.css';\n\n/**\n * **Tabs** allow users to navigate between views within the same page or context.\n *\n * @attr {number} active-key - DOM Property: `activeKey` {@default `0`}\n *\n * @csspart container - outer container\n * @csspart tabs-container - tabs container\n * @csspart tabs - tablist\n * @csspart panels - panels\n *\n * @slot tab - Must contain one or more `<pf-tab>`\n * @slot - Must contain one or more `<pf-panel>`\n *\n * @cssprop {<length>} --pf-c-tabs--Width {@default `auto`}\n * @cssprop {<length>} --pf-c-tabs--inset {@default `0`}\n *\n * @cssprop {<color>} --pf-c-tabs--before--BorderColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-tabs--before--BorderTopWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--before--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs--before---BorderLeftWidth {@default `0`}\n *\n * @cssprop {<length>} --pf-c-tabs--m-vertical--MaxWidth {@default `15.625rem`}\n *\n * @cssprop {<color>} --pf-c-tabs--m-vertical__list--before--BorderColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderTopWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderBottomWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs--m-vertical__list--before--BorderLeftWidth {@default `1px`}\n *\n * @cssprop {<length>} --pf-c-tabs--m-vertical--m-box--inset {@default `2rem`}\n *\n * @cssprop {<display>} --pf-c-tabs__list--Display {@default `flex`}\n *\n * @cssprop {<length>} --pf-c-tabs__scroll-button--Width {@default `3rem`}\n * @cssprop {<color>} --pf-c-tabs__scroll-button--Color {@default `#151515`}\n * @cssprop {<color>} --pf-c-tabs__scroll-button--BackgroundColor {@default `#ffffff`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--OutlineOffset {@default `-0.25rem`}\n * @cssprop {<time>} --pf-c-tabs__scroll-button--TransitionDuration--margin {@default `.125s`}\n * @cssprop {<time>} --pf-c-tabs__scroll-button--TransitionDuration--transform {@default `.125s`}\n * @cssprop {<color>} --pf-c-tabs__scroll-button--hover--Color {@default `#06c`}\n *\n * @cssprop {<color>} --pf-c-tabs__scroll-button--before--BorderColor {@default `#d2d2d2`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--BorderRightWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--BorderBottomWidth {@default `1px`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--BorderLeftWidth {@default `0`}\n * @cssprop {<length>} --pf-c-tabs__scroll-button--before--border-width--base {@default `1px`}\n *\n * @cssprop {<color>} --pf-c-tabs__scroll-button--disabled--Color {@default `#d2d2d2`}\n */\n@customElement('pf-tabs')\nexport class PfTabs extends BaseTabs {\n static readonly styles = [...BaseTabs.styles, styles];\n\n protected static readonly scrollTimeoutDelay = 150;\n\n static isTab(element: HTMLElement): element is PfTab {\n return element instanceof PfTab;\n }\n\n static isPanel(element: HTMLElement): element is PfTabPanel {\n return element instanceof PfTabPanel;\n }\n\n static isExpandEvent(event: Event): event is TabExpandEvent {\n return event instanceof TabExpandEvent;\n }\n\n @cascades('pf-tab', 'pf-tab-panel')\n @property({ reflect: true }) box: 'light' | 'dark' | null = null;\n\n @cascades('pf-tab', 'pf-tab-panel')\n @property({ reflect: true, type: Boolean }) vertical = false;\n\n @cascades('pf-tab')\n @property({ reflect: true, type: Boolean }) fill = false;\n\n @cascades('pf-tab')\n @property({ attribute: 'border-bottom' }) borderBottom: 'true' | 'false' = 'true';\n\n protected get canShowScrollButtons(): boolean {\n return !this.vertical;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-tabs': PfTabs;\n }\n}\n"]}
@@ -0,0 +1,9 @@
1
+ # Text Input
2
+ A **text input** is used to gather free-form text from a user.
3
+
4
+ ```html
5
+ <label>
6
+ Text Input
7
+ <pf-text-input></pf-text-input>
8
+ </label>
9
+ ```