@oracle/oraclejet-core-pack 17.1.4 → 18.0.1

package/oj-c/toggle-button/toggle-button.js

@@ -1,63 +1,35 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojvcomponent-binding", "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_ToggleButton", "@oracle/oraclejet-preact/UNSAFE_IconToggleButton", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/hooks/UNSAFE_useTooltip", "@oracle/oraclejet-preact/utils/UNSAFE_mergeProps", "preact", "preact/hooks", "preact/compat", "css!oj-c/button/button-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_binding_1, ojvcomponent_1, UNSAFE_ToggleButton_1, UNSAFE_IconToggleButton_1, UNSAFE_useTabbableMode_1, UNSAFE_useTooltip_1, UNSAFE_mergeProps_1, preact_1, hooks_1, compat_1) {
+define(["require", "exports", "preact/jsx-runtime", '@oracle/oraclejet-preact/translationBundle', "ojs/ojvcomponent", "@oracle/oraclejet-preact/UNSAFE_ToggleButton", "@oracle/oraclejet-preact/UNSAFE_IconToggleButton", "@oracle/oraclejet-preact/hooks/UNSAFE_useTabbableMode", "@oracle/oraclejet-preact/hooks/UNSAFE_useTooltip", "@oracle/oraclejet-preact/utils/UNSAFE_mergeProps", "preact/hooks", "preact/compat", "css!oj-c/button/button-styles.css"], function (require, exports, jsx_runtime_1, translationBundle_1, ojvcomponent_1, UNSAFE_ToggleButton_1, UNSAFE_IconToggleButton_1, UNSAFE_useTabbableMode_1, UNSAFE_useTooltip_1, UNSAFE_mergeProps_1, hooks_1, compat_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ToggleButton = void 0;
-    let ToggleButton = class ToggleButton extends preact_1.Component {
-        constructor() {
-            super(...arguments);
-            this.buttonRef = (0, preact_1.createRef)();
-        }
-        render({ chroming: variant, disabled: isDisabled, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, display, value, label, tooltip, endIcon, startIcon, size, onValueChanged }) {
-            const widthProps = width ? { style: { width } } : {};
-            const ariaProps = { 'aria-describedby': ariaDescribedBy, 'aria-label': accessibleLabel };
-            if (display != 'icons' ||
-                (startIcon && endIcon && display == 'icons') ||
-                (!startIcon && !endIcon && display == 'icons')) {
-                return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, "aria-describedby": ariaProps['aria-describedby'], children: (0, jsx_runtime_1.jsx)(FunctionalToggleButton, { ref: this.buttonRef, isSelected: value, tooltip: tooltip, onToggle: () => {
-                            onValueChanged?.(!value);
-                        }, variant: variant, isDisabled: isDisabled, width: width ? '100%' : undefined, startIcon: startIcon, endIcon: endIcon, size: size, label: display == 'icons' ? (!startIcon && !endIcon ? label : '') : label, display: display != 'icons' ? display : 'all', ...ariaProps }) }));
-            }
-            else {
-                return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ...widthProps, "aria-describedby": ariaDescribedBy, children: (0, jsx_runtime_1.jsx)(FunctionalIconToggleButton, { isSelected: value, onToggle: () => {
-                            onValueChanged?.(!value);
-                        }, width: width ? '100%' : undefined, ref: this.buttonRef, variant: variant, isDisabled: isDisabled, tooltip: tooltip && tooltip !== '' ? tooltip : label, "aria-label": accessibleLabel && accessibleLabel !== '' ? accessibleLabel : label, "aria-describedby": ariaDescribedBy, size: size, children: startIcon ?? endIcon }) }));
-            }
-        }
-        click() {
-            this.buttonRef.current?.click();
-        }
-        blur() {
-            this.buttonRef.current?.blur();
+    function ToggleButtonImpl({ chroming = 'outlined', disabled = false, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, width, display = 'all', value = false, label, tooltip, startIcon, endIcon, size = 'md', onValueChanged }, ref) {
+        const rootRef = (0, hooks_1.useRef)();
+        const buttonRef = (0, hooks_1.useRef)();
+        const iconButtonRef = (0, hooks_1.useRef)();
+        const isLabelButton = display != 'icons' ||
+            (startIcon && endIcon && display == 'icons') ||
+            (!startIcon && !endIcon && display == 'icons');
+        const widthProps = width ? { style: { width } } : {};
+        const ariaProps = { 'aria-describedby': ariaDescribedBy, 'aria-label': accessibleLabel };
+        (0, hooks_1.useImperativeHandle)(ref, () => ({
+            blur: () => (isLabelButton ? buttonRef.current?.blur() : iconButtonRef?.current?.blur()),
+            focus: () => (isLabelButton ? buttonRef.current?.focus() : iconButtonRef?.current?.focus()),
+            click: () => (isLabelButton ? buttonRef.current?.click() : iconButtonRef?.current?.click())
+        }), [isLabelButton, buttonRef, iconButtonRef]);
+        if (isLabelButton) {
+            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, ...widthProps, "aria-describedby": ariaDescribedBy, children: (0, jsx_runtime_1.jsx)(FunctionalToggleButton, { ref: buttonRef, isSelected: value, tooltip: tooltip, onToggle: () => {
+                        onValueChanged?.(!value);
+                    }, variant: chroming, isDisabled: disabled, width: width ? '100%' : undefined, startIcon: startIcon, endIcon: endIcon, size: size, label: display == 'icons' ? (!startIcon && !endIcon ? label : '') : label, display: display != 'icons' ? display : 'all', ...ariaProps }) }));
         }
