duck-dev-lib 0.0.34 → 0.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/duck-dev-lib.mjs +104 -8
  2. package/fesm2022/duck-dev-lib.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/duck-dev-lib.d.ts +3 -1
package/fesm2022/duck-dev-lib.mjs CHANGED
@@ -5,8 +5,11 @@ import { NgStyle, CommonModule, NgTemplateOutlet, isPlatformBrowser } from '@ang
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';
8
- import { ReactiveFormsModule } from '@angular/forms';
8
+ import { ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
9
+ import { MaskitoDirective } from '@maskito/angular';
9
10
  import * as i1$1 from '@angular/platform-browser';
11
+ import { maskitoUpdateElement } from '@maskito/core';
12
+ import { maskitoWithPlaceholder, maskitoEventHandler, maskitoPrefixPostprocessorGenerator } from '@maskito/kit';
10
13
 
11
14
  var AccentEnumColor;
12
15
  (function (AccentEnumColor) {
@@ -1998,13 +2001,14 @@ class DuckDevInput {
1998
2001
  type = input('text', { ...(ngDevMode ? { debugName: "type" } : {}) });
1999
2002
  formInputType = input('input', { ...(ngDevMode ? { debugName: "formInputType" } : {}) });
2000
2003
  errorMessage = input('', { ...(ngDevMode ? { debugName: "errorMessage" } : {}) });
2004
+ mask = input(null, { ...(ngDevMode ? { debugName: "mask" } : {}) });
2001
2005
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
2002
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label [for]=\"controlName()\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label class=\"cbx\" [for]=\"controlName()\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n </div>\n }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
2006
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevInput, isStandalone: true, selector: "duck-dev-input", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, controlName: { classPropertyName: "controlName", publicName: "controlName", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, formInputType: { classPropertyName: "formInputType", publicName: "formInputType", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let inputMask = mask();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"cbx\" [for]=\"control\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n [maskito]=\"inputMask\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n [maskito]=\"inputMask\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }] });
2003
2007
  }
2004
2008
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevInput, decorators: [{
2005
2009
  type: Component,
2006
- args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule], template: "<label [for]=\"controlName()\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"formInputType() === 'checkbox'\"\n [formGroup]=\"form()\"\n>\n @switch (formInputType()) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"controlName()\"\n type=\"checkbox\"\n formControlName=\"{{ controlName() }}\"\n />\n <label class=\"cbx\" [for]=\"controlName()\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"controlName()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"controlName()\"\n [type]=\"type()\"\n formControlName=\"{{ controlName() }}\"\n class=\"form-input\"\n [class.error]=\"form().get(controlName())?.invalid && form().get(controlName())?.touched\"\n [placeholder]=\"placeholder()\"\n />\n }\n }\n\n @if (errorMessage()) {\n <div class=\"error-message\">\n {{ errorMessage() }}\n </div>\n }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
2007
- }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
2010
+ args: [{ selector: 'duck-dev-input', imports: [ReactiveFormsModule, MaskitoDirective], template: "@let control = controlName();\n@let inputType = formInputType();\n@let formName = form();\n@let inputPlaceholder = placeholder();\n@let inputMask = mask();\n@let erMessage = errorMessage();\n\n<label [for]=\"control\" class=\"form-label\">\n {{ label() }}\n</label>\n\n<div\n class=\"form-field\"\n [class.checkbox-inout-field]=\"inputType === 'checkbox'\"\n [formGroup]=\"formName\"\n>\n @switch (inputType) {\n @case ('checkbox') {\n <div class=\"checkbox-wrapper\">\n <input\n class=\"inp-cbx\"\n [id]=\"control\"\n type=\"checkbox\"\n formControlName=\"{{ control }}\"\n />\n <label class=\"cbx\" [for]=\"control\">\n <span>\n <svg width=\"12px\" height=\"10px\" viewbox=\"0 0 12 10\">\n <polyline points=\"1.5 6 4.5 9 10.5 1\" />\n </svg>\n </span>\n <span><ng-content /></span>\n </label>\n </div>\n }\n @case ('textarea') {\n <textarea\n [id]=\"control\"\n formControlName=\"{{ control }}\"\n class=\"form-input form-input_textarea\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n [maskito]=\"inputMask\"\n ></textarea>\n }\n @default {\n <input\n [id]=\"control\"\n [type]=\"type()\"\n formControlName=\"{{ control }}\"\n class=\"form-input\"\n [class.error]=\"formName.get(control)?.invalid && formName.get(control)?.touched\"\n [placeholder]=\"inputPlaceholder\"\n [maskito]=\"inputMask\"\n />\n }\n }\n\n @if (erMessage) {\n <div class=\"error-message\">\n {{ erMessage }}\n </div>\n }\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)}:host{display:block;height:min-content}.form-field{height:100%;display:flex;flex-direction:column;position:relative;padding-bottom:20px}.form-label{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:400;display:block;margin-bottom:6px;color:var(--dd-base-600)}.form-input_textarea{height:100%;resize:none}.form-input{font-style:normal;font-family:Inter,sans-serif;font-size:20px;font-weight:500;width:100%;padding:12px 16px;border:1.5px solid var(--dd-base-300);border-radius:30px;color:var(--dd-base-600);background:var(--dd-base-0);transition:all .2s ease;box-sizing:border-box}.form-input:focus{outline:none;border-color:var(--dd-accent-blue);box-shadow:0 0 0 3px var(--dd-base-300)}.form-input::placeholder{color:var(--dd-gray-400)}.form-input.error{border-color:var(--dd-accent-orange);box-shadow:0 0 0 3px #ef44441a}.error-message{position:absolute;left:0;right:0;bottom:0;margin-top:0;font-size:14px;color:var(--dd-accent-orange);pointer-events:none}.content-text{width:100%}.checkbox-wrapper input[type=checkbox]{display:none;visibility:hidden}.checkbox-wrapper .cbx{display:flex;flex-wrap:nowrap;gap:2px;margin:auto;-webkit-user-select:none;user-select:none;cursor:pointer}.checkbox-wrapper .cbx span{display:inline-block;vertical-align:middle;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child{position:relative;width:18px;height:18px;border-radius:5px;transform:scale(1);vertical-align:middle;border:1px solid var(--dd-base-300);transition:all .2s ease}.checkbox-wrapper .cbx span:first-child svg{position:absolute;top:3px;left:2px;fill:none;stroke:var(--dd-base-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16px;stroke-dashoffset:16px;transition:all .3s ease;transition-delay:.1s;transform:translateZ(0)}.checkbox-wrapper .cbx span:first-child:before{content:\"\";width:100%;height:100%;background:var(--dd-accent-blue);display:block;transform:scale(0);opacity:1;border-radius:50%}.checkbox-wrapper .cbx span:last-child{padding-left:8px}.checkbox-wrapper .cbx:hover span:first-child{border-color:var(--dd-accent-blue)}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child{background:var(--dd-accent-blue);border-color:var(--dd-accent-blue);animation:wave .4s ease}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child svg{stroke-dashoffset:0}.checkbox-wrapper .inp-cbx:checked+.cbx span:first-child:before{transform:scale(3.5);opacity:0;transition:all .6s ease}@keyframes wave{50%{transform:scale(.9)}}\n"] }]
2011
+ }], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], controlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlName", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], formInputType: [{ type: i0.Input, args: [{ isSignal: true, alias: "formInputType", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], mask: [{ type: i0.Input, args: [{ isSignal: true, alias: "mask", required: false }] }] } });
2008
2012
 
2009
2013
  class DuckDevNotificationService {
2010
2014
  seq = 1;
@@ -2150,21 +2154,113 @@ class DuckDevSvgBlock {
2150
2154
  this.page.set(p + 1);
2151
2155
  }
2152
2156
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, deps: [{ token: i1$1.DomSanitizer }, { token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
2153
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n >&lt;{{ icon.id }}&gt;</code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2157
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevSvgBlock, isStandalone: true, selector: "app-duck-dev-svg-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n >&lt;{{ icon.id }}&gt;</code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"], dependencies: [{ kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage", "mask"] }, { kind: "component", type: ButtonFlip, selector: "duck-dev-button-flip", inputs: ["text", "disabled", "arrowIndex", "direction", "colorButton"] }, { kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2154
2158
  }
2155
2159
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevSvgBlock, decorators: [{
2156
2160
  type: Component,
2157
2161
  args: [{ selector: 'app-duck-dev-svg-block', imports: [TranslocoPipe, DuckDevInput, ButtonFlip, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'svgComponent.title' | transloco }}</h1>\n\n <dd-card-section>\n <h2>{{ 'svgComponent.description' | transloco }}</h2>\n <p class=\"description\">\n {{ 'svgComponent.descriptionText' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'svgComponent.usage' | transloco }}</h3>\n <p>{{ 'svgComponent.usageText1' | transloco }}</p>\n <p>{{ 'svgComponent.usageText2' | transloco }}</p>\n <p>{{ 'svgComponent.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'svgComponent.availableIcons' | transloco }}</h3>\n\n <div class=\"icons-toolbar\">\n <duck-dev-input\n [form]=\"searchForm\"\n controlName=\"search\"\n [placeholder]=\"'svgComponent.searchPlaceholder' | transloco\"\n type=\"text\"\n />\n <div class=\"icons-stats\">\n Page {{ page() }} / {{ totalPages() }} \u2022 Showing\n {{ paginatedIcons().length === 0 ? 0 : (page() - 1) * pageSize + 1 }}\u2013\n {{ (page() - 1) * pageSize + paginatedIcons().length }}\n of {{ filteredIcons().length }}\n </div>\n </div>\n\n @if (filteredIcons().length === 0) {\n <p>No icons found.</p>\n } @else {\n <div class=\"icons-showcase\">\n @for (icon of paginatedIcons(); track icon.id) {\n <div class=\"icon-card\" (click)=\"copyTag(icon.id)\" role=\"button\" tabindex=\"0\">\n <div class=\"icon-display\" [innerHTML]=\"getSafeHtml(icon.svg)\"></div>\n <div class=\"icon-name\">{{ icon.name }}</div>\n <div class=\"icon-id\">{{ icon.id }}</div>\n <code\n class=\"icon-tag\"\n [title]=\"\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n \"\n >&lt;{{ icon.id }}&gt;</code\n >\n <div class=\"copy-hint\">\n {{\n copiedId() === icon.id\n ? ('svgComponent.copied' | transloco)\n : ('svgComponent.clickToCopy' | transloco)\n }}\n </div>\n </div>\n }\n </div>\n\n <div class=\"pagination-controls\">\n <duck-dev-button-flip\n [text]=\"'Prev'\"\n (click)=\"prevPage()\"\n [direction]=\"'previous'\"\n ></duck-dev-button-flip>\n <span>Page {{ page() }} of {{ totalPages() }}</span>\n <duck-dev-button-flip [text]=\"'Next'\" (click)=\"nextPage()\"></duck-dev-button-flip>\n </div>\n }\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'svgComponent.howToAdd' | transloco }}</h3>\n <ol>\n <li>{{ 'svgComponent.step1' | transloco }}</li>\n <li>{{ 'svgComponent.step2' | transloco }}</li>\n <li>{{ 'svgComponent.step3' | transloco }}</li>\n </ol>\n </div>\n </dd-card-section>\n</div>\n", styles: [".demo-container{padding:20px;max-width:1200px;margin:0 auto}h1{font-size:32px;font-weight:600;color:var(--dd-base-600);margin-bottom:20px}h2{font-size:24px;font-weight:600;color:var(--dd-base-600);margin-bottom:16px}h3{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:12px}.description{font-size:14px;color:var(--dd-base-400);margin-bottom:20px}.usage-block,.implementation-block,.example-block{margin-bottom:30px;padding:20px;background:var(--dd-base-0);border-radius:8px;border:1px solid var(--dd-base-300)}.usage-block p,.usage-block li,.implementation-block p,.implementation-block li,.example-block p,.example-block li{font-size:14px;color:var(--dd-base-500);line-height:1.6;margin-bottom:8px}.usage-block ol,.implementation-block ol,.example-block ol{padding-left:20px}.icons-showcase{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:20px;padding:20px 0}.icon-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background:var(--dd-base-100);border:2px solid var(--dd-base-200);border-radius:8px;transition:all .3s ease;cursor:pointer}.icon-card:hover{border-color:var(--dd-base-200);background:var(--dd-base-50);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.icon-card:hover .icon-display{transform:scale(1.1);color:var(--dd-base-0)}.icon-display{width:48px;height:48px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:var(--dd-base-0);transition:all .3s ease}.icon-display ::ng-deep svg{width:100%;height:100%;fill:currentColor}.icon-name{font-size:14px;font-weight:500;color:var(--dd-base-600);margin-bottom:4px;text-align:center}.icon-id{font-size:12px;color:var(--dd-base-400);font-family:monospace;text-align:center}.icon-tag{font-size:11px;color:var(--dd-base-600);font-family:monospace;background:var(--dd-base-200);padding:4px 8px;border-radius:4px;margin-top:8px;text-align:center;border:1px solid var(--dd-base-300)}.copy-hint{position:absolute;bottom:8px;right:8px;font-size:10px;color:var(--dd-base-500);background:var(--dd-base-0);border:1px solid var(--dd-base-200);padding:2px 6px;border-radius:4px;pointer-events:none}.pagination-controls{display:flex;justify-content:space-around;align-items:center}\n"] }]
2158
2162
  }], ctorParameters: () => [{ type: i1$1.DomSanitizer }, { type: i1.FormBuilder }] });
2159
2163
 
2164
+ const PLACEHOLDER = '+375 (хх) ххх-хх-хх';
2165
+ const { removePlaceholder, plugins, ...placeholderOptions } = maskitoWithPlaceholder(PLACEHOLDER);
2166
+ var inputBlock = {
2167
+ preprocessors: placeholderOptions.preprocessors,
2168
+ postprocessors: [
2169
+ maskitoPrefixPostprocessorGenerator('+375'),
2170
+ ...placeholderOptions.postprocessors,
2171
+ ],
2172
+ mask: [
2173
+ '+',
2174
+ '3',
2175
+ '7',
2176
+ '5',
2177
+ ' ',
2178
+ '(',
2179
+ /\d/,
2180
+ /\d/,
2181
+ ')',
2182
+ ' ',
2183
+ /\d/,
2184
+ /\d/,
2185
+ /\d/,
2186
+ '-',
2187
+ /\d/,
2188
+ /\d/,
2189
+ '-',
2190
+ /\d/,
2191
+ /\d/,
2192
+ ],
2193
+ plugins: [
2194
+ ...plugins,
2195
+ maskitoEventHandler('focus', (element) => {
2196
+ const initialValue = element.value || '+375 (';
2197
+ maskitoUpdateElement(element, initialValue + PLACEHOLDER.slice(initialValue.length));
2198
+ }),
2199
+ maskitoEventHandler('blur', (element) => {
2200
+ const cleanValue = removePlaceholder(element.value);
2201
+ maskitoUpdateElement(element, cleanValue === '+375' ? '' : cleanValue);
2202
+ }),
2203
+ ],
2204
+ };
2160
2205
  class InputBlock {
2206
+ fb = inject(FormBuilder);
2207
+ form;
2208
+ phoneMaskOptions = {
2209
+ preprocessors: placeholderOptions.preprocessors,
2210
+ postprocessors: [
2211
+ maskitoPrefixPostprocessorGenerator('+375'),
2212
+ ...placeholderOptions.postprocessors,
2213
+ ],
2214
+ mask: [
2215
+ '+',
2216
+ '3',
2217
+ '7',
2218
+ '5',
2219
+ ' ',
2220
+ '(',
2221
+ /\d/,
2222
+ /\d/,
2223
+ ')',
2224
+ ' ',
2225
+ /\d/,
2226
+ /\d/,
2227
+ /\d/,
2228
+ '-',
2229
+ /\d/,
2230
+ /\d/,
2231
+ '-',
2232
+ /\d/,
2233
+ /\d/,
2234
+ ],
2235
+ plugins: [
2236
+ ...plugins,
2237
+ maskitoEventHandler('focus', (element) => {
2238
+ const initialValue = element.value || '+375 (';
2239
+ maskitoUpdateElement(element, initialValue + PLACEHOLDER.slice(initialValue.length));
2240
+ }),
2241
+ maskitoEventHandler('blur', (element) => {
2242
+ const cleanValue = removePlaceholder(element.value);
2243
+ maskitoUpdateElement(element, cleanValue === '+375' ? '' : cleanValue);
2244
+ }),
2245
+ ],
2246
+ };
2247
+ constructor() {
2248
+ this.initForm();
2249
+ }
2250
+ initForm() {
2251
+ this.form = this.fb.group({
2252
+ name: ['', [Validators.required, Validators.minLength(2)]],
2253
+ phone: ['', [Validators.required, Validators.pattern(/^\+?[0-9\s\-()]{10,}$/)]],
2254
+ description: ['', [Validators.required, Validators.minLength(5)]]
2255
+ });
2256
+ }
2161
2257
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, deps: [], target: i0.ɵɵFactoryTarget.Component });
2162
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <dd-card-section>\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputForm' | transloco }}\n </li>\n <li>\n <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputControlName' | transloco }}\n </li>\n <li>\n <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputType' | transloco }}\n </li>\n <li>\n <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li>\n <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li>\n <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n </li>\n <li>\n <strong>controlName: string</strong> -\n {{ 'inputComponent.inputField.apiControlName' | transloco }}\n </li>\n <li>\n <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder?: string</strong> -\n {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n </li>\n <li>\n <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n </li>\n <li>\n <strong>errorMessage?: string</strong> -\n {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2258
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.1", type: InputBlock, isStandalone: true, selector: "app-input-block", ngImport: i0, template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <dd-card-section>\n\n <form\n (click)=\"$event.stopPropagation()\"\n [formGroup]=\"form\"\n class=\"popup-form\"\n >\n <duck-dev-input\n [form]=\"form\"\n controlName=\"name\"\n [label]=\"'NAME' | transloco\"\n [placeholder]=\"'ENTER_NAME' | transloco\"/>\n\n <duck-dev-input\n #phone\n [form]=\"form\"\n controlName=\"phone\"\n type=\"tel\"\n [label]=\"'PHONE' | transloco\"\n [placeholder]=\"'ENTER_PHONE' | transloco\"\n [mask]=\"phoneMaskOptions\"\n />\n\n <duck-dev-input\n [form]=\"form\"\n [formInputType]=\"'textarea'\"\n controlName=\"description\"\n type=\"text\"\n [label]=\"'DESCRIPTION' | transloco\"\n [placeholder]=\"'ENTER_DESCRIPTION' | transloco\"\n />\n </form>\n\n\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputForm' | transloco }}\n </li>\n <li>\n <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputControlName' | transloco }}\n </li>\n <li>\n <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputType' | transloco }}\n </li>\n <li>\n <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li>\n <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li>\n <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n </li>\n <li>\n <strong>controlName: string</strong> -\n {{ 'inputComponent.inputField.apiControlName' | transloco }}\n </li>\n <li>\n <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder?: string</strong> -\n {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n </li>\n <li>\n <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n </li>\n <li>\n <strong>errorMessage?: string</strong> -\n {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"], dependencies: [{ kind: "component", type: DuckDevCardSection, selector: "dd-card-section" }, { kind: "component", type: DuckDevInput, selector: "duck-dev-input", inputs: ["form", "controlName", "label", "placeholder", "type", "formInputType", "errorMessage", "mask"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslocoPipe, name: "transloco" }] });
2163
2259
  }
