@educarehq/solaris-components 0.3.1 → 0.3.2
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.
|
@@ -1655,6 +1655,10 @@ class SolarisNotificationItemComponent {
|
|
|
1655
1655
|
return 'ph-info';
|
|
1656
1656
|
}
|
|
1657
1657
|
}, ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
|
|
1658
|
+
isCompactHeader = computed(() => {
|
|
1659
|
+
const hasDescription = Boolean(this.item().description?.trim().length);
|
|
1660
|
+
return !hasDescription && !this.item().expandable;
|
|
1661
|
+
}, ...(ngDevMode ? [{ debugName: "isCompactHeader" }] : []));
|
|
1658
1662
|
toggleExpanded() {
|
|
1659
1663
|
this.notificationService.toggleExpanded(this.item().id);
|
|
1660
1664
|
}
|
|
@@ -1693,11 +1697,11 @@ class SolarisNotificationItemComponent {
|
|
|
1693
1697
|
return action.label ?? '';
|
|
1694
1698
|
}
|
|
1695
1699
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1696
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\">\r\n <div class=\"sn__leading\">\r\n
|
|
1700
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.1", type: SolarisNotificationItemComponent, isStandalone: true, selector: "solaris-notification-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: ButtonDirective, selector: "button[solaris-button], a[solaris-button]", inputs: ["size", "variant", "color", "textColor", "radius", "loading", "iconOnly", "disabled", "fullWidth", "badgeOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1697
1701
|
}
|
|
1698
1702
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: SolarisNotificationItemComponent, decorators: [{
|
|
1699
1703
|
type: Component,
|
|
1700
|
-
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\">\r\n <div class=\"sn__leading\">\r\n
|
|
1704
|
+
args: [{ selector: 'solaris-notification-item', standalone: true, imports: [NgClass, ButtonDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<article class=\"sn\" [attr.data-kind]=\"item().kind\" [attr.data-mode]=\"mode()\" [attr.data-expanded]=\"item().expanded ? 'true' : 'false'\"\r\n [attr.data-paused]=\"paused() ? 'true' : 'false'\" [attr.aria-live]=\"mode() === 'toast' ? item().ariaLive : null\"\r\n [attr.role]=\"item().ariaLive === 'assertive' ? 'alert' : 'status'\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\r\n <div class=\"sn__header\" [attr.data-align]=\"isCompactHeader() ? 'center' : 'start'\">\r\n <div class=\"sn__leading\">\r\n <span class=\"sn__icon\" aria-hidden=\"true\">\r\n <i class=\"ph\" [ngClass]=\"iconClass()\"></i>\r\n </span>\r\n\r\n <div class=\"sn__heading\">\r\n <strong class=\"sn__title\">{{ item().title }}</strong>\r\n\r\n @if (!item().expanded && item().description) {\r\n <p class=\"sn__description sn__description--clamped\">\r\n {{ item().description }}\r\n </p>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sn__controls\">\r\n @if (item().expandable && item().description) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-expanded]=\"item().expanded\"\r\n [attr.aria-label]=\"item().expanded ? intl.collapse() : intl.expand()\" (click)=\"toggleExpanded()\">\r\n <i class=\"ph\" [ngClass]=\"item().expanded ? 'ph-caret-up' : 'ph-caret-down'\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n\r\n @if (item().closeable) {\r\n <button type=\"button\" class=\"sn__icon-btn\" [attr.aria-label]=\"intl.close()\" (click)=\"close()\">\r\n <i class=\"ph ph-x\" aria-hidden=\"true\"></i>\r\n </button>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (item().expanded && item().description) {\r\n <div class=\"sn__body\">\r\n <p class=\"sn__body-text\">{{ item().description }}</p>\r\n @if (item().actions.length) {\r\n <div class=\"sn__actions\">\r\n @for (action of item().actions; track action.id) {\r\n <button type=\"button\" solaris-button [variant]=\"action.variant ?? 'outline'\" [color]=\"action.color ?? 'surface'\"\r\n [size]=\"action.size ?? 'sm'\" [radius]=\"action.radius ?? 'md'\" [disabled]=\"action.disabled ?? false\"\r\n (click)=\"runAction(action)\">\r\n {{ resolveActionLabel(action) }}\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n @if (mode() === 'toast' && item().duration !== null) {\r\n <div class=\"sn__footer\">\r\n @if (!paused()) {\r\n <p class=\"sn__timer\">\r\n {{ intl.autoClose(secondsLeft()) }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.stopTimer() }}\r\n </button>.\r\n </p>\r\n } @else {\r\n <p class=\"sn__timer\">\r\n {{ intl.paused() }}\r\n <button type=\"button\" class=\"sn__timer-link\" (click)=\"toggleUserPause()\">\r\n {{ intl.resumeTimer() }}\r\n </button>.\r\n </p>\r\n }\r\n </div>\r\n\r\n <div class=\"sn__progress\" aria-hidden=\"true\">\r\n <span [style.width.%]=\"progress()\"></span>\r\n </div>\r\n }\r\n</article>\r\n", styles: [":host{display:block;pointer-events:auto}.sn{--sn-accent: var(--solaris-color-info);overflow:hidden;color:var(--solaris-color-text);border-radius:var(--solaris-radius-lg);background:var(--solaris-color-surface);border:.1rem solid var(--solaris-color-border);width:min(42rem,100vw - var(--solaris-space-4) * 2)}.sn[data-kind=success]{--sn-accent: var(--solaris-color-success)}.sn[data-kind=warning]{--sn-accent: var(--solaris-color-warning)}.sn[data-kind=error]{--sn-accent: var(--solaris-color-error)}.sn[data-kind=info]{--sn-accent: var(--solaris-color-info)}.sn__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--solaris-space-3);padding:var(--solaris-space-4)}.sn__leading{display:flex;align-items:flex-start;gap:var(--solaris-space-3);min-width:0;flex:1}.sn__header[data-align=center],.sn__header[data-align=center] .sn__leading,.sn__header[data-align=center] .sn__controls{align-items:center}.sn[data-expanded=true] .sn__header{padding-bottom:0}.sn__icon{display:grid;flex:0 0 auto;block-size:3.2rem;inline-size:3.2rem;place-items:center;color:var(--sn-accent);border-radius:var(--solaris-radius-full)}.sn__icon .ph{line-height:1;font-size:var(--solaris-fs-24)}.sn__heading{flex:1;min-width:0}.sn__title{display:block;margin:0;font-size:var(--solaris-fs-16);letter-spacing:var(--solaris-ls-0);line-height:var(--solaris-lh-tight);font-family:var(--solaris-font-sans-primary),ui-sans-serif,system-ui}.sn__description,.sn__body-text,.sn__timer{margin:0;font-size:var(--solaris-fs-12);line-height:var(--solaris-lh-relaxed);color:var(--solaris-color-text-muted)}.sn__description--clamped{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:var(--solaris-space-1)}.sn__controls{flex:0 0 auto;align-items:center;display:inline-flex;gap:var(--solaris-space-1)}.sn__icon-btn{border:0;display:grid;place-items:center;inline-size:2.5rem;block-size:2.5rem;background:transparent;cursor:pointer;color:var(--solaris-color-text-muted);border-radius:var(--solaris-radius-full);transition:background-color .14s ease,color .14s ease,transform .14s ease}.sn__icon-btn:hover{color:var(--solaris-color-text);background:var(--solaris-color-surface-2)}.sn__icon-btn:focus-visible{outline-offset:.2rem;outline:.2rem solid var(--solaris-color-primary)}.sn__icon-btn .ph{line-height:1;font-size:var(--solaris-fs-18)}.sn__body{padding:0 var(--solaris-space-4) var(--solaris-space-4) calc(var(--solaris-space-4) + 3.2rem + var(--solaris-space-3))}.sn__actions{display:flex;flex-wrap:wrap;gap:var(--solaris-space-2);margin-top:var(--solaris-space-4)}.sn__footer{background:var(--solaris-color-surface-2);border-top:.1rem solid var(--solaris-color-border);padding:var(--solaris-space-3) var(--solaris-space-4)}.sn__timer-link{margin:0;padding:0;border:0;font:inherit;cursor:pointer;font-weight:700;background:transparent;color:var(--solaris-color-text)}.sn__timer-link:focus-visible{outline-offset:.2rem;border-radius:var(--solaris-radius-xs);outline:.2rem solid var(--solaris-color-primary)}.sn__progress{block-size:.4rem;background:transparent}.sn__progress>span{display:block;block-size:100%;inline-size:100%;background:var(--sn-accent);transition:width .1s linear}\n"] }]
|
|
1701
1705
|
}], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1702
1706
|
|
|
1703
1707
|
class SolarisNotificationCenterComponent {
|