@carbon/ibmdotcom-utilities 2.10.0-nightly.9590185907.0 → 2.10.0-nightly.9638092184.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 (3) hide show
  1. package/es/utilities/StickyHeader/StickyHeader.js +111 -9
  2. package/lib/utilities/StickyHeader/StickyHeader.js +111 -9
  3. package/package.json +2 -2
package/es/utilities/StickyHeader/StickyHeader.js CHANGED
@@ -16,6 +16,8 @@ import root from 'window-or-global';
16
16
  import settings from '../settings/settings.js';
17
17
  var prefix = settings.prefix,
18
18
  c4dPrefix = settings.stablePrefix;
19
+ var ddsPrefix = 'dds';
20
+ var bxPrefix = 'bx';
19
21
  var gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
20
22
  var StickyHeader = /*#__PURE__*/function () {
21
23
  function StickyHeader() {
@@ -74,12 +76,116 @@ var StickyHeader = /*#__PURE__*/function () {
74
76
  value: function _validateComponent(component, expected) {
75
77
  var received = component.tagName.toLowerCase();
76
78
  if (received !== expected) {
77
- throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
79
+ // TODO: don't check for v1/v2 compatibility after v1 EOL.
80
+ if (received.split('-').splice(1).join('-') !== expected.split('-').splice(1).join('-')) {
81
+ throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
82
+ } else {
83
+ var message = ["Mixed prefixes detected.\n", "expected ".concat(expected, ", found ").concat(received, ".")];
84
+ console.warn(message.join(''));
85
+ return true;
86
+ }
78
87
  } else {
79
88
  return true;
80
89
  }
81
90
  }
82
91
 
92
+ /**
93
+ * Helper method to query for either C4IBM v1.x or v2.x sub-elements;
94
+ *
95
+ * @param {*} element The C4IBM element.
96
+ * @param {*} v1Func The querying function to run if using a C4IBM v1.x element.
97
+ * @param {*} v2Func The querying function to run if using a C4IBM v2.x element.
98
+ */
99
+ }, {
100
+ key: "_updateRefsV1orV2",
101
+ value: function _updateRefsV1orV2(element, v1Func, v2Func) {
102
+ var elementPrefix = element.tagName.toLowerCase().split('-')[0];
103
+ if (elementPrefix === ddsPrefix) {
104
+ v1Func.bind(this)();
105
+ } else if (elementPrefix === c4dPrefix) {
106
+ v2Func.bind(this)();
107
+ } else {
108
+ throw new Error("\n Could not find sub-elements for ".concat(element.tagName.toLowerCase(), ".\n "));
109
+ }
110
+ }
111
+
112
+ /**
113
+ * Temporary method to find v1 leadspace sub-elements.
114
+ */
115
+ }, {
116
+ key: "_updateLeadspaceRefsV1",
117
+ value: function _updateLeadspaceRefsV1() {
118
+ var leadspaceSearch = this._elements.leadspaceSearch;
119
+ this._elements.leadspaceSearchBar = leadspaceSearch.shadowRoot.querySelector(".".concat(bxPrefix, "--search-container"));
120
+ this._elements.leadspaceSearchInput = leadspaceSearch.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
121
+ }
122
+
123
+ /**
124
+ * Temporary method to find v2 leadspace sub-elements.
125
+ */
126
+ }, {
127
+ key: "_updateLeadspaceRefsV2",
128
+ value: function _updateLeadspaceRefsV2() {
129
+ var leadspaceSearch = this._elements.leadspaceSearch;
130
+ this._elements.leadspaceSearchBar = leadspaceSearch.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
131
+ this._elements.leadspaceSearchInput = leadspaceSearch.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
132
+ }
133
+
134
+ /**
135
+ * Temporary method to find v1 masthead sub-elements.
136
+ */
137
+ }, {
138
+ key: "_updateMastheadRefsV1",
139
+ value: function _updateMastheadRefsV1() {
140
+ var masthead = this._elements.masthead;
141
+ this._elements.mastheadL0 = masthead.shadowRoot.querySelector(".".concat(bxPrefix, "--masthead__l0"));
142
+ this._elements.mastheadL1 = masthead.querySelector("".concat(ddsPrefix, "-masthead-l1"));
143
+ }
144
+
145
+ /**
146
+ * Temporary method to find v2 masthead sub-elements.
147
+ */
148
+ }, {
149
+ key: "_updateMastheadRefsV2",
150
+ value: function _updateMastheadRefsV2() {
151
+ var masthead = this._elements.masthead;
152
+ this._elements.mastheadL0 = masthead.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
153
+ this._elements.mastheadL1 = masthead.querySelector("".concat(c4dPrefix, "-masthead-l1"));
154
+ }
155
+
156
+ /**
157
+ * Temporary method to find v1 table of contents sub-elements.
158
+ */
159
+ }, {
160
+ key: "_updateTableOfContentsRefsV1",
161
+ value: function _updateTableOfContentsRefsV1() {
162
+ var toc = this._elements.tableOfContents;
163
+ var tocRoot = toc.shadowRoot;
164
+ var selectors = {
165
+ desktop: {
166
+ vertical: ".".concat(ddsPrefix, "-ce--table-of-contents__items-container"),
167
+ horizontal: ".".concat(bxPrefix, "--tableofcontents__navbar")
168
+ },
169
+ mobile: {
170
+ vertical: ".".concat(bxPrefix, "--tableofcontents__sidebar"),
171
+ horizontal: ".".concat(bxPrefix, "--tableofcontents__navbar")
172
+ }
173
+ };
174
+ var viewportDimension = window.innerWidth >= gridBreakpoint ? 'desktop' : 'mobile';
175
+ this._elements.tableOfContentsInnerBar = tocRoot.querySelector(selectors[viewportDimension][toc.layout || 'vertical']);
176
+ }
177
+
178
+ /**
179
+ * Temporary method to find v2 table of contents sub-elements.
180
+ */
181
+ }, {
182
+ key: "_updateTableOfContentsRefsV2",
183
+ value: function _updateTableOfContentsRefsV2() {
184
+ var toc = this._elements.tableOfContents;
185
+ var tocRoot = toc.shadowRoot;
186
+ this._elements.tableOfContentsInnerBar = tocRoot.querySelector(window.innerWidth >= gridBreakpoint && (toc === null || toc === void 0 ? void 0 : toc.layout) !== 'horizontal' ? ".".concat(c4dPrefix, "-ce--table-of-contents__items-container") : ".".concat(prefix, "--tableofcontents__navbar"));
187
+ }
188
+
83
189
  /**
84
190
  * Stores references to TOC sub-elements that are relevant to current viewport
85
191
  * dimensions.
@@ -88,8 +194,7 @@ var StickyHeader = /*#__PURE__*/function () {
88
194
  key: "_updateTableOfContentsRefs",
89
195
  value: function _updateTableOfContentsRefs() {
90
196
  var toc = this._elements.tableOfContents;
91
- var tocRoot = toc.shadowRoot;
92
- this._elements.tableOfContentsInnerBar = tocRoot.querySelector(window.innerWidth >= gridBreakpoint && (toc === null || toc === void 0 ? void 0 : toc.layout) !== 'horizontal' ? ".".concat(c4dPrefix, "-ce--table-of-contents__items-container") : ".".concat(prefix, "--tableofcontents__navbar"));
197
+ this._updateRefsV1orV2(toc, this._updateTableOfContentsRefsV1, this._updateTableOfContentsRefsV2);
93
198
  }
94
199
  }, {
95
200
  key: "banner",
@@ -108,10 +213,8 @@ var StickyHeader = /*#__PURE__*/function () {
108
213
  set: function set(component) {
109
214
  if (this._validateComponent(component, "".concat(c4dPrefix, "-leadspace-with-search"))) {
110
215
  this._elements.leadspaceSearch = component;
111
- var leadspaceSearchBar = component.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
112
- this._elements.leadspaceSearchBar = leadspaceSearchBar;
113
- this._elements.leadspaceSearchInput = component.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
114
- this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
216
+ this._updateRefsV1orV2(component, this._updateLeadspaceRefsV1, this._updateLeadspaceRefsV2);
217
+ this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(this._elements.leadspaceSearchBar).paddingBottom) - 16;
115
218
  this._manageStickyElements();
116
219
  }
117
220
  }
@@ -131,8 +234,7 @@ var StickyHeader = /*#__PURE__*/function () {
131
234
  if (this._elements.banner) {
132
235
  this._elements.masthead.setAttribute('with-banner', '');
133
236
  }
134
- this._elements.mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
135
- this._elements.mastheadL1 = component.querySelector("".concat(c4dPrefix, "-masthead-l1"));
237
+ this._updateRefsV1orV2(component, this._updateMastheadRefsV1, this._updateMastheadRefsV2);
136
238
  this._manageStickyElements();
137
239
  }
138
240
  }
package/lib/utilities/StickyHeader/StickyHeader.js CHANGED
@@ -21,6 +21,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
21
21
  */
22
22
  var prefix = _settings.default.prefix,
23
23
  c4dPrefix = _settings.default.stablePrefix;
24
+ var ddsPrefix = 'dds';
25
+ var bxPrefix = 'bx';
24
26
  var gridBreakpoint = parseFloat(_layout.breakpoints.lg.width) * _layout.baseFontSize;
25
27
  var StickyHeader = /*#__PURE__*/function () {
26
28
  function StickyHeader() {
@@ -79,12 +81,116 @@ var StickyHeader = /*#__PURE__*/function () {
79
81
  value: function _validateComponent(component, expected) {
80
82
  var received = component.tagName.toLowerCase();
81
83
  if (received !== expected) {
82
- throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
84
+ // TODO: don't check for v1/v2 compatibility after v1 EOL.
85
+ if (received.split('-').splice(1).join('-') !== expected.split('-').splice(1).join('-')) {
86
+ throw new TypeError("".concat(expected, " expected, ").concat(received, " provided"));
87
+ } else {
88
+ var message = ["Mixed prefixes detected.\n", "expected ".concat(expected, ", found ").concat(received, ".")];
89
+ console.warn(message.join(''));
90
+ return true;
91
+ }
83
92
  } else {
84
93
  return true;
85
94
  }
86
95
  }
87
96
 
97
+ /**
98
+ * Helper method to query for either C4IBM v1.x or v2.x sub-elements;
99
+ *
100
+ * @param {*} element The C4IBM element.
101
+ * @param {*} v1Func The querying function to run if using a C4IBM v1.x element.
102
+ * @param {*} v2Func The querying function to run if using a C4IBM v2.x element.
103
+ */
104
+ }, {
105
+ key: "_updateRefsV1orV2",
106
+ value: function _updateRefsV1orV2(element, v1Func, v2Func) {
107
+ var elementPrefix = element.tagName.toLowerCase().split('-')[0];
108
+ if (elementPrefix === ddsPrefix) {
109
+ v1Func.bind(this)();
110
+ } else if (elementPrefix === c4dPrefix) {
111
+ v2Func.bind(this)();
112
+ } else {
113
+ throw new Error("\n Could not find sub-elements for ".concat(element.tagName.toLowerCase(), ".\n "));
114
+ }
115
+ }
116
+
117
+ /**
118
+ * Temporary method to find v1 leadspace sub-elements.
119
+ */
120
+ }, {
121
+ key: "_updateLeadspaceRefsV1",
122
+ value: function _updateLeadspaceRefsV1() {
123
+ var leadspaceSearch = this._elements.leadspaceSearch;
124
+ this._elements.leadspaceSearchBar = leadspaceSearch.shadowRoot.querySelector(".".concat(bxPrefix, "--search-container"));
125
+ this._elements.leadspaceSearchInput = leadspaceSearch.querySelector("".concat(ddsPrefix, "-search-with-typeahead"));
126
+ }
127
+
128
+ /**
129
+ * Temporary method to find v2 leadspace sub-elements.
130
+ */
131
+ }, {
132
+ key: "_updateLeadspaceRefsV2",
133
+ value: function _updateLeadspaceRefsV2() {
134
+ var leadspaceSearch = this._elements.leadspaceSearch;
135
+ this._elements.leadspaceSearchBar = leadspaceSearch.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
136
+ this._elements.leadspaceSearchInput = leadspaceSearch.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
137
+ }
138
+
139
+ /**
140
+ * Temporary method to find v1 masthead sub-elements.
141
+ */
142
+ }, {
143
+ key: "_updateMastheadRefsV1",
144
+ value: function _updateMastheadRefsV1() {
145
+ var masthead = this._elements.masthead;
146
+ this._elements.mastheadL0 = masthead.shadowRoot.querySelector(".".concat(bxPrefix, "--masthead__l0"));
147
+ this._elements.mastheadL1 = masthead.querySelector("".concat(ddsPrefix, "-masthead-l1"));
148
+ }
149
+
150
+ /**
151
+ * Temporary method to find v2 masthead sub-elements.
152
+ */
153
+ }, {
154
+ key: "_updateMastheadRefsV2",
155
+ value: function _updateMastheadRefsV2() {
156
+ var masthead = this._elements.masthead;
157
+ this._elements.mastheadL0 = masthead.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
158
+ this._elements.mastheadL1 = masthead.querySelector("".concat(c4dPrefix, "-masthead-l1"));
159
+ }
160
+
161
+ /**
162
+ * Temporary method to find v1 table of contents sub-elements.
163
+ */
164
+ }, {
165
+ key: "_updateTableOfContentsRefsV1",
166
+ value: function _updateTableOfContentsRefsV1() {
167
+ var toc = this._elements.tableOfContents;
168
+ var tocRoot = toc.shadowRoot;
169
+ var selectors = {
170
+ desktop: {
171
+ vertical: ".".concat(ddsPrefix, "-ce--table-of-contents__items-container"),
172
+ horizontal: ".".concat(bxPrefix, "--tableofcontents__navbar")
173
+ },
174
+ mobile: {
175
+ vertical: ".".concat(bxPrefix, "--tableofcontents__sidebar"),
176
+ horizontal: ".".concat(bxPrefix, "--tableofcontents__navbar")
177
+ }
178
+ };
179
+ var viewportDimension = window.innerWidth >= gridBreakpoint ? 'desktop' : 'mobile';
180
+ this._elements.tableOfContentsInnerBar = tocRoot.querySelector(selectors[viewportDimension][toc.layout || 'vertical']);
181
+ }
182
+
183
+ /**
184
+ * Temporary method to find v2 table of contents sub-elements.
185
+ */
186
+ }, {
187
+ key: "_updateTableOfContentsRefsV2",
188
+ value: function _updateTableOfContentsRefsV2() {
189
+ var toc = this._elements.tableOfContents;
190
+ var tocRoot = toc.shadowRoot;
191
+ this._elements.tableOfContentsInnerBar = tocRoot.querySelector(window.innerWidth >= gridBreakpoint && (toc === null || toc === void 0 ? void 0 : toc.layout) !== 'horizontal' ? ".".concat(c4dPrefix, "-ce--table-of-contents__items-container") : ".".concat(prefix, "--tableofcontents__navbar"));
192
+ }
193
+
88
194
  /**
89
195
  * Stores references to TOC sub-elements that are relevant to current viewport
90
196
  * dimensions.
@@ -93,8 +199,7 @@ var StickyHeader = /*#__PURE__*/function () {
93
199
  key: "_updateTableOfContentsRefs",
94
200
  value: function _updateTableOfContentsRefs() {
95
201
  var toc = this._elements.tableOfContents;
96
- var tocRoot = toc.shadowRoot;
97
- this._elements.tableOfContentsInnerBar = tocRoot.querySelector(window.innerWidth >= gridBreakpoint && (toc === null || toc === void 0 ? void 0 : toc.layout) !== 'horizontal' ? ".".concat(c4dPrefix, "-ce--table-of-contents__items-container") : ".".concat(prefix, "--tableofcontents__navbar"));
202
+ this._updateRefsV1orV2(toc, this._updateTableOfContentsRefsV1, this._updateTableOfContentsRefsV2);
98
203
  }
99
204
  }, {
100
205
  key: "banner",
@@ -113,10 +218,8 @@ var StickyHeader = /*#__PURE__*/function () {
113
218
  set: function set(component) {
114
219
  if (this._validateComponent(component, "".concat(c4dPrefix, "-leadspace-with-search"))) {
115
220
  this._elements.leadspaceSearch = component;
116
- var leadspaceSearchBar = component.shadowRoot.querySelector(".".concat(prefix, "--search-container"));
117
- this._elements.leadspaceSearchBar = leadspaceSearchBar;
118
- this._elements.leadspaceSearchInput = component.querySelector("".concat(c4dPrefix, "-search-with-typeahead"));
119
- this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) - 16;
221
+ this._updateRefsV1orV2(component, this._updateLeadspaceRefsV1, this._updateLeadspaceRefsV2);
222
+ this._state.leadspaceSearchThreshold = parseInt(window.getComputedStyle(this._elements.leadspaceSearchBar).paddingBottom) - 16;
120
223
  this._manageStickyElements();
121
224
  }
122
225
  }
@@ -136,8 +239,7 @@ var StickyHeader = /*#__PURE__*/function () {
136
239
  if (this._elements.banner) {
137
240
  this._elements.masthead.setAttribute('with-banner', '');
138
241
  }
139
- this._elements.mastheadL0 = component.shadowRoot.querySelector(".".concat(prefix, "--masthead__l0"));
140
- this._elements.mastheadL1 = component.querySelector("".concat(c4dPrefix, "-masthead-l1"));
242
+ this._updateRefsV1orV2(component, this._updateMastheadRefsV1, this._updateMastheadRefsV2);
141
243
  this._manageStickyElements();
142
244
  }
143
245
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/ibmdotcom-utilities",
3
3
  "description": "Carbon for IBM.com Utilities",
4
- "version": "2.10.0-nightly.9590185907.0+029116d",
4
+ "version": "2.10.0-nightly.9638092184.0+1df637a",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -88,5 +88,5 @@
88
88
  "rollup-plugin-sizes": "^1.0.4",
89
89
  "whatwg-fetch": "^2.0.3"
90
90
  },
91
- "gitHead": "029116dbbce332698d3c0a40fb17b8d41ed84bd3"
91
+ "gitHead": "1df637a7be35d4e8de11899c0f0d7740550cf252"
92
92
  }