@m1z23r/ngx-ui 1.1.25 → 1.1.27
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.
|
@@ -513,6 +513,7 @@ const DEFAULT_TOAST_CONFIG = {
|
|
|
513
513
|
position: 'top-right',
|
|
514
514
|
dismissible: true,
|
|
515
515
|
showProgress: true,
|
|
516
|
+
maxVisible: 3,
|
|
516
517
|
};
|
|
517
518
|
const TOAST_DATA = new InjectionToken('TOAST_DATA');
|
|
518
519
|
|
|
@@ -560,11 +561,23 @@ class ToastService {
|
|
|
560
561
|
show(config) {
|
|
561
562
|
const id = `toast-${++this.idCounter}`;
|
|
562
563
|
const position = config.position ?? DEFAULT_TOAST_CONFIG.position;
|
|
564
|
+
const maxVisible = config.maxVisible ?? DEFAULT_TOAST_CONFIG.maxVisible;
|
|
563
565
|
// If position changed, dismiss all existing toasts
|
|
564
566
|
if (this.toasts().length > 0 && position !== this.currentPosition) {
|
|
565
567
|
this.dismissAll();
|
|
566
568
|
}
|
|
567
569
|
this.currentPosition = position;
|
|
570
|
+
// Enforce max visible limit - dismiss oldest toasts to make room
|
|
571
|
+
if (maxVisible > 0) {
|
|
572
|
+
const currentToasts = this.toasts();
|
|
573
|
+
const toRemoveCount = currentToasts.length - maxVisible + 1;
|
|
574
|
+
if (toRemoveCount > 0) {
|
|
575
|
+
const toastsToRemove = currentToasts.slice(0, toRemoveCount);
|
|
576
|
+
for (const toast of toastsToRemove) {
|
|
577
|
+
this.dismiss(toast.id);
|
|
578
|
+
}
|
|
579
|
+
}
|
|
580
|
+
}
|
|
568
581
|
const toastData = {
|
|
569
582
|
id,
|
|
570
583
|
message: config.message,
|
|
@@ -2220,11 +2233,11 @@ class CheckboxComponent {
|
|
|
2220
2233
|
this.checked.set(target.checked);
|
|
2221
2234
|
}
|
|
2222
2235
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2223
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, hasLabel: { classPropertyName: "hasLabel", publicName: "hasLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label\n class=\"ui-checkbox\"\n [class]=\"checkboxClasses()\"\n [class.ui-checkbox--disabled]=\"disabled()\"\n [class.ui-checkbox--checked]=\"checked()\"\n [class.ui-checkbox--indeterminate]=\"indeterminate()\"\n>\n <input\n type=\"checkbox\"\n class=\"ui-checkbox__input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"handleChange($event)\"\n />\n <span class=\"ui-checkbox__box\">\n
|
|
2236
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: CheckboxComponent, isStandalone: true, selector: "ui-checkbox", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, hasLabel: { classPropertyName: "hasLabel", publicName: "hasLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange" }, ngImport: i0, template: "<label\n class=\"ui-checkbox\"\n [class]=\"checkboxClasses()\"\n [class.ui-checkbox--disabled]=\"disabled()\"\n [class.ui-checkbox--checked]=\"checked()\"\n [class.ui-checkbox--indeterminate]=\"indeterminate()\"\n>\n <input\n type=\"checkbox\"\n class=\"ui-checkbox__input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"handleChange($event)\"\n />\n <span class=\"ui-checkbox__box\">\n <svg class=\"ui-checkbox__icon ui-checkbox__icon--check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n <svg class=\"ui-checkbox__icon ui-checkbox__icon--indeterminate\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n </span>\n @if (hasLabel()) {\n <span class=\"ui-checkbox__label\">\n <ng-content />\n </span>\n }\n</label>\n", styles: [":host{display:inline-block}.ui-checkbox{display:inline-flex;align-items:center;gap:var(--ui-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.ui-checkbox--disabled{cursor:not-allowed;opacity:.5}.ui-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none}.ui-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--ui-bg);border:2px solid var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast)}.ui-checkbox--sm .ui-checkbox__box{width:16px;height:16px}.ui-checkbox--md .ui-checkbox__box{width:20px;height:20px}.ui-checkbox--lg .ui-checkbox__box{width:24px;height:24px}.ui-checkbox--sm .ui-checkbox__label{font-size:var(--ui-font-sm)}.ui-checkbox--md .ui-checkbox__label{font-size:var(--ui-font-md)}.ui-checkbox--lg .ui-checkbox__label{font-size:var(--ui-font-lg)}.ui-checkbox:hover:not(.ui-checkbox--disabled) .ui-checkbox__box{border-color:var(--ui-border-hover)}.ui-checkbox__input:focus-visible+.ui-checkbox__box{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-checkbox--checked .ui-checkbox__box,.ui-checkbox--indeterminate .ui-checkbox__box{background-color:var(--ui-primary);border-color:var(--ui-primary)}.ui-checkbox--checked:hover:not(.ui-checkbox--disabled) .ui-checkbox__box,.ui-checkbox--indeterminate:hover:not(.ui-checkbox--disabled) .ui-checkbox__box{background-color:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.ui-checkbox__icon{position:absolute;width:100%;height:100%;color:var(--ui-primary-text);padding:1px;box-sizing:border-box;opacity:0;transition:opacity var(--ui-transition-fast)}.ui-checkbox--checked:not(.ui-checkbox--indeterminate) .ui-checkbox__icon--check{opacity:1}.ui-checkbox--indeterminate .ui-checkbox__icon--indeterminate{opacity:1}.ui-checkbox__label{color:var(--ui-text)}.ui-checkbox--disabled .ui-checkbox__label{color:var(--ui-text-disabled)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2224
2237
|
}
|
|
2225
2238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2226
2239
|
type: Component,
|
|
2227
|
-
args: [{ selector: 'ui-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"ui-checkbox\"\n [class]=\"checkboxClasses()\"\n [class.ui-checkbox--disabled]=\"disabled()\"\n [class.ui-checkbox--checked]=\"checked()\"\n [class.ui-checkbox--indeterminate]=\"indeterminate()\"\n>\n <input\n type=\"checkbox\"\n class=\"ui-checkbox__input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"handleChange($event)\"\n />\n <span class=\"ui-checkbox__box\">\n
|
|
2240
|
+
args: [{ selector: 'ui-checkbox', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n class=\"ui-checkbox\"\n [class]=\"checkboxClasses()\"\n [class.ui-checkbox--disabled]=\"disabled()\"\n [class.ui-checkbox--checked]=\"checked()\"\n [class.ui-checkbox--indeterminate]=\"indeterminate()\"\n>\n <input\n type=\"checkbox\"\n class=\"ui-checkbox__input\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [indeterminate]=\"indeterminate()\"\n (change)=\"handleChange($event)\"\n />\n <span class=\"ui-checkbox__box\">\n <svg class=\"ui-checkbox__icon ui-checkbox__icon--check\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\n <polyline points=\"20 6 9 17 4 12\"></polyline>\n </svg>\n <svg class=\"ui-checkbox__icon ui-checkbox__icon--indeterminate\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\">\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"></line>\n </svg>\n </span>\n @if (hasLabel()) {\n <span class=\"ui-checkbox__label\">\n <ng-content />\n </span>\n }\n</label>\n", styles: [":host{display:inline-block}.ui-checkbox{display:inline-flex;align-items:center;gap:var(--ui-spacing-sm);cursor:pointer;-webkit-user-select:none;user-select:none;position:relative}.ui-checkbox--disabled{cursor:not-allowed;opacity:.5}.ui-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;opacity:0;pointer-events:none}.ui-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--ui-bg);border:2px solid var(--ui-border);border-radius:var(--ui-radius-sm);transition:background-color var(--ui-transition-fast),border-color var(--ui-transition-fast)}.ui-checkbox--sm .ui-checkbox__box{width:16px;height:16px}.ui-checkbox--md .ui-checkbox__box{width:20px;height:20px}.ui-checkbox--lg .ui-checkbox__box{width:24px;height:24px}.ui-checkbox--sm .ui-checkbox__label{font-size:var(--ui-font-sm)}.ui-checkbox--md .ui-checkbox__label{font-size:var(--ui-font-md)}.ui-checkbox--lg .ui-checkbox__label{font-size:var(--ui-font-lg)}.ui-checkbox:hover:not(.ui-checkbox--disabled) .ui-checkbox__box{border-color:var(--ui-border-hover)}.ui-checkbox__input:focus-visible+.ui-checkbox__box{border-color:var(--ui-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-primary) 20%,transparent)}.ui-checkbox--checked .ui-checkbox__box,.ui-checkbox--indeterminate .ui-checkbox__box{background-color:var(--ui-primary);border-color:var(--ui-primary)}.ui-checkbox--checked:hover:not(.ui-checkbox--disabled) .ui-checkbox__box,.ui-checkbox--indeterminate:hover:not(.ui-checkbox--disabled) .ui-checkbox__box{background-color:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}.ui-checkbox__icon{position:absolute;width:100%;height:100%;color:var(--ui-primary-text);padding:1px;box-sizing:border-box;opacity:0;transition:opacity var(--ui-transition-fast)}.ui-checkbox--checked:not(.ui-checkbox--indeterminate) .ui-checkbox__icon--check{opacity:1}.ui-checkbox--indeterminate .ui-checkbox__icon--indeterminate{opacity:1}.ui-checkbox__label{color:var(--ui-text)}.ui-checkbox--disabled .ui-checkbox__label{color:var(--ui-text-disabled)}\n"] }]
|
|
2228
2241
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], hasLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLabel", required: false }] }] } });
|
|
2229
2242
|
|
|
2230
2243
|
class SwitchComponent {
|