@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/fesm2022/area8975-ui-rich-text-editor.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-rich-text-editor.mjs","names":[],"sources":["../../../projects/ui/rich-text-editor/rich-text-editor.types.ts","../../../projects/ui/rich-text-editor/rich-text-editor.component.ts","../../../projects/ui/rich-text-editor/rich-text-editor.component.html"],"sourcesContent":["/**\n * Every tool the editor's toolbar can show. Leaving a formatting tool out of\n * `tools` also turns that formatting off - its shortcut stops working and\n * pasted content loses it - so the value only ever holds what the toolbar offers.\n * `undo` and `redo` only control the buttons; history and its shortcuts are always on.\n */\nexport const RichTextTools = [\n    'bold',\n    'italic',\n    'underline',\n    'strike',\n    'code',\n    'heading1',\n    'heading2',\n    'heading3',\n    'bulletList',\n    'orderedList',\n    'blockquote',\n    'codeBlock',\n    'horizontalRule',\n    'link',\n    'undo',\n    'redo'\n] as const;\n\n/** @see {@link RichTextTools} */\nexport type RichTextTool = typeof RichTextTools[number];\n\n/** The toolbar's groups, in order, with a divider drawn between each. */\nexport const RichTextToolGroups: readonly (readonly RichTextTool[])[] = [\n    ['bold', 'italic', 'underline', 'strike', 'code'],\n    ['heading1', 'heading2', 'heading3'],\n    ['bulletList', 'orderedList', 'blockquote', 'codeBlock', 'horizontalRule'],\n    ['link'],\n    ['undo', 'redo']\n];\n\n/** true is valid, false is invalid, null is not yet validated. */\nexport type RichTextEditorValidation = boolean | null;\n","import {\n    afterNextRender,\n    afterRenderEffect,\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    DestroyRef,\n    effect,\n    ElementRef,\n    inject,\n    Injector,\n    input,\n    model,\n    output,\n    signal,\n    untracked,\n    viewChild,\n    ViewEncapsulation\n} from '@angular/core';\n\nimport { UiButtonComponent } from '@area8975/ui/button';\nimport { UiFieldComponent } from '@area8975/ui/field';\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport {\n    heroArrowUturnLeft,\n    heroArrowUturnRight,\n    heroBold,\n    heroChatBubbleLeft,\n    heroCodeBracket,\n    heroCodeBracketSquare,\n    heroH1,\n    heroH2,\n    heroH3,\n    heroItalic,\n    heroLink,\n    heroListBullet,\n    heroMinus,\n    heroNumberedList,\n    heroStrikethrough,\n    heroUnderline\n} from '@ng-icons/heroicons/outline';\nimport { type ChainedCommands, Editor } from '@tiptap/core';\nimport { Placeholder } from '@tiptap/extensions';\nimport StarterKit from '@tiptap/starter-kit';\n\nimport {\n    type RichTextEditorValidation,\n    type RichTextTool,\n    RichTextToolGroups,\n    RichTextTools\n} from './rich-text-editor.types';\n\n\ninterface ToolDefinition {\n    label: string;\n    icon: string;\n    /** Whether the tool is \"on\" at the cursor. Tools without it aren't toggles. */\n    active?: (editor: Editor) => boolean;\n    run: (chain: ChainedCommands) => ChainedCommands;\n}\n\nconst TOOLS: Record<Exclude<RichTextTool, 'link'>, ToolDefinition> = {\n    bold: {\n        label: 'Bold',\n        icon: 'heroBold',\n        active: editor => editor.isActive('bold'),\n        run: chain => chain.toggleBold()\n    },\n    italic: {\n        label: 'Italic',\n        icon: 'heroItalic',\n        active: editor => editor.isActive('italic'),\n        run: chain => chain.toggleItalic()\n    },\n    underline: {\n        label: 'Underline',\n        icon: 'heroUnderline',\n        active: editor => editor.isActive('underline'),\n        run: chain => chain.toggleUnderline()\n    },\n    strike: {\n        label: 'Strikethrough',\n        icon: 'heroStrikethrough',\n        active: editor => editor.isActive('strike'),\n        run: chain => chain.toggleStrike()\n    },\n    code: {\n        label: 'Inline code',\n        icon: 'heroCodeBracket',\n        active: editor => editor.isActive('code'),\n        run: chain => chain.toggleCode()\n    },\n    heading1: {\n        label: 'Heading 1',\n        icon: 'heroH1',\n        active: editor => editor.isActive('heading', { level: 1 }),\n        run: chain => chain.toggleHeading({ level: 1 })\n    },\n    heading2: {\n        label: 'Heading 2',\n        icon: 'heroH2',\n        active: editor => editor.isActive('heading', { level: 2 }),\n        run: chain => chain.toggleHeading({ level: 2 })\n    },\n    heading3: {\n        label: 'Heading 3',\n        icon: 'heroH3',\n        active: editor => editor.isActive('heading', { level: 3 }),\n        run: chain => chain.toggleHeading({ level: 3 })\n    },\n    bulletList: {\n        label: 'Bulleted list',\n        icon: 'heroListBullet',\n        active: editor => editor.isActive('bulletList'),\n        run: chain => chain.toggleBulletList()\n    },\n    orderedList: {\n        label: 'Numbered list',\n        icon: 'heroNumberedList',\n        active: editor => editor.isActive('orderedList'),\n        run: chain => chain.toggleOrderedList()\n    },\n    blockquote: {\n        label: 'Quote',\n        icon: 'heroChatBubbleLeft',\n        active: editor => editor.isActive('blockquote'),\n        run: chain => chain.toggleBlockquote()\n    },\n    codeBlock: {\n        label: 'Code block',\n        icon: 'heroCodeBracketSquare',\n        active: editor => editor.isActive('codeBlock'),\n        run: chain => chain.toggleCodeBlock()\n    },\n    horizontalRule: {\n        label: 'Divider',\n        icon: 'heroMinus',\n        run: chain => chain.setHorizontalRule()\n    },\n    undo: {\n        label: 'Undo',\n        icon: 'heroArrowUturnLeft',\n        run: chain => chain.undo()\n    },\n    redo: {\n        label: 'Redo',\n        icon: 'heroArrowUturnRight',\n        run: chain => chain.redo()\n    }\n};\n\nconst LINK_TOOL: ToolDefinition = {\n    label: 'Link',\n    icon: 'heroLink',\n    active: editor => editor.isActive('link'),\n    run: chain => chain\n};\n\nlet nextId = 0;\n\n/**\n * A WYSIWYG editor whose value is an HTML string, with a toolbar of formatting tools.\n */\n@Component({\n    selector: 'ui-rich-text-editor',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    // the editable content is rendered by Tiptap, not Angular, so emulated\n    // styles can't reach it - every selector is scoped under .ui-rich-text-editor instead\n    encapsulation: ViewEncapsulation.None,\n    templateUrl: './rich-text-editor.component.html',\n    styleUrl: './rich-text-editor.component.css',\n    imports: [NgIcon, UiButtonComponent, UiInputComponent],\n    providers: [provideIcons({\n        heroArrowUturnLeft,\n        heroArrowUturnRight,\n        heroBold,\n        heroChatBubbleLeft,\n        heroCodeBracket,\n        heroCodeBracketSquare,\n        heroH1,\n        heroH2,\n        heroH3,\n        heroItalic,\n        heroLink,\n        heroListBullet,\n        heroMinus,\n        heroNumberedList,\n        heroStrikethrough,\n        heroUnderline\n    })],\n    host: { class: 'ui-rich-text-editor-host', '[attr.id]': 'null' }\n})\nexport class UiRichTextEditorComponent {\n    /** The content as HTML. An empty editor is `''`. */\n    readonly value = model.required<string>();\n\n    readonly classes = input<string>('');\n\n    /** Which toolbar tools to show, and so which formatting is allowed. @see {@link RichTextTools} */\n    readonly tools = input<readonly RichTextTool[]>(RichTextTools);\n\n    readonly id = input<string>('');\n    readonly placeholder = input<string>('');\n\n    readonly required = input(false, { transform: booleanAttribute });\n    readonly disabled = input(false, { transform: booleanAttribute });\n    readonly readonly = input(false, { transform: booleanAttribute });\n\n    /** true/false shows valid/invalid styling. null means not validated yet. */\n    readonly validationState = model<RichTextEditorValidation>(null);\n\n    readonly spellcheck = input(true, { transform: booleanAttribute });\n\n    readonly ariaLabel = input<string>('');\n    readonly describedBy = input<string>('');\n\n    /**\n     * Ids of the elements that name the editor. Defaults to the label of the\n     * `ui-field` it sits in, when that field's `for` is this editor's `id` -\n     * a `<label for>` can't name a contenteditable on its own.\n     */\n    readonly labelledBy = input<string>('');\n\n    readonly focused = output<FocusEvent>();\n    readonly blurred = output<FocusEvent>();\n\n    private readonly injector = inject(Injector);\n    private readonly field = inject(UiFieldComponent, { optional: true });\n    private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly content = viewChild.required<ElementRef<HTMLElement>>(\n        'content'\n    );\n\n    private readonly editor = signal<Editor | null>(null);\n\n    /** Bumped on every editor transaction, so toolbar state re-reads the editor. */\n    private readonly revision = signal(0);\n\n    /** The HTML the editor last held, to tell our own updates from outside ones. */\n    private lastHtml: string | null = null;\n\n    protected readonly contentId = `ui-rich-text-editor-${nextId++}`;\n    protected readonly linkInputId = `${this.contentId}-link`;\n\n    protected readonly linkOpen = signal(false);\n    protected readonly linkHref = signal('');\n\n    /** Index of the toolbar button that takes the toolbar's single tab stop. */\n    protected readonly focusIndex = signal(0);\n\n    private readonly resolvedLabelledBy = computed(() => {\n        if (this.labelledBy()) {\n            return this.labelledBy();\n        }\n\n        const id = this.id();\n\n        return id && this.field?.for() === id ? this.field.labelId() : '';\n    });\n\n    protected readonly editable = computed(() =>\n        !this.disabled() && !this.readonly()\n    );\n\n    protected readonly toolGroups = computed(() => {\n        const tools = new Set(this.tools());\n\n        return RichTextToolGroups\n            .map(group => group.filter(tool => tools.has(tool)))\n            .filter(group => group.length > 0);\n    });\n\n    protected readonly flatTools = computed(() => this.toolGroups().flat());\n\n    protected readonly showToolbar = computed(() =>\n        !this.readonly() && this.flatTools().length > 0\n    );\n\n    /** Per tool: whether it's on at the cursor, and whether it can run right now. */\n    protected readonly toolState = computed(() => {\n        this.revision();\n\n        const editor = this.editor();\n        const editable = this.editable();\n        const state = {} as Record<\n            RichTextTool,\n            { active: boolean; enabled: boolean; }\n        >;\n\n        for (const tool of this.flatTools()) {\n            const definition = this.toolDefinition(tool);\n            const runnable = tool === 'undo' || tool === 'redo' ?\n                !!editor?.can()[tool]() :\n                true;\n\n            state[tool] = {\n                active: !!editor && !!definition.active?.(editor),\n                enabled: !!editor && editable && runnable\n            };\n        }\n\n        return state;\n    });\n\n    protected readonly generatedClasses = computed(() =>\n        [\n            'ui-rich-text-editor',\n            this.classes()\n        ]\n            .filter(Boolean)\n            .join(' ')\n    );\n\n    /** Attributes for the contenteditable element, which Tiptap renders. */\n    private readonly contentAttributes = computed(() => {\n        const attributes: Record<string, string> = {\n            id: this.id() || this.contentId,\n            class: 'ui-rich-text-editor__content ui-text-body',\n            role: 'textbox',\n            'aria-multiline': 'true',\n            spellcheck: String(this.spellcheck())\n        };\n\n        const optional: Record<string, string | false> = {\n            'aria-label': this.ariaLabel(),\n            'aria-labelledby': this.resolvedLabelledBy(),\n            'aria-describedby': this.describedBy(),\n            'aria-required': this.required() && 'true',\n            'aria-readonly': this.readonly() && 'true',\n            'aria-disabled': this.disabled() && 'true',\n            'aria-invalid': this.validationState() === false && 'true'\n        };\n\n        for (const [name, value] of Object.entries(optional)) {\n            if (value) {\n                attributes[name] = value;\n            }\n        }\n\n        return attributes;\n    });\n\n    /** Each tool left out of `tools` switches its extension off. */\n    private readonly extensions = computed(() => {\n        const tools = new Set(this.tools());\n        const on = (tool: RichTextTool) =>\n            tools.has(tool) ? {} : false as const;\n        const levels = ([1, 2, 3] as const).filter(level =>\n            tools.has(`heading${level}`)\n        );\n\n        return [\n            StarterKit.configure({\n                bold: on('bold'),\n                italic: on('italic'),\n                underline: on('underline'),\n                strike: on('strike'),\n                code: on('code'),\n                heading: levels.length ? { levels: [...levels] } : false,\n                bulletList: on('bulletList'),\n                orderedList: on('orderedList'),\n                blockquote: on('blockquote'),\n                codeBlock: on('codeBlock'),\n                horizontalRule: on('horizontalRule'),\n                // it appends an empty paragraph after a final heading, list, quote etc.\n                // on any transaction - even a click - which changes the value; the\n                // gap cursor already lets you get below those blocks\n                trailingNode: false,\n                link: tools.has('link') ?\n                    {\n                        openOnClick: false,\n                        autolink: true,\n                        defaultProtocol: 'https'\n                    } :\n                    false\n            }),\n            Placeholder.configure({\n                placeholder: () => this.placeholder()\n            })\n        ];\n    });\n\n    constructor() {\n        // (re)builds the editor once rendered, and whenever the allowed tools change\n        afterRenderEffect(() => {\n            const extensions = this.extensions();\n\n            untracked(() => this.createEditor(extensions));\n        });\n\n        effect(() => {\n            this.editor()?.setEditable(this.editable(), false);\n        });\n\n        effect(() => {\n            this.editor()?.setOptions({\n                editorProps: { attributes: this.contentAttributes() }\n            });\n        });\n\n        // outside changes to value\n        effect(() => {\n            const value = this.value();\n            const editor = this.editor();\n\n            if (editor && value !== this.lastHtml) {\n                this.lastHtml = value;\n                editor.commands.setContent(value, { emitUpdate: false });\n            }\n        });\n\n        inject(DestroyRef).onDestroy(() => this.editor()?.destroy());\n    }\n\n    protected toolDefinition(tool: RichTextTool): ToolDefinition {\n        return tool === 'link' ? LINK_TOOL : TOOLS[tool];\n    }\n\n    protected readonly runTool = (tool: RichTextTool) => {\n        const editor = this.editor();\n\n        if (!editor || !this.toolState()[tool]?.enabled) {\n            return;\n        }\n\n        if (tool === 'link') {\n            this.openLink();\n\n            return;\n        }\n\n        this.toolDefinition(tool).run(editor.chain().focus()).run();\n    };\n\n    /** Arrow keys move between toolbar buttons, so the toolbar is one tab stop. */\n    protected readonly onToolbarKeydown = (event: KeyboardEvent) => {\n        const count = this.flatTools().length;\n        const current = this.focusIndex();\n        const next = {\n            ArrowRight: (current + 1) % count,\n            ArrowLeft: (current - 1 + count) % count,\n            Home: 0,\n            End: count - 1\n        }[event.key];\n\n        if (next === undefined) {\n            return;\n        }\n\n        event.preventDefault();\n        this.focusIndex.set(next);\n\n        const buttons = this.host.nativeElement.querySelectorAll<\n            HTMLButtonElement\n        >(\n            '.ui-rich-text-editor__tool'\n        );\n\n        buttons[next]?.focus();\n    };\n\n    protected readonly openLink = () => {\n        const editor = this.editor();\n\n        if (!editor) {\n            return;\n        }\n\n        this.linkHref.set(editor.getAttributes('link')['href'] ?? '');\n        this.linkOpen.set(true);\n\n        afterNextRender(() => {\n            this.host.nativeElement\n                .querySelector<HTMLInputElement>(`#${this.linkInputId}`)\n                ?.focus();\n        }, { injector: this.injector });\n    };\n\n    protected readonly applyLink = () => {\n        const editor = this.editor();\n        const typed = this.linkHref().trim();\n\n        if (!editor) {\n            return;\n        }\n\n        if (!typed) {\n            this.removeLink();\n\n            return;\n        }\n\n        // \"example.com\" would otherwise be a relative link\n        const href = /^([a-z][a-z\\d+.-]*:|[/#?])/i.test(typed) ?\n            typed :\n            `https://${typed}`;\n        const chain = editor.chain().focus().extendMarkRange('link');\n\n        // with nothing selected, the address itself becomes the link text\n        if (editor.state.selection.empty && !editor.isActive('link')) {\n            chain.insertContent({\n                type: 'text',\n                text: href,\n                marks: [{ type: 'link', attrs: { href } }]\n            });\n        } else {\n            chain.setLink({ href });\n        }\n\n        chain.run();\n        this.linkOpen.set(false);\n    };\n\n    protected readonly removeLink = () => {\n        this.editor()?.chain().focus().extendMarkRange('link').unsetLink()\n            .run();\n        this.linkOpen.set(false);\n    };\n\n    protected readonly closeLink = () => {\n        this.linkOpen.set(false);\n        this.editor()?.commands.focus();\n    };\n\n    protected readonly onLinkKeydown = (event: KeyboardEvent) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            this.applyLink();\n        } else if (event.key === 'Escape') {\n            event.preventDefault();\n            this.closeLink();\n        }\n    };\n\n    private createEditor(extensions: ReturnType<typeof this.extensions>): void {\n        const previous = this.editor();\n        const content = previous ? this.htmlOf(previous) : this.value();\n\n        previous?.destroy();\n\n        const editor = new Editor({\n            element: this.content().nativeElement,\n            extensions,\n            content,\n            editable: this.editable(),\n            editorProps: { attributes: this.contentAttributes() },\n            onUpdate: ({ editor }) => {\n                this.lastHtml = this.htmlOf(editor);\n                this.value.set(this.lastHtml);\n            },\n            onTransaction: () => this.revision.update(revision => revision + 1),\n            onFocus: ({ event }) => this.focused.emit(event),\n            onBlur: ({ event }) => this.blurred.emit(event)\n        });\n\n        this.lastHtml = content;\n        this.editor.set(editor);\n\n        // a rebuild with fewer tools strips the formatting they allowed\n        if (previous && this.htmlOf(editor) !== content) {\n            this.lastHtml = this.htmlOf(editor);\n            this.value.set(this.lastHtml);\n        }\n    }\n\n    private htmlOf(editor: Editor): string {\n        return editor.isEmpty ? '' : editor.getHTML();\n    }\n}\n","<div\n    [class]=\"generatedClasses()\"\n    [attr.data-invalid]=\"validationState() === false ? '' : null\"\n    [attr.data-valid]=\"validationState() === true ? '' : null\"\n    [attr.data-disabled]=\"disabled() ? '' : null\"\n>\n    @if (showToolbar()) {\n        <div\n            class=\"ui-rich-text-editor__toolbar\"\n            role=\"toolbar\"\n            tabindex=\"-1\"\n            aria-label=\"Formatting\"\n            [attr.aria-controls]=\"id() || contentId\"\n            (keydown)=\"onToolbarKeydown($event)\"\n        >\n            @for (group of toolGroups(); track group[0]) {\n                @if (!$first) {\n                    <span\n                        class=\"ui-rich-text-editor__divider\"\n                        role=\"separator\"\n                        aria-orientation=\"vertical\"\n                    ></span>\n                }\n\n                @for (tool of group; track tool) {\n                    @let definition = toolDefinition(tool);\n                    @let state = toolState()[tool];\n\n                    <button\n                        type=\"button\"\n                        class=\"ui-rich-text-editor__tool\"\n                        [title]=\"definition.label\"\n                        [attr.aria-label]=\"definition.label\"\n                        [attr.aria-pressed]=\"definition.active ? state.active : null\"\n                        [attr.aria-disabled]=\"state.enabled ? null : 'true'\"\n                        [attr.data-active]=\"state.active ? '' : null\"\n                        [tabIndex]=\"flatTools().indexOf(tool) === focusIndex() ? 0 : -1\"\n                        (mousedown)=\"$event.preventDefault()\"\n                        (focus)=\"focusIndex.set(flatTools().indexOf(tool))\"\n                        (click)=\"runTool(tool)\"\n                    >\n                        <ng-icon [name]=\"definition.icon\" aria-hidden=\"true\" />\n                    </button>\n                }\n            }\n        </div>\n    }\n\n    @if (linkOpen()) {\n        <div\n            class=\"ui-rich-text-editor__link\"\n            tabindex=\"-1\"\n            (keydown)=\"onLinkKeydown($event)\"\n        >\n            <ui-input\n                class=\"ui-rich-text-editor__link-input\"\n                type=\"url\"\n                placeholder=\"https://\"\n                ariaLabel=\"Link address\"\n                [id]=\"linkInputId\"\n                [(value)]=\"linkHref\"\n            />\n\n            <ui-button size=\"sm\" (click)=\"applyLink()\">Apply</ui-button>\n\n            @if (toolState()['link']?.active) {\n                <ui-button\n                    size=\"sm\"\n                    appearance=\"ghost\"\n                    intent=\"danger\"\n                    (click)=\"removeLink()\"\n                >\n                    Remove\n                </ui-button>\n            }\n\n            <ui-button\n                size=\"sm\"\n                appearance=\"ghost\"\n                intent=\"secondary\"\n                (click)=\"closeLink()\"\n            >\n                Cancel\n            </ui-button>\n        </div>\n    }\n\n    <div #content class=\"ui-rich-text-editor__body\"></div>\n</div>\n"],"mappings":"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"}

package/fesm2022/area8975-ui-search.mjs

@@ -0,0 +1,266 @@
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, ElementRef, booleanAttribute, computed, effect, inject, input, model, numberAttribute, output, untracked } from "@angular/core";
+import { UiInputComponent } from "@area8975/ui/input";
+import { UiTableRegistry } from "@area8975/ui/table";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroMagnifyingGlass, heroXMark } from "@ng-icons/heroicons/outline";
+var UiSearchComponent = class UiSearchComponent {
+	host = inject(ElementRef);
+	registry = inject(UiTableRegistry);
+	value = model("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	placeholder = input("Search", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Search", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	debounce = input(300, {
+		...ngDevMode ? { debugName: "debounce" } : /* istanbul ignore next */ {},
+		transform: numberAttribute
+	});
+	table = input(null, ...ngDevMode ? [{ debugName: "table" }] : /* istanbul ignore next */ []);
+	searched = output();
+	linked = computed(() => {
+		const id = this.table();
+		return id ? this.registry.get(id) : null;
+	}, ...ngDevMode ? [{ debugName: "linked" }] : /* istanbul ignore next */ []);
+	timer;
+	constructor() {
+		let previous = null;
+		effect(() => {
+			const table = this.linked();
+			const query = table?.query() ?? "";
+			untracked(() => {
+				const justLinked = table !== previous;
+				previous = table;
+				if (!table) return;
+				if (justLinked && !query && this.value()) {
+					table.query.set(this.value());
+					return;
+				}
+				this.value.set(query);
+			});
+		});
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+	}
+	onInput(value) {
+		this.value.set(value);
+		this.linked()?.query.set(value);
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => this.searched.emit(value), this.debounce());
+	}
+	clear() {
+		if (!this.value()) return;
+		clearTimeout(this.timer);
+		this.value.set("");
+		this.linked()?.query.set("");
+		this.searched.emit("");
+		this.host.nativeElement.querySelector("input")?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiSearchComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiSearchComponent,
+		isStandalone: true,
+		selector: "ui-search",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			debounce: {
+				classPropertyName: "debounce",
+				publicName: "debounce",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			table: {
+				classPropertyName: "table",
+				publicName: "table",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			searched: "searched"
+		},
+		host: { classAttribute: "block" },
+		providers: [provideIcons({
+			heroMagnifyingGlass,
+			heroXMark
+		})],
+		ngImport: i0,
+		template: "<ui-input\n    [value]=\"value()\"\n    (valueChange)=\"onInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [disabled]=\"disabled()\"\n    [spellcheck]=\"false\"\n    inputRole=\"searchbox\"\n    autocomplete=\"off\"\n    (keydown.escape)=\"clear()\"\n>\n    <ng-template #leading>\n        <ng-icon name=\"heroMagnifyingGlass\" class=\"ms-3 size-4 text-muted-foreground-1 shrink-0\" />\n    </ng-template>\n\n    <ng-template #trailing>\n        @if (value() && !disabled()) {\n            <button type=\"button\" class=\"ui-search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n                <ng-icon name=\"heroXMark\" size=\"16\" class=\"shrink-0\" />\n            </button>\n        }\n    </ng-template>\n</ui-input>\n",
+		styles: ["@layer properties;.ui-search-clear{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-search-clear:hover{color:var(--foreground)}.ui-search-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-search-clear:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-search-clear:focus-visible{--tw-outline-style: none;outline-style:none}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiInputComponent,
+			selector: "ui-input",
+			inputs: [
+				"value",
+				"classes",
+				"type",
+				"id",
+				"name",
+				"placeholder",
+				"autocomplete",
+				"inputmode",
+				"required",
+				"disabled",
+				"readonly",
+				"validationState",
+				"min",
+				"max",
+				"step",
+				"pattern",
+				"minlength",
+				"maxlength",
+				"autofocus",
+				"spellcheck",
+				"revealable",
+				"list",
+				"ariaLabel",
+				"describedBy",
+				"inputRole",
+				"ariaExpanded",
+				"ariaControls",
+				"ariaActiveDescendant",
+				"ariaAutocomplete",
+				"ariaHasPopup"
+			],
+			outputs: [
+				"valueChange",
+				"validationStateChange",
+				"focused",
+				"blurred"
+			]
+		}, {
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiSearchComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-search",
+			imports: [UiInputComponent, NgIcon],
+			providers: [provideIcons({
+				heroMagnifyingGlass,
+				heroXMark
+			})],
+			host: { class: "block" },
+			template: "<ui-input\n    [value]=\"value()\"\n    (valueChange)=\"onInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [disabled]=\"disabled()\"\n    [spellcheck]=\"false\"\n    inputRole=\"searchbox\"\n    autocomplete=\"off\"\n    (keydown.escape)=\"clear()\"\n>\n    <ng-template #leading>\n        <ng-icon name=\"heroMagnifyingGlass\" class=\"ms-3 size-4 text-muted-foreground-1 shrink-0\" />\n    </ng-template>\n\n    <ng-template #trailing>\n        @if (value() && !disabled()) {\n            <button type=\"button\" class=\"ui-search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n                <ng-icon name=\"heroXMark\" size=\"16\" class=\"shrink-0\" />\n            </button>\n        }\n    </ng-template>\n</ui-input>\n",
+			styles: ["@layer properties;.ui-search-clear{margin-inline-end:var(--spacing, .25rem);display:flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding:calc(var(--spacing, .25rem) * 1.5);color:var(--muted-foreground-1)}.ui-search-clear:hover{color:var(--foreground)}.ui-search-clear:focus-visible{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-search-clear:focus-visible{--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-search-clear:focus-visible{--tw-outline-style: none;outline-style:none}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		debounce: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "debounce",
+				required: false
+			}]
+		}],
+		table: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "table",
+				required: false
+			}]
+		}],
+		searched: [{
+			type: i0.Output,
+			args: ["searched"]
+		}]
+	}
+});
+export { UiSearchComponent };
+
+//# sourceMappingURL=area8975-ui-search.mjs.map

