@oracle/oraclejet-core-pack 14.0.0

package/oj-c/collapsible/__webdriver__/CollapsibleWebElementBase.js

@@ -0,0 +1,60 @@
+"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.CollapsibleWebElementBase = void 0;
+var elements_1 = require("@oracle/oraclejet-webdriver/elements");
+/**
+ * This is the base class for oj-c-collapsible 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, CollapsibleWebElement.ts.
+ */
+var CollapsibleWebElementBase = /** @class */ (function (_super) {
+    __extends(CollapsibleWebElementBase, _super);
+    function CollapsibleWebElementBase() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Gets the value of <code>disabled</code> property.
+     * Disables the collapsible if set to true
+     * @return The value of <code>disabled</code> property.
+     *
+     */
+    CollapsibleWebElementBase.prototype.getDisabled = function () {
+        return this.getProperty('disabled');
+    };
+    /**
+     * Gets the value of <code>iconPosition</code> property.
+     * Controls placement of the icon in the header.
+     * @return The value of <code>iconPosition</code> property.
+     *
+     */
+    CollapsibleWebElementBase.prototype.getIconPosition = function () {
+        return this.getProperty('iconPosition');
+    };
+    /**
+     * Gets the value of <code>variant</code> property.
+     * Controls display of the optional divider below the header.
+     * @return The value of <code>variant</code> property.
+     *
+     */
+    CollapsibleWebElementBase.prototype.getVariant = function () {
+        return this.getProperty('variant');
+    };
+    return CollapsibleWebElementBase;
+}(elements_1.OjWebElement));
+exports.CollapsibleWebElementBase = CollapsibleWebElementBase;

package/oj-c/collapsible/__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.findCollapsible = exports.CollapsibleWebElement = void 0;
+var oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+var CollapsibleWebElement_1 = require("./CollapsibleWebElement");
+exports.CollapsibleWebElement = CollapsibleWebElement_1.CollapsibleWebElement;
+/**
+ * Retrieve an instance of [[CollapsibleWebElement]].
+ * @example
+ * ```javascript
+ * import { findCollapsible } from '@oracle/oraclejet-core-pack/webdriver';
+ * const el = await findCollapsible(driver, By.id('my-oj-c-collapsible'));
+ * ```
+ * @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 findCollapsible(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 CollapsibleWebElement_1.CollapsibleWebElement)) return [3 /*break*/, 3];
+                    return [4 /*yield*/, webEl.getTagName()];
+                case 2:
+                    tagName = _a.sent();
+                    throw Error("findCollapsible(".concat(by, ") created ").concat(webEl.constructor.name, " for <").concat(tagName, ">, but expected ").concat(CollapsibleWebElement_1.CollapsibleWebElement.name));
+                case 3: return [2 /*return*/, webEl];
+            }
+        });
+    });
+}
+exports.findCollapsible = findCollapsible;
+(0, oraclejet_webdriver_1.register)('oj-c-collapsible', CollapsibleWebElement_1.CollapsibleWebElement);

package/oj-c/collapsible/collapsible-styles.css

@@ -0,0 +1,11 @@
+oj-c-collapsible:not(.oj-complete) {
+  visibility: hidden;
+}
+
+oj-c-collapsible {
+  display: block;
+}
+
+oj-c-collapsible [hidden] {
+  display: none;
+}

package/oj-c/collapsible/collapsible.js

