@symbiote-native/slider 5.1.0 → 6.0.0

package/build/solid/slider/shared.js

@@ -0,0 +1,296 @@
+// Slider, the Solid lifecycle half. The logic (value/limit/disabled folds, the step-option layout)
+// and the native render live in @symbiote-native/slider core, shared verbatim with React, Vue,
+// Svelte and Angular; Solid supplies only the reactivity — a signal for the value native last
+// reported (to mark the active step), a signal for the measured width — plus the descriptor bridge.
+// The native RNCSlider carries no symbiote metadata: the engine derives its events and color/image
+// processors from the library's ViewConfig, registered by ../register (the package barrel pulls it,
+// NOT this module, so the tests stay free of the third-party spec). Like every other adapter here,
+// this NEVER imports the library's React Slider component — it calls hooks off the React dispatcher
+// and would crash under a non-React adapter.
+//
+// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE, so a
+// destructure would freeze the slider at its mount-time values; every read sits inside an accessor.
+//
+// WHY THE TREE IS ASSEMBLED BY HAND INSTEAD OF THROUGH renderSlider(). Solid has no reconciler
+// between what this file returns and the host nodes, so a tree whose SHAPE changes has to be
+// rebuilt, and rebuilding the native slider would throw away the node identity its own thumb grip
+// and every imperative command key on. renderSlider's Descriptor carries the step overlay as a
+// child, i.e. its child count flips with `renderStepNumber` — which descriptorToSolid refuses
+// (.claude/rules/solid-descriptor-bridge.md §2). So the wrapper is built once here, the native leaf
+// is bridged once via renderSliderNative (the split core exposes for exactly this: React takes it
+// too on its custom-marker path), and only the OVERLAY sits behind a rebuild boundary. The result
+// is a stable native node across every overlay change — where React remounts it, since the wrapper's
+// unkeyed children shift by one.
+//
+// The hand-written createElement / spread / insert calls below are what compiled JSX emits; this
+// package cannot use JSX at all, because its tsconfig is shared with the React/Vue/Angular entries
+// and TypeScript has one `jsx` setting per program. descriptor-to-solid.ts drives the renderer the
+// same way for the same reason.
+// createComponent comes from solid-js, not the renderer's re-export: the renderer's is typed to
+// return its own host-node union, which cannot hold what a component returns (an Image is
+// JSX.Element). Same function either way.
+import { createComponent, createEffect, createMemo, createSignal, untrack, } from 'solid-js';
+import { descriptorToSolid, Image, } from '@symbiote-native/solid';
+import { createElement, createTextNode, insert, insertNode, setProp, spread, } from '@symbiote-native/solid/renderer';
+import { resolveAccessibilityProps } from '@symbiote-native/components';
+import { dlog, isSymbioteNode, } from '@symbiote-native/engine';
+import { sanitizeSliderValue, resolveSliderDisabled, resolveSliderAccessibilityState, resolveSliderLowerLimit, resolveSliderUpperLimit, valueFromSliderEvent, shouldRenderStepsIndicator, resolveThumbTintColor, shouldPassNativeThumbImage, isInvalidLimitConfig, computeStepOptions, orderStepOptions, stepNumberFontSize, renderSliderNative, resolveSliderWrapperStyle, resolveStepsContainerStyle, renderStepsIndicator, STEP_INDICATOR_ELEMENT_STYLE, TRACK_MARK_CONTAINER_STYLE, THUMB_IMAGE_CONTAINER_STYLE, THUMB_IMAGE_STYLE, STEP_NUMBER_CONTAINER_STYLE, SLIDER_DEFAULT_MINIMUM_VALUE, SLIDER_DEFAULT_MAXIMUM_VALUE, SLIDER_DEFAULT_STEP, SLIDER_ON_CHANGE, SLIDER_ON_VALUE_CHANGE, SLIDER_ON_SLIDING_START, SLIDER_ON_SLIDING_COMPLETE, SLIDER_ON_ACCESSIBILITY_ACTION, } from '../../core/index.js';
+// Read by the component itself; everything else (the track tints and images, thumbSize, tapToSeek,
+// vertical, testID, the accessibility surface, a caller's `ref`) forwards onto the native leaf. The
+// four JS callbacks MUST be stripped — a function prop reaching Fabric crashes Android's
+// folly::dynamic serializer — and are re-supplied as the native event handlers in `passthrough`.
+const HANDLED_PROPS = [
+    'value',
+    'minimumValue',
+    'maximumValue',
+    'step',
+    'lowerLimit',
+    'upperLimit',
+    'disabled',
+    'inverted',
+    'thumbTintColor',
+    'thumbImage',
+    'accessibilityState',
+    'renderStepNumber',
+    'style',
+    'class',
+    'StepMarker',
+    'onValueChange',
+    'onSlidingStart',
+    'onSlidingComplete',
+    'onAccessibilityAction',
+];
+function forwardProps(resolved) {
+    const forwarded = { ...resolved };
+    for (const key of HANDLED_PROPS)
+        delete forwarded[key];
+    return forwarded;
+}
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+// Narrowing, not defensive: the renderer's createElement is typed over its IHostNode union (which
+// includes the surface), while everything below needs a real host node. Same guard descriptorToSolid
+// opens with.
+function hostElement(tag) {
+    const node = createElement(tag);
+    if (!isSymbioteNode(node)) {
+        throw new Error(`Slider: ${tag} did not create a host node`);
+    }
+    return node;
+}
+// Solid core's own render-prop shape, line for line with `<Show>`: untrack + accessor, with an arity
+// guard because `typeof fn === 'function'` cannot separate a render prop from the bare zero-argument
+// accessor JSX.Element also permits. A 0-arity marker is handed back unread so `insert` wraps it in
+// its own render effect; calling it here would freeze it at its first value.
+function callStepMarker(marker, props) {
+    if (marker.length === 0)
+        return () => marker(props);
+    return untrack(() => marker(props));
+}
+export function createSlider(platform) {
+    return function Slider(props) {
+        // What native last reported, kept only to mark the active step. NOT the controlled value — the
+        // slider is uncontrolled during a drag, native owns the thumb and reports up.
+        const [reportedValue, setReportedValue] = createSignal(undefined);
+        // The measured wrapper width the step indicator lays out against; 0 until the first layout.
+        const [width, setWidth] = createSignal(0);
+        const handleValueChange = (event) => {
+            const next = valueFromSliderEvent(event);
+            if (next === undefined)
+                return;
+            setReportedValue(next);
+            props.onValueChange?.(next);
+        };
+        const handleSlidingStart = (event) => {
+            const next = valueFromSliderEvent(event);
+            if (next !== undefined)
+                props.onSlidingStart?.(next);
+        };
+        const handleSlidingComplete = (event) => {
+            const next = valueFromSliderEvent(event);
+            if (next !== undefined)
+                props.onSlidingComplete?.(next);
+        };
+        const handleAccessibilityAction = (event) => {
+            props.onAccessibilityAction?.(event);
+        };
+        const handleLayout = (event) => {
+            const layout = event.nativeEvent.layout;
+            if (isRecord(layout) && typeof layout.width === 'number') {
+                setWidth(layout.width);
+            }
+        };
+        const minimumValue = () => props.minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE;
+        const maximumValue = () => props.maximumValue ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
+        const step = () => props.step ?? SLIDER_DEFAULT_STEP;
+        const lowerLimit = () => resolveSliderLowerLimit(props.lowerLimit);
+        const upperLimit = () => resolveSliderUpperLimit(props.upperLimit);
+        createEffect(() => {
+            if (isInvalidLimitConfig(lowerLimit(), upperLimit())) {
+                dlog('Slider: lowerLimit must be smaller than upperLimit');
+            }
+        });
+        const hasStepMarker = () => props.StepMarker !== undefined;
+        const hasThumbImage = () => props.thumbImage !== undefined;
+        const showSteps = () => shouldRenderStepsIndicator(hasStepMarker(), props.renderStepNumber);
+        const view = () => {
+            // Folded BEFORE the handled props are read, exactly as React folds rawProps before it
+            // destructures: `aria-disabled` lands in accessibilityState, and reading the raw prop instead
+            // would hand the fold below an undefined and blank the a11y state the alias just set.
+            const resolved = resolveAccessibilityProps(props);
+            return {
+                value: sanitizeSliderValue(props.value),
+                minimumValue: minimumValue(),
+                maximumValue: maximumValue(),
+                step: step(),
+                lowerLimit: lowerLimit(),
+                upperLimit: upperLimit(),
+                disabled: resolveSliderDisabled(props.disabled, resolved.accessibilityState),
+                inverted: props.inverted ?? false,
+                thumbTintColor: resolveThumbTintColor(props.thumbTintColor, hasStepMarker(), hasThumbImage()),
+                // Passed to native raw — the engine runs the image processor derived from RNCSlider's
+                // ViewConfig — and only when no custom marker draws its own thumb (matches the library).
+                thumbImage: shouldPassNativeThumbImage(hasStepMarker(), hasThumbImage())
+                    ? props.thumbImage
+                    : undefined,
+                accessibilityState: resolveSliderAccessibilityState(props.disabled, resolved.accessibilityState),
+                width: width(),
+                style: props.style,
+                passthrough: {
+                    ...forwardProps(resolved),
+                    [SLIDER_ON_CHANGE]: handleValueChange,
+                    [SLIDER_ON_VALUE_CHANGE]: handleValueChange,
+                    [SLIDER_ON_SLIDING_START]: handleSlidingStart,
+                    [SLIDER_ON_SLIDING_COMPLETE]: handleSlidingComplete,
+                    [SLIDER_ON_ACCESSIBILITY_ACTION]: handleAccessibilityAction,
+                },
+            };
+        };
+        const options = createMemo(() => computeStepOptions(minimumValue(), maximumValue(), step(), platform.stepResolution));
+        const currentValue = createMemo(() => reportedValue() ?? sanitizeSliderValue(props.value) ?? minimumValue());
+        // THE REBUILD BOUNDARY (.claude/rules/solid-descriptor-bridge.md §5). Everything read TRACKED
+        // here changes the overlay's SHAPE — which overlay kind, how many cells, whether each cell
+        // carries a number — and the build itself is untracked so it does not also subscribe to every
+        // value/width read inside it. Drop the untrack and one drag rebuilds the whole indicator.
+        const overlay = createMemo(() => {
+            if (!showSteps())
+                return null;
+            const marker = props.StepMarker;
+            const cells = options();
+            const withNumbers = props.renderStepNumber === true;
+            const inverted = props.inverted ?? false;
+            const thumbImage = props.thumbImage;
+            // Read for its dependency, not its value: the DEFAULT overlay hands the thumb image to
+            // whichever cell matches the current value, so the cell's child count moves with that value —
+            // a shape change descriptorToSolid refuses. With no thumb image the shape is fixed and the
+            // bridge just re-props the same nodes.
+            if (marker === undefined && thumbImage !== undefined)
+                currentValue();
+            return untrack(() => marker === undefined
+                ? descriptorToSolid(() => renderStepsIndicator({
+                    options: cells,
+                    currentValue: currentValue(),
+                    width: width(),
+                    renderStepNumber: withNumbers,
+                    thumbImage,
+                    inverted,
+                    platform,
+                }))
+                : buildCustomOverlay({
+                    cells,
+                    marker,
+                    withNumbers,
+                    inverted,
+                    currentValue,
+                    width,
+                    thumbImage: () => props.thumbImage,
+                    platform,
+                }));
+        });
+        // Built ONCE and kept by identity: descriptorToSolid wires every prop through a render effect on
+        // this same node, so a value/tint/limit change re-commits the existing native slider instead of
+        // replacing it — which would drop the thumb the user is dragging.
+        const leaf = descriptorToSolid(() => renderSliderNative(view(), platform));
+        const wrapper = hostElement('symbiote-view');
+        // A statically-present key set (all three are always emitted), so this needs no withStableKeys
+        // widening — `spread` alone has no removal pass for a key that vanishes.
+        spread(wrapper, () => ({
+            style: resolveSliderWrapperStyle(props.style, platform),
+            class: props.class,
+            onLayout: handleLayout,
+        }), true);
+        insertNode(wrapper, leaf);
+        // The overlay goes BEFORE the leaf, matching the z-order renderSlider composes; `leaf` is the
+        // marker `insert` positions against, which is also what keeps it from clearing the wrapper.
+        insert(wrapper, overlay, leaf);
+        return wrapper;
+    };
+}
+// The custom-marker overlay: the same flex row the agnostic default paints, but each mark hosts the
+// caller's own marker element, mirroring the library's SliderTrackMark composition. Built by hand
+// rather than as a Descriptor because a Descriptor holds only VALUES, and a marker is a live Solid
+// subtree — the same boundary View and Pressable sit on.
+function buildCustomOverlay(params) {
+    const fontSize = stepNumberFontSize(params.cells.length);
+    const ordered = orderStepOptions(params.cells, params.inverted);
+    const min = params.cells[0];
+    const max = params.cells[params.cells.length - 1];
+    const container = hostElement('symbiote-view');
+    // pointerEvents none so the overlay never eats the drag. `style` tracks the measured width, hence
+    // an accessor rather than a one-shot setProp.
+    spread(container, () => ({
+        pointerEvents: 'none',
+        testID: 'StepsIndicator-Container',
+        style: resolveStepsContainerStyle(params.width(), params.platform),
+    }), true);
+    ordered.forEach((value, index) => {
+        insertNode(container, buildStepCell({ value, index, min, max, fontSize, params }));
+    });
+    return container;
+}
+function buildStepCell(cell) {
+    const { params } = cell;
+    const element = hostElement('symbiote-view');
+    setProp(element, 'style', STEP_INDICATOR_ELEMENT_STYLE);
+    const track = hostElement('symbiote-view');
+    setProp(track, 'style', TRACK_MARK_CONTAINER_STYLE);
+    insertNode(element, track);
+    // A memo, not a bare accessor: several leaves inside one marker must see the same object, and an
+    // unchanged value must not hand out a fresh one.
+    const markerProps = createMemo(() => ({
+        stepMarked: cell.value === params.currentValue(),
+        currentValue: params.currentValue(),
+        index: cell.index,
+        min: cell.min,
+        max: cell.max,
+    }));
+    const markerElement = callStepMarker(params.marker, markerProps);
+    // One `insert` owns the track's children: the marker (stable identity, reconciled in place) and
+    // the thumb image, which only the cell matching the current value carries.
+    insert(track, () => [markerElement, buildThumbImage(cell)]);
+    if (params.withNumbers) {
+        const numberBox = hostElement('symbiote-view');
+        setProp(numberBox, 'style', STEP_NUMBER_CONTAINER_STYLE);
+        const label = hostElement('symbiote-text');
+        setProp(label, 'testID', `${cell.index}th-step`);
+        setProp(label, 'style', { fontSize: cell.fontSize });
+        insertNode(label, createTextNode(String(cell.value)));
+        insertNode(numberBox, label);
+        insertNode(element, numberBox);
+    }
+    return element;
+}
+function buildThumbImage(cell) {
+    const source = cell.params.thumbImage();
+    if (source === undefined || cell.value !== cell.params.currentValue()) {
+        return null;
+    }
+    const container = hostElement('symbiote-view');
+    setProp(container, 'style', THUMB_IMAGE_CONTAINER_STYLE);
+    setProp(container, 'testID', 'sliderTrackMark-thumbImage');
+    // The Image COMPONENT, not a raw symbiote-image: it resolves an asset id through RN's own
+    // resolveAssetSource, exactly as React's and Vue's custom overlays do.
+    insert(container, createComponent(Image, { source, style: THUMB_IMAGE_STYLE }));
+    return container;
+}