package/fesm2022/area8975-ui-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-search.mjs","names":[],"sources":["../../../projects/ui/search/search.component.ts","../../../projects/ui/search/search.component.html"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    DestroyRef,\n    effect,\n    ElementRef,\n    inject,\n    input,\n    model,\n    numberAttribute,\n    output,\n    untracked\n} from '@angular/core';\n\nimport { UiInputComponent } from '@area8975/ui/input';\nimport { type UiLinkedTable, UiTableRegistry } from '@area8975/ui/table';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroMagnifyingGlass, heroXMark } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-search',\n    templateUrl: './search.component.html',\n    styleUrl: './search.component.css',\n    imports: [UiInputComponent, NgIcon],\n    providers: [provideIcons({ heroMagnifyingGlass, heroXMark })],\n    host: { class: 'block' }\n})\nexport class UiSearchComponent {\n    private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);\n    private readonly registry = inject(UiTableRegistry);\n\n    readonly value = model<string>('');\n\n    readonly placeholder = input<string>('Search');\n    readonly ariaLabel = input<string>('Search');\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    /** How long typing has to pause before `searched` fires, in milliseconds. */\n    readonly debounce = input(300, { transform: numberAttribute });\n\n    /** The `tableId` of a ui-table to search, it can render before or after this. */\n    readonly table = input<string | null>(null);\n\n    /** The value once typing pauses, for running a search. Clearing fires straight away. */\n    readonly searched = output<string>();\n\n    private readonly linked = computed(() => {\n        const id = this.table();\n\n        return id ? this.registry.get(id) : null;\n    });\n\n    private timer: ReturnType<typeof setTimeout> | undefined;\n\n    constructor() {\n        let previous: UiLinkedTable | null = null;\n\n        effect(() => {\n            const table = this.linked();\n            const query = table?.query() ?? '';\n\n            untracked(() => {\n                const justLinked = table !== previous;\n\n                previous = table;\n\n                if (!table) {\n                    return;\n                }\n\n                if (justLinked && !query && this.value()) {\n                    table.query.set(this.value());\n\n                    return;\n                }\n\n                this.value.set(query);\n            });\n        });\n\n        inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n    }\n\n    protected onInput(value: string): void {\n        this.value.set(value);\n        this.linked()?.query.set(value);\n\n        clearTimeout(this.timer);\n        this.timer = setTimeout(() => this.searched.emit(value), this.debounce());\n    }\n\n    protected clear(): void {\n        if (!this.value()) {\n            return;\n        }\n\n        clearTimeout(this.timer);\n        this.value.set('');\n        this.linked()?.query.set('');\n        this.searched.emit('');\n\n        this.host.nativeElement.querySelector('input')?.focus();\n    }\n}\n","<ui-input\n    [value]=\"value()\"\n    (valueChange)=\"onInput($event)\"\n    [placeholder]=\"placeholder()\"\n    [ariaLabel]=\"ariaLabel()\"\n    [disabled]=\"disabled()\"\n    [spellcheck]=\"false\"\n    inputRole=\"searchbox\"\n    autocomplete=\"off\"\n    (keydown.escape)=\"clear()\"\n>\n    <ng-template #leading>\n        <ng-icon name=\"heroMagnifyingGlass\" class=\"ms-3 size-4 text-muted-foreground-1 shrink-0\" />\n    </ng-template>\n\n    <ng-template #trailing>\n        @if (value() && !disabled()) {\n            <button type=\"button\" class=\"ui-search-clear\" aria-label=\"Clear search\" (click)=\"clear()\">\n                <ng-icon name=\"heroXMark\" size=\"16\" class=\"shrink-0\" />\n            </button>\n        }\n    </ng-template>\n</ui-input>\n"],"mappings":"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"}

