@lmvz-ds/components 0.11.4

package/dist/esm/index.js

@@ -0,0 +1,85 @@
+export { c as clearIconCache } from './icons-B71gAZmE.js';
+import { r as runPromise } from './Effect-D9S7OTyY.js';
+import './index-smGPjoDX.js';
+
+const variants = ['primary', 'secondary', 'tertiary'];
+const scaleValues = ['small', 'default', 'large'];
+const sizes = ['xs', 'sm', 'md', 'lg'];
+const textSizes = [...sizes, 'xl'];
+const inputTypes = ['text', 'email', 'password', 'tel', 'url', 'search', 'number'];
+const iconSizes = [...sizes, 'inherit'];
+const iconWeights = ['thin', 'medium', 'bold', 'filled'];
+const iconNames = [
+    'Logo',
+    'actions',
+    'adduser',
+    'alert',
+    'apple',
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'book',
+    'bookmark',
+    'checkmark',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'close-l',
+    'close-sm',
+    'cog',
+    'computer',
+    'dashboard',
+    'delete',
+    'download',
+    'edit',
+    'external',
+    'facebook',
+    'favorite',
+    'filter',
+    'group',
+    'hide',
+    'home',
+    'info',
+    'instagram',
+    'letter',
+    'linkedin',
+    'logout',
+    'map',
+    'minus',
+    'navigation',
+    'plus',
+    'qr-scan',
+    'question',
+    'reader',
+    'reset',
+    'school',
+    'search',
+    'send',
+    'settings',
+    'share',
+    'shopping-cart',
+    'show',
+    'snapchat',
+    'sort',
+    'speech-bubble',
+    'star',
+    'student',
+    'upload',
+    'user',
+    'warn-circle',
+    'warn-triangle',
+    'whatsapp',
+    'world',
+    'x',
+    'youtube',
+];
+
+function run(effect) {
+    return runPromise(effect).catch(error => {
+        console.error('Unhandled error in Effect:', error);
+    });
+}
+
+export { iconNames, iconSizes, iconWeights, inputTypes, run, scaleValues, sizes, textSizes, variants };

package/dist/esm/lmvz-action.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-smGPjoDX.js';
+
+const lmvzActionCss = () => `:host{display:block}`;
+
+const LmvzAction = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.actionClick = createEvent(this, "actionClick");
+    }
+    actionClick;
+    _onClick(event) {
+        this.actionClick.emit(event);
+    }
+    render() {
+        return (h(Host, { key: '71303bfe6ac64a96edd21800ae5e8c43a3a38c23', onClick: this._onClick.bind(this) }, h("slot", { key: '94922fdfd355e7e4d1b78bedb80ae814c186b199' })));
+    }
+};
+LmvzAction.style = lmvzActionCss();
+
+export { LmvzAction as lmvz_action };

package/dist/esm/lmvz-button.entry.js

