ngx-fancier 1.2.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.
Files changed (5) hide show
  1. package/README.md +78 -0
  2. package/fesm2022/ngx-fancier.mjs +68 -0
  3. package/fesm2022/ngx-fancier.mjs.map +1 -0
  4. package/package.json +34 -0
  5. package/types/ngx-fancier.d.ts +11 -0
package/README.md ADDED
@@ -0,0 +1,78 @@
1
+ # ngx-fancier
2
+
3
+ > Angular SVG wave section separators — standalone component, signal inputs, zero dependencies.
4
+
5
+ [![npm](https://img.shields.io/npm/v/ngx-fancier?color=blue)](https://www.npmjs.com/package/ngx-fancier)
6
+ [![Angular](https://img.shields.io/badge/Angular-22-blueviolet)](https://angular.dev)
7
+ [![license](https://img.shields.io/badge/license-EUPL--1.2-blue)](LICENSE)
8
+
9
+ ---
10
+
11
+ ## Installation
12
+
13
+ ```bash
14
+ npm install ngx-fancier
15
+ ```
16
+
17
+ ---
18
+
19
+ ## Usage
20
+
21
+ Import the standalone component directly into your component:
22
+
23
+ ```ts
24
+ import { NgxFancierComponent } from 'ngx-fancier';
25
+
26
+ @Component({
27
+ standalone: true,
28
+ imports: [NgxFancierComponent],
29
+ template: `
30
+ <section class="hero">...</section>
31
+ <ngx-fancier color="mediumpurple" />
32
+ <section class="content">...</section>
33
+ `
34
+ })
35
+ export class AppComponent {}
36
+ ```
37
+
38
+ ---
39
+
40
+ ## API
41
+
42
+ | Input | Type | Default | Description |
43
+ |---|---|---|---|
44
+ | `color` | `string` | `'currentColor'` | Fill color of the wave. Accepts any valid CSS color value. |
45
+ | `height` | `string` | `'120px'` | Height of the SVG wave. |
46
+ | `flip` | `boolean` | `false` | Flips the wave vertically (useful for bottom separators). |
47
+
48
+ ---
49
+
50
+ ## Examples
51
+
52
+ ### Default wave
53
+ ```html
54
+ <ngx-fancier />
55
+ ```
56
+
57
+ ### Custom color and height
58
+ ```html
59
+ <ngx-fancier color="steelblue" height="200px" />
60
+ ```
61
+
62
+ ### Flipped (bottom separator)
63
+ ```html
64
+ <ngx-fancier color="coral" [flip]="true" />
65
+ ```
66
+
67
+ ### Using CSS custom properties
68
+ ```html
69
+ <ngx-fancier color="var(--primary-color)" />
70
+ ```
71
+
72
+ ---
73
+
74
+ ## Compatibility
75
+
76
+ | ngx-fancier | Angular |
77
+ |---|---|
78
+ | 1.x | >= 22 |
package/fesm2022/ngx-fancier.mjs ADDED
@@ -0,0 +1,68 @@
1
+ import * as i0 from '@angular/core';
2
+ import { input, Component } from '@angular/core';
3
+
4
+ class NgxFancierComponent {
5
+ color = input('currentColor', /* @ts-ignore */
6
+ ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
7
+ height = input('120px', /* @ts-ignore */
8
+ ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
9
+ flip = input(false, /* @ts-ignore */
10
+ ...(ngDevMode ? [{ debugName: "flip" }] : /* istanbul ignore next */ []));
11
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxFancierComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
12
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: NgxFancierComponent, isStandalone: true, selector: "ngx-fancier", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
13
+ <svg
14
+ [class.flipped]="flip()"
15
+ [style.height]="height()"
16
+ data-name="Layer 1"
17
+ xmlns="http://www.w3.org/2000/svg"
18
+ viewBox="0 0 1200 120"
19
+ preserveAspectRatio="none">
20
+ <path
21
+ [style.fill]="color()"
22
+ d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
23
+ opacity=".25"/>
24
+ <path
25
+ [style.fill]="color()"
26
+ d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
27
+ opacity=".5"/>
28
+ <path
29
+ [style.fill]="color()"
30
+ d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"/>
31
+ </svg>
32
+ `, isInline: true, styles: [":host{display:block;width:100%;line-height:0}:host svg{display:block;width:100%}:host svg.flipped{transform:scaleY(-1)}\n"] });
33
+ }
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: NgxFancierComponent, decorators: [{
35
+ type: Component,
36
+ args: [{ selector: 'ngx-fancier', standalone: true, imports: [], template: `
37
+ <svg
38
+ [class.flipped]="flip()"
39
+ [style.height]="height()"
40
+ data-name="Layer 1"
41
+ xmlns="http://www.w3.org/2000/svg"
42
+ viewBox="0 0 1200 120"
43
+ preserveAspectRatio="none">
44
+ <path
45
+ [style.fill]="color()"
46
+ d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
47
+ opacity=".25"/>
48
+ <path
49
+ [style.fill]="color()"
50
+ d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
51
+ opacity=".5"/>
52
+ <path
53
+ [style.fill]="color()"
54
+ d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"/>
55
+ </svg>
56
+ `, styles: [":host{display:block;width:100%;line-height:0}:host svg{display:block;width:100%}:host svg.flipped{transform:scaleY(-1)}\n"] }]
57
+ }], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }] } });
58
+
59
+ /*
60
+ * Public API Surface of ngx-fancier
61
+ */
62
+
63
+ /**
64
+ * Generated bundle index. Do not edit.
65
+ */
66
+
67
+ export { NgxFancierComponent };
68
+ //# sourceMappingURL=ngx-fancier.mjs.map
package/fesm2022/ngx-fancier.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ngx-fancier.mjs","sources":["../../../projects/ngx-fancier/src/lib/ngx-fancier.component.ts","../../../projects/ngx-fancier/src/public-api.ts","../../../projects/ngx-fancier/src/ngx-fancier.ts"],"sourcesContent":["import { Component, input } from '@angular/core';\n\n@Component({\n selector: 'ngx-fancier',\n standalone: true,\n imports: [],\n styleUrl: './ngx-fancier.component.scss',\n template: `\n <svg\n [class.flipped]=\"flip()\"\n [style.height]=\"height()\"\n data-name=\"Layer 1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 1200 120\"\n preserveAspectRatio=\"none\">\n <path\n [style.fill]=\"color()\"\n d=\"M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z\"\n opacity=\".25\"/>\n <path\n [style.fill]=\"color()\"\n d=\"M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z\"\n opacity=\".5\"/>\n <path\n [style.fill]=\"color()\"\n d=\"M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z\"/>\n </svg>\n `\n})\nexport class NgxFancierComponent {\n color = input<string>('currentColor');\n height = input<string>('120px');\n flip = input<boolean>(false);\n}\n","/*\n * Public API Surface of ngx-fancier\n */\n\nexport * from './lib/ngx-fancier.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MA6Ba,mBAAmB,CAAA;IAC9B,KAAK,GAAG,KAAK,CAAS,cAAc;8EAAC;IACrC,MAAM,GAAG,KAAK,CAAS,OAAO;+EAAC;IAC/B,IAAI,GAAG,KAAK,CAAU,KAAK;6EAAC;uGAHjB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,mBAAmB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAtBpB;;;;;;;;;;;;;;;;;;;;AAoBT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,2HAAA,CAAA,EAAA,CAAA;;2FAEU,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBA3B/B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,UAAA,EACX,IAAI,EAAA,OAAA,EACP,EAAE,EAAA,QAAA,EAED;;;;;;;;;;;;;;;;;;;;AAoBT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,2HAAA,CAAA,EAAA;;;AC3BH;;AAEG;;ACFH;;AAEG;;;;"}
package/package.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "name": "ngx-fancier",
3
+ "version": "1.2.0",
4
+ "files": [
5
+ "fesm2022",
6
+ "types",
7
+ "README.md"
8
+ ],
9
+ "peerDependencies": {
10
+ "@angular/common": "^22.0.0",
11
+ "@angular/core": "^22.0.0"
12
+ },
13
+ "dependencies": {
14
+ "tslib": "^2.3.0"
15
+ },
16
+ "license": "EUPL-1.2",
17
+ "sideEffects": false,
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git+https://github.com/ineam/ngx-fancy.git"
21
+ },
22
+ "module": "fesm2022/ngx-fancier.mjs",
23
+ "typings": "types/ngx-fancier.d.ts",
24
+ "exports": {
25
+ "./package.json": {
26
+ "default": "./package.json"
27
+ },
28
+ ".": {
29
+ "types": "./types/ngx-fancier.d.ts",
30
+ "default": "./fesm2022/ngx-fancier.mjs"
31
+ }
32
+ },
33
+ "type": "module"
34
+ }
package/types/ngx-fancier.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import * as _angular_core from '@angular/core';
2
+
3
+ declare class NgxFancierComponent {
4
+ color: _angular_core.InputSignal<string>;
5
+ height: _angular_core.InputSignal<string>;
6
+ flip: _angular_core.InputSignal<boolean>;
7
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgxFancierComponent, never>;
8
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<NgxFancierComponent, "ngx-fancier", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "flip": { "alias": "flip"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
9
+ }
10
+
11
+ export { NgxFancierComponent };