@triptease/tt-icon 1.2.4 → 1.3.1

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cjs/src/TtIcon.js

@@ -0,0 +1,98 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __decorate = (this && this.__decorate) || function (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;
+};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtIcon = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const Icons = __importStar(require("@triptease/icons"));
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const style_map_js_1 = require("lit/directives/style-map.js");
+const iconRegistry = Icons;
+class TtIcon extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 24;
+    }
+    render() {
+        if (!this.name) {
+            throw new Error('name attribute is required');
+        }
+        const svg = iconRegistry[this.name];
+        if (!svg) {
+            throw new Error(`Icon ${this.name} not found`);
+        }
+        const sizeInPx = `${this.size}px`;
+        return (0, lit_1.html) `<span
+      role=${this.label ? 'img' : 'presentation'}
+      aria-label="${this.label}"
+      style=${(0, style_map_js_1.styleMap)({
+            color: this.color,
+            width: sizeInPx,
+            height: sizeInPx,
+            display: 'inline-block',
+            lineHeight: 0,
+            verticalAlign: 'middle',
+        })}
+      >${(0, unsafe_svg_js_1.unsafeSVG)(svg)}</span
+    >`;
+    }
+}
+exports.TtIcon = TtIcon;
+TtIcon.styles = (0, lit_1.css) `
+    svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtIcon.prototype, "name", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtIcon.prototype, "label", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtIcon.prototype, "color", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Number })
+], TtIcon.prototype, "size", void 0);
+//# sourceMappingURL=TtIcon.js.map

package/dist/cjs/src/TtIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtIcon.js","sourceRoot":"","sources":["../../../src/TtIcon.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6BAA4C;AAC5C,qDAA6C;AAC7C,wDAA0C;AAC1C,gEAAyD;AACzD,8DAAuD;AAEvD,MAAM,YAAY,GAAG,KAA+B,CAAC;AAErD,MAAa,MAAO,SAAQ,gBAAU;IAAtC;;QAmBS,SAAI,GAAW,EAAE,CAAC;IA6B3B,CAAC;IA3BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;QAChD,CAAC;QAED,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;QACjD,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAElC,OAAO,IAAA,UAAI,EAAA;aACF,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc;oBAC5B,IAAI,CAAC,KAAK;cAChB,IAAA,uBAAQ,EAAC;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,QAAQ;SACxB,CAAC;SACC,IAAA,yBAAS,EAAC,GAAG,CAAC;MACjB,CAAC;IACL,CAAC;;AA/CH,wBAgDC;AA/CQ,aAAM,GAAG,IAAA,SAAG,EAAA;;;;;;GAMlB,AANY,CAMX;AAGK;IADN,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACK;AAGzB;IADN,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACM;AAG1B;IADN,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACM;AAG1B;IADN,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACF","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from '@triptease/icons';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst iconRegistry = Icons as Record<string, string>;\n\nexport class TtIcon extends LitElement {\n  static styles = css`\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: String })\n  public name: string | undefined;\n\n  @property({ type: String })\n  public label: string | undefined;\n\n  @property({ type: String })\n  public color: string | undefined;\n\n  @property({ type: Number })\n  public size: number = 24;\n\n  render() {\n    if (!this.name) {\n      throw new Error('name attribute is required');\n    }\n\n    const svg = iconRegistry[this.name];\n\n    if (!svg) {\n      throw new Error(`Icon ${this.name} not found`);\n    }\n\n    const sizeInPx = `${this.size}px`;\n\n    return html`<span\n      role=${this.label ? 'img' : 'presentation'}\n      aria-label=\"${this.label}\"\n      style=${styleMap({\n        color: this.color,\n        width: sizeInPx,\n        height: sizeInPx,\n        display: 'inline-block',\n        lineHeight: 0,\n        verticalAlign: 'middle',\n      })}\n      >${unsafeSVG(svg)}</span\n    >`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-icon': TtIcon;\n  }\n}\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtIcon = void 0;
+var tt_icon_js_1 = require("./tt-icon.js");
+Object.defineProperty(exports, "TtIcon", { enumerable: true, get: function () { return tt_icon_js_1.TtIcon; } });
+__exportStar(require("./types.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAsC;AAA7B,oGAAA,MAAM,OAAA;AACf,6CAA2B","sourcesContent":["export { TtIcon } from './tt-icon.js';\nexport * from './types.js';\n"]}

package/dist/cjs/src/tt-icon.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtIcon = void 0;
+const TtIcon_js_1 = require("./TtIcon.js");
+Object.defineProperty(exports, "TtIcon", { enumerable: true, get: function () { return TtIcon_js_1.TtIcon; } });
+if (typeof window !== 'undefined') {
+    if (!window.customElements.get('tt-icon')) {
+        window.customElements.define('tt-icon', TtIcon_js_1.TtIcon);
+    }
+}
+//# sourceMappingURL=tt-icon.js.map

package/dist/cjs/src/tt-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-icon.js","sourceRoot":"","sources":["../../../src/tt-icon.ts"],"names":[],"mappings":";;;AAAA,2CAAqC;AAQ5B,uFARA,kBAAM,OAQA;AANf,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;QAC1C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAM,CAAC,CAAC;IAClD,CAAC;AACH,CAAC","sourcesContent":["import { TtIcon } from './TtIcon.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-icon')) {\n    window.customElements.define('tt-icon', TtIcon);\n  }\n}\n\nexport { TtIcon };\n"]}

