@italia/icon 0.0.1-alpha.0

package/dist/src/it-icon.js

@@ -0,0 +1,802 @@
+import { directive, Directive } from 'lit/directive.js';
+import { LitElement, css, nothing, svg, html } from 'lit';
+import { property, state, query, customElement } from 'lit/decorators.js';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __decorate(decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+function __metadata(metadataKey, metadataValue) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Form validation status.
+ */
+var VALIDATION_STATUS;
+(function (VALIDATION_STATUS) {
+    /**
+     * One indicating no validation error.
+     */
+    VALIDATION_STATUS["NO_ERROR"] = "";
+    /**
+     * One indicating missing required value.
+     */
+    VALIDATION_STATUS["ERROR_REQUIRED"] = "required";
+})(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
+
+class SetAttributesDirective extends Directive {
+    update(part, [attributes]) {
+        const el = part.element;
+        for (const [name, value] of Object.entries(attributes)) {
+            if (value != null)
+                el.setAttribute(name, value);
+            else
+                el.removeAttribute(name);
+        }
+        return null;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    render(_attributes) {
+        return null;
+    }
+}
+/* How to use:
+
+<textarea ${setAttributes(this._ariaAttributes)} ... />
+*/
+directive(SetAttributesDirective);
+
+const connectedElements = new Set();
+if (window && !window.translations) {
+    window.translations = new Map();
+}
+const { translations } = window;
+const isClient = typeof MutationObserver !== 'undefined' &&
+    typeof document !== 'undefined' &&
+    typeof document.documentElement !== 'undefined';
+/** Updates all localized elements that are currently connected */
+function update() {
+    if (isClient) {
+        document.documentElement.dir || 'ltr';
+        document.documentElement.lang || navigator.language;
+    }
+    [...connectedElements.keys()].forEach((el) => {
+        const litEl = el;
+        if (typeof litEl.requestUpdate === 'function') {
+            litEl.requestUpdate();
+        }
+    });
+}
+if (isClient) {
+    const documentElementObserver = new MutationObserver(update);
+    document.documentElement.dir || 'ltr';
+    document.documentElement.lang || navigator.language;
+    // Watch for changes on <html lang>
+    documentElementObserver.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['dir', 'lang'],
+    });
+}
+/** Registers one or more translations */
+function registerTranslation(...translation) {
+    translation.forEach((t) => {
+        const code = t.$code.toLowerCase();
+        if (translations.has(code)) {
+            // Merge translations that share the same language code
+            translations.set(code, { ...translations.get(code), ...t });
+        }
+        else {
+            translations.set(code, t);
+        }
+    });
+    update();
+}
+window.registerTranslation = registerTranslation;
+
+/* eslint-disable no-console */
+class Logger {
+    constructor(tag) {
+        this.tag = tag;
+    }
+    format(level, msg) {
+        return [`[${this.tag}] ${msg}`];
+    }
+    warn(msg) {
+        console.warn(...this.format('warn', msg));
+    }
+    error(msg) {
+        console.error(...this.format('error', msg));
+    }
+    info(msg) {
+        console.info(...this.format('info', msg));
+    }
+}
+
+/**
+ * Factory function per creare una base class estendibile
+ * con stili personalizzati.
+ */
+class BaseComponent extends LitElement {
+    constructor() {
+        super();
+        this._ariaAttributes = {}; // tutti gli attributi aria-* passati al Web component
+        this.logger = new Logger(this.tagName.toLowerCase());
+    }
+    // eslint-disable-next-line class-methods-use-this
+    generateId(prefix) {
+        return `${prefix}-${Math.random().toString(36).slice(2)}`;
+    }
+    // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+    addFocus(element) {
+        // new TrackFocus(element); // per il momento è stato disattivato perchè ci sono le pseudo classi ::focus-visible per fare quello che fa TrackFocus. Si possono aggiungere regole css in bsi-italia 3 dato che stiamo facendo una breaking release di bsi.
+    }
+    // eslint-disable-next-line class-methods-use-this
+    composeClass(...classes) {
+        let composedClass = '';
+        classes
+            .filter((c) => c.length > 0)
+            .forEach((newClass) => {
+            composedClass += ` ${newClass}`;
+        });
+        return composedClass.trim();
+    }
+    getAriaAttributes() {
+        for (const attr of this.getAttributeNames()) {
+            if (attr.startsWith('aria-')) {
+                this._ariaAttributes[attr] = this.getAttribute(attr);
+            }
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback?.();
+        this.getAriaAttributes();
+        // generate internal _id
+        const prefix = this.id?.length > 0 ? this.id : this.tagName.toLowerCase();
+        this._id = this.generateId(prefix);
+    }
+}
+
+const registry = {
+    'it-android-square': () => import('../it-android-square-DfqyrO5U.js'),
+    'it-android': () => import('../it-android-CGxOWsaS.js'),
+    'it-apple-square': () => import('../it-apple-square-CNoIXb-Z.js'),
+    'it-apple': () => import('../it-apple-P7QW_1Zs.js'),
+    'it-arrow-down-circle': () => import('../it-arrow-down-circle-DRWh9RJ_.js'),
+    'it-arrow-down-triangle': () => import('../it-arrow-down-triangle-BKTwp33c.js'),
+    'it-arrow-down': () => import('../it-arrow-down-hjJ5QmuD.js'),
+    'it-arrow-left-circle': () => import('../it-arrow-left-circle-Dmp8ijvW.js'),
+    'it-arrow-left-triangle': () => import('../it-arrow-left-triangle-cGF4Zctt.js'),
+    'it-arrow-left': () => import('../it-arrow-left-DBgaUG7B.js'),
+    'it-arrow-right-circle': () => import('../it-arrow-right-circle-CBc1nFG0.js'),
+    'it-arrow-right-triangle': () => import('../it-arrow-right-triangle-C6efeUG2.js'),
+    'it-arrow-right': () => import('../it-arrow-right-Bc7F_HOe.js'),
+    'it-arrow-up-circle': () => import('../it-arrow-up-circle-EJbIj1-3.js'),
+    'it-arrow-up-triangle': () => import('../it-arrow-up-triangle-DQJaSUOi.js'),
+    'it-arrow-up': () => import('../it-arrow-up-CHFXAycK.js'),
+    'it-ban': () => import('../it-ban-CdIzAxSs.js'),
+    'it-behance': () => import('../it-behance-Ok_4lDQZ.js'),
+    'it-bluesky': () => import('../it-bluesky-CI9ZM6e1.js'),
+    'it-bookmark': () => import('../it-bookmark-BFfUQBqO.js'),
+    'it-box': () => import('../it-box-BVGtGs1p.js'),
+    'it-burger': () => import('../it-burger-D9BVNtVP.js'),
+    'it-calendar': () => import('../it-calendar-Cwdx5gUb.js'),
+    'it-camera': () => import('../it-camera-Cu_i0s2L.js'),
+    'it-car': () => import('../it-car-BiMEZwAa.js'),
+    'it-card': () => import('../it-card-DZhpkuPN.js'),
+    'it-cart': () => import('../it-cart-DFu9Alt2.js'),
+    'it-chart-line': () => import('../it-chart-line-BkdxX107.js'),
+    'it-check-circle': () => import('../it-check-circle-BjvSPVge.js'),
+    'it-check': () => import('../it-check-DzQL86G9.js'),
+    'it-chevron-left': () => import('../it-chevron-left-j1tPYBdS.js'),
+    'it-chevron-right': () => import('../it-chevron-right-BcPgb7pE.js'),
+    'it-clip': () => import('../it-clip-B2EwtAEB.js'),
+    'it-clock': () => import('../it-clock-DMGNSkzq.js'),
+    'it-close-big': () => import('../it-close-big-DiuS-VNr.js'),
+    'it-close-circle': () => import('../it-close-circle-C3WkuIQ0.js'),
+    'it-close': () => import('../it-close-CiA9lXtc.js'),
+    'it-code-circle': () => import('../it-code-circle-D5WVuEn4.js'),
+    'it-collapse': () => import('../it-collapse-DedzUAzu.js'),
+    'it-comment': () => import('../it-comment-CFNsPq26.js'),
+    'it-copy': () => import('../it-copy-BKoAUYMx.js'),
+    'it-delete': () => import('../it-delete-BRl41-_G.js'),
+    'it-designers-italia': () => import('../it-designers-italia-C4NEUsVF.js'),
+    'it-download': () => import('../it-download-CVUEI0yr.js'),
+    'it-error': () => import('../it-error-DxMZc_6a.js'),
+    'it-exchange-circle': () => import('../it-exchange-circle-K9BZ9x3-.js'),
+    'it-expand': () => import('../it-expand-BOgVeR4w.js'),
+    'it-external-link': () => import('../it-external-link-EQbtOfEU.js'),
+    'it-facebook-square': () => import('../it-facebook-square-DzG2jfFe.js'),
+    'it-facebook': () => import('../it-facebook-BWE4v4O9.js'),
+    'it-figma-square': () => import('../it-figma-square-CbtavA_h.js'),
+    'it-figma': () => import('../it-figma-ayNovoW6.js'),
+    'it-file-audio': () => import('../it-file-audio-DfjfNE2c.js'),
+    'it-file-compressed': () => import('../it-file-compressed-BdL256I7.js'),
+    'it-file-csv': () => import('../it-file-csv-B65pqfER.js'),
+    'it-file-docx': () => import('../it-file-docx-zhJTBltS.js'),
+    'it-file-image': () => import('../it-file-image-CR9vISp3.js'),
+    'it-file-json': () => import('../it-file-json-DP1chXDD.js'),
+    'it-file-odp': () => import('../it-file-odp-CMJkW8AU.js'),
+    'it-file-ods': () => import('../it-file-ods-CSXIpods.js'),
+    'it-file-odt': () => import('../it-file-odt-BCQi6KOY.js'),
+    'it-file-pdf-ext': () => import('../it-file-pdf-ext-q7BV_sNG.js'),
+    'it-file-pdf': () => import('../it-file-pdf-CJHLU35Y.js'),
+    'it-file-ppt': () => import('../it-file-ppt-Lt5D5W4Z.js'),
+    'it-file-sheet': () => import('../it-file-sheet-BKnNyH-z.js'),
+    'it-file-signed': () => import('../it-file-signed-BRDmitPQ.js'),
+    'it-file-slides': () => import('../it-file-slides-CF66Gxkw.js'),
+    'it-file-txt': () => import('../it-file-txt-Bg66gff7.js'),
+    'it-file-video': () => import('../it-file-video-DdQOSQKz.js'),
+    'it-file-xlsx': () => import('../it-file-xlsx-DEESTwtq.js'),
+    'it-file-xml': () => import('../it-file-xml-rpj0hTY6.js'),
+    'it-file': () => import('../it-file-BxbypKZb.js'),
+    'it-files': () => import('../it-files-CumaPxbC.js'),
+    'it-flag': () => import('../it-flag-BBHqX3a7.js'),
+    'it-flickr-square': () => import('../it-flickr-square-Bygoby8_.js'),
+    'it-flickr': () => import('../it-flickr-0bB7B4XG.js'),
+    'it-folder': () => import('../it-folder-CScH9ihQ.js'),
+    'it-fullscreen': () => import('../it-fullscreen-BspUXrZa.js'),
+    'it-funnel': () => import('../it-funnel-C2f_AIYS.js'),
+    'it-github': () => import('../it-github-WW8XzWj3.js'),
+    'it-google': () => import('../it-google-G_PvkjBf.js'),
+    'it-hearing': () => import('../it-hearing-COVVIjZc.js'),
+    'it-help-circle': () => import('../it-help-circle-JafiAkJ_.js'),
+    'it-help': () => import('../it-help-Zh8IWIOf.js'),
+    'it-horn': () => import('../it-horn-47v7fbsN.js'),
+    'it-inbox': () => import('../it-inbox-BijAKZAa.js'),
+    'it-info-circle': () => import('../it-info-circle-CRgTvswq.js'),
+    'it-instagram': () => import('../it-instagram-DIHoCYgS.js'),
+    'it-key': () => import('../it-key-ChlMIByl.js'),
+    'it-less-circle': () => import('../it-less-circle-B-1frsy8.js'),
+    'it-link': () => import('../it-link-Cx0Ak5EZ.js'),
+    'it-linkedin-square': () => import('../it-linkedin-square-DNi1kKUs.js'),
+    'it-linkedin': () => import('../it-linkedin-DlE9mQU5.js'),
+    'it-list': () => import('../it-list-pNuIE6eo.js'),
+    'it-lock': () => import('../it-lock-yOq-wwxl.js'),
+    'it-locked': () => import('../it-locked-Cy2s-CSD.js'),
+    'it-logout': () => import('../it-logout-CY7_FEMN.js'),
+    'it-mail-open': () => import('../it-mail-open-Ch8H4FPa.js'),
+    'it-mail': () => import('../it-mail-5j30YG84.js'),
+    'it-map-marker-circle': () => import('../it-map-marker-circle-BBB_9zOZ.js'),
+    'it-map-marker-minus': () => import('../it-map-marker-minus-iL3qC8X4.js'),
+    'it-map-marker-plus': () => import('../it-map-marker-plus-0HvYHiyj.js'),
+    'it-map-marker': () => import('../it-map-marker-Ce2WHDc5.js'),
+    'it-mastodon-square': () => import('../it-mastodon-square-D4jUZcO1.js'),
+    'it-mastodon': () => import('../it-mastodon-u9vJ54XP.js'),
+    'it-maximize-alt': () => import('../it-maximize-alt-B7r2308X.js'),
+    'it-maximize': () => import('../it-maximize-CcyYylk6.js'),
+    'it-medium-square': () => import('../it-medium-square-DNjf0CIV.js'),
+    'it-medium': () => import('../it-medium-CBQiq3iZ.js'),
+    'it-minimize': () => import('../it-minimize-BC87wdS6.js'),
+    'it-minus-circle': () => import('../it-minus-circle-Bx9sZMXD.js'),
+    'it-minus': () => import('../it-minus-1sHTR5AZ.js'),
+    'it-moodle-square': () => import('../it-moodle-square-DhnTNCIv.js'),
+    'it-moodle': () => import('../it-moodle-BTeQpxDV.js'),
+    'it-more-actions': () => import('../it-more-actions-hFPfNc6s.js'),
+    'it-more-items': () => import('../it-more-items-CbPqsuSY.js'),
+    'it-note': () => import('../it-note-D8SqkWrQ.js'),
+    'it-open-source': () => import('../it-open-source-BiMRfYSR.js'),
+    'it-pa': () => import('../it-pa-CCcbo1ZV.js'),
+    'it-password-invisible': () => import('../it-password-invisible-4wTCzXFL.js'),
+    'it-password-visible': () => import('../it-password-visible-PDoUihUc.js'),
+    'it-pencil': () => import('../it-pencil-D5oaABq-.js'),
+    'it-piattaforme': () => import('../it-piattaforme-CgJB3YLa.js'),
+    'it-pin': () => import('../it-pin-DfKX1now.js'),
+    'it-pinterest-square': () => import('../it-pinterest-square-CU5uyOE-.js'),
+    'it-pinterest': () => import('../it-pinterest-CzVyzVYr.js'),
+    'it-plug': () => import('../it-plug-BMA_ZSK6.js'),
+    'it-plus-circle': () => import('../it-plus-circle-cIx_LkOv.js'),
+    'it-plus': () => import('../it-plus-C0bEoXIO.js'),
+    'it-presentation': () => import('../it-presentation-Bv2tmr0P.js'),
+    'it-print': () => import('../it-print-fHC_jbNf.js'),
+    'it-quora-square': () => import('../it-quora-square-1i1zt9IJ.js'),
+    'it-quora': () => import('../it-quora-BMQ4xoD1.js'),
+    'it-reddit-square': () => import('../it-reddit-square-DaPG0Mub.js'),
+    'it-reddit': () => import('../it-reddit-BpicjY6C.js'),
+    'it-refresh': () => import('../it-refresh-B4EmBigI.js'),
+    'it-restore': () => import('../it-restore-6-7X2Qfu.js'),
+    'it-rss-square': () => import('../it-rss-square-DDxWYzTB.js'),
+    'it-rss': () => import('../it-rss-CvtsNYf3.js'),
+    'it-search': () => import('../it-search-DalK3rlx.js'),
+    'it-settings': () => import('../it-settings-13H0AbvP.js'),
+    'it-share': () => import('../it-share-BLdy8bcU.js'),
+    'it-sign': () => import('../it-sign-DTz5eFiv.js'),
+    'it-slack-square': () => import('../it-slack-square-CcrSJfaB.js'),
+    'it-slack': () => import('../it-slack-Bo5VXuy8.js'),
+    'it-snapchat-square': () => import('../it-snapchat-square-RELoHIXG.js'),
+    'it-snapchat': () => import('../it-snapchat-DR2q7-eJ.js'),
+    'it-software': () => import('../it-software-CvXTmJmV.js'),
+    'it-spotify': () => import('../it-spotify-rbBp6yUH.js'),
+    'it-stackexchange-square': () => import('../it-stackexchange-square-Dmkt_1eY.js'),
+    'it-stackexchange': () => import('../it-stackexchange-BBgFNGzM.js'),
+    'it-stackoverflow-square': () => import('../it-stackoverflow-square-Dc63Kz24.js'),
+    'it-stackoverflow': () => import('../it-stackoverflow-CuCI-bn1.js'),
+    'it-star-full': () => import('../it-star-full-klirYUuR.js'),
+    'it-star-outline': () => import('../it-star-outline-DVg7wfrN.js'),
+    'it-team-digitale': () => import('../it-team-digitale-5kDifKOv.js'),
+    'it-telegram': () => import('../it-telegram-sJWN1tJ6.js'),
+    'it-telephone': () => import('../it-telephone-Z7Azcb5m.js'),
+    'it-threads-square': () => import('../it-threads-square-Bf702vNt.js'),
+    'it-threads': () => import('../it-threads-ChqMOQN8.js'),
+    'it-tiktok-square': () => import('../it-tiktok-square-Bg380BDO.js'),
+    'it-tiktok': () => import('../it-tiktok-C9pmFxx7.js'),
+    'it-tool': () => import('../it-tool-CNElwkSY.js'),
+    'it-twitter-square': () => import('../it-twitter-square-CAtpMN9W.js'),
+    'it-twitter': () => import('../it-twitter-DP7nO2uq.js'),
+    'it-unlocked': () => import('../it-unlocked-CeTVcA9L.js'),
+    'it-upload': () => import('../it-upload-DF9h0FfD.js'),
+    'it-user': () => import('../it-user-DxvTXC8y.js'),
+    'it-video': () => import('../it-video-lLpTTp6k.js'),
+    'it-vimeo-square': () => import('../it-vimeo-square-CJdj4meE.js'),
+    'it-vimeo': () => import('../it-vimeo-BY4lsy3M.js'),
+    'it-warning-circle': () => import('../it-warning-circle-fnlVt93l.js'),
+    'it-warning': () => import('../it-warning-C7tNfcHA.js'),
+    'it-whatsapp-square': () => import('../it-whatsapp-square-BZFa1i__.js'),
+    'it-whatsapp': () => import('../it-whatsapp-BmcvUOkQ.js'),
+    'it-wifi': () => import('../it-wifi-B9w_AYy4.js'),
+    'it-youtube': () => import('../it-youtube-DCwiktms.js'),
+    'it-zoom-in': () => import('../it-zoom-in-DWHll7qe.js'),
+    'it-zoom-out': () => import('../it-zoom-out-DVqgWM8m.js')
+};
+/**
+ * Get a dynamic icon loader by name.
+ */
+const getIcon = (name) => registry[name];
+
+var styles = css`/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** 1 ****************************************/
+/***************************** 2 ****************************************/
+/***************************** 3 ****************************************/
+/***************************** NEUTRAL 1 ****************************************/
+/***************************** NEUTRAL 2 ****************************************/
+/***************************** NEUTRAL 2 / 3 ****************************************/
+.icon {
+  width: var(--bs-icon-size-m);
+  height: var(--bs-icon-size-m);
+  fill: var(--bs-icon-default);
+  vertical-align: middle;
+}
+.icon.icon-padded {
+  margin: 8px;
+}
+.icon.icon-xs {
+  width: var(--bs-icon-size-xs);
+  height: var(--bs-icon-size-xs);
+}
+.icon.icon-xs.icon-padded {
+  margin: 4px;
+}
+.icon.icon-sm {
+  width: var(--bs-icon-size-s);
+  height: var(--bs-icon-size-s);
+}
+.icon.icon-sm.icon-padded {
+  margin: 6px;
+}
+.icon.icon-lg {
+  width: var(--bs-icon-size-l);
+  height: var(--bs-icon-size-l);
+}
+.icon.icon-lg.icon-padded {
+  margin: 12px;
+}
+.icon.icon-xl {
+  width: var(--bs-icon-size-xl);
+  height: var(--bs-icon-size-xl);
+}
+.icon.icon-xl.icon-padded {
+  margin: 16px;
+}
+
+.icon-primary {
+  fill: var(--bs-icon-primary);
+}
+
+.icon-secondary {
+  fill: var(--bs-icon-secondary);
+}
+
+.icon-success {
+  fill: var(--bs-icon-success);
+}
+
+.icon-warning {
+  fill: var(--bs-icon-warning);
+}
+
+.icon-danger {
+  fill: var(--bs-icon-danger);
+}
+
+.icon-inverse {
+  fill: var(--bs-icon-inverse);
+}
+
+.icon-light {
+  fill: var(--bs-icon-inverse);
+}
+
+.icon-disabled {
+  fill: var(--bs-icon-disabled);
+}
+
+:root {
+  --bs-rounded-icon-size: var(--it-icon-size-s);
+}
+
+.rounded-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-rounded-icon-size);
+  height: var(--bs-rounded-icon-size);
+  background-color: var(--bs-icon-inverse);
+  border-radius: var(--bs-radius-circle);
+}
+.rounded-icon.rounded-primary {
+  background-color: var(--bs-icon-primary);
+}
+.rounded-icon.rounded-secondary {
+  background-color: var(--bs-icon-secondary);
+}
+.rounded-icon.rounded-success {
+  background-color: var(--bs-icon-success);
+}
+.rounded-icon.rounded-warning {
+  background-color: var(--bs-icon-warning);
+}
+.rounded-icon.rounded-danger {
+  background-color: var(--bs-icon-danger);
+}
+.rounded-icon.rounded-inverse {
+  background-color: var(--bs-icon-inverse);
+}
+.rounded-icon.rounded-light {
+  background-color: var(--bs-icon-inverse);
+}
+.rounded-icon.rounded-disabled {
+  background-color: var(--bs-icon-disabled);
+}
+.rounded-icon .icon {
+  margin-right: 0;
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
+.bg-primary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-secondary {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-success {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-info {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-warning {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-danger {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-light {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-dark {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-black {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-white {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-100 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-100-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-200 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-200-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-300 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-300-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-400 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-400-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-500 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-500-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-600 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-600-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-700 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-700-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-800 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-800-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-900 {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-900-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-body {
+  --bs-bg-opacity: 1;
+  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
+}
+
+.bg-transparent {
+  --bs-bg-opacity: 1;
+  background-color: transparent !important;
+}
+
+:host {
+  display: inline-block;
+}
+
+.icon-white {
+  fill: #fff !important;
+}`;
+
+let ItIcon = class ItIcon extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        // @property({ type: String }) background?: Colors;
+        this.align = 'middle';
+        this.label = '';
+        this.padded = false;
+    }
+    async updated(changedProps) {
+        if (changedProps.has('name') && this.name) {
+            const loader = getIcon(this.name);
+            if (loader) {
+                const raw = (await loader()).default;
+                this.parseAndStoreSvg(raw);
+            }
+        }
+        if (changedProps.has('src') && this.src) {
+            await this.loadSvgFromUrl(this.src);
+        }
+        if (changedProps.has('label')) {
+            this.handleTitleId();
+        }
+        if (changedProps.has('label') ||
+            changedProps.has('size') ||
+            changedProps.has('color') ||
+            // changedProps.has('background') ||
+            changedProps.has('padded') ||
+            changedProps.has('role') ||
+            changedProps.has('align')) {
+            this.updateSvgAttributes();
+        }
+    }
+    handleTitleId() {
+        if (this.label) {
+            if (!this.titleId) {
+                this.titleId = `icon-label-${crypto.randomUUID()}`;
+            }
+        }
+        else {
+            this.titleId = undefined;
+        }
+    }
+    async loadSvgFromUrl(url) {
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                throw new Error(`Failed to load SVG from ${url} (status: ${res.status})`);
+            const raw = await res.text();
+            this.parseAndStoreSvg(raw);
+        }
+        catch (e) {
+            this.svgElement = undefined;
+            this.announceSvgLoadError();
+        }
+    }
+    announceSvgLoadError() {
+        this.dispatchEvent(new Event('error', {
+            bubbles: false,
+            composed: false,
+            cancelable: false,
+        }));
+    }
+    parseAndStoreSvg(raw) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(raw, 'image/svg+xml');
+        const _svg = doc.documentElement;
+        this.svgElement = _svg;
+        this.updateSvgAttributes();
+    }
+    applySvgAttributes(svgEl) {
+        svgEl.removeAttribute('width');
+        svgEl.removeAttribute('height');
+        const classList = this.updateClasses();
+        svgEl.setAttribute('class', classList);
+        svgEl.setAttribute('part', 'icon');
+        // Accessibility logic:
+        // - If a `label` is provided:
+        //     - The icon is accessible to assistive technologies.
+        //     - Remove aria-hidden attribute if it exists
+        //     - Sets `role="img"` to indicate the SVG is an image.
+        //     - Adds a <title> element with the label text inside the SVG.
+        //     - Sets `aria-labelledby` to reference the <title> for screen readers.
+        // - If no `label` is provided:
+        //     - The icon is treated as decorative and ignored by assistive technologies.
+        //     - Sets `aria-hidden="true".
+        //     - Sets `role="presentation"` to indicate the SVG is purely decorative.
+        //     - Removes any <title> and `aria-labelledby` attributes from the SVG.
+        if (this.label) {
+            svgEl.removeAttribute('aria-hidden');
+            svgEl.setAttribute('role', 'img');
+            // Remove previous title/aria-labelledby
+            svgEl.removeAttribute('aria-labelledby');
+            svgEl.querySelectorAll('title').forEach((t) => t.remove());
+            // Add title and aria-labelledby for screen readers
+            if (this.titleId) {
+                const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title');
+                titleEl.id = this.titleId;
+                titleEl.textContent = this.label;
+                svgEl.prepend(titleEl);
+                svgEl.setAttribute('aria-labelledby', this.titleId);
+            }
+        }
+        else {
+            svgEl.setAttribute('aria-hidden', 'true');
+            svgEl.setAttribute('role', 'presentation');
+            svgEl.removeAttribute('aria-labelledby');
+            svgEl.querySelectorAll('title').forEach((t) => t.remove());
+        }
+    }
+    updateSvgAttributes() {
+        if (!this.svgElement)
+            return;
+        this.applySvgAttributes(this.svgElement);
+    }
+    updateClasses() {
+        return this.composeClass('icon', this.size ? `icon-${this.size}` : '', this.color ? `icon-${this.color}` : '', 
+        // this.background ? `bg-${this.background}` : '',
+        this.align ? `align-${this.align}` : '', this.padded ? `icon-padded` : '');
+    }
+    handleSlotChange() {
+        const nodes = this.slotEl.assignedNodes({ flatten: true });
+        const _svg = nodes.find((node) => node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'svg');
+        if (_svg) {
+            this.applySvgAttributes(_svg);
+        }
+    }
+    render() {
+        return html `
+      <slot @slotchange=${this.handleSlotChange}>${this.svgElement ? svg `${this.svgElement}` : nothing}</slot>
+    `;
+    }
+};
+ItIcon.styles = styles;
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", Object)
+], ItIcon.prototype, "size", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ItIcon.prototype, "name", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ItIcon.prototype, "color", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ItIcon.prototype, "align", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], ItIcon.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], ItIcon.prototype, "padded", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], ItIcon.prototype, "src", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", HTMLElement)
+], ItIcon.prototype, "svgElement", void 0);
+__decorate([
+    query('slot'),
+    __metadata("design:type", HTMLSlotElement)
+], ItIcon.prototype, "slotEl", void 0);
+ItIcon = __decorate([
+    customElement('it-icon')
+], ItIcon);
+
+export { ItIcon };
+//# sourceMappingURL=it-icon.js.map