ember-primitives 0.13.0 → 0.14.0

package/declarations/components/-private/utils.d.ts

@@ -2,5 +2,5 @@
  * If the user provides an onChange or similar function, use that,
  * otherwise fallback to the uncontrolled toggle
  */
-export declare function toggleWithFallback(uncontrolledToggle: (...args: unknown[]) => void, controlledToggle?: (...args: unknown[]) => void, ...args: unknown[]): void;
+export declare function toggleWithFallback(uncontrolledToggle: (...args: unknown[]) => void, controlledToggle?: (...args: any[]) => void, ...args: unknown[]): void;
 //# sourceMappingURL=utils.d.ts.map

package/declarations/components/-private/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/-private/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,kBAAkB,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAChD,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAC/C,GAAG,IAAI,EAAE,OAAO,EAAE,QAOnB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/-private/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,kBAAkB,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,EAEhD,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,EAC3C,GAAG,IAAI,EAAE,OAAO,EAAE,QAOnB"}

package/declarations/components/toggle-group.d.ts

@@ -25,7 +25,7 @@ export interface ItemSignature<Value = any> {
     };
 }
 export type Item<Value = any> = ComponentLike<ItemSignature<Value>>;
-export declare class ToggleGroup<Value = any> extends Component<{
+export interface SingleSignature<Value> {
     Element: HTMLDivElement;
     Args: {
         /**
@@ -40,18 +40,100 @@ export declare class ToggleGroup<Value = any> extends Component<{
          *
          * When none of the toggles are selected, undefined will be passed.
          */
-        onChange: (value: Value | undefined) => void;
+        onChange?: (value: Value | undefined) => void;
     };
     Blocks: {
         default: [
             {
+                /**
+                 * The Toggle Switch
+                 */
                 Item: Item;
             }
         ];
     };
-}> {
-    activePressed?: Value;
-    handleToggle: (value: Value) => void;
-    isPressed: (value: Value | undefined) => boolean;
 }
+export interface MultiSignature<Value = any> {
+    Element: HTMLDivElement;
+    Args: {
+        /**
+         * Optionally set the initial toggle state
+         */
+        value?: Value[] | Set<Value> | Value;
+        /**
+         * Callback for when the toggle-group's state is changed.
+         *
+         * Can be used to control the state of the component.
+         *
+         *
+         * When none of the toggles are selected, undefined will be passed.
+         */
+        onChange?: (value: Set<Value>) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                /**
+                 * The Toggle Switch
+                 */
+                Item: Item;
+            }
+        ];
+    };
+}
+interface PrivateSingleSignature<Value = any> {
+    Element: HTMLDivElement;
+    Args: {
+        type?: 'single';
+        /**
+         * Optionally set the initial toggle state
+         */
+        value?: Value;
+        /**
+         * Callback for when the toggle-group's state is changed.
+         *
+         * Can be used to control the state of the component.
+         *
+         *
+         * When none of the toggles are selected, undefined will be passed.
+         */
+        onChange?: (value: Value | undefined) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                Item: Item;
+            }
+        ];
+    };
+}
+interface PrivateMultiSignature<Value = any> {
+    Element: HTMLDivElement;
+    Args: {
+        type: 'multi';
+        /**
+         * Optionally set the initial toggle state
+         */
+        value?: Value[] | Set<Value> | Value;
+        /**
+         * Callback for when the toggle-group's state is changed.
+         *
+         * Can be used to control the state of the component.
+         *
+         *
+         * When none of the toggles are selected, undefined will be passed.
+         */
+        onChange?: (value: Set<Value>) => void;
+    };
+    Blocks: {
+        default: [
+            {
+                Item: Item;
+            }
+        ];
+    };
+}
+export declare class ToggleGroup<Value = any> extends Component<PrivateSingleSignature<Value> | PrivateMultiSignature<Value>> {
+}
+export {};
 //# sourceMappingURL=toggle-group.d.ts.map

