duck-dev-lib 0.0.44 → 0.0.45
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-Ax8ROq2-.mjs → duck-dev-lib-en-CDxyWfrd.mjs} +12 -3
- package/fesm2022/{duck-dev-lib-en-Ax8ROq2-.mjs.map → duck-dev-lib-en-CDxyWfrd.mjs.map} +1 -1
- package/fesm2022/{duck-dev-lib-ru-yHcUp82C.mjs → duck-dev-lib-ru-1jQ8uE1i.mjs} +12 -3
- package/fesm2022/{duck-dev-lib-ru-yHcUp82C.mjs.map → duck-dev-lib-ru-1jQ8uE1i.mjs.map} +1 -1
- package/fesm2022/duck-dev-lib.mjs +131 -5
- package/fesm2022/duck-dev-lib.mjs.map +1 -1
- package/package.json +1 -1
- package/types/duck-dev-lib.d.ts +73 -2
|
@@ -305,20 +305,29 @@ var segmentDoc = {
|
|
|
305
305
|
value: "current selected value (string). If omitted, the first button is selected by default.",
|
|
306
306
|
valueChange: "emits the selected value on click.",
|
|
307
307
|
ionChange: "Ionic‑style event with shape { detail: { value } }.",
|
|
308
|
+
color: "available in the neobrutal variant; accepts AccentEnumColor to switch palette and contrast.",
|
|
308
309
|
buttonValue: "value associated with a particular option (required).",
|
|
309
310
|
buttonContent: "projected content inside the button (label/icon)."
|
|
310
311
|
},
|
|
311
312
|
examples: {
|
|
312
313
|
basic: "Basic",
|
|
313
314
|
withBinding: "With two‑way binding and events",
|
|
314
|
-
filters: "Four options"
|
|
315
|
+
filters: "Four options",
|
|
316
|
+
neobrutalViolet: "Neobrutal / Violet",
|
|
317
|
+
neobrutalOrange: "Neobrutal / Orange"
|
|
315
318
|
},
|
|
316
319
|
labels: {
|
|
317
320
|
all: "All",
|
|
318
321
|
articles: "Articles",
|
|
319
322
|
videos: "Videos",
|
|
320
323
|
photos: "Photos",
|
|
321
|
-
selected: "Selected"
|
|
324
|
+
selected: "Selected",
|
|
325
|
+
rush: "Rush",
|
|
326
|
+
review: "Review",
|
|
327
|
+
drop: "Drop",
|
|
328
|
+
draft: "Draft",
|
|
329
|
+
launch: "Launch",
|
|
330
|
+
archive: "Archive"
|
|
322
331
|
}
|
|
323
332
|
};
|
|
324
333
|
var loaders = {
|
|
@@ -757,4 +766,4 @@ var en = {
|
|
|
757
766
|
};
|
|
758
767
|
|
|
759
768
|
export { accordionDoc, badgeDoc, buttons, cardDoc, en as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, slider, svgComponent, tabs, tabsComponent, tooltipDoc };
|
|
760
|
-
//# sourceMappingURL=duck-dev-lib-en-
|
|
769
|
+
//# sourceMappingURL=duck-dev-lib-en-CDxyWfrd.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-en-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-en-CDxyWfrd.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -271,20 +271,29 @@ var segmentDoc = {
|
|
|
271
271
|
value: "текущее выбранное значение (string). Если не указано — по умолчанию выбирается первая кнопка.",
|
|
272
272
|
valueChange: "эмитит выбранное значение при клике.",
|
|
273
273
|
ionChange: "событие в стиле Ionic с формой { detail: { value } }.",
|
|
274
|
+
color: "доступен в neobrutal-варианте; принимает AccentEnumColor для смены палитры и контраста.",
|
|
274
275
|
buttonValue: "значение, связанное с конкретной опцией (обязательно).",
|
|
275
276
|
buttonContent: "проецируемый контент внутри кнопки (надпись/иконка)."
|
|
276
277
|
},
|
|
277
278
|
examples: {
|
|
278
279
|
basic: "Базовый",
|
|
279
280
|
withBinding: "С двусторонним биндингом и событиями",
|
|
280
|
-
filters: "Четыре опции"
|
|
281
|
+
filters: "Четыре опции",
|
|
282
|
+
neobrutalViolet: "Neobrutal / Violet",
|
|
283
|
+
neobrutalOrange: "Neobrutal / Orange"
|
|
281
284
|
},
|
|
282
285
|
labels: {
|
|
283
286
|
all: "Все",
|
|
284
287
|
articles: "Статьи",
|
|
285
288
|
videos: "Видео",
|
|
286
289
|
photos: "Фото",
|
|
287
|
-
selected: "Выбрано"
|
|
290
|
+
selected: "Выбрано",
|
|
291
|
+
rush: "Rush",
|
|
292
|
+
review: "Review",
|
|
293
|
+
drop: "Drop",
|
|
294
|
+
draft: "Draft",
|
|
295
|
+
launch: "Launch",
|
|
296
|
+
archive: "Archive"
|
|
288
297
|
}
|
|
289
298
|
};
|
|
290
299
|
var loaders = {
|
|
@@ -722,4 +731,4 @@ var ru = {
|
|
|
722
731
|
};
|
|
723
732
|
|
|
724
733
|
export { accordionDoc, badgeDoc, buttons, cardDoc, ru as default, directivesDoc, documentationStyleTabs, inputComponent, loaders, modalDoc, notifications, progressDoc, quickStart, segmentDoc, slider, svgComponent, tabs, tabsComponent };
|
|
725
|
-
//# sourceMappingURL=duck-dev-lib-ru-
|
|
734
|
+
//# sourceMappingURL=duck-dev-lib-ru-1jQ8uE1i.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"duck-dev-lib-ru-
|
|
1
|
+
{"version":3,"file":"duck-dev-lib-ru-1jQ8uE1i.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -3759,18 +3759,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3759
3759
|
args: [DuckDevSegmentButton]
|
|
3760
3760
|
}], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
|
|
3761
3761
|
|
|
3762
|
+
class DuckDevSegmentNeobrutal {
|
|
3763
|
+
cdr = inject(ChangeDetectorRef);
|
|
3764
|
+
value = input(undefined, { ...(ngDevMode ? { debugName: "value" } : {}) });
|
|
3765
|
+
color = input(AccentEnumColor.White, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
3766
|
+
valueChange = output();
|
|
3767
|
+
ionChange = output();
|
|
3768
|
+
segmentButtons;
|
|
3769
|
+
buttonsContainer = viewChild.required('buttonsContainer');
|
|
3770
|
+
buttons = [];
|
|
3771
|
+
selectedValue;
|
|
3772
|
+
indicatorPosition = 0;
|
|
3773
|
+
indicatorWidth = 0;
|
|
3774
|
+
segmentStyle = computed(() => this.getSegmentStyle(this.color()), { ...(ngDevMode ? { debugName: "segmentStyle" } : {}) });
|
|
3775
|
+
constructor() {
|
|
3776
|
+
afterNextRender(() => {
|
|
3777
|
+
this.rebuildButtons();
|
|
3778
|
+
if (!this.selectedValue && this.buttons.length > 0) {
|
|
3779
|
+
this.selectedValue = this.buttons[0].value;
|
|
3780
|
+
}
|
|
3781
|
+
this.updateIndicator(this.getSelectedIndex());
|
|
3782
|
+
this.cdr.markForCheck();
|
|
3783
|
+
});
|
|
3784
|
+
}
|
|
3785
|
+
ngAfterContentInit() {
|
|
3786
|
+
this.rebuildButtons();
|
|
3787
|
+
const incoming = this.value();
|
|
3788
|
+
this.selectedValue = incoming ?? this.selectedValue;
|
|
3789
|
+
this.segmentButtons.changes.subscribe(() => {
|
|
3790
|
+
this.rebuildButtons();
|
|
3791
|
+
setTimeout(() => this.updateIndicator(this.getSelectedIndex()));
|
|
3792
|
+
});
|
|
3793
|
+
}
|
|
3794
|
+
selectButton(value, index) {
|
|
3795
|
+
if (this.selectedValue === value) {
|
|
3796
|
+
this.updateIndicator(index);
|
|
3797
|
+
return;
|
|
3798
|
+
}
|
|
3799
|
+
this.selectedValue = value;
|
|
3800
|
+
this.valueChange.emit(value);
|
|
3801
|
+
this.ionChange.emit({ detail: { value } });
|
|
3802
|
+
this.updateIndicator(index);
|
|
3803
|
+
}
|
|
3804
|
+
rebuildButtons() {
|
|
3805
|
+
const btns = this.segmentButtons?.toArray() ?? [];
|
|
3806
|
+
this.buttons = btns.map((button) => ({
|
|
3807
|
+
value: button.value(),
|
|
3808
|
+
contentId: button.contentId(),
|
|
3809
|
+
template: button.templateRef(),
|
|
3810
|
+
}));
|
|
3811
|
+
}
|
|
3812
|
+
getSelectedIndex() {
|
|
3813
|
+
return Math.max(0, this.buttons.findIndex((button) => button.value === this.selectedValue));
|
|
3814
|
+
}
|
|
3815
|
+
updateIndicator(index) {
|
|
3816
|
+
const container = this.buttonsContainer().nativeElement;
|
|
3817
|
+
const buttonElements = container.querySelectorAll('.dd-segment-neo__button');
|
|
3818
|
+
if (buttonElements[index]) {
|
|
3819
|
+
const button = buttonElements[index];
|
|
3820
|
+
this.indicatorWidth = button.offsetWidth;
|
|
3821
|
+
this.indicatorPosition = button.offsetLeft;
|
|
3822
|
+
}
|
|
3823
|
+
}
|
|
3824
|
+
getSegmentStyle(color) {
|
|
3825
|
+
switch (color) {
|
|
3826
|
+
case AccentEnumColor.Violet:
|
|
3827
|
+
return {
|
|
3828
|
+
'--dd-segment-neo-surface': 'var(--dd-base-secondary)',
|
|
3829
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-secondary) 84%, var(--dd-base-0))',
|
|
3830
|
+
'--dd-segment-neo-accent': 'var(--dd-base-accent-yellow)',
|
|
3831
|
+
'--dd-segment-neo-shadow': 'var(--dd-base-accent-blue)',
|
|
3832
|
+
'--dd-segment-neo-text': 'var(--dd-base-0)',
|
|
3833
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-0) 74%, transparent)',
|
|
3834
|
+
};
|
|
3835
|
+
case AccentEnumColor.Orange:
|
|
3836
|
+
return {
|
|
3837
|
+
'--dd-segment-neo-surface': 'var(--dd-base-accent-orange)',
|
|
3838
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-accent-yellow) 68%, var(--dd-base-0))',
|
|
3839
|
+
'--dd-segment-neo-accent': 'var(--dd-base-accent-pink)',
|
|
3840
|
+
'--dd-segment-neo-shadow': 'var(--dd-base-accent-yellow)',
|
|
3841
|
+
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3842
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 66%, transparent)',
|
|
3843
|
+
};
|
|
3844
|
+
case AccentEnumColor.Gray:
|
|
3845
|
+
return {
|
|
3846
|
+
'--dd-segment-neo-surface': 'var(--dd-base-100)',
|
|
3847
|
+
'--dd-segment-neo-panel': 'var(--dd-base-0)',
|
|
3848
|
+
'--dd-segment-neo-accent': 'var(--dd-base-accent-blue)',
|
|
3849
|
+
'--dd-segment-neo-shadow': 'var(--dd-base-400)',
|
|
3850
|
+
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3851
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3852
|
+
};
|
|
3853
|
+
case AccentEnumColor.Dark:
|
|
3854
|
+
return {
|
|
3855
|
+
'--dd-segment-neo-surface': 'var(--dd-base-600)',
|
|
3856
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-base-600) 92%, var(--dd-base-500))',
|
|
3857
|
+
'--dd-segment-neo-accent': 'var(--dd-base-accent-yellow)',
|
|
3858
|
+
'--dd-segment-neo-shadow': 'var(--dd-base-accent-orange)',
|
|
3859
|
+
'--dd-segment-neo-text': 'var(--dd-base-0)',
|
|
3860
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-0) 68%, transparent)',
|
|
3861
|
+
};
|
|
3862
|
+
case AccentEnumColor.White:
|
|
3863
|
+
default:
|
|
3864
|
+
return {
|
|
3865
|
+
'--dd-segment-neo-surface': 'var(--dd-base-0)',
|
|
3866
|
+
'--dd-segment-neo-panel': 'var(--dd-base-100)',
|
|
3867
|
+
'--dd-segment-neo-accent': 'var(--dd-base-accent-orange)',
|
|
3868
|
+
'--dd-segment-neo-shadow': 'var(--dd-base-accent-blue)',
|
|
3869
|
+
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3870
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3871
|
+
};
|
|
3872
|
+
}
|
|
3873
|
+
}
|
|
3874
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3875
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSegmentNeobrutal, isStandalone: true, selector: "duck-dev-segment-neobrutal", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", 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=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-orange);--dd-segment-neo-shadow: var(--dd-base-accent-blue);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-base-600);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-base-600);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
3876
|
+
}
|
|
3877
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSegmentNeobrutal, decorators: [{
|
|
3878
|
+
type: Component,
|
|
3879
|
+
args: [{ selector: 'duck-dev-segment-neobrutal', imports: [NgTemplateOutlet, NgStyle], template: "<div class=\"dd-segment-neo\" [ngStyle]=\"segmentStyle()\">\n <div class=\"dd-segment-neo__indicator-shell\">\n <div\n class=\"dd-segment-neo__indicator\"\n [style.transform]=\"'translateX(' + indicatorPosition + 'px)'\"\n [style.width.px]=\"indicatorWidth\"\n >\n <span class=\"dd-segment-neo__indicator-notch\"></span>\n </div>\n </div>\n\n <div class=\"dd-segment-neo__buttons\" #buttonsContainer>\n @for (button of buttons; track button.value; let i = $index) {\n <button\n class=\"dd-segment-neo__button\"\n [class.dd-segment-neo__button--checked]=\"selectedValue === button.value\"\n (click)=\"selectButton(button.value, i)\"\n type=\"button\"\n >\n <span class=\"dd-segment-neo__button-copy\">\n <ng-container *ngTemplateOutlet=\"button.template\" />\n </span>\n </button>\n }\n </div>\n</div>\n", styles: [":host{display:block;width:100%}.dd-segment-neo{--dd-segment-neo-surface: var(--dd-base-0);--dd-segment-neo-panel: var(--dd-base-100);--dd-segment-neo-accent: var(--dd-base-accent-orange);--dd-segment-neo-shadow: var(--dd-base-accent-blue);--dd-segment-neo-text: var(--dd-base-600);--dd-segment-neo-muted: color-mix(in srgb, var(--dd-base-600) 58%, transparent);position:relative;display:block;width:100%;padding:10px;border:4px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 24%,transparent) 0 12%,transparent 12% 100%),var(--dd-segment-neo-surface);box-shadow:8px 8px 0 var(--dd-segment-neo-shadow);overflow:clip}.dd-segment-neo:before,.dd-segment-neo:after{content:\"\";position:absolute;width:18px;height:18px;background:var(--dd-segment-neo-accent);border:3px solid var(--dd-base-600);z-index:0}.dd-segment-neo:before{top:-7px;right:18px;transform:rotate(10deg)}.dd-segment-neo:after{left:20px;bottom:-9px;transform:rotate(-9deg)}.dd-segment-neo__indicator-shell{position:absolute;inset:10px;z-index:1}.dd-segment-neo__indicator{position:absolute;top:0;bottom:0;left:0;border:3px solid var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-segment-neo-accent) 36%,transparent) 0 18%,transparent 18% 100%),var(--dd-segment-neo-panel);box-shadow:4px 4px 0 var(--dd-base-600);transition:transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1)}.dd-segment-neo__indicator-notch{position:absolute;top:-3px;right:14px;width:16px;height:16px;border-left:3px solid var(--dd-base-600);border-bottom:3px solid var(--dd-base-600);background:var(--dd-segment-neo-accent)}.dd-segment-neo__buttons{position:relative;z-index:2;display:flex;width:100%;gap:6px}.dd-segment-neo__button{position:relative;display:flex;flex:1 1 0;align-items:center;justify-content:center;min-height:64px;padding:14px 18px 12px;border:0;background:transparent;color:var(--dd-segment-neo-muted);cursor:pointer;text-align:center;font:inherit;transition:transform .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent}.dd-segment-neo__button:hover{transform:translateY(-1px)}.dd-segment-neo__button:focus-visible{outline:3px solid var(--dd-segment-neo-accent);outline-offset:-3px}.dd-segment-neo__button-copy{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;font-size:.78rem;font-weight:1000;letter-spacing:.14em;line-height:1.1;text-transform:uppercase;text-wrap:balance}.dd-segment-neo__button--checked{color:var(--dd-segment-neo-text)}@media(max-width:640px){.dd-segment-neo{padding:8px;box-shadow:6px 6px 0 var(--dd-segment-neo-shadow)}.dd-segment-neo__indicator-shell{inset:8px}.dd-segment-neo__buttons{gap:2px}.dd-segment-neo__button{min-height:56px;padding-inline:12px}.dd-segment-neo__button-copy{font-size:.72rem;letter-spacing:.11em}}\n"] }]
|
|
3880
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ionChange: [{ type: i0.Output, args: ["ionChange"] }], segmentButtons: [{
|
|
3881
|
+
type: ContentChildren,
|
|
3882
|
+
args: [DuckDevSegmentButton]
|
|
3883
|
+
}], buttonsContainer: [{ type: i0.ViewChild, args: ['buttonsContainer', { isSignal: true }] }] } });
|
|
3884
|
+
|
|
3762
3885
|
class SegmentBlock {
|
|
3763
3886
|
selected = signal('all', { ...(ngDevMode ? { debugName: "selected" } : {}) });
|
|
3887
|
+
neobrutalSelected = signal('rush', { ...(ngDevMode ? { debugName: "neobrutalSelected" } : {}) });
|
|
3764
3888
|
lastEvent = signal('', { ...(ngDevMode ? { debugName: "lastEvent" } : {}) });
|
|
3889
|
+
colorViolet = AccentEnumColor.Violet;
|
|
3890
|
+
colorOrange = AccentEnumColor.Orange;
|
|
3765
3891
|
onIonChange(e) {
|
|
3766
3892
|
this.lastEvent.set(e.detail.value);
|
|
3767
3893
|
}
|
|
3768
3894
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3769
|
-
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" }] });
|
|
3895
|
+
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>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | 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\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n <duck-dev-segment-neobrutal\n [value]=\"neobrutalSelected()\"\n [color]=\"colorViolet\"\n (valueChange)=\"neobrutalSelected.set($event)\"\n >\n <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ neobrutalSelected() }}</b>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\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)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@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: "component", type: DuckDevSegmentNeobrutal, selector: "duck-dev-segment-neobrutal", inputs: ["value", "color"], outputs: ["valueChange", "ionChange"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
|
|
3770
3896
|
}
|
|
3771
3897
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: SegmentBlock, decorators: [{
|
|
3772
3898
|
type: Component,
|
|
3773
|
-
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"] }]
|
|
3899
|
+
args: [{ selector: 'app-segment-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevSegmentClassic, DuckDevSegmentButton, DuckDevSegmentNeobrutal], 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>color</strong> \u2014 {{ 'segmentDoc.inputsDesc.color' | 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\n <div class=\"example-row\">\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalViolet' | transloco }}</p>\n <duck-dev-segment-neobrutal\n [value]=\"neobrutalSelected()\"\n [color]=\"colorViolet\"\n (valueChange)=\"neobrutalSelected.set($event)\"\n >\n <dd-segment-button value=\"rush\">{{ 'segmentDoc.labels.rush' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"review\">{{ 'segmentDoc.labels.review' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"drop\">{{ 'segmentDoc.labels.drop' | transloco }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\n <div class=\"state-hint state-hint--neobrutal\">\n <span>{{ 'segmentDoc.labels.selected' | transloco }}: </span>\n <b>{{ neobrutalSelected() }}</b>\n </div>\n </div>\n\n <div class=\"example-item example-item--neobrutal\">\n <p class=\"example-label\">{{ 'segmentDoc.examples.neobrutalOrange' | transloco }}</p>\n <duck-dev-segment-neobrutal [value]=\"'launch'\" [color]=\"colorOrange\">\n <dd-segment-button value=\"draft\">{{ 'segmentDoc.labels.draft' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"launch\">{{ 'segmentDoc.labels.launch' | transloco }}</dd-segment-button>\n <dd-segment-button value=\"archive\">{{ 'segmentDoc.labels.archive' | transloco }}</dd-segment-button>\n </duck-dev-segment-neobrutal>\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)}.demo-container .examples-block .example-row .example-item.example-item--neobrutal{gap:18px;border-radius:0;border-width:3px;border-color:var(--dd-base-600);background:linear-gradient(135deg,color-mix(in srgb,var(--dd-base-accent-yellow) 18%,transparent) 0 14%,transparent 14% 100%),var(--dd-base-0);box-shadow:8px 8px 0 var(--dd-base-accent-blue)}.demo-container .examples-block .example-row .example-item .state-hint--neobrutal{display:inline-flex;width:fit-content;align-items:center;gap:8px;padding:6px 10px;border:2px solid var(--dd-base-600);background:var(--dd-base-accent-yellow);color:var(--dd-base-600);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@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"] }]
|
|
3774
3900
|
}] });
|
|
3775
3901
|
|
|
3776
3902
|
function clampProgress(value) {
|
|
@@ -3963,8 +4089,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
3963
4089
|
}] });
|
|
3964
4090
|
|
|
3965
4091
|
const DuckDevLibTranslations = {
|
|
3966
|
-
en: import('./duck-dev-lib-en-
|
|
3967
|
-
ru: import('./duck-dev-lib-ru-
|
|
4092
|
+
en: import('./duck-dev-lib-en-CDxyWfrd.mjs'),
|
|
4093
|
+
ru: import('./duck-dev-lib-ru-1jQ8uE1i.mjs'),
|
|
3968
4094
|
};
|
|
3969
4095
|
|
|
3970
4096
|
/*
|
|
@@ -3975,5 +4101,5 @@ const DuckDevLibTranslations = {
|
|
|
3975
4101
|
* Generated bundle index. Do not edit.
|
|
3976
4102
|
*/
|
|
3977
4103
|
|
|
3978
|
-
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
|
|
4104
|
+
export { AccentEnumColor, Badge, BadgeNeobrutalSlab, BadgeNeobrutalStamp, BadgeNeobrutalTicket, ButtonBlurLift, ButtonCasper, ButtonFlip, ButtonGlideOver, ButtonNeobrutalBurst, ButtonNeobrutalSlab, ButtonNeobrutalTag, DdFlexDirectionDirective, DuckDevAccordionComponent as DuckDevAccordion, DuckDevAccordionNeobrutalComponent as DuckDevAccordionNeobrutal, DuckDevCardAccent, DuckDevCardMinimal, DuckDevCardNeobrutalPoster, DuckDevCardNeobrutalSlab, DuckDevCardNeobrutalStamp, DuckDevCardNeobrutalTicket, DuckDevCardOutline, DuckDevCardSection, DuckDevCardSignal, DuckDevIcon, DuckDevInput, DuckDevInputNeobrutalPoster, DuckDevInputNeobrutalRadio, DuckDevInputNeobrutalSlab, DuckDevInputNeobrutalStrip, DuckDevInputNeobrutalToggle, DuckDevLibTranslations, DuckDevModalClassic, DuckDevNotification, DuckDevNotificationContainer, DuckDevNotificationService, DuckDevProgressLine, DuckDevProgressMeter, DuckDevProgressNeobrutalSlab, DuckDevProgressNeobrutalStamp, DuckDevProgressNeobrutalTicket, DuckDevProgressStack, DuckDevSegmentButton, DuckDevSegmentClassic, DuckDevSegmentNeobrutal, DuckDevTab, DuckDevTabVertical, DuckDevTooltip, DuckDevTooltipNeobrutalComponent, LoaderClassic, LoaderLoadingBubble, LoaderNeobrutalBars, LoaderNeobrutalMarquee, LoaderNeobrutalStamp, LoaderThreeDots, MainDocumentationPage, SliderClassic };
|
|
3979
4105
|
//# sourceMappingURL=duck-dev-lib.mjs.map
|