quang 20.1.2 → 20.1.5
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.
|
@@ -70,7 +70,7 @@ declare class QuangOptionListComponent {
|
|
|
70
70
|
selectionMode: _angular_core.InputSignal<"single" | "multiple">;
|
|
71
71
|
optionListMaxHeight: _angular_core.InputSignal<string>;
|
|
72
72
|
selectOptions: _angular_core.InputSignal<SelectOption[]>;
|
|
73
|
-
selectButtonRef: _angular_core.InputSignal<
|
|
73
|
+
selectButtonRef: _angular_core.InputSignal<HTMLInputElement | HTMLButtonElement | HTMLDivElement>;
|
|
74
74
|
_value: _angular_core.InputSignal<any>;
|
|
75
75
|
_isDisabled: _angular_core.InputSignal<boolean | undefined>;
|
|
76
76
|
componentClass: _angular_core.InputSignal<string | string[]>;
|
|
@@ -48,9 +48,7 @@ class QuangSelectComponent extends QuangBaseComponent {
|
|
|
48
48
|
combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])
|
|
49
49
|
.pipe(takeUntilDestroyed(this.destroyRef), filter(([autoselect, options]) => autoselect === true && options.length === 1))
|
|
50
50
|
.subscribe(([_, options]) => {
|
|
51
|
-
console.log('ciaooooo ->', this._value());
|
|
52
51
|
if (this._value() === null || this._value() === undefined || this._value() === '') {
|
|
53
|
-
console.log('options[0].value', options[0].value);
|
|
54
52
|
this.onChangedHandler(options[0].value);
|
|
55
53
|
}
|
|
56
54
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n forwardRef,\n input,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n OptionListParentType,\n QuangBaseComponent,\n QuangOptionListComponent,\n SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n selector: 'quang-select',\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangSelectComponent),\n multi: true,\n },\n {\n provide: QuangOptionListComponent,\n multi: false,\n },\n ],\n imports: [TranslocoPipe, NgClass, QuangOptionListComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n extends QuangBaseComponent<string | number | string[] | number[] | null>\n implements AfterViewInit\n{\n selectionMode = input<'single' | 'multiple'>('single')\n\n /**\n * Set the max height of the selection list before scrolling.\n * Default: 18rem\n * @default 18rem\n */\n optionListMaxHeight = input<string>('18rem')\n\n selectOptions = input.required<SelectOption[]>()\n\n scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n _showOptions = signal<boolean>(false)\n\n _optionHideTimeout = signal<any | undefined>(undefined)\n\n _selectedItems = computed(() => {\n if (this._value() !== null) {\n const targetValue = this._value()\n return this.selectOptions().filter((x) => {\n if (Array.isArray(targetValue)) {\n return targetValue.some((k) => k === x.value)\n }\n return targetValue === x.value\n })\n }\n return null\n })\n\n translateValue = input<boolean>(true)\n\n nullOption = input<boolean>(true)\n\n autoSelectSingleOption = input<boolean>(false)\n\n readonly ParentType = OptionListParentType.SELECT\n\n constructor() {\n super()\n combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter(([autoselect, options]) => autoselect === true && options.length === 1)\n )\n .subscribe(([_, options]) => {\n console.log('ciaooooo ->', this._value())\n if (this._value() === null || this._value() === undefined || this._value() === '') {\n console.log('options[0].value', options[0].value)\n this.onChangedHandler(options[0].value)\n }\n })\n }\n\n changeOptionsVisibility(skipTimeout = false): void {\n if (this.isReadonly()) return\n if (this._showOptions()) {\n this._showOptions.set(skipTimeout)\n } else {\n this.showOptionVisibility()\n }\n }\n\n showOptionVisibility(): void {\n if (this._optionHideTimeout()) {\n clearTimeout(this._optionHideTimeout())\n this._optionHideTimeout.set(null)\n }\n this._showOptions.set(true)\n }\n\n hideOptionVisibility(skipTimeout = false): void {\n if (this._optionHideTimeout()) {\n clearTimeout(this._optionHideTimeout())\n }\n this._optionHideTimeout.set(\n setTimeout(\n () => {\n this._showOptions.set(false)\n },\n skipTimeout ? 0 : 50\n )\n )\n }\n\n override onBlurHandler() {\n if (this.selectionMode() === 'single') {\n setTimeout(() => {\n this.hideOptionVisibility()\n super.onBlurHandler()\n }, 100)\n }\n }\n\n override onChangedHandler(value: string | number | string[] | number[] | null): void {\n super.onChangedHandler(value)\n if (this.selectionMode() === 'single') {\n this.hideOptionVisibility()\n }\n }\n\n onMouseLeaveCallback() {\n if (this.selectionMode() === 'multiple') {\n this.hideOptionVisibility()\n }\n }\n}\n","<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label w-100\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n #selectButton\n class=\"form-select\"\n type=\"button\"\n >\n <div class=\"content\">\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val.value; let last = $last) {\n {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"quang-components-select.mjs","sources":["../../../projects/quang/components/select/select.component.ts","../../../projects/quang/components/select/select.component.html","../../../projects/quang/components/select/quang-components-select.ts"],"sourcesContent":["import { NgClass } from '@angular/common'\nimport {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n ElementRef,\n computed,\n forwardRef,\n input,\n signal,\n viewChild,\n} from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\nimport { NG_VALUE_ACCESSOR } from '@angular/forms'\n\nimport { TranslocoPipe } from '@jsverse/transloco'\nimport { combineLatest, filter } from 'rxjs'\n\nimport {\n OptionListParentType,\n QuangBaseComponent,\n QuangOptionListComponent,\n SelectOption,\n} from 'quang/components/shared'\n\n@Component({\n selector: 'quang-select',\n templateUrl: './select.component.html',\n styleUrl: './select.component.scss',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => QuangSelectComponent),\n multi: true,\n },\n {\n provide: QuangOptionListComponent,\n multi: false,\n },\n ],\n imports: [TranslocoPipe, NgClass, QuangOptionListComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Select component for choosing one or multiple options from a dropdown.\n *\n * @usageNotes\n * This component supports both single and multiple selection modes. It can be configured\n * to display a list of options and allows users to select one or more of them by setting the `selectionMode` property to either `single` or `multiple`.\n */\nexport class QuangSelectComponent\n extends QuangBaseComponent<string | number | string[] | number[] | null>\n implements AfterViewInit\n{\n selectionMode = input<'single' | 'multiple'>('single')\n\n /**\n * Set the max height of the selection list before scrolling.\n * Default: 18rem\n * @default 18rem\n */\n optionListMaxHeight = input<string>('18rem')\n\n selectOptions = input.required<SelectOption[]>()\n\n scrollBehaviorOnOpen = input<ScrollBehavior>('smooth')\n\n selectButton = viewChild<ElementRef<HTMLButtonElement>>('selectButton')\n\n _showOptions = signal<boolean>(false)\n\n _optionHideTimeout = signal<any | undefined>(undefined)\n\n _selectedItems = computed(() => {\n if (this._value() !== null) {\n const targetValue = this._value()\n return this.selectOptions().filter((x) => {\n if (Array.isArray(targetValue)) {\n return targetValue.some((k) => k === x.value)\n }\n return targetValue === x.value\n })\n }\n return null\n })\n\n translateValue = input<boolean>(true)\n\n nullOption = input<boolean>(true)\n\n autoSelectSingleOption = input<boolean>(false)\n\n readonly ParentType = OptionListParentType.SELECT\n\n constructor() {\n super()\n combineLatest([toObservable(this.autoSelectSingleOption), toObservable(this.selectOptions)])\n .pipe(\n takeUntilDestroyed(this.destroyRef),\n filter(([autoselect, options]) => autoselect === true && options.length === 1)\n )\n .subscribe(([_, options]) => {\n if (this._value() === null || this._value() === undefined || this._value() === '') {\n this.onChangedHandler(options[0].value)\n }\n })\n }\n\n changeOptionsVisibility(skipTimeout = false): void {\n if (this.isReadonly()) return\n if (this._showOptions()) {\n this._showOptions.set(skipTimeout)\n } else {\n this.showOptionVisibility()\n }\n }\n\n showOptionVisibility(): void {\n if (this._optionHideTimeout()) {\n clearTimeout(this._optionHideTimeout())\n this._optionHideTimeout.set(null)\n }\n this._showOptions.set(true)\n }\n\n hideOptionVisibility(skipTimeout = false): void {\n if (this._optionHideTimeout()) {\n clearTimeout(this._optionHideTimeout())\n }\n this._optionHideTimeout.set(\n setTimeout(\n () => {\n this._showOptions.set(false)\n },\n skipTimeout ? 0 : 50\n )\n )\n }\n\n override onBlurHandler() {\n if (this.selectionMode() === 'single') {\n setTimeout(() => {\n this.hideOptionVisibility()\n super.onBlurHandler()\n }, 100)\n }\n }\n\n override onChangedHandler(value: string | number | string[] | number[] | null): void {\n super.onChangedHandler(value)\n if (this.selectionMode() === 'single') {\n this.hideOptionVisibility()\n }\n }\n\n onMouseLeaveCallback() {\n if (this.selectionMode() === 'multiple') {\n this.hideOptionVisibility()\n }\n }\n}\n","<div\n (mouseleave)=\"onMouseLeaveCallback()\"\n class=\"mb-3\"\n>\n @if (componentLabel()) {\n <label\n [htmlFor]=\"componentId()\"\n class=\"form-label w-100\"\n >\n {{ componentLabel() | transloco }}\n <span [hidden]=\"!_isRequired()\">*</span>\n </label>\n }\n <div\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n class=\"option-list-container\"\n >\n <button\n [attr.required]=\"getIsRequiredControl()\"\n [class.is-invalid]=\"_ngControl()?.invalid && (_ngControl()?.dirty || _ngControl()?.touched) && errorMap().length\"\n [class.is-valid]=\"_ngControl()?.valid && (_ngControl()?.dirty || _ngControl()?.touched) && successMessage()\"\n [disabled]=\"_isDisabled()\"\n [id]=\"componentId()\"\n [ngClass]=\"componentClass()\"\n [tabIndex]=\"componentTabIndex()\"\n (click)=\"changeOptionsVisibility()\"\n #selectButton\n class=\"form-select\"\n type=\"button\"\n >\n <div class=\"content\">\n @if (_selectedItems()?.length) {\n @for (val of _selectedItems(); track val.value; let last = $last) {\n {{ translateValue() ? (val.label | transloco) : val.label }}{{ !last ? ', ' : '' }}\n }\n } @else {\n <ng-container>{{ componentPlaceholder() | transloco }}</ng-container>\n }\n </div>\n </button>\n\n @if (_showOptions()) {\n <quang-option-list\n [_isDisabled]=\"_isDisabled()\"\n [_value]=\"_value()\"\n [componentClass]=\"componentClass()\"\n [componentLabel]=\"componentLabel()\"\n [componentTabIndex]=\"componentTabIndex()\"\n [nullOption]=\"nullOption()\"\n [optionListMaxHeight]=\"optionListMaxHeight()\"\n [parentType]=\"ParentType\"\n [scrollBehaviorOnOpen]=\"scrollBehaviorOnOpen()\"\n [selectButtonRef]=\"selectButton\"\n [selectionMode]=\"selectionMode()\"\n [selectOptions]=\"selectOptions()\"\n [translateValue]=\"translateValue()\"\n (blurHandler)=\"onBlurHandler()\"\n (changedHandler)=\"onChangedHandler($event)\"\n #optionList\n ></quang-option-list>\n }\n </div>\n <div class=\"valid-feedback\">\n {{ successMessage() | transloco }}\n </div>\n <div class=\"invalid-feedback\">\n {{ _currentErrorMessage() | transloco: _currentErrorMessageExtraData() }}\n </div>\n @if (helpMessage()) {\n <small\n [hidden]=\"_showSuccess() || _showErrors()\"\n aria-live=\"assertive\"\n class=\"form-text text-muted\"\n >\n {{ helpMessage() | transloco }}\n </small>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -39,11 +39,11 @@ class QuangPopoverComponent {
|
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangPopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: QuangPopoverComponent, isStandalone: true, selector: "quang-popover", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);
|
|
42
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", type: QuangPopoverComponent, isStandalone: true, selector: "quang-popover", inputs: { overlayContent: { classPropertyName: "overlayContent", publicName: "overlayContent", isSignal: true, isRequired: false, transformFunction: null }, payload: { classPropertyName: "payload", publicName: "payload", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);position:relative;padding:1rem;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
43
43
|
}
|
|
44
44
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: QuangPopoverComponent, decorators: [{
|
|
45
45
|
type: Component,
|
|
46
|
-
args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);
|
|
46
|
+
args: [{ selector: 'quang-popover', imports: [NgTemplateOutlet, NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n", styles: [":host{--bs-popover-border-width: 1px;--bs-popover-arrow-width: .5rem;--bs-popover-arrow-border: var(--bs-border-color, #000);--box-shadow-bg: rgba(0, 0, 0, .16)}.popover-container{box-shadow:var(--box-shadow-bg);background:var(--bs-body-bg, #fff);border:var(--bs-popover-border-width) solid var(--bs-border-color, #000);position:relative;padding:1rem;pointer-events:all}.popover-container.center-bottom:after,.popover-container.center-bottom:before{bottom:100%;left:50%;transform:translate(-50%)}.popover-container.start-bottom:after,.popover-container.start-bottom:before{bottom:100%;left:85%;transform:translate(-50%)}.popover-container.end-bottom:after,.popover-container.end-bottom:before{bottom:100%;left:15%;transform:translate(-50%)}.popover-container.center-top:after,.popover-container.center-top:before{top:100%;left:50%;transform:translate(-50%) rotate(180deg)}.popover-container.start-top:after,.popover-container.start-top:before{top:100%;left:85%;transform:translate(-50%) rotate(180deg)}.popover-container.end-top:after,.popover-container.end-top:before{top:100%;left:15%;transform:translate(-50%) rotate(180deg)}.popover-container.end-center:after,.popover-container.end-center:before{right:100%;top:50%;transform:translateY(-50%) rotate(270deg)}.popover-container.start-center:after,.popover-container.start-center:before{left:100%;top:50%;transform:translateY(-50%) rotate(90deg)}.popover-container:after,.popover-container:before{content:\"\";display:block;position:absolute;width:0;height:0;border-style:solid}.popover-container:after{border-color:transparent transparent var(--bs-body-bg, #fff) transparent;border-width:var(--bs-popover-arrow-width)}.popover-container:before{border-color:transparent transparent var(--bs-border-color, #000) transparent;border-width:calc(var(--bs-popover-arrow-width) + 1px)}\n"] }]
|
|
47
47
|
}] });
|
|
48
48
|
|
|
49
49
|
class QuangPopoverDirective extends QuangBaseOverlayDirective {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quang-overlay-popover.mjs","sources":["../../../projects/quang/overlay/popover/popover.component.ts","../../../projects/quang/overlay/popover/popover.component.html","../../../projects/quang/overlay/popover/popover.directive.ts","../../../projects/quang/overlay/popover/quang-overlay-popover.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, input, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n selector: 'quang-popover',\n imports: [NgTemplateOutlet, NgClass],\n templateUrl: './popover.component.html',\n styleUrl: './popover.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Popover component that can render custom content, passed from the outside as a `TemplateRef`\n * @example\n * <button\n [quangPopover]=\"popoverTest\"\n [scrollCloseThreshold]=\"undefined\"\n class=\"btn popover-test-button\"\n overlayPosition=\"top\"\n showMethod=\"click\"\n >\n {{ 'buttons.popover' | transloco }}\n <span>CLICK</span>\n </button>\n <ng-template #popoverTest> <span>test works!</span> <button type=\"button\">click!</button> </ng-template>\n */\nexport class QuangPopoverComponent implements QuangBaseOverlayComponent {\n overlayContent = input<TemplateRef<any> | null>(null)\n\n positionPair = signal<ConnectionPositionPair | null>(null)\n\n payload = input<any>()\n\n getPopoverPosition = signal<string>('')\n\n onChangePositionPair$ = toObservable(this.positionPair)\n .pipe(takeUntilDestroyed())\n .subscribe((positionPair) => {\n const originX = positionPair?.originX\n const originY = positionPair?.originY\n if (originX && originY) {\n this.getPopoverPosition.set(`${originX}-${originY}`)\n } else {\n this.getPopoverPosition.set('')\n }\n })\n}\n","@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, TemplateRef, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangPopoverComponent } from './popover.component'\n\n@Directive({\n selector: '[quangPopover]',\n})\nexport class QuangPopoverDirective extends QuangBaseOverlayDirective<QuangPopoverComponent> {\n override targetComponentType = signal<ComponentType<QuangPopoverComponent> | undefined>(QuangPopoverComponent)\n\n override content = input.required<TemplateRef<any> | null>({ alias: 'quangPopover' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAcA;;;;;;;;;;;;;;AAcG;MACU,qBAAqB,CAAA;AAtBlC,IAAA,WAAA,GAAA;AAuBE,QAAA,IAAA,CAAA,cAAc,GAAG,KAAK,CAA0B,IAAI,CAAC;AAErD,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAgC,IAAI,CAAC;QAE1D,IAAO,CAAA,OAAA,GAAG,KAAK,EAAO;AAEtB,QAAA,IAAA,CAAA,kBAAkB,GAAG,MAAM,CAAS,EAAE,CAAC;AAEvC,QAAA,IAAA,CAAA,qBAAqB,GAAG,YAAY,CAAC,IAAI,CAAC,YAAY;aACnD,IAAI,CAAC,kBAAkB,EAAE;AACzB,aAAA,SAAS,CAAC,CAAC,YAAY,KAAI;AAC1B,YAAA,MAAM,OAAO,GAAG,YAAY,EAAE,OAAO;AACrC,YAAA,MAAM,OAAO,GAAG,YAAY,EAAE,OAAO;AACrC,YAAA,IAAI,OAAO,IAAI,OAAO,EAAE;gBACtB,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAG,EAAA,OAAO,CAAI,CAAA,EAAA,OAAO,CAAE,CAAA,CAAC;;iBAC/C;AACL,gBAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,EAAE,CAAC;;AAEnC,SAAC,CAAC;AACL;8GApBY,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAArB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,qBAAqB,EC7BlC,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,EAAA,cAAA,EAAA,EAAA,iBAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,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,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAAA,sSAaA,EDJY,MAAA,EAAA,CAAA,
|
|
1
|
+
{"version":3,"file":"quang-overlay-popover.mjs","sources":["../../../projects/quang/overlay/popover/popover.component.ts","../../../projects/quang/overlay/popover/popover.component.html","../../../projects/quang/overlay/popover/popover.directive.ts","../../../projects/quang/overlay/popover/quang-overlay-popover.ts"],"sourcesContent":["import { ConnectionPositionPair } from '@angular/cdk/overlay'\nimport { NgClass, NgTemplateOutlet } from '@angular/common'\nimport { ChangeDetectionStrategy, Component, TemplateRef, input, signal } from '@angular/core'\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop'\n\nimport { QuangBaseOverlayComponent } from 'quang/overlay/shared'\n\n@Component({\n selector: 'quang-popover',\n imports: [NgTemplateOutlet, NgClass],\n templateUrl: './popover.component.html',\n styleUrl: './popover.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Popover component that can render custom content, passed from the outside as a `TemplateRef`\n * @example\n * <button\n [quangPopover]=\"popoverTest\"\n [scrollCloseThreshold]=\"undefined\"\n class=\"btn popover-test-button\"\n overlayPosition=\"top\"\n showMethod=\"click\"\n >\n {{ 'buttons.popover' | transloco }}\n <span>CLICK</span>\n </button>\n <ng-template #popoverTest> <span>test works!</span> <button type=\"button\">click!</button> </ng-template>\n */\nexport class QuangPopoverComponent implements QuangBaseOverlayComponent {\n overlayContent = input<TemplateRef<any> | null>(null)\n\n positionPair = signal<ConnectionPositionPair | null>(null)\n\n payload = input<any>()\n\n getPopoverPosition = signal<string>('')\n\n onChangePositionPair$ = toObservable(this.positionPair)\n .pipe(takeUntilDestroyed())\n .subscribe((positionPair) => {\n const originX = positionPair?.originX\n const originY = positionPair?.originY\n if (originX && originY) {\n this.getPopoverPosition.set(`${originX}-${originY}`)\n } else {\n this.getPopoverPosition.set('')\n }\n })\n}\n","@if (overlayContent()) {\n <div\n [ngClass]=\"getPopoverPosition()\"\n class=\"popover-container\"\n >\n <ng-container\n [ngTemplateOutlet]=\"overlayContent()\"\n [ngTemplateOutletContext]=\"{\n $implicit: payload(),\n }\"\n ></ng-container>\n </div>\n}\n","import { ComponentType } from '@angular/cdk/portal'\nimport { Directive, TemplateRef, input, signal } from '@angular/core'\n\nimport { QuangBaseOverlayDirective } from 'quang/overlay/shared'\n\nimport { QuangPopoverComponent } from './popover.component'\n\n@Directive({\n selector: '[quangPopover]',\n})\nexport class QuangPopoverDirective extends QuangBaseOverlayDirective<QuangPopoverComponent> {\n override targetComponentType = signal<ComponentType<QuangPopoverComponent> | undefined>(QuangPopoverComponent)\n\n override content = input.required<TemplateRef<any> | null>({ alias: 'quangPopover' })\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "quang",
|
|
3
3
|
"sideEffects": false,
|
|
4
|
-
"version": "20.1.
|
|
4
|
+
"version": "20.1.5",
|
|
5
5
|
"dependencies": {
|
|
6
6
|
"tslib": "^2.3.0"
|
|
7
7
|
},
|
|
@@ -67,6 +67,10 @@
|
|
|
67
67
|
"types": "./auth/index.d.ts",
|
|
68
68
|
"default": "./fesm2022/quang-auth.mjs"
|
|
69
69
|
},
|
|
70
|
+
"./device": {
|
|
71
|
+
"types": "./device/index.d.ts",
|
|
72
|
+
"default": "./fesm2022/quang-device.mjs"
|
|
73
|
+
},
|
|
70
74
|
"./data-handling": {
|
|
71
75
|
"types": "./data-handling/index.d.ts",
|
|
72
76
|
"default": "./fesm2022/quang-data-handling.mjs"
|
|
@@ -75,22 +79,18 @@
|
|
|
75
79
|
"types": "./forms/index.d.ts",
|
|
76
80
|
"default": "./fesm2022/quang-forms.mjs"
|
|
77
81
|
},
|
|
78
|
-
"./device": {
|
|
79
|
-
"types": "./device/index.d.ts",
|
|
80
|
-
"default": "./fesm2022/quang-device.mjs"
|
|
81
|
-
},
|
|
82
82
|
"./loader": {
|
|
83
83
|
"types": "./loader/index.d.ts",
|
|
84
84
|
"default": "./fesm2022/quang-loader.mjs"
|
|
85
85
|
},
|
|
86
|
-
"./shared": {
|
|
87
|
-
"types": "./shared/index.d.ts",
|
|
88
|
-
"default": "./fesm2022/quang-shared.mjs"
|
|
89
|
-
},
|
|
90
86
|
"./translation": {
|
|
91
87
|
"types": "./translation/index.d.ts",
|
|
92
88
|
"default": "./fesm2022/quang-translation.mjs"
|
|
93
89
|
},
|
|
90
|
+
"./shared": {
|
|
91
|
+
"types": "./shared/index.d.ts",
|
|
92
|
+
"default": "./fesm2022/quang-shared.mjs"
|
|
93
|
+
},
|
|
94
94
|
"./auth/mobile": {
|
|
95
95
|
"types": "./auth/mobile/index.d.ts",
|
|
96
96
|
"default": "./fesm2022/quang-auth-mobile.mjs"
|
|
@@ -103,14 +103,14 @@
|
|
|
103
103
|
"types": "./components/checkbox/index.d.ts",
|
|
104
104
|
"default": "./fesm2022/quang-components-checkbox.mjs"
|
|
105
105
|
},
|
|
106
|
-
"./components/date": {
|
|
107
|
-
"types": "./components/date/index.d.ts",
|
|
108
|
-
"default": "./fesm2022/quang-components-date.mjs"
|
|
109
|
-
},
|
|
110
106
|
"./components/input": {
|
|
111
107
|
"types": "./components/input/index.d.ts",
|
|
112
108
|
"default": "./fesm2022/quang-components-input.mjs"
|
|
113
109
|
},
|
|
110
|
+
"./components/date": {
|
|
111
|
+
"types": "./components/date/index.d.ts",
|
|
112
|
+
"default": "./fesm2022/quang-components-date.mjs"
|
|
113
|
+
},
|
|
114
114
|
"./components/paginator": {
|
|
115
115
|
"types": "./components/paginator/index.d.ts",
|
|
116
116
|
"default": "./fesm2022/quang-components-paginator.mjs"
|
|
@@ -119,22 +119,18 @@
|
|
|
119
119
|
"types": "./components/select/index.d.ts",
|
|
120
120
|
"default": "./fesm2022/quang-components-select.mjs"
|
|
121
121
|
},
|
|
122
|
-
"./components/shared": {
|
|
123
|
-
"types": "./components/shared/index.d.ts",
|
|
124
|
-
"default": "./fesm2022/quang-components-shared.mjs"
|
|
125
|
-
},
|
|
126
122
|
"./components/table": {
|
|
127
123
|
"types": "./components/table/index.d.ts",
|
|
128
124
|
"default": "./fesm2022/quang-components-table.mjs"
|
|
129
125
|
},
|
|
126
|
+
"./components/shared": {
|
|
127
|
+
"types": "./components/shared/index.d.ts",
|
|
128
|
+
"default": "./fesm2022/quang-components-shared.mjs"
|
|
129
|
+
},
|
|
130
130
|
"./components/wysiwyg": {
|
|
131
131
|
"types": "./components/wysiwyg/index.d.ts",
|
|
132
132
|
"default": "./fesm2022/quang-components-wysiwyg.mjs"
|
|
133
133
|
},
|
|
134
|
-
"./overlay/shared": {
|
|
135
|
-
"types": "./overlay/shared/index.d.ts",
|
|
136
|
-
"default": "./fesm2022/quang-overlay-shared.mjs"
|
|
137
|
-
},
|
|
138
134
|
"./overlay/modal": {
|
|
139
135
|
"types": "./overlay/modal/index.d.ts",
|
|
140
136
|
"default": "./fesm2022/quang-overlay-modal.mjs"
|
|
@@ -150,6 +146,10 @@
|
|
|
150
146
|
"./overlay/tooltip": {
|
|
151
147
|
"types": "./overlay/tooltip/index.d.ts",
|
|
152
148
|
"default": "./fesm2022/quang-overlay-tooltip.mjs"
|
|
149
|
+
},
|
|
150
|
+
"./overlay/shared": {
|
|
151
|
+
"types": "./overlay/shared/index.d.ts",
|
|
152
|
+
"default": "./fesm2022/quang-overlay-shared.mjs"
|
|
153
153
|
}
|
|
154
154
|
}
|
|
155
155
|
}
|