duck-dev-lib 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/fesm2022/duck-dev-lib.mjs +107 -0
- package/fesm2022/duck-dev-lib.mjs.map +1 -0
- package/package.json +23 -0
- package/types/duck-dev-lib.d.ts +31 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# MyUiLib
|
|
2
|
+
|
|
3
|
+
This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
|
|
4
|
+
|
|
5
|
+
## Code scaffolding
|
|
6
|
+
|
|
7
|
+
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
ng generate component component-name
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
ng generate --help
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Building
|
|
20
|
+
|
|
21
|
+
To build the library, run:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
ng build duck-dev-lib
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
|
|
28
|
+
|
|
29
|
+
### Publishing the Library
|
|
30
|
+
|
|
31
|
+
Once the project is built, you can publish your library by following these steps:
|
|
32
|
+
|
|
33
|
+
1. Navigate to the `dist` directory:
|
|
34
|
+
```bash
|
|
35
|
+
cd dist/duck-dev-lib
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
2. Run the `npm publish` command to publish your library to the npm registry:
|
|
39
|
+
```bash
|
|
40
|
+
npm publish
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Running unit tests
|
|
44
|
+
|
|
45
|
+
To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
ng test
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Running end-to-end tests
|
|
52
|
+
|
|
53
|
+
For end-to-end (e2e) testing, run:
|
|
54
|
+
|
|
55
|
+
```bash
|
|
56
|
+
ng e2e
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
|
|
60
|
+
|
|
61
|
+
## Additional Resources
|
|
62
|
+
|
|
63
|
+
For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, computed, Component } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
var ButtonEnumColor;
|
|
5
|
+
(function (ButtonEnumColor) {
|
|
6
|
+
ButtonEnumColor["Orange"] = "orange";
|
|
7
|
+
ButtonEnumColor["Dark"] = "dark";
|
|
8
|
+
ButtonEnumColor["White"] = "white";
|
|
9
|
+
ButtonEnumColor["Gray"] = "gray";
|
|
10
|
+
ButtonEnumColor["Violet"] = "violet";
|
|
11
|
+
})(ButtonEnumColor || (ButtonEnumColor = {}));
|
|
12
|
+
|
|
13
|
+
class ButtonBlurLift {
|
|
14
|
+
textButton = input.required({ ...(ngDevMode ? { debugName: "textButton" } : {}) });
|
|
15
|
+
colorButton = input(ButtonEnumColor.White, { ...(ngDevMode ? { debugName: "colorButton" } : {}) });
|
|
16
|
+
padding = input(null, { ...(ngDevMode ? { debugName: "padding" } : {}) });
|
|
17
|
+
hoverText = input(null, { ...(ngDevMode ? { debugName: "hoverText" } : {}) });
|
|
18
|
+
buttonStyle = computed(() => {
|
|
19
|
+
const color = this.colorButton();
|
|
20
|
+
let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;
|
|
21
|
+
switch (color) {
|
|
22
|
+
case ButtonEnumColor.Violet:
|
|
23
|
+
bgColor = 'var(--dd-base-secondary)';
|
|
24
|
+
hoverColor = 'var(--dd-base-secondary)';
|
|
25
|
+
activeColor = 'var(--dd-base-secondary)';
|
|
26
|
+
textColor = 'var(--dd-gray-0)';
|
|
27
|
+
focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
|
|
28
|
+
borderColor = 'var(--dd-base-secondary)';
|
|
29
|
+
break;
|
|
30
|
+
case ButtonEnumColor.Orange:
|
|
31
|
+
bgColor = 'var(--dd-base-accent-orange)';
|
|
32
|
+
hoverColor = 'var(--dd-base-active-orange)';
|
|
33
|
+
activeColor = 'var(--dd-base-accent-yellow)';
|
|
34
|
+
textColor = 'var(--dd-gray-0)';
|
|
35
|
+
focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
|
|
36
|
+
borderColor = 'var(--dd-base-active-orange)';
|
|
37
|
+
break;
|
|
38
|
+
case ButtonEnumColor.White:
|
|
39
|
+
bgColor = 'var(--dd-base-0)';
|
|
40
|
+
hoverColor = 'var(--dd-base-100)';
|
|
41
|
+
activeColor = 'var(--dd-base-200)';
|
|
42
|
+
textColor = 'var(--dd-base-600)';
|
|
43
|
+
focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
|
|
44
|
+
borderColor = 'var(--dd-base-300)';
|
|
45
|
+
break;
|
|
46
|
+
case ButtonEnumColor.Gray:
|
|
47
|
+
bgColor = 'var(--dd-base-100)';
|
|
48
|
+
hoverColor = 'var(--dd-base-200)';
|
|
49
|
+
activeColor = 'var(--dd-base-200)';
|
|
50
|
+
textColor = 'var(--dd-base-600)';
|
|
51
|
+
focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
|
|
52
|
+
borderColor = 'var(--dd-base-400)';
|
|
53
|
+
break;
|
|
54
|
+
case ButtonEnumColor.Dark:
|
|
55
|
+
bgColor = 'var(--dd-base-600)';
|
|
56
|
+
hoverColor = 'var(--dd-base-400)';
|
|
57
|
+
activeColor = 'var(--dd-base-300)';
|
|
58
|
+
textColor = 'var(--dd-base-0)';
|
|
59
|
+
focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';
|
|
60
|
+
borderColor = 'var(--dd-base-600)';
|
|
61
|
+
break;
|
|
62
|
+
default:
|
|
63
|
+
bgColor = 'var(--dd-base-0)';
|
|
64
|
+
hoverColor = 'var(--dd-base-100)';
|
|
65
|
+
activeColor = 'var(--dd-base-200)';
|
|
66
|
+
textColor = 'var(--dd-base-600)';
|
|
67
|
+
focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';
|
|
68
|
+
borderColor = 'var(--dd-base-300)';
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
return {
|
|
72
|
+
'--btn-bg-color': bgColor,
|
|
73
|
+
'--btn-border-color': borderColor,
|
|
74
|
+
'--btn-padding': this.padding() || '10px 24px',
|
|
75
|
+
'--btn-hover-color': hoverColor,
|
|
76
|
+
'--btn-active-color': activeColor,
|
|
77
|
+
'--btn-text-color': textColor,
|
|
78
|
+
'--btn-focus-shadow': focusShadow
|
|
79
|
+
};
|
|
80
|
+
}, { ...(ngDevMode ? { debugName: "buttonStyle" } : {}) });
|
|
81
|
+
textLetters = computed(() => {
|
|
82
|
+
return this.textButton()
|
|
83
|
+
.split('')
|
|
84
|
+
.map((char) => (char === ' ' ? '\u00A0' : char));
|
|
85
|
+
}, { ...(ngDevMode ? { debugName: "textLetters" } : {}) });
|
|
86
|
+
hoverTextLetters = computed(() => {
|
|
87
|
+
const hover = this.hoverText();
|
|
88
|
+
return hover ? hover.split('').map((char) => (char === ' ' ? '\u00A0' : char)) : [];
|
|
89
|
+
}, { ...(ngDevMode ? { debugName: "hoverTextLetters" } : {}) });
|
|
90
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
91
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: ButtonBlurLift, isStandalone: true, selector: "duck-dev-button-blur-lift", inputs: { textButton: { classPropertyName: "textButton", publicName: "textButton", isSignal: true, isRequired: true, transformFunction: null }, colorButton: { classPropertyName: "colorButton", publicName: "colorButton", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, hoverText: { classPropertyName: "hoverText", publicName: "hoverText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n type=\"button\"\n class=\"button-blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n <!-- \u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438 -->\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.button-blur-lift{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out;position:relative;overflow:hidden;padding:0}.button-blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.button-blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.button-blur-lift:focus{outline:none}.button-blur-lift:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.button-blur-lift:disabled:hover,.button-blur-lift:disabled:active,.button-blur-lift:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.button-blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.button-blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.button-blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}\n"] });
|
|
92
|
+
}
|
|
93
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: ButtonBlurLift, decorators: [{
|
|
94
|
+
type: Component,
|
|
95
|
+
args: [{ selector: 'duck-dev-button-blur-lift', imports: [], template: "<button\n type=\"button\"\n class=\"button-blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n <!-- \u0422\u0435\u043A\u0441\u0442 \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438 -->\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}:root{--elastic-ease: linear( 0, .2178 2.1%, 1.1144 8.49%, 1.2959 10.7%, 1.3463 11.81%, 1.3705 12.94%, 1.3726, 1.3643 14.48%, 1.3151 16.2%, 1.0317 21.81%, .941 24.01%, .8912 25.91%, .8694 27.84%, .8698 29.21%, .8824 30.71%, 1.0122 38.33%, 1.0357, 1.046 42.71%, 1.0416 45.7%, .9961 53.26%, .9839 57.54%, .9853 60.71%, 1.0012 68.14%, 1.0056 72.24%, .9981 86.66%, 1 100% );--elastic-ease-out: linear( 0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%, 1.0011 81.26%, 1 );--transform-ease: cubic-bezier(.32, .72, 0, 1);--opacity-ease: ease-out}.button-blur-lift{font-style:normal;font-family:Inter,sans-serif;font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;min-width:64px;width:100%;text-wrap:nowrap;background-color:var(--btn-bg-color);color:var(--btn-text-color);border:1px solid var(--btn-border-color);border-radius:69px;cursor:pointer;transition:all .2s ease-in-out,background-color .6s ease-in-out;position:relative;overflow:hidden;padding:0}.button-blur-lift:hover{box-shadow:none;background-color:var(--btn-bg-color)}.button-blur-lift:active{transform:none;background-color:var(--btn-bg-color)}.button-blur-lift:focus{outline:none}.button-blur-lift:disabled{background-color:var(--nx-base-200)!important;color:var(--nx-base-400)!important;cursor:not-allowed;box-shadow:none!important}.button-blur-lift:disabled:hover,.button-blur-lift:disabled:active,.button-blur-lift:disabled:focus{background-color:var(--nx-base-200)!important;transform:none!important}.button-blur-lift__screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.button-blur-lift__container{position:relative;display:flex;align-items:center;justify-content:center;padding:var(--btn-padding);z-index:1;width:100%;height:100%}.button-blur-lift__text{display:flex;position:relative}.button-blur-lift__letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__letter{display:inline-block;transform-origin:center center -.5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__letter[style*=\"--index: 0\"]{position:relative;filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift__letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift__hover-text{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;pointer-events:none}.button-blur-lift__hover-letter-outer{display:inline-block;position:relative;transform-style:preserve-3d;perspective:1000px}.button-blur-lift__hover-letter{display:inline-block;transform-origin:center center .5em;transition:transform .6s cubic-bezier(.32,.72,0,1),filter .6s ease-out,opacity .6s ease-out;will-change:transform,filter,opacity}.button-blur-lift__hover-letter[style*=\"--index: 0\"]{position:relative;filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift__hover-letter[style*=\"--index: 1\"]{position:absolute;top:0;left:0;filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift__hover-letter[style*=\"--index: 2\"]{position:absolute;top:0;left:0;filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift__background{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--btn-bg-color);transition:background-color .3s ease;border-radius:inherit;z-index:0}.button-blur-lift:hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(4px);opacity:0;transform:rotateX(180deg)}.button-blur-lift:hover .button-blur-lift__letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(90deg)}.button-blur-lift:hover .button-blur-lift__letter[style*=\"--index: 2\"]{filter:blur(0px);opacity:0;transform:rotateX(0)}.button-blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 1\"]{filter:blur(2px);opacity:0;transform:rotateX(-90deg)}.button-blur-lift:hover .button-blur-lift__hover-text .button-blur-lift__hover-letter[style*=\"--index: 2\"]{filter:blur(4px);opacity:0;transform:rotateX(-180deg)}.button-blur-lift:hover .button-blur-lift__background{background-color:var(--btn-hover-color)}.button-blur-lift:not(:has(.button-blur-lift__hover-text)):hover .button-blur-lift__letter[style*=\"--index: 0\"]{filter:blur(0px);opacity:1;transform:rotateX(0)}.button-blur-lift__letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 0\"] .button-blur-lift__hover-letter{transition-delay:0s}.button-blur-lift__letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 1\"] .button-blur-lift__hover-letter{transition-delay:.03s}.button-blur-lift__letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 2\"] .button-blur-lift__hover-letter{transition-delay:.06s}.button-blur-lift__letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 3\"] .button-blur-lift__hover-letter{transition-delay:.09s}.button-blur-lift__letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 4\"] .button-blur-lift__hover-letter{transition-delay:.12s}.button-blur-lift__letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 5\"] .button-blur-lift__hover-letter{transition-delay:.15s}.button-blur-lift__letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 6\"] .button-blur-lift__hover-letter{transition-delay:.18s}.button-blur-lift__letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 7\"] .button-blur-lift__hover-letter{transition-delay:.21s}.button-blur-lift__letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 8\"] .button-blur-lift__hover-letter{transition-delay:.24s}.button-blur-lift__letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 9\"] .button-blur-lift__hover-letter{transition-delay:.27s}.button-blur-lift__letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 10\"] .button-blur-lift__hover-letter{transition-delay:.3s}.button-blur-lift__letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 11\"] .button-blur-lift__hover-letter{transition-delay:.33s}.button-blur-lift__letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 12\"] .button-blur-lift__hover-letter{transition-delay:.36s}.button-blur-lift__letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 13\"] .button-blur-lift__hover-letter{transition-delay:.39s}.button-blur-lift__letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 14\"] .button-blur-lift__hover-letter{transition-delay:.42s}.button-blur-lift__letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 15\"] .button-blur-lift__hover-letter{transition-delay:.45s}.button-blur-lift__letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 16\"] .button-blur-lift__hover-letter{transition-delay:.48s}.button-blur-lift__letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 17\"] .button-blur-lift__hover-letter{transition-delay:.51s}.button-blur-lift__letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 18\"] .button-blur-lift__hover-letter{transition-delay:.54s}.button-blur-lift__letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 19\"] .button-blur-lift__hover-letter{transition-delay:.57s}.button-blur-lift__letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 20\"] .button-blur-lift__hover-letter{transition-delay:.6s}.button-blur-lift__letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 21\"] .button-blur-lift__hover-letter{transition-delay:.63s}.button-blur-lift__letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 22\"] .button-blur-lift__hover-letter{transition-delay:.66s}.button-blur-lift__letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 23\"] .button-blur-lift__hover-letter{transition-delay:.69s}.button-blur-lift__letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 24\"] .button-blur-lift__hover-letter{transition-delay:.72s}.button-blur-lift__letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 25\"] .button-blur-lift__hover-letter{transition-delay:.75s}.button-blur-lift__letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 26\"] .button-blur-lift__hover-letter{transition-delay:.78s}.button-blur-lift__letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 27\"] .button-blur-lift__hover-letter{transition-delay:.81s}.button-blur-lift__letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 28\"] .button-blur-lift__hover-letter{transition-delay:.84s}.button-blur-lift__letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 29\"] .button-blur-lift__hover-letter{transition-delay:.87s}.button-blur-lift__letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__letter,.button-blur-lift__hover-letter-outer[style*=\"--index-outer: 30\"] .button-blur-lift__hover-letter{transition-delay:.9s}.button-blur-lift:active .button-blur-lift__background{background-color:var(--btn-active-color)}\n"] }]
|
|
96
|
+
}], propDecorators: { textButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "textButton", required: true }] }], colorButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorButton", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], hoverText: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverText", required: false }] }] } });
|
|
97
|
+
|
|
98
|
+
/*
|
|
99
|
+
* Public API Surface of duck-dev-lib
|
|
100
|
+
*/
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Generated bundle index. Do not edit.
|
|
104
|
+
*/
|
|
105
|
+
|
|
106
|
+
export { ButtonBlurLift, ButtonEnumColor };
|
|
107
|
+
//# sourceMappingURL=duck-dev-lib.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"duck-dev-lib.mjs","sources":["../../../projects/duck-dev-lib/src/lib/shared/enum/button-enum.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-blur-lift/button-blur-lift.ts","../../../projects/duck-dev-lib/src/lib/duck-dev-button/button-blur-lift/button-blur-lift.html","../../../projects/duck-dev-lib/src/public-api.ts","../../../projects/duck-dev-lib/src/duck-dev-lib.ts"],"sourcesContent":["export enum ButtonEnumColor {\n Orange = 'orange',\n Dark = 'dark',\n White = 'white',\n Gray = 'gray',\n Violet = 'violet'\n}\n","import {Component, computed, input} from '@angular/core';\nimport {ButtonEnumColor} from '../../shared';\n\n@Component({\n selector: 'duck-dev-button-blur-lift',\n imports: [],\n templateUrl: './button-blur-lift.html',\n styleUrl: './button-blur-lift.scss',\n})\nexport class ButtonBlurLift {\n public readonly textButton = input.required<string>();\n public readonly colorButton = input<ButtonEnumColor>(ButtonEnumColor.White);\n public readonly padding = input<string | null>(null);\n public readonly hoverText = input<string | null>(null);\n\n protected readonly buttonStyle = computed(() => {\n const color = this.colorButton();\n let bgColor, borderColor, hoverColor, activeColor, textColor, focusShadow;\n\n switch (color) {\n case ButtonEnumColor.Violet:\n bgColor = 'var(--dd-base-secondary)';\n hoverColor = 'var(--dd-base-secondary)';\n activeColor = 'var(--dd-base-secondary)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-secondary)';\n break;\n\n case ButtonEnumColor.Orange:\n bgColor = 'var(--dd-base-accent-orange)';\n hoverColor = 'var(--dd-base-active-orange)';\n activeColor = 'var(--dd-base-accent-yellow)';\n textColor = 'var(--dd-gray-0)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-active-orange)';\n break;\n\n case ButtonEnumColor.White:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n\n case ButtonEnumColor.Gray:\n bgColor = 'var(--dd-base-100)';\n hoverColor = 'var(--dd-base-200)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-400)';\n break;\n\n case ButtonEnumColor.Dark:\n bgColor = 'var(--dd-base-600)';\n hoverColor = 'var(--dd-base-400)';\n activeColor = 'var(--dd-base-300)';\n textColor = 'var(--dd-base-0)';\n focusShadow = '0 0 0 3px rgba(18, 19, 21, 0.3)';\n borderColor = 'var(--dd-base-600)';\n break;\n\n default:\n bgColor = 'var(--dd-base-0)';\n hoverColor = 'var(--dd-base-100)';\n activeColor = 'var(--dd-base-200)';\n textColor = 'var(--dd-base-600)';\n focusShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)';\n borderColor = 'var(--dd-base-300)';\n break;\n }\n\n return {\n '--btn-bg-color': bgColor,\n '--btn-border-color': borderColor,\n '--btn-padding': this.padding() || '10px 24px',\n '--btn-hover-color': hoverColor,\n '--btn-active-color': activeColor,\n '--btn-text-color': textColor,\n '--btn-focus-shadow': focusShadow\n };\n });\n\n protected readonly textLetters = computed(() => {\n return this.textButton()\n .split('')\n .map((char) => (char === ' ' ? '\\u00A0' : char));\n });\n\n protected readonly hoverTextLetters = computed(() => {\n const hover = this.hoverText();\n\n return hover ? hover.split('').map((char) => (char === ' ' ? '\\u00A0' : char)) : [];\n });\n}\n","<button\n type=\"button\"\n class=\"button-blur-lift\"\n [style]=\"buttonStyle()\"\n>\n <span class=\"button-blur-lift__screen-reader-text\">{{ textButton() }}</span>\n <span\n aria-hidden=\"true\"\n class=\"button-blur-lift__container\"\n >\n <span class=\"button-blur-lift__text\">\n @for (letter of textLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </span>\n\n <!-- Текст при наведении -->\n @if (hoverText()) {\n <div class=\"button-blur-lift__hover-text\">\n @for (letter of hoverTextLetters(); track $index) {\n <span\n [style.--index-outer]=\"$index\"\n class=\"button-blur-lift__hover-letter-outer\"\n >\n <span\n [style.--index]=\"2\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"1\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n <span\n [style.--index]=\"0\"\n class=\"button-blur-lift__hover-letter\"\n >\n {{ letter }}\n </span>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"button-blur-lift__background\"></span>\n</button>\n","/*\n * Public API Surface of duck-dev-lib\n */\n\nexport * from './lib/duck-dev-button';\nexport * from './lib/shared';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "duck-dev-lib",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/common": "^21.0.0",
|
|
6
|
+
"@angular/core": "^21.0.0"
|
|
7
|
+
},
|
|
8
|
+
"dependencies": {
|
|
9
|
+
"tslib": "^2.3.0"
|
|
10
|
+
},
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"module": "fesm2022/duck-dev-lib.mjs",
|
|
13
|
+
"typings": "types/duck-dev-lib.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
"./package.json": {
|
|
16
|
+
"default": "./package.json"
|
|
17
|
+
},
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./types/duck-dev-lib.d.ts",
|
|
20
|
+
"default": "./fesm2022/duck-dev-lib.mjs"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as _angular_core from '@angular/core';
|
|
2
|
+
|
|
3
|
+
declare enum ButtonEnumColor {
|
|
4
|
+
Orange = "orange",
|
|
5
|
+
Dark = "dark",
|
|
6
|
+
White = "white",
|
|
7
|
+
Gray = "gray",
|
|
8
|
+
Violet = "violet"
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare class ButtonBlurLift {
|
|
12
|
+
readonly textButton: _angular_core.InputSignal<string>;
|
|
13
|
+
readonly colorButton: _angular_core.InputSignal<ButtonEnumColor>;
|
|
14
|
+
readonly padding: _angular_core.InputSignal<string | null>;
|
|
15
|
+
readonly hoverText: _angular_core.InputSignal<string | null>;
|
|
16
|
+
protected readonly buttonStyle: _angular_core.Signal<{
|
|
17
|
+
'--btn-bg-color': string;
|
|
18
|
+
'--btn-border-color': string;
|
|
19
|
+
'--btn-padding': string;
|
|
20
|
+
'--btn-hover-color': string;
|
|
21
|
+
'--btn-active-color': string;
|
|
22
|
+
'--btn-text-color': string;
|
|
23
|
+
'--btn-focus-shadow': string;
|
|
24
|
+
}>;
|
|
25
|
+
protected readonly textLetters: _angular_core.Signal<string[]>;
|
|
26
|
+
protected readonly hoverTextLetters: _angular_core.Signal<string[]>;
|
|
27
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonBlurLift, never>;
|
|
28
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonBlurLift, "duck-dev-button-blur-lift", never, { "textButton": { "alias": "textButton"; "required": true; "isSignal": true; }; "colorButton": { "alias": "colorButton"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "hoverText": { "alias": "hoverText"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export { ButtonBlurLift, ButtonEnumColor };
|