@@ -0,0 +1,70 @@
+import { g as getElement, r as registerInstance, c as createEvent, h, H as Host } from './index-smGPjoDX.js';
+import { c as classNames } from './index-Bt32KzDW.js';
+import { i as inheritAriaAttributes, f as findFormByRef } from './component-B3JVFwO1.js';
+import { E as ElementActivationController } from './element-activation-controller-CN0JX9-m.js';
+import { R as ReactiveControllerHost, A as AriaValidationController } from './aria-validation-controller-C7nQzCCq.js';
+import './_commonjsHelpers-B85MJLTf.js';
+import './Effect-D9S7OTyY.js';
+
+const lmvzButtonCss = () => ` @layer           lmvz-ds.reset,           lmvz-ds.theme,           lmvz-ds.components,           lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } :host {         button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-align: center;   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  button.secondary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); }  button.secondary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    button.small {   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router); }     display: contents; } ::slotted(*) {   --lmvz-component-color: var(--lmvz-button-color); } `;
+
+const LmvzButton = class extends ReactiveControllerHost {
+    get el() { return getElement(this); }
+    inheritedAttributes = {};
+    formEl = null;
+    formButtonEl = null;
+    lmvzActivation;
+    get ti() {
+        return 0;
+    }
+    scale = 'default';
+    variant = 'secondary';
+    disabled = false;
+    type = 'button';
+    form;
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.lmvzActivation = createEvent(this, "lmvzActivation");
+        this.addController(new AriaValidationController(this));
+        this.addController(new ElementActivationController(this, {
+            localHandler: this.handleClick.bind(this),
+            keys: ['Enter'],
+        }));
+    }
+    connectedCallback() {
+        this.inheritedAttributes = inheritAriaAttributes(this.el);
+    }
+    renderHiddenButton() {
+        const formEl = (this.formEl = findFormByRef(this.form, this.el));
+        if (!formEl)
+            return;
+        const { formButtonEl } = this;
+        if (formButtonEl !== null && formEl.contains(formButtonEl))
+            return;
+        const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+        newFormButtonEl.type = 'submit';
+        newFormButtonEl.style.display = 'none';
+        newFormButtonEl.disabled = this.disabled;
+        formEl.appendChild(newFormButtonEl);
+    }
+    submitForm(ev) {
+        if (this.formEl && this.formButtonEl) {
+            ev.preventDefault();
+            this.formButtonEl.click();
+        }
+    }
+    handleClick = (ev) => {
+        if (this.type === 'submit') {
+            this.submitForm(ev);
+        }
+    };
+    render() {
+        this.renderHiddenButton();
+        return (h(Host, { key: '1c96281344dd604e2e4c919ea72907a9e934e5c6', "aria-disabled": this.disabled ? 'true' : null }, h("button", { key: '16728ce6fee7d121e7120aa993031777f6d8570e', disabled: this.disabled, class: classNames(this.variant, { [this.scale ?? '']: !!this.scale, disabled: this.disabled }), ...this.inheritedAttributes }, h("slot", { key: 'e1b0d95953bdbd42885eecdeef8b457070e7e247' }))));
+    }
+    static get delegatesFocus() { return true; }
+};
+LmvzButton.style = lmvzButtonCss();
+
+export { LmvzButton as lmvz_button };

package/dist/esm/lmvz-card.entry.js