package/build/svelte/index.js

@@ -5,5 +5,5 @@
 // (slider/slider-platform.ts, Metro-filename-selected) - matching this adapter's own
 // Switch/ActivityIndicator convention, since Svelte components are compiled `.svelte` files, not
 // factories like Vue's per-platform `createSlider(platform)`.
-import '../register';
+import '../register/index.js';
 export { default as Slider } from './slider/index.svelte';

package/build/svelte/slider/index.svelte

@@ -130,7 +130,8 @@
   }
   function handleLayout(event: ISymbioteEvent): void {
     const layout = event.nativeEvent.layout;
-    if (isRecord(layout) && typeof layout.width === 'number') width = layout.width;
+    if (isRecord(layout) && typeof layout.width === 'number')
+      width = layout.width;
   }
 
   const minimum = $derived(minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE);
@@ -147,13 +148,17 @@
 
   const hasStepMarker = $derived(stepMarker !== undefined);
   const hasThumbImage = $derived(thumbImage !== undefined);
-  const showSteps = $derived(shouldRenderStepsIndicator(hasStepMarker, renderStepNumber));
+  const showSteps = $derived(
+    shouldRenderStepsIndicator(hasStepMarker, renderStepNumber),
+  );
 
   // The native view gets a thumbImage only when there is one AND no custom marker (which draws
   // its own thumb), matching the library. Passed raw — the engine runs the image processor
   // derived from RNCSlider's ViewConfig (same path as the color tints).
   const nativeThumbImage = $derived(
-    shouldPassNativeThumbImage(hasStepMarker, hasThumbImage) ? thumbImage : undefined,
+    shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
+      ? thumbImage
+      : undefined,
   );
 
   const view = $derived<ISliderViewProps>({
@@ -165,9 +170,16 @@
     upperLimit: upper,
     disabled: resolveSliderDisabled(disabled, accessibilityState),
     inverted,
-    thumbTintColor: resolveThumbTintColor(thumbTintColor, hasStepMarker, hasThumbImage),
+    thumbTintColor: resolveThumbTintColor(
+      thumbTintColor,
+      hasStepMarker,
+      hasThumbImage,
+    ),
     thumbImage: nativeThumbImage,
-    accessibilityState: resolveSliderAccessibilityState(disabled, accessibilityState),
+    accessibilityState: resolveSliderAccessibilityState(
+      disabled,
+      accessibilityState,
+    ),
     width,
     style,
     passthrough: {
@@ -180,7 +192,9 @@
     },
   });
 
