@kraft.stitch/angular 0.0.3 → 0.0.4-beta.2

package/package.json

@@ -1,17 +1,27 @@
 {
   "name": "@kraft.stitch/angular",
-  "version": "0.0.3",
+  "version": "0.0.4-beta.2",
   "description": "Hand-written Angular wrapper for the <ks-button> Stencil custom element from @kraft.stitch/core — proof-of-concept for the WebComponents wrapper pattern (core in Stencil, framework-idiomatic Input/Output/DI in the wrapper).",
   "license": "MIT",
-  "main": "src/public-api.ts",
-  "types": "src/public-api.ts",
+  "keywords": [
+    "ks-ui",
+    "kraft-stitch",
+    "ui",
+    "ui-components",
+    "component-library",
+    "design-system",
+    "web-components",
+    "stencil",
+    "angular",
+    "react"
+  ],
   "peerDependencies": {
     "@angular/core": "^21.2.0 || ^22.0.0",
     "@angular/common": "^21.2.0 || ^22.0.0",
     "@angular/forms": "^21.2.0 || ^22.0.0"
   },
   "dependencies": {
-    "@kraft.stitch/core": "^0.0.2",
+    "@kraft.stitch/core": "^0.0.3",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,

package/types/kraft.stitch-angular.d.ts

@@ -1,7 +1,7 @@
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
-import { KsVariant, KsBaseSize, KsBaseVariant, KsSize, Palette, ThemeMode, KsPosition, LoaderStateEnum, KsToastPosition } from '@kraft.stitch/core';
-export { KsToast, KsToastPosition, toastStore } from '@kraft.stitch/core';
+import { KsVariant, KsBaseSize, KsBaseVariant, KsSize, Palette, ThemeMode, KsRollingGrouping, KsRollingDirection, KsRollingDesign, KsTextTone, KsPosition, LoaderStateEnum, KsToastPosition } from '@kraft.stitch/core';
+export { KsRollingDesign, KsRollingDirection, KsRollingGrouping, KsToast, KsToastPosition, toastStore } from '@kraft.stitch/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /** DOM shape of the real `<ks-button>` custom element, typed for the wrapper. */
@@ -320,6 +320,72 @@ declare class KsFabComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsFabComponent, "ks-fab", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "appendToParent": { "alias": "appendToParent"; "required": false; "isSignal": true; }; }, { "ksClick": "ksClick"; }, never, never, true, never>;
 }
 
