@limetech/lime-elements 38.30.1 → 38.31.1

package/dist/lime-elements/p-f507000e.entry.js

@@ -0,0 +1,2 @@
+import{r as e,c as o,h as t,g as i}from"./p-288f0842.js";import{d as s}from"./p-c70b1ea3.js";import{m as n,r}from"./p-e127eaaa.js";import{c as a}from"./p-ad52787a.js";import{g as l,a as c,b as d}from"./p-d251f404.js";import{t as p}from"./p-4c88e5d3.js";const h='@charset "UTF-8";:host(limel-collapsible-section){--border-radius-of-header:0.75rem;display:block}:host([hidden]){display:none}.open-close-toggle{all:unset;position:absolute;inset:0;width:100%;transition:background-color 0.4s ease, border-radius 0.1s ease;cursor:pointer;z-index:-1;background-color:var(--closed-header-background-color, rgb(var(--contrast-200)));border-radius:var(--border-radius-of-header)}.open-close-toggle:focus{outline:none}.open-close-toggle:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.open-close-toggle:hover,.open-close-toggle:focus-visible{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}section.open .open-close-toggle{background-color:var(--open-header-background-color, rgb(var(--contrast-100)));border-radius:var(--border-radius-of-header) var(--border-radius-of-header) var(--limel-cs-open-header-bottom-border-radius, 0) var(--limel-cs-open-header-bottom-border-radius, 0)}section.open .open-close-toggle:hover,section.open .open-close-toggle:focus-visible{background-color:var(--open-header-background-color, rgb(var(--contrast-300)))}.title,.divider-line,.expand-icon{pointer-events:none}section{transition:box-shadow 0.4s ease;border-radius:var(--border-radius-of-header)}section[aria-invalid]:not([aria-invalid=false]){--header-stroke-color:rgb(var(--color-red-default)) !important}section[aria-invalid]:not([aria-invalid=false]):not(.open){box-shadow:0 0 0 1px rgb(var(--color-red-default))}header{isolation:isolate;position:relative;align-items:center;display:flex;justify-content:space-between;gap:0.5rem;padding-left:0.5rem;height:2.5rem}limel-icon{width:1.5rem}.title{font-size:1rem;font-weight:300;color:var(--limel-theme-on-surface-color);justify-self:flex-start;user-select:none;height:auto;max-height:3rem;line-height:1.2rem;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.divider-line{transition:opacity 0.3s ease 0.3s;flex-grow:1;height:0.125rem;border-radius:1rem;background-color:var(--header-stroke-color, rgb(var(--contrast-900)));opacity:0;margin-right:0.5rem}section.open .divider-line{opacity:0.16}.actions{justify-self:flex-end;flex-shrink:0}::slotted([slot=header]){margin-right:0.5rem}.body{background-color:var(--body-background-color, var(--contrast-100));padding-left:var(--body-padding, 1.25rem);padding-right:var(--body-padding, 1.25rem);border-radius:0 0 var(--border-radius-of-header) var(--border-radius-of-header)}.body{transition:grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);display:grid;grid-template-rows:var(--limel-cs-grid-template-rows)}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden}:host(limel-collapsible-section:not([is-open])){--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;--limel-cs-grid-template-rows:0fr}:host(limel-collapsible-section:not([is-open])) slot{opacity:0}:host(limel-collapsible-section[is-open]){--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;--limel-cs-grid-template-rows:1fr}:host(limel-collapsible-section[is-open]) slot{opacity:1}header:hover+.body,header:has(.open-close-toggle:hover)+.body,header:has(.open-close-toggle:focus-visible)+.body{will-change:grid-template-rows}header:hover+.body slot,header:has(.open-close-toggle:hover)+.body slot,header:has(.open-close-toggle:focus-visible)+.body slot{will-change:opacity}.expand-icon{position:relative;display:flex;align-items:center;justify-content:center;height:1.875rem;margin:0 0 0 0.5rem;width:0.75rem;flex-shrink:0}.line{position:absolute;inset:auto;margin:auto;width:100%;border-radius:1rem;height:0.125rem}.line:first-of-type,.line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;opacity:0;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:nth-of-type(2){transform:translate3d(0, 0.25rem, 0) rotate(90deg)}.line:nth-of-type(3){transform:translate3d(0, -0.25rem, 0) rotate(-90deg)}.line:nth-of-type(2),.line:nth-of-type(3){transition:opacity 0.2s ease, transform 0.18s ease}.line:nth-of-type(2):before,.line:nth-of-type(2):after,.line:nth-of-type(3):before,.line:nth-of-type(3):after{content:"";position:absolute;inset:0;margin:auto;width:50%;height:100%;border-radius:inherit;background-color:var(--header-stroke-color, rgb(var(--contrast-900)))}.line:nth-of-type(2):before,.line:nth-of-type(3):before{transform:translate3d(0, -0.1rem, 0) rotate(45deg)}.line:nth-of-type(2):after,.line:nth-of-type(3):after{transform:translate3d(0, 0.1rem, 0) rotate(-45deg)}.open-close-toggle:hover+.expand-icon .line:first-of-type,.open-close-toggle:hover+.expand-icon .line:last-of-type,.open-close-toggle:focus-visible+.expand-icon .line:first-of-type,.open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transition:opacity 0.8s ease 0.4s, transform 0.4s ease 0.3s;opacity:1}.open-close-toggle:hover+.expand-icon .line:first-of-type,.open-close-toggle:focus-visible+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:last-of-type,.open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:hover+.expand-icon .line:nth-of-type(3),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transition:opacity 0.5s ease 0.4s, transform 0.7s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}.open-close-toggle:hover+.expand-icon .line:nth-of-type(2),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2){transform:translate3d(0, 0.5rem, 0) rotate(90deg);opacity:0.4}.open-close-toggle:hover+.expand-icon .line:nth-of-type(3),.open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transform:translate3d(0, -0.5rem, 0) rotate(-90deg);opacity:0.4}section.open .line:first-of-type,section.open .line:last-of-type{transition:opacity 0.2s ease 0.1s, transform 0.4s ease 0.3s;opacity:1}section.open .line:first-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:last-of-type{transform:rotate3d(0, 0, 1, 0deg)}section.open .line:nth-of-type(2),section.open .line:nth-of-type(3){transition:opacity 1s ease, transform 0.4s ease}section.open .line:nth-of-type(2){transform:translate3d(0, 1rem, 0) rotate(90deg);opacity:0}section.open .line:nth-of-type(3){transform:translate3d(0, -1rem, 0) rotate(-90deg);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:hover+.expand-icon .line:last-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:first-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transition:opacity 0.2s ease 0.4s, transform 0.4s cubic-bezier(0.85, 0.11, 0.14, 1.35) 0.2s}section.open .open-close-toggle:hover+.expand-icon .line:first-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:first-of-type{transform:rotate3d(0, 0, 1, 45deg)}section.open .open-close-toggle:hover+.expand-icon .line:last-of-type,section.open .open-close-toggle:focus-visible+.expand-icon .line:last-of-type{transform:rotate3d(0, 0, 1, -45deg)}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(2),section.open .open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(2){transform:translate3d(0, 1rem, 0) rotate(90deg);opacity:0}section.open .open-close-toggle:hover+.expand-icon .line:nth-of-type(3),section.open .open-close-toggle:focus-visible+.expand-icon .line:nth-of-type(3){transform:translate3d(0, -1rem, 0) rotate(-90deg);opacity:0}';const g=class{constructor(i){e(this,i);this.open=o(this,"open",7);this.close=o(this,"close",7);this.action=o(this,"action",7);this.bodyId=a();this.headingId=a();this.onClick=()=>{this.handleInteraction()};this.handleInteraction=()=>{this.isOpen=!this.isOpen;if(this.isOpen){this.open.emit();const e=100;setTimeout(s,e)}else{this.close.emit()}};this.renderExpandCollapseSign=()=>t("div",{class:"expand-icon",role:"presentation","aria-hidden":"true"},t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}),t("div",{class:"line"}));this.renderIcon=()=>{if(!this.icon){return}const e=l(this.icon);const o=c(this.icon);const i=d(this.icon);return t("limel-icon",{name:e,"aria-label":i,"aria-hidden":i?null:"true",style:{color:`${o}`}})};this.renderHeading=()=>{if(!this.header){return}return t("h2",{class:"title mdc-typography mdc-typography--headline2",id:this.headingId},this.header)};this.renderActions=()=>{if(!this.actions){return}return t("div",{class:"actions"},this.actions.map(this.renderActionButton))};this.renderActionButton=e=>t("limel-icon-button",{icon:e.icon,label:e.label,disabled:e.disabled,onClick:this.handleActionClick(e)});this.handleActionClick=e=>o=>{o.stopPropagation();this.action.emit(e)};this.getCollapsibleSectionAriaLabel=()=>{const e=this.header?`"${this.header}"`:" ";if(!this.isOpen){return p.get("collapsible-section.open",this.language,{header:e})}return p.get("collapsible-section.close",this.language,{header:e})};this.isOpen=false;this.header=undefined;this.icon=undefined;this.invalid=false;this.actions=undefined;this.language="en"}componentDidRender(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");n(e)}disconnectedCallback(){const e=this.host.shadowRoot.querySelector(".open-close-toggle");r(e)}render(){return t("section",{class:`${this.isOpen?"open":""}`,"aria-invalid":this.invalid,"aria-labelledby":this.header?this.headingId:null},t("header",null,t("button",{class:"open-close-toggle",onClick:this.onClick,"aria-controls":this.bodyId,"aria-expanded":this.isOpen?"true":"false","aria-label":this.getCollapsibleSectionAriaLabel(),type:"button"}),this.renderExpandCollapseSign(),this.renderIcon(),this.renderHeading(),t("div",{class:"divider-line",role:"presentation"}),this.renderHeaderSlot(),this.renderActions()),t("div",{class:"body","aria-hidden":String(!this.isOpen),id:this.bodyId,role:"region"},t("slot",null)))}renderHeaderSlot(){return t("slot",{name:"header"})}get host(){return i(this)}};g.style=h;export{g as limel_collapsible_section};
+//# sourceMappingURL=p-f507000e.entry.js.map

package/dist/lime-elements/p-f507000e.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["collapsibleSectionCss","CollapsibleSection","this","bodyId","createRandomString","headingId","onClick","handleInteraction","isOpen","open","emit","waitForUiToRender","setTimeout","dispatchResizeEvent","close","renderExpandCollapseSign","h","class","role","renderIcon","icon","name","getIconName","color","getIconColor","title","getIconTitle","style","renderHeading","header","id","renderActions","actions","map","renderActionButton","action","label","disabled","handleActionClick","event","stopPropagation","getCollapsibleSectionAriaLabel","heading","translate","get","language","componentDidRender","button","host","shadowRoot","querySelector","makeEnterClickable","disconnectedCallback","removeEnterClickable","render","invalid","type","renderHeaderSlot","String"],"sources":["./src/components/collapsible-section/collapsible-section.scss?tag=limel-collapsible-section&encapsulation=shadow","./src/components/collapsible-section/collapsible-section.tsx"],"sourcesContent":["@use '../../style/mixins';\n@use '../../style/internal/shared_input-select-picker';\n\n/**\n * @prop --closed-header-background-color: background color for header when closed\n * @prop --open-header-background-color: background color for header when open\n * @prop --header-stroke-color: color of the animated icons that visualize collapsed or normal states of the headers, as well as the divider line on headers\n * @prop --body-background-color: background color for body\n * @prop --body-padding: space around content of the body\n */\n\n:host(limel-collapsible-section) {\n    --border-radius-of-header: 0.75rem;\n    display: block;\n}\n\n:host([hidden]) {\n    display: none;\n}\n\n.open-close-toggle {\n    all: unset;\n    position: absolute;\n    inset: 0;\n    width: 100%; // for Firefox\n    @include mixins.visualize-keyboard-focus;\n    transition:\n        background-color 0.4s ease,\n        border-radius 0.1s ease;\n    cursor: pointer;\n    z-index: -1;\n\n    background-color: var(\n        --closed-header-background-color,\n        rgb(var(--contrast-200))\n    );\n    border-radius: var(--border-radius-of-header);\n\n    &:hover,\n    &:focus-visible {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-300))\n        );\n    }\n\n    section.open & {\n        background-color: var(\n            --open-header-background-color,\n            rgb(var(--contrast-100))\n        );\n        border-radius: var(--border-radius-of-header)\n            var(--border-radius-of-header)\n            var(--limel-cs-open-header-bottom-border-radius, 0)\n            var(--limel-cs-open-header-bottom-border-radius, 0);\n        &:hover,\n        &:focus-visible {\n            background-color: var(\n                --open-header-background-color,\n                rgb(var(--contrast-300))\n            );\n        }\n    }\n}\n\n.title,\n.divider-line,\n.expand-icon {\n    pointer-events: none;\n}\n\nsection {\n    transition: box-shadow 0.4s ease;\n    border-radius: var(--border-radius-of-header);\n\n    &[aria-invalid]:not([aria-invalid='false']) {\n        --header-stroke-color: rgb(var(--color-red-default)) !important;\n\n        &:not(.open) {\n            box-shadow: 0 0 0 1px rgb(var(--color-red-default));\n        }\n    }\n}\n\nheader {\n    isolation: isolate;\n    position: relative;\n\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    gap: 0.5rem;\n\n    padding-left: 0.5rem;\n    height: shared_input-select-picker.$height-of-mdc-text-field;\n}\n\nlimel-icon {\n    width: 1.5rem;\n}\n\n.title {\n    font-size: 1rem;\n    font-weight: 300;\n    color: var(--limel-theme-on-surface-color);\n\n    justify-self: flex-start;\n\n    user-select: none; // mostly to improve experience on Android, where tapping on sections selects the text too\n\n    // Below tries to render text in two lines,\n    // and then truncate if there is no more space\n    height: auto;\n    max-height: 3rem;\n    line-height: 1.2rem;\n    @include mixins.truncate-text-on-line(2);\n}\n\n.divider-line {\n    transition: opacity 0.3s ease 0.3s;\n    flex-grow: 1;\n    height: 0.125rem;\n    border-radius: 1rem;\n    background-color: var(--header-stroke-color, rgb(var(--contrast-900)));\n\n    opacity: 0;\n    margin-right: 0.5rem;\n\n    section.open & {\n        opacity: 0.16;\n    }\n}\n\n.actions {\n    justify-self: flex-end;\n    flex-shrink: 0;\n}\n\n::slotted([slot='header']) {\n    margin-right: 0.5rem;\n}\n\n.body {\n    background-color: var(--body-background-color, var(--contrast-100));\n    padding-left: var(--body-padding, 1.25rem);\n    padding-right: var(--body-padding, 1.25rem);\n    border-radius: 0 0 var(--border-radius-of-header)\n        var(--border-radius-of-header);\n}\n\n// This animates height of the body,\n// from `0` to `auto`\n.body {\n    transition: grid-template-rows\n        var(--limel-cs-grid-template-rows-transition-speed)\n        cubic-bezier(1, 0.09, 0, 0.89);\n    display: grid;\n    grid-template-rows: var(--limel-cs-grid-template-rows);\n\n    slot {\n        transition: opacity var(--limel-cs-opacity-transition-speed) ease\n            var(--limel-cs-opacity-transition-delay);\n        display: block;\n        overflow: hidden;\n    }\n}\n\n:host(limel-collapsible-section:not([is-open])) {\n    --limel-cs-opacity-transition-speed: 0.1s;\n    --limel-cs-opacity-transition-delay: 0s;\n    --limel-cs-grid-template-rows-transition-speed: 0.3s;\n    --limel-cs-grid-template-rows: 0fr;\n\n    slot {\n        opacity: 0;\n    }\n}\n\n:host(limel-collapsible-section[is-open]) {\n    --limel-cs-opacity-transition-speed: 0.4s;\n    --limel-cs-opacity-transition-delay: 0.3s;\n    --limel-cs-grid-template-rows-transition-speed: 0.46s;\n    --limel-cs-grid-template-rows: 1fr;\n\n    slot {\n        opacity: 1;\n    }\n}\n\nheader:hover,\nheader:has(.open-close-toggle:hover),\nheader:has(.open-close-toggle:focus-visible) {\n    + .body {\n        will-change: grid-template-rows;\n\n        slot {\n            will-change: opacity;\n        }\n    }\n}\n\n// End: animating height\n\n@import './partial-styles/expand-icon.scss';\n","import {\n    Component,\n    Event,\n    Element,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { dispatchResizeEvent } from '../../util/dispatch-resize-event';\nimport { Action } from './action';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { createRandomString } from '../../util/random-string';\nimport { Icon } from '../../global/shared-types/icon.types';\nimport {\n    getIconColor,\n    getIconName,\n    getIconTitle,\n} from '../icon/get-icon-props';\nimport translate from '../../global/translations';\nimport { Languages } from '../date-picker/date.types';\n\n/**\n * A collapsible section can be used to group related content together\n * and hide the group when not needed.\n * Using this component can help to:\n * - Save vertical space by hiding non-essential content\n * - Improve content organization and scannability of the user interface\n * - Reduce cognitive load by displaying only a set of relevant information at a time\n * - Or disclose complex information, progressively to the user\n *\n * @slot - Content to put inside the collapsible section\n * @slot header - Optional slot for custom header content\n *\n * @exampleComponent limel-example-collapsible-section-basic\n * @exampleComponent limel-example-collapsible-section-actions\n * @exampleComponent limel-example-collapsible-section-with-custom-header-component\n * @exampleComponent limel-example-collapsible-section-external-control\n * @exampleComponent limel-example-collapsible-section-with-slider\n * @exampleComponent limel-example-collapsible-section-invalid\n * @exampleComponent limel-example-collapsible-section-icon\n * @exampleComponent limel-example-collapsible-section-css-props\n */\n@Component({\n    tag: 'limel-collapsible-section',\n    shadow: true,\n    styleUrl: 'collapsible-section.scss',\n})\nexport class CollapsibleSection {\n    /**\n     * `true` if the section is expanded, `false` if collapsed.\n     */\n    @Prop({ mutable: true, reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Text to display in the header of the section\n     */\n    @Prop({ reflect: true })\n    public header: string;\n\n    /**\n     * Icon to display in the header of the section\n     */\n    @Prop()\n    public icon?: string | Icon;\n\n    /**\n     * `true` if the section is invalid, `false` if valid.\n     * This can be used to indicate that the content inside the section is invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * Actions to place to the far right inside the header\n     */\n    @Prop()\n    public actions: Action[];\n\n    /**\n     * Defines the language for translations.\n     * Will translate the translatable strings on the components.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Emitted when the section is expanded\n     */\n    @Event()\n    private open: EventEmitter<void>;\n\n    /**\n     * Emitted when the section is collapsed\n     */\n    @Event()\n    private close: EventEmitter<void>;\n\n    /**\n     * Emitted when an action is clicked inside the header\n     */\n    @Event()\n    private action: EventEmitter<Action>;\n\n    @Element()\n    private host: HTMLElement;\n\n    private bodyId = createRandomString();\n    private headingId = createRandomString();\n\n    public componentDidRender() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        makeEnterClickable(button);\n    }\n\n    public disconnectedCallback() {\n        const button = this.host.shadowRoot.querySelector(\n            '.open-close-toggle'\n        ) as HTMLElement;\n\n        removeEnterClickable(button);\n    }\n\n    public render() {\n        return (\n            <section\n                class={`${this.isOpen ? 'open' : ''}`}\n                aria-invalid={this.invalid}\n                aria-labelledby={this.header ? this.headingId : null}\n            >\n                <header>\n                    <button\n                        class=\"open-close-toggle\"\n                        onClick={this.onClick}\n                        aria-controls={this.bodyId}\n                        aria-expanded={this.isOpen ? 'true' : 'false'}\n                        aria-label={this.getCollapsibleSectionAriaLabel()}\n                        type=\"button\"\n                    />\n                    {this.renderExpandCollapseSign()}\n                    {this.renderIcon()}\n                    {this.renderHeading()}\n                    <div class=\"divider-line\" role=\"presentation\" />\n                    {this.renderHeaderSlot()}\n                    {this.renderActions()}\n                </header>\n                <div\n                    class=\"body\"\n                    aria-hidden={String(!this.isOpen)}\n                    id={this.bodyId}\n                    role=\"region\"\n                >\n                    <slot />\n                </div>\n            </section>\n        );\n    }\n\n    private onClick = () => {\n        this.handleInteraction();\n    };\n\n    private handleInteraction = () => {\n        this.isOpen = !this.isOpen;\n\n        if (this.isOpen) {\n            this.open.emit();\n            const waitForUiToRender = 100;\n            setTimeout(dispatchResizeEvent, waitForUiToRender);\n        } else {\n            this.close.emit();\n        }\n    };\n\n    private renderExpandCollapseSign = () => {\n        return (\n            <div class=\"expand-icon\" role=\"presentation\" aria-hidden=\"true\">\n                <div class=\"line\" />\n                <div class=\"line\" />\n                <div class=\"line\" />\n                <div class=\"line\" />\n            </div>\n        );\n    };\n\n    private renderIcon = () => {\n        if (!this.icon) {\n            return;\n        }\n\n        const name = getIconName(this.icon);\n        const color = getIconColor(this.icon);\n        const title = getIconTitle(this.icon);\n\n        return (\n            <limel-icon\n                name={name}\n                aria-label={title}\n                aria-hidden={title ? null : 'true'}\n                style={{\n                    color: `${color}`,\n                }}\n            />\n        );\n    };\n\n    private renderHeading = () => {\n        if (!this.header) {\n            return;\n        }\n\n        return (\n            <h2\n                class=\"title mdc-typography mdc-typography--headline2\"\n                id={this.headingId}\n            >\n                {this.header}\n            </h2>\n        );\n    };\n\n    private renderActions = () => {\n        if (!this.actions) {\n            return;\n        }\n\n        return (\n            <div class=\"actions\">\n                {this.actions.map(this.renderActionButton)}\n            </div>\n        );\n    };\n\n    private renderHeaderSlot() {\n        return <slot name=\"header\" />;\n    }\n\n    private renderActionButton = (action: Action) => {\n        return (\n            <limel-icon-button\n                icon={action.icon}\n                label={action.label}\n                disabled={action.disabled}\n                onClick={this.handleActionClick(action)}\n            />\n        );\n    };\n\n    private handleActionClick = (action: Action) => (event: MouseEvent) => {\n        event.stopPropagation();\n        this.action.emit(action);\n    };\n\n    private getCollapsibleSectionAriaLabel = (): string => {\n        const heading = this.header ? `\"${this.header}\"` : ' ';\n\n        if (!this.isOpen) {\n            return translate.get('collapsible-section.open', this.language, {\n                header: heading,\n            });\n        }\n\n        return translate.get('collapsible-section.close', this.language, {\n            header: heading,\n        });\n    };\n}\n"],"mappings":"6PAAA,MAAMA,EAAwB,2uP,MCkDjBC,EAAkB,M,gHA4DnBC,KAAAC,OAASC,IACTF,KAAAG,UAAYD,IAqDZF,KAAAI,QAAU,KACdJ,KAAKK,mBAAmB,EAGpBL,KAAAK,kBAAoB,KACxBL,KAAKM,QAAUN,KAAKM,OAEpB,GAAIN,KAAKM,OAAQ,CACbN,KAAKO,KAAKC,OACV,MAAMC,EAAoB,IAC1BC,WAAWC,EAAqBF,E,KAC7B,CACHT,KAAKY,MAAMJ,M,GAIXR,KAAAa,yBAA2B,IAE3BC,EAAA,OAAKC,MAAM,cAAcC,KAAK,eAAc,cAAa,QACrDF,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,SACXD,EAAA,OAAKC,MAAM,UAKff,KAAAiB,WAAa,KACjB,IAAKjB,KAAKkB,KAAM,CACZ,M,CAGJ,MAAMC,EAAOC,EAAYpB,KAAKkB,MAC9B,MAAMG,EAAQC,EAAatB,KAAKkB,MAChC,MAAMK,EAAQC,EAAaxB,KAAKkB,MAEhC,OACIJ,EAAA,cACIK,KAAMA,EAAI,aACEI,EAAK,cACJA,EAAQ,KAAO,OAC5BE,MAAO,CACHJ,MAAO,GAAGA,MAEhB,EAIFrB,KAAA0B,cAAgB,KACpB,IAAK1B,KAAK2B,OAAQ,CACd,M,CAGJ,OACIb,EAAA,MACIC,MAAM,iDACNa,GAAI5B,KAAKG,WAERH,KAAK2B,OACL,EAIL3B,KAAA6B,cAAgB,KACpB,IAAK7B,KAAK8B,QAAS,CACf,M,CAGJ,OACIhB,EAAA,OAAKC,MAAM,WACNf,KAAK8B,QAAQC,IAAI/B,KAAKgC,oBACrB,EAQNhC,KAAAgC,mBAAsBC,GAEtBnB,EAAA,qBACII,KAAMe,EAAOf,KACbgB,MAAOD,EAAOC,MACdC,SAAUF,EAAOE,SACjB/B,QAASJ,KAAKoC,kBAAkBH,KAKpCjC,KAAAoC,kBAAqBH,GAAoBI,IAC7CA,EAAMC,kBACNtC,KAAKiC,OAAOzB,KAAKyB,EAAO,EAGpBjC,KAAAuC,+BAAiC,KACrC,MAAMC,EAAUxC,KAAK2B,OAAS,IAAI3B,KAAK2B,UAAY,IAEnD,IAAK3B,KAAKM,OAAQ,CACd,OAAOmC,EAAUC,IAAI,2BAA4B1C,KAAK2C,SAAU,CAC5DhB,OAAQa,G,CAIhB,OAAOC,EAAUC,IAAI,4BAA6B1C,KAAK2C,SAAU,CAC7DhB,OAAQa,GACV,E,YAvNmB,M,uDAmBR,M,qCAaY,I,CA0BtBI,qBACH,MAAMC,EAAS7C,KAAK8C,KAAKC,WAAWC,cAChC,sBAGJC,EAAmBJ,E,CAGhBK,uBACH,MAAML,EAAS7C,KAAK8C,KAAKC,WAAWC,cAChC,sBAGJG,EAAqBN,E,CAGlBO,SACH,OACItC,EAAA,WACIC,MAAO,GAAGf,KAAKM,OAAS,OAAS,KAAI,eACvBN,KAAKqD,QAAO,kBACTrD,KAAK2B,OAAS3B,KAAKG,UAAY,MAEhDW,EAAA,cACIA,EAAA,UACIC,MAAM,oBACNX,QAASJ,KAAKI,QAAO,gBACNJ,KAAKC,OAAM,gBACXD,KAAKM,OAAS,OAAS,QAAO,aACjCN,KAAKuC,iCACjBe,KAAK,WAERtD,KAAKa,2BACLb,KAAKiB,aACLjB,KAAK0B,gBACNZ,EAAA,OAAKC,MAAM,eAAeC,KAAK,iBAC9BhB,KAAKuD,mBACLvD,KAAK6B,iBAEVf,EAAA,OACIC,MAAM,OAAM,cACCyC,QAAQxD,KAAKM,QAC1BsB,GAAI5B,KAAKC,OACTe,KAAK,UAELF,EAAA,c,CAiFRyC,mBACJ,OAAOzC,EAAA,QAAMK,KAAK,U"}

