@limetech/lime-elements 37.68.0 → 37.69.1

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

@@ -0,0 +1,81 @@
+import { r as registerInstance, c as createEvent, h } from './index-6156b4fd.js';
+import { i as isItem } from './isItem-b0459122.js';
+import { g as getIconName } from './get-icon-props-0b65f85e.js';
+
+const cardCss = "@charset \"UTF-8\";*{box-sizing:border-box;min-width:0;min-height:0}:host(limel-card){display:flex;border-radius:var(--card-border-radius, 0.95rem)}section{box-sizing:border-box;display:flex;gap:0.5rem;flex-direction:column;border-radius:var(--card-border-radius, 0.95rem);border:1px solid rgb(var(--contrast-500));padding:0.25rem;background-color:var(--card-background-color, var(--lime-elevated-surface-background-color))}section:focus{outline:none}section:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}:host(limel-card[orientation=landscape]) section{flex-direction:row}:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--card-background-color, var(--lime-elevated-surface-background-color))}:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:hover,:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:focus,:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--card-background-color, var(--lime-elevated-surface-background-color));box-shadow:var(--button-shadow-hovered)}:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:hover,:host(limel-card[clickable]:not([disabled=true]):not([disabled])) section:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limel-card[clickable]:hover) section{border-color:transparent}.body{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem}img{transition:filter 0.6s ease;object-fit:cover;border-radius:calc(var(--card-border-radius, 0.95rem) / 1.4)}:host(limel-card[orientation=portrait]) img{width:100%}:host(limel-card[orientation=landscape]) img{max-width:40%;height:100%}:host(limel-card:hover) img{transition-duration:0.2s;filter:saturate(1.3)}limel-markdown{padding:0.5rem 0.75rem}header{display:flex;justify-content:center;gap:0.5rem;padding:0.25rem 0.75rem}:host(limel-card[orientation=landscape]) header{padding-top:0.5rem}header:has(limel-icon){padding-left:0.25rem}header .headings{flex-grow:1;display:flex;flex-direction:column;gap:0.125rem}header limel-icon{flex-shrink:0;width:2rem}header h1{font-size:1.125rem;font-weight:500;color:var(--card-heading-color, rgb(var(--contrast-1100)));letter-spacing:-0.03125rem}header h2{font-size:0.875rem;font-weight:400;color:var(--card-subheading-color, rgb(var(--contrast-1000)))}header h1,header h2{word-break:break-word;hyphens:auto;-webkit-hyphens:auto;margin:0}limel-action-bar{padding:0.5rem;margin-left:auto}";
+
+const Card = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.actionSelected = createEvent(this, "actionSelected", 7);
+    this.handleActionSelect = (event) => {
+      event.stopPropagation();
+      if (isItem(event.detail)) {
+        this.actionSelected.emit(event.detail);
+      }
+    };
+    this.heading = undefined;
+    this.subheading = undefined;
+    this.image = undefined;
+    this.icon = undefined;
+    this.value = undefined;
+    this.actions = [];
+    this.clickable = false;
+    this.orientation = 'portrait';
+  }
+  render() {
+    return (h("section", { tabindex: this.clickable ? 0 : '' }, this.renderImage(), h("div", { class: "body" }, this.renderHeader(), this.renderSlot(), this.renderValue(), this.renderActionBar())));
+  }
+  renderImage() {
+    if (!this.image) {
+      return;
+    }
+    return h("img", { src: this.image.src, alt: this.image.alt, loading: "lazy" });
+  }
+  renderHeader() {
+    if (!this.heading && !this.subheading && !this.icon) {
+      return;
+    }
+    return (h("header", null, this.renderIcon(), h("div", { class: "headings" }, this.renderHeading(), this.renderSubheading())));
+  }
+  renderIcon() {
+    var _a;
+    const icon = getIconName(this.icon);
+    const color = typeof this.icon !== 'string' ? (_a = this.icon) === null || _a === void 0 ? void 0 : _a.color : undefined;
+    if (!icon) {
+      return;
+    }
+    return (h("limel-icon", { style: {
+        color: `${color}`,
+      }, badge: true, name: icon }));
+  }
+  renderHeading() {
+    if (!this.heading) {
+      return;
+    }
+    return h("h1", null, this.heading);
+  }
+  renderSubheading() {
+    if (!this.subheading) {
+      return;
+    }
+    return h("h2", null, this.subheading);
+  }
+  renderSlot() {
+    return h("slot", { name: "component" });
+  }
+  renderValue() {
+    return h("limel-markdown", { value: this.value });
+  }
+  renderActionBar() {
+    if (!this.actions.length) {
+      return;
+    }
+    return (h("limel-action-bar", { actions: this.actions, onItemSelected: this.handleActionSelect }));
+  }
+};
+Card.style = cardCss;
+
+export { Card as limel_card };
+
+//# sourceMappingURL=limel-card.entry.js.map

