@limetech/lime-elements 37.61.1 → 37.61.3
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 +16 -0
- package/dist/cjs/limel-form.cjs.entry.js +19 -3
- package/dist/cjs/limel-form.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-icon_2.cjs.entry.js +17 -15
- package/dist/cjs/limel-icon_2.cjs.entry.js.map +1 -1
- package/dist/cjs/limel-info-tile.cjs.entry.js +1 -1
- package/dist/cjs/limel-info-tile.cjs.entry.js.map +1 -1
- package/dist/collection/components/form/templates/array-field-collapsible-item.js +19 -3
- package/dist/collection/components/form/templates/array-field-collapsible-item.js.map +1 -1
- package/dist/collection/components/info-tile/info-tile.js +1 -1
- package/dist/collection/components/info-tile/info-tile.js.map +1 -1
- package/dist/collection/components/portal/portal.js +17 -15
- package/dist/collection/components/portal/portal.js.map +1 -1
- package/dist/esm/limel-form.entry.js +19 -3
- package/dist/esm/limel-form.entry.js.map +1 -1
- package/dist/esm/limel-icon_2.entry.js +17 -15
- package/dist/esm/limel-icon_2.entry.js.map +1 -1
- package/dist/esm/limel-info-tile.entry.js +1 -1
- package/dist/esm/limel-info-tile.entry.js.map +1 -1
- package/dist/lime-elements/lime-elements.css +1 -1
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-5862b851.entry.js +2 -0
- package/dist/lime-elements/p-5862b851.entry.js.map +1 -0
- package/dist/lime-elements/{p-c93ece44.entry.js → p-66bea69a.entry.js} +2 -2
- package/dist/lime-elements/p-66bea69a.entry.js.map +1 -0
- package/dist/lime-elements/{p-9bb104b1.entry.js → p-b852d3f5.entry.js} +2 -2
- package/dist/lime-elements/{p-9bb104b1.entry.js.map → p-b852d3f5.entry.js.map} +1 -1
- package/dist/types/components/form/templates/array-field-collapsible-item.d.ts +4 -1
- package/dist/types/components/portal/portal.d.ts +3 -1
- package/package.json +1 -1
- package/dist/lime-elements/p-c93ece44.entry.js.map +0 -1
- package/dist/lime-elements/p-d7c6ba55.entry.js +0 -2
- package/dist/lime-elements/p-d7c6ba55.entry.js.map +0 -1
|
@@ -83,7 +83,7 @@ const InfoTile = class {
|
|
|
83
83
|
this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
|
|
84
84
|
const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
|
|
85
85
|
return [
|
|
86
|
-
index.h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, class: {
|
|
86
|
+
index.h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
|
|
87
87
|
'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
|
|
88
88
|
'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) || ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
|
|
89
89
|
} }, this.renderIcon(), this.renderProgress(), index.h("div", { class: "value-group" }, this.renderPrefix(), index.h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"limel-info-tile.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,WAAW,GAAG,w2UAAw2U;;MCwB/2U,QAAQ;;;IAgIT,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAOA,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;IAEM,gBAAW,GAAG;;MAClB,MAAM,cAAc,GAAG,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,MAAM,CAAC;MAE5D,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;QAC7B,OAAOA,kBAAM,KAAK,EAAC,OAAO,yBAAW,CAAC;OACzC;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,QACIA,kBACI,KAAK,EAAE;YACH,KAAK,EAAE,IAAI;YACX,CAAC,MAAM,cAAc,EAAE,GAAG,IAAI;WACjC,IAEA,IAAI,CAAC,KAAK,CACR,EACT;OACL;KACJ,CAAC;IAEM,iBAAY,GAAG;MACnB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAOA,kBAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;KACJ,CAAC;IAEM,eAAU,GAAG;MACjB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,OAAOA,wBAAY,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;OACvD;KACJ,CAAC;IAEM,mBAAc,GAAG;;MACrB,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,KAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,MAAK,CAAC,EAAE;QACpD,QACIA,qCACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAC1B,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChC,uBAAuB,EACnB,IAAI,CAAC,QAAQ,CAAC,uBAAuB,GAE3C,EACJ;OACL;KACJ,CAAC;IAEM,gBAAW,GAAG;MAClB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,kBAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OAClD;KACJ,CAAC;IAEM,uBAAkB,GAAG;MACzB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAOA,yBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;KACJ,CAAC;IAEM,kBAAa,GAAG;MACpB,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAOA,mCAAuB,aAAa,EAAE,IAAI,GAAI,CAAC;OACzD;KACJ,CAAC;;;iBAtLsB,IAAI;;;oBAkBT,KAAK;;mBAcN,KAAK;;;;EA6BhB,MAAM;;IACT,MAAM,iBAAiB,GACnB,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;MAC7B,IAAI,CAAC,KAAK;MACV,GAAG;MACH,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC;MAC5B,IAAI;MACJ,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,MAAM,CAAC;MACvC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,KAAK,CAAC;MACtC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,MAAM,CAAC;MACvC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,KAAK,CAAC,CAAC;IAEvC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,GAAG,GAAG,CAAC;IAEpD,OAAO;MACHA,eACI,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EACvB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,iBAAiB,mBACd,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE;UACH,cAAc,EAAE,CAAC,EAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAA,IAAI,CAAC,IAAI,CAAC,QAAQ;UACnD,uBAAuB,EACnB,CAAC,EAAC,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,MAAK,CAAC;SAC3D,IAEA,IAAI,CAAC,UAAU,EAAE,EACjB,IAAI,CAAC,cAAc,EAAE,EACtBA,iBAAK,KAAK,EAAC,aAAa,IACnB,IAAI,CAAC,YAAY,EAAE,EACpBA,iBAAK,KAAK,EAAC,kBAAkB,IACxB,IAAI,CAAC,WAAW,EAAE,EAClB,IAAI,CAAC,YAAY,EAAE,CAClB,EACL,IAAI,CAAC,aAAa,EAAE,CACnB,EACL,IAAI,CAAC,WAAW,EAAE,CACnB;MACJ,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;GACL;EAEO,UAAU,CAAC,SAAS;IACxB,OAAO,CAAC,SAAS,GAAG,EAAE,GAAG,SAAS,GAAG,GAAG,CAAC;GAC5C;;;;;;","names":["h"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n isolation: isolate;\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n\n &.is-clickable {\n @include mixins.is-elevated-clickable(\n $background-color:\n var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n ),\n $background-color--hovered:\n var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n )\n );\n @include mixins.visualize-keyboard-focus;\n }\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n .has-circular-progress & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition:\n opacity 0.2s ease,\n transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n .has-circular-progress & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\n .progress,\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n // -webkit-line-clamp: 3;\n }\n .has-circular-progress {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return [\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value || this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n </a>,\n this.renderNotification(),\n ];\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value || this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"version":3}
|
|
1
|
+
{"file":"limel-info-tile.entry.cjs.js","mappings":"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","names":["h"],"sources":["./src/components/info-tile/info-tile.scss?tag=limel-info-tile&encapsulation=shadow","./src/components/info-tile/info-tile.tsx"],"sourcesContent":["/**\n* @prop --info-tile-border-radius: defines the radius of corners of the info-tile. Defaults to `1rem`\n* @prop --info-tile-icon-color: defines the fill color of the info-tile icon. Defaults to `--contrast-1000`\n* @prop --info-tile-text-color: defines the color of the info-tile label. Defaults to `--contrast-1100`\n* @prop --info-tile-background-color: defines the backgrounds color of the info-tile icon. Defaults to `--contrast-100`\n* @prop --info-tile-badge-text-color: Text color of the notification badge. Defaults to `--color-white`\n* @prop --info-tile-badge-background-color: Background color of the notification badge. Defaults to `--color-red-default`\n* @prop --info-tile-progress-fill-color: Determines the color of the progressed section. Defaults to `--lime-primary-color`.\n* @prop --info-tile-progress-background-color: Determines the background color of the central section of the progress bar. Defaults to `--info-tile-background-color`.\n* @prop --info-tile-progress-suffix-color: Determines the color of the progress prefix. Defaults to `--contrast-1000`.\n * @prop --info-tile-progress-text-color: Determines the color of the progress value. Defaults to `--info-tile-text-color`.\n * @prop --info-tile-progress-prefix-color: Determines the color of the progress suffix. Defaults to `--contrast-1000`.\n*/\n\n@use '../../style/mixins';\n\n:host(limel-info-tile) {\n --badge-text-color: var(\n --info-tile-badge-text-color,\n rgb(var(--color-white))\n );\n --badge-background-color: var(\n --info-tile-badge-background-color,\n rgb(var(--color-red-default))\n );\n\n --circular-progress-text-color: var(\n --info-tile-progress-text-color,\n var(--info-tile-text-color)\n );\n --circular-progress-suffix-color: var(--info-tile-progress-suffix-color);\n --circular-progress-prefix-color: var(--info-tile-progress-prefix-color);\n --circular-progress-track-color: rgb(var(--contrast-800), 0.3);\n --circular-progress-fill-color: var(--info-tile-progress-fill-color);\n --circular-progress-background-color: var(\n --info-tile-progress-background-color,\n var(--info-tile-background-color)\n );\n\n --label-min-size: 0.75rem;\n --label-preferred-size: 6cqw;\n --label-max-size: 1rem;\n\n --value-min-size: 1rem;\n --value-preferred-size: 20cqw;\n --value-max-size: 4rem;\n\n --suffix-prefix-min-size: 0.75rem;\n --suffix-prefix-preferred-size: 8cqw;\n --suffix-prefix-max-size: 1.5rem;\n\n --icon-min-size: 2rem;\n --icon-preferred-size: 60cqh;\n --icon-max-size: calc(100cqw - 0.5rem);\n\n isolation: isolate;\n container-type: size;\n position: relative;\n display: flex;\n\n width: 100%;\n height: 100%;\n\n * {\n box-sizing: border-box;\n }\n}\n\n:host(limel-info-tile[disabled]) {\n a {\n opacity: 0.5;\n cursor: not-allowed;\n }\n}\n\na {\n all: unset;\n overflow: hidden;\n\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n align-items: flex-start;\n\n height: 100%;\n width: 100%;\n flex-grow: 1;\n\n padding: 0.25rem 1rem 0.5rem 1rem;\n border-radius: var(--info-tile-border-radius, 1rem);\n background-color: var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n );\n\n &.is-clickable {\n @include mixins.is-elevated-clickable(\n $background-color:\n var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n ),\n $background-color--hovered:\n var(\n --info-tile-background-color,\n var(--lime-elevated-surface-background-color)\n )\n );\n @include mixins.visualize-keyboard-focus;\n }\n}\n\n.icon {\n z-index: 1;\n position: absolute;\n top: 0.5rem;\n right: 0.75rem;\n padding: 0.25rem;\n\n aspect-ratio: 1/1;\n\n color: var(--info-tile-icon-color, rgb(var(--contrast-1000)));\n\n border-radius: 0;\n height: clamp(\n var(--icon-min-size),\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n\n @supports not (container-type: size) {\n width: max(10%, 3rem);\n }\n\n .has-circular-progress & {\n top: unset;\n bottom: 0.5rem;\n --icon-min-size: 1.5rem;\n --icon-preferred-size: 20cqh;\n }\n}\n\n.progress {\n position: absolute;\n top: 0.75rem;\n right: 0.75rem;\n\n --circular-progress-size: min(\n var(--icon-preferred-size),\n var(--icon-max-size)\n );\n @supports not (container-type: size) {\n --circular-progress-size: initial;\n }\n}\n\n.label {\n z-index: 1;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n\n line-height: 1.2;\n font-size: clamp(\n var(--label-min-size),\n var(--label-preferred-size),\n var(--label-max-size)\n );\n @supports not (container-type: size) {\n font-size: 0.875rem;\n }\n}\n\nlimel-badge {\n position: absolute;\n top: -0.25rem;\n right: -0.25rem;\n}\n\nlimel-linear-progress {\n --lime-primary-color: var(--info-tile-text-color);\n position: absolute;\n inset: auto 0 0 0;\n}\n\n.value-group {\n position: relative;\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--info-tile-text-color, rgb(var(--contrast-1100)));\n}\n\n.value-and-suffix,\n.label {\n text-shadow:\n 0 0 0.5rem var(--info-tile-background-color, rgb(var(--contrast-100))),\n 0 0 0.25rem var(--info-tile-background-color, rgb(var(--contrast-100)));\n}\n\n.value-and-suffix {\n display: flex;\n}\n\n.prefix,\n.suffix {\n font-size: clamp(\n var(--suffix-prefix-min-size),\n var(--suffix-prefix-preferred-size),\n var(--suffix-prefix-max-size)\n );\n opacity: 0.7;\n\n @supports not (container-type: size) {\n font-size: 0.75rem;\n }\n}\n\n.prefix {\n align-self: flex-start;\n line-height: normal;\n transform: translateY(40%);\n}\n\n.value {\n transition:\n opacity 0.2s ease,\n transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.95);\n transform-origin: left;\n transform: translate3d(0, 0, 0) scale(1);\n\n @include mixins.truncate-text;\n font-weight: bold;\n line-height: normal;\n\n font-size: clamp(\n var(--value-min-size),\n var(--value-preferred-size),\n var(--value-max-size)\n );\n @supports not (container-type: size) {\n font-size: 1.5rem;\n }\n\n :host(limel-info-tile[loading]) & {\n opacity: 0.3;\n transform: translate3d(0, 0, 0) scale(0.9);\n }\n}\n\n.suffix {\n transform: translateY(10%);\n}\n\n$xs: 8rem; //128px:\n$s: 18.75rem; //300px\n$m: 40.5rem; //648px\n$l: 62.5rem; //1000px\n\n@container (width < #{$xs}) {\n .progress {\n top: 0.25rem;\n right: 0.25rem;\n }\n a {\n padding: 0.375rem;\n gap: 0.125rem;\n }\n}\n\n@container (width < #{$s}) {\n .progress {\n top: 0.5rem;\n right: 0.5rem;\n }\n .icon {\n top: 0.25rem;\n right: 0.5rem;\n .has-circular-progress & {\n right: 0.25rem;\n bottom: 0.25rem;\n }\n }\n}\n\n@container (width < #{$m}) {\n .value {\n &.ch-1,\n &.ch-2,\n &.ch-3,\n &.ch-4 {\n --value-preferred-size: 20cqw;\n }\n &.ch-5 {\n --value-preferred-size: 18cqw;\n }\n &.ch-6 {\n --value-preferred-size: 17cqw;\n }\n &.ch-7 {\n --value-preferred-size: 16cqw;\n }\n &.ch-8 {\n --value-preferred-size: 15cqw;\n }\n &.ch-9 {\n --value-preferred-size: 14cqw;\n }\n --value-preferred-size: 13cqw;\n }\n}\n\n@container (height > #{$xs}) {\n a {\n padding-top: 0.75rem;\n padding-bottom: 1rem;\n }\n}\n\n@container (height < #{$xs}) and (width > #{$xs}) {\n .value {\n --value-preferred-size: 32cqh !important;\n }\n .suffix,\n .prefix {\n --suffix-prefix-preferred-size: 16cqh !important;\n }\n}\n\n@container (height > #{$s}) {\n .progress,\n .icon {\n position: relative;\n top: unset;\n right: unset;\n }\n a {\n align-items: center;\n justify-content: center;\n }\n .label {\n text-align: center;\n // -webkit-line-clamp: 3;\n }\n .has-circular-progress {\n .icon {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n --icon-max-size: 3rem;\n }\n }\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return [\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value || this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n </a>,\n this.renderNotification(),\n ];\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value || this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"],"version":3}
|
|
@@ -5,13 +5,24 @@ export class CollapsibleItemTemplate extends React.Component {
|
|
|
5
5
|
constructor(props) {
|
|
6
6
|
super(props);
|
|
7
7
|
this.props = props;
|
|
8
|
+
this.state = {
|
|
9
|
+
isOpen: false,
|
|
10
|
+
};
|
|
11
|
+
this.handleOpen = () => {
|
|
12
|
+
this.setState({
|
|
13
|
+
isOpen: true,
|
|
14
|
+
});
|
|
15
|
+
};
|
|
8
16
|
this.handleAction = this.handleAction.bind(this);
|
|
9
17
|
this.isDeepEmpty = this.isDeepEmpty.bind(this);
|
|
10
|
-
this.
|
|
18
|
+
this.setState({
|
|
19
|
+
isOpen: this.isDeepEmpty(props.data),
|
|
20
|
+
});
|
|
11
21
|
}
|
|
12
22
|
componentDidMount() {
|
|
13
23
|
const section = this.refs.section;
|
|
14
24
|
section.addEventListener('action', this.handleAction);
|
|
25
|
+
section.addEventListener('open', this.handleOpen);
|
|
15
26
|
this.setActions(section);
|
|
16
27
|
}
|
|
17
28
|
componentDidUpdate() {
|
|
@@ -21,15 +32,20 @@ export class CollapsibleItemTemplate extends React.Component {
|
|
|
21
32
|
componentWillUnmount() {
|
|
22
33
|
const section = this.refs.section;
|
|
23
34
|
section.removeEventListener('action', this.handleAction);
|
|
35
|
+
section.removeEventListener('open', this.handleOpen);
|
|
24
36
|
}
|
|
25
37
|
render() {
|
|
26
38
|
const { data, schema, formSchema } = this.props;
|
|
39
|
+
let children;
|
|
40
|
+
if (this.state.isOpen) {
|
|
41
|
+
children = this.props.item.children;
|
|
42
|
+
}
|
|
27
43
|
return React.createElement('limel-collapsible-section', {
|
|
28
44
|
header: findTitle(data, schema, formSchema) || 'New item',
|
|
29
45
|
class: 'limel-form-array-item--object',
|
|
30
46
|
ref: 'section',
|
|
31
|
-
'is-open': this.isOpen,
|
|
32
|
-
},
|
|
47
|
+
'is-open': this.state.isOpen,
|
|
48
|
+
}, children);
|
|
33
49
|
}
|
|
34
50
|
setActions(element) {
|
|
35
51
|
const { item, index } = this.props;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA8BpC,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,SAAS;
|
|
1
|
+
{"version":3,"file":"array-field-collapsible-item.js","sourceRoot":"","sources":["../../../../src/components/form/templates/array-field-collapsible-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { Action } from '../../collapsible-section/action';\nimport React from 'react';\nimport { findTitle } from './common';\nimport { ArrayFieldItem, Runnable } from './types';\nimport { isEmpty } from 'lodash-es';\nimport { JSONSchema7 } from 'json-schema';\n\ninterface CollapsibleItemProps {\n /**\n * Data from reach-jsonschema-form\n */\n item: ArrayFieldItem;\n\n /**\n * The index of the field in the array\n */\n index: number;\n\n /**\n * The value of the field\n */\n data: any;\n\n /**\n * Schema for the field\n */\n schema: JSONSchema7;\n\n /**\n * Schema for the entire form\n */\n formSchema: JSONSchema7;\n}\n\nexport class CollapsibleItemTemplate extends React.Component {\n public refs: { section: any };\n state = {\n isOpen: false,\n };\n\n constructor(public props: CollapsibleItemProps) {\n super(props);\n this.handleAction = this.handleAction.bind(this);\n this.isDeepEmpty = this.isDeepEmpty.bind(this);\n\n this.setState({\n isOpen: this.isDeepEmpty(props.data),\n });\n }\n\n public componentDidMount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.addEventListener('action', this.handleAction);\n section.addEventListener('open', this.handleOpen);\n\n this.setActions(section);\n }\n\n public componentDidUpdate() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n this.setActions(section);\n }\n\n public componentWillUnmount() {\n const section: HTMLLimelCollapsibleSectionElement = this.refs.section;\n section.removeEventListener('action', this.handleAction);\n section.removeEventListener('open', this.handleOpen);\n }\n\n public render() {\n const { data, schema, formSchema } = this.props;\n let children: any;\n if (this.state.isOpen) {\n children = this.props.item.children;\n }\n\n return React.createElement(\n 'limel-collapsible-section',\n {\n header: findTitle(data, schema, formSchema) || 'New item',\n class: 'limel-form-array-item--object',\n ref: 'section',\n 'is-open': this.state.isOpen,\n },\n children,\n );\n }\n\n private setActions(element: HTMLLimelCollapsibleSectionElement) {\n const { item, index } = this.props;\n const actions: Array<Action & Runnable> = [\n {\n id: 'down',\n icon: 'down_arrow',\n disabled: !item.hasMoveDown,\n run: item.onReorderClick(index, index + 1),\n },\n {\n id: 'up',\n icon: 'up_arrow',\n disabled: !item.hasMoveUp,\n run: item.onReorderClick(index, index - 1),\n },\n {\n id: 'remove',\n icon: 'trash',\n disabled: !item.hasRemove,\n run: item.onDropIndexClick(index),\n },\n ];\n\n element.actions = actions;\n }\n\n private handleAction(event: CustomEvent<Action & Runnable>) {\n event.stopPropagation();\n event.detail.run(event);\n }\n\n private handleOpen = () => {\n this.setState({\n isOpen: true,\n });\n };\n\n private isDeepEmpty(data) {\n if (typeof data !== 'object') {\n return false;\n }\n\n if (isEmpty(data)) {\n return true;\n }\n\n return Object.values(data).every(this.isDeepEmpty);\n }\n}\n"]}
|
|
@@ -90,7 +90,7 @@ export class InfoTile {
|
|
|
90
90
|
this.checkProps((_d = this === null || this === void 0 ? void 0 : this.link) === null || _d === void 0 ? void 0 : _d.title);
|
|
91
91
|
const link = !this.disabled ? (_e = this.link) === null || _e === void 0 ? void 0 : _e.href : '#';
|
|
92
92
|
return [
|
|
93
|
-
h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, class: {
|
|
93
|
+
h("a", { title: (_f = this.link) === null || _f === void 0 ? void 0 : _f.title, href: link, target: (_g = this.link) === null || _g === void 0 ? void 0 : _g.target, tabindex: "0", "aria-label": extendedAriaLabel, "aria-disabled": this.disabled, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite", class: {
|
|
94
94
|
'is-clickable': !!((_h = this.link) === null || _h === void 0 ? void 0 : _h.href) && !this.disabled,
|
|
95
95
|
'has-circular-progress': !!((_j = this.progress) === null || _j === void 0 ? void 0 : _j.value) || ((_k = this.progress) === null || _k === void 0 ? void 0 : _k.value) === 0,
|
|
96
96
|
} }, this.renderIcon(), this.renderProgress(), h("div", { class: "value-group" }, this.renderPrefix(), h("div", { class: "value-and-suffix" }, this.renderValue(), this.renderSuffix()), this.renderSpinner()), this.renderLabel()),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAInD;;;;;;;;;;;;;;GAcG;AAMH,MAAM,OAAO,QAAQ;;IAgIT,iBAAY,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;;MACvB,MAAM,cAAc,GAAG,CAAC,MAAA,IAAI,CAAC,KAAK,mCAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAC;MAE5D,IAAI,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,EAAE;QAC7B,OAAO,YAAM,KAAK,EAAC,OAAO,yBAAW,CAAC;OACzC;MAED,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,CACH,YACI,KAAK,EAAE;YACH,KAAK,EAAE,IAAI;YACX,CAAC,MAAM,cAAc,EAAE,CAAC,EAAE,IAAI;WACjC,IAEA,IAAI,CAAC,KAAK,CACR,CACV,CAAC;OACL;IACL,CAAC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;MACxB,IAAI,IAAI,CAAC,MAAM,EAAE;QACb,OAAO,YAAM,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CAAC;OACpD;IACL,CAAC,CAAC;IAEM,eAAU,GAAG,GAAG,EAAE;MACtB,IAAI,IAAI,CAAC,IAAI,EAAE;QACX,OAAO,kBAAY,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;OACvD;IACL,CAAC,CAAC;IAEM,mBAAc,GAAG,GAAG,EAAE;;MAC1B,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,KAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,MAAK,CAAC,EAAE;QACpD,OAAO,CACH,+BACI,KAAK,EAAC,UAAU,EAChB,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC5B,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,EAC1B,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,EAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAChC,uBAAuB,EACnB,IAAI,CAAC,QAAQ,CAAC,uBAAuB,GAE3C,CACL,CAAC;OACL;IACL,CAAC,CAAC;IAEM,gBAAW,GAAG,GAAG,EAAE;MACvB,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAAC;OAClD;IACL,CAAC,CAAC;IAEM,uBAAkB,GAAG,GAAG,EAAE;MAC9B,IAAI,IAAI,CAAC,KAAK,EAAE;QACZ,OAAO,mBAAa,KAAK,EAAE,IAAI,CAAC,KAAK,GAAI,CAAC;OAC7C;IACL,CAAC,CAAC;IAEM,kBAAa,GAAG,GAAG,EAAE;MACzB,IAAI,IAAI,CAAC,OAAO,EAAE;QACd,OAAO,6BAAuB,aAAa,EAAE,IAAI,GAAI,CAAC;OACzD;IACL,CAAC,CAAC;;;iBAtLsB,IAAI;;;oBAkBT,KAAK;;mBAcN,KAAK;;;;EA6BhB,MAAM;;IACT,MAAM,iBAAiB,GACnB,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;MAC7B,IAAI,CAAC,KAAK;MACV,GAAG;MACH,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC;MAC7B,IAAI,CAAC,UAAU,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,CAAC;MAC5B,IAAI;MACJ,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,MAAM,CAAC;MACvC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,KAAK,CAAC;MACtC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,0CAAE,MAAM,CAAC;MACvC,IAAI,CAAC,UAAU,CAAC,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,KAAK,CAAC,CAAC;IAEvC,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC;IAEpD,OAAO;MACH,SACI,KAAK,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,KAAK,EACvB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,MAAM,EACzB,QAAQ,EAAC,GAAG,gBACA,iBAAiB,mBACd,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE;UACH,cAAc,EAAE,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,IAAI,0CAAE,IAAI,CAAA,IAAI,CAAC,IAAI,CAAC,QAAQ;UACnD,uBAAuB,EACnB,CAAC,CAAC,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,CAAA,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,MAAK,CAAC;SAC3D;QAEA,IAAI,CAAC,UAAU,EAAE;QACjB,IAAI,CAAC,cAAc,EAAE;QACtB,WAAK,KAAK,EAAC,aAAa;UACnB,IAAI,CAAC,YAAY,EAAE;UACpB,WAAK,KAAK,EAAC,kBAAkB;YACxB,IAAI,CAAC,WAAW,EAAE;YAClB,IAAI,CAAC,YAAY,EAAE,CAClB;UACL,IAAI,CAAC,aAAa,EAAE,CACnB;QACL,IAAI,CAAC,WAAW,EAAE,CACnB;MACJ,IAAI,CAAC,kBAAkB,EAAE;KAC5B,CAAC;EACN,CAAC;EAEO,UAAU,CAAC,SAAS;IACxB,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC;EAC7C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EJ","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return [\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value || this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n </a>,\n this.renderNotification(),\n ];\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value || this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"info-tile.js","sourceRoot":"","sources":["../../../src/components/info-tile/info-tile.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h } from '@stencil/core';\nimport { InfoTileProgress } from '../info-tile/info-tile.types';\nimport { Link } from '../../global/shared-types/link.types';\n\n/**\n * This component can be used on places such as a start page or a dashboard.\n * It offers features for visualizing aggregated data along with supplementary\n * information.\n *\n * If clicking on the component should navigate the user to\n * a new screen or web page, you need to provide a URL,\n * using the `link` property.\n *\n * @exampleComponent limel-example-info-tile\n * @exampleComponent limel-example-info-tile-badge\n * @exampleComponent limel-example-info-tile-progress\n * @exampleComponent limel-example-info-tile-loading\n * @exampleComponent limel-example-info-tile-styling\n */\n@Component({\n tag: 'limel-info-tile',\n shadow: true,\n styleUrl: 'info-tile.scss',\n})\nexport class InfoTile {\n /**\n * A piece of text or number that is the main piece of information\n * which the component is intended to visualize.\n */\n @Prop({ reflect: true })\n public value: number | string;\n\n /**\n * Name of icon for the info tile.\n */\n @Prop()\n public icon?: string;\n\n /**\n * The text to show below the info tile. Long labels will be truncated.\n */\n @Prop({ reflect: true })\n public label?: string = null;\n\n /**\n * A string of text that is visually placed before the value.\n */\n @Prop({ reflect: true })\n public prefix?: string;\n\n /**\n * A string of text that is visually placed after the value.\n */\n @Prop({ reflect: true })\n public suffix?: string;\n\n /**\n * Set to `true` if info tile is disabled.\n */\n @Prop({ reflect: true })\n public disabled? = false;\n\n /**\n * If supplied, the info tile will display a notification badge.\n */\n @Prop({ reflect: true })\n public badge?: number | string;\n\n /**\n * Set to `true` to put the component in the `loading` state.\n * This does _not_ disable the link. To do so, the\n * `disabled` property should be set to `true` as well.\n */\n @Prop({ reflect: true })\n public loading? = false;\n\n /**\n * If supplied, the info tile will be a clickable link.\n *\n * Supplying a value also adds an elevated effect using a shadow,\n * as well as `cursor: pointer`, which appears on hover.\n * While we strongly recommend supplying a link whenever the\n * component should act as a link, if this is not possible, and\n * you need to provide interaction through a click handler,\n * you can still get the correct styling by supplying a `Link`\n * object with the `href` property set to `'#'`.\n */\n @Prop()\n public link?: Link;\n\n /**\n * Properties of the optional circular progress bar.\n *\n * Defaults:\n * - `maxValue`: 100\n * - `suffix`: %\n * - `displayPercentageColors`: false\n *\n * Colors change with intervals of 10 %.\n */\n @Prop()\n public progress?: InfoTileProgress;\n\n public render() {\n const extendedAriaLabel =\n this.checkProps(this?.prefix) +\n this.value +\n ' ' +\n this.checkProps(this?.suffix) +\n this.checkProps(this?.label) +\n '. ' +\n this.checkProps(this?.progress?.prefix) +\n this.checkProps(this?.progress?.value) +\n this.checkProps(this?.progress?.suffix) +\n this.checkProps(this?.link?.title);\n\n const link = !this.disabled ? this.link?.href : '#';\n\n return [\n <a\n title={this.link?.title}\n href={link}\n target={this.link?.target}\n tabindex=\"0\"\n aria-label={extendedAriaLabel}\n aria-disabled={this.disabled}\n aria-busy={this.loading ? 'true' : 'false'}\n aria-live=\"polite\"\n class={{\n 'is-clickable': !!this.link?.href && !this.disabled,\n 'has-circular-progress':\n !!this.progress?.value || this.progress?.value === 0,\n }}\n >\n {this.renderIcon()}\n {this.renderProgress()}\n <div class=\"value-group\">\n {this.renderPrefix()}\n <div class=\"value-and-suffix\">\n {this.renderValue()}\n {this.renderSuffix()}\n </div>\n {this.renderSpinner()}\n </div>\n {this.renderLabel()}\n </a>,\n this.renderNotification(),\n ];\n }\n\n private checkProps(propValue) {\n return !propValue ? '' : propValue + ' ';\n }\n\n private renderPrefix = () => {\n if (this.prefix) {\n return <span class=\"prefix\">{this.prefix}</span>;\n }\n };\n\n private renderValue = () => {\n const characterCount = (this.value ?? '').toString().length;\n\n if (!this.value && this.loading) {\n return <span class=\"value\">···</span>;\n }\n\n if (this.value) {\n return (\n <span\n class={{\n value: true,\n [`ch-${characterCount}`]: true,\n }}\n >\n {this.value}\n </span>\n );\n }\n };\n\n private renderSuffix = () => {\n if (this.suffix) {\n return <span class=\"suffix\">{this.suffix}</span>;\n }\n };\n\n private renderIcon = () => {\n if (this.icon) {\n return <limel-icon class=\"icon\" name={this.icon} />;\n }\n };\n\n private renderProgress = () => {\n if (this.progress?.value || this.progress?.value === 0) {\n return (\n <limel-circular-progress\n class=\"progress\"\n prefix={this.progress.prefix}\n value={this.progress.value}\n suffix={this.progress.suffix}\n maxValue={this.progress.maxValue}\n displayPercentageColors={\n this.progress.displayPercentageColors\n }\n />\n );\n }\n };\n\n private renderLabel = () => {\n if (this.label) {\n return <span class=\"label\">{this.label}</span>;\n }\n };\n\n private renderNotification = () => {\n if (this.badge) {\n return <limel-badge label={this.badge} />;\n }\n };\n\n private renderSpinner = () => {\n if (this.loading) {\n return <limel-linear-progress indeterminate={true} />;\n }\n };\n}\n"]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
2
|
import { createPopper, } from '@popperjs/core';
|
|
3
|
+
const IS_VISIBLE_CLASS = 'is-visible';
|
|
3
4
|
/**
|
|
4
5
|
* The portal component provides a way to render children into a DOM node that
|
|
5
6
|
* exist outside the DOM hierarchy of the parent component.
|
|
@@ -116,8 +117,6 @@ export class Portal {
|
|
|
116
117
|
this.container = document.createElement('div');
|
|
117
118
|
this.container.setAttribute('id', this.containerId);
|
|
118
119
|
this.container.setAttribute('class', 'limel-portal--container');
|
|
119
|
-
this.container.style.fontFamily =
|
|
120
|
-
'var(--limel-portal-font-family, inherit)';
|
|
121
120
|
Object.assign(this.container, {
|
|
122
121
|
portalSource: this.host,
|
|
123
122
|
});
|
|
@@ -144,19 +143,21 @@ export class Portal {
|
|
|
144
143
|
this.container.parentElement.removeChild(this.container);
|
|
145
144
|
}
|
|
146
145
|
hideContainer() {
|
|
147
|
-
this.container
|
|
146
|
+
if (!this.container) {
|
|
147
|
+
return;
|
|
148
|
+
}
|
|
149
|
+
this.container.classList.remove(IS_VISIBLE_CLASS);
|
|
148
150
|
}
|
|
149
151
|
showContainer() {
|
|
150
|
-
this.container.
|
|
152
|
+
this.container.classList.add(IS_VISIBLE_CLASS);
|
|
151
153
|
}
|
|
152
154
|
styleContainer() {
|
|
155
|
+
this.setContainerWidth();
|
|
156
|
+
this.setContainerHeight();
|
|
157
|
+
this.setContainerStyles();
|
|
158
|
+
}
|
|
159
|
+
setContainerWidth() {
|
|
153
160
|
const hostWidth = this.host.getBoundingClientRect().width;
|
|
154
|
-
if (this.visible) {
|
|
155
|
-
this.container.style.display = 'block';
|
|
156
|
-
}
|
|
157
|
-
else {
|
|
158
|
-
this.container.style.display = 'none';
|
|
159
|
-
}
|
|
160
161
|
if (this.inheritParentWidth) {
|
|
161
162
|
const containerWidth = this.getContentWidth(this.container);
|
|
162
163
|
let width = containerWidth;
|
|
@@ -165,10 +166,6 @@ export class Portal {
|
|
|
165
166
|
}
|
|
166
167
|
this.container.style.width = `${width}px`;
|
|
167
168
|
}
|
|
168
|
-
this.ensureContainerFitsInViewPort();
|
|
169
|
-
Object.keys(this.containerStyle).forEach((property) => {
|
|
170
|
-
this.container.style[property] = this.containerStyle[property];
|
|
171
|
-
});
|
|
172
169
|
}
|
|
173
170
|
getContentWidth(element) {
|
|
174
171
|
if (!element) {
|
|
@@ -181,6 +178,11 @@ export class Portal {
|
|
|
181
178
|
const elementContent = element.querySelector('*');
|
|
182
179
|
return this.getContentWidth(elementContent);
|
|
183
180
|
}
|
|
181
|
+
setContainerStyles() {
|
|
182
|
+
Object.keys(this.containerStyle).forEach((property) => {
|
|
183
|
+
this.container.style[property] = this.containerStyle[property];
|
|
184
|
+
});
|
|
185
|
+
}
|
|
184
186
|
createPopper() {
|
|
185
187
|
const config = this.createPopperConfig();
|
|
186
188
|
this.popperInstance = createPopper(this.anchor || this.host, this.container, config);
|
|
@@ -240,7 +242,7 @@ export class Portal {
|
|
|
240
242
|
};
|
|
241
243
|
return flipPlacements[direction];
|
|
242
244
|
}
|
|
243
|
-
|
|
245
|
+
setContainerHeight() {
|
|
244
246
|
const viewHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
|
|
245
247
|
const { top, bottom } = this.host.getBoundingClientRect();
|
|
246
248
|
const spaceAboveTopOfSurface = Math.max(top, 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EACH,YAAY,GAIf,MAAM,gBAAgB,CAAC;AAGxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAMH,MAAM,OAAO,MAAM;EAsEf;IAHQ,WAAM,GAAG,KAAK,CAAC;yBA9De,QAAQ;oBAMN,UAAU;;0BAYlB,EAAE;kBAaL,QAAQ,CAAC,IAAI;8BAOd,KAAK;mBAShB,KAAK;kBAOQ,IAAI;IAY9B,IAAI,CAAC,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;GAChC;EAEM,oBAAoB;IACvB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACf,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KAC3C;EACL,CAAC;EAEM,iBAAiB;IACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MACd,OAAO;KACV;IAED,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;EACL,CAAC;EAEM,gBAAgB;IACnB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACnB,IAAI,CAAC,iBAAiB,EAAE,CAAC;EAC7B,CAAC;EAEO,IAAI;IACR,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,eAAe,EAAE,CAAC;IACvB,IAAI,CAAC,cAAc,EAAE,CAAC;IAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,YAAY,EAAE,CAAC;MACpB,IAAI,CAAC,aAAa,EAAE,CAAC;KACxB;IAED,IAAI,gBAAgB,IAAI,MAAM,EAAE;MAC5B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;QACrC,IAAI,IAAI,CAAC,cAAc,EAAE;UACrB,IAAI,CAAC,cAAc,EAAE,CAAC;UACtB,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;SAChC;MACL,CAAC,CAAC,CAAC;MACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;KACpC;EACL,CAAC;EAEM,MAAM;IACT,OAAO,eAAQ,CAAC;EACpB,CAAC;EAGS,SAAS;IACf,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,EAAE;MACjC,IAAI,CAAC,IAAI,EAAE,CAAC;KACf;IAED,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;MACf,IAAI,CAAC,aAAa,EAAE,CAAC;MACrB,IAAI,CAAC,cAAc,EAAE,CAAC;MACtB,IAAI,CAAC,aAAa,EAAE,CAAC;MAErB,OAAO;KACV;IAED,IAAI,CAAC,cAAc,EAAE,CAAC;IACtB,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,qBAAqB,CAAC,GAAG,EAAE;MACvB,IAAI,CAAC,aAAa,EAAE,CAAC;IACzB,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe;IACnB,MAAM,IAAI,GACN,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC/C,MAAM,OAAO,GACT,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC,IAAI,EAAE,CAAC;IAE7D,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACpD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,OAAO,EAAE,yBAAyB,CAAC,CAAC;IAChE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,UAAU;MAC3B,0CAA0C,CAAC;IAC/C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE;MAC1B,YAAY,EAAE,IAAI,CAAC,IAAI;KAC1B,CAAC,CAAC;IAEH,OAAO,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;MACrC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;MACjD,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe;IACnB,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC5C,CAAC;EAEO,eAAe;IACnB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACjB,OAAO;KACV;IAED,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,OAAoB,EAAE,EAAE;MACjE,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;MACzC,IAAI,CAAC,MAAM,EAAE;QACT,OAAO;OACV;MAED,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,aAAa,EAAE,CAAC;IACrB,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;EAC7D,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EACvC,CAAC;EAEO,aAAa;IACjB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;EACvC,CAAC;EAEO,cAAc;IAClB,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IAE1D,IAAI,IAAI,CAAC,OAAO,EAAE;MACd,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;KAC1C;SAAM;MACH,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;KACzC;IAED,IAAI,IAAI,CAAC,kBAAkB,EAAE;MACzB,MAAM,cAAc,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;MAC5D,IAAI,KAAK,GAAG,cAAc,CAAC;MAC3B,IAAI,SAAS,GAAG,CAAC,EAAE;QACf,KAAK,GAAG,SAAS,CAAC;OACrB;MAED,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;KAC7C;IAED,IAAI,CAAC,6BAA6B,EAAE,CAAC;IAErC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;MAClD,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;IACnE,CAAC,CAAC,CAAC;EACP,CAAC;EAEO,eAAe,CAAC,OAA8B;IAClD,IAAI,CAAC,OAAO,EAAE;MACV,OAAO,IAAI,CAAC;KACf;IAED,MAAM,KAAK,GAAG,OAAO,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC;IACpD,IAAI,KAAK,KAAK,CAAC,EAAE;MACb,OAAO,KAAK,CAAC;KAChB;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;IAElD,OAAO,IAAI,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC;EAChD,CAAC;EAEO,YAAY;IAChB,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAEzC,IAAI,CAAC,cAAc,GAAG,YAAY,CAC9B,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,IAAI,EACxB,IAAI,CAAC,SAAS,EACd,MAAM,CACT,CAAC;EACN,CAAC;EAEO,aAAa;;IACjB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,EAAE,CAAC;IAC/B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;EAC/B,CAAC;EAEO,kBAAkB;IAGtB,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAEhE,OAAO;MACH,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACvB,SAAS,EAAE,SAAS;MACpB,SAAS,EAAE;QACP;UACI,IAAI,EAAE,MAAM;UACZ,OAAO,EAAE;YACL,kBAAkB,EAAE,CAAC,aAAa,CAAC;WACtC;SACJ;OACJ;KACJ,CAAC;EACN,CAAC;EAEO,YAAY,CAAC,SAAwB;IACzC,MAAM,UAAU,GAAqC;MACjD,YAAY,EAAE,YAAY;MAC1B,IAAI,EAAE,MAAM;MACZ,UAAU,EAAE,UAAU;MACtB,aAAa,EAAE,aAAa;MAC5B,KAAK,EAAE,OAAO;MACd,WAAW,EAAE,WAAW;MACxB,WAAW,EAAE,WAAW;MACxB,GAAG,EAAE,KAAK;MACV,SAAS,EAAE,SAAS;MACpB,cAAc,EAAE,cAAc;MAC9B,MAAM,EAAE,QAAQ;MAChB,YAAY,EAAE,YAAY;KAC7B,CAAC;IAEF,OAAO,UAAU,CAAC,SAAS,CAAC,CAAC;EACjC,CAAC;EAEO,gBAAgB,CAAC,SAAwB;IAC7C,MAAM,cAAc,GAAqC;MACrD,YAAY,EAAE,aAAa;MAC3B,IAAI,EAAE,OAAO;MACb,UAAU,EAAE,WAAW;MACvB,aAAa,EAAE,YAAY;MAC3B,KAAK,EAAE,MAAM;MACb,WAAW,EAAE,UAAU;MACvB,WAAW,EAAE,cAAc;MAC3B,GAAG,EAAE,QAAQ;MACb,SAAS,EAAE,YAAY;MACvB,cAAc,EAAE,WAAW;MAC3B,MAAM,EAAE,KAAK;MACb,YAAY,EAAE,SAAS;KAC1B,CAAC;IAEF,OAAO,cAAc,CAAC,SAAS,CAAC,CAAC;EACrC,CAAC;EAEO,6BAA6B;IACjC,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CACvB,QAAQ,CAAC,eAAe,CAAC,YAAY,IAAI,CAAC,EAC1C,MAAM,CAAC,WAAW,IAAI,CAAC,CAC1B,CAAC;IAEF,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC1D,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;IAChD,MAAM,sBAAsB,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IAChE,MAAM,kBAAkB,GAAG,EAAE,CAAC;IAC9B,MAAM,SAAS,GACX,IAAI,CAAC,GAAG,CAAC,sBAAsB,EAAE,sBAAsB,CAAC;MACxD,kBAAkB,CAAC;IAEvB,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,SAAS,IAAI,CAAC;EACtD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n createPopper,\n Instance,\n OptionsGeneric,\n Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\n/**\n * The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n *\n * When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n *\n * This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n *\n * Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n *\n * :::important\n * There are some caveats when using this component\n *\n * 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * 4. When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * :::\n *\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\n@Component({\n tag: 'limel-portal',\n shadow: true,\n styleUrl: 'portal.scss',\n})\nexport class Portal {\n /**\n * Decides which direction the portal content should open.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom';\n\n /**\n * Position of the content.\n */\n @Prop({ reflect: true })\n public position: 'fixed' | 'absolute' = 'absolute';\n\n /**\n * A unique ID.\n */\n @Prop({ reflect: true })\n public containerId: string;\n\n /**\n * Dynamic styling that can be applied to the container holding the content.\n */\n @Prop()\n public containerStyle: object = {};\n\n /**\n * The `parent` property specifies the parent element where the content\n * of the portal will be moved to.\n * By default, it is set to `document.body`, meaning the content\n * will be appended as a child of the body element in the DOM.\n * If you want the content to be appended to a different element,\n * you can specify that element by setting this property.\n * Please note that the specified parent element should exist\n * in the DOM at the time of rendering the portal.\n */\n @Prop()\n public parent: HTMLElement = document.body;\n\n /**\n * Used to make a dropdown have the same width as the trigger, for example\n * in `limel-picker`.\n */\n @Prop({ reflect: true })\n public inheritParentWidth = false;\n\n /**\n * True if the content within the portal should be visible.\n *\n * If the content is from within a dialog for instance, this can be set to\n * true from false when the dialog opens to position the content properly.\n */\n @Prop({ reflect: true })\n public visible = false;\n\n /**\n * The element that the content should be positioned relative to.\n * Defaults to the limel-portal element.\n */\n @Prop()\n public anchor?: HTMLElement = null;\n\n @Element()\n private host: HTMLLimelPortalElement;\n\n private parents: WeakMap<HTMLElement, HTMLElement>;\n private container: HTMLElement;\n private popperInstance: Instance;\n private loaded = false;\n private observer: ResizeObserver;\n\n constructor() {\n this.parents = new WeakMap();\n }\n\n public disconnectedCallback() {\n this.removeContainer();\n this.destroyPopper();\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n public connectedCallback() {\n if (!this.loaded) {\n return;\n }\n\n if (this.visible) {\n this.init();\n }\n }\n\n public componentDidLoad() {\n this.loaded = true;\n this.connectedCallback();\n }\n\n private init() {\n this.createContainer();\n this.hideContainer();\n this.attachContainer();\n this.styleContainer();\n\n if (this.visible) {\n this.createPopper();\n this.showContainer();\n }\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(() => {\n if (this.popperInstance) {\n this.styleContainer();\n this.popperInstance.update();\n }\n });\n observer.observe(this.container);\n }\n }\n\n public render() {\n return <slot />;\n }\n\n @Watch('visible')\n protected onVisible() {\n if (!this.container && this.visible) {\n this.init();\n }\n\n if (!this.visible) {\n this.hideContainer();\n this.styleContainer();\n this.destroyPopper();\n\n return;\n }\n\n this.styleContainer();\n this.createPopper();\n requestAnimationFrame(() => {\n this.showContainer();\n });\n }\n\n private createContainer() {\n const slot: HTMLSlotElement =\n this.host.shadowRoot.querySelector('slot');\n const content =\n (slot.assignedElements && slot.assignedElements()) || [];\n\n this.container = document.createElement('div');\n this.container.setAttribute('id', this.containerId);\n this.container.setAttribute('class', 'limel-portal--container');\n this.container.style.fontFamily =\n 'var(--limel-portal-font-family, inherit)';\n Object.assign(this.container, {\n portalSource: this.host,\n });\n\n content.forEach((element: HTMLElement) => {\n this.parents.set(element, element.parentElement);\n this.container.appendChild(element);\n });\n }\n\n private attachContainer() {\n this.parent.appendChild(this.container);\n }\n\n private removeContainer() {\n if (!this.container) {\n return;\n }\n\n Array.from(this.container.children).forEach((element: HTMLElement) => {\n const parent = this.parents.get(element);\n if (!parent) {\n return;\n }\n\n parent.appendChild(element);\n });\n\n this.hideContainer();\n this.container.parentElement.removeChild(this.container);\n }\n\n private hideContainer() {\n this.container.style.opacity = '0';\n }\n\n private showContainer() {\n this.container.style.opacity = '1';\n }\n\n private styleContainer() {\n const hostWidth = this.host.getBoundingClientRect().width;\n\n if (this.visible) {\n this.container.style.display = 'block';\n } else {\n this.container.style.display = 'none';\n }\n\n if (this.inheritParentWidth) {\n const containerWidth = this.getContentWidth(this.container);\n let width = containerWidth;\n if (hostWidth > 0) {\n width = hostWidth;\n }\n\n this.container.style.width = `${width}px`;\n }\n\n this.ensureContainerFitsInViewPort();\n\n Object.keys(this.containerStyle).forEach((property) => {\n this.container.style[property] = this.containerStyle[property];\n });\n }\n\n private getContentWidth(element: HTMLElement | Element) {\n if (!element) {\n return null;\n }\n\n const width = element.getBoundingClientRect().width;\n if (width !== 0) {\n return width;\n }\n\n const elementContent = element.querySelector('*');\n\n return this.getContentWidth(elementContent);\n }\n\n private createPopper() {\n const config = this.createPopperConfig();\n\n this.popperInstance = createPopper(\n this.anchor || this.host,\n this.container,\n config,\n );\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n private createPopperConfig(): Partial<\n OptionsGeneric<Partial<FlipModifier>>\n > {\n const placement = this.getPlacement(this.openDirection);\n const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n return {\n strategy: this.position,\n placement: placement,\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements: [flipPlacement],\n },\n },\n ],\n };\n }\n\n private getPlacement(direction: OpenDirection): Placement {\n const placements: Record<OpenDirection, Placement> = {\n 'left-start': 'left-start',\n left: 'left',\n 'left-end': 'left-end',\n 'right-start': 'right-start',\n right: 'right',\n 'right-end': 'right-end',\n 'top-start': 'top-start',\n top: 'top',\n 'top-end': 'top-end',\n 'bottom-start': 'bottom-start',\n bottom: 'bottom',\n 'bottom-end': 'bottom-end',\n };\n\n return placements[direction];\n }\n\n private getFlipPlacement(direction: OpenDirection): Placement {\n const flipPlacements: Record<OpenDirection, Placement> = {\n 'left-start': 'right-start',\n left: 'right',\n 'left-end': 'right-end',\n 'right-start': 'left-start',\n right: 'left',\n 'right-end': 'left-end',\n 'top-start': 'bottom-start',\n top: 'bottom',\n 'top-end': 'bottom-end',\n 'bottom-start': 'top-start',\n bottom: 'top',\n 'bottom-end': 'top-end',\n };\n\n return flipPlacements[direction];\n }\n\n private ensureContainerFitsInViewPort() {\n const viewHeight = Math.max(\n document.documentElement.clientHeight || 0,\n window.innerHeight || 0,\n );\n\n const { top, bottom } = this.host.getBoundingClientRect();\n const spaceAboveTopOfSurface = Math.max(top, 0);\n const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n const extraCosmeticSpace = 16;\n const maxHeight =\n Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n extraCosmeticSpace;\n\n this.container.style.maxHeight = `${maxHeight}px`;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"portal.js","sourceRoot":"","sources":["../../../src/components/portal/portal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport {\n createPopper,\n Instance,\n OptionsGeneric,\n Placement,\n} from '@popperjs/core';\nimport { FlipModifier } from '@popperjs/core/lib/modifiers/flip';\n\nconst IS_VISIBLE_CLASS = 'is-visible';\n\n/**\n * The portal component provides a way to render children into a DOM node that\n * exist outside the DOM hierarchy of the parent component.\n *\n * When the limel-portal component is used, it creates a new DOM node (a div element)\n * and appends it to a parent element (by default, the body of the document).\n * The child elements of the limel-portal are then moved from\n * their original location in the DOM to this new div element.\n *\n * This technique is often used to overcome CSS stacking context issues,\n * or to render UI elements like modals, dropdowns, tooltips, etc.,\n * that need to visually \"break out\" of their container.\n *\n * Using this component, we ensure that the content is always rendered in the\n * correct position, and never covers its own trigger, or another component\n * that is opened in the stacking layer. This way, we don't need to worry about\n * z-indexes, or other stacking context issues.\n *\n * :::important\n * There are some caveats when using this component\n *\n * 1. Events might not bubble up as expected since the content is moved out to\n * another DOM node.\n * 2. Any styling that is applied to content from the parent will be lost, if the\n * content is just another web-component it will work without any issues.\n * Alternatively, use the `style=\"\"` html attribute.\n * 3. Any component that is placed inside the container must have a style of\n * `max-height: inherit`. This ensures that its placement is calculated\n * correctly in relation to the trigger, and that it never covers its own\n * trigger.\n * 4. When the node is moved in the DOM, `disconnectedCallback` and\n * `connectedCallback` will be invoked, so if `disconnectedCallback` is used\n * to do any tear-down, the appropriate setup will have to be done again on\n * `connectedCallback`.\n * :::\n *\n * @slot - Content to put inside the portal\n * @private\n * @exampleComponent limel-example-portal-basic\n */\n@Component({\n tag: 'limel-portal',\n shadow: true,\n styleUrl: 'portal.scss',\n})\nexport class Portal {\n /**\n * Decides which direction the portal content should open.\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'bottom';\n\n /**\n * Position of the content.\n */\n @Prop({ reflect: true })\n public position: 'fixed' | 'absolute' = 'absolute';\n\n /**\n * A unique ID.\n */\n @Prop({ reflect: true })\n public containerId: string;\n\n /**\n * Dynamic styling that can be applied to the container holding the content.\n */\n @Prop()\n public containerStyle: object = {};\n\n /**\n * The `parent` property specifies the parent element where the content\n * of the portal will be moved to.\n * By default, it is set to `document.body`, meaning the content\n * will be appended as a child of the body element in the DOM.\n * If you want the content to be appended to a different element,\n * you can specify that element by setting this property.\n * Please note that the specified parent element should exist\n * in the DOM at the time of rendering the portal.\n */\n @Prop()\n public parent: HTMLElement = document.body;\n\n /**\n * Used to make a dropdown have the same width as the trigger, for example\n * in `limel-picker`.\n */\n @Prop({ reflect: true })\n public inheritParentWidth = false;\n\n /**\n * True if the content within the portal should be visible.\n *\n * If the content is from within a dialog for instance, this can be set to\n * true from false when the dialog opens to position the content properly.\n */\n @Prop({ reflect: true })\n public visible = false;\n\n /**\n * The element that the content should be positioned relative to.\n * Defaults to the limel-portal element.\n */\n @Prop()\n public anchor?: HTMLElement = null;\n\n @Element()\n private host: HTMLLimelPortalElement;\n\n private parents: WeakMap<HTMLElement, HTMLElement>;\n private container: HTMLElement;\n private popperInstance: Instance;\n private loaded = false;\n private observer: ResizeObserver;\n\n constructor() {\n this.parents = new WeakMap();\n }\n\n public disconnectedCallback() {\n this.removeContainer();\n this.destroyPopper();\n if (this.observer) {\n this.observer.unobserve(this.container);\n }\n }\n\n public connectedCallback() {\n if (!this.loaded) {\n return;\n }\n\n if (this.visible) {\n this.init();\n }\n }\n\n public componentDidLoad() {\n this.loaded = true;\n this.connectedCallback();\n }\n\n private init() {\n this.createContainer();\n this.hideContainer();\n this.attachContainer();\n this.styleContainer();\n\n if (this.visible) {\n this.createPopper();\n this.showContainer();\n }\n\n if ('ResizeObserver' in window) {\n const observer = new ResizeObserver(() => {\n if (this.popperInstance) {\n this.styleContainer();\n this.popperInstance.update();\n }\n });\n observer.observe(this.container);\n }\n }\n\n public render() {\n return <slot />;\n }\n\n @Watch('visible')\n protected onVisible() {\n if (!this.container && this.visible) {\n this.init();\n }\n\n if (!this.visible) {\n this.hideContainer();\n this.styleContainer();\n this.destroyPopper();\n\n return;\n }\n\n this.styleContainer();\n this.createPopper();\n requestAnimationFrame(() => {\n this.showContainer();\n });\n }\n\n private createContainer() {\n const slot: HTMLSlotElement =\n this.host.shadowRoot.querySelector('slot');\n const content =\n (slot.assignedElements && slot.assignedElements()) || [];\n\n this.container = document.createElement('div');\n this.container.setAttribute('id', this.containerId);\n this.container.setAttribute('class', 'limel-portal--container');\n Object.assign(this.container, {\n portalSource: this.host,\n });\n\n content.forEach((element: HTMLElement) => {\n this.parents.set(element, element.parentElement);\n this.container.appendChild(element);\n });\n }\n\n private attachContainer() {\n this.parent.appendChild(this.container);\n }\n\n private removeContainer() {\n if (!this.container) {\n return;\n }\n\n Array.from(this.container.children).forEach((element: HTMLElement) => {\n const parent = this.parents.get(element);\n if (!parent) {\n return;\n }\n\n parent.appendChild(element);\n });\n\n this.hideContainer();\n this.container.parentElement.removeChild(this.container);\n }\n\n private hideContainer() {\n if (!this.container) {\n return;\n }\n\n this.container.classList.remove(IS_VISIBLE_CLASS);\n }\n\n private showContainer() {\n this.container.classList.add(IS_VISIBLE_CLASS);\n }\n\n private styleContainer() {\n this.setContainerWidth();\n this.setContainerHeight();\n this.setContainerStyles();\n }\n\n private setContainerWidth() {\n const hostWidth = this.host.getBoundingClientRect().width;\n\n if (this.inheritParentWidth) {\n const containerWidth = this.getContentWidth(this.container);\n let width = containerWidth;\n if (hostWidth > 0) {\n width = hostWidth;\n }\n\n this.container.style.width = `${width}px`;\n }\n }\n\n private getContentWidth(element: HTMLElement | Element) {\n if (!element) {\n return null;\n }\n\n const width = element.getBoundingClientRect().width;\n if (width !== 0) {\n return width;\n }\n\n const elementContent = element.querySelector('*');\n\n return this.getContentWidth(elementContent);\n }\n\n private setContainerStyles() {\n Object.keys(this.containerStyle).forEach((property) => {\n this.container.style[property] = this.containerStyle[property];\n });\n }\n\n private createPopper() {\n const config = this.createPopperConfig();\n\n this.popperInstance = createPopper(\n this.anchor || this.host,\n this.container,\n config,\n );\n }\n\n private destroyPopper() {\n this.popperInstance?.destroy();\n this.popperInstance = null;\n }\n\n private createPopperConfig(): Partial<\n OptionsGeneric<Partial<FlipModifier>>\n > {\n const placement = this.getPlacement(this.openDirection);\n const flipPlacement = this.getFlipPlacement(this.openDirection);\n\n return {\n strategy: this.position,\n placement: placement,\n modifiers: [\n {\n name: 'flip',\n options: {\n fallbackPlacements: [flipPlacement],\n },\n },\n ],\n };\n }\n\n private getPlacement(direction: OpenDirection): Placement {\n const placements: Record<OpenDirection, Placement> = {\n 'left-start': 'left-start',\n left: 'left',\n 'left-end': 'left-end',\n 'right-start': 'right-start',\n right: 'right',\n 'right-end': 'right-end',\n 'top-start': 'top-start',\n top: 'top',\n 'top-end': 'top-end',\n 'bottom-start': 'bottom-start',\n bottom: 'bottom',\n 'bottom-end': 'bottom-end',\n };\n\n return placements[direction];\n }\n\n private getFlipPlacement(direction: OpenDirection): Placement {\n const flipPlacements: Record<OpenDirection, Placement> = {\n 'left-start': 'right-start',\n left: 'right',\n 'left-end': 'right-end',\n 'right-start': 'left-start',\n right: 'left',\n 'right-end': 'left-end',\n 'top-start': 'bottom-start',\n top: 'bottom',\n 'top-end': 'bottom-end',\n 'bottom-start': 'top-start',\n bottom: 'top',\n 'bottom-end': 'top-end',\n };\n\n return flipPlacements[direction];\n }\n\n private setContainerHeight() {\n const viewHeight = Math.max(\n document.documentElement.clientHeight || 0,\n window.innerHeight || 0,\n );\n\n const { top, bottom } = this.host.getBoundingClientRect();\n const spaceAboveTopOfSurface = Math.max(top, 0);\n const spaceBelowTopOfSurface = Math.max(viewHeight - bottom, 0);\n const extraCosmeticSpace = 16;\n const maxHeight =\n Math.max(spaceAboveTopOfSurface, spaceBelowTopOfSurface) -\n extraCosmeticSpace;\n\n this.container.style.maxHeight = `${maxHeight}px`;\n }\n}\n"]}
|
|
@@ -23710,13 +23710,24 @@ class CollapsibleItemTemplate extends react.Component {
|
|
|
23710
23710
|
constructor(props) {
|
|
23711
23711
|
super(props);
|
|
23712
23712
|
this.props = props;
|
|
23713
|
+
this.state = {
|
|
23714
|
+
isOpen: false,
|
|
23715
|
+
};
|
|
23716
|
+
this.handleOpen = () => {
|
|
23717
|
+
this.setState({
|
|
23718
|
+
isOpen: true,
|
|
23719
|
+
});
|
|
23720
|
+
};
|
|
23713
23721
|
this.handleAction = this.handleAction.bind(this);
|
|
23714
23722
|
this.isDeepEmpty = this.isDeepEmpty.bind(this);
|
|
23715
|
-
this.
|
|
23723
|
+
this.setState({
|
|
23724
|
+
isOpen: this.isDeepEmpty(props.data),
|
|
23725
|
+
});
|
|
23716
23726
|
}
|
|
23717
23727
|
componentDidMount() {
|
|
23718
23728
|
const section = this.refs.section;
|
|
23719
23729
|
section.addEventListener('action', this.handleAction);
|
|
23730
|
+
section.addEventListener('open', this.handleOpen);
|
|
23720
23731
|
this.setActions(section);
|
|
23721
23732
|
}
|
|
23722
23733
|
componentDidUpdate() {
|
|
@@ -23726,15 +23737,20 @@ class CollapsibleItemTemplate extends react.Component {
|
|
|
23726
23737
|
componentWillUnmount() {
|
|
23727
23738
|
const section = this.refs.section;
|
|
23728
23739
|
section.removeEventListener('action', this.handleAction);
|
|
23740
|
+
section.removeEventListener('open', this.handleOpen);
|
|
23729
23741
|
}
|
|
23730
23742
|
render() {
|
|
23731
23743
|
const { data, schema, formSchema } = this.props;
|
|
23744
|
+
let children;
|
|
23745
|
+
if (this.state.isOpen) {
|
|
23746
|
+
children = this.props.item.children;
|
|
23747
|
+
}
|
|
23732
23748
|
return react.createElement('limel-collapsible-section', {
|
|
23733
23749
|
header: findTitle(data, schema, formSchema) || 'New item',
|
|
23734
23750
|
class: 'limel-form-array-item--object',
|
|
23735
23751
|
ref: 'section',
|
|
23736
|
-
'is-open': this.isOpen,
|
|
23737
|
-
},
|
|
23752
|
+
'is-open': this.state.isOpen,
|
|
23753
|
+
}, children);
|
|
23738
23754
|
}
|
|
23739
23755
|
setActions(element) {
|
|
23740
23756
|
const { item, index } = this.props;
|