package/dist/types/components/code-editor/code-editor.d.ts

@@ -1,17 +1,21 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { ColorScheme, Language } from './code-editor.types';
+import 'codemirror/mode/css/css';
+import 'codemirror/mode/htmlmixed/htmlmixed';
 import 'codemirror/mode/javascript/javascript';
 import 'codemirror/mode/jinja2/jinja2';
 import 'codemirror/addon/selection/active-line';
 import 'codemirror/addon/edit/matchbrackets';
+import 'codemirror/addon/edit/matchtags';
 import 'codemirror/addon/lint/lint';
 import 'codemirror/addon/lint/json-lint';
 import 'codemirror/addon/fold/foldgutter';
 import 'codemirror/addon/fold/brace-fold';
+import 'codemirror/addon/fold/xml-fold';
 /**
  * @exampleComponent limel-example-code-editor
  * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
- * @exampleComponent limel-example-code-editor-fold-lint
+ * @exampleComponent limel-example-code-editor-fold-lint-wrap
  */
 export declare class CodeEditor {
   /**
@@ -30,6 +34,10 @@ export declare class CodeEditor {
    * Displays line numbers in the editor
    */
   lineNumbers: boolean;
+  /**
+   * Wraps long lines instead of showing horizontal scrollbar
+   */
+  lineWrapping: boolean;
   /**
    * Allows the user to fold code
    */

package/dist/types/components/code-editor/code-editor.types.d.ts

@@ -1,7 +1,7 @@
 /**
  * @public
  */
-export type Language = 'javascript' | 'jinja2' | 'json' | 'typescript';
+export type Language = 'css' | 'html' | 'javascript' | 'jinja2' | 'json' | 'typescript';
 /**
  * @public
  */

package/dist/types/components.d.ts

@@ -864,7 +864,7 @@ export namespace Components {
     /**
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
-     * @exampleComponent limel-example-code-editor-fold-lint
+     * @exampleComponent limel-example-code-editor-fold-lint-wrap
      */
     interface LimelCodeEditor {
         /**
@@ -883,6 +883,10 @@ export namespace Components {
           * Displays line numbers in the editor
          */
         "lineNumbers": boolean;
+        /**
+          * Wraps long lines instead of showing horizontal scrollbar
+         */
+        "lineWrapping": boolean;
         /**
           * Enables linting of JSON content
          */
@@ -3917,7 +3921,7 @@ declare global {
     /**
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
-     * @exampleComponent limel-example-code-editor-fold-lint
+     * @exampleComponent limel-example-code-editor-fold-lint-wrap
      */
     interface HTMLLimelCodeEditorElement extends Components.LimelCodeEditor, HTMLStencilElement {
     }
@@ -5999,7 +6003,7 @@ declare namespace LocalJSX {
     /**
      * @exampleComponent limel-example-code-editor
      * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
-     * @exampleComponent limel-example-code-editor-fold-lint
+     * @exampleComponent limel-example-code-editor-fold-lint-wrap
      */
     interface LimelCodeEditor {
         /**
@@ -6018,6 +6022,10 @@ declare namespace LocalJSX {
           * Displays line numbers in the editor
          */
         "lineNumbers"?: boolean;
+        /**
+          * Wraps long lines instead of showing horizontal scrollbar
+         */
+        "lineWrapping"?: boolean;
         /**
           * Enables linting of JSON content
          */
@@ -9167,7 +9175,7 @@ declare module "@stencil/core" {
             /**
              * @exampleComponent limel-example-code-editor
              * @exampleComponent limel-example-code-editor-readonly-with-line-numbers
-             * @exampleComponent limel-example-code-editor-fold-lint
+             * @exampleComponent limel-example-code-editor-fold-lint-wrap
              */
             "limel-code-editor": LocalJSX.LimelCodeEditor & JSXBase.HTMLAttributes<HTMLLimelCodeEditorElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "38.30.1",
+  "version": "38.31.1",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",