@koobiq/components 19.8.0 → 20.0.0

package/radio/index.d.ts

@@ -1 +1,207 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { OnInit, AfterViewInit, OnDestroy, ElementRef, AfterContentInit, QueryList } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { KbqColorDirective } from '@koobiq/components/core';
+import * as i1 from '@angular/cdk/a11y';
+
+/** Change event object emitted by KbqRadio. */
+declare class KbqRadioChange {
+    /** The KbqRadioButton that emits the change event. */
+    source: KbqRadioButton;
+    /** The value of the KbqRadioButton. */
+    value: any;
+    constructor(
+    /** The KbqRadioButton that emits the change event. */
+    source: KbqRadioButton, 
+    /** The value of the KbqRadioButton. */
+    value: any);
+}
+/**
+ * Provider Expression that allows kbq-radio-group to register as a ControlValueAccessor. This
+ * allows it to support [(ngModel)] and ngControl.
+ * @docs-private
+ */
+declare const KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR: any;
+declare class KbqRadioGroup implements AfterContentInit, ControlValueAccessor {
+    private readonly changeDetector;
+    readonly big: i0.InputSignal<boolean>;
+    /** Name of the radio button group. All radio buttons inside this group will use this name. */
+    get name(): string;
+    set name(value: string);
+    /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
+    get labelPosition(): 'before' | 'after';
+    set labelPosition(v: "before" | "after");
+    /** Value of the radio button. */
+    get value(): any;
+    set value(newValue: any);
+    /** Whether the radio button is selected. */
+    get selected(): KbqRadioButton | null;
+    set selected(selected: KbqRadioButton | null);
+    /** Whether the radio group is disabled */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Whether the radio group is required */
+    get required(): boolean;
+    set required(value: boolean);
+    /** Whether the radio group is required. */
+    private _required;
+    /**
+     * Event emitted when the group value changes.
+     * Change events are only emitted when the value changes due to user interaction with
+     * a radio button (the same behavior as `<input type-"radio">`).
+     */
+    readonly change: i0.OutputEmitterRef<KbqRadioChange>;
+    /** Child radio buttons. */
+    radios: QueryList<KbqRadioButton>;
+    /**
+     * Selected value for group. Should equal the value of the selected radio button if there *is*
+     * a corresponding radio button with a matching value. If there is *not* such a corresponding
+     * radio button, this value persists to be applied in case a new radio button is added with a
+     * matching value.
+     */
+    private _value;
+    /** The HTML name attribute applied to radio buttons in this group. */
+    private _name;
+    /** The currently selected radio button. Should match value. */
+    private _selected;
+    /** Whether the `value` has been set to its initial value. */
+    private isInitialized;
+    /** Whether the labels should appear after or before the radio-buttons. Defaults to 'after' */
+    private _labelPosition;
+    /** The method to be called in order to update ngModel */
+    controlValueAccessorChangeFn: (value: any) => void;
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     * @docs-private
+     */
+    onTouched: () => any;
+    checkSelectedRadioButton(): void;
+    /**
+     * Initialize properties once content children are available.
+     * This allows us to propagate relevant attributes to associated buttons.
+     */
+    ngAfterContentInit(): void;
+    /**
+     * Mark this group as being "touched" (for ngModel). Meant to be called by the contained
+     * radio buttons upon their blur.
+     */
+    touch(): void;
+    /** Dispatch change event with current selection and group value. */
+    emitChangeEvent(): void;
+    markRadiosForCheck(): void;
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     */
+    writeValue(value: any): void;
+    /**
+     * Registers a callback to be triggered when the model value changes.
+     * Implemented as part of ControlValueAccessor.
+     * @param fn Callback to be registered.
+     */
+    registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Registers a callback to be triggered when the control is touched.
+     * Implemented as part of ControlValueAccessor.
+     * @param fn Callback to be registered.
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * Sets the disabled state of the control. Implemented as a part of ControlValueAccessor.
+     * @param isDisabled Whether the control should be disabled.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    private updateRadioButtonNames;
+    /** Updates the `selected` radio button from the internal _value state. */
+    private updateSelectedRadioFromValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRadioGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqRadioGroup, "kbq-radio-group", ["kbqRadioGroup"], { "big": { "alias": "big"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "value": { "alias": "value"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, { "change": "change"; }, ["radios"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
+}
+declare class KbqRadioButton extends KbqColorDirective implements OnInit, AfterViewInit, OnDestroy {
+    private readonly changeDetector;
+    private focusMonitor;
+    private readonly radioDispatcher;
+    /** Whether this radio button is checked. */
+    get checked(): boolean;
+    set checked(value: boolean);
+    /** The value of this radio button. */
+    get value(): any;
+    set value(value: any);
+    /** Whether the radio button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    /** Whether the radio button is required. */
+    get required(): boolean;
+    set required(value: boolean);
+    /** Whether this radio is required. */
+    private _required;
+    /**
+     * Whether the label should appear after or before the radio button. Defaults to 'after'
+     * @TODO: doesn't affect anything. Should be removed or implemented (#DS-4571)
+     * @docs-private
+     */
+    get labelPosition(): 'before' | 'after';
+    /** @docs-private */
+    set labelPosition(value: "before" | "after");
+    /** Analog to HTML 'name' attribute used to group radios for unique selection. */
+    name: string;
+    /** The native `<input type=radio>` element */
+    readonly inputElement: i0.Signal<ElementRef<any>>;
+    /**
+     * Event emitted when the checked state of this radio button changes.
+     * Change events are only emitted when the value changes due to user interaction with
+     * the radio button (the same behavior as `<input type-"radio">`).
+     */
+    readonly change: i0.OutputEmitterRef<KbqRadioChange>;
+    /** The parent radio group. May or may not be present. */
+    radioGroup: KbqRadioGroup;
+    readonly isFocused: i0.InputSignal<boolean>;
+    /** The unique ID for the radio button. */
+    id: string;
+    /** ID of the native input element inside `<kbq-radio-button>` */
+    get inputId(): string;
+    private _labelPosition;
+    private readonly uniqueId;
+    /** Whether this radio is checked. */
+    private _checked;
+    /** Value assigned to this radio. */
+    private _value;
+    constructor();
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Focuses the radio button. */
+    focus(): void;
+    /**
+     * Marks the radio button as needing checking for change detection.
+     * This method is exposed because the parent radio group will directly
+     * update bound properties of the radio button.
+     */
+    markForCheck(): void;
+    onInputClick(event: Event): void;
+    onInputChange(event: Event): void;
+    /** Unregister function for _radioDispatcher */
+    private readonly removeUniqueSelectionListener;
+    /** Dispatch change event with current value. */
+    private emitChangeEvent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRadioButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqRadioButton, "kbq-radio-button", ["kbqRadioButton"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "isFocused": { "alias": "isFocused"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; }; }, { "change": "change"; }, never, ["*", "kbq-hint"], true, never>;
+    static ngAcceptInputType_checked: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+    static ngAcceptInputType_required: unknown;
+}
+
+declare class KbqRadioModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqRadioModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqRadioModule, never, [typeof i1.A11yModule, typeof KbqRadioGroup, typeof KbqRadioButton], [typeof KbqRadioGroup, typeof KbqRadioButton]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqRadioModule>;
+}
+
+export { KBQ_RADIO_GROUP_CONTROL_VALUE_ACCESSOR, KbqRadioButton, KbqRadioChange, KbqRadioGroup, KbqRadioModule };

package/resizer/index.d.ts

@@ -1,2 +1,85 @@
-export * from './module';
-export * from './resizer';
+import * as i0 from '@angular/core';
+
+/**
+ * Directions for resizing.
+ *
+ * Horizontal direction (x):
+ * - Left: -1
+ * - None: 0
+ * - Right: 1
+ *
+ * Vertical direction (y):
+ * - Up: -1
+ * - None: 0
+ * - Down: 1
+ */
+type KbqResizerDirection = [x: -1 | 0 | 1, y: -1 | 0 | 1];
+/**
+ * Event emitted when the size of the resizable element changes.
+ */
+type KbqResizerSizeChangeEvent = {
+    width: number;
+    height: number;
+};
+/**
+ * Directive (container) sets whether the element is resizable.
+ *
+ * @example
+ *
+ * ```html
+ * <div kbqResizable>
+ *     <div [kbqResizer]="[-1, 0]"></div>
+ * </div>
+ * ```
+ */
+declare class KbqResizable {
+    /**
+     * @docs-private
+     */
+    readonly element: HTMLElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqResizable, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqResizable, "[kbqResizable]", ["kbqResizable"], {}, {}, never, never, true, never>;
+}
+/**
+ * Directive which defines element resizing direction.
+ */
+declare class KbqResizer {
+    private readonly element;
+    private readonly resizable;
+    private readonly zone;
+    private readonly document;
+    private readonly destroyRef;
+    private readonly renderer;
+    private x;
+    private y;
+    private width;
+    private height;
+    /**
+     * Direction of element resizing.
+     */
+    readonly direction: i0.InputSignal<KbqResizerDirection>;
+    /**
+     * Emits the new size of the element after resizing.
+     */
+    readonly sizeChange: i0.OutputEmitterRef<KbqResizerSizeChangeEvent>;
+    /**
+     * @docs-private
+     */
+    protected readonly cursor: i0.Signal<"default" | "ns-resize" | "ew-resize" | "nwse-resize" | "nesw-resize">;
+    constructor();
+    private handleElementPointerDown;
+    private handleDocumentPointerMove;
+    private handleDocumentPointerUp;
+    private updateSize;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqResizer, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqResizer, "[kbqResizer]", ["kbqResizer"], { "direction": { "alias": "kbqResizer"; "required": true; "isSignal": true; }; }, { "sizeChange": "sizeChange"; }, never, never, true, never>;
+}
+
+declare class KbqResizerModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqResizerModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqResizerModule, never, [typeof KbqResizable, typeof KbqResizer], [typeof KbqResizable, typeof KbqResizer]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqResizerModule>;
+}
+
+export { KbqResizable, KbqResizer, KbqResizerModule };
+export type { KbqResizerDirection, KbqResizerSizeChangeEvent };

package/schematics/collection.json

@@ -36,6 +36,11 @@
             "description": "Updates names of icons in dedicated files",
             "factory": "./migrations/icons-replacement/index",
             "schema": "./migrations/icons-replacement/schema.json"
+        },
+        "v20-upgrade": {
+            "description": "Migrates deprecated API removed in @koobiq/components v20.0.0",
+            "factory": "./migrations/v20-upgrade/index",
+            "schema": "./migrations/v20-upgrade/schema.json"
         }
     }
 }

