@watermarkinsights/ripple 3.0.1 → 3.0.2-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 (81) hide show
  1. package/dist/cjs/{global-ccb9500c.js → global-1e540de6.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
  4. package/dist/cjs/ripple.cjs.js +2 -2
  5. package/dist/cjs/wm-datepicker.cjs.entry.js +25 -30
  6. package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.css +9 -0
  7. package/dist/collection/components/wm-datepicker/wm-datepicker.js +26 -32
  8. package/dist/esm/{global-4f914bb2.js → global-d6b49e98.js} +1 -1
  9. package/dist/esm/loader.js +2 -2
  10. package/dist/esm/priv-datepicker.entry.js +1 -1
  11. package/dist/esm/ripple.js +2 -2
  12. package/dist/esm/wm-datepicker.entry.js +25 -30
  13. package/dist/ripple/p-129d94fa.entry.js +1 -0
  14. package/dist/ripple/{p-454ad552.entry.js → p-c0fe5201.entry.js} +1 -1
  15. package/dist/ripple/{p-69a73e86.js → p-e3843249.js} +1 -1
  16. package/dist/ripple/ripple.esm.js +1 -1
  17. package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +3 -3
  18. package/package.json +1 -1
  19. package/dist/cjs/app-globals-a07327ae.js +0 -47
  20. package/dist/cjs/css-shim-a7379e2b.js +0 -6
  21. package/dist/cjs/dom-3e7d9c3b.js +0 -75
  22. package/dist/cjs/functions-65513c61.js +0 -8360
  23. package/dist/cjs/global-06317e3f.js +0 -36
  24. package/dist/cjs/global-f6930bb0.js +0 -38
  25. package/dist/cjs/index-8dea8c13.js +0 -2976
  26. package/dist/cjs/shadow-css-09555044.js +0 -391
  27. package/dist/esm/app-globals-f62991a4.js +0 -45
  28. package/dist/esm/css-shim-bbdf0cc6.js +0 -4
  29. package/dist/esm/dom-1f98a75f.js +0 -73
  30. package/dist/esm/functions-316c1b23.js +0 -8340
  31. package/dist/esm/global-03372f70.js +0 -34
  32. package/dist/esm/global-fedbc323.js +0 -36
  33. package/dist/esm/index-e34aa595.js +0 -2938
  34. package/dist/esm/shadow-css-67b66845.js +0 -389
  35. package/dist/ripple/app-globals-b5693c90.js +0 -45
  36. package/dist/ripple/app-globals-d72c2d3c.js +0 -45
  37. package/dist/ripple/app-globals-f62991a4.js +0 -45
  38. package/dist/ripple/css-shim-bbdf0cc6.js +0 -4
  39. package/dist/ripple/dom-1f98a75f.js +0 -73
  40. package/dist/ripple/functions-316c1b23.js +0 -8340
  41. package/dist/ripple/http-service-5d037e16.js +0 -52
  42. package/dist/ripple/index-20b65f86.js +0 -2938
  43. package/dist/ripple/index-e34aa595.js +0 -2938
  44. package/dist/ripple/interfaces-50753346.js +0 -51
  45. package/dist/ripple/p-0c2498f4.js +0 -1
  46. package/dist/ripple/p-42ca2e15.entry.js +0 -1
  47. package/dist/ripple/p-e91befe3.js +0 -1
  48. package/dist/ripple/priv-chart-popover.entry.js +0 -85
  49. package/dist/ripple/priv-datepicker.entry.js +0 -668
  50. package/dist/ripple/priv-navigator-button.entry.js +0 -25
  51. package/dist/ripple/priv-navigator-item.entry.js +0 -30
  52. package/dist/ripple/ripple.css +0 -84
  53. package/dist/ripple/shadow-css-67b66845.js +0 -389
  54. package/dist/ripple/wm-action-menu.entry.js +0 -202
  55. package/dist/ripple/wm-button.entry.js +0 -148
  56. package/dist/ripple/wm-chart-slice.entry.js +0 -18
  57. package/dist/ripple/wm-chart.entry.js +0 -504
  58. package/dist/ripple/wm-datepicker.entry.js +0 -258
  59. package/dist/ripple/wm-input.entry.js +0 -106
  60. package/dist/ripple/wm-menuitem.entry.js +0 -114
  61. package/dist/ripple/wm-modal-footer.entry.js +0 -39
  62. package/dist/ripple/wm-modal-header.entry.js +0 -41
  63. package/dist/ripple/wm-modal.entry.js +0 -145
  64. package/dist/ripple/wm-navigator.entry.js +0 -275
  65. package/dist/ripple/wm-network-uploader.entry.js +0 -427
  66. package/dist/ripple/wm-option.entry.js +0 -119
  67. package/dist/ripple/wm-pagination.entry.js +0 -172
  68. package/dist/ripple/wm-search.entry.js +0 -227
  69. package/dist/ripple/wm-select.entry.js +0 -362
  70. package/dist/ripple/wm-snackbar.entry.js +0 -156
  71. package/dist/ripple/wm-tab-item.entry.js +0 -78
  72. package/dist/ripple/wm-tab-list.entry.js +0 -201
  73. package/dist/ripple/wm-tab-panel.entry.js +0 -38
  74. package/dist/ripple/wm-tag-input.entry.js +0 -534
  75. package/dist/ripple/wm-timepicker.entry.js +0 -382
  76. package/dist/ripple/wm-toggletip.entry.js +0 -124
  77. package/dist/ripple/wm-uploader.entry.js +0 -338
  78. package/dist/ripple/wm-wrapper.entry.js +0 -17
  79. package/dist/types/components/wm-tag-input/wm-tag-input.d.ts~ds312_tagInputMaxTags +0 -87
  80. package/dist/types/components.d.ts~ds312_tagInputMaxTags +0 -879
  81. package/dist/types/stencil-public-runtime.d.ts~ds312_tagInputMaxTags +0 -1555
@@ -1,25 +0,0 @@
1
- import { r as registerInstance, e as createEvent, h, g as getElement } from './index-e34aa595.js';
2
-
3
- const privNavigatorButtonCss = ":host *,priv-navigator-button *{box-sizing:border-box}:host .navigator,priv-navigator-button .navigator{color:#575195;padding:0 1.25rem;position:static !important;height:100%;background:transparent;border:none;min-height:3.75rem;cursor:pointer;border-radius:0;top:50%}:host .navigator img,priv-navigator-button .navigator img{height:2.25rem;width:2.25rem;vertical-align:middle}:host .navigator:hover,priv-navigator-button .navigator:hover{background:#dcdbde}:host .navigator:active,:host .navigator:focus,priv-navigator-button .navigator:active,priv-navigator-button .navigator:focus{outline:none}:host .navigator.user-is-tabbing:focus,priv-navigator-button .navigator.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}:host .navigator.user-is-tabbing:focus::-moz-focus-inner,priv-navigator-button .navigator.user-is-tabbing:focus::-moz-focus-inner{border:0}:host button:after,priv-navigator-button button:after{vertical-align:middle;height:2.25rem;width:2.25rem;background-size:36px;display:inline-block;background-image:url(https://cdn.watermarkinsights.com/images/icons/appswitchericon_purple.svg);content:\"\"}";
4
-
5
- const PrivNavigatorButton = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.buttonActivated = createEvent(this, "buttonActivated", 7);
9
- this.expanded = false;
10
- this.altText = "";
11
- this.isTabbing = false;
12
- }
13
- handleClick() {
14
- this.buttonActivated.emit();
15
- }
16
- render() {
17
- const { handleClick, altText } = this;
18
- const tabbingClass = this.isTabbing ? "user-is-tabbing" : "";
19
- return (h("button", { "aria-expanded": this.expanded.toString(), class: `navigator ${tabbingClass}`, onClick: handleClick.bind(this), "aria-label": altText }));
20
- }
21
- get el() { return getElement(this); }
22
- };
23
- PrivNavigatorButton.style = privNavigatorButtonCss;
24
-
25
- export { PrivNavigatorButton as priv_navigator_button };
@@ -1,30 +0,0 @@
1
- import { r as registerInstance, e as createEvent, h, g as getElement } from './index-e34aa595.js';
2
-
3
- const privNavigatorItemCss = ":host,priv-navigator-item{list-style:none;border-bottom:1px solid #e0dde4;width:100%;display:block;cursor:pointer}:host .navoption,priv-navigator-item .navoption{color:#404248;padding:0.9375rem 1.25rem;background:#fff;font-size:0.875rem}:host .navoption.selected,:host .navoption:hover,priv-navigator-item .navoption.selected,priv-navigator-item .navoption:hover{background:#e5e5e5}:host .navoption.focused:not(.selected),priv-navigator-item .navoption.focused:not(.selected){background:#f4f4f4;opacity:1}";
4
-
5
- const PrivNavigatorItem = class {
6
- constructor(hostRef) {
7
- registerInstance(this, hostRef);
8
- this.keydownOnNavItem = createEvent(this, "keydownOnNavItem", 7);
9
- this.selected = false;
10
- this.focused = false;
11
- this.link = "";
12
- }
13
- handleKeyDown(ev) {
14
- const key = ev.key;
15
- const el = this.el;
16
- if (key !== "Tab") {
17
- ev.preventDefault();
18
- }
19
- this.keydownOnNavItem.emit({ navItem: el, key: key });
20
- }
21
- render() {
22
- const selectedClass = this.selected ? "selected" : "";
23
- const focusedClass = this.focused ? "focused" : "";
24
- return (h("div", { class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", null)));
25
- }
26
- get el() { return getElement(this); }
27
- };
28
- PrivNavigatorItem.style = privNavigatorItemCss;
29
-
30
- export { PrivNavigatorItem as priv_navigator_item };
@@ -1,84 +0,0 @@
1
- /* --------------------------------------
2
- 1. Box-shadow
3
- -------------------------------------- */
4
- /* --------------------------------------
5
- 2. Border-radius
6
- -------------------------------------- */
7
- /* --------------------------------------
8
- 3. Transforms
9
- -------------------------------------- */
10
- /* --------------------------------------
11
- 4. Button Focus
12
- -------------------------------------- */
13
- /* --------------------------------------
14
- 5. Flex
15
- -------------------------------------- */
16
- /* --------------------------------------
17
- 6. Button Hover
18
- -------------------------------------- */
19
- /* --------------------------------------
20
- 7. Screen Reader Only
21
- -------------------------------------- */
22
- /* --------------------------------------
23
- 8. Label styles
24
- this mixin includes all the styles for the label
25
- + flex rules on the parent container to switch between top and left position
26
- + srOnly when label is hidden
27
- Assumes the following markup:
28
- div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
29
- .wrapper is for the flex rules
30
- .label-wrapper is to set the height of the label when positioned left so it's the same height as
31
- the input. It can't be done directly on .label because of possible line wrapping.
32
- When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
33
- (they can't be aligned on the baseline because of possible description text and error message)
34
- -------------------------------------- */
35
- /********************************************************************************************/
36
- /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
37
- /********************************************************************************************/
38
- /* USAGE */
39
- /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
40
- /* TODO: replace with vars above whenever possible */
41
- /* Buttons */
42
- /* VIA */
43
- /* --------------------------------------
44
- 1. Box-shadow
45
- -------------------------------------- */
46
- /* --------------------------------------
47
- 2. Border-radius
48
- -------------------------------------- */
49
- /* --------------------------------------
50
- 3. Transforms
51
- -------------------------------------- */
52
- /* --------------------------------------
53
- 4. Button Focus
54
- -------------------------------------- */
55
- /* --------------------------------------
56
- 5. Flex
57
- -------------------------------------- */
58
- /* --------------------------------------
59
- 6. Button Hover
60
- -------------------------------------- */
61
- /* --------------------------------------
62
- 7. Screen Reader Only
63
- -------------------------------------- */
64
- /* --------------------------------------
65
- 8. Label styles
66
- this mixin includes all the styles for the label
67
- + flex rules on the parent container to switch between top and left position
68
- + srOnly when label is hidden
69
- Assumes the following markup:
70
- div.wrapper[.label-left.invalid] > div.label-wrapper > label.label > span.required
71
- .wrapper is for the flex rules
72
- .label-wrapper is to set the height of the label when positioned left so it's the same height as
73
- the input. It can't be done directly on .label because of possible line wrapping.
74
- When the label is on top there's no line wrapping at all to ensure proper alignment of inlined elements
75
- (they can't be aligned on the baseline because of possible description text and error message)
76
- -------------------------------------- */
77
- /********************************************************************************************/
78
- /* DO NOT USE THESE DIRECTLY, ASSIGN THEM TO VARIABLES NAMED AFTER FUNCTIONALITY, SEE BELOW */
79
- /********************************************************************************************/
80
- /* USAGE */
81
- /* BELOW IS BEFORE WE HAD THE COLOR PALETTE FROM UI */
82
- /* TODO: replace with vars above whenever possible */
83
- /* Buttons */
84
- /* VIA */
@@ -1,389 +0,0 @@
1
- /*
2
- Stencil Client Platform v2.8.0 | MIT Licensed | https://stenciljs.com
3
- */
4
- /**
5
- * @license
6
- * Copyright Google Inc. All Rights Reserved.
7
- *
8
- * Use of this source code is governed by an MIT-style license that can be
9
- * found in the LICENSE file at https://angular.io/license
10
- *
11
- * This file is a port of shadowCSS from webcomponents.js to TypeScript.
12
- * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
13
- * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
14
- */
15
- const safeSelector = (selector) => {
16
- const placeholders = [];
17
- let index = 0;
18
- let content;
19
- // Replaces attribute selectors with placeholders.
20
- // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
21
- selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
22
- const replaceBy = `__ph-${index}__`;
23
- placeholders.push(keep);
24
- index++;
25
- return replaceBy;
26
- });
27
- // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
28
- // WS and "+" would otherwise be interpreted as selector separators.
29
- content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
30
- const replaceBy = `__ph-${index}__`;
31
- placeholders.push(exp);
32
- index++;
33
- return pseudo + replaceBy;
34
- });
35
- const ss = {
36
- content,
37
- placeholders,
38
- };
39
- return ss;
40
- };
41
- const restoreSafeSelector = (placeholders, content) => {
42
- return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
43
- };
44
- const _polyfillHost = '-shadowcsshost';
45
- const _polyfillSlotted = '-shadowcssslotted';
46
- // note: :host-context pre-processed to -shadowcsshostcontext.
47
- const _polyfillHostContext = '-shadowcsscontext';
48
- const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)';
49
- const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
50
- const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
51
- const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
52
- const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
53
- const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
54
- const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
55
- const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
56
- const _polyfillHostRe = /-shadowcsshost/gim;
57
- const _colonHostRe = /:host/gim;
58
- const _colonSlottedRe = /::slotted/gim;
59
- const _colonHostContextRe = /:host-context/gim;
60
- const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
61
- const stripComments = (input) => {
62
- return input.replace(_commentRe, '');
63
- };
64
- const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
65
- const extractCommentsWithHash = (input) => {
66
- return input.match(_commentWithHashRe) || [];
67
- };
68
- const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
69
- const _curlyRe = /([{}])/g;
70
- const OPEN_CURLY = '{';
71
- const CLOSE_CURLY = '}';
72
- const BLOCK_PLACEHOLDER = '%BLOCK%';
73
- const processRules = (input, ruleCallback) => {
74
- const inputWithEscapedBlocks = escapeBlocks(input);
75
- let nextBlockIndex = 0;
76
- return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
77
- const selector = m[2];
78
- let content = '';
79
- let suffix = m[4];
80
- let contentPrefix = '';
81
- if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
82
- content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
83
- suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
84
- contentPrefix = '{';
85
- }
86
- const cssRule = {
87
- selector,
88
- content,
89
- };
90
- const rule = ruleCallback(cssRule);
91
- return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
92
- });
93
- };
94
- const escapeBlocks = (input) => {
95
- const inputParts = input.split(_curlyRe);
96
- const resultParts = [];
97
- const escapedBlocks = [];
98
- let bracketCount = 0;
99
- let currentBlockParts = [];
100
- for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
101
- const part = inputParts[partIndex];
102
- if (part === CLOSE_CURLY) {
103
- bracketCount--;
104
- }
105
- if (bracketCount > 0) {
106
- currentBlockParts.push(part);
107
- }
108
- else {
109
- if (currentBlockParts.length > 0) {
110
- escapedBlocks.push(currentBlockParts.join(''));
111
- resultParts.push(BLOCK_PLACEHOLDER);
112
- currentBlockParts = [];
113
- }
114
- resultParts.push(part);
115
- }
116
- if (part === OPEN_CURLY) {
117
- bracketCount++;
118
- }
119
- }
120
- if (currentBlockParts.length > 0) {
121
- escapedBlocks.push(currentBlockParts.join(''));
122
- resultParts.push(BLOCK_PLACEHOLDER);
123
- }
124
- const strEscapedBlocks = {
125
- escapedString: resultParts.join(''),
126
- blocks: escapedBlocks,
127
- };
128
- return strEscapedBlocks;
129
- };
130
- const insertPolyfillHostInCssText = (selector) => {
131
- selector = selector
132
- .replace(_colonHostContextRe, _polyfillHostContext)
133
- .replace(_colonHostRe, _polyfillHost)
134
- .replace(_colonSlottedRe, _polyfillSlotted);
135
- return selector;
136
- };
137
- const convertColonRule = (cssText, regExp, partReplacer) => {
138
- // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
139
- return cssText.replace(regExp, (...m) => {
140
- if (m[2]) {
141
- const parts = m[2].split(',');
142
- const r = [];
143
- for (let i = 0; i < parts.length; i++) {
144
- const p = parts[i].trim();
145
- if (!p)
146
- break;
147
- r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
148
- }
149
- return r.join(',');
150
- }
151
- else {
152
- return _polyfillHostNoCombinator + m[3];
153
- }
154
- });
155
- };
156
- const colonHostPartReplacer = (host, part, suffix) => {
157
- return host + part.replace(_polyfillHost, '') + suffix;
158
- };
159
- const convertColonHost = (cssText) => {
160
- return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
161
- };
162
- const colonHostContextPartReplacer = (host, part, suffix) => {
163
- if (part.indexOf(_polyfillHost) > -1) {
164
- return colonHostPartReplacer(host, part, suffix);
165
- }
166
- else {
167
- return host + part + suffix + ', ' + part + ' ' + host + suffix;
168
- }
169
- };
170
- const convertColonSlotted = (cssText, slotScopeId) => {
171
- const slotClass = '.' + slotScopeId + ' > ';
172
- const selectors = [];
173
- cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
174
- if (m[2]) {
175
- const compound = m[2].trim();
176
- const suffix = m[3];
177
- const slottedSelector = slotClass + compound + suffix;
178
- let prefixSelector = '';
179
- for (let i = m[4] - 1; i >= 0; i--) {
180
- const char = m[5][i];
181
- if (char === '}' || char === ',') {
182
- break;
183
- }
184
- prefixSelector = char + prefixSelector;
185
- }
186
- const orgSelector = prefixSelector + slottedSelector;
187
- const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
188
- if (orgSelector.trim() !== addedSelector.trim()) {
189
- const updatedSelector = `${addedSelector}, ${orgSelector}`;
190
- selectors.push({
191
- orgSelector,
192
- updatedSelector,
193
- });
194
- }
195
- return slottedSelector;
196
- }
197
- else {
198
- return _polyfillHostNoCombinator + m[3];
199
- }
200
- });
201
- return {
202
- selectors,
203
- cssText,
204
- };
205
- };
206
- const convertColonHostContext = (cssText) => {
207
- return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
208
- };
209
- const convertShadowDOMSelectors = (cssText) => {
210
- return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
211
- };
212
- const makeScopeMatcher = (scopeSelector) => {
213
- const lre = /\[/g;
214
- const rre = /\]/g;
215
- scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
216
- return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
217
- };
218
- const selectorNeedsScoping = (selector, scopeSelector) => {
219
- const re = makeScopeMatcher(scopeSelector);
220
- return !re.test(selector);
221
- };
222
- const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
223
- // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
224
- _polyfillHostRe.lastIndex = 0;
225
- if (_polyfillHostRe.test(selector)) {
226
- const replaceBy = `.${hostSelector}`;
227
- return selector
228
- .replace(_polyfillHostNoCombinatorRe, (_, selector) => {
229
- return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {
230
- return before + replaceBy + colon + after;
231
- });
232
- })
233
- .replace(_polyfillHostRe, replaceBy + ' ');
234
- }
235
- return scopeSelector + ' ' + selector;
236
- };
237
- const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
238
- const isRe = /\[is=([^\]]*)\]/g;
239
- scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
240
- const className = '.' + scopeSelector;
241
- const _scopeSelectorPart = (p) => {
242
- let scopedP = p.trim();
243
- if (!scopedP) {
244
- return '';
245
- }
246
- if (p.indexOf(_polyfillHostNoCombinator) > -1) {
247
- scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
248
- }
249
- else {
250
- // remove :host since it should be unnecessary
251
- const t = p.replace(_polyfillHostRe, '');
252
- if (t.length > 0) {
253
- const matches = t.match(/([^:]*)(:*)(.*)/);
254
- if (matches) {
255
- scopedP = matches[1] + className + matches[2] + matches[3];
256
- }
257
- }
258
- }
259
- return scopedP;
260
- };
261
- const safeContent = safeSelector(selector);
262
- selector = safeContent.content;
263
- let scopedSelector = '';
264
- let startIndex = 0;
265
- let res;
266
- const sep = /( |>|\+|~(?!=))\s*/g;
267
- // If a selector appears before :host it should not be shimmed as it
268
- // matches on ancestor elements and not on elements in the host's shadow
269
- // `:host-context(div)` is transformed to
270
- // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
271
- // the `div` is not part of the component in the 2nd selectors and should not be scoped.
272
- // Historically `component-tag:host` was matching the component so we also want to preserve
273
- // this behavior to avoid breaking legacy apps (it should not match).
274
- // The behavior should be:
275
- // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
276
- // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
277
- // `:host-context(tag)`)
278
- const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
279
- // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
280
- let shouldScope = !hasHost;
281
- while ((res = sep.exec(selector)) !== null) {
282
- const separator = res[1];
283
- const part = selector.slice(startIndex, res.index).trim();
284
- shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
285
- const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
286
- scopedSelector += `${scopedPart} ${separator} `;
287
- startIndex = sep.lastIndex;
288
- }
289
- const part = selector.substring(startIndex);
290
- shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
291
- scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
292
- // replace the placeholders with their original values
293
- return restoreSafeSelector(safeContent.placeholders, scopedSelector);
294
- };
295
- const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
296
- return selector
297
- .split(',')
298
- .map((shallowPart) => {
299
- if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
300
- return shallowPart.trim();
301
- }
302
- if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
303
- return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
304
- }
305
- else {
306
- return shallowPart.trim();
307
- }
308
- })
309
- .join(', ');
310
- };
311
- const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
312
- return processRules(cssText, (rule) => {
313
- let selector = rule.selector;
314
- let content = rule.content;
315
- if (rule.selector[0] !== '@') {
316
- selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
317
- }
318
- else if (rule.selector.startsWith('@media') ||
319
- rule.selector.startsWith('@supports') ||
320
- rule.selector.startsWith('@page') ||
321
- rule.selector.startsWith('@document')) {
322
- content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
323
- }
324
- const cssRule = {
325
- selector: selector.replace(/\s{2,}/g, ' ').trim(),
326
- content,
327
- };
328
- return cssRule;
329
- });
330
- };
331
- const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
332
- cssText = insertPolyfillHostInCssText(cssText);
333
- cssText = convertColonHost(cssText);
334
- cssText = convertColonHostContext(cssText);
335
- const slotted = convertColonSlotted(cssText, slotScopeId);
336
- cssText = slotted.cssText;
337
- cssText = convertShadowDOMSelectors(cssText);
338
- if (scopeId) {
339
- cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
340
- }
341
- cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
342
- cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
343
- return {
344
- cssText: cssText.trim(),
345
- slottedSelectors: slotted.selectors,
346
- };
347
- };
348
- const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
349
- const hostScopeId = scopeId + '-h';
350
- const slotScopeId = scopeId + '-s';
351
- const commentsWithHash = extractCommentsWithHash(cssText);
352
- cssText = stripComments(cssText);
353
- const orgSelectors = [];
354
- if (commentOriginalSelector) {
355
- const processCommentedSelector = (rule) => {
356
- const placeholder = `/*!@___${orgSelectors.length}___*/`;
357
- const comment = `/*!@${rule.selector}*/`;
358
- orgSelectors.push({ placeholder, comment });
359
- rule.selector = placeholder + rule.selector;
360
- return rule;
361
- };
362
- cssText = processRules(cssText, (rule) => {
363
- if (rule.selector[0] !== '@') {
364
- return processCommentedSelector(rule);
365
- }
366
- else if (rule.selector.startsWith('@media') ||
367
- rule.selector.startsWith('@supports') ||
368
- rule.selector.startsWith('@page') ||
369
- rule.selector.startsWith('@document')) {
370
- rule.content = processRules(rule.content, processCommentedSelector);
371
- return rule;
372
- }
373
- return rule;
374
- });
375
- }
376
- const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
377
- cssText = [scoped.cssText, ...commentsWithHash].join('\n');
378
- if (commentOriginalSelector) {
379
- orgSelectors.forEach(({ placeholder, comment }) => {
380
- cssText = cssText.replace(placeholder, comment);
381
- });
382
- }
383
- scoped.slottedSelectors.forEach((slottedSelector) => {
384
- cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);
385
- });
386
- return cssText;
387
- };
388
-
389
- export { scopeCss };