@@ -0,0 +1,31 @@
+import { r as registerInstance, c as createEvent, a as getAssetPath, h, H as Host } from './index-smGPjoDX.js';
+
+const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } .sc-lmvz-card-h {            button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-align: center;   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  button.secondary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); }  button.secondary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    button.small {   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router); }     display: flex;   min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem);   flex-direction: column;   align-items: flex-start;    border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card {   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   flex-direction: column;   justify-content: center;   align-items: center;   align-self: stretch; } .bottom.sc-lmvz-card {   display: flex;   min-width: 150px;   padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));   flex-direction: column;   align-items: flex-start;   align-self: stretch; } .title.sc-lmvz-card {   margin: 0;   display: flex;   justify-content: center;   align-items: center;   align-self: stretch;    padding-bottom: var(--lmvz-global-s4, 4px);   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2     Router); } .description.sc-lmvz-card {   display: flex;   margin: 0;   padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-items: flex-start;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .image-wrapper.sc-lmvz-card {   aspect-ratio: 4 / 3;   width: 100%;   background-size: cover;   background-position: center;   flex: 1 0 0;   align-self: stretch;   border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card {   margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card {   display: flex;   justify-content: center;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   flex: 1 0 0; }`;
+
+const LmvzCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.primaryAction = createEvent(this, "primaryAction");
+    }
+    cardTitle;
+    imageUrl;
+    description;
+    primaryActionLabel = '';
+    primaryAction;
+    _onPrimaryClick() {
+        this.primaryAction.emit();
+    }
+    _onOverflowClick(event) {
+        console.log(event);
+    }
+    render() {
+        const imgStyle = {
+            backgroundImage: `url(${this.imageUrl ?? getAssetPath('./card-placeholder.svg')})`,
+        };
+        return (h(Host, { key: 'd17230c2587b87c1fa5514875e15b7d7930857bc', role: "article" }, h("div", { key: 'bf8c631ee99651a10c01774a4da20142d04342db', class: "top" }, h("div", { key: 'fb8224ec00bc8e0c5b1668a6ed63e36b52a11d55', class: "image-wrapper", style: imgStyle }, h("div", { key: '26c65e0c8083faec2854a332e83b5e8abaf8c2fd', class: "chip-slot" }, h("slot", { key: 'b5406113b36fcb23dd08cc75e34ae64923357cd3', name: "chip" })))), h("div", { key: '1eb0b6682830da00fa006fcaa9763e8d33adf446', class: "bottom" }, h("header", { key: '5930f28a48304296be40fc337a6990a1444cdcdb' }, h("h2", { key: '0138cdc21b5ac8b40b40988937ba24292532e069', class: "title" }, this.cardTitle)), h("p", { key: '45a9e7947ae99d1db67efa4aa04c3186d02a97c7', class: "description" }, this.description), h("div", { key: '940a8a5e7e38f65efa0d7bb25a56131e4456c248', class: "actions" }, h("button", { key: '35b0a7ae68fb9ac8c62e181b0087a312a85da185', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), h("button", { key: '6d391205d50a8ab92336bad0bd70fd24f00b5cda', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, h("span", { key: 'dca656b4c1758c1fdcc3c7d971e58b6a63fcd0d1', class: "icon-placeholder" }, "..."))))));
+    }
+    static get assetsDirs() { return ["../../assets"]; }
+};
+LmvzCard.style = lmvzCardCss();
+
+export { LmvzCard as lmvz_card };

package/dist/esm/lmvz-chip.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host } from './index-smGPjoDX.js';
+
+const lmvzChipCss = () => `:host{display:block}`;
+
+const LmvzChip = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    text;
+    render() {
+        return h(Host, { key: 'b247f41d22bcf77998bf5a49669f1aa8d7fd3a63' }, this.text);
+    }
+};
+LmvzChip.style = lmvzChipCss();
+
+export { LmvzChip as lmvz_chip };

package/dist/esm/lmvz-components.js

@@ -0,0 +1,21 @@
+import { p as promiseResolve, b as bootstrapLazy } from './index-smGPjoDX.js';
+export { s as setNonce } from './index-smGPjoDX.js';
+import { g as globalScripts } from './app-globals-DQuL1Twl.js';
+
+/*
+ Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = import.meta.url;
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await globalScripts();
+  return bootstrapLazy([["lmvz-header",[[769,"lmvz-header",{"role":[2561],"lmvzActiveNav":[1,"lmvz-active-nav"]},null,{"lmvzActiveNav":[{"handleActiveNavChange":0}]}]]],["lmvz-action",[[257,"lmvz-action"]]],["lmvz-button",[[785,"lmvz-button",{"ti":[2562,"tabindex"],"scale":[513],"variant":[513],"disabled":[516],"type":[1],"form":[1]}]]],["lmvz-card",[[774,"lmvz-card",{"cardTitle":[1,"card-title"],"imageUrl":[1,"image-url"],"description":[1],"primaryActionLabel":[1,"primary-action-label"]}]]],["lmvz-chip",[[513,"lmvz-chip",{"text":[1]}]]],["lmvz-input",[[838,"lmvz-input",{"value":[1025],"label":[1],"helperText":[1,"helper-text"],"placeholder":[1],"disabled":[516],"readonly":[516],"required":[516],"name":[1],"type":[1],"errorMessage":[1,"error-message"],"autocomplete":[1],"inputmode":[1],"autocorrect":[1],"autocapitalize":[1],"spellcheck":[4],"autofocus":[4],"minlength":[2],"maxlength":[2],"pattern":[1],"min":[8],"max":[8],"step":[8],"form":[1],"error":[6660],"nativeError":[32],"setValue":[64],"focusInput":[64],"blurInput":[64],"select":[64],"checkValidity":[64],"reportValidity":[64],"getInputElement":[64]},null,{"value":[{"handleValueChange":0}],"disabled":[{"handleDisabledChange":0}]}]]],["lmvz-menuitem",[[774,"lmvz-menuitem",{"role":[2561],"ti":[2562,"tabindex"]}]]],["lmvz-icon",[[514,"lmvz-icon",{"icon":[513],"weight":[513],"size":[513],"ariaLabel":[513,"aria-label"],"iconData":[32],"visible":[32]},null,{"icon":[{"loadIconPathData":0}]}]]]], options);
+});

package/dist/esm/lmvz-header.entry.js

@@ -0,0 +1,132 @@
+import { g as getElement, r as registerInstance, h, H as Host } from './index-smGPjoDX.js';
+import { g as getDeepActiveElement, c as canReceiveFocus } from './component-B3JVFwO1.js';
+import { R as ReactiveControllerHost, A as AriaValidationController } from './aria-validation-controller-C7nQzCCq.js';
+import './Effect-D9S7OTyY.js';
+
+class ListKeyboardNavigationController {
+    host;
+    elements = [];
+    constructor(host) {
+        this.host = host;
+    }
+    hostDidRender() {
+        this.host.el.addEventListener('keydown', this.handleKeydown);
+    }
+    updateElements(elements) {
+        this.elements = elements;
+    }
+    handleKeydown = (event) => {
+        const { key } = event;
+        if (!['ArrowDown', 'ArrowRight', 'ArrowUp', 'ArrowLeft'].includes(key))
+            return;
+        const activeElement = getDeepActiveElement(document);
+        const nextElement = this.getNextFocusableElement(activeElement, ['ArrowDown', 'ArrowRight'].includes(key) ? 'down' : 'up');
+        if (nextElement) {
+            event.preventDefault();
+            nextElement.focus?.();
+        }
+    };
+    getNextFocusableElement(current, direction) {
+        const { elements } = this;
+        const currentIndex = elements.indexOf(current);
+        if (currentIndex === -1)
+            return null;
+        let nextIndex = null;
+        if (direction === 'down') {
+            nextIndex = (currentIndex + 1) % elements.length;
+        }
+        else if (direction === 'up') {
+            nextIndex = (currentIndex - 1 + elements.length) % elements.length;
+        }
+        if (nextIndex == null)
+            return null;
+        const candidate = elements[nextIndex];
+        if (!canReceiveFocus(candidate))
+            return this.getNextFocusableElement(candidate, direction);
+        return candidate;
+    }
+}
+
+const lmvzHeaderCss = () => `:host{display:flex;width:100vw;flex-direction:row;align-items:center;box-sizing:border-box;background-color:var(--lmvz-semantic-color-surface-primary, #ffffff);--lmvz-header-x-spacing-level-1:var(--lmvz-dimension-8-28, clamp(0.5rem, 0.2rem + 1.29vw, 1.75rem));--lmvz-header-x-spacing-level-2:var(--lmvz-component-buttongroup-wrapper-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));padding:var(--lmvz-dimension-8-16, clamp(0.5rem, 0.38rem + 0.52vw, 1rem)) var(--lmvz-header-x-spacing-level-1);gap:var(--lmvz-header-x-spacing-level-1);.brand{display:inline-flex;justify-content:center;align-items:center}#fallback-logo-lmvz{height:34px;width:auto}nav{flex-grow:1}.primary-menubar{display:flex;flex-direction:row;align-items:center}.secondary-menubar{display:flex;flex-direction:row;align-items:center;margin-left:var(--lmvz-header-x-spacing-level-2);padding-left:var(--lmvz-header-x-spacing-level-2);border-left:1px solid var(--lmvz-semantic-color-border-default, #e0e0e0)}}`;
+
+const LmvzHeader = class extends ReactiveControllerHost {
+    get el() { return getElement(this); }
+    primarySlot;
+    secondarySlot;
+    secondaryNav;
+    keyboardNavigationController = new ListKeyboardNavigationController(this);
+    get primaryMenuitems() {
+        return this.primarySlot.assignedElements({ flatten: false });
+    }
+    get secondaryMenuitems() {
+        return this.secondarySlot.assignedElements({ flatten: true });
+    }
+    get role() {
+        return 'banner';
+    }
+    lmvzActiveNav;
+    get secondarySlotName() {
+        return `connect-nav-${this.lmvzActiveNav}`;
+    }
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.addController(new AriaValidationController(this, { reValidateOnPropChanges: true }));
+        this.addController(this.keyboardNavigationController);
+    }
+    handleActiveNavChange() {
+        this.updateElementsActive();
+    }
+    componentDidLoad() {
+        this.primarySlot.addEventListener('slotchange', this.handlePrimaryNavChange.bind(this));
+        this.handlePrimaryNavChange();
+        this.secondarySlot.addEventListener('slotchange', this.handleSecondaryNavChange.bind(this));
+    }
+    handlePrimaryNavChange() {
+        const items = this.primaryMenuitems;
+        if (!items.length) {
+            console.warn('Primary slot has no assigned elements. Please add navigation items to the primary slot.');
+            return;
+        }
+        items.forEach(el => {
+            el.setAttribute('aria-haspopup', 'true');
+            el.setAttribute('aria-controls', `nav-secondary`);
+        });
+        this.updateElementsActive();
+    }
+    handleSecondaryNavChange() {
+        const items = this.secondaryMenuitems;
+        if (!items.length) {
+            return;
+        }
+        this.keyboardNavigationController.updateElements([...this.primaryMenuitems, ...this.secondaryMenuitems]);
+    }
+    updateElementsActive() {
+        const items = this.primaryMenuitems;
+        let label;
+        items.forEach(el => {
+            const isActive = el.id === this.lmvzActiveNav;
+            if (isActive)
+                label = el.textContent || el.id;
+            el.setAttribute('aria-expanded', isActive ? 'true' : 'false');
+        });
+        this.secondaryNav.setAttribute('aria-label', `Untermenü für ${label}`);
+    }
+    delegateFocus() {
+        const firstFocusable = this.primaryMenuitems[0];
+        if (firstFocusable) {
+            firstFocusable.focus();
+        }
+    }
+    render() {
+        return (h(Host, { key: '58934683ff442801eb34f025ac809631f93a27e8', onFocus: this.delegateFocus.bind(this) }, h("div", { key: '35d3eadfabb70f83b313f946c8d31f9c223e8344', class: "brand" }, h("slot", { key: '5ce98314d980d63e1c87f508d96119aca2e702a9', name: "brand" }, h("lmvz-icon", { key: 'b24e61a9071d81948d506a8c545e012d3f0e5dd2', id: "fallback-logo-lmvz", icon: "Logo", size: "inherit", "aria-label": "Lehrmittelverlag Z\u00FCrich" }))), h("nav", { key: '1d5cc9010ef90e6cebc8a7b054db595f35f9e040', "aria-label": "Hauptnavigation" }, h("div", { key: '488a1b1544242562b57d76169f1988d84c611de4', role: "menubar", class: "primary-menubar" }, h("slot", { key: '59c6dd1442290931ed9a55f7bacc65ea4bb9ff6d', name: "nav-primary", ref: el => (this.primarySlot = el) }), h("separator", { key: '2729f0e8b115614c50c4a16b6684a3bdb21856b8' }), h("div", { key: '6b5bed5951bad9173fefdc78039e71c4ccc120b2', role: "menu", id: "nav-secondary", class: "secondary-menubar", hidden: !this.lmvzActiveNav, ref: el => (this.secondaryNav = el) }, h("slot", { key: '02f5a13e8851372c1698e3f786a8757a0a09c32f', name: this.secondarySlotName, ref: el => (this.secondarySlot = el) })))), h("div", { key: '53aafe8139bcea27d3039f64a48974cdb5aac5f9', class: "actions" }, h("slot", { key: 'f12ee19831073253e6ba8e251ba31ec403c21035', name: "actions" }))));
+    }
+    static get watchers() { return {
+        "lmvzActiveNav": [{
+                "handleActiveNavChange": 0
+            }]
+    }; }
+};
+LmvzHeader.style = lmvzHeaderCss();
+
+export { LmvzHeader as lmvz_header };

package/dist/esm/lmvz-icon.entry.js

@@ -0,0 +1,74 @@
+import { g as getElement, r as registerInstance, h, H as Host } from './index-smGPjoDX.js';
+import { r as runPromise, t as tapError, l as logError, c as catchAll, s as succeed } from './Effect-D9S7OTyY.js';
+import { R as ReactiveControllerHost, A as AriaValidationController } from './aria-validation-controller-C7nQzCCq.js';
+import { f as fetchIconSvg, e as emptyDefaultSvg } from './icons-B71gAZmE.js';
+
+const lmvzIconCss = () => `.sc-lmvz-icon-h{--lmvz-icon-color:var(--lmvz-component-color, var(--lmvz-semantic-color-on-surface-input-primary, #000000));display:inline-block;line-height:0;svg{display:block}svg>path{stroke:var(--lmvz-icon-color);fill:none}}[size='xs'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem));height:var(--lmvz-component-icon-size-xs, clamp(0.75rem, 0.69rem + 0.26vw, 1rem))}}[size='sm'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem));height:var(--lmvz-component-icon-size-sm, clamp(0.88rem, 0.81rem + 0.26vw, 1.13rem))}}[size='md'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem));height:var(--lmvz-component-icon-size-md, clamp(1rem, 0.88rem + 0.52vw, 1.5rem))}}[size='lg'].sc-lmvz-icon-h{svg{width:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem));height:var(--lmvz-component-icon-size-lg, clamp(1.5rem, 1.38rem + 0.52vw, 2rem))}}[size='inherit'].sc-lmvz-icon-h{svg{width:inherit;height:inherit}}[weight='light'].sc-lmvz-icon-h{svg>path{stroke-width:1}}[weight='medium'].sc-lmvz-icon-h{svg>path{stroke-width:1.5}}[weight='bold'].sc-lmvz-icon-h{svg>path{stroke-width:2}}[weight='filled'].sc-lmvz-icon-h{svg>path{stroke-width:2;fill:var(--lmvz-icon-color)}}`;
+
+const LmvzIcon = class extends ReactiveControllerHost {
+    intersectionObserver;
+    get el() { return getElement(this); }
+    icon;
+    weight = 'medium';
+    size = 'md';
+    iconData;
+    visible = false;
+    ariaLabel;
+    get ariaHidden() {
+        return !this.ariaLabel;
+    }
+    constructor(hostRef) {
+        super();
+        registerInstance(this, hostRef);
+        this.addController(new AriaValidationController(this));
+    }
+    connectedCallback() {
+        this.waitUntilVisible(() => {
+            this.visible = true;
+            this.loadIconPathData();
+        });
+    }
+    disconnectedCallback() {
+        if (this.intersectionObserver) {
+            this.intersectionObserver.disconnect();
+            this.intersectionObserver = null;
+        }
+    }
+    async loadIconPathData() {
+        const { icon, visible } = this;
+        if (!icon || !visible) {
+            return;
+        }
+        this.iconData = await runPromise(fetchIconSvg(this.icon).pipe(tapError(error => logError(`Error loading icon "${icon}":`, error.message, error.cause, error.stack)), catchAll(() => succeed(emptyDefaultSvg()))));
+    }
+    render() {
+        return h(Host, { key: '50d0f96ec5085a47ca7783e5232dfb503fa32d29', role: "img", "aria-hidden": `${this.ariaHidden}`, innerHTML: this.iconData });
+    }
+    waitUntilVisible(callback, rootMargin = 50) {
+        if (typeof window === 'undefined' || !window.IntersectionObserver) {
+            callback();
+            return;
+        }
+        this.intersectionObserver = new IntersectionObserver(entries => {
+            entries.some(entry => {
+                if (entry.isIntersecting) {
+                    this.intersectionObserver.disconnect();
+                    this.intersectionObserver = null;
+                    callback();
+                    return true;
+                }
+                return false;
+            });
+        }, { rootMargin: `${rootMargin}px` });
+        this.intersectionObserver.observe(this.el);
+    }
+    static get assetsDirs() { return ["../../assets/icons"]; }
+    static get watchers() { return {
+        "icon": [{
+                "loadIconPathData": 0
+            }]
+    }; }
+};
+LmvzIcon.style = lmvzIconCss();
+
+export { LmvzIcon as lmvz_icon };