package/declarations/components/toggle-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAY3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAUrD,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;;;WAIG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;;;;eAIG;YACH,OAAO,EAAE,OAAO;SACjB,CAAC;KACH,CAAC;CACH;AAGD,MAAM,MAAM,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAGpE,qBAAa,WAAW,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,SAAS,CAAC;IACtD,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACd;;;;;;;WAOG;QACH,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;KAC9C,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH,CAAC;IACyB,aAAa,CAAC,EAAE,KAAK,CAAC;IAE/C,YAAY,UAAW,KAAK,UAU1B;IAEF,SAAS,UAAW,KAAK,GAAG,SAAS,aAAkC;CAexE"}
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/components/toggle-group.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAc3C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AASrD,MAAM,WAAW,aAAa,CAAC,KAAK,GAAG,GAAG;IACxC;;OAEG;IACH,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;;;WAIG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;KACf,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;;;;eAIG;YACH,OAAO,EAAE,OAAO;SACjB,CAAC;KACH,CAAC;CACH;AAED,MAAM,MAAM,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AAEpE,MAAM,WAAW,eAAe,CAAC,KAAK;IACpC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACd;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;KAC/C,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAED,MAAM,WAAW,cAAc,CAAC,KAAK,GAAG,GAAG;IACzC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QACrC;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;KACxC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE;;mBAEG;gBACH,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,sBAAsB,CAAC,KAAK,GAAG,GAAG;IAC1C,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,IAAI,CAAC,EAAE,QAAQ,CAAC;QAEhB;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QACd;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;KAC/C,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAED,UAAU,qBAAqB,CAAC,KAAK,GAAG,GAAG;IACzC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO,CAAC;QACd;;WAEG;QACH,KAAK,CAAC,EAAE,KAAK,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,KAAK,CAAC;QACrC;;;;;;;WAOG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC;KACxC,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,IAAI,CAAC;aACZ;SACF,CAAC;KACH,CAAC;CACH;AAMD,qBAAa,WAAW,CAAC,KAAK,GAAG,GAAG,CAAE,SAAQ,SAAS,CACrD,sBAAsB,CAAC,KAAK,CAAC,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAC7D;CA0BA"}

package/declarations/components/toggle.d.ts

