@scion/components 22.4.0 → 22.6.0

package/types/scion-components-text.d.ts

@@ -7,15 +7,16 @@ import { MaybeSignal } from '@scion/components/common';
  *
  * A text provider is a function that returns the text for a translation key.
  *
- * Multiple text providers can be registered. Providers are called in registration order. If a provider does not provide the text,
- * the next provider is called, and so on.
+ * Multiple text providers can be registered. Providers are called in registration order. Returning `undefined` delegates to the next provider.
  *
- * The translation keys of built-in SCION texts start with the `scion.` prefix. To not localize built-in SCION texts, the text provider can return `undefined` instead.
+ * The translation keys of built-in SCION texts start with the `scion:` prefix. To not localize built-in SCION texts, the text provider can return `undefined` instead.
  *
  * The function:
- * - Can call `inject` to get any required dependencies.
+ * - Can call `inject` to get required dependencies.
  * - Can use `toSignal` to convert an {@link Observable} to a {@link Signal}.
  *
+ * For a list of built-in SCION texts, refer to https://github.com/SchweizerischeBundesbahnen/scion-toolkit/blob/master/docs/site/scion-localization.md#built-in-texts.
+ *
  * @see SciTextProviderFn
  * @see text
  */
@@ -28,7 +29,7 @@ declare function provideTextProvider(textProviderFn: SciTextProviderFn | undefin
  * A text provider can be registered via {@link provideTextProvider} function.
  *
  * The function:
- * - Can call `inject` to get any required dependencies.
+ * - Can call `inject` to get required dependencies from the root injector.
  * - Can call `toSignal` to convert an {@link Observable} to a {@link Signal}.
  *
  * @param key - Translation key of the text.

package/types/scion-components-throbber.d.ts

@@ -7,7 +7,7 @@ import * as i0 from '@angular/core';
  *
  * ### Styling:
  *
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `src/styles.scss`.
  * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.
  *
  * - sci-throbber-color:     Sets the color of the throbber (by default, uses `lightgray`).

package/types/scion-components-viewport.d.ts

@@ -57,7 +57,7 @@ import { Signal, ElementRef } from '@angular/core';
  *
  * ## Styling
  *
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `src/styles.scss`.
  * To style a specific `sci-viewport` component, the following CSS variables can be set directly on the component.
  *
  * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar.
@@ -164,24 +164,33 @@ declare class SciViewportComponent {
 type ScrollbarStyle = 'native' | 'on-top' | 'hidden';
 
 /**
- * Renders a vertical or horizontal scrollbar.
+ * Renders a vertical or horizontal scrollbar to scroll an associated viewport.
  *
- * The scrollbar features the following functionality:
- * - allows to move the thumb by mouse
- * - enlarges the thumb if the mouse pointer is near the thumb
- * - allows paging on mousedown on the scroll track
+ * Usage:
+ * ```html
+ * <div class="viewport" #viewport>
+ *   ...
+ * </div>
+ * <sci-scrollbar [viewport]="viewport"/>
+ * ```
+ *
+ * To hide the scrollbar when not hovering the associated viewport, set `opacity` to `0`. Transitions on `opacity` fade the scrollbar in and out.
+ *
+ * ```scss
+ * div.viewport:not(:hover) + sci-scrollbar {
+ *   opacity: 0;
+ * }
+ * ```
  *
  * ### Styling:
  *
- * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `src/styles.scss`.
  * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
  *
- * - --sci-scrollbar-color:    Sets the color of the scrollbar.
+ * - --sci-scrollbar-color: Sets the color of the scrollbar.
  *
  * Example:
- *
- * ```css
- *
+ * ```scss
  * sci-scrollbar {
  *   --sci-scrollbar-color: blue;
  * }

package/viewport/scrollbar/_scrollbar.scss

@@ -4,8 +4,14 @@
  * Positions scrollbars absolutely relative to the bounding box of the nearest positioned parent.
  *
  * Invoke from within the 'sci-scrollbar' selector.
+ *
+ * TODO [Angular 23] Marked for removal.
+ *
+ * @deprecated Since version 22.6.0. Marked for removal in 23.0.0. No replacement. Position the scrollbar using CSS properties (e.g., top, right, bottom, left) based on the scroll direction.
  */
 @mixin position() {
+  @warn 'Deprecated since 22.6.0. Marked for removal in 23.0.0. No replacement. Position the scrollbar using CSS properties (e.g., top, right, bottom, left) based on the scroll direction.';
+
   position: absolute;
 
   &.vertical {
@@ -28,8 +34,14 @@
  * - not scrolling (ensures the scrollbar to be visible even if dragging the thumb outside of the host element, :active pseudo-class not working in IE and Firefox)
  *
  * Invoke from within the viewport selector.
+ *
+ * TODO [Angular 23] Marked for removal.
+ *
+ * @deprecated Since version 22.6.0. Marked for removal in 23.0.0. No replacement. To hide the scrollbar, set its opacity to 0, e.g., when the viewport is not hovered.
  */
 @mixin hide-when-inactive() {
+  @warn 'Deprecated since 22.6.0. Marked for removal in 23.0.0. No replacement. To hide the scrollbar, set its opacity to 0, e.g., when the viewport is not hovered.';
+
   &:is(
     :not(:hover):not(:active), // Support "regular" host
     :host(:not(:hover):not(:active)) // Support "shadow" host

package/design/icons/_scion-icon-font.scss

@@ -1,50 +0,0 @@
-/**
- * Installs icons used in SCION.
- */
-
-@use 'sass:map';
-
-/**
- * Current version of the icon font.
- *
- * UPDATE THIS VERSION WHEN ADDING, REMOVING OR CHANGING ICONS.
- *
- * This version is appended to the HTTP request as query parameter when fetching the icon font to support cache busting.
- */
-$-version: 1;
-
-/**
- * By default, the icon font is loaded from the CDN: https://cdn.jsdelivr.net/npm/@scion/icons
- */
-$-icon-font-defaults: (
-  // NOTE: If self-hosting SCION icons, the font path must be "root-relative" or excluded from the application build.
-  // Otherwise, the build fails because the builder cannot resolve the font files relative to "this" SASS file.
-  // For esbuild, register excluded assets as `externalDependencies` in angular.json.
-  // For webpack, exclude assets by prefixing their path with a leading caret (^).
-  directory: 'https://cdn.jsdelivr.net/npm/@scion/icons',
-  filename: 'scion-icons',
-  version: $-version,
-);
-
-/**
- * Installs the 'scion-icons' font to render SCION icons.
- *
- * SCION icons are rendered in `ScionIconComponent`.
- */
-@mixin install-icon-font($config) {
-  $config: if(sass($config): $config; else: ());
-  $config: map.merge($-icon-font-defaults, $config);
-  $path: map.get($config, directory) + '/' + map.get($config, filename);
-  $version: map.get($config, version);
-
-  @font-face {
-    font-family: 'scion-icons';
-    src: url($path + '.ttf?' + $version) format('truetype'),
-    url($path + '.woff?' + $version) format('woff'),
-    url($path + '.svg?' + $version + '#scion-icons') format('svg');
-    font-weight: normal;
-    font-style: normal;
-    // Prevent a flash of unstyled text content (FOUC) showing the ligatures until the font loads.
-    font-display: block;
-  }
-}