@ppg_pl/pallete 0.0.2 → 0.0.4

package/www/build/pallete.css

@@ -1 +1,3 @@
-html{font-size:62.5%}body{font-size:1.5rem}*{font-family:"Galatea", sans-serif}
+.pallete-wrapper * {
+  font-family: "Galatea", sans-serif;
+}

package/www/build/pallete.esm.js

@@ -1 +1,129 @@
-import{p as o,b as e}from"./p-562ae52f.js";(()=>{const e=import.meta.url,r={};return""!==e&&(r.resourcesUrl=new URL(".",e).href),o(r)})().then((o=>e([["p-e260bfb9",[[2,"my-component",{shop:[1],product:[1],show:[32],open:[64]},[[0,"close","closeModalHandler"]]],[0,"my-modal",{shop:[1],product:[1],closeImage:[1,"close-image"],arrowDown:[1,"arrow-down"],chunksNum:[32],data:[32],preloader:[32],loading:[32],colors:[32],currentColor:[32],currentIndex:[32],infoBoxWidth:[32],boxWidth:[32],padding:[32],isMobile:[32],showRange:[32],colorCategories:[32],selectedCategory:[32],page:[32],open:[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]],[0,"my-backdrop"],[0,"my-colorinfo",{currentColor:[16],shop:[1],product:[1],data:[16],isMobile:[4,"is-mobile"],infoBoxWidth:[2,"info-box-width"],closeImage:[1,"close-image"]}],[0,"my-colorbox",{color:[1],name:[1],shop:[1],product:[1],isActive:[4,"is-active"],isCategoryActive:[4,"is-category-active"]}],[0,"my-loader"],[2,"my-search",{productId:[2,"product-id"],isMobile:[4,"is-mobile"],searchIcon:[1,"search-icon"],searchText:[32]}],[0,"my-slider",{slides:[16],shop:[1],product:[1],color:[1]}]]]],o)));
+import { B as BUILD, c as consoleDevInfo, p as plt, w as win, H, d as doc, N as NAMESPACE, a as promiseResolve, b as bootstrapLazy } from './index-1ac7471e.js';
+import { g as globalScripts } from './app-globals-0f993ce5.js';
+
+/*
+ Stencil Client Patch Browser v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+const getDynamicImportFunction = (namespace) => `__sc_import_${namespace.replace(/\s|-/g, '_')}`;
+const patchBrowser = () => {
+    // NOTE!! This fn cannot use async/await!
+    if (BUILD.isDev && !BUILD.isTesting) {
+        consoleDevInfo('Running in development mode.');
+    }
+    if (BUILD.cssVarShim) {
+        // shim css vars
+        plt.$cssShim$ = win.__cssshim;
+    }
+    if (BUILD.cloneNodeFix) {
+        // opted-in to polyfill cloneNode() for slot polyfilled components
+        patchCloneNodeFix(H.prototype);
+    }
+    if (BUILD.profile && !performance.mark) {
+        // not all browsers support performance.mark/measure (Safari 10)
+        // because the mark/measure APIs are designed to write entries to a buffer in the browser that does not exist,
+        // simply stub the implementations out.
+        // TODO(STENCIL-323): Remove this patch when support for older browsers is removed (breaking)
+        // @ts-ignore
+        performance.mark = performance.measure = () => {
+            /*noop*/
+        };
+        performance.getEntriesByName = () => [];
+    }
+    // @ts-ignore
+    const scriptElm = BUILD.scriptDataOpts || BUILD.safari10 || BUILD.dynamicImportShim
+        ? Array.from(doc.querySelectorAll('script')).find((s) => new RegExp(`\/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) ||
+            s.getAttribute('data-stencil-namespace') === NAMESPACE)
+        : null;
+    const importMeta = import.meta.url;
+    const opts = BUILD.scriptDataOpts ? scriptElm['data-opts'] || {} : {};
+    if (BUILD.safari10 && 'onbeforeload' in scriptElm && !history.scrollRestoration /* IS_ESM_BUILD */) {
+        // Safari < v11 support: This IF is true if it's Safari below v11.
+        // This fn cannot use async/await since Safari didn't support it until v11,
+        // however, Safari 10 did support modules. Safari 10 also didn't support "nomodule",
+        // so both the ESM file and nomodule file would get downloaded. Only Safari
+        // has 'onbeforeload' in the script, and "history.scrollRestoration" was added
+        // to Safari in v11. Return a noop then() so the async/await ESM code doesn't continue.
+        // IS_ESM_BUILD is replaced at build time so this check doesn't happen in systemjs builds.
+        return {
+            then() {
+                /* promise noop */
+            },
+        };
+    }
+    if (!BUILD.safari10 && importMeta !== '') {
+        opts.resourcesUrl = new URL('.', importMeta).href;
+    }
+    else if (BUILD.dynamicImportShim || BUILD.safari10) {
+        opts.resourcesUrl = new URL('.', new URL(scriptElm.getAttribute('data-resources-url') || scriptElm.src, win.location.href)).href;
+        if (BUILD.dynamicImportShim) {
+            patchDynamicImport(opts.resourcesUrl, scriptElm);
+        }
+        if (BUILD.dynamicImportShim && !win.customElements) {
+            // module support, but no custom elements support (Old Edge)
+            // @ts-ignore
+            return import(/* webpackChunkName: "polyfills-dom" */ './dom-4eeb3fee.js').then(() => opts);
+        }
+    }
+    return promiseResolve(opts);
+};
+const patchDynamicImport = (base, orgScriptElm) => {
+    const importFunctionName = getDynamicImportFunction(NAMESPACE);
+    try {
+        // test if this browser supports dynamic imports
+        // There is a caching issue in V8, that breaks using import() in Function
+        // By generating a random string, we can workaround it
+        // Check https://bugs.chromium.org/p/chromium/issues/detail?id=990810 for more info
+        win[importFunctionName] = new Function('w', `return import(w);//${Math.random()}`);
+    }
+    catch (e) {
+        // this shim is specifically for browsers that do support "esm" imports
+        // however, they do NOT support "dynamic" imports
+        // basically this code is for old Edge, v18 and below
+        const moduleMap = new Map();
+        win[importFunctionName] = (src) => {
+            const url = new URL(src, base).href;
+            let mod = moduleMap.get(url);
+            if (!mod) {
+                const script = doc.createElement('script');
+                script.type = 'module';
+                script.crossOrigin = orgScriptElm.crossOrigin;
+                script.src = URL.createObjectURL(new Blob([`import * as m from '${url}'; window.${importFunctionName}.m = m;`], {
+                    type: 'application/javascript',
+                }));
+                mod = new Promise((resolve) => {
+                    script.onload = () => {
+                        resolve(win[importFunctionName].m);
+                        script.remove();
+                    };
+                });
+                moduleMap.set(url, mod);
+                doc.head.appendChild(script);
+            }
+            return mod;
+        };
+    }
+};
+const patchCloneNodeFix = (HTMLElementPrototype) => {
+    const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
+    HTMLElementPrototype.cloneNode = function (deep) {
+        if (this.nodeName === 'TEMPLATE') {
+            return nativeCloneNodeFn.call(this, deep);
+        }
+        const clonedNode = nativeCloneNodeFn.call(this, false);
+        const srcChildNodes = this.childNodes;
+        if (deep) {
+            for (let i = 0; i < srcChildNodes.length; i++) {
+                // Node.ATTRIBUTE_NODE === 2, and checking because IE11
+                if (srcChildNodes[i].nodeType !== 2) {
+                    clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
+                }
+            }
+        }
+        return clonedNode;
+    };
+};
+
+patchBrowser().then(options => {
+  globalScripts();
+  return bootstrapLazy([["my-colorinfo",[[0,"my-colorinfo",{"currentColor":[16],"shop":[1],"product":[1],"data":[16],"isMobile":[4,"is-mobile"],"infoBoxWidth":[2,"info-box-width"],"closeImage":[1,"close-image"]}]]],["my-colorbox",[[0,"my-colorbox",{"color":[1],"name":[1],"shop":[1],"product":[1],"isActive":[4,"is-active"],"isCategoryActive":[4,"is-category-active"]}]]],["my-loader",[[2,"my-loader"]]],["my-search",[[2,"my-search",{"productId":[2,"product-id"],"isMobile":[4,"is-mobile"],"searchIcon":[1,"search-icon"],"searchText":[32]}]]],["my-modal",[[0,"my-modal",{"shop":[1],"product":[1],"closeImage":[1,"close-image"],"arrowDown":[1,"arrow-down"],"chunksNum":[32],"data":[32],"preloader":[32],"loading":[32],"colors":[32],"currentColor":[32],"currentIndex":[32],"infoBoxWidth":[32],"boxWidth":[32],"padding":[32],"isMobile":[32],"showRange":[32],"colorCategories":[32],"selectedCategory":[32],"page":[32],"open":[64]},[[0,"closeInfoBox","closeInfoBoxHandler"],[9,"resize","handleResize"],[0,"searchColors","searchColorsHandler"]]]]],["my-backdrop",[[0,"my-backdrop"]]],["my-slider",[[0,"my-slider",{"slides":[16],"shop":[1],"product":[1],"color":[1]}]]],["my-component",[[2,"my-component",{"shop":[1],"product":[1],"show":[32],"open":[64]},[[0,"close","closeModalHandler"]]]]]], options);
+});

package/www/build/shadow-css-02866686.js

@@ -0,0 +1,387 @@
+/*
+ Stencil Client Platform v2.17.0 | MIT Licensed | https://stenciljs.com
+ */
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+const safeSelector = (selector) => {
+    const placeholders = [];
+    let index = 0;
+    // Replaces attribute selectors with placeholders.
+    // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
+    selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+        const replaceBy = `__ph-${index}__`;
+        placeholders.push(keep);
+        index++;
+        return replaceBy;
+    });
+    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
+    // WS and "+" would otherwise be interpreted as selector separators.
+    const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+        const replaceBy = `__ph-${index}__`;
+        placeholders.push(exp);
+        index++;
+        return pseudo + replaceBy;
+    });
+    const ss = {
+        content,
+        placeholders,
+    };
+    return ss;
+};
+const restoreSafeSelector = (placeholders, content) => {
+    return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
+};
+const _polyfillHost = '-shadowcsshost';
+const _polyfillSlotted = '-shadowcssslotted';
+// note: :host-context pre-processed to -shadowcsshostcontext.
+const _polyfillHostContext = '-shadowcsscontext';
+const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)';
+const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
+const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
+const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
+const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
+const _polyfillHostRe = /-shadowcsshost/gim;
+const _colonHostRe = /:host/gim;
+const _colonSlottedRe = /::slotted/gim;
+const _colonHostContextRe = /:host-context/gim;
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+const stripComments = (input) => {
+    return input.replace(_commentRe, '');
+};
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+const extractCommentsWithHash = (input) => {
+    return input.match(_commentWithHashRe) || [];
+};
+const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/;
+const OPEN_CURLY = '{';
+const CLOSE_CURLY = '}';
+const BLOCK_PLACEHOLDER = '%BLOCK%';
+const processRules = (input, ruleCallback) => {
+    const inputWithEscapedBlocks = escapeBlocks(input);
+    let nextBlockIndex = 0;
+    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
+        const selector = m[2];
+        let content = '';
+        let suffix = m[4];
+        let contentPrefix = '';
+        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
+            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+            contentPrefix = '{';
+        }
+        const cssRule = {
+            selector,
+            content,
+        };
+        const rule = ruleCallback(cssRule);
+        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+    });
+};
+const escapeBlocks = (input) => {
+    const inputParts = input.split(_curlyRe);
+    const resultParts = [];
+    const escapedBlocks = [];
+    let bracketCount = 0;
+    let currentBlockParts = [];
+    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+        const part = inputParts[partIndex];
+        if (part === CLOSE_CURLY) {
+            bracketCount--;
+        }
+        if (bracketCount > 0) {
+            currentBlockParts.push(part);
+        }
+        else {
+            if (currentBlockParts.length > 0) {
+                escapedBlocks.push(currentBlockParts.join(''));
+                resultParts.push(BLOCK_PLACEHOLDER);
+                currentBlockParts = [];
+            }
+            resultParts.push(part);
+        }
+        if (part === OPEN_CURLY) {
+            bracketCount++;
+        }
+    }
+    if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(''));
+        resultParts.push(BLOCK_PLACEHOLDER);
+    }
+    const strEscapedBlocks = {
+        escapedString: resultParts.join(''),
+        blocks: escapedBlocks,
+    };
+    return strEscapedBlocks;
+};
+const insertPolyfillHostInCssText = (selector) => {
+    selector = selector
+        .replace(_colonHostContextRe, _polyfillHostContext)
+        .replace(_colonHostRe, _polyfillHost)
+        .replace(_colonSlottedRe, _polyfillSlotted);
+    return selector;
+};
+const convertColonRule = (cssText, regExp, partReplacer) => {
+    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
+    return cssText.replace(regExp, (...m) => {
+        if (m[2]) {
+            const parts = m[2].split(',');
+            const r = [];
+            for (let i = 0; i < parts.length; i++) {
+                const p = parts[i].trim();
+                if (!p)
+                    break;
+                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+            }
+            return r.join(',');
+        }
+        else {
+            return _polyfillHostNoCombinator + m[3];
+        }
+    });
+};
+const colonHostPartReplacer = (host, part, suffix) => {
+    return host + part.replace(_polyfillHost, '') + suffix;
+};
+const convertColonHost = (cssText) => {
+    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
+};
+const colonHostContextPartReplacer = (host, part, suffix) => {
+    if (part.indexOf(_polyfillHost) > -1) {
+        return colonHostPartReplacer(host, part, suffix);
+    }
+    else {
+        return host + part + suffix + ', ' + part + ' ' + host + suffix;
+    }
+};
+const convertColonSlotted = (cssText, slotScopeId) => {
+    const slotClass = '.' + slotScopeId + ' > ';
+    const selectors = [];
+    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
+        if (m[2]) {
+            const compound = m[2].trim();
+            const suffix = m[3];
+            const slottedSelector = slotClass + compound + suffix;
+            let prefixSelector = '';
+            for (let i = m[4] - 1; i >= 0; i--) {
+                const char = m[5][i];
+                if (char === '}' || char === ',') {
+                    break;
+                }
+                prefixSelector = char + prefixSelector;
+            }
+            const orgSelector = prefixSelector + slottedSelector;
+            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
+            if (orgSelector.trim() !== addedSelector.trim()) {
+                const updatedSelector = `${addedSelector}, ${orgSelector}`;
+                selectors.push({
+                    orgSelector,
+                    updatedSelector,
+                });
+            }
+            return slottedSelector;
+        }
+        else {
+            return _polyfillHostNoCombinator + m[3];
+        }
+    });
+    return {
+        selectors,
+        cssText,
+    };
+};
+const convertColonHostContext = (cssText) => {
+    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
+};
+const convertShadowDOMSelectors = (cssText) => {
+    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
+};
+const makeScopeMatcher = (scopeSelector) => {
+    const lre = /\[/g;
+    const rre = /\]/g;
+    scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
+    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
+};
+const selectorNeedsScoping = (selector, scopeSelector) => {
+    const re = makeScopeMatcher(scopeSelector);
+    return !re.test(selector);
+};
+const injectScopingSelector = (selector, scopingSelector) => {
+    return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => {
+        return before + scopingSelector + colon + after;
+    });
+};
+const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
+    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
+    _polyfillHostRe.lastIndex = 0;
+    if (_polyfillHostRe.test(selector)) {
+        const replaceBy = `.${hostSelector}`;
+        return selector
+            .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy))
+            .replace(_polyfillHostRe, replaceBy + ' ');
+    }
+    return scopeSelector + ' ' + selector;
+};
+const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
+    const isRe = /\[is=([^\]]*)\]/g;
+    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
+    const className = '.' + scopeSelector;
+    const _scopeSelectorPart = (p) => {
+        let scopedP = p.trim();
+        if (!scopedP) {
+            return '';
+        }
+        if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
+        }
+        else {
+            // remove :host since it should be unnecessary
+            const t = p.replace(_polyfillHostRe, '');
+            if (t.length > 0) {
+                scopedP = injectScopingSelector(t, className);
+            }
+        }
+        return scopedP;
+    };
+    const safeContent = safeSelector(selector);
+    selector = safeContent.content;
+    let scopedSelector = '';
+    let startIndex = 0;
+    let res;
+    const sep = /( |>|\+|~(?!=))\s*/g;
+    // If a selector appears before :host it should not be shimmed as it
+    // matches on ancestor elements and not on elements in the host's shadow
+    // `:host-context(div)` is transformed to
+    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
+    // the `div` is not part of the component in the 2nd selectors and should not be scoped.
+    // Historically `component-tag:host` was matching the component so we also want to preserve
+    // this behavior to avoid breaking legacy apps (it should not match).
+    // The behavior should be:
+    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
+    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
+    //   `:host-context(tag)`)
+    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
+    let shouldScope = !hasHost;
+    while ((res = sep.exec(selector)) !== null) {
+        const separator = res[1];
+        const part = selector.slice(startIndex, res.index).trim();
+        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+        scopedSelector += `${scopedPart} ${separator} `;
+        startIndex = sep.lastIndex;
+    }
+    const part = selector.substring(startIndex);
+    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+    // replace the placeholders with their original values
+    return restoreSafeSelector(safeContent.placeholders, scopedSelector);
+};
+const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
+    return selector
+        .split(',')
+        .map((shallowPart) => {
+        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
+            return shallowPart.trim();
+        }
+        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
+            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
+        }
+        else {
+            return shallowPart.trim();
+        }
+    })
+        .join(', ');
+};
+const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
+    return processRules(cssText, (rule) => {
+        let selector = rule.selector;
+        let content = rule.content;
+        if (rule.selector[0] !== '@') {
+            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
+        }
+        else if (rule.selector.startsWith('@media') ||
+            rule.selector.startsWith('@supports') ||
+            rule.selector.startsWith('@page') ||
+            rule.selector.startsWith('@document')) {
+            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
+        }
+        const cssRule = {
+            selector: selector.replace(/\s{2,}/g, ' ').trim(),
+            content,
+        };
+        return cssRule;
+    });
+};
+const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
+    cssText = insertPolyfillHostInCssText(cssText);
+    cssText = convertColonHost(cssText);
+    cssText = convertColonHostContext(cssText);
+    const slotted = convertColonSlotted(cssText, slotScopeId);
+    cssText = slotted.cssText;
+    cssText = convertShadowDOMSelectors(cssText);
+    if (scopeId) {
+        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
+    }
+    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+    cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
+    return {
+        cssText: cssText.trim(),
+        slottedSelectors: slotted.selectors,
+    };
+};
+const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
+    const hostScopeId = scopeId + '-h';
+    const slotScopeId = scopeId + '-s';
+    const commentsWithHash = extractCommentsWithHash(cssText);
+    cssText = stripComments(cssText);
+    const orgSelectors = [];
+    if (commentOriginalSelector) {
+        const processCommentedSelector = (rule) => {
+            const placeholder = `/*!@___${orgSelectors.length}___*/`;
+            const comment = `/*!@${rule.selector}*/`;
+            orgSelectors.push({ placeholder, comment });
+            rule.selector = placeholder + rule.selector;
+            return rule;
+        };
+        cssText = processRules(cssText, (rule) => {
+            if (rule.selector[0] !== '@') {
+                return processCommentedSelector(rule);
+            }
+            else if (rule.selector.startsWith('@media') ||
+                rule.selector.startsWith('@supports') ||
+                rule.selector.startsWith('@page') ||
+                rule.selector.startsWith('@document')) {
+                rule.content = processRules(rule.content, processCommentedSelector);
+                return rule;
+            }
+            return rule;
+        });
+    }
+    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
+    cssText = [scoped.cssText, ...commentsWithHash].join('\n');
+    if (commentOriginalSelector) {
+        orgSelectors.forEach(({ placeholder, comment }) => {
+            cssText = cssText.replace(placeholder, comment);
+        });
+    }
+    scoped.slottedSelectors.forEach((slottedSelector) => {
+        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);
+    });
+    return cssText;
+};
+
+export { scopeCss };

