vviinn-widgets 2.7.2 → 2.8.0

package/dist/vviinn-widgets/search-filters.entry.js

@@ -0,0 +1,76 @@
+import { r as registerInstance, f as createEvent, h, e as Host, g as getElement } from './index-de3e14da.js';
+import { a as imageSearchState } from './imageSearch.store-b28bddb0.js';
+import { b as CheckIcon } from './index-44058ea2.js';
+import './number-171db649.js';
+import './NonEmptyArray-947ab7b3.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.js';
+
+const searchFiltersCss = ":host{display:grid;grid-gap:1rem}.filters{display:flex;flex-direction:row;flex-wrap:wrap;gap:0.5rem}.filter{align-items:center;-webkit-animation-duration:0.25s;animation-duration:0.25s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-name:scalein;animation-name:scalein;border:1px solid lightgray;cursor:pointer;display:flex;flex-direction:row;grid-gap:8px;height:-webkit-max-content;height:-moz-max-content;height:max-content;min-width:-webkit-max-content;min-width:-moz-max-content;min-width:max-content;padding:0.1rem;transform:scale(0);transition-property:background;transition-duration:0.25s;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:6px 16px}.filter.active{border:1px solid black;padding:6px 8px}.filter:hover{border:1px solid gray}.show-more{display:flex}.show-more.hidden{display:none}.show-more::after{content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;height:16px;margin-top:1px;margin-left:8px}.show-more.active::after{transform:rotateX(180deg)}@-webkit-keyframes scalein{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}@keyframes scalein{from{opacity:0;transform:scale(0.5)}to{opacity:1;transform:scale(1)}}@media (max-width: 415px){.show-more::after{transform:rotate(-90deg)}.show-more.active::after{transform:rotate(90deg)}}@media (max-width: 800px){.filters{flex-wrap:nowrap;overflow-x:scroll;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;grid-gap:unset}.filter{scroll-snap-align:end;margin-right:0.5rem}}";
+
+const FILTERS_COUNT = 5;
+const ACTIVE_FILTER_CLASSNAME = ".filter.active";
+const getFilterId = (filter) => filter.href.split("/").reverse()[0];
+let SearchFilters = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.filterSelected = createEvent(this, "filterSelected", 7);
+    this.filter = null;
+    this.selectedCategoryId = null;
+    this.hideFilters = true;
+  }
+  handleFilterSelection(filter) {
+    return this.isFilterSelected(filter)
+      ? this.clearSelectedFilter()
+      : this.selectFilter(filter);
+  }
+  selectFilter(filter) {
+    this.selectedCategoryId = getFilterId(filter);
+    imageSearchState.activeIonLink = filter;
+    this.filterSelected.emit("select");
+  }
+  clearSelectedFilter() {
+    this.selectedCategoryId = null;
+    imageSearchState.activeIonLink = undefined;
+    this.findSelectedFilter().blur();
+    this.filterSelected.emit("deselect");
+  }
+  findSelectedFilter() {
+    return this.el.shadowRoot.querySelector(ACTIVE_FILTER_CLASSNAME);
+  }
+  toggleFilters() {
+    this.hideFilters = !this.hideFilters;
+  }
+  handleEnter(ev, f) {
+    if (ev.key !== "Enter")
+      return;
+    this.handleFilterSelection(f);
+  }
+  isFilterSelected(filterLink) {
+    return this.selectedCategoryId === getFilterId(filterLink);
+  }
+  render() {
+    return (h(Host, { exportparts: "filter, show-more-filters" }, h("div", { class: "filters" }, this.filter.filters
+      .filter((_, i) => (this.hideFilters ? i < FILTERS_COUNT : true))
+      .map((f, n) => (h("div", { role: "button", tabindex: "0", part: this.isFilterSelected(f) ? "filter active" : "filter", class: {
+        filter: true,
+        active: this.selectedCategoryId === getFilterId(f),
+      }, style: { "animation-delay": `${n * 10}ms` }, onPointerUp: (ev) => {
+        ev.stopPropagation();
+        this.handleFilterSelection(f);
+      }, onKeyPress: (ev) => this.handleEnter(ev, f) }, this.isFilterSelected(f) ? h(CheckIcon, null) : null, f.name))), h("div", { class: {
+        filter: true,
+        "show-more": true,
+        hidden: this.filter.filters.length <= FILTERS_COUNT,
+        active: !this.hideFilters,
+      }, role: "button", tabindex: "0", "aria-role": "button", onClick: () => this.toggleFilters(), onKeyPress: (ev) => {
+        if (ev.key === "Enter") {
+          this.toggleFilters();
+        }
+      }, part: "show-more-filters" }, this.hideFilters ? "Zeige mehr" : "Zeige weniger"))));
+  }
+  get el() { return getElement(this); }
+};
+SearchFilters.style = searchFiltersCss;
+
+export { SearchFilters as search_filters };

