@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.
- package/dist/cjs/{global-ccb9500c.js → global-1e540de6.js} +1 -1
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/priv-datepicker.cjs.entry.js +1 -1
- package/dist/cjs/ripple.cjs.js +2 -2
- package/dist/cjs/wm-datepicker.cjs.entry.js +25 -30
- package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.css +9 -0
- package/dist/collection/components/wm-datepicker/wm-datepicker.js +26 -32
- package/dist/esm/{global-4f914bb2.js → global-d6b49e98.js} +1 -1
- package/dist/esm/loader.js +2 -2
- package/dist/esm/priv-datepicker.entry.js +1 -1
- package/dist/esm/ripple.js +2 -2
- package/dist/esm/wm-datepicker.entry.js +25 -30
- package/dist/ripple/p-129d94fa.entry.js +1 -0
- package/dist/ripple/{p-454ad552.entry.js → p-c0fe5201.entry.js} +1 -1
- package/dist/ripple/{p-69a73e86.js → p-e3843249.js} +1 -1
- package/dist/ripple/ripple.esm.js +1 -1
- package/dist/types/components/wm-datepicker/wm-datepicker.d.ts +3 -3
- package/package.json +1 -1
- package/dist/cjs/app-globals-a07327ae.js +0 -47
- package/dist/cjs/css-shim-a7379e2b.js +0 -6
- package/dist/cjs/dom-3e7d9c3b.js +0 -75
- package/dist/cjs/functions-65513c61.js +0 -8360
- package/dist/cjs/global-06317e3f.js +0 -36
- package/dist/cjs/global-f6930bb0.js +0 -38
- package/dist/cjs/index-8dea8c13.js +0 -2976
- package/dist/cjs/shadow-css-09555044.js +0 -391
- package/dist/esm/app-globals-f62991a4.js +0 -45
- package/dist/esm/css-shim-bbdf0cc6.js +0 -4
- package/dist/esm/dom-1f98a75f.js +0 -73
- package/dist/esm/functions-316c1b23.js +0 -8340
- package/dist/esm/global-03372f70.js +0 -34
- package/dist/esm/global-fedbc323.js +0 -36
- package/dist/esm/index-e34aa595.js +0 -2938
- package/dist/esm/shadow-css-67b66845.js +0 -389
- package/dist/ripple/app-globals-b5693c90.js +0 -45
- package/dist/ripple/app-globals-d72c2d3c.js +0 -45
- package/dist/ripple/app-globals-f62991a4.js +0 -45
- package/dist/ripple/css-shim-bbdf0cc6.js +0 -4
- package/dist/ripple/dom-1f98a75f.js +0 -73
- package/dist/ripple/functions-316c1b23.js +0 -8340
- package/dist/ripple/http-service-5d037e16.js +0 -52
- package/dist/ripple/index-20b65f86.js +0 -2938
- package/dist/ripple/index-e34aa595.js +0 -2938
- package/dist/ripple/interfaces-50753346.js +0 -51
- package/dist/ripple/p-0c2498f4.js +0 -1
- package/dist/ripple/p-42ca2e15.entry.js +0 -1
- package/dist/ripple/p-e91befe3.js +0 -1
- package/dist/ripple/priv-chart-popover.entry.js +0 -85
- package/dist/ripple/priv-datepicker.entry.js +0 -668
- package/dist/ripple/priv-navigator-button.entry.js +0 -25
- package/dist/ripple/priv-navigator-item.entry.js +0 -30
- package/dist/ripple/ripple.css +0 -84
- package/dist/ripple/shadow-css-67b66845.js +0 -389
- package/dist/ripple/wm-action-menu.entry.js +0 -202
- package/dist/ripple/wm-button.entry.js +0 -148
- package/dist/ripple/wm-chart-slice.entry.js +0 -18
- package/dist/ripple/wm-chart.entry.js +0 -504
- package/dist/ripple/wm-datepicker.entry.js +0 -258
- package/dist/ripple/wm-input.entry.js +0 -106
- package/dist/ripple/wm-menuitem.entry.js +0 -114
- package/dist/ripple/wm-modal-footer.entry.js +0 -39
- package/dist/ripple/wm-modal-header.entry.js +0 -41
- package/dist/ripple/wm-modal.entry.js +0 -145
- package/dist/ripple/wm-navigator.entry.js +0 -275
- package/dist/ripple/wm-network-uploader.entry.js +0 -427
- package/dist/ripple/wm-option.entry.js +0 -119
- package/dist/ripple/wm-pagination.entry.js +0 -172
- package/dist/ripple/wm-search.entry.js +0 -227
- package/dist/ripple/wm-select.entry.js +0 -362
- package/dist/ripple/wm-snackbar.entry.js +0 -156
- package/dist/ripple/wm-tab-item.entry.js +0 -78
- package/dist/ripple/wm-tab-list.entry.js +0 -201
- package/dist/ripple/wm-tab-panel.entry.js +0 -38
- package/dist/ripple/wm-tag-input.entry.js +0 -534
- package/dist/ripple/wm-timepicker.entry.js +0 -382
- package/dist/ripple/wm-toggletip.entry.js +0 -124
- package/dist/ripple/wm-uploader.entry.js +0 -338
- package/dist/ripple/wm-wrapper.entry.js +0 -17
- package/dist/types/components/wm-tag-input/wm-tag-input.d.ts~ds312_tagInputMaxTags +0 -87
- package/dist/types/components.d.ts~ds312_tagInputMaxTags +0 -879
- 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 };
|
package/dist/ripple/ripple.css
DELETED
|
@@ -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 };
|