quang 19.0.19 → 19.0.22
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/README.md +92 -12
- package/auth/README.md +2 -2
- package/components/autocomplete/README.md +55 -0
- package/components/checkbox/README.md +63 -0
- package/components/date/README.md +54 -0
- package/components/input/README.md +58 -0
- package/components/paginator/README.md +43 -0
- package/components/select/README.md +54 -0
- package/components/shared/option-list/option-list.component.d.ts +4 -1
- package/components/table/README.md +63 -0
- package/components/wysiwyg/README.md +55 -0
- package/fesm2022/quang-components-shared.mjs +27 -0
- package/fesm2022/quang-components-shared.mjs.map +1 -1
- package/fesm2022/quang-components-table.mjs +3 -3
- package/fesm2022/quang-components-table.mjs.map +1 -1
- package/fesm2022/quang-components-wysiwyg.mjs +0 -1
- package/fesm2022/quang-components-wysiwyg.mjs.map +1 -1
- package/fesm2022/quang-overlay-popover.mjs +3 -3
- package/fesm2022/quang-overlay-popover.mjs.map +1 -1
- package/fesm2022/quang-overlay-shared.mjs +3 -3
- package/fesm2022/quang-overlay-shared.mjs.map +1 -1
- package/fesm2022/quang-overlay-tooltip.mjs +3 -3
- package/fesm2022/quang-overlay-tooltip.mjs.map +1 -1
- package/loader/README.md +74 -7
- package/overlay/modal/README.md +97 -0
- package/overlay/popover/README.md +40 -0
- package/overlay/popover/popover.component.d.ts +2 -2
- package/overlay/shared/quang-base-overlay.component.d.ts +2 -2
- package/overlay/toast/README.md +64 -0
- package/overlay/tooltip/README.md +36 -0
- package/overlay/tooltip/tooltip.component.d.ts +2 -2
- package/package.json +9 -9
- package/translation/README.md +23 -10
|
@@ -10,12 +10,12 @@ import * as i1 from '@angular/cdk/platform';
|
|
|
10
10
|
|
|
11
11
|
class QuangBaseOverlayComponent {
|
|
12
12
|
constructor() {
|
|
13
|
-
this.
|
|
13
|
+
this.overlayContent = input.required();
|
|
14
14
|
this.payload = input();
|
|
15
15
|
this.positionPair = signal(null);
|
|
16
16
|
}
|
|
17
17
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangBaseOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangBaseOverlayComponent, isStandalone: true, selector: "quang-base-overlay-component", inputs: {
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangBaseOverlayComponent, isStandalone: true, selector: "quang-base-overlay-component", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: true, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ``, isInline: true }); }
|
|
19
19
|
}
|
|
20
20
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangBaseOverlayComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
@@ -161,7 +161,7 @@ class QuangBaseOverlayDirective {
|
|
|
161
161
|
this.componentOverlayRef.set(createdOverlay.attach(componentPortal));
|
|
162
162
|
const componentOverlayRefInstance = this.componentOverlayRef()?.instance;
|
|
163
163
|
if (componentOverlayRefInstance) {
|
|
164
|
-
componentOverlayRefInstance.
|
|
164
|
+
componentOverlayRefInstance.overlayContent = this.content;
|
|
165
165
|
componentOverlayRefInstance.payload = this.quangOverlayPayload;
|
|
166
166
|
}
|
|
167
167
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-overlay-shared.mjs","sources":["../../../projects/quang/overlay/shared/quang-base-overlay.component.ts","../../../projects/quang/overlay/shared/quang-base-overlay.directive.ts","../../../projects/quang/overlay/shared/CustomViewportRuler.ts","../../../projects/quang/overlay/shared/quang-overlay-shared.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { Component, input, signal } from '@angular/core'\n\n@Component({\n selector: 'quang-base-overlay-component',\n\n template: ``,\n})\nexport abstract class QuangBaseOverlayComponent {\n content = input.required<any>()\n\n payload = input<any>()\n\n positionPair = signal<ConnectionPositionPair | null>(null)\n}\n","import {\n ConnectedOverlayPositionChange,\n ConnectedPosition,\n FlexibleConnectedPositionStrategy,\n Overlay,\n OverlayPositionBuilder,\n OverlayRef,\n} from '@angular/cdk/overlay'\nimport { ComponentPortal, ComponentType } from '@angular/cdk/portal'\nimport {\n ComponentRef,\n DestroyRef,\n Directive,\n ElementRef,\n HostListener,\n OnDestroy,\n computed,\n inject,\n input,\n signal,\n} from '@angular/core'\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from './quang-base-overlay.component'\n\n@Directive()\nexport abstract class QuangBaseOverlayDirective<T extends QuangBaseOverlayComponent> implements OnDestroy {\n targetComponentType = signal<ComponentType<T> | undefined>(undefined)\n\n /**\n * The amount of pixels needed for the popover to automatically disappear. If undefined the popover will not disappear on scroll\n * Default: 100\n * @default 100\n */\n scrollCloseThreshold = input<number | undefined>(100)\n\n showMethod = input<'click' | 'hover'>('click')\n\n content = input.required<any>()\n\n quangOverlayPayload = input<any>()\n\n closeOnClickOutside = true\n\n overlayPosition = input<\n 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'\n >('top')\n\n destroyRef = inject(DestroyRef)\n\n private top = signal<ConnectedPosition>({\n originX: 'center',\n originY: 'top',\n overlayX: 'center',\n overlayY: 'bottom',\n offsetY: -8,\n })\n\n private topLeft = signal<ConnectedPosition>({\n originX: 'start',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -8,\n offsetX: 40,\n })\n\n private topRight = signal<ConnectedPosition>({\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -8,\n offsetX: 40,\n })\n\n private bottom = signal<ConnectedPosition>({\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n offsetY: 8,\n })\n\n private bottomLeft = signal<ConnectedPosition>({\n originX: 'start',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 8,\n offsetX: 40,\n })\n\n private bottomRight = signal<ConnectedPosition>({\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 8,\n offsetX: 40,\n })\n\n private left = signal<ConnectedPosition>({\n originX: 'start',\n originY: 'center',\n overlayX: 'end',\n overlayY: 'center',\n offsetX: -8,\n })\n\n private right = signal<ConnectedPosition>({\n originX: 'end',\n originY: 'center',\n overlayX: 'start',\n overlayY: 'center',\n offsetX: 8,\n })\n\n tooltipPosition = computed((): ConnectedPosition[] => {\n switch (this.overlayPosition()) {\n case 'top':\n return [this.top(), this.bottom()]\n case 'top-left':\n return [this.topLeft(), this.bottomLeft()]\n case 'top-right':\n return [this.topRight(), this.bottomRight()]\n case 'bottom':\n return [this.bottom(), this.top()]\n case 'bottom-left':\n return [this.bottomLeft(), this.topLeft()]\n case 'bottom-right':\n return [this.bottomRight(), this.topRight()]\n case 'left':\n return [this.left(), this.right()]\n case 'right':\n return [this.right(), this.left()]\n default:\n return [this.top(), this.bottom()]\n }\n })\n\n private overlayRef = signal<OverlayRef | null>(null)\n\n private readonly overlay = signal(inject(Overlay))\n\n private readonly overlayPositionBuilder = signal(inject(OverlayPositionBuilder))\n\n private readonly elementRef = signal(inject(ElementRef))\n\n private positionStrategy = signal<FlexibleConnectedPositionStrategy | undefined>(undefined)\n\n private componentOverlayRef = signal<ComponentRef<T> | null>(null)\n\n @HostListener('click') onClick(): void {\n if (this.showMethod() === 'click') this.showHideOverlay()\n }\n\n @HostListener('mouseenter') onHover(): void {\n if (this.showMethod() === 'hover') this.showHideOverlay()\n }\n\n @HostListener('mouseleave') onLeave(): void {\n if (this.showMethod() === 'hover') this.detachOverlay()\n }\n\n attachOverlay(): void {\n const targetComponentType = this.targetComponentType()\n if (!targetComponentType) {\n return\n }\n this.positionStrategy.set(\n this.overlayPositionBuilder().flexibleConnectedTo(this.elementRef()).withPositions(this.tooltipPosition())\n )\n\n this.overlayRef.set(\n this.overlay().create({\n positionStrategy: this.positionStrategy(),\n scrollStrategy: this.scrollCloseThreshold()\n ? this.overlay().scrollStrategies.close({ threshold: this.scrollCloseThreshold() })\n : this.overlay().scrollStrategies.noop(),\n hasBackdrop: this.showMethod() === 'click',\n backdropClass: '',\n })\n )\n\n const componentPortal = new ComponentPortal(targetComponentType)\n const createdOverlay = this.overlayRef()\n if (createdOverlay) {\n this.componentOverlayRef.set(createdOverlay.attach(componentPortal))\n const componentOverlayRefInstance = this.componentOverlayRef()?.instance\n if (componentOverlayRefInstance) {\n componentOverlayRefInstance.content = this.content\n componentOverlayRefInstance.payload = this.quangOverlayPayload\n }\n }\n this.positionStrategy()\n ?.positionChanges.pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe((position) => {\n const positionRef: ConnectedOverlayPositionChange = position as ConnectedOverlayPositionChange\n const componentOverlayRefInstance = this.componentOverlayRef()?.instance\n if (componentOverlayRefInstance) {\n componentOverlayRefInstance.positionPair.set(positionRef.connectionPair)\n }\n })\n this.overlayRef()\n ?.backdropClick()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n if (this.closeOnClickOutside) {\n this.detachOverlay()\n }\n })\n }\n\n detachOverlay(): void {\n this.overlayRef()?.detach()\n this.overlayRef()?.dispose()\n }\n\n showHideOverlay(): void {\n if (this.overlayRef()?.hasAttached()) {\n this.detachOverlay()\n } else {\n this.attachOverlay()\n }\n }\n\n ngOnDestroy(): void {\n this.detachOverlay()\n }\n}\n","import { Platform } from '@angular/cdk/platform'\nimport { DEFAULT_RESIZE_TIME, ViewportScrollPosition } from '@angular/cdk/scrolling'\nimport { DOCUMENT } from '@angular/common'\nimport { Inject, Injectable, NgZone, OnDestroy, Optional } from '@angular/core'\n\nimport { Observable, Subject, auditTime } from 'rxjs'\n\n/* eslint-disable */\n/**\n * Class cloe of [ViewportRuler](https://github.com/angular/components/blob/master/src/cdk/scrolling/viewport-ruler.ts)\n * To fix the wrong reported size of the viewport on mobile devices with hidden url bars\n * Issues references:\n * https://github.com/angular/components/issues/18890\n * https://github.com/angular/components/issues/27739\n *\n * To use this component provide it instead of `ViewportRuler`\n *\n * @example\n * providers: [\n * {\n * provide: ViewportRuler,\n * useClass: CustomViewportRuler\n * }\n * ]\n */\n@Injectable({ providedIn: 'root' })\nexport class CustomViewportRuler implements OnDestroy {\n /** Used to reference correct document/window */\n protected _document: Document\n /** Cached viewport dimensions. */\n private _viewportSize: { width: number; height: number } | null = null\n /** Stream of viewport change events. */\n private readonly _change = new Subject<Event>()\n\n constructor(\n private _platform: Platform,\n ngZone: NgZone,\n @Optional() @Inject(DOCUMENT) document: any\n ) {\n this._document = document\n\n ngZone.runOutsideAngular(() => {\n if (_platform.isBrowser) {\n const window = this._getWindow()\n\n // Note that bind the events ourselves, rather than going through something like RxJS's\n // `fromEvent` so that we can ensure that they're bound outside of the NgZone.\n window.addEventListener('resize', this._changeListener)\n window.addEventListener('orientationchange', this._changeListener)\n }\n\n // Clear the cached position so that the viewport is re-measured next time it is required.\n // We don't need to keep track of the subscription, because it is completed on destroy.\n this.change().subscribe(() => (this._viewportSize = null))\n })\n }\n\n ngOnDestroy() {\n if (this._platform.isBrowser) {\n const window = this._getWindow()\n window.removeEventListener('resize', this._changeListener)\n window.removeEventListener('orientationchange', this._changeListener)\n }\n\n this._change.complete()\n }\n\n /** Returns the viewport's width and height. */\n getViewportSize(): Readonly<{ width: number; height: number }> {\n if (!this._viewportSize) {\n this._updateViewportSize()\n }\n\n const output = { width: this._viewportSize!.width, height: this._viewportSize!.height }\n\n // If we're not on a browser, don't cache the size since it'll be mocked out anyway.\n if (!this._platform.isBrowser) {\n this._viewportSize = null!\n }\n\n return output\n }\n\n /** Gets a DOMRect for the viewport's bounds. */\n getViewportRect() {\n // Use the document element's bounding rect rather than the window scroll properties\n // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll\n // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different\n // conceptual viewports. Under most circumstances these viewports are equivalent, but they\n // can disagree when the page is pinch-zoomed (on devices that support touch).\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4\n // We use the documentElement instead of the body because, by default (without a css reset)\n // browsers typically give the document body an 8px margin, which is not included in\n // getBoundingClientRect().\n const scrollPosition = this.getViewportScrollPosition()\n const { width, height } = this.getViewportSize()\n\n return {\n top: scrollPosition.top,\n left: scrollPosition.left,\n bottom: scrollPosition.top + height,\n right: scrollPosition.left + width,\n height,\n width,\n }\n }\n\n /** Gets the (top, left) scroll position of the viewport. */\n getViewportScrollPosition(): ViewportScrollPosition {\n // While we can get a reference to the fake document\n // during SSR, it doesn't have getBoundingClientRect.\n if (!this._platform.isBrowser) {\n return { top: 0, left: 0 }\n }\n\n // The top-left-corner of the viewport is determined by the scroll position of the document\n // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about\n // whether `document.body` or `document.documentElement` is the scrolled element, so reading\n // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of\n // `document.documentElement` works consistently, where the `top` and `left` values will\n // equal negative the scroll position.\n const document = this._document\n const window = this._getWindow()\n const documentElement = document.documentElement!\n const documentRect = documentElement.getBoundingClientRect()\n\n const top = -documentRect.top || document.body.scrollTop || window.scrollY || documentElement.scrollTop || 0\n\n const left = -documentRect.left || document.body.scrollLeft || window.scrollX || documentElement.scrollLeft || 0\n\n return { top, left }\n }\n\n /**\n * Returns a stream that emits whenever the size of the viewport changes.\n * This stream emits outside of the Angular zone.\n * @param throttleTime Time in milliseconds to throttle the stream.\n */\n change(throttleTime: number = DEFAULT_RESIZE_TIME): Observable<Event> {\n return throttleTime > 0 ? this._change.pipe(auditTime(throttleTime)) : this._change\n }\n\n /** Event listener that will be used to handle the viewport change events. */\n private _changeListener = (event: Event) => {\n this._change.next(event)\n }\n\n /** Use defaultView of injected document if available or fallback to global window reference */\n private _getWindow(): Window {\n return this._document.defaultView || window\n }\n\n /** Updates the cached viewport size. */\n private _updateViewportSize() {\n this._viewportSize = this._platform.isBrowser\n ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }\n : { width: 0, height: 0 }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;MAQsB,yBAAyB,CAAA;AAL/C,IAAA,WAAA,GAAA;AAME,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAO;QAE/B,IAAO,CAAA,OAAA,GAAG,KAAK,EAAO;AAEtB,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAgC,IAAI,CAAC;AAC3D;8GANqB,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAzB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,yBAAyB,+VAFnC,CAAE,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,CAAA;;2FAEQ,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAL9C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,8BAA8B;AAExC,oBAAA,QAAQ,EAAE,CAAE,CAAA;AACb,iBAAA;;;MCmBqB,yBAAyB,CAAA;AAD/C,IAAA,WAAA,GAAA;AAEE,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAA+B,SAAS,CAAC;AAErE;;;;AAIG;AACH,QAAA,IAAA,CAAA,oBAAoB,GAAG,KAAK,CAAqB,GAAG,CAAC;AAErD,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAoB,OAAO,CAAC;AAE9C,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAO;QAE/B,IAAmB,CAAA,mBAAA,GAAG,KAAK,EAAO;QAElC,IAAmB,CAAA,mBAAA,GAAG,IAAI;AAE1B,QAAA,IAAA,CAAA,eAAe,GAAG,KAAK,CAErB,KAAK,CAAC;AAER,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC;QAEvB,IAAG,CAAA,GAAA,GAAG,MAAM,CAAoB;AACtC,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,CAAC,CAAC;AACZ,SAAA,CAAC;QAEM,IAAO,CAAA,OAAA,GAAG,MAAM,CAAoB;AAC1C,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,CAAC,CAAC;AACX,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA,CAAC;QAEM,IAAQ,CAAA,QAAA,GAAG,MAAM,CAAoB;AAC3C,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,CAAC,CAAC;AACX,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA,CAAC;QAEM,IAAM,CAAA,MAAA,GAAG,MAAM,CAAoB;AACzC,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,CAAC;AACX,SAAA,CAAC;QAEM,IAAU,CAAA,UAAA,GAAG,MAAM,CAAoB;AAC7C,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA,CAAC;QAEM,IAAW,CAAA,WAAA,GAAG,MAAM,CAAoB;AAC9C,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,OAAO,EAAE,EAAE;AACZ,SAAA,CAAC;QAEM,IAAI,CAAA,IAAA,GAAG,MAAM,CAAoB;AACvC,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,QAAQ;YAClB,OAAO,EAAE,CAAC,CAAC;AACZ,SAAA,CAAC;QAEM,IAAK,CAAA,KAAA,GAAG,MAAM,CAAoB;AACxC,YAAA,OAAO,EAAE,KAAK;AACd,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,OAAO,EAAE,CAAC;AACX,SAAA,CAAC;AAEF,QAAA,IAAA,CAAA,eAAe,GAAG,QAAQ,CAAC,MAA0B;AACnD,YAAA,QAAQ,IAAI,CAAC,eAAe,EAAE;AAC5B,gBAAA,KAAK,KAAK;oBACR,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;AACpC,gBAAA,KAAK,UAAU;oBACb,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC;AAC5C,gBAAA,KAAK,WAAW;oBACd,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC;AAC9C,gBAAA,KAAK,QAAQ;oBACX,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,CAAC,GAAG,EAAE,CAAC;AACpC,gBAAA,KAAK,aAAa;oBAChB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;AAC5C,gBAAA,KAAK,cAAc;oBACjB,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC9C,gBAAA,KAAK,MAAM;oBACT,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;AACpC,gBAAA,KAAK,OAAO;oBACV,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AACpC,gBAAA;oBACE,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;AAExC,SAAC,CAAC;AAEM,QAAA,IAAA,CAAA,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC;QAEnC,IAAO,CAAA,OAAA,GAAG,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QAEjC,IAAsB,CAAA,sBAAA,GAAG,MAAM,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC;QAE/D,IAAU,CAAA,UAAA,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AAEhD,QAAA,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAgD,SAAS,CAAC;AAEnF,QAAA,IAAA,CAAA,mBAAmB,GAAG,MAAM,CAAyB,IAAI,CAAC;AA+EnE;IA7EwB,OAAO,GAAA;AAC5B,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,OAAO;YAAE,IAAI,CAAC,eAAe,EAAE;;IAG/B,OAAO,GAAA;AACjC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,OAAO;YAAE,IAAI,CAAC,eAAe,EAAE;;IAG/B,OAAO,GAAA;AACjC,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE,KAAK,OAAO;YAAE,IAAI,CAAC,aAAa,EAAE;;IAGzD,aAAa,GAAA;AACX,QAAA,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,EAAE;QACtD,IAAI,CAAC,mBAAmB,EAAE;YACxB;;QAEF,IAAI,CAAC,gBAAgB,CAAC,GAAG,CACvB,IAAI,CAAC,sBAAsB,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAC3G;QAED,IAAI,CAAC,UAAU,CAAC,GAAG,CACjB,IAAI,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC;AACpB,YAAA,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EAAE;AACzC,YAAA,cAAc,EAAE,IAAI,CAAC,oBAAoB;AACvC,kBAAE,IAAI,CAAC,OAAO,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,oBAAoB,EAAE,EAAE;kBAChF,IAAI,CAAC,OAAO,EAAE,CAAC,gBAAgB,CAAC,IAAI,EAAE;AAC1C,YAAA,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE,KAAK,OAAO;AAC1C,YAAA,aAAa,EAAE,EAAE;AAClB,SAAA,CAAC,CACH;AAED,QAAA,MAAM,eAAe,GAAG,IAAI,eAAe,CAAC,mBAAmB,CAAC;AAChE,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE;QACxC,IAAI,cAAc,EAAE;AAClB,YAAA,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YACpE,MAAM,2BAA2B,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,QAAQ;YACxE,IAAI,2BAA2B,EAAE;AAC/B,gBAAA,2BAA2B,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;AAClD,gBAAA,2BAA2B,CAAC,OAAO,GAAG,IAAI,CAAC,mBAAmB;;;QAGlE,IAAI,CAAC,gBAAgB;cACjB,eAAe,CAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AACzD,aAAA,SAAS,CAAC,CAAC,QAAQ,KAAI;YACtB,MAAM,WAAW,GAAmC,QAA0C;YAC9F,MAAM,2BAA2B,GAAG,IAAI,CAAC,mBAAmB,EAAE,EAAE,QAAQ;YACxE,IAAI,2BAA2B,EAAE;gBAC/B,2BAA2B,CAAC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,cAAc,CAAC;;AAE5E,SAAC,CAAC;QACJ,IAAI,CAAC,UAAU;AACb,cAAE,aAAa;AACd,aAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;aACxC,SAAS,CAAC,MAAK;AACd,YAAA,IAAI,IAAI,CAAC,mBAAmB,EAAE;gBAC5B,IAAI,CAAC,aAAa,EAAE;;AAExB,SAAC,CAAC;;IAGN,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE;AAC3B,QAAA,IAAI,CAAC,UAAU,EAAE,EAAE,OAAO,EAAE;;IAG9B,eAAe,GAAA;QACb,IAAI,IAAI,CAAC,UAAU,EAAE,EAAE,WAAW,EAAE,EAAE;YACpC,IAAI,CAAC,aAAa,EAAE;;aACf;YACL,IAAI,CAAC,aAAa,EAAE;;;IAIxB,WAAW,GAAA;QACT,IAAI,CAAC,aAAa,EAAE;;8GA1MF,yBAAyB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,MAAA,EAAA,EAAA,oBAAA,EAAA,EAAA,iBAAA,EAAA,sBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,mBAAA,EAAA,EAAA,iBAAA,EAAA,qBAAA,EAAA,UAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,OAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,EAAA,WAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAD9C;8BAgIwB,OAAO,EAAA,CAAA;sBAA7B,YAAY;uBAAC,OAAO;gBAIO,OAAO,EAAA,CAAA;sBAAlC,YAAY;uBAAC,YAAY;gBAIE,OAAO,EAAA,CAAA;sBAAlC,YAAY;uBAAC,YAAY;;;AC1J5B;AACA;;;;;;;;;;;;;;;;AAgBG;MAEU,mBAAmB,CAAA;AAQ9B,IAAA,WAAA,CACU,SAAmB,EAC3B,MAAc,EACgB,QAAa,EAAA;QAFnC,IAAS,CAAA,SAAA,GAAT,SAAS;;QALX,IAAa,CAAA,aAAA,GAA6C,IAAI;;AAErD,QAAA,IAAA,CAAA,OAAO,GAAG,IAAI,OAAO,EAAS;;AA+GvC,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAY,KAAI;AACzC,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;AAC1B,SAAC;AA1GC,QAAA,IAAI,CAAC,SAAS,GAAG,QAAQ;AAEzB,QAAA,MAAM,CAAC,iBAAiB,CAAC,MAAK;AAC5B,YAAA,IAAI,SAAS,CAAC,SAAS,EAAE;AACvB,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;;;gBAIhC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC;gBACvD,MAAM,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,IAAI,CAAC,eAAe,CAAC;;;;AAKpE,YAAA,IAAI,CAAC,MAAM,EAAE,CAAC,SAAS,CAAC,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC;AAC5D,SAAC,CAAC;;IAGJ,WAAW,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;AAC5B,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;YAChC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,eAAe,CAAC;YAC1D,MAAM,CAAC,mBAAmB,CAAC,mBAAmB,EAAE,IAAI,CAAC,eAAe,CAAC;;AAGvE,QAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE;;;IAIzB,eAAe,GAAA;AACb,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE;YACvB,IAAI,CAAC,mBAAmB,EAAE;;AAG5B,QAAA,MAAM,MAAM,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,aAAc,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,aAAc,CAAC,MAAM,EAAE;;AAGvF,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;AAC7B,YAAA,IAAI,CAAC,aAAa,GAAG,IAAK;;AAG5B,QAAA,OAAO,MAAM;;;IAIf,eAAe,GAAA;;;;;;;;;;AAUb,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,yBAAyB,EAAE;QACvD,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,eAAe,EAAE;QAEhD,OAAO;YACL,GAAG,EAAE,cAAc,CAAC,GAAG;YACvB,IAAI,EAAE,cAAc,CAAC,IAAI;AACzB,YAAA,MAAM,EAAE,cAAc,CAAC,GAAG,GAAG,MAAM;AACnC,YAAA,KAAK,EAAE,cAAc,CAAC,IAAI,GAAG,KAAK;YAClC,MAAM;YACN,KAAK;SACN;;;IAIH,yBAAyB,GAAA;;;AAGvB,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE;YAC7B,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE;;;;;;;;AAS5B,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS;AAC/B,QAAA,MAAM,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE;AAChC,QAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,eAAgB;AACjD,QAAA,MAAM,YAAY,GAAG,eAAe,CAAC,qBAAqB,EAAE;QAE5D,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC,SAAS,IAAI,MAAM,CAAC,OAAO,IAAI,eAAe,CAAC,SAAS,IAAI,CAAC;QAE5G,MAAM,IAAI,GAAG,CAAC,YAAY,CAAC,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,UAAU,IAAI,MAAM,CAAC,OAAO,IAAI,eAAe,CAAC,UAAU,IAAI,CAAC;AAEhH,QAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE;;AAGtB;;;;AAIG;IACH,MAAM,CAAC,eAAuB,mBAAmB,EAAA;QAC/C,OAAO,YAAY,GAAG,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO;;;IAS7E,UAAU,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,WAAW,IAAI,MAAM;;;IAIrC,mBAAmB,GAAA;AACzB,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC;AAClC,cAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,CAAC,eAAe,CAAC,YAAY;cAC5F,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;;AAlIlB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,gEAWR,QAAQ,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAXnB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,cADN,MAAM,EAAA,CAAA,CAAA;;2FACnB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAD/B,UAAU;mBAAC,EAAE,UAAU,EAAE,MAAM,EAAE;;0BAY7B;;0BAAY,MAAM;2BAAC,QAAQ;;;ACrChC;;AAEG;;;;"}
|
|
1
|
+
{"version":3,"file":"quang-overlay-shared.mjs","sources":["../../../projects/quang/overlay/shared/quang-base-overlay.component.ts","../../../projects/quang/overlay/shared/quang-base-overlay.directive.ts","../../../projects/quang/overlay/shared/CustomViewportRuler.ts","../../../projects/quang/overlay/shared/quang-overlay-shared.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { Component, input, signal } from '@angular/core'\n\n@Component({\n selector: 'quang-base-overlay-component',\n\n template: ``,\n})\nexport abstract class QuangBaseOverlayComponent {\n overlayContent = input.required<any>()\n\n payload = input<any>()\n\n positionPair = signal<ConnectionPositionPair | null>(null)\n}\n","import {\n ConnectedOverlayPositionChange,\n ConnectedPosition,\n FlexibleConnectedPositionStrategy,\n Overlay,\n OverlayPositionBuilder,\n OverlayRef,\n} from '@angular/cdk/overlay'\nimport { ComponentPortal, ComponentType } from '@angular/cdk/portal'\nimport {\n ComponentRef,\n DestroyRef,\n Directive,\n ElementRef,\n HostListener,\n OnDestroy,\n computed,\n inject,\n input,\n signal,\n} from '@angular/core'\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from './quang-base-overlay.component'\n\n@Directive()\nexport abstract class QuangBaseOverlayDirective<T extends QuangBaseOverlayComponent> implements OnDestroy {\n targetComponentType = signal<ComponentType<T> | undefined>(undefined)\n\n /**\n * The amount of pixels needed for the popover to automatically disappear. If undefined the popover will not disappear on scroll\n * Default: 100\n * @default 100\n */\n scrollCloseThreshold = input<number | undefined>(100)\n\n showMethod = input<'click' | 'hover'>('click')\n\n content = input.required<any>()\n\n quangOverlayPayload = input<any>()\n\n closeOnClickOutside = true\n\n overlayPosition = input<\n 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'\n >('top')\n\n destroyRef = inject(DestroyRef)\n\n private top = signal<ConnectedPosition>({\n originX: 'center',\n originY: 'top',\n overlayX: 'center',\n overlayY: 'bottom',\n offsetY: -8,\n })\n\n private topLeft = signal<ConnectedPosition>({\n originX: 'start',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -8,\n offsetX: 40,\n })\n\n private topRight = signal<ConnectedPosition>({\n originX: 'end',\n originY: 'top',\n overlayX: 'end',\n overlayY: 'bottom',\n offsetY: -8,\n offsetX: 40,\n })\n\n private bottom = signal<ConnectedPosition>({\n originX: 'center',\n originY: 'bottom',\n overlayX: 'center',\n overlayY: 'top',\n offsetY: 8,\n })\n\n private bottomLeft = signal<ConnectedPosition>({\n originX: 'start',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 8,\n offsetX: 40,\n })\n\n private bottomRight = signal<ConnectedPosition>({\n originX: 'end',\n originY: 'bottom',\n overlayX: 'end',\n overlayY: 'top',\n offsetY: 8,\n offsetX: 40,\n })\n\n private left = signal<ConnectedPosition>({\n originX: 'start',\n originY: 'center',\n overlayX: 'end',\n overlayY: 'center',\n offsetX: -8,\n })\n\n private right = signal<ConnectedPosition>({\n originX: 'end',\n originY: 'center',\n overlayX: 'start',\n overlayY: 'center',\n offsetX: 8,\n })\n\n tooltipPosition = computed((): ConnectedPosition[] => {\n switch (this.overlayPosition()) {\n case 'top':\n return [this.top(), this.bottom()]\n case 'top-left':\n return [this.topLeft(), this.bottomLeft()]\n case 'top-right':\n return [this.topRight(), this.bottomRight()]\n case 'bottom':\n return [this.bottom(), this.top()]\n case 'bottom-left':\n return [this.bottomLeft(), this.topLeft()]\n case 'bottom-right':\n return [this.bottomRight(), this.topRight()]\n case 'left':\n return [this.left(), this.right()]\n case 'right':\n return [this.right(), this.left()]\n default:\n return [this.top(), this.bottom()]\n }\n })\n\n private overlayRef = signal<OverlayRef | null>(null)\n\n private readonly overlay = signal(inject(Overlay))\n\n private readonly overlayPositionBuilder = signal(inject(OverlayPositionBuilder))\n\n private readonly elementRef = signal(inject(ElementRef))\n\n private positionStrategy = signal<FlexibleConnectedPositionStrategy | undefined>(undefined)\n\n private componentOverlayRef = signal<ComponentRef<T> | null>(null)\n\n @HostListener('click') onClick(): void {\n if (this.showMethod() === 'click') this.showHideOverlay()\n }\n\n @HostListener('mouseenter') onHover(): void {\n if (this.showMethod() === 'hover') this.showHideOverlay()\n }\n\n @HostListener('mouseleave') onLeave(): void {\n if (this.showMethod() === 'hover') this.detachOverlay()\n }\n\n attachOverlay(): void {\n const targetComponentType = this.targetComponentType()\n if (!targetComponentType) {\n return\n }\n this.positionStrategy.set(\n this.overlayPositionBuilder().flexibleConnectedTo(this.elementRef()).withPositions(this.tooltipPosition())\n )\n\n this.overlayRef.set(\n this.overlay().create({\n positionStrategy: this.positionStrategy(),\n scrollStrategy: this.scrollCloseThreshold()\n ? this.overlay().scrollStrategies.close({ threshold: this.scrollCloseThreshold() })\n : this.overlay().scrollStrategies.noop(),\n hasBackdrop: this.showMethod() === 'click',\n backdropClass: '',\n })\n )\n\n const componentPortal = new ComponentPortal(targetComponentType)\n const createdOverlay = this.overlayRef()\n if (createdOverlay) {\n this.componentOverlayRef.set(createdOverlay.attach(componentPortal))\n const componentOverlayRefInstance = this.componentOverlayRef()?.instance\n if (componentOverlayRefInstance) {\n componentOverlayRefInstance.overlayContent = this.content\n componentOverlayRefInstance.payload = this.quangOverlayPayload\n }\n }\n this.positionStrategy()\n ?.positionChanges.pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe((position) => {\n const positionRef: ConnectedOverlayPositionChange = position as ConnectedOverlayPositionChange\n const componentOverlayRefInstance = this.componentOverlayRef()?.instance\n if (componentOverlayRefInstance) {\n componentOverlayRefInstance.positionPair.set(positionRef.connectionPair)\n }\n })\n this.overlayRef()\n ?.backdropClick()\n .pipe(takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n if (this.closeOnClickOutside) {\n this.detachOverlay()\n }\n })\n }\n\n detachOverlay(): void {\n this.overlayRef()?.detach()\n this.overlayRef()?.dispose()\n }\n\n showHideOverlay(): void {\n if (this.overlayRef()?.hasAttached()) {\n this.detachOverlay()\n } else {\n this.attachOverlay()\n }\n }\n\n ngOnDestroy(): void {\n this.detachOverlay()\n }\n}\n","import { Platform } from '@angular/cdk/platform'\nimport { DEFAULT_RESIZE_TIME, ViewportScrollPosition } from '@angular/cdk/scrolling'\nimport { DOCUMENT } from '@angular/common'\nimport { Inject, Injectable, NgZone, OnDestroy, Optional } from '@angular/core'\n\nimport { Observable, Subject, auditTime } from 'rxjs'\n\n/* eslint-disable */\n/**\n * Class cloe of [ViewportRuler](https://github.com/angular/components/blob/master/src/cdk/scrolling/viewport-ruler.ts)\n * To fix the wrong reported size of the viewport on mobile devices with hidden url bars\n * Issues references:\n * https://github.com/angular/components/issues/18890\n * https://github.com/angular/components/issues/27739\n *\n * To use this component provide it instead of `ViewportRuler`\n *\n * @example\n * providers: [\n * {\n * provide: ViewportRuler,\n * useClass: CustomViewportRuler\n * }\n * ]\n */\n@Injectable({ providedIn: 'root' })\nexport class CustomViewportRuler implements OnDestroy {\n /** Used to reference correct document/window */\n protected _document: Document\n /** Cached viewport dimensions. */\n private _viewportSize: { width: number; height: number } | null = null\n /** Stream of viewport change events. */\n private readonly _change = new Subject<Event>()\n\n constructor(\n private _platform: Platform,\n ngZone: NgZone,\n @Optional() @Inject(DOCUMENT) document: any\n ) {\n this._document = document\n\n ngZone.runOutsideAngular(() => {\n if (_platform.isBrowser) {\n const window = this._getWindow()\n\n // Note that bind the events ourselves, rather than going through something like RxJS's\n // `fromEvent` so that we can ensure that they're bound outside of the NgZone.\n window.addEventListener('resize', this._changeListener)\n window.addEventListener('orientationchange', this._changeListener)\n }\n\n // Clear the cached position so that the viewport is re-measured next time it is required.\n // We don't need to keep track of the subscription, because it is completed on destroy.\n this.change().subscribe(() => (this._viewportSize = null))\n })\n }\n\n ngOnDestroy() {\n if (this._platform.isBrowser) {\n const window = this._getWindow()\n window.removeEventListener('resize', this._changeListener)\n window.removeEventListener('orientationchange', this._changeListener)\n }\n\n this._change.complete()\n }\n\n /** Returns the viewport's width and height. */\n getViewportSize(): Readonly<{ width: number; height: number }> {\n if (!this._viewportSize) {\n this._updateViewportSize()\n }\n\n const output = { width: this._viewportSize!.width, height: this._viewportSize!.height }\n\n // If we're not on a browser, don't cache the size since it'll be mocked out anyway.\n if (!this._platform.isBrowser) {\n this._viewportSize = null!\n }\n\n return output\n }\n\n /** Gets a DOMRect for the viewport's bounds. */\n getViewportRect() {\n // Use the document element's bounding rect rather than the window scroll properties\n // (e.g. pageYOffset, scrollY) due to in issue in Chrome and IE where window scroll\n // properties and client coordinates (boundingClientRect, clientX/Y, etc.) are in different\n // conceptual viewports. Under most circumstances these viewports are equivalent, but they\n // can disagree when the page is pinch-zoomed (on devices that support touch).\n // See https://bugs.chromium.org/p/chromium/issues/detail?id=489206#c4\n // We use the documentElement instead of the body because, by default (without a css reset)\n // browsers typically give the document body an 8px margin, which is not included in\n // getBoundingClientRect().\n const scrollPosition = this.getViewportScrollPosition()\n const { width, height } = this.getViewportSize()\n\n return {\n top: scrollPosition.top,\n left: scrollPosition.left,\n bottom: scrollPosition.top + height,\n right: scrollPosition.left + width,\n height,\n width,\n }\n }\n\n /** Gets the (top, left) scroll position of the viewport. */\n getViewportScrollPosition(): ViewportScrollPosition {\n // While we can get a reference to the fake document\n // during SSR, it doesn't have getBoundingClientRect.\n if (!this._platform.isBrowser) {\n return { top: 0, left: 0 }\n }\n\n // The top-left-corner of the viewport is determined by the scroll position of the document\n // body, normally just (scrollLeft, scrollTop). However, Chrome and Firefox disagree about\n // whether `document.body` or `document.documentElement` is the scrolled element, so reading\n // `scrollTop` and `scrollLeft` is inconsistent. However, using the bounding rect of\n // `document.documentElement` works consistently, where the `top` and `left` values will\n // equal negative the scroll position.\n const document = this._document\n const window = this._getWindow()\n const documentElement = document.documentElement!\n const documentRect = documentElement.getBoundingClientRect()\n\n const top = -documentRect.top || document.body.scrollTop || window.scrollY || documentElement.scrollTop || 0\n\n const left = -documentRect.left || document.body.scrollLeft || window.scrollX || documentElement.scrollLeft || 0\n\n return { top, left }\n }\n\n /**\n * Returns a stream that emits whenever the size of the viewport changes.\n * This stream emits outside of the Angular zone.\n * @param throttleTime Time in milliseconds to throttle the stream.\n */\n change(throttleTime: number = DEFAULT_RESIZE_TIME): Observable<Event> {\n return throttleTime > 0 ? this._change.pipe(auditTime(throttleTime)) : this._change\n }\n\n /** Event listener that will be used to handle the viewport change events. */\n private _changeListener = (event: Event) => {\n this._change.next(event)\n }\n\n /** Use defaultView of injected document if available or fallback to global window reference */\n private _getWindow(): Window {\n return this._document.defaultView || window\n }\n\n /** Updates the cached viewport size. */\n private _updateViewportSize() {\n this._viewportSize = this._platform.isBrowser\n ? { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }\n : { width: 0, height: 0 }\n }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -6,13 +6,13 @@ import { OverlayModule } from '@angular/cdk/overlay';
|
|
|
6
6
|
|
|
7
7
|
class QuangTooltipComponent {
|
|
8
8
|
constructor() {
|
|
9
|
-
this.
|
|
9
|
+
this.overlayContent = input.required();
|
|
10
10
|
this.quangTooltipPosition = input('top');
|
|
11
11
|
this.positionPair = signal(null);
|
|
12
12
|
this.payload = input();
|
|
13
13
|
}
|
|
14
14
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: QuangTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangTooltipComponent, isStandalone: true, selector: "quang-tooltip", inputs: {
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.9", type: QuangTooltipComponent, isStandalone: true, selector: "quang-tooltip", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: true, transformFunction: null }, quangTooltipPosition: { classPropertyName: "quangTooltipPosition", publicName: "quangTooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n @tooltip\n class=\"quang-tooltip\"\n>\n {{ overlayContent() }}\n</div>\n", styles: [".quang-tooltip{background-color:var(--bs-body-color);color:var(--bs-body-bg);padding:.5rem;border-radius:5px;font-size:.75rem;opacity:0}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }], animations: [
|
|
16
16
|
trigger('tooltip', [
|
|
17
17
|
state('*', style({ opacity: 1 })),
|
|
18
18
|
transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
|
|
@@ -28,7 +28,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
|
|
|
28
28
|
transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),
|
|
29
29
|
transition(':leave', [style({ opacity: 1 }), animate(300, style({ opacity: 0 }))]),
|
|
30
30
|
]),
|
|
31
|
-
], template: "<div\n @tooltip\n class=\"quang-tooltip\"\n>\n {{
|
|
31
|
+
], template: "<div\n @tooltip\n class=\"quang-tooltip\"\n>\n {{ overlayContent() }}\n</div>\n", styles: [".quang-tooltip{background-color:var(--bs-body-color);color:var(--bs-body-bg);padding:.5rem;border-radius:5px;font-size:.75rem;opacity:0}\n"] }]
|
|
32
32
|
}] });
|
|
33
33
|
|
|
34
34
|
class QuangTooltipDirective extends QuangBaseOverlayDirective {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-overlay-tooltip.mjs","sources":["../../../projects/quang/overlay/tooltip/tooltip.component.ts","../../../projects/quang/overlay/tooltip/tooltip.component.html","../../../projects/quang/overlay/tooltip/tooltip.directive.ts","../../../projects/quang/overlay/tooltip/quang-overlay-tooltip.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations'\nimport { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n selector: 'quang-tooltip',\n imports: [OverlayModule],\n templateUrl: './tooltip.component.html',\n styleUrl: './tooltip.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n\n animations: [\n trigger('tooltip', [\n state('*', style({ opacity: 1 })),\n transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),\n transition(':leave', [style({ opacity: 1 }), animate(300, style({ opacity: 0 }))]),\n ]),\n ],\n})\nexport class QuangTooltipComponent implements QuangBaseOverlayComponent {\n
|
|
1
|
+
{"version":3,"file":"quang-overlay-tooltip.mjs","sources":["../../../projects/quang/overlay/tooltip/tooltip.component.ts","../../../projects/quang/overlay/tooltip/tooltip.component.html","../../../projects/quang/overlay/tooltip/tooltip.directive.ts","../../../projects/quang/overlay/tooltip/quang-overlay-tooltip.ts"],"sourcesContent":["import { animate, state, style, transition, trigger } from '@angular/animations'\nimport { ConnectionPositionPair, OverlayModule } from '@angular/cdk/overlay'\nimport { ChangeDetectionStrategy, Component, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n selector: 'quang-tooltip',\n imports: [OverlayModule],\n templateUrl: './tooltip.component.html',\n styleUrl: './tooltip.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n\n animations: [\n trigger('tooltip', [\n state('*', style({ opacity: 1 })),\n transition(':enter', [style({ opacity: 0 }), animate(200, style({ opacity: 1 }))]),\n transition(':leave', [style({ opacity: 1 }), animate(300, style({ opacity: 0 }))]),\n ]),\n ],\n})\nexport class QuangTooltipComponent implements QuangBaseOverlayComponent {\n overlayContent = input.required<string>()\n\n quangTooltipPosition = input<'top' | 'bottom' | 'left' | 'right'>('top')\n\n positionPair = signal<ConnectionPositionPair | null>(null)\n\n payload = input<unknown>()\n}\n","<div\n @tooltip\n class=\"quang-tooltip\"\n>\n {{ overlayContent() }}\n</div>\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangTooltipComponent } from './tooltip.component'\n\n@Directive({\n selector: '[quangTooltip]',\n})\nexport class QuangTooltipDirective extends QuangBaseOverlayDirective<QuangTooltipComponent> {\n override targetComponentType = signal<ComponentType<QuangTooltipComponent> | undefined>(QuangTooltipComponent)\n\n override content = input.required<string>({ alias: 'quangTooltip' })\n\n override showMethod = input<'click' | 'hover'>('hover')\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/loader/README.md
CHANGED
|
@@ -1,14 +1,81 @@
|
|
|
1
1
|
# Quang Loader
|
|
2
2
|
|
|
3
|
-
Quang Loader
|
|
3
|
+
Quang Loader provides a simple and efficient way to implement an overlay loader in your project. It includes a default spinner but also supports custom content.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
## QuangLoaderComponent
|
|
6
6
|
|
|
7
|
-
The `QuangLoaderComponent`
|
|
7
|
+
The `QuangLoaderComponent` displays a loader overlay on the page. It is highly customizable and can be used to indicate loading states in your application.
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
### Inputs
|
|
10
10
|
|
|
11
|
-
-
|
|
12
|
-
-
|
|
11
|
+
- `showAtLeastFor`: `number` — Minimum time (in milliseconds) to show the loader for. Default: `500`.
|
|
12
|
+
- You can use `ng-content` to project custom content (e.g., a custom spinner or message).
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
> **Note:** Loader visibility is managed internally by the loader service and HTTP interceptor, not by an input property.
|
|
15
|
+
|
|
16
|
+
### Usage
|
|
17
|
+
|
|
18
|
+
1. **Import the Component**:
|
|
19
|
+
```typescript
|
|
20
|
+
import { QuangLoaderComponent } from 'quang/loader'
|
|
21
|
+
```
|
|
22
|
+
2. **Add to Template**:
|
|
23
|
+
```html
|
|
24
|
+
<quang-loader></quang-loader>
|
|
25
|
+
```
|
|
26
|
+
3. **Custom Content**:
|
|
27
|
+
```html
|
|
28
|
+
<quang-loader>
|
|
29
|
+
<div class="custom-spinner">Loading...</div>
|
|
30
|
+
</quang-loader>
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Loader Interceptor
|
|
34
|
+
|
|
35
|
+
The `quangLoaderInterceptor` automatically shows and hides the loader during HTTP requests.
|
|
36
|
+
|
|
37
|
+
### Usage
|
|
38
|
+
|
|
39
|
+
1. **Import the Interceptor**:
|
|
40
|
+
```typescript
|
|
41
|
+
import { quangLoaderInterceptor } from 'quang/loader'
|
|
42
|
+
|
|
43
|
+
providers: [
|
|
44
|
+
{ provide: HTTP_INTERCEPTORS, useClass: quangLoaderInterceptor, multi: true }
|
|
45
|
+
]
|
|
46
|
+
```
|
|
47
|
+
2. **Configuration**:
|
|
48
|
+
Configure the interceptor as needed for your application.
|
|
49
|
+
|
|
50
|
+
## Loader Providers
|
|
51
|
+
|
|
52
|
+
The `provideQuangLoaderExcludedUrls` function configures the loader globally. It allows you to customize the loader's behavior, including setting delays, custom templates, and excluding specific URLs from triggering the loader.
|
|
53
|
+
|
|
54
|
+
### Usage
|
|
55
|
+
|
|
56
|
+
1. **Import the Provider**:
|
|
57
|
+
```typescript
|
|
58
|
+
import { provideQuangLoaderExcludedUrls } from 'quang/loader';
|
|
59
|
+
|
|
60
|
+
providers: [
|
|
61
|
+
provideQuangLoaderExcludedUrls([
|
|
62
|
+
{ url: 'assets', method: 'GET' },
|
|
63
|
+
{ url: '/api/health', method: 'GET' },
|
|
64
|
+
]),
|
|
65
|
+
];
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Excluding URLs from the Loader
|
|
69
|
+
|
|
70
|
+
To exclude specific URLs from triggering the loader, use the `provideQuangLoaderExcludedUrls` function. This function accepts an array of URL objects. Any HTTP request matching these URLs will not activate the loader.
|
|
71
|
+
|
|
72
|
+
Example:
|
|
73
|
+
|
|
74
|
+
```typescript
|
|
75
|
+
provideQuangLoaderExcludedUrls([
|
|
76
|
+
{ url: 'assets', method: 'GET' },
|
|
77
|
+
{ url: '/api/health', method: 'GET' },
|
|
78
|
+
]);
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
In this example, requests to `assets` and `/api/health` with the `GET` method will not show the loader, ensuring that static assets or health check endpoints do not interfere with the user experience.
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
# QuangModalComponent
|
|
2
|
+
|
|
3
|
+
The `QuangModalComponent` is an overlay component used directly in its parent component.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Modal overlay for displaying content
|
|
8
|
+
- Configurable size and position
|
|
9
|
+
- Supports animations for opening and closing
|
|
10
|
+
|
|
11
|
+
## Inputs
|
|
12
|
+
|
|
13
|
+
- `position`: `'right' | 'left' | 'center'` (required) — Position of the modal.
|
|
14
|
+
- `height`: `string` — Height of the modal. Default: `'80vh'`.
|
|
15
|
+
- `width`: `string` — Width of the modal. Default: `'80vw'`.
|
|
16
|
+
- `padding`: `string` — Padding inside the modal. Default: `'0 1rem'`.
|
|
17
|
+
- `containerClass`: `string` — Custom CSS class for the modal container.
|
|
18
|
+
- `animationMode`: `'SLIDE_FROM_LEFT_TO_RIGHT' | 'SLIDE_FROM_RIGHT_TO_LEFT' | 'SLIDE_TOP_TO_BOTTOM' | 'SLIDE_BOTTOM_TO_TOP' | 'FADE'` — Animation mode for the modal.
|
|
19
|
+
- `backgroundColor`: `string` — Background color for the modal.
|
|
20
|
+
- `showBackdrop`: `boolean` — Whether to show the backdrop. Default: `true`.
|
|
21
|
+
- Use `ng-container` with `header`, `body`, and `footer` slots for custom content.
|
|
22
|
+
|
|
23
|
+
## Outputs
|
|
24
|
+
|
|
25
|
+
- `backdropClick`: Emits when the user clicks on the backdrop (outside the modal).
|
|
26
|
+
|
|
27
|
+
## Usage
|
|
28
|
+
|
|
29
|
+
### HTML
|
|
30
|
+
|
|
31
|
+
```html
|
|
32
|
+
<quang-modal
|
|
33
|
+
(backdropClick)="closeModal()"
|
|
34
|
+
animationMode="SLIDE_BOTTOM_TO_TOP"
|
|
35
|
+
height="80vh"
|
|
36
|
+
padding="0"
|
|
37
|
+
position="center"
|
|
38
|
+
[showBackdrop]="true"
|
|
39
|
+
>
|
|
40
|
+
<ng-container header>
|
|
41
|
+
<div class="d-flex justify-content-between mt-2">
|
|
42
|
+
<h3>{{ 'title.header' | transloco }}</h3>
|
|
43
|
+
<button
|
|
44
|
+
(click)="closeModal()"
|
|
45
|
+
class="btn btn-outline-secondary"
|
|
46
|
+
type="button"
|
|
47
|
+
>
|
|
48
|
+
X
|
|
49
|
+
</button>
|
|
50
|
+
</div>
|
|
51
|
+
</ng-container>
|
|
52
|
+
<ng-container body>
|
|
53
|
+
<h3>{{ content() }}</h3>
|
|
54
|
+
<p>
|
|
55
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
|
|
56
|
+
magna aliqua.
|
|
57
|
+
</p>
|
|
58
|
+
<img
|
|
59
|
+
alt="test"
|
|
60
|
+
src="https://picsum.photos/200/300"
|
|
61
|
+
/>
|
|
62
|
+
</ng-container>
|
|
63
|
+
<ng-container footer>
|
|
64
|
+
<div class="d-flex mb-3 gap-3 w-100">
|
|
65
|
+
<h3 class="d-flex flex-column flex-grow-1">{{ 'title.footer' | transloco }}</h3>
|
|
66
|
+
<button
|
|
67
|
+
(click)="closeModal()"
|
|
68
|
+
class="btn btn-outline-secondary"
|
|
69
|
+
type="button"
|
|
70
|
+
>
|
|
71
|
+
{{ 'buttons.close' | transloco }}
|
|
72
|
+
</button>
|
|
73
|
+
</div>
|
|
74
|
+
</ng-container>
|
|
75
|
+
</quang-modal>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### TypeScript
|
|
79
|
+
|
|
80
|
+
```typescript
|
|
81
|
+
import { signal } from '@angular/core';
|
|
82
|
+
|
|
83
|
+
showModal = signal(false);
|
|
84
|
+
content = signal('Modal Content');
|
|
85
|
+
|
|
86
|
+
openModal() {
|
|
87
|
+
showModal.set(true);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
closeModal() {
|
|
91
|
+
showModal.set(false);
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## Notes
|
|
96
|
+
|
|
97
|
+
This component uses Angular CDK's `Overlay` and `Portal` modules for rendering modals dynamically. Refer to the component's API for all available configuration options.
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# QuangPopoverComponent
|
|
2
|
+
|
|
3
|
+
The `QuangPopoverComponent` is a base overlay popover with its own style, used via the `[quangPopover]` directive.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Popover overlay for displaying additional information
|
|
8
|
+
- Configurable trigger and position (via directive)
|
|
9
|
+
- Supports custom content via `TemplateRef`
|
|
10
|
+
|
|
11
|
+
## Inputs (via Directive)
|
|
12
|
+
|
|
13
|
+
- `quangPopover`: `TemplateRef<any> | null` (required) — The template to display in the popover.
|
|
14
|
+
- `overlayPosition`: `string` — Position of the popover. Accepts values like `'top'`, `'top-left'`, `'top-right'`, `'bottom'`, `'bottom-left'`, `'bottom-right'`, `'left'`, `'right'`
|
|
15
|
+
- `showMethod`: `string` — Trigger for the popover. Accepts values like `'click'`, `'hover'`, `'focus'`.
|
|
16
|
+
- `payload`: `any` — Optional data to pass to the popover template.
|
|
17
|
+
|
|
18
|
+
## Outputs
|
|
19
|
+
|
|
20
|
+
- _(none)_ — The popover closes automatically when the user clicks outside or triggers the close logic.
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<button
|
|
26
|
+
[overlayPosition]="'top'"
|
|
27
|
+
[quangPopover]="popoverTemplate"
|
|
28
|
+
[showMethod]="'click'"
|
|
29
|
+
>
|
|
30
|
+
Open Popover
|
|
31
|
+
</button>
|
|
32
|
+
|
|
33
|
+
<ng-template #popoverTemplate>
|
|
34
|
+
<div>Popover Content</div>
|
|
35
|
+
</ng-template>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Notes
|
|
39
|
+
|
|
40
|
+
This component is used via the `[quangPopover]` directive and extends the `QuangBaseOverlayComponent`, inheriting features such as dynamic positioning and styling. The popover content is always provided as a `TemplateRef`.
|
|
@@ -3,11 +3,11 @@ import { TemplateRef } from '@angular/core';
|
|
|
3
3
|
import { QuangBaseOverlayComponent } from 'quang/overlay/shared';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
export declare class QuangPopoverComponent implements QuangBaseOverlayComponent {
|
|
6
|
-
|
|
6
|
+
overlayContent: import("@angular/core").InputSignal<TemplateRef<any> | null>;
|
|
7
7
|
positionPair: import("@angular/core").WritableSignal<ConnectionPositionPair | null>;
|
|
8
8
|
payload: import("@angular/core").InputSignal<any>;
|
|
9
9
|
getPopoverPosition: import("@angular/core").WritableSignal<string>;
|
|
10
10
|
onChangePositionPair$: import("rxjs").Subscription;
|
|
11
11
|
static ɵfac: i0.ɵɵFactoryDeclaration<QuangPopoverComponent, never>;
|
|
12
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<QuangPopoverComponent, "quang-popover", never, { "
|
|
12
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<QuangPopoverComponent, "quang-popover", never, { "overlayContent": { "alias": "overlayContent"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
13
13
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { ConnectionPositionPair } from '@angular/cdk/overlay';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare abstract class QuangBaseOverlayComponent {
|
|
4
|
-
|
|
4
|
+
overlayContent: import("@angular/core").InputSignal<any>;
|
|
5
5
|
payload: import("@angular/core").InputSignal<any>;
|
|
6
6
|
positionPair: import("@angular/core").WritableSignal<ConnectionPositionPair | null>;
|
|
7
7
|
static ɵfac: i0.ɵɵFactoryDeclaration<QuangBaseOverlayComponent, never>;
|
|
8
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<QuangBaseOverlayComponent, "quang-base-overlay-component", never, { "
|
|
8
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<QuangBaseOverlayComponent, "quang-base-overlay-component", never, { "overlayContent": { "alias": "overlayContent"; "required": true; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
9
9
|
}
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# QuangToastComponent
|
|
2
|
+
|
|
3
|
+
The `QuangToastComponent` is an overlay component used directly in its parent component and managed via the `QuangToastService`.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Toast notifications for displaying messages
|
|
8
|
+
- Configurable duration, type, and position (via service)
|
|
9
|
+
- Supports multiple toast instances and custom templates
|
|
10
|
+
|
|
11
|
+
## Inputs
|
|
12
|
+
|
|
13
|
+
- `showAtLeastFor`: `number` — Minimum time (in milliseconds) to show the toast for. Default: `500`.
|
|
14
|
+
|
|
15
|
+
> **Note:** All toast configuration (message, type, position, timing, etc.) is provided via the `QuangToastService.openToast()` method, not as component inputs.
|
|
16
|
+
|
|
17
|
+
## Outputs
|
|
18
|
+
|
|
19
|
+
- *(none)* — Toast dismissal is managed internally by the service.
|
|
20
|
+
|
|
21
|
+
## Usage
|
|
22
|
+
|
|
23
|
+
### HTML
|
|
24
|
+
|
|
25
|
+
```html
|
|
26
|
+
<quang-toast />
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### TypeScript
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { inject } from '@angular/core'
|
|
33
|
+
import { QuangToastService } from 'quang/overlay/toast'
|
|
34
|
+
|
|
35
|
+
quangToast = inject(QuangToastService)
|
|
36
|
+
|
|
37
|
+
openToast(type: 'success' | 'error') {
|
|
38
|
+
quangToast.openToast({
|
|
39
|
+
type,
|
|
40
|
+
title: type === 'success' ? 'Success' : 'Error',
|
|
41
|
+
position: 'top-right',
|
|
42
|
+
text: 'This is a toast message',
|
|
43
|
+
timing: 5000,
|
|
44
|
+
showCloseButton: true,
|
|
45
|
+
})
|
|
46
|
+
}
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### ToastData Options
|
|
50
|
+
|
|
51
|
+
- `type`: `'success' | 'warning' | 'error'` (required)
|
|
52
|
+
- `title?`: `string`
|
|
53
|
+
- `position`: `'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center' | 'top-center' | 'bottom-center'`
|
|
54
|
+
- `timing`: `number` (required)
|
|
55
|
+
- `text?`: `string`
|
|
56
|
+
- `showCloseButton?`: `boolean`
|
|
57
|
+
- `customTemplate?`: `TemplateRef<any>`
|
|
58
|
+
- `customIcon?`: `string`
|
|
59
|
+
- `hideHeader?`: `boolean`
|
|
60
|
+
- ...and more (see service for full list)
|
|
61
|
+
|
|
62
|
+
## Notes
|
|
63
|
+
|
|
64
|
+
This component uses the `QuangToastService` for managing toast instances dynamically. All toast display logic and configuration is handled via the service.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# QuangTooltipComponent
|
|
2
|
+
|
|
3
|
+
The `QuangTooltipComponent` is a base overlay tooltip with its own style, used via the `[quangTooltip]` directive.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- Tooltip overlay for displaying additional information
|
|
8
|
+
- Configurable trigger and position (via directive)
|
|
9
|
+
- Supports animations for showing and hiding
|
|
10
|
+
|
|
11
|
+
## Inputs (via Directive)
|
|
12
|
+
|
|
13
|
+
- `quangTooltip`: `string` (required) — The content to display in the tooltip.
|
|
14
|
+
- `showMethod`: `'click' | 'hover'` — Specifies the trigger for the tooltip. Default: `'hover'`.
|
|
15
|
+
- `quangTooltipPosition`: `'top' | 'bottom' | 'left' | 'right'` — Position of the tooltip. Default: `'top'`.
|
|
16
|
+
- `payload`: `unknown` — Optional data to pass to the tooltip.
|
|
17
|
+
|
|
18
|
+
## Outputs
|
|
19
|
+
|
|
20
|
+
- *(none)* — The tooltip closes automatically when the user clicks outside or triggers the close logic.
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<button
|
|
26
|
+
[quangTooltip]="'This is a tooltip'"
|
|
27
|
+
[showMethod]="'hover'"
|
|
28
|
+
[quangTooltipPosition]="'top'"
|
|
29
|
+
>
|
|
30
|
+
Hover me
|
|
31
|
+
</button>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Notes
|
|
35
|
+
|
|
36
|
+
This component uses Angular animations for smooth transitions and extends the `QuangBaseOverlayComponent` for dynamic positioning. The tooltip is always used via the `[quangTooltip]` directive.
|
|
@@ -2,10 +2,10 @@ import { ConnectionPositionPair } from '@angular/cdk/overlay';
|
|
|
2
2
|
import { QuangBaseOverlayComponent } from 'quang/overlay/shared';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
export declare class QuangTooltipComponent implements QuangBaseOverlayComponent {
|
|
5
|
-
|
|
5
|
+
overlayContent: import("@angular/core").InputSignal<string>;
|
|
6
6
|
quangTooltipPosition: import("@angular/core").InputSignal<"top" | "bottom" | "left" | "right">;
|
|
7
7
|
positionPair: import("@angular/core").WritableSignal<ConnectionPositionPair | null>;
|
|
8
8
|
payload: import("@angular/core").InputSignal<unknown>;
|
|
9
9
|
static ɵfac: i0.ɵɵFactoryDeclaration<QuangTooltipComponent, never>;
|
|
10
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<QuangTooltipComponent, "quang-tooltip", never, { "
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<QuangTooltipComponent, "quang-tooltip", never, { "overlayContent": { "alias": "overlayContent"; "required": true; "isSignal": true; }; "quangTooltipPosition": { "alias": "quangTooltipPosition"; "required": false; "isSignal": true; }; "payload": { "alias": "payload"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
11
11
|
}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "quang",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "19.0.
|
|
4
|
+
"version": "19.0.22",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"tslib": "^2.3.0"
|
|
7
7
|
},
|
|
@@ -62,14 +62,14 @@
|
|
|
62
62
|
"types": "./auth/index.d.ts",
|
|
63
63
|
"default": "./fesm2022/quang-auth.mjs"
|
|
64
64
|
},
|
|
65
|
-
"./forms": {
|
|
66
|
-
"types": "./forms/index.d.ts",
|
|
67
|
-
"default": "./fesm2022/quang-forms.mjs"
|
|
68
|
-
},
|
|
69
65
|
"./device": {
|
|
70
66
|
"types": "./device/index.d.ts",
|
|
71
67
|
"default": "./fesm2022/quang-device.mjs"
|
|
72
68
|
},
|
|
69
|
+
"./forms": {
|
|
70
|
+
"types": "./forms/index.d.ts",
|
|
71
|
+
"default": "./fesm2022/quang-forms.mjs"
|
|
72
|
+
},
|
|
73
73
|
"./loader": {
|
|
74
74
|
"types": "./loader/index.d.ts",
|
|
75
75
|
"default": "./fesm2022/quang-loader.mjs"
|
|
@@ -86,14 +86,14 @@
|
|
|
86
86
|
"types": "./auth/mobile/index.d.ts",
|
|
87
87
|
"default": "./fesm2022/quang-auth-mobile.mjs"
|
|
88
88
|
},
|
|
89
|
-
"./components/checkbox": {
|
|
90
|
-
"types": "./components/checkbox/index.d.ts",
|
|
91
|
-
"default": "./fesm2022/quang-components-checkbox.mjs"
|
|
92
|
-
},
|
|
93
89
|
"./components/autocomplete": {
|
|
94
90
|
"types": "./components/autocomplete/index.d.ts",
|
|
95
91
|
"default": "./fesm2022/quang-components-autocomplete.mjs"
|
|
96
92
|
},
|
|
93
|
+
"./components/checkbox": {
|
|
94
|
+
"types": "./components/checkbox/index.d.ts",
|
|
95
|
+
"default": "./fesm2022/quang-components-checkbox.mjs"
|
|
96
|
+
},
|
|
97
97
|
"./components/date": {
|
|
98
98
|
"types": "./components/date/index.d.ts",
|
|
99
99
|
"default": "./fesm2022/quang-components-date.mjs"
|