-  const options = $derived(computeStepOptions(minimum, maximum, resolvedStep, PLATFORM.stepResolution));
+  const options = $derived(
+    computeStepOptions(minimum, maximum, resolvedStep, PLATFORM.stepResolution),
+  );
   const currentValue = $derived(reportedValue ?? view.value ?? minimum);
 
   // --- No custom marker: renderSlider() is the single source of truth (wrapper + optional
@@ -217,8 +231,12 @@
 
   function syncDefaultChildren(children: IDescriptorChild[]): void {
     if (hostShimDefault === null) return;
-    if (mountedDefault === undefined || mountedDefaultCount !== children.length) {
-      for (const child of hostShimDefault.children.slice()) hostShimDefault.removeChild(child);
+    if (
+      mountedDefault === undefined ||
+      mountedDefaultCount !== children.length
+    ) {
+      for (const child of hostShimDefault.children.slice())
+        hostShimDefault.removeChild(child);
       mountedDefault = mountDescriptorChildren(hostShimDefault, children);
       mountedDefaultCount = children.length;
     } else {
@@ -265,10 +283,44 @@
       }}
     >
       {#each orderedOptions as optionValue, index (optionValue)}
-        <symbiote-view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}><symbiote-view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>{@render stepMarker?.({ stepMarked: optionValue === currentValue, currentValue, index, min: minOption, max: maxOption })}{#if thumbImage !== undefined && optionValue === currentValue}<symbiote-view p={{ style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' }}><symbiote-image p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }} /></symbiote-view>{/if}</symbiote-view>{#if renderStepNumber}<symbiote-view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}><symbiote-text p={{ testID: `${index}th-step`, style: { fontSize } }}>{String(optionValue)}</symbiote-text></symbiote-view>{/if}</symbiote-view>
+        <symbiote-view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
+          <symbiote-view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
+            {@render stepMarker?.({
+              stepMarked: optionValue === currentValue,
+              currentValue,
+              index,
+              min: minOption,
+              max: maxOption,
+            })}
+            {#if thumbImage !== undefined && optionValue === currentValue}
+              <symbiote-view
+                p={{
+                  style: THUMB_IMAGE_CONTAINER_STYLE,
+                  testID: 'sliderTrackMark-thumbImage',
+                }}
+              >
+                <symbiote-image
+                  p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }}
+                />
+              </symbiote-view>
+            {/if}
+          </symbiote-view>
+          {#if renderStepNumber}
+            <symbiote-view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
+              <symbiote-text
+                p={{ testID: `${index}th-step`, style: { fontSize } }}
+              >
+                {String(optionValue)}
+              </symbiote-text>
+            </symbiote-view>
+          {/if}
+        </symbiote-view>
       {/each}
     </symbiote-view>
   </symbiote-view>
 {:else}
-  <symbiote-view p={{ ...defaultDescriptor?.props, class: className }} bind:this={hostShimDefault} />
+  <symbiote-view
+    p={{ ...defaultDescriptor?.props, class: className }}
+    bind:this={hostShimDefault}
+  />
 {/if}

package/build/svelte/slider/slider-platform.ios.js

@@ -3,7 +3,7 @@
 // Also the base (./slider-platform re-exports it) for headless. Mirrors
 // packages/slider/src/vue/slider/index.ios.ts exactly, one level down (platform CONSTANT here,
 // not a per-platform component — see index.svelte's header).
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core/index.js';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS, } from '../../core/index.js';
 const IOS_STEPS_CONTAINER_TOP = 10;
 export const PLATFORM = {
     defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },

package/build/vue/index.js

@@ -3,5 +3,5 @@
 // import of the codegen spec — never the library's React component), then exposes the platform-
 // split Slider. The public prop type is the agnostic core ISliderProps plus a Vue-only `class`
 // field (see slider/shared.ts); the custom StepMarker is a Vue scoped slot, not a prop.
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

package/build/vue/slider/index.ios.js

@@ -2,7 +2,7 @@
 // default), lays out implicit steps at 1000-point resolution, and nudges the step row down 10pt.
 // Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
 import { createSlider } from './shared.js';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core/index.js';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS, } from '../../core/index.js';
 const IOS_STEPS_CONTAINER_TOP = 10;
 export const Slider = createSlider({
     defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },

package/build/vue/slider/shared.js

@@ -6,9 +6,9 @@
 // and color processors from the library's ViewConfig at runtime. That ViewConfig is registered by
 // the side-effect import in ../register (pulled in by the package barrel, NOT here, so this module
 // and its tests stay free of the third-party spec).
-import { defineComponent, h, ref } from '@vue/runtime-core';
+import { defineComponent, h, ref, } from '@vue/runtime-core';
 import { descriptorToVue, normalizeVueAttrs, resolveModelValue, emitModelUpdate, Image, } from '@symbiote-native/vue';
-import { dlog } from '@symbiote-native/engine';
+import { dlog, } from '@symbiote-native/engine';
 import { sanitizeSliderValue, resolveSliderDisabled, resolveSliderAccessibilityState, resolveSliderLowerLimit, resolveSliderUpperLimit, valueFromSliderEvent, shouldRenderStepsIndicator, resolveThumbTintColor, shouldPassNativeThumbImage, isInvalidLimitConfig, computeStepOptions, orderStepOptions, stepNumberFontSize, renderSlider, renderSliderNative, resolveStepsContainerStyle, renderStepsIndicator, STEP_INDICATOR_ELEMENT_STYLE, TRACK_MARK_CONTAINER_STYLE, THUMB_IMAGE_CONTAINER_STYLE, THUMB_IMAGE_STYLE, STEP_NUMBER_CONTAINER_STYLE, SLIDER_DEFAULT_MINIMUM_VALUE, SLIDER_DEFAULT_MAXIMUM_VALUE, SLIDER_DEFAULT_STEP, SLIDER_ON_CHANGE, SLIDER_ON_VALUE_CHANGE, SLIDER_ON_SLIDING_START, SLIDER_ON_SLIDING_COMPLETE, SLIDER_ON_ACCESSIBILITY_ACTION, } from '../../core/index.js';
 function isRecord(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -23,14 +23,17 @@ function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }
 function isImageSourceProp(value) {
-    return typeof value === 'number' || (typeof value === 'object' && value !== null);
+    return (typeof value === 'number' || (typeof value === 'object' && value !== null));
 }
 // accessibilityState arrives untyped; narrow its disabled flag for the fold while preserving the
 // other entries at runtime (the resolve spread carries them onto the native node).
 function asAccessibilityState(value) {
     if (!isRecord(value))
         return undefined;
-    return { ...value, disabled: typeof value.disabled === 'boolean' ? value.disabled : undefined };
+    return {
+        ...value,
+        disabled: typeof value.disabled === 'boolean' ? value.disabled : undefined,
+    };
 }
 // The props/handlers the lifecycle consumes itself; everything else (the track tints + images,
 // thumbSize, tapToSeek, vertical, accessibility*/testID/aria-*) forwards onto the native node.
@@ -233,7 +236,10 @@ function renderCustomStepsOverlay(params) {
         if (marker !== undefined)
             trackChildren.push(h('symbiote-view', {}, marker));
         if (isImageSourceProp(params.thumbImage) && value === params.currentValue) {
-            trackChildren.push(h('symbiote-view', { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' }, [h(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })]));
+            trackChildren.push(h('symbiote-view', {
+                style: THUMB_IMAGE_CONTAINER_STYLE,
+                testID: 'sliderTrackMark-thumbImage',
+            }, [h(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })]));
         }
         const cellChildren = [
             h('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackChildren),

package/build-ngc/angular/slider/index.android.js

@@ -14,7 +14,13 @@ export class Slider extends SliderBase {
         stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Slider, isStandalone: true, selector: "Slider", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }], usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Slider, isStandalone: true, selector: "Slider", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Slider),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, decorators: [{
             type: Component,
@@ -23,7 +29,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     standalone: true,
                     imports: [DescriptorOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Slider),
+                            multi: true,
+                        },
+                    ],
                     template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
                 }]
         }] });

