@oracle/oraclejet-core-pack 14.0.0

package/oj-c/input-text/__dev__/input-text.doc.mdx

@@ -0,0 +1,30 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import 'oj-c/input-text';
+
+<Meta title="InputText" component="oj-c-input-text" />
+
+# Input Text
+
+The `oj-c-input-text` component enhances a browser input type="text" element.
+
+## Import
+
+```js
+//To typecheck the element APIs, import as below.
+import { CInputTextElement } from 'oj-c/input-text';
+
+//For the transpiled javascript to load the element's module, import as below
+import 'oj-c/input-text';
+```
+
+## Usage
+
+Here's how to implement a basic `oj-c-input-text`.
+
+<Canvas>
+  <Story id="form-inputtext--basic" name="Basic" height={150} />
+</Canvas>
+
+## Props
+
+<ArgsTable of="oj-c-input-text" />

package/oj-c/input-text/__tests__/input-text.test.js

@@ -0,0 +1,70 @@
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+define(["require", "exports", "preact/jsx-runtime", "@jest/globals", "@oracle/oraclejet-preact/UNSAFE_Environment", "@oracle/oraclejet-preact/utils/UNSAFE_matchTranslationBundle", "@testing-library/preact", "@testing-library/user-event", "../input-text"], function (require, exports, jsx_runtime_1, globals_1, UNSAFE_Environment_1, UNSAFE_matchTranslationBundle_1, preact_1, user_event_1, input_text_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    user_event_1 = __importDefault(user_event_1);
+    (0, globals_1.describe)('oj-c InputText', () => {
+        let env;
+        const locale = (0, UNSAFE_matchTranslationBundle_1.matchTranslationBundle)(['en'], new Set(['en-US', 'en']));
+        beforeEach(() => __awaiter(void 0, void 0, void 0, function* () {
+            const { default: translations } = yield new Promise((resolve_1, reject_1) => { require([`@oracle/oraclejet-preact/resources/nls/${locale}/bundle.js`], resolve_1, reject_1); }).then(__importStar);
+            env =
+                env ||
+                    {
+                        translations: { '@oracle/oraclejet-preact': translations }
+                    };
+        }));
+        (0, globals_1.test)('sets initial value', () => {
+            const testValue = 'foo';
+            const content = (0, preact_1.render)((0, jsx_runtime_1.jsx)(UNSAFE_Environment_1.RootEnvironmentProvider, Object.assign({ environment: env }, { children: (0, jsx_runtime_1.jsx)(input_text_1.InputText, { value: testValue }) })));
+            const input = content.getByRole('textbox');
+            (0, globals_1.expect)(input.value).toEqual(testValue);
+        });
+        (0, globals_1.test)('changes value', (done) => {
+            function onValueChanged(value) {
+                (0, globals_1.expect)(value).toEqual(testValue);
+                done();
+            }
+            const testValue = 'foobar';
+            const content = (0, preact_1.render)((0, jsx_runtime_1.jsx)(UNSAFE_Environment_1.RootEnvironmentProvider, Object.assign({ environment: env }, { children: (0, jsx_runtime_1.jsx)(input_text_1.InputText, { onValueChanged: onValueChanged }) })));
+            const input = content.getByRole('textbox');
+            user_event_1.default.click(input);
+            user_event_1.default.keyboard(`${testValue}{enter}`);
+        });
+        (0, globals_1.afterEach)(preact_1.cleanup);
+    });
+});

package/oj-c/input-text/__webdriver__/InputTextWebElement.js

@@ -0,0 +1,32 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+exports.InputTextWebElement = void 0;
+var InputTextWebElementBase_1 = require("./InputTextWebElementBase");
+/**
+ * The component WebElement for [oj-c-input-text](../../../oj-c/docs/oj.InputText.html).
+ * Do not instantiate this class directly, instead, use
+ * [findInputText](../modules.html#findInputText).
+ */
+var InputTextWebElement = /** @class */ (function (_super) {
+    __extends(InputTextWebElement, _super);
+    function InputTextWebElement() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return InputTextWebElement;
+}(InputTextWebElementBase_1.InputTextWebElementBase));
+exports.InputTextWebElement = InputTextWebElement;

package/oj-c/input-text/__webdriver__/InputTextWebElementBase.js

