npm - @limetech/lime-elements - Versions diffs - 37.2.0-next.2 → 37.2.0-next.3 - Mend

@limetech/lime-elements 37.2.0-next.2 → 37.2.0-next.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.

Files changed (22) hide show

package/dist/esm/limel-help.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"limel-help.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,qmCAAqmC;;~~MC8BxmC~~,IAAI;;;~~IA4DL~~,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;;~~mBArDuB~~,GAAG;;~~yBAgBU~~,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,cACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;UACH,SAAS,EAAE,IAAI,CAAC,MAAM;SACzB,IAEA,IAAI,CAAC,OAAO,CACR,EACT,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU;KACnB,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class Help {\n /\n ~~The markdown content that will be displayed in the popover.\~~n /\n @Prop()\n public value: string;\n\n /\n ~~Visualizes the trigger element. Defaults to: ?\n * :::important~~\n * Be consistent across the product if you want to change it to a custom character.\n * All instances of the help component should have the same trigger visualization.\n * :::\n /\n @Prop()\n public trigger: string = '?';\n\n /\n ~~If supplied, it will render a~~ \~~"Read more\" link at the bottom of the content.\~~n * Even though you can add a link anywhere in the content, it is recommended to\n * use the read more link. Because it will always be displayed at the bottom\n * of the popover after the content, does not scroll away with the content,\n * and it will be styled in a consistent way.\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n ~~Decides the popover's location in relation to the trigger.\~~n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"version":3}
1	+ {"file":"limel-help.entry.js","mappings":";;AAAA,MAAM,OAAO,GAAG,qmCAAqmC;;MC+BxmC,IAAI;;;IAoDL,gBAAW,GAAG,CAAC,KAAiB;MACpC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;KACtB,CAAC;IAEM,mBAAc,GAAG,CAAC,KAAkB;MACxC,KAAK,CAAC,eAAe,EAAE,CAAC;MACxB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACvB,CAAC;;mBAjDuB,GAAG;;yBAYU,WAAW;kBAGhC,KAAK;;EAEf,MAAM;IACT,OAAO;MACH,qBACI,IAAI,EAAE,IAAI,CAAC,MAAM,EACjB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,aAAa,EAAE,IAAI,CAAC,aAAa,IAEjC,cACI,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,KAAK,EAAE;UACH,SAAS,EAAE,IAAI,CAAC,MAAM;SACzB,IAEA,IAAI,CAAC,OAAO,CACR,EACT,0BACI,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,YAAY,EAAE,IAAI,CAAC,YAAY,GACjC,CACU;KACnB,CAAC;GACL;;;;;;","names":[],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\nimport { Help as HelpInterface } from './help.types';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class Help implements HelpInterface {\n /\n @inheritdoc\n /\n @Prop()\n public value: string;\n\n /\n @inheritdoc\n /\n @Prop()\n public trigger: string = '?';\n\n /\n @inheritdoc\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n @inheritdoc\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"version":3}

package/dist/lime-elements/p-1ca94bcf.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["helpCss","Help","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class Help {\n /\n ~~The markdown content that will be displayed in the popover.\~~n /\n @Prop()\n public value: string;\n\n /\n ~~Visualizes the trigger element. Defaults to: ?\n * :::important~~\n * Be consistent across the product if you want to change it to a custom character.\n * All instances of the help component should have the same trigger visualization.\n * :::\n /\n @Prop()\n public trigger: string = '?';\n\n /\n ~~If supplied, it will render a~~ \~~"Read more\" link at the bottom of the content.\~~n * Even though you can add a link anywhere in the content, it is recommended to\n * use the read more link. Because it will always be displayed at the bottom\n * of the popover after the content, does not scroll away with the content,\n * and it will be styled in a consistent way.\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n ~~Decides the popover's location in relation to the trigger.\~~n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,omC,~~MC8BHC~~,EAAI,M,~~yBA4DLC~~,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,~~kCApDE~~,I,+~~CAgBa~~,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}
1	+ {"version":3,"names":["helpCss","Help","this","openPopover","event","stopPropagation","isOpen","onPopoverClose","render","h","open","onClose","openDirection","slot","onClick","class","trigger","value","readMoreLink"],"sources":["./src/components/help/help.scss?tag=limel-help&encapsulation=shadow","./src/components/help/help.tsx"],"sourcesContent":["@use '../../style/mixins';\n\nlimel-popover {\n display: flex;\n --popover-surface-width: min(calc(100vw - 4rem), 22rem);\n}\n\nbutton[slot='trigger'] {\n all: unset;\n\n @include mixins.is-flat-clickable(\n $color--hovered: rgb(var(--color-sky-dark)),\n $background-color: var(--lime-elevated-surface-background-color)\n );\n @include mixins.visualize-keyboard-focus;\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n color: rgb(var(--color-sky-default));\n border-radius: 50%;\n box-shadow: 0 0 0 1px rgb(var(--color-sky-lighter), 0.7);\n width: 0.875rem;\n height: 0.875rem;\n font-size: 0.75rem;\n\n &.is-open {\n color: rgb(var(--color-white));\n background-color: rgb(var(--color-sky-default));\n box-shadow: var(--button-shadow-inset);\n }\n}\n","import { Component, h, Prop, State } from '@stencil/core';\nimport { OpenDirection } from '../menu/menu.types';\nimport { Link } from '../../interface';\nimport { Help as HelpInterface } from './help.types';\n\n/*\n A good design is self-explanatory! However, sometimes concepts are\n * too complex to understand, no matter how well-designed a user interface is.\n * In such cases, contextual help can be a great way to provide users with\n * help precisely where and when users need it.\n \n In app interface design, providing contextual help emerges as a viable practice\n * for enhancing user experience and usability.\n * Contextual help serves as a quick-to-access guiding,\n * empowering users to more easily understand and navigate through\n * the intricacies of an application.\n \n Using this component designers empower users to grasp the functionality\n * of an app more effortlessly, minimizes the learning curve,\n * transforming complex features into accessible opportunities for exploration.\n \n @exampleComponent limel-example-help\n * @exampleComponent limel-example-read-more\n * @exampleComponent limel-example-open-direction\n * @exampleComponent limel-example-placement\n /\n@Component({\n tag: 'limel-help',\n shadow: true,\n styleUrl: 'help.scss',\n})\nexport class Help implements HelpInterface {\n /\n @inheritdoc\n /\n @Prop()\n public value: string;\n\n /\n @inheritdoc\n /\n @Prop()\n public trigger: string = '?';\n\n /\n @inheritdoc\n /\n @Prop()\n public readMoreLink?: Link;\n\n /\n @inheritdoc\n */\n @Prop({ reflect: true })\n public openDirection: OpenDirection = 'top-start';\n\n @State()\n private isOpen = false;\n\n public render() {\n return [\n <limel-popover\n open={this.isOpen}\n onClose={this.onPopoverClose}\n openDirection={this.openDirection}\n >\n <button\n slot=\"trigger\"\n onClick={this.openPopover}\n class={{\n 'is-open': this.isOpen,\n }}\n >\n {this.trigger}\n </button>\n <limel-help-content\n value={this.value}\n readMoreLink={this.readMoreLink}\n />\n </limel-popover>,\n ];\n }\n\n private openPopover = (event: MouseEvent) => {\n event.stopPropagation();\n this.isOpen = true;\n };\n\n private onPopoverClose = (event: CustomEvent) => {\n event.stopPropagation();\n this.isOpen = false;\n };\n}\n"],"mappings":"2CAAA,MAAMA,EAAU,omC,MC+BHC,EAAI,M,yBAoDLC,KAAAC,YAAeC,IACnBA,EAAMC,kBACNH,KAAKI,OAAS,IAAI,EAGdJ,KAAAK,eAAkBH,IACtBA,EAAMC,kBACNH,KAAKI,OAAS,KAAK,E,kCAhDE,I,+CAYa,Y,YAGrB,K,CAEVE,SACH,MAAO,CACHC,EAAA,iBACIC,KAAMR,KAAKI,OACXK,QAAST,KAAKK,eACdK,cAAeV,KAAKU,eAEpBH,EAAA,UACII,KAAK,UACLC,QAASZ,KAAKC,YACdY,MAAO,CACH,UAAWb,KAAKI,SAGnBJ,KAAKc,SAEVP,EAAA,sBACIQ,MAAOf,KAAKe,MACZC,aAAchB,KAAKgB,gB"}