@xplortech/apollo-core 2.7.1 → 2.8.0

package/dist/esm/xpl-toggle.entry.js

@@ -1,11 +1,16 @@
-import { r as registerInstance, h, H as Host } from './index-C7bgJs6C.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-C7bgJs6C.js';
 import { v as v4 } from './v4-Cqlsd6nf.js';
 
 const Toggle = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.toggleChange = createEvent(this, "toggleChange", 7);
         this.variant = 'default';
         this.id = v4();
+        this.onChange = (event) => {
+            const target = event.target;
+            this.toggleChange.emit(target.checked);
+        };
     }
     render() {
         let containerClassName = 'xpl-toggle-container';
@@ -14,13 +19,13 @@ const Toggle = class {
         let className = 'xpl-toggle';
         if (this.variant === 'small')
             className += ' xpl-toggle--small';
-        return (h(Host, { key: '0cf2e99934bbe447559fbe88cc61989bbfabbdea', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd', class: {
+        return (h(Host, { key: '2665ccecd2df94b7ed7443e2ecb6265fca7f235f', class: containerClassName }, (this.heading || this.description) && (h("label", { key: '75292b431419e1d34c127a82d61baa1ee024a2bb', class: {
                 'xpl-label': true,
                 'xpl-label--disabled': this.disabled,
-            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '0b8157e097f3890d6c521c399cf1f9c25514e341', class: {
+            }, htmlFor: this.id }, this.heading, this.description && (h("small", { key: '772e34c7d553faee5b1dfc448ecb95706dc3e8df', class: {
                 'xpl-description': true,
                 'xpl-description--disabled': this.disabled,
-            } }, this.description)))), h("input", { key: '3bcfe674974e16e50a38d17836da0aa1c49fd6dc', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name }), this.label && h("label", { key: 'cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857', htmlFor: this.id }, this.label)));
+            } }, this.description)))), h("input", { key: 'afec8fff16aadca330c804832dbd41c4b10f5caa', class: className, type: "checkbox", checked: this.checked, disabled: this.disabled, id: this.id, name: this.name, onChange: this.onChange }), this.label && h("label", { key: '1b25d01805915cb2dacf03ad9340beec61565bcc', htmlFor: this.id }, this.label)));
     }
 };
 

package/dist/types/components/xpl-checkbox/xpl-checkbox.d.ts

@@ -11,7 +11,7 @@ export declare class Checkbox {
     required?: boolean;
     styled?: boolean;
     dataId?: string;
-    checkboxChange: EventEmitter<string | boolean>;
+    checkboxChange: EventEmitter<boolean>;
     private onChange;
     render(): any;
 }

package/dist/types/components/xpl-input/xpl-input.d.ts

@@ -38,11 +38,12 @@ export declare class Input {
     ariaLabel: string;
     shape?: 'rounded' | 'box';
     type?: 'date' | 'time' | 'text' | 'number' | 'password' | 'file' | 'color' | 'phone' | 'search';
-    focusEvent: EventEmitter<FocusEvent>;
     blurEvent: EventEmitter<FocusEvent>;
-    valueChange: EventEmitter<string>;
+    focusEvent: EventEmitter<FocusEvent>;
     inputEvent: EventEmitter<string>;
     search: EventEmitter<string>;
+    valueChange: EventEmitter<string>;
+    private handleChildValueChange;
     private valueChanged;
     characterCount: number;
     passwordVisible: boolean;

package/dist/types/components/xpl-radio/radio.stories.d.ts

@@ -40,6 +40,13 @@ declare const _default: {
                 required: false;
             };
         };
+        selectedValue: {
+            type: {
+                name: "string";
+                required: false;
+            };
+            description: string;
+        };
     };
     parameters: {
         actions: {
@@ -49,7 +56,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Radio: {
-    ({ label, description, checked, disabled, styled, value, name }: {
+    ({ label, description, checked, disabled, styled, value, name, selectedValue, }: {
         label: any;
         description: any;
         checked: any;
@@ -57,6 +64,7 @@ export declare const Radio: {
         styled: any;
         value: any;
         name: any;
+        selectedValue: any;
     }): string;
     args: {
         label: string;
@@ -66,6 +74,7 @@ export declare const Radio: {
         styled: boolean;
         value: string;
         name: string;
+        selectedValue: string;
     };
     parameters: {
         layout: string;

package/dist/types/components/xpl-radio/xpl-radio.d.ts

@@ -6,9 +6,11 @@ export declare class Radio {
     name?: string;
     value?: string;
     required?: boolean;
+    selectedValue?: string;
     styled?: boolean;
     id: string;
     radioChange: EventEmitter<string | boolean>;
     private onChange;
+    private get isChecked();
     render(): any;
 }

package/dist/types/components/xpl-toggle/xpl-toggle.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 export declare class Toggle {
     checked?: boolean;
     description?: string;
@@ -7,5 +8,7 @@ export declare class Toggle {
     name?: string;
     variant?: 'default' | 'small';
     id: string;
+    toggleChange: EventEmitter<boolean>;
+    private onChange;
     render(): any;
 }

package/dist/types/components.d.ts

@@ -1430,19 +1430,23 @@ export namespace Components {
          */
         "disabled"?: boolean;
         /**
-          * The name attribute for the html input. (submittted in form as name/value pair)
+          * The name attribute for the html input. (submitted in form as name/value pair)
          */
         "name"?: string;
         /**
           * Whether the input is required
          */
         "required"?: boolean;
+        /**
+          * The currently selected value for the radio group this radio belongs to.  When set, the radio renders as checked when `selectedValue` equals its own `value` prop. Use this to drive radio-group selection from a single source of truth — e.g. Vue `v-model` on a shared `selectedValue` across every radio in a group, where each radio still declares its own `value`.  Falls back to the boolean `checked` prop when not set.
+         */
+        "selectedValue"?: string;
         /**
           * Whether the input is contained in a box with a border and, in disabled state, a background
          */
         "styled"?: boolean;
         /**
-          * The value attribute for the radio input. (submittted in form as name/value pair)
+          * The value attribute for the radio input. (submitted in form as name/value pair)
          */
         "value"?: string;
     }
@@ -1921,7 +1925,7 @@ export namespace Components {
          */
         "label"?: string;
         /**
-          * The name attribute for the html input. (submittted in form as name/value pair)
+          * The name attribute for the html input. (submitted in form as name/value pair)
          */
         "name"?: string;
         /**
@@ -2188,6 +2192,10 @@ export interface XplTagCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplTagElement;
 }
+export interface XplToggleCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLXplToggleElement;
+}
 export interface XplTopNavCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLXplTopNavElement;
@@ -2305,7 +2313,7 @@ declare global {
         new (): HTMLXplCalendarElement;
     };
     interface HTMLXplCheckboxElementEventMap {
-        "checkboxChange": string | boolean;
+        "checkboxChange": boolean;
     }
     interface HTMLXplCheckboxElement extends Components.XplCheckbox, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplCheckboxElementEventMap>(type: K, listener: (this: HTMLXplCheckboxElement, ev: XplCheckboxCustomEvent<HTMLXplCheckboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2452,11 +2460,11 @@ declare global {
         new (): HTMLXplIconElement;
     };
     interface HTMLXplInputElementEventMap {
-        "focusEvent": FocusEvent;
         "blurEvent": FocusEvent;
-        "valueChange": string;
+        "focusEvent": FocusEvent;
         "inputEvent": string;
         "search": string;
+        "valueChange": string;
     }
     interface HTMLXplInputElement extends Components.XplInput, HTMLStencilElement {
         addEventListener<K extends keyof HTMLXplInputElementEventMap>(type: K, listener: (this: HTMLXplInputElement, ev: XplInputCustomEvent<HTMLXplInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2989,7 +2997,18 @@ declare global {
         prototype: HTMLXplToastElement;
         new (): HTMLXplToastElement;
     };
+    interface HTMLXplToggleElementEventMap {
+        "toggleChange": boolean;
+    }
     interface HTMLXplToggleElement extends Components.XplToggle, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLXplToggleElementEventMap>(type: K, listener: (this: HTMLXplToggleElement, ev: XplToggleCustomEvent<HTMLXplToggleElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLXplToggleElementEventMap>(type: K, listener: (this: HTMLXplToggleElement, ev: XplToggleCustomEvent<HTMLXplToggleElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLXplToggleElement: {
         prototype: HTMLXplToggleElement;
@@ -3539,9 +3558,9 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Event that emits the current value of the checkbox input  Returns the value of the checkbox input if a value is provided, otherwise returns the checked state
+          * Emits the new checked state of the checkbox after a user interaction.  Always emits a boolean so the event payload reliably represents whether the checkbox is now on or off. This is what Vue `v-model` binds to via the `checked` attribute — emitting the `value` string here would coerce any non-empty string to `true` and make it impossible to uncheck a checkbox that has a `value` prop set. Consumers that need the `value` can read it from the host element (`event.target.value`) or rely on native form submission (`name`/`value` pair).
          */
-        "onCheckboxChange"?: (event: XplCheckboxCustomEvent<string | boolean>) => void;
+        "onCheckboxChange"?: (event: XplCheckboxCustomEvent<boolean>) => void;
         /**
           * Whether the input is required
          */
@@ -4725,7 +4744,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * The name attribute for the html input. (submittted in form as name/value pair)
+          * The name attribute for the html input. (submitted in form as name/value pair)
          */
         "name"?: string;
         /**
@@ -4736,12 +4755,16 @@ declare namespace LocalJSX {
           * Whether the input is required
          */
         "required"?: boolean;
+        /**
+          * The currently selected value for the radio group this radio belongs to.  When set, the radio renders as checked when `selectedValue` equals its own `value` prop. Use this to drive radio-group selection from a single source of truth — e.g. Vue `v-model` on a shared `selectedValue` across every radio in a group, where each radio still declares its own `value`.  Falls back to the boolean `checked` prop when not set.
+         */
+        "selectedValue"?: string;
         /**
           * Whether the input is contained in a box with a border and, in disabled state, a background
          */
         "styled"?: boolean;
         /**
-          * The value attribute for the radio input. (submittted in form as name/value pair)
+          * The value attribute for the radio input. (submitted in form as name/value pair)
          */
         "value"?: string;
     }
@@ -5282,9 +5305,13 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * The name attribute for the html input. (submittted in form as name/value pair)
+          * The name attribute for the html input. (submitted in form as name/value pair)
          */
         "name"?: string;
+        /**
+          * Emitted when the toggle checked state changes. Detail is the new `checked` value.
+         */
+        "onToggleChange"?: (event: XplToggleCustomEvent<boolean>) => void;
         /**
           * The size of the toggle -- `default` or `small`
           * @default 'default'
@@ -5803,6 +5830,7 @@ declare namespace LocalJSX {
         "name": string;
         "value": string;
         "required": boolean;
+        "selectedValue": string;
         "styled": boolean;
     }
     interface XplSelectAttributes {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xplortech/apollo-core",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "types": "dist/types/components.d.ts",
@@ -66,6 +66,7 @@
     "build:css": "cross-env NODE_ENV=production postcss src/style.css -o build/style.css && npm-run-all build-partial:css.*",
     "build-partial:css.react": "cp build/style.css ../apollo-react/css/apollo.css",
     "build-partial:css.storybook": "cp -r build/ .storybook/build",
+    "build-partial:css.vue": "cp build/style.css ../apollo-vue/css/apollo.css",
     "build:stencil": "node ../../scripts/generate-icon-docs.mjs && stencil build --docs --prod && cp -r dist .storybook && cp -r loader .storybook && node .storybook/patch-stencil-sourcemaps.mjs",
     "postbuild": "node ../../scripts/copy-readmes-to-dist.mjs",
     "clean": "rm -rf dist/ loader/ storybook-static/ www/ build/ src/components/components.d.ts",
@@ -103,6 +104,7 @@
     "@mdx-js/react": "^3.1.1",
     "@stencil/core": "^4.31.0",
     "@stencil/react-output-target": "0.5.3",
+    "@stencil/vue-output-target": "^0.13.1",
     "@storybook/addon-a11y": "^10.1.3",
     "@storybook/addon-designs": "^11.1.1",
     "@storybook/addon-docs": "^10.1.3",
@@ -115,8 +117,8 @@
     "@vitest/browser-playwright": "^4.0.13",
     "@vitest/coverage-v8": "^4.0.13",
     "@vueless/storybook-dark-mode": "^10.0.3",
-    "@xplortech/apollo-foundation": "^1.0.1",
-    "@xplortech/apollo-icons": "^0.3.2",
+    "@xplortech/apollo-foundation": "1.0.1",
+    "@xplortech/apollo-icons": "0.4.0",
     "auto-changelog": "^2.3.0",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
@@ -165,6 +167,29 @@
       "scope:core",
       "type:lib",
       "platform:web"
-    ]
+    ],
+    "implicitDependencies": [
+      "@xplortech/apollo-icons",
+      "@xplortech/apollo-foundation"
+    ],
+    "targets": {
+      "build": {
+        "outputs": [
+          "{projectRoot}/build",
+          "{projectRoot}/dist",
+          "{projectRoot}/loader",
+          "{projectRoot}/www",
+          "{projectRoot}/.typings/apollo-components.html-data.json",
+          "{projectRoot}/.storybook/build",
+          "{projectRoot}/.storybook/dist",
+          "{projectRoot}/.storybook/loader",
+          "{projectRoot}/src/components/components.d.ts",
+          "{workspaceRoot}/packages/apollo-react/src/components.ts",
+          "{workspaceRoot}/packages/apollo-react/css/apollo.css",
+          "{workspaceRoot}/packages/apollo-vue/src/components.ts",
+          "{workspaceRoot}/packages/apollo-vue/css/apollo.css"
+        ]
+      }
+    }
   }
 }

package/dist/apollo-core/p-d1c9c233.entry.js

@@ -1 +0,0 @@
-import{r as s,h as e,H as l}from"./p-C7bgJs6C.js";import{v as t}from"./p-Cqlsd6nf.js";const a=class{constructor(e){s(this,e),this.variant="default",this.id=t()}render(){let s="xpl-toggle-container";this.disabled&&(s+=" xpl-toggle-container--disabled");let t="xpl-toggle";return"small"===this.variant&&(t+=" xpl-toggle--small"),e(l,{key:"0cf2e99934bbe447559fbe88cc61989bbfabbdea",class:s},(this.heading||this.description)&&e("label",{key:"7ab6e5535b8d88a5aabb5ced76faca68b2a8abcd",class:{"xpl-label":!0,"xpl-label--disabled":this.disabled},htmlFor:this.id},this.heading,this.description&&e("small",{key:"0b8157e097f3890d6c521c399cf1f9c25514e341",class:{"xpl-description":!0,"xpl-description--disabled":this.disabled}},this.description)),e("input",{key:"3bcfe674974e16e50a38d17836da0aa1c49fd6dc",class:t,type:"checkbox",checked:this.checked,disabled:this.disabled,id:this.id,name:this.name}),this.label&&e("label",{key:"cc91cdb86fb6bb4c7bfbabb6d47edf03adb53857",htmlFor:this.id},this.label))}};export{a as xpl_toggle}