@pine-ds/core 1.3.0-dev.4 → 1.3.1

package/components/pds-icon2.js

@@ -0,0 +1,370 @@
+import { Build, proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+let missingAssetPathWarning = false;
+/**
+ *
+ * Reads the component asset path config from meta tag or a global variable.
+ * This is a temporary workaround until these issues have been addressed:
+ *
+ * https://github.com/ionic-team/stencil/issues/2826/
+ * https://github.com/ionic-team/stencil/issues/3470
+ * https://github.com/ionic-team/stencil-ds-output-targets/issues/186
+ */
+const getAssetPath = (path) => {
+    var _a;
+    const metaPineAssetPath = (_a = document.head.querySelector('meta[data-pine-asset-path]')) === null || _a === void 0 ? void 0 : _a.dataset.pineAssetPath;
+    // Get the asset path from the window object if available
+    const windowAssetPath = window.__PINE_ASSET_PATH__;
+    // Set the CDN Asset path using the latest version
+    const cdnAssetPath = 'https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/pds-icons/';
+    const assetBasePath = Build.isTesting ? '/dist/pds-icons' : metaPineAssetPath || windowAssetPath || cdnAssetPath || '/';
+    // Display a warning if the assets are fetched from the CDN.
+    if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {
+        missingAssetPathWarning = true;
+        console.warn(`
+      Fetching Pine asssets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and setting the path accordingly.\n\nFor more information you read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/resources-assets--docs
+    `);
+    }
+    let assetPath = path;
+    if (path.startsWith('./')) {
+        assetPath = path.substring(2);
+    }
+    if (!assetBasePath.endsWith('/')) {
+        assetPath = '/' + assetPath;
+    }
+    return assetBasePath + assetPath;
+};
+
+let CACHED_MAP;
+const getIconMap = () => {
+    if (typeof window === 'undefined') {
+        return new Map();
+    }
+    else {
+        if (!CACHED_MAP) {
+            const win = window; // eslint-disable-line @typescript-eslint/no-explicit-any
+            win.PdsIcons = win.PdsIcons || {};
+            CACHED_MAP = win.PdsIcons.map = win.PdsIcons.map || new Map();
+        }
+        return CACHED_MAP;
+    }
+};
+const getName = (iconName, icon) => {
+    if (!iconName && icon && !isSrc(icon)) {
+        iconName = icon;
+    }
+    if (isStr(iconName)) {
+        iconName = toLower(iconName);
+    }
+    if (!isStr(iconName) || iconName.trim() === '') {
+        return null;
+    }
+    const invalidChars = iconName.replace(/[a-z]|-|\d/gi, '');
+    if (invalidChars != '') {
+        return null;
+    }
+    return iconName;
+};
+const getNamedUrl = (iconName) => {
+    const url = getIconMap().get(iconName);
+    if (url) {
+        return url;
+    }
+    return getAssetPath(`svg/${iconName}.svg`);
+};
+const getSrc = (src) => {
+    if (isStr(src)) {
+        src = src.trim();
+        if (isSrc(src)) {
+            return src;
+        }
+    }
+    return null;
+};
+const getUrl = (pdsIcon) => {
+    let url = getSrc(pdsIcon.src);
+    if (url) {
+        return url;
+    }
+    url = getName(pdsIcon.name, pdsIcon.icon);
+    if (url) {
+        return getNamedUrl(url);
+    }
+    if (pdsIcon.icon) {
+        url = getSrc(pdsIcon.icon);
+        if (url) {
+            return url;
+        }
+    }
+    return null;
+};
+const isSrc = (str) => str.length > 0 && /(\/|\.)/.test(str);
+const isStr = (val) => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any
+const toLower = (val) => val.toLowerCase();
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+const inheritAttributes = (el, attributes = []) => {
+    const attributeObject = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+    attributes.forEach(attr => {
+        if (el.hasAttribute(attr)) {
+            const value = el.getAttribute(attr);
+            if (value !== null) {
+                attributeObject[attr] = el.getAttribute(attr);
+            }
+            el.removeAttribute(attr);
+        }
+    });
+    return attributeObject;
+};
+
+const validateContent = (svgContent) => {
+    const div = document.createElement('div');
+    div.innerHTML = svgContent;
+    // setup this way to ensure it works on our buddy IE
+    for (let i = div.childNodes.length - 1; i >= 0; i--) {
+        if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {
+            div.removeChild(div.childNodes[i]);
+        }
+    }
+    // must only have 1 root element
+    const svgElm = div.firstElementChild;
+    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {
+        const svgClass = svgElm.getAttribute('class') || '';
+        svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());
+        // root element must be an svg
+        // lets double check we've got valid elements
+        // do not allow scripts
+        if (isValid(svgElm)) {
+            return div.innerHTML;
+        }
+    }
+    return '';
+};
+const isValid = (elm) => {
+    if (elm.nodeType === 1) {
+        if (elm.nodeName.toLowerCase() === 'script') {
+            return false;
+        }
+        for (let i = 0; i < elm.attributes.length; i++) {
+            const name = elm.attributes[i].name;
+            if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {
+                return false;
+            }
+        }
+        for (let i = 0; i < elm.childNodes.length; i++) {
+            if (!isValid(elm.childNodes[i])) {
+                return false;
+            }
+        }
+    }
+    return true;
+};
+const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');
+const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;
+
+const pdsIconContent = new Map();
+const requests = new Map(); // eslint-disable-line @typescript-eslint/no-explicit-any
+let parser;
+const getSvgContent = (url, sanitize = false) => {
+    let req = requests.get(url);
+    if (!req) {
+        if (typeof fetch != 'undefined' && typeof document !== 'undefined') {
+            if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {
+                if (!parser) {
+                    parser = new DOMParser();
+                }
+                const doc = parser.parseFromString(url, 'text/html');
+                const svg = doc.querySelector('svg');
+                if (svg) {
+                    pdsIconContent.set(url, svg.outerHTML);
+                }
+                return Promise.resolve();
+            }
+            else {
+                // we don't have a request
+                req = fetch(url).then((rsp) => {
+                    if (rsp.ok) {
+                        return rsp.text().then((svgContent) => {
+                            if (svgContent && sanitize !== false) {
+                                svgContent = validateContent(svgContent);
+                            }
+                            pdsIconContent.set(url, svgContent || '');
+                        });
+                    }
+                    pdsIconContent.set(url, '');
+                });
+                requests.set(url, req);
+            }
+        }
+        else {
+            pdsIconContent.set(url, '');
+            return Promise.resolve();
+        }
+    }
+    return req;
+};
+
+const pdsIconCss = ":host{--dimension-icon-height:16px;--dimension-icon-width:16px;--color-icon-fill:currentColor;contain:strict;display:inline-block;fill:var(--color-icon-fill);height:var(--dimension-icon-height);width:var(--dimension-icon-width)}:host .pdsicon{fill:var(--color-icon-fill)}.pds-icon-fill-none{fill:none}.icon-inner,.pds-icon,svg{display:block;height:100%;width:100%}";
+const PdsIconStyle0 = pdsIconCss;
+
+const PdsIcon = /*@__PURE__*/ proxyCustomElement(class PdsIcon extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any
+        this.hasAriaHidden = () => {
+            const { el } = this;
+            return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';
+        };
+        this.ariaLabel = undefined;
+        this.isVisible = false;
+        this.svgContent = undefined;
+        this.color = undefined;
+        this.icon = undefined;
+        this.name = undefined;
+        this.size = 'regular';
+        this.src = undefined;
+    }
+    iconSize() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const sizes = {
+            small: '12px',
+            regular: '16px',
+            medium: '20px',
+            large: '24px',
+        };
+        if (sizes[this.size]) {
+            return sizes[this.size];
+        }
+        else {
+            return this.size;
+        }
+    }
+    componentDidLoad() {
+        this.setCSSVariables();
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
+        this.setCSSVariables();
+    }
+    setCSSVariables() {
+        this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());
+        this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());
+        this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');
+    }
+    connectedCallback() {
+        this.waitUntilVisible(this.el, '50px', () => {
+            this.isVisible = true;
+            this.loadIcon();
+        });
+    }
+    disconnectedCallback() {
+        if (this.io) {
+            this.io.disconnect();
+            this.io = undefined;
+        }
+    }
+    updateStyles() {
+        this.setCSSVariables();
+    }
+    loadIcon() {
+        if (Build.isBrowser && this.isVisible) {
+            const url = getUrl(this);
+            if (url) {
+                if (pdsIconContent.has(url)) {
+                    this.svgContent = pdsIconContent.get(url);
+                }
+                else {
+                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));
+                }
+            }
+        }
+        const label = getName(this.name, this.icon);
+        if (label) {
+            this.ariaLabel = label.replace(/\-/g, ' ');
+        }
+    }
+    render() {
+        const { ariaLabel, inheritedAttributes } = this;
+        return (h(Host, Object.assign({ key: '4bbc232e2530d43e8b5afefb754486d94ea6538b', "aria-label": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: "", role: "img", class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h("div", { class: "icon-inner", innerHTML: this.svgContent })) : (h("div", { class: "icon-inner" }))));
+    }
+    /*****
+     * Private Methods
+     ****/
+    waitUntilVisible(el, rootMargin, cb) {
+        if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {
+            const io = (this.io = new (window).IntersectionObserver((data) => {
+                if (data[0].isIntersecting) {
+                    io.disconnect();
+                    this.io = undefined;
+                    cb();
+                }
+            }, { rootMargin }));
+            io.observe(el);
+        }
+        else {
+            // browser doesn't support IntersectionObserver
+            // so just fallback to always show it
+            cb();
+        }
+    }
+    static get assetsDirs() { return ["svg"]; }
+    get el() { return this; }
+    static get watchers() { return {
+        "size": ["updateStyles"],
+        "color": ["updateStyles"],
+        "name": ["loadIcon"],
+        "src": ["loadIcon"],
+        "icon": ["loadIcon"]
+    }; }
+    static get style() { return PdsIconStyle0; }
+}, [1, "pds-icon", {
+        "color": [1],
+        "icon": [8],
+        "name": [513],
+        "size": [513],
+        "src": [1],
+        "ariaLabel": [32],
+        "isVisible": [32],
+        "svgContent": [32]
+    }, undefined, {
+        "size": ["updateStyles"],
+        "color": ["updateStyles"],
+        "name": ["loadIcon"],
+        "src": ["loadIcon"],
+        "icon": ["loadIcon"]
+    }]);
+const createColorClasses = (color) => {
+    return color
+        ? {
+            'pds-color': true,
+            [`pds-color-${color}`]: true,
+        }
+        : null;
+};
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsIcon);
+            }
+            break;
+    } });
+}
+
+export { PdsIcon as P, defineCustomElement as d };
+
+//# sourceMappingURL=pds-icon2.js.map

