@pie-element/number-line 0.1.0

package/src/delivery/number-line/point-chooser/styles.ts

@@ -0,0 +1,86 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/point-chooser/styles.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+const iconHeight = 41;
+const iconWidth = 42;
+
+import img from './img.js';
+
+const noselect = () => ({
+  '-webkit-touch-callout': 'none' /* iOS Safari */,
+  '-webkit-user-select': 'none' /* Safari */,
+  '-khtml-user-select': 'none' /* Konqueror HTML */,
+  '-moz-user-select': 'none' /* Firefox */,
+  '-ms-user-select': 'none' /* Internet Explorer/Edge */,
+  'user-select': 'none' /* Non-prefixed version, currently
+                                  supported by Chrome and Opera */,
+});
+
+const styleElement = (index) => ({
+  display: 'inline-block',
+  width: iconWidth,
+  height: iconHeight,
+  position: 'relative',
+  top: '1px',
+  cursor: 'pointer',
+  background: `url(${img}) -${index * iconWidth}px 0px`,
+  '&.active, &.active:hover': {
+    backgroundPosition: `-${index * iconWidth}px -${2 * iconHeight}px`,
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    backgroundPosition: `-${index * iconWidth}px -${iconHeight}px`,
+  },
+});
+
+export default {
+  pointChooser: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    borderRadius: '4px',
+    padding: '1px',
+  },
+  deleteIconHolder: {
+    position: 'relative',
+    top: '3px',
+    width: '30px',
+  },
+  deleteIcon: {
+    fill: 'black',
+    cursor: 'pointer',
+    transition: 'opacity 100ms linear',
+    '&:hover': {
+      opacity: '0.5',
+    },
+  },
+  elementSelector: Object.assign(
+    {
+      width: '55%',
+      padding: '1px',
+    },
+    noselect(),
+  ),
+  controls: {
+    display: 'flex',
+    paddingTop: '7px',
+  },
+  buttonText: {
+    textWrap: 'nowrap',
+  },
+  pf: styleElement(0),
+  lff: styleElement(1),
+  lef: styleElement(2),
+  lfe: styleElement(3),
+  lee: styleElement(4),
+  rfn: styleElement(5),
+  rfp: styleElement(6),
+  ren: styleElement(7),
+  rep: styleElement(8),
+};

package/src/delivery/number-line/transitions/fade.tsx

@@ -0,0 +1,100 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/transitions/fade.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import PropTypes from 'prop-types';
+
+const duration = 200;
+const classPrefix = 'fade-transition';
+
+const fadeStyles = `
+  .${classPrefix}-appear {
+    opacity: 0;
+  }
+  .${classPrefix}-appear-active {
+    opacity: 1;
+    transition: opacity ${duration}ms ease-in;
+  }
+  .${classPrefix}-enter {
+    opacity: 0;
+  }
+  .${classPrefix}-enter-active {
+    opacity: 1;
+    transition: opacity ${duration}ms ease-in;
+  }
+  .${classPrefix}-exit {
+    opacity: 1;
+  }
+  .${classPrefix}-exit-active {
+    opacity: 0;
+    transition: opacity ${duration}ms ease-in;
+  }
+`;
+
+const FadeTransition = (props) => {
+  const nodeRef = useRef(null);
+  const child = React.Children.only(props.children);
+
+  useEffect(() => {
+    // Inject styles if not already present
+    if (!document.getElementById(`${classPrefix}-styles`)) {
+      const style = document.createElement('style');
+      style.id = `${classPrefix}-styles`;
+      style.textContent = fadeStyles;
+      document.head.appendChild(style);
+    }
+  }, []);
+
+  return (
+    <CSSTransition
+      {...props}
+      nodeRef={nodeRef}
+      appear={true}
+      classNames={{
+        enter: `${classPrefix}-enter`,
+        enterActive: `${classPrefix}-enter-active`,
+        exit: `${classPrefix}-exit`,
+        exitActive: `${classPrefix}-exit-active`,
+        appear: `${classPrefix}-appear`,
+        appearActive: `${classPrefix}-appear-active`,
+      }}
+      timeout={duration}
+    >
+      <g ref={nodeRef}>
+        {child}
+      </g>
+    </CSSTransition>
+  );
+};
+
+FadeTransition.propTypes = {
+  // CSSTransition props
+  children: PropTypes.node,
+  in: PropTypes.bool,
+  mountOnEnter: PropTypes.bool,
+  unmountOnExit: PropTypes.bool,
+  appear: PropTypes.bool,
+  enter: PropTypes.bool,
+  exit: PropTypes.bool,
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    enter: PropTypes.number,
+    exit: PropTypes.number,
+  })]),
+  addEndListener: PropTypes.func,
+  onEnter: PropTypes.func,
+  onEntering: PropTypes.func,
+  onEntered: PropTypes.func,
+  onExit: PropTypes.func,
+  onExiting: PropTypes.func,
+  onExited: PropTypes.func,
+};
+
+export default FadeTransition;

package/src/delivery/number-line/transitions/index.ts

@@ -0,0 +1,12 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/number-line/src/number-line/transitions/index.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import Fade from './fade.js';
+export { Fade };

package/src/index.iife.ts

@@ -0,0 +1,16 @@
+/**
+ * IIFE entry point for number-line element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+
+import Element from './index.js';
+
+// Auto-register the custom element for IIFE mode
+if (typeof window !== 'undefined' && !customElements.get('number-line-element')) {
+  customElements.define('number-line-element', Element);
+}
+
+// Export for IIFE global
+export default Element;

package/src/index.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';