@koobiq/components 21.0.1 → 21.1.0

package/schematics/utils/package-config.cjs

@@ -57,6 +57,24 @@ async function setupOptions(project, tree) {
         return projectWorkspace;
     }
 }
+async function resolveTargetDir(project, tree) {
+    if (!project) {
+        return tree.root;
+    }
+    const projectRoot = await utility.readWorkspace(tree).then((workspace) => workspace.projects.get(project)?.root, () => undefined);
+    if (projectRoot !== undefined) {
+        return tree.getDir(projectRoot || '/');
+    }
+    const folder = project
+        .replace(/\\/g, '/')
+        .replace(/^(\.\/)+/, '')
+        .replace(/\/+$/, '');
+    const dir = tree.getDir(folder || '/');
+    if (dir.subfiles.length || dir.subdirs.length) {
+        return dir;
+    }
+    throw new schematics.SchematicsException(utils_messages.noProjectOrDirectory(project));
+}
 async function getParsingInfo(project, tree) {
     const tsPaths = new Set();
     const templatePaths = new Set();
@@ -77,4 +95,5 @@ async function getParsingInfo(project, tree) {
 exports.addPackageToPackageJson = addPackageToPackageJson;
 exports.getPackageVersionFromPackageJson = getPackageVersionFromPackageJson;
 exports.getParsingInfo = getParsingInfo;
+exports.resolveTargetDir = resolveTargetDir;
 exports.setupOptions = setupOptions;

package/select/select.scss

@@ -29,6 +29,13 @@
     }
 }
 
+.kbq-select__panel_multiline {
+    .kbq-option-text {
+        white-space: normal;
+        overflow-wrap: break-word;
+    }
+}
+
 .kbq-select__content {
     @extend %kbq-select-content;
 

package/tabs/_tabs-common.scss

@@ -262,6 +262,29 @@
                 transparent calc(100% - var(--mask-size))
             );
         }
+
+        .kbq-tab-group_vertical & {
+            --mask-size: var(--kbq-size-3xl);
+        }
+
+        .kbq-tab-group_vertical &.kbq-tab-header__scroll-container_overflow-before {
+            mask-image: linear-gradient(to bottom, transparent, #000 var(--mask-size));
+        }
+
+        .kbq-tab-group_vertical &.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(to bottom, #000 calc(100% - var(--mask-size)), transparent);
+        }
+
+        .kbq-tab-group_vertical
+            &.kbq-tab-header__scroll-container_overflow-before.kbq-tab-header__scroll-container_overflow-after {
+            mask-image: linear-gradient(
+                to bottom,
+                transparent,
+                #000 var(--mask-size),
+                #000 calc(100% - var(--mask-size)),
+                transparent
+            );
+        }
     }
 
     .kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {

package/textarea/textarea-tokens.scss

@@ -1,5 +1,8 @@
 :where(.kbq-textarea) {
-    --kbq-textarea-size-min-height: 64px;
+    --kbq-textarea-size-min-rows: 3;
+    --kbq-textarea-size-min-height: calc(
+        var(--kbq-textarea-size-min-rows) * 1lh + 2 * var(--kbq-textarea-size-padding-vertical)
+    );
     --kbq-textarea-size-max-height: 96px;
     --kbq-textarea-size-padding-vertical: 5px;
     --kbq-textarea-size-padding-horizontal: 11px;

package/toast/toast.component.scss

@@ -121,6 +121,7 @@
 
 .kbq-toast__actions {
     display: flex;
+    flex-wrap: wrap;
 
     padding-top: var(--kbq-toast-size-button-stack-padding-top);
 

package/toggle/_toggle-theme.scss

@@ -73,10 +73,6 @@
 
         &.kbq-disabled {
             color: var(--kbq-states-foreground-disabled);
-
-            .kbq-hint .kbq-hint__text {
-                color: inherit;
-            }
         }
 
         .kbq-toggle-bar {
@@ -84,28 +80,15 @@
                 background: var(--kbq-icon-white);
             }
         }
-
-        // A projected `kbq-error` is a hint too, and keeps its own color. `:where` leaves the specificity as it was.
-        .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text {
-            color: var(--kbq-foreground-contrast-secondary);
-        }
     }
 }
 
 @mixin kbq-toggle-typography() {
     .kbq-toggle:not(.kbq-toggle_big) {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
-
-        & .kbq-hint .kbq-hint__text {
-            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
-        }
     }
 
     .kbq-toggle.kbq-toggle_big {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
-
-        & .kbq-hint .kbq-hint__text {
-            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
-        }
     }
 }