package/www/index.html

@@ -4,7 +4,36 @@
           url(./assets/fonts/Galatea-Regular.ttf) format('truetype'), url(./assets/fonts/Galatea-Regular.eot) format('embedded-opentype');
         font-weight: 400;
         font-style: normal;
-      }</style> <link rel="modulepreload" href="/build/p-ef55983a.js"><script type="module" src="/build/p-ef55983a.js" data-stencil data-resources-url="/build/" data-stencil-namespace="pallete"></script> <script nomodule="" src="/build/pallete.js" data-stencil></script> </head> <body> <!-- shop="DEKORAL" product="Dekoral Łazienka & Kuchnia" --> <my-component class="modal_pallete"></my-component> <label for="shop">Shop</label> <input name="shop" type="shop"> <label for="product">Product</label><input name="product" type="product"> <button>open modal</button> <script>
+      }</style> <script type="module" src="/build/pallete.esm.js" data-stencil></script> <script nomodule="" src="/build/pallete.js" data-stencil></script> </head> <body> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea sunt expedita, placeat distinctio quasi et deleniti ex aperiam, excepturi soluta voluptates eveniet impedit
+      corrupti a illum accusamus quo, consequuntur dignissimos aliquid. Quisquam voluptatem ipsam dolor non recusandae accusantium asperiores aliquam minus placeat, illum error
+      totam eum beatae atque commodi nisi quis veniam repellat culpa corrupti, impedit, dolore soluta? Mollitia iure vero nihil rerum aperiam, debitis enim illum magnam itaque ex
+      voluptas minus! Placeat adipisci beatae ex ab dolores dolore ratione, porro quasi itaque quos pariatur! Asperiores, sunt nemo recusandae incidunt aliquid nobis assumenda
+      ducimus dignissimos, amet, necessitatibus inventore at veniam tempore mollitia earum eligendi perspiciatis obcaecati. Mollitia, porro? Earum quaerat ad vitae? Dolore
+      voluptates officia corporis eos? Numquam qui sint itaque hic architecto a harum laborum quae doloremque earum, magni deleniti rerum illum sequi facilis fugit doloribus quo
+      iusto iure officia cumque minus ratione! Omnis facilis amet ipsam atque laudantium, nam debitis non, ducimus sint tempora, quae exercitationem ratione quasi nemo illo
+      recusandae! Minima reprehenderit odit, iure nisi quibusdam beatae molestiae ullam doloribus rerum, libero a amet ratione exercitationem cumque dolorem, inventore assumenda
+      error. Iste quod, aut consectetur vero ad voluptas voluptatibus molestias! Laudantium, dolore voluptas? Tempora, ratione veniam! </div> <!-- shop="DEKORAL" product="Dekoral Łazienka & Kuchnia" --> <my-component class="modal_pallete"></my-component> <label for="shop">Shop</label> <input name="shop" type="shop"> <label for="product">Product</label><input name="product" type="product"> <button>open modal</button> <div> Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quisquam repellendus culpa placeat cupiditate sequi. Cum ducimus soluta, iste culpa quis expedita fuga
+      dignissimos officia commodi eveniet laudantium ipsum, nobis asperiores beatae quae similique. Nulla nobis, exercitationem mollitia minus maxime commodi quas tempore, itaque
+      nam quidem ea excepturi reiciendis dolor temporibus, adipisci praesentium illo perspiciatis. Quibusdam modi adipisci, illo asperiores vel natus nihil ipsum earum minima
+      repellendus. Nam quam tempore aut voluptates, in doloremque officiis eius est. Voluptates facilis ex repellendus omnis officiis molestias nostrum quis reiciendis voluptate
+      quidem ullam quos, libero officia ducimus praesentium dicta vitae ea consequatur quam, nulla deserunt doloribus. Mollitia cum tenetur ea in ab nobis numquam suscipit
+      dignissimos cumque, totam velit obcaecati. Provident iste corrupti, culpa qui quibusdam illo commodi aliquam ea ipsum porro velit vel non expedita blanditiis temporibus, vero
+      quasi voluptatem ex aut dicta id iusto eos. Corporis nobis neque temporibus, ducimus dolorum laborum, suscipit, sed exercitationem perspiciatis facere nihil aspernatur? Sunt
+      hic optio maxime iusto, consequatur iure at voluptatum, sit voluptatibus quos facilis! In exercitationem quod nisi impedit quo quia neque earum assumenda nesciunt aliquam
+      suscipit id ipsa eaque repudiandae tempora, recusandae reprehenderit. Recusandae, cum enim, impedit, aliquid ex placeat modi ipsa quo eum eveniet blanditiis itaque.
+      Voluptatibus quo distinctio non voluptatum officiis voluptates tempora illo. Deserunt excepturi numquam non possimus, quos distinctio saepe velit quas tempora. Ipsa totam
+      magnam praesentium mollitia? Placeat distinctio dignissimos eius expedita nulla optio aliquam laudantium. Aliquid autem reprehenderit obcaecati eveniet animi soluta odio,
+      saepe ad quia iste accusamus doloremque quae nihil repellat quaerat dolore maiores fuga eligendi facilis aperiam nisi rerum! Architecto nesciunt iure, quo laboriosam qui
+      dolor voluptate velit cupiditate ullam ab esse, consequuntur alias aliquam voluptas soluta reiciendis quis libero, beatae iste. Veritatis doloremque totam, culpa nobis magni
+      at deserunt necessitatibus ab ea deleniti temporibus quidem aspernatur facere facilis eum debitis nisi vero libero nemo, minima quam! Suscipit debitis eos corporis! Excepturi
+      nesciunt ratione nostrum libero, quo consectetur nihil accusantium aliquid corporis voluptate eum doloribus, quaerat ea. Ducimus suscipit laborum molestias, excepturi dolor
+      expedita placeat. Accusantium eius iusto facilis suscipit distinctio quod? Beatae porro quasi magni impedit dolorum laudantium provident, eos quaerat sint ducimus, ipsam illo
+      nostrum, autem earum consequatur voluptas ad natus harum sapiente ea! Recusandae laboriosam assumenda non. Iste soluta, quod magni recusandae quas similique iure iusto amet
+      deserunt eaque quo quasi, temporibus, illo ex consectetur! Iure consequuntur, commodi officiis iste sed error velit provident dolorem! Aperiam adipisci, dolorum quis earum
+      distinctio porro veniam natus consectetur nam, ad, voluptate ducimus harum quam incidunt omnis dolor doloribus laboriosam tenetur culpa quia odio quae facilis! Sit nesciunt
+      qui, deserunt, necessitatibus cum porro velit similique eius doloribus iusto tempora quaerat distinctio consectetur obcaecati quo, dolorum non aperiam vel expedita
+      repudiandae neque! Maxime facere eum quasi amet facilis sapiente numquam quam explicabo! Fugit doloribus cum amet excepturi distinctio totam recusandae autem porro qui quia
+      eligendi eos beatae, quis possimus sint iure unde! Tempora ullam voluptas sapiente beatae nemo placeat, necessitatibus veritatis odit sint mollitia sequi reiciendis? </div> <div class="buy-tester-category power-section"> <div class="container"> <h2>Potrzebujesz więcej czasu na decyzję?</h2> <h3>Zamów wzornik Moc Koloru, porównuj kolory do woli i&nbsp;wybierz swój wymarzony odcień</h3> <h4>MOC KOLORU - wzornik kolorów</h4> <div class="power"> <img src="/wachlarz.png" alt="Moc koloru"> <div class="power-info"> <div class="quantity"> <input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"> <div class="plus"></div> <div class="minus"></div> </div> <div class="quantity-info"> <p><strong>Cena:</strong> <br>19,99 zł (z VAT)</p> </div> <input type="hidden" name="product_id" value="609"> <button type="button" id="button-cart" data-loading-text="Ładowanie..." class="btn btn-primary btn-lg btn-block btn-default" data-price="19.99" data-id="609" data-category="wzornik koloru" data-name="Moc Koloru"> <img src="/basket.svg" alt="dodaj do koszyka">Dodaj do koszyka </button> </div> </div> </div> </div> <div class="buy-tester-category power-section"> <div class="container"> <h2>Potrzebujesz więcej czasu na decyzję?</h2> <h3>Zamów wzornik Moc Koloru, porównuj kolory do woli i&nbsp;wybierz swój wymarzony odcień</h3> <h4>MOC KOLORU - wzornik kolorów</h4> <div class="power"> <img src="/wachlarz.png" alt="Moc koloru"> <div class="power-info"> <div class="quantity"> <input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"> <div class="plus"></div> <div class="minus"></div> </div> <div class="quantity-info"> <p><strong>Cena:</strong> <br>19,99 zł (z VAT)</p> </div> <input type="hidden" name="product_id" value="609"> <button type="button" id="button-cart" data-loading-text="Ładowanie..." class="btn btn-primary btn-lg btn-block btn-default" data-price="19.99" data-id="609" data-category="wzornik koloru" data-name="Moc Koloru"> <img src="/basket.svg" alt="dodaj do koszyka">Dodaj do koszyka </button> </div> </div> </div> </div> <div class="buy-tester-category power-section"> <div class="container"> <h2>Potrzebujesz więcej czasu na decyzję?</h2> <h3>Zamów wzornik Moc Koloru, porównuj kolory do woli i&nbsp;wybierz swój wymarzony odcień</h3> <h4>MOC KOLORU - wzornik kolorów</h4> <div class="power"> <img src="/wachlarz.png" alt="Moc koloru"> <div class="power-info"> <div class="quantity"> <input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"> <div class="plus"></div> <div class="minus"></div> </div> <div class="quantity-info"> <p><strong>Cena:</strong> <br>19,99 zł (z VAT)</p> </div> <input type="hidden" name="product_id" value="609"> <button type="button" id="button-cart" data-loading-text="Ładowanie..." class="btn btn-primary btn-lg btn-block btn-default" data-price="19.99" data-id="609" data-category="wzornik koloru" data-name="Moc Koloru"> <img src="/basket.svg" alt="dodaj do koszyka">Dodaj do koszyka </button> </div> </div> </div> </div> <div class="buy-tester-category power-section"> <div class="container"> <h2>Potrzebujesz więcej czasu na decyzję?</h2> <h3>Zamów wzornik Moc Koloru, porównuj kolory do woli i&nbsp;wybierz swój wymarzony odcień</h3> <h4>MOC KOLORU - wzornik kolorów</h4> <div class="power"> <img src="/wachlarz.png" alt="Moc koloru"> <div class="power-info"> <div class="quantity"> <input type="text" name="quantity" value="1" size="2" id="input-quantity" class="form-control"> <div class="plus"></div> <div class="minus"></div> </div> <div class="quantity-info"> <p><strong>Cena:</strong> <br>19,99 zł (z VAT)</p> </div> <input type="hidden" name="product_id" value="609"> <button type="button" id="button-cart" data-loading-text="Ładowanie..." class="btn btn-primary btn-lg btn-block btn-default" data-price="19.99" data-id="609" data-category="wzornik koloru" data-name="Moc Koloru"> <img src="/basket.svg" alt="dodaj do koszyka">Dodaj do koszyka </button> </div> </div> </div> </div> <script>
       const btn = document.querySelector('button');
       const modal = document.querySelector('.modal_pallete');
       const shop = document.querySelector('input[name="shop"]');
@@ -19,4 +48,13 @@
           modal.open();
         }
       });
-    </script> </body></html>
+    </script> <script>
+if ('serviceWorker' in navigator && location.protocol !== 'file:') {
+  // auto-unregister service worker during dev mode
+  navigator.serviceWorker.getRegistration().then(function(registration) {
+  if (registration) {
+    registration.unregister().then(function() { location.reload(true) });
+  }
+  });
+}
+</script></body></html>