@soxa-ui/webc 0.0.0-stage → 0.3.0-beta.1

package/dist/components/progress-linear/progress-linear.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Шаблон ProgressLinear: корень — дорожка, внутри только заливка; бег тема
+ * рисует псевдоэлементом корня. Текста нет: содержимое `progressbar` скринридер
+ * не читает.
+ */
+import type { IProgressLinear } from '@soxa-ui/core';
+import type { ITemplate } from '../../adapter';
+export declare const progressLinearTemplate: ITemplate<IProgressLinear>;

package/dist/components/progress-linear/progress-linear.template.js

@@ -0,0 +1,12 @@
+//#region src/components/progress-linear/progress-linear.template.ts
+var progressLinearTemplate = {
+	create: (root) => {
+		const range = root.ownerDocument.createElement("span");
+		range.className = "so-progress-linear__range";
+		root.appendChild(range);
+		return { slots: {} };
+	},
+	bindings: []
+};
+//#endregion
+export { progressLinearTemplate };

package/dist/components/progress-linear/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IProgressLinear } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+export declare function setupProgressLinear(host: HTMLElement, ctrl: IProgressLinear | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IProgressLinear>;

package/dist/components/progress-linear/setup.component.js

@@ -0,0 +1,14 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import "../../adapter/index.js";
+import { ProgressLinearDescriptor } from "@soxa-ui/setup";
+//#region src/components/progress-linear/setup.component.ts
+function setupProgressLinear(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, ProgressLinearDescriptor(), {
+		ctrl,
+		props
+	});
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupProgressLinear };

package/dist/components/progress-spinner/ProgressSpinner.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<span is="so-progress-spinner">` — индикатор кольцом. `span`: кольцо кладут
+ * в Button и Label, а там HTML разрешает только строчное. Долю готового
+ * (`fractionStyle`) база кладёт на корень стиль-выходом.
+ */
+import { ProgressSpinnerDescriptor } from '@soxa-ui/setup';
+import type { IProgressSpinner } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TProgressSpinnerElement: TElementClassOf<typeof HTMLSpanElement, typeof ProgressSpinnerDescriptor, IProgressSpinner>;
+export type TProgressSpinnerElementProps = TElementType<typeof TProgressSpinnerElement>;

package/dist/components/progress-spinner/ProgressSpinner.element.js

@@ -0,0 +1,24 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { progressSpinnerTemplate } from "./progress-spinner.template.js";
+import { setupProgressSpinner } from "./setup.component.js";
+import { ProgressSpinnerDescriptor } from "@soxa-ui/setup";
+//#region src/components/progress-spinner/ProgressSpinner.element.ts
+/**
+* `<span is="so-progress-spinner">` — индикатор кольцом. `span`: кольцо кладут
+* в Button и Label, а там HTML разрешает только строчное. Долю готового
+* (`fractionStyle`) база кладёт на корень стиль-выходом.
+*/
+var TProgressSpinnerElement = ElementBase(HTMLSpanElement, {
+	descriptor: ProgressSpinnerDescriptor,
+	template: progressSpinnerTemplate,
+	root: {
+		strategy: "host",
+		style: "fractionStyle"
+	},
+	setup: setupProgressSpinner
+});
+defineElement("so-progress-spinner", TProgressSpinnerElement, "span");
+//#endregion
+export { TProgressSpinnerElement };

package/dist/components/progress-spinner/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TProgressSpinnerElement } from './ProgressSpinner.element';
+export type { TProgressSpinnerElementProps } from './ProgressSpinner.element';

package/dist/components/progress-spinner/index.js

@@ -0,0 +1 @@
+export { TProgressSpinnerElement } from "./ProgressSpinner.element.js";

package/dist/components/progress-spinner/progress-spinner.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Шаблон ProgressSpinner: только рисунок под `aria-hidden`, о ходе говорит роль
+ * корня. Поле 16 × 16, радиус 7: при толщине темы 2 кольцо касается краёв;
+ * `pathLength="1"` — доля из переменной корня ложится в штрих как есть.
+ */
+import type { IProgressSpinner } from '@soxa-ui/core';
+import type { ITemplate } from '../../adapter';
+export declare const progressSpinnerTemplate: ITemplate<IProgressSpinner>;

package/dist/components/progress-spinner/progress-spinner.template.js

@@ -0,0 +1,41 @@
+//#region src/components/progress-spinner/progress-spinner.template.ts
+/** Рисунок — элементы SVG: в пространстве имён HTML `<svg>` не нарисуется. */
+var SVG = "http://www.w3.org/2000/svg";
+/** Снизу вверх: дорожка, дуга доли, бегущая дуга; бег — поворот всего рисунка темой. */
+var CIRCLES = [
+	{
+		part: "track",
+		fraction: false
+	},
+	{
+		part: "range",
+		fraction: true
+	},
+	{
+		part: "runner",
+		fraction: true
+	}
+];
+var progressSpinnerTemplate = {
+	create: (root) => {
+		const { ownerDocument } = root;
+		const ring = ownerDocument.createElementNS(SVG, "svg");
+		ring.setAttribute("class", "so-progress-spinner__ring");
+		ring.setAttribute("viewBox", "0 0 16 16");
+		ring.setAttribute("aria-hidden", "true");
+		for (const { part, fraction } of CIRCLES) {
+			const circle = ownerDocument.createElementNS(SVG, "circle");
+			circle.setAttribute("class", `so-progress-spinner__${part}`);
+			circle.setAttribute("cx", "8");
+			circle.setAttribute("cy", "8");
+			circle.setAttribute("r", "7");
+			if (fraction) circle.setAttribute("pathLength", "1");
+			ring.appendChild(circle);
+		}
+		root.appendChild(ring);
+		return { slots: {} };
+	},
+	bindings: []
+};
+//#endregion
+export { progressSpinnerTemplate };

package/dist/components/progress-spinner/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IProgressSpinner } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+export declare function setupProgressSpinner(host: HTMLElement, ctrl: IProgressSpinner | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IProgressSpinner>;

package/dist/components/progress-spinner/setup.component.js

@@ -0,0 +1,14 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import "../../adapter/index.js";
+import { ProgressSpinnerDescriptor } from "@soxa-ui/setup";
+//#region src/components/progress-spinner/setup.component.ts
+function setupProgressSpinner(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, ProgressSpinnerDescriptor(), {
+		ctrl,
+		props
+	});
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupProgressSpinner };

package/dist/components/radio-group/RadioGroup.element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `<div is="so-radio-group">` — группа радио; модуль регистрирует и радио.
+ * docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import { RadioGroupDescriptor } from '@soxa-ui/setup';
+import type { IRadioGroup, TRadioGroupCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TRadioGroupElement: TElementClassOf<typeof HTMLDivElement, typeof RadioGroupDescriptor, IRadioGroup, TRadioGroupCollectionFacade>;
+export type TRadioGroupElementProps = TElementType<typeof TRadioGroupElement>;

package/dist/components/radio-group/RadioGroup.element.js

@@ -0,0 +1,23 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { TRadioGroupItemElement } from "./item/RadioGroupItem.element.js";
+import "./item/index.js";
+import { radioGroupTemplate } from "./radio-group.template.js";
+import { setupRadioGroup } from "./setup.component.js";
+import { RadioGroupCollectionDescriptor, RadioGroupDescriptor } from "@soxa-ui/setup";
+//#region src/components/radio-group/RadioGroup.element.ts
+/**
+* `<div is="so-radio-group">` — группа радио; модуль регистрирует и радио.
+* docs/architecture.md, Layer 8d, «Коллекция».
+*/
+var TRadioGroupElement = ElementBase(HTMLDivElement, {
+	descriptor: RadioGroupDescriptor,
+	facade: RadioGroupCollectionDescriptor,
+	template: radioGroupTemplate,
+	setup: setupRadioGroup
+});
+defineElement("so-radio-group", TRadioGroupElement, "div");
+defineElement("so-radio-group-item", TRadioGroupItemElement, "label");
+//#endregion
+export { TRadioGroupElement };

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,5 @@
+/** Application API for this element entry. */
+export { TRadioGroupElement } from './RadioGroup.element';
+export type { TRadioGroupElementProps } from './RadioGroup.element';
+export { TRadioGroupItemElement } from './item/RadioGroupItem.element';
+export type { TRadioGroupItemElementProps } from './item/RadioGroupItem.element';

package/dist/components/radio-group/index.js

@@ -0,0 +1,3 @@
+import { TRadioGroupItemElement } from "./item/RadioGroupItem.element.js";
+import { TRadioGroupElement } from "./RadioGroup.element.js";
+export { TRadioGroupElement, TRadioGroupItemElement };

package/dist/components/radio-group/item/RadioGroupItem.element.d.ts

@@ -0,0 +1,11 @@
+/**
+ * `<label is="so-radio-group-item">` — радио: корень — подпись, поле внутри.
+ * Только на `label`, поэтому радио в подписи `Label` нет: `label` в `label`
+ * HTML запрещает. Номера места на корне нет: радио стоят где угодно, и он увёл
+ * бы радио по чужому флекс-ряду. docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import { RadioGroupItemDescriptor } from '@soxa-ui/setup';
+import type { IRadioGroupItem, TRadioGroupItemCollectionFacade } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../../adapter';
+export declare const TRadioGroupItemElement: TElementClassOf<typeof HTMLLabelElement, typeof RadioGroupItemDescriptor, IRadioGroupItem, TRadioGroupItemCollectionFacade>;
+export type TRadioGroupItemElementProps = TElementType<typeof TRadioGroupItemElement>;

package/dist/components/radio-group/item/RadioGroupItem.element.js

@@ -0,0 +1,25 @@
+import { ElementBase } from "../../../adapter/runtime/element.base.js";
+import "../../../adapter/index.js";
+import { setupRadioGroupItem } from "./setup.component.js";
+import { radioGroupItemTemplate } from "./radio-group-item.template.js";
+import { RadioGroupCollectionItemDescriptor, RadioGroupItemDescriptor } from "@soxa-ui/setup";
+//#region src/components/radio-group/item/RadioGroupItem.element.ts
+/**
+* `<label is="so-radio-group-item">` — радио: корень — подпись, поле внутри.
+* Только на `label`, поэтому радио в подписи `Label` нет: `label` в `label`
+* HTML запрещает. Номера места на корне нет: радио стоят где угодно, и он увёл
+* бы радио по чужому флекс-ряду. docs/architecture.md, Layer 8d, «Коллекция».
+*/
+var TRadioGroupItemElement = ElementBase(HTMLLabelElement, {
+	descriptor: RadioGroupItemDescriptor,
+	facade: RadioGroupCollectionItemDescriptor,
+	template: radioGroupItemTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		control: true
+	},
+	setup: setupRadioGroupItem
+});
+//#endregion
+export { TRadioGroupItemElement };

package/dist/components/radio-group/item/index.d.ts

@@ -0,0 +1,3 @@
+export { setupRadioGroupItem } from './setup.component';
+export { TRadioGroupItemElement, type TRadioGroupItemElementProps } from './RadioGroupItem.element';
+export { radioGroupItemTemplate } from './radio-group-item.template';

package/dist/components/radio-group/item/index.js

@@ -0,0 +1,3 @@
+import "./setup.component.js";
+import "./radio-group-item.template.js";
+export { TRadioGroupItemElement } from "./RadioGroupItem.element.js";

package/dist/components/radio-group/item/radio-group-item.template.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Шаблон радио: нативный `<input type="radio">` (поле корня), кольцо с точкой
+ * и текст подписи. Группировку по `name`, стрелки, Tab и форму даёт браузер.
+ * docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import type { IRadioGroupItem, TRadioGroupItemCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate } from '../../../adapter';
+export declare const radioGroupItemTemplate: ITemplate<IRadioGroupItem, TRadioGroupItemCollectionFacade>;

package/dist/components/radio-group/item/radio-group-item.template.js

@@ -0,0 +1,61 @@
+import { bind } from "../../../adapter/template/types.js";
+import { ownerAttributes } from "../../../adapter/template/owner.js";
+import "../../../adapter/index.js";
+//#region src/components/radio-group/item/radio-group-item.template.ts
+var fields = /* @__PURE__ */ new WeakMap();
+function attribute(field, name, value) {
+	if (value === void 0 || value === null) field.removeAttribute(name);
+	else field.setAttribute(name, String(value));
+}
+var radioGroupItemTemplate = {
+	create: (root, ctx) => {
+		const { ownerDocument } = root;
+		const field = ownerDocument.createElement("input");
+		const control = ownerDocument.createElement("span");
+		const indicator = ownerDocument.createElement("span");
+		const text = ownerDocument.createElement("span");
+		field.className = "so-radio-group-item__input";
+		field.type = "radio";
+		control.className = "so-radio-group-item__control";
+		indicator.className = "so-radio-group-item__indicator";
+		text.className = "so-radio-group-item__text";
+		control.appendChild(indicator);
+		root.append(field, control, text);
+		fields.set(root, field);
+		field.addEventListener("change", () => {
+			const context = ctx.facade?.context;
+			if (context) context.adapters.activation.active = true;
+		});
+		return {
+			slots: { default: {
+				mode: "append",
+				node: text
+			} },
+			control: field
+		};
+	},
+	bindings: [
+		bind([
+			"name",
+			"value",
+			"disabled"
+		], ({ root, state }) => {
+			const field = fields.get(root);
+			if (!field) return;
+			attribute(field, "name", state.name);
+			attribute(field, "value", state.value);
+			field.disabled = state.disabled === true;
+		}),
+		bind("aria", ({ root, state }) => {
+			const field = fields.get(root);
+			if (field) ownerAttributes(field, state.aria);
+		}),
+		bind("active", ({ root, state }) => {
+			const field = fields.get(root);
+			const checked = state.active === true;
+			if (field && field.checked !== checked) field.checked = checked;
+		})
+	]
+};
+//#endregion
+export { radioGroupItemTemplate };

package/dist/components/radio-group/item/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IRadioGroupItem, TRadioGroupItemCollectionFacade } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../../adapter';
+export declare function setupRadioGroupItem(host: HTMLElement, ctrl: IRadioGroupItem | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IRadioGroupItem, TRadioGroupItemCollectionFacade>;

package/dist/components/radio-group/item/setup.component.js

@@ -0,0 +1,22 @@
+import { createWebcAdapterContext } from "../../../adapter/common/createWebcAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../../adapter/elevator/factory.js";
+import "../../../adapter/elevator/index.js";
+import "../../../adapter/index.js";
+import { RadioGroupCollectionItemDescriptor, RadioGroupItemDescriptor, TCollectionItemExtension } from "@soxa-ui/setup";
+//#region src/components/radio-group/item/setup.component.ts
+function setupRadioGroupItem(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, RadioGroupItemDescriptor(), {
+		ctrl,
+		props
+	});
+	const itemAdapter = createWebcAdapterContext(host, RadioGroupCollectionItemDescriptor(), { props }, { bundle: adapter.bundle }).use(TCollectionItemExtension, {
+		adapter,
+		elevator: createWebcElevator(host)
+	});
+	const item = useCollectionAdapter(itemAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, item);
+}
+//#endregion
+export { setupRadioGroupItem };

package/dist/components/radio-group/radio-group.template.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Шаблон RadioGroup: своей разметки нет, радио разметки стоят где угодно в
+ * корне; без них — радио из данных петлёй по `shown` с копией образца `item`.
+ * docs/architecture.md, Layer 8d, «Коллекция».
+ */
+import type { IRadioGroup, TRadioGroupCollectionFacade } from '@soxa-ui/core';
+import { type ITemplate, type TItemSlots } from '../../adapter';
+/** Слот группы → слот радио; сверяет `setup/__tests__/item-slots.spec.ts`. */
+export declare const RADIO_GROUP_ITEM_SLOTS: TItemSlots;
+export declare const radioGroupTemplate: ITemplate<IRadioGroup, TRadioGroupCollectionFacade>;

package/dist/components/radio-group/radio-group.template.js

@@ -0,0 +1,34 @@
+import { bind } from "../../adapter/template/types.js";
+import { createItem, lendSamples } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+import { TRadioGroupItemElement } from "./item/RadioGroupItem.element.js";
+import "./item/index.js";
+//#region src/components/radio-group/radio-group.template.ts
+/** Слот группы → слот радио; сверяет `setup/__tests__/item-slots.spec.ts`. */
+var RADIO_GROUP_ITEM_SLOTS = { item: "default" };
+var loops = /* @__PURE__ */ new WeakMap();
+/** Инстанс данных и копия подписи — до вставки. */
+function radioOf(ctx, item) {
+	const radio = createItem(ctx.root.ownerDocument, TRadioGroupItemElement);
+	radio.ctrl = item;
+	lendSamples(ctx, radio, RADIO_GROUP_ITEM_SLOTS);
+	return radio;
+}
+var radioGroupTemplate = {
+	create: (root, { hasSlot }) => {
+		if (!hasSlot("default")) loops.set(root, new TKeyedLoop(root, null, (item) => item.uid));
+		return { slots: {
+			default: {
+				mode: "append",
+				node: root
+			},
+			item: { mode: "sample" }
+		} };
+	},
+	bindings: [bind("shown", (ctx) => {
+		loops.get(ctx.root)?.draw(ctx.state.shown ?? [], (item) => radioOf(ctx, item));
+	})]
+};
+//#endregion
+export { RADIO_GROUP_ITEM_SLOTS, radioGroupTemplate };

package/dist/components/radio-group/setup.component.d.ts

@@ -0,0 +1,3 @@
+import type { IRadioGroup, TRadioGroupCollectionFacade } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+export declare function setupRadioGroup(host: HTMLElement, ctrl: IRadioGroup | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IRadioGroup, TRadioGroupCollectionFacade>;

package/dist/components/radio-group/setup.component.js

@@ -0,0 +1,25 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { joinBindings, useAdapter, useCollectionAdapter } from "../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../adapter/elevator/factory.js";
+import "../../adapter/elevator/index.js";
+import "../../adapter/index.js";
+import { RadioGroupCollectionDescriptor, RadioGroupDescriptor, TCollectionExtension, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/radio-group/setup.component.ts
+function setupRadioGroup(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, RadioGroupDescriptor(), {
+		ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator: createWebcElevator(host) });
+	const collectionAdapter = createWebcAdapterContext(host, RadioGroupCollectionDescriptor(), {
+		props,
+		options: {
+			owner: adapter.instance,
+			engine: props["engine"]
+		}
+	}, { bundle: adapter.bundle }).use(TCollectionExtension, { elevator: createWebcElevator(host) });
+	const facade = useCollectionAdapter(collectionAdapter, host, onUpdate);
+	const owner = useAdapter(adapter, host, onUpdate);
+	return joinBindings(owner, facade);
+}
+//#endregion
+export { setupRadioGroup };

package/dist/components/rating/Rating.element.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `<span is="so-rating">` — оценка звёздами на нативном `input[type="range"]`.
+ * Атрибуты потребителя — на корне: указатель поле не ловит. `fieldId`: без него
+ * `id` встал бы и на корень, и `<label for>` нашёл бы корень.
+ */
+import { RatingDescriptor } from '@soxa-ui/setup';
+import type { IRating } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TRatingElement: TElementClassOf<typeof HTMLSpanElement, typeof RatingDescriptor, IRating>;
+export type TRatingElementProps = TElementType<typeof TRatingElement>;

package/dist/components/rating/Rating.element.js

@@ -0,0 +1,25 @@
+import { defineElement } from "../../adapter/runtime/defineElement.js";
+import { ElementBase } from "../../adapter/runtime/element.base.js";
+import "../../adapter/index.js";
+import { ratingTemplate } from "./rating.template.js";
+import { setupRating } from "./setup.component.js";
+import { RatingDescriptor } from "@soxa-ui/setup";
+//#region src/components/rating/Rating.element.ts
+/**
+* `<span is="so-rating">` — оценка звёздами на нативном `input[type="range"]`.
+* Атрибуты потребителя — на корне: указатель поле не ловит. `fieldId`: без него
+* `id` встал бы и на корень, и `<label for>` нашёл бы корень.
+*/
+var TRatingElement = ElementBase(HTMLSpanElement, {
+	descriptor: RatingDescriptor,
+	template: ratingTemplate,
+	root: {
+		strategy: "host",
+		sets: ["attrs", "dataset"],
+		fieldId: true
+	},
+	setup: setupRating
+});
+defineElement("so-rating", TRatingElement, "span");
+//#endregion
+export { TRatingElement };

package/dist/components/rating/index.d.ts

@@ -0,0 +1,3 @@
+/** Application API for this element entry. */
+export { TRatingElement } from './Rating.element';
+export type { TRatingElementProps } from './Rating.element';

package/dist/components/rating/index.js

@@ -0,0 +1 @@
+export { TRatingElement } from "./Rating.element.js";

package/dist/components/rating/rating.template.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Шаблон Rating: вложенность как у Vue — ручку и поле плагины находят только
+ * прямыми детьми (`__thumb` в дорожке, `input` в ручке). Ячейки звёзд равные и
+ * встык: доля дорожки по оси — доля шкалы. Значок слоя — копия образца `icon`
+ * или голый `<svg>`, а не Icon: по две на звезду, оценок в списке — десятки.
+ * Копия образца берёт номер звезды по её месту в дорожке, слой — по
+ * `.so-rating__star-fill`.
+ */
+import type { IRating } from '@soxa-ui/core';
+import type { TRatingOutputs } from './setup.component';
+import { type ITemplate } from '../../adapter';
+export declare const ratingTemplate: ITemplate<IRating, unknown, TRatingOutputs>;

package/dist/components/rating/rating.template.js

@@ -0,0 +1,89 @@
+import { roleIcon } from "../../adapter/common/icon.js";
+import { bind } from "../../adapter/template/types.js";
+import { ownerAttributes, ownerStyles } from "../../adapter/template/owner.js";
+import { sampleOf } from "../../adapter/template/parts.js";
+import { TKeyedLoop } from "../../adapter/template/loop.js";
+import "../../adapter/index.js";
+//#region src/components/rating/rating.template.ts
+var parts = /* @__PURE__ */ new WeakMap();
+/** Значок слоя: копия образца `icon` или `<svg>` роли `star`. */
+function iconOf(ctx) {
+	const copy = sampleOf(ctx, "icon");
+	if (copy) return copy;
+	const svg = roleIcon("star");
+	svg.setAttribute("class", "so-rating__icon");
+	return svg;
+}
+/** Звезда: пустой слой снизу, залитый — сверху, в обёртке, обрезанной по доле. */
+function starOf(ctx) {
+	const { ownerDocument } = ctx.root;
+	const star = ownerDocument.createElement("span");
+	const fill = ownerDocument.createElement("span");
+	star.className = "so-rating__star";
+	star.setAttribute("aria-hidden", "true");
+	fill.className = "so-rating__star-fill";
+	fill.appendChild(iconOf(ctx));
+	star.append(iconOf(ctx), fill);
+	return star;
+}
+var ratingTemplate = {
+	create: (root) => {
+		const { ownerDocument } = root;
+		const track = ownerDocument.createElement("span");
+		const thumb = ownerDocument.createElement("span");
+		const field = ownerDocument.createElement("input");
+		track.className = "so-rating__track";
+		thumb.className = "so-rating__thumb";
+		field.className = "so-rating__input";
+		field.type = "range";
+		field.setAttribute("min", "0");
+		thumb.appendChild(field);
+		track.appendChild(thumb);
+		root.appendChild(track);
+		parts.set(root, {
+			field,
+			loop: new TKeyedLoop(track, thumb, (star) => star.value)
+		});
+		return { slots: { icon: { mode: "sample" } } };
+	},
+	bindings: [
+		bind("stars", (ctx) => {
+			parts.get(ctx.root)?.loop.draw(ctx.state.stars ?? [], (entry) => {
+				const star = starOf(ctx);
+				ownerStyles(star, entry.style);
+				return star;
+			}, (star, entry) => ownerStyles(star, entry.style));
+		}),
+		bind([
+			"max",
+			"step",
+			"value"
+		], ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (!field) return;
+			if (state.max !== void 0) field.max = String(state.max);
+			if (state.step !== void 0) field.step = String(state.step);
+			const value = state.value === void 0 ? void 0 : String(state.value);
+			if (value !== void 0 && field.value !== value) field.value = value;
+		}),
+		bind([
+			"id",
+			"name",
+			"disabled"
+		], ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (!field) return;
+			if (state.id === void 0) field.removeAttribute("id");
+			else field.id = state.id;
+			if (state.name === void 0) field.removeAttribute("name");
+			else field.name = state.name;
+			field.disabled = state.disabled === true;
+		}),
+		bind("aria", ({ root, state }) => {
+			const field = parts.get(root)?.field;
+			if (field) ownerAttributes(field, state.aria);
+		})
+	]
+};
+//#endregion
+export { ratingTemplate };

package/dist/components/rating/setup.component.d.ts

@@ -0,0 +1,7 @@
+import { RatingDescriptor } from '@soxa-ui/setup';
+import type { DescriptorPluginProps } from '@soxa-ui/setup';
+import type { IRating } from '@soxa-ui/core';
+import type { TBinding, TUpdateListener } from '../../adapter';
+/** Сверх инстанса шаблон читает входы плагинов: `id` поля — проп `TIdPlugin`. */
+export type TRatingOutputs = DescriptorPluginProps<typeof RatingDescriptor>;
+export declare function setupRating(host: HTMLElement, ctrl: IRating | undefined, props: Record<string, unknown>, onUpdate: TUpdateListener): TBinding<IRating, unknown, TRatingOutputs>;

package/dist/components/rating/setup.component.js

@@ -0,0 +1,16 @@
+import { createWebcAdapterContext } from "../../adapter/common/createWebcAdapterContext.js";
+import { useAdapter } from "../../adapter/runtime/useAdapter.js";
+import { createWebcElevator } from "../../adapter/elevator/factory.js";
+import "../../adapter/elevator/index.js";
+import "../../adapter/index.js";
+import { RatingDescriptor, TFieldControlExtension } from "@soxa-ui/setup";
+//#region src/components/rating/setup.component.ts
+function setupRating(host, ctrl, props, onUpdate) {
+	const adapter = createWebcAdapterContext(host, RatingDescriptor(), {
+		ctrl,
+		props
+	}).use(TFieldControlExtension, { elevator: createWebcElevator(host) });
+	return useAdapter(adapter, host, onUpdate);
+}
+//#endregion
+export { setupRating };

package/dist/components/scroller/Scroller.element.d.ts

@@ -0,0 +1,9 @@
+/**
+ * `<div is="so-scroller">` — лента в одну строку с двумя кнопками. Своего
+ * экземпляра у вьюпорта нет: роль ряда он получает набором `viewportAria`.
+ */
+import { ScrollerDescriptor } from '@soxa-ui/setup';
+import type { IScroller } from '@soxa-ui/core';
+import type { TElementClassOf, TElementType } from '../../adapter';
+export declare const TScrollerElement: TElementClassOf<typeof HTMLDivElement, typeof ScrollerDescriptor, IScroller>;
+export type TScrollerElementProps = TElementType<typeof TScrollerElement>;