@vallift/ngl 0.0.24 → 0.0.26
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.
|
@@ -7,7 +7,7 @@ export declare class ContextMenuButtonComponent implements OnDestroy {
|
|
|
7
7
|
overlay: Overlay;
|
|
8
8
|
dialog: Dialog;
|
|
9
9
|
actions: import("@angular/core").InputSignal<ContextMenuButtonAction[] | undefined>;
|
|
10
|
-
positionPreference: import("@angular/core").InputSignal<"topLeft" | "
|
|
10
|
+
positionPreference: import("@angular/core").InputSignal<"topLeft" | "topRight" | "topCenter" | "bottomLeft" | "bottomRight" | "bottomCenter" | "leftTop" | "leftCenter" | "leftBottom" | "rightTop" | "rightCenter" | "rightBottom" | "center">;
|
|
11
11
|
onActionClicked: import("@angular/core").OutputEmitterRef<string>;
|
|
12
12
|
private basePanelClass;
|
|
13
13
|
private dialogRef?;
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
import { Type } from '@angular/core';
|
|
1
|
+
import { EventEmitter, Type, OnDestroy } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
|
-
export declare class OpenFloatingMenuDirective {
|
|
3
|
+
export declare class OpenFloatingMenuDirective implements OnDestroy {
|
|
4
4
|
private elementRef;
|
|
5
5
|
private overlayService;
|
|
6
6
|
component: Type<unknown>;
|
|
7
7
|
floatingMenuPositionPreference: 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
|
|
8
|
+
floatingMenuData: any;
|
|
9
|
+
onFloatingMenuActionPerformed: EventEmitter<{
|
|
10
|
+
actionKey: string;
|
|
11
|
+
data: any;
|
|
12
|
+
}>;
|
|
13
|
+
private overlaySub?;
|
|
14
|
+
ngOnDestroy(): void;
|
|
8
15
|
onClick(): void;
|
|
9
16
|
static ɵfac: i0.ɵɵFactoryDeclaration<OpenFloatingMenuDirective, never>;
|
|
10
|
-
static ɵdir: i0.ɵɵDirectiveDeclaration<OpenFloatingMenuDirective, "[libOpenFloatingMenu]", never, { "component": { "alias": "libOpenFloatingMenu"; "required": false; }; "floatingMenuPositionPreference": { "alias": "floatingMenuPositionPreference"; "required": false; }; }, {}, never, never, true, never>;
|
|
17
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<OpenFloatingMenuDirective, "[libOpenFloatingMenu]", never, { "component": { "alias": "libOpenFloatingMenu"; "required": false; }; "floatingMenuPositionPreference": { "alias": "floatingMenuPositionPreference"; "required": false; }; "floatingMenuData": { "alias": "floatingMenuData"; "required": false; }; }, { "onFloatingMenuActionPerformed": "onFloatingMenuActionPerformed"; }, never, never, true, never>;
|
|
11
18
|
}
|
package/fesm2022/vallift-ngl.mjs
CHANGED
|
@@ -2316,7 +2316,7 @@ class ColorPickerComponent extends BaseControlValueAccessorV3 {
|
|
|
2316
2316
|
this.setHexColor(color);
|
|
2317
2317
|
}
|
|
2318
2318
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
2319
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <div class=\"mt-4\">\n
|
|
2319
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n @if(enableAdditionalColor()) {\n <div class=\"mt-4\">\n @for (row of getColorRows(); let $isLast = $last; track $index) {\n <div class=\"grid grid-cols-8 gap-2 mb-1\">\n @for (color of row; track $index) {\n <div\n (click)=\"onColorSelected(color)\"\n class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n [style.background-color]=\"color\">\n </div>\n }\n </div>\n\n <!-- Separator line unless it's the last row -->\n @if (!$isLast) {\n <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n }\n }\n </div>\n }\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
2320
2320
|
}
|
|
2321
2321
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, decorators: [{
|
|
2322
2322
|
type: Component,
|
|
@@ -2325,7 +2325,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2325
2325
|
NgStyle,
|
|
2326
2326
|
FormsModule,
|
|
2327
2327
|
NgClass
|
|
2328
|
-
], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n <div class=\"mt-4\">\n
|
|
2328
|
+
], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n <div [style.width]=\"width()\">\n\n <!--Saturation and Lightness-->\n <div\n class=\"sl\"\n [style.height]=\"height()\"\n [style.width]=\"width()\"\n colorPickerSlider\n [rgX]=\"1\"\n [rgY]=\"1\"\n (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n [style.background-color]=\"hueSliderColor()\">\n\n <!--Saturation & Lightness pointer-->\n <div\n class=\"sl-pointer absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white\"\n [style.left.px]=\"slider().s\"\n [style.top.px]=\"slider().v\">\n </div>\n\n </div>\n\n <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n <!--Selected Color-->\n <div class=\"flex gap-5 items-center\">\n\n <!-- <div class=\"relative\">-->\n <!-- <div class=\"selected-color-background\"></div>-->\n <!-- <div-->\n <!-- class=\"h-10 w-10 rounded-xl selected-color\"-->\n <!-- [style.background-color]=\"selectedColor()\">-->\n <!-- </div>-->\n <!-- </div>-->\n\n\n <div class=\"flex flex-col w-full gap-4\">\n <div #hueSlider\n class=\"hue\"\n colorPickerSlider\n (valueChanged)=\"onSliderChange('hue', $event)\"\n [rgX]=\"1\">\n <div class=\"hue-pointer absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300\"\n [style.left.px]=\"slider().h\"></div>\n </div>\n\n @if(enableAlpha()) {\n <div #alphaSlider\n class=\"alpha\"\n colorPickerSlider\n [rgX]=\"1\"\n (valueChanged)=\"onSliderChange('alpha', $event)\">\n <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n <div class=\"alpha-pointer\"\n [style.left.px]=\"slider().a\"></div>\n </div>\n }\n </div>\n\n </div>\n\n <div class=\"flex items-center gap-3\">\n <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n </div>\n @if (isTooltip()) {\n <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n (click)=\"onApplyCLicked()\">Apply\n </div>\n }\n </div>\n </div>\n\n </div>\n\n @if(enableAdditionalColor()) {\n <div class=\"mt-4\">\n @for (row of getColorRows(); let $isLast = $last; track $index) {\n <div class=\"grid grid-cols-8 gap-2 mb-1\">\n @for (color of row; track $index) {\n <div\n (click)=\"onColorSelected(color)\"\n class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n [style.background-color]=\"color\">\n </div>\n }\n </div>\n\n <!-- Separator line unless it's the last row -->\n @if (!$isLast) {\n <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n }\n }\n </div>\n }\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"] }]
|
|
2329
2329
|
}], propDecorators: { controls: [{
|
|
2330
2330
|
type: Input
|
|
2331
2331
|
}], colorChanged: [{
|
|
@@ -3151,15 +3151,30 @@ class OpenFloatingMenuDirective {
|
|
|
3151
3151
|
overlayService = inject(OverlayService);
|
|
3152
3152
|
component;
|
|
3153
3153
|
floatingMenuPositionPreference = 'bottomCenter';
|
|
3154
|
+
floatingMenuData;
|
|
3155
|
+
onFloatingMenuActionPerformed = new EventEmitter();
|
|
3156
|
+
overlaySub;
|
|
3157
|
+
ngOnDestroy() {
|
|
3158
|
+
this.overlaySub?.unsubscribe();
|
|
3159
|
+
}
|
|
3154
3160
|
onClick() {
|
|
3155
3161
|
if (!this.component)
|
|
3156
3162
|
return;
|
|
3157
|
-
this.overlayService.openNearElement(this.component, this.elementRef.nativeElement, {
|
|
3163
|
+
const overlayRef = this.overlayService.openNearElement(this.component, this.elementRef.nativeElement, {
|
|
3158
3164
|
positionPreference: this.floatingMenuPositionPreference,
|
|
3165
|
+
data: this.floatingMenuData,
|
|
3159
3166
|
});
|
|
3167
|
+
if (this.overlaySub) {
|
|
3168
|
+
this.overlaySub.unsubscribe();
|
|
3169
|
+
}
|
|
3170
|
+
if (overlayRef?.closed) {
|
|
3171
|
+
this.overlaySub = overlayRef.closed.subscribe((result) => {
|
|
3172
|
+
this.onFloatingMenuActionPerformed.emit(result);
|
|
3173
|
+
});
|
|
3174
|
+
}
|
|
3160
3175
|
}
|
|
3161
3176
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OpenFloatingMenuDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
3162
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: OpenFloatingMenuDirective, isStandalone: true, selector: "[libOpenFloatingMenu]", inputs: { component: ["libOpenFloatingMenu", "component"], floatingMenuPositionPreference: "floatingMenuPositionPreference" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
3177
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: OpenFloatingMenuDirective, isStandalone: true, selector: "[libOpenFloatingMenu]", inputs: { component: ["libOpenFloatingMenu", "component"], floatingMenuPositionPreference: "floatingMenuPositionPreference", floatingMenuData: "floatingMenuData" }, outputs: { onFloatingMenuActionPerformed: "onFloatingMenuActionPerformed" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
|
|
3163
3178
|
}
|
|
3164
3179
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: OpenFloatingMenuDirective, decorators: [{
|
|
3165
3180
|
type: Directive,
|
|
@@ -3172,6 +3187,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
3172
3187
|
args: ['libOpenFloatingMenu']
|
|
3173
3188
|
}], floatingMenuPositionPreference: [{
|
|
3174
3189
|
type: Input
|
|
3190
|
+
}], floatingMenuData: [{
|
|
3191
|
+
type: Input
|
|
3192
|
+
}], onFloatingMenuActionPerformed: [{
|
|
3193
|
+
type: Output
|
|
3175
3194
|
}], onClick: [{
|
|
3176
3195
|
type: HostListener,
|
|
3177
3196
|
args: ['click']
|