import { r as registerInstance, h } from './index-3e697abd.js';
import { c as createNode, g as getSvgInnerHTML } from './DomUtils-ced72207.js';
// Simple XHR wrapper returning a promise (for IE11-compatibility)
function simpleFetch(path) {
    return new Promise(function (resolve, reject) {
        var httpRequest = new XMLHttpRequest();
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState === 4 && httpRequest.status >= 200 && httpRequest.status < 300) {
                resolve(httpRequest.responseText);
            }
            else if (httpRequest.readyState === 4) {
                reject('Could not complete request');
            }
        };
        httpRequest.onerror = function () { return reject('Could not complete request'); };
        httpRequest.open('GET', path);
        httpRequest.send();
    });
}
var cssIcons = [
    'accordion',
    'accordion-open',
    'close',
    'remove',
    'plus',
    'minus',
    'right',
    'left',
    'down',
    'up',
    'play',
    'play-small',
    'checkmark',
    'burger'
];
var name = "@hv/swissre-ui";
var version = "0.1.8";
var description = "UI component library for SwissRe. Based on Stencil.";
var main = "dist/lib/entry/index.js";
var module = "dist/lib/entry/index.mjs";
var es2015 = "dist/lib/entry/esm/index.mjs";
var es2017 = "dist/lib/entry/esm/index.mjs";
var types = "dist/lib/entry/types/index.d.ts";
var collection = "dist/lib/entry/collection/collection-manifest.json";
var unpkg = "dist/lib/entry/swissre-ui/swissre-ui.js";
var files = [
    "dist/lib/entry/",
    "dist/lib/fonts/",
    "dist/lib/images/",
    "dist/lib/loader/"
];
var scripts = {
    build: "stencil build",
    test: "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    dev: "stencil build --watch",
    "dev:styleguide": "gulp; start-storybook -s ./dist/lib,./dist/downloads -p 5678",
    "build:styleguide-data": "gulp",
    "build:styleguide": "stencil build --docs; gulp --log-level -L; build-storybook -s ./dist/lib,./dist/downloads -o dist/styleguide --loglevel error --quiet",
    preversion: "git pull; yarn build",
    postversion: "npm publish --access public",
    postpublish: "git push origin; git push origin --tags",
    release: "node release.js",
    "release:minor": "node release.js --type=minor",
    "release:major": "node release.js --type=major"
};
var devDependencies = {
    "@babel/core": "^7.9.6",
    "@stencil/core": "^1.12.2",
    "@stencil/sass": "^1.3.1",
    "@storybook/addon-backgrounds": "^6.0.4",
    "@storybook/addon-docs": "^6.0.4",
    "@storybook/addon-knobs": "^6.0.4",
    "@storybook/addon-storysource": "^6.0.4",
    "@storybook/web-components": "^6.0.4",
    "@types/jest": "24.9.1",
    "@types/puppeteer": "2.0.1",
    "babel-loader": "^8.1.0",
    del: "^5.1.0",
    gulp: "^4.0.2",
    "gulp-gray-matter": "^3.0.1",
    "gulp-tap": "^2.0.0",
    "gulp-zip": "^5.0.1",
    jest: "24.9.0",
    "jest-cli": "24.9.0",
    "lit-html": "^1.2.1",
    prettier: "^2.0.5",
    puppeteer: "2.1.1",
    "rollup-plugin-copy": "^3.3.0"
};
var license = "MIT";
var packageInfo = {
    name: name,
    version: version,
    description: description,
    main: main,
    module: module,
    es2015: es2015,
    es2017: es2017,
    types: types,
    collection: collection,
    "collection:main": "dist/lib/entry/collection/index.js",
    unpkg: unpkg,
    files: files,
    scripts: scripts,
    devDependencies: devDependencies,
    license: license
};
var iconComponentCss = "*{font:inherit;color:inherit;line-height:inherit;text-decoration:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}*:focus{outline:none}button{background:none;border:none}[data-picto]{font-size:1em;display:inline-block;position:relative;height:1.2ex}[data-picto]>svg{height:0;position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);overflow:visible}@supports (display: inline-flex){[data-picto]>svg{position:relative;top:0;-webkit-transform:none;transform:none}}@supports (display: inline-flex){.Icon[data-picto],.Icon:not(.inline)[data-picto],[data-picto]{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center}[data-picto]>svg{position:relative;top:0;-webkit-transform:none;transform:none}}[data-picto]>svg{display:block;width:100%}[data-picto].red>svg{fill:#E00034}[data-picto].white>svg{fill:#ffffff}[data-picto].t-gray>svg{fill:#636363}@media screen and (-ms-high-contrast: active){[data-picto]>svg{stroke:green}}[data-icon=accordion]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.8em;height:0.8em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(90deg) translateX(50%) rotate(135deg);transform:rotate(90deg) translateX(50%) rotate(135deg);top:50%;left:50%}[data-icon=accordion]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=accordion-open]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.8em;height:0.8em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(-90deg) translateX(50%) rotate(135deg);transform:rotate(-90deg) translateX(50%) rotate(135deg);top:50%;left:50%}[data-icon=accordion-open]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=close]{height:16px;width:16px}[data-icon=close]:after{content:\"\";position:absolute;font-size:inherit;top:50%;left:50%;width:24px;margin:-1px -12px;border-top:1px solid;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);transition:-webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);transition:transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);transition:transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);top:50%;left:50%}[data-icon=close]:before{content:\"\";position:absolute;font-size:inherit;top:50%;left:50%;width:24px;margin:-1px -12px;border-top:1px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);transition:-webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);transition:transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);transition:transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);top:50%;left:50%}[data-icon=remove]{height:12px;width:12px}[data-icon=remove]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:1.6em;margin:-1px -0.8em;border-top:2px solid;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);transition:-webkit-transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);transition:transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);transition:transform 0.2s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.2s cubic-bezier(0.77, 0, 0.175, 1);top:50%;left:50%}[data-icon=remove]:before{content:\"\";position:absolute;font-size:inherit;top:50%;width:1.6em;margin:-1px -0.8em;border-top:2px solid;-webkit-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);transition:-webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);transition:transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);transition:transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);top:50%;left:50%}[data-icon=plus]{height:13px;width:13px}[data-icon=plus]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:13px;margin:0 -6px;border-top:1px solid;top:50%;left:50%}[data-icon=plus]:before{content:\"\";position:absolute;font-size:inherit;top:50%;height:13px;margin:-6px 0;border-left:1px solid;top:50%;left:50%}[data-icon=minus]{height:13px;width:13px}[data-icon=minus]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:12px;margin:0 -6px;border-top:1px solid;top:50%;left:50%}[data-icon=minus]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=right]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.585em;height:0.585em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(0) translateX(50%) rotate(135deg);transform:rotate(0) translateX(50%) rotate(135deg);top:50%;left:50%}[data-icon=right]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=left]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.585em;height:0.585em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(180deg) translateX(50%) rotate(135deg);transform:rotate(180deg) translateX(50%) rotate(135deg);top:50%;left:50%}[data-icon=left]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=down]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.585em;height:0.585em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(90deg) translateX(50%) rotate(135deg);transform:rotate(90deg) translateX(50%) rotate(135deg);top:50%;left:50%}[data-icon=down]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=up]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.585em;height:0.585em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:rotate(-90deg) translateX(50%) rotate(135deg);transform:rotate(-90deg) translateX(50%) rotate(135deg);top:50%;left:50%}[data-icon=up]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=play]{width:25px;height:30px}[data-icon=play]:after{content:\"\";position:absolute;font-size:inherit;top:50%;margin-top:-15px;margin-left:-12px;width:0;height:0;border-top:15px solid transparent;border-bottom:15px solid transparent;border-left:25px solid currentColor;top:50%;left:50%}[data-icon=play]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=play-small]:after{content:\"\";position:absolute;font-size:inherit;top:50%;margin-top:-9px;margin-left:-7px;width:0;height:0;border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:15px solid currentColor;top:50%;left:50%}[data-icon=play-small]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=checkmark]{width:20px;height:16px}[data-icon=checkmark]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:1.8em;height:0.7em;margin-left:-1em;margin-top:-0.8em;border-color:currentColor;border-width:0.3em;border-style:none none solid solid;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);top:50%;left:50%}[data-icon=checkmark]:before{content:\"\";position:absolute;font-size:inherit;top:50%;content:none;top:50%;left:50%}[data-icon=burger]{width:24px;height:18px}[data-icon=burger]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:2.4em;height:1.4em;margin-top:-0.7em;margin-left:-12px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;top:50%;left:50%}[data-icon=burger]:before{content:\"\";position:absolute;font-size:inherit;top:50%;width:2.4em;height:2px;margin-top:-1px;margin-left:-12px;border-bottom:1px solid currentColor;top:50%;left:50%}[data-icon=arrow-right]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.585em;height:0.585em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:translateX(0.685em) rotate(135deg);transform:translateX(0.685em) rotate(135deg);top:50%;left:50%}[data-icon=arrow-right]:before{content:\"\";position:absolute;font-size:inherit;top:50%;width:1.17em;border-bottom:1px solid;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);top:50%;left:50%}[data-icon=arrow-left]:after{content:\"\";position:absolute;font-size:inherit;top:50%;width:0.585em;height:0.585em;border-width:1px;border-style:solid none none solid;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transform:translateX(-0.685em) rotate(-45deg);transform:translateX(-0.685em) rotate(-45deg);top:50%;left:50%}[data-icon=arrow-left]:before{content:\"\";position:absolute;font-size:inherit;top:50%;width:1.17em;border-bottom:1px solid;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);top:50%;left:50%}:host{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.Icon{font-size:inherit;width:1.5em;height:1.5em}[data-picto]>svg{height:auto;fill:currentColor}[data-icon]{display:inline-block;position:relative;line-height:1;font-size:10px}";
var SVG_SOURCE_URL = "https://unpkg.com/" + packageInfo.name + "@" + packageInfo.version + "/dist/lib/images/svg-sprite.svg";
// putting the svgNode in global is a bit ugly, but this way we need only a single createNode
var svgNode = null;
var getSvg = simpleFetch(SVG_SOURCE_URL).then(function (res) { return (svgNode = createNode(res)); });
var Icon = /** @class */ (function () {
    function Icon(hostRef) {
        registerInstance(this, hostRef);
        /**
         * Icon Name – see Styles/Icons/Available Icons for possbile names
         */
        this.name = 'message';
    }
    Icon.prototype.connectedCallback = function () {
        var _this = this;
        if (!svgNode) {
            getSvg
                .then(function () { return (_this.svgNode = svgNode); })
                .catch(function (err) {
                console.log('SVG Sprint could not be loaded – ', err);
            });
        }
        else {
            this.svgNode = svgNode;
        }
    };
    Icon.prototype.isCssIcon = function () {
        return cssIcons.includes(this.name);
    };
    Icon.prototype.getIcon = function () {
        if (this.isCssIcon() || !this.svgNode)
            return '';
        var icon = this.svgNode.querySelector("#picto-" + this.name);
        if (!icon) {
            console.error("Icon " + this.name + " could not be found. You can check the available icons in the styleguide. Please check that you are using the current vesion of the SwissRe UI Library.");
            return '';
        }
        var viewBox = icon.getAttribute('viewBox');
        return "<svg class=\"sc-sr-icon\" viewBox=\"" + viewBox + "\">" + getSvgInnerHTML(icon) + "</svg>";
    };
    Icon.prototype.render = function () {
        if (this.isCssIcon()) {
            return h("span", { class: "Icon", "data-icon": this.name });
        }
        return h("span", { class: "Icon", "data-picto": this.name, innerHTML: this.getIcon() });
    };
    return Icon;
}());
Icon.style = iconComponentCss;
export { Icon as sr_icon };
