@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.0

package/dist/cjs/events-pBdXJwIU.js

@@ -0,0 +1,37 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+/**
+ * Add multiple event listeners with the same callback function
+ * @param el the element which emits events
+ * @param events the event names to listen to (string separated by a space)
+ * @param fn the function to call
+ * @param opts the event options to apply
+ */
+function addListeners(el, events, fn, opts) {
+    events
+        .split(' ')
+        .forEach((e) => el.addEventListener(e, fn, opts));
+}
+/**
+ * Waits for a specific event to be emitted from an element.
+ * Ignores events that bubble up from child elements.
+ * @param el an html element
+ * @param eventName name of the event
+ */
+function waitForEvent(el, eventName) {
+    return new Promise((resolve) => {
+        function done(event) {
+            if (event.target === el) {
+                el.removeEventListener(eventName, done);
+                resolve();
+            }
+        }
+        el.addEventListener(eventName, done);
+    });
+}
+
+exports.addListeners = addListeners;
+exports.waitForEvent = waitForEvent;

package/dist/cjs/fade-run1oYFS.js

@@ -0,0 +1,212 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var nanoSlides_entry = require('./nano-slides-D5q9vQ4P.js');
+require('./index-DYD4xvxr.js');
+require('./renderer-SkVn69pT.js');
+
+const Slide = nanoSlides_entry.Flickity.Slide;
+const slideUpdateTarget = Slide.prototype.updateTarget;
+Slide.prototype.updateTarget = function (...args) {
+    slideUpdateTarget.apply(this, args);
+    if (!this.parent.options.fade) {
+        return;
+    }
+    // position cells at selected target
+    const slideTargetX = this.target - this.x;
+    const firstCellX = this.cells[0].x;
+    this.cells.forEach(function (cell) {
+        const targetX = cell.x - firstCellX - slideTargetX;
+        cell.renderPosition(targetX);
+    });
+};
+Slide.prototype.setOpacity = function (alpha) {
+    this.cells.forEach(function (cell) {
+        cell.element.style.opacity = alpha;
+    });
+};
+// ---- Flickity ---- //
+const proto = nanoSlides_entry.Flickity.prototype;
+nanoSlides_entry.Flickity.createMethods.push('_createFade');
+proto._createFade = function () {
+    this.fadeIndex = this.selectedIndex;
+    this.prevSelectedIndex = this.selectedIndex;
+    this.on('select', this.onSelectFade);
+    this.on('dragEnd', this.onDragEndFade);
+    this.on('settle', this.onSettleFade);
+    this.on('activate', this.onActivateFade);
+    this.on('deactivate', this.onDeactivateFade);
+};
+const updateSlides = proto.updateSlides;
+proto.updateSlides = function (...args) {
+    updateSlides.apply(this, args);
+    if (!this.options.fade) {
+        return;
+    }
+    // set initial opacity
+    this.slides.forEach(function (slide, i) {
+        const alpha = i == this.selectedIndex ? 1 : 0;
+        slide.setOpacity(alpha);
+    }, this);
+};
+/* ---- events ---- */
+proto.onSelectFade = function () {
+    // in case of resize, keep fadeIndex within current count
+    this.fadeIndex = Math.min(this.prevSelectedIndex, this.slides.length - 1);
+    this.prevSelectedIndex = this.selectedIndex;
+};
+proto.onSettleFade = function () {
+    delete this.didDragEnd;
+    if (!this.options.fade) {
+        return;
+    }
+    // set full and 0 opacity on selected & faded slides
+    this.selectedSlide.setOpacity(1);
+    const fadedSlide = this.slides[this.fadeIndex];
+    if (fadedSlide && this.fadeIndex != this.selectedIndex) {
+        this.slides[this.fadeIndex].setOpacity(0);
+    }
+};
+proto.onDragEndFade = function () {
+    // set flag
+    this.didDragEnd = true;
+};
+proto.onActivateFade = function () {
+    if (this.options.fade) {
+        this.element.classList.add('is-fade');
+    }
+};
+proto.onDeactivateFade = function () {
+    if (!this.options.fade) {
+        return;
+    }
+    this.element.classList.remove('is-fade');
+    // reset opacity
+    this.slides.forEach(function (slide) {
+        slide.setOpacity('');
+    });
+};
+/* ---- position & fading ---- */
+const positionSlider = proto.positionSlider;
+proto.positionSlider = function (...args) {
+    if (!this.options.fade) {
+        positionSlider.apply(this, args);
+        return;
+    }
+    this.fadeSlides();
+    this.dispatchScrollEvent();
+};
+const positionSliderAtSelected = proto.positionSliderAtSelected;
+proto.positionSliderAtSelected = function (...args) {
+    if (this.options.fade) {
+        // position fade slider at origin
+        this.setTranslateX(0);
+    }
+    positionSliderAtSelected.apply(this, args);
+};
+proto.fadeSlides = function () {
+    if (this.slides.length < 2) {
+        return;
+    }
+    // get slides to fade-in & fade-out
+    const indexes = this.getFadeIndexes();
+    const fadeSlideA = this.slides[indexes.a];
+    const fadeSlideB = this.slides[indexes.b];
+    const distance = this.wrapDifference(fadeSlideA.target, fadeSlideB.target);
+    let progress = this.wrapDifference(fadeSlideA.target, -this.x);
+    progress = progress / distance;
+    fadeSlideA.setOpacity(1 - progress);
+    fadeSlideB.setOpacity(progress);
+    // hide previous slide
+    let fadeHideIndex = indexes.a;
+    if (this.isDragging) {
+        fadeHideIndex = progress > 0.5 ? indexes.a : indexes.b;
+    }
+    const isNewHideIndex = this.fadeHideIndex != undefined &&
+        this.fadeHideIndex != fadeHideIndex &&
+        this.fadeHideIndex != indexes.a &&
+        this.fadeHideIndex != indexes.b;
+    if (isNewHideIndex) {
+        // new fadeHideSlide set, hide previous
+        this.slides[this.fadeHideIndex].setOpacity(0);
+    }
+    this.fadeHideIndex = fadeHideIndex;
+};
+proto.getFadeIndexes = function () {
+    if (!this.isDragging &&
+        !this.didDragEnd &&
+        typeof this.fadeIndex !== 'undefined') {
+        return {
+            a: this.fadeIndex,
+            b: this.selectedIndex,
+        };
+    }
+    if (this.options.wrapAround) {
+        return this.getFadeDragWrapIndexes();
+    }
+    else {
+        return this.getFadeDragLimitIndexes();
+    }
+};
+proto.getFadeDragWrapIndexes = function () {
+    const distances = this.slides.map(function (_slide, i) {
+        return this.getSlideDistance(-this.x, i);
+    }, this);
+    const absDistances = distances.map(function (distance) {
+        return Math.abs(distance);
+    });
+    const minDistance = Math.min(...absDistances);
+    const closestIndex = absDistances.indexOf(minDistance);
+    const distance = distances[closestIndex];
+    const len = this.slides.length;
+    const delta = distance >= 0 ? 1 : -1;
+    return {
+        a: closestIndex,
+        b: nanoSlides_entry.utils.modulo(closestIndex + delta, len),
+    };
+};
+proto.getFadeDragLimitIndexes = function () {
+    // calculate closest previous slide
+    let dragIndex = 0;
+    for (let i = 0; i < this.slides.length - 1; i++) {
+        const slide = this.slides[i];
+        if (-this.x < slide.target) {
+            break;
+        }
+        dragIndex = i;
+    }
+    return {
+        a: dragIndex,
+        b: dragIndex + 1,
+    };
+};
+proto.wrapDifference = function (a, b) {
+    let diff = b - a;
+    if (!this.options.wrapAround) {
+        return diff;
+    }
+    const diffPlus = diff + this.slideableWidth;
+    const diffMinus = diff - this.slideableWidth;
+    if (Math.abs(diffPlus) < Math.abs(diff)) {
+        diff = diffPlus;
+    }
+    if (Math.abs(diffMinus) < Math.abs(diff)) {
+        diff = diffMinus;
+    }
+    return diff;
+};
+// ---- wrapAround ---- //
+const _getWrapShiftCells = proto._getWrapShiftCells;
+proto._getWrapShiftCells = function (...args) {
+    if (!this.options.fade) {
+        _getWrapShiftCells.apply(this, args);
+    }
+};
+const shiftWrapCells = proto.shiftWrapCells;
+proto.shiftWrapCells = function (...args) {
+    if (!this.options.fade) {
+        shiftWrapCells.apply(this, args);
+    }
+};