package/fesm2022/area8975-ui-segmented.mjs

@@ -0,0 +1,118 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, input, model } from "@angular/core";
+let nextId = 0;
+var UiSegmentedComponent = class UiSegmentedComponent {
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	value = model.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	ariaLabel = input.required(...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	fill = input(false, {
+		...ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	name = `ui-segmented-${nextId++}`;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiSegmentedComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: UiSegmentedComponent,
+		isStandalone: true,
+		selector: "ui-segmented",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			fill: {
+				classPropertyName: "fill",
+				publicName: "fill",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { properties: { "class.block": "fill()" } },
+		ngImport: i0,
+		template: "<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <label\n            class=\"ui-segmented-option ui-text-body-alt\"\n            [class.ui-segmented-option--selected]=\"option.value === value()\"\n        >\n            <input\n                type=\"radio\"\n                class=\"sr-only\"\n                [name]=\"name\"\n                [checked]=\"option.value === value()\"\n                [attr.aria-label]=\"option.ariaLabel || null\"\n                (change)=\"value.set(option.value)\"\n            />\n            {{ option.label }}\n        </label>\n    }\n</div>\n",
+		styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{min-height:calc(1lh + calc(var(--spacing, .25rem) * 3));cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(:focus-visible){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiSegmentedComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-segmented",
+			host: { "[class.block]": "fill()" },
+			template: "<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <label\n            class=\"ui-segmented-option ui-text-body-alt\"\n            [class.ui-segmented-option--selected]=\"option.value === value()\"\n        >\n            <input\n                type=\"radio\"\n                class=\"sr-only\"\n                [name]=\"name\"\n                [checked]=\"option.value === value()\"\n                [attr.aria-label]=\"option.ariaLabel || null\"\n                (change)=\"value.set(option.value)\"\n            />\n            {{ option.label }}\n        </label>\n    }\n</div>\n",
+			styles: ["@layer properties;.ui-segmented{display:inline-flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--card-line);background-color:var(--card);padding:calc(var(--spacing, .25rem) * .5);--tw-shadow: 0 1px var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui-segmented-option{min-height:calc(1lh + calc(var(--spacing, .25rem) * 3));cursor:pointer;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 1.5);white-space:nowrap;color:var(--muted-foreground-1);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;-webkit-user-select:none;user-select:none}.ui-segmented-option:hover{color:var(--foreground)}.ui-segmented--fill{display:flex;width:100%}.ui-segmented--fill .ui-segmented-option{flex:1;text-align:center}.ui-segmented-option:has(:focus-visible){--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color: var(--color-primary-200, var(--color-blue-200))}.ui-segmented-option--selected{background-color:var(--surface);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:var(--foreground)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-duration: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: true
+			}]
+		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiSegmentedComponent };
+
+//# sourceMappingURL=area8975-ui-segmented.mjs.map

package/fesm2022/area8975-ui-segmented.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-segmented.mjs","names":[],"sources":["../../../projects/ui/segmented/segmented.component.ts","../../../projects/ui/segmented/segmented.component.html"],"sourcesContent":["import { booleanAttribute, Component, input, model } from '@angular/core';\n\nimport type { SegmentedOption } from './segmented.types';\n\n\nlet nextId = 0;\n\n@Component({\n    selector: 'ui-segmented',\n    templateUrl: './segmented.component.html',\n    styleUrl: './segmented.component.css',\n    host: { '[class.block]': 'fill()' }\n})\nexport class UiSegmentedComponent<T> {\n    readonly options = input.required<SegmentedOption<T>[]>();\n    readonly value = model.required<T>();\n\n    /** What the options choose between, e.g. \"How far back the charts go\". */\n    readonly ariaLabel = input.required<string>();\n\n    /** Stretches to the container's width with the options sharing it evenly. */\n    readonly fill = input(false, { transform: booleanAttribute });\n\n    protected readonly name = `ui-segmented-${nextId++}`;\n}\n","<div class=\"ui-segmented\" [class.ui-segmented--fill]=\"fill()\" role=\"radiogroup\" [attr.aria-label]=\"ariaLabel()\">\n    @for (option of options(); track option.value) {\n        <label\n            class=\"ui-segmented-option ui-text-body-alt\"\n            [class.ui-segmented-option--selected]=\"option.value === value()\"\n        >\n            <input\n                type=\"radio\"\n                class=\"sr-only\"\n                [name]=\"name\"\n                [checked]=\"option.value === value()\"\n                [attr.aria-label]=\"option.ariaLabel || null\"\n                (change)=\"value.set(option.value)\"\n            />\n            {{ option.label }}\n        </label>\n    }\n</div>\n"],"mappings":";;AAKA,IAAI,SAAS;AAQb,IAAa,uBAAb,MAAa,qBAAoB;CACpB,UAAU,MAAM,SAAgC,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAChD,QAAQ,MAAM,SAAa,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,YAAY,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGpC,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAEvC,OAAO,gBAAgB;CAVjC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,OAAA,cAAA;EAAA,MAAA,EAAA,YAAA,EAAA,eAAA,SAAA,EAAA;EAAA,UAAA;EAAA,UCbjC;EAkBA,QAAA,CAAA,g1HAAA;CAAA,CAAA;;ADLa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EANhC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAc,MAGlB,EAAE,iBAAiB,SAAQ;GAAE,UAAA;GAAA,QAAA,CAAA,g1HAAA;EAAA,CAAA"}