package/dist/vviinn-widgets/shadow-css-c1fdfa9f.js

@@ -0,0 +1,389 @@
+/*
+ Stencil Client Platform v2.9.0 | MIT Licensed | https://stenciljs.com
+ */
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ *
+ * This file is a port of shadowCSS from webcomponents.js to TypeScript.
+ * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js
+ * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts
+ */
+const safeSelector = (selector) => {
+    const placeholders = [];
+    let index = 0;
+    let content;
+    // Replaces attribute selectors with placeholders.
+    // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator.
+    selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => {
+        const replaceBy = `__ph-${index}__`;
+        placeholders.push(keep);
+        index++;
+        return replaceBy;
+    });
+    // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.
+    // WS and "+" would otherwise be interpreted as selector separators.
+    content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => {
+        const replaceBy = `__ph-${index}__`;
+        placeholders.push(exp);
+        index++;
+        return pseudo + replaceBy;
+    });
+    const ss = {
+        content,
+        placeholders,
+    };
+    return ss;
+};
+const restoreSafeSelector = (placeholders, content) => {
+    return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]);
+};
+const _polyfillHost = '-shadowcsshost';
+const _polyfillSlotted = '-shadowcssslotted';
+// note: :host-context pre-processed to -shadowcsshostcontext.
+const _polyfillHostContext = '-shadowcsscontext';
+const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)';
+const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');
+const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');
+const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');
+const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';
+const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/;
+const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];
+const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$';
+const _polyfillHostRe = /-shadowcsshost/gim;
+const _colonHostRe = /:host/gim;
+const _colonSlottedRe = /::slotted/gim;
+const _colonHostContextRe = /:host-context/gim;
+const _commentRe = /\/\*\s*[\s\S]*?\*\//g;
+const stripComments = (input) => {
+    return input.replace(_commentRe, '');
+};
+const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g;
+const extractCommentsWithHash = (input) => {
+    return input.match(_commentWithHashRe) || [];
+};
+const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g;
+const _curlyRe = /([{}])/g;
+const OPEN_CURLY = '{';
+const CLOSE_CURLY = '}';
+const BLOCK_PLACEHOLDER = '%BLOCK%';
+const processRules = (input, ruleCallback) => {
+    const inputWithEscapedBlocks = escapeBlocks(input);
+    let nextBlockIndex = 0;
+    return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {
+        const selector = m[2];
+        let content = '';
+        let suffix = m[4];
+        let contentPrefix = '';
+        if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {
+            content = inputWithEscapedBlocks.blocks[nextBlockIndex++];
+            suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);
+            contentPrefix = '{';
+        }
+        const cssRule = {
+            selector,
+            content,
+        };
+        const rule = ruleCallback(cssRule);
+        return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;
+    });
+};
+const escapeBlocks = (input) => {
+    const inputParts = input.split(_curlyRe);
+    const resultParts = [];
+    const escapedBlocks = [];
+    let bracketCount = 0;
+    let currentBlockParts = [];
+    for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {
+        const part = inputParts[partIndex];
+        if (part === CLOSE_CURLY) {
+            bracketCount--;
+        }
+        if (bracketCount > 0) {
+            currentBlockParts.push(part);
+        }
+        else {
+            if (currentBlockParts.length > 0) {
+                escapedBlocks.push(currentBlockParts.join(''));
+                resultParts.push(BLOCK_PLACEHOLDER);
+                currentBlockParts = [];
+            }
+            resultParts.push(part);
+        }
+        if (part === OPEN_CURLY) {
+            bracketCount++;
+        }
+    }
+    if (currentBlockParts.length > 0) {
+        escapedBlocks.push(currentBlockParts.join(''));
+        resultParts.push(BLOCK_PLACEHOLDER);
+    }
+    const strEscapedBlocks = {
+        escapedString: resultParts.join(''),
+        blocks: escapedBlocks,
+    };
+    return strEscapedBlocks;
+};
+const insertPolyfillHostInCssText = (selector) => {
+    selector = selector
+        .replace(_colonHostContextRe, _polyfillHostContext)
+        .replace(_colonHostRe, _polyfillHost)
+        .replace(_colonSlottedRe, _polyfillSlotted);
+    return selector;
+};
+const convertColonRule = (cssText, regExp, partReplacer) => {
+    // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule
+    return cssText.replace(regExp, (...m) => {
+        if (m[2]) {
+            const parts = m[2].split(',');
+            const r = [];
+            for (let i = 0; i < parts.length; i++) {
+                const p = parts[i].trim();
+                if (!p)
+                    break;
+                r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));
+            }
+            return r.join(',');
+        }
+        else {
+            return _polyfillHostNoCombinator + m[3];
+        }
+    });
+};
+const colonHostPartReplacer = (host, part, suffix) => {
+    return host + part.replace(_polyfillHost, '') + suffix;
+};
+const convertColonHost = (cssText) => {
+    return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);
+};
+const colonHostContextPartReplacer = (host, part, suffix) => {
+    if (part.indexOf(_polyfillHost) > -1) {
+        return colonHostPartReplacer(host, part, suffix);
+    }
+    else {
+        return host + part + suffix + ', ' + part + ' ' + host + suffix;
+    }
+};
+const convertColonSlotted = (cssText, slotScopeId) => {
+    const slotClass = '.' + slotScopeId + ' > ';
+    const selectors = [];
+    cssText = cssText.replace(_cssColonSlottedRe, (...m) => {
+        if (m[2]) {
+            const compound = m[2].trim();
+            const suffix = m[3];
+            const slottedSelector = slotClass + compound + suffix;
+            let prefixSelector = '';
+            for (let i = m[4] - 1; i >= 0; i--) {
+                const char = m[5][i];
+                if (char === '}' || char === ',') {
+                    break;
+                }
+                prefixSelector = char + prefixSelector;
+            }
+            const orgSelector = prefixSelector + slottedSelector;
+            const addedSelector = `${prefixSelector.trimRight()}${slottedSelector.trim()}`;
+            if (orgSelector.trim() !== addedSelector.trim()) {
+                const updatedSelector = `${addedSelector}, ${orgSelector}`;
+                selectors.push({
+                    orgSelector,
+                    updatedSelector,
+                });
+            }
+            return slottedSelector;
+        }
+        else {
+            return _polyfillHostNoCombinator + m[3];
+        }
+    });
+    return {
+        selectors,
+        cssText,
+    };
+};
+const convertColonHostContext = (cssText) => {
+    return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);
+};
+const convertShadowDOMSelectors = (cssText) => {
+    return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);
+};
+const makeScopeMatcher = (scopeSelector) => {
+    const lre = /\[/g;
+    const rre = /\]/g;
+    scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]');
+    return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');
+};
+const selectorNeedsScoping = (selector, scopeSelector) => {
+    const re = makeScopeMatcher(scopeSelector);
+    return !re.test(selector);
+};
+const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {
+    // In Android browser, the lastIndex is not reset when the regex is used in String.replace()
+    _polyfillHostRe.lastIndex = 0;
+    if (_polyfillHostRe.test(selector)) {
+        const replaceBy = `.${hostSelector}`;
+        return selector
+            .replace(_polyfillHostNoCombinatorRe, (_, selector) => {
+            return selector.replace(/([^:]*)(:*)(.*)/, (_, before, colon, after) => {
+                return before + replaceBy + colon + after;
+            });
+        })
+            .replace(_polyfillHostRe, replaceBy + ' ');
+    }
+    return scopeSelector + ' ' + selector;
+};
+const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {
+    const isRe = /\[is=([^\]]*)\]/g;
+    scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);
+    const className = '.' + scopeSelector;
+    const _scopeSelectorPart = (p) => {
+        let scopedP = p.trim();
+        if (!scopedP) {
+            return '';
+        }
+        if (p.indexOf(_polyfillHostNoCombinator) > -1) {
+            scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);
+        }
+        else {
+            // remove :host since it should be unnecessary
+            const t = p.replace(_polyfillHostRe, '');
+            if (t.length > 0) {
+                const matches = t.match(/([^:]*)(:*)(.*)/);
+                if (matches) {
+                    scopedP = matches[1] + className + matches[2] + matches[3];
+                }
+            }
+        }
+        return scopedP;
+    };
+    const safeContent = safeSelector(selector);
+    selector = safeContent.content;
+    let scopedSelector = '';
+    let startIndex = 0;
+    let res;
+    const sep = /( |>|\+|~(?!=))\s*/g;
+    // If a selector appears before :host it should not be shimmed as it
+    // matches on ancestor elements and not on elements in the host's shadow
+    // `:host-context(div)` is transformed to
+    // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`
+    // the `div` is not part of the component in the 2nd selectors and should not be scoped.
+    // Historically `component-tag:host` was matching the component so we also want to preserve
+    // this behavior to avoid breaking legacy apps (it should not match).
+    // The behavior should be:
+    // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)
+    // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a
+    //   `:host-context(tag)`)
+    const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;
+    // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present
+    let shouldScope = !hasHost;
+    while ((res = sep.exec(selector)) !== null) {
+        const separator = res[1];
+        const part = selector.slice(startIndex, res.index).trim();
+        shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+        const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;
+        scopedSelector += `${scopedPart} ${separator} `;
+        startIndex = sep.lastIndex;
+    }
+    const part = selector.substring(startIndex);
+    shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;
+    scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;
+    // replace the placeholders with their original values
+    return restoreSafeSelector(safeContent.placeholders, scopedSelector);
+};
+const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {
+    return selector
+        .split(',')
+        .map((shallowPart) => {
+        if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {
+            return shallowPart.trim();
+        }
+        if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {
+            return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();
+        }
+        else {
+            return shallowPart.trim();
+        }
+    })
+        .join(', ');
+};
+const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {
+    return processRules(cssText, (rule) => {
+        let selector = rule.selector;
+        let content = rule.content;
+        if (rule.selector[0] !== '@') {
+            selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);
+        }
+        else if (rule.selector.startsWith('@media') ||
+            rule.selector.startsWith('@supports') ||
+            rule.selector.startsWith('@page') ||
+            rule.selector.startsWith('@document')) {
+            content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);
+        }
+        const cssRule = {
+            selector: selector.replace(/\s{2,}/g, ' ').trim(),
+            content,
+        };
+        return cssRule;
+    });
+};
+const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {
+    cssText = insertPolyfillHostInCssText(cssText);
+    cssText = convertColonHost(cssText);
+    cssText = convertColonHostContext(cssText);
+    const slotted = convertColonSlotted(cssText, slotScopeId);
+    cssText = slotted.cssText;
+    cssText = convertShadowDOMSelectors(cssText);
+    if (scopeId) {
+        cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);
+    }
+    cssText = cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);
+    cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 ');
+    return {
+        cssText: cssText.trim(),
+        slottedSelectors: slotted.selectors,
+    };
+};
+const scopeCss = (cssText, scopeId, commentOriginalSelector) => {
+    const hostScopeId = scopeId + '-h';
+    const slotScopeId = scopeId + '-s';
+    const commentsWithHash = extractCommentsWithHash(cssText);
+    cssText = stripComments(cssText);
+    const orgSelectors = [];
+    if (commentOriginalSelector) {
+        const processCommentedSelector = (rule) => {
+            const placeholder = `/*!@___${orgSelectors.length}___*/`;
+            const comment = `/*!@${rule.selector}*/`;
+            orgSelectors.push({ placeholder, comment });
+            rule.selector = placeholder + rule.selector;
+            return rule;
+        };
+        cssText = processRules(cssText, (rule) => {
+            if (rule.selector[0] !== '@') {
+                return processCommentedSelector(rule);
+            }
+            else if (rule.selector.startsWith('@media') ||
+                rule.selector.startsWith('@supports') ||
+                rule.selector.startsWith('@page') ||
+                rule.selector.startsWith('@document')) {
+                rule.content = processRules(rule.content, processCommentedSelector);
+                return rule;
+            }
+            return rule;
+        });
+    }
+    const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);
+    cssText = [scoped.cssText, ...commentsWithHash].join('\n');
+    if (commentOriginalSelector) {
+        orgSelectors.forEach(({ placeholder, comment }) => {
+            cssText = cssText.replace(placeholder, comment);
+        });
+    }
+    scoped.slottedSelectors.forEach((slottedSelector) => {
+        cssText = cssText.replace(slottedSelector.orgSelector, slottedSelector.updatedSelector);
+    });
+    return cssText;
+};
+
+export { scopeCss };

