@oracle/oraclejet-core-pack 16.0.5 → 16.1.0

package/oj-c/input-sensitive-text/component.json

@@ -0,0 +1,574 @@
+{
+  "name": "input-sensitive-text",
+  "version": "16.1.0",
+  "jetVersion": "^16.1.0",
+  "pack": "oj-c",
+  "type": "composite",
+  "dependencyScope": "runtime",
+  "license": "https://opensource.org/licenses/UPL",
+  "implements": [
+    "CInputSensitiveTextElement"
+  ],
+  "displayName": "InputSensitiveText",
+  "description": "An Input Sensitive Text displays a field that allows a user to enter sensitive text that will be masked.",
+  "help": "oj-c.InputSensitiveText.html",
+  "main": "oj-c/input-sensitive-text",
+  "extension": {
+    "catalog": {
+      "category": "Forms"
+    },
+    "vbdt": {
+      "module": "oj-c/input-sensitive-text",
+      "defaultColumns": 6,
+      "minColumns": 2
+    },
+    "oracle": {
+      "icon": "oj-ux-ico-text-input-password",
+      "uxSpecs": [
+        "input-text"
+      ]
+    }
+  },
+  "propertyLayout": [
+    {
+      "propertyGroup": "common",
+      "items": [
+        "disabled",
+        "labelHint",
+        "placeholder",
+        "readonly",
+        "required"
+      ]
+    },
+    {
+      "propertyGroup": "data",
+      "items": [
+        "value"
+      ]
+    }
+  ],
+  "since": "16.1.0",
+  "properties": {
+    "clearIcon": {
+      "type": "string",
+      "description": "Specifies if an icon to clear the input field should be visible.",
+      "displayName": "Clear Icon",
+      "help": "#clearIcon",
+      "propertyEditorValues": {
+        "always": {
+          "description": "The clear icon will always be shown.",
+          "displayName": "Always"
+        },
+        "never": {
+          "description": "The clear icon will never be shown (default, if unspecified).",
+          "displayName": "Never"
+        },
+        "conditional": {
+          "description": "The clear icon is visible under the following conditions: if the component has a non-empty value, and it either has focus or the mouse is over the field.",
+          "displayName": "Conditional"
+        }
+      },
+      "enumValues": [
+        "conditional",
+        "always",
+        "never"
+      ],
+      "value": "never"
+    },
+    "columnSpan": {
+      "type": "number",
+      "description": "Specifies how many columns this component should span.",
+      "displayName": "Column Span",
+      "help": "#columnSpan",
+      "value": 1
+    },
+    "containerReadonly": {
+      "type": "boolean",
+      "description": "Specifies whether an ancestor container, like oj-c-form-layout, is readonly.",
+      "displayName": "Container Readonly",
+      "help": "#containerReadonly",
+      "binding": {
+        "consume": {
+          "name": "containerReadonly"
+        }
+      }
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Specifies whether the component is disabled.",
+      "displayName": "Disabled",
+      "help": "#disabled",
+      "value": false
+    },
+    "displayOptions": {
+      "type": "object",
+      "description": "Display options for auxiliary content that determines whether or not it should be displayed.",
+      "displayName": "Display Options",
+      "help": "#displayOptions",
+      "properties": {
+        "messages": {
+          "type": "string",
+          "enumValues": [
+            "none",
+            "display"
+          ],
+          "value": "display"
+        },
+        "validatorHint": {
+          "type": "string",
+          "enumValues": [
+            "none",
+            "display"
+          ],
+          "value": "display"
+        }
+      }
+    },
+    "help": {
+      "type": "object",
+      "description": "Form component help information.",
+      "displayName": "Help",
+      "help": "#help",
+      "properties": {
+        "instruction": {
+          "type": "string",
+          "value": ""
+        }
+      }
+    },
+    "helpHints": {
+      "type": "object",
+      "description": "The helpHints object contains a definition property and a source property.",
+      "displayName": "Help Hints",
+      "help": "#helpHints",
+      "properties": {
+        "definition": {
+          "type": "string",
+          "value": ""
+        },
+        "source": {
+          "type": "string",
+          "value": ""
+        },
+        "sourceText": {
+          "type": "string"
+        }
+      }
+    },
+    "labelEdge": {
+      "type": "string",
+      "description": "Specifies how the label is positioned for the component",
+      "displayName": "Label Edge",
+      "help": "#labelEdge",
+      "propertyEditorValues": {
+        "inside": {
+          "description": "The label floats over the input element, but moves up on focus or when the component has a value (default, if unspecified).",
+          "displayName": "Inside"
+        },
+        "none": {
+          "description": "The component will not create a label, but instead set the aria-label property on the input element.",
+          "displayName": "None"
+        },
+        "start": {
+          "description": "The label will be placed before the start of the component.",
+          "displayName": "Start"
+        },
+        "top": {
+          "description": "The label will be placed on top of the component.",
+          "displayName": "Top"
+        }
+      },
+      "enumValues": [
+        "none",
+        "start",
+        "top",
+        "inside"
+      ],
+      "binding": {
+        "consume": {
+          "name": "containerLabelEdge"
+        }
+      }
+    },
+    "labelHint": {
+      "type": "string",
+      "description": "Represents a hint for rendering a label on the component.",
+      "displayName": "Label Hint",
+      "help": "#labelHint",
+      "required": true,
+      "translatable": true
+    },
+    "labelStartWidth": {
+      "type": "number|string",
+      "description": "The width of the label when labelEdge is 'start'.",
+      "displayName": "Label Start Width",
+      "help": "#labelStartWidth",
+      "binding": {
+        "consume": {
+          "name": "labelWidth"
+        }
+      }
+    },
+    "labelWrapping": {
+      "type": "string",
+      "description": "Should the labels wrap or truncate when there is not enough available space.",
+      "displayName": "Label Wrapping",
+      "help": "#labelWrapping",
+      "propertyEditorValues": {
+        "truncate": {
+          "description": "Label will truncate if needed.",
+          "displayName": "Truncate"
+        },
+        "wrap": {
+          "description": "Label will wrap if needed.",
+          "displayName": "Wrap"
+        }
+      },
+      "enumValues": [
+        "truncate",
+        "wrap"
+      ],
+      "binding": {
+        "consume": {
+          "name": "labelWrapping"
+        }
+      }
+    },
+    "length": {
+      "type": "object",
+      "description": "Defines the length limit for the field",
+      "displayName": "Length",
+      "help": "#length",
+      "properties": {
+        "countBy": {
+          "type": "string",
+          "displayName": "Count By",
+          "help": "#length.countBy",
+          "propertyEditorValues": {
+            "codePoint": {
+              "description": "Uses code point to calculate the text length (default, if unspecified)",
+              "displayName": "Code Point"
+            },
+            "codeUnit": {
+              "description": "Uses code unit to calculate the text length.",
+              "displayName": "Code Unit"
+            }
+          },
+          "enumValues": [
+            "codePoint",
+            "codeUnit"
+          ],
+          "value": "codePoint"
+        },
+        "max": {
+          "type": "number|null",
+          "value": null
+        }
+      }
+    },
+    "maskIcon": {
+      "type": "string",
+      "description": "Represents the mask icon.",
+      "displayName": "Mask Icon",
+      "help": "#maskIcon",
+      "propertyEditorValues": {
+        "hidden": {
+          "description": "The mask visibility icon is never visible.",
+          "displayName": "Hidden"
+        },
+        "visible": {
+          "description": "The mask visibility icon is always visible.",
+          "displayName": "Visible"
+        }
+      },
+      "enumValues": [
+        "hidden",
+        "visible"
+      ],
+      "value": "visible"
+    },
+    "maskIconLabel": {
+      "type": "string",
+      "description": "The text used for the screen reader to describe the mask icon toggle.",
+      "displayName": "Mask Icon Label",
+      "help": "#maskIconLabel",
+      "translatable": true
+    },
+    "messagesCustom": {
+      "type": "Array<object>",
+      "description": "List of custom component messages",
+      "displayName": "Messages Custom",
+      "help": "#messagesCustom",
+      "extension": {
+        "vbdt": {
+          "itemProperties": {
+            "summary": {
+              "type": "string"
+            },
+            "detail": {
+              "type": "string"
+            },
+            "severity": {
+              "type": "string",
+              "enumValues": [
+                "error",
+                "confirmation",
+                "info",
+                "warning"
+              ]
+            }
+          }
+        }
+      },
+      "writeback": true,
+      "value": []
+    },
+    "placeholder": {
+      "type": "string",
+      "description": "The placeholder text to set on the element.",
+      "displayName": "Placeholder",
+      "help": "#placeholder",
+      "translatable": true
+    },
+    "readonly": {
+      "type": "boolean",
+      "description": "Whether the component is readonly",
+      "displayName": "Readonly",
+      "help": "#readonly",
+      "binding": {
+        "consume": {
+          "name": "containerReadonly"
+        }
+      },
+      "value": false
+    },
+    "required": {
+      "type": "boolean",
+      "description": "Specifies whether or not the component is required.",
+      "displayName": "Required",
+      "help": "#required",
+      "value": false
+    },
+    "requiredMessageDetail": {
+      "type": "string",
+      "description": "Overrides the default Required error message.",
+      "displayName": "Required Message Detail",
+      "help": "#requiredMessageDetail",
+      "translatable": true
+    },
+    "textAlign": {
+      "type": "string",
+      "description": "Specifies how the text is aligned within the text field",
+      "displayName": "Text Align",
+      "help": "#textAlign",
+      "propertyEditorValues": {
+        "start": {
+          "description": "Aligns text left when reading direction is ltr and right when reading direction is rtl (default, if unspecified).",
+          "displayName": "Start"
+        },
+        "end": {
+          "description": "Aligns text right when reading direction is ltr and left when reading direction is rtl.",
+          "displayName": "End"
+        },
+        "right": {
+          "description": "Aligns text right regardless of reading direction, often used for numbers.",
+          "displayName": "Right"
+        }
+      },
+      "enumValues": [
+        "end",
+        "start",
+        "right"
+      ]
+    },
+    "userAssistanceDensity": {
+      "type": "string",
+      "description": "Specifies the density of the form component's user assistance presentation.",
+      "displayName": "User Assistance Density",
+      "help": "#userAssistanceDensity",
+      "propertyEditorValues": {
+        "reflow": {
+          "description": "Messages, help, hints, and required are all shown inline under the field with no reserved space.",
+          "displayName": "Reflow"
+        },
+        "efficient": {
+          "description": "Messages, help, hints, and required are all shown inline under the field with reserved space.",
+          "displayName": "Efficient"
+        },
+        "compact": {
+          "description": "Messages, help, hints, and required will not be shown inline; they will show in a mode that keeps the screen more compact, like a popup for the messages, and a required icon to indicate Required.",
+          "displayName": "Compact"
+        }
+      },
+      "enumValues": [
+        "compact",
+        "reflow",
+        "efficient"
+      ],
+      "binding": {
+        "consume": {
+          "name": "containerUserAssistanceDensity"
+        }
+      },
+      "value": "reflow"
+    },
+    "validators": {
+      "type": "Array<object>|null",
+      "description": "Specifies the validators for the component.",
+      "displayName": "Validators",
+      "help": "#validators",
+      "value": []
+    },
+    "value": {
+      "type": "any",
+      "description": "The value of the component.",
+      "displayName": "Value",
+      "help": "#value",
+      "writeback": true,
+      "value": null
+    },
+    "virtualKeyboard": {
+      "type": "string",
+      "description": "The type of virtual keyboard to display for entering a value on mobile browsers",
+      "displayName": "Virtual Keyboard",
+      "help": "#virtualKeyboard",
+      "propertyEditorValues": {
+        "number": {
+          "description": "Use a mobile virtual keyboard for entering numbers.",
+          "displayName": "Number"
+        },
+        "auto": {
+          "description": "The component will determine the best mobile virtual keyboard to use (default, if unspecified).",
+          "displayName": "Auto"
+        },
+        "email": {
+          "description": "Use a mobile virtual keyboard for entering email addresses.",
+          "displayName": "Email"
+        },
+        "search": {
+          "description": "Use a mobile virtual keyboard for entering search terms.",
+          "displayName": "Search"
+        },
+        "tel": {
+          "description": "Use a mobile virtual keyboard for entering telephone numbers.",
+          "displayName": "Tel"
+        },
+        "text": {
+          "description": "Use a mobile virtual keyboard for entering text.",
+          "displayName": "Text"
+        },
+        "url": {
+          "description": "Use a mobile virtual keyboard for URL entry.",
+          "displayName": "URL"
+        }
+      },
+      "enumValues": [
+        "number",
+        "search",
+        "auto",
+        "url",
+        "text",
+        "email",
+        "tel"
+      ]
+    },
+    "rawValue": {
+      "type": "string",
+      "description": "Specifies how the raw value of the component",
+      "displayName": "Raw Value",
+      "help": "#rawValue",
+      "readOnly": true,
+      "writeback": true
+    },
+    "valid": {
+      "type": "string",
+      "description": "Specifies the current valid state of the component",
+      "displayName": "Valid",
+      "help": "#valid",
+      "propertyEditorValues": {
+        "valid": {
+          "description": "The component is valid",
+          "displayName": "Valid"
+        },
+        "pending": {
+          "description": "The component is waiting for the validation state to be determined. The 'pending' state is set at the start of the convert/validate process.",
+          "displayName": "Pending"
+        },
+        "invalidHidden": {
+          "description": "The component has invalid messages hidden and no invalid messages showing. An invalid message is one with severity 'error'.",
+          "displayName": "Invalid Hidden"
+        },
+        "invalidShown": {
+          "description": "The component has invalid messages showing. An invalid message is one with severity 'error'.",
+          "displayName": "Invalid Shown"
+        }
+      },
+      "enumValues": [
+        "pending",
+        "valid",
+        "invalidHidden",
+        "invalidShown"
+      ],
+      "readOnly": true,
+      "writeback": true
+    }
+  },
+  "methods": {
+    "blur": {
+      "return": "void"
+    },
+    "focus": {
+      "return": "void"
+    },
+    "showMessages": {
+      "return": "void"
+    },
+    "reset": {
+      "return": "void"
+    },
+    "validate": {
+      "return": "Promise"
+    },
+    "setProperty": {
+      "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.",
+      "help": "#setProperty",
+      "params": [
+        {
+          "name": "property",
+          "description": "The property name to set. Supports dot notation for subproperty access.",
+          "type": "string"
+        },
+        {
+          "name": "value",
+          "description": "The new value to set the property to.",
+          "type": "any"
+        }
+      ],
+      "return": "void"
+    },
+    "getProperty": {
+      "description": "Retrieves the value of a property or a subproperty.",
+      "help": "#getProperty",
+      "params": [
+        {
+          "name": "property",
+          "description": "The property name to get. Supports dot notation for subproperty access.",
+          "type": "string"
+        }
+      ],
+      "return": "any"
+    },
+    "setProperties": {
+      "description": "Performs a batch set of properties.",
+      "help": "#setProperties",
+      "params": [
+        {
+          "name": "properties",
+          "description": "An object containing the property and value pairs to set.",
+          "type": "object"
+        }
+      ],
+      "return": "void"
+    }
+  }
+}

