otimus-library 0.4.85 → 0.4.86

package/fesm2022/otimus-library.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, input, effect, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, inject, PLATFORM_ID, RendererFactory2, signal, ElementRef, ViewContainerRef, computed, viewChild, booleanAttribute } from '@angular/core';
+import { Component, Injectable, Input, Directive, EventEmitter, Output, ContentChildren, forwardRef, ChangeDetectionStrategy, input, effect, ContentChild, ViewChildren, ViewChild, ViewEncapsulation, HostBinding, inject, PLATFORM_ID, RendererFactory2, signal, ElementRef, ViewContainerRef, computed, viewChild, booleanAttribute, output } from '@angular/core';
 import * as i2$1 from '@angular/cdk/menu';
 import { CdkMenuModule } from '@angular/cdk/menu';
 import * as i1 from '@angular/common';
@@ -3978,6 +3978,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Output
             }] } });
 
+const SWIPE_THRESHOLD = 80;
+const CLOSE_ANIMATION_MS = 280;
+const SWIPE_OUT_ANIMATION_MS = 240;
+class OcNotificationComponent {
+    constructor() {
+        this.ocClosable = input(true, ...(ngDevMode ? [{ debugName: "ocClosable" }] : []));
+        this.ocClickable = input(true, ...(ngDevMode ? [{ debugName: "ocClickable" }] : []));
+        this.ocSwipeable = input(true, ...(ngDevMode ? [{ debugName: "ocSwipeable" }] : []));
+        this.ocSwipeDirection = input('left', ...(ngDevMode ? [{ debugName: "ocSwipeDirection" }] : []));
+        this.ocBorderRadius = input(14, ...(ngDevMode ? [{ debugName: "ocBorderRadius" }] : []));
+        this.ocLineClamp = input(2, ...(ngDevMode ? [{ debugName: "ocLineClamp" }] : []));
+        this.ocCloseLabel = input('Dismiss', ...(ngDevMode ? [{ debugName: "ocCloseLabel" }] : []));
+        this.ocClose = output();
+        this.ocClick = output();
+        this.closing = signal(false, ...(ngDevMode ? [{ debugName: "closing" }] : []));
+        this.swipedOut = signal(false, ...(ngDevMode ? [{ debugName: "swipedOut" }] : []));
+        this.drag = signal({ active: false, dx: 0 }, ...(ngDevMode ? [{ debugName: "drag" }] : []));
+        this.card = viewChild.required('card');
+        this.styleVars = computed(() => {
+            const dx = this.drag().dx;
+            return {
+                '--notif-radius': `${this.ocBorderRadius()}px`,
+                '--notif-line-clamp': `${this.ocLineClamp()}`,
+                '--swipe-out-x': this.ocSwipeDirection() === 'right' ? '120%' : '-120%',
+                transform: dx !== 0 ? `translateX(${dx}px)` : null,
+                opacity: dx !== 0 ? Math.max(0.4, 1 - Math.abs(dx) / 280) : null,
+            };
+        }, ...(ngDevMode ? [{ debugName: "styleVars" }] : []));
+        this.startX = 0;
+        this.pointerCaptured = false;
+        this.recentDragDx = 0;
+    }
+    onPointerDown(event) {
+        if (!this.ocSwipeable())
+            return;
+        if (event.button !== 0 && event.pointerType !== 'touch')
+            return;
+        if (event.target.closest('button, a, input'))
+            return;
+        this.startX = event.clientX;
+        this.drag.set({ active: true, dx: 0 });
+        this.card().nativeElement.setPointerCapture(event.pointerId);
+        this.pointerCaptured = true;
+    }
+    onPointerMove(event) {
+        const drag = this.drag();
+        if (!drag.active)
+            return;
+        const rawDx = event.clientX - this.startX;
+        const dx = this.ocSwipeDirection() === 'left' ? Math.min(0, rawDx) : Math.max(0, rawDx);
+        this.drag.set({ active: true, dx });
+    }
+    onPointerUp(event) {
+        const drag = this.drag();
+        if (!drag.active)
+            return;
+        if (this.pointerCaptured) {
+            try {
+                this.card().nativeElement.releasePointerCapture(event.pointerId);
+            }
+            catch {
+                // ignore — pointer may have already been released
+            }
+            this.pointerCaptured = false;
+        }
+        const dx = drag.dx;
+        this.recentDragDx = dx;
+        this.drag.set({ active: false, dx: 0 });
+        if (Math.abs(dx) > SWIPE_THRESHOLD) {
+            this.swipedOut.set(true);
+            setTimeout(() => this.ocClose.emit(), SWIPE_OUT_ANIMATION_MS);
+        }
+    }
+    onClick() {
+        if (!this.ocClickable())
+            return;
+        const wasDragging = Math.abs(this.recentDragDx) > 4;
+        this.recentDragDx = 0;
+        if (wasDragging)
+            return;
+        if (this.drag().dx !== 0)
+            return;
+        this.ocClick.emit();
+    }
+    onCloseClick(event) {
+        event.stopPropagation();
+        this.closing.set(true);
+        setTimeout(() => this.ocClose.emit(), CLOSE_ANIMATION_MS);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: OcNotificationComponent, isStandalone: true, selector: "oc-notification", inputs: { ocClosable: { classPropertyName: "ocClosable", publicName: "ocClosable", isSignal: true, isRequired: false, transformFunction: null }, ocClickable: { classPropertyName: "ocClickable", publicName: "ocClickable", isSignal: true, isRequired: false, transformFunction: null }, ocSwipeable: { classPropertyName: "ocSwipeable", publicName: "ocSwipeable", isSignal: true, isRequired: false, transformFunction: null }, ocSwipeDirection: { classPropertyName: "ocSwipeDirection", publicName: "ocSwipeDirection", isSignal: true, isRequired: false, transformFunction: null }, ocBorderRadius: { classPropertyName: "ocBorderRadius", publicName: "ocBorderRadius", isSignal: true, isRequired: false, transformFunction: null }, ocLineClamp: { classPropertyName: "ocLineClamp", publicName: "ocLineClamp", isSignal: true, isRequired: false, transformFunction: null }, ocCloseLabel: { classPropertyName: "ocCloseLabel", publicName: "ocCloseLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ocClose: "ocClose", ocClick: "ocClick" }, viewQueries: [{ propertyName: "card", first: true, predicate: ["card"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  #card\n  class=\"oc-notif\"\n  [ngClass]=\"{\n    closing: closing(),\n    'swiped-out': swipedOut(),\n    dragging: drag().active,\n    clickable: ocClickable()\n  }\"\n  [ngStyle]=\"styleVars()\"\n  (click)=\"onClick()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n>\n  <div class=\"oc-notif-avatar-slot\">\n    <ng-content select=\"[ocNotificationAvatar]\"></ng-content>\n  </div>\n\n  <div class=\"oc-notif-body\">\n    <div class=\"oc-notif-kind\">\n      <ng-content select=\"[ocNotificationKind]\"></ng-content>\n    </div>\n    <div class=\"oc-notif-row1\">\n      <span class=\"oc-notif-name\">\n        <ng-content select=\"[ocNotificationTitle]\"></ng-content>\n      </span>\n    </div>\n    <div class=\"oc-notif-msg\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"oc-notif-badge-slot\">\n      <ng-content select=\"[ocNotificationBadge]\"></ng-content>\n    </div>\n  </div>\n\n  <div class=\"oc-notif-actions\">\n    <span class=\"oc-notif-meta\">\n      <ng-content select=\"[ocNotificationTime]\"></ng-content>\n    </span>\n    @if (ocClosable()) {\n      <button\n        class=\"oc-notif-close\"\n        type=\"button\"\n        [attr.aria-label]=\"ocCloseLabel()\"\n        [title]=\"ocCloseLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.oc-notif{position:relative;display:flex;align-items:flex-start;gap:10px;background:#f8f9ff;border:1px solid rgba(85,5,162,.25);border-radius:var(--notif-radius, 14px);padding:10px 72px 10px 10px;box-shadow:0 1px 3px #1e08320a,0 1px 1px #1e083205;-webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.2,.9,.2,1.05),box-shadow .2s ease,background .2s ease;touch-action:pan-y}.oc-notif.clickable{cursor:pointer}.oc-notif:hover{transform:translateY(-1px);background:#f8f9ff;box-shadow:0 3px 8px -2px #1e08320f,0 1px 2px #1e083208}.oc-notif.closing{animation:ocnSlideOut .28s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.oc-notif.dragging{transition:none}.oc-notif.swiped-out{animation:ocnSwipeOut .24s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}@keyframes ocnSlideOut{to{opacity:0;transform:translate(60px) scale(.94)}}@keyframes ocnSwipeOut{to{opacity:0;transform:translate(var(--swipe-out-x, -120%)) scale(.9)}}.oc-notif-avatar-slot{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.oc-notif-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.oc-notif-kind{font-size:10px;font-weight:400;color:#8f9596;letter-spacing:.1px;line-height:1.2;margin-bottom:1px}.oc-notif-kind:empty{display:none}.oc-notif-row1{display:flex;align-items:baseline;gap:6px;min-width:0}.oc-notif-name{font-size:12.5px;font-weight:700;color:#1e0832;line-height:1.25;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.oc-notif-meta{font-size:10.5px;font-weight:500;color:#8f9596;white-space:nowrap;line-height:1}.oc-notif-meta:empty{display:none}.oc-notif-msg{font-size:12px;color:#353535;line-height:1.4;margin-top:3px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:var(--notif-line-clamp, 2);line-clamp:var(--notif-line-clamp, 2);-webkit-box-orient:vertical;overflow:hidden}.oc-notif-msg:empty{display:none}.oc-notif-badge-slot:empty{display:none}.oc-notif-actions{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:6px;z-index:2}.oc-notif-close{width:20px;height:20px;border-radius:6px;border:0;background:transparent;color:#8f9596;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease}.oc-notif-close:hover{background:#f7f7f7;color:#353535}.oc-notif-close .material-symbols-outlined{font-size:13px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: OcNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-notification', standalone: true, imports: [CommonModule], template: "<div\n  #card\n  class=\"oc-notif\"\n  [ngClass]=\"{\n    closing: closing(),\n    'swiped-out': swipedOut(),\n    dragging: drag().active,\n    clickable: ocClickable()\n  }\"\n  [ngStyle]=\"styleVars()\"\n  (click)=\"onClick()\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n>\n  <div class=\"oc-notif-avatar-slot\">\n    <ng-content select=\"[ocNotificationAvatar]\"></ng-content>\n  </div>\n\n  <div class=\"oc-notif-body\">\n    <div class=\"oc-notif-kind\">\n      <ng-content select=\"[ocNotificationKind]\"></ng-content>\n    </div>\n    <div class=\"oc-notif-row1\">\n      <span class=\"oc-notif-name\">\n        <ng-content select=\"[ocNotificationTitle]\"></ng-content>\n      </span>\n    </div>\n    <div class=\"oc-notif-msg\">\n      <ng-content></ng-content>\n    </div>\n    <div class=\"oc-notif-badge-slot\">\n      <ng-content select=\"[ocNotificationBadge]\"></ng-content>\n    </div>\n  </div>\n\n  <div class=\"oc-notif-actions\">\n    <span class=\"oc-notif-meta\">\n      <ng-content select=\"[ocNotificationTime]\"></ng-content>\n    </span>\n    @if (ocClosable()) {\n      <button\n        class=\"oc-notif-close\"\n        type=\"button\"\n        [attr.aria-label]=\"ocCloseLabel()\"\n        [title]=\"ocCloseLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <span class=\"material-symbols-outlined\">close</span>\n      </button>\n    }\n  </div>\n</div>\n", styles: [":host{display:block}.oc-notif{position:relative;display:flex;align-items:flex-start;gap:10px;background:#f8f9ff;border:1px solid rgba(85,5,162,.25);border-radius:var(--notif-radius, 14px);padding:10px 72px 10px 10px;box-shadow:0 1px 3px #1e08320a,0 1px 1px #1e083205;-webkit-user-select:none;user-select:none;transition:transform .2s cubic-bezier(.2,.9,.2,1.05),box-shadow .2s ease,background .2s ease;touch-action:pan-y}.oc-notif.clickable{cursor:pointer}.oc-notif:hover{transform:translateY(-1px);background:#f8f9ff;box-shadow:0 3px 8px -2px #1e08320f,0 1px 2px #1e083208}.oc-notif.closing{animation:ocnSlideOut .28s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}.oc-notif.dragging{transition:none}.oc-notif.swiped-out{animation:ocnSwipeOut .24s cubic-bezier(.4,0,1,1) forwards;pointer-events:none}@keyframes ocnSlideOut{to{opacity:0;transform:translate(60px) scale(.94)}}@keyframes ocnSwipeOut{to{opacity:0;transform:translate(var(--swipe-out-x, -120%)) scale(.9)}}.oc-notif-avatar-slot{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.oc-notif-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}.oc-notif-kind{font-size:10px;font-weight:400;color:#8f9596;letter-spacing:.1px;line-height:1.2;margin-bottom:1px}.oc-notif-kind:empty{display:none}.oc-notif-row1{display:flex;align-items:baseline;gap:6px;min-width:0}.oc-notif-name{font-size:12.5px;font-weight:700;color:#1e0832;line-height:1.25;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.oc-notif-meta{font-size:10.5px;font-weight:500;color:#8f9596;white-space:nowrap;line-height:1}.oc-notif-meta:empty{display:none}.oc-notif-msg{font-size:12px;color:#353535;line-height:1.4;margin-top:3px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:var(--notif-line-clamp, 2);line-clamp:var(--notif-line-clamp, 2);-webkit-box-orient:vertical;overflow:hidden}.oc-notif-msg:empty{display:none}.oc-notif-badge-slot:empty{display:none}.oc-notif-actions{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:6px;z-index:2}.oc-notif-close{width:20px;height:20px;border-radius:6px;border:0;background:transparent;color:#8f9596;cursor:pointer;display:grid;place-items:center;transition:background .15s ease,color .15s ease}.oc-notif-close:hover{background:#f7f7f7;color:#353535}.oc-notif-close .material-symbols-outlined{font-size:13px}\n"] }]
+        }], propDecorators: { ocClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClosable", required: false }] }], ocClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocClickable", required: false }] }], ocSwipeable: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSwipeable", required: false }] }], ocSwipeDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocSwipeDirection", required: false }] }], ocBorderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocBorderRadius", required: false }] }], ocLineClamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocLineClamp", required: false }] }], ocCloseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ocCloseLabel", required: false }] }], ocClose: [{ type: i0.Output, args: ["ocClose"] }], ocClick: [{ type: i0.Output, args: ["ocClick"] }], card: [{ type: i0.ViewChild, args: ['card', { isSignal: true }] }] } });
+
 class OcToastComponent {
     constructor(toast) {
         this.toast = toast;
@@ -4602,5 +4699,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcBreadcrumbComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDividerComponent, OcDrawerComponent, OcDrawerFooterComponent, OcDrawerHeaderComponent, OcDropdownDirective, OcDropdownImports, OcDropdownMenuContentComponent, OcDropdownMenuItemComponent, OcDropdownMenuLabelComponent, OcDropdownService, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
+export { OcAccordionComponent, OcAccordionItemComponent, OcAutocompleteComponent, OcBadgeComponent, OcBreadcrumbComponent, OcButtonMenuComponent, OcCalendarComponent, OcCardComponent, OcChatComponent, OcChatErrorComponent, OcChatHeaderComponent, OcChatInputComponent, OcChatMessageComponent, OcChatMessageListComponent, OcChatToolProposalComponent, OcChatTypingIndicatorComponent, OcChatWelcomeComponent, OcCheckboxComponent, OcChipComponent, OcDateSelectComponent, OcDividerComponent, OcDrawerComponent, OcDrawerFooterComponent, OcDrawerHeaderComponent, OcDropdownDirective, OcDropdownImports, OcDropdownMenuContentComponent, OcDropdownMenuItemComponent, OcDropdownMenuLabelComponent, OcDropdownService, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcMenuHorizComponent, OcMenuHorizDirective, OcMessageComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcNotificationComponent, OcOverlayComponent, OcPaginationComponent, OcProfileComponent, OcProgressComponent, OcStepComponent, OcStepperComponent, OcTabComponent, OcTableComponent, OcTabsComponent, OcToastComponent, OcToastService, OcToggleComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService, StyleThemeService };
 //# sourceMappingURL=otimus-library.mjs.map