chrv-components 1.12.74 → 1.12.75
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.
|
Binary file
|
|
@@ -4801,15 +4801,14 @@ class ChrButtonComponent {
|
|
|
4801
4801
|
* If the value is not a function, the value will be directly returned.
|
|
4802
4802
|
* @param The function the value to be handled on click
|
|
4803
4803
|
*/
|
|
4804
|
-
this.
|
|
4804
|
+
this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
|
|
4805
4805
|
/**
|
|
4806
4806
|
* The event that will be thrown when the button is clicked
|
|
4807
4807
|
*/
|
|
4808
|
-
this.
|
|
4809
|
-
this.clickChange = onclick;
|
|
4808
|
+
this.onAction = output();
|
|
4810
4809
|
this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
4811
4810
|
this.handleClick = (event) => {
|
|
4812
|
-
const click = this.
|
|
4811
|
+
const click = this.action();
|
|
4813
4812
|
const result = typeof click === 'function' ? click() : click;
|
|
4814
4813
|
const obs = result instanceof Promise || (result && typeof result.then === 'function')
|
|
4815
4814
|
? from(result)
|
|
@@ -4825,20 +4824,15 @@ class ChrButtonComponent {
|
|
|
4825
4824
|
});
|
|
4826
4825
|
return { event: event, value: obs };
|
|
4827
4826
|
};
|
|
4828
|
-
this.log = (value) => {
|
|
4829
|
-
console.log(value);
|
|
4830
|
-
};
|
|
4831
4827
|
}
|
|
4832
4828
|
ngOnInit() { }
|
|
4833
4829
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ChrButtonComponent, isStandalone: true, selector: "chr-button", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null },
|
|
4830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ChrButtonComponent, isStandalone: true, selector: "chr-button", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction", loading: "loadingChange" }, ngImport: i0, template: "<button [type]=\"type()\" class=\"btn btn-{{color()}}\" [class.btn-outlined]=\"variant() == 'outlined'\"\n [class.btn-ghost]=\"variant() == 'ghost'\" [class.btn-med-pdg]=\"padding() == 'medium'\"\n [class.btn-min-pdg]=\"padding() == 'none'\" [disabled]=\"disabled()\" [style.width.rem]=\"fixed()\"\n (click)=\"handleClick($event)\">\n @if(loading()){\n <div class=\"spinner-wrapper\" [attr.data-size]=\"iconSize()\">\n <div class=\"spinner\"></div>\n </div>\n } @else {\n @let text = display();\n @if(text){\n <span>{{text}}</span>\n } @else {\n <ng-content></ng-content>\n }\n @if(icon()){\n <span [attr.data-size]=\"iconSize()\" class=\"material-symbols\">{{icon()}}</span>\n }\n }\n</button>", styles: [":host{display:block}button{font-size:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button .material-symbols{font-size:inherit}button .material-symbols[data-size=small]{font-size:.85rem}button .material-symbols[data-size=medium]{font-size:1rem}button .material-symbols[data-size=large]{font-size:1.25rem}button .material-symbols[data-size=inherit]{font-size:inherit}button .spinner-wrapper{display:flex;flex:1 1 auto;justify-content:center;align-items:center;height:var(--btn-spinner-size);width:var(--btn-spinner-size)}button .spinner-wrapper[data-size=medium]{--btn-spinner-size: 1rem}button .spinner-wrapper[data-size=large]{--btn-spinner-size: 1.25rem}button .spinner-wrapper[data-size=inherit]{--btn-spinner-size: inherit}button .spinner-wrapper .spinner{aspect-ratio:1 / 1;height:var(--btn-spinner-size);width:var(--btn-spinner-size);border:.125rem solid color-mix(in srgb,var(--btn-bg-color) 60%,var(--background-color) 40%);border-top:.125rem solid var(--btn-bg-contrast-color);border-radius:50%;animation:spin .7s linear infinite}button:hover .spinner{border-color:var(--btn-bg-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:.25rem;border:none;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 1rem;background:var(--btn-bg-color, var(--background-color));color:var(--btn-bg-contrast-color, var(--text-color));transition:background .2s,color .2s}.btn:hover{background:color-mix(in srgb,var(--btn-bg-contrast-color, var(--background-color)) 10%,var(--btn-bg-color, var(--neutral-color)) 90%);color:color-mix(in srgb,var(--btn-bg-color, var(--background-color)) 10%,var(--btn-bg-contrast-color, var(--text-color)) 90%);cursor:pointer}.btn-outlined{background:none;border:1px solid var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-color, var(--text-color))}.btn-outlined:hover{background:var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-contrast-color, var(--text-color))}.btn-ghost{background:none;color:var(--btn-bg-color, var(--text-color))}.btn-ghost:hover{background:color-mix(in srgb,var(--btn-bg-color, var(--text-color)) 10%,transparent 90%)}.btn-min-pdg{padding:.125rem}.btn-med-pdg{padding:.375rem .75rem}.btn-fixed{width:8rem;text-align:center}.btn-primary{--btn-bg-color: var(--primary-color);--btn-bg-contrast-color: var(--primary-contrast-color)}.btn-secondary{--btn-bg-color: var(--secondary-color);--btn-bg-contrast-color: var(--secondary-contrast-color)}.btn-tertiary{--btn-bg-color: var(--tertiary-color);--btn-bg-contrast-color: var(--tertiary-contrast-color)}.btn-warning{--btn-bg-color: var(--warn-color);--btn-bg-contrast-color: var(--warn-contrast-color)}.btn-error{--btn-bg-color: var(--error-color);--btn-bg-contrast-color: var(--error-contrast-color)}.btn-success{--btn-bg-color: var(--success-color);--btn-bg-contrast-color: var(--success-contrast-color)}.btn-disabled,.btn[disabled]{--btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);--btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);cursor:not-allowed;opacity:.6}.btn-link{background:none;border:none;color:var(--link-color);text-decoration:underline;padding:0}.btn-link:hover{color:var(--link-hover-color);cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4835
4831
|
}
|
|
4836
4832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrButtonComponent, decorators: [{
|
|
4837
4833
|
type: Component,
|
|
4838
|
-
args: [{ selector: 'chr-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4839
|
-
|
|
4840
|
-
}, template: "<button [type]=\"type()\" class=\"btn btn-{{color()}}\" [class.btn-outlined]=\"variant() == 'outlined'\"\n [class.btn-ghost]=\"variant() == 'ghost'\" [class.btn-med-pdg]=\"padding() == 'medium'\"\n [class.btn-min-pdg]=\"padding() == 'none'\" [disabled]=\"disabled()\" [style.width.rem]=\"fixed()\"\n (click)=\"handleClick($event)\">\n @if(loading()){\n <div class=\"spinner-wrapper\" [attr.data-size]=\"iconSize()\">\n <div class=\"spinner\"></div>\n </div>\n } @else {\n @let text = display();\n @if(text){\n <span>{{text}}</span>\n } @else {\n <ng-content></ng-content>\n }\n @if(icon()){\n <span [attr.data-size]=\"iconSize()\" class=\"material-symbols\">{{icon()}}</span>\n }\n }\n</button>", styles: [":host{display:block}button{font-size:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button .material-symbols{font-size:inherit}button .material-symbols[data-size=small]{font-size:.85rem}button .material-symbols[data-size=medium]{font-size:1rem}button .material-symbols[data-size=large]{font-size:1.25rem}button .material-symbols[data-size=inherit]{font-size:inherit}button .spinner-wrapper{display:flex;flex:1 1 auto;justify-content:center;align-items:center;height:var(--btn-spinner-size);width:var(--btn-spinner-size)}button .spinner-wrapper[data-size=medium]{--btn-spinner-size: 1rem}button .spinner-wrapper[data-size=large]{--btn-spinner-size: 1.25rem}button .spinner-wrapper[data-size=inherit]{--btn-spinner-size: inherit}button .spinner-wrapper .spinner{aspect-ratio:1 / 1;height:var(--btn-spinner-size);width:var(--btn-spinner-size);border:.125rem solid color-mix(in srgb,var(--btn-bg-color) 60%,var(--background-color) 40%);border-top:.125rem solid var(--btn-bg-contrast-color);border-radius:50%;animation:spin .7s linear infinite}button:hover .spinner{border-color:var(--btn-bg-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:.25rem;border:none;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 1rem;background:var(--btn-bg-color, var(--background-color));color:var(--btn-bg-contrast-color, var(--text-color));transition:background .2s,color .2s}.btn:hover{background:color-mix(in srgb,var(--btn-bg-contrast-color, var(--background-color)) 10%,var(--btn-bg-color, var(--neutral-color)) 90%);color:color-mix(in srgb,var(--btn-bg-color, var(--background-color)) 10%,var(--btn-bg-contrast-color, var(--text-color)) 90%);cursor:pointer}.btn-outlined{background:none;border:1px solid var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-color, var(--text-color))}.btn-outlined:hover{background:var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-contrast-color, var(--text-color))}.btn-ghost{background:none;color:var(--btn-bg-color, var(--text-color))}.btn-ghost:hover{background:color-mix(in srgb,var(--btn-bg-color, var(--text-color)) 10%,transparent 90%)}.btn-min-pdg{padding:.125rem}.btn-med-pdg{padding:.375rem .75rem}.btn-fixed{width:8rem;text-align:center}.btn-primary{--btn-bg-color: var(--primary-color);--btn-bg-contrast-color: var(--primary-contrast-color)}.btn-secondary{--btn-bg-color: var(--secondary-color);--btn-bg-contrast-color: var(--secondary-contrast-color)}.btn-tertiary{--btn-bg-color: var(--tertiary-color);--btn-bg-contrast-color: var(--tertiary-contrast-color)}.btn-warning{--btn-bg-color: var(--warn-color);--btn-bg-contrast-color: var(--warn-contrast-color)}.btn-error{--btn-bg-color: var(--error-color);--btn-bg-contrast-color: var(--error-contrast-color)}.btn-success{--btn-bg-color: var(--success-color);--btn-bg-contrast-color: var(--success-contrast-color)}.btn-disabled,.btn[disabled]{--btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);--btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);cursor:not-allowed;opacity:.6}.btn-link{background:none;border:none;color:var(--link-color);text-decoration:underline;padding:0}.btn-link:hover{color:var(--link-hover-color);cursor:pointer}\n"] }]
|
|
4841
|
-
}], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], click: [{ type: i0.Input, args: [{ isSignal: true, alias: "click", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }] } });
|
|
4834
|
+
args: [{ selector: 'chr-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type()\" class=\"btn btn-{{color()}}\" [class.btn-outlined]=\"variant() == 'outlined'\"\n [class.btn-ghost]=\"variant() == 'ghost'\" [class.btn-med-pdg]=\"padding() == 'medium'\"\n [class.btn-min-pdg]=\"padding() == 'none'\" [disabled]=\"disabled()\" [style.width.rem]=\"fixed()\"\n (click)=\"handleClick($event)\">\n @if(loading()){\n <div class=\"spinner-wrapper\" [attr.data-size]=\"iconSize()\">\n <div class=\"spinner\"></div>\n </div>\n } @else {\n @let text = display();\n @if(text){\n <span>{{text}}</span>\n } @else {\n <ng-content></ng-content>\n }\n @if(icon()){\n <span [attr.data-size]=\"iconSize()\" class=\"material-symbols\">{{icon()}}</span>\n }\n }\n</button>", styles: [":host{display:block}button{font-size:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button .material-symbols{font-size:inherit}button .material-symbols[data-size=small]{font-size:.85rem}button .material-symbols[data-size=medium]{font-size:1rem}button .material-symbols[data-size=large]{font-size:1.25rem}button .material-symbols[data-size=inherit]{font-size:inherit}button .spinner-wrapper{display:flex;flex:1 1 auto;justify-content:center;align-items:center;height:var(--btn-spinner-size);width:var(--btn-spinner-size)}button .spinner-wrapper[data-size=medium]{--btn-spinner-size: 1rem}button .spinner-wrapper[data-size=large]{--btn-spinner-size: 1.25rem}button .spinner-wrapper[data-size=inherit]{--btn-spinner-size: inherit}button .spinner-wrapper .spinner{aspect-ratio:1 / 1;height:var(--btn-spinner-size);width:var(--btn-spinner-size);border:.125rem solid color-mix(in srgb,var(--btn-bg-color) 60%,var(--background-color) 40%);border-top:.125rem solid var(--btn-bg-contrast-color);border-radius:50%;animation:spin .7s linear infinite}button:hover .spinner{border-color:var(--btn-bg-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:.25rem;border:none;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 1rem;background:var(--btn-bg-color, var(--background-color));color:var(--btn-bg-contrast-color, var(--text-color));transition:background .2s,color .2s}.btn:hover{background:color-mix(in srgb,var(--btn-bg-contrast-color, var(--background-color)) 10%,var(--btn-bg-color, var(--neutral-color)) 90%);color:color-mix(in srgb,var(--btn-bg-color, var(--background-color)) 10%,var(--btn-bg-contrast-color, var(--text-color)) 90%);cursor:pointer}.btn-outlined{background:none;border:1px solid var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-color, var(--text-color))}.btn-outlined:hover{background:var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-contrast-color, var(--text-color))}.btn-ghost{background:none;color:var(--btn-bg-color, var(--text-color))}.btn-ghost:hover{background:color-mix(in srgb,var(--btn-bg-color, var(--text-color)) 10%,transparent 90%)}.btn-min-pdg{padding:.125rem}.btn-med-pdg{padding:.375rem .75rem}.btn-fixed{width:8rem;text-align:center}.btn-primary{--btn-bg-color: var(--primary-color);--btn-bg-contrast-color: var(--primary-contrast-color)}.btn-secondary{--btn-bg-color: var(--secondary-color);--btn-bg-contrast-color: var(--secondary-contrast-color)}.btn-tertiary{--btn-bg-color: var(--tertiary-color);--btn-bg-contrast-color: var(--tertiary-contrast-color)}.btn-warning{--btn-bg-color: var(--warn-color);--btn-bg-contrast-color: var(--warn-contrast-color)}.btn-error{--btn-bg-color: var(--error-color);--btn-bg-contrast-color: var(--error-contrast-color)}.btn-success{--btn-bg-color: var(--success-color);--btn-bg-contrast-color: var(--success-contrast-color)}.btn-disabled,.btn[disabled]{--btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);--btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);cursor:not-allowed;opacity:.6}.btn-link{background:none;border:none;color:var(--link-color);text-decoration:underline;padding:0}.btn-link:hover{color:var(--link-hover-color);cursor:pointer}\n"] }]
|
|
4835
|
+
}], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }] } });
|
|
4842
4836
|
|
|
4843
4837
|
class ChrDropdownComponent {
|
|
4844
4838
|
constructor() {
|