@koobiq/components 21.0.0 → 21.1.0

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

@@ -26,10 +26,12 @@ type KbqCodeBlockFile = {
      */
     filename?: string;
     /**
-     * File language, requires for correct syntax highlighting.
-     * If not provided or invalid, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`.
+     * File language, required for correct syntax highlighting. It has to be registered in `languages` of
+     * `KbqCodeBlockHighlightJsConfig`, unless the full bundle of highlight.js is loaded. If not provided or not
+     * registered, will be set to `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`, or to `plaintext` if that is not registered
+     * either.
      *
-     * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
+     * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
      */
     language?: string;
     /**
@@ -52,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;
@@ -88,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>;
@@ -330,13 +336,26 @@ declare class KbqCodeBlock implements AfterViewInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqCodeBlock, "kbq-code-block", ["kbqCodeBlock"], { "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; "canToggleSoftWrap": { "alias": "canToggleSoftWrap"; "required": false; "isSignal": true; }; "softWrapInput": { "alias": "softWrap"; "required": false; "isSignal": true; }; "viewAllInput": { "alias": "viewAll"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "canDownloadInput": { "alias": "canDownload"; "required": false; "isSignal": true; }; "canCopy": { "alias": "canCopy"; "required": false; "isSignal": true; }; "alwaysShowActionbar": { "alias": "alwaysShowActionbar"; "required": false; "isSignal": true; }; "filesInput": { "alias": "files"; "required": false; "isSignal": true; }; "activeFileIndexInput": { "alias": "activeFileIndex"; "required": false; "isSignal": true; }; "noBorder": { "alias": "noBorder"; "required": false; "isSignal": true; }; "hideTabsInput": { "alias": "hideTabs"; "required": false; "isSignal": true; }; }, { "softWrapChange": "softWrapChange"; "viewAllChange": "viewAllChange"; "activeFileIndexChange": "activeFileIndexChange"; "hideTabsChange": "hideTabsChange"; }, ["tabLinkTemplate"], never, true, [{ directive: typeof i1.KbqLocaleOverridesDirective; inputs: { "kbqLocaleOverrides": "localeOverrides"; }; outputs: {}; }]>;
 }
 
-/** `highlight.js` configuration */
+/**
+ * Configuration of highlight.js, which highlights the code of a code block: how to load it and which languages to
+ * register. Without a configuration, the code block loads the highlight.js core, which has no languages, and shows the
+ * code as plain text. Provide it with `kbqCodeBlockHighlightJsConfigProvider`.
+ */
 type KbqCodeBlockHighlightJsConfig = Partial<{
-    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    /**
+     * Lazy loader for the highlight.js instance. The core has no languages: register the ones the files use in
+     * `languages`, or load all of them with `() => import('highlight.js')`, the full bundle of about 1 MB.
+     * Defaults to `() => import('highlight.js/lib/core')`.
+     */
     core: () => Promise<{
         default: HLJSApi;
     }>;
-    /** Map of language name to lazy loader for that language's LanguageFn. */
+    /**
+     * Map of language name to lazy loader for that language's LanguageFn. A language of highlight.js loads from
+     * `highlight.js/lib/languages/<name>`, where `<name>` is the name of its file in
+     * [src/languages](https://github.com/highlightjs/highlight.js/tree/11-stable/src/languages). Plain text needs no
+     * entry: the code block registers it as the fallback language.
+     */
     languages: Record<string, () => Promise<{
         default: LanguageFn;
     }>>;
@@ -345,11 +364,20 @@ type KbqCodeBlockHighlightJsConfig = Partial<{
  * Injection token for configuring `KbqCodeBlockHighlightJsConfig`.
  */
 declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
-    /** Lazy loader for highlight.js core (no bundled languages). When omitted, the full bundle is loaded. */
+    /**
+     * Lazy loader for the highlight.js instance. The core has no languages: register the ones the files use in
+     * `languages`, or load all of them with `() => import('highlight.js')`, the full bundle of about 1 MB.
+     * Defaults to `() => import('highlight.js/lib/core')`.
+     */
     core: () => Promise<{
         default: HLJSApi;
     }>;
-    /** Map of language name to lazy loader for that language's LanguageFn. */
+    /**
+     * Map of language name to lazy loader for that language's LanguageFn. A language of highlight.js loads from
+     * `highlight.js/lib/languages/<name>`, where `<name>` is the name of its file in
+     * [src/languages](https://github.com/highlightjs/highlight.js/tree/11-stable/src/languages). Plain text needs no
+     * entry: the code block registers it as the fallback language.
+     */
     languages: Record<string, () => Promise<{
         default: LanguageFn;
     }>>;
@@ -361,7 +389,6 @@ declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
  * ```ts
  * providers: [
  *   kbqCodeBlockHighlightJsConfigProvider({
- *     core: () => import('highlight.js/lib/core'),
  *     languages: {
  *       typescript: () => import('highlight.js/lib/languages/typescript'),
  *       css: () => import('highlight.js/lib/languages/css'),
@@ -373,9 +400,11 @@ declare const KBQ_CODE_BLOCK_HIGHLIGHT_JS_CONFIG: InjectionToken<Partial<{
  */
 declare const kbqCodeBlockHighlightJsConfigProvider: (options: KbqCodeBlockHighlightJsConfig) => Provider;
 /**
- * Fallback language for code block if language is not supported/specified.
+ * Fallback language for code block if language is not supported/specified. It has to be registered in `languages` of
+ * `KbqCodeBlockHighlightJsConfig`, unless it is plain text or the full bundle of highlight.js is loaded, or the code
+ * block falls back to `plaintext`.
  *
- * See the [list of supported languages](https://highlightjs.readthedocs.io/en/stable/supported-languages.html).
+ * See the [list of supported languages](https://github.com/highlightjs/highlight.js/blob/11-stable/SUPPORTED_LANGUAGES.md).
  */
 declare const KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE: InjectionToken<string>;
 /** Utility provider for `KBQ_CODE_BLOCK_FALLBACK_FILE_LANGUAGE`. */
@@ -407,7 +436,19 @@ 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;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqCodeBlockHighlight, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqCodeBlockHighlight, "code[kbqCodeBlockHighlight]", ["kbqCodeBlockHighlight"], { "file": { "alias": "file"; "required": true; "isSignal": true; }; "startFrom": { "alias": "startFrom"; "required": false; "isSignal": true; }; "singleLine": { "alias": "singleLine"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;