-        focus() {
-            this.buttonRef.current?.focus();
+        else {
+            return ((0, jsx_runtime_1.jsx)(ojvcomponent_1.Root, { ref: rootRef, ...widthProps, "aria-describedby": ariaDescribedBy, children: (0, jsx_runtime_1.jsx)(FunctionalIconToggleButton, { isSelected: value, onToggle: () => {
+                        onValueChanged?.(!value);
+                    }, width: width ? '100%' : undefined, ref: iconButtonRef, variant: chroming, isDisabled: disabled, tooltip: tooltip && tooltip !== '' ? tooltip : label, "aria-label": accessibleLabel && accessibleLabel !== '' ? accessibleLabel : label, "aria-describedby": ariaDescribedBy, size: size, children: startIcon ?? endIcon }) }));
         }
-    };
-    exports.ToggleButton = ToggleButton;
-    ToggleButton.defaultProps = {
-        chroming: 'outlined',
-        disabled: false,
-        size: 'md',
-        display: 'all',
-        endIcon: null,
-        startIcon: null,
-        tooltip: '',
-        value: false
-    };
-    ToggleButton._metadata = { "properties": { "label": { "type": "string" }, "value": { "type": "boolean", "writeback": true }, "tooltip": { "type": "string" }, "disabled": { "type": "boolean" }, "width": { "type": "number|string" }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "size": { "type": "string", "enumValues": ["sm", "md", "lg"] }, "chroming": { "type": "string", "enumValues": ["borderless", "outlined"], "binding": { "consume": { "name": "containerChroming" } } } }, "slots": { "startIcon": {}, "endIcon": {} }, "extension": { "_WRITEBACK_PROPS": ["value"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "click": {}, "blur": {}, "focus": {} } };
-    ToggleButton._translationBundleMap = {
+    }
+    exports.ToggleButton = (0, ojvcomponent_1.registerCustomElement)('oj-c-toggle-button', (0, compat_1.forwardRef)(ToggleButtonImpl), "ToggleButton", { "properties": { "label": { "type": "string" }, "value": { "type": "boolean", "writeback": true }, "tooltip": { "type": "string" }, "disabled": { "type": "boolean" }, "width": { "type": "number|string" }, "display": { "type": "string", "enumValues": ["all", "label", "icons"] }, "size": { "type": "string", "enumValues": ["sm", "md", "lg"] }, "chroming": { "type": "string", "enumValues": ["borderless", "outlined"], "binding": { "consume": { "name": "containerChroming" } } } }, "slots": { "startIcon": {}, "endIcon": {} }, "extension": { "_WRITEBACK_PROPS": ["value"], "_READ_ONLY_PROPS": [], "_OBSERVED_GLOBAL_PROPS": ["aria-describedby", "aria-label"] }, "methods": { "focus": {}, "blur": {}, "click": {} } }, { "chroming": "outlined", "disabled": false, "display": "all", "value": false, "size": "md" }, {
         '@oracle/oraclejet-preact': translationBundle_1.default
-    };
-    ToggleButton._consumedContexts = [UNSAFE_useTabbableMode_1.TabbableModeContext];
-    exports.ToggleButton = ToggleButton = __decorate([
-        (0, ojvcomponent_1.customElement)('oj-c-toggle-button')
-    ], ToggleButton);
+    }, { consume: [UNSAFE_useTabbableMode_1.TabbableModeContext] });
     const FunctionalToggleButton = (0, compat_1.forwardRef)((props, ref) => {
         const buttonRef = (0, hooks_1.useRef)();
         (0, hooks_1.useImperativeHandle)(ref, () => ({

package/oj-c/toolbar/__webdriver__/ToolbarWebElement.d.ts

@@ -0,0 +1,8 @@
+import { ToolbarWebElementBase } from './ToolbarWebElementBase';
+/**
+ * The component WebElement for [oj-c-toolbar](../../../oj-c/docs/oj.Toolbar.html).
+ * Do not instantiate this class directly, instead, use
+ * [findToolbar](../functions/findToolbar.html).
+ */
+export declare class ToolbarWebElement extends ToolbarWebElementBase {
+}

package/oj-c/toolbar/__webdriver__/ToolbarWebElement.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarWebElement = void 0;
+const ToolbarWebElementBase_1 = require("./ToolbarWebElementBase");
+/**
+ * The component WebElement for [oj-c-toolbar](../../../oj-c/docs/oj.Toolbar.html).
+ * Do not instantiate this class directly, instead, use
+ * [findToolbar](../functions/findToolbar.html).
+ */
+class ToolbarWebElement extends ToolbarWebElementBase_1.ToolbarWebElementBase {
+}
+exports.ToolbarWebElement = ToolbarWebElement;
+//# sourceMappingURL=ToolbarWebElement.js.map

package/oj-c/toolbar/__webdriver__/ToolbarWebElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarWebElement.js","sourceRoot":"","sources":["ToolbarWebElement.ts"],"names":[],"mappings":";;;AAAA,mEAAgE;AAEhE;;;;GAIG;AACH,MAAa,iBAAkB,SAAQ,6CAAqB;CAE3D;AAFD,8CAEC","sourcesContent":["import { ToolbarWebElementBase } from './ToolbarWebElementBase';\n\n/**\n * The component WebElement for [oj-c-toolbar](../../../oj-c/docs/oj.Toolbar.html).\n * Do not instantiate this class directly, instead, use\n * [findToolbar](../functions/findToolbar.html).\n */\nexport class ToolbarWebElement extends ToolbarWebElementBase {\n  // Put overrides here\n}\n"]}

package/oj-c/toolbar/__webdriver__/ToolbarWebElementBase.d.ts

@@ -0,0 +1,51 @@
+import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';
+/**
+ * This is the base class for oj-c-toolbar 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, ToolbarWebElement.ts.
+ */
+export declare class ToolbarWebElementBase extends OjWebElement {
+    /**
+     * Gets the value of <code>spacing</code> property.
+     * Specifies the spacing between content. 'sm' spacing is recommended for button variants that don't have a background or border, for example borderless buttons. 'lg' spacing is recommended for button variants that have a background or border, for example outlined or solid buttons.
+     * @return The value of <code>spacing</code> property.
+     *
+     */
+    getSpacing(): Promise<string>;
+    /**
+     * Gets the value of <code>chroming</code> property.
+     * Specifies the chroming to be set on content to be placed into the toolbar.
+     * @return The value of <code>chroming</code> property.
+     *
+     */
+    getChroming(): Promise<string>;
+    /**
+     * Gets the value of <code>size</code> property.
+     * Specifies the size of content to be placed into the toolbar.
+     * @return The value of <code>size</code> property.
+     *
+     */
+    getSizeProperty(): Promise<string>;
+    /**
+     * Gets the value of <code>items</code> property.
+     * Specifies the content to be placed into the toolbar.
+     * @return The value of <code>items</code> property.
+     *
+     */
+    getItems(): Promise<Array<object>>;
+    /**
+     * Sets the value of <code>toolbarSelection</code> property.
+     * An array containing key/value objects for selection groups.
+     * @param toolbarSelection The value to set for <code>toolbarSelection</code>
+     *
+     */
+    changeToolbarSelection(toolbarSelection: object): Promise<void>;
+    /**
+     * Gets the value of <code>toolbarSelection</code> property.
+     * An array containing key/value objects for selection groups.
+     * @return The value of <code>toolbarSelection</code> property.
+     *
+     */
+    getToolbarSelection(): Promise<object>;
+}

package/oj-c/toolbar/__webdriver__/ToolbarWebElementBase.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarWebElementBase = void 0;
+const elements_1 = require("@oracle/oraclejet-webdriver/elements");
+/**
+ * This is the base class for oj-c-toolbar 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, ToolbarWebElement.ts.
+ */
+class ToolbarWebElementBase extends elements_1.OjWebElement {
+    /**
+     * Gets the value of <code>spacing</code> property.
+     * Specifies the spacing between content. 'sm' spacing is recommended for button variants that don't have a background or border, for example borderless buttons. 'lg' spacing is recommended for button variants that have a background or border, for example outlined or solid buttons.
+     * @return The value of <code>spacing</code> property.
+     *
+     */
+    getSpacing() {
+        return this.getProperty('spacing');
+    }
+    /**
+     * Gets the value of <code>chroming</code> property.
+     * Specifies the chroming to be set on content to be placed into the toolbar.
+     * @return The value of <code>chroming</code> property.
+     *
+     */
+    getChroming() {
+        return this.getProperty('chroming');
+    }
+    /**
+     * Gets the value of <code>size</code> property.
+     * Specifies the size of content to be placed into the toolbar.
+     * @return The value of <code>size</code> property.
+     *
+     */
+    getSizeProperty() {
+        return this.getProperty('size');
+    }
+    /**
+     * Gets the value of <code>items</code> property.
+     * Specifies the content to be placed into the toolbar.
+     * @return The value of <code>items</code> property.
+     *
+     */
+    getItems() {
+        return this.getProperty('items');
+    }
+    /**
+     * Sets the value of <code>toolbarSelection</code> property.
+     * An array containing key/value objects for selection groups.
+     * @param toolbarSelection The value to set for <code>toolbarSelection</code>
+     *
+     */
+    changeToolbarSelection(toolbarSelection) {
+        return this.setProperty('toolbarSelection', toolbarSelection);
+    }
+    /**
+     * Gets the value of <code>toolbarSelection</code> property.
+     * An array containing key/value objects for selection groups.
+     * @return The value of <code>toolbarSelection</code> property.
+     *
+     */
+    getToolbarSelection() {
+        return this.getProperty('toolbarSelection');
+    }
+}
+exports.ToolbarWebElementBase = ToolbarWebElementBase;
+//# sourceMappingURL=ToolbarWebElementBase.js.map

package/oj-c/toolbar/__webdriver__/ToolbarWebElementBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarWebElementBase.js","sourceRoot":"","sources":["ToolbarWebElementBase.ts"],"names":[],"mappings":";;;AAAA,mEAAoE;AAEpE;;;;;GAKG;AACH,MAAa,qBAAsB,SAAQ,uBAAY;IACrD;;;;;OAKG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,WAAW,CAAS,SAAS,CAAC,CAAC;IAC7C,CAAC;IAED;;;;;OAKG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,WAAW,CAAS,UAAU,CAAC,CAAC;IAC9C,CAAC;IAED;;;;;OAKG;IACI,eAAe;QACpB,OAAO,IAAI,CAAC,WAAW,CAAS,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED;;;;;OAKG;IACI,QAAQ;QACb,OAAO,IAAI,CAAC,WAAW,CAAgB,OAAO,CAAC,CAAC;IAClD,CAAC;IAED;;;;;OAKG;IACI,sBAAsB,CAAC,gBAAwB;QACpD,OAAO,IAAI,CAAC,WAAW,CAAS,kBAAkB,EAAE,gBAAgB,CAAC,CAAC;IACxE,CAAC;IAED;;;;;OAKG;IACI,mBAAmB;QACxB,OAAO,IAAI,CAAC,WAAW,CAAS,kBAAkB,CAAC,CAAC;IACtD,CAAC;CACF;AA5DD,sDA4DC","sourcesContent":["import { OjWebElement } from '@oracle/oraclejet-webdriver/elements';\n\n/**\n * This is the base class for oj-c-toolbar WebElement, and is generated from the\n * component's metadata. Do not modify these contents since they'll be replaced\n * during the next generation.\n * Put overrides into the WebElements's subclass, ToolbarWebElement.ts.\n */\nexport class ToolbarWebElementBase extends OjWebElement {\n  /**\n   * Gets the value of <code>spacing</code> property.\n   * Specifies the spacing between content. 'sm' spacing is recommended for button variants that don't have a background or border, for example borderless buttons. 'lg' spacing is recommended for button variants that have a background or border, for example outlined or solid buttons.\n   * @return The value of <code>spacing</code> property.\n   *\n   */\n  public getSpacing(): Promise<string> {\n    return this.getProperty<string>('spacing');\n  }\n\n  /**\n   * Gets the value of <code>chroming</code> property.\n   * Specifies the chroming to be set on content to be placed into the toolbar.\n   * @return The value of <code>chroming</code> property.\n   *\n   */\n  public getChroming(): Promise<string> {\n    return this.getProperty<string>('chroming');\n  }\n\n  /**\n   * Gets the value of <code>size</code> property.\n   * Specifies the size of content to be placed into the toolbar.\n   * @return The value of <code>size</code> property.\n   *\n   */\n  public getSizeProperty(): Promise<string> {\n    return this.getProperty<string>('size');\n  }\n\n  /**\n   * Gets the value of <code>items</code> property.\n   * Specifies the content to be placed into the toolbar.\n   * @return The value of <code>items</code> property.\n   *\n   */\n  public getItems(): Promise<Array<object>> {\n    return this.getProperty<Array<object>>('items');\n  }\n\n  /**\n   * Sets the value of <code>toolbarSelection</code> property.\n   * An array containing key/value objects for selection groups.\n   * @param toolbarSelection The value to set for <code>toolbarSelection</code>\n   *\n   */\n  public changeToolbarSelection(toolbarSelection: object): Promise<void> {\n    return this.setProperty<object>('toolbarSelection', toolbarSelection);\n  }\n\n  /**\n   * Gets the value of <code>toolbarSelection</code> property.\n   * An array containing key/value objects for selection groups.\n   * @return The value of <code>toolbarSelection</code> property.\n   *\n   */\n  public getToolbarSelection(): Promise<object> {\n    return this.getProperty<object>('toolbarSelection');\n  }\n}\n"]}

package/oj-c/toolbar/__webdriver__/index.d.ts

@@ -0,0 +1,17 @@
+import { By } from 'selenium-webdriver';
+import { DriverLike } from '@oracle/oraclejet-webdriver';
+import { ToolbarWebElement } from './ToolbarWebElement';
+export { ToolbarWebElement };
+/**
+ * Retrieve an instance of [ToolbarWebElement](../classes/ToolbarWebElement.html).
+ * @example
+ * ```javascript
+ * import { findToolbar } from '@oracle/oraclejet-core-pack/webdriver';
+ * const el = await findToolbar(driver, By.id('my-oj-c-toolbar'));
+ * ```
+ * @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
+ */
+export declare function findToolbar(driver: DriverLike, by: By): Promise<ToolbarWebElement>;

package/oj-c/toolbar/__webdriver__/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToolbarWebElement = void 0;
+exports.findToolbar = findToolbar;
+const oraclejet_webdriver_1 = require("@oracle/oraclejet-webdriver");
+const ToolbarWebElement_1 = require("./ToolbarWebElement");
+Object.defineProperty(exports, "ToolbarWebElement", { enumerable: true, get: function () { return ToolbarWebElement_1.ToolbarWebElement; } });
+/**
+ * Retrieve an instance of [ToolbarWebElement](../classes/ToolbarWebElement.html).
+ * @example
+ * ```javascript
+ * import { findToolbar } from '@oracle/oraclejet-core-pack/webdriver';
+ * const el = await findToolbar(driver, By.id('my-oj-c-toolbar'));
+ * ```
+ * @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
+ */
+async function findToolbar(driver, by) {
+    const webEl = await driver.findElement(by);
+    // Check that the element is of type ToolbarWebElement
+    if (!(webEl instanceof ToolbarWebElement_1.ToolbarWebElement)) {
+        const tagName = await webEl.getTagName();
+        let supplemental = '';
+        if (webEl.constructor.name === 'ToolbarWebElement') {
+            supplemental = 'You likely have multiple installations of this package.';
+        }
+        throw Error(`findToolbar(${by}) created ${webEl.constructor.name} for <${tagName}>, but expected ${ToolbarWebElement_1.ToolbarWebElement.name}. ${supplemental}`);
+    }
+    return webEl;
+}
+(0, oraclejet_webdriver_1.register)('oj-c-toolbar', ToolbarWebElement_1.ToolbarWebElement);
+//# sourceMappingURL=index.js.map

package/oj-c/toolbar/__webdriver__/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":";;;AAiBA,kCAcC;AA9BD,qEAAmE;AACnE,2DAAwD;AAC/C,kGADA,qCAAiB,OACA;AAE1B;;;;;;;;;;;GAWG;AACI,KAAK,UAAU,WAAW,CAAC,MAAkB,EAAE,EAAM;IAC1D,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC3C,sDAAsD;IACtD,IAAI,CAAC,CAAC,KAAK,YAAY,qCAAiB,CAAC,EAAE,CAAC;QAC1C,MAAM,OAAO,GAAG,MAAM,KAAK,CAAC,UAAU,EAAE,CAAC;QACzC,IAAI,YAAY,GAAG,EAAE,CAAC;QACtB,IAAI,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,mBAAmB,EAAE,CAAC;YACnD,YAAY,GAAG,yDAAyD,CAAC;QAC3E,CAAC;QACD,MAAM,KAAK,CACT,eAAe,EAAE,aAAa,KAAK,CAAC,WAAW,CAAC,IAAI,SAAS,OAAO,mBAAmB,qCAAiB,CAAC,IAAI,KAAK,YAAY,EAAE,CACjI,CAAC;IACJ,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AAED,IAAA,8BAAQ,EAAC,cAAc,EAAE,qCAAiB,CAAC,CAAC","sourcesContent":["import { By } from 'selenium-webdriver';\nimport { DriverLike, register } from '@oracle/oraclejet-webdriver';\nimport { ToolbarWebElement } from './ToolbarWebElement';\nexport { ToolbarWebElement };\n\n/**\n * Retrieve an instance of [ToolbarWebElement](../classes/ToolbarWebElement.html).\n * @example\n * ```javascript\n * import { findToolbar } from '@oracle/oraclejet-core-pack/webdriver';\n * const el = await findToolbar(driver, By.id('my-oj-c-toolbar'));\n * ```\n * @param driver A WebDriver/WebElement instance from where the element will be\n * searched. If WebDriver is passed, the element will be searched globally in the\n * document. If WebElement is passed, the search will be relative to this element.\n * @param by The locator with which to find the element\n */\nexport async function findToolbar(driver: DriverLike, by: By): Promise<ToolbarWebElement> {\n  const webEl = await driver.findElement(by);\n  // Check that the element is of type ToolbarWebElement\n  if (!(webEl instanceof ToolbarWebElement)) {\n    const tagName = await webEl.getTagName();\n    let supplemental = '';\n    if (webEl.constructor.name === 'ToolbarWebElement') {\n      supplemental = 'You likely have multiple installations of this package.';\n    }\n    throw Error(\n      `findToolbar(${by}) created ${webEl.constructor.name} for <${tagName}>, but expected ${ToolbarWebElement.name}. ${supplemental}`\n    );\n  }\n  return webEl;\n}\n\nregister('oj-c-toolbar', ToolbarWebElement);\n"]}

package/oj-c/toolbar/component.json

@@ -0,0 +1,183 @@
+{
+  "name": "toolbar",
+  "version": "18.0.1",
+  "jetVersion": "^18.0.1",
+  "pack": "oj-c",
+  "type": "composite",
+  "dependencyScope": "runtime",
+  "license": "https://opensource.org/licenses/UPL",
+  "implements": [
+    "CToolbarElement"
+  ],
+  "description": "A toolbar displays a strip of control elements such as buttons and menu buttons, often grouped by separators.",
+  "displayName": "Toolbar",
+  "help": "oj-c.Toolbar.html",
+  "main": "oj-c/toolbar",
+  "since": "18.0.0",
+  "status": [
+    {
+      "type": "supersedes",
+      "since": "18.0.0",
+      "value": [
+        "oj-toolbar"
+      ]
+    }
+  ],
+  "extension": {
+    "catalog": {
+      "category": "Controls"
+    },
+    "vbdt": {
+      "module": "oj-c/toolbar"
+    },
+    "oracle": {
+      "icon": "oj-ux-ico-toolbar",
+      "uxSpecs": [
+        "toolbar"
+      ]
+    },
+    "webelement": {
+      "docUrl": "https://www.oracle.com/webfolder/technetwork/jet/cpwdtsdoc/classes/ToolbarWebElement.html"
+    }
+  },
+  "properties": {
+    "spacing": {
+      "type": "string",
+      "description": "Specifies the spacing between content. 'sm' spacing is recommended for button variants that don't have a background or border, for example borderless buttons. 'lg' spacing is recommended for button variants that have a background or border, for example outlined or solid buttons.",
+      "displayName": "spacing",
+      "help": "#spacing",
+      "propertyEditorValues": {
+        "sm": {
+          "description": "Compact spacing between content.",
+          "displayName": "Small"
+        },
+        "lg": {
+          "description": "Default spacing between content.",
+          "displayName": "Large"
+        }
+      },
+      "enumValues": [
+        "sm",
+        "lg"
+      ]
+    },
+    "chroming": {
+      "type": "string",
+      "description": "Specifies the chroming to be set on content to be placed into the toolbar.",
+      "displayName": "chroming",
+      "help": "#chroming",
+      "enumValues": [
+        "borderless",
+        "outlined"
+      ]
+    },
+    "size": {
+      "type": "string",
+      "description": "Specifies the size of content to be placed into the toolbar.",
+      "displayName": "size",
+      "help": "#size",
+      "enumValues": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "items": {
+      "type": "Array<object>",
+      "description": "Specifies the content to be placed into the toolbar.",
+      "displayName": "items",
+      "help": "#items",
+      "value": []
+    },
+    "toolbarSelection": {
+      "type": "object",
+      "description": "An array containing key/value objects for selection groups.",
+      "displayName": "toolbarSelection",
+      "help": "#toolbarSelection",
+      "extension": {
+        "vbdt": {
+          "keyedProperties": {
+            "keys": {
+              "type": "string"
+            },
+            "values": {
+              "type": "string|boolean|Array<string>|object"
+            }
+          }
+        }
+      },
+      "writeback": true,
+      "value": {}
+    }
+  },
+  "events": {
+    "ojToolbarAction": {
+      "bubbles": true,
+      "description": "Triggered when a toolbar item is clicked, whether by keyboard, mouse, or touch events. Detail indicates which toolbar item was clicked.",
+      "eventGroup": "common",
+      "help": "#event:ojToolbarAction",
+      "detail": {
+        "key": {
+          "type": "string"
+        }
+      }
+    },
+    "ojToolbarSelection": {
+      "bubbles": true,
+      "description": "Triggered when a toolbar selection group item is clicked, whether by keyboard, mouse, or touch events. Detail indicates new selection value for group.",
+      "eventGroup": "common",
+      "help": "#event:ojToolbarSelection",
+      "detail": {
+        "value": {
+          "type": "any"
+        },
+        "toolbarSelectionGroupKey": {
+          "type": "string"
+        }
+      }
+    }
+  },
+  "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/toolbar/index.js

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

package/oj-c/toolbar/items-toolbar.js

@@ -0,0 +1,100 @@
+define(["require", "exports", "preact/jsx-runtime", "@oracle/oraclejet-preact/UNSAFE_Toolbar", "oj-c/button", "oj-c/menu-button", "oj-c/split-menu-button", "oj-c/utils/PRIVATE_ItemsMenu/menu-item-icon", "oj-c/buttonset-single", "oj-c/buttonset-multiple", "oj-c/toggle-button", "oj-c/progress-button"], function (require, exports, jsx_runtime_1, UNSAFE_Toolbar_1, button_1, menu_button_1, split_menu_button_1, menu_item_icon_1, buttonset_single_1, buttonset_multiple_1, toggle_button_1, progress_button_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ItemsToolbar = void 0;
+    const ItemsToolbar = ({ items = [], size, chroming, toolbarSelection = {}, onToolbarSelectionChanged, onOjToolbarAction, onOjToolbarSelection }) => {
+        const setSelectionValue = (selection, value, key, menuButtonSelection = {}) => {
+            let updatedSelection = { ...selection };
+            if (!key) {
+                for (const k in menuButtonSelection) {
+                    if (!(k in value))
+                        delete updatedSelection[k];
+                }
+                updatedSelection = { ...updatedSelection, ...value };
+            }
+            else {
+                if (Array.isArray(value) && value.length === 0) {
+                    delete updatedSelection[key];
+                }
+                else {
+                    updatedSelection[key] = value;
+                }
+            }
+            return updatedSelection;
+        };
+        const getItemActionHandler = (key, onAction) => {
+            return () => {
+                onAction?.();
+                onOjToolbarAction?.({ key });
+            };
+        };
+        const getSelectionChanges = (selection, key = '', value) => {
+            onOjToolbarSelection?.({ value: value, toolbarSelectionGroupKey: key });
+            onToolbarSelectionChanged?.(setSelectionValue(selection, value, key));
+        };
+        const getMenuButtonSelection = (toolbarSelection, menuItems, menuButtonSelection) => {
+            menuItems?.forEach((item) => {
+                if (item.type === 'selectsingle' || item.type === 'selectmultiple') {
+                    if (item.key in toolbarSelection) {
+                        menuButtonSelection[item.key] = toolbarSelection[item.key];
+                    }
+                }
+                else if (item.type === 'submenu') {
+                    menuButtonSelection = getMenuButtonSelection(toolbarSelection, item.items, menuButtonSelection);
+                }
+            });
+            return menuButtonSelection;
+        };
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items.map((item) => {
+                switch (item.type) {
+                    case 'button': {
+                        const { startIcon, endIcon, chroming: itemChroming, ...props } = item;
+                        return ((0, jsx_runtime_1.jsx)(button_1.Button, { ...props, chroming: itemChroming || chroming, size: size, onOjAction: getItemActionHandler(item.key, item.onAction), startIcon: startIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: startIcon }), endIcon: endIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: endIcon }) }));
+                    }
+                    case 'menu-button': {
+                        const { startIcon, endIcon, items: menuItems, chroming: itemChroming, ...props } = item;
+                        let menuButtonSelection = {};
+                        menuButtonSelection = getMenuButtonSelection(toolbarSelection, menuItems, menuButtonSelection);
+                        return ((0, jsx_runtime_1.jsx)(menu_button_1.MenuButton, { ...props, items: menuItems, chroming: itemChroming || chroming, size: size, onOjMenuAction: getItemActionHandler(''), selection: menuButtonSelection, onOjMenuSelection: (value) => {
+                                onOjToolbarSelection?.({
+                                    value: value,
+                                    toolbarSelectionGroupKey: ''
+                                });
+                            }, onSelectionChanged: (value) => {
+                                onToolbarSelectionChanged?.(setSelectionValue(toolbarSelection, value, '', menuButtonSelection));
+                            }, startIcon: startIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: startIcon }), endIcon: endIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: endIcon }) }));
+                    }
+                    case 'split-menu-button': {
+                        return ((0, jsx_runtime_1.jsx)(split_menu_button_1.SplitMenuButton, { size: size, ...item, onOjAction: getItemActionHandler(item.key, item.onAction) }));
+                    }
+                    case 'buttonset-single': {
+                        const { chroming: itemChroming, ...props } = item;
+                        return ((0, jsx_runtime_1.jsx)(buttonset_single_1.ButtonsetSingle, { chroming: itemChroming || chroming, size: size, ...props, value: toolbarSelection[item.key], onValueChanged: (value) => {
+                                getSelectionChanges(toolbarSelection, item.key, value);
+                            } }));
+                    }
+                    case 'buttonset-multiple': {
+                        const { chroming: itemChroming, ...props } = item;
+                        return ((0, jsx_runtime_1.jsx)(buttonset_multiple_1.ButtonsetMultiple, { chroming: itemChroming || chroming, size: size, ...props, value: toolbarSelection[item.key], onValueChanged: (value) => {
+                                getSelectionChanges(toolbarSelection, item.key, value);
+                            } }));
+                    }
+                    case 'toggle-button': {
+                        const { startIcon, endIcon, chroming: itemChroming, ...props } = item;
+                        return ((0, jsx_runtime_1.jsx)(toggle_button_1.ToggleButton, { chroming: itemChroming || chroming, size: size, value: toolbarSelection[item.key], onValueChanged: (value) => {
+                                getSelectionChanges(toolbarSelection, item.key, value);
+                            }, ...props, startIcon: startIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: startIcon }), endIcon: endIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: endIcon }) }));
+                    }
+                    case 'progress-button': {
+                        const { startIcon, chroming: itemChroming, ...props } = item;
+                        return ((0, jsx_runtime_1.jsx)(progress_button_1.ProgressButton, { chroming: itemChroming || chroming, size: size, ...props, onOjAction: getItemActionHandler(item.key, item.onAction), startIcon: startIcon && (0, jsx_runtime_1.jsx)(menu_item_icon_1.MenuItemIcon, { icon: startIcon }) }));
+                    }
+                    case 'separator':
+                        return (0, jsx_runtime_1.jsx)(UNSAFE_Toolbar_1.ToolbarSeparator, {});
+                    default:
+                        return;
+                }
+            }) }));
+    };
+    exports.ItemsToolbar = ItemsToolbar;
+});

package/oj-c/toolbar/itemsTypes.js

@@ -0,0 +1,4 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});

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

@@ -0,0 +1,21 @@
+/* This file is where css selectors for the component go.
+   There will be hard coded properties and properties controlled by variables, for example
+
+   oj-c-toolbar .oj-c-toolbar-value-text {
+   color: var(--oj-c-toolbar-value-text-color);
+   display: inline-block;
+	 }
+*/
+
+oj-c-toolbar:not(.oj-complete){
+  visibility: hidden;
+}
+
+oj-c-toolbar {
+  display: block;
+}
+
+oj-c-toolbar[hidden]
+{
+  display: none;
+}