+/**
+ * Mirrors `KsSplitButtonItem` exported by
+ * `core/src/components/Buttons/split-button/split-button.tsx`. Duplicated
+ * locally — see the note in `button-group/button-group.ts` for why.
+ */
+interface KsSplitButtonItem {
+    key: string;
+    label?: string;
+    /** Icon class string (e.g. ks-icon-pencil) */
+    icon?: string;
+    disabled?: boolean;
+    /** Renders the item in the danger colour */
+    destructive?: boolean;
+    /** Renders a divider line instead of an item */
+    separator?: boolean;
+}
+/** DOM shape of the real `<ks-split-button>` custom element, typed for the wrapper. */
+type KsSplitButtonElement = HTMLElement & {
+    label: string;
+    icon: string;
+    variant: KsVariant;
+    size: KsBaseSize;
+    disabled: boolean;
+    items: KsSplitButtonItem[];
+};
+/**
+ * Angular wrapper around the `<ks-split-button>` Stencil custom element.
+ *
+ * Outputs are prefixed with `ks` (`ksClick`, `ksItemSelected`) instead of
+ * reusing the native event names `clicked` / `itemSelected` — see
+ * `button/button.ts` for why a same-named output would fire twice.
+ * `template: ''` — the wrapped Stencil `render()` has no `<slot>`.
+ *
+ * @example
+ * ```html
+ * <ks-split-button
+ *   label="Save"
+ *   [items]="items"
+ *   (ksClick)="save()"
+ *   (ksItemSelected)="onSelect($event)"
+ * ></ks-split-button>
+ * ```
+ */
+declare class KsSplitButtonComponent {
+    private readonly el;
+    /** Main button label */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Main button icon class */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Visual style variant */
+    readonly variant: _angular_core.InputSignal<KsVariant>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsBaseSize>;
+    /** Disables both buttons */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Menu entries */
+    readonly items: _angular_core.InputSignal<KsSplitButtonItem[]>;
+    /** Emits the `MouseEvent` when the main button is clicked. From the native `clicked` event. */
+    readonly ksClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    /** Emits the selected item's `key`. From the native `itemSelected` event. */
+    readonly ksItemSelected: _angular_core.OutputEmitterRef<string>;
+    constructor(ref: ElementRef<KsSplitButtonElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsSplitButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsSplitButtonComponent, "ks-split-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "ksClick": "ksClick"; "ksItemSelected": "ksItemSelected"; }, never, never, true, never>;
+}
+
 /** DOM shape of the real `<ks-datepicker>` custom element, typed for the wrapper. */
 type KsDatepickerElement = HTMLElement & {
     label: string;
@@ -1247,6 +1313,86 @@ declare class KsUploaderComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsUploaderComponent, "ks-uploader", never, { "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxSize": { "alias": "maxSize"; "required": false; "isSignal": true; }; "previewImages": { "alias": "previewImages"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "ksFilesChange": "ksFilesChange"; "ksFilesRejected": "ksFilesRejected"; }, never, never, true, never>;
 }
 
+/**
+ * DOM shape of the real `<ks-rolling-number>` custom element, typed for the wrapper.
+ * `prefixText` / `suffixText` / `animated` are used on the element because
+ * `prefix` and `animate` collide with native `Element` members.
+ */
+type KsRollingNumberElement = HTMLElement & {
+    value: number | string | bigint;
+    prefixText: string;
+    suffixText: string;
+    startValue: number | string | bigint;
+    decimals: number | null;
+    separator: string;
+    decimalSeparator: string;
+    grouping: KsRollingGrouping;
+    duration: number;
+    delay: number;
+    easing: string;
+    stagger: number | null;
+    spins: number;
+    direction: KsRollingDirection;
+    design: KsRollingDesign;
+    size: KsSize;
+    tone: KsTextTone;
+    animated: boolean;
+    label: string;
+};
+/**
+ * Angular wrapper around the `<ks-rolling-number>` Stencil custom element.
+ * Purely presentational — no events, no `<slot>`, plain inputs only.
+ *
+ * @example
+ * ```html
+ * <ks-rolling-number [value]="total()" prefix="$" [decimals]="2" design="finance" />
+ * ```
+ */
+declare class KsRollingNumberComponent {
+    private readonly el;
+    /** Target value. Use a string or bigint for numbers beyond 2^53 */
+    readonly value: _angular_core.InputSignal<string | number | bigint>;
+    /** Shown before the number ($, €, ₹ …) */
+    readonly prefix: _angular_core.InputSignal<string>;
+    /** Shown after the number (K, M, %, " users" …). Leading spaces are preserved */
+    readonly suffix: _angular_core.InputSignal<string>;
+    /** Value the reels roll from on first render */
+    readonly startValue: _angular_core.InputSignal<string | number | bigint>;
+    /** Fixed decimal places. Leave unset to infer from the value */
+    readonly decimals: _angular_core.InputSignal<number>;
+    /** Thousands separator. Empty string disables grouping */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Decimal separator */
+    readonly decimalSeparator: _angular_core.InputSignal<string>;
+    /** Digit grouping style (`indian` gives 12,34,567) */
+    readonly grouping: _angular_core.InputSignal<KsRollingGrouping>;
+    /** Total roll time in ms, including the cascade between digits */
+    readonly duration: _angular_core.InputSignal<number>;
+    /** Delay before rolling starts, in ms */
+    readonly delay: _angular_core.InputSignal<number>;
+    /** Any CSS easing. The default decelerates gently into place */
+    readonly easing: _angular_core.InputSignal<string>;
+    /** Gap in ms between neighbouring digits stopping. Unset = automatic */
+    readonly stagger: _angular_core.InputSignal<number>;
+    /** Extra full revolutions each reel makes on the first roll */
+    readonly spins: _angular_core.InputSignal<number>;
+    /** `auto` rolls up when the value grows and down when it shrinks */
+    readonly direction: _angular_core.InputSignal<KsRollingDirection>;
+    /** Visual style */
+    readonly design: _angular_core.InputSignal<KsRollingDesign>;
+    /** Size */
+    readonly size: _angular_core.InputSignal<KsSize>;
+    /** Text colour */
+    readonly tone: _angular_core.InputSignal<KsTextTone>;
+    /** Set false to skip animation entirely */
+    readonly animate: _angular_core.InputSignal<boolean>;
+    /** Accessible name. Defaults to the formatted value */
+    readonly label: _angular_core.InputSignal<string>;
+    constructor(ref: ElementRef<KsRollingNumberElement>);
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KsRollingNumberComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsRollingNumberComponent, "ks-rolling-number", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "startValue": { "alias": "startValue"; "required": false; "isSignal": true; }; "decimals": { "alias": "decimals"; "required": false; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "decimalSeparator": { "alias": "decimalSeparator"; "required": false; "isSignal": true; }; "grouping": { "alias": "grouping"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "delay": { "alias": "delay"; "required": false; "isSignal": true; }; "easing": { "alias": "easing"; "required": false; "isSignal": true; }; "stagger": { "alias": "stagger"; "required": false; "isSignal": true; }; "spins": { "alias": "spins"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "design": { "alias": "design"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "animate": { "alias": "animate"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
 /** DOM shape of the real `<ks-avatar>` custom element, typed for the wrapper. */
 type KsAvatarElement = HTMLElement & {
     src: string;
@@ -2243,5 +2389,7 @@ declare class KsToastOutletComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KsToastOutletComponent, "ks-toast-outlet", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
-export { KsAccordionComponent, KsAvatarComponent, KsBadgeComponent, KsBreadcrumbComponent, KsButtonComponent, KsButtonGroupComponent, KsCardComponent, KsCarouselComponent, KsCheckboxComponent, KsChipsComponent, KsCodeViewComponent, KsColourPickerComponent, KsContextMenuComponent, KsDatepickerComponent, KsDaterangeComponent, KsDialogComponent, KsDropdownComponent, KsFabComponent, KsInputComponent, KsListBoxComponent, KsLoaderComponent, KsMessageComponent, KsNavBarComponent, KsNotFoundComponent, KsOtpInputComponent, KsPaginationComponent, KsProgressComponent, KsRadioComponent, KsRatingComponent, KsSidebarComponent, KsSliderComponent, KsSpinnerComponent, KsStepperComponent, KsSwitchComponent, KsTabComponent, KsTableComponent, KsTextareaComponent, KsThemeSwitchComponent, KsTimepickerComponent, KsToastOutletComponent, KsToolbarComponent, KsTooltipComponent, KsTopNavBarComponent, KsTreeViewComponent, KsUploaderComponent };
-export type { ActionButtonsConfig, KsAccordionItem, KsBreadcrumbItem, KsButtonGroupDisplayStyle, KsButtonGroupItem, KsCardVariant, KsCarouselSlide, KsCheckboxOption, KsChipOption, KsChipsValue, KsCodeViewLanguage, KsColourPickerVariant, KsContextMenuItem, KsContextMenuPosition, KsDateRange, KsDialogSize, KsDropdownOption, KsDropdownValue, KsFabAction, KsFabPosition, KsInputType, KsListBoxOption, KsListBoxValue, KsNavBarItem, KsNavBarMode, KsNavBarSection, KsNavBarSectionItem, KsPresetRange, KsRadioOption, KsSidebarPosition, KsSidebarType, KsStepItem, KsStepperOrientation, KsTabItem, KsTableSize, KsTableVariant, KsTimeValue, KsToolbarItem, KsTopNavBarItem, KsTopNavBarVariant, KsTreeNode, KsUploadedFile };
+declare function provideInBuildTheme(themeName: string, startUpMode: ThemeMode): _angular_core.EnvironmentProviders;
+
+export { KsAccordionComponent, KsAvatarComponent, KsBadgeComponent, KsBreadcrumbComponent, KsButtonComponent, KsButtonGroupComponent, KsCardComponent, KsCarouselComponent, KsCheckboxComponent, KsChipsComponent, KsCodeViewComponent, KsColourPickerComponent, KsContextMenuComponent, KsDatepickerComponent, KsDaterangeComponent, KsDialogComponent, KsDropdownComponent, KsFabComponent, KsInputComponent, KsListBoxComponent, KsLoaderComponent, KsMessageComponent, KsNavBarComponent, KsNotFoundComponent, KsOtpInputComponent, KsPaginationComponent, KsProgressComponent, KsRadioComponent, KsRatingComponent, KsRollingNumberComponent, KsSidebarComponent, KsSliderComponent, KsSpinnerComponent, KsSplitButtonComponent, KsStepperComponent, KsSwitchComponent, KsTabComponent, KsTableComponent, KsTextareaComponent, KsThemeSwitchComponent, KsTimepickerComponent, KsToastOutletComponent, KsToolbarComponent, KsTooltipComponent, KsTopNavBarComponent, KsTreeViewComponent, KsUploaderComponent, provideInBuildTheme };
+export type { ActionButtonsConfig, KsAccordionItem, KsBreadcrumbItem, KsButtonGroupDisplayStyle, KsButtonGroupItem, KsCardVariant, KsCarouselSlide, KsCheckboxOption, KsChipOption, KsChipsValue, KsCodeViewLanguage, KsColourPickerVariant, KsContextMenuItem, KsContextMenuPosition, KsDateRange, KsDialogSize, KsDropdownOption, KsDropdownValue, KsFabAction, KsFabPosition, KsInputType, KsListBoxOption, KsListBoxValue, KsNavBarItem, KsNavBarMode, KsNavBarSection, KsNavBarSectionItem, KsPresetRange, KsRadioOption, KsSidebarPosition, KsSidebarType, KsSplitButtonItem, KsStepItem, KsStepperOrientation, KsTabItem, KsTableSize, KsTableVariant, KsTimeValue, KsToolbarItem, KsTopNavBarItem, KsTopNavBarVariant, KsTreeNode, KsUploadedFile };