@design-system-rte/angular 0.5.3 → 0.7.0

package/fesm2022/design-system-rte-angular.mjs

@@ -102,7 +102,131 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ["class"]
             }] } });
 
-const togglableIcons = {
+// This file is auto-generated. Do not edit manually.
+const RegularIcons = {
+    add: "add",
+    "alt-route": "alt_route",
+    apps: "apps",
+    "arrow-alt-down": "arrow_alt_down",
+    "arrow-alt-down-left": "arrow_alt_down_left",
+    "arrow-alt-down-right": "arrow_alt_down_right",
+    "arrow-alt-left": "arrow_alt_left",
+    "arrow-alt-right": "arrow_alt_right",
+    "arrow-alt-up": "arrow_alt_up",
+    "arrow-alt-up-left": "arrow_alt_up_left",
+    "arrow-alt-up-right": "arrow_alt_up_right",
+    "arrow-angle-down-left": "arrow_angle_down_left",
+    "arrow-angle-down-right": "arrow_angle_down_right",
+    "arrow-angle-up-left": "arrow_angle_up_left",
+    "arrow-angle-up-right": "arrow_angle_up_right",
+    "arrow-chevron-down": "arrow_chevron_down",
+    "arrow-chevron-left": "arrow_chevron_left",
+    "arrow-chevron-right": "arrow_chevron_right",
+    "arrow-chevron-up": "arrow_chevron_up",
+    "arrow-double-down": "arrow_double_down",
+    "arrow-double-left": "arrow_double_left",
+    "arrow-double-right": "arrow_double_right",
+    "arrow-double-up": "arrow_double_up",
+    "arrow-down": "arrow_down",
+    "arrow-down-left": "arrow_down_left",
+    "arrow-down-right": "arrow_down_right",
+    "arrow-drop-down": "arrow_drop_down",
+    "arrow-drop-up": "arrow_drop_up",
+    "arrow-left": "arrow_left",
+    "arrow-right": "arrow_right",
+    "arrow-up": "arrow_up",
+    "arrow-up-left": "arrow_up_left",
+    "arrow-up-right": "arrow_up_right",
+    asterisk: "asterisk",
+    "attach-file": "attach_file",
+    "battery-alt-empty": "battery_alt_empty",
+    "battery-alt-full": "battery_alt_full",
+    "battery-charging": "battery_charging",
+    "battery-empty": "battery_empty",
+    "battery-full": "battery_full",
+    bluetooth: "bluetooth",
+    "bluetooth-off": "bluetooth_off",
+    "chart-bar": "chart_bar",
+    "chart-bar-stacked": "chart_bar_stacked",
+    check: "check",
+    "check-indeterminate": "check_indeterminate",
+    "check-small": "check_small",
+    "checkbox-empty": "checkbox_empty",
+    close: "close",
+    compare: "compare",
+    "copy-all": "copy_all",
+    "crisis-alert": "crisis_alert",
+    cut: "cut",
+    download: "download",
+    "download-done": "download_done",
+    "drag-handle": "drag_handle",
+    "drag-indicator": "drag_indicator",
+    exclamation: "exclamation",
+    "explore-travel": "explore_travel",
+    "external-link": "external_link",
+    filter: "filter",
+    "filter-off": "filter_off",
+    "first-page": "first_page",
+    forward: "forward",
+    fullscreen: "fullscreen",
+    "fullscreen-exit": "fullscreen_exit",
+    history: "history",
+    "hourglass-empty": "hourglass_empty",
+    "info-i": "info_i",
+    language: "language",
+    "last-page": "last_page",
+    link: "link",
+    "link-off": "link_off",
+    list: "list",
+    "location-disabled": "location_disabled",
+    login: "login",
+    logout: "logout",
+    menu: "menu",
+    "menu-open": "menu_open",
+    monitoring: "monitoring",
+    "more-down": "more_down",
+    "more-horiz": "more_horiz",
+    "more-up": "more_up",
+    "more-vert": "more_vert",
+    ohm: "ohm",
+    "open-in-full": "open_in_full",
+    paste: "paste",
+    "play-pause": "play_pause",
+    "power-input": "power_input",
+    "power-plug": "power_plug",
+    "power-settings": "power_settings",
+    "priority-high": "priority_high",
+    public: "public",
+    publish: "publish",
+    "question-mark": "question_mark",
+    radar: "radar",
+    "radio-button-empty": "radio_button_empty",
+    redo: "redo",
+    reload: "reload",
+    remove: "remove",
+    reply: "reply",
+    "reply-all": "reply_all",
+    route: "route",
+    search: "search",
+    "side-navigation": "side_navigation",
+    sort: "sort",
+    "support-agent": "support_agent",
+    timeline: "timeline",
+    "trending-down": "trending_down",
+    "trending-flat": "trending_flat",
+    "trending-up": "trending_up",
+    tune: "tune",
+    undo: "undo",
+    upload: "upload",
+    water: "water",
+    "water-alt": "water_alt",
+    wifi: "wifi",
+    "wifi-off": "wifi_off",
+    windmill: "windmill",
+    "zoom-in": "zoom_in",
+    "zoom-out": "zoom_out",
+};
+const TogglableIcons = {
     "add-circle": ["add_circle_outlined", "add_circle_filled"],
     "admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
     analytics: ["analytics_outlined", "analytics_filled"],
@@ -132,6 +256,7 @@ const togglableIcons = {
     "calendar-month": ["calendar_month_outlined", "calendar_month_filled"],
     "calendar-today": ["calendar_today_outlined", "calendar_today_filled"],
     call: ["call_outlined", "call_filled"],
+    cancel: ["cancel_outlined", "cancel_filled"],
     category: ["category_outlined", "category_filled"],
     "chart-add": ["chart_add_outlined", "chart_add_filled"],
     "chart-area": ["chart_area_outlined", "chart_area_filled"],
@@ -201,8 +326,8 @@ const togglableIcons = {
     "keep-off": ["keep_off_outlined", "keep_off_filled"],
     label: ["label_outlined", "label_filled"],
     laptop: ["laptop_outlined", "laptop_filled"],
-    "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
     "left-panel-close": ["left_panel_close_outlined", "left_panel_close_filled"],
+    "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
     "light-off": ["light_off_outlined", "light_off_filled"],
     "lightbulb-alt": ["lightbulb_alt_outlined", "lightbulb_alt_filled"],
     "lightbulb-circle": ["lightbulb_circle_outlined", "lightbulb_circle_filled"],
@@ -279,130 +404,9 @@ const togglableIcons = {
     warning: ["warning_outlined", "warning_filled"],
     waterdrop: ["waterdrop_outlined", "waterdrop_filled"],
 };
-const regularIcons = {
-    add: "add",
-    "alt-route": "alt_route",
-    apps: "apps",
-    "arrow-alt-down": "arrow_alt_down",
-    "arrow-alt-down-left": "arrow_alt_down_left",
-    "arrow-alt-down-right": "arrow_alt_down_right",
-    "arrow-alt-left": "arrow_alt_left",
-    "arrow-alt-right": "arrow_alt_right",
-    "arrow-alt-up": "arrow_alt_up",
-    "arrow-alt-up-left": "arrow_alt_up_left",
-    "arrow-alt-up-right": "arrow_alt_up_right",
-    "arrow-angle-down-left": "arrow_angle_down_left",
-    "arrow-angle-down-right": "arrow_angle_down_right",
-    "arrow-angle-up-left": "arrow_angle_up_left",
-    "arrow-angle-up-right": "arrow_angle_up_right",
-    "arrow-chevron-down": "arrow_chevron_down",
-    "arrow-chevron-left": "arrow_chevron_left",
-    "arrow-chevron-right": "arrow_chevron_right",
-    "arrow-chevron-up": "arrow_chevron_up",
-    "arrow-double-down": "arrow_double_down",
-    "arrow-double-left": "arrow_double_left",
-    "arrow-double-right": "arrow_double_right",
-    "arrow-double-up": "arrow_double_up",
-    "arrow-down": "arrow_down",
-    "arrow-down-left": "arrow_down_left",
-    "arrow-down-right": "arrow_down_right",
-    "arrow-drop-down": "arrow_drop_down",
-    "arrow-drop-up": "arrow_drop_up",
-    "arrow-left": "arrow_left",
-    "arrow-right": "arrow_right",
-    "arrow-up": "arrow_up",
-    "arrow-up-left": "arrow_up_left",
-    "arrow-up-right": "arrow_up_right",
-    asterisk: "asterisk",
-    "attach-file": "attach_file",
-    "battery-alt-empty": "battery_alt_empty",
-    "battery-alt-full": "battery_alt_full",
-    "battery-charging": "battery_charging",
-    "battery-empty": "battery_empty",
-    "battery-full": "battery_full",
-    bluetooth: "bluetooth",
-    "bluetooth-off": "bluetooth_off",
-    "chart-bar": "chart_bar",
-    "chart-bar-stacked": "chart_bar_stacked",
-    check: "check",
-    "check-indeterminate": "check_indeterminate",
-    "check-small": "check_small",
-    "checkbox-empty": "checkbox_empty",
-    close: "close",
-    compare: "compare",
-    "copy-all": "copy_all",
-    "crisis-alert": "crisis_alert",
-    cut: "cut",
-    download: "download",
-    "download-done": "download_done",
-    "drag-handle": "drag_handle",
-    "drag-indicator": "drag_indicator",
-    exclamation: "exclamation",
-    "explore-travel": "explore_travel",
-    "external-link": "external_link",
-    filter: "filter",
-    "filter-off": "filter_off",
-    "first-page": "first_page",
-    forward: "forward",
-    fullscreen: "fullscreen",
-    "fullscreen-exit": "fullscreen_exit",
-    history: "history",
-    "hourglass-empty": "hourglass_empty",
-    "info-i": "info_i",
-    language: "language",
-    "last-page": "last_page",
-    link: "link",
-    "link-off": "link_off",
-    list: "list",
-    "location-disabled": "location_disabled",
-    login: "login",
-    logout: "logout",
-    menu: "menu",
-    "menu-open": "menu_open",
-    monitoring: "monitoring",
-    "more-down": "more_down",
-    "more-horiz": "more_horiz",
-    "more-up": "more_up",
-    "more-vert": "more_vert",
-    ohm: "ohm",
-    "open-in-full": "open_in_full",
-    paste: "paste",
-    "play-pause": "play_pause",
-    "power-input": "power_input",
-    "power-plug": "power_plug",
-    "power-settings": "power_settings",
-    "priority-high": "priority_high",
-    public: "public",
-    publish: "publish",
-    "question-mark": "question_mark",
-    radar: "radar",
-    "radio-button-empty": "radio_button_empty",
-    redo: "redo",
-    reload: "reload",
-    remove: "remove",
-    reply: "reply",
-    "reply-all": "reply_all",
-    route: "route",
-    search: "search",
-    "side-navigation": "side_navigation",
-    sort: "sort",
-    "support-agent": "support_agent",
-    timeline: "timeline",
-    "trending-down": "trending_down",
-    "trending-flat": "trending_flat",
-    "trending-up": "trending_up",
-    tune: "tune",
-    undo: "undo",
-    upload: "upload",
-    water: "water",
-    "water-alt": "water_alt",
-    wifi: "wifi",
-    "wifi-off": "wifi_off",
-    windmill: "windmill",
-    "zoom-out": "zoom_out",
-    "zoom-in": "zoom_in",
-};
-const isValidIconName = (name) => isValidIconName$1(name, regularIcons, togglableIcons);
+function isValidIconName(iconName) {
+    return isValidIconName$1(iconName, RegularIcons, TogglableIcons);
+}
 
 class IconService {
     constructor() {
@@ -412,14 +416,14 @@ class IconService {
         if (!this.http) {
             throw new Error("HttpClient is not available");
         }
-        const toggableIcon = togglableIcons[name];
-        if (toggableIcon) {
-            const [outlinedIconName, filledIconName] = toggableIcon;
+        const togglableIcon = TogglableIcons[name];
+        if (togglableIcon) {
+            const [outlinedIconName, filledIconName] = togglableIcon;
             const iconName = appearance === "filled" ? filledIconName : outlinedIconName;
             return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
         }
         else {
-            const iconName = regularIcons[name];
+            const iconName = RegularIcons[name];
             if (!iconName) {
                 throw new Error(`Icon ${name} not found`);
             }
@@ -823,9 +827,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: "rte-icon-button-toggle", imports: [CommonModule, IconButtonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<rte-icon-button \n  [size]=\"size()\" \n  [name]=\"name()\" \n  [compactSpacing]=\"compactSpacing()\"\n  [disabled]=\"disabled()\"\n  [ariaLabel]=\"ariaLabel()\"\n  [ariaLabelledBy]=\"ariaLabelledBy()\"\n  [type]=\"type()\"\n  [variant]=\"variant()\"\n  [appearance]=\"selected() ? 'filled' : 'outlined'\"\n  (click)=\"onClick($event)\"\n/>" }]
         }] });
 
+class TextInputComponent {
+    constructor() {
+        this.label = input("");
+        this.labelPosition = input("top");
+        this.required = input(false);
+        this.showCounter = input(false);
+        this.value = input("");
+        this.internalValue = signal(this.value());
+        this.leftIcon = input(null);
+        this.showRightIcon = input(true);
+        this.rightIconAction = input("clean");
+        this.showLabelRequirement = input(false);
+        this.assistiveAppearance = input("description");
+        this.showAssistiveIcon = input(false);
+        this.assistiveTextLabel = input("");
+        this.error = input(false);
+        this.maxLength = input(150);
+        this.disabled = input(false);
+        this.readOnly = input(false);
+        this.width = input("300px");
+        this.ariaLabel = input("");
+        this.ariaRequired = input(false);
+        this.ariaLabelledby = input("");
+        this.valueChange = output();
+        this.rightIconClick = output();
+        this.characterCount = signal(this.internalValue().length);
+        this.isHiddenInput = signal(this.showRightIcon() && this.rightIconAction() === "visibilityOn");
+        this.displayedLeftIcon = computed(() => (this.error() ? "error" : this.leftIcon()));
+        this.displayCounter = computed(() => this.showCounter() && typeof this.maxLength() === "number");
+        this.rightIconName = computed(() => {
+            if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
+                return this.isHiddenInput() ? "visibility-show" : "visibility-hide";
+            }
+            else if (this.rightIconAction() === "clean") {
+                return "close";
+            }
+            return "";
+        });
+        this.rightIconAriaLabel = computed(() => {
+            if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
+                return this.isHiddenInput() ? "show text" : "hide text";
+            }
+            else if (this.rightIconAction() === "clean") {
+                return "clear";
+            }
+            return "";
+        });
+        this.shouldShowRightIcon = computed(() => {
+            if (this.readOnly() || this.disabled()) {
+                return false;
+            }
+            if (this.rightIconAction() === "clean") {
+                return !!this.internalValue()?.length && this.showRightIcon();
+            }
+            return this.showRightIcon() && !!this.rightIconAction();
+        });
+        this.lastParentValue = this.value();
+        effect(() => {
+            const parentValue = this.value();
+            if (parentValue !== this.lastParentValue) {
+                this.lastParentValue = parentValue;
+                this.internalValue.set(parentValue);
+            }
+        }, { allowSignalWrites: true });
+    }
+    handleChange(event) {
+        const input = event.target;
+        this.internalValue.set(input.value);
+        this.valueChange.emit(input.value);
+        if (this.maxLength()) {
+            this.characterCount.set(input.value.length);
+        }
+        this.valueChange.emit(input.value);
+    }
+    onRightIconClickHandler() {
+        this.rightIconClick.emit();
+        this.triggerRightIconAction();
+    }
+    toggleInputVisibility() {
+        this.isHiddenInput.set(!this.isHiddenInput());
+    }
+    triggerRightIconAction() {
+        if (this.rightIconAction() === "clean") {
+            this.internalValue.set("");
+            this.valueChange.emit("");
+            this.characterCount.set(0);
+        }
+        if (["visibilityOn", "visibilityOff"].includes(this.rightIconAction())) {
+            this.toggleInputVisibility();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "17.3.12", type: TextInputComponent, isStandalone: true, selector: "rte-text-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, showCounter: { classPropertyName: "showCounter", publicName: "showCounter", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, leftIcon: { classPropertyName: "leftIcon", publicName: "leftIcon", isSignal: true, isRequired: false, transformFunction: null }, showRightIcon: { classPropertyName: "showRightIcon", publicName: "showRightIcon", isSignal: true, isRequired: false, transformFunction: null }, rightIconAction: { classPropertyName: "rightIconAction", publicName: "rightIconAction", isSignal: true, isRequired: false, transformFunction: null }, showLabelRequirement: { classPropertyName: "showLabelRequirement", publicName: "showLabelRequirement", isSignal: true, isRequired: false, transformFunction: null }, assistiveAppearance: { classPropertyName: "assistiveAppearance", publicName: "assistiveAppearance", isSignal: true, isRequired: false, transformFunction: null }, showAssistiveIcon: { classPropertyName: "showAssistiveIcon", publicName: "showAssistiveIcon", isSignal: true, isRequired: false, transformFunction: null }, assistiveTextLabel: { classPropertyName: "assistiveTextLabel", publicName: "assistiveTextLabel", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaRequired: { classPropertyName: "ariaRequired", publicName: "ariaRequired", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", rightIconClick: "rightIconClick" }, ngImport: i0, template: "<div\n  class=\"container {{labelPosition()}}\"\n  [ngClass]=\"{'error': error()}\"\n  [style.width]=\"width()\"\n>\n  <ng-container *ngIf=\"label()\">\n    <div class=\"text\">\n      <div class=\"label-container\">\n        <label class=\"input-label\" id=\"inputLabel\">\n          {{ label() }}\n        </label>\n        <ng-container *ngIf=\"required()\">\n          <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n            <span class=\"required-text\">(obligatoire)</span>\n          </ng-container>\n          <ng-template #requiredIcon>\n            <span class=\"required-icon-container\">\n              <rte-icon name=\"asterisk\" [size]=\"8\" />\n            </span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n          <span class=\"required-text\">(optionnel)</span>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n        <p class=\"input-counter\" data-testid=\"input-counter\">\n          {{ characterCount() }}/{{ maxLength() }}\n        </p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div\n      class=\"input {{labelPosition()}}\"\n      [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n    >\n      <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon\n            appearance=\"outlined\"\n            class=\"left-icon\"\n            aria-hidden=\"true\"\n            [name]=\"displayedLeftIcon()!\"\n          />\n        </ng-container>\n\n        <input\n          #inputRef\n          class=\"input-field\"\n          [ngClass]=\"{'error': error()}\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-labelledby]=\"ariaLabelledby()\"\n          [attr.aria-required]=\"ariaRequired()\"\n          [type]=\"isHiddenInput() ? 'password' : 'text'\"\n          [maxLength]=\"maxLength()\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readOnly()\"\n          [value]=\"internalValue()\"\n          (input)=\"handleChange($event)\"\n        />\n\n        <ng-container *ngIf=\"shouldShowRightIcon()\">\n          <rte-icon-button\n            appearance=\"outlined\"\n            variant=\"transparent\"\n            class=\"right-icon\"\n            data-testid=\"right-icon\"\n            [name]=\"rightIconName() || 'close'\"\n            [ariaLabel]=\"rightIconAriaLabel()\"\n            (click)=\"onRightIconClickHandler()\"\n          />\n        </ng-container>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"assistiveTextLabel()\">\n      <div class=\"assistive-text\">\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n          <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n          <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n          <rte-link [label]=\"assistiveTextLabel()\" />\n        </ng-container>\n        <ng-template #assistiveLabel>\n          <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n            {{ assistiveTextLabel() }}\n          </p>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n    <p class=\"input-counter\" data-testid=\"input-counter\">\n      {{ characterCount() }}/{{ maxLength() }}\n    </p>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "rte-icon", inputs: ["name", "size", "color", "classes", "appearance"] }, { kind: "component", type: IconButtonComponent, selector: "rte-icon-button", inputs: ["disabled", "name", "size", "variant", "type", "appearance", "compactSpacing", "ariaLabel", "ariaLabelledBy"], outputs: ["click"] }, { kind: "component", type: LinkComponent, selector: "rte-link", inputs: ["label", "href", "subtle", "externalLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "rte-text-input", imports: [CommonModule, IconComponent, IconButtonComponent, LinkComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container {{labelPosition()}}\"\n  [ngClass]=\"{'error': error()}\"\n  [style.width]=\"width()\"\n>\n  <ng-container *ngIf=\"label()\">\n    <div class=\"text\">\n      <div class=\"label-container\">\n        <label class=\"input-label\" id=\"inputLabel\">\n          {{ label() }}\n        </label>\n        <ng-container *ngIf=\"required()\">\n          <ng-container *ngIf=\"showLabelRequirement(); else requiredIcon\">\n            <span class=\"required-text\">(obligatoire)</span>\n          </ng-container>\n          <ng-template #requiredIcon>\n            <span class=\"required-icon-container\">\n              <rte-icon name=\"asterisk\" [size]=\"8\" />\n            </span>\n          </ng-template>\n        </ng-container>\n        <ng-container *ngIf=\"!required() && showLabelRequirement()\">\n          <span class=\"required-text\">(optionnel)</span>\n        </ng-container>\n      </div>\n      <ng-container *ngIf=\"displayCounter() && labelPosition() === 'top'\">\n        <p class=\"input-counter\" data-testid=\"input-counter\">\n          {{ characterCount() }}/{{ maxLength() }}\n        </p>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <div class=\"input-container\">\n    <div\n      class=\"input {{labelPosition()}}\"\n      [ngClass]=\"{'disabled': disabled(), 'read-only': readOnly()}\"\n    >\n      <div class=\"input-bar\" [ngClass]=\"{'with-left-icon': displayedLeftIcon(), 'with-right-icon': rightIconAction()}\">\n        <ng-container *ngIf=\"displayedLeftIcon()\">\n          <rte-icon\n            appearance=\"outlined\"\n            class=\"left-icon\"\n            aria-hidden=\"true\"\n            [name]=\"displayedLeftIcon()!\"\n          />\n        </ng-container>\n\n        <input\n          #inputRef\n          class=\"input-field\"\n          [ngClass]=\"{'error': error()}\"\n          [attr.aria-label]=\"ariaLabel()\"\n          [attr.aria-labelledby]=\"ariaLabelledby()\"\n          [attr.aria-required]=\"ariaRequired()\"\n          [type]=\"isHiddenInput() ? 'password' : 'text'\"\n          [maxLength]=\"maxLength()\"\n          [disabled]=\"disabled()\"\n          [readOnly]=\"readOnly()\"\n          [value]=\"internalValue()\"\n          (input)=\"handleChange($event)\"\n        />\n\n        <ng-container *ngIf=\"shouldShowRightIcon()\">\n          <rte-icon-button\n            appearance=\"outlined\"\n            variant=\"transparent\"\n            class=\"right-icon\"\n            data-testid=\"right-icon\"\n            [name]=\"rightIconName() || 'close'\"\n            [ariaLabel]=\"rightIconAriaLabel()\"\n            (click)=\"onRightIconClickHandler()\"\n          />\n        </ng-container>\n      </div>\n    </div>\n\n    <ng-container *ngIf=\"assistiveTextLabel()\">\n      <div class=\"assistive-text\">\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'error'\">\n          <rte-icon name=\"error\" appearance=\"outlined\" class=\"assistive-icon-error\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"showAssistiveIcon() && assistiveAppearance() === 'success'\">\n          <rte-icon name=\"check\" appearance=\"outlined\" class=\"assistive-icon-success\" [size]=\"12\" />\n        </ng-container>\n        <ng-container *ngIf=\"assistiveAppearance() === 'link'; else assistiveLabel\">\n          <rte-link [label]=\"assistiveTextLabel()\" />\n        </ng-container>\n        <ng-template #assistiveLabel>\n          <p class=\"assistive-label\" [ngClass]=\"assistiveAppearance()\">\n            {{ assistiveTextLabel() }}\n          </p>\n        </ng-template>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-container *ngIf=\"displayCounter() && labelPosition() === 'side'\">\n    <p class=\"input-counter\" data-testid=\"input-counter\">\n      {{ characterCount() }}/{{ maxLength() }}\n    </p>\n  </ng-container>\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:wght,FILL,GRAD@400,0,0&display=swap\";@import\"https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap\";.container{display:flex;width:300px;padding:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:0px}.container.side{align-items:center;flex-direction:row}.container.side .text{width:auto;align-items:center}.container.side .input-counter{padding:0 8px}.container.error .input-container .input .input-bar .left-icon{color:var(--content-danger)}.container .text{width:100%;display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;padding:2px 8px;box-sizing:border-box}.container .text .label-container{display:flex;align-items:flex-start}.container .text .label-container .input-label{color:var(--content-secondary);font-family:Arial;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0px}.container .text .label-container .required-text{color:var(--content-tertiary);align-self:center;font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin-block:0px;margin-inline:4px}.container .text .label-container .required-icon-container{color:var(--content-danger);display:flex;align-items:center;justify-content:center;margin-inline:4px}.container .input-container{display:flex;flex-direction:column;height:32px;width:100%;min-width:48px;min-height:32px;max-height:32px;align-self:stretch}.container .input-container .input .input-bar{position:relative;display:flex;align-items:center}.container .input-container .input .input-bar.with-left-icon .input-field{padding-left:32px}.container .input-container .input .input-bar.with-right-icon .input-field{padding-right:32px}.container .input-container .input .input-bar .left-icon{position:absolute;left:8px;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon{position:absolute;right:8px;display:flex;align-items:center;justify-content:center;color:var(--content-secondary)}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button{color:var(--content-secondary);height:24px;width:24px;padding:0 2px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus{outline:none}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible{outline:1px solid var(--border-brand-focused);border-radius:8px}.container .input-container .input .input-bar .right-icon ::ng-deep .rte-icon-button:focus-visible:after{display:none}.container .input-container .input .input-bar .input-field{box-sizing:border-box;appearance:none;width:100%;height:32px;min-width:48px;max-height:32px;border-radius:4px;border:1px solid var(--border-secondary);padding:4px 16px;background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-default);transition:border .2s,outline .2s;color:var(--content-primary);box-shadow:inset 0 1px 4px 0 var(--elevation-shadow-key)}.container .input-container .input .input-bar .input-field:hover{outline:1px solid var(--border-primary);border-color:var(--border-primary)}.container .input-container .input .input-bar .input-field:focus{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:active{outline:1px solid var(--border-brand-default);border-color:var(--border-brand-default)}.container .input-container .input .input-bar .input-field:disabled,.container .input-container .input .input-bar .input-field:read-only{outline:1px solid var(--border-brand-disabled);border-color:var(--border-disabled);background:linear-gradient(0deg,var(--elevation-surface-inner-shadow) 0%,var(--elevation-surface-inner-shadow) 100%),var(--background-disabled);cursor:not-allowed}.container .input-container .input .input-bar .input-field.error{outline:1px solid var(--border-danger);border-color:var(--border-danger)}.container .input-container .assistive-text{display:flex;align-items:center;gap:4px;padding:4px 8px}.container .input-container .assistive-text .assistive-icon-error{color:var(--content-danger)}.container .input-container .assistive-text .assistive-icon-success{color:var(--content-success)}.container .input-container .assistive-text .assistive-label{transition:color .2s}.container .input-container .assistive-text .assistive-label.error{color:var(--content-danger);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.success{color:var(--content-success);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:700;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.container .input-container .assistive-text .assistive-label.description{color:var(--content-tertiary);font-feature-settings:\"liga\" off,\"clig\" off;font-style:normal;font-family:Arial;font-weight:400;font-size:12px;line-height:16px;letter-spacing:0px;margin:0}.input-counter{color:var(--content-tertiary);font-family:Arial;font-size:12px;font-weight:400;line-height:16px;letter-spacing:0px;margin-block:0px}\n"] }]
+        }], ctorParameters: () => [] });
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ColDirective, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent, SplitButtonComponent, TooltipDirective };
+export { ButtonComponent, CheckboxComponent, CheckboxGroupComponent, ColDirective, GridDirective, IconButtonComponent, IconButtonToggleComponent, IconComponent, LinkComponent, RadioButtonComponent, RadioButtonGroupComponent, SplitButtonComponent, TextInputComponent, TooltipDirective };
 //# sourceMappingURL=design-system-rte-angular.mjs.map