@grayscale-dev/dragon 0.1.8 → 0.1.10

package/README.md

@@ -142,19 +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.
+- Input masking still applies to what the user types (`value` stays unprefixed/unsuffixed).
+
+Example:
+
+```html
+<dui-input label="Amount" prefix="$" input-mask="9{1,10}"></dui-input>
+<dui-input label="Width" suffix="px" input-mask="9{1,10}"></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 `input-mask`, `prefix`, and `suffix`
+
+Example:
+
+```html
+<dui-input
+  label="Phone"
+  template="(xxx) xxx-xxxx"
+  input-mask="9{1,10}"
+></dui-input>
+```
+
+Typing `8` shows `(8xx) xxx-xxxx`.
 
 **Masking**
 
-`regex` uses the IMask regex engine with full JavaScript `RegExp` syntax.
+`input-mask` uses the Inputmask pattern syntax.
 
-- 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.
-- `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 4 digits: `9999`
+- Example 1-10 digits: `9{1,10}`
+- Example phone shape: `(999) 999-9999`
+- As the user types, input is constrained by the mask.
 
 Example:
 
@@ -162,8 +193,7 @@ Example:
 <dui-input
   label="Phone"
   label-position="floating"
-  regex="^\(\d{3}\)\s\d{3}-\d{4}$"
-  regex-placeholder="(xxx) xxx-xxxx"
+  input-mask="(999) 999-9999"
 ></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;
@@ -11,29 +14,31 @@ export declare class DuiInput extends LitElement {
     autocomplete?: string;
     label: string;
     labelPosition: 'floating' | 'above';
-    regex: string;
-    regexPlaceholder: string;
+    inputMask: string;
     private inputEl?;
     private internals?;
     private defaultValue?;
-    private compiledRegex;
-    private isFocused;
     constructor();
     connectedCallback(): void;
-    willUpdate(changed: Map<string, unknown>): void;
     updated(changed: Map<string, unknown>): void;
     focus(options?: FocusOptions): void;
     blur(): void;
     formResetCallback(): void;
     formStateRestoreCallback(state: unknown): void;
     formDisabledCallback(disabled: boolean): void;
-    private normalizeWithRegex;
+    private normalizeWithInputMask;
+    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 {