@@ -0,0 +1,69 @@
+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", '@oracle/oraclejet-preact/translationBundle', "@oracle/oraclejet-preact/UNSAFE_Collapsible", "ojs/ojvcomponent", "preact/hooks", "ojs/ojcontext", "css!oj-c/collapsible/collapsible-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, UNSAFE_Collapsible_1, ojvcomponent_1, hooks_1, ojcontext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Collapsible = void 0;
+    translationBundle_1 = __importDefault(translationBundle_1);
+    ojcontext_1 = __importDefault(ojcontext_1);
+    exports.Collapsible = (0, ojvcomponent_1.registerCustomElement)('oj-c-collapsible', (props) => {
+        const { id, children, disabled, expanded, iconPosition, variant, header } = props;
+        const rootRef = (0, hooks_1.useRef)(null);
+        const didMountRef = (0, hooks_1.useRef)(false);
+        const resolveBusyState = (0, hooks_1.useRef)();
+        const addBusyState = (0, hooks_1.useCallback)((desc) => {
+            var _a;
+            return (_a = ojcontext_1.default.getContext(rootRef.current)
+                .getBusyContext()) === null || _a === void 0 ? void 0 : _a.addBusyState({
+                description: `oj-c-collapsible: id='${id}' is ${desc}.`
+            });
+        }, []);
+        (0, hooks_1.useEffect)(() => {
+            if (!didMountRef.current) {
+                didMountRef.current = true;
+                return;
+            }
+            if (resolveBusyState.current) {
+                resolveBusyState.current();
+            }
+            resolveBusyState.current = addBusyState('animating');
+        }, [expanded]);
+        const toggleHandler = (event) => __awaiter(void 0, void 0, void 0, function* () {
+            var _a;
+            let target = event.target;
+            for (; target && target !== (rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); target = target.parentElement) {
+                if (target.getAttribute('data-oj-clickthrough') === 'disabled') {
+                    return;
+                }
+            }
+            const beforeProp = event.value ? props.onOjBeforeExpand : props.onOjBeforeCollapse;
+            try {
+                yield (beforeProp === null || beforeProp === void 0 ? void 0 : beforeProp(event));
+                (_a = props.onExpandedChanged) === null || _a === void 0 ? void 0 : _a.call(props, event.value);
+            }
+            catch (_) {
+            }
+        });
+        const transitionEndHandler = (event) => {
+            const expandedProp = event.value ? props.onOjExpand : props.onOjCollapse;
+            expandedProp === null || expandedProp === void 0 ? void 0 : expandedProp(event);
+            if (resolveBusyState.current) {
+                resolveBusyState.current();
+                resolveBusyState.current = undefined;
+            }
+        };
+        return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, Object.assign({ id: id, ref: rootRef }, { children: (0, jsx_runtime_1.jsx)(UNSAFE_Collapsible_1.Collapsible, Object.assign({ header: header, iconPosition: iconPosition, variant: variant, isExpanded: expanded, isDisabled: disabled, onToggle: toggleHandler, onTransitionEnd: transitionEndHandler }, { children: children })) })));
+    }, "Collapsible", { "slots": { "": {}, "header": {} }, "properties": { "disabled": { "type": "boolean" }, "expanded": { "type": "boolean", "writeback": true }, "iconPosition": { "type": "string", "enumValues": ["start", "end"] }, "variant": { "type": "string", "enumValues": ["basic", "horizontal-rule"] } }, "events": { "ojBeforeCollapse": { "cancelable": true }, "ojBeforeExpand": { "cancelable": true }, "ojCollapse": {}, "ojExpand": {} }, "extension": { "_WRITEBACK_PROPS": ["expanded"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["id"] } }, undefined, {
+        '@oracle/oraclejet-preact': translationBundle_1.default
+    });
+});

package/oj-c/collapsible/component.json

