@geotrekce/geotrek-rando-widget 0.0.9 → 0.0.12

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 (89) hide show
  1. package/dist/cjs/css-shim-6f592941.js +6 -0
  2. package/dist/cjs/dom-d5e52c7e.js +75 -0
  3. package/dist/cjs/geotrek-rando-widget.cjs.js +73 -6
  4. package/dist/cjs/grw-app.cjs.entry.js +3 -3
  5. package/dist/cjs/grw-filter_6.cjs.entry.js +40 -18
  6. package/dist/cjs/grw-information-desk-detail_3.cjs.entry.js +5 -5
  7. package/dist/cjs/grw-trek-card.cjs.entry.js +3 -3
  8. package/dist/cjs/{index-4c76daa3.js → index-2c4fcc1d.js} +87 -7
  9. package/dist/cjs/loader.cjs.js +16 -2
  10. package/dist/cjs/shadow-css-cf936b02.js +389 -0
  11. package/dist/cjs/{store-b4c3c507.js → store-b55b295a.js} +13 -5
  12. package/dist/collection/collection-manifest.json +1 -1
  13. package/dist/collection/components/grw-map/grw-map.js +9 -6
  14. package/dist/collection/components/grw-poi-detail/grw-poi-detail.js +1 -1
  15. package/dist/collection/components/grw-trek-detail/grw-trek-detail.js +1 -1
  16. package/dist/collection/components/grw-treks-list/grw-treks-list.js +18 -3
  17. package/dist/collection/store/grw-trek-provider.js +6 -2
  18. package/dist/collection/store/store.js +1 -0
  19. package/dist/components/grw-app.js +1 -1
  20. package/dist/components/grw-filter2.js +1 -1
  21. package/dist/components/grw-information-desk-detail2.js +1 -1
  22. package/dist/components/grw-map2.js +10 -7
  23. package/dist/components/grw-poi-detail2.js +1 -1
  24. package/dist/components/grw-sensitive-area-detail2.js +1 -1
  25. package/dist/components/grw-trek-card2.js +1 -1
  26. package/dist/components/grw-trek-detail2.js +2 -2
  27. package/dist/components/grw-trek-provider2.js +6 -2
  28. package/dist/components/grw-treks-list2.js +19 -4
  29. package/dist/components/index.d.ts +11 -5
  30. package/dist/components/index.js +11 -0
  31. package/dist/components/store.js +12 -4
  32. package/dist/esm/css-shim-2d0a698c.js +4 -0
  33. package/dist/esm/dom-9794f747.js +73 -0
  34. package/dist/esm/geotrek-rando-widget.js +73 -6
  35. package/dist/esm/grw-app.entry.js +3 -3
  36. package/dist/esm/grw-filter_6.entry.js +40 -18
  37. package/dist/esm/grw-information-desk-detail_3.entry.js +5 -5
  38. package/dist/esm/grw-trek-card.entry.js +3 -3
  39. package/dist/esm/{index-ee473772.js → index-2762ee98.js} +83 -8
  40. package/dist/esm/loader.js +16 -2
  41. package/dist/esm/shadow-css-4cd4480f.js +387 -0
  42. package/dist/esm/{store-a5f523fd.js → store-c98ddf7e.js} +13 -5
  43. package/dist/esm-es5/css-shim-2d0a698c.js +1 -0
  44. package/dist/esm-es5/dom-9794f747.js +21 -0
  45. package/dist/esm-es5/geotrek-rando-widget.js +1 -0
  46. package/dist/esm-es5/grw-app.entry.js +1 -0
  47. package/dist/esm-es5/grw-filter_6.entry.js +6 -0
  48. package/dist/esm-es5/grw-information-desk-detail_3.entry.js +1 -0
  49. package/dist/esm-es5/grw-trek-card.entry.js +1 -0
  50. package/dist/esm-es5/index-2762ee98.js +2 -0
  51. package/dist/esm-es5/index.js +0 -0
  52. package/dist/esm-es5/length-d82189db.js +1 -0
  53. package/dist/esm-es5/loader.js +1 -0
  54. package/dist/esm-es5/shadow-css-4cd4480f.js +12 -0
  55. package/dist/esm-es5/store-c98ddf7e.js +1 -0
  56. package/dist/geotrek-rando-widget/geotrek-rando-widget.esm.js +1 -1
  57. package/dist/geotrek-rando-widget/geotrek-rando-widget.js +133 -0
  58. package/dist/geotrek-rando-widget/p-0c5b047c.js +1 -0
  59. package/dist/geotrek-rando-widget/{p-94f0db4d.entry.js → p-11e1961e.entry.js} +1 -1
  60. package/dist/geotrek-rando-widget/p-2e151f05.js +1 -0
  61. package/dist/geotrek-rando-widget/p-32d97a4f.system.js +1 -0
  62. package/dist/geotrek-rando-widget/p-4eaf20b7.js +12 -0
  63. package/dist/geotrek-rando-widget/p-50ea2036.system.js +1 -0
  64. package/dist/geotrek-rando-widget/p-55413f00.system.entry.js +1 -0
  65. package/dist/geotrek-rando-widget/p-5af3d927.js +2 -0
  66. package/dist/geotrek-rando-widget/p-61e3f612.system.js +1 -0
  67. package/dist/geotrek-rando-widget/p-8f56c5dc.system.js +1 -0
  68. package/dist/geotrek-rando-widget/p-9453dd9d.entry.js +1 -0
  69. package/dist/geotrek-rando-widget/p-a4852254.system.entry.js +1 -0
  70. package/dist/geotrek-rando-widget/p-a869fc72.entry.js +1 -0
  71. package/dist/geotrek-rando-widget/p-a99db140.system.js +1 -0
  72. package/dist/geotrek-rando-widget/p-b10f0740.system.entry.js +1 -0
  73. package/dist/geotrek-rando-widget/p-b1530d9c.system.js +13 -0
  74. package/dist/geotrek-rando-widget/p-c8c96517.system.js +21 -0
  75. package/dist/geotrek-rando-widget/p-d1582cff.js +19 -0
  76. package/dist/geotrek-rando-widget/p-df08ffe5.system.entry.js +6 -0
  77. package/dist/geotrek-rando-widget/p-e69e41d7.entry.js +1 -0
  78. package/dist/geotrek-rando-widget/p-ef1f14b8.system.js +2 -0
  79. package/dist/index.js +1 -1
  80. package/dist/types/components/grw-treks-list/grw-treks-list.d.ts +2 -0
  81. package/dist/types/store/store.d.ts +3 -1
  82. package/dist/types/types/types.d.ts +6 -5
  83. package/loader/index.js +1 -1
  84. package/package.json +12 -12
  85. package/dist/geotrek-rando-widget/p-0510e16b.entry.js +0 -1
  86. package/dist/geotrek-rando-widget/p-22562f4d.js +0 -1
  87. package/dist/geotrek-rando-widget/p-28db12ba.entry.js +0 -1
  88. package/dist/geotrek-rando-widget/p-500436f1.entry.js +0 -1
  89. package/dist/geotrek-rando-widget/p-b62909db.js +0 -2