2164
2260
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: InputBlock, decorators: [{
2165
2261
  type: Component,
2166
- args: [{ selector: 'app-input-block', imports: [TranslocoPipe, DuckDevCardSection], template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <dd-card-section>\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputForm' | transloco }}\n </li>\n <li>\n <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputControlName' | transloco }}\n </li>\n <li>\n <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputType' | transloco }}\n </li>\n <li>\n <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li>\n <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li>\n <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n </li>\n <li>\n <strong>controlName: string</strong> -\n {{ 'inputComponent.inputField.apiControlName' | transloco }}\n </li>\n <li>\n <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder?: string</strong> -\n {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n </li>\n <li>\n <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n </li>\n <li>\n <strong>errorMessage?: string</strong> -\n {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
2167
- }] });
2262
+ args: [{ selector: 'app-input-block', imports: [TranslocoPipe, DuckDevCardSection, DuckDevInput, ReactiveFormsModule], template: "<div class=\"demo-container\">\n <h1>{{ 'inputComponent.title' | transloco }}</h1>\n\n <!-- Input Field Component -->\n <dd-card-section>\n\n <form\n (click)=\"$event.stopPropagation()\"\n [formGroup]=\"form\"\n class=\"popup-form\"\n >\n <duck-dev-input\n [form]=\"form\"\n controlName=\"name\"\n [label]=\"'NAME' | transloco\"\n [placeholder]=\"'ENTER_NAME' | transloco\"/>\n\n <duck-dev-input\n #phone\n [form]=\"form\"\n controlName=\"phone\"\n type=\"tel\"\n [label]=\"'PHONE' | transloco\"\n [placeholder]=\"'ENTER_PHONE' | transloco\"\n [mask]=\"phoneMaskOptions\"\n />\n\n <duck-dev-input\n [form]=\"form\"\n [formInputType]=\"'textarea'\"\n controlName=\"description\"\n type=\"text\"\n [label]=\"'DESCRIPTION' | transloco\"\n [placeholder]=\"'ENTER_DESCRIPTION' | transloco\"\n />\n </form>\n\n\n <h2>{{ 'inputComponent.inputField.title' | transloco }}</h2>\n <p class=\"description\">\n {{ 'inputComponent.inputField.description' | transloco }}\n </p>\n\n <div class=\"usage-block\">\n <h3>{{ 'inputComponent.inputField.usage' | transloco }}</h3>\n <p>{{ 'inputComponent.inputField.usageText1' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText2' | transloco }}</p>\n <p>{{ 'inputComponent.inputField.usageText3' | transloco }}</p>\n </div>\n\n <div class=\"inputs-block\">\n <h3>{{ 'inputComponent.inputField.inputs' | transloco }}</h3>\n <ul>\n <li>\n <strong>form</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputForm' | transloco }}\n </li>\n <li>\n <strong>controlName</strong> ({{ 'inputComponent.inputField.required' | transloco }}) -\n {{ 'inputComponent.inputField.inputControlName' | transloco }}\n </li>\n <li>\n <strong>label</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputType' | transloco }}\n </li>\n <li>\n <strong>formInputType</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputFormInputType' | transloco }}\n <ul>\n <li>'input' - {{ 'inputComponent.inputField.typeInput' | transloco }}</li>\n <li>'textarea' - {{ 'inputComponent.inputField.typeTextarea' | transloco }}</li>\n <li>'checkbox' - {{ 'inputComponent.inputField.typeCheckbox' | transloco }}</li>\n </ul>\n </li>\n <li>\n <strong>errorMessage</strong> ({{ 'inputComponent.inputField.optional' | transloco }}) -\n {{ 'inputComponent.inputField.inputErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"features-block\">\n <h3>{{ 'inputComponent.inputField.features' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.feature1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature6' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.feature7' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"api-block\">\n <h3>{{ 'inputComponent.inputField.api' | transloco }}</h3>\n <ul>\n <li>\n <strong>form: FormGroup</strong> - {{ 'inputComponent.inputField.apiForm' | transloco }}\n </li>\n <li>\n <strong>controlName: string</strong> -\n {{ 'inputComponent.inputField.apiControlName' | transloco }}\n </li>\n <li>\n <strong>label?: string</strong> - {{ 'inputComponent.inputField.apiLabel' | transloco }}\n </li>\n <li>\n <strong>placeholder?: string</strong> -\n {{ 'inputComponent.inputField.apiPlaceholder' | transloco }}\n </li>\n <li>\n <strong>type?: string</strong> - {{ 'inputComponent.inputField.apiType' | transloco }}\n </li>\n <li>\n <strong>formInputType?: 'input' | 'textarea' | 'checkbox'</strong> -\n {{ 'inputComponent.inputField.apiFormInputType' | transloco }}\n </li>\n <li>\n <strong>errorMessage?: string</strong> -\n {{ 'inputComponent.inputField.apiErrorMessage' | transloco }}\n </li>\n </ul>\n </div>\n\n <div class=\"implementation-block\">\n <h3>{{ 'inputComponent.inputField.implementation' | transloco }}</h3>\n <ul>\n <li>{{ 'inputComponent.inputField.implementation1' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation2' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation3' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation4' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation5' | transloco }}</li>\n <li>{{ 'inputComponent.inputField.implementation6' | transloco }}</li>\n </ul>\n </div>\n\n <div class=\"example-block\">\n <h3>{{ 'inputComponent.inputField.example' | transloco }}</h3>\n <div class=\"example-wrapper\">\n <h4>{{ 'inputComponent.inputField.exampleComponent' | transloco }}</h4>\n <pre><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; FormBuilder, FormGroup, Validators &#125; from '&#64;angular/forms';\nimport &#123; InputFieldComponent &#125; from './input-field.component';\n\n &#64;Component(&#123;\n selector: 'app-example',\n imports: [InputFieldComponent],\n template: `\n &lt;form [formGroup]=\"exampleForm\"&gt;\n &lt;!-- Text Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"username\"\n label=\"Username\"\n placeholder=\"Enter your username\"\n [errorMessage]=\"getUsernameError()\"\n /&gt;\n\n &lt;!-- Email Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"email\"\n label=\"Email\"\n type=\"email\"\n placeholder=\"example&#64;mail.com\"\n [errorMessage]=\"getEmailError()\"\n /&gt;\n\n &lt;!-- Password Input --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"password\"\n label=\"Password\"\n type=\"password\"\n placeholder=\"Enter password\"\n [errorMessage]=\"getPasswordError()\"\n /&gt;\n\n &lt;!-- Textarea --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"description\"\n label=\"Description\"\n formInputType=\"textarea\"\n placeholder=\"Enter description\"\n /&gt;\n\n &lt;!-- Checkbox --&gt;\n &lt;dd-input-field\n [form]=\"exampleForm\"\n controlName=\"agree\"\n label=\"Agreement\"\n formInputType=\"checkbox\"\n &gt;\n I agree to the terms and conditions\n &lt;/dd-input-field&gt;\n &lt;/form&gt;\n `\n&#125;)\nexport class ExampleComponent &#123;\n exampleForm: FormGroup;\n\n constructor(private fb: FormBuilder) &#123;\n this.exampleForm = this.fb.group(&#123;\n username: ['', [Validators.required, Validators.minLength(3)]],\n email: ['', [Validators.required, Validators.email]],\n password: ['', [Validators.required, Validators.minLength(8)]],\n description: [''],\n agree: [false, Validators.requiredTrue]\n &#125;);\n &#125;\n\n getUsernameError(): string &#123;\n const control = this.exampleForm.get('username');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Username is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Username must be at least 3 characters';\n &#125;\n return '';\n &#125;\n\n getEmailError(): string &#123;\n const control = this.exampleForm.get('email');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Email is required';\n &#125;\n if (control?.hasError('email') && control?.touched) &#123;\n return 'Invalid email format';\n &#125;\n return '';\n &#125;\n\n getPasswordError(): string &#123;\n const control = this.exampleForm.get('password');\n if (control?.hasError('required') && control?.touched) &#123;\n return 'Password is required';\n &#125;\n if (control?.hasError('minlength') && control?.touched) &#123;\n return 'Password must be at least 8 characters';\n &#125;\n return '';\n &#125;\n&#125;</code></pre>\n </div>\n </div>\n </dd-card-section>\n</div>\n", styles: [":root{--dd-appear-time: .5s;--dd-gray-0: #ffffff;--dd-gray-100: #f8f5f6;--dd-gray-200: #f2f4f5;--dd-gray-300: #eaeaea;--dd-gray-400: #999999;--dd-gray-500: #252525;--dd-gray-600: #121312;--dd-success: #a7ffb5ba;--dd-secondary: #6829ff;--dd-accent-orange: #fe7b20;--dd-orange-active: #e5350f;--dd-accent-pink: #fd6ca9;--dd-accent-yellow: #ffd027;--dd-accent-blue: #3254f3;--dd-base-0: var(--dd-gray-0);--dd-base-100: var(--dd-gray-100);--dd-base-200: var(--dd-gray-200);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-400);--dd-base-500: var(--dd-gray-500);--dd-base-600: var(--dd-gray-600);--dd-background: var(--dd-gray-200);--dd-base-success: var(--dd-success);--dd-base-secondary: var(--dd-secondary);--dd-base-accent-orange: var(--dd-accent-orange);--dd-base-active-orange: var(--dd-orange-active);--dd-base-accent-pink: var(--dd-accent-pink);--dd-base-accent-yellow: var(--dd-accent-yellow);--dd-base-accent-blue: var(--dd-accent-blue)}[ddTheme=dark]{--dd-base-0: var(--dd-gray-600);--dd-base-100: var(--dd-gray-500);--dd-base-200: var(--dd-gray-400);--dd-base-300: var(--dd-gray-300);--dd-base-400: var(--dd-gray-200);--dd-base-500: var(--dd-gray-100);--dd-base-600: var(--dd-gray-0);--dd-background: var(--dd-gray-500)}[ddTheme=violet]{--dd-base-50: var(--dd-magenta-500)}.demo-container{max-width:1200px;margin:0 auto;padding:40px 20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}.demo-container h1{font-size:36px;font-weight:700;color:var(--dd-base-600);margin-bottom:40px;text-align:center;border-bottom:3px solid var(--dd-base-accent-blue);padding-bottom:20px}.demo-container .component-section{margin-bottom:60px;background:var(--dd-base-0);border-radius:12px;padding:30px;box-shadow:0 4px 6px var(--dd-base-300)}.demo-container .component-section h2{font-size:28px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;border-left:4px solid var(--dd-base-accent-blue);padding-left:15px}.demo-container .component-section .description{font-size:16px;line-height:1.6;color:var(--dd-base-400);margin-bottom:25px;padding:15px;background:var(--dd-base-100);border-radius:8px;border-left:3px solid var(--dd-base-300)}.demo-container .component-section h3{font-size:20px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px;margin-top:25px}.demo-container .component-section .usage-block,.demo-container .component-section .inputs-block,.demo-container .component-section .outputs-block,.demo-container .component-section .features-block,.demo-container .component-section .api-block,.demo-container .component-section .implementation-block,.demo-container .component-section .example-block{margin-bottom:25px}.demo-container .component-section .usage-block p,.demo-container .component-section .inputs-block p,.demo-container .component-section .outputs-block p,.demo-container .component-section .features-block p,.demo-container .component-section .api-block p,.demo-container .component-section .implementation-block p,.demo-container .component-section .example-block p{font-size:15px;line-height:1.6;color:var(--dd-base-400);margin-bottom:10px}.demo-container .component-section .usage-block ul,.demo-container .component-section .inputs-block ul,.demo-container .component-section .outputs-block ul,.demo-container .component-section .features-block ul,.demo-container .component-section .api-block ul,.demo-container .component-section .implementation-block ul,.demo-container .component-section .example-block ul{list-style:none;padding:0;margin:0}.demo-container .component-section .usage-block ul li,.demo-container .component-section .inputs-block ul li,.demo-container .component-section .outputs-block ul li,.demo-container .component-section .features-block ul li,.demo-container .component-section .api-block ul li,.demo-container .component-section .implementation-block ul li,.demo-container .component-section .example-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 .usage-block ul li strong,.demo-container .component-section .inputs-block ul li strong,.demo-container .component-section .outputs-block ul li strong,.demo-container .component-section .features-block ul li strong,.demo-container .component-section .api-block ul li strong,.demo-container .component-section .implementation-block ul li strong,.demo-container .component-section .example-block ul li strong{color:var(--dd-base-accent-blue);font-weight:600}.demo-container .component-section .usage-block ul li ul,.demo-container .component-section .inputs-block ul li ul,.demo-container .component-section .outputs-block ul li ul,.demo-container .component-section .features-block ul li ul,.demo-container .component-section .api-block ul li ul,.demo-container .component-section .implementation-block ul li ul,.demo-container .component-section .example-block ul li ul{margin-top:10px;padding-left:20px}.demo-container .component-section .usage-block ul li ul li,.demo-container .component-section .inputs-block ul li ul li,.demo-container .component-section .outputs-block ul li ul li,.demo-container .component-section .features-block ul li ul li,.demo-container .component-section .api-block ul li ul li,.demo-container .component-section .implementation-block ul li ul li,.demo-container .component-section .example-block ul li ul li{background:var(--dd-base-200);border-left:2px solid var(--dd-base-400);font-size:14px}.demo-container .component-section .example-block .example-wrapper{margin-top:15px}.demo-container .component-section .example-block .example-wrapper h4{font-size:18px;font-weight:600;color:var(--dd-base-500);margin-bottom:15px}.demo-container .component-section .example-block .example-wrapper pre{background:var(--dd-base-100);border:1px solid var(--dd-base-300);border-radius:8px;padding:20px;overflow-x:auto}.demo-container .component-section .example-block .example-wrapper pre code{font-family:Courier New,Courier,monospace;font-size:14px;line-height:1.6;color:var(--dd-base-600)}@media(max-width:768px){.demo-container{padding:20px 15px}.demo-container h1{font-size:28px}.demo-container .component-section{padding:20px}.demo-container .component-section h2{font-size:24px}.demo-container .component-section .example-block .example-wrapper pre{padding:15px}.demo-container .component-section .example-block .example-wrapper pre code{font-size:12px}}\n"] }]
2263
+ }], ctorParameters: () => [] });
2168
2264
 
2169
2265
  class DuckDevIcon {
2170
2266
  sanitizer;