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

package/fesm2022/slotted-angular-badge.mjs

@@ -0,0 +1,255 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, booleanAttribute, HostAttributeToken, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, Directive } from '@angular/core';
+import { formatCount } from '@slotted/core/count';
+
+const FALLBACK = {
+    locale: undefined,
+    max: 99,
+    shape: 'pill',
+    size: 'md',
+    tone: 'secondary',
+    variant: 'soft',
+};
+const BADGE_DEFAULTS = new InjectionToken('slotted badge defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its badges are painted, how large they are
+ * and — the one that matters most — which locale writes their digits, rather
+ * than repeating five inputs on every badge. A badge that states any of them
+ * itself still wins: an explicit input is never overridden by the token.
+ */
+function provideBadgeDefaults(defaults) {
+    return {
+        provide: BADGE_DEFAULTS,
+        useFactory: () => ({
+            locale: defaults.locale ?? FALLBACK.locale,
+            max: defaults.max ?? FALLBACK.max,
+            shape: defaults.shape ?? FALLBACK.shape,
+            size: defaults.size ?? FALLBACK.size,
+            tone: defaults.tone ?? FALLBACK.tone,
+            variant: defaults.variant ?? FALLBACK.variant,
+        }),
+    };
+}
+/** What a badge renders as here, before it states anything of its own. */
+function injectBadgeDefaults() {
+    return inject(BADGE_DEFAULTS);
+}
+
+const ROLE = { off: null, polite: 'status', assertive: 'alert' };
+/**
+ * A short, non-editable piece of metadata: a count, a status, a label. It is
+ * never a command — it answers no hover and gives no press feedback — and it
+ * carries no role of its own, because what a badge means comes from where it
+ * sits.
+ *
+ * The directive is written on the element the page chose, so a `span` in a
+ * sentence, a `dd` in a description list and an `a` that navigates are all the
+ * same badge.
+ *
+ * `count` is the one place the family does work rather than paint. The ceiling
+ * above which a count becomes `99+`, whether nought is a value or an absence,
+ * and which locale writes the digits are three decisions every consumer would
+ * otherwise take again, and `@slotted/core/count` is where both bindings take
+ * them once.
+ */
+class SlBadge {
+    /** Defaults to the provider, then to `secondary`. */
+    tone = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "tone" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `soft`. */
+    variant = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Defaults to the provider, then to `md`. */
+    size = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "size" }] : /* istanbul ignore next */ []));
+    /** `dot` draws no value; the words it cannot say are projected content. */
+    shape = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "shape" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether a change to this badge is announced, and how urgently. `off` by
+     * default: a page of twenty badges that all announce is a page no screen
+     * reader user can read.
+     */
+    live = input('off', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []));
+    /** The number the badge shows, written before any projected content. */
+    count = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+    /**
+     * The largest count written in full; above it the badge shows the ceiling and
+     * a `+`. `false` removes the ceiling. Defaults to the provider, then to `99`.
+     */
+    max = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Whether a count of nought is a value worth showing or an absence worth hiding. */
+    showZero = input(false, { ...(ngDevMode ? { debugName: "showZero" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** BCP 47, for the digits of `count`. Defaults to the provider, then to the runtime. */
+    locale = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+    defaults = injectBadgeDefaults();
+    /** An explicit role the consumer wrote is never replaced by an inferred one. */
+    writtenRole = inject(new HostAttributeToken('role'), { optional: true });
+    resolvedTone = computed(() => this.tone() ?? this.defaults.tone, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedTone" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedShape = computed(() => this.shape() ?? this.defaults.shape, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedShape" }] : /* istanbul ignore next */ []));
+    role = computed(() => this.writtenRole ?? ROLE[this.live()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    counted = computed(() => {
+        const count = this.count();
+        if (count === undefined)
+            return undefined;
+        return formatCount({
+            count,
+            max: this.max() ?? this.defaults.max,
+            showZero: this.showZero(),
+            locale: this.locale() ?? this.defaults.locale,
+        });
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "counted" }] : /* istanbul ignore next */ []));
+    /**
+     * A count that has fallen to nought leaves the corner rather than sitting
+     * there as a blank circle. A badge given no count at all is untouched by the
+     * rule: an empty `dot` is the whole point of that shape.
+     */
+    empty = computed(() => this.count() !== undefined && this.counted() === undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "empty" }] : /* istanbul ignore next */ []));
+    /** A dot draws no value at any size. */
+    value = computed(() => this.resolvedShape() === 'dot' ? '' : (this.counted() ?? ''), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadge, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlBadge, isStandalone: true, selector: "[slBadge]", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, live: { classPropertyName: "live", publicName: "live", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, showZero: { classPropertyName: "showZero", publicName: "showZero", isSignal: true, isRequired: false, transformFunction: null }, locale: { classPropertyName: "locale", publicName: "locale", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "badge", "data-part": "root" }, properties: { "attr.data-tone": "resolvedTone()", "attr.data-variant": "resolvedVariant()", "attr.data-size": "resolvedSize()", "attr.data-shape": "resolvedShape()", "attr.role": "role()", "style.display": "empty() ? 'none' : null" } }, exportAs: ["slBadge"], ngImport: i0, template: `<ng-content select="[slBadgeStart]"></ng-content
+    ><span data-part="label">{{ value() }}<ng-content></ng-content></span
+    ><ng-content select="[slBadgeEnd]"></ng-content>`, isInline: true, styles: ["@layer slotted.components{[data-ui=badge][data-part=root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inset-block: var(--slotted-space-1, .125rem);--_inset-inline: var(--slotted-space-4, .5rem);--_gap: var(--slotted-space-2, .25rem);--_dot-size: var(--_font-size);--_line-height: var(--slotted-line-height-xs, 1.4);--_edge-width: var(--slotted-badge-border-width, var(--slotted-border-width-thin, 1px));--_block-size: calc( var(--_font-size) * var(--_line-height) + 2 * var(--_inset-block) + 2 * var(--_edge-width) );align-items:center;border:var(--_edge-width) solid transparent;border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;display:inline-flex;font-family:var(--slotted-badge-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-badge-font-weight, var(--slotted-font-weight-medium, 500));gap:var(--_gap);justify-content:center;line-height:var(--_line-height);max-inline-size:100%;min-block-size:var(--_block-size);min-inline-size:var(--_block-size);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-decoration:none;vertical-align:middle;white-space:nowrap}[data-ui=badge][data-part=root][data-tone=secondary]{--_edge: var(--_border)}[data-ui=badge][data-part=root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_border: var(--slotted-tone-accent-border);--_text: var(--slotted-tone-accent-text)}[data-ui=badge][data-part=root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_border: var(--slotted-tone-success-border);--_text: var(--slotted-tone-success-text)}[data-ui=badge][data-part=root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_border: var(--slotted-tone-warning-border);--_text: var(--slotted-tone-warning-text)}[data-ui=badge][data-part=root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_border: var(--slotted-tone-danger-border);--_text: var(--slotted-tone-danger-text)}[data-ui=badge][data-part=root][data-variant=solid]{background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonFace);color:var(--_on-solid, ButtonText)}[data-ui=badge][data-part=root][data-variant=soft]{background-color:var(--_surface, ButtonFace);border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=badge][data-part=root][data-variant=outline]{background-color:transparent;border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=badge][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-block: 0px;--_inset-inline: var(--slotted-space-3, .375rem);--_gap: var(--slotted-space-2, .25rem)}[data-ui=badge][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inset-block: var(--slotted-space-2, .25rem);--_inset-inline: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-3, .375rem)}[data-ui=badge][data-part=root][data-shape=square]{border-radius:var(--slotted-badge-radius, var(--slotted-radius-sm, 4px))}[data-ui=badge][data-part=root][data-shape=dot]{block-size:var(--_dot-size);border-color:var(--slotted-badge-dot-border-color, var(--slotted-border-strong, CanvasText));border-radius:var(--slotted-radius-full, 9999px);inline-size:var(--_dot-size);min-block-size:0;min-inline-size:0;padding-block:0;padding-inline:0}[data-ui=badge][data-part=root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=badge] [data-part=label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}@supports (text-box: trim-both cap alphabetic){[data-ui=badge] [data-part=label]{margin-block:-.3em;padding-block:.3em;text-box:trim-both cap alphabetic}}[data-ui=badge] [data-part=start],[data-ui=badge] [data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1}[data-ui=badge] [data-part=start]>*,[data-ui=badge] [data-part=end]>*{block-size:100%;display:block;inline-size:100%}[data-ui=badge][data-part=anchor]{--_dir: 1;--_overhang-inline: 50%;--_overhang-block: -50%;--_anchor-inset: 0%;--_offset-inline: var(--slotted-badge-anchor-offset-x, 0px);--_offset-block: var(--slotted-badge-anchor-offset-y, 0px);display:inline-flex;position:relative;vertical-align:middle}[data-ui=badge][data-part=anchor]:dir(rtl){--_dir: -1}[data-ui=badge][data-part=anchor][data-overlap=circle]{--_anchor-inset: 14%}[data-ui=badge][data-part=anchor][data-placement=top-start],[data-ui=badge][data-part=anchor][data-placement=bottom-start]{--_overhang-inline: -50%}[data-ui=badge][data-part=anchor][data-placement=bottom-start],[data-ui=badge][data-part=anchor][data-placement=bottom-end]{--_overhang-block: 50%}[data-ui=badge][data-part=anchor]>[data-ui=badge][data-part=root]{box-shadow:0 0 0 var(--slotted-badge-ring-width, var(--slotted-border-width-thick, 2px)) var(--slotted-badge-ring-color, var(--slotted-surface, Canvas));max-inline-size:none;position:absolute;translate:calc((var(--_overhang-inline) + var(--_offset-inline)) * var(--_dir)) calc(var(--_overhang-block) + var(--_offset-block));z-index:1}[data-ui=badge][data-part=anchor][data-placement=top-end]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=top-start]>[data-part=root]{inset-block-start:var(--_anchor-inset)}[data-ui=badge][data-part=anchor][data-placement=bottom-end]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=bottom-start]>[data-part=root]{inset-block-end:var(--_anchor-inset)}[data-ui=badge][data-part=anchor][data-placement=top-end]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=bottom-end]>[data-part=root]{inset-inline-end:var(--_anchor-inset)}[data-ui=badge][data-part=anchor][data-placement=top-start]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=bottom-start]>[data-part=root]{inset-inline-start:var(--_anchor-inset)}@media(forced-colors:active){[data-ui=badge][data-part=root]{border-color:currentColor}}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadge, decorators: [{
+            type: Component,
+            args: [{ selector: '[slBadge]', standalone: true, exportAs: 'slBadge', template: `<ng-content select="[slBadgeStart]"></ng-content
+    ><span data-part="label">{{ value() }}<ng-content></ng-content></span
+    ><ng-content select="[slBadgeEnd]"></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'badge',
+                        'data-part': 'root',
+                        '[attr.data-tone]': 'resolvedTone()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-shape]': 'resolvedShape()',
+                        '[attr.role]': 'role()',
+                        /**
+                         * React returns nothing for a count that has fallen to nought. This
+                         * directive is written on an element the consumer owns, so it cannot
+                         * un-write it; `display: none` is the same outcome the platform can give
+                         * from here — no box, no layout, and nothing in the accessibility tree.
+                         * The inline style is what beats the family's own `display: inline-flex`,
+                         * which the `hidden` attribute would lose to.
+                         */
+                        '[style.display]': "empty() ? 'none' : null",
+                    }, styles: ["@layer slotted.components{[data-ui=badge][data-part=root]{--_solid: var(--slotted-tone-secondary-solid-hover);--_on-solid: var(--slotted-tone-secondary-on-solid);--_surface: var(--slotted-tone-secondary-surface);--_border: var(--slotted-tone-secondary-border);--_text: var(--slotted-tone-secondary-text);--_edge: var(--_solid);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_inset-block: var(--slotted-space-1, .125rem);--_inset-inline: var(--slotted-space-4, .5rem);--_gap: var(--slotted-space-2, .25rem);--_dot-size: var(--_font-size);--_line-height: var(--slotted-line-height-xs, 1.4);--_edge-width: var(--slotted-badge-border-width, var(--slotted-border-width-thin, 1px));--_block-size: calc( var(--_font-size) * var(--_line-height) + 2 * var(--_inset-block) + 2 * var(--_edge-width) );align-items:center;border:var(--_edge-width) solid transparent;border-radius:var(--slotted-radius-full, 9999px);box-sizing:border-box;display:inline-flex;font-family:var(--slotted-badge-font-family, var(--slotted-control-font-family, sans-serif));font-size:var(--_font-size);font-variant-numeric:tabular-nums;font-weight:var(--slotted-badge-font-weight, var(--slotted-font-weight-medium, 500));gap:var(--_gap);justify-content:center;line-height:var(--_line-height);max-inline-size:100%;min-block-size:var(--_block-size);min-inline-size:var(--_block-size);padding-block:var(--_inset-block);padding-inline:var(--_inset-inline);text-decoration:none;vertical-align:middle;white-space:nowrap}[data-ui=badge][data-part=root][data-tone=secondary]{--_edge: var(--_border)}[data-ui=badge][data-part=root][data-tone=accent]{--_solid: var(--slotted-tone-accent-solid);--_on-solid: var(--slotted-tone-accent-on-solid);--_surface: var(--slotted-tone-accent-surface);--_border: var(--slotted-tone-accent-border);--_text: var(--slotted-tone-accent-text)}[data-ui=badge][data-part=root][data-tone=success]{--_solid: var(--slotted-tone-success-solid);--_on-solid: var(--slotted-tone-success-on-solid);--_surface: var(--slotted-tone-success-surface);--_border: var(--slotted-tone-success-border);--_text: var(--slotted-tone-success-text)}[data-ui=badge][data-part=root][data-tone=warning]{--_solid: var(--slotted-tone-warning-solid);--_on-solid: var(--slotted-tone-warning-on-solid);--_surface: var(--slotted-tone-warning-surface);--_border: var(--slotted-tone-warning-border);--_text: var(--slotted-tone-warning-text)}[data-ui=badge][data-part=root][data-tone=danger]{--_solid: var(--slotted-tone-danger-solid);--_on-solid: var(--slotted-tone-danger-on-solid);--_surface: var(--slotted-tone-danger-surface);--_border: var(--slotted-tone-danger-border);--_text: var(--slotted-tone-danger-text)}[data-ui=badge][data-part=root][data-variant=solid]{background-color:var(--_solid, ButtonFace);border-color:var(--_edge, ButtonFace);color:var(--_on-solid, ButtonText)}[data-ui=badge][data-part=root][data-variant=soft]{background-color:var(--_surface, ButtonFace);border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=badge][data-part=root][data-variant=outline]{background-color:transparent;border-color:var(--_border, ButtonBorder);color:var(--_text, ButtonText)}[data-ui=badge][data-part=root][data-size=sm]{--_font-size: var(--slotted-control-font-size-sm, 12px);--_inset-block: 0px;--_inset-inline: var(--slotted-space-3, .375rem);--_gap: var(--slotted-space-2, .25rem)}[data-ui=badge][data-part=root][data-size=lg]{--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_inset-block: var(--slotted-space-2, .25rem);--_inset-inline: var(--slotted-space-5, .75rem);--_gap: var(--slotted-space-3, .375rem)}[data-ui=badge][data-part=root][data-shape=square]{border-radius:var(--slotted-badge-radius, var(--slotted-radius-sm, 4px))}[data-ui=badge][data-part=root][data-shape=dot]{block-size:var(--_dot-size);border-color:var(--slotted-badge-dot-border-color, var(--slotted-border-strong, CanvasText));border-radius:var(--slotted-radius-full, 9999px);inline-size:var(--_dot-size);min-block-size:0;min-inline-size:0;padding-block:0;padding-inline:0}[data-ui=badge][data-part=root]:focus-visible{outline:var(--slotted-focus-ring-width, 2px) solid var(--slotted-focus-ring-color, Highlight);outline-offset:var(--slotted-focus-ring-offset, 2px)}[data-ui=badge] [data-part=label]{min-inline-size:0;overflow:hidden;text-overflow:ellipsis}@supports (text-box: trim-both cap alphabetic){[data-ui=badge] [data-part=label]{margin-block:-.3em;padding-block:.3em;text-box:trim-both cap alphabetic}}[data-ui=badge] [data-part=start],[data-ui=badge] [data-part=end]{--slotted-icon-size: var(--_icon-size);align-items:center;block-size:var(--_icon-size);box-sizing:border-box;display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size);justify-content:center;line-height:1}[data-ui=badge] [data-part=start]>*,[data-ui=badge] [data-part=end]>*{block-size:100%;display:block;inline-size:100%}[data-ui=badge][data-part=anchor]{--_dir: 1;--_overhang-inline: 50%;--_overhang-block: -50%;--_anchor-inset: 0%;--_offset-inline: var(--slotted-badge-anchor-offset-x, 0px);--_offset-block: var(--slotted-badge-anchor-offset-y, 0px);display:inline-flex;position:relative;vertical-align:middle}[data-ui=badge][data-part=anchor]:dir(rtl){--_dir: -1}[data-ui=badge][data-part=anchor][data-overlap=circle]{--_anchor-inset: 14%}[data-ui=badge][data-part=anchor][data-placement=top-start],[data-ui=badge][data-part=anchor][data-placement=bottom-start]{--_overhang-inline: -50%}[data-ui=badge][data-part=anchor][data-placement=bottom-start],[data-ui=badge][data-part=anchor][data-placement=bottom-end]{--_overhang-block: 50%}[data-ui=badge][data-part=anchor]>[data-ui=badge][data-part=root]{box-shadow:0 0 0 var(--slotted-badge-ring-width, var(--slotted-border-width-thick, 2px)) var(--slotted-badge-ring-color, var(--slotted-surface, Canvas));max-inline-size:none;position:absolute;translate:calc((var(--_overhang-inline) + var(--_offset-inline)) * var(--_dir)) calc(var(--_overhang-block) + var(--_offset-block));z-index:1}[data-ui=badge][data-part=anchor][data-placement=top-end]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=top-start]>[data-part=root]{inset-block-start:var(--_anchor-inset)}[data-ui=badge][data-part=anchor][data-placement=bottom-end]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=bottom-start]>[data-part=root]{inset-block-end:var(--_anchor-inset)}[data-ui=badge][data-part=anchor][data-placement=top-end]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=bottom-end]>[data-part=root]{inset-inline-end:var(--_anchor-inset)}[data-ui=badge][data-part=anchor][data-placement=top-start]>[data-part=root],[data-ui=badge][data-part=anchor][data-placement=bottom-start]>[data-part=root]{inset-inline-start:var(--_anchor-inset)}@media(forced-colors:active){[data-ui=badge][data-part=root]{border-color:currentColor}}}\n"] }]
+        }], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], live: [{ type: i0.Input, args: [{ isSignal: true, alias: "live", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], showZero: [{ type: i0.Input, args: [{ isSignal: true, alias: "showZero", required: false }] }], locale: [{ type: i0.Input, args: [{ isSignal: true, alias: "locale", required: false }] }] } });
+
+/**
+ * The frame that places a badge on the corner of something else. It is written
+ * on the element the page already has around the host — a `span`, a `div`, the
+ * `li` of a list — rather than wrapping it, which is the one place this binding
+ * is the smaller of the two: React must render a wrapper of its own.
+ *
+ * It does not rewrite the host's semantics. The badge is read after the host in
+ * document order, and an interactive host whose name must carry the count wires
+ * `aria-describedby` to the badge's own id, or names the count in its own
+ * `aria-label`. Both wirings are on the reference page.
+ */
+class SlBadgeAnchor {
+    /** Which corner of the host the badge sits on. Mirrors in a right-to-left document. */
+    placement = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
+    /** `circle` moves the badge in from the corner far enough to meet the curve. */
+    overlap = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "overlap" }] : /* istanbul ignore next */ []));
+    /**
+     * Moves the badge off the corner the frame computed, in pixels. `overlap` has
+     * two values and hosts have many: how far a badge sits into one depends on
+     * that host's own curve, shadow and optical weight.
+     */
+    offset = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "offset" }] : /* istanbul ignore next */ []));
+    resolvedPlacement = computed(() => this.placement() ?? 'top-end', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedPlacement" }] : /* istanbul ignore next */ []));
+    resolvedOverlap = computed(() => this.overlap() ?? 'rectangle', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedOverlap" }] : /* istanbul ignore next */ []));
+    /**
+     * An axis the page did not state is `null`, which removes the property rather
+     * than writing nought into it: the sheet's own default is what answers, and a
+     * theme that moves it still wins.
+     */
+    offsetX = computed(() => length(this.offset()?.x), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []));
+    offsetY = computed(() => length(this.offset()?.y), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadgeAnchor, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.7", type: SlBadgeAnchor, isStandalone: true, selector: "[slBadgeAnchor]", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-ui": "badge", "data-part": "anchor" }, properties: { "attr.data-placement": "resolvedPlacement()", "attr.data-overlap": "resolvedOverlap()", "style.--slotted-badge-anchor-offset-x": "offsetX()", "style.--slotted-badge-anchor-offset-y": "offsetY()" } }, exportAs: ["slBadgeAnchor"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadgeAnchor, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slBadgeAnchor]',
+                    standalone: true,
+                    exportAs: 'slBadgeAnchor',
+                    host: {
+                        'data-ui': 'badge',
+                        'data-part': 'anchor',
+                        '[attr.data-placement]': 'resolvedPlacement()',
+                        '[attr.data-overlap]': 'resolvedOverlap()',
+                        '[style.--slotted-badge-anchor-offset-x]': 'offsetX()',
+                        '[style.--slotted-badge-anchor-offset-y]': 'offsetY()',
+                    },
+                }]
+        }], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }] } });
+function length(value) {
+    return value === undefined ? null : `${value}px`;
+}
+
+/**
+ * A glyph before the words. The artwork is the consumer's, and the part gives
+ * it a box that is sized and centred; the directive is written on the element
+ * the page already has, so nothing is wrapped.
+ */
+class SlBadgeStart {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadgeStart, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlBadgeStart, isStandalone: true, selector: "[slBadgeStart]", host: { attributes: { "data-part": "start" } }, exportAs: ["slBadgeStart"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadgeStart, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slBadgeStart]',
+                    standalone: true,
+                    exportAs: 'slBadgeStart',
+                    host: { 'data-part': 'start' },
+                }]
+        }] });
+/** A glyph after the words. */
+class SlBadgeEnd {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadgeEnd, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlBadgeEnd, isStandalone: true, selector: "[slBadgeEnd]", host: { attributes: { "data-part": "end" } }, exportAs: ["slBadgeEnd"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlBadgeEnd, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slBadgeEnd]',
+                    standalone: true,
+                    exportAs: 'slBadgeEnd',
+                    host: { 'data-part': 'end' },
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BADGE_DEFAULTS, SlBadge, SlBadgeAnchor, SlBadgeEnd, SlBadgeStart, injectBadgeDefaults, provideBadgeDefaults };
+//# sourceMappingURL=slotted-angular-badge.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-badge.mjs","sources":["../../badge/src/badge-defaults.ts","../../badge/src/badge.ts","../../badge/src/badge-anchor.ts","../../badge/src/badge-content.ts","../../badge/src/slotted-angular-badge.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** Which of the five semantic colours the badge speaks in. */\nexport type BadgeTone = 'accent' | 'secondary' | 'success' | 'warning' | 'danger';\n\n/** How that colour is painted. `soft` is the tinted chip a badge usually is. */\nexport type BadgeVariant = 'solid' | 'soft' | 'outline';\n\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\n/** `dot` is the same badge, tone and hidden text, drawn without a value. */\nexport type BadgeShape = 'pill' | 'square' | 'dot';\n\n/** Whether a changing badge is announced, and how urgently. */\nexport type BadgeLive = 'off' | 'polite' | 'assertive';\n\nexport type BadgePlacement = 'top-end' | 'top-start' | 'bottom-end' | 'bottom-start';\n\n/** The shape of the host, which decides how far in from the corner to sit. */\nexport type BadgeOverlap = 'rectangle' | 'circle';\n\n/**\n * The page's own correction of the corner, in CSS pixels.\n *\n * `x` runs along the inline axis, from the leading edge towards the trailing\n * one, so it mirrors with the document: a badge moved two pixels back along it\n * keeps the same relation to its host in a right-to-left page. `y` runs down\n * the block axis. Both default to nought.\n */\nexport interface BadgeOffset {\n  x?: number | undefined;\n  y?: number | undefined;\n}\n\nexport interface BadgeDefaults {\n  /** BCP 47. Absent, the runtime's own default writes the digits. */\n  locale: string | undefined;\n  max: number | false;\n  shape: BadgeShape;\n  size: BadgeSize;\n  tone: BadgeTone;\n  variant: BadgeVariant;\n}\n\nconst FALLBACK: BadgeDefaults = {\n  locale: undefined,\n  max: 99,\n  shape: 'pill',\n  size: 'md',\n  tone: 'secondary',\n  variant: 'soft',\n};\n\nexport const BADGE_DEFAULTS = new InjectionToken<BadgeDefaults>('slotted badge defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its badges are painted, how large they are\n * and — the one that matters most — which locale writes their digits, rather\n * than repeating five inputs on every badge. A badge that states any of them\n * itself still wins: an explicit input is never overridden by the token.\n */\nexport function provideBadgeDefaults(defaults: Partial<BadgeDefaults>) {\n  return {\n    provide: BADGE_DEFAULTS,\n    useFactory: (): BadgeDefaults => ({\n      locale: defaults.locale ?? FALLBACK.locale,\n      max: defaults.max ?? FALLBACK.max,\n      shape: defaults.shape ?? FALLBACK.shape,\n      size: defaults.size ?? FALLBACK.size,\n      tone: defaults.tone ?? FALLBACK.tone,\n      variant: defaults.variant ?? FALLBACK.variant,\n    }),\n  };\n}\n\n/** What a badge renders as here, before it states anything of its own. */\nexport function injectBadgeDefaults(): BadgeDefaults {\n  return inject(BADGE_DEFAULTS);\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 { formatCount } from '@slotted/core/count';\n\nimport { injectBadgeDefaults } from './badge-defaults';\nimport type { BadgeLive, BadgeShape, BadgeSize, BadgeTone, BadgeVariant } from './badge-defaults';\n\nexport type {\n  BadgeLive,\n  BadgeOverlap,\n  BadgePlacement,\n  BadgeShape,\n  BadgeSize,\n  BadgeTone,\n  BadgeVariant,\n} from './badge-defaults';\n\nconst ROLE: Record<BadgeLive, string | null> = { off: null, polite: 'status', assertive: 'alert' };\n\n/**\n * A short, non-editable piece of metadata: a count, a status, a label. It is\n * never a command — it answers no hover and gives no press feedback — and it\n * carries no role of its own, because what a badge means comes from where it\n * sits.\n *\n * The directive is written on the element the page chose, so a `span` in a\n * sentence, a `dd` in a description list and an `a` that navigates are all the\n * same badge.\n *\n * `count` is the one place the family does work rather than paint. The ceiling\n * above which a count becomes `99+`, whether nought is a value or an absence,\n * and which locale writes the digits are three decisions every consumer would\n * otherwise take again, and `@slotted/core/count` is where both bindings take\n * them once.\n */\n@Component({\n  selector: '[slBadge]',\n  standalone: true,\n  exportAs: 'slBadge',\n  /**\n   * The text has a box of its own so `text-box` can trim its line to the cap\n   * and the baseline: a flex container's own text lives in an anonymous item no\n   * stylesheet can reach. The glyphs are projected by selector, so they stay\n   * siblings of that box rather than joining the line inside it.\n   */\n  template: `<ng-content select=\"[slBadgeStart]\"></ng-content\n    ><span data-part=\"label\">{{ value() }}<ng-content></ng-content></span\n    ><ng-content select=\"[slBadgeEnd]\"></ng-content>`,\n  styleUrl: '../../../styles/src/badge/badge.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'badge',\n    'data-part': 'root',\n    '[attr.data-tone]': 'resolvedTone()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-shape]': 'resolvedShape()',\n    '[attr.role]': 'role()',\n    /**\n     * React returns nothing for a count that has fallen to nought. This\n     * directive is written on an element the consumer owns, so it cannot\n     * un-write it; `display: none` is the same outcome the platform can give\n     * from here — no box, no layout, and nothing in the accessibility tree.\n     * The inline style is what beats the family's own `display: inline-flex`,\n     * which the `hidden` attribute would lose to.\n     */\n    '[style.display]': \"empty() ? 'none' : null\",\n  },\n})\nexport class SlBadge {\n  /** Defaults to the provider, then to `secondary`. */\n  readonly tone = input<BadgeTone>();\n  /** Defaults to the provider, then to `soft`. */\n  readonly variant = input<BadgeVariant>();\n  /** Defaults to the provider, then to `md`. */\n  readonly size = input<BadgeSize>();\n  /** `dot` draws no value; the words it cannot say are projected content. */\n  readonly shape = input<BadgeShape>();\n  /**\n   * Whether a change to this badge is announced, and how urgently. `off` by\n   * default: a page of twenty badges that all announce is a page no screen\n   * reader user can read.\n   */\n  readonly live = input<BadgeLive>('off');\n  /** The number the badge shows, written before any projected content. */\n  readonly count = input<number | undefined>(undefined);\n  /**\n   * The largest count written in full; above it the badge shows the ceiling and\n   * a `+`. `false` removes the ceiling. Defaults to the provider, then to `99`.\n   */\n  readonly max = input<number | false | undefined>(undefined);\n  /** Whether a count of nought is a value worth showing or an absence worth hiding. */\n  readonly showZero = input(false, { transform: booleanAttribute });\n  /** BCP 47, for the digits of `count`. Defaults to the provider, then to the runtime. */\n  readonly locale = input<string | undefined>(undefined);\n\n  private readonly defaults = injectBadgeDefaults();\n  /** An explicit role the consumer wrote is never replaced by an inferred one. */\n  private readonly writtenRole = inject(new HostAttributeToken('role'), { optional: true });\n\n  protected readonly resolvedTone = computed(() => this.tone() ?? this.defaults.tone);\n  protected readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n  protected readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  protected readonly resolvedShape = computed(() => this.shape() ?? this.defaults.shape);\n\n  protected readonly role = computed(() => this.writtenRole ?? ROLE[this.live()]);\n\n  private readonly counted = computed(() => {\n    const count = this.count();\n    if (count === undefined) return undefined;\n    return formatCount({\n      count,\n      max: this.max() ?? this.defaults.max,\n      showZero: this.showZero(),\n      locale: this.locale() ?? this.defaults.locale,\n    });\n  });\n\n  /**\n   * A count that has fallen to nought leaves the corner rather than sitting\n   * there as a blank circle. A badge given no count at all is untouched by the\n   * rule: an empty `dot` is the whole point of that shape.\n   */\n  protected readonly empty = computed(\n    () => this.count() !== undefined && this.counted() === undefined,\n  );\n\n  /** A dot draws no value at any size. */\n  protected readonly value = computed(() =>\n    this.resolvedShape() === 'dot' ? '' : (this.counted() ?? ''),\n  );\n}\n","import { computed, Directive, input } from '@angular/core';\n\nimport type { BadgeOffset, BadgeOverlap, BadgePlacement } from './badge-defaults';\n\n/**\n * The frame that places a badge on the corner of something else. It is written\n * on the element the page already has around the host — a `span`, a `div`, the\n * `li` of a list — rather than wrapping it, which is the one place this binding\n * is the smaller of the two: React must render a wrapper of its own.\n *\n * It does not rewrite the host's semantics. The badge is read after the host in\n * document order, and an interactive host whose name must carry the count wires\n * `aria-describedby` to the badge's own id, or names the count in its own\n * `aria-label`. Both wirings are on the reference page.\n */\n@Directive({\n  selector: '[slBadgeAnchor]',\n  standalone: true,\n  exportAs: 'slBadgeAnchor',\n  host: {\n    'data-ui': 'badge',\n    'data-part': 'anchor',\n    '[attr.data-placement]': 'resolvedPlacement()',\n    '[attr.data-overlap]': 'resolvedOverlap()',\n    '[style.--slotted-badge-anchor-offset-x]': 'offsetX()',\n    '[style.--slotted-badge-anchor-offset-y]': 'offsetY()',\n  },\n})\nexport class SlBadgeAnchor {\n  /** Which corner of the host the badge sits on. Mirrors in a right-to-left document. */\n  readonly placement = input<BadgePlacement>();\n  /** `circle` moves the badge in from the corner far enough to meet the curve. */\n  readonly overlap = input<BadgeOverlap>();\n  /**\n   * Moves the badge off the corner the frame computed, in pixels. `overlap` has\n   * two values and hosts have many: how far a badge sits into one depends on\n   * that host's own curve, shadow and optical weight.\n   */\n  readonly offset = input<BadgeOffset>();\n\n  protected readonly resolvedPlacement = computed(() => this.placement() ?? 'top-end');\n  protected readonly resolvedOverlap = computed(() => this.overlap() ?? 'rectangle');\n  /**\n   * An axis the page did not state is `null`, which removes the property rather\n   * than writing nought into it: the sheet's own default is what answers, and a\n   * theme that moves it still wins.\n   */\n  protected readonly offsetX = computed(() => length(this.offset()?.x));\n  protected readonly offsetY = computed(() => length(this.offset()?.y));\n}\n\nfunction length(value: number | undefined): string | null {\n  return value === undefined ? null : `${value}px`;\n}\n","import { Directive } from '@angular/core';\n\n/**\n * A glyph before the words. The artwork is the consumer's, and the part gives\n * it a box that is sized and centred; the directive is written on the element\n * the page already has, so nothing is wrapped.\n */\n@Directive({\n  selector: '[slBadgeStart]',\n  standalone: true,\n  exportAs: 'slBadgeStart',\n  host: { 'data-part': 'start' },\n})\nexport class SlBadgeStart {}\n\n/** A glyph after the words. */\n@Directive({\n  selector: '[slBadgeEnd]',\n  standalone: true,\n  exportAs: 'slBadgeEnd',\n  host: { 'data-part': 'end' },\n})\nexport class SlBadgeEnd {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}