@@ -0,0 +1,184 @@
+{
+  "name": "collapsible",
+  "version": "1.0.0",
+  "jetVersion": "^14.0.0",
+  "type": "composite",
+  "pack": "oj-c",
+  "implements": [
+    "CCollapsibleElement"
+  ],
+  "description": "A collapsible displays a header that can be expanded to show its content.",
+  "displayName": "Collapsible",
+  "help": "oj-c.Collapsible.html",
+  "main": "oj-c/collapsible",
+  "extension": {
+    "vbdt": {
+      "module": "oj-c/collapsible"
+    },
+    "oracle": {
+      "icon": "oj-ux-ico-collapsible",
+      "uxSpecs": [
+        "collapsible"
+      ]
+    }
+  },
+  "propertyLayout": [
+    {
+      "propertyGroup": "common",
+      "items": [
+        "disabled",
+        "expanded",
+        "iconPosition",
+        "variant"
+      ]
+    }
+  ],
+  "since": "14.0.0",
+  "slots": {
+    "": {
+      "description": "The default slot is the content of the collapsible. The oj-c-collapsible element accepts plain text or DOM nodes as children for the default slot.",
+      "displayName": "default",
+      "help": "#Default"
+    },
+    "header": {
+      "description": "The header slot is the collapsible's header. If not specified, the header contains only an open/close icon. Note that the header text is required for JET collapsible for accessibility purposes.",
+      "displayName": "Header",
+      "help": "#header"
+    }
+  },
+  "properties": {
+    "disabled": {
+      "type": "boolean",
+      "description": "Disables the collapsible if set to true",
+      "displayName": "Disabled",
+      "help": "#disabled"
+    },
+    "expanded": {
+      "type": "boolean",
+      "description": "Specifies if the content is expanded.",
+      "displayName": "Expanded",
+      "help": "#expanded",
+      "extension": {
+        "webelement": {
+          "exceptionStatus": [
+            {
+              "type": "unsupported"
+            }
+          ]
+        }
+      },
+      "writeback": true
+    },
+    "iconPosition": {
+      "type": "string",
+      "description": "Controls placement of the icon in the header.",
+      "displayName": "iconPosition",
+      "help": "#iconPosition",
+      "enumValues": [
+        "start",
+        "end"
+      ]
+    },
+    "variant": {
+      "type": "string",
+      "description": "Controls display of the optional divider below the header.",
+      "displayName": "variant",
+      "help": "#variant",
+      "enumValues": [
+        "basic",
+        "horizontal-rule"
+      ]
+    }
+  },
+  "events": {
+    "ojBeforeCollapse": {
+      "cancelable": true,
+      "description": "Triggered immediately before the collapsible is collapsed.",
+      "help": "#event:beforeCollapse",
+      "detail": {
+        "accept": {
+          "description": "This method can be called with an application-created Promise to cancel this event asynchronously.  The Promise should be resolved or rejected to accept or cancel the event, respectively.",
+          "type": "function"
+        },
+        "target": {
+          "type": "EventTarget|null"
+        }
+      }
+    },
+    "ojBeforeExpand": {
+      "cancelable": true,
+      "description": "Triggered immediately before the collapsible is expanded.",
+      "help": "#event:beforeExpand",
+      "detail": {
+        "accept": {
+          "description": "This method can be called with an application-created Promise to cancel this event asynchronously.  The Promise should be resolved or rejected to accept or cancel the event, respectively.",
+          "type": "function"
+        },
+        "target": {
+          "type": "EventTarget|null"
+        }
+      }
+    },
+    "ojCollapse": {
+      "description": "Triggered after the collapsible has been collapsed.",
+      "help": "#event:collapse",
+      "detail": {
+        "target": {
+          "type": "EventTarget|null"
+        }
+      }
+    },
+    "ojExpand": {
+      "description": "Triggered after the collapsible has been expanded (after animation completes).",
+      "help": "#event:expand",
+      "detail": {
+        "target": {
+          "type": "EventTarget|null"
+        }
+      }
+    }
+  },
+  "methods": {
+    "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/collapsible/index.js

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

package/oj-c/collapsible.js

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

package/oj-c/component.json

@@ -0,0 +1,104 @@
+{
+  "name": "oj-c",
+  "version": "1.0.0",
+  "jetVersion": "^14.0.0",
+  "type": "mono-pack",
+  "displayName": "Oracle JET Core pack",
+  "description": "Core Oracle JET components implemented using virtual DOM technology",
+  "help": "docs/index.html",
+  "license": "https://opensource.org/licenses/UPL",
+  "bundles": {
+    "oj-c/corepackbundle": [
+      "oj-c/input-number",
+      "oj-c/input-password",
+      "oj-c/input-text",
+      "oj-c/message-toast",
+      "oj-c/text-area",
+      "oj-c/progress-bar",
+      "oj-c/progress-circle",
+      "oj-c/avatar",
+      "oj-c/button",
+      "oj-c/rating-gauge",
+      "oj-c/select-multiple",
+      "oj-c/select-single",
+      "oj-c/collapsible",
+      "oj-c/file-picker",
+      "oj-c/meter-bar",
+      "oj-c/meter-circle",
+      "oj-c/list-item-layout",
+      "oj-c/split-menu-button"
+    ]
+  },
+  "contents": [
+    {
+      "name": "hooks",
+      "type": "resource"
+    },
+    {
+      "name": "utils",
+      "type": "resource"
+    },
+    {
+      "name": "input-number"
+    },
+    {
+      "name": "input-password"
+    },
+    {
+      "name": "input-text"
+    },
+    {
+      "name": "message-toast"
+    },
+    {
+      "name": "select-multiple"
+    },
+    {
+      "name": "select-single"
+    },
+    {
+      "name": "select-common",
+      "type": "resource"
+    },
+    {
+      "name": "text-area"
+    },
+    {
+      "name": "progress-bar"
+    },
+    {
+      "name": "progress-circle"
+    },
+    {
+      "name": "avatar"
+    },
+    {
+      "name": "editable-value",
+      "type": "resource"
+    },
+    {
+      "name": "button"
+    },
+    {
+      "name": "rating-gauge"
+    },
+    {
+      "name": "collapsible"
+    },
+    {
+      "name": "file-picker"
+    },
+    {
+      "name": "meter-bar"
+    },
+    {
+      "name": "meter-circle"
+    },
+    {
+      "name": "list-item-layout"
+    },
+    {
+      "name": "split-menu-button"
+    }
+  ]
+}