package/components/pds-icon2.js.map

@@ -0,0 +1 @@
+{"file":"pds-icon2.js","mappings":"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","names":[],"sources":["../../node_modules/@pine-ds/icons/dist/collection/components/pds-icon/assetPath.js","../../node_modules/@pine-ds/icons/dist/collection/components/pds-icon/utils.js","../../node_modules/@pine-ds/icons/dist/collection/components/pds-icon/validate.js","../../node_modules/@pine-ds/icons/dist/collection/components/pds-icon/request.js","../../node_modules/@pine-ds/icons/dist/collection/components/pds-icon/pds-icon.css?tag=pds-icon&encapsulation=shadow","../../node_modules/@pine-ds/icons/dist/collection/components/pds-icon/pds-icon.js"],"sourcesContent":["import { Build } from \"@stencil/core\";\nlet missingAssetPathWarning = false;\n/**\n *\n * Reads the component asset path config from meta tag or a global variable.\n * This is a temporary workaround until these issues have been addressed:\n *\n * https://github.com/ionic-team/stencil/issues/2826/\n * https://github.com/ionic-team/stencil/issues/3470\n * https://github.com/ionic-team/stencil-ds-output-targets/issues/186\n */\nexport const getAssetPath = (path) => {\n    var _a;\n    const metaPineAssetPath = (_a = document.head.querySelector('meta[data-pine-asset-path]')) === null || _a === void 0 ? void 0 : _a.dataset.pineAssetPath;\n    // Get the asset path from the window object if available\n    const windowAssetPath = window.__PINE_ASSET_PATH__;\n    // Set the CDN Asset path using the latest version\n    const cdnAssetPath = 'https://cdn.jsdelivr.net/npm/@pine-ds/icons/dist/pds-icons/';\n    const assetBasePath = Build.isTesting ? '/dist/pds-icons' : metaPineAssetPath || windowAssetPath || cdnAssetPath || '/';\n    // Display a warning if the assets are fetched from the CDN.\n    if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {\n        missingAssetPathWarning = true;\n        console.warn(`\n      Fetching Pine asssets from jsDelivr CDN.\\n\\n It's recommended that you bundle Pine Assets with your application and setting the path accordingly.\\n\\nFor more information you read the documentation: \\nhttps://pine-design-system.netlify.app/?path=/docs/resources-assets--docs\n    `);\n    }\n    let assetPath = path;\n    if (path.startsWith('./')) {\n        assetPath = path.substring(2);\n    }\n    if (!assetBasePath.endsWith('/')) {\n        assetPath = '/' + assetPath;\n    }\n    return assetBasePath + assetPath;\n};\n//# sourceMappingURL=assetPath.js.map\n","import { getAssetPath } from \"./assetPath\";\nlet CACHED_MAP;\nexport const addIcons = (icons) => {\n    const map = getIconMap();\n    Object.keys(icons).forEach(name => map.set(name, icons[name]));\n};\nexport const getIconMap = () => {\n    if (typeof window === 'undefined') {\n        return new Map();\n    }\n    else {\n        if (!CACHED_MAP) {\n            const win = window; // eslint-disable-line @typescript-eslint/no-explicit-any\n            win.PdsIcons = win.PdsIcons || {};\n            CACHED_MAP = win.PdsIcons.map = win.PdsIcons.map || new Map();\n        }\n        return CACHED_MAP;\n    }\n};\nexport const getName = (iconName, icon) => {\n    if (!iconName && icon && !isSrc(icon)) {\n        iconName = icon;\n    }\n    if (isStr(iconName)) {\n        iconName = toLower(iconName);\n    }\n    if (!isStr(iconName) || iconName.trim() === '') {\n        return null;\n    }\n    const invalidChars = iconName.replace(/[a-z]|-|\\d/gi, '');\n    if (invalidChars != '') {\n        return null;\n    }\n    return iconName;\n};\nconst getNamedUrl = (iconName) => {\n    const url = getIconMap().get(iconName);\n    if (url) {\n        return url;\n    }\n    return getAssetPath(`svg/${iconName}.svg`);\n};\nexport const getSrc = (src) => {\n    if (isStr(src)) {\n        src = src.trim();\n        if (isSrc(src)) {\n            return src;\n        }\n    }\n    return null;\n};\nexport const getUrl = (pdsIcon) => {\n    let url = getSrc(pdsIcon.src);\n    if (url) {\n        return url;\n    }\n    url = getName(pdsIcon.name, pdsIcon.icon);\n    if (url) {\n        return getNamedUrl(url);\n    }\n    if (pdsIcon.icon) {\n        url = getSrc(pdsIcon.icon);\n        if (url) {\n            return url;\n        }\n    }\n    return null;\n};\nexport const isSrc = (str) => str.length > 0 && /(\\/|\\.)/.test(str);\nexport const isStr = (val) => typeof val === 'string'; // eslint-disable-line @typescript-eslint/no-explicit-any\nexport const toLower = (val) => val.toLowerCase();\n/**\n * Elements inside of web components sometimes need to inherit global attributes\n * set on the host. For example, the inner input in `ion-input` should inherit\n * the `title` attribute that developers set directly on `ion-input`. This\n * helper function should be called in componentWillLoad and assigned to a variable\n * that is later used in the render function.\n *\n * This does not need to be reactive as changing attributes on the host element\n * does not trigger a re-render.\n */\nexport const inheritAttributes = (el, attributes = []) => {\n    const attributeObject = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n    attributes.forEach(attr => {\n        if (el.hasAttribute(attr)) {\n            const value = el.getAttribute(attr);\n            if (value !== null) {\n                attributeObject[attr] = el.getAttribute(attr);\n            }\n            el.removeAttribute(attr);\n        }\n    });\n    return attributeObject;\n};\n//# sourceMappingURL=utils.js.map\n","import { isStr } from \"./utils\";\nexport const validateContent = (svgContent) => {\n    const div = document.createElement('div');\n    div.innerHTML = svgContent;\n    // setup this way to ensure it works on our buddy IE\n    for (let i = div.childNodes.length - 1; i >= 0; i--) {\n        if (div.childNodes[i].nodeName.toLowerCase() !== 'svg') {\n            div.removeChild(div.childNodes[i]);\n        }\n    }\n    // must only have 1 root element\n    const svgElm = div.firstElementChild;\n    if (svgElm && svgElm.nodeName.toLowerCase() === 'svg') {\n        const svgClass = svgElm.getAttribute('class') || '';\n        svgElm.setAttribute('class', (svgClass + ' s-pds-icon').trim());\n        // root element must be an svg\n        // lets double check we've got valid elements\n        // do not allow scripts\n        if (isValid(svgElm)) {\n            return div.innerHTML;\n        }\n    }\n    return '';\n};\nexport const isValid = (elm) => {\n    if (elm.nodeType === 1) {\n        if (elm.nodeName.toLowerCase() === 'script') {\n            return false;\n        }\n        for (let i = 0; i < elm.attributes.length; i++) {\n            const name = elm.attributes[i].name;\n            if (isStr(name) && name.toLowerCase().indexOf('on') === 0) {\n                return false;\n            }\n        }\n        for (let i = 0; i < elm.childNodes.length; i++) {\n            if (!isValid(elm.childNodes[i])) {\n                return false;\n            }\n        }\n    }\n    return true;\n};\nexport const isSvgDataUrl = (url) => url.startsWith('data:image/svg+xml');\nexport const isEncodedDataUrl = (url) => url.indexOf(';utf8,') !== -1;\n//# sourceMappingURL=validate.js.map\n","import { isEncodedDataUrl, isSvgDataUrl, validateContent } from \"./validate\";\nexport const pdsIconContent = new Map();\nconst requests = new Map(); // eslint-disable-line @typescript-eslint/no-explicit-any\nlet parser;\nexport const getSvgContent = (url, sanitize = false) => {\n    let req = requests.get(url);\n    if (!req) {\n        if (typeof fetch != 'undefined' && typeof document !== 'undefined') {\n            if (isSvgDataUrl(url) && isEncodedDataUrl(url)) {\n                if (!parser) {\n                    parser = new DOMParser();\n                }\n                const doc = parser.parseFromString(url, 'text/html');\n                const svg = doc.querySelector('svg');\n                if (svg) {\n                    pdsIconContent.set(url, svg.outerHTML);\n                }\n                return Promise.resolve();\n            }\n            else {\n                // we don't have a request\n                req = fetch(url).then((rsp) => {\n                    if (rsp.ok) {\n                        return rsp.text().then((svgContent) => {\n                            if (svgContent && sanitize !== false) {\n                                svgContent = validateContent(svgContent);\n                            }\n                            pdsIconContent.set(url, svgContent || '');\n                        });\n                    }\n                    pdsIconContent.set(url, '');\n                });\n                requests.set(url, req);\n            }\n        }\n        else {\n            pdsIconContent.set(url, '');\n            return Promise.resolve();\n        }\n    }\n    return req;\n};\n//# sourceMappingURL=request.js.map\n",":host {\n  --dimension-icon-height: 16px;\n  --dimension-icon-width: 16px;\n  --color-icon-fill: currentColor;\n  contain: strict;\n  display: inline-block;\n  fill: var(--color-icon-fill);\n  height: var(--dimension-icon-height);\n  width: var(--dimension-icon-width);\n}\n:host .pdsicon {\n  fill: var(--color-icon-fill);\n}\n\n.pds-icon-fill-none {\n  fill: none;\n}\n\n.icon-inner,\n.pds-icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}","import { Build, Host, h } from \"@stencil/core\";\nimport { getSvgContent, pdsIconContent } from \"./request\";\nimport { getName, getUrl, inheritAttributes } from \"./utils\";\nexport class PdsIcon {\n    constructor() {\n        this.inheritedAttributes = {}; // eslint-disable-line @typescript-eslint/no-explicit-any\n        this.hasAriaHidden = () => {\n            const { el } = this;\n            return el.hasAttribute('aria-hidden') && el.getAttribute('aria-hidden') === 'true';\n        };\n        this.ariaLabel = undefined;\n        this.isVisible = false;\n        this.svgContent = undefined;\n        this.color = undefined;\n        this.icon = undefined;\n        this.name = undefined;\n        this.size = 'regular';\n        this.src = undefined;\n    }\n    iconSize() {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const sizes = {\n            small: '12px',\n            regular: '16px',\n            medium: '20px',\n            large: '24px',\n        };\n        if (sizes[this.size]) {\n            return sizes[this.size];\n        }\n        else {\n            return this.size;\n        }\n    }\n    componentDidLoad() {\n        this.setCSSVariables();\n    }\n    componentWillLoad() {\n        this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);\n        this.setCSSVariables();\n    }\n    setCSSVariables() {\n        this.el.style.setProperty(`--dimension-icon-height`, this.iconSize());\n        this.el.style.setProperty(`--dimension-icon-width`, this.iconSize());\n        this.el.style.setProperty(`--color-icon-fill`, typeof this.color !== 'undefined' ? this.color : 'currentColor');\n    }\n    connectedCallback() {\n        this.waitUntilVisible(this.el, '50px', () => {\n            this.isVisible = true;\n            this.loadIcon();\n        });\n    }\n    disconnectedCallback() {\n        if (this.io) {\n            this.io.disconnect();\n            this.io = undefined;\n        }\n    }\n    updateStyles() {\n        this.setCSSVariables();\n    }\n    loadIcon() {\n        if (Build.isBrowser && this.isVisible) {\n            const url = getUrl(this);\n            if (url) {\n                if (pdsIconContent.has(url)) {\n                    this.svgContent = pdsIconContent.get(url);\n                }\n                else {\n                    getSvgContent(url).then(() => (this.svgContent = pdsIconContent.get(url)));\n                }\n            }\n        }\n        const label = getName(this.name, this.icon);\n        if (label) {\n            this.ariaLabel = label.replace(/\\-/g, ' ');\n        }\n    }\n    render() {\n        const { ariaLabel, inheritedAttributes } = this;\n        return (h(Host, Object.assign({ key: '4bbc232e2530d43e8b5afefb754486d94ea6538b', \"aria-label\": ariaLabel !== undefined && !this.hasAriaHidden() ? ariaLabel : null, alt: \"\", role: \"img\", class: Object.assign({}, createColorClasses(this.color)) }, inheritedAttributes), Build.isBrowser && this.svgContent ? (h(\"div\", { class: \"icon-inner\", innerHTML: this.svgContent })) : (h(\"div\", { class: \"icon-inner\" }))));\n    }\n    /*****\n     * Private Methods\n     ****/\n    waitUntilVisible(el, rootMargin, cb) {\n        if (Build.isBrowser && typeof window !== 'undefined' && (window).IntersectionObserver) {\n            const io = (this.io = new (window).IntersectionObserver((data) => {\n                if (data[0].isIntersecting) {\n                    io.disconnect();\n                    this.io = undefined;\n                    cb();\n                }\n            }, { rootMargin }));\n            io.observe(el);\n        }\n        else {\n            // browser doesn't support IntersectionObserver\n            // so just fallback to always show it\n            cb();\n        }\n    }\n    static get is() { return \"pds-icon\"; }\n    static get encapsulation() { return \"shadow\"; }\n    static get originalStyleUrls() {\n        return {\n            \"$\": [\"pds-icon.scss\"]\n        };\n    }\n    static get styleUrls() {\n        return {\n            \"$\": [\"pds-icon.css\"]\n        };\n    }\n    static get assetsDirs() { return [\"svg\"]; }\n    static get properties() {\n        return {\n            \"color\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\\nThe color of the icon\"\n                },\n                \"attribute\": \"color\",\n                \"reflect\": false\n            },\n            \"icon\": {\n                \"type\": \"any\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"any\",\n                    \"resolved\": \"any\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"This a combination of both `name` and `src`. If a `src` url is detected\\nit will set the `src` property. Otherwise it assumes it's a built-in named\\nSVG and set the `name` property.\"\n                },\n                \"attribute\": \"icon\",\n                \"reflect\": false\n            },\n            \"name\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The name of the icon to use from\\nthe built-in set.\"\n                },\n                \"attribute\": \"name\",\n                \"reflect\": true\n            },\n            \"size\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"| 'small'   // 12px\\n    | 'regular'  // 16px\\n    | 'medium'  // 20px\\n    | 'large'   // 24px\\n    | 'auto'\\n    | string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"The size of the icon. This can be\\n'small', 'regular', 'medium', large, or a\\ncustom value (40px, 1rem, etc)\"\n                },\n                \"attribute\": \"size\",\n                \"reflect\": true,\n                \"defaultValue\": \"'regular'\"\n            },\n            \"src\": {\n                \"type\": \"string\",\n                \"mutable\": false,\n                \"complexType\": {\n                    \"original\": \"string\",\n                    \"resolved\": \"string\",\n                    \"references\": {}\n                },\n                \"required\": false,\n                \"optional\": true,\n                \"docs\": {\n                    \"tags\": [],\n                    \"text\": \"\\nSpecifies the exact `src` of an SVG file to use.\"\n                },\n                \"attribute\": \"src\",\n                \"reflect\": false\n            }\n        };\n    }\n    static get states() {\n        return {\n            \"ariaLabel\": {},\n            \"isVisible\": {},\n            \"svgContent\": {}\n        };\n    }\n    static get elementRef() { return \"el\"; }\n    static get watchers() {\n        return [{\n                \"propName\": \"size\",\n                \"methodName\": \"updateStyles\"\n            }, {\n                \"propName\": \"color\",\n                \"methodName\": \"updateStyles\"\n            }, {\n                \"propName\": \"name\",\n                \"methodName\": \"loadIcon\"\n            }, {\n                \"propName\": \"src\",\n                \"methodName\": \"loadIcon\"\n            }, {\n                \"propName\": \"icon\",\n                \"methodName\": \"loadIcon\"\n            }];\n    }\n}\nconst createColorClasses = (color) => {\n    return color\n        ? {\n            'pds-color': true,\n            [`pds-color-${color}`]: true,\n        }\n        : null;\n};\n//# sourceMappingURL=pds-icon.js.map\n"],"version":3}

package/components/pds-link.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { l as launch } from './index2.js';
+import { d as defineCustomElement$2 } from './pds-icon2.js';
 
 const pdsLinkCss = ":host{--border-outline:4px solid var(--pine-color-blue-200);--border-radius:var(--pine-border-radius-075);--box-shadow-focus:inset 0 0 0 2px var(--pine-color-blue-200);--color-text-default:var(--pine-color-charcoal-400);--font-size:var(--pine-font-size-100);--font-size-sm:var(--pine-font-size-087);--font-size-xs:var(--pine-font-size-075);--font-weight:var(--pine-font-weight-medium);--spacing-inline-start-margin:var(--pine-spacing-050);--sizing-svg-lg:15px;--sizing-svg-md:13px;--sizing-svg-sm:11px;display:inline}:host pds-icon{-webkit-margin-start:var(--spacing-inline-start-margin);margin-inline-start:var(--spacing-inline-start-margin)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color-text);display:-ms-inline-flexbox;display:inline-flex;font-weight:inherit}.pds-link:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-link--sm{font-size:var(--font-size-xs)}.pds-link--sm pds-icon{height:var(--sizing-svg-sm);width:var(--sizing-svg-sm)}.pds-link--md{font-size:var(--font-size-sm)}.pds-link--md pds-icon{height:var(--sizing-svg-md);width:var(--sizing-svg-md)}.pds-link--lg{font-size:var(--font-size)}.pds-link--lg pds-icon{height:var(--sizing-svg-lg);width:var(--sizing-svg-lg)}.pds-link--plain{font-weight:var(--font-weight);text-decoration:none}.pds-link--plain:hover{text-decoration:underline}.pds-link--default{text-decoration:underline}.pds-link--default:hover{text-decoration:none}";
 const PdsLinkStyle0 = pdsLinkCss;
@@ -41,13 +42,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pds-link"];
+    const components = ["pds-link", "pds-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "pds-link":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PdsLink$1);
             }
             break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/components/pds-link.js.map

@@ -1 +1 @@
-{"file":"pds-link.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,k8CAAk8C,CAAC;AACt9C,sBAAe,UAAU;;MCYZA,SAAO;;;;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QAEJ,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,IAAI,EAAC,MAAM,IAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsLink"],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n\n  --border-outline: 4px solid var(--pine-color-blue-200);\n  --border-radius: var(--pine-border-radius-075);\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-text-default: var(--pine-color-charcoal-400);\n\n  --font-size: var(--pine-font-size-100);\n  --font-size-sm: var(--pine-font-size-087);\n  --font-size-xs: var(--pine-font-size-075);\n  --font-weight: var(--pine-font-weight-medium);\n\n  --spacing-inline-start-margin: var(--pine-spacing-050);\n  --sizing-svg-lg: 15px;\n  --sizing-svg-md: 13px;\n  --sizing-svg-sm: 11px;\n\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-inline-start-margin);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--color-text);\n  display: inline-flex;\n  font-weight: inherit;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--font-size-xs);\n\n  pds-icon {\n    height: var(--sizing-svg-sm);\n    width: var(--sizing-svg-sm);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--font-size-sm);\n\n  pds-icon {\n    height: var(--sizing-svg-md);\n    width: var(--sizing-svg-md);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--font-size);\n\n  pds-icon {\n    height: var(--sizing-svg-lg);\n    width: var(--sizing-svg-lg);\n  }\n}\n\n.pds-link--plain {\n  font-weight: var(--font-weight);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-link.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,k8CAAk8C,CAAC;AACt9C,sBAAe,UAAU;;MCYZA,SAAO;;;;;;wBAUC,KAAK;uBAMc,QAAQ;wBAUP,IAAI;;;IAOnC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAC;QAEhC,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC/C;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAC9C;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC7B;IAED,MAAM;QAEJ,QACE,0DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,GAAG,SAAS,EAC5C,IAAI,EAAC,MAAM,IAEX,+DAAO,IAAI,CAAC,IAAI,CAAQ,EACvB,IAAI,CAAC,QAAQ;YACZ,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,GAAa,CAExD,EACJ;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsLink"],"sources":["src/components/pds-link/pds-link.scss?tag=pds-link&encapsulation=shadow","src/components/pds-link/pds-link.tsx"],"sourcesContent":[":host {\n\n  --border-outline: 4px solid var(--pine-color-blue-200);\n  --border-radius: var(--pine-border-radius-075);\n  --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200);\n\n  --color-text-default: var(--pine-color-charcoal-400);\n\n  --font-size: var(--pine-font-size-100);\n  --font-size-sm: var(--pine-font-size-087);\n  --font-size-xs: var(--pine-font-size-075);\n  --font-weight: var(--pine-font-weight-medium);\n\n  --spacing-inline-start-margin: var(--pine-spacing-050);\n  --sizing-svg-lg: 15px;\n  --sizing-svg-md: 13px;\n  --sizing-svg-sm: 11px;\n\n  display: inline;\n\n  pds-icon {\n    margin-inline-start: var(--spacing-inline-start-margin);\n  }\n}\n\n.pds-link {\n  align-items: center;\n  color: var(--color-text);\n  display: inline-flex;\n  font-weight: inherit;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n// We have a small consensus stating that\n// fonts will be REMs, box-model will be\n// discussed later px or (r)em's\n.pds-link--sm {\n  font-size: var(--font-size-xs);\n\n  pds-icon {\n    height: var(--sizing-svg-sm);\n    width: var(--sizing-svg-sm);\n  }\n}\n\n.pds-link--md {\n  font-size: var(--font-size-sm);\n\n  pds-icon {\n    height: var(--sizing-svg-md);\n    width: var(--sizing-svg-md);\n  }\n}\n\n.pds-link--lg {\n  font-size: var(--font-size);\n\n  pds-icon {\n    height: var(--sizing-svg-lg);\n    width: var(--sizing-svg-lg);\n  }\n}\n\n.pds-link--plain {\n  font-weight: var(--font-weight);\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n}\n\n// Default = inline link\n.pds-link--default {\n  text-decoration: underline;\n\n  &:hover {\n    text-decoration: none;\n  }\n}\n","import { Component, h, Prop } from '@stencil/core';\n\nimport { launch } from '@pine-ds/icons/icons';\n\n/**\n * @part link - The main link element that represents the link component.\n * @slot - Content is placed between the opening closing tags.\n */\n@Component({\n  tag: 'pds-link',\n  styleUrl: 'pds-link.scss',\n  shadow: true,\n})\nexport class PdsLink {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * When enabled, opens link in a new tab.\n   * @defaultValue false\n   */\n  @Prop() external = false;\n\n  /**\n   *\n   * Modifies the look of the link\n   */\n  @Prop() variant: 'inline' | 'plain' = 'inline';\n\n  /**\n   *\n   * The Font size follows t-shirt model\n   * sm: 12px\n   * md: 14px\n   * lg: 16px\n   * @defaultValue lg\n   */\n  @Prop() fontSize: 'sm' | 'md' | 'lg' = 'lg';\n\n  /**\n   * The URL that the hyperlink points to.\n   */\n  @Prop() href!: string;\n\n  private classNames() {\n    const classNames = ['pds-link'];\n\n    if (this.fontSize) {\n      classNames.push('pds-link--' + this.fontSize);\n    }\n\n    if (this.variant) {\n      classNames.push('pds-link--' + this.variant);\n    }\n\n    return classNames.join(' ');\n  }\n\n  render() {\n\n    return (\n      <a\n        class={this.classNames()}\n        href={this.href}\n        id={this.componentId}\n        target={this.external ? '_blank' : undefined}\n        part=\"link\"\n      >\n        <slot>{this.href}</slot>\n        {this.external &&\n          <pds-icon icon={launch} size={this.fontSize}></pds-icon>\n        }\n      </a>\n    );\n  }\n}\n"],"version":3}

package/components/pds-sortable-item.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { h as handle } from './index2.js';
+import { d as defineCustomElement$2 } from './pds-icon2.js';
 
 const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{--border-radius:var(--pine-border-radius-125);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow:var(--pine-box-shadow-lg);--color-background-default:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);--color-interactive-handle:var(--pine-color-blue-300);--spacing-margin-inline-end:var(--pine-spacing-300);--spacing-padding-block-xs:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-300);--spacing-padding-inline-start:var(--pine-spacing-300);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--spacing-padding-block-xs);padding-inline:var(--spacing-padding-inline)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--spacing-padding-inline-start);padding-inline-start:var(--spacing-padding-inline-start)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--border-default);border-block-end:var(--border-default)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--color-background-interactive)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--color-interactive-handle)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--color-background-default);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--color-background-interactive);border-radius:0}";
 const PdsSortableItemStyle0 = pdsSortableItemCss;
