q2-tecton-elements 1.60.2 → 1.61.0

package/dist/esm/q2-icon.entry.js

@@ -0,0 +1,713 @@
+import { r as registerInstance, a as getAssetPath, h, g as getElement } from './index-CGkHOjh1.js';
+import { c as createGuid } from './index-LNnzUeDP.js';
+import { g as getOrCreateSpriteContainer } from './sprites-jG2RmiwF.js';
+
+const a11y = "standard";
+const add = "standard";
+const airplane = "standard";
+const ambulance = "standard";
+const android = "browsersos";
+const apple = "standard";
+const arts = "standard";
+const atv = "standard";
+const backpack = "standard";
+const bank = "standard";
+const barchart = "standard";
+const bed = "standard";
+const bell = "standard";
+const bicycle = "standard";
+const boat = "standard";
+const box = "standard";
+const briefcase = "standard";
+const bug = "standard";
+const buildings = "standard";
+const calculator = "standard";
+const calendar = "standard";
+const camera = "standard";
+const car = "standard";
+const card = "cards";
+const cart = "standard";
+const cash = "standard";
+const certificate = "standard";
+const chat = "communication";
+const check = "standard";
+const checkmark = "standard";
+const clipboard = "standard";
+const close = "standard";
+const coins = "standard";
+const compass = "standard";
+const conversation = "standard";
+const copy = "standard";
+const coupon = "standard";
+const dashboard = "standard";
+const desktop = "devices";
+const diploma = "standard";
+const divider = "standard";
+const document$1 = "standard";
+const download = "standard";
+const edit = "standard";
+const ellipsis = "standard";
+const error = "status";
+const factory = "standard";
+const failed = "standard";
+const filebox = "standard";
+const filter = "standard";
+const fingerprint = "standard";
+const flag = "standard";
+const gear = "standard";
+const gift = "standard";
+const government = "standard";
+const gps = "standard";
+const hand = "standard";
+const handshake = "standard";
+const headset = "standard";
+const health = "standard";
+const heart = "standard";
+const home = "standard";
+const inbox = "standard";
+const info = "status";
+const ios = "browsersos";
+const key = "standard";
+const laptop = "devices";
+const law = "standard";
+const leaf = "standard";
+const lightbulb = "standard";
+const linechart = "standard";
+const link = "standard";
+const list = "standard";
+const location = "standard";
+const lock = "standard";
+const logout = "standard";
+const loop = "standard";
+const mail = "standard";
+const math = "standard";
+const medal = "standard";
+const megaphone = "standard";
+const microscope = "standard";
+const mortgage = "standard";
+const motorcycle = "standard";
+const motorhome = "standard";
+const mountains = "standard";
+const movie = "standard";
+const music = "standard";
+const newspaper = "standard";
+const options = "standard";
+const palette = "standard";
+const paperclip = "standard";
+const pause = "standard";
+const paw = "standard";
+const people = "standard";
+const percent = "standard";
+const person = "standard";
+const phone = "devices";
+const piechart = "standard";
+const play = "standard";
+const pricetag = "standard";
+const print = "standard";
+const prohibited = "standard";
+const question = "standard";
+const receipt = "standard";
+const refresh = "standard";
+const remove = "standard";
+const repeat = "standard";
+const revert = "legacy";
+const ribbon = "standard";
+const ring = "standard";
+const roadblock = "standard";
+const save = "standard";
+const school = "standard";
+const search = "standard";
+const section = "standard";
+const service = "standard";
+const shield = "standard";
+const sign = "standard";
+const silverware = "standard";
+const skip = "standard";
+const sort = "standard";
+const speedometer = "standard";
+const split = "standard";
+const star = "standard";
+const statements = "standard";
+const storefront = "standard";
+const success = "status";
+const tablet = "devices";
+const target = "standard";
+const taxi = "standard";
+const time = "standard";
+const todo = "standard";
+const tools = "standard";
+const tractor = "standard";
+const transfer = "standard";
+const trash = "standard";
+const tree = "standard";
+const umbrella = "standard";
+const unlink = "standard";
+const upload = "standard";
+const virus = "standard";
+const wallet = "standard";
+const warning = "status";
+const watch = "standard";
+const world = "standard";
+var iconMap = {
+	a11y: a11y,
+	add: add,
+	airplane: airplane,
+	"alarm-clock": "standard",
+	ambulance: ambulance,
+	android: android,
+	apple: apple,
+	"arrow-down": "standard",
+	"arrow-left": "standard",
+	"arrow-right": "standard",
+	"arrow-up": "standard",
+	arts: arts,
+	atv: atv,
+	backpack: backpack,
+	bank: bank,
+	barchart: barchart,
+	"barchart-trend": "standard",
+	bed: bed,
+	bell: bell,
+	bicycle: bicycle,
+	boat: boat,
+	box: box,
+	"brand-autobooks-color": "brand",
+	"brand-autobooks-filled": "brand",
+	"brand-facebook-color": "brand",
+	"brand-facebook-filled": "brand",
+	"brand-instagram-color": "brand",
+	"brand-instagram-filled": "brand",
+	"brand-linkedin-color": "brand",
+	"brand-linkedin-filled": "brand",
+	"brand-messenger-color": "brand",
+	"brand-messenger-filled": "brand",
+	"brand-payrecs-color": "brand",
+	"brand-payrecs-filled": "brand",
+	"brand-snapchat-color": "brand",
+	"brand-snapchat-filled": "brand",
+	"brand-twitter-color": "brand",
+	"brand-twitter-filled": "brand",
+	"brand-vimeo-color": "brand",
+	"brand-vimeo-filled": "brand",
+	"brand-x-color": "brand",
+	"brand-x-filled": "brand",
+	"brand-youtube-color": "brand",
+	"brand-youtube-filled": "brand",
+	"brand-zelle-color": "brand",
+	"brand-zelle-filled": "brand",
+	"brand-zelle-name-color": "brand",
+	"brand-zelle-name-filled": "brand",
+	briefcase: briefcase,
+	"browser-chrome": "browsersos",
+	"browser-chrome-color": "browsersos",
+	"browser-chrome-filled": "browsersos",
+	"browser-edge": "browsersos",
+	"browser-edge-color": "browsersos",
+	"browser-edge-filled": "browsersos",
+	"browser-firefox": "browsersos",
+	"browser-firefox-color": "browsersos",
+	"browser-firefox-filled": "browsersos",
+	"browser-ie": "browsersos",
+	"browser-ie-color": "browsersos",
+	"browser-ie-filled": "browsersos",
+	"browser-opera": "browsersos",
+	"browser-opera-color": "browsersos",
+	"browser-opera-filled": "browsersos",
+	"browser-safari": "browsersos",
+	"browser-safari-color": "browsersos",
+	"browser-safari-filled": "browsersos",
+	"bubble-graph": "standard",
+	bug: bug,
+	buildings: buildings,
+	"buildings-2": "standard",
+	calculator: calculator,
+	calendar: calendar,
+	"calendar-confirm": "legacy",
+	"calendar-create": "standard",
+	"calendar-pay": "standard",
+	"calendar-remove": "standard",
+	"calendar-repeat": "standard",
+	"calendar-skip": "standard",
+	"calendar-time": "standard",
+	"call-color": "legacy",
+	"call-filled": "legacy",
+	camera: camera,
+	car: car,
+	"car-front": "standard",
+	card: card,
+	"card-add": "cards",
+	"card-amazon": "cards",
+	"card-amazon-color": "cards",
+	"card-amex": "cards",
+	"card-amex-color": "cards",
+	"card-applepay": "cards",
+	"card-applepay-color": "cards",
+	"card-bitcoin": "cards",
+	"card-bitcoin-color": "cards",
+	"card-dinersclub": "cards",
+	"card-dinersclub-color": "cards",
+	"card-discover": "cards",
+	"card-discover-color": "cards",
+	"card-edit": "cards",
+	"card-gift": "cards",
+	"card-googlepay": "cards",
+	"card-googlepay-color": "cards",
+	"card-heart": "cards",
+	"card-in-hand": "cards",
+	"card-insert": "cards",
+	"card-jcb": "cards",
+	"card-jcb-color": "cards",
+	"card-join": "cards",
+	"card-locked": "cards",
+	"card-maestro": "cards",
+	"card-maestro-color": "cards",
+	"card-mastercard": "cards",
+	"card-mastercard-color": "cards",
+	"card-more": "cards",
+	"card-paypal": "cards",
+	"card-paypal-color": "cards",
+	"card-prohibited": "cards",
+	"card-remove": "cards",
+	"card-scissors": "cards",
+	"card-star": "cards",
+	"card-stripe": "cards",
+	"card-stripe-color": "cards",
+	"card-success": "cards",
+	"card-unknown": "cards",
+	"card-update": "cards",
+	"card-visa": "cards",
+	"card-visa-color": "cards",
+	cart: cart,
+	"cart-moving": "standard",
+	cash: cash,
+	"cash-bills": "standard",
+	"cash-coins": "standard",
+	"cash-in-hand": "standard",
+	"cash-register": "standard",
+	certificate: certificate,
+	chat: chat,
+	"chat-bubbles": "communication",
+	"chat-question": "communication",
+	"chat-round": "communication",
+	check: check,
+	"check-add": "standard",
+	"check-dollar": "standard",
+	"check-edit": "standard",
+	"check-remove": "standard",
+	"check-shield": "standard",
+	checkmark: checkmark,
+	"checkmark-outline": "standard",
+	"chevron-double-left": "standard",
+	"chevron-double-right": "standard",
+	"chevron-down": "standard",
+	"chevron-left": "standard",
+	"chevron-right": "standard",
+	"chevron-up": "standard",
+	clipboard: clipboard,
+	close: close,
+	coins: coins,
+	compass: compass,
+	conversation: conversation,
+	copy: copy,
+	coupon: coupon,
+	"credit-score": "standard",
+	"currency-dollar": "currencies",
+	"currency-dollar-circle": "currencies",
+	"currency-euro": "currencies",
+	"currency-pound": "currencies",
+	"currency-yen": "currencies",
+	dashboard: dashboard,
+	"delivery-truck": "standard",
+	desktop: desktop,
+	diploma: diploma,
+	divider: divider,
+	document: document$1,
+	"document-add": "standard",
+	"document-checklist": "standard",
+	"document-remove": "standard",
+	download: download,
+	"drag-handle": "standard",
+	edit: edit,
+	ellipsis: ellipsis,
+	error: error,
+	"error-filled": "status",
+	"external-link": "standard",
+	"eye-hide": "standard",
+	"eye-show": "standard",
+	"face-id": "standard",
+	factory: factory,
+	failed: failed,
+	filebox: filebox,
+	"filetype-csv": "filetypes",
+	"filetype-doc": "filetypes",
+	"filetype-docx": "filetypes",
+	"filetype-generic": "filetypes",
+	"filetype-gif": "filetypes",
+	"filetype-iso": "filetypes",
+	"filetype-jpg": "filetypes",
+	"filetype-otf": "filetypes",
+	"filetype-pdf": "filetypes",
+	"filetype-png": "filetypes",
+	"filetype-ppt": "filetypes",
+	"filetype-svg": "filetypes",
+	"filetype-txt": "filetypes",
+	"filetype-xls": "filetypes",
+	"filetype-xlsx": "filetypes",
+	"filetype-xml": "filetypes",
+	filter: filter,
+	fingerprint: fingerprint,
+	flag: flag,
+	gear: gear,
+	"gesture-hand": "gestures",
+	"gesture-scroll-horizontal": "gestures",
+	"gesture-scroll-vertical": "gestures",
+	"gesture-stretch": "gestures",
+	"gesture-swipe-down": "gestures",
+	"gesture-swipe-left": "gestures",
+	"gesture-swipe-right": "gestures",
+	"gesture-swipe-up": "gestures",
+	"gesture-tap": "gestures",
+	gift: gift,
+	"gold-bars": "standard",
+	government: government,
+	gps: gps,
+	"graduation-cap": "standard",
+	"grid-x2": "standard",
+	"grid-x3": "standard",
+	"hamburger-menu": "standard",
+	hand: hand,
+	"hand-with-coins": "standard",
+	"hand-with-key": "standard",
+	handshake: handshake,
+	headset: headset,
+	health: health,
+	heart: heart,
+	"heart-add": "standard",
+	"heart-remove": "standard",
+	home: home,
+	"home-chimney": "standard",
+	"home-gear": "standard",
+	"id-badge": "standard",
+	inbox: inbox,
+	"inbox-checked": "standard",
+	"inbox-full": "standard",
+	info: info,
+	"info-filled": "status",
+	ios: ios,
+	key: key,
+	laptop: laptop,
+	law: law,
+	leaf: leaf,
+	lightbulb: lightbulb,
+	linechart: linechart,
+	"linechart-trend": "standard",
+	link: link,
+	list: list,
+	location: location,
+	"location-base": "standard",
+	"location-prohibited": "standard",
+	lock: lock,
+	logout: logout,
+	loop: loop,
+	mail: mail,
+	math: math,
+	medal: medal,
+	megaphone: megaphone,
+	"message-forward": "standard",
+	"message-reply": "standard",
+	"message-response": "standard",
+	microscope: microscope,
+	"mobile-button": "mobile",
+	"mobile-edit": "mobile",
+	"mobile-fast-dollar": "standard",
+	"mobile-heart": "mobile",
+	"mobile-location": "mobile",
+	"mobile-lock": "mobile",
+	"mobile-remove": "mobile",
+	"mobile-rotate": "mobile",
+	"mobile-search": "mobile",
+	"mobile-settings": "mobile",
+	"mobile-time": "mobile",
+	"money-time": "standard",
+	mortgage: mortgage,
+	motorcycle: motorcycle,
+	motorhome: motorhome,
+	mountains: mountains,
+	movie: movie,
+	music: music,
+	"nest-egg": "standard",
+	newspaper: newspaper,
+	options: options,
+	"os-android": "browsersos",
+	"os-android-color": "browsersos",
+	"os-android-filled": "browsersos",
+	"os-apple": "browsersos",
+	"os-apple-color": "browsersos",
+	"os-apple-filled": "browsersos",
+	"os-windows": "browsersos",
+	"os-windows-color": "browsersos",
+	"os-windows-filled": "browsersos",
+	palette: palette,
+	"paper-plane": "standard",
+	paperclip: paperclip,
+	pause: pause,
+	paw: paw,
+	people: people,
+	"people-group": "standard",
+	percent: percent,
+	person: person,
+	"person-add": "standard",
+	"person-lock": "standard",
+	"person-remove": "standard",
+	"person-settings": "standard",
+	"person-to-person": "standard",
+	"personal-care": "standard",
+	phone: phone,
+	piechart: piechart,
+	"piechart-expanded": "standard",
+	"piggy-bank": "standard",
+	play: play,
+	pricetag: pricetag,
+	"pricetag-blank": "standard",
+	"pricetag-time": "standard",
+	print: print,
+	prohibited: prohibited,
+	question: question,
+	receipt: receipt,
+	"receipt-list": "standard",
+	"receipt-list-top": "standard",
+	"receipt-top": "standard",
+	refresh: refresh,
+	remove: remove,
+	repeat: repeat,
+	"repeat-time": "standard",
+	revert: revert,
+	ribbon: ribbon,
+	ring: ring,
+	roadblock: roadblock,
+	"rss-color": "legacy",
+	"rss-filled": "legacy",
+	save: save,
+	school: school,
+	search: search,
+	section: section,
+	service: service,
+	shield: shield,
+	sign: sign,
+	"sign-closed": "standard",
+	"sign-open": "standard",
+	"sign-sale": "standard",
+	"sign-sold": "standard",
+	silverware: silverware,
+	skip: skip,
+	"sms-color": "legacy",
+	"sms-filled": "legacy",
+	sort: sort,
+	speedometer: speedometer,
+	split: split,
+	star: star,
+	"star-add": "standard",
+	"star-remove": "standard",
+	statements: statements,
+	"steering-wheel": "standard",
+	"stop-payment": "standard",
+	storefront: storefront,
+	"storefront-add": "standard",
+	"storefront-prohibited": "standard",
+	"storefront-remove": "standard",
+	"storefront-settings": "standard",
+	success: success,
+	"success-filled": "status",
+	tablet: tablet,
+	target: target,
+	taxi: taxi,
+	time: time,
+	todo: todo,
+	tools: tools,
+	tractor: tractor,
+	transfer: transfer,
+	"transfer-receive": "standard",
+	"transfer-send": "standard",
+	trash: trash,
+	tree: tree,
+	"truck-with-lock": "standard",
+	umbrella: umbrella,
+	unlink: unlink,
+	upload: upload,
+	"venmo-colored": "brand",
+	"venmo-filled": "brand",
+	virus: virus,
+	wallet: wallet,
+	warning: warning,
+	"warning-filled": "status",
+	watch: watch,
+	world: world,
+	"zoom-in": "standard",
+	"zoom-out": "standard"
+};
+
+const q2IconCss = "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block;height:var(--tct-icon-size, 24px);width:var(--tct-icon-size, 24px);position:relative;fill:none}:host([inline]){height:1em;width:1em}svg{display:block;position:absolute;top:0;left:0;stroke-width:var(--tct-icon-stroke-width, var(--t-icon-stroke-width, var(--tct-icon-group-stroke-width, 2)));stroke-linecap:var(--tct-icon-cap, var(--t-icon-cap, round));stroke-linejoin:var(--tct-icon-cap, var(--t-icon-cap, round));transition:var(--tct-icon-transition, none)}svg.brand{stroke-width:var(--tct-icon-group-brand-stroke-width, 1)}svg.browsersos{stroke-width:var(--tct-icon-group-browsersos-stroke-width, 1)}.stroke-primary{stroke:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.stroke-secondary{stroke:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.fill-primary{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-primary-transition, none)}.fill-secondary{fill:var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentcolor)));transition:var(--tct-icon-stroke-secondary-transition, none)}.filled{fill:var(--tct-icon-fill, var(--comp-icon-fill, var(--t-icon-fill, none)));transition:var(--tct-icon-fill-transition, none)}.brand-filled{fill:var(--tct-brand-icon-fill, var(--tct-icon-fill, currentColor));transition:var(--tct-icon-fill-transition, none)}.uniform{fill:var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentcolor));transition:var(--tct-icon-stroke-primary-transition, none)}:host([type=info]),:host([type=info-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))}:host([type=success]),:host([type=success-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-success, var(--const-stoplight-success, #0e8a00))}:host([type=warning]),:host([type=warning-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-warning, var(--const-stoplight-warning, #c35500))}:host([type=error]),:host([type=error-filled]){--tct-icon-stroke-primary:transparent;--comp-status-color:var(--tct-stoplight-alert, var(--const-stoplight-alert, #d20a0a))}";
+
+const Q2Icon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.spritePrefix = 'tecton-sprite-';
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    componentWillLoad() {
+        this.handleIcon();
+    }
+    componentDidRender() {
+        var _a, _b, _c, _d;
+        if (!this.iconClone)
+            return;
+        (_b = (_a = this.spriteGroup) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.remove();
+        const appendedClone = (_c = this.spriteGroup) === null || _c === void 0 ? void 0 : _c.appendChild(this.iconClone);
+        // We have to set the `href` attribute after the symbol is appended to the DOM to avoid a bug in Safari
+        (_d = this.spriteUse) === null || _d === void 0 ? void 0 : _d.setAttribute('href', `#${appendedClone.id}`);
+    }
+    disconnectedCallback() {
+        this.spriteGroup = null;
+        this.spriteUse = null;
+    }
+    // #endregion
+    // #region Watchers
+    handleIcon() {
+        var _a, _b;
+        if (this.isCustom) {
+            this.setCustomSVGAttrs();
+        }
+        else if (this.type) {
+            this.fetchSprite();
+        }
+        else {
+            this.iconClone = null;
+            (_b = (_a = this.spriteGroup) === null || _a === void 0 ? void 0 : _a.firstElementChild) === null || _b === void 0 ? void 0 : _b.remove();
+        }
+    }
+    // #endregion
+    // #region Local Methods
+    get iconCloneViewBox() {
+        var _a, _b;
+        return (_b = (_a = this.iconClone) === null || _a === void 0 ? void 0 : _a.getAttribute('viewBox')) !== null && _b !== void 0 ? _b : '0 0 24 24';
+    }
+    get isCustom() {
+        return this.type === 'custom';
+    }
+    get spriteElement() {
+        const { spriteId } = this;
+        if (!spriteId)
+            return;
+        return document.querySelector(`#${spriteId}`);
+    }
+    get spriteEventName() {
+        const { spriteFileName } = this;
+        if (!spriteFileName)
+            return;
+        return `tct-loaded-${spriteFileName}`;
+    }
+    get spriteFileName() {
+        if (this.isCustom)
+            return;
+        return iconMap[this.type];
+    }
+    get spriteId() {
+        const { spriteFileName } = this;
+        if (!spriteFileName)
+            return;
+        return `${this.spritePrefix}${spriteFileName}`;
+    }
+    checkForSprite() {
+        var _a;
+        const { spriteId, spriteEventName } = this;
+        const spriteContainer = getOrCreateSpriteContainer();
+        let spriteElement = document.getElementById(spriteId);
+        // If the sprite element exists and has the `data-loaded` attribute, we know we have everything we need
+        if ((_a = spriteElement === null || spriteElement === void 0 ? void 0 : spriteElement.hasAttribute('data-loaded')) !== null && _a !== void 0 ? _a : false) {
+            this.cloneSpriteNode();
+            return true;
+        }
+        // If the sprite element exists but does not have the `data-loaded` attribute, we know it's being loaded
+        // We'll listen for the event that will be dispatched when the sprite is loaded
+        spriteContainer.addEventListener(spriteEventName, () => {
+            this.cloneSpriteNode();
+        }, { once: true });
+        // If the sprite element exists, we know it's being loaded and will be handled by the event listener
+        if (spriteElement)
+            return true;
+        // If sprite element does not exist, create a placeholder
+        // This will let other icons know the sprite is being loaded
+        spriteElement = document.createElement('div');
+        spriteElement.id = spriteId;
+        spriteContainer.appendChild(spriteElement);
+        return false;
+    }
+    cloneSpriteNode() {
+        const spriteNode = document.getElementById(`tct-${this.type}`);
+        this.iconClone = spriteNode ? spriteNode.cloneNode(true) : undefined;
+    }
+    async fetchSprite() {
+        const { spriteFileName, spriteId, spriteEventName } = this;
+        const spriteExists = this.checkForSprite();
+        if (spriteExists)
+            return;
+        if (!spriteFileName)
+            return;
+        const spritePath = getAssetPath(`assets/${spriteFileName}.symbol.svg`);
+        const response = await fetch(spritePath);
+        const data = await response.text();
+        const wrappingDiv = document.createElement('div');
+        wrappingDiv.innerHTML = data;
+        const svg = wrappingDiv.querySelector('svg');
+        svg.id = spriteId;
+        svg.setAttribute('data-loaded', '');
+        let { spriteElement } = this;
+        if ((spriteElement === null || spriteElement === void 0 ? void 0 : spriteElement.tagName) === 'SVG')
+            return;
+        if (typeof spriteElement.replaceWith === 'function') {
+            spriteElement.replaceWith(svg);
+        }
+        else {
+            spriteElement.parentNode.replaceChild(svg, spriteElement);
+        }
+        spriteElement = document.getElementById(spriteId);
+        spriteElement.dispatchEvent(new CustomEvent(spriteEventName, { bubbles: true }));
+    }
+    setCustomSVGAttrs() {
+        const innerSVG = this.hostElement.querySelector('svg');
+        if (!innerSVG)
+            return;
+        innerSVG.setAttribute('role', 'img');
+        innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        const { label } = this;
+        if (label) {
+            const title = document.createElement('title');
+            const labelId = `label-${createGuid()}`;
+            title.id = labelId;
+            title.textContent = label;
+            innerSVG.appendChild(title);
+            innerSVG.setAttribute('aria-labelledby', labelId);
+        }
+        else {
+            innerSVG.setAttribute('aria-hidden', 'true');
+        }
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        const { label, type } = this;
+        return this.isCustom ? (h("slot", null)) : (h("svg", { "aria-hidden": !!label ? undefined : 'true', role: !!label ? 'img' : undefined, "aria-labelledby": !!label ? 'label' : undefined, viewBox: this.iconCloneViewBox, xmlns: "http://www.w3.org/2000/svg", class: this.spriteFileName }, !!label && h("title", { id: "label" }, label), !!type && h("use", { ref: el => (this.spriteUse = el) }), h("g", { ref: el => (this.spriteGroup = el) })));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "type": ["handleIcon"]
+    }; }
+};
+Q2Icon.style = q2IconCss;
+
+export { Q2Icon as q2_icon };
+//# sourceMappingURL=q2-icon.entry.js.map
+
+//# sourceMappingURL=q2-icon.entry.js.map