npm - @limetech/lime-elements - Versions diffs - 38.19.6 → 38.20.0 - Mend

@limetech/lime-elements 38.19.6 → 38.20.0

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 (63) hide show

package/dist/collection/components/grid/grid.js CHANGED Viewed

@@ -1,13 +1,16 @@
 import { h } from '@stencil/core';
 /**
- * The `limel-grid` component creates a grid which can be used to control the
- * layout of other components. It uses CSS [grid-template-areas](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas)
- * to enable easy configuration of its child-elements.
+ * This component is deprecated and will be removed in a future version of
+ * Lime Elements. Please use CSS for your flexible container needs 🙂
  *
- * @exampleComponent limel-example-grid
+ * @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
+ * @private
  * @slot - Grid content
  */
 export class Grid {
+  componentWillLoad() {
+    console.warn('limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout');
+  }
   render() {
     return h("slot", null);
   }

package/dist/collection/components/grid/grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;;;GAOG;AAMH,MAAM,OAAO,IAAI;EACN,MAAM;IACT,OAAO,eAAQ,CAAC;EACpB,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/*\n ~~The~~ ~~`limel-grid`~~ component ~~creates~~ a ~~grid~~ ~~which~~ ~~can~~ be ~~used~~ to ~~control~~ ~~the~~\n * ~~layout~~ of ~~other~~ ~~components.~~ It ~~uses~~ CSS ~~[grid-template-areas](~~https://developer.mozilla.org/en-US/docs/Web/CSS/~~grid-template-areas)~~\n * to enable easy configuration of its child-elements.\n \n @~~exampleComponent limel-example-grid~~\n * @slot - Grid content\n */\n@Component({\n tag: 'limel-grid',\n shadow: true,\n styleUrl: 'grid.scss',\n})\nexport class Grid {\n public render() {\n return <slot />;\n }\n}\n"]}
1	+ {"version":3,"file":"grid.js","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAE7C;;;;;;;GAOG;AAMH,MAAM,OAAO,IAAI;EACN,iBAAiB;IACpB,OAAO,CAAC,IAAI,CACR,oHAAoH,CACvH,CAAC;EACN,CAAC;EAEM,MAAM;IACT,OAAO,eAAQ,CAAC;EACpB,CAAC;;;;;;;;;CACJ","sourcesContent":["import { Component, h } from '@stencil/core';\n\n/*\n This component is deprecated and will be removed in a future version of\n * Lime Elements. Please use CSS for your flexible container needs 🙂\n \n @deprecated Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout\n * @private\n * @slot - Grid content\n */\n@Component({\n tag: 'limel-grid',\n shadow: true,\n styleUrl: 'grid.scss',\n})\nexport class Grid {\n public componentWillLoad() {\n console.warn(\n 'limel-grid is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout'\n );\n }\n\n public render() {\n return <slot />;\n }\n}\n"]}

package/dist/collection/components/list/list.css CHANGED Viewed

@@ -154,7 +154,6 @@
 limel-dynamic-label {
   margin-top: 0.375rem;
-  margin-left: 0.25rem;
 }
 .mdc-checkbox {
@@ -4684,7 +4683,6 @@ img {
 limel-dynamic-label {
   margin-top: 0.375rem;
-  margin-left: 0.25rem;
 }
 .mdc-checkbox {

package/dist/collection/components/menu-list/menu-list.css CHANGED Viewed

@@ -160,7 +160,6 @@
 limel-dynamic-label {
   margin-top: 0.375rem;
-  margin-left: 0.25rem;
 }
 .mdc-checkbox {
@@ -4754,7 +4753,6 @@ img {
 limel-dynamic-label {
   margin-top: 0.375rem;
-  margin-left: 0.25rem;
 }
 .mdc-checkbox {

package/dist/collection/components/switch/switch.js CHANGED Viewed

@@ -234,10 +234,7 @@ export class Switch {
         "required": false,
         "optional": true,
         "docs": {
-          "tags": [{
-              "name": "beta",
-              "text": undefined
-            }],
+          "tags": [],
           "text": "The labels to use to clarify what kind of data is being visualized,\nwhen the component is `readonly`."
         },
         "defaultValue": "[]"

package/dist/collection/components/switch/switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/*\n The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n \n The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n \n :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n \n @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n /\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /\n Label to display next to the switch\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to indicate that the current value is invalid.\n /\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /\n The value of the switch\n /\n @Prop({ reflect: true })\n public value = false;\n\n /\n Optional helper text to display below the switch\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The labels to use to clarify what kind of data is being visualized,\n * when the component is `readonly`.\n * @beta\n /\n @Prop()\n public readonlyLabels?: Array<Label<boolean>> = [];\n\n /\n Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n if (this.readonly) {\n let icon: string \| Icon = 'minus';\n if (this.value) {\n icon = {\n name: 'ok',\n color: 'var(--mdc-theme-primary)',\n };\n }\n\n return [\n <limel-dynamic-label\n value={this.value}\n aria-controls={this.helperTextId}\n defaultLabel={{ text: this.label, icon: icon }}\n labels={this.readonlyLabels}\n />,\n this.renderHelperLine(),\n ];\n }\n\n return [\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled}\n onClick={this.handleClick}\n aria-controls={this.helperTextId}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>,\n <label\n class={`${this.disabled ? 'disabled' : ''}`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>,\n this.renderHelperLine(),\n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n invalid={this.invalid}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}
1	+ {"version":3,"file":"switch.js","sourceRoot":"","sources":["../../../src/components/switch/switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { MDCSwitch } from '@material/switch';\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Prop,\n State,\n Watch,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n makeEnterClickable,\n removeEnterClickable,\n} from '../../util/make-enter-clickable';\nimport { Label } from '../dynamic-label/label.types';\nimport { Icon } from '../../interface';\n\n/*\n The Switch component is a fundamental element in UI design that serves as a toggle switch\n * to control the state of a specific setting or option in an application or website.\n * The two distinct positions of the Switch are visually indicative of the two states:\n * ON and OFF; making it easy for users to understand the current state of the controlled feature.\n \n The Switch component is widely used in user interfaces to enable users to\n * quickly and intuitively change binary settings.\n \n :::important\n * Checkboxes are sometimes used interchangeably with switches in user interfaces.\n * But there is an important difference between the two! Please read our guidelines about\n * [Switch vs. Checkbox](/#/DesignGuidelines/switch-vs-checkbox.md/).\n \n @exampleComponent limel-example-switch\n * @exampleComponent limel-example-switch-helper-text\n * @exampleComponent limel-example-switch-readonly\n /\n@Component({\n tag: 'limel-switch',\n shadow: true,\n styleUrl: 'switch.scss',\n})\nexport class Switch {\n /\n Label to display next to the switch\n /\n @Prop({ reflect: true })\n public label: string;\n\n /\n Disables the switch when `true`,\n * and visually shows that the switch is editable but disabled.\n * This tells the users that if certain requirements are met,\n * the switch may become interactable.\n /\n @Prop({ reflect: true })\n public disabled = false;\n\n /\n Disables the switch when `true`. This visualizes the switch slightly differently.\n * But shows no visual sign indicating that the switch is disabled\n * or can ever become interactable.\n /\n @Prop({ reflect: true })\n public readonly = false;\n\n /\n Set to `true` to indicate that the current value is invalid.\n /\n @Prop({ reflect: true })\n public invalid: boolean;\n\n /\n The value of the switch\n /\n @Prop({ reflect: true })\n public value = false;\n\n /\n Optional helper text to display below the switch\n /\n @Prop({ reflect: true })\n public helperText: string;\n\n /\n The labels to use to clarify what kind of data is being visualized,\n * when the component is `readonly`.\n /\n @Prop()\n public readonlyLabels?: Array<Label<boolean>> = [];\n\n /\n Emitted when the value has changed\n */\n @Event()\n private change: EventEmitter<boolean>;\n\n @Element()\n private host: HTMLLimelSwitchElement;\n private helperTextId: string = createRandomString();\n\n @State()\n private fieldId = createRandomString();\n\n private mdcSwitch: MDCSwitch;\n\n public connectedCallback() {\n this.initialize();\n }\n\n public componentWillLoad() {\n makeEnterClickable(this.host);\n }\n\n public componentDidLoad() {\n this.initialize();\n }\n\n private initialize() {\n const element = this.host.shadowRoot.querySelector(\n '.mdc-switch'\n ) as HTMLButtonElement;\n if (!element) {\n return;\n }\n\n this.mdcSwitch = new MDCSwitch(element);\n }\n\n public disconnectedCallback() {\n removeEnterClickable(this.host);\n this.mdcSwitch?.destroy();\n }\n\n public render() {\n if (this.readonly) {\n let icon: string \| Icon = 'minus';\n if (this.value) {\n icon = {\n name: 'ok',\n color: 'var(--mdc-theme-primary)',\n };\n }\n\n return [\n <limel-dynamic-label\n value={this.value}\n aria-controls={this.helperTextId}\n defaultLabel={{ text: this.label, icon: icon }}\n labels={this.readonlyLabels}\n />,\n this.renderHelperLine(),\n ];\n }\n\n return [\n <button\n id={this.fieldId}\n class={{\n 'mdc-switch': true,\n 'mdc-switch--unselected': !this.value,\n 'mdc-switch--selected': this.value,\n }}\n type=\"button\"\n role=\"switch\"\n aria-checked={this.value}\n disabled={this.disabled}\n onClick={this.handleClick}\n aria-controls={this.helperTextId}\n >\n <div class=\"mdc-switch__track\" />\n <div class=\"mdc-switch__handle-track\">\n <div class=\"mdc-switch__handle\">\n <div class=\"mdc-switch__shadow\">\n <div class=\"mdc-elevation-overlay\"></div>\n </div>\n <div class=\"mdc-switch__ripple\"></div>\n <div class=\"mdc-switch__icons\">\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--on\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M19.69,5.23L8.96,15.96l-4.23-4.23L2.96,13.5l6,6L21.46,7L19.69,5.23z\" />\n </svg>\n <svg\n class=\"mdc-switch__icon mdc-switch__icon--off\"\n viewBox=\"0 0 24 24\"\n >\n <path d=\"M20 13H4v-2h16v2z\" />\n </svg>\n </div>\n </div>\n </div>\n </button>,\n <label\n class={`${this.disabled ? 'disabled' : ''}`}\n htmlFor={this.fieldId}\n >\n {this.label}\n </label>,\n this.renderHelperLine(),\n ];\n }\n\n @Watch('value')\n protected valueWatcher(newValue: boolean) {\n if (!this.mdcSwitch) {\n return;\n }\n\n this.mdcSwitch.selected = newValue;\n }\n\n private renderHelperLine = () => {\n if (!this.hasHelperText()) {\n return;\n }\n\n return (\n <limel-helper-line\n helperTextId={this.helperTextId}\n helperText={this.helperText}\n invalid={this.invalid}\n />\n );\n };\n\n private hasHelperText = () => {\n return this.helperText !== null && this.helperText !== undefined;\n };\n\n private handleClick = (event: MouseEvent) => {\n event.stopPropagation();\n this.change.emit(!this.value);\n };\n}\n"]}