@@ -34,13 +35,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pds-sortable-item"];
+    const components = ["pds-sortable-item", "pds-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "pds-sortable-item":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PdsSortableItem$1);
             }
             break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 

package/components/pds-sortable-item.js.map

@@ -1 +1 @@
-{"file":"pds-sortable-item.js","mappings":";;;AAAA,MAAM,kBAAkB,GAAG,iiFAAiiF,CAAC;AAC7jF,8BAAe,kBAAkB;;MCUpBA,iBAAe;;;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;;;QAGjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,UAAU,KACd,4DAAK,KAAK,EAAC,2BAA2B,IACpC,iEAAU,IAAI,EAAEC,MAAU,GAAa,CACnC,CACP,EACD,8DAAa,EACZ,IAAI,CAAC,aAAa,KACjB,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsSortableItem","handleIcon"],"sources":["src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss?tag=pds-sortable-item&encapsulation=scoped","src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"sourcesContent":[":host(.pds-sortable-item) {\n  --border-radius: var(--pine-border-radius-125);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --box-shadow: var(--pine-box-shadow-lg);\n\n  --color-background-default: var(--pine-color-white);\n  --color-background-interactive: var(--pine-color-grey-200);\n  --color-interactive-handle: var(--pine-color-blue-300);\n\n  --spacing-margin-inline-end: var(--pine-spacing-300);\n  --spacing-padding-block-xs: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-300);\n  --spacing-padding-inline-start: var(--pine-spacing-300);\n\n  align-items: center;\n  display: flex;\n  padding-block: var(--spacing-padding-block-xs);\n  padding-inline: var(--spacing-padding-inline);\n\n  .pds-sortable-item__actions {\n    margin-inline-start: auto;\n    padding-inline-start: var(--spacing-padding-inline-start);\n  }\n\n  .pds-sortable-item__handle {\n    line-height: 1;\n    margin-inline-end: var(--spacing-margin-inline-end);\n  }\n\n  // styles when sortable is bordered\n  .pds-sortable--bordered & {\n    &:first-child {\n      border-start-end-radius: var(--border-radius);\n      border-start-start-radius: var(--border-radius);\n    }\n\n    &:last-child {\n      border-end-end-radius: var(--border-radius);\n      border-end-start-radius: var(--border-radius);\n    }\n  }\n\n  // styles when sortable is divided\n  .pds-sortable--divided & {\n    border-block-end: var(--border-default);\n\n    &:last-child {\n      border-block-end: 0;\n    }\n  }\n\n  // cursor styles based on handle-type\n  .pds-sortable--handle-type-row & {\n    cursor: grab;\n  }\n\n  .pds-sortable--handle-type-handle & {\n    .pds-sortable-item__handle {\n      cursor: grab;\n    }\n  }\n}\n\n:host(.pds-sortable-item):hover {\n  background-color: var(--color-background-interactive);\n\n  pds-icon {\n    color: var(--color-interactive-handle)\n  }\n}\n\n:host(.pds-sortable-item--drag) {\n  background-color: var(--color-background-default);\n  border-radius: 0;\n  box-shadow: var(--box-shadow);\n  opacity: 1;\n}\n\n:host(.pds-sortable-item--ghost) {\n  background-color: var(--color-background-interactive);\n  border-radius: 0;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-sortable-item.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,iiFAAiiF,CAAC;AAC7jF,8BAAe,kBAAkB;;MCUpBA,iBAAe;;;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;;;QAGjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,UAAU,KACd,4DAAK,KAAK,EAAC,2BAA2B,IACpC,iEAAU,IAAI,EAAEC,MAAU,GAAa,CACnC,CACP,EACD,8DAAa,EACZ,IAAI,CAAC,aAAa,KACjB,4DAAK,KAAK,EAAC,4BAA4B,IACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsSortableItem","handleIcon"],"sources":["src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss?tag=pds-sortable-item&encapsulation=scoped","src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"sourcesContent":[":host(.pds-sortable-item) {\n  --border-radius: var(--pine-border-radius-125);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --box-shadow: var(--pine-box-shadow-lg);\n\n  --color-background-default: var(--pine-color-white);\n  --color-background-interactive: var(--pine-color-grey-200);\n  --color-interactive-handle: var(--pine-color-blue-300);\n\n  --spacing-margin-inline-end: var(--pine-spacing-300);\n  --spacing-padding-block-xs: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-300);\n  --spacing-padding-inline-start: var(--pine-spacing-300);\n\n  align-items: center;\n  display: flex;\n  padding-block: var(--spacing-padding-block-xs);\n  padding-inline: var(--spacing-padding-inline);\n\n  .pds-sortable-item__actions {\n    margin-inline-start: auto;\n    padding-inline-start: var(--spacing-padding-inline-start);\n  }\n\n  .pds-sortable-item__handle {\n    line-height: 1;\n    margin-inline-end: var(--spacing-margin-inline-end);\n  }\n\n  // styles when sortable is bordered\n  .pds-sortable--bordered & {\n    &:first-child {\n      border-start-end-radius: var(--border-radius);\n      border-start-start-radius: var(--border-radius);\n    }\n\n    &:last-child {\n      border-end-end-radius: var(--border-radius);\n      border-end-start-radius: var(--border-radius);\n    }\n  }\n\n  // styles when sortable is divided\n  .pds-sortable--divided & {\n    border-block-end: var(--border-default);\n\n    &:last-child {\n      border-block-end: 0;\n    }\n  }\n\n  // cursor styles based on handle-type\n  .pds-sortable--handle-type-row & {\n    cursor: grab;\n  }\n\n  .pds-sortable--handle-type-handle & {\n    .pds-sortable-item__handle {\n      cursor: grab;\n    }\n  }\n}\n\n:host(.pds-sortable-item):hover {\n  background-color: var(--color-background-interactive);\n\n  pds-icon {\n    color: var(--color-interactive-handle)\n  }\n}\n\n:host(.pds-sortable-item--drag) {\n  background-color: var(--color-background-default);\n  border-radius: 0;\n  box-shadow: var(--box-shadow);\n  opacity: 1;\n}\n\n:host(.pds-sortable-item--ghost) {\n  background-color: var(--color-background-interactive);\n  border-radius: 0;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-table-head-cell2.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { e as upSmall, d as downSmall } from './index2.js';
+import { d as defineCustomElement$1 } from './pds-icon2.js';
 
 const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-text-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-text-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
 const PdsTableHeadCellStyle0 = pdsTableHeadCellCss;
@@ -77,13 +78,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["pds-table-head-cell"];
+    const components = ["pds-table-head-cell", "pds-icon"];
     components.forEach(tagName => { switch (tagName) {
         case "pds-table-head-cell":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, PdsTableHeadCell);
             }
             break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }