@rt-tools/ui-kit 0.0.23 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/fesm2022/rt-tools-ui-kit.mjs +84 -20
  2. package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/rt-tools-ui-kit-0.0.25.tgz +0 -0
  5. package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss +35 -2
  6. package/types/rt-tools-ui-kit.d.ts +123 -48
  7. package/rt-tools-ui-kit-0.0.23.tgz +0 -0
package/fesm2022/rt-tools-ui-kit.mjs CHANGED
@@ -767,6 +767,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
767
767
  read: TemplateRef,
768
768
  }, isSignal: true }] }] } });
769
769
 
770
+ /**
771
+ * Application-wide UI configuration for rt-tools components.
772
+ *
773
+ * Resolution order (most specific wins):
774
+ * 1. the component input on a concrete instance,
775
+ * 2. `components.<name>` in this config,
776
+ * 3. `global` in this config,
777
+ * 4. the library default.
778
+ *
779
+ * Provide it via {@link provideRtUi}:
780
+ * ```typescript
781
+ * bootstrapApplication(RootComponent, {
782
+ * providers: [
783
+ * provideRtUi({
784
+ * global: { theme: 'auto', design: 'custom' },
785
+ * components: { button: { design: 'material' } },
786
+ * }),
787
+ * ],
788
+ * });
789
+ * ```
790
+ *
791
+ * @publicApi
792
+ */
793
+ const RT_UI_CONFIG = new InjectionToken('RT_UI_CONFIG', {
794
+ providedIn: 'root',
795
+ factory: () => ({}),
796
+ });
797
+
770
798
  const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
771
799
  const fontLoaded = signal(false, { ...(ngDevMode ? { debugName: "fontLoaded" } : {}) });