@@ -19,7 +19,7 @@ export interface Signature<Value = any> {
          * This can be useful when using the same function for the `@onChange`
          * handler with multiple `<Toggle>` components.
          */
-        onChange?: (value?: Value | undefined) => void;
+        onChange?: (value: Value | undefined, pressed: boolean) => void;
         /**
          * When used in a group of Toggles, this option will be helpful to
          * know which toggle was pressed if you're using the same @onChange

package/declarations/components/toggle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":";AAOA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAG1D,MAAM,WAAW,SAAS,CAAC,KAAK,GAAG,GAAG;IACpC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;;;;;;;;;WAUG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,IAAI,CAAC;QAE/C;;;;WAIG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAEd;;WAEG;QACH,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,OAAO,CAAC;KACpD,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;;;;eAIG;YACH,OAAO,EAAE,OAAO;SACjB,CAAC;KACH,CAAC;CACH;AAaD,eAAO,MAAM,MAAM,EAAE,GAAG,CAAC,SAAS,CAmBhC,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"toggle.d.ts","sourceRoot":"","sources":["../../src/components/toggle.ts"],"names":[],"mappings":";AAQA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,gCAAgC,CAAC;AAG1D,MAAM,WAAW,SAAS,CAAC,KAAK,GAAG,GAAG;IACpC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,IAAI,EAAE;QACJ;;;;WAIG;QACH,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB;;;;;;;;;;WAUG;QACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;QAEhE;;;;WAIG;QACH,KAAK,CAAC,EAAE,KAAK,CAAC;QAEd;;WAEG;QACH,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,SAAS,KAAK,OAAO,CAAC;KACpD,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE;YACP;;;;eAIG;YACH,OAAO,EAAE,OAAO;SACjB,CAAC;KACH,CAAC;CACH;AAaD,eAAO,MAAM,MAAM,EAAE,GAAG,CAAC,SAAS,CAmBhC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/components/-private/utils.js

@@ -2,7 +2,9 @@
  * If the user provides an onChange or similar function, use that,
  * otherwise fallback to the uncontrolled toggle
  */
-function toggleWithFallback(uncontrolledToggle, controlledToggle, ...args) {
+function toggleWithFallback(uncontrolledToggle,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+controlledToggle, ...args) {
   if (controlledToggle) {
     return controlledToggle(...args);
   }

package/dist/components/-private/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../src/components/-private/utils.ts"],"sourcesContent":["/**\n * If the user provides an onChange or similar function, use that,\n * otherwise fallback to the uncontrolled toggle\n */\nexport function toggleWithFallback(\n  uncontrolledToggle: (...args: unknown[]) => void,\n  controlledToggle?: (...args: unknown[]) => void,\n  ...args: unknown[]\n) {\n  if (controlledToggle) {\n    return controlledToggle(...args);\n  }\n\n  uncontrolledToggle(...args);\n}\n"],"names":["toggleWithFallback","uncontrolledToggle","controlledToggle","args"],"mappings":"AAAA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAChCC,kBAAgD,EAChDC,gBAA+C,EAC/C,GAAGC,IAAe,EAClB;AACA,EAAA,IAAID,gBAAgB,EAAE;AACpB,IAAA,OAAOA,gBAAgB,CAAC,GAAGC,IAAI,CAAC,CAAA;AAClC,GAAA;EAEAF,kBAAkB,CAAC,GAAGE,IAAI,CAAC,CAAA;AAC7B;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../src/components/-private/utils.ts"],"sourcesContent":["/**\n * If the user provides an onChange or similar function, use that,\n * otherwise fallback to the uncontrolled toggle\n */\nexport function toggleWithFallback(\n  uncontrolledToggle: (...args: unknown[]) => void,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  controlledToggle?: (...args: any[]) => void,\n  ...args: unknown[]\n) {\n  if (controlledToggle) {\n    return controlledToggle(...args);\n  }\n\n  uncontrolledToggle(...args);\n}\n"],"names":["toggleWithFallback","uncontrolledToggle","controlledToggle","args"],"mappings":"AAAA;AACA;AACA;AACA;AACO,SAASA,kBAAkBA,CAChCC,kBAAgD;AAChD;AACAC,gBAA2C,EAC3C,GAAGC,IAAe,EAClB;AACA,EAAA,IAAID,gBAAgB,EAAE;AACpB,IAAA,OAAOA,gBAAgB,CAAC,GAAGC,IAAI,CAAC,CAAA;AAClC,GAAA;EAEAF,kBAAkB,CAAC,GAAGE,IAAI,CAAC,CAAA;AAC7B;;;;"}

package/dist/components/toggle-group.js

@@ -1,11 +1,13 @@
 import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { Types } from 'tabster';
+import { TrackedSet } from 'tracked-built-ins';
 import { localCopy } from 'tracked-toolbox';
-import { g, i } from 'decorator-transforms/runtime';
-import { hash } from '@ember/helper';
-import { Toggle } from './toggle.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+import { hash } from '@ember/helper';
+import { Toggle } from './toggle.js';
 
 const TABSTER_CONFIG = JSON.stringify({
   mover: {
@@ -13,12 +15,23 @@ const TABSTER_CONFIG = JSON.stringify({
     cyclic: true
   }
 });
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isMulti(x1) {
+  return x1 === 'multi';
+}
 class ToggleGroup extends Component {
+  // See: https://github.com/typed-ember/glint/issues/715
+  static {
+    setComponentTemplate(precompileTemplate("\n    {{#if (isMulti this.args.type)}}\n      <MultiToggleGroup @value={{this.args.value}} @onChange={{this.args.onChange}} ...attributes as |x|>\n        {{yield x}}\n      </MultiToggleGroup>\n    {{else}}\n      <SingleToggleGroup @value={{this.args.value}} @onChange={{this.args.onChange}} ...attributes as |x|>\n        {{yield x}}\n      </SingleToggleGroup>\n    {{/if}}\n  ", {
+      scope: () => ({
+        isMulti,
+        MultiToggleGroup,
+        SingleToggleGroup
+      }),
+      strictMode: true
+    }), this);
+  }
+}
+let SingleToggleGroup = class SingleToggleGroup extends Component {
   static {
     g(this.prototype, "activePressed", [localCopy('args.value')]);
   }
@@ -42,7 +55,49 @@ class ToggleGroup extends Component {
       strictMode: true
     }), this);
   }
-}
+};
+let MultiToggleGroup = class MultiToggleGroup extends Component {
+  /**
+  * Normalizes @value to a Set
+  * and makes sure that even if the input Set is reactive,
+  * we don't mistakenly dirty it.
+  */
+  get activePressed() {
+    let value1 = this.args.value;
+    if (!value1) {
+      return new TrackedSet();
+    }
+    if (Array.isArray(value1)) {
+      return new TrackedSet(value1);
+    }
+    if (value1 instanceof Set) {
+      return new TrackedSet(value1);
+    }
+    return new TrackedSet([value1]);
+  }
+  static {
+    n(this.prototype, "activePressed", [cached]);
+  }
+  handleToggle = value1 => {
+    if (this.activePressed.has(value1)) {
+      this.activePressed.delete(value1);
+    } else {
+      this.activePressed.add(value1);
+    }
+    this.args.onChange?.(new Set(this.activePressed.values()));
+  };
+  isPressed = value1 => this.activePressed.has(value1);
+  static {
+    setComponentTemplate(precompileTemplate("\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  ", {
+      scope: () => ({
+        TABSTER_CONFIG,
+        hash,
+        Toggle
+      }),
+      strictMode: true
+    }), this);
+  }
+};
 
 export { ToggleGroup };
 //# sourceMappingURL=toggle-group.js.map

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","sources":["../../src/components/toggle-group.gts"],"sourcesContent":["import { template } from \"@ember/template-compiler\";\nimport Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport { Types } from 'tabster';\n// The consumer will need to provide types for tracked-toolbox.\n// Or.. better yet, we PR to trakcked-toolbox to provide them\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { localCopy } from 'tracked-toolbox';\nimport { Toggle } from './toggle.gts';\nimport type { ComponentLike } from '@glint/template';\nconst TABSTER_CONFIG = JSON.stringify({\n    mover: {\n        direction: Types.MoverDirections.Both,\n        cyclic: true\n    }\n});\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface ItemSignature<Value = any> {\n    /**\n   * The button element will have aria-pressed=\"true\" on it when the button is in the pressed state.\n   */ Element: HTMLButtonElement;\n    Args: {\n        /**\n     * When used in a group of Toggles, this option will be helpful to\n     * know which toggle was pressed if you're using the same @onChange\n     * handler for multiple toggles.\n     */ value?: Value;\n    };\n    Blocks: {\n        default: [/**\n       * the current pressed state of the toggle button\n       *\n       * Useful when using the toggle button as an uncontrolled component\n       */ pressed: boolean];\n    };\n}\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport type Item<Value = any> = ComponentLike<ItemSignature<Value>>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport class ToggleGroup<Value = any> extends Component<{\n    Element: HTMLDivElement;\n    Args: {\n        /**\n     * Optionally set the initial toggle state\n     */ value?: Value;\n        /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */ onChange: (value: Value | undefined) => void;\n    };\n    Blocks: {\n        default: [{\n                Item: Item;\n            }];\n    };\n}> {\n    @localCopy('args.value')\n    activePressed?: Value;\n    handleToggle = (value1: Value)=>{\n        if (this.activePressed === value1) {\n            this.activePressed = undefined;\n            return;\n        }\n        this.activePressed = value1;\n        this.args.onChange?.(this.activePressed);\n    };\n    isPressed = (value1: Value | undefined)=>value1 === this.activePressed;\n    static{\n        template(`\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  `, {\n            component: this,\n            eval () {\n                return eval(arguments[0]);\n            }\n        });\n    }\n}\n"],"names":["TABSTER_CONFIG","JSON","stringify","mover","direction","Types","MoverDirections","Both","cyclic","ToggleGroup","Component","g","this","prototype","localCopy","i","void 0","handleToggle","value1","activePressed","undefined","args","onChange","isPressed","setComponentTemplate","precompileTemplate","scope","hash","Toggle","strictMode"],"mappings":";;;;;;;;;AAWA,MAAMA,cAAc,GAAGC,IAAI,CAACC,SAAS,CAAC;AAClCC,EAAAA,KAAK,EAAE;AACHC,IAAAA,SAAS,EAAEC,KAAK,CAACC,eAAe,CAACC,IAAI;AACrCC,IAAAA,MAAM,EAAE,IAAA;AACZ,GAAA;AACJ,CAAC,CAAC,CAAA;AACF;;AAoBA;;AAEA;AACO,MAAMC,WAAW,SAAsBC,SAAS,CAoBpD;AAAA,EAAA;IAAAC,CAAA,CAAAC,IAAA,CAAAC,SAAA,oBACEC,SAAS,CAAC,YAAY,CAAC,CAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,cAAA,IAAAC,CAAA,CAAAH,IAAA,oBAAAI,KAAA,CAAA,EAAA;EAExBC,YAAY,GAAIC,MAAa,IAAG;AAC5B,IAAA,IAAI,IAAI,CAACC,aAAa,KAAKD,MAAM,EAAE;MAC/B,IAAI,CAACC,aAAa,GAAGC,SAAS,CAAA;AAC9B,MAAA,OAAA;AACJ,KAAA;IACA,IAAI,CAACD,aAAa,GAAGD,MAAM,CAAA;IAC3B,IAAI,CAACG,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACH,aAAa,CAAC,CAAA;GAC3C,CAAA;AACDI,EAAAA,SAAS,GAAIL,MAAyB,IAAGA,MAAM,KAAK,IAAI,CAACC,aAAa,CAAA;AACtE,EAAA;IACIK,oBAAA,CAAAC,kBAAA,CAIH,+KAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAA1B,cAAA;QAAA2B,IAAA;AAAAC,QAAAA,MAAAA;AAAA,OAAA,CAAA;MAAAC,UAAA,EAAA,IAAA;KAKI,CAAC,EAJa,IAAI,CAAA,CAAA;AAKvB,GAAA;AACJ;;;;"}
+{"version":3,"file":"toggle-group.js","sources":["../../src/components/toggle-group.gts"],"sourcesContent":["import { template } from \"@ember/template-compiler\";\nimport Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { Types } from 'tabster';\nimport { TrackedSet } from 'tracked-built-ins';\n// The consumer will need to provide types for tracked-toolbox.\n// Or.. better yet, we PR to trakcked-toolbox to provide them\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\nimport { localCopy } from 'tracked-toolbox';\nimport { Toggle } from './toggle.gts';\nimport type { ComponentLike } from '@glint/template';\nconst TABSTER_CONFIG = JSON.stringify({\n    mover: {\n        direction: Types.MoverDirections.Both,\n        cyclic: true\n    }\n});\nexport interface ItemSignature<Value = any> {\n    /**\n   * The button element will have aria-pressed=\"true\" on it when the button is in the pressed state.\n   */ Element: HTMLButtonElement;\n    Args: {\n        /**\n     * When used in a group of Toggles, this option will be helpful to\n     * know which toggle was pressed if you're using the same @onChange\n     * handler for multiple toggles.\n     */ value?: Value;\n    };\n    Blocks: {\n        default: [/**\n       * the current pressed state of the toggle button\n       *\n       * Useful when using the toggle button as an uncontrolled component\n       */ pressed: boolean];\n    };\n}\nexport type Item<Value = any> = ComponentLike<ItemSignature<Value>>;\nexport interface SingleSignature<Value> {\n    Element: HTMLDivElement;\n    Args: {\n        /**\n     * Optionally set the initial toggle state\n     */ value?: Value;\n        /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */ onChange?: (value: Value | undefined) => void;\n    };\n    Blocks: {\n        default: [{\n                /**\n         * The Toggle Switch\n         */ Item: Item;\n            }];\n    };\n}\nexport interface MultiSignature<Value = any> {\n    Element: HTMLDivElement;\n    Args: {\n        /**\n     * Optionally set the initial toggle state\n     */ value?: Value[] | Set<Value> | Value;\n        /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */ onChange?: (value: Set<Value>) => void;\n    };\n    Blocks: {\n        default: [{\n                /**\n         * The Toggle Switch\n         */ Item: Item;\n            }];\n    };\n}\ninterface PrivateSingleSignature<Value = any> {\n    Element: HTMLDivElement;\n    Args: {\n        type?: 'single';\n        /**\n     * Optionally set the initial toggle state\n     */ value?: Value;\n        /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */ onChange?: (value: Value | undefined) => void;\n    };\n    Blocks: {\n        default: [{\n                Item: Item;\n            }];\n    };\n}\ninterface PrivateMultiSignature<Value = any> {\n    Element: HTMLDivElement;\n    Args: {\n        type: 'multi';\n        /**\n     * Optionally set the initial toggle state\n     */ value?: Value[] | Set<Value> | Value;\n        /**\n     * Callback for when the toggle-group's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     *\n     * When none of the toggles are selected, undefined will be passed.\n     */ onChange?: (value: Set<Value>) => void;\n    };\n    Blocks: {\n        default: [{\n                Item: Item;\n            }];\n    };\n}\nfunction isMulti(x1: 'single' | 'multi' | undefined): x is 'multi' {\n    return x1 === 'multi';\n}\nexport class ToggleGroup<Value = any> extends Component<PrivateSingleSignature<Value> | PrivateMultiSignature<Value>> {\n    // See: https://github.com/typed-ember/glint/issues/715\n    static{\n        template(`\n    {{#if (isMulti this.args.type)}}\n      <MultiToggleGroup\n        @value={{this.args.value}}\n        @onChange={{this.args.onChange}}\n        ...attributes\n        as |x|\n      >\n        {{yield x}}\n      </MultiToggleGroup>\n    {{else}}\n      <SingleToggleGroup\n        @value={{this.args.value}}\n        @onChange={{this.args.onChange}}\n        ...attributes\n        as |x|\n      >\n        {{yield x}}\n      </SingleToggleGroup>\n    {{/if}}\n  `, {\n            component: this,\n            eval () {\n                return eval(arguments[0]);\n            }\n        });\n    }\n}\nlet SingleToggleGroup = class SingleToggleGroup<Value = any> extends Component<SingleSignature<Value>> {\n    @localCopy('args.value')\n    activePressed?: Value;\n    handleToggle = (value1: Value)=>{\n        if (this.activePressed === value1) {\n            this.activePressed = undefined;\n            return;\n        }\n        this.activePressed = value1;\n        this.args.onChange?.(this.activePressed);\n    };\n    isPressed = (value1: Value | undefined)=>value1 === this.activePressed;\n    static{\n        template(`\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  `, {\n            component: this,\n            eval () {\n                return eval(arguments[0]);\n            }\n        });\n    }\n};\nlet MultiToggleGroup = class MultiToggleGroup<Value = any> extends Component<MultiSignature<Value>> {\n    /**\n   * Normalizes @value to a Set\n   * and makes sure that even if the input Set is reactive,\n   * we don't mistakenly dirty it.\n   */ @cached\n    get activePressed(): TrackedSet<Value> {\n        let value1 = this.args.value;\n        if (!value1) {\n            return new TrackedSet();\n        }\n        if (Array.isArray(value1)) {\n            return new TrackedSet(value1);\n        }\n        if (value1 instanceof Set) {\n            return new TrackedSet(value1);\n        }\n        return new TrackedSet([\n            value1\n        ]);\n    }\n    handleToggle = (value1: Value)=>{\n        if (this.activePressed.has(value1)) {\n            this.activePressed.delete(value1);\n        } else {\n            this.activePressed.add(value1);\n        }\n        this.args.onChange?.(new Set<Value>(this.activePressed.values()));\n    };\n    isPressed = (value1: Value)=>this.activePressed.has(value1);\n    static{\n        template(`\n    <div data-tabster={{TABSTER_CONFIG}} ...attributes>\n      {{yield (hash Item=(component Toggle onChange=this.handleToggle isPressed=this.isPressed))}}\n    </div>\n  `, {\n            component: this,\n            eval () {\n                return eval(arguments[0]);\n            }\n        });\n    }\n};\n"],"names":["TABSTER_CONFIG","JSON","stringify","mover","direction","Types","MoverDirections","Both","cyclic","isMulti","x1","ToggleGroup","Component","setComponentTemplate","precompileTemplate","scope","MultiToggleGroup","SingleToggleGroup","strictMode","g","this","prototype","localCopy","i","void 0","handleToggle","value1","activePressed","undefined","args","onChange","isPressed","hash","Toggle","value","TrackedSet","Array","isArray","Set","n","cached","has","delete","add","values"],"mappings":";;;;;;;;;;;AAaA,MAAMA,cAAc,GAAGC,IAAI,CAACC,SAAS,CAAC;AAClCC,EAAAA,KAAK,EAAE;AACHC,IAAAA,SAAS,EAAEC,KAAK,CAACC,eAAe,CAACC,IAAI;AACrCC,IAAAA,MAAM,EAAE,IAAA;AACZ,GAAA;AACJ,CAAC,CAAC,CAAA;AA+GF,SAASC,OAAOA,CAACC,EAAkC,EAAgB;EAC/D,OAAOA,EAAE,KAAK,OAAO,CAAA;AACzB,CAAA;AACO,MAAMC,WAAW,SAAsBC,SAAS,CAA+D;AAClH;AACA,EAAA;IACIC,oBAAA,CAAAC,kBAAA,CAoBH,+XAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAN,OAAA;QAAAO,gBAAA;AAAAC,QAAAA,iBAAAA;AAAA,OAAA,CAAA;MAAAC,UAAA,EAAA,IAAA;KAKI,CAAC,EAJa,IAAI,CAAA,CAAA;AAKvB,GAAA;AACJ,CAAA;AACA,IAAID,iBAAiB,GAAG,MAAMA,iBAAiB,SAAsBL,SAAS,CAAyB;AAAA,EAAA;IAAAO,CAAA,CAAAC,IAAA,CAAAC,SAAA,oBAClGC,SAAS,CAAC,YAAY,CAAC,CAAA,CAAA,CAAA;AAAA,GAAA;AAAA,EAAA,cAAA,IAAAC,CAAA,CAAAH,IAAA,oBAAAI,KAAA,CAAA,EAAA;EAExBC,YAAY,GAAIC,MAAa,IAAG;AAC5B,IAAA,IAAI,IAAI,CAACC,aAAa,KAAKD,MAAM,EAAE;MAC/B,IAAI,CAACC,aAAa,GAAGC,SAAS,CAAA;AAC9B,MAAA,OAAA;AACJ,KAAA;IACA,IAAI,CAACD,aAAa,GAAGD,MAAM,CAAA;IAC3B,IAAI,CAACG,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACH,aAAa,CAAC,CAAA;GAC3C,CAAA;AACDI,EAAAA,SAAS,GAAIL,MAAyB,IAAGA,MAAM,KAAK,IAAI,CAACC,aAAa,CAAA;AACtE,EAAA;IACId,oBAAA,CAAAC,kBAAA,CAIH,+KAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAf,cAAA;QAAAgC,IAAA;AAAAC,QAAAA,MAAAA;AAAA,OAAA,CAAA;MAAAf,UAAA,EAAA,IAAA;KAKI,CAAC,EAJa,IAAI,CAAA,CAAA;AAKvB,GAAA;AACJ,CAAC,CAAA;AACD,IAAIF,gBAAgB,GAAG,MAAMA,gBAAgB,SAAsBJ,SAAS,CAAwB;AAChG;AACJ;AACA;AACA;AACA;EAAM,IACEe,aAAaA,GAAsB;AACnC,IAAA,IAAID,MAAM,GAAG,IAAI,CAACG,IAAI,CAACK,KAAK,CAAA;IAC5B,IAAI,CAACR,MAAM,EAAE;MACT,OAAO,IAAIS,UAAU,EAAE,CAAA;AAC3B,KAAA;AACA,IAAA,IAAIC,KAAK,CAACC,OAAO,CAACX,MAAM,CAAC,EAAE;AACvB,MAAA,OAAO,IAAIS,UAAU,CAACT,MAAM,CAAC,CAAA;AACjC,KAAA;IACA,IAAIA,MAAM,YAAYY,GAAG,EAAE;AACvB,MAAA,OAAO,IAAIH,UAAU,CAACT,MAAM,CAAC,CAAA;AACjC,KAAA;AACA,IAAA,OAAO,IAAIS,UAAU,CAAC,CAClBT,MAAM,CACT,CAAC,CAAA;AACN,GAAA;AAAC,EAAA;AAAAa,IAAAA,CAAA,CAAAnB,IAAA,CAAAC,SAAA,oBAfEmB,MAAM,CAAA,CAAA,CAAA;AAAA,GAAA;EAgBTf,YAAY,GAAIC,MAAa,IAAG;IAC5B,IAAI,IAAI,CAACC,aAAa,CAACc,GAAG,CAACf,MAAM,CAAC,EAAE;AAChC,MAAA,IAAI,CAACC,aAAa,CAACe,MAAM,CAAChB,MAAM,CAAC,CAAA;AACrC,KAAC,MAAM;AACH,MAAA,IAAI,CAACC,aAAa,CAACgB,GAAG,CAACjB,MAAM,CAAC,CAAA;AAClC,KAAA;AACA,IAAA,IAAI,CAACG,IAAI,CAACC,QAAQ,GAAG,IAAIQ,GAAG,CAAQ,IAAI,CAACX,aAAa,CAACiB,MAAM,EAAE,CAAC,CAAC,CAAA;GACpE,CAAA;EACDb,SAAS,GAAIL,MAAa,IAAG,IAAI,CAACC,aAAa,CAACc,GAAG,CAACf,MAAM,CAAC,CAAA;AAC3D,EAAA;IACIb,oBAAA,CAAAC,kBAAA,CAIH,+KAAA,EAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAf,cAAA;QAAAgC,IAAA;AAAAC,QAAAA,MAAAA;AAAA,OAAA,CAAA;MAAAf,UAAA,EAAA,IAAA;KAKI,CAAC,EAJa,IAAI,CAAA,CAAA;AAKvB,GAAA;AACJ,CAAC;;;;"}

