@alauda/ui 9.1.2-beta.7 → 9.1.2-beta.8
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/alauda-ui.mjs +21 -4
- package/fesm2022/alauda-ui.mjs.map +1 -1
- package/index.d.ts +1 -0
- package/package.json +1 -1
- package/tsconfig.lib.tsbuildinfo +1 -1
package/fesm2022/alauda-ui.mjs
CHANGED
|
@@ -7871,6 +7871,7 @@ class NotificationComponent extends MessageComponent {
|
|
|
7871
7871
|
this.uniqueId = `aui-notification-${uniqueId$1++}`;
|
|
7872
7872
|
this.isHover = false;
|
|
7873
7873
|
this.customClass = '';
|
|
7874
|
+
this.pendingTemplatePortal = null;
|
|
7874
7875
|
}
|
|
7875
7876
|
onMouseEnter() {
|
|
7876
7877
|
if (this.duration <= 0) {
|
|
@@ -7890,6 +7891,11 @@ class NotificationComponent extends MessageComponent {
|
|
|
7890
7891
|
if (this.remains > 0) {
|
|
7891
7892
|
this.countDown();
|
|
7892
7893
|
}
|
|
7894
|
+
// Attach pending template portal after view init
|
|
7895
|
+
if (this.pendingTemplatePortal && this.portalOutlet) {
|
|
7896
|
+
this.attachTemplatePortal(this.pendingTemplatePortal);
|
|
7897
|
+
this.pendingTemplatePortal = null;
|
|
7898
|
+
}
|
|
7893
7899
|
}
|
|
7894
7900
|
setConfig(config) {
|
|
7895
7901
|
super.setConfig(config);
|
|
@@ -7901,7 +7907,13 @@ class NotificationComponent extends MessageComponent {
|
|
|
7901
7907
|
const portal = new TemplatePortal(config.contentRef, null, {
|
|
7902
7908
|
$implicit: config.context,
|
|
7903
7909
|
});
|
|
7904
|
-
|
|
7910
|
+
// If portalOutlet is available, attach immediately, otherwise defer to ngAfterViewInit
|
|
7911
|
+
if (this.portalOutlet) {
|
|
7912
|
+
this.attachTemplatePortal(portal);
|
|
7913
|
+
}
|
|
7914
|
+
else {
|
|
7915
|
+
this.pendingTemplatePortal = portal;
|
|
7916
|
+
}
|
|
7905
7917
|
}
|
|
7906
7918
|
else {
|
|
7907
7919
|
this.attachComponentRef(config.contentRef);
|
|
@@ -7918,6 +7930,9 @@ class NotificationComponent extends MessageComponent {
|
|
|
7918
7930
|
* @param portal Portal to be attached as the modal content.
|
|
7919
7931
|
*/
|
|
7920
7932
|
attachTemplatePortal(portal) {
|
|
7933
|
+
if (!this.portalOutlet) {
|
|
7934
|
+
throw new Error('PortalOutlet is not initialized. Make sure the component view is initialized.');
|
|
7935
|
+
}
|
|
7921
7936
|
return this.portalOutlet.attachTemplatePortal(portal);
|
|
7922
7937
|
}
|
|
7923
7938
|
attachComponentRef(componentRef) {
|
|
@@ -7939,11 +7954,11 @@ class NotificationComponent extends MessageComponent {
|
|
|
7939
7954
|
}, 1000);
|
|
7940
7955
|
}
|
|
7941
7956
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NotificationComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7942
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NotificationComponent, isStandalone: true, selector: "aui-notification", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "modalEl", first: true, predicate: ["modalComponent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n [@inOut]=\"animateState\"\n (@inOut.done)=\"onAnimationEnd($event)\"\n [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n >\n <div [class]=\"bem.element('wrapper')\">\n <div [class]=\"bem.element('icon')\">\n <aui-icon\n [icon]=\"icon\"\n [background]=\"icon.endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n ></aui-icon>\n </div>\n <div [class]=\"bem.element('body')\">\n @if (title) {\n <div\n [class]=\"bem.element('title')\"\n >\n {{ title }}\n </div>\n }\n @if (content) {\n <div\n [class]=\"bem.element('content')\"\n >\n {{ content }}\n </div>\n }\n <ng-template
|
|
7957
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: NotificationComponent, isStandalone: true, selector: "aui-notification", host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "portalOutlet", first: true, predicate: CdkPortalOutlet, descendants: true, static: true }, { propertyName: "modalEl", first: true, predicate: ["modalComponent"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n [@inOut]=\"animateState\"\n (@inOut.done)=\"onAnimationEnd($event)\"\n [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n >\n <div [class]=\"bem.element('wrapper')\">\n <div [class]=\"bem.element('icon')\">\n <aui-icon\n [icon]=\"icon\"\n [background]=\"icon.endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n ></aui-icon>\n </div>\n <div [class]=\"bem.element('body')\">\n @if (title) {\n <div\n [class]=\"bem.element('title')\"\n >\n {{ title }}\n </div>\n }\n @if (content) {\n <div\n [class]=\"bem.element('content')\"\n >\n {{ content }}\n </div>\n }\n <ng-template cdkPortalOutlet></ng-template>\n <ng-template #modalComponent></ng-template>\n </div>\n <div [class]=\"bem.element('remove')\">\n @if (duration <= 0 || isHover) {\n <aui-icon\n [class]=\"bem.element('close')\"\n icon=\"xmark\"\n (click)=\"close()\"\n ></aui-icon>\n }\n @if (duration > 0 && !isHover) {\n <div\n [class]=\"bem.element('duration')\"\n >\n {{ remains > 0 ? remains : 1 }}s\n </div>\n }\n </div>\n </div>\n @if (footerPortal) {\n <div\n [class]=\"bem.element('footer')\"\n >\n <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n </div>\n }\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.cdk-overlay-pane.aui-notification-overlay-pane{z-index:1001}.aui-notification{margin:0 20px 10px 0;width:400px;border-radius:4px;padding:20px 16px 20px 20px;background-color:rgb(var(--aui-color-popper-bg))}:root .aui-notification{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-notification{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-notification{box-shadow:0 4px 16px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-notification{box-shadow:0 4px 16px rgba(var(--aui-color-origin-shadow),.75)}.aui-notification__wrapper{display:flex}.aui-notification__icon{font-size:var(--aui-icon-size-l);line-height:var(--aui-line-height-xl)}.aui-notification--success{border-left:4px solid rgb(var(--aui-color-green))}.aui-notification--success .aui-notification__icon{color:rgb(var(--aui-color-green))}.aui-notification--warning{border-left:4px solid rgb(var(--aui-color-yellow))}.aui-notification--warning .aui-notification__icon{color:rgb(var(--aui-color-yellow))}.aui-notification--error{border-left:4px solid rgb(var(--aui-color-red))}.aui-notification--error .aui-notification__icon{color:rgb(var(--aui-color-red))}.aui-notification--info{border-left:4px solid rgb(var(--aui-color-primary))}.aui-notification--info .aui-notification__icon{color:rgb(var(--aui-color-primary))}.aui-notification__body{flex:1;margin:0 16px 0 8px;overflow:hidden}.aui-notification__title{overflow-wrap:break-word}.aui-notification__title{font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-notification__title:not(:only-child){margin-bottom:6px}.aui-notification__content{margin-top:calc((var(--aui-line-height-xl) - var(--aui-line-height-m)) / 2);padding-right:4px;max-height:140px;overflow:auto;overflow-wrap:break-word}.aui-notification__content{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}.aui-notification__content::-webkit-scrollbar{width:8px;height:4px}.aui-notification__content::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-notification__content::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-notification__content::-webkit-scrollbar-corner{background-color:transparent}.aui-notification__remove{color:rgb(var(--aui-color-secondary-text));font-size:var(--aui-font-size-m)}.aui-notification__close{display:flex;justify-content:center;align-items:center;width:var(--aui-line-height-xl);height:var(--aui-line-height-xl);font-size:var(--aui-icon-size-l);border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-notification__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-notification__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-notification__duration{line-height:var(--aui-line-height-xl);min-width:var(--aui-line-height-xl);text-align:right}.aui-notification__footer{width:360px;margin-top:12px}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], animations: [MessageAnimations.inOut], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7943
7958
|
}
|
|
7944
7959
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: NotificationComponent, decorators: [{
|
|
7945
7960
|
type: Component,
|
|
7946
|
-
args: [{ selector: 'aui-notification', animations: [MessageAnimations.inOut], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, imports: [IconComponent, PortalModule], template: "<div\n [@inOut]=\"animateState\"\n (@inOut.done)=\"onAnimationEnd($event)\"\n [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n >\n <div [class]=\"bem.element('wrapper')\">\n <div [class]=\"bem.element('icon')\">\n <aui-icon\n [icon]=\"icon\"\n [background]=\"icon.endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n ></aui-icon>\n </div>\n <div [class]=\"bem.element('body')\">\n @if (title) {\n <div\n [class]=\"bem.element('title')\"\n >\n {{ title }}\n </div>\n }\n @if (content) {\n <div\n [class]=\"bem.element('content')\"\n >\n {{ content }}\n </div>\n }\n <ng-template
|
|
7961
|
+
args: [{ selector: 'aui-notification', animations: [MessageAnimations.inOut], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, imports: [IconComponent, PortalModule], template: "<div\n [@inOut]=\"animateState\"\n (@inOut.done)=\"onAnimationEnd($event)\"\n [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n >\n <div [class]=\"bem.element('wrapper')\">\n <div [class]=\"bem.element('icon')\">\n <aui-icon\n [icon]=\"icon\"\n [background]=\"icon.endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n ></aui-icon>\n </div>\n <div [class]=\"bem.element('body')\">\n @if (title) {\n <div\n [class]=\"bem.element('title')\"\n >\n {{ title }}\n </div>\n }\n @if (content) {\n <div\n [class]=\"bem.element('content')\"\n >\n {{ content }}\n </div>\n }\n <ng-template cdkPortalOutlet></ng-template>\n <ng-template #modalComponent></ng-template>\n </div>\n <div [class]=\"bem.element('remove')\">\n @if (duration <= 0 || isHover) {\n <aui-icon\n [class]=\"bem.element('close')\"\n icon=\"xmark\"\n (click)=\"close()\"\n ></aui-icon>\n }\n @if (duration > 0 && !isHover) {\n <div\n [class]=\"bem.element('duration')\"\n >\n {{ remains > 0 ? remains : 1 }}s\n </div>\n }\n </div>\n </div>\n @if (footerPortal) {\n <div\n [class]=\"bem.element('footer')\"\n >\n <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n </div>\n }\n</div>\n", styles: [".cdk-overlay-container,.cdk-global-overlay-wrapper{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;display:flex;max-width:100%;max-height:100%;z-index:1000}.cdk-overlay-backdrop{position:absolute;inset:0;pointer-events:auto;-webkit-tap-highlight-color:rgba(0,0,0,0);opacity:0;touch-action:manipulation;z-index:1000;transition:opacity .4s cubic-bezier(.25,.8,.25,1)}@media (prefers-reduced-motion){.cdk-overlay-backdrop{transition-duration:1ms}}.cdk-overlay-backdrop-showing{opacity:1}@media (forced-colors: active){.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:#00000052}.cdk-overlay-transparent-backdrop{transition:visibility 1ms linear,opacity 1ms linear;visibility:hidden;opacity:1}.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,.cdk-high-contrast-active .cdk-overlay-transparent-backdrop{opacity:0;visibility:visible}.cdk-overlay-backdrop-noop-animation{transition:none}.cdk-overlay-connected-position-bounding-box{position:absolute;display:flex;flex-direction:column;min-width:1px;min-height:1px;z-index:1000}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.cdk-overlay-popover{background:none;border:none;padding:0;outline:0;overflow:visible;position:fixed;pointer-events:none;white-space:normal;color:inherit;text-decoration:none;width:100%;height:100%;inset:0 auto auto 0}.cdk-overlay-popover::backdrop{display:none}.cdk-overlay-popover .cdk-overlay-backdrop{position:fixed;z-index:auto}.cdk-overlay-pane.aui-notification-overlay-pane{z-index:1001}.aui-notification{margin:0 20px 10px 0;width:400px;border-radius:4px;padding:20px 16px 20px 20px;background-color:rgb(var(--aui-color-popper-bg))}:root .aui-notification{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}html[aui-theme-mode=light] .aui-notification{box-shadow:0 2px 8px rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-notification{box-shadow:0 4px 16px rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-notification{box-shadow:0 4px 16px rgba(var(--aui-color-origin-shadow),.75)}.aui-notification__wrapper{display:flex}.aui-notification__icon{font-size:var(--aui-icon-size-l);line-height:var(--aui-line-height-xl)}.aui-notification--success{border-left:4px solid rgb(var(--aui-color-green))}.aui-notification--success .aui-notification__icon{color:rgb(var(--aui-color-green))}.aui-notification--warning{border-left:4px solid rgb(var(--aui-color-yellow))}.aui-notification--warning .aui-notification__icon{color:rgb(var(--aui-color-yellow))}.aui-notification--error{border-left:4px solid rgb(var(--aui-color-red))}.aui-notification--error .aui-notification__icon{color:rgb(var(--aui-color-red))}.aui-notification--info{border-left:4px solid rgb(var(--aui-color-primary))}.aui-notification--info .aui-notification__icon{color:rgb(var(--aui-color-primary))}.aui-notification__body{flex:1;margin:0 16px 0 8px;overflow:hidden}.aui-notification__title{overflow-wrap:break-word}.aui-notification__title{font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-main-text))}.aui-notification__title:not(:only-child){margin-bottom:6px}.aui-notification__content{margin-top:calc((var(--aui-line-height-xl) - var(--aui-line-height-m)) / 2);padding-right:4px;max-height:140px;overflow:auto;overflow-wrap:break-word}.aui-notification__content{font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);font-weight:var(--aui-font-weight-normal);color:rgb(var(--aui-color-secondary-text))}.aui-notification__content::-webkit-scrollbar{width:8px;height:4px}.aui-notification__content::-webkit-scrollbar-thumb{border-radius:4px;background-color:rgb(var(--aui-color-n-7))}.aui-notification__content::-webkit-scrollbar-thumb:hover{background-color:rgb(var(--aui-color-n-5))}.aui-notification__content::-webkit-scrollbar-corner{background-color:transparent}.aui-notification__remove{color:rgb(var(--aui-color-secondary-text));font-size:var(--aui-font-size-m)}.aui-notification__close{display:flex;justify-content:center;align-items:center;width:var(--aui-line-height-xl);height:var(--aui-line-height-xl);font-size:var(--aui-icon-size-l);border-radius:var(--aui-border-radius-m);cursor:pointer}.aui-notification__close:hover{color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-p-6))}.aui-notification__close:active{color:rgb(var(--aui-color-p-0));background-color:rgb(var(--aui-color-p-5))}.aui-notification__duration{line-height:var(--aui-line-height-xl);min-width:var(--aui-line-height-xl);text-align:right}.aui-notification__footer{width:360px;margin-top:12px}\n"] }]
|
|
7947
7962
|
}], propDecorators: { portalOutlet: [{
|
|
7948
7963
|
type: ViewChild,
|
|
7949
7964
|
args: [CdkPortalOutlet, { static: true }]
|
|
@@ -9542,7 +9557,9 @@ class TableComponent extends CdkTable {
|
|
|
9542
9557
|
this._placeholderOutlet.viewContainer.createEmbeddedView(footerRow.templateRef);
|
|
9543
9558
|
}
|
|
9544
9559
|
_clearPlaceholder() {
|
|
9545
|
-
this._placeholderOutlet
|
|
9560
|
+
if (this._placeholderOutlet?.viewContainer) {
|
|
9561
|
+
this._placeholderOutlet.viewContainer.clear();
|
|
9562
|
+
}
|
|
9546
9563
|
}
|
|
9547
9564
|
ngOnDestroy() {
|
|
9548
9565
|
super.ngOnDestroy();
|