package/oj-c/input-sensitive-text/index.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "./input-sensitive-text"], function (require, exports, input_sensitive_text_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InputSensitiveText = void 0;
+    Object.defineProperty(exports, "InputSensitiveText", { enumerable: true, get: function () { return input_sensitive_text_1.InputSensitiveText; } });
+});

package/oj-c/input-sensitive-text/input-sensitive-text-styles.css

@@ -0,0 +1,13 @@
+oj-c-input-sensitive-text:not(.oj-complete) {
+  visibility: hidden;
+}
+
+oj-c-input-sensitive-text {
+	display: inline-block;
+  max-width: 100%;
+  width: 100%;
+}
+
+oj-c-input-sensitive-text[hidden] {
+  display: none;
+}

package/oj-c/input-sensitive-text/input-sensitive-text.js

@@ -0,0 +1,74 @@
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "preact/compat", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useFormVariantContext", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/UNSAFE_InputSensitiveText", "@oracle/oraclejet-preact/utils/UNSAFE_styles/Layout", "oj-c/editable-value/UNSAFE_useAssistiveText/useAssistiveText", "ojs/ojvcomponent", "ojs/ojcontext", "./useInputSensitiveTextPreact", "css!oj-c/input-sensitive-text/input-sensitive-text-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, compat_1, UNSAFE_useFormContext_1, UNSAFE_useFormVariantContext_1, UNSAFE_useTabbableMode_1, UNSAFE_InputSensitiveText_1, Layout_1, useAssistiveText_1, ojvcomponent_1, Context, useInputSensitiveTextPreact_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.InputSensitiveText = void 0;
+    const displayOptionsDefault = {
+        messages: 'display',
+        validatorHint: 'display'
+    };
+    const helpDefault = {
+        instruction: ''
+    };
+    const helpHintsDefault = {
+        definition: '',
+        source: ''
+    };
+    const messagesCustomDefault = [];
+    const validatorsDefault = [];
+    const lengthDefault = {
+        countBy: 'codePoint',
+        max: null
+    };
+    const FunctionalInputSensitiveText = (0, compat_1.forwardRef)(({ clearIcon = 'never', columnSpan = 1, disabled = false, displayOptions = displayOptionsDefault, help = helpDefault, helpHints = helpHintsDefault, id, length = lengthDefault, maskIcon = 'visible', messagesCustom = messagesCustomDefault, maskIconLabel, readonly = false, required = false, userAssistanceDensity = 'reflow', validators = validatorsDefault, value = null, ...otherProps }, ref) => {
+        const rootRef = (0, compat_1.useRef)();
+        const inputSensitiveTextRef = (0, compat_1.useRef)();
+        const addBusyState = (0, compat_1.useCallback)((description) => {
+            return rootRef.current
+                ? Context.getContext(rootRef.current)
+                    .getBusyContext()
+                    .addBusyState({ description: `oj-c-input-sensitive-text id=${id} is ${description}` })
+                : () => { };
+        }, []);
+        const { inputSensitiveTextProps, methods } = (0, useInputSensitiveTextPreact_1.useInputSensitiveTextPreact)({
+            clearIcon,
+            columnSpan,
+            disabled,
+            displayOptions,
+            help,
+            helpHints,
+            id,
+            length,
+            maskIcon,
+            maskIconLabel,
+            messagesCustom,
+            readonly,
+            required,
+            userAssistanceDensity,
+            validators,
+            value,
+            ...otherProps
+        }, addBusyState);
+        (0, compat_1.useImperativeHandle)(ref, () => ({
+            blur: () => inputSensitiveTextRef.current?.blur(),
+            focus: () => inputSensitiveTextRef.current?.focus(),
+            ...methods
+        }), [methods]);
+        const assistiveTextProps = (0, useAssistiveText_1.useAssistiveText)({
+            displayOptions,
+            help,
+            helpHints,
+            userAssistanceDensity: inputSensitiveTextProps.userAssistanceDensity,
+            validators
+        });
+        const variant = (0, UNSAFE_useFormVariantContext_1.useFormVariantContext)();
+        const containerProps = {
+            isFormLayout: otherProps.containerReadonly !== undefined,
+            isReadonly: otherProps.containerReadonly,
+            labelWrapping: otherProps.labelWrapping
+        };
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { id: id, ref: rootRef, class: Layout_1.layoutSpanStyles.layoutSpanColumn[columnSpan], children: (0, jsx_runtime_1.jsx)(UNSAFE_useFormContext_1.FormContext.Provider, { value: containerProps, children: (0, jsx_runtime_1.jsx)(UNSAFE_InputSensitiveText_1.InputSensitiveText, { ref: inputSensitiveTextRef, ...assistiveTextProps, ...inputSensitiveTextProps, variant: variant }) }) }));
+    });
+    exports.InputSensitiveText = (0, ojvcomponent_1.registerCustomElement)('oj-c-input-sensitive-text', FunctionalInputSensitiveText, "InputSensitiveText", { "properties": { "clearIcon": { "type": "string", "enumValues": ["conditional", "always", "never"] }, "columnSpan": { "type": "number" }, "containerReadonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "disabled": { "type": "boolean" }, "displayOptions": { "type": "object", "properties": { "messages": { "type": "string", "enumValues": ["none", "display"] }, "validatorHint": { "type": "string", "enumValues": ["none", "display"] } } }, "help": { "type": "object", "properties": { "instruction": { "type": "string" } } }, "helpHints": { "type": "object", "properties": { "definition": { "type": "string" }, "source": { "type": "string" }, "sourceText": { "type": "string" } } }, "labelEdge": { "type": "string", "enumValues": ["none", "start", "top", "inside"], "binding": { "consume": { "name": "containerLabelEdge" } } }, "labelHint": { "type": "string" }, "labelStartWidth": { "type": "number|string", "binding": { "consume": { "name": "labelWidth" } } }, "labelWrapping": { "type": "string", "enumValues": ["truncate", "wrap"], "binding": { "consume": { "name": "labelWrapping" } } }, "length": { "type": "object", "properties": { "countBy": { "type": "string", "enumValues": ["codePoint", "codeUnit"] }, "max": { "type": "number|null" } } }, "maskIcon": { "type": "string", "enumValues": ["hidden", "visible"] }, "maskIconLabel": { "type": "string" }, "messagesCustom": { "type": "Array<object>", "writeback": true }, "placeholder": { "type": "string" }, "readonly": { "type": "boolean", "binding": { "consume": { "name": "containerReadonly" } } }, "required": { "type": "boolean" }, "requiredMessageDetail": { "type": "string" }, "textAlign": { "type": "string", "enumValues": ["end", "start", "right"] }, "userAssistanceDensity": { "type": "string", "enumValues": ["compact", "reflow", "efficient"], "binding": { "consume": { "name": "containerUserAssistanceDensity" } } }, "validators": { "type": "Array<object>|null" }, "value": { "type": "any", "writeback": true }, "virtualKeyboard": { "type": "string", "enumValues": ["number", "search", "auto", "url", "text", "email", "tel"] }, "rawValue": { "type": "string", "readOnly": true, "writeback": true }, "valid": { "type": "string", "enumValues": ["pending", "valid", "invalidHidden", "invalidShown"], "readOnly": true, "writeback": true } }, "extension": { "_WRITEBACK_PROPS": ["messagesCustom", "rawValue", "valid", "value"], "_READ_ONLY_PROPS": ["rawValue", "valid"], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "id", "autofocus"] }, "methods": { "blur": {}, "focus": {}, "showMessages": {}, "reset": {}, "validate": {} } }, { "clearIcon": "never", "columnSpan": 1, "disabled": false, "displayOptions": { "messages": "display", "validatorHint": "display" }, "help": { "instruction": "" }, "helpHints": { "definition": "", "source": "" }, "length": { "countBy": "codePoint", "max": null }, "maskIcon": "visible", "messagesCustom": [], "readonly": false, "required": false, "userAssistanceDensity": "reflow", "validators": [], "value": null }, {
+        '@oracle/oraclejet-preact': translationBundle_1.default
+    }, { consume: [UNSAFE_useFormVariantContext_1.FormVariantContext, UNSAFE_useTabbableMode_1.TabbableModeContext] });
+});