package/dist/esm/limel-card.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-card.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,6zGAA6zG;;MC2Bh0G,IAAI;;;;IAgJL,uBAAkB,GAAG,CACzB,KAAiD;MAEjD,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE;QACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OAC1C;KACJ,CAAC;;;;;;mBA/GsD,EAAE;qBAO9B,KAAK;uBAOc,UAAU;;EAQlD,MAAM;IACT,QACI,eAAS,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAG,CAAC,GAAG,EAAE,IACrC,IAAI,CAAC,WAAW,EAAE,EACnB,WAAK,KAAK,EAAC,MAAM,IACZ,IAAI,CAAC,YAAY,EAAE,EACnB,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,eAAe,EAAE,CACrB,CACA,EACZ;GACL;EAEO,WAAW;IACf,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;MACb,OAAO;KACV;IAED,OAAO,WAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,OAAO,EAAC,MAAM,GAAG,CAAC;GAC3E;EAEO,YAAY;IAChB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACjD,OAAO;KACV;IAED,QACI,kBACK,IAAI,CAAC,UAAU,EAAE,EAClB,WAAK,KAAK,EAAC,UAAU,IAChB,IAAI,CAAC,aAAa,EAAE,EACpB,IAAI,CAAC,gBAAgB,EAAE,CACtB,CACD,EACX;GACL;EAEO,UAAU;;IACd,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACpC,MAAM,KAAK,GACP,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,GAAG,SAAS,CAAC;IAEjE,IAAI,CAAC,IAAI,EAAE;MACP,OAAO;KACV;IAED,QACI,kBACI,KAAK,EAAE;QACH,KAAK,EAAE,GAAG,KAAK,EAAE;OACpB,EACD,KAAK,EAAE,IAAI,EACX,IAAI,EAAE,IAAI,GACZ,EACJ;GACL;EAEO,aAAa;IACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,OAAO,CAAM,CAAC;GAClC;EAEO,gBAAgB;IACpB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MAClB,OAAO;KACV;IAED,OAAO,cAAK,IAAI,CAAC,UAAU,CAAM,CAAC;GACrC;EAEO,UAAU;IACd,OAAO,YAAM,IAAI,EAAC,WAAW,GAAG,CAAC;GACpC;EAEO,WAAW;IACf,OAAO,sBAAgB,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;GAChD;EAWO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;MACtB,OAAO;KACV;IAED,QACI,wBACI,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,cAAc,EAAE,IAAI,CAAC,kBAAkB,GACzC,EACJ;GACL;;;;;;","names":[],"sources":["./src/components/card/card.scss?tag=limel-card&encapsulation=shadow","./src/components/card/card.tsx"],"sourcesContent":["/**\n* @prop --card-heading-color: color of the heading. Defaults to `--contrast-1100`;\n* @prop --card-subheading-color: color of the sub heading. Defaults to `--contrast-1000`;\n* @prop --card-border-radius: border radius of the card. Defaults to `0.95rem`;\n* @prop --card-background-color: background color of the card.\n*/\n\n@use '../../style/mixins';\n\n$default-border-radius: 0.95rem;\n\n* {\n    box-sizing: border-box;\n    min-width: 0;\n    min-height: 0;\n}\n\n:host(limel-card) {\n    display: flex;\n    border-radius: var(--card-border-radius, $default-border-radius);\n}\n\nsection {\n    box-sizing: border-box;\n    @include mixins.visualize-keyboard-focus;\n\n    display: flex;\n    gap: 0.5rem;\n\n    flex-direction: column;\n    :host(limel-card[orientation='landscape']) & {\n        flex-direction: row;\n    }\n\n    border-radius: var(--card-border-radius, $default-border-radius);\n    border: 1px solid rgb(var(--contrast-500));\n\n    padding: 0.25rem;\n    background-color: var(\n        --card-background-color,\n        var(--lime-elevated-surface-background-color)\n    );\n\n    :host(limel-card[clickable]:not([disabled='true']):not([disabled])) & {\n        @include mixins.is-flat-clickable(\n            $background-color:\n                var(\n                    --card-background-color,\n                    var(--lime-elevated-surface-background-color)\n                ),\n            $background-color--hovered:\n                var(\n                    --card-background-color,\n                    var(--lime-elevated-surface-background-color)\n                )\n        );\n    }\n\n    :host(limel-card[clickable]:hover) & {\n        border-color: transparent;\n    }\n}\n\n.body {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n}\n\nimg {\n    transition: filter 0.6s ease;\n    object-fit: cover;\n    border-radius: calc(\n        var(--card-border-radius, $default-border-radius) / 1.4\n    );\n    :host(limel-card[orientation='portrait']) & {\n        width: 100%;\n    }\n\n    :host(limel-card[orientation='landscape']) & {\n        max-width: 40%;\n        height: 100%;\n    }\n\n    :host(limel-card:hover) & {\n        transition-duration: 0.2s;\n        filter: saturate(1.3);\n    }\n}\n\nlimel-markdown {\n    padding: 0.5rem 0.75rem;\n}\n\nheader {\n    display: flex;\n    justify-content: center;\n\n    gap: 0.5rem;\n\n    padding: 0.25rem 0.75rem;\n    :host(limel-card[orientation='landscape']) & {\n        padding-top: 0.5rem;\n    }\n\n    &:has(limel-icon) {\n        padding-left: 0.25rem;\n    }\n\n    .headings {\n        flex-grow: 1;\n        display: flex;\n        flex-direction: column;\n        gap: 0.125rem;\n    }\n\n    limel-icon {\n        flex-shrink: 0;\n        width: 2rem;\n    }\n\n    h1 {\n        font-size: 1.125rem;\n        font-weight: 500;\n        color: var(--card-heading-color, rgb(var(--contrast-1100)));\n        letter-spacing: -0.03125rem; // 0.5px\n    }\n\n    h2 {\n        font-size: 0.875rem;\n        font-weight: 400;\n        color: var(--card-subheading-color, rgb(var(--contrast-1000)));\n    }\n\n    h1,\n    h2 {\n        word-break: break-word;\n        hyphens: auto;\n        -webkit-hyphens: auto;\n        margin: 0;\n    }\n}\n\nlimel-action-bar {\n    padding: 0.5rem;\n    margin-left: auto;\n}\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { Image } from '../../global/shared-types/image.types';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport { isItem } from '../action-bar/isItem';\nimport { getIconName } from '../icon/get-icon-props';\nimport { ListSeparator } from '../../global/shared-types/separator.types';\nimport { ActionBarItem } from '../action-bar/action-bar.types';\n\n/**\n * Card is a component that displays content about a single topic,\n * in a structured way. It can contain a header, and some supporting media such\n * as an image or an icon, a body of text, or optional actions.\n *\n * @exampleComponent limel-example-card-basic\n * @exampleComponent limel-example-card-image\n * @exampleComponent limel-example-card-actions\n * @exampleComponent limel-example-card-clickable\n * @exampleComponent limel-example-card-orientation\n * @exampleComponent limel-example-card-slot\n * @exampleComponent limel-example-card-styling\n * @beta\n */\n@Component({\n    tag: 'limel-card',\n    shadow: true,\n    styleUrl: 'card.scss',\n})\nexport class Card {\n    /**\n     * Heading of the card,\n     * to provide a short title about the context.\n     */\n    @Prop({ reflect: true })\n    public heading?: string;\n\n    /**\n     * Subheading of the card\n     * to provide a short description of the context.\n     */\n    @Prop({ reflect: true })\n    public subheading?: string;\n\n    /**\n     * A hero image to display in the card,\n     * to enrich the content with visual information.\n     */\n    @Prop()\n    public image?: Image;\n\n    /**\n     * An icon, to display along with the heading and subheading.\n     */\n    @Prop({ reflect: true })\n    public icon?: string | Icon;\n\n    /**\n     * The content of the card.\n     * Supports markdown, to provide a rich text experience.\n     */\n    @Prop()\n    public value?: string;\n\n    /**\n     * Actions to display in the card,\n     * to provide the user with options to interact with the content.\n     */\n    @Prop()\n    public actions?: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * When true, improve the accessibility of the component and hints the user\n     * that the card can be interacted width.\n     */\n    @Prop({ reflect: true })\n    public clickable: boolean = false;\n\n    /**\n     * The orientation of the card,\n     * specially useful when the card has an image.\n     */\n    @Prop({ reflect: true })\n    public orientation: 'landscape' | 'portrait' = 'portrait';\n\n    /**\n     * Fired when a action bar item has been clicked.\n     */\n    @Event()\n    public actionSelected: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return (\n            <section tabindex={this.clickable ? 0 : ''}>\n                {this.renderImage()}\n                <div class=\"body\">\n                    {this.renderHeader()}\n                    {this.renderSlot()}\n                    {this.renderValue()}\n                    {this.renderActionBar()}\n                </div>\n            </section>\n        );\n    }\n\n    private renderImage() {\n        if (!this.image) {\n            return;\n        }\n\n        return <img src={this.image.src} alt={this.image.alt} loading=\"lazy\" />;\n    }\n\n    private renderHeader() {\n        if (!this.heading && !this.subheading && !this.icon) {\n            return;\n        }\n\n        return (\n            <header>\n                {this.renderIcon()}\n                <div class=\"headings\">\n                    {this.renderHeading()}\n                    {this.renderSubheading()}\n                </div>\n            </header>\n        );\n    }\n\n    private renderIcon() {\n        const icon = getIconName(this.icon);\n        const color =\n            typeof this.icon !== 'string' ? this.icon?.color : undefined;\n\n        if (!icon) {\n            return;\n        }\n\n        return (\n            <limel-icon\n                style={{\n                    color: `${color}`,\n                }}\n                badge={true}\n                name={icon}\n            />\n        );\n    }\n\n    private renderHeading() {\n        if (!this.heading) {\n            return;\n        }\n\n        return <h1>{this.heading}</h1>;\n    }\n\n    private renderSubheading() {\n        if (!this.subheading) {\n            return;\n        }\n\n        return <h2>{this.subheading}</h2>;\n    }\n\n    private renderSlot() {\n        return <slot name=\"component\" />;\n    }\n\n    private renderValue() {\n        return <limel-markdown value={this.value} />;\n    }\n\n    private handleActionSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.actionSelected.emit(event.detail);\n        }\n    };\n\n    private renderActionBar() {\n        if (!this.actions.length) {\n            return;\n        }\n\n        return (\n            <limel-action-bar\n                actions={this.actions}\n                onItemSelected={this.handleActionSelect}\n            />\n        );\n    }\n}\n"],"version":3}

package/dist/esm/limel-dynamic-label_2.entry.js

@@ -0,0 +1,86 @@
+import { r as registerInstance, h, H as Host } from './index-6156b4fd.js';
+import { g as getIconName } from './get-icon-props-0b65f85e.js';
+
+const dynamicLabelCss = "*{box-sizing:border-box;min-width:0}:host(limel-dynamic-label){--limel-dynamic-label-min-height:1.75rem;display:flex;gap:0.5rem;align-items:flex-start;border-radius:0.5rem;min-width:0}limel-icon{--limel-icon-svg-margin:0.125rem;border-radius:0.25rem;flex-shrink:0;width:var(--limel-dynamic-label-min-height);color:rgb(var(--contrast-900))}label{flex-grow:1;font-size:0.8125rem;line-height:normal;color:var(--mdc-theme-on-surface);padding-top:0.375rem}";
+
+const DynamicLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.value = undefined;
+    this.defaultLabel = {};
+    this.labels = [];
+  }
+  render() {
+    var _a, _b;
+    const label = this.labels.find((l) => l.value === this.value);
+    return [
+      this.renderIcon((_a = label === null || label === void 0 ? void 0 : label.icon) !== null && _a !== void 0 ? _a : this.defaultLabel.icon),
+      this.renderLabel((_b = label === null || label === void 0 ? void 0 : label.text) !== null && _b !== void 0 ? _b : this.defaultLabel.text),
+    ];
+  }
+  renderIcon(icon) {
+    const iconName = getIconName(icon);
+    if (!iconName) {
+      return;
+    }
+    let iconColor;
+    let iconBackgroundColor;
+    if (typeof icon === 'object') {
+      iconColor = icon.color;
+      iconBackgroundColor = icon.backgroundColor;
+    }
+    const iconProps = {
+      role: 'presentation',
+      name: iconName,
+      style: {
+        color: iconColor,
+        'background-color': iconBackgroundColor,
+      },
+    };
+    return h("limel-icon", Object.assign({}, iconProps));
+  }
+  renderLabel(label = '') {
+    return h("label", null, label);
+  }
+};
+DynamicLabel.style = dynamicLabelCss;
+
+const helperLineCss = ":host(limel-helper-line){transition:opacity 0.2s ease;box-sizing:border-box;display:grid;min-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-size:0.6875rem;line-height:normal;color:rgb(var(--contrast-1200))}div{display:flex;justify-content:space-between;gap:0.75rem;overflow:hidden;padding:0 1rem}:host(limel-helper-line.invalid) .helper-text{color:var(--mdc-theme-error)}.counter{flex-shrink:0;margin-left:auto}.helper-text,.counter{padding-top:0.125rem}:host(limel-helper-line){transition:grid-template-rows var(--limel-h-l-grid-template-rows-transition-speed, 0.46s) cubic-bezier(1, 0.09, 0, 0.89);grid-template-rows:var(--limel-h-l-grid-template-rows, 1fr)}:host(limel-helper-line.hide){--limel-h-l-grid-template-rows-transition-speed:0.3s;--limel-h-l-grid-template-rows:0fr}";
+
+const HelperLine = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.hasContent = () => {
+      return !!(this.maxLength > 0 ||
+        (this.helperText && this.helperText.length > 0));
+    };
+    this.renderHelperText = () => {
+      if (!this.helperText) {
+        return;
+      }
+      return (h("span", { class: "helper-text", id: this.helperTextId }, this.helperText));
+    };
+    this.renderCharacterCounter = () => {
+      const counter = `${this.length} / ${this.maxLength}`;
+      if (!this.maxLength) {
+        return;
+      }
+      return h("span", { class: "counter" }, counter);
+    };
+    this.helperText = undefined;
+    this.length = undefined;
+    this.maxLength = undefined;
+    this.invalid = false;
+    this.helperTextId = undefined;
+  }
+  render() {
+    return (h(Host, { tabIndex: -1, class: {
+        invalid: this.invalid,
+      }, style: !this.hasContent() ? { display: 'none' } : {}, "aria-hidden": !this.hasContent() }, h("div", null, this.renderHelperText(), this.renderCharacterCounter())));
+  }
+};
+HelperLine.style = helperLineCss;
+
+export { DynamicLabel as limel_dynamic_label, HelperLine as limel_helper_line };
+
+//# sourceMappingURL=limel-dynamic-label_2.entry.js.map

