@hashicorp/design-system-components 4.2.0 → 4.4.0

package/dist/modifiers/hds-anchored-position.js

@@ -0,0 +1,175 @@
+import { modifier } from 'ember-modifier';
+import { assert } from '@ember/debug';
+import { autoUpdate, limitShift, offset, flip, shift, autoPlacement, arrow, computePosition } from '@floating-ui/dom';
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+const DEFAULT_PLACEMENT = 'bottom';
+const PLACEMENTS = ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'];
+
+// share the same default value of "padding" for `flip/shift/autoPlacement` options
+// this refers to the minimum distance from the boundaries' edges (the viewport)
+// before the floating element changes its position (flips, shifts, or autoplace itself)
+const DEFAULT_EDGE_DISTANCE = 8;
+
+// we use this function to process all the options provided to the modifier in a single place,
+// in relation to the Floating UI APIs, and keep the modifier code more clean/simple
+const getFloatingUIOptions = options => {
+  let {
+    placement = DEFAULT_PLACEMENT,
+    strategy = 'absolute',
+    // we don't need to use `fixed` if we use the Popover API for the "floating" element (it puts the element in the `top-layer`)
+    offsetOptions,
+    flipOptions = {
+      padding: DEFAULT_EDGE_DISTANCE
+    },
+    shiftOptions = {
+      padding: DEFAULT_EDGE_DISTANCE,
+      limiter: limitShift()
+    },
+    autoPlacementOptions = {
+      padding: DEFAULT_EDGE_DISTANCE
+    },
+    middlewareExtra = [],
+    enableCollisionDetection,
+    arrowElement,
+    arrowPadding
+  } = options;
+
+  // we build dynamically the list of middleware functions to invoke, depending on the options provided
+
+  const middleware = [];
+
+  // https://floating-ui.com/docs/offset
+  middleware.push(offset(offsetOptions));
+
+  // https://floating-ui.com/docs/flip
+  // https://floating-ui.com/docs/shift
+  // https://floating-ui.com/docs/autoPlacement
+  if (enableCollisionDetection === true || enableCollisionDetection === 'flip') {
+    middleware.push(flip(flipOptions));
+  }
+  if (enableCollisionDetection === true || enableCollisionDetection === 'shift') {
+    middleware.push(shift(shiftOptions));
+  }
+  if (enableCollisionDetection === 'auto') {
+    middleware.push(autoPlacement(autoPlacementOptions));
+  }
+
+  // https://floating-ui.com/docs/arrow
+  if (arrowElement) {
+    middleware.push(arrow({
+      element: arrowElement,
+      padding: arrowPadding ?? 0
+    }));
+  }
+
+  // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)
+  // https://floating-ui.com/docs/size#match-reference-width
+  // size({
+  //   apply({ rects, elements }) {
+  //     Object.assign(elements.floating.style, {
+  //       width: `${rects.reference.width}px`,
+  //     });
+  //   },
+  // });
+  // size({
+  //   apply: ({ availableWidth, availableHeight, middlewareData }) => {
+  //     middlewareData.size = { availableWidth, availableHeight };
+  //   },
+  // }),
+
+  middleware.push(...middlewareExtra);
+  return {
+    placement,
+    strategy,
+    middleware
+  };
+};
+
+// Notice: we use a function-based modifier here instead of a class-based one
+// because it's quite simple in its logic, and doesn't require injecting services
+// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
+
+var anchoredPositionModifier = modifier((element, positional, named = {}) => {
+  // the element that "floats" next to the "anchor" (whose position is calculated in relation to the anchor)
+  // notice: this is the element the Ember modifier is attached to
+  const floatingElement = element;
+
+  // the element that acts as an "anchor" for the "floating" element
+  // it can be a DOM (string) selector or a DOM element
+  // notice: it's expressed as "positional" argument (array of arguments) for the modifier
+  const _anchorTarget = positional[0];
+  const anchorElement = typeof _anchorTarget === 'string' ? document.querySelector(_anchorTarget) : _anchorTarget;
+  assert('`hds-anchored-position` modifier - the provided "anchoring" element is not defined correctly', anchorElement instanceof HTMLElement || anchorElement instanceof SVGElement);
+
+  // the "arrow" element (optional) associated with the "floating" element
+  // it can be a DOM selector (string) or a DOM element
+  // notice: it's declared inside the "named" argument (object) for the modifier
+  // but we need to extract it also here so it can be used to assign inline styles to it
+  let arrowElement;
+  if (named.arrowElement) {
+    assert('`hds-anchored-position` modifier - the `element` provided for the "arrow" element is not a valid DOM node', named.arrowElement instanceof HTMLElement || named.arrowElement instanceof SVGElement);
+    arrowElement = named.arrowElement;
+  } else if (named.arrowSelector) {
+    assert('`hds-anchored-position` modifier - the `selector` provided for the "arrow" element must be a string', typeof named.arrowSelector === 'string');
+    arrowElement = document.querySelector(named.arrowSelector);
+    assert('`hds-anchored-position` modifier - the `selector` provided for the "arrow" element is not a valid DOM selector', arrowElement);
+  }
+
+  // the Floating UI "options" to apply to the "floating" element
+  // notice: we spread the `named` argument and override its `arrowElement` value instead of setting it directly because Ember complains that modifier's arguments must be immutable
+  const floatingOptions = getFloatingUIOptions({
+    ...named,
+    arrowElement
+  });
+  const computeFloatingPosition = async () => {
+    // important to know: `computePosition()` is not stateful, it only positions the "floating" element once
+    // see: https://floating-ui.com/docs/computePosition
+    const state = await computePosition(anchorElement, floatingElement, floatingOptions);
+    let {
+      x,
+      y,
+      placement,
+      strategy,
+      middlewareData
+    } = state;
+    Object.assign(floatingElement.style, {
+      position: strategy,
+      top: `${y}px`,
+      left: `${x}px`
+      // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)
+      // maxHeight: `${middlewareData.size.availableHeight - 10}px`,
+    });
+    if (arrowElement && middlewareData.arrow) {
+      // we assign a "data" attribute to the "arrow" element so we can use CSS (in the consuming components) to position/rotate it accordingly and we avoid calculating at runtime values that technically we already know
+      // (similar to what Tippy.js does: https://github.com/atomiks/tippyjs/blob/master/src/scss/svg-arrow.scss)
+      // IMPORTANT: floating-ui assumes the "arrow" container is square!
+      arrowElement.setAttribute('data-hds-anchored-arrow-placement', placement);
+
+      // we set `x` or `y` value (depends on the position of the arrow in relation to the "floating" element placement)
+      // see: https://floating-ui.com/docs/arrow#usage
+      Object.assign(arrowElement.style, {
+        left: middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : '',
+        top: middlewareData.arrow.y != null ? `${middlewareData.arrow.y}px` : ''
+      });
+    }
+  };
+
+  // the `autoUpdate` function automatically updates the position of the floating element when necessary.
+  // it should only be called when the floating element is mounted on the DOM or visible on the screen.
+  // it returns a "cleanup" function that should be invoked when the floating element is removed from the DOM or hidden from the screen.
+  // see: https://floating-ui.com/docs/autoUpdate
+  const cleanupFloatingUI = autoUpdate(anchorElement, floatingElement, computeFloatingPosition);
+
+  // this (teardown) function is run when the element is removed from the DOM
+  return () => {
+    cleanupFloatingUI();
+  };
+});
+
+export { DEFAULT_PLACEMENT, PLACEMENTS, anchoredPositionModifier as default, getFloatingUIOptions };
+//# sourceMappingURL=hds-anchored-position.js.map