@@ -2,11 +2,11 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-4c76daa3.js');
6
- const store = require('./store-b4c3c507.js');
5
+ const index = require('./index-2c4fcc1d.js');
6
+ const store = require('./store-b55b295a.js');
7
7
  const length = require('./length-d315d156.js');
8
8
 
9
- const grwTrekCardCss = ".trek-card-container,.trek-card-large-view-container{font-family:\"Roboto\";border-radius:8px;box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image,.trek-card-large-view-container .image{object-fit:cover}.trek-card-container .sub-container,.trek-card-large-view-container .sub-container{display:flex;flex-direction:column;justify-content:center;padding:12px}.trek-card-container .sub-container .name,.trek-card-large-view-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:8px}.trek-card-container .sub-container .departure,.trek-card-large-view-container .sub-container .departure{color:rgba(0, 0, 0, 0.7);font-size:16px;margin:4px 0px}.trek-card-container .sub-container .themes-container,.trek-card-large-view-container .sub-container .themes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .themes-container .theme,.trek-card-large-view-container .sub-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-card-container .sub-container .icons-labels-container,.trek-card-large-view-container .sub-container .icons-labels-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.trek-card-container .sub-container .icons-labels-container .row,.trek-card-large-view-container .sub-container .icons-labels-container .row{display:flex;justify-content:space-between;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label{display:flex;align-items:center;width:50%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 4px}.trek-card-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:8px}.trek-card-container .sub-container .icons-labels-container .row .practice img,.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-card-container{width:350px;height:auto}.trek-card-container .image{width:100%}.trek-card-large-view-container{height:auto;display:flex;flex-direction:row}.trek-card-large-view-container .image{width:250px}";
9
+ const grwTrekCardCss = ".trek-card-container,.trek-card-large-view-container{font-family:\"Roboto\";border-radius:8px;-webkit-box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);box-shadow:4px 8px 24px rgba(0, 0, 0, 0.25);cursor:pointer}.trek-card-container .image,.trek-card-large-view-container .image{-o-object-fit:cover;object-fit:cover}.trek-card-container .sub-container,.trek-card-large-view-container .sub-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:12px}.trek-card-container .sub-container .name,.trek-card-large-view-container .sub-container .name{color:var(--color-primary);font-size:24px;font-weight:bold;margin-bottom:8px}.trek-card-container .sub-container .departure,.trek-card-large-view-container .sub-container .departure{color:rgba(0, 0, 0, 0.7);font-size:16px;margin:4px 0px}.trek-card-container .sub-container .themes-container,.trek-card-large-view-container .sub-container .themes-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.trek-card-container .sub-container .themes-container .theme,.trek-card-large-view-container .sub-container .themes-container .theme{background-color:var(--color-primary-tint);color:#ffffff;border-radius:8px;padding:8px;margin:0px 8px 8px 0px}.trek-card-container .sub-container .icons-labels-container,.trek-card-large-view-container .sub-container .icons-labels-container{display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}.trek-card-container .sub-container .icons-labels-container .row,.trek-card-large-view-container .sub-container .icons-labels-container .row{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;width:100%}.trek-card-container .sub-container .icons-labels-container .row:not(:last-child),.trek-card-large-view-container .sub-container .icons-labels-container .row:not(:last-child){margin-bottom:12px}.trek-card-container .sub-container .icons-labels-container .row .icon-label,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;width:50%}.trek-card-container .sub-container .icons-labels-container .row .icon-label:nth-child(2),.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label:nth-child(2){margin:0px 4px}.trek-card-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label img,.trek-card-large-view-container .sub-container .icons-labels-container .row .icon-label .svg-icon svg{width:24px;height:auto;margin-right:8px}.trek-card-container .sub-container .icons-labels-container .row .practice img,.trek-card-large-view-container .sub-container .icons-labels-container .row .practice img{background-color:var(--color-primary)}.trek-card-container{width:350px;height:auto}.trek-card-container .image{width:100%}.trek-card-large-view-container{height:auto;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}.trek-card-large-view-container .image{width:250px}";
10
10
 