package/dist/esm/limel-dynamic-label_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-dynamic-label.limel-helper-line.entry.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,qcAAqc;;MC2Bhd,YAAY;;;;wBAgBuB,EAAE;kBAQrB,EAAE;;EAEpB,MAAM;;IACT,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO;MACH,IAAI,CAAC,UAAU,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;MACtD,IAAI,CAAC,WAAW,CAAC,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,mCAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;KAC1D,CAAC;GACL;EAEO,UAAU,CAAC,IAAoB;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;IACnC,IAAI,CAAC,QAAQ,EAAE;MACX,OAAO;KACV;IAED,IAAI,SAA6B,CAAC;IAClC,IAAI,mBAAuC,CAAC;IAE5C,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;MAC1B,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC;MACvB,mBAAmB,GAAG,IAAI,CAAC,eAAe,CAAC;KAC9C;IAED,MAAM,SAAS,GAAG;MACd,IAAI,EAAE,cAAc;MACpB,IAAI,EAAE,QAAQ;MACd,KAAK,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,kBAAkB,EAAE,mBAAmB;OAC1C;KACJ,CAAC;IAEF,OAAO,kCAAgB,SAAS,EAAI,CAAC;GACxC;EAEO,WAAW,CAAC,QAAgB,EAAE;IAClC,OAAO,iBAAQ,KAAK,CAAS,CAAC;GACjC;;;;AC1FL,MAAM,aAAa,GAAG,+yBAA+yB;;MC2BxzB,UAAU;;;IAqDX,eAAU,GAAG;MACjB,OAAO,CAAC,EACJ,IAAI,CAAC,SAAS,GAAG,CAAC;SACjB,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC,CAClD,CAAC;KACL,CAAC;IAEM,qBAAgB,GAAG;MACvB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;QAClB,OAAO;OACV;MAED,QACI,YAAM,KAAK,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,CAAC,YAAY,IAC1C,IAAI,CAAC,UAAU,CACb,EACT;KACL,CAAC;IAEM,2BAAsB,GAAG;MAC7B,MAAM,OAAO,GAAG,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,SAAS,EAAE,CAAC;MAErD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACjB,OAAO;OACV;MAED,OAAO,YAAM,KAAK,EAAC,SAAS,IAAE,OAAO,CAAQ,CAAC;KACjD,CAAC;;;;mBArDyB,KAAK;;;EAQzB,MAAM;IACT,QACI,EAAC,IAAI,IACD,QAAQ,EAAE,CAAC,CAAC,EACZ,KAAK,EAAE;QACH,OAAO,EAAE,IAAI,CAAC,OAAO;OACxB,EACD,KAAK,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,iBACvC,CAAC,IAAI,CAAC,UAAU,EAAE,IAE/B,eACK,IAAI,CAAC,gBAAgB,EAAE,EACvB,IAAI,CAAC,sBAAsB,EAAE,CAC5B,CACH,EACT;GACL;;;;;;","names":[],"sources":["./src/components/dynamic-label/dynamic-label.scss?tag=limel-dynamic-label&encapsulation=shadow","./src/components/dynamic-label/dynamic-label.tsx","./src/components/helper-line/helper-line.scss?tag=limel-helper-line&encapsulation=shadow","./src/components/helper-line/helper-line.tsx"],"sourcesContent":["* {\n    box-sizing: border-box;\n    min-width: 0;\n}\n\n:host(limel-dynamic-label) {\n    --limel-dynamic-label-min-height: 1.75rem;\n    display: flex;\n    gap: 0.5rem;\n    align-items: flex-start;\n    border-radius: 0.5rem;\n    min-width: 0;\n}\n\nlimel-icon {\n    --limel-icon-svg-margin: 0.125rem;\n    border-radius: 0.25rem;\n    flex-shrink: 0;\n    width: var(--limel-dynamic-label-min-height);\n    color: rgb(\n        var(--contrast-900)\n    ); // The default `false` color. Will be overwritten by `Icon`\n}\n\nlabel {\n    flex-grow: 1;\n    font-size: 0.8125rem; // `13px`, Like Checkbox & Switch\n    line-height: normal;\n    color: var(--mdc-theme-on-surface);\n    padding-top: 0.375rem;\n}\n","import { getIconName } from '../icon/get-icon-props';\nimport { Component, Prop, h } from '@stencil/core';\nimport { Label, LabelValue } from './label.types';\nimport { Icon } from '../../interface';\n\n/**\n * This components displays a different label depending on the current given\n * value. A label can consist of a text and an optional icon. If no matching\n * label is found among the given `labels`, the `defaultLabel` will be displayed.\n *\n * One use case of the component is to enhance the visualization of a `boolean`\n * field like a checkbox or switch in a `readonly` state.\n *\n * The reason we offer this component is that the default styling\n * of the Checkbox or Toggle switch in the `readonly` state may not always\n * provide the best way of _visualizing information_, potentially leading to\n * confusion and negatively affecting the end-users' experience.\n *\n * @exampleComponent limel-example-dynamic-label\n * @exampleComponent limel-example-dynamic-label-readonly-boolean\n * @beta\n */\n@Component({\n    tag: 'limel-dynamic-label',\n    shadow: true,\n    styleUrl: 'dynamic-label.scss',\n})\nexport class DynamicLabel {\n    /**\n     * The current value of the component which is used to match with the given\n     * `labels` to determine what label to display.\n     *\n     * If not matching label is found, the `defaultLabel` is displayed.\n     */\n    @Prop()\n    public value: LabelValue;\n\n    /**\n     * The label to display when no matching value is found in the `labels`\n     * array. This is a fallback label that ensures there's always a label\n     * displayed for the component.\n     */\n    @Prop({ reflect: true })\n    public defaultLabel: Omit<Label, 'value'> = {};\n\n    /**\n     * A list of available labels. Each label has a corresponding value that\n     * will be matched with the current `value` of the component to determine\n     * what label to display.\n     */\n    @Prop()\n    public labels: Label[] = [];\n\n    public render() {\n        const label = this.labels.find((l) => l.value === this.value);\n\n        return [\n            this.renderIcon(label?.icon ?? this.defaultLabel.icon),\n            this.renderLabel(label?.text ?? this.defaultLabel.text),\n        ];\n    }\n\n    private renderIcon(icon?: string | Icon) {\n        const iconName = getIconName(icon);\n        if (!iconName) {\n            return;\n        }\n\n        let iconColor: string | undefined;\n        let iconBackgroundColor: string | undefined;\n\n        if (typeof icon === 'object') {\n            iconColor = icon.color;\n            iconBackgroundColor = icon.backgroundColor;\n        }\n\n        const iconProps = {\n            role: 'presentation',\n            name: iconName,\n            style: {\n                color: iconColor,\n                'background-color': iconBackgroundColor,\n            },\n        };\n\n        return <limel-icon {...iconProps} />;\n    }\n\n    private renderLabel(label: string = '') {\n        return <label>{label}</label>;\n    }\n}\n",":host(limel-helper-line) {\n    transition: opacity 0.2s ease;\n\n    box-sizing: border-box;\n    display: grid;\n\n    min-width: 0; // prevents overflowing, if component is placed in flex containers\n\n    -moz-osx-font-smoothing: grayscale;\n    -webkit-font-smoothing: antialiased;\n    font-size: 0.6875rem;\n    line-height: normal;\n\n    color: rgb(var(--contrast-1200));\n}\n\ndiv {\n    display: flex;\n    justify-content: space-between;\n    gap: 0.75rem;\n    overflow: hidden;\n    padding: 0 1rem;\n}\n\n:host(limel-helper-line.invalid) {\n    .helper-text {\n        color: var(--mdc-theme-error);\n    }\n}\n\n.counter {\n    flex-shrink: 0;\n    margin-left: auto;\n}\n\n.helper-text,\n.counter {\n    padding-top: 0.125rem;\n}\n\n// This animates height of the helper line, from `0` to `auto`.\n// To get this animation effect, the consumer component should\n// add `hide` classed accordingly.\n:host(limel-helper-line) {\n    transition: grid-template-rows\n        var(--limel-h-l-grid-template-rows-transition-speed, 0.46s)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    grid-template-rows: var(--limel-h-l-grid-template-rows, 1fr);\n}\n\n:host(limel-helper-line.hide) {\n    --limel-h-l-grid-template-rows-transition-speed: 0.3s;\n    --limel-h-l-grid-template-rows: 0fr;\n}\n// End: animating height\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * This is an internal and private component that many input fields\n * use to display a helper text, along with a character counter below the\n * input field.\n *\n * We created this to keep the visual styles the same everywhere\n * and to avoid importing styles separately.\n *\n * Also this enables us to open the helper line in limel-portal,\n * more easily without having to send the styles to the portal.\n *\n * @exampleComponent limel-example-helper-line\n * @exampleComponent limel-example-helper-line-invalid\n * @exampleComponent limel-example-helper-line-long-text\n * @exampleComponent limel-example-helper-line-long-text-no-counter\n * @exampleComponent limel-example-helper-line-character-counter\n * @exampleComponent limel-example-helper-line-empty\n * @exampleComponent limel-example-helper-line-animation\n * @private\n */\n@Component({\n    tag: 'limel-helper-line',\n    shadow: true,\n    styleUrl: 'helper-line.scss',\n})\nexport class HelperLine {\n    /**\n     * The helper text that is displayed on the left side.\n     */\n    @Prop({ reflect: true })\n    public helperText?: string;\n\n    /**\n     * Length of the current input value, coming from the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public length?: number;\n\n    /**\n     * Maximum length of the characters, defined on the parent component.\n     * Used in the character counter section on the right side.\n     */\n    @Prop({ reflect: true })\n    public maxLength?: number;\n\n    /**\n     * Turns `true`, when the parent component is invalid.\n     * For example, when the parent component is `required` but is left empty.\n     * Or when the input format is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid?: boolean = false;\n\n    /**\n     * Used by `aria-controls` and `aria-describedby` in the parent component.\n     */\n    @Prop({ reflect: true })\n    public helperTextId?: string;\n\n    public render() {\n        return (\n            <Host\n                tabIndex={-1}\n                class={{\n                    invalid: this.invalid,\n                }}\n                style={!this.hasContent() ? { display: 'none' } : {}}\n                aria-hidden={!this.hasContent()}\n            >\n                <div>\n                    {this.renderHelperText()}\n                    {this.renderCharacterCounter()}\n                </div>\n            </Host>\n        );\n    }\n\n    private hasContent = () => {\n        return !!(\n            this.maxLength > 0 ||\n            (this.helperText && this.helperText.length > 0)\n        );\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return (\n            <span class=\"helper-text\" id={this.helperTextId}>\n                {this.helperText}\n            </span>\n        );\n    };\n\n    private renderCharacterCounter = () => {\n        const counter = `${this.length} / ${this.maxLength}`;\n\n        if (!this.maxLength) {\n            return;\n        }\n\n        return <span class=\"counter\">{counter}</span>;\n    };\n}\n"],"version":3}

package/dist/esm/limel-prosemirror-adapter.entry.js

@@ -26264,14 +26264,19 @@ const createTriggerPlugin = (triggerCharacters) => {
     triggerPosition = null;
     activeTrigger = null;
   };
-  const handleKeyDown = (view, event) => {
-    const { state } = view;
+  const handleKeyDown = (_, event) => {
     if (event.key === 'Escape') {
       stopTrigger();
       return true;
     }
-    if (isTrigger(event.key, triggerCharacters) && shouldTrigger(state)) {
-      activeTrigger = event.key;
+    return false;
+  };
+  const handleInput = (view, event) => {
+    const { state } = view;
+    if (event.inputType === 'insertText' &&
+      isTrigger(event.data, triggerCharacters) &&
+      shouldTrigger(state)) {
+      activeTrigger = event.data;
       triggerText = '';
       triggerPosition = state.selection.$from.pos - triggerText.length;
       sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);
@@ -26311,6 +26316,9 @@ const createTriggerPlugin = (triggerCharacters) => {
     },
     props: {
       handleKeyDown: handleKeyDown,
+      handleDOMEvents: {
+        input: handleInput,
+      },
     },
     appendTransaction: appendTransactions,
   });