package/dist/modifiers/hds-anchored-position.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-anchored-position.js","sources":["../../src/modifiers/hds-anchored-position.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { modifier } from 'ember-modifier';\nimport { assert } from '@ember/debug';\n\nimport {\n  autoUpdate,\n  computePosition,\n  offset,\n  flip,\n  shift,\n  limitShift,\n  autoPlacement,\n  arrow,\n  // ---\n  // this could be used in the future if we want to give consumers an option to hide the \"floating\" element when the \"anchor\" hides from the viewport\n  // see: https://floating-ui.com/docs/hide\n  // hide,\n  // ---\n  // this could be used in the future if we want to give consumers an option to:\n  // - let the \"floating\" element auto-resize when there is not enough space (usually vertical) in the viewport to contain the entire \"floating\" element\n  // - let the \"floating\" element match the width of the \"trigger\" (it may have min/max width/heigh via CSS too)\n  // see: https://floating-ui.com/docs/size\n  // notice: below you can find a preliminary code implementation that was tested and worked relatively well\n  // size,\n  // ---\n} from '@floating-ui/dom';\n\nexport const DEFAULT_PLACEMENT = 'bottom';\nexport const PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'right',\n  'right-start',\n  'right-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n];\n\n// share the same default value of \"padding\" for `flip/shift/autoPlacement` options\n// this refers to the minimum distance from the boundaries' edges (the viewport)\n// before the floating element changes its position (flips, shifts, or autoplace itself)\nconst DEFAULT_EDGE_DISTANCE = 8;\n\n// we use this function to process all the options provided to the modifier in a single place,\n// in relation to the Floating UI APIs, and keep the modifier code more clean/simple\nexport const getFloatingUIOptions = (options) => {\n  let {\n    placement = DEFAULT_PLACEMENT,\n    strategy = 'absolute', // we don't need to use `fixed` if we use the Popover API for the \"floating\" element (it puts the element in the `top-layer`)\n    offsetOptions,\n    flipOptions = { padding: DEFAULT_EDGE_DISTANCE },\n    shiftOptions = { padding: DEFAULT_EDGE_DISTANCE, limiter: limitShift() },\n    autoPlacementOptions = { padding: DEFAULT_EDGE_DISTANCE },\n    middlewareExtra = [],\n    enableCollisionDetection,\n    arrowElement,\n    arrowPadding,\n  } = options;\n\n  // we build dynamically the list of middleware functions to invoke, depending on the options provided\n\n  const middleware = [];\n\n  // https://floating-ui.com/docs/offset\n  middleware.push(offset(offsetOptions));\n\n  // https://floating-ui.com/docs/flip\n  // https://floating-ui.com/docs/shift\n  // https://floating-ui.com/docs/autoPlacement\n  if (\n    enableCollisionDetection === true ||\n    enableCollisionDetection === 'flip'\n  ) {\n    middleware.push(flip(flipOptions));\n  }\n  if (\n    enableCollisionDetection === true ||\n    enableCollisionDetection === 'shift'\n  ) {\n    middleware.push(shift(shiftOptions));\n  }\n  if (enableCollisionDetection === 'auto') {\n    middleware.push(autoPlacement(autoPlacementOptions));\n  }\n\n  // https://floating-ui.com/docs/arrow\n  if (arrowElement) {\n    middleware.push(\n      arrow({\n        element: arrowElement,\n        padding: arrowPadding ?? 0,\n      })\n    );\n  }\n\n  // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)\n  // https://floating-ui.com/docs/size#match-reference-width\n  // size({\n  //   apply({ rects, elements }) {\n  //     Object.assign(elements.floating.style, {\n  //       width: `${rects.reference.width}px`,\n  //     });\n  //   },\n  // });\n  // size({\n  //   apply: ({ availableWidth, availableHeight, middlewareData }) => {\n  //     middlewareData.size = { availableWidth, availableHeight };\n  //   },\n  // }),\n\n  middleware.push(...middlewareExtra);\n\n  return {\n    placement,\n    strategy,\n    middleware,\n  };\n};\n\n// Notice: we use a function-based modifier here instead of a class-based one\n// because it's quite simple in its logic, and doesn't require injecting services\n// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers\n\nexport default modifier((element, positional, named = {}) => {\n  // the element that \"floats\" next to the \"anchor\" (whose position is calculated in relation to the anchor)\n  // notice: this is the element the Ember modifier is attached to\n  const floatingElement = element;\n\n  // the element that acts as an \"anchor\" for the \"floating\" element\n  // it can be a DOM (string) selector or a DOM element\n  // notice: it's expressed as \"positional\" argument (array of arguments) for the modifier\n  const _anchorTarget = positional[0];\n  const anchorElement =\n    typeof _anchorTarget === 'string'\n      ? document.querySelector(_anchorTarget)\n      : _anchorTarget;\n\n  assert(\n    '`hds-anchored-position` modifier - the provided \"anchoring\" element is not defined correctly',\n    anchorElement instanceof HTMLElement || anchorElement instanceof SVGElement\n  );\n\n  // the \"arrow\" element (optional) associated with the \"floating\" element\n  // it can be a DOM selector (string) or a DOM element\n  // notice: it's declared inside the \"named\" argument (object) for the modifier\n  // but we need to extract it also here so it can be used to assign inline styles to it\n  let arrowElement;\n  if (named.arrowElement) {\n    assert(\n      '`hds-anchored-position` modifier - the `element` provided for the \"arrow\" element is not a valid DOM node',\n      named.arrowElement instanceof HTMLElement ||\n        named.arrowElement instanceof SVGElement\n    );\n\n    arrowElement = named.arrowElement;\n  } else if (named.arrowSelector) {\n    assert(\n      '`hds-anchored-position` modifier - the `selector` provided for the \"arrow\" element must be a string',\n      typeof named.arrowSelector === 'string'\n    );\n\n    arrowElement = document.querySelector(named.arrowSelector);\n\n    assert(\n      '`hds-anchored-position` modifier - the `selector` provided for the \"arrow\" element is not a valid DOM selector',\n      arrowElement\n    );\n  }\n\n  // the Floating UI \"options\" to apply to the \"floating\" element\n  // notice: we spread the `named` argument and override its `arrowElement` value instead of setting it directly because Ember complains that modifier's arguments must be immutable\n  const floatingOptions = getFloatingUIOptions({ ...named, arrowElement });\n\n  const computeFloatingPosition = async () => {\n    // important to know: `computePosition()` is not stateful, it only positions the \"floating\" element once\n    // see: https://floating-ui.com/docs/computePosition\n    const state = await computePosition(\n      anchorElement,\n      floatingElement,\n      floatingOptions\n    );\n\n    let { x, y, placement, strategy, middlewareData } = state;\n\n    Object.assign(floatingElement.style, {\n      position: strategy,\n      top: `${y}px`,\n      left: `${x}px`,\n      // TODO? commenting this for now, will need to make this conditional to some argument (and understand how this relates to the `@height` argument)\n      // maxHeight: `${middlewareData.size.availableHeight - 10}px`,\n    });\n\n    if (arrowElement && middlewareData.arrow) {\n      // we assign a \"data\" attribute to the \"arrow\" element so we can use CSS (in the consuming components) to position/rotate it accordingly and we avoid calculating at runtime values that technically we already know\n      // (similar to what Tippy.js does: https://github.com/atomiks/tippyjs/blob/master/src/scss/svg-arrow.scss)\n      // IMPORTANT: floating-ui assumes the \"arrow\" container is square!\n      arrowElement.setAttribute('data-hds-anchored-arrow-placement', placement);\n\n      // we set `x` or `y` value (depends on the position of the arrow in relation to the \"floating\" element placement)\n      // see: https://floating-ui.com/docs/arrow#usage\n      Object.assign(arrowElement.style, {\n        left:\n          middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : '',\n        top:\n          middlewareData.arrow.y != null ? `${middlewareData.arrow.y}px` : '',\n      });\n    }\n  };\n\n  // the `autoUpdate` function automatically updates the position of the floating element when necessary.\n  // it should only be called when the floating element is mounted on the DOM or visible on the screen.\n  // it returns a \"cleanup\" function that should be invoked when the floating element is removed from the DOM or hidden from the screen.\n  // see: https://floating-ui.com/docs/autoUpdate\n  const cleanupFloatingUI = autoUpdate(\n    anchorElement,\n    floatingElement,\n    computeFloatingPosition\n  );\n\n  // this (teardown) function is run when the element is removed from the DOM\n  return () => {\n    cleanupFloatingUI();\n  };\n});\n"],"names":["DEFAULT_PLACEMENT","PLACEMENTS","DEFAULT_EDGE_DISTANCE","getFloatingUIOptions","options","placement","strategy","offsetOptions","flipOptions","padding","shiftOptions","limiter","limitShift","autoPlacementOptions","middlewareExtra","enableCollisionDetection","arrowElement","arrowPadding","middleware","push","offset","flip","shift","autoPlacement","arrow","element","modifier","positional","named","floatingElement","_anchorTarget","anchorElement","document","querySelector","assert","HTMLElement","SVGElement","arrowSelector","floatingOptions","computeFloatingPosition","state","computePosition","x","y","middlewareData","Object","assign","style","position","top","left","setAttribute","cleanupFloatingUI","autoUpdate"],"mappings":"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"}

package/dist/modifiers/hds-clipboard.js

@@ -7,7 +7,7 @@ import { assert, warn } from '@ember/debug';
  */
 
 const getTextToCopy = text => {
-  let textToCopy;
+  let textToCopy = '';
   if (text) {
     if (typeof text === 'string') {
       textToCopy = text;
@@ -29,7 +29,7 @@ const getTargetElement = target => {
       console.error('`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string', targetElement);
       return;
     }
-  } else if (target instanceof Node && target.nodeType === Node.ELEMENT_NODE) {
+  } else if (target instanceof HTMLElement) {
     targetElement = target;
   } else {
     if (target instanceof NodeList) {
@@ -41,8 +41,8 @@ const getTargetElement = target => {
   return targetElement;
 };
 const getTextToCopyFromTargetElement = targetElement => {
-  let textToCopy;
-  if (targetElement instanceof Node && targetElement.nodeType === Node.ELEMENT_NODE) {
+  let textToCopy = '';
+  if (targetElement instanceof HTMLElement) {
     if (targetElement instanceof HTMLInputElement ||
     // targetElement.nodeName === 'INPUT' ||
     targetElement instanceof HTMLTextAreaElement ||
@@ -90,12 +90,14 @@ const writeTextToClipboard = async textToCopy => {
   }
 };
 const copyToClipboard = async (text, target) => {
-  let textToCopy;
+  let textToCopy = '';
   if (text) {
     textToCopy = getTextToCopy(text);
   } else if (target) {
     const targetElement = getTargetElement(target);
-    textToCopy = getTextToCopyFromTargetElement(targetElement);
+    if (targetElement) {
+      textToCopy = getTextToCopyFromTargetElement(targetElement);
+    }
   } else {
     assert('`hds-clipboard` modifier - either a `text` or a `target` argument is required');
   }
@@ -107,7 +109,7 @@ const copyToClipboard = async (text, target) => {
 // because it's quite simple in its logic, and doesn't require injecting services
 // see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
 
-var hdsClipboard = modifier((element, positional, named) => {
+var hdsClipboard = modifier((element, _positional, named) => {
   assert('`hds-clipboard` modifier - the modifier must be applied to an element', element);
   const {
     text,

package/dist/modifiers/hds-clipboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"hds-clipboard.js","sources":["../../src/modifiers/hds-clipboard.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { modifier } from 'ember-modifier';\nimport { assert, warn } from '@ember/debug';\n\nexport const getTextToCopy = (text) => {\n  let textToCopy;\n\n  if (text) {\n    if (typeof text === 'string') {\n      textToCopy = text;\n    } else if (\n      // context: https://github.com/hashicorp/design-system/pull/1564\n      typeof text === 'number' ||\n      typeof text === 'bigint'\n    ) {\n      textToCopy = text.toString();\n    } else {\n      assert(\n        `\\`hds-clipboard\\` modifier - \\`text\\` argument must be a string - provided: ${typeof text}`\n      );\n    }\n  }\n  return textToCopy;\n};\n\nexport const getTargetElement = (target) => {\n  let targetElement;\n  if (typeof target === 'string') {\n    targetElement = document.querySelector(target);\n\n    if (!targetElement) {\n      console.error(\n        '`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string',\n        targetElement\n      );\n      return;\n    }\n  } else if (target instanceof Node && target.nodeType === Node.ELEMENT_NODE) {\n    targetElement = target;\n  } else {\n    if (target instanceof NodeList) {\n      assert(\n        '`hds-clipboard` modifier - `target` argument must be a string or a DOM node - provided: a list of DOM nodes'\n      );\n    } else {\n      assert(\n        `\\`hds-clipboard\\` modifier - \\`target\\` argument must be a string or a DOM node - provided: ${typeof target}`\n      );\n    }\n  }\n  return targetElement;\n};\n\nexport const getTextToCopyFromTargetElement = (targetElement) => {\n  let textToCopy;\n  if (\n    targetElement instanceof Node &&\n    targetElement.nodeType === Node.ELEMENT_NODE\n  ) {\n    if (\n      targetElement instanceof HTMLInputElement || // targetElement.nodeName === 'INPUT' ||\n      targetElement instanceof HTMLTextAreaElement || // targetElement.nodeName === 'TEXTAREA' ||\n      targetElement instanceof HTMLSelectElement // targetElement.nodeName === 'SELECT'\n    ) {\n      textToCopy = targetElement.value;\n    } else {\n      // simplest approach\n      textToCopy = targetElement.innerText;\n\n      // approach based on text selection (left for backup just in case)\n      // var selection = window.getSelection();\n      // var range = document.createRange();\n      // selection.removeAllRanges();\n      // range.selectNodeContents(targetElement);\n      // selection.addRange(range);\n      // textToCopy = selection.toString();\n      // selection.removeAllRanges();\n    }\n  }\n  return textToCopy;\n};\n\nexport const writeTextToClipboard = async (textToCopy) => {\n  // finally copy the text to the clipboard using the Clipboard API\n  // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\n  if (textToCopy) {\n    try {\n      // notice: the \"clipboard-write\" permission is granted automatically to pages when they are in the active tab\n      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write\n      await navigator.clipboard.writeText(textToCopy);\n      // DEBUG uncomment this for easy debugging\n      // console.log('success', textToCopy);\n      return true;\n    } catch (error) {\n      // clipboard write failed\n      // this probably never happens (see comment above) or happens only for very old browsers that don't for which `navigator.clipboard` is undefined\n      warn('copy action failed, please check your browser‘s permissions', {\n        id: 'hds-clipboard.write-text-to-clipboard.catch-error',\n      });\n      return false;\n    }\n  } else {\n    return false;\n  }\n};\n\nexport const copyToClipboard = async (text, target) => {\n  let textToCopy;\n\n  if (text) {\n    textToCopy = getTextToCopy(text);\n  } else if (target) {\n    const targetElement = getTargetElement(target);\n    textToCopy = getTextToCopyFromTargetElement(targetElement);\n  } else {\n    assert(\n      '`hds-clipboard` modifier - either a `text` or a `target` argument is required'\n    );\n  }\n  const success = await writeTextToClipboard(textToCopy);\n  return success;\n};\n\n// Notice: we use a function-based modifier here instead of a class-based one\n// because it's quite simple in its logic, and doesn't require injecting services\n// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers\n\nexport default modifier((element, positional, named) => {\n  assert(\n    '`hds-clipboard` modifier - the modifier must be applied to an element',\n    element\n  );\n\n  const { text, target, onSuccess, onError } = named;\n\n  const onClick = async (event) => {\n    const trigger = event.currentTarget;\n    const success = await copyToClipboard(text, target);\n\n    // fire the `onSuccess/onError` callbacks (if provided)\n    if (success) {\n      if (typeof onSuccess === 'function') {\n        onSuccess({ trigger, text, target });\n      }\n    } else {\n      if (typeof onError === 'function') {\n        onError({ trigger, text, target });\n      }\n    }\n  };\n\n  // add the \"onClick\" event listener to the element\n  element.addEventListener('click', onClick);\n\n  // this (teardown) function is run when the element is removed\n  return () => {\n    element.removeEventListener('click', onClick);\n  };\n});\n"],"names":["getTextToCopy","text","textToCopy","toString","assert","getTargetElement","target","targetElement","document","querySelector","console","error","Node","nodeType","ELEMENT_NODE","NodeList","getTextToCopyFromTargetElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","value","innerText","writeTextToClipboard","navigator","clipboard","writeText","warn","id","copyToClipboard","success","modifier","element","positional","named","onSuccess","onError","onClick","event","trigger","currentTarget","addEventListener","removeEventListener"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAKaA,MAAAA,aAAa,GAAIC,IAAI,IAAK;AACrC,EAAA,IAAIC,UAAU,CAAA;AAEd,EAAA,IAAID,IAAI,EAAE;AACR,IAAA,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;AAC5BC,MAAAA,UAAU,GAAGD,IAAI,CAAA;AACnB,KAAC,MAAM;AACL;IACA,OAAOA,IAAI,KAAK,QAAQ,IACxB,OAAOA,IAAI,KAAK,QAAQ,EACxB;AACAC,MAAAA,UAAU,GAAGD,IAAI,CAACE,QAAQ,EAAE,CAAA;AAC9B,KAAC,MAAM;AACLC,MAAAA,MAAM,CACH,CAAA,4EAAA,EAA8E,OAAOH,IAAK,EAC7F,CAAC,CAAA;AACH,KAAA;AACF,GAAA;AACA,EAAA,OAAOC,UAAU,CAAA;AACnB,EAAC;AAEYG,MAAAA,gBAAgB,GAAIC,MAAM,IAAK;AAC1C,EAAA,IAAIC,aAAa,CAAA;AACjB,EAAA,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;AAC9BC,IAAAA,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAACH,MAAM,CAAC,CAAA;IAE9C,IAAI,CAACC,aAAa,EAAE;AAClBG,MAAAA,OAAO,CAACC,KAAK,CACX,0HAA0H,EAC1HJ,aACF,CAAC,CAAA;AACD,MAAA,OAAA;AACF,KAAA;AACF,GAAC,MAAM,IAAID,MAAM,YAAYM,IAAI,IAAIN,MAAM,CAACO,QAAQ,KAAKD,IAAI,CAACE,YAAY,EAAE;AAC1EP,IAAAA,aAAa,GAAGD,MAAM,CAAA;AACxB,GAAC,MAAM;IACL,IAAIA,MAAM,YAAYS,QAAQ,EAAE;MAC9BX,MAAM,CACJ,6GACF,CAAC,CAAA;AACH,KAAC,MAAM;AACLA,MAAAA,MAAM,CACH,CAAA,4FAAA,EAA8F,OAAOE,MAAO,EAC/G,CAAC,CAAA;AACH,KAAA;AACF,GAAA;AACA,EAAA,OAAOC,aAAa,CAAA;AACtB,EAAC;AAEYS,MAAAA,8BAA8B,GAAIT,aAAa,IAAK;AAC/D,EAAA,IAAIL,UAAU,CAAA;EACd,IACEK,aAAa,YAAYK,IAAI,IAC7BL,aAAa,CAACM,QAAQ,KAAKD,IAAI,CAACE,YAAY,EAC5C;IACA,IACEP,aAAa,YAAYU,gBAAgB;AAAI;AAC7CV,IAAAA,aAAa,YAAYW,mBAAmB;AAAI;IAChDX,aAAa,YAAYY,iBAAiB;MAC1C;MACAjB,UAAU,GAAGK,aAAa,CAACa,KAAK,CAAA;AAClC,KAAC,MAAM;AACL;MACAlB,UAAU,GAAGK,aAAa,CAACc,SAAS,CAAA;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,KAAA;AACF,GAAA;AACA,EAAA,OAAOnB,UAAU,CAAA;AACnB,EAAC;AAEYoB,MAAAA,oBAAoB,GAAG,MAAOpB,UAAU,IAAK;AACxD;AACA;AACA,EAAA,IAAIA,UAAU,EAAE;IACd,IAAI;AACF;AACA;AACA,MAAA,MAAMqB,SAAS,CAACC,SAAS,CAACC,SAAS,CAACvB,UAAU,CAAC,CAAA;AAC/C;AACA;AACA,MAAA,OAAO,IAAI,CAAA;KACZ,CAAC,OAAOS,KAAK,EAAE;AACd;AACA;MACAe,IAAI,CAAC,6DAA6D,EAAE;AAClEC,QAAAA,EAAE,EAAE,mDAAA;AACN,OAAC,CAAC,CAAA;AACF,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AACF,GAAC,MAAM;AACL,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACF,EAAC;AAEM,MAAMC,eAAe,GAAG,OAAO3B,IAAI,EAAEK,MAAM,KAAK;AACrD,EAAA,IAAIJ,UAAU,CAAA;AAEd,EAAA,IAAID,IAAI,EAAE;AACRC,IAAAA,UAAU,GAAGF,aAAa,CAACC,IAAI,CAAC,CAAA;GACjC,MAAM,IAAIK,MAAM,EAAE;AACjB,IAAA,MAAMC,aAAa,GAAGF,gBAAgB,CAACC,MAAM,CAAC,CAAA;AAC9CJ,IAAAA,UAAU,GAAGc,8BAA8B,CAACT,aAAa,CAAC,CAAA;AAC5D,GAAC,MAAM;IACLH,MAAM,CACJ,+EACF,CAAC,CAAA;AACH,GAAA;AACA,EAAA,MAAMyB,OAAO,GAAG,MAAMP,oBAAoB,CAACpB,UAAU,CAAC,CAAA;AACtD,EAAA,OAAO2B,OAAO,CAAA;AAChB,EAAC;;AAED;AACA;AACA;;AAEA,mBAAeC,QAAQ,CAAC,CAACC,OAAO,EAAEC,UAAU,EAAEC,KAAK,KAAK;AACtD7B,EAAAA,MAAM,CACJ,uEAAuE,EACvE2B,OACF,CAAC,CAAA;EAED,MAAM;IAAE9B,IAAI;IAAEK,MAAM;IAAE4B,SAAS;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGF,KAAK,CAAA;AAElD,EAAA,MAAMG,OAAO,GAAG,MAAOC,KAAK,IAAK;AAC/B,IAAA,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAa,CAAA;IACnC,MAAMV,OAAO,GAAG,MAAMD,eAAe,CAAC3B,IAAI,EAAEK,MAAM,CAAC,CAAA;;AAEnD;AACA,IAAA,IAAIuB,OAAO,EAAE;AACX,MAAA,IAAI,OAAOK,SAAS,KAAK,UAAU,EAAE;AACnCA,QAAAA,SAAS,CAAC;UAAEI,OAAO;UAAErC,IAAI;AAAEK,UAAAA,MAAAA;AAAO,SAAC,CAAC,CAAA;AACtC,OAAA;AACF,KAAC,MAAM;AACL,MAAA,IAAI,OAAO6B,OAAO,KAAK,UAAU,EAAE;AACjCA,QAAAA,OAAO,CAAC;UAAEG,OAAO;UAAErC,IAAI;AAAEK,UAAAA,MAAAA;AAAO,SAAC,CAAC,CAAA;AACpC,OAAA;AACF,KAAA;GACD,CAAA;;AAED;AACAyB,EAAAA,OAAO,CAACS,gBAAgB,CAAC,OAAO,EAAEJ,OAAO,CAAC,CAAA;;AAE1C;AACA,EAAA,OAAO,MAAM;AACXL,IAAAA,OAAO,CAACU,mBAAmB,CAAC,OAAO,EAAEL,OAAO,CAAC,CAAA;GAC9C,CAAA;AACH,CAAC,CAAC;;;;"}
+{"version":3,"file":"hds-clipboard.js","sources":["../../src/modifiers/hds-clipboard.ts"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { modifier } from 'ember-modifier';\nimport { assert, warn } from '@ember/debug';\n\ntype TextToCopy = string | number | bigint;\ntype TargetToCopy = HTMLElement;\n\nexport interface HdsClipboardModifierSignature {\n  Element: HTMLElement;\n  Args: {\n    Named: {\n      text?: TextToCopy;\n      target?: TargetToCopy;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      onSuccess?: (...args: any[]) => void;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      onError?: (...args: any[]) => void;\n    };\n  };\n}\n\nexport const getTextToCopy = (text: TextToCopy) => {\n  let textToCopy: string = '';\n\n  if (text) {\n    if (typeof text === 'string') {\n      textToCopy = text;\n    } else if (\n      // context: https://github.com/hashicorp/design-system/pull/1564\n      typeof text === 'number' ||\n      typeof text === 'bigint'\n    ) {\n      textToCopy = text.toString();\n    } else {\n      assert(\n        `\\`hds-clipboard\\` modifier - \\`text\\` argument must be a string - provided: ${typeof text}`\n      );\n    }\n  }\n  return textToCopy;\n};\n\nexport const getTargetElement = (target: string | Node) => {\n  let targetElement: HTMLElement | null;\n\n  if (typeof target === 'string') {\n    targetElement = document.querySelector(target);\n\n    if (!targetElement) {\n      console.error(\n        '`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string',\n        targetElement\n      );\n      return;\n    }\n  } else if (target instanceof HTMLElement) {\n    targetElement = target;\n  } else {\n    if (target instanceof NodeList) {\n      assert(\n        '`hds-clipboard` modifier - `target` argument must be a string or a DOM node - provided: a list of DOM nodes'\n      );\n    } else {\n      assert(\n        `\\`hds-clipboard\\` modifier - \\`target\\` argument must be a string or a DOM node - provided: ${typeof target}`\n      );\n    }\n  }\n  return targetElement;\n};\n\nexport const getTextToCopyFromTargetElement = (targetElement: TargetToCopy) => {\n  let textToCopy: string = '';\n\n  if (targetElement instanceof HTMLElement) {\n    if (\n      targetElement instanceof HTMLInputElement || // targetElement.nodeName === 'INPUT' ||\n      targetElement instanceof HTMLTextAreaElement || // targetElement.nodeName === 'TEXTAREA' ||\n      targetElement instanceof HTMLSelectElement // targetElement.nodeName === 'SELECT'\n    ) {\n      textToCopy = targetElement.value;\n    } else {\n      // simplest approach\n      textToCopy = targetElement.innerText;\n\n      // approach based on text selection (left for backup just in case)\n      // var selection = window.getSelection();\n      // var range = document.createRange();\n      // selection.removeAllRanges();\n      // range.selectNodeContents(targetElement);\n      // selection.addRange(range);\n      // textToCopy = selection.toString();\n      // selection.removeAllRanges();\n    }\n  }\n  return textToCopy;\n};\n\nexport const writeTextToClipboard = async (textToCopy: string) => {\n  // finally copy the text to the clipboard using the Clipboard API\n  // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API\n  if (textToCopy) {\n    try {\n      // notice: the \"clipboard-write\" permission is granted automatically to pages when they are in the active tab\n      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write\n      await navigator.clipboard.writeText(textToCopy);\n      // DEBUG uncomment this for easy debugging\n      // console.log('success', textToCopy);\n      return true;\n    } catch (error) {\n      // clipboard write failed\n      // this probably never happens (see comment above) or happens only for very old browsers that don't for which `navigator.clipboard` is undefined\n      warn('copy action failed, please check your browser‘s permissions', {\n        id: 'hds-clipboard.write-text-to-clipboard.catch-error',\n      });\n      return false;\n    }\n  } else {\n    return false;\n  }\n};\n\nexport const copyToClipboard = async (\n  text?: TextToCopy,\n  target?: TargetToCopy\n) => {\n  let textToCopy: string = '';\n\n  if (text) {\n    textToCopy = getTextToCopy(text);\n  } else if (target) {\n    const targetElement = getTargetElement(target);\n    if (targetElement) {\n      textToCopy = getTextToCopyFromTargetElement(targetElement);\n    }\n  } else {\n    assert(\n      '`hds-clipboard` modifier - either a `text` or a `target` argument is required'\n    );\n  }\n  const success = await writeTextToClipboard(textToCopy);\n  return success;\n};\n\n// Notice: we use a function-based modifier here instead of a class-based one\n// because it's quite simple in its logic, and doesn't require injecting services\n// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers\n\nexport default modifier<HdsClipboardModifierSignature>(\n  (element, _positional, named) => {\n    assert(\n      '`hds-clipboard` modifier - the modifier must be applied to an element',\n      element\n    );\n\n    const { text, target, onSuccess, onError } = named;\n\n    const onClick = async (event: MouseEvent) => {\n      const trigger = event.currentTarget;\n      const success = await copyToClipboard(text, target);\n\n      // fire the `onSuccess/onError` callbacks (if provided)\n      if (success) {\n        if (typeof onSuccess === 'function') {\n          onSuccess({ trigger, text, target });\n        }\n      } else {\n        if (typeof onError === 'function') {\n          onError({ trigger, text, target });\n        }\n      }\n    };\n\n    // add the \"onClick\" event listener to the element\n    element.addEventListener('click', onClick);\n\n    // this (teardown) function is run when the element is removed\n    return () => {\n      element.removeEventListener('click', onClick);\n    };\n  }\n);\n"],"names":["getTextToCopy","text","textToCopy","toString","assert","getTargetElement","target","targetElement","document","querySelector","console","error","HTMLElement","NodeList","getTextToCopyFromTargetElement","HTMLInputElement","HTMLTextAreaElement","HTMLSelectElement","value","innerText","writeTextToClipboard","navigator","clipboard","writeText","warn","id","copyToClipboard","success","modifier","element","_positional","named","onSuccess","onError","onClick","event","trigger","currentTarget","addEventListener","removeEventListener"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAsBaA,MAAAA,aAAa,GAAIC,IAAgB,IAAK;EACjD,IAAIC,UAAkB,GAAG,EAAE,CAAA;AAE3B,EAAA,IAAID,IAAI,EAAE;AACR,IAAA,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;AAC5BC,MAAAA,UAAU,GAAGD,IAAI,CAAA;AACnB,KAAC,MAAM;AACL;IACA,OAAOA,IAAI,KAAK,QAAQ,IACxB,OAAOA,IAAI,KAAK,QAAQ,EACxB;AACAC,MAAAA,UAAU,GAAGD,IAAI,CAACE,QAAQ,EAAE,CAAA;AAC9B,KAAC,MAAM;AACLC,MAAAA,MAAM,CACH,CAAA,4EAAA,EAA8E,OAAOH,IAAK,EAC7F,CAAC,CAAA;AACH,KAAA;AACF,GAAA;AACA,EAAA,OAAOC,UAAU,CAAA;AACnB,EAAC;AAEYG,MAAAA,gBAAgB,GAAIC,MAAqB,IAAK;AACzD,EAAA,IAAIC,aAAiC,CAAA;AAErC,EAAA,IAAI,OAAOD,MAAM,KAAK,QAAQ,EAAE;AAC9BC,IAAAA,aAAa,GAAGC,QAAQ,CAACC,aAAa,CAACH,MAAM,CAAC,CAAA;IAE9C,IAAI,CAACC,aAAa,EAAE;AAClBG,MAAAA,OAAO,CAACC,KAAK,CACX,0HAA0H,EAC1HJ,aACF,CAAC,CAAA;AACD,MAAA,OAAA;AACF,KAAA;AACF,GAAC,MAAM,IAAID,MAAM,YAAYM,WAAW,EAAE;AACxCL,IAAAA,aAAa,GAAGD,MAAM,CAAA;AACxB,GAAC,MAAM;IACL,IAAIA,MAAM,YAAYO,QAAQ,EAAE;MAC9BT,MAAM,CACJ,6GACF,CAAC,CAAA;AACH,KAAC,MAAM;AACLA,MAAAA,MAAM,CACH,CAAA,4FAAA,EAA8F,OAAOE,MAAO,EAC/G,CAAC,CAAA;AACH,KAAA;AACF,GAAA;AACA,EAAA,OAAOC,aAAa,CAAA;AACtB,EAAC;AAEYO,MAAAA,8BAA8B,GAAIP,aAA2B,IAAK;EAC7E,IAAIL,UAAkB,GAAG,EAAE,CAAA;EAE3B,IAAIK,aAAa,YAAYK,WAAW,EAAE;IACxC,IACEL,aAAa,YAAYQ,gBAAgB;AAAI;AAC7CR,IAAAA,aAAa,YAAYS,mBAAmB;AAAI;IAChDT,aAAa,YAAYU,iBAAiB;MAC1C;MACAf,UAAU,GAAGK,aAAa,CAACW,KAAK,CAAA;AAClC,KAAC,MAAM;AACL;MACAhB,UAAU,GAAGK,aAAa,CAACY,SAAS,CAAA;;AAEpC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACF,KAAA;AACF,GAAA;AACA,EAAA,OAAOjB,UAAU,CAAA;AACnB,EAAC;AAEYkB,MAAAA,oBAAoB,GAAG,MAAOlB,UAAkB,IAAK;AAChE;AACA;AACA,EAAA,IAAIA,UAAU,EAAE;IACd,IAAI;AACF;AACA;AACA,MAAA,MAAMmB,SAAS,CAACC,SAAS,CAACC,SAAS,CAACrB,UAAU,CAAC,CAAA;AAC/C;AACA;AACA,MAAA,OAAO,IAAI,CAAA;KACZ,CAAC,OAAOS,KAAK,EAAE;AACd;AACA;MACAa,IAAI,CAAC,6DAA6D,EAAE;AAClEC,QAAAA,EAAE,EAAE,mDAAA;AACN,OAAC,CAAC,CAAA;AACF,MAAA,OAAO,KAAK,CAAA;AACd,KAAA;AACF,GAAC,MAAM;AACL,IAAA,OAAO,KAAK,CAAA;AACd,GAAA;AACF,EAAC;AAEM,MAAMC,eAAe,GAAG,OAC7BzB,IAAiB,EACjBK,MAAqB,KAClB;EACH,IAAIJ,UAAkB,GAAG,EAAE,CAAA;AAE3B,EAAA,IAAID,IAAI,EAAE;AACRC,IAAAA,UAAU,GAAGF,aAAa,CAACC,IAAI,CAAC,CAAA;GACjC,MAAM,IAAIK,MAAM,EAAE;AACjB,IAAA,MAAMC,aAAa,GAAGF,gBAAgB,CAACC,MAAM,CAAC,CAAA;AAC9C,IAAA,IAAIC,aAAa,EAAE;AACjBL,MAAAA,UAAU,GAAGY,8BAA8B,CAACP,aAAa,CAAC,CAAA;AAC5D,KAAA;AACF,GAAC,MAAM;IACLH,MAAM,CACJ,+EACF,CAAC,CAAA;AACH,GAAA;AACA,EAAA,MAAMuB,OAAO,GAAG,MAAMP,oBAAoB,CAAClB,UAAU,CAAC,CAAA;AACtD,EAAA,OAAOyB,OAAO,CAAA;AAChB,EAAC;;AAED;AACA;AACA;;AAEA,mBAAeC,QAAQ,CACrB,CAACC,OAAO,EAAEC,WAAW,EAAEC,KAAK,KAAK;AAC/B3B,EAAAA,MAAM,CACJ,uEAAuE,EACvEyB,OACF,CAAC,CAAA;EAED,MAAM;IAAE5B,IAAI;IAAEK,MAAM;IAAE0B,SAAS;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAGF,KAAK,CAAA;AAElD,EAAA,MAAMG,OAAO,GAAG,MAAOC,KAAiB,IAAK;AAC3C,IAAA,MAAMC,OAAO,GAAGD,KAAK,CAACE,aAAa,CAAA;IACnC,MAAMV,OAAO,GAAG,MAAMD,eAAe,CAACzB,IAAI,EAAEK,MAAM,CAAC,CAAA;;AAEnD;AACA,IAAA,IAAIqB,OAAO,EAAE;AACX,MAAA,IAAI,OAAOK,SAAS,KAAK,UAAU,EAAE;AACnCA,QAAAA,SAAS,CAAC;UAAEI,OAAO;UAAEnC,IAAI;AAAEK,UAAAA,MAAAA;AAAO,SAAC,CAAC,CAAA;AACtC,OAAA;AACF,KAAC,MAAM;AACL,MAAA,IAAI,OAAO2B,OAAO,KAAK,UAAU,EAAE;AACjCA,QAAAA,OAAO,CAAC;UAAEG,OAAO;UAAEnC,IAAI;AAAEK,UAAAA,MAAAA;AAAO,SAAC,CAAC,CAAA;AACpC,OAAA;AACF,KAAA;GACD,CAAA;;AAED;AACAuB,EAAAA,OAAO,CAACS,gBAAgB,CAAC,OAAO,EAAEJ,OAAO,CAAC,CAAA;;AAE1C;AACA,EAAA,OAAO,MAAM;AACXL,IAAAA,OAAO,CAACU,mBAAmB,CAAC,OAAO,EAAEL,OAAO,CAAC,CAAA;GAC9C,CAAA;AACH,CACF,CAAC;;;;"}

package/dist/modifiers/hds-register-event.js

@@ -0,0 +1,40 @@
+import { modifier } from 'ember-modifier';
+
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+
+// Notice: we use a function-based modifier here instead of a class-based one
+// because it's quite simple in its logic, and doesn't require injecting services
+// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
+
+// this modifier is a "replacement" of the standard `{{on 'event' myFunction}}`
+// it's needed because the {{on}} modifier can't be applied conditionally, apparently
+// see: https://github.com/emberjs/ember.js/issues/19869#issuecomment-1909118910
+// see: https://github.com/emberjs/ember.js/pull/20629
+// see also: https://github.com/emberjs/ember.js/blob/main/packages/%40ember/-internals/glimmer/lib/modifiers/on.ts#L30
+var registerEvent = modifier((element, positional, named = {}) => {
+  // the "target" element the listeners are added to
+  // notice: this is the element the Ember modifier is attached to
+  const targetElement = element;
+  // the event name and handler to apply to the element
+  // notice: it's expressed as "positional" argument (array) for the modifier
+  const [event, eventHandler] = positional;
+  // the options for the `addEventListener()` method
+  // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+  // notice: it's expressed as "named" argument (object) for the modifier
+  const {
+    useCapture = false
+  } = named;
+  targetElement.addEventListener(event, eventHandler, useCapture);
+
+  // this (teardown) function is run when the element is removed from the DOM
+  return () => {
+    targetElement.removeEventListener(event, eventHandler, useCapture);
+  };
+});
+
+export { registerEvent as default };
+//# sourceMappingURL=hds-register-event.js.map

package/dist/modifiers/hds-register-event.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hds-register-event.js","sources":["../../src/modifiers/hds-register-event.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\nimport { modifier } from 'ember-modifier';\n\n// Notice: we use a function-based modifier here instead of a class-based one\n// because it's quite simple in its logic, and doesn't require injecting services\n// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers\n\n// this modifier is a \"replacement\" of the standard `{{on 'event' myFunction}}`\n// it's needed because the {{on}} modifier can't be applied conditionally, apparently\n// see: https://github.com/emberjs/ember.js/issues/19869#issuecomment-1909118910\n// see: https://github.com/emberjs/ember.js/pull/20629\n// see also: https://github.com/emberjs/ember.js/blob/main/packages/%40ember/-internals/glimmer/lib/modifiers/on.ts#L30\nexport default modifier((element, positional, named = {}) => {\n  // the \"target\" element the listeners are added to\n  // notice: this is the element the Ember modifier is attached to\n  const targetElement = element;\n  // the event name and handler to apply to the element\n  // notice: it's expressed as \"positional\" argument (array) for the modifier\n  const [event, eventHandler] = positional;\n  // the options for the `addEventListener()` method\n  // see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\n  // notice: it's expressed as \"named\" argument (object) for the modifier\n  const { useCapture = false } = named;\n\n  targetElement.addEventListener(event, eventHandler, useCapture);\n\n  // this (teardown) function is run when the element is removed from the DOM\n  return () => {\n    targetElement.removeEventListener(event, eventHandler, useCapture);\n  };\n});\n"],"names":["modifier","element","positional","named","targetElement","event","eventHandler","useCapture","addEventListener","removeEventListener"],"mappings":";;AAAA;AACA;AACA;AACA;;;AAIA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,oBAAeA,QAAQ,CAAC,CAACC,OAAO,EAAEC,UAAU,EAAEC,KAAK,GAAG,EAAE,KAAK;AAC3D;AACA;EACA,MAAMC,aAAa,GAAGH,OAAO,CAAA;AAC7B;AACA;AACA,EAAA,MAAM,CAACI,KAAK,EAAEC,YAAY,CAAC,GAAGJ,UAAU,CAAA;AACxC;AACA;AACA;EACA,MAAM;AAAEK,IAAAA,UAAU,GAAG,KAAA;AAAM,GAAC,GAAGJ,KAAK,CAAA;EAEpCC,aAAa,CAACI,gBAAgB,CAACH,KAAK,EAAEC,YAAY,EAAEC,UAAU,CAAC,CAAA;;AAE/D;AACA,EAAA,OAAO,MAAM;IACXH,aAAa,CAACK,mBAAmB,CAACJ,KAAK,EAAEC,YAAY,EAAEC,UAAU,CAAC,CAAA;GACnE,CAAA;AACH,CAAC,CAAC;;;;"}

package/dist/modifiers/hds-tooltip.js

@@ -1,4 +1,4 @@
-import { c as _classPrivateMethodInitSpec, _ as _defineProperty, d as _classPrivateMethodGet } from '../_rollupPluginBabelHelpers-lqPQKyNs.js';
+import { c as _classPrivateMethodInitSpec, a as _defineProperty, d as _assertClassBrand } from '../_rollupPluginBabelHelpers-NoJJJNhk.js';
 import Modifier from 'ember-modifier';
 import { assert } from '@ember/debug';
 import { registerDestructor } from '@ember/destroyable';
@@ -31,15 +31,11 @@ function cleanup(instance) {
  * @class TooltipModifier
  *
  */
-var _setup = /*#__PURE__*/new WeakSet();
-var _update = /*#__PURE__*/new WeakSet();
-var _getTooltipProps = /*#__PURE__*/new WeakSet();
+var _HdsTooltipModifier_brand = /*#__PURE__*/new WeakSet();
 class HdsTooltipModifier extends Modifier {
   constructor(owner, args) {
     super(owner, args);
-    _classPrivateMethodInitSpec(this, _getTooltipProps);
-    _classPrivateMethodInitSpec(this, _update);
-    _classPrivateMethodInitSpec(this, _setup);
+    _classPrivateMethodInitSpec(this, _HdsTooltipModifier_brand);
     _defineProperty(this, "didSetup", false);
     _defineProperty(this, "interval", null);
     _defineProperty(this, "needsTabIndex", false);
@@ -70,21 +66,21 @@ class HdsTooltipModifier extends Modifier {
   modify(element, positional, named) {
     assert('Tooltip must have an element', element);
     if (!this.didSetup) {
-      _classPrivateMethodGet(this, _setup, _setup2).call(this, element, positional, named);
+      _assertClassBrand(_HdsTooltipModifier_brand, this, _setup).call(this, element, positional, named);
       this.didSetup = true;
     }
-    _classPrivateMethodGet(this, _update, _update2).call(this, element, positional, named);
+    _assertClassBrand(_HdsTooltipModifier_brand, this, _update).call(this, element, positional, named);
   }
 }
-function _setup2(element, positional, named) {
-  const tooltipProps = _classPrivateMethodGet(this, _getTooltipProps, _getTooltipProps2).call(this, element, positional, named);
+function _setup(element, positional, named) {
+  const tooltipProps = _assertClassBrand(_HdsTooltipModifier_brand, this, _getTooltipProps).call(this, element, positional, named);
   this.tooltip = tippy(element, tooltipProps);
 }
-function _update2(element, positional, named) {
-  const tooltipProps = _classPrivateMethodGet(this, _getTooltipProps, _getTooltipProps2).call(this, element, positional, named);
+function _update(element, positional, named) {
+  const tooltipProps = _assertClassBrand(_HdsTooltipModifier_brand, this, _getTooltipProps).call(this, element, positional, named);
   this.tooltip.setProps(tooltipProps);
 }
-function _getTooltipProps2(element, positional, named) {
+function _getTooltipProps(element, positional, named) {
   const {
     options = {}
   } = named;

package/dist/modifiers/hds-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"hds-tooltip.js","sources":["../../src/modifiers/hds-tooltip.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\n// Note: the majority of this code is a porting of the existing tooltip implementation in Cloud UI\n// (which was initially implemented in Structure)\n\nimport Modifier from 'ember-modifier';\nimport { assert } from '@ember/debug';\nimport { registerDestructor } from '@ember/destroyable';\n\nimport tippy, { followCursor } from 'tippy.js';\n// used by custom SVG arrow:\nimport 'tippy.js/dist/svg-arrow.css';\n\nfunction cleanup(instance) {\n  const { interval, needsTabIndex, tooltip } = instance;\n  if (needsTabIndex) {\n    tooltip?.reference?.removeAttribute('tabindex');\n  }\n  clearInterval(interval);\n  tooltip?.destroy();\n}\n\n/**\n *\n * `Tooltip` implements a modifier that uses Tippy.js to display a tooltip.\n *\n * Sample usage:\n * ```\n * <div {{hds-tooltip 'Text' options=(hash )}}>Hover me!</div>\n * ```\n *\n * @see https://atomiks.github.io/tippyjs\n * @class TooltipModifier\n *\n */\nexport default class HdsTooltipModifier extends Modifier {\n  didSetup = false;\n\n  interval = null;\n  needsTabIndex = false;\n  tooltip = null;\n\n  constructor(owner, args) {\n    super(owner, args);\n    registerDestructor(this, cleanup);\n  }\n\n  hideOnEsc = {\n    name: 'hideOnEsc',\n    defaultValue: true,\n    fn({ hide }) {\n      function onKeyDown(event) {\n        if (event.keyCode === 27) {\n          hide();\n        }\n      }\n\n      return {\n        onShow() {\n          document.addEventListener('keydown', onKeyDown);\n        },\n        onHide() {\n          document.removeEventListener('keydown', onKeyDown);\n        },\n      };\n    },\n  };\n\n  modify(element, positional, named) {\n    assert('Tooltip must have an element', element);\n\n    if (!this.didSetup) {\n      this.#setup(element, positional, named);\n      this.didSetup = true;\n    }\n\n    this.#update(element, positional, named);\n  }\n\n  #setup(element, positional, named) {\n    const tooltipProps = this.#getTooltipProps(element, positional, named);\n    this.tooltip = tippy(element, tooltipProps);\n  }\n\n  #update(element, positional, named) {\n    const tooltipProps = this.#getTooltipProps(element, positional, named);\n    this.tooltip.setProps(tooltipProps);\n  }\n\n  #getTooltipProps(element, positional, named) {\n    const { options = {} } = named;\n    let [content] = positional;\n\n    let $anchor = element;\n\n    // Make it easy to specify the modified element as the actual tooltip.\n    if (typeof options.triggerTarget === 'string') {\n      const $el = $anchor;\n      switch (options.triggerTarget) {\n        case 'parentNode':\n          $anchor = $anchor.parentNode;\n          break;\n        default:\n          $anchor = $anchor.querySelectorAll(options.triggerTarget);\n      }\n      content = $anchor.cloneNode(true);\n      $el.remove();\n      options.triggerTarget = undefined;\n    }\n\n    // The {{hds-tooltip}} will just use the HTML content.\n    if (typeof content === 'undefined') {\n      content = $anchor.innerHTML;\n      $anchor.innerHTML = '';\n    }\n\n    if (options.trigger === 'manual') {\n      // If we are manually triggering, a out delay means only show for the\n      // amount of time specified by the delay.\n      const delay = options.delay || [];\n\n      if (typeof delay[1] !== 'undefined') {\n        options.onShown = (tooltip) => {\n          clearInterval(this.interval);\n          this.interval = setTimeout(() => {\n            tooltip.hide();\n          }, delay[1]);\n        };\n      }\n    }\n\n    const $trigger = $anchor;\n\n    if (!$trigger.hasAttribute('tabindex')) {\n      this.needsTabIndex = true;\n      $trigger.setAttribute('tabindex', '0');\n    }\n\n    return {\n      theme: 'hds',\n      triggerTarget: $trigger,\n      arrow: `\n        <svg class=\"hds-tooltip-pointer\" width=\"16\" height=\"7\" viewBox=\"0 0 16 7\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z\" />\n        </svg>`,\n      // keeps tooltip itself open on hover:\n      interactive: true,\n      // fix accessibility features that get messed up with setting interactive: true\n      aria: {\n        content: 'describedby',\n        expanded: null,\n      },\n      content: () => content,\n      plugins: [\n        typeof options.followCursor !== 'undefined' ? followCursor : undefined,\n        this.hideOnEsc,\n      ].filter((item) => Boolean(item)),\n      ...options,\n    };\n  }\n}\n"],"names":["cleanup","instance","interval","needsTabIndex","tooltip","reference","removeAttribute","clearInterval","destroy","_setup","WeakSet","_update","_getTooltipProps","HdsTooltipModifier","Modifier","constructor","owner","args","_classPrivateMethodInitSpec","_defineProperty","name","defaultValue","fn","hide","onKeyDown","event","keyCode","onShow","document","addEventListener","onHide","removeEventListener","registerDestructor","modify","element","positional","named","assert","didSetup","_classPrivateMethodGet","_setup2","call","_update2","tooltipProps","_getTooltipProps2","tippy","setProps","options","content","$anchor","triggerTarget","$el","parentNode","querySelectorAll","cloneNode","remove","undefined","innerHTML","trigger","delay","onShown","setTimeout","$trigger","hasAttribute","setAttribute","theme","arrow","interactive","aria","expanded","plugins","followCursor","hideOnEsc","filter","item","Boolean"],"mappings":"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"}
+{"version":3,"file":"hds-tooltip.js","sources":["../../src/modifiers/hds-tooltip.js"],"sourcesContent":["/**\n * Copyright (c) HashiCorp, Inc.\n * SPDX-License-Identifier: MPL-2.0\n */\n\n// Note: the majority of this code is a porting of the existing tooltip implementation in Cloud UI\n// (which was initially implemented in Structure)\n\nimport Modifier from 'ember-modifier';\nimport { assert } from '@ember/debug';\nimport { registerDestructor } from '@ember/destroyable';\n\nimport tippy, { followCursor } from 'tippy.js';\n// used by custom SVG arrow:\nimport 'tippy.js/dist/svg-arrow.css';\n\nfunction cleanup(instance) {\n  const { interval, needsTabIndex, tooltip } = instance;\n  if (needsTabIndex) {\n    tooltip?.reference?.removeAttribute('tabindex');\n  }\n  clearInterval(interval);\n  tooltip?.destroy();\n}\n\n/**\n *\n * `Tooltip` implements a modifier that uses Tippy.js to display a tooltip.\n *\n * Sample usage:\n * ```\n * <div {{hds-tooltip 'Text' options=(hash )}}>Hover me!</div>\n * ```\n *\n * @see https://atomiks.github.io/tippyjs\n * @class TooltipModifier\n *\n */\nexport default class HdsTooltipModifier extends Modifier {\n  didSetup = false;\n\n  interval = null;\n  needsTabIndex = false;\n  tooltip = null;\n\n  constructor(owner, args) {\n    super(owner, args);\n    registerDestructor(this, cleanup);\n  }\n\n  hideOnEsc = {\n    name: 'hideOnEsc',\n    defaultValue: true,\n    fn({ hide }) {\n      function onKeyDown(event) {\n        if (event.keyCode === 27) {\n          hide();\n        }\n      }\n\n      return {\n        onShow() {\n          document.addEventListener('keydown', onKeyDown);\n        },\n        onHide() {\n          document.removeEventListener('keydown', onKeyDown);\n        },\n      };\n    },\n  };\n\n  modify(element, positional, named) {\n    assert('Tooltip must have an element', element);\n\n    if (!this.didSetup) {\n      this.#setup(element, positional, named);\n      this.didSetup = true;\n    }\n\n    this.#update(element, positional, named);\n  }\n\n  #setup(element, positional, named) {\n    const tooltipProps = this.#getTooltipProps(element, positional, named);\n    this.tooltip = tippy(element, tooltipProps);\n  }\n\n  #update(element, positional, named) {\n    const tooltipProps = this.#getTooltipProps(element, positional, named);\n    this.tooltip.setProps(tooltipProps);\n  }\n\n  #getTooltipProps(element, positional, named) {\n    const { options = {} } = named;\n    let [content] = positional;\n\n    let $anchor = element;\n\n    // Make it easy to specify the modified element as the actual tooltip.\n    if (typeof options.triggerTarget === 'string') {\n      const $el = $anchor;\n      switch (options.triggerTarget) {\n        case 'parentNode':\n          $anchor = $anchor.parentNode;\n          break;\n        default:\n          $anchor = $anchor.querySelectorAll(options.triggerTarget);\n      }\n      content = $anchor.cloneNode(true);\n      $el.remove();\n      options.triggerTarget = undefined;\n    }\n\n    // The {{hds-tooltip}} will just use the HTML content.\n    if (typeof content === 'undefined') {\n      content = $anchor.innerHTML;\n      $anchor.innerHTML = '';\n    }\n\n    if (options.trigger === 'manual') {\n      // If we are manually triggering, a out delay means only show for the\n      // amount of time specified by the delay.\n      const delay = options.delay || [];\n\n      if (typeof delay[1] !== 'undefined') {\n        options.onShown = (tooltip) => {\n          clearInterval(this.interval);\n          this.interval = setTimeout(() => {\n            tooltip.hide();\n          }, delay[1]);\n        };\n      }\n    }\n\n    const $trigger = $anchor;\n\n    if (!$trigger.hasAttribute('tabindex')) {\n      this.needsTabIndex = true;\n      $trigger.setAttribute('tabindex', '0');\n    }\n\n    return {\n      theme: 'hds',\n      triggerTarget: $trigger,\n      arrow: `\n        <svg class=\"hds-tooltip-pointer\" width=\"16\" height=\"7\" viewBox=\"0 0 16 7\" xmlns=\"http://www.w3.org/2000/svg\">\n          <path d=\"M0 7H16L9.11989 0.444571C8.49776 -0.148191 7.50224 -0.148191 6.88011 0.444572L0 7Z\" />\n        </svg>`,\n      // keeps tooltip itself open on hover:\n      interactive: true,\n      // fix accessibility features that get messed up with setting interactive: true\n      aria: {\n        content: 'describedby',\n        expanded: null,\n      },\n      content: () => content,\n      plugins: [\n        typeof options.followCursor !== 'undefined' ? followCursor : undefined,\n        this.hideOnEsc,\n      ].filter((item) => Boolean(item)),\n      ...options,\n    };\n  }\n}\n"],"names":["cleanup","instance","interval","needsTabIndex","tooltip","reference","removeAttribute","clearInterval","destroy","_HdsTooltipModifier_brand","WeakSet","HdsTooltipModifier","Modifier","constructor","owner","args","_classPrivateMethodInitSpec","_defineProperty","name","defaultValue","fn","hide","onKeyDown","event","keyCode","onShow","document","addEventListener","onHide","removeEventListener","registerDestructor","modify","element","positional","named","assert","didSetup","_assertClassBrand","_setup","call","_update","tooltipProps","_getTooltipProps","tippy","setProps","options","content","$anchor","triggerTarget","$el","parentNode","querySelectorAll","cloneNode","remove","undefined","innerHTML","trigger","delay","onShown","setTimeout","$trigger","hasAttribute","setAttribute","theme","arrow","interactive","aria","expanded","plugins","followCursor","hideOnEsc","filter","item","Boolean"],"mappings":"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"}

package/dist/modifiers.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=modifiers.js.map

package/dist/modifiers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modifiers.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}