@grayscale-dev/dragon 0.1.7 → 0.1.9

package/README.md

@@ -142,17 +142,50 @@ dui-input::part(input) {
 
 - `label-position="above"` (default): label sits above the field.
 - `label-position="floating"`: label sits like a placeholder and floats to the top-left on focus or when the input has a value.
-- Floating mode hides placeholder text to avoid overlap with the label, unless regex placeholder mode is enabled while focused.
+- Floating mode hides placeholder text to avoid overlap with the label.
+
+**Affixes**
+
+Use `prefix` and `suffix` to show fixed text around the user value.
+
+- Affixes are always displayed in the input.
+- Regex masking still applies to what the user types (`value` stays unprefixed/unsuffixed).
+
+Example:
+
+```html
+<dui-input label="Amount" prefix="$" regex="^\\d*$"></dui-input>
+<dui-input label="Width" suffix="px" regex="^\\d*$"></dui-input>
+```
+
+**Template Masks**
+
+Use `template` to keep literal characters visible while `x` positions are filled by the typed value.
+
+- `x` = value slot
+- Non-`x` characters stay visible in the field
+- Works with `regex`, `prefix`, and `suffix`
+
+Example:
+
+```html
+<dui-input
+  label="Phone"
+  template="(xxx) xxx-xxxx"
+  regex="^\\d*$"
+></dui-input>
+```
+
+Typing `8` shows `(8xx) xxx-xxxx`.
 
 **Masking**
 
-`regex` enables mask formatting using a supported regex-like pattern.
+`regex` uses the IMask regex engine with full JavaScript `RegExp` syntax.
 
-- Example phone pattern: `^\(\d{3}\)\s\d{3}-\d{4}$`
-- As the user types, input is normalized to the mask shape.
-- `regex-placeholder` provides explicit placeholder text for regex mode.
-- If `regex-placeholder` is empty, no regex placeholder is shown.
-- With `label-position="floating"`, regex placeholder appears only while focused.
+- Example single digit: `\d`
+- Example unlimited digits: `\d*`
+- Example phone validation shape: `^\(\d{3}\)\s\d{3}-\d{4}$`
+- As the user types, input is constrained by the regex.
 
 Example:
 
@@ -161,7 +194,6 @@ Example:
   label="Phone"
   label-position="floating"
   regex="^\(\d{3}\)\s\d{3}-\d{4}$"
-  regex-placeholder="(xxx) xxx-xxxx"
 ></dui-input>
 ```
 

package/dist/components/dui-input.d.ts

@@ -4,6 +4,9 @@ export declare class DuiInput extends LitElement {
     static styles: import("lit").CSSResult;
     value: string;
     placeholder: string;
+    prefix: string;
+    suffix: string;
+    template: string;
     name: string;
     disabled: boolean;
     required: boolean;
@@ -12,12 +15,10 @@ export declare class DuiInput extends LitElement {
     label: string;
     labelPosition: 'floating' | 'above';
     regex: string;
-    regexPlaceholder: string;
     private inputEl?;
     private internals?;
     private defaultValue?;
-    private mask;
-    private isFocused;
+    private compiledRegex;
     constructor();
     connectedCallback(): void;
     willUpdate(changed: Map<string, unknown>): void;
@@ -27,13 +28,19 @@ export declare class DuiInput extends LitElement {
     formResetCallback(): void;
     formStateRestoreCallback(state: unknown): void;
     formDisabledCallback(disabled: boolean): void;
-    private normalizeMaskedValue;
+    private normalizeWithRegex;
+    private stripAffixes;
+    private getTemplateCapacity;
+    private capToTemplate;
+    private extractTemplateValue;
+    private normalizeFromValue;
+    private normalizeFromUserInput;
+    private applyTemplate;
+    private formatDisplayValue;
     private syncFormValue;
     private handleInput;
     private handleChange;
     private handleKeydown;
-    private handleFocus;
-    private handleBlur;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {