@breadstone/mosaik-elements-angular 0.1.31 → 0.1.32
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/CHANGELOG.md
CHANGED
|
@@ -19370,10 +19370,23 @@ class ToastPortalComponent extends PortalComponent$1 {
|
|
|
19370
19370
|
get actionsTemplate() {
|
|
19371
19371
|
return this._slots.actions();
|
|
19372
19372
|
}
|
|
19373
|
+
// #endregion
|
|
19374
|
+
// #region Methods
|
|
19375
|
+
/**
|
|
19376
|
+
* Handles an action button click.
|
|
19377
|
+
* Executes the action handler and closes the toast.
|
|
19378
|
+
*
|
|
19379
|
+
* @protected
|
|
19380
|
+
* @param handler - The action handler to execute.
|
|
19381
|
+
*/
|
|
19382
|
+
onActionClick(handler) {
|
|
19383
|
+
handler?.();
|
|
19384
|
+
this._component.invoke('close');
|
|
19385
|
+
}
|
|
19373
19386
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastPortalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
19374
19387
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: ToastPortalComponent, isStandalone: true, selector: "mosaik-toast-portal", host: { classAttribute: "toast-portal" }, providers: [
|
|
19375
19388
|
provideToastSlots()
|
|
19376
|
-
], viewQueries: [{ propertyName: "_portal", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "_component", first: true, predicate: ToastComponent, descendants: true, static: true }], exportAs: ["mosaikToastPortal"], usesInheritance: true, ngImport: i0, template: "<mosaik-toast [variant]=\"this.config?.variant ?? 'default'\"\n [appearance]=\"this.config?.appearance ?? 'default'\"\n [closeable]=\"this.config?.closeable ?? false\"\n [enter]=\"this.config?.enter ?? null\"\n [exit]=\"this.config?.exit ?? null\"\n [iconName]=\"(this.config?.iconName | of | async) ?? undefined\">\n <ng-template cdkPortalOutlet></ng-template>\n @if (this.actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"this.actionsTemplate\" />\n } @else if (this.config?.actions) {\n <mosaik-toast-actions>\n @for (action of this.config.actions; track action.label) {\n @if ((action?.visible | of | async) ?? true) {\n <mosaik-button [appearance]=\"action?.kind === 'primary' ? 'solid' : 'plain'\"\n [label]=\"(action?.label | of | async) ?? ''\"\n [disabled]=\"(action?.disabled | of | async) ?? false\"\n [variant]=\"'primary'\"\n (click)=\"action?.handler
|
|
19389
|
+
], viewQueries: [{ propertyName: "_portal", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "_component", first: true, predicate: ToastComponent, descendants: true, static: true }], exportAs: ["mosaikToastPortal"], usesInheritance: true, ngImport: i0, template: "<mosaik-toast [variant]=\"this.config?.variant ?? 'default'\"\n [appearance]=\"this.config?.appearance ?? 'default'\"\n [closeable]=\"this.config?.closeable ?? false\"\n [enter]=\"this.config?.enter ?? null\"\n [exit]=\"this.config?.exit ?? null\"\n [iconName]=\"(this.config?.iconName | of | async) ?? undefined\">\n <ng-template cdkPortalOutlet></ng-template>\n @if (this.actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"this.actionsTemplate\" />\n } @else if (this.config?.actions) {\n <mosaik-toast-actions>\n @for (action of this.config.actions; track action.label) {\n @if ((action?.visible | of | async) ?? true) {\n <mosaik-button [appearance]=\"action?.kind === 'primary' ? 'solid' : 'plain'\"\n [label]=\"(action?.label | of | async) ?? ''\"\n [disabled]=\"(action?.disabled | of | async) ?? false\"\n [variant]=\"'primary'\"\n (click)=\"onActionClick(action?.handler)\" />\n }\n }\n </mosaik-toast-actions>\n }\n</mosaik-toast>", styles: [".cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--joy-scheme-semi-transparent);--backdrop-blur: 4px;--backdrop-transition-duration: var(--mosaik-duration-short);--backdrop-transition-mode: ease;--backdrop-transition-property: opacity, backdrop-filter;background:var(--backdrop-background-color);-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur));opacity:1;transition-duration:var(--backdrop-transition-duration);transition-timing-function:var(--backdrop-transition-mode);transition-property:var(--backdrop-transition-property)}:root[theme=joy] .cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--joy-scheme-semi-transparent);--backdrop-blur: 4px;--backdrop-transition-duration: var(--mosaik-duration-short);--backdrop-transition-mode: ease;--backdrop-transition-property: opacity, backdrop-filter}:root[theme=memphis] .cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--memphis-scheme-semi-transparent);--backdrop-blur: none;--backdrop-transition-duration: .2s;--backdrop-transition-mode: ease;--backdrop-transition-property: opacity}:root[theme=cosmopolitan] .cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--cosmopolitan-scheme-semi-transparent);--backdrop-blur: none;--backdrop-transition-duration: .2s;--backdrop-transition-mode: ease;--backdrop-transition-property: opacity}@media screen and (prefers-reduced-motion:reduce){.cdk-overlay-backdrop.mosaik-cdk-backdrop{transition-duration:.01ms}}.cdk-overlay-pane.mosaik-cdk-overlay-pane{pointer-events:none}.mosaik-cdk-overlay-pane mosaik-dialog::part(backdrop),.mosaik-cdk-overlay-pane mosaik-drawer::part(backdrop),.mosaik-cdk-overlay-pane mosaik-message-box::part(backdrop),.mosaik-cdk-overlay-pane mosaik-sheet::part(backdrop),.mosaik-cdk-overlay-pane mosaik-toast::part(backdrop){opacity:0;pointer-events:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: ToastComponent, selector: "mosaik-toast", inputs: ["header", "content", "icon", "iconSize", "timeout", "position", "showProgress", "themeName", "animationTarget", "enter", "exit", "variant", "appearance", "formatter", "isBusy", "isOpen", "hasBackdrop", "pressEscapeToClose", "clickOutsideToClose", "closeable", "dir", "lang"], outputs: ["opened", "closed", "connected", "disconnected", "changed"] }, { kind: "component", type: ToastActionsComponent, selector: "mosaik-toast-actions", inputs: ["themeName", "dir", "lang"], outputs: ["connected", "disconnected", "changed"] }, { kind: "component", type: ButtonComponent, selector: "mosaik-button", inputs: ["download", "href", "rel", "target", "themeName", "reverse", "orientation", "horizontalContentAlignment", "verticalContentAlignment", "fit", "isBusy", "label", "icon", "iconPosition", "iconSize", "type", "ripple", "variant", "appearance", "size", "value", "disabled", "isFocused", "dir", "lang"], outputs: ["connected", "disconnected", "changed"] }, { kind: "directive", type: IconNameDirective, selector: "\n mosaik-icon[iconName],\n mosaik-banner[iconName],\n mosaik-expander[iconName],\n mosaik-titlebar[iconName],\n mosaik-choice[iconName],\n mosaik-select-item[iconName],\n mosaik-avatar[iconName],\n mosaik-badge[iconName],\n mosaik-chat-marker[iconName],\n mosaik-chat-message-avatar[iconName],\n mosaik-chip[iconName],\n mosaik-sheet[iconName],\n mosaik-message-box[iconName],\n mosaik-ribbon[iconName],\n mosaik-combo-item[iconName],\n mosaik-menu-item[iconName],\n mosaik-segment-item[iconName],\n mosaik-empty-state[iconName],\n mosaik-error-state[iconName],\n mosaik-success-state[iconName],\n mosaik-button[iconName],\n mosaik-compound-button[iconName],\n mosaik-dropdown-button[iconName],\n mosaik-fab[iconName],\n mosaik-fab-group[iconName],\n mosaik-repeat-button[iconName],\n mosaik-split-button[iconName],\n mosaik-toggle-button[iconName],\n mosaik-tab-item[iconName],\n mosaik-tab-strip-item[iconName],\n mosaik-toast[iconName],\n ", inputs: ["iconName"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: OfPipe, name: "of" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
19377
19390
|
}
|
|
19378
19391
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ToastPortalComponent, decorators: [{
|
|
19379
19392
|
type: Component,
|
|
@@ -19390,7 +19403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
|
|
|
19390
19403
|
ToastActionsComponent,
|
|
19391
19404
|
ButtonComponent,
|
|
19392
19405
|
IconNameDirective
|
|
19393
|
-
], template: "<mosaik-toast [variant]=\"this.config?.variant ?? 'default'\"\n [appearance]=\"this.config?.appearance ?? 'default'\"\n [closeable]=\"this.config?.closeable ?? false\"\n [enter]=\"this.config?.enter ?? null\"\n [exit]=\"this.config?.exit ?? null\"\n [iconName]=\"(this.config?.iconName | of | async) ?? undefined\">\n <ng-template cdkPortalOutlet></ng-template>\n @if (this.actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"this.actionsTemplate\" />\n } @else if (this.config?.actions) {\n <mosaik-toast-actions>\n @for (action of this.config.actions; track action.label) {\n @if ((action?.visible | of | async) ?? true) {\n <mosaik-button [appearance]=\"action?.kind === 'primary' ? 'solid' : 'plain'\"\n [label]=\"(action?.label | of | async) ?? ''\"\n [disabled]=\"(action?.disabled | of | async) ?? false\"\n [variant]=\"'primary'\"\n (click)=\"action?.handler
|
|
19406
|
+
], template: "<mosaik-toast [variant]=\"this.config?.variant ?? 'default'\"\n [appearance]=\"this.config?.appearance ?? 'default'\"\n [closeable]=\"this.config?.closeable ?? false\"\n [enter]=\"this.config?.enter ?? null\"\n [exit]=\"this.config?.exit ?? null\"\n [iconName]=\"(this.config?.iconName | of | async) ?? undefined\">\n <ng-template cdkPortalOutlet></ng-template>\n @if (this.actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"this.actionsTemplate\" />\n } @else if (this.config?.actions) {\n <mosaik-toast-actions>\n @for (action of this.config.actions; track action.label) {\n @if ((action?.visible | of | async) ?? true) {\n <mosaik-button [appearance]=\"action?.kind === 'primary' ? 'solid' : 'plain'\"\n [label]=\"(action?.label | of | async) ?? ''\"\n [disabled]=\"(action?.disabled | of | async) ?? false\"\n [variant]=\"'primary'\"\n (click)=\"onActionClick(action?.handler)\" />\n }\n }\n </mosaik-toast-actions>\n }\n</mosaik-toast>", styles: [".cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--joy-scheme-semi-transparent);--backdrop-blur: 4px;--backdrop-transition-duration: var(--mosaik-duration-short);--backdrop-transition-mode: ease;--backdrop-transition-property: opacity, backdrop-filter;background:var(--backdrop-background-color);-webkit-backdrop-filter:blur(var(--backdrop-blur));backdrop-filter:blur(var(--backdrop-blur));opacity:1;transition-duration:var(--backdrop-transition-duration);transition-timing-function:var(--backdrop-transition-mode);transition-property:var(--backdrop-transition-property)}:root[theme=joy] .cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--joy-scheme-semi-transparent);--backdrop-blur: 4px;--backdrop-transition-duration: var(--mosaik-duration-short);--backdrop-transition-mode: ease;--backdrop-transition-property: opacity, backdrop-filter}:root[theme=memphis] .cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--memphis-scheme-semi-transparent);--backdrop-blur: none;--backdrop-transition-duration: .2s;--backdrop-transition-mode: ease;--backdrop-transition-property: opacity}:root[theme=cosmopolitan] .cdk-overlay-backdrop.mosaik-cdk-backdrop{--backdrop-background-color: var(--cosmopolitan-scheme-semi-transparent);--backdrop-blur: none;--backdrop-transition-duration: .2s;--backdrop-transition-mode: ease;--backdrop-transition-property: opacity}@media screen and (prefers-reduced-motion:reduce){.cdk-overlay-backdrop.mosaik-cdk-backdrop{transition-duration:.01ms}}.cdk-overlay-pane.mosaik-cdk-overlay-pane{pointer-events:none}.mosaik-cdk-overlay-pane mosaik-dialog::part(backdrop),.mosaik-cdk-overlay-pane mosaik-drawer::part(backdrop),.mosaik-cdk-overlay-pane mosaik-message-box::part(backdrop),.mosaik-cdk-overlay-pane mosaik-sheet::part(backdrop),.mosaik-cdk-overlay-pane mosaik-toast::part(backdrop){opacity:0;pointer-events:none;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}\n"] }]
|
|
19394
19407
|
}], ctorParameters: () => [], propDecorators: { _portal: [{
|
|
19395
19408
|
type: ViewChild,
|
|
19396
19409
|
args: [CdkPortalOutlet, { static: true }]
|