package/build-ngc/angular/slider/index.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/slider/index.android.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,mGAAmG;AAEnG,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;;AAG5D,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAUtC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE;QAChB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,2BAA2B;KAC/C,CAAC;uGALS,MAAM;2FAAN,MAAM,qDAHN,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,iDACrF,oDAAoD,4DAHpD,gBAAgB;;2FAKf,MAAM;kBARlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oBAC/F,QAAQ,EAAE,oDAAoD;iBAC/D"}
+{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/slider/index.android.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,mGAAmG;AAEnG,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;;AAG5D,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAgBtC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE;QAChB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,2BAA2B;KAC/C,CAAC;uGALS,MAAM;2FAAN,MAAM,qDATN;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC;gBACrC,KAAK,EAAE,IAAI;aACZ;SACF,iDACS,oDAAoD,4DATpD,gBAAgB;;2FAWf,MAAM;kBAdlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;4BACrC,KAAK,EAAE,IAAI;yBACZ;qBACF;oBACD,QAAQ,EAAE,oDAAoD;iBAC/D"}

package/build-ngc/angular/slider/index.ios.js

@@ -5,7 +5,7 @@ import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS, } from '../../core';
 import * as i0 from "@angular/core";
 const IOS_STEPS_CONTAINER_TOP = 10;
 export class Slider extends SliderBase {
@@ -15,7 +15,13 @@ export class Slider extends SliderBase {
         stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Slider, isStandalone: true, selector: "Slider", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }], usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Slider, isStandalone: true, selector: "Slider", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => Slider),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, decorators: [{
             type: Component,
@@ -24,7 +30,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     standalone: true,
                     imports: [DescriptorOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => Slider),
+                            multi: true,
+                        },
+                    ],
                     template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
                 }]
         }] });