772
800
  class RtuiIconComponent {
@@ -830,6 +858,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
830
858
 
831
859
  class RtuiButtonComponent {
832
860
  constructor() {
861
+ /** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
862
+ this.#config = inject(RT_UI_CONFIG);
863
+ this.#buttonConfig = this.#config.components?.button;
864
+ /** Design system the button renders with — see {@link RtUiDesign}. */
865
+ this.resolvedDesign = computed(() => this.design() ?? this.#buttonConfig?.design ?? this.#config.global?.design ?? 'custom', { ...(ngDevMode ? { debugName: "resolvedDesign" } : {}) });
866
+ this.resolvedSize = computed(() => this.size() ?? this.#buttonConfig?.size ?? 'md', { ...(ngDevMode ? { debugName: "resolvedSize" } : {}) });
867
+ this.resolvedRadius = computed(() => this.radius() ?? this.#buttonConfig?.radius ?? 'full', { ...(ngDevMode ? { debugName: "resolvedRadius" } : {}) });
868
+ this.resolvedAppearance = computed(() => this.appearance() ?? this.#buttonConfig?.appearance, { ...(ngDevMode ? { debugName: "resolvedAppearance" } : {}) });
869
+ /** Native Material button appearance the pill renders with under `design: 'material'`. */
870
+ this.materialAppearance = computed(() => {
871
+ const appearanceMap = {
872
+ solid: 'filled',
873
+ outline: 'outlined',
874
+ light: 'tonal',
875
+ text: 'text',
876
+ };
877
+ return appearanceMap[this.resolvedAppearance() ?? 'solid'];
878
+ }, { ...(ngDevMode ? { debugName: "materialAppearance" } : {}) });
833
879
  this.resolvedIconSize = computed(() => {
834
880
  const iconSize = this.iconSize();
835
881
  if (iconSize) {
@@ -841,7 +887,7 @@ class RtuiButtonComponent {
841
887
  md: 'sm',
842
888
  lg: 'md',
843
889
  };
844
- return sizeMap[this.size()];
890
+ return sizeMap[this.resolvedSize()];
845
891
  }, { ...(ngDevMode ? { debugName: "resolvedIconSize" } : {}) });
846
892
  this.spinnerSize = computed(() => {
847
893
  const sizeMap = {
@@ -850,22 +896,24 @@ class RtuiButtonComponent {
850
896
  md: 20,
851
897
  lg: 24,
852
898
  };
853
- return this.spinnerDiameter() ?? sizeMap[this.size()];
899
+ return this.spinnerDiameter() ?? sizeMap[this.resolvedSize()];
854
900
  }, { ...(ngDevMode ? { debugName: "spinnerSize" } : {}) });
855
901
  this.modifiers = computed(() => ({
856
902
  [`type-${this.type()}`]: true,
903
+ [`design-${this.resolvedDesign()}`]: true,
857
904
  [`variant-${this.variant()}`]: true,
858
- [`size-${this.size()}`]: true,
859
- [`radius-${this.radius()}`]: true,
860
- [`appearance-${this.appearance()}`]: !!this.appearance(),
905
+ [`size-${this.resolvedSize()}`]: true,
906
+ [`radius-${this.resolvedRadius()}`]: true,
907
+ [`appearance-${this.resolvedAppearance()}`]: !!this.resolvedAppearance(),
861
908
  loading: this.loading(),
862
909
  disabled: this.disabled(),
863
910
  }), { ...(ngDevMode ? { debugName: "modifiers" } : {}) });
864
911
  this.type = input('icon', { ...(ngDevMode ? { debugName: "type" } : {}) });
912
+ this.design = input(undefined, { ...(ngDevMode ? { debugName: "design" } : {}) });
865
913
  this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}) });
866
914
  this.appearance = input(undefined, { ...(ngDevMode ? { debugName: "appearance" } : {}) });
867
- this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
868
- this.radius = input('full', { ...(ngDevMode ? { debugName: "radius" } : {}) });
915
+ this.size = input(undefined, { ...(ngDevMode ? { debugName: "size" } : {}) });
916
+ this.radius = input(undefined, { ...(ngDevMode ? { debugName: "radius" } : {}) });
869
917
  this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
870
918
  this.iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : {}) });
871
919
  this.iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
@@ -877,19 +925,22 @@ class RtuiButtonComponent {
877
925
  this.spinnerDiameter = input(undefined, { ...(ngDevMode ? { debugName: "spinnerDiameter" } : {}) });
878
926
  this.clicked = output();
879
927
  }
928
+ /** App-wide defaults; the resolution order is: instance input → `components.button` → `global` → library default. */
929
+ #config;
930
+ #buttonConfig;
880
931
  onClick() {
881
932
  if (!this.loading() && !this.disabled()) {
882
933
  this.clicked.emit();
883
934
  }
884
935
  }
885
936
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
886
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "@switch (type()) {\n @case ('pill') {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n @default {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"], dependencies: [{ kind: "directive", type:
937
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiButtonComponent, isStandalone: true, selector: "rtui-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, design: { classPropertyName: "design", publicName: "design", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, spinnerDiameter: { classPropertyName: "spinnerDiameter", publicName: "spinnerDiameter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { properties: { "class.rtui-button-full": "fullWidth()" } }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled", "matTooltipClass", "tooltipClass"] }], ngImport: i0, template: "@switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n class=\"rtui-button-material\"\n [matButton]=\"materialAppearance()\"\n [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"], dependencies: [{ kind: "directive", type:
887
938
  // rt-tools
888
939
  BlockDirective, selector: "[rtBlock]", inputs: ["rtMod"] }, { kind: "directive", type: ElemDirective, selector: "[rtElem]", inputs: ["rtMod"] }, { kind: "directive", type: ModDirective, selector: "[rtMod]" }, { kind: "component", type: RtuiSpinnerComponent, selector: "rtui-spinner", inputs: ["diameter", "showBox", "showBackground"] }, { kind: "component", type:
889
940
  // components
890
- RtuiIconComponent, selector: "rtui-icon", inputs: ["size", "theme", "glyph", "outlined", "rotate"] }, { kind: "directive", type:
941
+ RtuiIconComponent, selector: "rtui-icon", inputs: ["size", "theme", "glyph", "outlined", "rotate"] }, { kind: "component", type:
891
942
  // material
892
- MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
943
+ MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
893
944
  }
894
945
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, decorators: [{
895
946
  type: Component,
@@ -902,6 +953,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
902
953
  // components
903
954
  RtuiIconComponent,
904
955
  // material
956
+ MatButton,
905
957
  MatRipple,
906
958
  ], hostDirectives: [
907
959
  {
@@ -915,8 +967,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
915
967
  },
916
968
  ], host: {
917
969
  '[class.rtui-button-full]': 'fullWidth()',
918
- }, template: "@switch (type()) {\n @case ('pill') {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n @default {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{gap:.375rem;border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}\n"] }]
919
- }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
970
+ }, template: "@switch (type()) {\n @case ('pill') {\n @if (resolvedDesign() === 'material') {\n <!-- design: material \u2014 a native Material button; its look is owned by the Material theme -->\n <button\n type=\"button\"\n class=\"rtui-button-material\"\n [matButton]=\"materialAppearance()\"\n [class.rtui-button-material--danger]=\"variant() === 'danger'\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon matButtonIcon [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span>{{ text() }}</span>\n }\n <ng-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon matButtonIcon iconPositionEnd [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n } @else {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n @if (icon() && iconPosition() === 'start') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n @if (text()) {\n <span rtElem=\"text\">{{ text() }}</span>\n }\n <ng-content />\n @if (icon() && iconPosition() === 'end') {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n }\n </button>\n }\n }\n @default {\n <button\n type=\"button\"\n rtBlock=\"rtui-button\"\n matRipple\n [rtMod]=\"modifiers()\"\n [matRippleDisabled]=\"disabled() || loading()\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"onClick()\">\n @if (loading()) {\n <rtui-spinner rtElem=\"spinner\" [diameter]=\"spinnerSize()\" [showBox]=\"false\" />\n } @else {\n <rtui-icon rtElem=\"icon\" [glyph]=\"icon()\" [size]=\"resolvedIconSize()\" [outlined]=\"outlined()\" />\n }\n </button>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block}:host(.rtui-button-full){display:block;width:100%}:host(.rtui-button-full) .rtui-button,:host(.rtui-button-full) .rtui-button-material{width:100%}.rtui-button{position:relative;display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border:0;background-color:transparent;color:var(--mat-sys-on-surface-variant);cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease,opacity .15s ease}.rtui-button rtui-icon{color:inherit}.rtui-button rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button:disabled{cursor:not-allowed;opacity:.38}.rtui-button--loading{cursor:wait}.rtui-button--type-icon,.rtui-button--type-fab{border-radius:1.5rem}.rtui-button--type-icon:hover:not(:disabled),.rtui-button--type-fab:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-icon.rtui-button--size-xs,.rtui-button--type-fab.rtui-button--size-xs{padding:.25rem}.rtui-button--type-icon.rtui-button--size-sm,.rtui-button--type-fab.rtui-button--size-sm{padding:.375rem}.rtui-button--type-icon.rtui-button--size-md,.rtui-button--type-fab.rtui-button--size-md{padding:.5rem}.rtui-button--type-icon.rtui-button--size-lg,.rtui-button--type-fab.rtui-button--size-lg{padding:.625rem}.rtui-button--type-icon.rtui-button--variant-primary,.rtui-button--type-fab.rtui-button--variant-primary{color:var(--rt-icon-accent-primary)}.rtui-button--type-icon.rtui-button--variant-danger,.rtui-button--type-fab.rtui-button--variant-danger{color:var(--rt-icon-accent-danger)}.rtui-button--type-icon.rtui-button--variant-success,.rtui-button--type-fab.rtui-button--variant-success{color:var(--rt-icon-accent-success)}.rtui-button--type-icon.rtui-button--variant-warning,.rtui-button--type-fab.rtui-button--variant-warning{color:var(--rt-icon-accent-warning)}.rtui-button--type-icon.rtui-button--variant-accent,.rtui-button--type-fab.rtui-button--variant-accent{color:var(--rt-icon-accent-info)}.rtui-button--type-pill{border-radius:1.5rem;background-color:var(--mat-sys-surface-container-high);color:var(--mat-sys-on-surface-variant);font-weight:500;gap:.375rem}.rtui-button--type-pill:hover:not(:disabled){background-color:var(--mat-sys-surface-container-highest)}.rtui-button--type-pill:active:not(:disabled){background-color:var(--mat-sys-surface-dim)}.rtui-button--type-pill.rtui-button--size-xs{padding:.25rem .5rem;font-size:.6875rem}.rtui-button--type-pill.rtui-button--size-sm{padding:.375rem .625rem;font-size:.75rem}.rtui-button--type-pill.rtui-button--size-md{padding:.5rem .875rem;font-size:.8125rem}.rtui-button--type-pill.rtui-button--size-lg{padding:.625rem 1rem;font-size:.875rem}.rtui-button--type-pill.rtui-button--radius-none{border-radius:0}.rtui-button--type-pill.rtui-button--radius-sm{border-radius:.25rem}.rtui-button--type-pill.rtui-button--radius-md{border-radius:.5rem}.rtui-button--type-pill.rtui-button--radius-lg{border-radius:.75rem}.rtui-button--type-pill.rtui-button--radius-full{border-radius:1.5rem}.rtui-button--type-pill.rtui-button--variant-primary{background-color:var(--rt-bg-accent-primary-subtle);color:var(--rt-text-accent-primary)}.rtui-button--type-pill.rtui-button--variant-primary:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-primary:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-primary-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger{background-color:var(--rt-bg-accent-danger-subtle);color:var(--rt-text-accent-danger)}.rtui-button--type-pill.rtui-button--variant-danger:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-danger:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-danger-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success{background-color:var(--rt-bg-accent-success-subtle);color:var(--rt-text-accent-success)}.rtui-button--type-pill.rtui-button--variant-success:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-success:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-success-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning{background-color:var(--rt-bg-accent-warning-subtle);color:var(--rt-text-accent-warning)}.rtui-button--type-pill.rtui-button--variant-warning:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-warning:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-warning-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent{background-color:var(--rt-bg-accent-info-subtle);color:var(--rt-text-accent-info)}.rtui-button--type-pill.rtui-button--variant-accent:hover:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 92%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--variant-accent:active:not(:disabled){background-color:color-mix(in srgb,var(--rt-bg-accent-info-subtle) 84%,var(--rt-color-neutral-100))}.rtui-button--type-pill.rtui-button--appearance-text{min-height:1.875rem;padding:0 .625rem;background-color:transparent;color:var(--mat-sys-on-surface-variant);font-size:1rem;font-weight:400}.rtui-button--type-pill.rtui-button--appearance-text:hover:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button--type-pill.rtui-button--appearance-text:active:not(:disabled){background-color:var(--rt-bg-base-hover)}.rtui-button-material rtui-spinner{display:flex;align-items:center;justify-content:center}.rtui-button-material--danger{--mat-button-filled-container-color: var(--mat-sys-error);--mat-button-filled-label-text-color: var(--mat-sys-on-error);--mat-button-filled-state-layer-color: var(--mat-sys-on-error);--mat-button-filled-ripple-color: color-mix(in srgb, var(--mat-sys-on-error) 12%, transparent);--mat-button-outlined-label-text-color: var(--mat-sys-error);--mat-button-outlined-outline-color: var(--mat-sys-error);--mat-button-outlined-state-layer-color: var(--mat-sys-error);--mat-button-outlined-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-text-label-text-color: var(--mat-sys-error);--mat-button-text-state-layer-color: var(--mat-sys-error);--mat-button-text-ripple-color: color-mix(in srgb, var(--mat-sys-error) 12%, transparent);--mat-button-tonal-container-color: var(--mat-sys-error-container);--mat-button-tonal-label-text-color: var(--mat-sys-on-error-container);--mat-button-tonal-state-layer-color: var(--mat-sys-on-error-container);--mat-button-tonal-ripple-color: color-mix(in srgb, var(--mat-sys-on-error-container) 12%, transparent)}\n"] }]
971
+ }], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], design: [{ type: i0.Input, args: [{ isSignal: true, alias: "design", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spinnerDiameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerDiameter", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
920
972
 
921
973
  class RtuiMultiButtonComponent {
922
974
  constructor() {
@@ -4236,18 +4288,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
4236
4288
  /**
4237
4289
  * Returns a set of the necessary dependency injection providers for managing the UI.
4238
4290
  *
4291
+ * Optionally accepts an application-wide {@link RT_UI_CONFIG UI configuration} with
4292
+ * global theme/design defaults and per-component settings:
4293
+ *
4239
4294
  * ```typescript
4240
4295
  * bootstrapApplication(RootComponent, {
4241
4296
  * providers: [
4242
- * provideRtUi()
4297
+ * provideRtUi({
4298
+ * global: { theme: 'auto', design: 'custom' },
4299
+ * components: { button: { design: 'material' } },
4300
+ * })
4243
4301
  * ]
4244
4302
  * });
4245
4303
  * ```
4246
4304
  *
4247
4305
  * @publicApi
4248
4306
  */
4249
- function provideRtUi() {
4250
- return [RtAsideService, RtActionBarService];
4307
+ function provideRtUi(config) {
4308
+ return [RtAsideService, RtActionBarService, { provide: RT_UI_CONFIG, useValue: config ?? {} }];
4251
4309
  }
4252
4310
 
4253
4311
  class RtuiSnackBarComponent {
@@ -4703,6 +4761,8 @@ class RtThemeService {
4703
4761
  #platformService;
4704
4762
  // falls back to the native localStorage when the app does not call provideRtStorage()
4705
4763
  #storage;
4764
+ // app-wide defaults (provideRtUi(config)); a persisted user choice always wins over them
4765
+ #config;
4706
4766
  #theme;
4707
4767
  #colorScheme;
4708
4768
  constructor() {
@@ -4710,6 +4770,8 @@ class RtThemeService {
4710
4770
  this.#platformService = inject(PlatformService);
4711
4771
  // falls back to the native localStorage when the app does not call provideRtStorage()
4712
4772
  this.#storage = inject(LOCAL_STORAGE, { optional: true }) ?? this.#document.defaultView?.localStorage ?? null;
4773
+ // app-wide defaults (provideRtUi(config)); a persisted user choice always wins over them
4774
+ this.#config = inject(RT_UI_CONFIG);
4713
4775
  this.#theme = signal(this.#restore(), { ...(ngDevMode ? { debugName: "#theme" } : {}) });
4714
4776
  this.#colorScheme = signal(this.#restoreScheme(), { ...(ngDevMode ? { debugName: "#colorScheme" } : {}) });
4715
4777
  this.theme = this.#theme.asReadonly();
@@ -4768,18 +4830,20 @@ class RtThemeService {
4768
4830
  }
4769
4831
  }
4770
4832
  #restore() {
4833
+ const fallback = this.#config.global?.theme ?? RT_THEME_ENUM.LIGHT;
4771
4834
  if (!this.#platformService.isPlatformBrowser || !this.#storage) {
4772
- return RT_THEME_ENUM.LIGHT;
4835
+ return fallback;
4773
4836
  }
4774
4837
  const stored = this.#storage.getItem(RT_THEME_STORAGE_KEY);
4775
- return Object.values(RT_THEME_ENUM).includes(stored) ? stored : RT_THEME_ENUM.LIGHT;
4838
+ return Object.values(RT_THEME_ENUM).includes(stored) ? stored : fallback;
4776
4839
  }
4777
4840
  #restoreScheme() {
4841
+ const fallback = this.#config.global?.colorScheme ?? null;
4778
4842
  if (!this.#platformService.isPlatformBrowser || !this.#storage) {
4779
- return null;
4843
+ return fallback;
4780
4844
  }
4781
4845
  const stored = this.#storage.getItem(RT_COLOR_SCHEME_STORAGE_KEY);
4782
- return stored && stored !== RT_DEFAULT_SCHEME ? stored : null;
4846
+ return stored && stored !== RT_DEFAULT_SCHEME ? stored : fallback;
4783
4847
  }
4784
4848
  #apply(theme) {
4785
4849
  if (!this.#platformService.isPlatformBrowser) {
@@ -4887,5 +4951,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
4887
4951
  * Generated bundle index. Do not edit.
4888
4952
  */
4889
4953
 
4890
- export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
4954
+ export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef, DEFAULT_PAGE_MODEL, DEFAULT_PAGE_SIZE, INFO_BADGE_SIZE_ENUM, INFO_BADGE_TYPE_ENUM, MODAL_WINDOW_SIZE_ENUM, RTUI_TABLE_COMPONENT_TOKEN, RTUI_TABLE_STOP_ROW_CLICK_ATTRIBUTE, RT_ACCENT_ROLE_ENUM, RT_COLOR_SCHEME_STORAGE_KEY, RT_DARK_CLASS, RT_DEFAULT_SCHEME, RT_SCHEME_ATTRIBUTE, RT_THEME_ATTRIBUTE, RT_THEME_AUTO_CLASS, RT_THEME_ENUM, RT_THEME_STORAGE_KEY, RT_UI_CONFIG, RtActionBarService, RtAsideService, RtDynamicListSelectorsDirective, RtModalService, RtPopoverDirective, RtSnackBarService, RtTableConfigService, RtTableSelectorsDirective, RtThemeDirective, RtThemeService, RtuiActionBarComponent, RtuiActionBarContainerComponent, RtuiAsideContainerComponent, RtuiAsideContainerHeaderDirective, RtuiButtonComponent, RtuiClearButtonComponent, RtuiCustomTableCellsDirective, RtuiDynamicInputAdditionalControlDirective, RtuiDynamicInputComponent, RtuiDynamicListComponent, RtuiDynamicListCustomTableCellsDirective, RtuiDynamicListRowActionsDirective, RtuiDynamicListRowAdditionalActionsDirective, RtuiDynamicListToolbarActionsDirective, RtuiDynamicListToolbarSelectorsDirective, RtuiDynamicSelectorAdditionalControlDirective, RtuiDynamicSelectorComponent, RtuiDynamicSelectorItemAdditionalControlDirective, RtuiDynamicSelectorItemTitleDirective, RtuiDynamicSelectorItemTitleProjectionDirective, RtuiDynamicSelectorListActionsComponent, RtuiDynamicSelectorPlaceholderComponent, RtuiDynamicSelectorSelectedListComponent, RtuiFileUploadComponent, RtuiHeaderCenterDirective, RtuiHeaderComponent, RtuiHeaderLeftDirective, RtuiHeaderRightDirective, RtuiIconComponent, RtuiImageUploadComponent, RtuiInfoBadgeComponent, RtuiModalComponent, RtuiMultiButtonComponent, RtuiMultiSelectorPopupComponent, RtuiPaginationComponent, RtuiScrollableContainerComponent, RtuiScrollableContainerContentDirective, RtuiScrollableContainerFooterDirective, RtuiScrollableContainerHeaderDirective, RtuiSideMenuComponent, RtuiSideMenuFooterDirective, RtuiSideMenuHeaderDirective, RtuiSnackBarComponent, RtuiSpinnerComponent, RtuiStopTableRowClickDirective, RtuiTableAdditionalRowActionsDirective, RtuiTableComponent, RtuiTableRowActionsDirective, RtuiTableRowClickDirective, RtuiToggleComponent, RtuiToolbarCenterDirective, RtuiToolbarComponent, RtuiToolbarLeftDirective, RtuiToolbarRightDirective, TABLE_COLUMN_FILTER_TYPES_ENUM, TABLE_COLUMN_TYPES_ENUM, TEXT_CELL_COLOR_ENUM, TOGGLE_SIZE_TYPE_ENUM, darkenHexColor, ddServices, getColorBasedOnBackground, progressDecreaseAnimation, progressIncreaseAnimation, provideRtUi };
4891
4955
  //# sourceMappingURL=rt-tools-ui-kit.mjs.map