@db-ux/ngx-core-components 4.7.3 → 4.8.0

package/CHANGELOG.md

@@ -1,10 +1,15 @@
 # @db-ux/ngx-core-components
 
+## 4.8.0
+
+### Minor Changes
+
+- Notification content now supports additional inline elements like `span` without styling collisions. And added the possibility to set the duration as a machine-readable value via the new `timestampDatetime` property - [see commit dae5149](https://github.com/db-ux-design-system/core-web/commit/dae514902f92a74cb95a3a3adab205d560174692)
+
 ## 4.7.3
 
 _version bump_
 
-
 ## 4.7.2
 
 ### Patch Changes

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -5995,6 +5995,7 @@ class DBNotification {
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
         this.timestamp = input(...(ngDevMode ? [undefined, { debugName: "timestamp" }] : /* istanbul ignore next */ []));
         this.showTimestamp = input(...(ngDevMode ? [undefined, { debugName: "showTimestamp" }] : /* istanbul ignore next */ []));
+        this.timestampDatetime = input(...(ngDevMode ? [undefined, { debugName: "timestampDatetime" }] : /* istanbul ignore next */ []));
         this.closeable = input(...(ngDevMode ? [undefined, { debugName: "closeable" }] : /* istanbul ignore next */ []));
         this.closeButtonId = input(...(ngDevMode ? [undefined, { debugName: "closeButtonId" }] : /* istanbul ignore next */ []));
         this.closeButtonText = input(...(ngDevMode ? [undefined, { debugName: "closeButtonText" }] : /* istanbul ignore next */ []));
@@ -6044,7 +6045,7 @@ class DBNotification {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.12", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.12", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, timestampDatetime: { classPropertyName: "timestampDatetime", publicName: "timestampDatetime", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `<div
     #_ref
     [attr.id]="id() ?? propOverrides()?.id"
     [class]="cls('db-notification', className())"
@@ -6062,7 +6063,7 @@ class DBNotification {
   >
     <ng-content select="[image]"> </ng-content>
     @if(stringPropVisible(headline(), showHeadline())){
-    <header>{{headline()}}</header>
+    <header data-area="head">{{headline()}}</header>
     }
     <div data-area="content">
       @if(text()){{{text()}}}@else{
@@ -6070,7 +6071,11 @@ class DBNotification {
       }
     </div>
     @if(stringPropVisible(timestamp(), showTimestamp())){
-    <span>{{timestamp()}}</span>
+    <time
+      data-area="timestamp"
+      [attr.dateTime]="timestampDatetime()"
+      >{{timestamp()}}</time
+    >
     }
     <ng-content select="[link]"> </ng-content>
     @if(getBoolean(closeable(), 'closeable')){
@@ -6106,7 +6111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
   >
     <ng-content select="[image]"> </ng-content>
     @if(stringPropVisible(headline(), showHeadline())){
-    <header>{{headline()}}</header>
+    <header data-area="head">{{headline()}}</header>
     }
     <div data-area="content">
       @if(text()){{{text()}}}@else{
@@ -6114,7 +6119,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
       }
     </div>
     @if(stringPropVisible(timestamp(), showTimestamp())){
-    <span>{{timestamp()}}</span>
+    <time
+      data-area="timestamp"
+      [attr.dateTime]="timestampDatetime()"
+      >{{timestamp()}}</time
+    >
     }
     <ng-content select="[link]"> </ng-content>
     @if(getBoolean(closeable(), 'closeable')){
@@ -6129,7 +6138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.12", ngImpo
     >
     }
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], semantic: [{ type: i0.Input, args: [{ isSignal: true, alias: "semantic", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLive: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLive", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], linkVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "linkVariant", required: false }] }], headline: [{ type: i0.Input, args: [{ isSignal: true, alias: "headline", required: false }] }], showHeadline: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeadline", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], timestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestamp", required: false }] }], showTimestamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTimestamp", required: false }] }], timestampDatetime: [{ type: i0.Input, args: [{ isSignal: true, alias: "timestampDatetime", required: false }] }], closeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeable", required: false }] }], closeButtonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonId", required: false }] }], closeButtonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonText", required: false }] }], close: [{ type: i0.Output, args: ["close"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const NotificationVariantList = ['docked', 'standalone', 'overlay'];
 const NotificationLinkVariantList = ['block', 'inline'];