package/build-ngc/angular/slider/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../src/angular/slider/index.ios.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,iGAAiG;AACjG,0FAA0F;AAE1F,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;;AAGnF,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAUnC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;QACnD,cAAc,EAAE,0BAA0B;QAC1C,iBAAiB,EAAE,uBAAuB;KAC3C,CAAC;uGALS,MAAM;2FAAN,MAAM,qDAHN,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,iDACrF,oDAAoD,4DAHpD,gBAAgB;;2FAKf,MAAM;kBARlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oBAC/F,QAAQ,EAAE,oDAAoD;iBAC/D"}
+{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../src/angular/slider/index.ios.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,iGAAiG;AACjG,0FAA0F;AAE1F,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EACL,yBAAyB,EACzB,0BAA0B,GAC3B,MAAM,YAAY,CAAC;;AAGpB,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAgBnC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;QACnD,cAAc,EAAE,0BAA0B;QAC1C,iBAAiB,EAAE,uBAAuB;KAC3C,CAAC;uGALS,MAAM;2FAAN,MAAM,qDATN;YACT;gBACE,OAAO,EAAE,iBAAiB;gBAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC;gBACrC,KAAK,EAAE,IAAI;aACZ;SACF,iDACS,oDAAoD,4DATpD,gBAAgB;;2FAWf,MAAM;kBAdlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE;wBACT;4BACE,OAAO,EAAE,iBAAiB;4BAC1B,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC;4BACrC,KAAK,EAAE,IAAI;yBACZ;qBACF;oBACD,QAAQ,EAAE,oDAAoD;iBAC/D"}

package/build-ngc/angular/slider/shared.js

@@ -294,7 +294,10 @@ export class SliderBase {
             inverted,
             platform: this.platform,
         });
