@slotted/angular 0.0.0-stage → 0.1.0-beta.0

package/fesm2022/slotted-angular-icon.mjs

@@ -0,0 +1,232 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, ChangeDetectionStrategy, Component, inject, HostAttributeToken, ViewEncapsulation } from '@angular/core';
+import { GLYPH_VIEW_BOX, GLYPHS } from '@slotted/core/glyph';
+
+let sequence = 0;
+/**
+ * Glyph is the library's own artwork, drawn as a real `<svg>`: the Lucide
+ * geometry `@slotted/core/glyph` holds, stroked or filled with `currentColor`.
+ * It goes inside a `slIcon` box, which owns the size, the colour, the
+ * alignment and the name; the glyph owns only the drawing. Every family draws
+ * its own icons — a close button's cross, a pager's chevrons — with this
+ * element, and never with a pseudo-element or a mask of its own.
+ *
+ * `solid` draws a status mark the way a tone's badge reads: the glyph's first
+ * shape filled, and the symbol inside it cut out of the fill by an SVG
+ * `<mask>`, so whatever lies behind shows through the symbol on any ground.
+ *
+ * The children carry the `svg:` namespace because the template is parsed apart
+ * from its host: an unprefixed `<path>` would be created as an HTML element.
+ */
+class SlGlyph {
+    /** One of the library's own icons: its glyph token without `--slotted-icon-`. */
+    name = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /**
+     * The first shape filled and the symbol cut out of it — a tone's status
+     * mark. For glyphs whose first shape encloses the rest (`circle-*`,
+     * `triangle-alert`).
+     */
+    solid = input(false, { ...(ngDevMode ? { debugName: "solid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    maskId = `sl-glyph-${String((sequence += 1))}`;
+    viewBox = GLYPH_VIEW_BOX;
+    drawing = computed(() => GLYPHS[this.name()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "drawing" }] : /* istanbul ignore next */ []));
+    symbol = computed(() => this.drawing().paths.slice(1), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "symbol" }] : /* istanbul ignore next */ []));
+    stroked = computed(() => this.drawing().paint === 'stroke', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stroked" }] : /* istanbul ignore next */ []));
+    transform = computed(() => {
+        const [dx, dy] = this.drawing().offset;
+        return dx === 0 && dy === 0 ? null : `translate(${dx} ${dy})`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlGlyph, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: SlGlyph, isStandalone: true, selector: "svg[slGlyph]", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, solid: { classPropertyName: "solid", publicName: "solid", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "aria-hidden": "true", "focusable": "false", "data-part": "glyph" }, properties: { "attr.data-glyph": "name()", "attr.viewBox": "viewBox", "attr.data-solid": "solid() ? '' : null", "attr.fill": "solid() ? null : stroked() ? 'none' : 'currentColor'", "attr.stroke": "!solid() && stroked() ? 'currentColor' : null", "attr.stroke-width": "!solid() && stroked() ? drawing().strokeWidth : null", "attr.stroke-linecap": "!solid() && stroked() ? 'round' : null", "attr.stroke-linejoin": "!solid() && stroked() ? 'round' : null" } }, ngImport: i0, template: `@if (solid()) {
+      <svg:defs>
+        <svg:mask
+          [attr.id]="maskId"
+          maskUnits="userSpaceOnUse"
+          x="-2"
+          y="-2"
+          width="28"
+          height="28"
+        >
+          <svg:rect x="-2" y="-2" width="28" height="28" fill="#fff" />
+          <svg:g
+            fill="none"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [attr.stroke-width]="drawing().strokeWidth"
+          >
+            @for (d of symbol(); track $index) {
+              <svg:path [attr.d]="d" />
+            }
+          </svg:g>
+        </svg:mask>
+      </svg:defs>
+    }
+    <svg:g [attr.transform]="transform()">
+      @if (solid()) {
+        <svg:path
+          [attr.d]="drawing().paths[0]"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          [attr.stroke-width]="drawing().strokeWidth"
+          [attr.mask]="'url(#' + maskId + ')'"
+        />
+      } @else {
+        @for (d of drawing().paths; track $index) {
+          <svg:path [attr.d]="d" />
+        }
+      }
+    </svg:g>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlGlyph, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'svg[slGlyph]',
+                    standalone: true,
+                    template: `@if (solid()) {
+      <svg:defs>
+        <svg:mask
+          [attr.id]="maskId"
+          maskUnits="userSpaceOnUse"
+          x="-2"
+          y="-2"
+          width="28"
+          height="28"
+        >
+          <svg:rect x="-2" y="-2" width="28" height="28" fill="#fff" />
+          <svg:g
+            fill="none"
+            stroke="#000"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            [attr.stroke-width]="drawing().strokeWidth"
+          >
+            @for (d of symbol(); track $index) {
+              <svg:path [attr.d]="d" />
+            }
+          </svg:g>
+        </svg:mask>
+      </svg:defs>
+    }
+    <svg:g [attr.transform]="transform()">
+      @if (solid()) {
+        <svg:path
+          [attr.d]="drawing().paths[0]"
+          fill="currentColor"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          [attr.stroke-width]="drawing().strokeWidth"
+          [attr.mask]="'url(#' + maskId + ')'"
+        />
+      } @else {
+        @for (d of drawing().paths; track $index) {
+          <svg:path [attr.d]="d" />
+        }
+      }
+    </svg:g>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        'aria-hidden': 'true',
+                        focusable: 'false',
+                        'data-part': 'glyph',
+                        '[attr.data-glyph]': 'name()',
+                        '[attr.viewBox]': 'viewBox',
+                        '[attr.data-solid]': "solid() ? '' : null",
+                        '[attr.fill]': "solid() ? null : stroked() ? 'none' : 'currentColor'",
+                        '[attr.stroke]': "!solid() && stroked() ? 'currentColor' : null",
+                        '[attr.stroke-width]': '!solid() && stroked() ? drawing().strokeWidth : null',
+                        '[attr.stroke-linecap]': "!solid() && stroked() ? 'round' : null",
+                        '[attr.stroke-linejoin]': "!solid() && stroked() ? 'round' : null",
+                    },
+                }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], solid: [{ type: i0.Input, args: [{ isSignal: true, alias: "solid", required: false }] }] } });
+
+/**
+ * `inherit` is the absence of a colour rather than a colour of its own, so it
+ * removes the attribute and lets the surface decide.
+ */
+function toneAttribute(tone) {
+    return tone === undefined || tone === 'inherit' ? null : tone;
+}
+
+/**
+ * Icon is the box a glyph is drawn in, not the glyph. The library ships no
+ * catalogue: the artwork is the consumer's — an `ng-icon`, an inline `svg`,
+ * anything that renders one — and this family owns the size it is drawn at,
+ * the colour it inherits, where it sits against a line of text, and whether it
+ * mirrors where reading runs the other way.
+ *
+ * The selector is the bare attribute, so the consumer writes the element. It
+ * is a component rather than a directive only because a directive carries no
+ * `styleUrl`, and that also means it cannot sit on `<ng-icon>` itself: Angular
+ * refuses two components on one element, so the box is always written.
+ */
+class SlIcon {
+    directional = input(false, { ...(ngDevMode ? { debugName: "directional" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    label = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    tone = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tone" }] : /* istanbul ignore next */ []));
+    /**
+     * A name the consumer wrote on the element counts as much as the input, and
+     * has to be read rather than assumed absent: a host binding that wrote
+     * `null` would delete the consumer's own `aria-label` and hide the icon it
+     * named, which is a silent defect in the likeliest mistake. `aria-labelledby`
+     * is read and never written, so the attribute the consumer put there stays
+     * exactly as written.
+     */
+    writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    ariaLabel = computed(() => this.label() ?? this.writtenLabel, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * The icon is decorative when it has no name and meaningful when it has one,
+     * which is why there is no `decorative` input: named and hidden cannot both
+     * be true.
+     */
+    named = computed(() => this.ariaLabel() !== null || this.writtenLabelledBy !== null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "named" }] : /* istanbul ignore next */ []));
+    /**
+     * `role="img"` requires a name, so it appears only once there is one, and a
+     * role the consumer chose is left alone.
+     */
+    role = computed(() => this.writtenRole === null ? (this.named() ? 'img' : null) : this.writtenRole, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    toneAttribute = computed(() => toneAttribute(this.tone()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "toneAttribute" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlIcon, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlIcon, isStandalone: true, selector: "[slIcon]", inputs: { directional: { classPropertyName: "directional", publicName: "directional", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "icon", "data-part": "root" }, properties: { "attr.data-size": "size() ?? null", "attr.data-tone": "toneAttribute()", "attr.data-directional": "directional() ? \"\" : null", "attr.role": "role()", "attr.aria-label": "ariaLabel()", "attr.aria-hidden": "named() ? null : \"true\"" } }, exportAs: ["slIcon"], ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: ["@layer slotted.components{[data-ui=icon]{--_size: var(--slotted-icon-size, var(--slotted-control-icon-size-md, 16px));align-items:center;block-size:var(--_size);display:inline-flex;flex:none;inline-size:var(--_size);justify-content:center;line-height:1;vertical-align:var(--slotted-icon-baseline-shift, calc(.5cap - .5 * var(--_size)))}[data-ui=icon]>*,[data-ui=icon] svg{block-size:100%;display:block;font-size:var(--_size);inline-size:100%}[data-ui=icon][data-size=text]{--slotted-icon-size: 1em}[data-ui=icon][data-size=sm]{--slotted-icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=icon][data-size=md]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px)}[data-ui=icon][data-size=lg]{--slotted-icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=icon][data-tone=default]{color:var(--slotted-text, CanvasText)}[data-ui=icon][data-tone=muted]{color:var(--slotted-text-muted, GrayText)}[data-ui=icon][data-tone=accent]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=icon][data-tone=success]{color:var(--slotted-tone-success-text, CanvasText)}[data-ui=icon][data-tone=warning]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=icon][data-tone=danger]{color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=icon][data-tone=inverse]{color:var(--slotted-text-inverse, Canvas)}[data-ui=icon][data-directional]:dir(rtl){scale:-1 1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlIcon, decorators: [{
+            type: Component,
+            args: [{ selector: '[slIcon]', standalone: true, exportAs: 'slIcon', template: '<ng-content></ng-content>', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'icon',
+                        'data-part': 'root',
+                        '[attr.data-size]': 'size() ?? null',
+                        '[attr.data-tone]': 'toneAttribute()',
+                        '[attr.data-directional]': 'directional() ? "" : null',
+                        '[attr.role]': 'role()',
+                        '[attr.aria-label]': 'ariaLabel()',
+                        '[attr.aria-hidden]': 'named() ? null : "true"',
+                    }, styles: ["@layer slotted.components{[data-ui=icon]{--_size: var(--slotted-icon-size, var(--slotted-control-icon-size-md, 16px));align-items:center;block-size:var(--_size);display:inline-flex;flex:none;inline-size:var(--_size);justify-content:center;line-height:1;vertical-align:var(--slotted-icon-baseline-shift, calc(.5cap - .5 * var(--_size)))}[data-ui=icon]>*,[data-ui=icon] svg{block-size:100%;display:block;font-size:var(--_size);inline-size:100%}[data-ui=icon][data-size=text]{--slotted-icon-size: 1em}[data-ui=icon][data-size=sm]{--slotted-icon-size: var(--slotted-control-icon-size-sm, 14px)}[data-ui=icon][data-size=md]{--slotted-icon-size: var(--slotted-control-icon-size-md, 16px)}[data-ui=icon][data-size=lg]{--slotted-icon-size: var(--slotted-control-icon-size-lg, 18px)}[data-ui=icon][data-tone=default]{color:var(--slotted-text, CanvasText)}[data-ui=icon][data-tone=muted]{color:var(--slotted-text-muted, GrayText)}[data-ui=icon][data-tone=accent]{color:var(--slotted-tone-accent-text, LinkText)}[data-ui=icon][data-tone=success]{color:var(--slotted-tone-success-text, CanvasText)}[data-ui=icon][data-tone=warning]{color:var(--slotted-tone-warning-text, CanvasText)}[data-ui=icon][data-tone=danger]{color:var(--slotted-tone-danger-text, CanvasText)}[data-ui=icon][data-tone=inverse]{color:var(--slotted-text-inverse, Canvas)}[data-ui=icon][data-directional]:dir(rtl){scale:-1 1}}\n"] }]
+        }], propDecorators: { directional: [{ type: i0.Input, args: [{ isSignal: true, alias: "directional", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlGlyph, SlIcon };
+//# sourceMappingURL=slotted-angular-icon.mjs.map

package/fesm2022/slotted-angular-icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-icon.mjs","sources":["../../icon/src/glyph.ts","../../icon/src/icon.types.ts","../../icon/src/icon.ts","../../icon/src/slotted-angular-icon.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n} from '@angular/core';\nimport { GLYPH_VIEW_BOX, GLYPHS } from '@slotted/core/glyph';\nimport type { GlyphDrawing, GlyphName } from '@slotted/core/glyph';\n\nlet sequence = 0;\n\n/**\n * Glyph is the library's own artwork, drawn as a real `<svg>`: the Lucide\n * geometry `@slotted/core/glyph` holds, stroked or filled with `currentColor`.\n * It goes inside a `slIcon` box, which owns the size, the colour, the\n * alignment and the name; the glyph owns only the drawing. Every family draws\n * its own icons — a close button's cross, a pager's chevrons — with this\n * element, and never with a pseudo-element or a mask of its own.\n *\n * `solid` draws a status mark the way a tone's badge reads: the glyph's first\n * shape filled, and the symbol inside it cut out of the fill by an SVG\n * `<mask>`, so whatever lies behind shows through the symbol on any ground.\n *\n * The children carry the `svg:` namespace because the template is parsed apart\n * from its host: an unprefixed `<path>` would be created as an HTML element.\n */\n@Component({\n  selector: 'svg[slGlyph]',\n  standalone: true,\n  template: `@if (solid()) {\n      <svg:defs>\n        <svg:mask\n          [attr.id]=\"maskId\"\n          maskUnits=\"userSpaceOnUse\"\n          x=\"-2\"\n          y=\"-2\"\n          width=\"28\"\n          height=\"28\"\n        >\n          <svg:rect x=\"-2\" y=\"-2\" width=\"28\" height=\"28\" fill=\"#fff\" />\n          <svg:g\n            fill=\"none\"\n            stroke=\"#000\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n            [attr.stroke-width]=\"drawing().strokeWidth\"\n          >\n            @for (d of symbol(); track $index) {\n              <svg:path [attr.d]=\"d\" />\n            }\n          </svg:g>\n        </svg:mask>\n      </svg:defs>\n    }\n    <svg:g [attr.transform]=\"transform()\">\n      @if (solid()) {\n        <svg:path\n          [attr.d]=\"drawing().paths[0]\"\n          fill=\"currentColor\"\n          stroke=\"currentColor\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          [attr.stroke-width]=\"drawing().strokeWidth\"\n          [attr.mask]=\"'url(#' + maskId + ')'\"\n        />\n      } @else {\n        @for (d of drawing().paths; track $index) {\n          <svg:path [attr.d]=\"d\" />\n        }\n      }\n    </svg:g>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'aria-hidden': 'true',\n    focusable: 'false',\n    'data-part': 'glyph',\n    '[attr.data-glyph]': 'name()',\n    '[attr.viewBox]': 'viewBox',\n    '[attr.data-solid]': \"solid() ? '' : null\",\n    '[attr.fill]': \"solid() ? null : stroked() ? 'none' : 'currentColor'\",\n    '[attr.stroke]': \"!solid() && stroked() ? 'currentColor' : null\",\n    '[attr.stroke-width]': '!solid() && stroked() ? drawing().strokeWidth : null',\n    '[attr.stroke-linecap]': \"!solid() && stroked() ? 'round' : null\",\n    '[attr.stroke-linejoin]': \"!solid() && stroked() ? 'round' : null\",\n  },\n})\nexport class SlGlyph {\n  /** One of the library's own icons: its glyph token without `--slotted-icon-`. */\n  readonly name = input.required<GlyphName>();\n  /**\n   * The first shape filled and the symbol cut out of it — a tone's status\n   * mark. For glyphs whose first shape encloses the rest (`circle-*`,\n   * `triangle-alert`).\n   */\n  readonly solid = input(false, { transform: booleanAttribute });\n\n  protected readonly maskId = `sl-glyph-${String((sequence += 1))}`;\n\n  protected readonly viewBox = GLYPH_VIEW_BOX;\n  protected readonly drawing = computed<GlyphDrawing>(() => GLYPHS[this.name()]);\n  protected readonly symbol = computed(() => this.drawing().paths.slice(1));\n  protected readonly stroked = computed(() => this.drawing().paint === 'stroke');\n  protected readonly transform = computed(() => {\n    const [dx, dy] = this.drawing().offset;\n    return dx === 0 && dy === 0 ? null : `translate(${dx} ${dy})`;\n  });\n}\n","/**\n * Three steps read the control icon scale, which the theme restates per\n * density. `text` follows the type the icon sits in, because a control-sized\n * glyph inside a display heading is not an icon.\n */\nexport type IconSize = 'text' | 'sm' | 'md' | 'lg';\n\nexport type IconTone =\n  'inherit' | 'default' | 'muted' | 'accent' | 'success' | 'warning' | 'danger' | 'inverse';\n\n/**\n * `inherit` is the absence of a colour rather than a colour of its own, so it\n * removes the attribute and lets the surface decide.\n */\nexport function toneAttribute(tone: IconTone | undefined): string | null {\n  return tone === undefined || tone === 'inherit' ? null : tone;\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  HostAttributeToken,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { toneAttribute } from './icon.types';\nimport type { IconSize, IconTone } from './icon.types';\n\n/**\n * Icon is the box a glyph is drawn in, not the glyph. The library ships no\n * catalogue: the artwork is the consumer's — an `ng-icon`, an inline `svg`,\n * anything that renders one — and this family owns the size it is drawn at,\n * the colour it inherits, where it sits against a line of text, and whether it\n * mirrors where reading runs the other way.\n *\n * The selector is the bare attribute, so the consumer writes the element. It\n * is a component rather than a directive only because a directive carries no\n * `styleUrl`, and that also means it cannot sit on `<ng-icon>` itself: Angular\n * refuses two components on one element, so the box is always written.\n */\n@Component({\n  selector: '[slIcon]',\n  standalone: true,\n  exportAs: 'slIcon',\n  template: '<ng-content></ng-content>',\n  styleUrl: '../../../styles/src/icon/icon.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'icon',\n    'data-part': 'root',\n    '[attr.data-size]': 'size() ?? null',\n    '[attr.data-tone]': 'toneAttribute()',\n    '[attr.data-directional]': 'directional() ? \"\" : null',\n    '[attr.role]': 'role()',\n    '[attr.aria-label]': 'ariaLabel()',\n    '[attr.aria-hidden]': 'named() ? null : \"true\"',\n  },\n})\nexport class SlIcon {\n  readonly directional = input(false, { transform: booleanAttribute });\n  readonly label = input<string>();\n  readonly size = input<IconSize>();\n  readonly tone = input<IconTone>();\n\n  /**\n   * A name the consumer wrote on the element counts as much as the input, and\n   * has to be read rather than assumed absent: a host binding that wrote\n   * `null` would delete the consumer's own `aria-label` and hide the icon it\n   * named, which is a silent defect in the likeliest mistake. `aria-labelledby`\n   * is read and never written, so the attribute the consumer put there stays\n   * exactly as written.\n   */\n  private readonly writtenLabel = inject(new HostAttributeToken('aria-label'), { optional: true });\n  private readonly writtenLabelledBy = inject(new HostAttributeToken('aria-labelledby'), {\n    optional: true,\n  });\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n\n  protected readonly ariaLabel = computed(() => this.label() ?? this.writtenLabel);\n\n  /**\n   * The icon is decorative when it has no name and meaningful when it has one,\n   * which is why there is no `decorative` input: named and hidden cannot both\n   * be true.\n   */\n  protected readonly named = computed(\n    () => this.ariaLabel() !== null || this.writtenLabelledBy !== null,\n  );\n\n  /**\n   * `role=\"img\"` requires a name, so it appears only once there is one, and a\n   * role the consumer chose is left alone.\n   */\n  protected readonly role = computed(() =>\n    this.writtenRole === null ? (this.named() ? 'img' : null) : this.writtenRole,\n  );\n\n  protected readonly toneAttribute = computed(() => toneAttribute(this.tone()));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}