@nanoporetech-digital/components 4.9.4 → 5.0.0

package/dist/types/utils/constructible-style.d.ts

@@ -0,0 +1,31 @@
+import { ComponentInterface } from '../stencil-public-runtime';
+declare type ConstructibleStyleDecorator = (target: ComponentInterface, propertyKey: string) => void;
+/**
+ * Dynamically create a constructible stylesheet which is applied to the component.
+ * The stylesheet is then cached for future instances of the component.
+ * @usage
+As a string:
+```
+@ConstructableStyle() style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+As a function:
+```
+@ConstructableStyle() style = () => `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+ * @param opts - optional `cacheKeyProperty` - in case an instance of a component could produce different styles based on variables.
+ * @returns `@ConstructableStyle` decorator
+ */
+export declare function ConstructibleStyle(opts?: ConstructibleStyleOptions): ConstructibleStyleDecorator;
+export interface ConstructibleStyleOptions {
+  /**
+   * Set this in case an instance of a component could produce different styles based on variables.
+   * This will ensure that you get new styles for each mode.
+   * @example
+```
+@Prop() mode: string;
+@ConstructableStyle({ cacheKeyProperty: "mode" }) style = `.bg { background: url('assets/${ this.mode }/bg.png'); }`;
+```
+   */
+  cacheKeyProperty?: string;
+}
+export {};

package/dist/types/utils/drag.d.ts

@@ -1 +1,21 @@
-export declare function drag(container: HTMLElement, onMove: (x: number, y: number) => void): void;
+interface DragOptions {
+  /** Callback that runs as dragging occurs. */
+  onMove: (x: number, y: number) => void;
+  /** Callback that runs when dragging stops. */
+  onStop: () => void;
+  /**
+   * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
+   * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
+   * a drag (e.g. positioning a handle initially at the click target).
+   */
+  initialEvent: TouchEvent | PointerEvent | MouseEvent;
+  /**
+   * Used in conjunction with `options.initialEvent`
+   * Subtracts the initial pointer co-ordinates from the move co-ordinates.
+   * This is useful for tracking how far an element has been dragged
+   */
+  relative?: boolean;
+}
+/** Begins listening for dragging. */
+export declare function drag(container: HTMLElement, options?: Partial<DragOptions>): void;
+export {};