@@ -0,0 +1,294 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+exports.__esModule = true;
+exports.InputTextWebElementBase = void 0;
+var elements_1 = require("@oracle/oraclejet-webdriver/elements");
+/**
+ * This is the base class for oj-c-input-text WebElement, and is generated from the
+ * component's metadata. Do not modify these contents since they'll be replaced
+ * during the next generation.
+ * Put overrides into the WebElements's subclass, InputTextWebElement.ts.
+ */
+var InputTextWebElementBase = /** @class */ (function (_super) {
+    __extends(InputTextWebElementBase, _super);
+    function InputTextWebElementBase() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Gets the value of <code>autocomplete</code> property.
+     * Dictates component's autocomplete state
+     * @return The value of <code>autocomplete</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getAutocomplete = function () {
+        return this.getProperty('autocomplete');
+    };
+    /**
+     * Gets the value of <code>clearIcon</code> property.
+     * Specifies if an icon to clear the input field should be visible.
+     * @return The value of <code>clearIcon</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getClearIcon = function () {
+        return this.getProperty('clearIcon');
+    };
+    /**
+     * Gets the value of <code>containerReadonly</code> property.
+     * Specifies whether an ancestor container, like oj-form-layout, is readonly.
+     * @return The value of <code>containerReadonly</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getContainerReadonly = function () {
+        return this.getProperty('containerReadonly');
+    };
+    /**
+     * Gets the value of <code>converter</code> property.
+     * Specifies the converter instance.
+     * @return The value of <code>converter</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getConverter = function () {
+        return this.getProperty('converter');
+    };
+    /**
+     * Gets the value of <code>disabled</code> property.
+     * Specifies whether the component is disabled.
+     * @return The value of <code>disabled</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getDisabled = function () {
+        return this.getProperty('disabled');
+    };
+    /**
+     * Gets the value of <code>displayOptions</code> property.
+     * Display options for auxiliary content that determines whether or not it should be displayed.
+     * @return The value of <code>displayOptions</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getDisplayOptions = function () {
+        return this.getProperty('displayOptions');
+    };
+    /**
+     * Gets the value of <code>help</code> property.
+     * Form component help information.
+     * @return The value of <code>help</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getHelp = function () {
+        return this.getProperty('help');
+    };
+    /**
+     * Gets the value of <code>helpHints</code> property.
+     * The helpHints object contains a definition property and a source property.
+     * @return The value of <code>helpHints</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getHelpHints = function () {
+        return this.getProperty('helpHints');
+    };
+    /**
+     * Gets the value of <code>inputPrefix</code> property.
+     * The text before the input text.
+     * @return The value of <code>inputPrefix</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getInputPrefix = function () {
+        return this.getProperty('inputPrefix');
+    };
+    /**
+     * Gets the value of <code>inputSuffix</code> property.
+     * The text after the input text.
+     * @return The value of <code>inputSuffix</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getInputSuffix = function () {
+        return this.getProperty('inputSuffix');
+    };
+    /**
+     * Gets the value of <code>labelEdge</code> property.
+     * Specifies how the label is positioned for the component
+     * @return The value of <code>labelEdge</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getLabelEdge = function () {
+        return this.getProperty('labelEdge');
+    };
+    /**
+     * Gets the value of <code>labelHint</code> property.
+     * Represents a hint for rendering a label on the component.
+     * @return The value of <code>labelHint</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getLabelHint = function () {
+        return this.getProperty('labelHint');
+    };
+    /**
+     * Gets the value of <code>labelStartWidth</code> property.
+     * The width of the label when labelEdge is 'start'.
+     * @return The value of <code>labelStartWidth</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getLabelStartWidth = function () {
+        return this.getProperty('labelStartWidth');
+    };
+    /**
+     * Gets the value of <code>labelWrapping</code> property.
+     * Should the labels wrap or truncate when there is not enough available space.
+     * @return The value of <code>labelWrapping</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getLabelWrapping = function () {
+        return this.getProperty('labelWrapping');
+    };
+    /**
+     * Gets the value of <code>length</code> property.
+     * Defines the length limit for the field
+     * @return The value of <code>length</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getLength = function () {
+        return this.getProperty('length');
+    };
+    /**
+     * Sets the value of <code>messagesCustom</code> property.
+     * List of custom component messages
+     * @param messagesCustom The value to set for <code>messagesCustom</code>
+     *
+     */
+    InputTextWebElementBase.prototype.changeMessagesCustom = function (messagesCustom) {
+        return this.setProperty('messagesCustom', messagesCustom);
+    };
+    /**
+     * Gets the value of <code>messagesCustom</code> property.
+     * List of custom component messages
+     * @return The value of <code>messagesCustom</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getMessagesCustom = function () {
+        return this.getProperty('messagesCustom');
+    };
+    /**
+     * Gets the value of <code>placeholder</code> property.
+     * The placeholder text to set on the element.
+     * @return The value of <code>placeholder</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getPlaceholder = function () {
+        return this.getProperty('placeholder');
+    };
+    /**
+     * Gets the value of <code>readonly</code> property.
+     * Whether the component is readonly
+     * @return The value of <code>readonly</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getReadonly = function () {
+        return this.getProperty('readonly');
+    };
+    /**
+     * Gets the value of <code>required</code> property.
+     * Specifies whether or not the component is required.
+     * @return The value of <code>required</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getRequired = function () {
+        return this.getProperty('required');
+    };
+    /**
+     * Gets the value of <code>requiredMessageDetail</code> property.
+     * Overrides the default Required error message.
+     * @return The value of <code>requiredMessageDetail</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getRequiredMessageDetail = function () {
+        return this.getProperty('requiredMessageDetail');
+    };
+    /**
+     * Gets the value of <code>textAlign</code> property.
+     * Specifies how the text is aligned within the text field
+     * @return The value of <code>textAlign</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getTextAlign = function () {
+        return this.getProperty('textAlign');
+    };
+    /**
+     * Gets the value of <code>userAssistanceDensity</code> property.
+     * Specifies the density of the form component's user assistance presentation.
+     * @return The value of <code>userAssistanceDensity</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getUserAssistanceDensity = function () {
+        return this.getProperty('userAssistanceDensity');
+    };
+    /**
+     * Gets the value of <code>validators</code> property.
+     * Specifies the validators for the component.
+     * @return The value of <code>validators</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getValidators = function () {
+        return this.getProperty('validators');
+    };
+    /**
+     * Sets the value of <code>value</code> property.
+     * The value of the component.
+     * @param value The value to set for <code>value</code>
+     *
+     */
+    InputTextWebElementBase.prototype.changeValue = function (value) {
+        return this.setProperty('value', value);
+    };
+    /**
+     * Gets the value of <code>value</code> property.
+     * The value of the component.
+     * @return The value of <code>value</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getValue = function () {
+        return this.getProperty('value');
+    };
+    /**
+     * Gets the value of <code>virtualKeyboard</code> property.
+     * The type of virtual keyboard to display for entering a value on mobile browsers
+     * @return The value of <code>virtualKeyboard</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getVirtualKeyboard = function () {
+        return this.getProperty('virtualKeyboard');
+    };
+    /**
+     * Gets the value of <code>rawValue</code> property.
+     * Specifies how the raw value of the component
+     * @return The value of <code>rawValue</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getRawValue = function () {
+        return this.getProperty('rawValue');
+    };
+    /**
+     * Gets the value of <code>valid</code> property.
+     * Specifies how the valid state of the component
+     * @return The value of <code>valid</code> property.
+     *
+     */
+    InputTextWebElementBase.prototype.getValid = function () {
+        return this.getProperty('valid');
+    };
+    return InputTextWebElementBase;
+}(elements_1.OjWebElement));
+exports.InputTextWebElementBase = InputTextWebElementBase;

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

