@bravura/ui 3.8.0 → 4.0.0

package/selection-panel/selection-panel.directive.d.ts

@@ -63,5 +63,5 @@ export declare class SelectionPanelDirective implements ControlValueAccessor, Se
     /** @ignore */
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectionPanelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectionPanelDirective, "bui-selection-panel", ["buiSelectionPanel"], { "color": "color"; "selectByHeader": "selectByHeader"; }, {}, ["_items"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SelectionPanelDirective, "bui-selection-panel", ["buiSelectionPanel"], { "color": { "alias": "color"; "required": false; }; "selectByHeader": { "alias": "selectByHeader"; "required": false; }; }, {}, ["_items"], never, false, never>;
 }

package/skeletons/skeleton-loader-presets.directive.d.ts

@@ -1,11 +1,11 @@
 import { AfterViewChecked, ElementRef, InjectionToken } from '@angular/core';
 import { SkeletonLoaderComponent } from './skeleton-loader.component';
 import * as i0 from "@angular/core";
-export declare type SkeletonPreset = {
+export type SkeletonPreset = {
     viewBox: string;
     content: string;
 };
-export declare type SkeletonPresets = {
+export type SkeletonPresets = {
     [key: string]: SkeletonPreset;
 };
 export declare const SKELETON_PRESETS: InjectionToken<SkeletonPresets>;
@@ -19,5 +19,5 @@ export declare class SkeletonLoaderPresetsDirective implements AfterViewChecked
     constructor(_skeletonComponent: SkeletonLoaderComponent, _elementRef: ElementRef<HTMLElement>, _presetList: SkeletonPresets[]);
     ngAfterViewChecked(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonLoaderPresetsDirective, [{ host: true; }, null, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SkeletonLoaderPresetsDirective, "bui-skeleton[preset]", never, { "preset": "preset"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SkeletonLoaderPresetsDirective, "bui-skeleton[preset]", never, { "preset": { "alias": "preset"; "required": false; }; }, {}, never, never, false, never>;
 }

package/stepper/stepper.component.d.ts

@@ -70,5 +70,5 @@ export declare class StepperComponent extends CdkStepper implements AfterContent
     /** @ignore */
     _startStepTransition(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<StepperComponent, [{ optional: true; }, null, null, null, { self: true; }, { optional: true; skipSelf: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "bui-stepper, [buiStepper]", ["buiStepper", "matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": "selectedIndex"; "disableRipple": "disableRipple"; "color": "color"; "indicatorFormatter": "indicatorFormatter"; "nextStepLabelPrefix": "nextStepLabelPrefix"; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StepperComponent, "bui-stepper, [buiStepper]", ["buiStepper", "matStepper", "matVerticalStepper", "matHorizontalStepper"], { "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "color": { "alias": "color"; "required": false; }; "indicatorFormatter": { "alias": "indicatorFormatter"; "required": false; }; "nextStepLabelPrefix": { "alias": "nextStepLabelPrefix"; "required": false; }; }, { "animationDone": "animationDone"; }, ["_steps", "_icons"], never, false, never>;
 }

package/theme/_bui-card.scss

@@ -1,56 +1,56 @@
-@use 'sass:map';
-
-@mixin bui-card($color-config) {
-	$bui-card-header-text-color: var(--bui-card-header-text-color, #19315b);
-	$bui-card-header-background-color: var(--bui-card-header-background-color, #fafafa);
-
-	@if map.get($color-config, 'is-dark') {
-		$bui-card-header-text-color: var(--bui-card-header-text-color-dark-theme, white);
-		$bui-card-header-background-color: var(--bui-card-header-background-color-dark-theme, inherit);
-	}
-
-	.bui-card-flat.mat-mdc-card,
-	.bui-card-shaded.mat-mdc-card {
-		border-radius: 4px;
-		display: flex;
-		flex-direction: column;
-
-		.mat-mdc-card-header {
-			padding: 16px;
-
-			.mat-mdc-card-title {
-				font-size: 16px;
-				color: $bui-card-header-text-color;
-				margin-bottom: 0;
-			}
-
-			.mat-mdc-card-title + .mat-mdc-card-subtitle {
-				margin-top: 0;
-				margin-bottom: 0;
-			}
-		}
-
-		.mat-mdc-card-content {
-			flex: 1;
-		}
-
-		.mat-mdc-card-header + .mat-mdc-card-content {
-			padding-top: 16px;
-		}
-	}
-
-	.bui-card-flat.mat-mdc-card {
-		box-shadow: none;
-		border: 1px solid #e0e0e0;
-
-		.mat-mdc-card-header {
-			border-bottom: 1px solid #e0e0e0;
-		}
-	}
-
-	.bui-card-shaded.mat-mdc-card {
-		.mat-mdc-card-header {
-			background: $bui-card-header-background-color;
-		}
-	}
-}
+@use 'sass:map';
+
+@mixin bui-card($color-config) {
+	$bui-card-header-text-color: var(--bui-card-header-text-color, #19315b);
+	$bui-card-header-background-color: var(--bui-card-header-background-color, #fafafa);
+
+	@if map.get($color-config, 'is-dark') {
+		$bui-card-header-text-color: var(--bui-card-header-text-color-dark-theme, white);
+		$bui-card-header-background-color: var(--bui-card-header-background-color-dark-theme, inherit);
+	}
+
+	.bui-card-flat.mat-mdc-card,
+	.bui-card-shaded.mat-mdc-card {
+		border-radius: 4px;
+		display: flex;
+		flex-direction: column;
+
+		.mat-mdc-card-header {
+			padding: 16px;
+
+			.mat-mdc-card-title {
+				font-size: 16px;
+				color: $bui-card-header-text-color;
+				margin-bottom: 0;
+			}
+
+			.mat-mdc-card-title + .mat-mdc-card-subtitle {
+				margin-top: 0;
+				margin-bottom: 0;
+			}
+		}
+
+		.mat-mdc-card-content {
+			flex: 1;
+		}
+
+		.mat-mdc-card-header + .mat-mdc-card-content {
+			padding-top: 16px;
+		}
+	}
+
+	.bui-card-flat.mat-mdc-card {
+		box-shadow: none;
+		border: 1px solid #e0e0e0;
+
+		.mat-mdc-card-header {
+			border-bottom: 1px solid #e0e0e0;
+		}
+	}
+
+	.bui-card-shaded.mat-mdc-card {
+		.mat-mdc-card-header {
+			background: $bui-card-header-background-color;
+		}
+	}
+}

package/theme/_ui-theme.scss

@@ -1,112 +1,112 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use './scrollbar.scss' as scrollbar;
-@use './bui-card' as card;
-
-$default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
-$mat-foreground-extract: (
-	'secondary-text': 'light',
-	'hint-text': 'muted',
-	'divider': 'divider',
-	'base': 'base',
-	'inactive': 'inactive'
-);
-
-$mat-background-extract: (
-	'card': 'card',
-	'background': 'body'
-);
-
-@mixin apply-color($name, $color, $border-color-transition: $default-border-color-transition) {
-	.bui-border-#{$name} {
-		border-color: $color !important;
-		transition: $border-color-transition;
-	}
-	.bui-bg-#{$name} {
-		background-color: $color !important;
-	}
-	.bui-color-#{$name} {
-		color: $color !important;
-	}
-	.bui-outline-#{$name} {
-		outline-color: $color !important;
-	}
-}
-
-@mixin apply-colors($theme, $border-color-transition: $default-border-color-transition) {
-	.bui-border-emphasis:hover {
-		border-color: currentColor !important;
-		transition: $border-color-transition;
-	}
-
-	$color-config: mat.get-color-config($theme);
-	@if $color-config != null {
-		@include card.bui-card($color-config);
-		@each $p in (primary, accent, warn) {
-			$primary-palette: map.get($color-config, $p);
-			$c: mat.get-color-from-palette($primary-palette, text);
-			@include apply-color($p, $c, $border-color-transition);
-		}
-
-		$fg-original: map.get($color-config, 'foreground');
-		$fg: map.merge(
-			$fg-original,
-			(
-				inactive: rgba(map.get($fg-original, base), 0.06)
-			)
-		);
-
-		@each $key, $name in $mat-foreground-extract {
-			$c: map.get($fg, $key);
-			@include apply-color($name, $c, $border-color-transition);
-		}
-
-		.bui-host {
-			@each $p in (primary, accent, warn) {
-				$primary-palette: map.get($color-config, $p);
-				$c: mat.get-color-from-palette($primary-palette, text);
-				--bui-color-#{$p}: #{$c};
-			}
-
-			@each $key, $name in $mat-foreground-extract {
-				$c: map.get($fg, $key);
-				--bui-color-#{$name}: #{$c};
-			}
-
-			@each $key, $name in $mat-background-extract {
-				$bg: map.get($color-config, 'background');
-				$c: map.get($bg, $key);
-				--bui-bg-#{$name}: #{$c};
-			}
-
-			@if map.get($color-config, 'is-dark') == false {
-				--bui-color-success: #519602;
-				--bui-color-info: #0dcaf0;
-				--bui-color-warning: #ffc107;
-				--bui-color-error: #dc3545;
-			}
-		}
-
-		$card-bg: map.get(map.get($color-config, 'background'), 'card');
-		.iti__country-list {
-			background-color: $card-bg;
-		}
-	}
-}
-
-@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
-	@include apply-colors($theme, $border-color-transition);
-	@include scrollbar.bui-scrollbar;
-
-	.mat-icon {
-		&.fas,
-		&.far,
-		&.fab,
-		&.fa {
-			display: inline-flex;
-			justify-content: center;
-			align-items: center;
-			font-size: 20px;
-		}
-	}
-}
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './scrollbar.scss' as scrollbar;
+@use './bui-card' as card;
+
+$default-border-color-transition: border-color 100ms cubic-bezier(0.55, 0, 0.55, 0.2);
+$mat-foreground-extract: (
+	'secondary-text': 'light',
+	'hint-text': 'muted',
+	'divider': 'divider',
+	'base': 'base',
+	'inactive': 'inactive'
+);
+
+$mat-background-extract: (
+	'card': 'card',
+	'background': 'body'
+);
+
+@mixin apply-color($name, $color, $border-color-transition: $default-border-color-transition) {
+	.bui-border-#{$name} {
+		border-color: $color !important;
+		transition: $border-color-transition;
+	}
+	.bui-bg-#{$name} {
+		background-color: $color !important;
+	}
+	.bui-color-#{$name} {
+		color: $color !important;
+	}
+	.bui-outline-#{$name} {
+		outline-color: $color !important;
+	}
+}
+
+@mixin apply-colors($theme, $border-color-transition: $default-border-color-transition) {
+	.bui-border-emphasis:hover {
+		border-color: currentColor !important;
+		transition: $border-color-transition;
+	}
+
+	$color-config: mat.get-color-config($theme);
+	@if $color-config != null {
+		@include card.bui-card($color-config);
+		@each $p in (primary, accent, warn) {
+			$primary-palette: map.get($color-config, $p);
+			$c: mat.get-color-from-palette($primary-palette, text);
+			@include apply-color($p, $c, $border-color-transition);
+		}
+
+		$fg-original: map.get($color-config, 'foreground');
+		$fg: map.merge(
+			$fg-original,
+			(
+				inactive: rgba(map.get($fg-original, base), 0.06)
+			)
+		);
+
+		@each $key, $name in $mat-foreground-extract {
+			$c: map.get($fg, $key);
+			@include apply-color($name, $c, $border-color-transition);
+		}
+
+		.bui-host {
+			@each $p in (primary, accent, warn) {
+				$primary-palette: map.get($color-config, $p);
+				$c: mat.get-color-from-palette($primary-palette, text);
+				--bui-color-#{$p}: #{$c};
+			}
+
+			@each $key, $name in $mat-foreground-extract {
+				$c: map.get($fg, $key);
+				--bui-color-#{$name}: #{$c};
+			}
+
+			@each $key, $name in $mat-background-extract {
+				$bg: map.get($color-config, 'background');
+				$c: map.get($bg, $key);
+				--bui-bg-#{$name}: #{$c};
+			}
+
+			@if map.get($color-config, 'is-dark') == false {
+				--bui-color-success: #519602;
+				--bui-color-info: #0dcaf0;
+				--bui-color-warning: #ffc107;
+				--bui-color-error: #dc3545;
+			}
+		}
+
+		$card-bg: map.get(map.get($color-config, 'background'), 'card');
+		.iti__country-list {
+			background-color: $card-bg;
+		}
+	}
+}
+
+@mixin theme($theme, $border-color-transition: $default-border-color-transition) {
+	@include apply-colors($theme, $border-color-transition);
+	@include scrollbar.bui-scrollbar;
+
+	.mat-icon {
+		&.fas,
+		&.far,
+		&.fab,
+		&.fa {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 20px;
+		}
+	}
+}

package/theme/global-style-by-bootstrap.scss

@@ -1,3 +1,3 @@
-body {
-	box-sizing: border-box;
-}
+body {
+	box-sizing: border-box;
+}

package/theme/global-style-by-tailwind.scss

@@ -1,3 +1,3 @@
-body {
-	box-sizing: border-box;
-}
+body {
+	box-sizing: border-box;
+}

package/theme/scrollbar.scss

@@ -1,40 +1,40 @@
-@mixin bui-scrollbar {
-	$bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
-	$bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
-	$bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
-	$bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
-	$bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));
-
-	.bui-styled-scrollbar {
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar-track {
-			-webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
-			background-color: $bui-scrollbar-background;
-			border-radius: $bui-scrollbar-width;
-		}
-
-		&::-webkit-scrollbar {
-			width: $bui-scrollbar-width;
-			background-color: $bui-scrollbar-background;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background-color: $bui-scrollbar-thumb-color;
-			border-radius: $bui-scrollbar-width;
-			&:hover {
-				background-color: $bui-scrollbar-thumb-hover;
-			}
-			&:active {
-				background-color: $bui-scrollbar-thumb-active;
-			}
-		}
-
-		&.ng-scrollbar {
-			--scrollbar-hover-size: #{$bui-scrollbar-width};
-			--scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
-			--scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
-			--scrollbar-border-radius: #{$bui-scrollbar-width};
-		}
-	}
-}
+@mixin bui-scrollbar {
+	$bui-scrollbar-width: var(--bui-scrollbar-width, 8px);
+	$bui-scrollbar-background: var(--bui-scrollbar-background, rgba(128, 128, 128, 0.02));
+	$bui-scrollbar-thumb-color: var(--bui-scrollbar-thumb-color, rgba(128, 128, 128, 0.4));
+	$bui-scrollbar-thumb-hover: var(--bui-scrollbar-thumb-hover, rgba(128, 128, 128, 0.6));
+	$bui-scrollbar-thumb-active: var(--bui-scrollbar-thumb-active, rgba(128, 128, 128, 0.8));
+
+	.bui-styled-scrollbar {
+		scrollbar-width: thin;
+
+		&::-webkit-scrollbar-track {
+			-webkit-box-shadow: inset 0 0 6px rgba(128, 128, 128, 0.2);
+			background-color: $bui-scrollbar-background;
+			border-radius: $bui-scrollbar-width;
+		}
+
+		&::-webkit-scrollbar {
+			width: $bui-scrollbar-width;
+			background-color: $bui-scrollbar-background;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-color: $bui-scrollbar-thumb-color;
+			border-radius: $bui-scrollbar-width;
+			&:hover {
+				background-color: $bui-scrollbar-thumb-hover;
+			}
+			&:active {
+				background-color: $bui-scrollbar-thumb-active;
+			}
+		}
+
+		&.ng-scrollbar {
+			--scrollbar-hover-size: #{$bui-scrollbar-width};
+			--scrollbar-thumb-color: #{$bui-scrollbar-thumb-color};
+			--scrollbar-thumb-hover-color: #{$bui-scrollbar-thumb-hover};
+			--scrollbar-border-radius: #{$bui-scrollbar-width};
+		}
+	}
+}

package/tooltip/tooltip.component.d.ts

@@ -6,6 +6,7 @@ import * as i0 from "@angular/core";
  */
 interface TooltipTemplateContainer {
     template?: TemplateRef<any>;
+    message?: string;
 }
 /**
  * @ignore
@@ -16,6 +17,7 @@ export declare class TooltipComponent extends MatTooltipComponent {
     private _messageCopy;
     _tooltip: ElementRef<HTMLElement>;
     private tooltipDiv;
+    private messageCont;
     constructor(changeDetectorRef: ChangeDetectorRef, elementRef: ElementRef<HTMLElement>, _tooltipInst: TooltipTemplateContainer, animationMode?: string);
     show(delay: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, [null, null, null, { optional: true; }]>;

package/tooltip/tooltip.directive.d.ts

@@ -3,9 +3,8 @@ import { Directionality } from '@angular/cdk/bidi';
 import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
 import { Platform } from '@angular/cdk/platform';
 import { ElementRef, NgZone, TemplateRef, ViewContainerRef } from '@angular/core';
-import { MatTooltipDefaultOptions, TooltipPosition, _MatTooltipBase } from '@angular/material/tooltip';
+import { MatTooltip, MatTooltipDefaultOptions, TooltipPosition } from '@angular/material/tooltip';
 import { Observable } from 'rxjs';
-import { TooltipComponent } from './tooltip.component';
 import * as i0 from "@angular/core";
 /**
  * This directive extends [Angular Material tooltip](https://material.angular.io/components/tooltip/overview), with the additional capability of displaying
@@ -13,8 +12,7 @@ import * as i0 from "@angular/core";
  *
  * All the other features are identical as those in Angular Material tooltip.
  */
-export declare class TooltipDirective extends _MatTooltipBase<TooltipComponent> {
-    protected readonly _tooltipComponent: typeof TooltipComponent;
+export declare class TooltipDirective extends MatTooltip {
     private _templateRef?;
     private _contentSub;
     private _contentObs?;
@@ -46,5 +44,5 @@ export declare class TooltipDirective extends _MatTooltipBase<TooltipComponent>
     } | undefined): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, null]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[buiTooltip]", ["buiTooltip"], { "buiTooltipPosition": "buiTooltipPosition"; "buiTooltipDisabled": "buiTooltipDisabled"; "buiTooltip": "buiTooltip"; "buiTooltipClass": "buiTooltipClass"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[buiTooltip]", ["buiTooltip"], { "buiTooltipPosition": { "alias": "buiTooltipPosition"; "required": false; }; "buiTooltipDisabled": { "alias": "buiTooltipDisabled"; "required": false; }; "buiTooltip": { "alias": "buiTooltip"; "required": false; }; "buiTooltipClass": { "alias": "buiTooltipClass"; "required": false; }; }, {}, never, never, false, never>;
 }