duck-dev-lib 0.0.32 → 0.0.34
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-FJT2H4DI.mjs → duck-dev-lib-en-CvMpinpr.mjs} +33 -2
- package/fesm2022/{duck-dev-lib-ru-D0c8A9Pk.mjs.map → duck-dev-lib-en-CvMpinpr.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-D0c8A9Pk.mjs → duck-dev-lib-ru-JQ83ztjM.mjs} +33 -2
- package/fesm2022/{duck-dev-lib-en-FJT2H4DI.mjs.map → duck-dev-lib-ru-JQ83ztjM.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +109 -9
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +1 -0
|
@@ -11,6 +11,7 @@ var tabs = {
|
|
|
11
11
|
badge: "Badges",
|
|
12
12
|
modal: "Modal",
|
|
13
13
|
slider: "Slider",
|
|
14
|
+
segment: "Segment",
|
|
14
15
|
tooltip: "Tooltip",
|
|
15
16
|
directives: "Directives"
|
|
16
17
|
};
|
|
@@ -264,6 +265,35 @@ var buttons = {
|
|
|
264
265
|
exampleDark: "Dark"
|
|
265
266
|
}
|
|
266
267
|
};
|
|
268
|
+
var segmentDoc = {
|
|
269
|
+
title: "Duck Dev UI Library - Segment",
|
|
270
|
+
basic: {
|
|
271
|
+
title: "Segment component",
|
|
272
|
+
description: "Horizontal switch with an animated indicator. Use it to filter or switch small sets of content. Fully themeable via the palette (CSS variables).",
|
|
273
|
+
usage: "Usage:",
|
|
274
|
+
inputs: "Input Parameters:",
|
|
275
|
+
examples: "Examples:"
|
|
276
|
+
},
|
|
277
|
+
inputsDesc: {
|
|
278
|
+
value: "current selected value (string). If omitted, the first button is selected by default.",
|
|
279
|
+
valueChange: "emits the selected value on click.",
|
|
280
|
+
ionChange: "Ionic‑style event with shape { detail: { value } }.",
|
|
281
|
+
buttonValue: "value associated with a particular option (required).",
|
|
282
|
+
buttonContent: "projected content inside the button (label/icon)."
|
|
283
|
+
},
|
|
284
|
+
examples: {
|
|
285
|
+
basic: "Basic",
|
|
286
|
+
withBinding: "With two‑way binding and events",
|
|
287
|
+
filters: "Four options"
|
|
288
|
+
},
|
|
289
|
+
labels: {
|
|
290
|
+
all: "All",
|
|
291
|
+
articles: "Articles",
|
|
292
|
+
videos: "Videos",
|
|
293
|
+
photos: "Photos",
|
|
294
|
+
selected: "Selected"
|
|
295
|
+
}
|
|
296
|
+
};
|
|
267
297
|
var loaders = {
|
|
268
298
|
title: "Duck Dev UI Library - Loader Components",
|
|
269
299
|
classic: {
|
|
@@ -543,6 +573,7 @@ var en = {
|
|
|
543
573
|
notifications: notifications,
|
|
544
574
|
slider: slider,
|
|
545
575
|
buttons: buttons,
|
|
576
|
+
segmentDoc: segmentDoc,
|
|
546
577
|
loaders: loaders,
|
|
547
578
|
tabsComponent: tabsComponent,
|
|
548
579
|
svgComponent: svgComponent,
|
|
@@ -554,5 +585,5 @@ var en = {
|
|
|
554
585
|
modalDoc: modalDoc
|
|
555
586
|
};
|
|
556
587
|
|
|
557
|
-
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, modalDoc, notifications, quickStart, slider, svgComponent, tabs, tabsComponent, tooltipDoc };
|
|
558
|
-
//# sourceMappingURL=duck-dev-lib-en-
|
|
588
|
+
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, inputComponent, loaders, modalDoc, notifications, quickStart, segmentDoc, slider, svgComponent, tabs, tabsComponent, tooltipDoc };
|
|
589
|
+
//# sourceMappingURL=duck-dev-lib-en-CvMpinpr.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-en-CvMpinpr.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -11,6 +11,7 @@ var tabs = {
|
|
|
11
11
|
badge: "Бейджи",
|
|
12
12
|
modal: "Модальное окно",
|
|
13
13
|
slider: "Слайдер",
|
|
14
|
+
segment: "Сегмент",
|
|
14
15
|
tooltip: "Подсказка",
|
|
15
16
|
directives: "Директивы"
|
|
16
17
|
};
|
|
@@ -230,6 +231,35 @@ var buttons = {
|
|
|
230
231
|
exampleDark: "Тёмная"
|
|
231
232
|
}
|
|
232
233
|
};
|
|
234
|
+
var segmentDoc = {
|
|
235
|
+
title: "Duck Dev UI Library - Сегмент",
|
|
236
|
+
basic: {
|
|
237
|
+
title: "Компонент сегментации",
|
|
238
|
+
description: "Горизонтальный переключатель с анимированным индикатором. Используйте для фильтрации или переключения небольших наборов контента. Полностью стилизуется через палитру (CSS‑переменные).",
|
|
239
|
+
usage: "Использование:",
|
|
240
|
+
inputs: "Входные параметры:",
|
|
241
|
+
examples: "Примеры:"
|
|
242
|
+
},
|
|
243
|
+
inputsDesc: {
|
|
244
|
+
value: "текущее выбранное значение (string). Если не указано — по умолчанию выбирается первая кнопка.",
|
|
245
|
+
valueChange: "эмитит выбранное значение при клике.",
|
|
246
|
+
ionChange: "событие в стиле Ionic с формой { detail: { value } }.",
|
|
247
|
+
buttonValue: "значение, связанное с конкретной опцией (обязательно).",
|
|
248
|
+
buttonContent: "проецируемый контент внутри кнопки (надпись/иконка)."
|
|
249
|
+
},
|
|
250
|
+
examples: {
|
|
251
|
+
basic: "Базовый",
|
|
252
|
+
withBinding: "С двусторонним биндингом и событиями",
|
|
253
|
+
filters: "Четыре опции"
|
|
254
|
+
},
|
|
255
|
+
labels: {
|
|
256
|
+
all: "Все",
|
|
257
|
+
articles: "Статьи",
|
|
258
|
+
videos: "Видео",
|
|
259
|
+
photos: "Фото",
|
|
260
|
+
selected: "Выбрано"
|
|
261
|
+
}
|
|
262
|
+
};
|
|
233
263
|
var loaders = {
|
|
234
264
|
title: "Duck Dev UI Library - Компоненты загрузки (Loaders)",
|
|
235
265
|
classic: {
|
|
@@ -508,6 +538,7 @@ var ru = {
|
|
|
508
538
|
notifications: notifications,
|
|
509
539
|
slider: slider,
|
|
510
540
|
buttons: buttons,
|
|
541
|
+
segmentDoc: segmentDoc,
|
|
511
542
|
loaders: loaders,
|
|
512
543
|
tabsComponent: tabsComponent,
|
|
513
544
|
svgComponent: svgComponent,
|
|
@@ -519,5 +550,5 @@ var ru = {
|
|
|
519
550
|
modalDoc: modalDoc
|
|
520
551
|
};
|
|
521
552
|
|
|
522
|
-
export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, inputComponent, loaders, modalDoc, notifications, quickStart, slider, svgComponent, tabs, tabsComponent };
|
|
523
|
-
//# sourceMappingURL=duck-dev-lib-ru-
|
|
553
|
+
export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, inputComponent, loaders, modalDoc, notifications, quickStart, segmentDoc, slider, svgComponent, tabs, tabsComponent };
|
|
554
|
+
//# sourceMappingURL=duck-dev-lib-ru-JQ83ztjM.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-ru-JQ83ztjM.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
|
|
2
|
+
import { input, HostBinding, Directive, computed, Component, output, signal, viewChildren, effect, Injectable, inject, ElementRef, ChangeDetectionStrategy, ChangeDetectorRef, PLATFORM_ID, viewChild, afterNextRender, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i1$3 from '@angular/common';
|
|
4
|
-
import { NgStyle, CommonModule, NgTemplateOutlet } from '@angular/common';
|
|
4
|
+
import { NgStyle, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
|
|
5
5
|
import * as i1$2 from '@jsverse/transloco';
|
|
6
6
|
import { TranslocoPipe, TranslocoModule, TranslocoService } from '@jsverse/transloco';
|
|
7
7
|
import * as i1 from '@angular/forms';
|
|
@@ -420,11 +420,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
420
420
|
|
|
421
421
|
class DuckDevCardSection {
|
|
422
422
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSection, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
423
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DuckDevCardSection, isStandalone: true, selector: "dd-card-section", ngImport: i0, template: "<section class=\"component-section\">\n <ng-content />\n</section>\n", styles: [".component-section{
|
|
423
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: DuckDevCardSection, isStandalone: true, selector: "dd-card-section", ngImport: i0, template: "<section class=\"component-section\">\n <ng-content />\n</section>\n", styles: [".component-section{background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] });
|
|
424
424
|
}
|
|
425
425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevCardSection, decorators: [{
|
|
426
426
|
type: Component,
|
|
427
|
-
args: [{ selector: 'dd-card-section', standalone: true, imports: [], template: "<section class=\"component-section\">\n <ng-content />\n</section>\n", styles: [".component-section{
|
|
427
|
+
args: [{ selector: 'dd-card-section', standalone: true, imports: [], template: "<section class=\"component-section\">\n <ng-content />\n</section>\n", styles: [".component-section{background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}\n"] }]
|
|
428
428
|
}] });
|
|
429
429
|
|
|
430
430
|
class ButtonBlock {
|
|
@@ -2659,10 +2659,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2659
2659
|
}] });
|
|
2660
2660
|
|
|
2661
2661
|
class DuckDevModalClassic {
|
|
2662
|
+
platformId = inject(PLATFORM_ID);
|
|
2662
2663
|
elementRef = inject(ElementRef);
|
|
2663
2664
|
isOpen = input.required({ ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
2664
2665
|
ngOnInit() {
|
|
2665
|
-
|
|
2666
|
+
if (isPlatformBrowser(this.platformId)) {
|
|
2667
|
+
document.body.appendChild(this.elementRef.nativeElement);
|
|
2668
|
+
}
|
|
2666
2669
|
}
|
|
2667
2670
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevModalClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2668
2671
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevModalClassic, isStandalone: true, selector: "dd-duck-dev-modal-classic", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (isOpen()) {\n <div class=\"modal-container\" animate.enter=\"enter-animation\" animate.leave=\"leave-animation\">\n <ng-content />\n </div>\n}\n", styles: [".modal-container{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:3;width:100%;height:100%;background:#0006;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.enter-animation{animation:enter-animation .3s ease-out}@keyframes enter-animation{0%{opacity:.5;scale:0}to{opacity:1;scale:1}}.leave-animation{animation:leave .3s ease-in}@keyframes leave{0%{opacity:1;scale:1}to{opacity:.5;scale:0}}\n"] });
|
|
@@ -2688,6 +2691,101 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2688
2691
|
args: [{ selector: 'app-modal-block', imports: [TranslocoModule, DuckDevCardSection, DuckDevModalClassic, DuckDevIcon], template: "<div class=\"demo-container\">\n <h1>{{ 'modalDoc.title' | transloco }}</h1>\n\n <div class=\"example-row quick-actions\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.quickDemo' | transloco }}\n </button>\n </div>\n\n <dd-card-section>\n <h2>{{ 'modalDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'modalDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'modalDoc.basic.usage' | transloco }}</h3>\n <pre><code ngNonBindable><!-- Template -->\n<dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div class="modal-content">\n <h3>{{ 'modalDoc.snippets.sampleTitle' | transloco }}</h3>\n <p>{{ 'modalDoc.snippets.sampleText' | transloco }}</p>\n <div class="actions">\n <button class="demo-btn" (click)="close()">{{ 'modalDoc.actions.close' | transloco }}</button>\n </div>\n </div>\n</dd-duck-dev-modal-classic>\n\n<!-- Component -->\nisOpen = signal(false);\nopen() { this.isOpen.set(true); }\nclose() { this.isOpen.set(false); }\n</code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'modalDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>isOpen</strong> - {{ 'modalDoc.inputs.isOpen' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'modalDoc.basic.examples' | transloco }}</h3>\n <div class=\"example-row\">\n <button class=\"demo-btn\" (click)=\"open()\">\n {{ 'modalDoc.examples.open' | transloco }}\n </button>\n </div>\n </div>\n </dd-card-section>\n\n <dd-duck-dev-modal-classic [isOpen]=\"isOpen()\">\n <div class=\"modal-content\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"demo-modal-title\" aria-describedby=\"demo-modal-desc\">\n <header class=\"modal-header\">\n <h3 id=\"demo-modal-title\" class=\"modal-title\">{{ 'modalDoc.demo.title' | transloco }}</h3>\n <duck-dev-icon\n class=\"close-icon\"\n name=\"duck-dev-clear-medium\"\n role=\"button\"\n tabindex=\"0\"\n [attr.aria-label]=\"('modalDoc.actions.close' | transloco)\"\n [attr.title]=\"('modalDoc.actions.close' | transloco)\"\n (click)=\"close()\"\n (keydown.enter)=\"close()\"\n ></duck-dev-icon>\n </header>\n <div id=\"demo-modal-desc\" class=\"modal-body\">\n <p class=\"modal-text\">{{ 'modalDoc.demo.text' | transloco }}</p>\n <ul class=\"modal-list\">\n <li>Keyboard friendly close</li>\n <li>Smooth animations</li>\n <li>Frosted glass backdrop</li>\n </ul>\n </div>\n <footer class=\"actions\">\n <button class=\"demo-btn\" (click)=\"close()\">\n {{ 'modalDoc.actions.close' | transloco }}\n </button>\n </footer>\n </div>\n </dd-duck-dev-modal-classic>\n</div>\n", styles: [".modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 4px 12px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.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,.demo-container dd-card-section{display:block;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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-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,.demo-container dd-card-section .usage-block{margin-bottom:25px}.demo-container .component-section .usage-block pre,.demo-container dd-card-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,.demo-container dd-card-section .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .component-section .inputs-block,.demo-container dd-card-section .inputs-block{margin-bottom:25px}.demo-container .component-section .inputs-block ul,.demo-container dd-card-section .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .inputs-block ul li,.demo-container dd-card-section .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .component-section .inputs-block ul li strong,.demo-container dd-card-section .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .examples-block .example-row,.demo-container dd-card-section .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .component-section .quick-actions,.demo-container dd-card-section .quick-actions{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}.demo-btn{padding:10px 18px;border-radius:8px;border:1px solid var(--dd-base-300);background:var(--dd-base-100);color:var(--dd-base-600);cursor:pointer;transition:background .2s ease,transform .1s ease,box-shadow .2s ease,border-color .2s ease}.demo-btn:hover{background:var(--dd-base-200);border-color:var(--dd-base-accent-blue);box-shadow:0 1px #00000008}.demo-btn:active{transform:translateY(1px)}.modal-content{min-width:280px;max-width:90vw;background:var(--dd-base-0);color:var(--dd-base-600);border-radius:12px;box-shadow:0 8px 24px var(--dd-base-300);border:1px solid var(--dd-base-200);padding:20px}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.close-icon{cursor:pointer;color:var(--dd-base-400);transition:color .2s ease,transform .1s ease}.close-icon:hover,.close-icon:focus{color:var(--dd-base-600);outline:none}.close-icon:active{transform:scale(.95)}.modal-title{margin:0 0 8px;color:var(--dd-base-500)}.modal-body{padding-top:4px}.modal-text{margin:0 0 16px;color:var(--dd-base-400)}.modal-list{margin:8px 0 16px 20px;color:var(--dd-base-500)}.modal-list li{margin:4px 0}.actions{display:flex;justify-content:flex-end}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container dd-card-section{padding:20px}.demo-container dd-card-section h2{font-size:24px}.demo-container dd-card-section .examples-block .example-row{flex-direction:column}}\n"] }]
|
|
2689
2692
|
}] });
|
|
2690
2693
|
|
|
2694
|
+
class DuckDevSegmentButton {
|
|
2695
|
+
value = input.required({ ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
2696
|
+
contentId = input(undefined, { ...(ngDevMode ? { debugName: "contentId" } : {}) });
|
|
2697
|
+
templateRef = viewChild.required('contentTpl');
|
|
2698
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2699
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.1", type: DuckDevSegmentButton, isStandalone: true, selector: "dd-segment-button", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n <ng-content />\n</ng-template>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] });
|
|
2700
|
+
}
|
|
2701
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentButton, decorators: [{
|
|
2702
|
+
type: Component,
|
|
2703
|
+
args: [{ selector: 'dd-segment-button', imports: [], template: "<ng-template #contentTpl>\n <ng-content />\n</ng-template>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
2704
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], templateRef: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }] } });
|
|
2705
|
+
|
|
2706
|
+
class DuckDevSegmentClassic {
|
|
2707
|
+
cdr = inject(ChangeDetectorRef);
|
|
2708
|
+
value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
2709
|
+
valueChange = output();
|
|
2710
|
+
ionChange = output();
|
|
2711
|
+
segmentButtons;
|
|
2712
|
+
buttonsContainer = viewChild.required('buttonsContainer');
|
|
2713
|
+
buttons = [];
|
|
2714
|
+
selectedValue;
|
|
2715
|
+
indicatorPosition = 2;
|
|
2716
|
+
indicatorWidth = 0;
|
|
2717
|
+
constructor() {
|
|
2718
|
+
afterNextRender(() => {
|
|
2719
|
+
this.rebuildButtons();
|
|
2720
|
+
if (!this.selectedValue && this.buttons.length > 0) {
|
|
2721
|
+
this.selectedValue = this.buttons[0].value;
|
|
2722
|
+
}
|
|
2723
|
+
this.updateIndicator(this.getSelectedIndex());
|
|
2724
|
+
this.cdr.markForCheck();
|
|
2725
|
+
});
|
|
2726
|
+
}
|
|
2727
|
+
ngAfterContentInit() {
|
|
2728
|
+
this.rebuildButtons();
|
|
2729
|
+
const incoming = this.value();
|
|
2730
|
+
this.selectedValue = incoming ?? this.selectedValue;
|
|
2731
|
+
this.segmentButtons.changes.subscribe(() => {
|
|
2732
|
+
this.rebuildButtons();
|
|
2733
|
+
setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
|
|
2734
|
+
});
|
|
2735
|
+
}
|
|
2736
|
+
selectButton(value, index) {
|
|
2737
|
+
if (this.selectedValue === value) {
|
|
2738
|
+
this.updateIndicator(index);
|
|
2739
|
+
return;
|
|
2740
|
+
}
|
|
2741
|
+
this.selectedValue = value;
|
|
2742
|
+
this.valueChange.emit(value);
|
|
2743
|
+
this.ionChange.emit({ detail: { value } });
|
|
2744
|
+
this.updateIndicator(index);
|
|
2745
|
+
}
|
|
2746
|
+
rebuildButtons() {
|
|
2747
|
+
const btns = this.segmentButtons?.toArray() ?? [];
|
|
2748
|
+
this.buttons = btns.map((b) => ({ value: b.value(), contentId: b.contentId(), template: b.templateRef() }));
|
|
2749
|
+
}
|
|
2750
|
+
getSelectedIndex() {
|
|
2751
|
+
return Math.max(0, this.buttons.findIndex((b) => b.value === this.selectedValue));
|
|
2752
|
+
}
|
|
2753
|
+
updateIndicator(index) {
|
|
2754
|
+
const container = this.buttonsContainer().nativeElement;
|
|
2755
|
+
const buttonElements = container.querySelectorAll('.segment-button');
|
|
2756
|
+
if (buttonElements[index]) {
|
|
2757
|
+
const button = buttonElements[index];
|
|
2758
|
+
this.indicatorWidth = button.offsetWidth;
|
|
2759
|
+
this.indicatorPosition = button.offsetLeft;
|
|
2760
|
+
}
|
|
2761
|
+
}
|
|
2762
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2763
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentClassic, isStandalone: true, selector: "dd-segment-classic", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", ionChange: "ionChange" }, queries: [{ propertyName: "segmentButtons", predicate: DuckDevSegmentButton }], viewQueries: [{ propertyName: "buttonsContainer", first: true, predicate: ["buttonsContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div\n class=\"segment-buttons\"\n #buttonsContainer\n >\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
2764
|
+
}
|
|
2765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentClassic, decorators: [{
|
|
2766
|
+
type: Component,
|
|
2767
|
+
args: [{ selector: 'dd-segment-classic', imports: [
|
|
2768
|
+
NgTemplateOutlet
|
|
2769
|
+
], template: "<div class=\"segment-container\">\n <div class=\"segment-background\"></div>\n <div\n class=\"segment-indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n ></div>\n <div\n class=\"segment-buttons\"\n #buttonsContainer\n >\n @for (button of buttons; track button; let i = $index) {\n <button\n class=\"segment-button\"\n [class.segment-button-checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </button>\n }\n </div>\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)}.segment-container{display:flex;padding:4px;position:relative;border-radius:9px;width:100%}.segment-background{position:absolute;inset:0;border-radius:9px}.segment-indicator{position:absolute;top:2px;bottom:2px;border-radius:7px;transition:transform .3s cubic-bezier(.25,.46,.45,.94),width .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 2px 4px #00000014;z-index:1}.segment-buttons{display:flex;position:relative;width:100%;z-index:2}.segment-button{display:flex;align-items:center;justify-content:center;flex:1;padding:6px 12px;border:none;background:transparent;cursor:pointer;transition:color .3s ease;text-align:center;position:relative;min-height:28px;-webkit-tap-highlight-color:transparent}.segment-button:focus{outline:none}@media(prefers-color-scheme:dark){.segment-background{background:var(--dd-base-200)}.segment-indicator{background:var(--dd-base-100);box-shadow:0 2px 4px #0000004d}.segment-button-checked{color:var(--dd-base-600)}.segment-button:not(.segment-button-checked){color:var(--dd-base-600);opacity:.5}}\n"] }]
|
|
2770
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
|
|
2771
|
+
type: ContentChildren,
|
|
2772
|
+
args: [DuckDevSegmentButton]
|
|
2773
|
+
}], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
|
|
2774
|
+
|
|
2775
|
+
class SegmentBlock {
|
|
2776
|
+
selected = signal('all', { ...(ngDevMode ? { debugName: "selected" } : {}) });
|
|
2777
|
+
lastEvent = signal('', { ...(ngDevMode ? { debugName: "lastEvent" } : {}) });
|
|
2778
|
+
onIonChange(e) {
|
|
2779
|
+
this.lastEvent.set(e.detail.value);
|
|
2780
|
+
}
|
|
2781
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: SegmentBlock, isStandalone: true, selector: "app-segment-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\">\n <dd-segment-button value=\"all\">All</dd-segment-button>\n <dd-segment-button value=\"articles\">Articles</dd-segment-button>\n <dd-segment-button value=\"videos\">Videos</dd-segment-button>\n</dd-segment-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n <dd-segment-classic>\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n <div class=\"state-hint\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ selected() }}</b>\n <span class=\"divider\">|</span>\n <span>ionChange: <b>{{ lastEvent() }}</b></span>\n </div>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n <dd-segment-classic [value]=\"'all'\">\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;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 .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 .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevSegmentClassic, selector: "dd-segment-classic", inputs: ["value"], outputs: ["valueChange", "ionChange"] }, { kind: "component", type: DuckDevSegmentButton, selector: "dd-segment-button", inputs: ["value", "contentId"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
2783
|
+
}
|
|
2784
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, decorators: [{
|
|
2785
|
+
type: Component,
|
|
2786
|
+
args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton], template: "<div class=\"demo-container\">\n <h1>{{ 'segmentDoc.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'segmentDoc.basic.title' | transloco }}</h2>\n <p class=\"description\">{{ 'segmentDoc.basic.description' | transloco }}</p>\n\n <div class=\"usage-block\">\n <h3>{{ 'segmentDoc.basic.usage' | transloco }}</h3>\n <pre><code><dd-segment-classic [value]=\"selected\" (valueChange)=\"onChange($event)\">\n <dd-segment-button value=\"all\">All</dd-segment-button>\n <dd-segment-button value=\"articles\">Articles</dd-segment-button>\n <dd-segment-button value=\"videos\">Videos</dd-segment-button>\n</dd-segment-classic></code></pre>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'segmentDoc.basic.inputs' | transloco }}</h3>\n <ul>\n <li><strong>value</strong> \u2014 {{ 'segmentDoc.inputsDesc.value' | transloco }}</li>\n <li><strong>valueChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.valueChange' | transloco }}</li>\n <li><strong>ionChange</strong> \u2014 {{ 'segmentDoc.inputsDesc.ionChange' | transloco }}</li>\n <li><strong>dd-segment-button[value]</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonValue' | transloco }}</li>\n <li><strong>dd-segment-button</strong> \u2014 {{ 'segmentDoc.inputsDesc.buttonContent' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"examples-block\">\n <h3>{{ 'segmentDoc.basic.examples' | transloco }}</h3>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.basic' | transloco }}</p>\n <dd-segment-classic>\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.withBinding' | transloco }}</p>\n <dd-segment-classic [value]=\"selected()\" (valueChange)=\"selected.set($event)\" (ionChange)=\"onIonChange($event)\">\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n <div class=\"state-hint\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ selected() }}</b>\n <span class=\"divider\">|</span>\n <span>ionChange: <b>{{ lastEvent() }}</b></span>\n </div>\n </div>\n </div>\n\n <div class=\"example-row\">\n <div class=\"example-item\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.filters' | transloco }}</p>\n <dd-segment-classic [value]=\"'all'\">\n <dd-segment-button value=\"all\">{{ 'segmentDoc.labels.all' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"articles\">{{ 'segmentDoc.labels.articles' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"videos\">{{ 'segmentDoc.labels.videos' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"photos\">{{ 'segmentDoc.labels.photos' | transloco }}</dd-segment-button>\n </dd-segment-classic>\n </div>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{max-width:1200px;margin:0 auto;padding:40px 20px}.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 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 .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 h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .usage-block{margin-bottom:25px}.demo-container .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 .usage-block pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.5}.demo-container .inputs-block{margin-bottom:25px}.demo-container .inputs-block ul{list-style:none;padding:0;margin:0}.demo-container .inputs-block ul li{padding:12px 15px;margin-bottom:8px;background:var(--dd-base-100);border-radius:6px;border-left:3px solid var(--dd-base-accent-blue);font-size:15px;line-height:1.5;color:var(--dd-base-500)}.demo-container .inputs-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .examples-block .example-row{display:flex;gap:20px;margin-bottom:20px;flex-wrap:wrap}.demo-container .examples-block .example-row .example-item{flex:1;min-width:280px;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 .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 .examples-block .example-row .example-item .example-label{font-size:14px;font-weight:600;color:var(--dd-base-400);margin:0;text-align:left}.demo-container .examples-block .example-row .example-item .state-hint{font-size:14px;color:var(--dd-base-400)}.demo-container .examples-block .example-row .example-item .state-hint .divider{margin:0 8px;color:var(--dd-base-300)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .examples-block .example-row{flex-direction:column}.demo-container .examples-block .example-row .example-item{min-width:100%}}\n"] }]
|
|
2787
|
+
}] });
|
|
2788
|
+
|
|
2691
2789
|
class MainDocumentationPage {
|
|
2692
2790
|
translocoService = inject(TranslocoService);
|
|
2693
2791
|
title = signal('demo', { ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
@@ -2704,6 +2802,7 @@ class MainDocumentationPage {
|
|
|
2704
2802
|
{ id: 'input', label: this.translocoService.translate('tabs.input') },
|
|
2705
2803
|
{ id: 'modal', label: this.translocoService.translate('tabs.modal') },
|
|
2706
2804
|
{ id: 'notifications', label: this.translocoService.translate('tabs.notifications') },
|
|
2805
|
+
{ id: 'segment', label: this.translocoService.translate('tabs.segment') },
|
|
2707
2806
|
{ id: 'slider', label: this.translocoService.translate('tabs.slider') },
|
|
2708
2807
|
{ id: 'svg', label: this.translocoService.translate('tabs.svg') },
|
|
2709
2808
|
];
|
|
@@ -2712,7 +2811,7 @@ class MainDocumentationPage {
|
|
|
2712
2811
|
this.activeTab.set(tab);
|
|
2713
2812
|
}
|
|
2714
2813
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2715
|
-
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 ('quick-start') {\n <app-quick-start-block />\n }\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 ('modal') {\n <app-modal-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" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }] });
|
|
2814
|
+
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 ('quick-start') {\n <app-quick-start-block />\n }\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 ('modal') {\n <app-modal-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 ('segment') {\n <app-segment-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" }, { kind: "component", type: QuickStartBlock, selector: "app-quick-start-block" }, { kind: "component", type: ModalBlock, selector: "app-modal-block" }, { kind: "component", type: SegmentBlock, selector: "app-segment-block" }] });
|
|
2716
2815
|
}
|
|
2717
2816
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: MainDocumentationPage, decorators: [{
|
|
2718
2817
|
type: Component,
|
|
@@ -2733,12 +2832,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2733
2832
|
TooltipBlock,
|
|
2734
2833
|
QuickStartBlock,
|
|
2735
2834
|
ModalBlock,
|
|
2736
|
-
|
|
2835
|
+
SegmentBlock,
|
|
2836
|
+
], template: "<duck-dev-tab-vertical [tabs]=\"tabs\" (tabChange)=\"onTabChange($event)\">\n @switch (activeTab().id) {\n @case ('quick-start') {\n <app-quick-start-block />\n }\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 ('modal') {\n <app-modal-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 ('segment') {\n <app-segment-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"] }]
|
|
2737
2837
|
}] });
|
|
2738
2838
|
|
|
2739
2839
|
const DuckDevLibTranslations = {
|
|
2740
|
-
en: import('./duck-dev-lib-en-
|
|
2741
|
-
ru: import('./duck-dev-lib-ru-
|
|
2840
|
+
en: import('./duck-dev-lib-en-CvMpinpr.mjs'),
|
|
2841
|
+
ru: import('./duck-dev-lib-ru-JQ83ztjM.mjs'),
|
|
2742
2842
|
};
|
|
2743
2843
|
|
|
2744
2844
|
/*
|