fancy-ui-core 0.0.8 → 18.0.0
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/esm2022/lib/button/button.component.mjs +15 -17
- package/esm2022/lib/floating-action-button/floating-action-button.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/provide.mjs +3 -3
- package/fesm2022/fancy-ui-core.mjs +22 -24
- package/fesm2022/fancy-ui-core.mjs.map +1 -1
- package/lib/button/button.component.d.ts +5 -5
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Component,
|
|
1
|
+
import { Component, input, output, viewChild } from '@angular/core';
|
|
2
2
|
import { NgClass } from '@angular/common';
|
|
3
3
|
import { timer } from 'rxjs';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
@@ -9,29 +9,27 @@ export class ButtonComponent {
|
|
|
9
9
|
/** Flag to show the butto in a disabled state. */
|
|
10
10
|
this.disabled = input(false);
|
|
11
11
|
/** An event called if the button is tapped. */
|
|
12
|
-
this.tap =
|
|
13
|
-
this.
|
|
14
|
-
this.
|
|
12
|
+
this.tap = output();
|
|
13
|
+
this._waveSpan = viewChild('wave');
|
|
14
|
+
this._animate = false;
|
|
15
15
|
}
|
|
16
|
-
|
|
16
|
+
_click(event) {
|
|
17
17
|
if (!this.disabled()) {
|
|
18
|
-
const waveSpan = this.
|
|
18
|
+
const waveSpan = this._waveSpan();
|
|
19
19
|
if (waveSpan) {
|
|
20
20
|
waveSpan.nativeElement.style.left = event.offsetX + 'px';
|
|
21
21
|
waveSpan.nativeElement.style.top = event.offsetY + 'px';
|
|
22
22
|
}
|
|
23
|
-
this.
|
|
24
|
-
timer(800).subscribe(() => this.
|
|
25
|
-
this.tap.
|
|
23
|
+
this._animate = true;
|
|
24
|
+
timer(800).subscribe(() => this._animate = false);
|
|
25
|
+
this.tap.emit();
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.3", type: ButtonComponent, isStandalone: true, selector: "fui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tap: "tap" }, viewQueries: [{ propertyName: "_waveSpan", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<button (click)=\"_click($event)\" [disabled]=\"disabled()\" [class.bg-primary]=\"!disabled()\" [class.bg-outline]=\"disabled()\" class=\"rounded overflow-hidden group relative hover:shadow\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !_animate, 'bg-primary': _animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !_animate}\"></span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
|
-
args: [{ selector: 'fui-button', standalone: true, imports: [NgClass], template: "<button (click)=\"
|
|
34
|
-
}]
|
|
35
|
-
|
|
36
|
-
}] } });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2ZhbmN5LXVpLWNvcmUvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2ZhbmN5LXVpLWNvcmUvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsWUFBWSxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzlGLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMxQyxPQUFPLEVBQUUsS0FBSyxFQUFFLE1BQU0sTUFBTSxDQUFDOztBQVE3QixNQUFNLE9BQU8sZUFBZTtJQU41QjtRQU9FLCtCQUErQjtRQUMvQixVQUFLLEdBQUcsS0FBSyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2xCLGtEQUFrRDtRQUNsRCxhQUFRLEdBQUcsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ3hCLCtDQUErQztRQUUvQyxRQUFHLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztRQUUvQixhQUFRLEdBQUcsU0FBUyxDQUFhLE1BQU0sQ0FBQyxDQUFDO1FBRXpDLFlBQU8sR0FBRyxLQUFLLENBQUM7S0FnQmpCO0lBZEMsS0FBSyxDQUFDLEtBQTBDO1FBQzlDLElBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQ25CLENBQUM7WUFDQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDakMsSUFBRyxRQUFRLEVBQUUsQ0FBQztnQkFDWixRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7Z0JBQ3pELFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztZQUMxRCxDQUFDO1lBQ0QsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7WUFDcEIsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLEtBQUssQ0FBQyxDQUFDO1lBQ2pELElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDbEIsQ0FBQztJQUNILENBQUM7OEdBekJVLGVBQWU7a0dBQWYsZUFBZSxzZENWNUIsMmVBSUEsNENER1ksT0FBTzs7MkZBR04sZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUNQLENBQUMsT0FBTyxDQUFDOzhCQVVsQixHQUFHO3NCQURGLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgT3V0cHV0LCBpbnB1dCwgdmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE5nQ2xhc3MgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyB0aW1lciB9IGZyb20gJ3J4anMnO1xyXG5cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICdmdWktYnV0dG9uJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtOZ0NsYXNzXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vYnV0dG9uLmNvbXBvbmVudC5odG1sJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgQnV0dG9uQ29tcG9uZW50IHtcclxuICAvKiogVGhlIGxhYmVsIG9mIHRoZSBCdXR0b24uICovXHJcbiAgbGFiZWwgPSBpbnB1dCgnJyk7XHJcbiAgLyoqIEZsYWcgdG8gc2hvdyB0aGUgYnV0dG8gaW4gYSBkaXNhYmxlZCBzdGF0ZS4gKi9cclxuICBkaXNhYmxlZCA9IGlucHV0KGZhbHNlKTtcclxuICAvKiogQW4gZXZlbnQgY2FsbGVkIGlmIHRoZSBidXR0b24gaXMgdGFwcGVkLiAqL1xyXG4gIEBPdXRwdXQoKVxyXG4gIHRhcCA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcclxuXHJcbiAgd2F2ZVNwYW4gPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZj4oJ3dhdmUnKTtcclxuXHJcbiAgYW5pbWF0ZSA9IGZhbHNlO1xyXG5cclxuICBjbGljayhldmVudDogeyBvZmZzZXRYOiBudW1iZXIsIG9mZnNldFk6IG51bWJlcn0pIHtcclxuICAgIGlmKCF0aGlzLmRpc2FibGVkKCkpXHJcbiAgICB7XHJcbiAgICAgIGNvbnN0IHdhdmVTcGFuID0gdGhpcy53YXZlU3BhbigpO1xyXG4gICAgICBpZih3YXZlU3Bhbikge1xyXG4gICAgICAgIHdhdmVTcGFuLm5hdGl2ZUVsZW1lbnQuc3R5bGUubGVmdCA9IGV2ZW50Lm9mZnNldFggKyAncHgnO1xyXG4gICAgICAgIHdhdmVTcGFuLm5hdGl2ZUVsZW1lbnQuc3R5bGUudG9wID0gZXZlbnQub2Zmc2V0WSArICdweCc7XHJcbiAgICAgIH1cclxuICAgICAgdGhpcy5hbmltYXRlID0gdHJ1ZTtcclxuICAgICAgdGltZXIoODAwKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5hbmltYXRlID0gZmFsc2UpO1xyXG4gICAgICB0aGlzLnRhcC5uZXh0KCk7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iLCI8YnV0dG9uIChjbGljayk9XCJjbGljaygkZXZlbnQpXCIgW2Rpc2FibGVkXT1cImRpc2FibGVkKClcIiBbY2xhc3MuYmctcHJpbWFyeV09XCIhZGlzYWJsZWQoKVwiIFtjbGFzcy5iZy1vdXRsaW5lXT1cImRpc2FibGVkKClcIiBjbGFzcz1cInJvdW5kZWQgb3ZlcmZsb3ctaGlkZGVuIGdyb3VwIHJlbGF0aXZlIGhvdmVyOnNoYWRvd1wiID5cclxuICAgIDxkaXYgY2xhc3M9XCJ0ZXh0LW9uLXByaW1hcnkgcC1jb21wb25lbnQgcm91bmRlZFwiIFtuZ0NsYXNzXT1cInsnZ3JvdXAtaG92ZXI6YmctaG92ZXInOiAhYW5pbWF0ZSwgJ2JnLXByaW1hcnknOiBhbmltYXRlfVwiPnt7bGFiZWwoKX19PC9kaXY+XHJcbiAgICA8c3BhbiAjd2F2ZSBjbGFzcz1cImFic29sdXRlIHctZnVsbCBoLWZ1bGwgcm91bmRlZC1bNTAlXSBiZy10aW50IGFuaW1hdGUtcmlwcGxlXCIgW25nQ2xhc3NdPVwieydoaWRkZW4nOiAhYW5pbWF0ZX1cIj48L3NwYW4+XHJcbjwvYnV0dG9uPlxyXG4iXX0=
|
|
33
|
+
args: [{ selector: 'fui-button', standalone: true, imports: [NgClass], template: "<button (click)=\"_click($event)\" [disabled]=\"disabled()\" [class.bg-primary]=\"!disabled()\" [class.bg-outline]=\"disabled()\" class=\"rounded overflow-hidden group relative hover:shadow\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !_animate, 'bg-primary': _animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !_animate}\"></span>\r\n</button>\r\n" }]
|
|
34
|
+
}] });
|
|
35
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2ZhbmN5LXVpLWNvcmUvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2ZhbmN5LXVpLWNvcmUvc3JjL2xpYi9idXR0b24vYnV0dG9uLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWMsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDaEYsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzFDLE9BQU8sRUFBRSxLQUFLLEVBQUUsTUFBTSxNQUFNLENBQUM7O0FBUTdCLE1BQU0sT0FBTyxlQUFlO0lBTjVCO1FBT0UsK0JBQStCO1FBQy9CLFVBQUssR0FBRyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDbEIsa0RBQWtEO1FBQ2xELGFBQVEsR0FBRyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDeEIsK0NBQStDO1FBQy9DLFFBQUcsR0FBRyxNQUFNLEVBQVEsQ0FBQztRQUVyQixjQUFTLEdBQUcsU0FBUyxDQUFhLE1BQU0sQ0FBQyxDQUFDO1FBRTFDLGFBQVEsR0FBRyxLQUFLLENBQUM7S0FnQmxCO0lBZEMsTUFBTSxDQUFDLEtBQTBDO1FBQy9DLElBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLEVBQ25CLENBQUM7WUFDQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDbEMsSUFBRyxRQUFRLEVBQUUsQ0FBQztnQkFDWixRQUFRLENBQUMsYUFBYSxDQUFDLEtBQUssQ0FBQyxJQUFJLEdBQUcsS0FBSyxDQUFDLE9BQU8sR0FBRyxJQUFJLENBQUM7Z0JBQ3pELFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxLQUFLLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQztZQUMxRCxDQUFDO1lBQ0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUM7WUFDckIsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQyxDQUFDO1lBQ2xELElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDbEIsQ0FBQztJQUNILENBQUM7OEdBeEJVLGVBQWU7a0dBQWYsZUFBZSx1ZENWNUIsK2VBSUEsNENER1ksT0FBTzs7MkZBR04sZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUNQLENBQUMsT0FBTyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBpbnB1dCwgb3V0cHV0LCB2aWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTmdDbGFzcyB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IHRpbWVyIH0gZnJvbSAncnhqcyc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2Z1aS1idXR0b24nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW05nQ2xhc3NdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b24uY29tcG9uZW50Lmh0bWwnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBCdXR0b25Db21wb25lbnQge1xyXG4gIC8qKiBUaGUgbGFiZWwgb2YgdGhlIEJ1dHRvbi4gKi9cclxuICBsYWJlbCA9IGlucHV0KCcnKTtcclxuICAvKiogRmxhZyB0byBzaG93IHRoZSBidXR0byBpbiBhIGRpc2FibGVkIHN0YXRlLiAqL1xyXG4gIGRpc2FibGVkID0gaW5wdXQoZmFsc2UpO1xyXG4gIC8qKiBBbiBldmVudCBjYWxsZWQgaWYgdGhlIGJ1dHRvbiBpcyB0YXBwZWQuICovXHJcbiAgdGFwID0gb3V0cHV0PHZvaWQ+KCk7XHJcblxyXG4gIF93YXZlU3BhbiA9IHZpZXdDaGlsZDxFbGVtZW50UmVmPignd2F2ZScpO1xyXG5cclxuICBfYW5pbWF0ZSA9IGZhbHNlO1xyXG5cclxuICBfY2xpY2soZXZlbnQ6IHsgb2Zmc2V0WDogbnVtYmVyLCBvZmZzZXRZOiBudW1iZXJ9KSB7XHJcbiAgICBpZighdGhpcy5kaXNhYmxlZCgpKVxyXG4gICAge1xyXG4gICAgICBjb25zdCB3YXZlU3BhbiA9IHRoaXMuX3dhdmVTcGFuKCk7XHJcbiAgICAgIGlmKHdhdmVTcGFuKSB7XHJcbiAgICAgICAgd2F2ZVNwYW4ubmF0aXZlRWxlbWVudC5zdHlsZS5sZWZ0ID0gZXZlbnQub2Zmc2V0WCArICdweCc7XHJcbiAgICAgICAgd2F2ZVNwYW4ubmF0aXZlRWxlbWVudC5zdHlsZS50b3AgPSBldmVudC5vZmZzZXRZICsgJ3B4JztcclxuICAgICAgfVxyXG4gICAgICB0aGlzLl9hbmltYXRlID0gdHJ1ZTtcclxuICAgICAgdGltZXIoODAwKS5zdWJzY3JpYmUoKCkgPT4gdGhpcy5fYW5pbWF0ZSA9IGZhbHNlKTtcclxuICAgICAgdGhpcy50YXAuZW1pdCgpO1xyXG4gICAgfVxyXG4gIH1cclxuXHJcbn1cclxuIiwiPGJ1dHRvbiAoY2xpY2spPVwiX2NsaWNrKCRldmVudClcIiBbZGlzYWJsZWRdPVwiZGlzYWJsZWQoKVwiIFtjbGFzcy5iZy1wcmltYXJ5XT1cIiFkaXNhYmxlZCgpXCIgW2NsYXNzLmJnLW91dGxpbmVdPVwiZGlzYWJsZWQoKVwiIGNsYXNzPVwicm91bmRlZCBvdmVyZmxvdy1oaWRkZW4gZ3JvdXAgcmVsYXRpdmUgaG92ZXI6c2hhZG93XCIgPlxyXG4gICAgPGRpdiBjbGFzcz1cInRleHQtb24tcHJpbWFyeSBwLWNvbXBvbmVudCByb3VuZGVkXCIgW25nQ2xhc3NdPVwieydncm91cC1ob3ZlcjpiZy1ob3Zlcic6ICFfYW5pbWF0ZSwgJ2JnLXByaW1hcnknOiBfYW5pbWF0ZX1cIj57e2xhYmVsKCl9fTwvZGl2PlxyXG4gICAgPHNwYW4gI3dhdmUgY2xhc3M9XCJhYnNvbHV0ZSB3LWZ1bGwgaC1mdWxsIHJvdW5kZWQtWzUwJV0gYmctdGludCBhbmltYXRlLXJpcHBsZVwiIFtuZ0NsYXNzXT1cInsnaGlkZGVuJzogIV9hbmltYXRlfVwiPjwvc3Bhbj5cclxuPC9idXR0b24+XHJcbiJdfQ==
|
|
@@ -25,10 +25,10 @@ export class FloatingActionButtonComponent {
|
|
|
25
25
|
this.tap.next();
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FloatingActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.3", type: FloatingActionButtonComponent, isStandalone: true, selector: "fui-floating-action-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tap: "tap" }, viewQueries: [{ propertyName: "waveSpan", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<button (click)=\"click($event)\" \r\n [disabled]=\"disabled()\" \r\n [class.bg-primary]=\"!disabled()\" \r\n [class.bg-outline]=\"disabled()\" \r\n class=\"rounded-md overflow-hidden group hover:shadow-xl fixed bottom-rim right-rim z-10 shadow-md\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !animate, 'bg-primary': animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !animate}\"></span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
33
|
args: [{ selector: 'fui-floating-action-button', standalone: true, imports: [NgClass], template: "<button (click)=\"click($event)\" \r\n [disabled]=\"disabled()\" \r\n [class.bg-primary]=\"!disabled()\" \r\n [class.bg-outline]=\"disabled()\" \r\n class=\"rounded-md overflow-hidden group hover:shadow-xl fixed bottom-rim right-rim z-10 shadow-md\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !animate, 'bg-primary': animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !animate}\"></span>\r\n</button>\r\n" }]
|
|
34
34
|
}], propDecorators: { tap: [{
|
|
@@ -5,10 +5,10 @@ export class IconComponent {
|
|
|
5
5
|
constructor() {
|
|
6
6
|
this.name = input.required();
|
|
7
7
|
}
|
|
8
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
8
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.3", type: IconComponent, isStandalone: true, selector: "fui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-icon [name]="name()"></ng-icon>`, isInline: true, dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
|
|
10
10
|
}
|
|
11
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
11
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IconComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
13
|
args: [{
|
|
14
14
|
selector: 'fui-icon',
|
package/esm2022/lib/provide.mjs
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { provideIcons, provideNgIconsConfig } from '@ng-icons/core';
|
|
2
2
|
import { heroArrowLeft, heroUser } from '@ng-icons/heroicons/outline';
|
|
3
|
-
import { matMoreVertOutline } from '@ng-icons/material-icons/outline';
|
|
3
|
+
import { matArrowDropDownOutline, matArrowDropUpOutline, matMoreVertOutline } from '@ng-icons/material-icons/outline';
|
|
4
4
|
export function provideFancyUi() {
|
|
5
5
|
return [
|
|
6
|
-
provideIcons({ heroArrowLeft, heroUser, matMoreVertOutline }),
|
|
6
|
+
provideIcons({ heroArrowLeft, heroUser, matMoreVertOutline, matArrowDropUpOutline, matArrowDropDownOutline }),
|
|
7
7
|
provideNgIconsConfig({
|
|
8
8
|
size: '100%',
|
|
9
9
|
}),
|
|
10
10
|
];
|
|
11
11
|
}
|
|
12
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
12
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3BhY2thZ2VzL2ZhbmN5LXVpLWNvcmUvc3JjL2xpYi9wcm92aWRlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBLE9BQU8sRUFBRSxZQUFZLEVBQUUsb0JBQW9CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNwRSxPQUFPLEVBQUUsYUFBYSxFQUFFLFFBQVEsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxxQkFBcUIsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRXRILE1BQU0sVUFBVSxjQUFjO0lBQzFCLE9BQU87UUFDSCxZQUFZLENBQUMsRUFBRSxhQUFhLEVBQUUsUUFBUSxFQUFFLGtCQUFrQixFQUFFLHFCQUFxQixFQUFFLHVCQUF1QixFQUFFLENBQUM7UUFDN0csb0JBQW9CLENBQUM7WUFDakIsSUFBSSxFQUFFLE1BQU07U0FDYixDQUFDO0tBQ1AsQ0FBQztBQUNOLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBQcm92aWRlciB9IGZyb20gXCJAYW5ndWxhci9jb3JlXCI7XHJcbmltcG9ydCB7IHByb3ZpZGVJY29ucywgcHJvdmlkZU5nSWNvbnNDb25maWcgfSBmcm9tICdAbmctaWNvbnMvY29yZSc7XHJcbmltcG9ydCB7IGhlcm9BcnJvd0xlZnQsIGhlcm9Vc2VyIH0gZnJvbSAnQG5nLWljb25zL2hlcm9pY29ucy9vdXRsaW5lJztcclxuaW1wb3J0IHsgbWF0QXJyb3dEcm9wRG93bk91dGxpbmUsIG1hdEFycm93RHJvcFVwT3V0bGluZSwgbWF0TW9yZVZlcnRPdXRsaW5lIH0gZnJvbSAnQG5nLWljb25zL21hdGVyaWFsLWljb25zL291dGxpbmUnO1xyXG5cclxuZXhwb3J0IGZ1bmN0aW9uIHByb3ZpZGVGYW5jeVVpKCk6IFByb3ZpZGVyW10ge1xyXG4gICAgcmV0dXJuIFtcclxuICAgICAgICBwcm92aWRlSWNvbnMoeyBoZXJvQXJyb3dMZWZ0LCBoZXJvVXNlciwgbWF0TW9yZVZlcnRPdXRsaW5lLCBtYXRBcnJvd0Ryb3BVcE91dGxpbmUsIG1hdEFycm93RHJvcERvd25PdXRsaW5lIH0pLFxyXG4gICAgICAgIHByb3ZpZGVOZ0ljb25zQ29uZmlnKHtcclxuICAgICAgICAgICAgc2l6ZTogJzEwMCUnLFxyXG4gICAgICAgICAgfSksXHJcbiAgICBdO1xyXG59XHJcbiJdfQ==
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, Component,
|
|
2
|
+
import { input, Component, output, viewChild, EventEmitter, Output } from '@angular/core';
|
|
3
3
|
import { NgIconComponent, provideIcons, provideNgIconsConfig } from '@ng-icons/core';
|
|
4
4
|
import { NgClass } from '@angular/common';
|
|
5
5
|
import { timer } from 'rxjs';
|
|
6
6
|
import { heroArrowLeft, heroUser } from '@ng-icons/heroicons/outline';
|
|
7
|
-
import { matMoreVertOutline } from '@ng-icons/material-icons/outline';
|
|
7
|
+
import { matMoreVertOutline, matArrowDropUpOutline, matArrowDropDownOutline } from '@ng-icons/material-icons/outline';
|
|
8
8
|
|
|
9
9
|
class IconComponent {
|
|
10
10
|
constructor() {
|
|
11
11
|
this.name = input.required();
|
|
12
12
|
}
|
|
13
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
14
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "
|
|
13
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.3", type: IconComponent, isStandalone: true, selector: "fui-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `<ng-icon [name]="name()"></ng-icon>`, isInline: true, dependencies: [{ kind: "component", type: NgIconComponent, selector: "ng-icon", inputs: ["name", "svg", "size", "strokeWidth", "color"] }] }); }
|
|
15
15
|
}
|
|
16
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
16
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: IconComponent, decorators: [{
|
|
17
17
|
type: Component,
|
|
18
18
|
args: [{
|
|
19
19
|
selector: 'fui-icon',
|
|
@@ -30,31 +30,29 @@ class ButtonComponent {
|
|
|
30
30
|
/** Flag to show the butto in a disabled state. */
|
|
31
31
|
this.disabled = input(false);
|
|
32
32
|
/** An event called if the button is tapped. */
|
|
33
|
-
this.tap =
|
|
34
|
-
this.
|
|
35
|
-
this.
|
|
33
|
+
this.tap = output();
|
|
34
|
+
this._waveSpan = viewChild('wave');
|
|
35
|
+
this._animate = false;
|
|
36
36
|
}
|
|
37
|
-
|
|
37
|
+
_click(event) {
|
|
38
38
|
if (!this.disabled()) {
|
|
39
|
-
const waveSpan = this.
|
|
39
|
+
const waveSpan = this._waveSpan();
|
|
40
40
|
if (waveSpan) {
|
|
41
41
|
waveSpan.nativeElement.style.left = event.offsetX + 'px';
|
|
42
42
|
waveSpan.nativeElement.style.top = event.offsetY + 'px';
|
|
43
43
|
}
|
|
44
|
-
this.
|
|
45
|
-
timer(800).subscribe(() => this.
|
|
46
|
-
this.tap.
|
|
44
|
+
this._animate = true;
|
|
45
|
+
timer(800).subscribe(() => this._animate = false);
|
|
46
|
+
this.tap.emit();
|
|
47
47
|
}
|
|
48
48
|
}
|
|
49
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
49
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.3", type: ButtonComponent, isStandalone: true, selector: "fui-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tap: "tap" }, viewQueries: [{ propertyName: "_waveSpan", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<button (click)=\"_click($event)\" [disabled]=\"disabled()\" [class.bg-primary]=\"!disabled()\" [class.bg-outline]=\"disabled()\" class=\"rounded overflow-hidden group relative hover:shadow\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !_animate, 'bg-primary': _animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !_animate}\"></span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
51
51
|
}
|
|
52
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
53
53
|
type: Component,
|
|
54
|
-
args: [{ selector: 'fui-button', standalone: true, imports: [NgClass], template: "<button (click)=\"
|
|
55
|
-
}]
|
|
56
|
-
type: Output
|
|
57
|
-
}] } });
|
|
54
|
+
args: [{ selector: 'fui-button', standalone: true, imports: [NgClass], template: "<button (click)=\"_click($event)\" [disabled]=\"disabled()\" [class.bg-primary]=\"!disabled()\" [class.bg-outline]=\"disabled()\" class=\"rounded overflow-hidden group relative hover:shadow\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !_animate, 'bg-primary': _animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !_animate}\"></span>\r\n</button>\r\n" }]
|
|
55
|
+
}] });
|
|
58
56
|
|
|
59
57
|
class FloatingActionButtonComponent {
|
|
60
58
|
constructor() {
|
|
@@ -79,10 +77,10 @@ class FloatingActionButtonComponent {
|
|
|
79
77
|
this.tap.next();
|
|
80
78
|
}
|
|
81
79
|
}
|
|
82
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
83
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "
|
|
80
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FloatingActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "18.2.3", type: FloatingActionButtonComponent, isStandalone: true, selector: "fui-floating-action-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tap: "tap" }, viewQueries: [{ propertyName: "waveSpan", first: true, predicate: ["wave"], descendants: true, isSignal: true }], ngImport: i0, template: "<button (click)=\"click($event)\" \r\n [disabled]=\"disabled()\" \r\n [class.bg-primary]=\"!disabled()\" \r\n [class.bg-outline]=\"disabled()\" \r\n class=\"rounded-md overflow-hidden group hover:shadow-xl fixed bottom-rim right-rim z-10 shadow-md\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !animate, 'bg-primary': animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !animate}\"></span>\r\n</button>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
84
82
|
}
|
|
85
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
83
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.3", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
|
|
86
84
|
type: Component,
|
|
87
85
|
args: [{ selector: 'fui-floating-action-button', standalone: true, imports: [NgClass], template: "<button (click)=\"click($event)\" \r\n [disabled]=\"disabled()\" \r\n [class.bg-primary]=\"!disabled()\" \r\n [class.bg-outline]=\"disabled()\" \r\n class=\"rounded-md overflow-hidden group hover:shadow-xl fixed bottom-rim right-rim z-10 shadow-md\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !animate, 'bg-primary': animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !animate}\"></span>\r\n</button>\r\n" }]
|
|
88
86
|
}], propDecorators: { tap: [{
|
|
@@ -91,7 +89,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImpor
|
|
|
91
89
|
|
|
92
90
|
function provideFancyUi() {
|
|
93
91
|
return [
|
|
94
|
-
provideIcons({ heroArrowLeft, heroUser, matMoreVertOutline }),
|
|
92
|
+
provideIcons({ heroArrowLeft, heroUser, matMoreVertOutline, matArrowDropUpOutline, matArrowDropDownOutline }),
|
|
95
93
|
provideNgIconsConfig({
|
|
96
94
|
size: '100%',
|
|
97
95
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fancy-ui-core.mjs","sources":["../../../../packages/fancy-ui-core/src/lib/icon/icon.component.ts","../../../../packages/fancy-ui-core/src/lib/button/button.component.ts","../../../../packages/fancy-ui-core/src/lib/button/button.component.html","../../../../packages/fancy-ui-core/src/lib/floating-action-button/floating-action-button.component.ts","../../../../packages/fancy-ui-core/src/lib/floating-action-button/floating-action-button.component.html","../../../../packages/fancy-ui-core/src/lib/provide.ts","../../../../packages/fancy-ui-core/src/fancy-ui-core.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { NgIconComponent } from '@ng-icons/core';\r\n\r\n@Component({\r\n selector: 'fui-icon',\r\n standalone: true,\r\n imports: [NgIconComponent],\r\n template: `<ng-icon [name]=\"name()\"></ng-icon>`\r\n})\r\nexport class IconComponent {\r\n name = input.required<string>();\r\n}\r\n","import { Component, ElementRef,
|
|
1
|
+
{"version":3,"file":"fancy-ui-core.mjs","sources":["../../../../packages/fancy-ui-core/src/lib/icon/icon.component.ts","../../../../packages/fancy-ui-core/src/lib/button/button.component.ts","../../../../packages/fancy-ui-core/src/lib/button/button.component.html","../../../../packages/fancy-ui-core/src/lib/floating-action-button/floating-action-button.component.ts","../../../../packages/fancy-ui-core/src/lib/floating-action-button/floating-action-button.component.html","../../../../packages/fancy-ui-core/src/lib/provide.ts","../../../../packages/fancy-ui-core/src/fancy-ui-core.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\r\nimport { NgIconComponent } from '@ng-icons/core';\r\n\r\n@Component({\r\n selector: 'fui-icon',\r\n standalone: true,\r\n imports: [NgIconComponent],\r\n template: `<ng-icon [name]=\"name()\"></ng-icon>`\r\n})\r\nexport class IconComponent {\r\n name = input.required<string>();\r\n}\r\n","import { Component, ElementRef, input, output, viewChild } from '@angular/core';\r\nimport { NgClass } from '@angular/common';\r\nimport { timer } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'fui-button',\r\n standalone: true,\r\n imports: [NgClass],\r\n templateUrl: './button.component.html'\r\n})\r\nexport class ButtonComponent {\r\n /** The label of the Button. */\r\n label = input('');\r\n /** Flag to show the butto in a disabled state. */\r\n disabled = input(false);\r\n /** An event called if the button is tapped. */\r\n tap = output<void>();\r\n\r\n _waveSpan = viewChild<ElementRef>('wave');\r\n\r\n _animate = false;\r\n\r\n _click(event: { offsetX: number, offsetY: number}) {\r\n if(!this.disabled())\r\n {\r\n const waveSpan = this._waveSpan();\r\n if(waveSpan) {\r\n waveSpan.nativeElement.style.left = event.offsetX + 'px';\r\n waveSpan.nativeElement.style.top = event.offsetY + 'px';\r\n }\r\n this._animate = true;\r\n timer(800).subscribe(() => this._animate = false);\r\n this.tap.emit();\r\n }\r\n }\r\n\r\n}\r\n","<button (click)=\"_click($event)\" [disabled]=\"disabled()\" [class.bg-primary]=\"!disabled()\" [class.bg-outline]=\"disabled()\" class=\"rounded overflow-hidden group relative hover:shadow\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !_animate, 'bg-primary': _animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !_animate}\"></span>\r\n</button>\r\n","import { Component, ElementRef, EventEmitter, Output, input, viewChild } from '@angular/core';\r\nimport { NgClass } from '@angular/common';\r\nimport { timer } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'fui-floating-action-button',\r\n standalone: true,\r\n imports: [NgClass],\r\n templateUrl: './floating-action-button.component.html'\r\n})\r\nexport class FloatingActionButtonComponent {\r\n /** The label of the Button. */\r\n label = input('');\r\n /** Flag to show the butto in a disabled state. */\r\n disabled = input(false);\r\n /** An event called if the button is tapped. */\r\n @Output()\r\n tap = new EventEmitter<void>();\r\n\r\n waveSpan = viewChild<ElementRef>('wave');\r\n\r\n animate = false;\r\n\r\n click(event: { offsetX: number, offsetY: number}) {\r\n if(!this.disabled())\r\n {\r\n const waveSpan = this.waveSpan();\r\n if(waveSpan) {\r\n waveSpan.nativeElement.style.left = event.offsetX + 'px';\r\n waveSpan.nativeElement.style.top = event.offsetY + 'px';\r\n }\r\n this.animate = true;\r\n timer(800).subscribe(() => this.animate = false);\r\n this.tap.next();\r\n }\r\n }\r\n\r\n}\r\n","<button (click)=\"click($event)\" \r\n [disabled]=\"disabled()\" \r\n [class.bg-primary]=\"!disabled()\" \r\n [class.bg-outline]=\"disabled()\" \r\n class=\"rounded-md overflow-hidden group hover:shadow-xl fixed bottom-rim right-rim z-10 shadow-md\" >\r\n <div class=\"text-on-primary p-component rounded\" [ngClass]=\"{'group-hover:bg-hover': !animate, 'bg-primary': animate}\">{{label()}}</div>\r\n <span #wave class=\"absolute w-full h-full rounded-[50%] bg-tint animate-ripple\" [ngClass]=\"{'hidden': !animate}\"></span>\r\n</button>\r\n","import { Provider } from \"@angular/core\";\r\nimport { provideIcons, provideNgIconsConfig } from '@ng-icons/core';\r\nimport { heroArrowLeft, heroUser } from '@ng-icons/heroicons/outline';\r\nimport { matArrowDropDownOutline, matArrowDropUpOutline, matMoreVertOutline } from '@ng-icons/material-icons/outline';\r\n\r\nexport function provideFancyUi(): Provider[] {\r\n return [\r\n provideIcons({ heroArrowLeft, heroUser, matMoreVertOutline, matArrowDropUpOutline, matArrowDropDownOutline }),\r\n provideNgIconsConfig({\r\n size: '100%',\r\n }),\r\n ];\r\n}\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ElementRef
|
|
1
|
+
import { ElementRef } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export declare class ButtonComponent {
|
|
4
4
|
/** The label of the Button. */
|
|
@@ -6,10 +6,10 @@ export declare class ButtonComponent {
|
|
|
6
6
|
/** Flag to show the butto in a disabled state. */
|
|
7
7
|
disabled: import("@angular/core").InputSignal<boolean>;
|
|
8
8
|
/** An event called if the button is tapped. */
|
|
9
|
-
tap:
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
tap: import("@angular/core").OutputEmitterRef<void>;
|
|
10
|
+
_waveSpan: import("@angular/core").Signal<ElementRef<any> | undefined>;
|
|
11
|
+
_animate: boolean;
|
|
12
|
+
_click(event: {
|
|
13
13
|
offsetX: number;
|
|
14
14
|
offsetY: number;
|
|
15
15
|
}): void;
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fancy-ui-core",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "18.0.0",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/common": "^
|
|
6
|
-
"@angular/core": "^
|
|
5
|
+
"@angular/common": "^18.2.0",
|
|
6
|
+
"@angular/core": "^18.2.0"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"tslib": "^2.3.0"
|