wabtec-internal-volt-basic-components 1.0.0 → 1.2.0

package/dist/types/constants/color-vars.d.ts

@@ -526,8 +526,16 @@ declare const _default: {
         };
     };
     global: {
-        white: string;
-        black: string;
+        "static-white": string;
+        "static-white-medium": string;
+        "static-white-low": string;
+        "static-white-lower": string;
+        "static-white-lowest": string;
+        "static-black": string;
+        "static-black-medium": string;
+        "static-black-low": string;
+        "static-black-lower": string;
+        "static-black-lowest": string;
     };
     icons: {
         "color-icon-high": {
@@ -683,100 +691,100 @@ declare const _default: {
     };
     palette: {
         all: {
-            "brand-50": string;
-            "brand-100": string;
-            "brand-200": string;
-            "brand-300": string;
-            "brand-400": string;
-            "brand-500": string;
-            "brand-main": string;
-            "brand-600": string;
-            "brand-700": string;
-            "brand-800": string;
-            "brand-900": string;
-            "brand-950": string;
-            "brand-1000": string;
-            "brand-1000-medium": string;
-            "brand-1000-low": string;
-            "brand-1000-lower": string;
-            "brand-1000-lowest": string;
-            "green-50": string;
-            "green-100": string;
-            "green-200": string;
-            "green-300": string;
-            "green-400": string;
-            "green-500": string;
-            "green-main": string;
-            "green-600": string;
-            "green-700": string;
-            "green-800": string;
-            "green-900": string;
-            "green-950": string;
-            "grey-50": string;
-            "grey-100": string;
-            "grey-200": string;
-            "grey-300": string;
-            "grey-400": string;
-            "grey-500": string;
-            "grey-main": string;
-            "grey-600": string;
-            "grey-700": string;
-            "grey-800": string;
-            "grey-900": string;
-            "grey-950": string;
-            "neutral-50": string;
-            "neutral-100": string;
-            "neutral-200": string;
-            "neutral-300": string;
-            "neutral-400": string;
-            "neutral-500": string;
-            "neutral-main": string;
-            "neutral-600": string;
-            "neutral-700": string;
-            "neutral-800": string;
-            "neutral-900": string;
-            "neutral-950": string;
-            "neutral-400-medium": string;
-            "neutral-400-low": string;
-            "neutral-400-lower": string;
-            "neutral-800-medium": string;
-            "neutral-800-low": string;
-            "orange-50": string;
-            "orange-100": string;
-            "orange-200": string;
-            "orange-300": string;
-            "orange-400": string;
-            "orange-500": string;
-            "orange-main": string;
-            "orange-600": string;
-            "orange-700": string;
-            "orange-800": string;
-            "orange-900": string;
-            "orange-950": string;
-            "red-50": string;
-            "red-100": string;
-            "red-200": string;
-            "red-300": string;
-            "red-400": string;
-            "red-500": string;
-            "red-main": string;
-            "red-600": string;
-            "red-700": string;
-            "red-800": string;
-            "red-900": string;
-            "red-950": string;
-            "yellow-50": string;
-            "yellow-100": string;
-            "yellow-200": string;
-            "yellow-300": string;
-            "yellow-400": string;
-            "yellow-500": string;
-            "yellow-main": string;
-            "yellow-600": string;
-            "yellow-700": string;
-            "yellow-800": string;
-            "yellow-900": string;
-            "yellow-950": string;
+            "static-brand-50": string;
+            "static-brand-100": string;
+            "static-brand-200": string;
+            "static-brand-300": string;
+            "static-brand-400": string;
+            "static-brand-500": string;
+            "static-brand-main": string;
+            "static-brand-600": string;
+            "static-brand-700": string;
+            "static-brand-800": string;
+            "static-brand-900": string;
+            "static-brand-950": string;
+            "static-brand-1000": string;
+            "static-brand-1000-medium": string;
+            "static-brand-1000-low": string;
+            "static-brand-1000-lower": string;
+            "static-brand-1000-lowest": string;
+            "static-green-50": string;
+            "static-green-100": string;
+            "static-green-200": string;
+            "static-green-300": string;
+            "static-green-400": string;
+            "static-green-500": string;
+            "static-green-main": string;
+            "static-green-600": string;
+            "static-green-700": string;
+            "static-green-800": string;
+            "static-green-900": string;
+            "static-green-950": string;
+            "static-grey-50": string;
+            "static-grey-100": string;
+            "static-grey-200": string;
+            "static-grey-300": string;
+            "static-grey-400": string;
+            "static-grey-500": string;
+            "static-grey-main": string;
+            "static-grey-600": string;
+            "static-grey-700": string;
+            "static-grey-800": string;
+            "static-grey-900": string;
+            "static-grey-950": string;
+            "static-neutral-50": string;
+            "static-neutral-100": string;
+            "static-neutral-200": string;
+            "static-neutral-300": string;
+            "static-neutral-400": string;
+            "static-neutral-500": string;
+            "static-neutral-main": string;
+            "static-neutral-600": string;
+            "static-neutral-700": string;
+            "static-neutral-800": string;
+            "static-neutral-900": string;
+            "static-neutral-950": string;
+            "static-neutral-400-medium": string;
+            "static-neutral-400-low": string;
+            "static-neutral-400-lower": string;
+            "static-neutral-800-medium": string;
+            "static-neutral-800-low": string;
+            "static-orange-50": string;
+            "static-orange-100": string;
+            "static-orange-200": string;
+            "static-orange-300": string;
+            "static-orange-400": string;
+            "static-orange-500": string;
+            "static-orange-main": string;
+            "static-orange-600": string;
+            "static-orange-700": string;
+            "static-orange-800": string;
+            "static-orange-900": string;
+            "static-orange-950": string;
+            "static-red-50": string;
+            "static-red-100": string;
+            "static-red-200": string;
+            "static-red-300": string;
+            "static-red-400": string;
+            "static-red-500": string;
+            "static-red-main": string;
+            "static-red-600": string;
+            "static-red-700": string;
+            "static-red-800": string;
+            "static-red-900": string;
+            "static-red-950": string;
+            "static-yellow-50": string;
+            "static-yellow-100": string;
+            "static-yellow-200": string;
+            "static-yellow-300": string;
+            "static-yellow-400": string;
+            "static-yellow-500": string;
+            "static-yellow-main": string;
+            "static-yellow-600": string;
+            "static-yellow-700": string;
+            "static-yellow-800": string;
+            "static-yellow-900": string;
+            "static-yellow-950": string;
         };
     };
 };

package/dist/types/definitions/colors.d.ts

@@ -1,11 +1,11 @@
-import variables from "../constants/color-vars";
+import variables from '../constants/color-vars';
 type AllTheme = keyof typeof variables.theme;
-export type ThemeColors = Exclude<AllTheme, "shadow" | "background" | "underlay">;
+export type ThemeColors = Exclude<AllTheme, 'shadow' | 'background' | 'underlay'>;
 export type StaticGlobal = keyof typeof variables.global;
 export type Palettes = keyof typeof variables.palette.all;
 export type Icons = keyof typeof variables.icons;
+export type BorderColors = keyof typeof variables.borders;
 export type IconColors = Palettes | Icons | StaticGlobal;
 export type Colors = ThemeColors | Palettes | StaticGlobal;
 export declare function isColorFromPalette(color: string): boolean;
-export type BorderColors = keyof typeof variables.borders;
 export {};

package/dist/types/stencil-public-runtime.d.ts

@@ -1,4 +1,6 @@
-declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type CustomMethodDecorator<T> = (target: object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
+type MixinInstance<F> = F extends (base: MixedInCtor) => MixedInCtor<infer I> ? I : never;
 export interface ComponentDecorator {
     (opts?: ComponentOptions): ClassDecorator;
 }
@@ -123,6 +125,9 @@ export interface AttachInternalsDecorator {
 export interface ListenDecorator {
     (eventName: string, opts?: ListenOptions): CustomMethodDecorator<any>;
 }
+export interface ResolveVarFunction {
+    <T>(variable: T): string;
+}
 export interface ListenOptions {
     /**
      * Handlers can also be registered for an event other than the host itself.
@@ -151,7 +156,13 @@ export interface StateDecorator {
     (): PropertyDecorator;
 }
 export interface WatchDecorator {
-    (propName: string): CustomMethodDecorator<any>;
+    (propName: any): CustomMethodDecorator<(newValue?: any, oldValue?: any, propName?: any, ...args: any[]) => any | void>;
+}
+export interface PropSerializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => string | null>;
+}
+export interface AttrDeserializeDecorator {
+    (propName: any): CustomMethodDecorator<(newValue?: any, propName?: string, ...args: any[]) => any>;
 }
 export interface UserBuildConditionals {
     isDev: boolean;
@@ -200,6 +211,24 @@ export declare const AttachInternals: AttachInternalsDecorator;
  * https://stenciljs.com/docs/events#listen-decorator
  */
 export declare const Listen: ListenDecorator;
+/**
+ * The `resolveVar()` function is a compile-time utility that resolves const variables
+ * and object properties to their string literal values. This allows variables to be
+ * used in `@Listen` and `@Event` decorators instead of hardcoded strings.
+ *
+ * @example
+ * ```ts
+ * const MY_EVENT = 'myEvent';
+ * @Listen(resolveVar(MY_EVENT))
+ * ```
+ *
+ * @example
+ * ```ts
+ * const EVENTS = { MY_EVENT: 'myEvent' } as const;
+ * @Event({ eventName: resolveVar(EVENTS.MY_EVENT) })
+ * ```
+ */
+export declare const resolveVar: ResolveVarFunction;
 /**
  * The `@Method()` decorator is used to expose methods on the public API.
  * Class methods decorated with the @Method() decorator can be called directly
@@ -233,6 +262,14 @@ export declare const State: StateDecorator;
  * https://stenciljs.com/docs/reactive-data#watch-decorator
  */
 export declare const Watch: WatchDecorator;
+/**
+ * Decorator to serialize a property to an attribute string.
+ */
+export declare const PropSerialize: PropSerializeDecorator;
+/**
+ * Decorator to deserialize an attribute string to a property.
+ */
+export declare const AttrDeserialize: AttrDeserializeDecorator;
 export type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
 export type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -349,6 +386,58 @@ export declare function readTask(task: RafCallback): void;
  * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
  */
 export declare const setErrorHandler: (handler: ErrorHandler) => void;
+export type TagTransformer = (tag: string) => string;
+/**
+ * Sets a tag transformer to be used when rendering your custom elements.
+ * ```ts
+ * setTagTransformer((tag) => {
+ *  if (tag.startsWith('my-')) return `new-${tag}`
+ *  return tag;
+ * });
+ * ```
+ * Will mean all your components that start with `my-` are defined instead with `new-my-` prefix.
+ *
+ * @param transformer the transformer function to use which must return a string.
+ */
+export declare function setTagTransformer(transformer: TagTransformer): void;
+/**
+ * Transforms a tag name using a transformer set via `setTagTransformer`
+ *
+ * @param tag - the tag to transform e.g. `my-tag`
+ * @returns the transformed tag e.g. `new-my-tag`
+ */
+export declare function transformTag(tag: string): string;
+/**
+ * @deprecated - Use `MixedInCtor` instead:
+ * ```ts
+ * import { MixedInCtor } from '@stencil/core';
+ *
+ * const AFactoryFn = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * ```
+ */
+export type MixinFactory = (base: MixedInCtor) => MixedInCtor;
+export type MixedInCtor<T = {}> = new (...args: any[]) => T;
+/**
+ * Compose multiple mixin classes into a single constructor.
+ * The resulting class has the combined instance types of all mixed-in classes.
+ *
+ * Example:
+ * ```ts
+ * import { Mixin, MixedInCtor } from '@stencil/core';
+ *
+ * const AWrap = <B extends MixedInCtor>(Base: B) => {class A extends Base { propA = A }; return A;}
+ * const BWrap = <B extends MixedInCtor>(Base: B) => {class B extends Base { propB = B }; return B;}
+ * const CWrap = <B extends MixedInCtor>(Base: B) => {class C extends Base { propC = C }; return C;}
+ *
+ * class X extends Mixin(AWrap, BWrap, CWrap) {
+ *   render() { return <div>{this.propA} {this.propB} {this.propC}</div>; }
+ * }
+ * ```
+ *
+ * @param mixinFactories mixin factory functions that return a class which extends from the provided class.
+ * @returns a class that is composed from extending each of the provided classes in the order they were provided.
+ */
+export declare function Mixin<const TMixins extends readonly MixinFactory[]>(...mixinFactories: TMixins): abstract new (...args: any[]) => UnionToIntersection<MixinInstance<TMixins[number]>>;
 /**
  * This file gets copied to all distributions of stencil component collections.
  * - no imports
@@ -846,7 +935,7 @@ export declare namespace JSXBase {
     interface DetailsHTMLAttributes<T> extends HTMLAttributes<T> {
         open?: boolean;
         name?: string;
-        onToggle?: (event: Event) => void;
+        onToggle?: (event: ToggleEvent) => void;
     }
     interface DelHTMLAttributes<T> extends HTMLAttributes<T> {
         cite?: string;
@@ -1552,6 +1641,13 @@ export declare namespace JSXBase {
         z?: number | string;
         zoomAndPan?: string;
     }
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent) */
+    interface ToggleEvent extends Event {
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/newState) */
+        readonly newState: string;
+        /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ToggleEvent/oldState) */
+        readonly oldState: string;
+    }
     interface DOMAttributes<T> extends JSXAttributes<T> {
         slot?: string;
         part?: string;
@@ -1568,6 +1664,10 @@ export declare namespace JSXBase {
         onCompositionstartCapture?: (event: CompositionEvent) => void;
         onCompositionupdate?: (event: CompositionEvent) => void;
         onCompositionupdateCapture?: (event: CompositionEvent) => void;
+        onBeforeToggle?: (event: ToggleEvent) => void;
+        onBeforeToggleCapture?: (event: ToggleEvent) => void;
+        onToggle?: (event: ToggleEvent) => void;
+        onToggleCapture?: (event: ToggleEvent) => void;
         onFocus?: (event: FocusEvent) => void;
         onFocusCapture?: (event: FocusEvent) => void;
         onFocusin?: (event: FocusEvent) => void;
@@ -1586,10 +1686,6 @@ export declare namespace JSXBase {
         onSubmitCapture?: (event: Event) => void;
         onInvalid?: (event: Event) => void;
         onInvalidCapture?: (event: Event) => void;
-        onBeforeToggle?: (event: Event) => void;
-        onBeforeToggleCapture?: (event: Event) => void;
-        onToggle?: (event: Event) => void;
-        onToggleCapture?: (event: Event) => void;
         onLoad?: (event: Event) => void;
         onLoadCapture?: (event: Event) => void;
         onError?: (event: Event) => void;
@@ -1693,6 +1789,7 @@ export interface CustomElementsDefineOptions {
     exclude?: string[];
     resourcesUrl?: string;
     syncQueue?: boolean;
+    /** @deprecated in-favour of `setTagTransformer` and `transformTag` */
     transformTagName?: (tagName: string) => string;
     jmp?: (c: Function) => any;
     raf?: (c: FrameRequestCallback) => number;

package/dist/types/utils/clone-attributes.d.ts

@@ -1,2 +1,2 @@
 import { JSXBase } from "../stencil-public-runtime";
-export declare const cloneAttributes: <X extends HTMLElement, T = JSXBase.HTMLAttributes<HTMLElement> | NamedNodeMap>(el: X, ...excludedKeys: string[]) => { [P in keyof T]?: T[P]; };
+export declare const cloneAttributes: <X extends HTMLElement, T = JSXBase.HTMLAttributes | NamedNodeMap>(el: X, ...excludedKeys: string[]) => { [P in keyof T]?: T[P]; };

package/dist/types/utils/form.d.ts

@@ -4,3 +4,9 @@
  * @returns void
  */
 export declare const shadowSubmitForm: (host: Element) => void;
+/**
+ * Emits input event to create native reactive form support in Angular
+ *
+ * @returns void
+ */
+export declare const emitInputEvent: (host: HTMLElement, value: string) => void;

package/dist/types/utils/icon-attr.utils.d.ts

@@ -1,8 +1,10 @@
 /** Gets the regular icon color.
- *
+ * Returns 'color-icon-disabled' if disabled,
+ * 'color-icon-medium' if readonly,
+ * otherwise 'color-icon-high'.
  * @returns string
  */
-export declare const getIconColor: (disabled: boolean) => "color-icon-high" | "color-icon-disabled";
+export declare const getIconColor: (disabled: boolean, isReadonly?: boolean) => "color-icon-high" | "color-icon-disabled" | "color-icon-medium";
 /** Gets the icon size in rems according to the inputed size
  *
  * @returns string
@@ -15,3 +17,8 @@ export declare const getIconSize: (inputedSize: string) => string;
  * @returns string
  */
 export declare const getIconSizeUpdated: (inputedSize: string) => string;
+/** Gets the icon button size for action icons in dropdowns/autocomplete
+ * Returns 'extra-small' for small, 'small' for medium, 'medium' for large/default
+ * @returns string
+ */
+export declare const getActionIconButtonSize: (componentSize: "small" | "medium" | "large") => "small" | "medium" | "extra-small";