duck-dev-lib 0.0.28 → 0.0.29
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/fesm2022/{duck-dev-lib-en-mOVobVPA.mjs → duck-dev-lib-en-BfbNUZFJ.mjs} +38 -2
- package/fesm2022/{duck-dev-lib-ru-Vu8xDdcB.mjs.map → duck-dev-lib-en-BfbNUZFJ.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-Vu8xDdcB.mjs → duck-dev-lib-ru-06o10qCz.mjs} +2 -1
- package/fesm2022/{duck-dev-lib-en-mOVobVPA.mjs.map → duck-dev-lib-ru-06o10qCz.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +84 -18
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +17 -5
|
@@ -9,8 +9,43 @@ var tabs = {
|
|
|
9
9
|
notifications: "Notifications",
|
|
10
10
|
badge: "Badges",
|
|
11
11
|
slider: "Slider",
|
|
12
|
+
tooltip: "Tooltip",
|
|
12
13
|
directives: "Directives"
|
|
13
14
|
};
|
|
15
|
+
var tooltipDoc = {
|
|
16
|
+
title: "Duck Dev UI Library - Tooltip",
|
|
17
|
+
basic: {
|
|
18
|
+
title: "Tooltip component",
|
|
19
|
+
description: "A small hint that appears near an element on hover or focus. Uses the same color palette as other components (see Badge colors). Supports 12 placements and delayed close to prevent flicker when moving the cursor between the element and the tooltip.",
|
|
20
|
+
usage: "Usage:",
|
|
21
|
+
inputs: "Input Parameters:",
|
|
22
|
+
examples: "Examples:"
|
|
23
|
+
},
|
|
24
|
+
inputsDesc: {
|
|
25
|
+
text: "<b>text</b>: string — the text inside the tooltip. Use translation keys with the Transloco pipe to localize.",
|
|
26
|
+
color: "<b>color</b>: AccentEnumColor — palette color (e.g. 'Violet', 'Orange', 'White', 'Gray', 'Dark').",
|
|
27
|
+
placement: "<b>placement</b>: 'top' | 'bottom' | 'right' | 'left' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end' — position relative to the trigger.",
|
|
28
|
+
delay: "<b>delayCloseMs</b>: number — delay in milliseconds before the tooltip closes after mouse leaves or focus is lost."
|
|
29
|
+
},
|
|
30
|
+
examples: {
|
|
31
|
+
basic: "Basic",
|
|
32
|
+
violetTop: "Violet (top)",
|
|
33
|
+
orangeRight: "Orange (right)",
|
|
34
|
+
leftStart: "Left-start (gray)",
|
|
35
|
+
bottomEnd: "Bottom-end (white)",
|
|
36
|
+
hover: "Hover me"
|
|
37
|
+
},
|
|
38
|
+
examplesText: {
|
|
39
|
+
basic: "This is a tooltip",
|
|
40
|
+
top: "Tooltip on top",
|
|
41
|
+
right: "Tooltip on the right",
|
|
42
|
+
leftStart: "Tooltip left-start",
|
|
43
|
+
bottomEnd: "Tooltip bottom-end"
|
|
44
|
+
},
|
|
45
|
+
snippets: {
|
|
46
|
+
hello: "Hello tooltip"
|
|
47
|
+
}
|
|
48
|
+
};
|
|
14
49
|
var notifications = {
|
|
15
50
|
title: "Duck Dev UI Library - Notifications",
|
|
16
51
|
quickDemo: "Show notification",
|
|
@@ -430,6 +465,7 @@ var cardDoc = {
|
|
|
430
465
|
};
|
|
431
466
|
var en = {
|
|
432
467
|
tabs: tabs,
|
|
468
|
+
tooltipDoc: tooltipDoc,
|
|
433
469
|
notifications: notifications,
|
|
434
470
|
slider: slider,
|
|
435
471
|
buttons: buttons,
|
|
@@ -443,5 +479,5 @@ var en = {
|
|
|
443
479
|
cardDoc: cardDoc
|
|
444
480
|
};
|
|
445
481
|
|
|
446
|
-
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent };
|
|
447
|
-
//# sourceMappingURL=duck-dev-lib-en-
|
|
482
|
+
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent, tooltipDoc };
|
|
483
|
+
//# sourceMappingURL=duck-dev-lib-en-BfbNUZFJ.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-en-BfbNUZFJ.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -9,6 +9,7 @@ var tabs = {
|
|
|
9
9
|
notifications: "Уведомления",
|
|
10
10
|
badge: "Бейджи",
|
|
11
11
|
slider: "Слайдер",
|
|
12
|
+
tooltip: "Подсказка",
|
|
12
13
|
directives: "Директивы"
|
|
13
14
|
};
|
|
14
15
|
var notifications = {
|
|
@@ -444,4 +445,4 @@ var ru = {
|
|
|
444
445
|
};
|
|
445
446
|
|
|
446
447
|
export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, inputComponent, loaders, notifications, slider, svgComponent, tabs, tabsComponent };
|
|
447
|
-
//# sourceMappingURL=duck-dev-lib-ru-
|
|
448
|
+
//# sourceMappingURL=duck-dev-lib-ru-06o10qCz.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-ru-06o10qCz.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef,
|
|
2
|
+
import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import * as i1$3 from '@angular/common';
|
|
4
4
|
import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
5
5
|
import * as i1$2 from '@jsverse/transloco';
|
|
@@ -2311,9 +2311,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2311
2311
|
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
|
|
2312
2312
|
|
|
2313
2313
|
class DuckDevCardAccent {
|
|
2314
|
-
content = input(null, { ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
2315
2314
|
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2316
|
-
contentHostRef;
|
|
2317
2315
|
cardStyle = computed(() => {
|
|
2318
2316
|
const color = this.color();
|
|
2319
2317
|
let accent = 'var(--dd-base-accent-blue)';
|
|
@@ -2339,15 +2337,12 @@ class DuckDevCardAccent {
|
|
|
2339
2337
|
};
|
|
2340
2338
|
}, { ...(ngDevMode ? { debugName: "cardStyle" } : {}) });
|
|
2341
2339
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardAccent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2342
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardAccent, isStandalone: true, selector: "dd-card-accent", inputs: {
|
|
2340
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevCardAccent, isStandalone: true, selector: "dd-card-accent", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-card-accent\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-accent__content\">\n <ng-content />\n </div>\n</div>\n", styles: [".dd-card-accent{padding:12px 15px;border-radius:6px;border-left:3px solid var(--dd-card-accent-color);line-height:1.5}.dd-card-accent__content{display:block}.dd-card-accent strong{color:var(--dd-card-accent-color);font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2343
2341
|
}
|
|
2344
2342
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardAccent, decorators: [{
|
|
2345
2343
|
type: Component,
|
|
2346
|
-
args: [{ selector: 'dd-card-accent', standalone: true, imports: [NgStyle], template: "<div class=\"dd-card-accent\" [ngStyle]=\"cardStyle()\">\n <div
|
|
2347
|
-
}], propDecorators: {
|
|
2348
|
-
type: ViewChild,
|
|
2349
|
-
args: ['contentHost', { static: true }]
|
|
2350
|
-
}] } });
|
|
2344
|
+
args: [{ selector: 'dd-card-accent', standalone: true, imports: [NgStyle], template: "<div class=\"dd-card-accent\" [ngStyle]=\"cardStyle()\">\n <div class=\"dd-card-accent__content\">\n <ng-content />\n </div>\n</div>\n", styles: [".dd-card-accent{padding:12px 15px;border-radius:6px;border-left:3px solid var(--dd-card-accent-color);line-height:1.5}.dd-card-accent__content{display:block}.dd-card-accent strong{color:var(--dd-card-accent-color);font-weight:600}\n"] }]
|
|
2345
|
+
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
2351
2346
|
|
|
2352
2347
|
class BadgeBlock {
|
|
2353
2348
|
t = inject(TranslocoService);
|
|
@@ -2375,11 +2370,11 @@ class BadgeBlock {
|
|
|
2375
2370
|
return el;
|
|
2376
2371
|
}
|
|
2377
2372
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2378
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [
|
|
2373
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: BadgeBlock, isStandalone: true, selector: "app-badge-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n </section>\n</div>\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-success: #a7ffb5ba;--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-success: var(--dd-success);--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)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: Badge, selector: "dd-badge", inputs: ["text", "color", "variant", "size"] }, { kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2379
2374
|
}
|
|
2380
2375
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: BadgeBlock, decorators: [{
|
|
2381
2376
|
type: Component,
|
|
2382
|
-
args: [{ selector: 'app-badge-block', standalone: true, imports: [Badge, TranslocoPipe, DuckDevCardAccent, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [
|
|
2377
|
+
args: [{ selector: 'app-badge-block', standalone: true, imports: [Badge, TranslocoPipe, DuckDevCardAccent, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'badgeDoc.title' | transloco }}</h1>\n\n <!-- Badge Component -->\n <section class=\"component-section\">\n <h2>{{ 'badgeDoc.badgeTitle' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'badgeDoc.usage' | transloco }}</h3>\n <pre><code><dd-badge\n [text]=\"'New'\"\n [color]=\"colorViolet\"\n [variant]=\"'solid'\"\n [size]=\"'md'\"\n /></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'badgeDoc.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputVariantEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputSizeEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'badgeDoc.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidViolet' | transloco }}</p>\n <dd-badge [text]=\"'Violet'\" [color]=\"colorViolet\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidOrange' | transloco }}</p>\n <dd-badge [text]=\"'Orange'\" [color]=\"colorOrange\" [variant]=\"'solid'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.solidGray' | transloco }}</p>\n <dd-badge [text]=\"'Gray'\" [color]=\"colorGray\" [variant]=\"'solid'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softViolet' | transloco }}</p>\n <dd-badge [text]=\"'Info'\" [color]=\"colorViolet\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softDark' | transloco }}</p>\n <dd-badge [text]=\"'Dark'\" [color]=\"colorDark\" [variant]=\"'soft'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.softWhite' | transloco }}</p>\n <dd-badge [text]=\"'White'\" [color]=\"colorWhite\" [variant]=\"'soft'\" />\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineViolet' | transloco }}</p>\n <dd-badge [text]=\"'Label'\" [color]=\"colorViolet\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineOrange' | transloco }}</p>\n <dd-badge [text]=\"'Beta'\" [color]=\"colorOrange\" [variant]=\"'outline'\" />\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'badgeDoc.outlineGraySm' | transloco }}</p>\n <dd-badge [text]=\"'Small'\" [color]=\"colorGray\" [variant]=\"'outline'\" [size]=\"'sm'\" />\n </div>\n </div>\n </div>\n </section>\n</div>\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-success: #a7ffb5ba;--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-success: var(--dd-success);--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)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:center;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:center}.demo-container .component-section .examples-block .example-row .example-item dd-badge{width:auto}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}.demo-container .component-section .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
2383
2378
|
}], ctorParameters: () => [] });
|
|
2384
2379
|
|
|
2385
2380
|
class DirectiveBlock {
|
|
@@ -2571,11 +2566,80 @@ class CardBlock {
|
|
|
2571
2566
|
return el;
|
|
2572
2567
|
}
|
|
2573
2568
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2574
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent
|
|
2569
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: CardBlock, isStandalone: true, selector: "app-card-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n</dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2575
2570
|
}
|
|
2576
2571
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: CardBlock, decorators: [{
|
|
2577
2572
|
type: Component,
|
|
2578
|
-
args: [{ selector: 'app-card-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent
|
|
2573
|
+
args: [{ selector: 'app-card-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe], template: "<div class=\"demo-container\">\n <h1>{{ 'cardDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'cardDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'cardDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'cardDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n</dd-card-accent></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'cardDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputContentEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n <li>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n </li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'cardDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.defaultWhite' | transloco }}</p>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"exampleDefault.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.violet' | transloco }}</p>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"exampleViolet.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.orange' | transloco }}</p>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"exampleOrange.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.gray' | transloco }}</p>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"exampleGray.innerHTML\"></div>\n </dd-card-accent>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'cardDoc.examples.dark' | transloco }}</p>\n <dd-card-accent [color]=\"colorDark\">\n <div [innerHTML]=\"exampleDark.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre{background:var(--dd-base-600);color:var(--dd-base-100);padding:20px;border-radius:8px;overflow-x:auto;margin:0}.demo-container .component-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li{padding:0;margin-bottom:8px;background:transparent;border-radius:0;border:none}.demo-container .component-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .examples-block .example-row .example-item{flex:1;min-width:250px;padding:20px;background:var(--dd-base-100);border-radius:8px;border:2px solid var(--dd-base-300);display:flex;flex-direction:column;align-items:stretch;gap:15px;transition:all .3s ease}.demo-container .component-section .examples-block .example-row .example-item:hover{border-color:var(--dd-base-accent-blue);box-shadow:0 4px 12px var(--dd-base-300)}.demo-container .component-section .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
2574
|
+
}], ctorParameters: () => [] });
|
|
2575
|
+
|
|
2576
|
+
class DuckDevTooltip {
|
|
2577
|
+
text = input('', { ...(ngDevMode ? { debugName: "text" } : {}) });
|
|
2578
|
+
color = input(AccentEnumColor.Dark, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2579
|
+
placement = input('top', { ...(ngDevMode ? { debugName: "placement" } : {}) });
|
|
2580
|
+
delayCloseMs = input(120, { ...(ngDevMode ? { debugName: "delayCloseMs" } : {}) });
|
|
2581
|
+
// Internal open state
|
|
2582
|
+
open = signal(false, { ...(ngDevMode ? { debugName: "open" } : {}) });
|
|
2583
|
+
closeTimer = null;
|
|
2584
|
+
handleEnter() {
|
|
2585
|
+
if (this.closeTimer) {
|
|
2586
|
+
clearTimeout(this.closeTimer);
|
|
2587
|
+
this.closeTimer = null;
|
|
2588
|
+
}
|
|
2589
|
+
this.open.set(true);
|
|
2590
|
+
}
|
|
2591
|
+
// close with delay (on mouseleave/focusout)
|
|
2592
|
+
handleLeave() {
|
|
2593
|
+
const delay = Math.max(0, this.delayCloseMs());
|
|
2594
|
+
if (this.closeTimer) {
|
|
2595
|
+
clearTimeout(this.closeTimer);
|
|
2596
|
+
}
|
|
2597
|
+
this.closeTimer = setTimeout(() => this.open.set(false), delay);
|
|
2598
|
+
}
|
|
2599
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2600
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevTooltip, isStandalone: true, selector: "dd-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delayCloseMs: { classPropertyName: "delayCloseMs", publicName: "delayCloseMs", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-tooltip\" (mouseenter)=\"handleEnter()\" (mouseleave)=\"handleLeave()\" (focusin)=\"handleEnter()\" (focusout)=\"handleLeave()\">\n <div class=\"dd-tooltip__trigger\">\n <ng-content />\n </div>\n\n @if(open()){\n <div class=\"dd-tooltip__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n <span class=\"dd-tooltip__text\">{{ text() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background:inherit;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] });
|
|
2601
|
+
}
|
|
2602
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevTooltip, decorators: [{
|
|
2603
|
+
type: Component,
|
|
2604
|
+
args: [{ selector: 'dd-tooltip', standalone: true, imports: [], template: "<div class=\"dd-tooltip\" (mouseenter)=\"handleEnter()\" (mouseleave)=\"handleLeave()\" (focusin)=\"handleEnter()\" (focusout)=\"handleLeave()\">\n <div class=\"dd-tooltip__trigger\">\n <ng-content />\n </div>\n\n @if(open()){\n <div class=\"dd-tooltip__bubble\"\n animate.enter=\"enterAnimation\"\n animate.leave=\"leaveAnimation\"\n [style.--dd-tooltip-anim-ms.ms]=\"delayCloseMs()\"\n [attr.data-placement]=\"placement()\" [attr.data-color]=\"color()\">\n <div class=\"dd-tooltip__arrow\" aria-hidden=\"true\"></div>\n <span class=\"dd-tooltip__text\">{{ text() }}</span>\n </div>\n }\n</div>\n", styles: [":host{display:inline-block}.dd-tooltip{position:relative;display:inline-block}.dd-tooltip__bubble{position:absolute;z-index:5;max-width:280px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.3;border:1px solid transparent;box-shadow:0 6px 24px #0000001f;background:var(--dd-base-800);color:var(--dd-base-0);pointer-events:none;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-color=violet]{background:var(--dd-base-accent-blue);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=orange]{background:var(--dd-base-accent-orange);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=gray]{background:var(--dd-base-200);color:var(--dd-base-700);border-color:var(--dd-base-400)}.dd-tooltip__bubble[data-color=dark]{background:var(--dd-base-800);color:var(--dd-base-0)}.dd-tooltip__bubble[data-color=white]{background:var(--dd-base-0);color:var(--dd-base-700);border-color:var(--dd-base-300)}.dd-tooltip__bubble[data-placement=top],.dd-tooltip__bubble[data-placement=top-start],.dd-tooltip__bubble[data-placement=top-end]{bottom:100%;left:50%;transform:translate(-50%,-8px)}.dd-tooltip__bubble[data-placement=top-start]{left:0;transform:translateY(-8px)}.dd-tooltip__bubble[data-placement=top-end]{left:100%;transform:translate(-100%,-8px)}.dd-tooltip__bubble[data-placement=bottom],.dd-tooltip__bubble[data-placement=bottom-start],.dd-tooltip__bubble[data-placement=bottom-end]{top:100%;left:50%;transform:translate(-50%,8px)}.dd-tooltip__bubble[data-placement=bottom-start]{left:0;transform:translateY(8px)}.dd-tooltip__bubble[data-placement=bottom-end]{left:100%;transform:translate(-100%,8px)}.dd-tooltip__bubble[data-placement=left],.dd-tooltip__bubble[data-placement=left-start],.dd-tooltip__bubble[data-placement=left-end]{right:100%;top:50%;transform:translate(-8px,-50%)}.dd-tooltip__bubble[data-placement=left-start]{top:0;transform:translate(-8px)}.dd-tooltip__bubble[data-placement=left-end]{top:100%;transform:translate(-8px,-100%)}.dd-tooltip__bubble[data-placement=right],.dd-tooltip__bubble[data-placement=right-start],.dd-tooltip__bubble[data-placement=right-end]{left:100%;top:50%;transform:translate(8px,-50%)}.dd-tooltip__bubble[data-placement=right-start]{top:0;transform:translate(8px)}.dd-tooltip__bubble[data-placement=right-end]{top:100%;transform:translate(8px,-100%)}.dd-tooltip__arrow{position:absolute;width:8px;height:8px;transform:rotate(45deg);background:inherit;border:inherit}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{bottom:-4px}.dd-tooltip__bubble[data-placement=top]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=top-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=top-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{top:-4px}.dd-tooltip__bubble[data-placement=bottom]>.dd-tooltip__arrow{left:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=bottom-start]>.dd-tooltip__arrow{left:8px}.dd-tooltip__bubble[data-placement=bottom-end]>.dd-tooltip__arrow{right:8px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{right:-4px}.dd-tooltip__bubble[data-placement=left]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=left-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=left-end]>.dd-tooltip__arrow{bottom:8px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow,.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{left:-4px}.dd-tooltip__bubble[data-placement=right]>.dd-tooltip__arrow{top:calc(50% - 4px)}.dd-tooltip__bubble[data-placement=right-start]>.dd-tooltip__arrow{top:8px}.dd-tooltip__bubble[data-placement=right-end]>.dd-tooltip__arrow{bottom:8px}.enterAnimation{animation:enter-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes enter-animation{0%{opacity:0}to{opacity:1}}.leaveAnimation{animation:leave-animation var(--dd-tooltip-anim-ms, .3s) ease-in}@keyframes leave-animation{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
2605
|
+
}], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], delayCloseMs: [{ type: i0.Input, args: [{ isSignal: true, alias: "delayCloseMs", required: false }] }] } });
|
|
2606
|
+
|
|
2607
|
+
class TooltipBlock {
|
|
2608
|
+
t = inject(TranslocoService);
|
|
2609
|
+
colorViolet = AccentEnumColor.Violet;
|
|
2610
|
+
colorOrange = AccentEnumColor.Orange;
|
|
2611
|
+
colorWhite = AccentEnumColor.White;
|
|
2612
|
+
colorGray = AccentEnumColor.Gray;
|
|
2613
|
+
colorDark = AccentEnumColor.Dark;
|
|
2614
|
+
// Description and inputs content elements
|
|
2615
|
+
descEl;
|
|
2616
|
+
inputTextEl;
|
|
2617
|
+
inputColorEl;
|
|
2618
|
+
inputPlacementEl;
|
|
2619
|
+
inputDelayEl;
|
|
2620
|
+
// Example descriptions
|
|
2621
|
+
exampleBasicEl;
|
|
2622
|
+
examplePlacementEl;
|
|
2623
|
+
constructor() {
|
|
2624
|
+
this.descEl = this.createEl(this.t.translate('tooltipDoc.basic.description'));
|
|
2625
|
+
this.inputTextEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.text'));
|
|
2626
|
+
this.inputColorEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.color'));
|
|
2627
|
+
this.inputPlacementEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.placement'));
|
|
2628
|
+
this.inputDelayEl = this.createEl(this.t.translate('tooltipDoc.inputsDesc.delay'));
|
|
2629
|
+
this.exampleBasicEl = this.createEl(this.t.translate('tooltipDoc.examplesDesc.basic'));
|
|
2630
|
+
this.examplePlacementEl = this.createEl(this.t.translate('tooltipDoc.examplesDesc.placement'));
|
|
2631
|
+
}
|
|
2632
|
+
createEl(html) {
|
|
2633
|
+
const el = document.createElement('div');
|
|
2634
|
+
el.innerHTML = html;
|
|
2635
|
+
return el;
|
|
2636
|
+
}
|
|
2637
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2638
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: TooltipBlock, isStandalone: true, selector: "app-tooltip-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputPlacementEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputDelayEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.basic' | transloco)\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.top' | transloco)\" [color]=\"colorViolet\" [placement]=\"'top'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.right' | transloco)\" [color]=\"colorOrange\" [placement]=\"'right'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.leftStart' | transloco)\" [color]=\"colorGray\" [placement]=\"'left-start'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.bottomEnd' | transloco)\" [color]=\"colorWhite\" [placement]=\"'bottom-end'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n </section>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: DuckDevCardAccent, selector: "dd-card-accent", inputs: ["color"] }, { kind: "component", type: DuckDevTooltip, selector: "dd-tooltip", inputs: ["text", "color", "placement", "delayCloseMs"] }, { kind: "directive", type: DdFlexDirectionDirective, selector: "[ddFlex]", inputs: ["ddFlexDirection", "gap", "justifyContent", "alignItems"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2639
|
+
}
|
|
2640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: TooltipBlock, decorators: [{
|
|
2641
|
+
type: Component,
|
|
2642
|
+
args: [{ selector: 'app-tooltip-block', standalone: true, imports: [DuckDevCardAccent, TranslocoPipe, DuckDevTooltip, DdFlexDirectionDirective], template: "<div class=\"demo-container\">\n <h1>{{ 'tooltipDoc.title' | transloco }}</h1>\n\n <section class=\"component-section\">\n <h2>{{ 'tooltipDoc.basic.title' | transloco }}</h2>\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"descEl.innerHTML\"></div>\n </dd-card-accent>\n\n <div class=\"usage-block\">\n <h3>{{ 'tooltipDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-tooltip\n [text]=\"'tooltipDoc.snippets.hello' | transloco\"\n [color]=\"colorViolet\"\n [placement]=\"'top'\"\n [delayCloseMs]=\"120\"\n>\n <button>Hover me</button>\n</dd-tooltip></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'tooltipDoc.basic.inputs' | transloco }}</h3>\n <div ddFlex ddFlexDirection=\"col\" gap=\"8px\" alignItems=\"flex-start\">\n <dd-card-accent [color]=\"colorWhite\">\n <div [innerHTML]=\"inputTextEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorViolet\">\n <div [innerHTML]=\"inputColorEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorOrange\">\n <div [innerHTML]=\"inputPlacementEl.innerHTML\"></div>\n </dd-card-accent>\n <dd-card-accent [color]=\"colorGray\">\n <div [innerHTML]=\"inputDelayEl.innerHTML\"></div>\n </dd-card-accent>\n </div>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'tooltipDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.basic' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.basic' | transloco)\" [color]=\"colorDark\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.violetTop' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.top' | transloco)\" [color]=\"colorViolet\" [placement]=\"'top'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.orangeRight' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.right' | transloco)\" [color]=\"colorOrange\" [placement]=\"'right'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.leftStart' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.leftStart' | transloco)\" [color]=\"colorGray\" [placement]=\"'left-start'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'tooltipDoc.examples.bottomEnd' | transloco }}</p>\n <dd-tooltip [text]=\"('tooltipDoc.examplesText.bottomEnd' | transloco)\" [color]=\"colorWhite\" [placement]=\"'bottom-end'\">\n <button class=\"example-btn\">{{ 'tooltipDoc.examples.hover' | transloco }}</button>\n </dd-tooltip>\n </div>\n </div>\n </div>\n </section>\n</div>\n" }]
|
|
2579
2643
|
}], ctorParameters: () => [] });
|
|
2580
2644
|
|
|
2581
2645
|
class MainDocumentationPage {
|
|
@@ -2586,6 +2650,7 @@ class MainDocumentationPage {
|
|
|
2586
2650
|
{ id: 'buttons', label: this.translocoService.translate('tabs.buttons') },
|
|
2587
2651
|
{ id: 'loaders', label: this.translocoService.translate('tabs.loaders') },
|
|
2588
2652
|
{ id: 'tabs', label: this.translocoService.translate('tabs.tabs') },
|
|
2653
|
+
{ id: 'tooltip', label: this.translocoService.translate('tabs.tooltip') },
|
|
2589
2654
|
{ id: 'badge', label: this.translocoService.translate('tabs.badge') },
|
|
2590
2655
|
{ id: 'directives', label: this.translocoService.translate('tabs.directives') },
|
|
2591
2656
|
{ id: 'card', label: this.translocoService.translate('tabs.card') },
|
|
@@ -2599,7 +2664,7 @@ class MainDocumentationPage {
|
|
|
2599
2664
|
this.activeTab.set(tab);
|
|
2600
2665
|
}
|
|
2601
2666
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2602
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }] });
|
|
2667
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: MainDocumentationPage, isStandalone: true, selector: "duck-dev-main-documentation-page", ngImport: i0, template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip'){\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "component", type: ButtonBlock, selector: "app-button-block" }, { kind: "component", type: LoaderBlock, selector: "app-loader-block" }, { kind: "component", type: TabsBlock, selector: "app-tabs-block" }, { kind: "component", type: DuckDevSvgBlock, selector: "app-duck-dev-svg-block" }, { kind: "component", type: DuckDevTabVertical, selector: "duck-dev-tab-vertical", inputs: ["tabs"], outputs: ["tabChange"] }, { kind: "component", type: InputBlock, selector: "app-input-block" }, { kind: "component", type: NotificationBlock, selector: "app-notification-block" }, { kind: "component", type: DuckDevNotificationContainer, selector: "duck-dev-notification-container" }, { kind: "component", type: BadgeBlock, selector: "app-badge-block" }, { kind: "component", type: DirectiveBlock, selector: "app-directive-block" }, { kind: "component", type: AccordionBlock, selector: "app-accordion-block" }, { kind: "component", type: SliderBlock, selector: "app-slider-block" }, { kind: "component", type: CardBlock, selector: "app-card-block" }, { kind: "component", type: TooltipBlock, selector: "app-tooltip-block" }] });
|
|
2603
2668
|
}
|
|
2604
2669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
2605
2670
|
type: Component,
|
|
@@ -2617,12 +2682,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2617
2682
|
AccordionBlock,
|
|
2618
2683
|
SliderBlock,
|
|
2619
2684
|
CardBlock,
|
|
2620
|
-
|
|
2685
|
+
TooltipBlock,
|
|
2686
|
+
], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('accordion') {\n <app-accordion-block />\n }\n @case ('buttons') {\n <app-button-block />\n }\n @case ('loaders') {\n <app-loader-block />\n }\n @case ('tabs') {\n <app-tabs-block />\n }\n @case ('tooltip'){\n <app-tooltip-block />\n }\n @case ('badge') {\n <app-badge-block />\n }\n @case ('directives') {\n <app-directive-block />\n }\n @case ('card') {\n <app-card-block />\n }\n @case ('input') {\n <app-input-block />\n }\n @case ('notifications') {\n <app-notification-block />\n }\n @case ('slider') {\n <app-slider-block />\n }\n @case ('svg') {\n <app-duck-dev-svg-block />\n }\n }\n</duck-dev-tab-vertical>\n<duck-dev-notification-container />\n", styles: [":host{display:block;height:100%}\n"] }]
|
|
2621
2687
|
}] });
|
|
2622
2688
|
|
|
2623
2689
|
const DuckDevLibTranslations = {
|
|
2624
|
-
en: import('./duck-dev-lib-en-
|
|
2625
|
-
ru: import('./duck-dev-lib-ru-
|
|
2690
|
+
en: import('./duck-dev-lib-en-BfbNUZFJ.mjs'),
|
|
2691
|
+
ru: import('./duck-dev-lib-ru-06o10qCz.mjs'),
|
|
2626
2692
|
};
|
|
2627
2693
|
|
|
2628
2694
|
/*
|
|
@@ -2633,5 +2699,5 @@ const DuckDevLibTranslations = {
|
|
|
2633
2699
|
* Generated bundle index. Do not edit.
|
|
2634
2700
|
*/
|
|
2635
2701
|
|
|
2636
|
-
export { AccentEnumColor, Badge, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevCardAccent, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
|
|
2702
|
+
export { AccentEnumColor, Badge, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevCardAccent, DuckDevIcon, DuckDevInput, DuckDevLibTranslations, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, LoaderClassic, LoaderLoadingBubble, LoaderThreeDots, MainDocumentationPage, SliderClassic };
|
|
2637
2703
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|