@limetech/lime-elements 38.31.0 → 38.31.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/limel-collapsible-section.cjs.entry.js +1 -1
- package/dist/cjs/limel-collapsible-section.cjs.entry.js.map +1 -1
- package/dist/collection/components/collapsible-section/collapsible-section.css +14 -8
- package/dist/esm/limel-collapsible-section.entry.js +1 -1
- package/dist/esm/limel-collapsible-section.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-f507000e.entry.js +2 -0
- package/dist/lime-elements/p-f507000e.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/lime-elements/p-ed8aa16c.entry.js +0 -2
- package/dist/lime-elements/p-ed8aa16c.entry.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
## [38.31.1](https://github.com/Lundalogik/lime-elements/compare/v38.31.0...v38.31.1) (2025-11-27)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **collapsible-section:** prevent nested sections to remain open after collapsing ([7e8b4cb](https://github.com/Lundalogik/lime-elements/commit/7e8b4cb75e6522c8b57d25bf615105e818363b21))
|
|
8
|
+
|
|
1
9
|
## [38.31.0](https://github.com/Lundalogik/lime-elements/compare/v38.30.1...v38.31.0) (2025-11-25)
|
|
2
10
|
|
|
3
11
|
|
|
@@ -9,7 +9,7 @@ const randomString = require('./random-string-27fb6c74.js');
|
|
|
9
9
|
const getIconProps = require('./get-icon-props-65f39e40.js');
|
|
10
10
|
const translations = require('./translations-d2be6dd7.js');
|
|
11
11
|
|
|
12
|
-
const collapsibleSectionCss = "@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) 0 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{
|
|
12
|
+
const collapsibleSectionCss = "@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}";
|
|
13
13
|
|
|
14
14
|
const CollapsibleSection = class {
|
|
15
15
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-collapsible-section.entry.cjs.js","mappings":"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","names":["createRandomString","dispatchResizeEvent","h","getIconName","getIconColor","getIconTitle","translate","makeEnterClickable","removeEnterClickable"],"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) 0 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 // All below vars are for internal use only!\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 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: 0fr;\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 opacity: 0;\n }\n}\n\nsection.open {\n .body {\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 grid-template-rows: 1fr;\n\n slot {\n opacity: 1;\n }\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"],"version":3}
|
|
1
|
+
{"file":"limel-collapsible-section.entry.cjs.js","mappings":"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","names":["createRandomString","dispatchResizeEvent","h","getIconName","getIconColor","getIconTitle","translate","makeEnterClickable","removeEnterClickable"],"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"],"version":3}
|
|
@@ -128,7 +128,7 @@
|
|
|
128
128
|
}
|
|
129
129
|
section.open .open-close-toggle {
|
|
130
130
|
background-color: var(--open-header-background-color, rgb(var(--contrast-100)));
|
|
131
|
-
border-radius: var(--border-radius-of-header) var(--border-radius-of-header) 0 0;
|
|
131
|
+
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);
|
|
132
132
|
}
|
|
133
133
|
section.open .open-close-toggle:hover, section.open .open-close-toggle:focus-visible {
|
|
134
134
|
background-color: var(--open-header-background-color, rgb(var(--contrast-300)));
|
|
@@ -212,27 +212,33 @@ section.open .divider-line {
|
|
|
212
212
|
}
|
|
213
213
|
|
|
214
214
|
.body {
|
|
215
|
-
--limel-cs-opacity-transition-speed: 0.1s;
|
|
216
|
-
--limel-cs-opacity-transition-delay: 0s;
|
|
217
|
-
--limel-cs-grid-template-rows-transition-speed: 0.3s;
|
|
218
215
|
transition: grid-template-rows var(--limel-cs-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89);
|
|
219
216
|
display: grid;
|
|
220
|
-
grid-template-rows:
|
|
217
|
+
grid-template-rows: var(--limel-cs-grid-template-rows);
|
|
221
218
|
}
|
|
222
219
|
.body slot {
|
|
223
220
|
transition: opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);
|
|
224
221
|
display: block;
|
|
225
222
|
overflow: hidden;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
:host(limel-collapsible-section:not([is-open])) {
|
|
226
|
+
--limel-cs-opacity-transition-speed: 0.1s;
|
|
227
|
+
--limel-cs-opacity-transition-delay: 0s;
|
|
228
|
+
--limel-cs-grid-template-rows-transition-speed: 0.3s;
|
|
229
|
+
--limel-cs-grid-template-rows: 0fr;
|
|
230
|
+
}
|
|
231
|
+
:host(limel-collapsible-section:not([is-open])) slot {
|
|
226
232
|
opacity: 0;
|
|
227
233
|
}
|
|
228
234
|
|
|
229
|
-
section
|
|
235
|
+
:host(limel-collapsible-section[is-open]) {
|
|
230
236
|
--limel-cs-opacity-transition-speed: 0.4s;
|
|
231
237
|
--limel-cs-opacity-transition-delay: 0.3s;
|
|
232
238
|
--limel-cs-grid-template-rows-transition-speed: 0.46s;
|
|
233
|
-
grid-template-rows: 1fr;
|
|
239
|
+
--limel-cs-grid-template-rows: 1fr;
|
|
234
240
|
}
|
|
235
|
-
section
|
|
241
|
+
:host(limel-collapsible-section[is-open]) slot {
|
|
236
242
|
opacity: 1;
|
|
237
243
|
}
|
|
238
244
|
|
|
@@ -5,7 +5,7 @@ import { c as createRandomString } from './random-string-355331d3.js';
|
|
|
5
5
|
import { g as getIconName, a as getIconColor, b as getIconTitle } from './get-icon-props-37514418.js';
|
|
6
6
|
import { t as translate } from './translations-91c611da.js';
|
|
7
7
|
|
|
8
|
-
const collapsibleSectionCss = "@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) 0 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{
|
|
8
|
+
const collapsibleSectionCss = "@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}";
|
|
9
9
|
|
|
10
10
|
const CollapsibleSection = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-collapsible-section.entry.js","mappings":"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","names":[],"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) 0 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 // All below vars are for internal use only!\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 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: 0fr;\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 opacity: 0;\n }\n}\n\nsection.open {\n .body {\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 grid-template-rows: 1fr;\n\n slot {\n opacity: 1;\n }\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"],"version":3}
|
|
1
|
+
{"file":"limel-collapsible-section.entry.js","mappings":"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","names":[],"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"],"version":3}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-aae161ef",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-5ac43dbd",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-489d7f63",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-ed04acfc",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-aeba4aa4",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-483ba5da",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-ed8aa16c",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-d1aa44e1",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"sortableColumns":[4,"sortable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-5a483374",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"lineWrapping":[4,"line-wrapping"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d6d66daa",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-6c60172e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-4f85b3c4",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-8539647d",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-eb396630",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-ae507565",[[0,"limel-radio-button",{"checked":[516],"disabled":[516],"id":[1],"label":[1],"onChange":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-9fc23e05",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-eb121716",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-29c2cdc6",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-cc7f4c81",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
1
|
+
import{p as e,b as l}from"./p-288f0842.js";export{s as setNonce}from"./p-288f0842.js";const i=()=>{const l=import.meta.url;const i={};if(l!==""){i.resourcesUrl=new URL(".",l).href}return e(i)};i().then((e=>l(JSON.parse('[["p-250acfe4",[[17,"limel-text-editor",{"contentType":[1,"content-type"],"language":[513],"disabled":[516],"readonly":[516],"helperText":[513,"helper-text"],"placeholder":[513],"label":[513],"invalid":[516],"value":[513],"customElements":[16],"triggers":[16],"required":[516],"allowResize":[516,"allow-resize"],"ui":[513]}]]],["p-ac334aa7",[[1,"limel-card",{"heading":[513],"subheading":[513],"image":[16],"icon":[513],"value":[1],"actions":[16],"clickable":[516],"orientation":[513]}]]],["p-b5abf284",[[1,"limel-file",{"value":[16],"label":[513],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"accept":[513],"language":[1]}]]],["p-aae161ef",[[0,"limel-list-item",{"language":[513],"value":[8],"text":[513],"secondaryText":[513,"secondary-text"],"disabled":[516],"icon":[1],"iconSize":[513,"icon-size"],"badgeIcon":[516,"badge-icon"],"selected":[516],"actions":[16],"primaryComponent":[16],"image":[16],"type":[513]}]]],["p-5ac43dbd",[[1,"limel-picker",{"disabled":[4],"readonly":[516],"label":[1],"searchLabel":[1,"search-label"],"helperText":[513,"helper-text"],"leadingIcon":[1,"leading-icon"],"emptyResultMessage":[1,"empty-result-message"],"required":[4],"invalid":[516],"value":[16],"searcher":[16],"allItems":[16],"multiple":[4],"delimiter":[513],"actions":[16],"actionPosition":[1,"action-position"],"actionScrollBehavior":[1,"action-scroll-behavior"],"badgeIcons":[516,"badge-icons"],"items":[32],"textValue":[32],"loading":[32],"chips":[32]}]]],["p-b43e8cb2",[[17,"limel-split-button",{"label":[513],"primary":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"items":[16]}]]],["p-d349e355",[[1,"limel-file-viewer",{"url":[513],"filename":[513],"alt":[513],"allowFullscreen":[516,"allow-fullscreen"],"allowOpenInNewTab":[516,"allow-open-in-new-tab"],"allowDownload":[516,"allow-download"],"language":[1],"officeViewer":[513,"office-viewer"],"actions":[16],"isFullscreen":[32],"fileType":[32],"loading":[32],"fileUrl":[32]}]]],["p-489d7f63",[[1,"limel-color-picker",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"tooltipLabel":[513,"tooltip-label"],"required":[516],"disabled":[516],"readonly":[516],"invalid":[516],"placeholder":[513],"manualInput":[516,"manual-input"],"palette":[16],"paletteColumnCount":[514,"palette-column-count"],"isOpen":[32]}]]],["p-ed04acfc",[[1,"limel-profile-picture",{"language":[513],"label":[513],"icon":[1],"helperText":[1,"helper-text"],"disabled":[516],"readonly":[516],"required":[516],"invalid":[516],"loading":[516],"value":[1],"imageFit":[513,"image-fit"],"accept":[513],"resize":[16],"objectUrl":[32],"imageError":[32],"isErrorMessagePopoverOpen":[32]}]]],["p-ac55217a",[[1,"limel-date-picker",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"required":[516],"value":[16],"type":[513],"format":[513],"language":[513],"formatter":[16],"internalFormat":[32],"showPortal":[32]}]]],["p-cbbe129b",[[1,"limel-dock",{"dockItems":[16],"dockFooterItems":[16],"accessibleLabel":[513,"accessible-label"],"expanded":[516],"allowResize":[516,"allow-resize"],"mobileBreakPoint":[514,"mobile-break-point"],"useMobileLayout":[32]}]]],["p-aeba4aa4",[[1,"limel-snackbar",{"open":[516],"message":[1],"timeout":[514],"actionText":[1,"action-text"],"dismissible":[4],"multiline":[4],"language":[1],"offset":[32],"isOpen":[32],"closing":[32],"show":[64]},[[0,"changeOffset","onChangeIndex"]]]]],["p-483ba5da",[[1,"limel-select",{"disabled":[516],"readonly":[516],"invalid":[516],"required":[516],"label":[513],"helperText":[513,"helper-text"],"value":[16],"options":[16],"multiple":[4],"menuOpen":[32]}]]],["p-8e7d31b3",[[1,"limel-button-group",{"value":[16],"disabled":[516],"selectedButtonId":[32]}]]],["p-f83ebd28",[[1,"limel-chart",{"language":[513],"accessibleLabel":[513,"accessible-label"],"accessibleItemsLabel":[513,"accessible-items-label"],"items":[16],"type":[513],"orientation":[513],"maxValue":[514,"max-value"],"axisIncrement":[514,"axis-increment"],"loading":[516]}]]],["p-f507000e",[[1,"limel-collapsible-section",{"isOpen":[1540,"is-open"],"header":[513],"icon":[1],"invalid":[516],"actions":[16],"language":[513]}]]],["p-580a29c5",[[1,"limel-help",{"value":[1],"trigger":[1],"readMoreLink":[16],"openDirection":[513,"open-direction"],"isOpen":[32]}]]],["p-e6245ef7",[[1,"limel-info-tile",{"value":[520],"icon":[1],"label":[513],"prefix":[513],"suffix":[513],"disabled":[516],"badge":[520],"loading":[516],"link":[16],"progress":[16],"hasPrimarySlot":[32]}]]],["p-d1aa44e1",[[1,"limel-table",{"data":[16],"columns":[16],"mode":[1],"layout":[1],"pageSize":[2,"page-size"],"totalRows":[2,"total-rows"],"sorting":[16],"activeRow":[1040],"movableColumns":[4,"movable-columns"],"sortableColumns":[4,"sortable-columns"],"loading":[4],"page":[2],"emptyMessage":[1,"empty-message"],"aggregates":[16],"selectable":[4],"selection":[16],"language":[513]}]]],["p-3a61deb1",[[1,"limel-shortcut",{"icon":[513],"label":[513],"disabled":[516],"badge":[520],"link":[16]}]]],["p-51d475d8",[[1,"limel-switch",{"label":[513],"disabled":[516],"readonly":[516],"invalid":[516],"value":[516],"helperText":[513,"helper-text"],"readonlyLabels":[16],"fieldId":[32]}]]],["p-2fdb51de",[[1,"limel-tab-panel",{"tabs":[1040]}]]],["p-ef1d26ac",[[1,"limel-dialog",{"heading":[1],"fullscreen":[516],"open":[1540],"closingActions":[16]}]]],["p-1e4ca584",[[1,"limel-progress-flow",{"flowItems":[16],"disabled":[4],"readonly":[4]}]]],["p-2116b3ce",[[1,"limel-slider",{"disabled":[516],"readonly":[516],"factor":[514],"label":[513],"helperText":[513,"helper-text"],"required":[516],"invalid":[516],"unit":[513],"value":[514],"valuemax":[514],"valuemin":[514],"step":[514],"percentageClass":[32]}]]],["p-0115bb1e",[[1,"limel-banner",{"message":[513],"icon":[513],"isOpen":[32],"open":[64],"close":[64]}]]],["p-5b1cb891",[[1,"limel-menu-item-meta",{"commandText":[1,"command-text"],"badge":[8],"showChevron":[4,"show-chevron"]}]]],["p-07988749",[[0,"limel-radio-button-group",{"items":[16],"selectedItem":[16],"disabled":[516],"badgeIcons":[516,"badge-icons"],"maxLinesSecondaryText":[514,"max-lines-secondary-text"]}]]],["p-8e3c4418",[[1,"limel-ai-avatar",{"isThinking":[516,"is-thinking"],"language":[513]}]]],["p-5a483374",[[1,"limel-code-editor",{"value":[1],"language":[1],"readonly":[4],"lineNumbers":[4,"line-numbers"],"lineWrapping":[4,"line-wrapping"],"fold":[4],"lint":[4],"colorScheme":[1,"color-scheme"],"random":[32]}]]],["p-54fc2316",[[1,"limel-config",{"config":[16]}]]],["p-4ed15eb7",[[1,"limel-flex-container",{"direction":[513],"justify":[513],"align":[513],"reverse":[516]}]]],["p-d6d66daa",[[1,"limel-form",{"schema":[16],"value":[16],"disabled":[4],"propsFactory":[16],"transformErrors":[16],"errors":[16]}]]],["p-0d247b83",[[1,"limel-grid"]]],["p-6c60172e",[[17,"limel-prosemirror-adapter",{"contentType":[1,"content-type"],"value":[1],"language":[513],"disabled":[516],"customElements":[16],"triggerCharacters":[16],"ui":[1],"view":[32],"actionBarItems":[32],"link":[32],"isLinkMenuOpen":[32]}]]],["p-4f85b3c4",[[17,"limel-color-picker-palette",{"value":[513],"label":[513],"helperText":[513,"helper-text"],"placeholder":[513],"required":[516],"invalid":[516],"manualInput":[516,"manual-input"],"columnCount":[514,"column-count"],"palette":[16]}]]],["p-47da9c59",[[0,"limel-dock-button",{"item":[16],"expanded":[516],"useMobileLayout":[516,"use-mobile-layout"],"isOpen":[32]}]]],["p-8539647d",[[1,"limel-checkbox",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"helperText":[513,"helper-text"],"checked":[516],"indeterminate":[516],"required":[516],"readonlyLabels":[16],"modified":[32]}]]],["p-d80e776d",[[1,"limel-tab-bar",{"tabs":[1040],"canScrollLeft":[32],"canScrollRight":[32]},[[9,"resize","handleWindowResize"]]]]],["p-1b036add",[[1,"limel-callout",{"heading":[513],"icon":[513],"type":[513],"language":[1]}]]],["p-c7ffe359",[[1,"limel-header",{"icon":[1],"heading":[1],"subheading":[1],"supportingText":[1,"supporting-text"],"subheadingDivider":[1,"subheading-divider"]}]]],["p-32572c31",[[1,"limel-help-content",{"value":[1],"readMoreLink":[16]}]]],["p-d4a220eb",[[0,"limel-progress-flow-item",{"item":[16],"disabled":[4],"readonly":[4],"currentStep":[4,"current-step"]}]]],["p-52fb3988",[[1,"limel-circular-progress",{"value":[2],"maxValue":[2,"max-value"],"prefix":[513],"suffix":[1],"displayPercentageColors":[4,"display-percentage-colors"],"size":[513]}]]],["p-eb396630",[[1,"limel-flatpickr-adapter",{"value":[16],"type":[1],"format":[1],"isOpen":[4,"is-open"],"inputElement":[16],"language":[1],"formatter":[16]}]]],["p-ae507565",[[0,"limel-radio-button",{"checked":[516],"disabled":[516],"id":[1],"label":[1],"onChange":[16]}]]],["p-10d1256b",[[1,"limel-3d-hover-effect-glow"]]],["p-b928421f",[[17,"limel-icon-button",{"icon":[1],"elevated":[516],"label":[513],"disabled":[516]}]]],["p-e839ce5b",[[1,"limel-file-dropzone",{"accept":[513],"disabled":[4],"text":[1],"helperText":[1,"helper-text"],"hasFileToDrop":[32]}],[1,"limel-file-input",{"accept":[513],"disabled":[516],"multiple":[516]}]]],["p-b45cfa71",[[1,"limel-dynamic-label",{"value":[8],"defaultLabel":[16],"labels":[16]}]]],["p-9fc23e05",[[1,"limel-markdown",{"value":[1],"whitelist":[16],"lazyLoadImages":[4,"lazy-load-images"]}]]],["p-18a3c28a",[[1,"limel-badge",{"label":[520]}]]],["p-e4bafb75",[[1,"limel-helper-line",{"helperText":[513,"helper-text"],"length":[514],"maxLength":[514,"max-length"],"invalid":[516],"helperTextId":[513,"helper-text-id"]}]]],["p-7528a002",[[1,"limel-icon",{"size":[513],"name":[513],"badge":[516]}]]],["p-b5a96409",[[1,"limel-tooltip",{"elementId":[513,"element-id"],"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514],"openDirection":[513,"open-direction"],"open":[32]}],[1,"limel-tooltip-content",{"label":[513],"helperLabel":[513,"helper-label"],"maxlength":[514]}],[1,"limel-portal",{"openDirection":[513,"open-direction"],"position":[513],"containerId":[513,"container-id"],"containerStyle":[16],"inheritParentWidth":[516,"inherit-parent-width"],"visible":[516],"anchor":[16]}]]],["p-eb121716",[[1,"limel-menu",{"items":[16],"disabled":[516],"openDirection":[513,"open-direction"],"surfaceWidth":[513,"surface-width"],"open":[1540],"badgeIcons":[516,"badge-icons"],"gridLayout":[516,"grid-layout"],"loading":[516],"currentSubMenu":[1040],"rootItem":[16],"searcher":[16],"emptyResultMessage":[1,"empty-result-message"],"loadingSubItems":[32],"searchValue":[32],"searchResults":[32]}],[1,"limel-breadcrumbs",{"items":[16],"divider":[1]}],[17,"limel-menu-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"]}],[1,"limel-input-field",{"disabled":[516],"readonly":[516],"invalid":[516],"label":[513],"placeholder":[513],"helperText":[513,"helper-text"],"prefix":[513],"suffix":[513],"required":[516],"value":[513],"trailingIcon":[513,"trailing-icon"],"leadingIcon":[513,"leading-icon"],"pattern":[513],"type":[513],"formatNumber":[516,"format-number"],"step":[520],"max":[514],"min":[514],"maxlength":[514],"minlength":[514],"completions":[16],"showLink":[516,"show-link"],"locale":[513],"isFocused":[32],"wasInvalid":[32],"showCompletions":[32]}],[1,"limel-menu-surface",{"open":[4],"allowClicksElement":[16]}],[1,"limel-spinner",{"size":[513],"limeBranded":[4,"lime-branded"]}],[17,"limel-list",{"items":[16],"badgeIcons":[4,"badge-icons"],"iconSize":[1,"icon-size"],"type":[1],"maxLinesSecondaryText":[2,"max-lines-secondary-text"]}],[4,"limel-notched-outline",{"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"label":[513],"labelId":[513,"label-id"],"hasValue":[516,"has-value"],"hasLeadingIcon":[516,"has-leading-icon"],"hasFloatingLabel":[516,"has-floating-label"]}]]],["p-29c2cdc6",[[1,"limel-chip-set",{"value":[16],"type":[513],"label":[513],"helperText":[513,"helper-text"],"disabled":[516],"readonly":[516],"invalid":[516],"inputType":[513,"input-type"],"maxItems":[514,"max-items"],"required":[516],"searchLabel":[513,"search-label"],"emptyInputOnBlur":[516,"empty-input-on-blur"],"clearAllButton":[4,"clear-all-button"],"leadingIcon":[513,"leading-icon"],"delimiter":[513],"autocomplete":[513],"language":[1],"editMode":[32],"textValue":[32],"blurred":[32],"inputChipIndexSelected":[32],"selectedChipIds":[32],"getEditMode":[64],"setFocus":[64],"emptyInput":[64]}],[17,"limel-chip",{"language":[513],"text":[513],"icon":[1],"image":[16],"link":[16],"badge":[520],"disabled":[516],"readonly":[516],"selected":[516],"invalid":[516],"removable":[516],"type":[513],"loading":[516],"progress":[514],"identifier":[520],"size":[513],"menuItems":[16]}]]],["p-c6aaf532",[[17,"limel-button",{"label":[513],"primary":[516],"outlined":[516],"icon":[513],"disabled":[516],"loading":[516],"loadingFailed":[516,"loading-failed"],"justLoaded":[32]}]]],["p-2ff2186f",[[0,"limel-action-bar-overflow-menu",{"items":[16],"openDirection":[513,"open-direction"],"overFlowIcon":[16]}],[0,"limel-action-bar-item",{"item":[16],"isVisible":[516,"is-visible"],"selected":[516]}]]],["p-cc7f4c81",[[1,"limel-text-editor-link-menu",{"link":[16],"language":[513],"isOpen":[516,"is-open"]}],[1,"limel-action-bar",{"actions":[16],"language":[513],"accessibleLabel":[513,"accessible-label"],"layout":[513],"collapsible":[516],"openDirection":[513,"open-direction"],"overflowCutoff":[32],"actionBarIsShrunk":[32]}]]],["p-e6bb4d1a",[[1,"limel-linear-progress",{"language":[513],"value":[514],"indeterminate":[516],"accessibleLabel":[513,"accessible-label"]}]]],["p-eac0220e",[[1,"limel-popover",{"open":[4],"openDirection":[513,"open-direction"]}],[1,"limel-popover-surface",{"contentCollection":[16]}]]]]'),e)));
|
|
2
2
|
//# sourceMappingURL=lime-elements.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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};
|
|
2
|
+
//# sourceMappingURL=p-f507000e.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as e,c as o,h as t,g as i}from"./p-288f0842.js";import{d as n}from"./p-c70b1ea3.js";import{m as s,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) 0 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{--limel-cs-opacity-transition-speed:0.1s;--limel-cs-opacity-transition-delay:0s;--limel-cs-grid-template-rows-transition-speed:0.3s;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:0fr}.body slot{transition:opacity var(--limel-cs-opacity-transition-speed) ease var(--limel-cs-opacity-transition-delay);display:block;overflow:hidden;opacity:0}section.open .body{--limel-cs-opacity-transition-speed:0.4s;--limel-cs-opacity-transition-delay:0.3s;--limel-cs-grid-template-rows-transition-speed:0.46s;grid-template-rows:1fr}section.open .body 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(n,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");s(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};
|
|
2
|
-
//# sourceMappingURL=p-ed8aa16c.entry.js.map
|
|
@@ -1 +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) 0 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 // All below vars are for internal use only!\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 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: 0fr;\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 opacity: 0;\n }\n}\n\nsection.open {\n .body {\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 grid-template-rows: 1fr;\n\n slot {\n opacity: 1;\n }\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,w6O,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"}
|