package/schematics/migrations/css-selectors/index.js

@@ -36,7 +36,7 @@ function cssSelectors(options) {
             const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
             targetDir = projectDefinition ? tree.getDir(projectDefinition.root) : tree;
         }
-        catch (e) {
+        catch {
             targetDir = tree;
         }
         const { logger } = context;

package/schematics/migrations/deprecated-icons/index.js

@@ -37,7 +37,7 @@ function deprecatedIcons(options) {
             const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
             targetDir = projectDefinition ? tree.getDir(projectDefinition.root) : tree;
         }
-        catch (e) {
+        catch {
             targetDir = tree;
         }
         const { logger } = context;

package/schematics/migrations/new-icons-pack/index.js

@@ -46,7 +46,7 @@ function newIconsPack(options) {
             const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
             targetDir = projectDefinition ? tree.getDir(projectDefinition.root) : tree;
         }
-        catch (e) {
+        catch {
             targetDir = tree;
         }
         const { logger } = context;

package/schematics/migrations/v20-upgrade/README.md

@@ -0,0 +1,72 @@
+# v20-upgrade
+
+Migration schematic invoked automatically by `ng update @koobiq/components@20`.
+Rewrites code in the target workspace to match the deprecated APIs that were
+removed in @koobiq/components v20.0.0.
+
+## What it does
+
+The schematic walks every `.ts`, `.html`, `.scss`, and `.css` file in the
+project (skipping `node_modules` and `dist`) and applies regex replacements
+from three ordered tables in `data.ts`:
+
+- **`tsReplacements`** — covers TypeScript imports and identifier usage:
+  package moves (`@koobiq/components/navbar-ic` → `@koobiq/components/navbar`,
+  `risk-level` → `badge`, `components-experimental/form-field` → `components/form-field`),
+  class renames (`KbqNavbarIc*` → `Kbq*`, `KbqRiskLevel*` → `KbqBadge*`,
+  `KbqWarningTooltipTrigger` / `KbqExtendedTooltipTrigger` → `KbqTooltipTrigger`,
+  `KbqDatepickerToggle` → `KbqDatepickerToggleIconComponent`, etc.), token
+  removals (`KBQ_VALIDATION`, `KBQ_SANITY_CHECKS`, `KBQ_SIDEPANEL_WITH_SHADOW`),
+  function renames (`toBoolean(` → `booleanAttribute(`, `isCorrectExtension(` →
+  `FileValidators.isCorrectExtension(`, `formatDataSize(` → `getFormattedSizeParts(`),
+  method renames on instances (`.openPanel(` → `.open(`, `.toggleIsCollapsed(` →
+  `.toggle(`, `.focusViaKeyboard(` → `.focus(`), and deprecated type-alias
+  renames (`DropdownPositionX` → `KbqDropdownPositionX`, `DropdownPositionY` →
+  `KbqDropdownPositionY`).
+- **`templateReplacements`** — selectors and attributes in Angular templates
+  (both external `.html` files and inline `template:` strings inside `.ts`):
+  `<kbq-filter-search>` → `<kbq-search-expandable>`, `<kbq-datepicker-toggle>` →
+  `<kbq-datepicker-toggle-icon>`, `<kbq-risk-level>` → `<kbq-badge>`,
+  `<kbq-navbar-ic>` → `<kbq-navbar>`, `[kbqWarningTooltip]` →
+  `kbqTooltipModifier="warning" [kbqTooltip]`, `kbqFormFieldWithoutBorders` →
+  `noBorders`, the deprecated `KbqCodeBlock` input attributes
+  (`[canLoad]` / `canLoad=` → `canDownload`, `[codeFiles]` / `codeFiles=` →
+  `files`), and template-ref exportAs renames
+  (`="kbqWarningTooltip"` → `="kbqTooltip"`).
+- **`scssReplacements`** — CSS class selectors renamed at the component level.
+
+## What it does _not_ do (warn-only)
+
+Some changes require code restructuring and are surfaced as console warnings
+without auto-fixing:
+
+| Pattern                                           | Manual migration                                                                                      |
+| ------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `(onSaveAsNew)`                                   | Listen to `(onSave)` and branch on `$event.status === 'newFilter'`                                    |
+| `[customValidation]`                              | Use `FormControl` validators (e.g. `FileValidators.isCorrectExtension`)                               |
+| `[errors]` (file-upload)                          | Use `FormControl.errors`                                                                              |
+| `[apps]` (app-switcher)                           | Wrap in single-site `[sites]="[{ id, name, apps }]"` and read with `KbqAppSwitcherSite`               |
+| `scrollableCodeContent` (code-block)              | Use the `scrollTo()` method instead                                                                   |
+| `.canLoad` / `.codeFiles` (code-block, TS access) | Template bindings are auto-migrated; update programmatic access to `.canDownload` / `.files` manually |
+| `required` (KbqFilter)                            | Use `cleanable = false` and `removable = false` (best-effort match — verify it is a KbqFilter config) |
+
+## Running it manually
+
+```
+ng generate @koobiq/components:v20-upgrade --project my-app
+```
+
+Pass `--fix=false` to see what would change without writing files.
+
+## Limitations
+
+This is a regex-based migration. It does NOT understand:
+
+- Re-exports through aliased imports.
+- Variable bindings of class references (`const x = KbqNavbarIc;` → leaves it
+  untouched).
+- TypeScript module augmentation.
+
+The grammar of `(?!...)` lookahead is used to avoid double-rewriting cases
+like `KbqDatepickerToggleIcon` (which already references the new class).
+After running, **always inspect the diff** before committing.