@@ -0,0 +1,74 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+exports.__esModule = true;
+exports.findInputText = exports.InputTextWebElement = void 0;
+var oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+var InputTextWebElement_1 = require("./InputTextWebElement");
+exports.InputTextWebElement = InputTextWebElement_1.InputTextWebElement;
+/**
+ * Retrieve an instance of [[InputTextWebElement]].
+ * @example
+ * ```javascript
+ * import { findInputText } from '@oracle/oraclejet-core-pack/webdriver';
+ * const el = await findInputText(driver, By.id('my-oj-c-input-text'));
+ * ```
+ * @param driver A WebDriver/WebElement instance from where the element will be
+ * searched. If WebDriver is passed, the element will be searched globally in the
+ * document. If WebElement is passed, the search will be relative to this element.
+ * @param by The locator with which to find the element
+ */
+function findInputText(driver, by) {
+    return __awaiter(this, void 0, void 0, function () {
+        var webEl, tagName;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0: return [4 /*yield*/, driver.findElement(by)];
+                case 1:
+                    webEl = _a.sent();
+                    if (!!(webEl instanceof InputTextWebElement_1.InputTextWebElement)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, webEl.getTagName()];
+                case 2:
+                    tagName = _a.sent();
+                    throw Error("findInputText(".concat(by, ") created ").concat(webEl.constructor.name, " for <").concat(tagName, ">, but expected ").concat(InputTextWebElement_1.InputTextWebElement.name));
+                case 3: return [2 /*return*/, webEl];
+            }
+        });
+    });
+}
+exports.findInputText = findInputText;
+(0, oraclejet_webdriver_1.register)('oj-c-input-text', InputTextWebElement_1.InputTextWebElement);