package/tooltip/tooltip.scss

@@ -109,7 +109,7 @@ $navbar-trigger-margin: $trigger-margin + 1px;
     width: var(--kbq-tooltip-size-arrow-size);
     height: var(--kbq-tooltip-size-arrow-size);
 
-    transform: rotate(45deg);
+    transform: translate(var(--kbq-tooltip-arrow-shift-x, 0px), var(--kbq-tooltip-arrow-shift-y, 0px)) rotate(45deg);
 
     z-index: -1;
 }

package/top-bar/top-bar-tokens.scss

@@ -14,6 +14,7 @@
     --kbq-top-bar-padding-vertical: var(--kbq-size-m);
     --kbq-top-bar-padding-horizontal: var(--kbq-size-xxl);
     --kbq-top-bar-border-radius: 0;
+    --kbq-top-bar-title-height: var(--kbq-size-3xl);
     --kbq-top-bar-container-start-gap: 0;
     --kbq-top-bar-container-start-min-width: 0;
     --kbq-top-bar-container-end-gap: var(--kbq-size-s);

package/top-bar/top-bar.scss

@@ -47,6 +47,16 @@
         flex: 0 0 var(--kbq-top-bar-spacer-min-width);
     }
 
+    .kbq-top-bar-title {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
+
+        // The line box of a `size="big"` breadcrumb item: the same height, and the same baseline, so a
+        // page that swaps the trail for a title moves nothing. A minimum, not a fixed height: a title
+        // long enough to wrap has to grow the bar rather than paint over its edge.
+        min-block-size: var(--kbq-top-bar-title-height);
+        line-height: var(--kbq-top-bar-title-height);
+    }
+
     .kbq-top-bar-container {
         // Must match the host set of the ruleset immediately below: the negative margin compensates the
         // padding that mixin adds, so a container the mixin skips must not get the compensation either.

package/types/koobiq-components-accordion.d.ts

@@ -6,6 +6,7 @@ import { UniqueSelectionDispatcher } from '@angular/cdk/collections';
 import { Subject } from 'rxjs';
 import * as i1$1 from '@koobiq/components/icon';
 import { KbqIcon } from '@koobiq/components/icon';
+import * as _koobiq_components_accordion from '@koobiq/components/accordion';
 import * as i1 from '@koobiq/components/core';
 
 declare class KbqAccordionTriggerDirective {
@@ -15,6 +16,18 @@ declare class KbqAccordionTriggerDirective {
     protected readonly accordion: KbqAccordion;
     /** @docs-private */
     protected readonly item: KbqAccordionItem;
+    /**
+     * Value of `aria-expanded`.
+     *
+     * @docs-private
+     */
+    protected readonly expanded: _angular_core.Signal<boolean>;
+    /**
+     * Value of `data-state`.
+     *
+     * @docs-private
+     */
+    protected readonly dataState: _angular_core.Signal<_koobiq_components_accordion.KbqAccordionItemState>;
     /** @docs-private */
     get triggerId(): string;
     /** @docs-private */
@@ -344,6 +357,12 @@ declare class KbqAccordionContentDirective implements OnInit, DoCheck, AfterView
     protected readonly nativeElement: HTMLElement;
     /** @docs-private */
     protected readonly item: KbqAccordionItem;
+    /**
+     * Value of `data-state`.
+     *
+     * @docs-private
+     */
+    protected readonly dataState: _angular_core.Signal<_koobiq_components_accordion.KbqAccordionItemState>;
     /** @docs-private */
     get contentId(): string;
     /** @docs-private */
@@ -397,6 +416,12 @@ declare class KbqAccordionHeader {
     protected readonly item: KbqAccordionItem;
     /** @docs-private */
     protected readonly accordion: KbqAccordion;
+    /**
+     * Value of `data-state`.
+     *
+     * @docs-private
+     */
+    protected readonly dataState: _angular_core.Signal<_koobiq_components_accordion.KbqAccordionItemState>;
     /**
      * Names the heading after the trigger alone.
      *

package/types/koobiq-components-button-toggle.d.ts

@@ -180,6 +180,12 @@ declare class KbqButtonToggleGroup implements OnChanges, ControlValueAccessor, O
     syncButtonToggle(toggle: KbqButtonToggle, select: boolean, isUserInput?: boolean): void;
     /** Body of `syncButtonToggle()`. */
     private applyToggleSelection;
+    /**
+     * Reports the new value of a selected toggle, which changes the value of the group, as an interaction would.
+     *
+     * @docs-private
+     */
+    followToggleValue(toggle: KbqButtonToggle, previous: KbqButtonToggle['value']): void;
     /** Checks whether a button toggle is selected. */
     isSelected(toggle: KbqButtonToggle): boolean;
     /** Determines whether a button toggle should be checked on init, from the value waiting for it. */

package/types/koobiq-components-checkbox.d.ts

@@ -59,8 +59,38 @@ declare class KbqCheckbox extends KbqColorDirective implements OnChanges, DoChec
     protected readonly inputId: _angular_core.Signal<string>;
     /** Error text projected into the checkbox. */
     private readonly error;
+    /**
+     * Whether the projected `kbq-error` is shown. Without one, nothing is rendered under the label.
+     *
+     * @docs-private
+     */
+    protected readonly showError: _angular_core.Signal<boolean>;
+    /**
+     * Id of the element wrapping the projected `kbq-error`.
+     *
+     * @docs-private
+     */
+    protected readonly errorId: _angular_core.Signal<string>;
+    /**
+     * Id of the label text, which alone names the native input.
+     *
+     * @docs-private
+     */
+    protected readonly labelId: _angular_core.Signal<string>;
     /** Hints projected into the checkbox. */
     private readonly hints;
+    /**
+     * Value of `aria-describedby` of the native input: the error, while it is shown, and the hints.
+     *
+     * @docs-private
+     */
+    protected readonly ariaDescribedBy: _angular_core.Signal<string | null>;
+    /**
+     * Value of `aria-invalid` of the native input: set whenever the checkbox is painted as invalid.
+     *
+     * @docs-private
+     */
+    protected readonly ariaInvalid: _angular_core.Signal<"true" | null>;
     /** Whether the checkbox is required. */
     readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** @docs-private */

package/types/koobiq-components-clamped-text.d.ts

@@ -58,6 +58,7 @@ declare function kbqInjectClampedTextLocaleConfiguration(): Signal<KbqClampedTex
  */
 declare class KbqClampedList<T> implements KbqClamped {
     private readonly nativeElement;
+    private readonly animateCollapse;
     /** Collapsed state: `true` = collapsed, `false` = expanded, `undefined` = expanded. */
     readonly isCollapsed: _angular_core.ModelSignal<boolean>;
     /** The list of items to display. */
@@ -70,6 +71,12 @@ declare class KbqClampedList<T> implements KbqClamped {
      * Minimum number of hidden items required to show the toggle trigger. Defaults to `6`.
      */
     readonly hiddenThreshold: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Duration of the expand and collapse animation in milliseconds.
+     * Only state changes made through the disclosure toggle animate: programmatic writes of
+     * `isCollapsed` and changes of `items` switch instantly. Defaults to `100`.
+     */
+    readonly duration: _angular_core.InputSignalWithTransform<number, string | number | null | undefined>;
     /** Id the trigger points its `aria-controls` at. Keeps an id the host already carries. */
     readonly contentId: string;
     /** Number of items hidden when the list is collapsed. */
@@ -85,7 +92,7 @@ declare class KbqClampedList<T> implements KbqClamped {
     /** Toggles the collapsed state of the list. Stops event propagation. */
     toggle(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedList<any>, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedList<any>, "[kbqClampedList]", ["kbqClampedList"], { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "collapsedVisibleCount": { "alias": "collapsedVisibleCount"; "required": false; "isSignal": true; }; "hiddenThreshold": { "alias": "hiddenThreshold"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, never, true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqClampedList<any>, "[kbqClampedList]", ["kbqClampedList"], { "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "collapsedVisibleCount": { "alias": "collapsedVisibleCount"; "required": false; "isSignal": true; }; "hiddenThreshold": { "alias": "hiddenThreshold"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, never, true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 /**
  * Disclosure control for the clamped container it is projected into — `[kbqClampedList]` or
@@ -133,6 +140,12 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
      * Whether collapsing scrolls the component back into view. Defaults to `true`.
      */
     readonly scrollOnCollapse: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Duration of the expand and collapse animation in milliseconds.
+     * Only state changes made through the disclosure toggle animate: programmatic writes of
+     * `isCollapsed` and re-measurements switch instantly. Defaults to `100`.
+     */
+    readonly duration: _angular_core.InputSignalWithTransform<number, string | number | null | undefined>;
     /** Id of the clamped region, published by the toggle as its `aria-controls`. */
     readonly contentId: string;
     /** @docs-private */
@@ -154,10 +167,10 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
      */
     protected readonly collapsedState: Signal<boolean>;
     private readonly destroyRef;
-    private readonly injector;
     private readonly elementRef;
     private readonly resizeObserver;
     private readonly platform;
+    private readonly animateCollapse;
     /**
      * Clamped text locale configuration.
      *
@@ -170,7 +183,7 @@ declare class KbqClampedText implements KbqClamped, AfterViewInit {
     private updateToggleVisibilityState;
     private getRowsCount;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqClampedText, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqClampedText, "kbq-clamped-text", ["kbqClampedText"], { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "scrollOnCollapse": { "alias": "scrollOnCollapse"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, ["*"], true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqClampedText, "kbq-clamped-text", ["kbqClampedText"], { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "isCollapsed": { "alias": "isCollapsed"; "required": false; "isSignal": true; }; "debounceTime": { "alias": "debounceTime"; "required": false; "isSignal": true; }; "scrollOnCollapse": { "alias": "scrollOnCollapse"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; }, { "isCollapsed": "isCollapsedChange"; }, never, ["*"], true, [{ directive: typeof _koobiq_components_core.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
 /** Re-exports both clamped containers and their shared trigger for `NgModule`-based consumers. */

package/types/koobiq-components-code-block.d.ts

@@ -54,13 +54,17 @@ declare const KBQ_CODE_BLOCK_FALLBACK_FILE_NAME: InjectionToken<string>;
 declare const kbqCodeBlockFallbackFileNameProvider: (fileName: string) => Provider;
 /** Default options for `kbq-code-block`. */
 type KbqCodeBlockDefaultOptions = Partial<{
-    /** Whether the actionbar should remain visible when tabs are hidden. */
+    /** Whether the actionbar should remain visible when tabs are hidden. Defaults to `false`. */
     alwaysShowActionbar: boolean;
+    /** Whether to display line numbers. Defaults to `false`. */
+    lineNumbers: boolean;
 }>;
 /** Injection token used to configure the default options for all `kbq-code-block` components. */
 declare const KBQ_CODE_BLOCK_DEFAULT_OPTIONS: InjectionToken<Partial<{
-    /** Whether the actionbar should remain visible when tabs are hidden. */
+    /** Whether the actionbar should remain visible when tabs are hidden. Defaults to `false`. */
     alwaysShowActionbar: boolean;
+    /** Whether to display line numbers. Defaults to `false`. */
+    lineNumbers: boolean;
 }>>;
 /** Utility provider for `KBQ_CODE_BLOCK_DEFAULT_OPTIONS`. */
 declare const kbqCodeBlockDefaultOptionsProvider: (options: KbqCodeBlockDefaultOptions) => Provider;
@@ -90,7 +94,7 @@ declare class KbqCodeBlock implements AfterViewInit {
     protected readonly contentExceedsMaxHeight: _angular_core.WritableSignal<boolean | undefined>;
     /** @docs-private */
     protected readonly tabLinkTemplate: _angular_core.Signal<TemplateRef<KbqTabLinkTemplateContext> | undefined>;
-    /** Whether to display line numbers. */
+    /** Whether to display line numbers. Defaults to `lineNumbers` of `KBQ_CODE_BLOCK_DEFAULT_OPTIONS`, or `false`. */
     readonly lineNumbers: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** Whether the code block should be filled. */
     readonly filled: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -432,7 +436,17 @@ declare class KbqCodeBlockHighlight {
     readonly startFrom: _angular_core.InputSignalWithTransform<number, unknown>;
     /** Whether to display line numbers for single line code block. */
     readonly singleLine: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Number of lines of the file, a line break at its end not counted, as it starts no line. */
+    protected readonly lineCount: _angular_core.Signal<number>;
+    /** Width of the line numbers column, in digits of its largest number. */
+    protected readonly lineNumberDigits: _angular_core.Signal<number>;
     private highlight;
+    /**
+     * Wraps every line of the highlighted markup in an element of its own, for the line numbers to count. The spans a
+     * line break crosses are closed at the end of its line and opened again on the next one. The line break stays
+     * inside its line, so that an empty line keeps its height and the text of the code is the text of the file.
+     */
+    private splitIntoLines;
     /** The fallback language, or plain text, which the loader registers on every instance, if it is unknown too. */
     private fallbackLanguage;
     private warn;