-        return renderSlider(view, this.platform, { steps, onLayout: this.handleLayout });
+        return renderSlider(view, this.platform, {
+            steps,
+            onLayout: this.handleLayout,
+        });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SliderBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SliderBase, isStandalone: true, inputs: { value: "value", minimumValue: "minimumValue", maximumValue: "maximumValue", step: "step", lowerLimit: "lowerLimit", upperLimit: "upperLimit", minimumTrackTintColor: "minimumTrackTintColor", maximumTrackTintColor: "maximumTrackTintColor", thumbTintColor: "thumbTintColor", disabled: "disabled", inverted: "inverted", tapToSeek: "tapToSeek", vertical: "vertical", thumbImage: "thumbImage", minimumTrackImage: "minimumTrackImage", maximumTrackImage: "maximumTrackImage", trackImage: "trackImage", thumbSize: "thumbSize", accessibilityUnits: "accessibilityUnits", accessibilityIncrements: "accessibilityIncrements", renderStepNumber: "renderStepNumber", testID: "testID", style: "style", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", onAccessibilityTap: "onAccessibilityTap", onMagicTap: "onMagicTap", onAccessibilityEscape: "onAccessibilityEscape", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLive: ["aria-live", "ariaLive"], ariaHidden: ["aria-hidden", "ariaHidden"], ariaBusy: ["aria-busy", "ariaBusy"], ariaChecked: ["aria-checked", "ariaChecked"], ariaDisabled: ["aria-disabled", "ariaDisabled"], ariaExpanded: ["aria-expanded", "ariaExpanded"], ariaSelected: ["aria-selected", "ariaSelected"], ariaModal: ["aria-modal", "ariaModal"], ariaValueMax: ["aria-valuemax", "ariaValueMax"], ariaValueMin: ["aria-valuemin", "ariaValueMin"], ariaValueNow: ["aria-valuenow", "ariaValueNow"], ariaValueText: ["aria-valuetext", "ariaValueText"] }, outputs: { valueChange: "valueChange", slidingStart: "slidingStart", slidingComplete: "slidingComplete", accessibilityAction: "accessibilityAction" }, usesOnChanges: true, ngImport: i0 });