package/dist/cjs/form-control-zW-pmQ5Y.js

@@ -0,0 +1,84 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var renderer = require('./renderer-SkVn69pT.js');
+
+const renderLabel = ({ label, hasLabelSlot, controlId, labelId, floatLabel, placeholder, alwaysShowPlaceholder, hideLabel, hasValue, rtl, showCharCount, maxlength, charCount, }) => {
+    if (!label && !hasLabelSlot)
+        return;
+    if (floatLabel) {
+        return (renderer.h("label", { class: "form-ctrl__float-label", htmlFor: controlId, id: labelId },
+            renderer.h("slot", { name: "label" }, label),
+            showCharCount && (renderer.h("span", { class: "form-ctrl__label-charcount" }, maxlength ? ` ${charCount}/${maxlength}` : ` ${charCount}`))));
+    }
+    else {
+        return (renderer.h("label", { class: { 'form-ctrl__label': true, 'visually-hide': hideLabel }, htmlFor: controlId, id: labelId },
+            renderer.h("div", { class: "form-ctrl__label-wrap" },
+                placeholder && alwaysShowPlaceholder && hasValue && rtl && (renderer.h("span", { class: "form-ctrl__label-placeholder" },
+                    placeholder,
+                    " / ")),
+                renderer.h("span", { class: "form-ctrl__labeltext" },
+                    renderer.h("slot", { name: "label" }, label)),
+                placeholder && alwaysShowPlaceholder && hasValue && !rtl && (renderer.h("span", { class: "form-ctrl__label-placeholder" },
+                    " / ",
+                    placeholder))),
+            showCharCount && (renderer.h("span", { class: "form-ctrl__label-charcount" }, maxlength
+                ? maxlength - charCount + ' left'
+                : charCount + ' characters'))));
+    }
+};
+const FormControlWrap = (props, children) => {
+    const { rtl, floatLabel, label, moreId, helperEndId, type, hasHelperSlot, showInlineError, errorMessage, hasHelperEndSlot, } = props;
+    return (renderer.h("div", { class: {
+            'form-ctrl': true,
+            'has-label': label !== null && !floatLabel,
+            'has-float-label': label !== null && floatLabel,
+            'has-helper-end': hasHelperEndSlot,
+            rtl,
+            [props.class]: true,
+        } },
+        renderer.h("div", { class: "form-ctrl__wrapper" },
+            !floatLabel ? renderLabel({ ...props }) : '',
+            renderer.h("div", { class: {
+                    'form-ctrl__input': true,
+                    'form-ctrl__textarea': type === 'textarea',
+                } },
+                floatLabel && renderLabel({ ...props, rtl }),
+                children),
+            (showInlineError || hasHelperSlot) && (renderer.h("div", { class: "form-ctrl__more", id: moreId },
+                showInlineError && (renderer.h("div", { class: "form-ctrl__error", "aria-live": "polite" }, errorMessage)),
+                renderer.h("div", { class: "form-ctrl__helper" },
+                    renderer.h("slot", { name: "helper" }))))),
+        hasHelperEndSlot && (renderer.h("div", { class: "form-ctrl__helper-end", id: helperEndId },
+            renderer.h("slot", { name: "helper-end" })))));
+};
+const FormControl = (props, children) => {
+    const { ref, onClearText, clearControl, readonly, disabled, control, endSlot, endValueSlot, startSlot, showInlineError, } = props;
+    const clickThrough = () => {
+        control.setFocus();
+    };
+    return (renderer.h("div", { class: "form-ctrl__input-wrap", ref: (el) => {
+            if (ref)
+                ref(el);
+        } },
+        renderer.h("span", { class: "form-ctrl__slot-start" },
+            renderer.h("slot", { name: "start" }),
+            startSlot),
+        children,
+        clearControl && !readonly && !disabled && (renderer.h("button", { type: "button", class: "icon form-ctrl__clear-btn", tabindex: "-1", onTouchStart: onClearText, onMouseDown: onClearText },
+            renderer.h("nano-icon", { name: "light/xmark", role: "img", ariaLabel: "Clear content" }))),
+        showInlineError && (renderer.h("div", { onClick: clickThrough, class: "form-ctrl__validation-icon" },
+            renderer.h("nano-icon", { name: "solid/circle-xmark", class: "form-ctrl__error-icon" }),
+            renderer.h("nano-icon", { name: "solid/circle-check", class: "form-ctrl__success-icon" }))),
+        renderer.h("span", { class: "form-ctrl__slot-value-end", onClick: clickThrough },
+            renderer.h("slot", { name: "value-end" }),
+            endValueSlot),
+        renderer.h("span", { class: "form-ctrl__slot-end" },
+            renderer.h("slot", { name: "end" }),
+            endSlot)));
+};
+
+exports.FormControl = FormControl;
+exports.FormControlWrap = FormControlWrap;

