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

package/fesm2022/slotted-angular-toggle.mjs

@@ -0,0 +1,162 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Directive, input, booleanAttribute, output, ElementRef, DestroyRef, HostAttributeToken, signal, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { createControllable } from '@slotted/core/state';
+
+const FALLBACK = {
+    size: 'md',
+    variant: 'outline',
+};
+const TOGGLE_DEFAULTS = new InjectionToken('slotted toggle defaults', {
+    providedIn: 'root',
+    factory: () => FALLBACK,
+});
+/**
+ * An application decides once how its toggles are drawn — a toolbar of ghost
+ * modes, a form of framed ones — rather than repeating the two inputs on
+ * every control. A toggle that states either itself still wins.
+ */
+function provideToggleDefaults(defaults) {
+    return {
+        provide: TOGGLE_DEFAULTS,
+        useFactory: () => ({ ...FALLBACK, ...defaults }),
+    };
+}
+/** What a toggle renders as here, before it states anything of its own. */
+function injectToggleDefaults() {
+    return inject(TOGGLE_DEFAULTS);
+}
+
+/**
+ * The mark beside the words, or the whole content of an icon-only toggle. A
+ * marker on the consumer's own element rather than a wrapper, so an `svg`, an
+ * `sl-icon` and a masked `span` all work and none loses its own semantics. It
+ * is hidden from the reading order, because the words beside it — or the
+ * `aria-label` on the button — are what a reader hears.
+ */
+class SlToggleIcon {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggleIcon, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.7", type: SlToggleIcon, isStandalone: true, selector: "[slToggleIcon]", host: { attributes: { "data-part": "icon", "aria-hidden": "true" } }, exportAs: ["slToggleIcon"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggleIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[slToggleIcon]',
+                    standalone: true,
+                    exportAs: 'slToggleIcon',
+                    host: {
+                        'data-part': 'icon',
+                        'aria-hidden': 'true',
+                    },
+                }]
+        }] });
+/**
+ * A click synthesised by the keyboard reports no detail; a real one reports
+ * the click count. It is why `Space`, `Enter` and a pointer are told apart
+ * without a key listener existing anywhere in the family.
+ */
+function activationReason(event) {
+    return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';
+}
+/**
+ * A two-state button standing on its own: a mode — Bold, Wrap, Pin — that is
+ * true the moment it is pressed. `aria-pressed` is written in both states, so
+ * the control is announced as a toggle rather than as a button that happens
+ * to be pressed, and its label never changes with its state, which the APG
+ * Button pattern calls critical.
+ *
+ * `SlToggleButton` is the other member: an action that persists — Follow,
+ * Subscribe — which reaches a server and waits, in one of five tones. The two
+ * hold one state model and one output shape, so a consumer moving between
+ * them changes no handler. Inside `slToolbar` the bar owns the tab stop and
+ * the arrows, and this control writes no listener of its own.
+ *
+ * The component is a directive on the element the consumer wrote, so
+ * substituting the element is writing a different one — and it has to stay a
+ * `button`: `aria-pressed` on a link is a link announcing a state a link does
+ * not hold.
+ */
+class SlToggle {
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    size = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Present means controlled, for the life of the component. */
+    pressed = input(undefined, { ...(ngDevMode ? { debugName: "pressed" } : /* istanbul ignore next */ {}), transform: (value) => (value === undefined ? undefined : booleanAttribute(value)) });
+    /** The value an uncontrolled toggle starts from, read once. */
+    defaultPressed = input(false, { ...(ngDevMode ? { debugName: "defaultPressed" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * One output for one transition, carrying the value, the value it replaces,
+     * the reason, the originating event and `cancel()`. There is no
+     * `[(pressed)]` because a two-way binding has one slot and cannot carry any
+     * of those — the reason `SlToggleButton` records for the same choice.
+     */
+    pressedChange = output();
+    defaults = injectToggleDefaults();
+    element = inject((ElementRef)).nativeElement;
+    destroyRef = inject(DestroyRef);
+    /**
+     * A `type` the consumer wrote survives: a toggle inside a form is a
+     * `button` unless the consumer says `submit`, and the attribute is read
+     * before the host binding writes it.
+     */
+    writtenType = inject(new HostAttributeToken('type'), { optional: true });
+    type = this.writtenType ?? 'button';
+    own = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "own" }] : /* istanbul ignore next */ []));
+    isPressed = computed(() => this.pressed() ?? this.own() ?? this.defaultPressed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isPressed" }] : /* istanbul ignore next */ []));
+    resolvedSize = computed(() => this.size() ?? this.defaults.size, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedSize" }] : /* istanbul ignore next */ []));
+    resolvedVariant = computed(() => this.variant() ?? this.defaults.variant, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedVariant" }] : /* istanbul ignore next */ []));
+    /**
+     * After the view, not in the constructor. A `(click)` written on the same
+     * element is bound when the view is created, so a listener registered any
+     * earlier runs first and reads `defaultPrevented` before the consumer has
+     * had the chance to set it — and a refused activation would move the state
+     * anyway.
+     */
+    ngAfterViewInit() {
+        const listener = (event) => {
+            if (this.disabled() || event.defaultPrevented)
+                return;
+            this.request(event);
+        };
+        this.element.addEventListener('click', listener);
+        this.destroyRef.onDestroy(() => this.element.removeEventListener('click', listener));
+    }
+    request(event) {
+        const next = !this.isPressed();
+        const state = createControllable({
+            controlled: this.pressed(),
+            initial: this.isPressed(),
+            onRequest: (request) => this.pressedChange.emit(request),
+        });
+        if (state.request(next, activationReason(event), event))
+            this.own.set(next);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggle, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.7", type: SlToggle, isStandalone: true, selector: "button[slToggle]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, pressed: { classPropertyName: "pressed", publicName: "pressed", isSignal: true, isRequired: false, transformFunction: null }, defaultPressed: { classPropertyName: "defaultPressed", publicName: "defaultPressed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pressedChange: "pressedChange" }, host: { attributes: { "data-ui": "toggle", "data-part": "root" }, properties: { "attr.type": "type", "attr.aria-pressed": "isPressed()", "attr.data-pressed": "isPressed() ? '' : null", "attr.data-disabled": "disabled() ? '' : null", "attr.data-size": "resolvedSize()", "attr.data-variant": "resolvedVariant()", "disabled": "disabled()" } }, exportAs: ["slToggle"], ngImport: i0, template: `<ng-content select="[slToggleIcon]" /> <span data-part="label"><ng-content /></span>`, isInline: true, styles: ["@layer slotted.components{[data-ui=toggle][data-part=root]{--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-toggle-radius, var(--slotted-control-radius, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_border-color: var( --slotted-toggle-border-color, var(--slotted-control-border-color, ButtonBorder) );align-items:center;appearance:none;background:transparent;block-size:var(--_height);border:var(--_border-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;color:var(--slotted-toggle-color, var(--slotted-text, ButtonText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);margin:0;max-inline-size:100%;min-inline-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=toggle][data-part=root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=toggle][data-part=root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=toggle][data-part=root]:not(:has([data-part=label]:not(:empty))){inline-size:var(--_height);padding-inline:0}[data-ui=toggle] [data-part=label]:empty{display:none}[data-ui=toggle] [data-part=icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=toggle] [data-part=icon]>*{block-size:100%;display:block;inline-size:100%}[data-ui=toggle] [data-part=label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=toggle][data-part=root][data-variant=outline]{border-color:var(--_border-color);box-shadow:var(--slotted-toggle-shadow, var(--slotted-control-shadow, none))}[data-ui=toggle][data-part=root][data-pressed]:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) );color:var(--slotted-toggle-pressed-color, var(--slotted-tone-accent-text, HighlightText))}[data-ui=toggle][data-part=root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-hover-background, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=toggle][data-part=root]:active:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-active-background, var(--slotted-tone-secondary-subtle-active, ButtonFace) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][data-part=root][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-hover-background, var(--slotted-tone-accent-subtle-hover, Highlight) )}[data-ui=toggle][data-part=root][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][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=toggle][data-part=root]:disabled,[data-ui=toggle][data-part=root][data-disabled]{background:transparent;color:var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));cursor:not-allowed}[data-ui=toggle][data-part=root][data-variant=outline]:disabled,[data-ui=toggle][data-part=root][data-variant=outline][data-disabled]{border-color:var( --slotted-toggle-disabled-border-color, var(--slotted-disabled-border, GrayText) );box-shadow:none}[data-ui=toggle][data-part=root][data-pressed]:disabled,[data-ui=toggle][data-part=root][data-pressed][data-disabled]{background:var( --slotted-toggle-disabled-pressed-background, var(--slotted-disabled-background, ButtonFace) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) )}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: SlToggle, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[slToggle]', standalone: true, exportAs: 'slToggle', template: `<ng-content select="[slToggleIcon]" /> <span data-part="label"><ng-content /></span>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'data-ui': 'toggle',
+                        'data-part': 'root',
+                        '[attr.type]': 'type',
+                        '[attr.aria-pressed]': 'isPressed()',
+                        '[attr.data-pressed]': "isPressed() ? '' : null",
+                        '[attr.data-disabled]': "disabled() ? '' : null",
+                        '[attr.data-size]': 'resolvedSize()',
+                        '[attr.data-variant]': 'resolvedVariant()',
+                        '[disabled]': 'disabled()',
+                    }, styles: ["@layer slotted.components{[data-ui=toggle][data-part=root]{--_height: var(--slotted-control-height-md, 34px);--_padding-inline: var(--slotted-control-padding-inline-md, 13px);--_font-size: var(--slotted-control-font-size-md, 13px);--_icon-size: var(--slotted-control-icon-size-md, 16px);--_gap: var(--slotted-control-gap-md, 8px);--_radius: var(--slotted-toggle-radius, var(--slotted-control-radius, 4px));--_border-width: var(--slotted-control-border-width, 1px);--_border-color: var( --slotted-toggle-border-color, var(--slotted-control-border-color, ButtonBorder) );align-items:center;appearance:none;background:transparent;block-size:var(--_height);border:var(--_border-width) solid transparent;border-radius:var(--_radius);box-sizing:border-box;color:var(--slotted-toggle-color, var(--slotted-text, ButtonText));cursor:pointer;display:inline-flex;font-family:var(--slotted-control-font-family, ui-sans-serif, system-ui, sans-serif);font-size:var(--_font-size);font-weight:var(--slotted-control-font-weight, 600);gap:var(--_gap);justify-content:center;letter-spacing:var(--slotted-control-letter-spacing, 0);line-height:var(--slotted-control-line-height, 1);margin:0;max-inline-size:100%;min-inline-size:var(--_height);padding-block:0;padding-inline:var(--_padding-inline);position:relative;touch-action:manipulation;transition:background-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),border-color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing),color var(--slotted-control-transition-duration) var(--slotted-control-transition-easing);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent}[data-ui=toggle][data-part=root][data-size=sm]{--_height: var(--slotted-control-height-sm, 30px);--_padding-inline: var(--slotted-control-padding-inline-sm, 10px);--_font-size: var(--slotted-control-font-size-sm, 12px);--_icon-size: var(--slotted-control-icon-size-sm, 14px);--_gap: var(--slotted-control-gap-sm, 6px)}[data-ui=toggle][data-part=root][data-size=lg]{--_height: var(--slotted-control-height-lg, 38px);--_padding-inline: var(--slotted-control-padding-inline-lg, 16px);--_font-size: var(--slotted-control-font-size-lg, 14px);--_icon-size: var(--slotted-control-icon-size-lg, 18px);--_gap: var(--slotted-control-gap-lg, 8px)}[data-ui=toggle][data-part=root]:not(:has([data-part=label]:not(:empty))){inline-size:var(--_height);padding-inline:0}[data-ui=toggle] [data-part=label]:empty{display:none}[data-ui=toggle] [data-part=icon]{--slotted-icon-size: var(--_icon-size);block-size:var(--_icon-size);display:inline-flex;flex:none;font-size:var(--_icon-size);inline-size:var(--_icon-size)}[data-ui=toggle] [data-part=icon]>*{block-size:100%;display:block;inline-size:100%}[data-ui=toggle] [data-part=label]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-ui=toggle][data-part=root][data-variant=outline]{border-color:var(--_border-color);box-shadow:var(--slotted-toggle-shadow, var(--slotted-control-shadow, none))}[data-ui=toggle][data-part=root][data-pressed]:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) );color:var(--slotted-toggle-pressed-color, var(--slotted-tone-accent-text, HighlightText))}[data-ui=toggle][data-part=root]:hover:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-hover-background, var(--slotted-tone-secondary-subtle-hover, ButtonFace) )}[data-ui=toggle][data-part=root]:active:not(:disabled):not([data-disabled]):not([data-pressed]){background:var( --slotted-toggle-active-background, var(--slotted-tone-secondary-subtle-active, ButtonFace) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][data-part=root][data-pressed]:hover:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-hover-background, var(--slotted-tone-accent-subtle-hover, Highlight) )}[data-ui=toggle][data-part=root][data-pressed]:active:not(:disabled):not([data-disabled]){background:var( --slotted-toggle-pressed-background, var(--slotted-tone-accent-subtle-active, Highlight) );transition-duration:var(--slotted-duration-instant)}[data-ui=toggle][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=toggle][data-part=root]:disabled,[data-ui=toggle][data-part=root][data-disabled]{background:transparent;color:var(--slotted-toggle-disabled-color, var(--slotted-disabled-foreground, GrayText));cursor:not-allowed}[data-ui=toggle][data-part=root][data-variant=outline]:disabled,[data-ui=toggle][data-part=root][data-variant=outline][data-disabled]{border-color:var( --slotted-toggle-disabled-border-color, var(--slotted-disabled-border, GrayText) );box-shadow:none}[data-ui=toggle][data-part=root][data-pressed]:disabled,[data-ui=toggle][data-part=root][data-pressed][data-disabled]{background:var( --slotted-toggle-disabled-pressed-background, var(--slotted-disabled-background, ButtonFace) );border-color:var( --slotted-toggle-pressed-border-color, var(--slotted-tone-accent-border, Highlight) )}}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], pressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "pressed", required: false }] }], defaultPressed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultPressed", required: false }] }], pressedChange: [{ type: i0.Output, args: ["pressedChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SlToggle, SlToggleIcon, TOGGLE_DEFAULTS, injectToggleDefaults, provideToggleDefaults };
+//# sourceMappingURL=slotted-angular-toggle.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slotted-angular-toggle.mjs","sources":["../../toggle/src/toggle-defaults.ts","../../toggle/src/toggle.ts","../../toggle/src/slotted-angular-toggle.ts"],"sourcesContent":["import { inject, InjectionToken } from '@angular/core';\n\n/** The type step the control sits at. */\nexport type ToggleSize = 'sm' | 'md' | 'lg';\n\n/**\n * Whether the control is framed or bare. `ghost` is the toggle that sits\n * inside something already framed — a toolbar, a card header. There is no\n * tone axis: a mode is one colour when it is on, and an action that persists\n * in one of five tones is `SlToggleButton`.\n */\nexport type ToggleVariant = 'outline' | 'ghost';\n\nexport interface ToggleDefaults {\n  size: ToggleSize;\n  variant: ToggleVariant;\n}\n\nconst FALLBACK: ToggleDefaults = {\n  size: 'md',\n  variant: 'outline',\n};\n\nexport const TOGGLE_DEFAULTS = new InjectionToken<ToggleDefaults>('slotted toggle defaults', {\n  providedIn: 'root',\n  factory: () => FALLBACK,\n});\n\n/**\n * An application decides once how its toggles are drawn — a toolbar of ghost\n * modes, a form of framed ones — rather than repeating the two inputs on\n * every control. A toggle that states either itself still wins.\n */\nexport function provideToggleDefaults(defaults: Partial<ToggleDefaults>) {\n  return {\n    provide: TOGGLE_DEFAULTS,\n    useFactory: (): ToggleDefaults => ({ ...FALLBACK, ...defaults }),\n  };\n}\n\n/** What a toggle renders as here, before it states anything of its own. */\nexport function injectToggleDefaults(): ToggleDefaults {\n  return inject(TOGGLE_DEFAULTS);\n}\n","import {\n  AfterViewInit,\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  Directive,\n  ElementRef,\n  HostAttributeToken,\n  inject,\n  input,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { WritableSignal } from '@angular/core';\nimport { createControllable } from '@slotted/core/state';\nimport type { ChangeRequest } from '@slotted/core/state';\n\nimport { injectToggleDefaults } from './toggle-defaults';\nimport type { ToggleSize, ToggleVariant } from './toggle-defaults';\n\n/** Why the state moved. A toggle can produce exactly these two. */\nexport type TogglePressedReason = 'pointer' | 'keyboard';\n\n/**\n * The mark beside the words, or the whole content of an icon-only toggle. A\n * marker on the consumer's own element rather than a wrapper, so an `svg`, an\n * `sl-icon` and a masked `span` all work and none loses its own semantics. It\n * is hidden from the reading order, because the words beside it — or the\n * `aria-label` on the button — are what a reader hears.\n */\n@Directive({\n  selector: '[slToggleIcon]',\n  standalone: true,\n  exportAs: 'slToggleIcon',\n  host: {\n    'data-part': 'icon',\n    'aria-hidden': 'true',\n  },\n})\nexport class SlToggleIcon {}\n\n/**\n * A click synthesised by the keyboard reports no detail; a real one reports\n * the click count. It is why `Space`, `Enter` and a pointer are told apart\n * without a key listener existing anywhere in the family.\n */\nfunction activationReason(event: Event): TogglePressedReason {\n  return event instanceof MouseEvent && event.detail === 0 ? 'keyboard' : 'pointer';\n}\n\n/**\n * A two-state button standing on its own: a mode — Bold, Wrap, Pin — that is\n * true the moment it is pressed. `aria-pressed` is written in both states, so\n * the control is announced as a toggle rather than as a button that happens\n * to be pressed, and its label never changes with its state, which the APG\n * Button pattern calls critical.\n *\n * `SlToggleButton` is the other member: an action that persists — Follow,\n * Subscribe — which reaches a server and waits, in one of five tones. The two\n * hold one state model and one output shape, so a consumer moving between\n * them changes no handler. Inside `slToolbar` the bar owns the tab stop and\n * the arrows, and this control writes no listener of its own.\n *\n * The component is a directive on the element the consumer wrote, so\n * substituting the element is writing a different one — and it has to stay a\n * `button`: `aria-pressed` on a link is a link announcing a state a link does\n * not hold.\n */\n@Component({\n  selector: 'button[slToggle]',\n  standalone: true,\n  exportAs: 'slToggle',\n  template: `<ng-content select=\"[slToggleIcon]\" /> <span data-part=\"label\"><ng-content /></span>`,\n  styleUrl: '../../../styles/src/toggle/toggle.css',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    'data-ui': 'toggle',\n    'data-part': 'root',\n    '[attr.type]': 'type',\n    '[attr.aria-pressed]': 'isPressed()',\n    '[attr.data-pressed]': \"isPressed() ? '' : null\",\n    '[attr.data-disabled]': \"disabled() ? '' : null\",\n    '[attr.data-size]': 'resolvedSize()',\n    '[attr.data-variant]': 'resolvedVariant()',\n    '[disabled]': 'disabled()',\n  },\n})\nexport class SlToggle implements AfterViewInit {\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly size = input<ToggleSize | undefined>(undefined);\n  readonly variant = input<ToggleVariant | undefined>(undefined);\n\n  /** Present means controlled, for the life of the component. */\n  readonly pressed = input<boolean | undefined, boolean | string | undefined>(undefined, {\n    transform: (value) => (value === undefined ? undefined : booleanAttribute(value)),\n  });\n  /** The value an uncontrolled toggle starts from, read once. */\n  readonly defaultPressed = input(false, { transform: booleanAttribute });\n  /**\n   * One output for one transition, carrying the value, the value it replaces,\n   * the reason, the originating event and `cancel()`. There is no\n   * `[(pressed)]` because a two-way binding has one slot and cannot carry any\n   * of those — the reason `SlToggleButton` records for the same choice.\n   */\n  readonly pressedChange = output<ChangeRequest<boolean>>();\n\n  private readonly defaults = injectToggleDefaults();\n  private readonly element = inject(ElementRef<HTMLButtonElement>).nativeElement;\n  private readonly destroyRef = inject(DestroyRef);\n  /**\n   * A `type` the consumer wrote survives: a toggle inside a form is a\n   * `button` unless the consumer says `submit`, and the attribute is read\n   * before the host binding writes it.\n   */\n  private readonly writtenType = inject(new HostAttributeToken('type'), { optional: true });\n  protected readonly type = this.writtenType ?? 'button';\n\n  private readonly own: WritableSignal<boolean | undefined> = signal(undefined);\n\n  readonly isPressed = computed(() => this.pressed() ?? this.own() ?? this.defaultPressed());\n  readonly resolvedSize = computed(() => this.size() ?? this.defaults.size);\n  readonly resolvedVariant = computed(() => this.variant() ?? this.defaults.variant);\n\n  /**\n   * After the view, not in the constructor. A `(click)` written on the same\n   * element is bound when the view is created, so a listener registered any\n   * earlier runs first and reads `defaultPrevented` before the consumer has\n   * had the chance to set it — and a refused activation would move the state\n   * anyway.\n   */\n  ngAfterViewInit() {\n    const listener = (event: Event) => {\n      if (this.disabled() || event.defaultPrevented) return;\n      this.request(event);\n    };\n    this.element.addEventListener('click', listener);\n    this.destroyRef.onDestroy(() => this.element.removeEventListener('click', listener));\n  }\n\n  private request(event: Event) {\n    const next = !this.isPressed();\n    const state = createControllable<boolean>({\n      controlled: this.pressed(),\n      initial: this.isPressed(),\n      onRequest: (request) => this.pressedChange.emit(request),\n    });\n    if (state.request(next, activationReason(event), event)) this.own.set(next);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}