package/dist/components/toggle.js

@@ -6,6 +6,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
+// import Component from '@glimmer/component';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isPressed(pressed1, value1, isPressed1) {
   if (!value1) return Boolean(pressed1);

package/dist/components/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../src/components/toggle.gts"],"sourcesContent":["import { template } from \"@ember/template-compiler\";\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { cell } from 'ember-resources';\nimport { toggleWithFallback } from './-private/utils.ts';\nimport type { TOC } from '@ember/component/template-only';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface Signature<Value = any> {\n    Element: HTMLButtonElement;\n    Args: {\n        /**\n     * The pressed-state of the toggle.\n     *\n     * Can be used to control the state of the component.\n     */ pressed?: boolean;\n        /**\n     * Callback for when the toggle's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     * if a `@value` is passed to this `<Toggle>`, that @value will\n     * be passed to the `@onChange` handler.\n     *\n     * This can be useful when using the same function for the `@onChange`\n     * handler with multiple `<Toggle>` components.\n     */ onChange?: (value?: Value | undefined) => void;\n        /**\n     * When used in a group of Toggles, this option will be helpful to\n     * know which toggle was pressed if you're using the same @onChange\n     * handler for multiple toggles.\n     */ value?: Value;\n        /**\n     * When controlling state in a wrapping component, this function can be used in conjunction with `@value` to determine if this `<Toggle>` should appear pressed.\n     */ isPressed?: (value?: Value | undefined) => boolean;\n    };\n    Blocks: {\n        default: [/**\n       * the current pressed state of the toggle button\n       *\n       * Useful when using the toggle button as an uncontrolled component\n       */ pressed: boolean];\n    };\n}\nfunction isPressed(pressed1?: boolean, value1?: unknown, isPressed1?: (value?: unknown) => boolean): boolean {\n    if (!value1) return Boolean(pressed1);\n    if (!isPressed1) return Boolean(pressed1);\n    return isPressed1(value1);\n}\nexport const Toggle: TOC<Signature> = template(`\n  {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}\n    <button\n      type=\"button\"\n      aria-pressed=\"{{pressed.current}}\"\n      {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange @value)}}\n      ...attributes\n    >\n      {{yield pressed.current}}\n    </button>\n  {{/let}}\n`, {\n    eval () {\n        return eval(arguments[0]);\n    }\n});\nexport default Toggle;\n"],"names":["isPressed","pressed1","value1","isPressed1","Boolean","Toggle","setComponentTemplate","precompileTemplate","scope","cell","on","fn","toggleWithFallback","strictMode","templateOnly"],"mappings":";;;;;;;;AAMA;AAqCA,SAASA,SAASA,CAACC,QAAkB,EAAEC,MAAgB,EAAEC,UAAyC,EAAW;AACzG,EAAA,IAAI,CAACD,MAAM,EAAE,OAAOE,OAAO,CAACH,QAAQ,CAAC,CAAA;AACrC,EAAA,IAAI,CAACE,UAAU,EAAE,OAAOC,OAAO,CAACH,QAAQ,CAAC,CAAA;EACzC,OAAOE,UAAU,CAACD,MAAM,CAAC,CAAA;AAC7B,CAAA;MACaG,MAAsB,GAAAC,oBAAA,CAAGC,kBAAA,CAWnC,iSAAA,EAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAT,SAAA;IAAAU,EAAA;IAAAC,EAAA;AAAAC,IAAAA,kBAAAA;AAAA,GAAA,CAAA;EAAAC,UAAA,EAAA,IAAA;AAIH,CAAC,CAAC,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"toggle.js","sources":["../../src/components/toggle.gts"],"sourcesContent":["// import Component from '@glimmer/component';\nimport { template } from \"@ember/template-compiler\";\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { cell } from 'ember-resources';\nimport { toggleWithFallback } from './-private/utils.ts';\nimport type { TOC } from '@ember/component/template-only';\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport interface Signature<Value = any> {\n    Element: HTMLButtonElement;\n    Args: {\n        /**\n     * The pressed-state of the toggle.\n     *\n     * Can be used to control the state of the component.\n     */ pressed?: boolean;\n        /**\n     * Callback for when the toggle's state is changed.\n     *\n     * Can be used to control the state of the component.\n     *\n     * if a `@value` is passed to this `<Toggle>`, that @value will\n     * be passed to the `@onChange` handler.\n     *\n     * This can be useful when using the same function for the `@onChange`\n     * handler with multiple `<Toggle>` components.\n     */ onChange?: (value: Value | undefined, pressed: boolean) => void;\n        /**\n     * When used in a group of Toggles, this option will be helpful to\n     * know which toggle was pressed if you're using the same @onChange\n     * handler for multiple toggles.\n     */ value?: Value;\n        /**\n     * When controlling state in a wrapping component, this function can be used in conjunction with `@value` to determine if this `<Toggle>` should appear pressed.\n     */ isPressed?: (value?: Value | undefined) => boolean;\n    };\n    Blocks: {\n        default: [/**\n       * the current pressed state of the toggle button\n       *\n       * Useful when using the toggle button as an uncontrolled component\n       */ pressed: boolean];\n    };\n}\nfunction isPressed(pressed1?: boolean, value1?: unknown, isPressed1?: (value?: unknown) => boolean): boolean {\n    if (!value1) return Boolean(pressed1);\n    if (!isPressed1) return Boolean(pressed1);\n    return isPressed1(value1);\n}\nexport const Toggle: TOC<Signature> = template(`\n  {{#let (cell (isPressed @pressed @value @isPressed)) as |pressed|}}\n    <button\n      type=\"button\"\n      aria-pressed=\"{{pressed.current}}\"\n      {{on \"click\" (fn toggleWithFallback pressed.toggle @onChange @value)}}\n      ...attributes\n    >\n      {{yield pressed.current}}\n    </button>\n  {{/let}}\n`, {\n    eval () {\n        return eval(arguments[0]);\n    }\n});\nexport default Toggle;\n"],"names":["isPressed","pressed1","value1","isPressed1","Boolean","Toggle","setComponentTemplate","precompileTemplate","scope","cell","on","fn","toggleWithFallback","strictMode","templateOnly"],"mappings":";;;;;;;;AAAA;AAOA;AAqCA,SAASA,SAASA,CAACC,QAAkB,EAAEC,MAAgB,EAAEC,UAAyC,EAAW;AACzG,EAAA,IAAI,CAACD,MAAM,EAAE,OAAOE,OAAO,CAACH,QAAQ,CAAC,CAAA;AACrC,EAAA,IAAI,CAACE,UAAU,EAAE,OAAOC,OAAO,CAACH,QAAQ,CAAC,CAAA;EACzC,OAAOE,UAAU,CAACD,MAAM,CAAC,CAAA;AAC7B,CAAA;MACaG,MAAsB,GAAAC,oBAAA,CAAGC,kBAAA,CAWnC,iSAAA,EAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,IAAA;IAAAT,SAAA;IAAAU,EAAA;IAAAC,EAAA;AAAAC,IAAAA,kBAAAA;AAAA,GAAA,CAAA;EAAAC,UAAA,EAAA,IAAA;AAIH,CAAC,CAAC,EAAAC,YAAA,EAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-primitives",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Making apps easier to build",
   "sideEffects": [
     "*.css"
@@ -26,6 +26,7 @@
     "ember-velcro": "^2.1.3",
     "reactiveweb": "^1.2.0",
     "tabster": "^7.0.1",
+    "tracked-built-ins": "^3.2.0",
     "tracked-toolbox": "^2.0.0"
   },
   "devDependencies": {