package/dist/cjs/fullscreen-DGiusO_n.js

@@ -0,0 +1,132 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var nanoSlides_entry = require('./nano-slides-D5q9vQ4P.js');
+require('./index-DYD4xvxr.js');
+require('./renderer-SkVn69pT.js');
+
+nanoSlides_entry.Flickity.createMethods.push('_createFullscreen');
+const proto = nanoSlides_entry.Flickity.prototype;
+proto._createFullscreen = function () {
+    this.isFullscreen = false;
+    if (!this.options.fullscreen) {
+        return;
+    }
+    // buttons
+    this.viewFullscreenButton = new FullscreenButton('view', this);
+    this.exitFullscreenButton = new FullscreenButton('exit', this);
+    this.on('activate', this._changeFullscreenActive);
+    this.on('deactivate', this._changeFullscreenActive);
+};
+// ----- activation ----- //
+proto._changeFullscreenActive = function () {
+    const childMethod = this.isActive ? 'appendChild' : 'removeChild';
+    this.element[childMethod](this.viewFullscreenButton.element);
+    this.element[childMethod](this.exitFullscreenButton.element);
+    // activate or deactivate buttons
+    const activeMethod = this.isActive ? 'activate' : 'deactivate';
+    this.viewFullscreenButton[activeMethod]();
+    this.exitFullscreenButton[activeMethod]();
+};
+// ----- view, exit, toggle ----- //
+proto.viewFullscreen = function () {
+    this._changeFullscreen(true);
+    this.focus();
+};
+proto.exitFullscreen = function () {
+    this._changeFullscreen(false);
+};
+proto._changeFullscreen = function (isView) {
+    if (this.isFullscreen == isView) {
+        return;
+    }
+    this.isFullscreen = isView;
+    const classMethod = isView ? 'add' : 'remove';
+    document.documentElement.classList[classMethod]('is-flickity-fullscreen');
+    this.element.classList[classMethod]('is-fullscreen');
+    this.resize();
+    // HACK extra reposition on fullscreen for images
+    if (this.isFullscreen) {
+        this.reposition();
+    }
+    this.dispatchEvent('fullscreenChange', null, [isView]);
+};
+proto.toggleFullscreen = function () {
+    this._changeFullscreen(!this.isFullscreen);
+};
+// ----- setGallerySize ----- //
+// overwrite so fullscreen cells are full height
+const setGallerySize = proto.setGallerySize;
+proto.setGallerySize = function () {
+    if (!this.options.setGallerySize) {
+        return;
+    }
+    if (this.isFullscreen) {
+        // remove height style on fullscreen
+        this.viewport.style.height = '';
+    }
+    else {
+        // otherwise, do normal
+        setGallerySize.call(this);
+    }
+};
+// ----- keyboard ----- //
+// ESC key closes full screen
+nanoSlides_entry.Flickity.keyboardHandlers[27] = function () {
+    this.exitFullscreen();
+};
+// ----- FullscreenButton ----- //
+function FullscreenButton(name, flickity) {
+    this.name = name;
+    this.createButton();
+    this.createIcon();
+    // events
+    // trigger viewFullscreen or exitFullscreen on click
+    this.onClick = function () {
+        flickity[name + 'Fullscreen']();
+    };
+    this.clickHandler = this.onClick.bind(this);
+}
+FullscreenButton.prototype.createButton = function () {
+    const element = (this.element = document.createElement('button'));
+    element.className =
+        'flickity-button flickity-fullscreen-button ' +
+            'flickity-fullscreen-button-' +
+            this.name;
+    // prevent button from submitting form
+    element.setAttribute('type', 'button');
+    // set label
+    const label = capitalize(this.name + ' full-screen');
+    element.setAttribute('aria-label', label);
+    element.title = label;
+};
+function capitalize(text) {
+    return text[0].toUpperCase() + text.slice(1);
+}
+const svgURI = 'http://www.w3.org/2000/svg';
+const pathDirections = {
+    view: 'M15,20,7,28h5v4H0V20H4v5l8-8Zm5-5,8-8v5h4V0H20V4h5l-8,8Z',
+    exit: 'M32,3l-7,7h5v4H18V2h4V7l7-7ZM3,32l7-7v5h4V18H2v4H7L0,29Z',
+};
+FullscreenButton.prototype.createIcon = function () {
+    const svg = document.createElementNS(svgURI, 'svg');
+    svg.setAttribute('class', 'flickity-button-icon');
+    svg.setAttribute('viewBox', '0 0 32 32');
+    // path & direction
+    const path = document.createElementNS(svgURI, 'path');
+    const direction = pathDirections[this.name];
+    path.setAttribute('d', direction);
+    // put it together
+    svg.appendChild(path);
+    this.element.appendChild(svg);
+};
+FullscreenButton.prototype.activate = function () {
+    this.element.addEventListener('click', this.clickHandler);
+};
+FullscreenButton.prototype.deactivate = function () {
+    this.element.removeEventListener('click', this.clickHandler);
+};
+// @ts-ignore
+nanoSlides_entry.Flickity.FullscreenButton = FullscreenButton;