package/dist/{collection/components/vviinn-carousel/vviinn-carousel.js → vviinn-widgets/vviinn-carousel.entry.js}

@@ -1,15 +1,17 @@
-import { Component, Host, h, Element, State, Prop } from "@stencil/core";
-import { chunksOf } from "fp-ts/lib/Array";
-import { ChevronIcon } from "../vviinn-icons";
+import { r as registerInstance, h, e as Host, g as getElement } from './index-de3e14da.js';
+import { _ as _Array } from './Array-bdfc75db.js';
+import { c as ChevronIcon } from './index-44058ea2.js';
+import './NonEmptyArray-947ab7b3.js';
+
+const vviinnCarouselCss = ":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#E0E0E0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) button{border-radius:2px}:host(.grid) button{border-radius:50%}button{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}button{fill:#525252}button.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";
+
 const COLUMNS_NUMBER_CSS_VAR = "--vviinn-carousel-columns-internal";
 const CAROUSEL_WIDTH_CSS_VAR = "--vviinn-carousel-content-width";
 const CAROUSEL_IMAGE_WIDTH_CSS_VAR = "--vviinn-carousel-image-width";
 const CONTENT_GROUP_CSS_CLASS = "items-group";
-/**
- * @part carousel-button
- **/
-export class VviinnCarousel {
-  constructor() {
+let VviinnCarousel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
     this.moveDirection = "right";
     this.contentGroups = [];
     this.activeContentGroup = 0;
@@ -187,7 +189,7 @@ export class VviinnCarousel {
   }
   renderGrid() {
     const recommendations = this.renderRecommendationsElements();
-    const grouppedContent = chunksOf(this.getColumnsNumber())(recommendations);
+    const grouppedContent = _Array.chunksOf(this.getColumnsNumber())(recommendations);
     return this.renderRecommendationGroups(grouppedContent);
   }
   renderBullets() {
@@ -199,107 +201,10 @@ export class VviinnCarousel {
       }, onClick: () => this.scroll(index) })));
   }
   render() {
-    return (h(Host, { class: this.getClassMap() },
-      h("div", { class: Object.assign({ body: true }, this.getClassMap()) },
-        h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" },
-          h(ChevronIcon, null)),
-        h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()),
-        h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" },
-          h(ChevronIcon, null))),
-      this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
-  }
-  static get is() { return "vviinn-carousel"; }
-  static get originalStyleUrls() { return {
-    "$": ["vviinn-carousel.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["vviinn-carousel.css"]
-  }; }
-  static get properties() { return {
-    "mode": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "CarouselMode",
-        "resolved": "\"continuity\" | \"grid\"",
-        "references": {
-          "CarouselMode": {
-            "location": "local"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mode",
-      "reflect": false,
-      "defaultValue": "\"continuity\""
-    },
-    "imageWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "image-width",
-      "reflect": false,
-      "defaultValue": "140"
-    },
-    "showScroll": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "show-scroll",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "recommendations": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Recommendation[]",
-        "resolved": "{ groupId?: string; productId?: string; title?: string; deeplink?: string; brand?: string; productType?: string; image?: { original?: string; thumbnail?: string; }; price?: { actual?: number; sale?: number; }; }[]",
-        "references": {
-          "Recommendation": {
-            "location": "import",
-            "path": "../../recommendation/recommendation"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "moveDirection": {},
-    "contentGroups": {},
-    "activeContentGroup": {}
-  }; }
-  static get elementRef() { return "el"; }
-}
+    return (h(Host, { class: this.getClassMap() }, h("div", { class: Object.assign({ body: true }, this.getClassMap()) }, h("button", { class: "prev", onClick: () => this.showPrev(), part: "carousel-button" }, h(ChevronIcon, null)), h("div", { class: this.getContentClassMap(), onScroll: () => this.processScrollbarWidth() }, this.renderRecommendations()), h("button", { class: "next", onClick: () => this.showNext(), part: "carousel-button" }, h(ChevronIcon, null))), this.showBullets() ? (h("div", { class: "bullets" }, this.renderBullets())) : ("")));
+  }
+  get el() { return getElement(this); }
+};
+VviinnCarousel.style = vviinnCarouselCss;
+
+export { VviinnCarousel as vviinn_carousel };

