@rt-tools/ui-kit 0.0.20 → 0.0.21
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.
- package/fesm2022/rt-tools-ui-kit.mjs +136 -67
- package/fesm2022/rt-tools-ui-kit.mjs.map +1 -1
- package/package.json +5 -5
- package/rt-tools-ui-kit-0.0.21.tgz +0 -0
- package/src/lib/ui-kit/buttons/unified-button/rtui-button.component.scss +247 -0
- package/src/lib/ui-kit/icon/rtui-icon.component.scss +110 -0
- package/src/styles/color-scheme.spec.ts +5 -5
- package/src/styles/components/_rtui_button.scss +95 -0
- package/types/rt-tools-ui-kit.d.ts +46 -32
- package/rt-tools-ui-kit-0.0.20.tgz +0 -0
- package/src/lib/ui-kit/buttons/icon-round/rtui-round-icon-button.component.scss +0 -44
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { NgStyle, NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe,
|
|
1
|
+
import { NgStyle, NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe, DOCUMENT, TitleCasePipe } from '@angular/common';
|
|
2
2
|
import * as i0 from '@angular/core';
|
|
3
3
|
import { inject, HostBinding, ChangeDetectionStrategy, Component, Injectable, Directive, contentChild, TemplateRef, input, booleanAttribute, output, viewChild, signal, computed, numberAttribute, InjectionToken, Injector, ViewEncapsulation, model, DestroyRef, effect, HostListener, ElementRef, forwardRef, ChangeDetectorRef, untracked, ViewContainerRef, afterNextRender } from '@angular/core';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
@@ -13,7 +13,7 @@ import { MatInputModule, MatInput, MatFormField as MatFormField$1, MatLabel } fr
|
|
|
13
13
|
import * as i4 from '@angular/material/select';
|
|
14
14
|
import { MatSelectModule, MatSelect } from '@angular/material/select';
|
|
15
15
|
import { BlockDirective, ElemDirective, ModDirective, WINDOW, IDBStorageService, PlatformService, LOCAL_STORAGE } from '@rt-tools/core';
|
|
16
|
-
import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate,
|
|
16
|
+
import { checkIsMatchingValues, SanitizePipe, RtIconOutlinedDirective, RtHideTooltipDirective, transformArrayInput, RtScrollToElementDirective, RtNavigationDirective, transformStringInput, isString, isNumber, areArraysEqual, EmptyToDashPipe, LIST_SORT_ORDER_ENUM, FILTER_OPERATOR_TYPE_ENUM, FILTER_OPERATORS, isDate, BreakpointService, DeviceDetectorService, OSTypes, RtScrollDirective, BreakStringPipe, EntityToStringPipe, OVERLAY_POSITIONS, areArraysEqualUnordered, checkIsEntityInArrayByKey, sortByAlphabet, RtEscapeKeyDirective, POSITION_ENUM } from '@rt-tools/utils';
|
|
17
17
|
import { ReplaySubject, share, Subject, merge, of, noop } from 'rxjs';
|
|
18
18
|
import { filter, map, delay, take, tap, switchMap, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
19
19
|
import { MatListItem, MatNavList, MatListItemIcon, MatListItemTitle } from '@angular/material/list';
|
|
@@ -21,6 +21,7 @@ import * as i1$2 from '@angular/material/sidenav';
|
|
|
21
21
|
import { MatDrawer, MatSidenavModule } from '@angular/material/sidenav';
|
|
22
22
|
import * as i1$1 from '@angular/material/expansion';
|
|
23
23
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
24
|
+
import * as i1$5 from '@angular/material/tooltip';
|
|
24
25
|
import { MatTooltip, MAT_TOOLTIP_DEFAULT_OPTIONS } from '@angular/material/tooltip';
|
|
25
26
|
import * as i1$3 from '@angular/material/progress-spinner';
|
|
26
27
|
import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
|
|
@@ -766,84 +767,152 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
766
767
|
read: TemplateRef,
|
|
767
768
|
}, isSignal: true }] }] } });
|
|
768
769
|
|
|
769
|
-
|
|
770
|
+
const MATERIAL_SYMBOLS_FONT = 'Material Symbols Outlined';
|
|
771
|
+
const fontLoaded = signal(false, { ...(ngDevMode ? { debugName: "fontLoaded" } : {}) });
|
|
772
|
+
class RtuiIconComponent {
|
|
773
|
+
#document;
|
|
770
774
|
constructor() {
|
|
771
|
-
this
|
|
775
|
+
this.#document = inject(DOCUMENT);
|
|
776
|
+
this.fontLoaded = fontLoaded.asReadonly();
|
|
777
|
+
this.hostClasses = computed(() => {
|
|
778
|
+
const classes = [`rtui-icon--size-${this.size()}`, `rtui-icon--theme-${this.theme()}`];
|
|
779
|
+
if (this.rotate()) {
|
|
780
|
+
classes.push('rtui-icon--rotate');
|
|
781
|
+
}
|
|
782
|
+
if (!this.fontLoaded()) {
|
|
783
|
+
classes.push('rtui-icon--loading');
|
|
784
|
+
}
|
|
785
|
+
return classes.join(' ');
|
|
786
|
+
}, { ...(ngDevMode ? { debugName: "hostClasses" } : {}) });
|
|
787
|
+
this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
788
|
+
this.theme = input('inherit', { ...(ngDevMode ? { debugName: "theme" } : {}) });
|
|
789
|
+
this.glyph = input('', { ...(ngDevMode ? { debugName: "glyph" } : {}), transform: transformStringInput });
|
|
790
|
+
this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : {}), transform: booleanAttribute });
|
|
791
|
+
this.rotate = input(false, { ...(ngDevMode ? { debugName: "rotate" } : {}), transform: booleanAttribute });
|
|
792
|
+
if (!fontLoaded()) {
|
|
793
|
+
this.#checkFontLoaded();
|
|
794
|
+
}
|
|
772
795
|
}
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
796
|
+
#checkFontLoaded() {
|
|
797
|
+
const fonts = this.#document.fonts;
|
|
798
|
+
if (fonts.check(`1rem "${MATERIAL_SYMBOLS_FONT}"`)) {
|
|
799
|
+
fontLoaded.set(true);
|
|
800
|
+
return;
|
|
801
|
+
}
|
|
802
|
+
fonts.ready.then(() => {
|
|
803
|
+
fontLoaded.set(true);
|
|
804
|
+
});
|
|
805
|
+
}
|
|
806
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: RtuiIconComponent, isStandalone: true, selector: "rtui-icon", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, rotate: { classPropertyName: "rotate", publicName: "rotate", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" }, classAttribute: "rtui-icon" }, hostDirectives: [{ directive: i1$5.MatTooltip, inputs: ["matTooltip", "tooltip", "matTooltipPosition", "tooltipPosition", "matTooltipDisabled", "tooltipDisabled"] }], ngImport: i0, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n @if (glyph()) {\n {{ glyph() }}\n } @else {\n <ng-content />\n }\n</mat-icon>\n", styles: [".rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:1.375rem;height:1.375rem;font-size:1.375rem}\n"], dependencies: [{ kind: "component", type:
|
|
808
|
+
// material
|
|
809
|
+
MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type:
|
|
810
|
+
// directives
|
|
811
|
+
RtIconOutlinedDirective, selector: "mat-icon[rtIconOutlined]", inputs: ["rtIconOutlined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
777
812
|
}
|
|
778
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type:
|
|
813
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiIconComponent, decorators: [{
|
|
779
814
|
type: Component,
|
|
780
|
-
args: [{ selector: 'rtui-
|
|
815
|
+
args: [{ selector: 'rtui-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
816
|
+
// material
|
|
781
817
|
MatIcon,
|
|
782
|
-
//
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
818
|
+
// directives
|
|
819
|
+
RtIconOutlinedDirective,
|
|
820
|
+
], hostDirectives: [
|
|
821
|
+
{
|
|
822
|
+
directive: MatTooltip,
|
|
823
|
+
inputs: ['matTooltip: tooltip', 'matTooltipPosition: tooltipPosition', 'matTooltipDisabled: tooltipDisabled'],
|
|
824
|
+
},
|
|
825
|
+
], host: {
|
|
826
|
+
class: 'rtui-icon',
|
|
827
|
+
'[class]': 'hostClasses()',
|
|
828
|
+
}, template: "<mat-icon [rtIconOutlined]=\"outlined()\">\n @if (glyph()) {\n {{ glyph() }}\n } @else {\n <ng-content />\n }\n</mat-icon>\n", styles: [".rtui-icon{display:inline-flex;align-items:center;justify-content:center}.rtui-icon--loading{visibility:hidden}.rtui-icon--rotate{animation:rt-icon-rotation 1s linear infinite}.rtui-icon .mat-icon{width:inherit;height:inherit;color:inherit;font-size:inherit}.rtui-icon--size-xs{width:.875rem;height:.875rem;font-size:.875rem}.rtui-icon--size-sm{width:1rem;height:1rem;font-size:1rem}.rtui-icon--size-md{width:1.5rem;height:1.5rem;font-size:1.5rem}.rtui-icon--size-lg{width:2rem;height:2rem;font-size:2rem}.rtui-icon--size-xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.rtui-icon--size-xxl{width:3rem;height:3rem;font-size:3rem}.rtui-icon--size-3xl{width:3.5rem;height:3.5rem;font-size:3.5rem}.rtui-icon--theme-inherit{color:inherit}.rtui-icon--theme-primary,.rtui-icon--theme-primary-strong{color:var(--rt-icon-accent-primary)}.rtui-icon--theme-neutral{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-disabled{color:var(--rt-icon-neutral-disabled)}.rtui-icon--theme-muted{color:var(--rt-icon-neutral-soft)}.rtui-icon--theme-white{color:var(--rt-icon-static-light)}.rtui-icon--theme-danger{color:var(--rt-icon-accent-danger)}.rtui-icon--theme-success{color:var(--rt-icon-accent-success)}.rtui-button--appearance-text .rtui-icon{width:1.375rem;height:1.375rem;font-size:1.375rem}\n"] }]
|
|
829
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], glyph: [{ type: i0.Input, args: [{ isSignal: true, alias: "glyph", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], rotate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rotate", required: false }] }] } });
|
|
787
830
|
|
|
788
|
-
var BUTTON_SIZE;
|
|
789
|
-
(function (BUTTON_SIZE) {
|
|
790
|
-
BUTTON_SIZE["SMALL"] = "sm";
|
|
791
|
-
BUTTON_SIZE["MEDIUM"] = "md";
|
|
792
|
-
BUTTON_SIZE["LARGE"] = "lg";
|
|
793
|
-
BUTTON_SIZE["FULL"] = "full";
|
|
794
|
-
})(BUTTON_SIZE || (BUTTON_SIZE = {}));
|
|
795
|
-
var BUTTON_COLOR;
|
|
796
|
-
(function (BUTTON_COLOR) {
|
|
797
|
-
BUTTON_COLOR["ACCENT"] = "accent";
|
|
798
|
-
BUTTON_COLOR["SUCCESS"] = "success";
|
|
799
|
-
BUTTON_COLOR["SECONDARY"] = "secondary";
|
|
800
|
-
BUTTON_COLOR["ERROR"] = "error";
|
|
801
|
-
BUTTON_COLOR["WARNING"] = "warning";
|
|
802
|
-
})(BUTTON_COLOR || (BUTTON_COLOR = {}));
|
|
803
|
-
var BUTTON_APPEARANCE;
|
|
804
|
-
(function (BUTTON_APPEARANCE) {
|
|
805
|
-
BUTTON_APPEARANCE["OUTLINE"] = "outline";
|
|
806
|
-
BUTTON_APPEARANCE["LIGHT"] = "light";
|
|
807
|
-
})(BUTTON_APPEARANCE || (BUTTON_APPEARANCE = {}));
|
|
808
831
|
class RtuiButtonComponent {
|
|
809
832
|
constructor() {
|
|
810
|
-
this.
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
const modifiers = [];
|
|
815
|
-
if (this.color()) {
|
|
816
|
-
modifiers.push(this.color());
|
|
833
|
+
this.resolvedIconSize = computed(() => {
|
|
834
|
+
const iconSize = this.iconSize();
|
|
835
|
+
if (iconSize) {
|
|
836
|
+
return iconSize;
|
|
817
837
|
}
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
838
|
+
const sizeMap = {
|
|
839
|
+
xs: 'xs',
|
|
840
|
+
sm: 'sm',
|
|
841
|
+
md: 'sm',
|
|
842
|
+
lg: 'md',
|
|
843
|
+
};
|
|
844
|
+
return sizeMap[this.size()];
|
|
845
|
+
}, { ...(ngDevMode ? { debugName: "resolvedIconSize" } : {}) });
|
|
846
|
+
this.spinnerSize = computed(() => {
|
|
847
|
+
const sizeMap = {
|
|
848
|
+
xs: 12,
|
|
849
|
+
sm: 16,
|
|
850
|
+
md: 20,
|
|
851
|
+
lg: 24,
|
|
852
|
+
};
|
|
853
|
+
return this.spinnerDiameter() ?? sizeMap[this.size()];
|
|
854
|
+
}, { ...(ngDevMode ? { debugName: "spinnerSize" } : {}) });
|
|
855
|
+
this.modifiers = computed(() => ({
|
|
856
|
+
[`type-${this.type()}`]: true,
|
|
857
|
+
[`variant-${this.variant()}`]: true,
|
|
858
|
+
[`size-${this.size()}`]: true,
|
|
859
|
+
[`radius-${this.radius()}`]: true,
|
|
860
|
+
[`appearance-${this.appearance()}`]: !!this.appearance(),
|
|
861
|
+
loading: this.loading(),
|
|
862
|
+
disabled: this.disabled(),
|
|
863
|
+
}), { ...(ngDevMode ? { debugName: "modifiers" } : {}) });
|
|
864
|
+
this.type = input('icon', { ...(ngDevMode ? { debugName: "type" } : {}) });
|
|
865
|
+
this.variant = input('default', { ...(ngDevMode ? { debugName: "variant" } : {}) });
|
|
866
|
+
this.appearance = input(undefined, { ...(ngDevMode ? { debugName: "appearance" } : {}) });
|
|
867
|
+
this.size = input('md', { ...(ngDevMode ? { debugName: "size" } : {}) });
|
|
868
|
+
this.radius = input('full', { ...(ngDevMode ? { debugName: "radius" } : {}) });
|
|
869
|
+
this.icon = input('', { ...(ngDevMode ? { debugName: "icon" } : {}), transform: transformStringInput });
|
|
870
|
+
this.iconPosition = input('start', { ...(ngDevMode ? { debugName: "iconPosition" } : {}) });
|
|
871
|
+
this.iconSize = input(undefined, { ...(ngDevMode ? { debugName: "iconSize" } : {}) });
|
|
872
|
+
this.text = input('', { ...(ngDevMode ? { debugName: "text" } : {}), transform: transformStringInput });
|
|
873
|
+
this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), transform: booleanAttribute });
|
|
874
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : {}), transform: booleanAttribute });
|
|
875
|
+
this.outlined = input(true, { ...(ngDevMode ? { debugName: "outlined" } : {}), transform: booleanAttribute });
|
|
876
|
+
this.fullWidth = input(false, { ...(ngDevMode ? { debugName: "fullWidth" } : {}), transform: booleanAttribute });
|
|
877
|
+
this.spinnerDiameter = input(undefined, { ...(ngDevMode ? { debugName: "spinnerDiameter" } : {}) });
|
|
878
|
+
this.clicked = output();
|
|
879
|
+
}
|
|
880
|
+
onClick() {
|
|
881
|
+
if (!this.loading() && !this.disabled()) {
|
|
882
|
+
this.clicked.emit();
|
|
883
|
+
}
|
|
823
884
|
}
|
|
824
885
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
826
|
-
|
|
827
|
-
|
|
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 type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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 type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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;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:
|
|
887
|
+
// rt-tools
|
|
888
|
+
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
|
+
// components
|
|
890
|
+
RtuiIconComponent, selector: "rtui-icon", inputs: ["size", "theme", "glyph", "outlined", "rotate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
828
891
|
}
|
|
829
892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: RtuiButtonComponent, decorators: [{
|
|
830
893
|
type: Component,
|
|
831
|
-
args: [{
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
894
|
+
args: [{ selector: 'rtui-button', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
895
|
+
// rt-tools
|
|
896
|
+
BlockDirective,
|
|
897
|
+
ElemDirective,
|
|
898
|
+
ModDirective,
|
|
899
|
+
RtuiSpinnerComponent,
|
|
900
|
+
// components
|
|
901
|
+
RtuiIconComponent,
|
|
902
|
+
], hostDirectives: [
|
|
903
|
+
{
|
|
904
|
+
directive: MatTooltip,
|
|
905
|
+
inputs: [
|
|
906
|
+
'matTooltip: tooltip',
|
|
907
|
+
'matTooltipPosition: tooltipPosition',
|
|
908
|
+
'matTooltipDisabled: tooltipDisabled',
|
|
909
|
+
'matTooltipClass: tooltipClass',
|
|
910
|
+
],
|
|
911
|
+
},
|
|
912
|
+
], host: {
|
|
913
|
+
'[class.rtui-button-full]': 'fullWidth()',
|
|
914
|
+
}, template: "@switch (type()) {\n @case ('pill') {\n <button type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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 type=\"button\" rtBlock=\"rtui-button\" [rtMod]=\"modifiers()\" [disabled]=\"disabled() || loading()\" (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;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"] }]
|
|
915
|
+
}], 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"] }] } });
|
|
847
916
|
|
|
848
917
|
class RtuiMultiButtonComponent {
|
|
849
918
|
constructor() {
|
|
@@ -4797,5 +4866,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4797
4866
|
* Generated bundle index. Do not edit.
|
|
4798
4867
|
*/
|
|
4799
4868
|
|
|
4800
|
-
export { ASIDE_BUTTONS_ENUM, ASIDE_REF, AsideRef,
|
|
4869
|
+
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 };
|
|
4801
4870
|
//# sourceMappingURL=rt-tools-ui-kit.mjs.map
|