package/dist/cjs/src/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import IconManifest from '@triptease/icons/manifest.json' with { type: 'json' };\nimport { TtIcon } from './TtIcon.js';\n\ntype IconName = keyof typeof IconManifest;\n\ninterface TtIconExternalAttributes {\n  id?: string;\n  name: IconName;\n  label?: string;\n  color?: string;\n  size?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-icon': TtIcon;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-icon': TtIconExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-icon': TtIconExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/src/TtIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtIcon.js","sourceRoot":"","sources":["../../../src/TtIcon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,YAAY,GAAG,KAA+B,CAAC;AAErD,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAmBS,SAAI,GAAW,EAAE,CAAC;IA6B3B,CAAC;IA3BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;QAChD,CAAC;QAED,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;QACjD,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAElC,OAAO,IAAI,CAAA;aACF,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc;oBAC5B,IAAI,CAAC,KAAK;cAChB,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,QAAQ;SACxB,CAAC;SACC,SAAS,CAAC,GAAG,CAAC;MACjB,CAAC;IACL,CAAC;;AA9CM,aAAM,GAAG,GAAG,CAAA;;;;;;GAMlB,AANY,CAMX;AAGK;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACK;AAGzB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACM;AAG1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACM;AAG1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACF","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from '@triptease/icons';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst iconRegistry = Icons as Record<string, string>;\n\nexport class TtIcon extends LitElement {\n  static styles = css`\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: String })\n  public name: string | undefined;\n\n  @property({ type: String })\n  public label: string | undefined;\n\n  @property({ type: String })\n  public color: string | undefined;\n\n  @property({ type: Number })\n  public size: number = 24;\n\n  render() {\n    if (!this.name) {\n      throw new Error('name attribute is required');\n    }\n\n    const svg = iconRegistry[this.name];\n\n    if (!svg) {\n      throw new Error(`Icon ${this.name} not found`);\n    }\n\n    const sizeInPx = `${this.size}px`;\n\n    return html`<span\n      role=${this.label ? 'img' : 'presentation'}\n      aria-label=\"${this.label}\"\n      style=${styleMap({\n        color: this.color,\n        width: sizeInPx,\n        height: sizeInPx,\n        display: 'inline-block',\n        lineHeight: 0,\n        verticalAlign: 'middle',\n      })}\n      >${unsafeSVG(svg)}</span\n    >`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-icon': TtIcon;\n  }\n}\n"]}

package/dist/esm/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,cAAc,YAAY,CAAC","sourcesContent":["export { TtIcon } from './tt-icon.js';\nexport * from './types.js';\n"]}

package/dist/esm/src/tt-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-icon.js","sourceRoot":"","sources":["../../../src/tt-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;QAC1C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClD,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { TtIcon } from './TtIcon.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-icon')) {\n    window.customElements.define('tt-icon', TtIcon);\n  }\n}\n\nexport { TtIcon };\n"]}