11
11
  const GrwTrekCard = class {
12
12
  constructor(hostRef) {
@@ -28,6 +28,7 @@ let isSvgMode = false;
28
28
  let renderingRef = null;
29
29
  let queuePending = false;
30
30
  const win = typeof window !== 'undefined' ? window : {};
31
+ const CSS = win.CSS ;
31
32
  const doc = win.document || { head: {} };
32
33
  const plt = {
33
34
  $flags$: 0,
@@ -38,11 +39,13 @@ const plt = {
38
39
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
39
40
  ce: (eventName, opts) => new CustomEvent(eventName, opts),
40
41
  };
42
+ const supportsShadow = /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()
43
+ ;
41
44
  const promiseResolve = (v) => Promise.resolve(v);
42
- const supportsConstructibleStylesheets = /*@__PURE__*/ (() => {
45
+ const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
43
46
  try {
44
47
  new CSSStyleSheet();
45
- return typeof new CSSStyleSheet().replace === 'function';
48
+ return typeof new CSSStyleSheet().replaceSync === 'function';
46
49
  }
47
50
  catch (e) { }
48
51
  return false;
@@ -100,9 +103,14 @@ const uniqueTime = (key, measureText) => {
100
103
  const rootAppliedStyles = new WeakMap();
101
104
  const registerStyle = (scopeId, cssText, allowCS) => {
102
105
  let style = styles.get(scopeId);
103
- if (supportsConstructibleStylesheets && allowCS) {
106
+ if (supportsConstructableStylesheets && allowCS) {
104
107
  style = (style || new CSSStyleSheet());
105
- style.replace(cssText);
108
+ if (typeof style === 'string') {
109
+ style = cssText;
110
+ }
111
+ else {
112
+ style.replaceSync(cssText);
113
+ }
106
114
  }
107
115
  else {
108
116
  style = cssText;
@@ -125,7 +133,18 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
125
133
  }
126
134
  if (!appliedStyles.has(scopeId)) {
127
135
  {
128
- {
136
+ if (plt.$cssShim$) {
137
+ styleElm = plt.$cssShim$.createHostStyle(hostElm, scopeId, style, !!(cmpMeta.$flags$ & 10 /* needsScopedEncapsulation */));
138
+ const newScopeId = styleElm['s-sc'];
139
+ if (newScopeId) {
140
+ scopeId = newScopeId;
141
+ // we don't want to add this styleID to the appliedStyles Set
142
+ // since the cssVarShim might need to apply several different
143
+ // stylesheets for the same component
144
+ appliedStyles = null;
145
+ }
146
+ }
147
+ else {
129
148
  styleElm = doc.createElement('style');
130
149
  styleElm.innerHTML = style;
131
150
  }
@@ -147,7 +166,7 @@ const attachStyles = (hostRef) => {
147
166
  const elm = hostRef.$hostElement$;
148
167
  const flags = cmpMeta.$flags$;
149
168
  const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
150
- const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
169
+ const scopeId = addStyle(supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$, elm);
151
170
  if (flags & 10 /* needsScopedEncapsulation */) {
152
171
  // only required when we're NOT using native shadow dom (slot)
153
172
  // or this browser doesn't support native shadow dom
@@ -698,6 +717,9 @@ const updateComponent = async (hostRef, instance, isInitialLoad) => {
698
717
  {
699
718
  callRender(hostRef, instance);
700
719
  }
720
+ if (plt.$cssShim$) {
721
+ plt.$cssShim$.updateHost(elm);
722
+ }
701
723
  if (rc) {
702
724
  // ok, so turns out there are some child host elements
703
725
  // waiting on this parent element to load
@@ -1066,6 +1088,9 @@ const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId, Cstr) =>
1066
1088
  const scopeId = getScopeId(cmpMeta);
1067
1089
  if (!styles.has(scopeId)) {
1068
1090
  const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);
1091
+ if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
1092
+ style = await Promise.resolve().then(function () { return require('./shadow-css-cf936b02.js'); }).then((m) => m.scopeCss(style, scopeId, false));
1093
+ }
1069
1094
  registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
1070
1095
  endRegisterStyles();
1071
1096
  }
@@ -1151,11 +1176,52 @@ const disconnectedCallback = (elm) => {
1151
1176
  hostRef.$rmListeners$ = undefined;
1152
1177
  }
1153
1178
  }
1179
+ // clear CSS var-shim tracking
1180
+ if (plt.$cssShim$) {
1181
+ plt.$cssShim$.removeHost(elm);
1182
+ }
1154
1183
  {
1155
1184
  safeCall(instance, 'disconnectedCallback');
1156
1185
  }
1157
1186
  }
1158
1187
  };
1188
+ const patchChildSlotNodes = (elm, cmpMeta) => {
1189
+ class FakeNodeList extends Array {
1190
+ item(n) {
1191
+ return this[n];
1192
+ }
1193
+ }
1194
+ if (cmpMeta.$flags$ & 8 /* needsShadowDomShim */) {
1195
+ const childNodesFn = elm.__lookupGetter__('childNodes');
1196
+ Object.defineProperty(elm, 'children', {
1197
+ get() {
1198
+ return this.childNodes.map((n) => n.nodeType === 1);
1199
+ },
1200
+ });
1201
+ Object.defineProperty(elm, 'childElementCount', {
1202
+ get() {
1203
+ return elm.children.length;
1204
+ },
1205
+ });
1206
+ Object.defineProperty(elm, 'childNodes', {
1207
+ get() {
1208
+ const childNodes = childNodesFn.call(this);
1209
+ if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0 &&
1210
+ getHostRef(this).$flags$ & 2 /* hasRendered */) {
1211
+ const result = new FakeNodeList();
1212
+ for (let i = 0; i < childNodes.length; i++) {
1213
+ const slot = childNodes[i]['s-nr'];
1214
+ if (slot) {
1215
+ result.push(slot);
1216
+ }
1217
+ }
1218
+ return result;
1219
+ }
1220
+ return FakeNodeList.from(childNodes);
1221
+ },
1222
+ });
1223
+ }
1224
+ };
1159
1225
  const bootstrapLazy = (lazyBundles, options = {}) => {
1160
1226
  const endBootstrap = createTime();
1161
1227
  const cmpTags = [];
@@ -1186,6 +1252,9 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1186
1252
  {
1187
1253
  cmpMeta.$watchers$ = {};
1188
1254
  }
1255
+ if (!supportsShadow && cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
1256
+ cmpMeta.$flags$ |= 8 /* needsShadowDomShim */;
1257
+ }
1189
1258
  const tagName = cmpMeta.$tagName$;
1190
1259
  const HostElement = class extends HTMLElement {
1191
1260
  // StencilLazyHost
@@ -1199,11 +1268,17 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1199
1268
  // and this browser supports shadow dom
1200
1269
  // add the read-only property "shadowRoot" to the host element
1201
1270
  // adding the shadow root build conditionals to minimize runtime
1202
- {
1271
+ if (supportsShadow) {
1203
1272
  {
1204
1273
  self.attachShadow({ mode: 'open' });
1205
1274
  }
1206
1275
  }
1276
+ else if (!('shadowRoot' in self)) {
1277
+ self.shadowRoot = self;
1278
+ }
1279
+ }
1280
+ {
1281
+ patchChildSlotNodes(self, cmpMeta);
1207
1282
  }
1208
1283
  }
1209
1284
  connectedCallback() {
@@ -1337,12 +1412,17 @@ const flush = () => {
1337
1412
  const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1338
1413
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1339
1414
 
1415
+ exports.CSS = CSS;
1340
1416
  exports.Host = Host;
1417
+ exports.NAMESPACE = NAMESPACE;
1341
1418
  exports.bootstrapLazy = bootstrapLazy;
1342
1419
  exports.createEvent = createEvent;
1420
+ exports.doc = doc;
1343
1421
  exports.forceUpdate = forceUpdate;
1344
1422
  exports.getElement = getElement;
1345
1423
  exports.getRenderingRef = getRenderingRef;
1346
1424
  exports.h = h;
1425
+ exports.plt = plt;
1347
1426
  exports.promiseResolve = promiseResolve;
1348
1427
  exports.registerInstance = registerInstance;
1428
+ exports.win = win;
@@ -2,12 +2,26 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-4c76daa3.js');
5
+ const index = require('./index-2c4fcc1d.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Esm v2.16.1 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Esm v2.17.4 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchEsm = () => {
11
+ // NOTE!! This fn cannot use async/await!
12
+ // @ts-ignore
13
+ if (!(index.CSS && index.CSS.supports && index.CSS.supports('color', 'var(--c)'))) {
14
+ // @ts-ignore
15
+ return Promise.resolve().then(function () { return require(/* webpackChunkName: "polyfills-css-shim" */ './css-shim-6f592941.js'); }).then(() => {
16
+ if ((index.plt.$cssShim$ = index.win.__cssshim)) {
17
+ return index.plt.$cssShim$.i();
18
+ }
19
+ else {
20
+ // for better minification
21
+ return 0;
22
+ }
23
+ });
24
+ }
11
25
  return index.promiseResolve();
12
26
  };
13
27
 
@@ -0,0 +1,389 @@
1
+ 'use strict';
2
+
3
+ /*
4
+ Stencil Client Platform v2.17.4 | MIT Licensed | https://stenciljs.com
5
+ */
6
+ /**
7
+ * @license
8
+ * Copyright Google Inc. All Rights Reserved.
9
+ *
10
+ * Use of this source code is governed by an MIT-style license that can be
11
+ * found in the LICENSE file at https://angular.io/license
12
+ *
13
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
14
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
15
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
16
+ */
17
+ const safeSelector = (selector) => {
18
+ const placeholders = [];
19
+ let index = 0;
20
+ // Replaces attribute selectors with placeholders.
21
+ // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
22
+ selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
23
+ const replaceBy = `__ph-${index}__`;
24
+ placeholders.push(keep);
25
+ index++;
26
+ return replaceBy;
27
+ });
28
+ // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
29
+ // WS and "+" would otherwise be interpreted as selector separators.
30
+ const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
31
+ const replaceBy = `__ph-${index}__`;
32
+ placeholders.push(exp);
33
+ index++;
34
+ return pseudo + replaceBy;
35
+ });
36
+ const ss = {
37
+ content,
38
+ placeholders,
39
+ };
40
+ return ss;
41
+ };
42
+ const restoreSafeSelector = (placeholders, content) => {
43
+ return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
44
+ };
45
+ const _polyfillHost = '-shadowcsshost';
46
+ const _polyfillSlotted = '-shadowcssslotted';
47
+ // note: :host-context pre-processed to -shadowcsshostcontext.
48
+ const _polyfillHostContext = '-shadowcsscontext';
49
+ const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)';
50
+ const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
51
+ const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
52
+ const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
53
+ const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
54
+ const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
55
+ const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
56
+ const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
57
+ const _polyfillHostRe = /-shadowcsshost/gim;
58
+ const _colonHostRe = /:host/gim;
59
+ const _colonSlottedRe = /::slotted/gim;
60
+ const _colonHostContextRe = /:host-context/gim;
61
+ const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
62
+ const stripComments = (input) => {
63
+ return input.replace(_commentRe, '');
64
+ };
65
+ const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
66
+ const extractCommentsWithHash = (input) => {
67
+ return input.match(_commentWithHashRe) || [];
68
+ };
69
+ const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
70
+ const _curlyRe = /([{}])/g;
71
+ const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
72
+ const OPEN_CURLY = '{';
73
+ const CLOSE_CURLY = '}';
74
+ const BLOCK_PLACEHOLDER = '%BLOCK%';
75
+ const processRules = (input, ruleCallback) => {
76
+ const inputWithEscapedBlocks = escapeBlocks(input);
77
+ let nextBlockIndex = 0;
78
+ return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
79
+ const selector = m[2];
80
+ let content = '';
81
+ let suffix = m[4];
82
+ let contentPrefix = '';
83
+ if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
84
+ content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
85
+ suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
86
+ contentPrefix = '{';
87
+ }
88
+ const cssRule = {
89
+ selector,
90
+ content,
91
+ };
92
+ const rule = ruleCallback(cssRule);
93
+ return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
94
+ });
95
+ };
96
+ const escapeBlocks = (input) => {
97
+ const inputParts = input.split(_curlyRe);
98
+ const resultParts = [];
99
+ const escapedBlocks = [];
100
+ let bracketCount = 0;
101
+ let currentBlockParts = [];
102
+ for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
103
+ const part = inputParts[partIndex];
104
+ if (part === CLOSE_CURLY) {
105
+ bracketCount--;
106
+ }
107
+ if (bracketCount > 0) {
108
+ currentBlockParts.push(part);
109
+ }
110
+ else {
111
+ if (currentBlockParts.length > 0) {
112
+ escapedBlocks.push(currentBlockParts.join(''));
113
+ resultParts.push(BLOCK_PLACEHOLDER);
114
+ currentBlockParts = [];
115
+ }
116
+ resultParts.push(part);
117
+ }
118
+ if (part === OPEN_CURLY) {
119
+ bracketCount++;
120
+ }
121
+ }
122
+ if (currentBlockParts.length > 0) {
123
+ escapedBlocks.push(currentBlockParts.join(''));
124
+ resultParts.push(BLOCK_PLACEHOLDER);
125
+ }
126
+ const strEscapedBlocks = {
127
+ escapedString: resultParts.join(''),
128
+ blocks: escapedBlocks,
129
+ };
130
+ return strEscapedBlocks;
131
+ };
132
+ const insertPolyfillHostInCssText = (selector) => {
133
+ selector = selector
134
+ .replace(_colonHostContextRe, _polyfillHostContext)
135
+ .replace(_colonHostRe, _polyfillHost)
136
+ .replace(_colonSlottedRe, _polyfillSlotted);
137
+ return selector;
138
+ };
139
+ const convertColonRule = (cssText, regExp, partReplacer) => {
140
+ // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
141
+ return cssText.replace(regExp, (...m) => {
142
+ if (m[2]) {
143
+ const parts = m[2].split(',');
144
+ const r = [];
145
+ for (let i = 0; i < parts.length; i++) {
146
+ const p = parts[i].trim();
147
+ if (!p)
148
+ break;
149
+ r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
150
+ }
151
+ return r.join(',');
152
+ }
153
+ else {
154
+ return _polyfillHostNoCombinator + m[3];
155
+ }
156
+ });
157
+ };
158
+ const colonHostPartReplacer = (host, part, suffix) => {
159
+ return host + part.replace(_polyfillHost, '') + suffix;
160
+ };
161
+ const convertColonHost = (cssText) => {
162
+ return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
163
+ };
164
+ const colonHostContextPartReplacer = (host, part, suffix) => {
165
+ if (part.indexOf(_polyfillHost) > -1) {
166
+ return colonHostPartReplacer(host, part, suffix);
167
+ }
168
+ else {
169
+ return host + part + suffix + ', ' + part + ' ' + host + suffix;
170
+ }
171
+ };
172
+ const convertColonSlotted = (cssText, slotScopeId) => {
173
+ const slotClass = '.' + slotScopeId + ' > ';
174
+ const selectors = [];
175
+ cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
176
+ if (m[2]) {
177
+ const compound = m[2].trim();
178
+ const suffix = m[3];
179
+ const slottedSelector = slotClass + compound + suffix;
180
+ let prefixSelector = '';
181
+ for (let i = m[4] - 1; i >= 0; i--) {
182
+ const char = m[5][i];
183
+ if (char === '}' || char === ',') {
184
+ break;
185
+ }
186
+ prefixSelector = char + prefixSelector;
187
+ }
188
+ const orgSelector = prefixSelector + slottedSelector;
189
+ const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
190
+ if (orgSelector.trim() !== addedSelector.trim()) {
191
+ const updatedSelector = `${addedSelector}, ${orgSelector}`;
192
+ selectors.push({
193
+ orgSelector,
194
+ updatedSelector,
195
+ });
196
+ }
197
+ return slottedSelector;
198
+ }
199
+ else {
200
+ return _polyfillHostNoCombinator + m[3];
201
+ }
202
+ });
203
+ return {
204
+ selectors,
205
+ cssText,
206
+ };
207
+ };
208
+ const convertColonHostContext = (cssText) => {
209
+ return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
210
+ };
211
+ const convertShadowDOMSelectors = (cssText) => {
212
+ return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
213
+ };
214
+ const makeScopeMatcher = (scopeSelector) => {
215
+ const lre = /\[/g;
216
+ const rre = /\]/g;
217
+ scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
218
+ return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
219
+ };
220
+ const selectorNeedsScoping = (selector, scopeSelector) => {
221
+ const re = makeScopeMatcher(scopeSelector);
222
+ return !re.test(selector);
223
+ };
224
+ const injectScopingSelector = (selector, scopingSelector) => {
225
+ return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => {
226
+ return before + scopingSelector + colon + after;
227
+ });
228
+ };
229
+ const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
230
+ // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
231
+ _polyfillHostRe.lastIndex = 0;
232
+ if (_polyfillHostRe.test(selector)) {
233
+ const replaceBy = `.${hostSelector}`;
234
+ return selector
235
+ .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy))
236
+ .replace(_polyfillHostRe, replaceBy + ' ');
237
+ }
238
+ return scopeSelector + ' ' + selector;
239
+ };
240
+ const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
241
+ const isRe = /\[is=([^\]]*)\]/g;
242
+ scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
243
+ const className = '.' + scopeSelector;
244
+ const _scopeSelectorPart = (p) => {
245
+ let scopedP = p.trim();
246
+ if (!scopedP) {
247
+ return '';
248
+ }
249
+ if (p.indexOf(_polyfillHostNoCombinator) > -1) {
250
+ scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
251
+ }
252
+ else {
253
+ // remove :host since it should be unnecessary
254
+ const t = p.replace(_polyfillHostRe, '');
255
+ if (t.length > 0) {
256
+ scopedP = injectScopingSelector(t, className);
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
+ exports.scopeCss = scopeCss;