package/dist/cjs/index-BV7Y7Zvi.js

@@ -0,0 +1,198 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+'use strict';
+
+var index = require('./index-DYD4xvxr.js');
+
+const appendToMap = (map, propName, value) => {
+    const items = map.get(propName);
+    if (!items) {
+        map.set(propName, [value]);
+    }
+    else if (!items.includes(value)) {
+        items.push(value);
+    }
+};
+const debounce = (fn, ms) => {
+    let timeoutId;
+    return (...args) => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = 0;
+            fn(...args);
+        }, ms);
+    };
+};
+
+/**
+ * Check if a possible element isConnected.
+ * The property might not be there, so we check for it.
+ *
+ * We want it to return true if isConnected is not a property,
+ * otherwise we would remove these elements and would not update.
+ *
+ * Better leak in Edge than to be useless.
+ */
+const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
+const cleanupElements = debounce((map) => {
+    for (let key of map.keys()) {
+        map.set(key, map.get(key).filter(isConnected));
+    }
+}, 2_000);
+const stencilSubscription = () => {
+    if (typeof index.getRenderingRef !== 'function') {
+        // If we are not in a stencil project, we do nothing.
+        // This function is not really exported by @stencil/core.
+        return {};
+    }
+    const elmsToUpdate = new Map();
+    return {
+        dispose: () => elmsToUpdate.clear(),
+        get: (propName) => {
+            const elm = index.getRenderingRef();
+            if (elm) {
+                appendToMap(elmsToUpdate, propName, elm);
+            }
+        },
+        set: (propName) => {
+            const elements = elmsToUpdate.get(propName);
+            if (elements) {
+                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            }
+            cleanupElements(elmsToUpdate);
+        },
+        reset: () => {
+            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            cleanupElements(elmsToUpdate);
+        },
+    };
+};
+
+const unwrap = (val) => (typeof val === 'function' ? val() : val);
+const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
+    const unwrappedState = unwrap(defaultState);
+    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const handlers = {
+        dispose: [],
+        get: [],
+        set: [],
+        reset: [],
+    };
+    const reset = () => {
+        // When resetting the state, the default state may be a function - unwrap it to invoke it.
+        // otherwise, the state won't be properly reset
+        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        handlers.reset.forEach((cb) => cb());
+    };
+    const dispose = () => {
+        // Call first dispose as resetting the state would
+        // cause less updates ;)
+        handlers.dispose.forEach((cb) => cb());
+        reset();
+    };
+    const get = (propName) => {
+        handlers.get.forEach((cb) => cb(propName));
+        return states.get(propName);
+    };
+    const set = (propName, value) => {
+        const oldValue = states.get(propName);
+        if (shouldUpdate(value, oldValue, propName)) {
+            states.set(propName, value);
+            handlers.set.forEach((cb) => cb(propName, value, oldValue));
+        }
+    };
+    const state = (typeof Proxy === 'undefined'
+        ? {}
+        : new Proxy(unwrappedState, {
+            get(_, propName) {
+                return get(propName);
+            },
+            ownKeys(_) {
+                return Array.from(states.keys());
+            },
+            getOwnPropertyDescriptor() {
+                return {
+                    enumerable: true,
+                    configurable: true,
+                };
+            },
+            has(_, propName) {
+                return states.has(propName);
+            },
+            set(_, propName, value) {
+                set(propName, value);
+                return true;
+            },
+        }));
+    const on = (eventName, callback) => {
+        handlers[eventName].push(callback);
+        return () => {
+            removeFromArray(handlers[eventName], callback);
+        };
+    };
+    const onChange = (propName, cb) => {
+        const unSet = on('set', (key, newValue) => {
+            if (key === propName) {
+                cb(newValue);
+            }
+        });
+        // We need to unwrap the defaultState because it might be a function.
+        // Otherwise we might not be sending the right reset value.
+        const unReset = on('reset', () => cb(unwrap(defaultState)[propName]));
+        return () => {
+            unSet();
+            unReset();
+        };
+    };
+    const use = (...subscriptions) => {
+        const unsubs = subscriptions.reduce((unsubs, subscription) => {
+            if (subscription.set) {
+                unsubs.push(on('set', subscription.set));
+            }
+            if (subscription.get) {
+                unsubs.push(on('get', subscription.get));
+            }
+            if (subscription.reset) {
+                unsubs.push(on('reset', subscription.reset));
+            }
+            if (subscription.dispose) {
+                unsubs.push(on('dispose', subscription.dispose));
+            }
+            return unsubs;
+        }, []);
+        return () => unsubs.forEach((unsub) => unsub());
+    };
+    const forceUpdate = (key) => {
+        const oldValue = states.get(key);
+        handlers.set.forEach((cb) => cb(key, oldValue, oldValue));
+    };
+    return {
+        state,
+        get,
+        set,
+        on,
+        onChange,
+        use,
+        dispose,
+        reset,
+        forceUpdate,
+    };
+};
+const removeFromArray = (array, item) => {
+    const index = array.indexOf(item);
+    if (index >= 0) {
+        array[index] = array[array.length - 1];
+        array.length--;
+    }
+};
+
+const createStore = (defaultState, shouldUpdate) => {
+    const map = createObservableMap(defaultState, shouldUpdate);
+    map.use(stencilSubscription());
+    return map;
+};
+
+exports.createStore = createStore;