package/dist/esm/src/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import IconManifest from '@triptease/icons/manifest.json' with { type: 'json' };\nimport { TtIcon } from './TtIcon.js';\n\ntype IconName = keyof typeof IconManifest;\n\ninterface TtIconExternalAttributes {\n  id?: string;\n  name: IconName;\n  label?: string;\n  color?: string;\n  size?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-icon': TtIcon;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-icon': TtIconExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-icon': TtIconExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}

package/dist/esm/test/tt-icon.test.d.ts

@@ -0,0 +1 @@
+import '../src/tt-icon.js';

package/dist/esm/test/tt-icon.test.js

@@ -0,0 +1,73 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import '../src/tt-icon.js';
+describe('TtIcon', () => {
+    it('should render with required properties', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Alert icon"></tt-icon> `);
+        expect(element).to.exist;
+        expect(element.name).to.equal('alert');
+        expect(element.label).to.equal('Alert icon');
+    });
+    it('should render SVG content', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Alert icon"></tt-icon> `);
+        const span = element.shadowRoot.querySelector('span[role="img"]');
+        const svg = span.querySelector('svg');
+        expect(span).to.exist;
+        expect(svg).to.exist;
+    });
+    it('should throw error when name is missing', async () => {
+        try {
+            await fixture(html ` <tt-icon label="Alert icon"></tt-icon> `);
+            expect.fail('Should have thrown an error');
+        }
+        catch (error) {
+            expect(error.message).to.include('name attribute is required');
+        }
+    });
+    it('should default to presentation role', async () => {
+        const element = await fixture(html ` <tt-icon name="alert"></tt-icon> `);
+        const span = element.shadowRoot.querySelector('span[role="presentation"]');
+        expect(span).to.exist;
+    });
+    it('should have role img when label is provided', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Alert"></tt-icon> `);
+        const span = element.shadowRoot.querySelector('span[role="img"]');
+        expect(span).to.exist;
+    });
+    it('should throw error for invalid icon name', async () => {
+        try {
+            await fixture(html ` <tt-icon name="nonexistent" label="Test"></tt-icon> `);
+            expect.fail('Should have thrown an error');
+        }
+        catch (error) {
+            expect(error.message).to.include('Icon nonexistent not found');
+        }
+    });
+    it('should default to size 24', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Alert icon"></tt-icon> `);
+        expect(element.size).to.equal(24);
+        const span = element.shadowRoot.querySelector('span[role="img"]');
+        expect(span.style.width).to.equal('24px');
+        expect(span.style.height).to.equal('24px');
+    });
+    it('should override hardcoded SVG dimensions with custom size', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Alert icon" size="16"></tt-icon> `);
+        const svg = element.shadowRoot.querySelector('svg');
+        const computedStyle = window.getComputedStyle(svg);
+        // The SVG should be scaled to 16px despite having width="20" in markup
+        expect(computedStyle.width).to.equal('16px');
+        expect(computedStyle.height).to.equal('16px');
+    });
+    it('should apply color when provided', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Alert icon" color="red"></tt-icon> `);
+        expect(element.color).to.equal('red');
+        const span = element.shadowRoot.querySelector('span[role="img"]');
+        expect(span.style.color).to.equal('red');
+    });
+    it('should have role="img" and aria-label', async () => {
+        const element = await fixture(html ` <tt-icon name="alert" label="Warning message"></tt-icon> `);
+        const span = element.shadowRoot.querySelector('span');
+        expect(span.getAttribute('role')).to.equal('img');
+        expect(span.getAttribute('aria-label')).to.equal('Warning message');
+    });
+});
+//# sourceMappingURL=tt-icon.test.js.map