package/dist/vviinn-widgets/vviinn-detected-object.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-de3e14da.js';
+import { _ as _function } from './NonEmptyArray-947ab7b3.js';
+import { O as Option } from './number-171db649.js';
+import { a as imageSearchState, u as fromAlt, v as foldValueObject, w as scaleWithSized, x as center, r as makeRectangularSearchRequest, y as detectedObjectEq } from './imageSearch.store-b28bddb0.js';
+import './Handler-edcb46f4.js';
+import './Array-bdfc75db.js';
+
+const vviinnDetectedObjectCss = ":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--size:32px;--x-position:0;--y-position:0;background:rgba(22, 22, 22, 0.5);border-radius:50%;border:none;cursor:pointer;display:block;height:var(--size);position:absolute;transition:opacity 0.25s;width:var(--size);z-index:2;transform:translate(calc(var(--x-position) - (var(--size) * 0.5)), calc(var(--y-position) - (var(--size) * 0.5)));transition:background 0.1 ease-in-out}:host(:hover){background:rgba(22, 22, 22, 0.75)}:host(.active){background:var(--color-primary, var(--color-primary-system))!important;border:2px solid white}:host::after{--size:32px;border-radius:50%;content:\"\";cursor:pointer;display:block;height:calc(var(--size) * 0.25);transform:translate(calc(-50% + var(--size) * 0.5), calc(-50% + var(--size) * 0.5));width:calc(var(--size) * 0.25);background:white}";
+
+let VviinnDetectedObject = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.detectedObjectClicked = createEvent(this, "detectedObjectClicked", 7);
+    this.position = ["0", "0"];
+  }
+  getObjectPosition() {
+    return _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+      const objectRectangle = fromAlt(foldValueObject(this.detectedObject).rectangle);
+      const { x, y } = _function.pipe(objectRectangle, scaleWithSized(bounds), center);
+      return [`${x}px`, `${y}px`];
+    }), Option.getOrElse(() => ["0", "0"]));
+  }
+  selectDetectedObject() {
+    _function.pipe(imageSearchState.imageBounds, Option.map((bounds) => {
+      const rectangle = foldValueObject(this.detectedObject).rectangle;
+      const transformedRect = fromAlt(rectangle);
+      const scaledRect = scaleWithSized(bounds)(transformedRect);
+      imageSearchState.detectedObject = this.detectedObject;
+      imageSearchState.searchArea = Option.some(scaledRect);
+    }));
+    makeRectangularSearchRequest();
+    this.detectedObjectClicked.emit();
+  }
+  isActive() {
+    if (!this.detectedObject)
+      return false;
+    if (!imageSearchState.detectedObject)
+      return false;
+    const thisObject = foldValueObject(this.detectedObject);
+    const savedObject = foldValueObject(imageSearchState.detectedObject);
+    return detectedObjectEq.equals(thisObject, savedObject);
+  }
+  render() {
+    return (h(Host, { class: {
+        active: this.isActive(),
+      }, onClick: () => this.selectDetectedObject(), style: {
+        "--x-position": this.getObjectPosition()[0],
+        "--y-position": this.getObjectPosition()[1],
+      } }));
+  }
+};
+VviinnDetectedObject.style = vviinnDetectedObjectCss;
+
+export { VviinnDetectedObject as vviinn_detected_object };