package/dist/esm/test/tt-icon.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tt-icon.test.js","sourceRoot":"","sources":["../../../test/tt-icon.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect, fixture, html } from '@open-wc/testing';\nimport { TtIcon } from '../src/TtIcon.js';\nimport '../src/tt-icon.js';\n\ndescribe('TtIcon', () => {\n  it('should render with required properties', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Alert icon\"></tt-icon> `);\n\n    expect(element).to.exist;\n    expect(element.name).to.equal('alert');\n    expect(element.label).to.equal('Alert icon');\n  });\n\n  it('should render SVG content', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Alert icon\"></tt-icon> `);\n\n    const span = element.shadowRoot!.querySelector('span[role=\"img\"]');\n    const svg = span!.querySelector('svg');\n\n    expect(span).to.exist;\n    expect(svg).to.exist;\n  });\n\n  it('should throw error when name is missing', async () => {\n    try {\n      await fixture<TtIcon>(html` <tt-icon label=\"Alert icon\"></tt-icon> `);\n      expect.fail('Should have thrown an error');\n    } catch (error) {\n      expect((error as Error).message).to.include('name attribute is required');\n    }\n  });\n\n  it('should default to presentation role', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\"></tt-icon> `);\n\n    const span = element.shadowRoot!.querySelector('span[role=\"presentation\"]') as HTMLElement;\n\n    expect(span).to.exist;\n  });\n\n  it('should have role img when label is provided', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Alert\"></tt-icon> `);\n\n    const span = element.shadowRoot!.querySelector('span[role=\"img\"]') as HTMLElement;\n\n    expect(span).to.exist;\n  });\n\n  it('should throw error for invalid icon name', async () => {\n    try {\n      await fixture<TtIcon>(html` <tt-icon name=\"nonexistent\" label=\"Test\"></tt-icon> `);\n      expect.fail('Should have thrown an error');\n    } catch (error) {\n      expect((error as Error).message).to.include('Icon nonexistent not found');\n    }\n  });\n\n  it('should default to size 24', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Alert icon\"></tt-icon> `);\n\n    expect(element.size).to.equal(24);\n    const span = element.shadowRoot!.querySelector('span[role=\"img\"]') as HTMLElement;\n    expect(span.style.width).to.equal('24px');\n    expect(span.style.height).to.equal('24px');\n  });\n\n  it('should override hardcoded SVG dimensions with custom size', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Alert icon\" size=\"16\"></tt-icon> `);\n\n    const svg = element.shadowRoot!.querySelector('svg') as SVGElement;\n    const computedStyle = window.getComputedStyle(svg);\n\n    // The SVG should be scaled to 16px despite having width=\"20\" in markup\n    expect(computedStyle.width).to.equal('16px');\n    expect(computedStyle.height).to.equal('16px');\n  });\n\n  it('should apply color when provided', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Alert icon\" color=\"red\"></tt-icon> `);\n\n    expect(element.color).to.equal('red');\n    const span = element.shadowRoot!.querySelector('span[role=\"img\"]') as HTMLElement;\n    expect(span.style.color).to.equal('red');\n  });\n\n  it('should have role=\"img\" and aria-label', async () => {\n    const element = await fixture<TtIcon>(html` <tt-icon name=\"alert\" label=\"Warning message\"></tt-icon> `);\n\n    const span = element.shadowRoot!.querySelector('span');\n    expect(span!.getAttribute('role')).to.equal('img');\n    expect(span!.getAttribute('aria-label')).to.equal('Warning message');\n  });\n});\n"]}

package/package.json

@@ -3,32 +3,36 @@
   "description": "Webcomponent tt-icon following open-wc recommendations",
   "license": "MIT",
   "author": "@triptease",
-  "version": "1.2.4",
+  "version": "1.3.1",
   "type": "module",
-  "main": "dist/src/index.js",
-  "module": "dist/src/index.js",
+  "main": "dist/esm/src/index.js",
+  "module": "dist/esm/src/index.js",
   "exports": {
     ".": {
-      "import": "./dist/src/index.js",
-      "types": "./dist/src/types.d.ts"
+      "types": "./dist/esm/src/index.d.ts",
+      "import": "./dist/esm/src/index.js",
+      "require": "./dist/cjs/src/index.js"
     }
   },
   "files": [
-    "dist/src"
+    "dist/esm",
+    "dist/cjs"
   ],
   "scripts": {
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"web-dev-server\"",
     "build": "yarn build:node && yarn build:web",
     "build:web": "node ../../scripts/esbuild.mjs",
-    "build:node": "tsc && npm run analyze -- --exclude dist",
+    "build:esm": "tsc && npm run analyze -- --exclude dist",
+    "build:cjs": "tsc -p tsconfig.cjs.json && node ../../scripts/create-cjs-package.mjs",
+    "build:node": "yarn build:esm && yarn build:cjs",
     "build:node:watch": "tsc --watch",
-    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "yarn build:node && npm run analyze -- --exclude dist",
     "test": "tsc && wtr",
     "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\""
   },
   "dependencies": {
-    "@triptease/icons": "1.3.14",
+    "@triptease/icons": "1.4.0",
     "lit": "^3.1.4"
   },
   "devDependencies": {

package/dist/src/TtIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TtIcon.js","sourceRoot":"","sources":["../../src/TtIcon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,MAAM,YAAY,GAAG,KAA+B,CAAC;AAErD,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QAmBS,SAAI,GAAW,EAAE,CAAC;IA6B3B,CAAC;IA3BC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAC;QAChD,CAAC;QAED,MAAM,GAAG,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEpC,IAAI,CAAC,GAAG,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,QAAQ,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;QACjD,CAAC;QAED,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;QAElC,OAAO,IAAI,CAAA;aACF,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc;oBAC5B,IAAI,CAAC,KAAK;cAChB,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;YAChB,OAAO,EAAE,cAAc;YACvB,UAAU,EAAE,CAAC;YACb,aAAa,EAAE,QAAQ;SACxB,CAAC;SACC,SAAS,CAAC,GAAG,CAAC;MACjB,CAAC;IACL,CAAC;;AA9CM,aAAM,GAAG,GAAG,CAAA;;;;;;GAMlB,AANY,CAMX;AAGK;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACK;AAGzB;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACM;AAG1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCACM;AAG1B;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCACF","sourcesContent":["import { html, LitElement, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport * as Icons from '@triptease/icons';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nconst iconRegistry = Icons as Record<string, string>;\n\nexport class TtIcon extends LitElement {\n  static styles = css`\n    svg {\n      width: 100%;\n      height: 100%;\n      display: block;\n    }\n  `;\n\n  @property({ type: String })\n  public name: string | undefined;\n\n  @property({ type: String })\n  public label: string | undefined;\n\n  @property({ type: String })\n  public color: string | undefined;\n\n  @property({ type: Number })\n  public size: number = 24;\n\n  render() {\n    if (!this.name) {\n      throw new Error('name attribute is required');\n    }\n\n    const svg = iconRegistry[this.name];\n\n    if (!svg) {\n      throw new Error(`Icon ${this.name} not found`);\n    }\n\n    const sizeInPx = `${this.size}px`;\n\n    return html`<span\n      role=${this.label ? 'img' : 'presentation'}\n      aria-label=\"${this.label}\"\n      style=${styleMap({\n        color: this.color,\n        width: sizeInPx,\n        height: sizeInPx,\n        display: 'inline-block',\n        lineHeight: 0,\n        verticalAlign: 'middle',\n      })}\n      >${unsafeSVG(svg)}</span\n    >`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-icon': TtIcon;\n  }\n}\n"]}

package/dist/src/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,cAAc,YAAY,CAAC","sourcesContent":["export { TtIcon } from './tt-icon.js';\nexport * from './types.js';\n"]}

package/dist/src/tt-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tt-icon.js","sourceRoot":"","sources":["../../src/tt-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;QAC1C,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IAClD,CAAC;AACH,CAAC;AAED,OAAO,EAAE,MAAM,EAAE,CAAC","sourcesContent":["import { TtIcon } from './TtIcon.js';\n\nif (typeof window !== 'undefined') {\n  if (!window.customElements.get('tt-icon')) {\n    window.customElements.define('tt-icon', TtIcon);\n  }\n}\n\nexport { TtIcon };\n"]}

package/dist/src/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import IconManifest from '@triptease/icons/manifest.json' with { type: 'json' };\nimport { TtIcon } from './TtIcon.js';\n\ntype IconName = keyof typeof IconManifest;\n\ninterface TtIconExternalAttributes {\n  id?: string;\n  name: IconName;\n  label?: string;\n  color?: string;\n  size?: number;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-icon': TtIcon;\n  }\n\n  namespace JSX {\n    interface IntrinsicElements {\n      'tt-icon': TtIconExternalAttributes & { style?: string };\n    }\n  }\n\n  namespace React {\n    namespace JSX {\n      interface IntrinsicElements {\n        'tt-icon': TtIconExternalAttributes & {\n          ref?: React.Ref<unknown>;\n          style?: React.CSSProperties;\n        };\n      }\n    }\n  }\n}\n"]}